UI - Fixes UI bugs (#6162)

* fixes

* remove console

* fix hidden clear notification button

* fixes

* fixes

* fixes navigation to ssh from comments

Author: Hoang Nguyen

Diff for: ui/src/components/header/HeaderNotice.vue

@@ -68,11 +68,9 @@
 
 <script>
 import store from '@/store'
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'HeaderNotice',
-  components: { RenderIcon },
   data () {
     return {
       loading: false,

Diff for: ui/src/components/menu/SMenu.vue

@@ -61,11 +61,9 @@
 </template>
 
 <script>
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'SMenu',
-  components: { RenderIcon },
   props: {
     menu: {
       type: Array,

Diff for: ui/src/components/page/GlobalLayout.vue

@@ -209,6 +209,11 @@ export default {
         }, 16)
       })
     }
+    const countNotify = this.$store.getters.countNotify
+    this.showClear = false
+    if (countNotify && countNotify > 0) {
+      this.showClear = true
+    }
   },
   beforeUnmount () {
     document.body.classList.remove('dark')

Diff for: ui/src/components/page/PageHeader.vue

@@ -51,13 +51,9 @@
 </template>
 
 <script>
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'PageHeader',
-  components: {
-    RenderIcon
-  },
   props: {
     title: {
       type: String,

Diff for: ui/src/components/page/PageLayout.vue

@@ -54,14 +54,11 @@
 </template>
 
 <script>
-import RenderIcon from '@/utils/renderIcon'
-
 import PageHeader from './PageHeader'
 
 export default {
   name: 'LayoutContent',
   components: {
-    RenderIcon,
     PageHeader
   },
   // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']

Diff for: ui/src/components/view/ActionButton.vue

@@ -80,21 +80,19 @@
 
 <script>
 import { api } from '@/api'
-import RenderIcon from '@/utils/renderIcon'
 import Console from '@/components/widgets/Console'
 
 export default {
   name: 'ActionButton',
   components: {
-    RenderIcon,
     Console
   },
   data () {
     return {
       actionBadge: {}
     }
   },
-  mounted () {
+  created () {
     this.handleShowBadge()
   },
   props: {

Diff for: ui/src/components/view/InfoCard.vue

@@ -697,7 +697,6 @@
 
 <script>
 import { api } from '@/api'
-import RenderIcon from '@/utils/renderIcon'
 import Console from '@/components/widgets/Console'
 import OsLogo from '@/components/widgets/OsLogo'
 import Status from '@/components/widgets/Status'
@@ -714,8 +713,7 @@ export default {
     Status,
     TooltipButton,
     UploadResourceIcon,
-    ResourceIcon,
-    RenderIcon
+    ResourceIcon
   },
   props: {
     resource: {

Diff for: ui/src/components/view/ListView.vue

@@ -98,7 +98,7 @@
         </span>
 
         <span v-if="record.hasannotations">
-          <span v-if="record.id">
+          <span v-if="record.id && $route.path !== '/ssh'">
             <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
             <router-link :to="{ path: $route.path + '/' + record.id, query: { tab: 'comments' } }"><message-filled style="padding-left: 10px" size="small"/></router-link>
           </span>
@@ -398,7 +398,6 @@ import Status from '@/components/widgets/Status'
 import QuickView from '@/components/view/QuickView'
 import TooltipButton from '@/components/widgets/TooltipButton'
 import ResourceIcon from '@/components/view/ResourceIcon'
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'ListView',
@@ -407,8 +406,7 @@ export default {
     Status,
     QuickView,
     TooltipButton,
-    ResourceIcon,
-    RenderIcon
+    ResourceIcon
   },
   props: {
     columns: {
@@ -682,6 +680,9 @@ export default {
       return record.nic.filter(e => { return e.ip6address }).map(e => { return e.ip6address }).join(', ') || text
     },
     generateCommentsPath (record) {
+      if (this.entityTypeToPath(record.entitytype) === 'ssh') {
+        return '/' + this.entityTypeToPath(record.entitytype) + '/' + record.entityname
+      }
       return '/' + this.entityTypeToPath(record.entitytype) + '/' + record.entityid
     },
     generateHumanReadableEntityType (record) {

Diff for: ui/src/components/widgets/Breadcrumb.vue

@@ -61,11 +61,9 @@
 </template>
 
 <script>
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'Breadcrumb',
-  components: { RenderIcon },
   props: {
     resource: {
       type: Object,

Diff for: ui/src/components/widgets/TooltipButton.vue

@@ -20,47 +20,46 @@
     <template #title v-if="tooltip">
       {{ tooltip }}
     </template>
-    <a-button
-      style="margin-left: -5px"
-      v-if="copyResource"
-      shape="circle"
-      :size="size"
-      :type="type"
-      :danger="danger"
-      :disabled="disabled"
-      :class="buttonClass"
-      :loading="loading"
-      @click="handleClicked()"
-      v-clipboard:copy="copyResource" >
-      <template #icon v-if="icon"><render-icon :icon="icon" /></template>
-      <template v-if="iconType && iconTwoToneColor">
-        <render-icon :icon="iconType" :props="{ theme: 'twoTone', twoToneColor: iconTwoToneColor }" />
-      </template>
-    </a-button>
-    <a-button
-      v-else
-      shape="circle"
-      :size="size"
-      :type="type"
-      :danger="danger"
-      :disabled="disabled"
-      :class="buttonClass"
-      :loading="loading"
-      @click="handleClicked()" >
-      <template #icon v-if="icon"><render-icon :icon="icon" /></template>
-      <template v-if="iconType && iconTwoToneColor">
-        <render-icon :icon="iconType" :props="{ theme: 'twoTone', twoToneColor: iconTwoToneColor }" />
-      </template>
-    </a-button>
+    <span style="margin-right: 5px">
+      <a-button
+        v-if="copyResource"
+        shape="circle"
+        :size="size"
+        :type="type"
+        :danger="danger"
+        :disabled="disabled"
+        :class="buttonClass"
+        :loading="loading"
+        @click="handleClicked()"
+        v-clipboard:copy="copyResource" >
+        <template #icon v-if="icon"><render-icon :icon="icon" /></template>
+        <template v-if="iconType && iconTwoToneColor">
+          <render-icon :icon="iconType" :props="{ theme: 'twoTone', twoToneColor: iconTwoToneColor }" />
+        </template>
+      </a-button>
+      <a-button
+        v-else
+        shape="circle"
+        :size="size"
+        :type="type"
+        :danger="danger"
+        :disabled="disabled"
+        :class="buttonClass"
+        :loading="loading"
+        @click="handleClicked()" >
+        <template #icon v-if="icon"><render-icon :icon="icon" /></template>
+        <template v-if="iconType && iconTwoToneColor">
+          <render-icon :icon="iconType" :props="{ theme: 'twoTone', twoToneColor: iconTwoToneColor }" />
+        </template>
+      </a-button>
+    </span>
   </a-tooltip>
 </template>
 
 <script>
-import RenderIcon from '@/utils/renderIcon'
 
 export default {
   name: 'TooltipButton',
-  components: { RenderIcon },
   props: {
     tooltip: {
       type: String,

Diff for: ui/src/core/lazy_lib/icons_use.js

@@ -152,6 +152,7 @@ import {
   UploadOutlined,
   WifiOutlined
 } from '@ant-design/icons-vue'
+import renderIcon from '@/utils/renderIcon'
 
 export default {
   install: (app) => {
@@ -290,5 +291,6 @@ export default {
     app.component('UserOutlined', UserOutlined)
     app.component('UploadOutlined', UploadOutlined)
     app.component('WifiOutlined', WifiOutlined)
+    app.component('renderIcon', renderIcon)
   }
 }

Diff for: ui/src/layouts/UserLayout.vue

@@ -78,6 +78,11 @@ export default {
     if (layoutMode === 'dark') {
       document.body.classList.add('dark-mode')
     }
+    const countNotify = this.$store.getters.countNotify
+    this.showClear = false
+    if (countNotify && countNotify > 0) {
+      this.showClear = true
+    }
   },
   beforeUnmount () {
     document.body.classList.remove('userLayout')

Diff for: ui/src/style/vars.less

@@ -47,7 +47,7 @@
 @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
 @loading-color: @primary-color;
 
-.ant-layout.ant-layout-has-sider>.ant-layout,
+// .ant-layout.ant-layout-has-sider>.ant-layout,
 .ant-layout.ant-layout-has-sider>.ant-layout-content {
   width: auto;
 }
@@ -171,6 +171,18 @@ a {
   fill: @navigation-text-color;
 }
 
+.ant-menu-dark .ant-menu-item {
+  .anticon .custom-icon {
+    fill: @project-nav-text-color;
+  }
+
+  &.ant-menu-item-selected {
+    .anticon .custom-icon {
+      fill: #fff;
+    }
+  }
+}
+
 .ant-menu-item a {
   .anticon .custom-icon {
     transition: fill 0.3s ease-out;
@@ -180,6 +192,10 @@ a {
   }
 }
 
+.ant-menu-dark .ant-menu-item:hover .anticon .custom-icon {
+  fill: #fff;
+}
+
 .ant-menu-item:hover,
 .ant-menu-item-active,
 .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,

Diff for: ui/src/views/AutogenView.vue

@@ -1190,6 +1190,9 @@ export default {
                 })
               }
             }
+            if ('successMethod' in action) {
+              action.successMethod(this, result)
+            }
             resolve(true)
           },
           errorMethod: () => {

Diff for: ui/src/views/auth/Login.vue

@@ -282,6 +282,8 @@ export default {
       })
     },
     loginSuccess (res) {
+      this.$notification.destroy()
+      this.$store.commit('SET_COUNT_NOTIFY', 0)
       this.$router.push({ path: '/dashboard' }).catch(() => {})
     },
     requestFailed (err) {

Diff for: ui/src/views/compute/DeployVM.vue

@@ -1648,7 +1648,6 @@ export default {
     handleSubmitAndStay (e) {
       this.form.stayonpage = true
       this.handleSubmit(e.domEvent)
-      this.form.stayonpage = false
     },
     handleSubmit (e) {
       console.log('wizard submit')
@@ -1884,6 +1883,9 @@ export default {
         }).catch(error => {
           this.$notifyError(error)
           this.loading.deploy = false
+        }).finally(() => {
+          this.form.stayonpage = false
+          this.loading.deploy = false
         })
       }).catch(err => {
         this.formRef.value.scrollToField(err.errorFields[0].name)