refactor(nav): convert user dropdown into generic reusable nav dropdo…

…wn (#301)
Kong · Nov 10, 2023 · 6323e44 · 6323e44
1 parent cea6f04
commit 6323e44
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 33 deletions.
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
@@ -8,7 +8,7 @@
         <img
           class="logo"
           :src="logoSrc"
-          :alt="helpText.logoAlt"
+          :alt="helpText.nav.logoAlt"
         >
       </router-link>
       <nav class="flex items-center links">
@@ -18,13 +18,22 @@
           class="mr-2 p-2 catalog-link"
         >
           <div class="background-color-wrapper" />
-          {{ helpText.catalog }}
+          {{ helpText.nav.catalog }}
         </router-link>
-
-        <UserDropdown
+        <NavDropdown
           v-if="developer && !isPublic"
-          :email="developer.email"
-          @logout="logout"
+          :label="developer.email"
+          :items="[
+            {
+              label: helpText.userDropdown.myApps,
+              routerLink: 'my-apps',
+            }, {
+              label: helpText.userDropdown.logout,
+              onClick: () => logout(),
+              testid: 'logout-item'
+            }
+          ]"
+          data-testid="user-dropdown"
         />
       </nav>
     </div>
@@ -35,16 +44,16 @@
 import { defineComponent } from 'vue'
 import { mapState, storeToRefs } from 'pinia'
 import { useI18nStore, useAppStore } from '@/stores'
-import UserDropdown from './UserDropdown.vue'
+import NavDropdown from './NavDropdown.vue'
 import usePortalApi from '@/hooks/usePortalApi'
 
 export default defineComponent({
   name: 'Nav',
-  components: { UserDropdown },
+  components: { NavDropdown },
   setup () {
     const appStore = useAppStore()
     const { globalLoading } = storeToRefs(appStore)
-    const helpText = useI18nStore().state.helpText.nav
+    const helpText = useI18nStore().state.helpText
 
     const logout = async () => {
       globalLoading.value = true

diff --git a/src/components/UserDropdown.vue → src/components/NavDropdown.vue b/src/components/UserDropdown.vue → src/components/NavDropdown.vue
@@ -1,8 +1,8 @@
 <template>
   <KToggle v-slot="{toggle, isToggled}">
     <div
-      data-testid="user-dropdown"
-      class="inline user-dropdown relative"
+      :data-testid="dataTestid"
+      class="inline nav-dropdown relative"
     >
       <div
         v-if="isToggled.value"
@@ -15,57 +15,70 @@
         appearance="btn-link"
         @click="toggle"
       >
-        {{ email }}
+        {{ label }}
       </KButton>
       <ul
         v-if="isToggled.value"
         class="list-none m-0 p-0 absolute w-40 shadow bg-white"
       >
         <li
-          data-testid="my-apps-item"
+          v-for="item of items"
+          :key="item.label"
           class="type-md block"
         >
           <router-link
-            :to="{ name: 'my-apps' }"
+            v-if="item.routerLink"
+            :data-testid="item.testid"
+            :to="{ name: item.routerLink }"
             class="color-text_colors-primary block py-3 px-4"
-            @click="toggle"
+            @click="(e) => { toggle(e); item.onClick?.() }"
           >
-            {{ helpText.myApps }}
+            {{ item.label }}
           </router-link>
-        </li>
-        <li
-          data-testid="logout-item"
-          class="py-3 px-4 type-md cursor-pointer logout-btn block color-text_colors-primary"
-          @click="$emit('logout')"
-        >
-          {{ helpText.logout }}
+          <div
+            v-else
+            :data-testid="item.testid"
+            class="color-text_colors-primary block py-3 px-4 cursor-pointer"
+            @click="(e) => { toggle(e); item.onClick?.() }"
+          >
+            {{ item.label }}
+          </div>
         </li>
       </ul>
     </div>
   </KToggle>
 </template>
 
 <script lang="ts">
-import { useI18nStore } from '@/stores'
-import { defineComponent } from 'vue'
+import { defineComponent, PropType } from 'vue'
 
 export default defineComponent({
-  name: 'UserDropdown',
+  name: 'NavDropdown',
   props: {
-    email: {
+    label: {
       type: String,
       required: true
+    },
+    items: {
+      type: Array as PropType<{
+        label: string
+        routerLink?: string
+        onClick?: () => void
+        testid?: string
+      }[]>,
+      required: true
+    },
+    dataTestid: {
+      type: String,
+      required: false,
+      default: ''
     }
-  },
-  emits: ['logout'],
-  data: () => ({
-    helpText: useI18nStore().state.helpText.userDropdown
-  })
+  }
 })
 </script>
 
 <style lang="scss">
-.user-dropdown {
+.nav-dropdown {
   --KButtonLink: var(--text_colors-header);
 
   .k-button {