chore: merge main into feat/tzaware

Author: jennifer-richards

.github/workflows/build.yml

@@ -47,7 +47,7 @@ jobs:
       pkg_version: ${{ steps.buildvars.outputs.pkg_version }}
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: 0
 
@@ -70,7 +70,7 @@ jobs:
         echo "NEXT_VERSION=$nextStrict" >> $GITHUB_ENV
         
     - name: Create Draft Release
-      uses: ncipollo/release-action@v1
+      uses: ncipollo/release-action@v1.11.1
       if: ${{ github.event.inputs.publish == 'true' && github.event.inputs.dryrun == 'false' }}
       with:
         prerelease: true
@@ -167,7 +167,7 @@ jobs:
         mv latest-coverage.json coverage.json
         
     - name: Upload Coverage Results as Build Artifact
-      uses: actions/upload-artifact@v3.0.0
+      uses: actions/upload-artifact@v3
       if: ${{ always() }}
       with:
         name: coverage
@@ -186,7 +186,7 @@ jobs:
     steps:
     - uses: actions/checkout@v3
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
         node-version: '18'
 
@@ -203,7 +203,7 @@ jobs:
         npx playwright test --project=${{ matrix.project }}
         
     - name: Upload Report
-      uses: actions/upload-artifact@v3.0.0
+      uses: actions/upload-artifact@v3
       if: ${{ always() }}
       continue-on-error: true
       with:
@@ -256,7 +256,7 @@ jobs:
         yarn cypress:legacy
         
     - name: Upload Video Recordings
-      uses: actions/upload-artifact@v3.0.0
+      uses: actions/upload-artifact@v3
       if: ${{ always() }}
       continue-on-error: true
       with:
@@ -265,7 +265,7 @@ jobs:
         if-no-files-found: ignore
 
     - name: Upload Screenshots
-      uses: actions/upload-artifact@v3.0.0
+      uses: actions/upload-artifact@v3
       if: ${{ always() }}
       continue-on-error: true
       with:
@@ -286,17 +286,17 @@ jobs:
       PKG_VERSION: ${{needs.prepare.outputs.pkg_version}}
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         fetch-depth: 0
 
     - name: Setup Node.js
-      uses: actions/setup-node@v3.0.0
+      uses: actions/setup-node@v3
       with:
-        node-version: 16.x
+        node-version: '16'
 
     - name: Setup Python
-      uses: actions/setup-python@v2
+      uses: actions/setup-python@v4
       with:
         python-version: '3.x'
 
@@ -364,7 +364,7 @@ jobs:
         histCoveragePath: historical-coverage.json
 
     - name: Create Release
-      uses: ncipollo/release-action@v1
+      uses: ncipollo/release-action@v1.11.1
       if: ${{ env.SHOULD_DEPLOY == 'true' && github.event.inputs.dryrun == 'false' }}
       with:
         allowUpdates: true
@@ -376,7 +376,7 @@ jobs:
         token: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Update Baseline Coverage
-      uses: ncipollo/release-action@v1
+      uses: ncipollo/release-action@v1.11.1
       if: ${{ github.event.inputs.updateCoverage == 'true' && github.event.inputs.dryrun == 'false' }}
       with:
         allowUpdates: true
@@ -389,8 +389,19 @@ jobs:
         token: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Upload Build Artifacts
-      uses: actions/upload-artifact@v2.3.1
+      uses: actions/upload-artifact@v3
       if: ${{ env.SHOULD_DEPLOY == 'false' || github.event.inputs.dryrun == 'true' }}
       with:
         name: release-${{ env.PKG_VERSION }}
         path: /home/runner/work/release/release.tar.gz
+        
+    - name: Notify on Slack
+      uses: slackapi/slack-github-action@v1.23.0
+      with:
+        channel-id: ${{ secrets.SLACK_GH_BUILDS_CHANNEL_ID }}
+        payload: |
+          {
+            "text": "Datatracker - Build <https://github.com/ietf-tools/datatracker/actions/runs/${{ github.run_id }}|${{ env.PKG_VERSION }}> by ${{ github.triggering_actor }} completed - <@${{ secrets.SLACK_UID_RJSPARKS }}>"
+          }
+      env:
+        SLACK_BOT_TOKEN: ${{ secrets.SLACK_GH_BOT }}

.github/workflows/ci-run-tests.yml

@@ -81,7 +81,7 @@ jobs:
     steps:
     - uses: actions/checkout@v3
 
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v3
       with:
         node-version: '18'
 

README.md

@@ -218,15 +218,34 @@ Frontend tests are done via Cypress. There're 2 different type of tests:
 
 #### Run Vue Tests
 
