Add ability to dismiss pilot notification

webui/src/components/platform/PlatformNotification.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition name="slide" v-if="!instanceIsRegistered && isOnline">
+  <transition name="slide" v-if="!instanceIsRegistered && isOnline && !platformNotificationIsHidden">
     <section class="app-section">
-      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-xl q-pb-lg">
+      <div class="app-section-wrap app-boxed app-boxed-xl q-pl-md q-pr-md q-pt-md">
-        <div class="platform-notification">
+        <div class="platform-notification q-pl-lg q-pr-lg q-pt-md q-pb-md">
           <p>
             <q-avatar color="accent" text-color="white" class="icon">
               <q-icon name="eva-alert-circle" />
@@ -10,6 +10,7 @@
             This Traefik Instance is not registered in your Traefik Pilot account yet.
           </p>
           <platform-action-button label="Register Traefik instance" @click="openPlatform" />
+          <q-btn round size="xs" color="accent" icon="close" class="btn close-btn" @click="hidePlatformNotification"></q-btn>
         </div>
       </div>
     </section>
@@ -25,9 +26,17 @@ export default {
   components: { PlatformActionButton },
   created () {
     this.getInstanceInfos()
+    console.log(`localStorage.getItem('platform_notification-is-hidden')`, localStorage.getItem('platform_notification-is-hidden'))
+    try {
+      if (localStorage.getItem('platform_notification-is-hidden') === 'true') {
+        this.hidePlatformNotification()
+      }
+    } catch (e) {
+      console.error('error reading localStorage', e)
+    }
   },
   computed: {
-    ...mapGetters('platform', { isPlatformOpen: 'isOpen' }),
+    ...mapGetters('platform', { isPlatformOpen: 'isOpen', platformNotificationIsHidden: 'notificationIsHidden' }),
     ...mapGetters('core', { instanceInfos: 'version' }),
     instanceIsRegistered () {
       return !!(this.instanceInfos && this.instanceInfos.uuid && this.instanceInfos.uuid.length > 0)
@@ -37,7 +46,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions('platform', { openPlatform: 'open' }),
+    ...mapActions('platform', { openPlatform: 'open', hidePlatformNotification: 'hideNotification' }),
     ...mapActions('core', { getInstanceInfos: 'getVersion' })
   },
   watch: {
@@ -46,6 +55,15 @@ export default {
       if (isClosed) {
         this.getInstanceInfos()
       }
+    },
+    platformNotificationIsHidden (newValue, oldValue) {
+      if (newValue !== oldValue) {
+        try {
+          localStorage.setItem('platform_notification-is-hidden', newValue ? 'true' : 'false')
+        } catch (e) {
+          console.error('error writing localStorage', e)
+        }
+      }
     }
   }
 }
@@ -55,8 +73,7 @@ export default {
   @import "../../css/sass/variables";
 
   .platform-notification {
-    min-height: 100px;
+    position: relative;
-    padding: 40px 36px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -66,6 +83,12 @@ export default {
     font-size: 16px;
   }
 
+  .close-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+  }
+
   p {
     margin: 0;
   }

webui/src/store/platform/index.js

@@ -3,11 +3,17 @@ export default {
   getters: {
     isOpen (state) {
       return state.isOpen
+    },
+    notificationIsHidden (state) {
+      return state.notificationIsHidden
     }
   },
   mutations: {
     toggle (state, isOpen) {
       state.isOpen = isOpen || !state.isOpen
+    },
+    toggleNotifVisibility (state, isHidden) {
+      state.notificationIsHidden = isHidden || !state.isHidden
     }
   },
   actions: {
@@ -19,9 +25,13 @@ export default {
     },
     close ({ commit }) {
       commit('toggle', false)
+    },
+    hideNotification ({ commit }) {
+      commit('toggleNotifVisibility', true)
     }
   },
   state: {
-    isOpen: false
+    isOpen: false,
+    notificationIsHidden: false
   }
 }