src: layout and notification fixes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/header/ProjectMenu.vue

@@ -97,7 +97,7 @@ export default {
 <style lang="less" scoped>
 .project {
   &-select {
-    width: 30vw;
+    width: 40vw;
   }
 
   &-icon {

ui/src/layouts/ResourceLayout.vue

@@ -18,11 +18,11 @@
 <template>
   <div class="page-header-index-wide page-header-wrapper-grid-content-main">
     <a-row :gutter="12">
-      <a-col :md="24" :lg="7" style="margin-bottom: 12px">
+      <a-col :md="24" :lg="device === 'desktop' ? 7 : 8" style="margin-bottom: 12px">
         <slot name="left">
         </slot>
       </a-col>
-      <a-col :md="24" :lg="17">
+      <a-col :md="24" :lg="device === 'desktop' ? 17 : 16">
         <slot name="right">
         </slot>
       </a-col>
@@ -31,8 +31,11 @@
 </template>
 
 <script>
+import { mixinDevice } from '@/utils/mixin.js'
+
 export default {
-  name: 'ResourceLayout'
+  name: 'ResourceLayout',
+  mixins: [mixinDevice]
 }
 </script>
 

ui/src/utils/request.js

@@ -21,7 +21,7 @@ import config from '@/config/settings'
 import store from '@/store'
 import { VueAxios } from './axios'
 import notification from 'ant-design-vue/es/notification'
-import { ACCESS_TOKEN, CURRENT_PROJECT } from '@/store/mutation-types'
+import { CURRENT_PROJECT } from '@/store/mutation-types'
 
 const service = axios.create({
   baseURL: config.apiBase,
@@ -32,7 +32,6 @@ const err = (error) => {
   const response = error.response
   if (response) {
     console.log(response)
-    const token = Vue.ls.get(ACCESS_TOKEN)
     if (response.status === 403) {
       const data = response.data
       notification.error({ message: 'Forbidden', description: data.message })
@@ -41,14 +40,16 @@ const err = (error) => {
       if (response.config && response.config.params && ['listIdps'].includes(response.config.params.command)) {
         return
       }
-      notification.error({ message: 'Unauthorized', description: 'Session expired, authorization verification failed' })
-      if (token) {
-        store.dispatch('Logout').then(() => {
-          setTimeout(() => {
-            window.location.reload()
-          }, 1500)
-        })
-      }
+      notification.error({
+        message: 'Unauthorized',
+        description: 'Session expired, authorization verification failed',
+        key: 'http-401'
+      })
+      store.dispatch('Logout').then(() => {
+        setTimeout(() => {
+          window.location.reload()
+        }, 1500)
+      })
     }
     if (response.status === 404) {
       notification.error({ message: 'Not Found', description: 'Resource not found' })
@@ -58,7 +59,8 @@ const err = (error) => {
   if (error.isAxiosError && !error.response) {
     notification.warn({
       message: error.message || 'Network Error',
-      description: 'Unable to reach the management server or a browser extension may be blocking the network request.'
+      description: 'Unable to reach the management server or a browser extension may be blocking the network request.',
+      key: 'network-error'
     })
   }
   return Promise.reject(error)

ui/src/views/AutogenView.vue

@@ -19,11 +19,11 @@
   <div>
     <a-card class="breadcrumb-card">
       <a-row>
-        <a-col :span="12" style="padding-left: 6px">
+        <a-col :span="device === 'mobile' ? 24 : 12" style="padding-left: 12px">
           <breadcrumb :resource="resource">
             <a-tooltip placement="bottom" slot="end">
               <template slot="title">
-                {{ "Refresh" }}
+                {{ $t('label.refresh') }}
               </template>
               <a-button
                 style="margin-top: 4px"
@@ -32,13 +32,15 @@
                 size="small"
                 icon="reload"
                 @click="fetchData()">
-                {{ "Refresh" }}
+                {{ $t('label.refresh') }}
               </a-button>
             </a-tooltip>
           </breadcrumb>
         </a-col>
-        <a-col :span="12">
-          <span style="float: right">
+        <a-col
+          :span="device === 'mobile' ? 24 : 12"
+          :style="device !== 'mobile' ? { 'margin-bottom': '-6px' } : { 'margin-top': '12px', 'margin-bottom': '-6px' }">
+          <span :style="device !== 'mobile' ? { float: 'right' } : {}">
             <action-button
               style="margin-bottom: 5px"
               :loading="loading"
@@ -896,7 +898,7 @@ export default {
 .breadcrumb-card {
   margin-left: -24px;
   margin-right: -24px;
-  margin-top: -16px;
+  margin-top: -18px;
   margin-bottom: 12px;
 }