feat: replaced download icon with cloud icon

cypress/integration/ambianic-tests/navbar.spec.js

@@ -5,8 +5,8 @@ context('Check Navbar Items', () => {
     cy.visit('http://localhost:8080/about')
   })
 
-  it('Should be a download off button before edge connection', () => {
-    cy.get('[data-cy=download-off]').should('exist')
+  it('Should display a connection-offline icon before edge connection', () => {
+    cy.get('[data-cy=connection-status]').should('exist')
   })
 
   /** future buttons

cypress/integration/ambianic-tests/timeline.spec.js

@@ -11,6 +11,7 @@ context('Timeline', () => {
       cy.url().should('include', '/timeline')
   })
 
+
   // Try to get this to work once we have mock data
 
   // it('Get timeline data', () => {

src/components/AppFrame.vue

@@ -3,6 +3,7 @@
   <div>
     <!-- nav goes here -->
     <NavBar />
+    <ComponentStatusSnack />
 
     <v-main>
       <v-container
@@ -27,11 +28,12 @@
 
 <script>
 import NavBar from './NavBar.vue'
+import ComponentStatusSnack from '@/components/shared/snackNotification'
 
 export default {
   name: 'AppFrame',
   components: {
-    UpdateNotification: () => import('./UpdateNotification'), NavBar
+    UpdateNotification: () => import('./UpdateNotification'), NavBar, ComponentStatusSnack
   },
   data: () => ({
     dialog: false,

src/components/NavBar.vue

@@ -26,13 +26,30 @@
         to="timeline"
       />
 
-      <nav-button
-        data-cy="download-off"
-        icon="download-off"
-        color="warning"
-        v-if="!isEdgeConnected"
-        to="edge-connect"
-      />
+      <div>
+        <v-tooltip bottom>
+          <template
+            v-if="!isEdgeConnected"
+            #activator="{ on, attrs }"
+          >
+            <div
+              v-bind="attrs"
+              v-on="on"
+            >
+              <nav-button
+                :id="connectionStatusIcon"
+                data-cy="connection-status"
+                :icon="connectionStatusIcon"
+                :color="connectionIconColor"
+                to="edge-connect"
+                v-bind="attrs"
+                v-on="on"
+              />
+            </div>
+          </template>
+          <span>{{ connectionStatusTooltipText }}</span>
+        </v-tooltip>
+      </div>
 
       <!-- Future navbar icons
       <v-text-field
@@ -174,11 +191,14 @@ export default {
     NavButton: () => import('./shared/Button.vue')
   },
   data: () => ({
+    connectionStatusIcon: 'cloud-off-outline',
     dialog: false,
     drawer: null, // hide drawer on mobile and show on desktop
     on: true,
+    connectionStatusTooltipText: 'Disconnected',
     newFavorites: 0,
     newAlerts: 2,
+    connectionIconColor: 'warning',
     logo: '../assets/logo5.svg',
     items: [
       { icon: 'history', text: 'Timeline', link: '/timeline' },
@@ -215,6 +235,19 @@ export default {
       { icon: 'info', text: 'About Ambianic', link: '/about' }
     ]
   }),
+  methods: {
+    setConnectionTooltipText () {
+      if (this.peerConnectionStatus === 'PEER_DISCONNECTED') {
+        this.connectionStatusTooltipText = 'Disconnected'
+        this.connectionStatusIcon = 'cloud-off-outline'
+        this.connectionIconColor = 'warning'
+      } else if (this.peerConnectionStatus === 'PEER_CONNECTING') {
+        this.connectionStatusIcon = 'cloud-sync-outline'
+        this.connectionIconColor = 'black'
+        this.connectionStatusTooltipText = 'Connecting ...'
+      }
+    }
+  },
   computed: {
     ...mapState({
       isEdgeConnected: function (state) {
@@ -223,16 +256,21 @@ export default {
         )
         const isConnected = state.pnp.peerConnectionStatus === PEER_CONNECTED
         return isConnected
-      }
+      },
+      peerConnectionStatus: state => state.pnp.peerConnectionStatus
     })
   },
   created () {
     if (!this.isEdgeConnected) {
       this.$store.dispatch(PEER_DISCOVER)
     }
+
+    this.setConnectionTooltipText()
+  },
+  watch: {
+    peerConnectionStatus: function () {
+      this.setConnectionTooltipText()
+    }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-</style>

src/components/shared/snackNotification.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="ConnectionStatusSnack-ctn">
+    <v-snackbar v-model="visibility">
+      <p id="snack-message">
+        {{ message }}
+      </p>
+
+      <template #action="{ attrs }">
+        <div
+          v-bind="attrs"
+          id="close-icon"
+          @click="handleClose"
+        >
+          <Button
+            icon="close"
+            color="white"
+          />
+        </div>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import AmbButton from '@/components/shared/Button'
+
+export default {
+  name: 'ConnectionStatusSnack',
+  data: () => ({
+    visibility: true,
+    message: 'Connecting to Ambianic Edge device'
+  }),
+  components: {
+    Button: AmbButton
+  },
+  created () {
+    this.setConnectionStatusNotification()
+    // this.handleClose()
+  },
+  computed: {
+    ...mapState({
+      peerConnectionStatus: state => state.pnp.peerConnectionStatus
+    })
+  },
+  methods: {
+    handleClose () {
+      this.visibility = false
+    },
+    setConnectionStatusNotification () {
+      switch (this.peerConnectionStatus) {
+        case 'PEER_CONNECTING':
+          this.message = 'Connecting to Ambianic Edge device'
+          this.visibility = true
+          break
+        case 'PEER_CONNECTED':
+          this.message = 'Connected to Ambianic Edge device'
+          this.visibility = true
+          break
+        case 'PEER_DISCONNECTED':
+          this.message = 'Disconnected from Ambianic Edge device'
+          this.visibility = true
+          break
+        default:
+          break
+      }
+    }
+  },
+  watch: {
+    peerConnectionStatus: function () {
+      this.setConnectionStatusNotification()
+    }
+  }
+}
+</script>
+
+<style>
+#snack-message {
+  padding-top: 5px;
+  font-size: .9rem;
+}
+</style>

src/views/Timeline.vue

@@ -224,11 +224,14 @@ import {
   NEW_REMOTE_PEER_ID
 } from '@/store/mutation-types'
 import moment from 'moment'
+
 Vue.use(VueObserveVisibility)
 const PAGE_SIZE = 5
 export default {
   data () {
     return {
+      connectionBarText: '',
+      connectionBarVisibility: false,
       timeline: [],
       clearTimeline: true, // flag to clear timeline when Edge Peer ID changes
       imageURL: {}, // map[id, fullURL] - maps unique event id to their full thumbnail URLs
@@ -252,6 +255,7 @@ export default {
   },
   beforeDestroy () {
     this.pnpUnsubscribe()
+    this.pnpUnsubscribe()
   },
   components: {
     DetectionBoxes: () => import('@/components/DetectionBoxes.vue'),

tests/unit/components/navbar.spec.js

@@ -4,7 +4,8 @@ import Vuetify from 'vuetify'
 import VueX from 'vuex'
 import VueRouter from 'vue-router'
 import NavBar from '@/components/NavBar.vue'
-import { PEER_DISCOVER } from '@/store/action-types'
+import { pnpStoreModule } from '@/store/pnp'
+import { PEER_CONNECTING, PEER_DISCONNECTED } from '@/store/mutation-types'
 
 describe('NavBar', () => {
 // global
@@ -13,7 +14,7 @@ describe('NavBar', () => {
   Vue.use(Vuetify) // for shallowshallowMount use
   localVue.use(VueX)
 
-  let store, state, getters, actions
+  let store
 
   // global
   localVue.use(VueRouter)
@@ -22,25 +23,10 @@ describe('NavBar', () => {
   const router = new VueRouter()
 
   beforeEach(() => {
-    state = {
-      pnp: {
-        peerConnectionStatus: jest.fn()
-      }
-    }
-
-    getters = {
-    //   ...
-    }
-
-    actions = {
-      [PEER_DISCOVER] (context) {
-      }
-    }
-
     store = new VueX.Store({
-      state,
-      getters,
-      actions
+      modules: {
+        pnp: pnpStoreModule
+      }
     })
 
     // using shallowMount with subtree components
@@ -75,4 +61,19 @@ describe('NavBar', () => {
     expect(nav.exists()).toBe(true)
     expect(item.length).toBe(5)
   })
+
+  test('`peerConnectionStatus` changes ConnectionStatusIcon icon', () => {
+    store.state.pnp.peerConnectionStatus = PEER_DISCONNECTED
+    expect(wrapper.find('#cloud-off-outline').exists()).toBeTruthy()
+
+    store.state.pnp.peerConnectionStatus = PEER_CONNECTING
+    const newComponent = wrapper = mount(NavBar, {
+      localVue,
+      vuetify,
+      router,
+      store
+    })
+
+    expect(newComponent.find('#cloud-sync-outline').exists()).toBeTruthy()
+  })
 })

tests/unit/components/shared/snackNotification.spec.js

@@ -0,0 +1,82 @@
+import Vue from 'vue'
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuetify from 'vuetify'
+import SnackNotification from '@/components/shared/snackNotification'
+import Vuex from 'vuex'
+import { pnpStoreModule } from '@/store/pnp'
+import { PEER_CONNECTED, PEER_CONNECTING, PEER_DISCONNECTED } from '@/store/mutation-types'
+
+describe('SnackNotification Component', () => {
+  let wrapper, store
+  const localVue = createLocalVue()
+
+  Vue.use(Vuetify)
+  Vue.use(Vuex)
+
+  const vuetify = new Vuetify()
+
+  beforeEach(() => {
+    store = new Vuex.Store({
+      modules: {
+        pnp: pnpStoreModule
+      }
+    })
+
+    wrapper = mount(SnackNotification, {
+      localVue,
+      vuetify,
+      store
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('It should contain a `p` element and close icon', () => {
+    expect(wrapper.find('#snack-message').exists()).toBeTruthy()
+    expect(wrapper.find('#close-icon').exists()).toBeTruthy()
+  })
+
+  it('Displayed text changes with `peerConnectionStatus` state', () => {
+    const connectingText = 'Connecting to Ambianic Edge device'
+    const connectedText = 'Connected to Ambianic Edge device'
+    const disconnectedText = 'Disconnected from Ambianic Edge device'
+
+    store.state.pnp.peerConnectionStatus = PEER_CONNECTING
+    const connectingComp = mount(SnackNotification, {
+      localVue,
+      vuetify,
+      store
+    })
+    expect(connectingComp.find('#snack-message').text()).toBe(connectingText)
+
+    store.state.pnp.peerConnectionStatus = PEER_CONNECTED
+    const connectedComp = mount(SnackNotification, {
+      localVue,
+      vuetify,
+      store
+    })
+    expect(connectedComp.find('#snack-message').text()).toBe(connectedText)
+
+    store.state.pnp.peerConnectionStatus = PEER_DISCONNECTED
+    const disconnectedComp = mount(SnackNotification, {
+      localVue,
+      vuetify,
+      store
+    })
+    expect(disconnectedComp.find('#snack-message').text()).toBe(disconnectedText)
+  })
+
+  it('`peerConnectionStatus` status controls SnackNotification visibility', () => {
+    store.state.pnp.peerConnectionStatus = PEER_CONNECTED
+
+    const newComponent = mount(SnackNotification, {
+      localVue,
+      vuetify,
+      store
+    })
+
+    expect(newComponent.find('#snack-message').exists()).toBeTruthy()
+  })
+})