feat: Update connect profile Admin UI - MEED-2409 - Meeds-io/MIPs#64

Fix feedbacks
Meeds-io · Sep 14, 2023 · 0d011e9 · 0d011e9
1 parent e462937
commit 0d011e9
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 40 deletions.
diff --git a/...main/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorHook.vue b/...main/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorHook.vue
@@ -34,7 +34,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
           <v-list-item-title class="align-self-start">
             {{ title }}
           </v-list-item-title>
-          <v-list-item-subtitle class="text-truncate d-flex caption mt-1">{{ description }}</v-list-item-subtitle>
+          <v-list-item-subtitle v-if="description" class="text-truncate d-flex caption mt-1">{{ description }}</v-list-item-subtitle>
           <div class="d-flex flex-row">
             <span class="text-truncate d-flex caption d-content pt-2px"> {{ watchedByLabel }} </span>
             <exo-user-avatar
@@ -48,18 +48,16 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       <v-spacer />
       <div class="d-flex align-center px-2">
         <v-btn
-          small
           icon
           @click="editGithubWebHook">
-          <v-icon class="primary--text" size="18">fas fa-edit</v-icon>
+          <v-icon size="20">fas fa-edit</v-icon>
         </v-btn>
       </div>
-      <div class="d-flex align-center px-2">
+      <div class="d-flex align-center">
         <v-btn
-          small
           icon
           @click="deleteConfirmDialog">
-          <v-icon class="error-color" size="18">fas fa-trash-alt</v-icon>
+          <v-icon class="error-color mx-2" size="20">fas fa-trash-alt</v-icon>
         </v-btn>
       </div>
     </div>

diff --git a/.../webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorHookList.vue b/.../webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorHookList.vue
@@ -26,15 +26,13 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         </v-card-text>
       </div>
       <v-spacer />
-      <v-card-actions v-if="!emptyHookList" class="flex-wrap align-end">
-        <v-btn
-          class="ma-auto"
-          small
-          icon
-          @click="createGithubWebHook">
-          <v-icon class="primary--text" size="20">fas fa-plus</v-icon>
-        </v-btn>
-      </v-card-actions>
+      <v-btn
+        v-if="!emptyHookList"
+        class="ma-auto"
+        icon
+        @click="createGithubWebHook">
+        <v-icon class="mx-2 primary--text" size="20">fas fa-plus</v-icon>
+      </v-btn>
     </div>
     <div v-if="emptyHookList" class="d-flex align-center py-5">
       <v-btn

diff --git a/...main/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorItem.vue b/...main/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminConnectorItem.vue
@@ -56,29 +56,29 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         </div>
         <template v-if="connectionSettingStored">
           <v-spacer />
-          <v-card-actions class="flex-wrap align-end">
-            <v-btn
-              class="ma-auto"
-              small
-              icon
-              @click="openConnectionSetting">
-              <v-icon size="20">fas fa-edit</v-icon>
-            </v-btn>
-            <v-btn
-              class="ma-auto"
-              icon
-              outlined
-              small
-              @click="deleteConfirmDialog">
-              <v-icon class="error-color" size="18">fas fa-trash-alt</v-icon>
-            </v-btn>
+          <div class="d-flex flex-row">
             <v-switch
               v-model="enabled"
               color="primary"
-              class="px-2 ma-auto"
+              class="ma-auto"
               hide-details
               @change="saveConnectorSetting(enabled)" />
-          </v-card-actions>
+            <div class="d-flex align-center px-2">
+              <v-btn
+                icon
+                @click="openConnectionSetting">
+                <v-icon size="20">fas fa-edit</v-icon>
+              </v-btn>
+            </div>
+            <div class="d-flex align-center">
+              <v-btn
+                class="ma-auto"
+                icon
+                @click="deleteConfirmDialog">
+                <v-icon class="error-color" size="18">fas fa-trash-alt</v-icon>
+              </v-btn>
+            </div>
+          </div>
         </template>
       </div>
       <template v-if="displayEnableButton">

diff --git a/...ain/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminHookFormDrawer.vue b/...ain/webapp/vue-app/githubAdminConnectorExtension/components/GithubAdminHookFormDrawer.vue
@@ -48,8 +48,8 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                   <v-card-text class="ps-0 dark-grey-color">
                     {{ $t('githubConnector.admin.label.accessToken.instructions.stepOne') }}
                     (<a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic" target="_blank">{{ $t('githubConnector.admin.label.seeMore') }}
-                    <v-icon size="14" class="pb-1 pe-1">fas fa-external-link-alt</v-icon>
-                  </a>)
+                      <v-icon size="14" class="pb-1 pe-1">fas fa-external-link-alt</v-icon>
+                    </a>)
                   </v-card-text>
                   <v-card-text class="pt-0 ps-0 dark-grey-color">
                     {{ $t('githubConnector.admin.label.accessToken.instructions.stepTwo') }}
@@ -73,8 +73,12 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                     v-model="accessTokenInput"
                     :readonly="!isTokenEditing"
                     :placeholder="$t('githubConnector.admin.label.accessToken.placeholder')"
-                    :class="accessToken ? 'pa-0' : 'pa-0 me-8' "
-                    dense>
+                    class="pa-0"
+                    type="text"
+                    outlined
+                    required
+                    dense
+                    @keyup.enter="handleToken">
                     <template #append-outer>
                       <v-slide-x-reverse-transition mode="out-in">
                         <v-icon
@@ -97,14 +101,14 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
               :complete="stepper > 2"
               step="2"
               class="ma-0">
-              <span class="font-weight-bold dark-grey-color text-subtitle-1"><v-icon size="16" class="pe-2">mdi-webhook</v-icon>{{ $t('githubConnector.admin.label.identifyOrganization') }}</span>
+              <span class="font-weight-bold dark-grey-color text-subtitle-1">{{ $t('githubConnector.admin.label.identifyOrganization') }}</span>
             </v-stepper-step>
             <v-slide-y-transition>
               <div v-show="stepper > 1" class="px-6">
-                <v-card-text class="d-flex flex-grow-1 text-no-wrap text-left dark-grey-color text-subtitle-1 pb-2">
+                <v-card-text class="d-flex flex-grow-1 text-no-wrap text-left dark-grey-color text-subtitle-1 pb-2 ps-0">
                   {{ $t('githubConnector.admin.label.organization') }}
                 </v-card-text>
-                <v-card-text class="d-flex py-0">
+                <v-card-text class="d-flex py-0 ps-0">
                   <input
                     ref="organizationNameInput"
                     v-model="organizationName"
@@ -267,6 +271,14 @@ export default {
       this.organizationName = null;
       this.hook = {};
     },
+    handleToken() {
+      if (this.accessTokenInput) {
+        this.accessToken = this.accessTokenInput;
+        this.accessTokenInput = '*'.repeat(16);
+        this.isTokenEditing = false;
+        this.hookEdited = true;
+      }
+    }
   }
 };
 </script>