-To run the tests headlessly (command line mode):
-```sh
-yarn cypress
-```
-To run the tests visually **(CANNOT run in docker)**:
-```sh
-yarn cypress:open
-```
-> It can take a few seconds before the tests start or the GUI opens.
+> :warning: All commands below **MUST** be run from the `./playwright` directory, unless noted otherwise.
+
+1. Run **once** to install dependencies on your system:
+    ```sh
+    npm install
+    npx playwright install --with-deps
+    ```
+
+2. Run in a **separate process**, from the **project root directory**:
+    ```sh
+    yarn preview
+    ```
+
+3. Run the tests, in of these 3 modes, from the `./playwright` directory:
+
+    3.1 To run the tests headlessly (command line mode):
+    ```sh
+    npm test
+    ```
+    3.2 To run the tests visually **(CANNOT run in docker)**:
+    ```sh
+    npm run test:visual
+    ```
+
+    3.3 To run the tests in debug mode **(CANNOT run in docker)**:
+    ```sh
+    npm run test:debug
+    ```
 
 #### Run Legacy Views Tests
 

client/App.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 n-theme
   n-message-provider
-    .app-error(v-if='agendaStore.criticalError')
+    .app-error(v-if='siteStore.criticalError')
       i.bi.bi-x-octagon-fill.me-2
-      span {{agendaStore.criticalError}}
+      span {{siteStore.criticalError}}
     .app-container(ref='appContainer')
       router-view.meeting
 </template>
@@ -12,13 +12,13 @@ n-theme
 import { onBeforeUnmount ,onMounted, ref } from 'vue'
 import { NMessageProvider } from 'naive-ui'
 
-import { useAgendaStore } from './agenda/store'
+import { useSiteStore } from './shared/store'
 
 import NTheme from './components/n-theme.vue'
 
 // STORES
 
-const agendaStore = useAgendaStore()
+const siteStore = useSiteStore()
 
 // STATE
 
@@ -29,14 +29,14 @@ const appContainer = ref(null)
 // --------------------------------------------------------------------
 
 const resizeObserver = new ResizeObserver(entries => {
-  agendaStore.$patch({ viewport: Math.round(window.innerWidth) })
+  siteStore.$patch({ viewport: Math.round(window.innerWidth) })
   // for (const entry of entries) {
     // const newWidth = entry.contentBoxSize ? entry.contentBoxSize[0].inlineSize : entry.contentRect.width
   // }
 })
 
 onMounted(() => {
-  resizeObserver.observe(appContainer.value, { box: 'device-pixel-content-box' })
+  resizeObserver.observe(appContainer.value)
 })
 
 onBeforeUnmount(() => {
@@ -47,7 +47,6 @@ onBeforeUnmount(() => {
 <style lang="scss">
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
-@import "./shared/breakpoints";
 
 .app-error {
   background-color: $red-500;
@@ -57,69 +56,4 @@ onBeforeUnmount(() => {
   padding: 1rem;
   text-align: center;
 }
-
-.meeting {
-  > h1 {
-    font-weight: 500;
-    color: $gray-700;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    @media screen and (max-width: $bs5-break-sm) {
-      justify-content: center;
-
-      > span {
-        font-size: .95em;
-      }
-    }
-
-    strong {
-      font-weight: 700;
-      background: linear-gradient(220deg, $blue-500 20%, $purple-500 70%);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      box-decoration-break: clone;
-    }
-  }
-
-  &-h1-badges {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-
-    > span {
-      font-size: 13px;
-      font-weight: 700;
-      background-color: $pink-500;
-      box-shadow: 0 0 5px 0 rgba($pink-500, .5);
-      color: #FFF;
-      padding: 5px 8px;
-      border-radius: 6px;
-
-      & + span {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  &-warning {
-    background-color: $red-500 !important;
-    box-shadow: 0 0 5px 0 rgba($red-500, .5) !important;
-    color: #FFF;
-    animation: warningBorderFlash 1s ease infinite;
-  }
-
-  > h4 {
-    @media screen and (max-width: $bs5-break-sm) {
-      text-align: center;
-
-      > span {
-        font-size: .8em;
-        text-align: center;
-      }
-    }
-  }
-}
 </style>

client/Embedded.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+n-theme
+  n-message-provider
+    component(:is='currentComponent', :component-id='props.componentId')
+</template>
+
+<script setup>
+import { defineAsyncComponent, markRaw, onMounted, ref } from 'vue'
+import { NMessageProvider } from 'naive-ui'
+
+import NTheme from './components/n-theme.vue'
+
+// COMPONENTS
+
+const availableComponents = {
+  ChatLog: defineAsyncComponent(() => import('./components/ChatLog.vue')),
+  Polls: defineAsyncComponent(() => import('./components/Polls.vue')),
+}
+
+// PROPS
+
+const props = defineProps({
+  componentName: {
+    type: String,
+    default: null
+  },
+  componentId: {
+    type: String,
+    default: null
+  }
+})
+
+// STATE
+
+const currentComponent = ref(null)
+
+// MOUNTED
+
+onMounted(() => {
+  currentComponent.value = markRaw(availableComponents[props.componentName] || null)
+})
+</script>