fix: polish UI. Event page view. Add status snackbar close button. (#785)

Signed-off-by: ivelin <[email protected]>

Author: Ivelin Ivanov

.github/workflows/issue-cleanup.yml

@@ -0,0 +1,19 @@
+name: 'Lock Threads'
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+permissions:
+  issues: write
+  pull-requests: write
+
+concurrency:
+  group: lock
+
+jobs:
+  action:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v3

.github/workflows/lighthouse.yml

@@ -2,9 +2,11 @@
 
 name: Lighthouse PWA CI
 
-# Controls when the action will run. Triggers the workflow on push or pull request
-# events but only for the master branch
-on: [pull_request]
+on:
+  # Netlify pre-deploy only works on pull_request
+  pull_request:
+#    branches:
+#      - master
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
@@ -17,11 +19,11 @@ jobs:
     steps:
     - uses: actions/checkout@v2
     - name: Wait for Netlify preview deployment of this git branch
+      if: github.repository_owner == 'ambianic'
       uses: jakepartusch/wait-for-netlify-action@v1
       id: get-netlify-url
       with:
         site_name: "ambianic-pwa-dist"
-        max_timeout: 180
     - name: Run Lighthouse PWA check against Netlify PR Preview
       uses: treosh/lighthouse-ci-action@v8
       with:
@@ -31,7 +33,7 @@ jobs:
         temporaryPublicStorage: true # upload lighthouse report to the temporary storage
         # budgetPath: '.github/lighthouse/budget.json' # performance budgets
         configPath: '.github/lighthouse/lighthouserc-netlify-preview.json' # PWA checks
-    - name: Run Lighthouse PWA sanity check against Netlify production deployment
+    - name: Run Lighthouse PWA sanity check against the existing Netlify production deployment
       uses: treosh/lighthouse-ci-action@v8
       with:
         urls: |

.github/workflows/main.yml

@@ -1,8 +1,7 @@
 name: CI for Ambianic UI
 
 on:
-  # Trigger the workflow on push or pull request,
-  # but only for the master branch
+  # Trigger the workflow on push and pull requests
   push:
 #    branches:
 #      - master

package-lock.json

@@ -75,7 +75,7 @@
     "husky": "^7.0.2",
     "istanbul-lib-coverage": "^3.0.0",
     "jest": "^26.0.1",
-    "jest-extended": "^1.1.0",
+    "jest-extended": "^1.2.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash": "^4.17.21",
     "nyc": "^15.0.1",

package.json

@@ -11,13 +11,12 @@
       <template #action="{ attrs }">
         <div
           v-bind="attrs"
-          id="close-icon"
+          ref="close-btn"
           @click="handleClose"
         >
-          <Button
-            icon="close"
-            color="white"
-          />
+          <v-btn>
+            Close
+          </v-btn>
         </div>
       </template>
     </v-snackbar>

src/components/shared/StatusSnackbar.vue

@@ -24,29 +24,37 @@
       </v-col>
     </v-row>
     <v-row
-      align="center"
+      align="start"
       justify="center"
-      class="ma-5 pa-5"
+      dense
     >
-      <v-card class="text-center">
-        <event-card
-          v-if="isEdgeConnected"
-          :data="eventData"
-          ref="event-card"
-        />
-        <v-card-text
-          ref="loading-card"
-          v-else
-        >
-          <p>
-            Loading event info...
-          </p>
-          <v-progress-circular
-            size="50"
-            indeterminate
+      <v-col
+        :style="maxWidth"
+        align="center"
+        justify="center"
+        cols="12"
+        class="pa-0 ma-0 fill-height"
+      >
+        <v-card class="text-center">
+          <event-card
+            v-if="isEdgeConnected"
+            :data="eventData"
+            ref="event-card"
           />
-        </v-card-text>
-      </v-card>
+          <v-card-text
+            ref="loading-card"
+            v-else
+          >
+            <p>
+              Loading event info...
+            </p>
+            <v-progress-circular
+              size="50"
+              indeterminate
+            />
+          </v-card-text>
+        </v-card>
+      </v-col>
     </v-row>
   </amb-app-frame>
 </template>

src/views/Event.vue

@@ -36,20 +36,22 @@ describe('Snack Notification Component', () => {
     wrapper.destroy()
   })
 
-  it('It should contain a `p` element and close icon', () => {
+  it('It should contain a `p` element and close icon', async () => {
+    await Vue.nextTick()
     expect(wrapper.find('#snack-message').exists()).toBeTruthy()
-    expect(wrapper.find('#close-icon').exists()).toBeTruthy()
+    expect(wrapper.findComponent({ ref: 'close-btn' }).exists()).toBeTrue()
+    expect(wrapper.findComponent({ ref: 'close-btn' }).text()).toEqual('Close')
   })
 
-  it('Displayed text changes with `peerConnectionStatus` state', () => {
+  it('Displayed text changes with `peerConnectionStatus` state', async () => {
     store.state.pnp.peerConnectionStatus = PEER_CONNECTING
     const connectingComp = mount(StatusSnackbar, {
       localVue,
       vuetify,
       store
     })
+    await Vue.nextTick()
     expect(connectingComp.find('#snack-message').text()).toBe(PEER_CONNECTING_NOTIFICATION)
-
     store.state.pnp.peerConnectionStatus = PEER_CONNECTED
     const connectedComp = mount(StatusSnackbar, {
       localVue,
@@ -65,17 +67,14 @@ describe('Snack Notification Component', () => {
       store
     })
     expect(disconnectedComp.find('#snack-message').text()).toBe(PEER_DISCONNECTED_NOTIFICATION)
+    expect(wrapper.findComponent({ ref: 'close-btn' }).exists()).toBeTrue()
+    expect(wrapper.findComponent({ ref: 'close-btn' }).text()).toEqual('Close')
   })
 
-  it('`peerConnectionStatus` status controls StatusSnackbar visibility', () => {
+  it('`peerConnectionStatus` status controls StatusSnackbar visibility', async () => {
     store.state.pnp.peerConnectionStatus = PEER_CONNECTED
 
-    const newComponent = mount(StatusSnackbar, {
-      localVue,
-      vuetify,
-      store
-    })
-
-    expect(newComponent.find('#snack-message').exists()).toBeTruthy()
+    expect(wrapper.findComponent({ ref: 'close-btn' }).exists()).toBeTrue()
+    expect(wrapper.findComponent({ ref: 'close-btn' }).text()).toEqual('Close')
   })
 })