feat: show cloud connection icon in navbar when UI is connected to an…

… edge device; closes #752
ambianic · Oct 11, 2021 · 6ee362f · 6ee362f
1 parent d94d4ef
commit 6ee362f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -29,12 +29,11 @@
       <div>
         <v-tooltip bottom>
           <template
-            v-if="!isEdgeConnected"
-            #activator="{ on, attrs }"
+            #activator="{ on : cloudIconOn, attrs }"
           >
             <div
               v-bind="attrs"
-              v-on="on"
+              v-on="cloudIconOn"
             >
               <nav-button
                 :id="connectionStatusIcon"
@@ -43,7 +42,7 @@
                 :color="connectionIconColor"
                 :to="connectionIconLink"
                 v-bind="attrs"
-                v-on="on"
+                v-on="cloudIconOn"
               />
             </div>
           </template>
@@ -237,16 +236,19 @@ export default {
   }),
   methods: {
     setConnectionTooltipText () {
+      this.connectionIconLink = '/settings'
+      this.connectionIconColor = 'info'
+
       if (this.peerConnectionStatus === 'PEER_DISCONNECTED') {
         this.connectionStatusTooltipText = 'Disconnected'
         this.connectionStatusIcon = 'cloud-off-outline'
         this.connectionIconColor = 'warning'
-        this.connectionIconLink = '/settings'
       } else if (this.peerConnectionStatus === 'PEER_CONNECTING') {
         this.connectionStatusIcon = 'cloud-sync-outline'
-        this.connectionIconColor = 'info'
         this.connectionStatusTooltipText = 'Connecting ...'
-        this.connectionIconLink = '/settings'
+      } else if (this.peerConnectionStatus === 'PEER_CONNECTED') {
+        this.connectionStatusIcon = 'cloud-check-outline'
+        this.connectionStatusTooltipText = 'Connected!'
       }
     }
   },
@@ -256,8 +258,7 @@ export default {
         console.debug(
           `app frame: state.pnp.peerConnectionStatus: ${state.pnp.peerConnectionStatus}`
         )
-        const isConnected = state.pnp.peerConnectionStatus === PEER_CONNECTED
-        return isConnected
+        return state.pnp.peerConnectionStatus === PEER_CONNECTED
       },
       peerConnectionStatus: state => state.pnp.peerConnectionStatus
     })

diff --git a/src/components/shared/ListItem.vue b/src/components/shared/ListItem.vue
@@ -63,22 +63,22 @@
         bottom
       >
         <template
-          #activator="{ on, attrs }"
+          #activator="{ on, eyeOffAttr }"
         >
           <v-icon
             v-if="sensitive"
             id="toggle-visibility"
             @click="sensitive = false"
             data-cy="icon-sensitive-on"
-            v-bind="attrs"
+            v-bind="eyeOffAttr"
             v-on="on"
           >
             mdi-eye
           </v-icon>
           <v-icon
             v-else
             @click="sensitive = true"
-            v-bind="attrs"
+            v-bind="eyeOffAttr"
             v-on="on"
           >
             mdi-eye-off-outline
@@ -88,14 +88,14 @@
       </v-tooltip>
       <v-tooltip bottom>
         <template
-          #activator="{ on, attrs }"
+          #activator="{ on, attrs : copyIcon }"
         >
           <v-icon
             v-if="copyOption"
             id="toggle-copy-option"
             @click="doCopy"
             data-cy="icon-copy-on"
-            v-bind="attrs"
+            v-bind="copyIcon"
             v-on="on"
           >
             content_copy
@@ -107,13 +107,13 @@
         bottom
         v-if="editOption && !isEditing"
       >
-        <template #activator="{ on, attrs }">
+        <template #activator="{ on, copyIcon }">
           <v-icon
             id="toggle-edit-option"
             @click="startEdit"
             data-cy="icon-start-edit"
             ref="icon-start-edit"
-            v-bind="attrs"
+            v-bind="copyIcon"
             v-on="on"
           >
             edit
@@ -125,13 +125,13 @@
         bottom
         v-if="editOption && isEditing"
       >
-        <template #activator="{ on, attrs }">
+        <template #activator="{ on, attrs : toggleIcon }">
           <v-icon
             id="toggle-edit-option"
             @click="saveEdit"
             data-cy="icon-save-edit"
             ref="icon-save-edit"
-            v-bind="attrs"
+            v-bind="toggleIcon"
             v-on="on"
           >
             done
@@ -143,13 +143,13 @@
         bottom
         v-if="editOption && isEditing"
       >
-        <template #activator="{ on, attrs }">
+        <template #activator="{ on, attrs : editIcon }">
           <v-icon
             id="toggle-edit-option"
             @click="cancelEdit"
             data-cy="icon-cancel-edit"
             ref="icon-cancel-edit"
-            v-bind="attrs"
+            v-bind="editIcon"
             v-on="on"
           >
             clear

diff --git a/tests/unit/components/navbar.spec.js b/tests/unit/components/navbar.spec.js
@@ -5,7 +5,7 @@ import VueX from 'vuex'
 import VueRouter from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
 import { pnpStoreModule } from '@/store/pnp'
-import { PEER_CONNECTING, PEER_DISCONNECTED } from '@/store/mutation-types'
+import { PEER_CONNECTING, PEER_DISCONNECTED, PEER_CONNECTED } from '@/store/mutation-types'
 
 describe('NavBar', () => {
 // global
@@ -75,5 +75,15 @@ describe('NavBar', () => {
     })
 
     expect(newComponent.find('#cloud-sync-outline').exists()).toBeTruthy()
+
+    store.state.pnp.peerConnectionStatus = PEER_CONNECTED
+    const connectedComponent = wrapper = mount(NavBar, {
+      localVue,
+      vuetify,
+      router,
+      store
+    })
+
+    expect(connectedComponent.find('#cloud-check-outline').exists()).toBeTruthy()
   })
 })