From 4bd0b1c24f12251c99b9fc3818add4bebd367258 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Tue, 11 Jun 2024 13:03:37 +0530
Subject: [PATCH] ui: refactor global createmenu (#9139)

Refactors global create menu code to make it visible only when any menu
is accessible.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/header/CreateMenu.vue | 181 ++++++++----------------
 1 file changed, 60 insertions(+), 121 deletions(-)

diff --git a/ui/src/components/header/CreateMenu.vue b/ui/src/components/header/CreateMenu.vue
index a1c40f38e1a..e80120d7a1c 100644
--- a/ui/src/components/header/CreateMenu.vue
+++ b/ui/src/components/header/CreateMenu.vue
@@ -16,138 +16,25 @@
 // under the License.
 
 <template>
-  <a-dropdown>
+  <a-dropdown v-if="accessibleCreateActions && accessibleCreateActions.length > 0">
     <template #overlay>
       <a-menu>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'deployVirtualMachine' in $store.getters.apis">
-          <router-link :to="{ path: '/action/deployVirtualMachine'}">
+        <a-menu-item style="width: 100%; padding: 12px" v-for="menuItem in accessibleCreateActions" :key="menuItem.api">
+          <router-link :to="menuItem.route">
             <a-row>
               <a-col style="margin-right: 12px">
                 <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
                   <template #icon>
-                    <cloud-server-outlined/>
+                    <render-icon v-if="(typeof menuItem.icon === 'string')" :icon="menuItem.icon" />
+                    <font-awesome-icon v-else :icon="menuItem.icon" />
                   </template>
                 </a-avatar>
               </a-col>
               <a-col>
                 <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.instance') }}
+                  {{ menuItem.title }}
                 </h3>
-                <small>{{ $t('label.create.instance') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'createKubernetesCluster' in $store.getters.apis">
-          <router-link :to="{ path: '/kubernetes', query: { action: 'createKubernetesCluster' } }">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.kubernetes') }}
-                </h3>
-                <small>{{ $t('label.kubernetes.cluster.create') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'createVolume' in $store.getters.apis">
-          <router-link :to="{ path: '/volume', query: { action: 'createVolume' } }">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <hdd-outlined />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.volume') }}
-                </h3>
-                <small>{{ $t('label.action.create.volume') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'createNetwork' in $store.getters.apis">
-          <router-link :to="{ path: '/guestnetwork', query: { action: 'createNetwork' } }">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <apartment-outlined />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.network') }}
-                </h3>
-                <small>{{ $t('label.add.network') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'createVPC' in $store.getters.apis">
-          <router-link :to="{ path: '/vpc', query: { action: 'createVPC' } }">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <deployment-unit-outlined />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.vpc') }}
-                </h3>
-                <small>{{ $t('label.add.vpc') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'registerTemplate' in $store.getters.apis">
-          <router-link :to="{ path: '/template', query: { action: 'registerTemplate' } }">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <picture-outlined />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.templatename') }}
-                </h3>
-                <small>{{ $t('label.action.register.template') }}</small>
-              </a-col>
-            </a-row>
-          </router-link>
-        </a-menu-item>
-        <a-menu-item style="width: 100%; padding: 12px" v-if="'deployVnfAppliance' in $store.getters.apis">
-          <router-link :to="{ path: '/action/deployVnfAppliance'}">
-            <a-row>
-              <a-col style="margin-right: 12px">
-                <a-avatar :style="{ backgroundColor: $config.theme['@primary-color'] }">
-                  <template #icon>
-                    <font-awesome-icon :icon="['fa-solid', 'fa-dharmachakra']" />
-                  </template>
-                </a-avatar>
-              </a-col>
-              <a-col>
-                <h3 style="margin-bottom: 0px;">
-                  {{ $t('label.vnf.appliance') }}
-                </h3>
-                <small>{{ $t('label.vnf.appliance.add') }}</small>
+                <small>{{ menuItem.subtitle }}</small>
               </a-col>
             </a-row>
           </router-link>
@@ -165,7 +52,59 @@
 
 export default {
   name: 'CreateMenu',
-  components: {
+  beforeCreate () {
+    const menuItems = [
+      {
+        api: 'deployVirtualMachine',
+        title: this.$t('label.instance'),
+        subtitle: this.$t('label.create.instance'),
+        icon: 'cloud-server-outlined',
+        route: { path: '/action/deployVirtualMachine' }
+      },
+      {
+        api: 'createKubernetesCluster',
+        title: this.$t('label.kubernetes'),
+        subtitle: this.$t('label.kubernetes.cluster.create'),
+        icon: ['fa-solid', 'fa-dharmachakra'],
+        route: { path: '/kubernetes', query: { action: 'createKubernetesCluster' } }
+      },
+      {
+        api: 'createVolume',
+        title: this.$t('label.volume'),
+        subtitle: this.$t('label.action.create.volume'),
+        icon: 'hdd-outlined',
+        route: { path: '/volume', query: { action: 'createVolume' } }
+      },
+      {
+        api: 'createNetwork',
+        title: this.$t('label.network'),
+        subtitle: this.$t('label.add.network'),
+        icon: 'apartment-outlined',
+        route: { path: '/guestnetwork', query: { action: 'createNetwork' } }
+      },
+      {
+        api: 'createVPC',
+        title: this.$t('label.vpc'),
+        subtitle: this.$t('label.add.vpc'),
+        icon: 'deployment-unit-outlined',
+        route: { path: '/vpc', query: { action: 'createVPC' } }
+      },
+      {
+        api: 'registerTemplate',
+        title: this.$t('label.templatename'),
+        subtitle: this.$t('label.action.register.template'),
+        icon: 'picture-outlined',
+        route: { path: '/template', query: { action: 'registerTemplate' } }
+      },
+      {
+        api: 'deployVnfAppliance',
+        title: this.$t('label.vnf.appliance'),
+        subtitle: this.$t('label.vnf.appliance.add'),
+        icon: 'gateway-outlined',
+        route: { path: '/action/deployVnfAppliance' }
+      }
+    ]
+    this.accessibleCreateActions = menuItems.filter(m => m.api in this.$store.getters.apis)
   }
 }
 </script>