From 9d5063f36cba366ffd0c7a7bf4551b6eeef1d04a Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 13:59:21 -0400
Subject: [PATCH 01/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml                   | 42 +++++++++++++++++++
 .github/workflows/pr-checks.yaml              | 15 -------
 frontend/src/components/DataGrid/DataGrid.vue |  2 +-
 .../components/DataGrid/NumberDataFilter.vue  |  2 +-
 .../components/DataGrid/TextDataFilter.vue    |  2 +-
 frontend/src/components/MessageTabs.vue       |  2 +-
 frontend/src/views/TopicMessageView.vue       | 33 +--------------
 gradle.properties                             |  2 +-
 8 files changed, 49 insertions(+), 51 deletions(-)
 delete mode 100644 .github/workflows/pr-checks.yaml

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index e69de29..ca3ec5f 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -0,0 +1,42 @@
+name: 'UI Tests'
+on:
+    workflow_dispatch:
+#    pull_request:
+#        branches:
+#            - main
+jobs:
+    check-changes-in-frontend:
+        runs-on: ubuntu-latest
+        name: Test Frontend
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  fetch-depth: 0
+
+            - name: Get changed files in the frontend folder
+              id: changed-files-specific
+              uses: tj-actions/changed-files@v34
+              with:
+                  files: frontend/**
+
+            - name: Run step if any file(s) in the frontend folder change
+              if: steps.changed-files-specific.outputs.any_changed == 'true'
+              run: echo frontend is affected
+
+            - name: Prevent from running
+              if: steps.changed-files-specific.outputs.any_changed != 'true'
+              run: exit 1
+    test:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        needs: [check-changes-in-frontend]
+        steps:
+            - uses: actions/setup-node@v3
+              working-directory: ./frontend
+              with:
+                  node-version: 18
+                  cache: 'npm'
+            - run: npm ci
+            - run: npm run lint
+            - run: npm run test:unit:ci
+            - run: npm run build
diff --git a/.github/workflows/pr-checks.yaml b/.github/workflows/pr-checks.yaml
deleted file mode 100644
index 61adb2b..0000000
--- a/.github/workflows/pr-checks.yaml
+++ /dev/null
@@ -1,15 +0,0 @@
-name: "PR Checklist checked"
-on:
-    pull_request_target:
-        types: [opened, edited, synchronize, reopened]
-
-jobs:
-    task-check:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: kentaro-m/task-completed-checker-action@v0.1.1
-              with:
-                  repo-token: "${{ secrets.GITHUB_TOKEN }}"
-            - uses: dekinderfiets/pr-description-enforcer@0.0.1
-              with:
-                  repo-token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/frontend/src/components/DataGrid/DataGrid.vue b/frontend/src/components/DataGrid/DataGrid.vue
index e646803..7c443c6 100644
--- a/frontend/src/components/DataGrid/DataGrid.vue
+++ b/frontend/src/components/DataGrid/DataGrid.vue
@@ -138,7 +138,7 @@
                                 </template>
                                 <TextDataFilter
                                     v-if="column.type === 'string' && isFilterVisible(column.dataId)"
-                                    class="absolute"
+                                    class="absolute w-64"
                                     :trigger="uniqueId + '-column-' + index"
                                     @hide="showHideFilter(column.dataId)"
                                     :field="column.dataId"
diff --git a/frontend/src/components/DataGrid/NumberDataFilter.vue b/frontend/src/components/DataGrid/NumberDataFilter.vue
index e5ace56..f76ef4f 100644
--- a/frontend/src/components/DataGrid/NumberDataFilter.vue
+++ b/frontend/src/components/DataGrid/NumberDataFilter.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="z-10 flex flex-col rounded-b border-b border-r border-l border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
+        class="z-10 flex flex-col rounded-b border-b border-l border-r border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
         v-click-outside="clickedOutsideComponent"
         ref="root"
     >
diff --git a/frontend/src/components/DataGrid/TextDataFilter.vue b/frontend/src/components/DataGrid/TextDataFilter.vue
index 353c408..b5a6f01 100644
--- a/frontend/src/components/DataGrid/TextDataFilter.vue
+++ b/frontend/src/components/DataGrid/TextDataFilter.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="z-10 flex flex-col rounded-b border-b border-r border-l border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
+        class="z-10 flex flex-col rounded-b border-b border-l border-r border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
         v-click-outside="clickedOutsideComponent"
         ref="root"
     >
diff --git a/frontend/src/components/MessageTabs.vue b/frontend/src/components/MessageTabs.vue
index 120d4f8..e61fe8f 100644
--- a/frontend/src/components/MessageTabs.vue
+++ b/frontend/src/components/MessageTabs.vue
@@ -58,7 +58,7 @@
             </div>
         </div>
         <div
-            class="flex flex-1 flex-col overflow-auto rounded-b rounded-tr bg-white shadow dark:bg-gray-700"
+            class="flex flex-1 flex-col overflow-auto rounded-b bg-white shadow dark:bg-gray-700"
             v-if="currentIndex === 0"
         >
             <div
diff --git a/frontend/src/views/TopicMessageView.vue b/frontend/src/views/TopicMessageView.vue
index c9a2ae3..8492a98 100644
--- a/frontend/src/views/TopicMessageView.vue
+++ b/frontend/src/views/TopicMessageView.vue
@@ -177,26 +177,6 @@
                         ></BaseButton>
                     </div>
                 </form>
-                <div class="flex items-center space-x-4 pt-2">
-                    <div>
-                        <label class="inline-flex items-center">
-                            <input class="form-radio" type="radio" name="position" v-model="position" value="latest" />
-                            <span class="ml-1">Latest first</span>
-                        </label>
-                    </div>
-                    <div>
-                        <label class="inline-flex items-center">
-                            <input
-                                class="form-radio"
-                                type="radio"
-                                name="position"
-                                v-model="position"
-                                value="earliest"
-                            />
-                            <span class="ml-1">Latest last</span>
-                        </label>
-                    </div>
-                </div>
             </div>
             <div class="hidden items-center space-x-2 xl:flex" v-if="numberOfMessageReceived !== 0">
                 <div>No. of message received</div>
@@ -252,7 +232,7 @@
             <template v-slot:detail="{ items }">
                 <message-tabs
                     v-for="d in sliceData(items.start, items.end)"
-                    :key="getKey(d) + position"
+                    :key="getKey(d)"
                     class="mb-4"
                     @tabClicked="doHardPause"
                     @formatClicked="doHardPause"
@@ -359,7 +339,6 @@ const formData = ref<{
 const tailingOffset = ref<number>(0)
 const tailingTimestamp = ref<number>(0)
 const isAnyDataSelected = ref<boolean>(false)
-const position = ref<string>('latest')
 const hardPause = ref<boolean>(false)
 let selectedData: Map<string, TopicMessage> = new Map()
 
@@ -427,10 +406,6 @@ watch(rawDatetime, async (newRawDatetime: string | null) => {
     }
 })
 
-watch(position, () => {
-    data = data.reverse()
-})
-
 function isDataSelected(message: TopicMessage): boolean {
     return selectedData.has(getKey(message))
 }
@@ -445,11 +420,7 @@ function downloadSelectedMessages() {
 }
 
 function processTopicMessage(topicMessage: TopicMessage) {
-    if (position.value === 'latest') {
-        data.unshift(topicMessage)
-    } else {
-        data.push(topicMessage)
-    }
+    data.unshift(topicMessage)
     numberOfMessageReceived.value += 1
     if (topicMessage.partition === -1 && topicMessage.offset === -1) {
         // Error returned from server during message tailing.
diff --git a/gradle.properties b/gradle.properties
index cabf54a..551a394 100644
--- a/gradle.properties
+++ b/gradle.properties
@@ -1 +1 @@
-version = 0.8.1
+version = 0.8.4

From 25fdd8bad0c5da6828dd83931dde0f48e496cb18 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 14:50:12 -0400
Subject: [PATCH 02/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index ca3ec5f..fdd2e02 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -1,9 +1,8 @@
 name: 'UI Tests'
 on:
-    workflow_dispatch:
-#    pull_request:
-#        branches:
-#            - main
+    push:
+        branches:
+            - "workflow"
 jobs:
     check-changes-in-frontend:
         runs-on: ubuntu-latest

From 0a8fe2302ab0e7cdab1dfea0cb9e49093a437fa1 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 14:52:53 -0400
Subject: [PATCH 03/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index fdd2e02..04fe785 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -31,6 +31,7 @@ jobs:
         needs: [check-changes-in-frontend]
         steps:
             - uses: actions/setup-node@v3
+            - name: Setup packages
               working-directory: ./frontend
               with:
                   node-version: 18

From 5dda6cf5769a766611abd575dadc8b3a0821446d Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 14:57:26 -0400
Subject: [PATCH 04/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 04fe785..8f2e99a 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -30,13 +30,17 @@ jobs:
         runs-on: ubuntu-latest
         needs: [check-changes-in-frontend]
         steps:
-            - uses: actions/setup-node@v3
-            - name: Setup packages
-              working-directory: ./frontend
-              with:
-                  node-version: 18
-                  cache: 'npm'
-            - run: npm ci
-            - run: npm run lint
-            - run: npm run test:unit:ci
-            - run: npm run build
+            -   name: Setup packages
+                uses: actions/setup-node@v3
+                working-directory: ./frontend
+                with:
+                     node-version: 18
+                     cache: 'npm'
+            -   name: Install packages
+                run: npm ci
+            -   name: Run lint
+                run: npm run lint
+            -   name: Run unit tests
+                run: npm run test:unit:ci
+            -   name: Run build
+                run: npm run build

From 4da866b106fe7b7621d34bf98e8f83f21feac414 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 14:59:05 -0400
Subject: [PATCH 05/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 8f2e99a..06ad13f 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -32,10 +32,10 @@ jobs:
         steps:
             -   name: Setup packages
                 uses: actions/setup-node@v3
-                working-directory: ./frontend
                 with:
                      node-version: 18
                      cache: 'npm'
+                     working-directory: ./frontend
             -   name: Install packages
                 run: npm ci
             -   name: Run lint

From 7862f906b4e4dea02cd25a82a0a920f776139dbd Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:01:37 -0400
Subject: [PATCH 06/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 06ad13f..b6c9b04 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -6,7 +6,7 @@ on:
 jobs:
     check-changes-in-frontend:
         runs-on: ubuntu-latest
-        name: Test Frontend
+        name: Check for changes in frontend
         steps:
             - uses: actions/checkout@v3
               with:
@@ -25,7 +25,8 @@ jobs:
             - name: Prevent from running
               if: steps.changed-files-specific.outputs.any_changed != 'true'
               run: exit 1
-    test:
+    run-test:
+        name: Run tests and build frontend
         timeout-minutes: 60
         runs-on: ubuntu-latest
         needs: [check-changes-in-frontend]

From fcc1490a6c4cb852f09c216bd00bf2916627f1f9 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:13:11 -0400
Subject: [PATCH 07/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index b6c9b04..87f28a5 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -23,7 +23,7 @@ jobs:
               run: echo frontend is affected
 
             - name: Prevent from running
-              if: steps.changed-files-specific.outputs.any_changed != 'true'
+              if: steps.changed-files-specific.outputs.any_changed == 'true'
               run: exit 1
     run-test:
         name: Run tests and build frontend

From cc1bf902f206a01f8937ae172d8dac7d92881c85 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:16:45 -0400
Subject: [PATCH 08/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 87f28a5..fa65be6 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -31,17 +31,23 @@ jobs:
         runs-on: ubuntu-latest
         needs: [check-changes-in-frontend]
         steps:
+            -   name: Go to frontend directory
+                run: cd frontend
+
             -   name: Setup packages
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
                      cache: 'npm'
-                     working-directory: ./frontend
+
             -   name: Install packages
                 run: npm ci
+
             -   name: Run lint
                 run: npm run lint
+
             -   name: Run unit tests
                 run: npm run test:unit:ci
+
             -   name: Run build
                 run: npm run build

From b366786c8b6d6dc68e4e993585d28eabefdc6457 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:18:41 -0400
Subject: [PATCH 09/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index fa65be6..722f5e5 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -32,7 +32,8 @@ jobs:
         needs: [check-changes-in-frontend]
         steps:
             -   name: Go to frontend directory
-                run: cd frontend
+                run: |
+                    cd ./frontend/
 
             -   name: Setup packages
                 uses: actions/setup-node@v3

From c8161819352e7ee40ee58163cf15e6911a5c925a Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:22:33 -0400
Subject: [PATCH 10/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 722f5e5..c04ca8e 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -31,6 +31,10 @@ jobs:
         runs-on: ubuntu-latest
         needs: [check-changes-in-frontend]
         steps:
+            -   uses: actions/checkout@v3
+                with:
+                    fetch-depth: 0
+
             -   name: Go to frontend directory
                 run: |
                     cd ./frontend/

From 7fcc73d72b61f692e4ba69f5e1a636424b12ae7a Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 15:36:50 -0400
Subject: [PATCH 11/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index c04ca8e..f54c3bd 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -35,24 +35,25 @@ jobs:
                 with:
                     fetch-depth: 0
 
-            -   name: Go to frontend directory
-                run: |
-                    cd ./frontend/
-
             -   name: Setup packages
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
                      cache: 'npm'
+                     working-directory: frontend
 
             -   name: Install packages
                 run: npm ci
+                working-directory: frontend
 
             -   name: Run lint
                 run: npm run lint
+                working-directory: frontend
 
             -   name: Run unit tests
                 run: npm run test:unit:ci
+                working-directory: frontend
 
             -   name: Run build
                 run: npm run build
+                working-directory: frontend

From 10bec0f2021fce45aa3f4477d26c0a5785281fcb Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 16:37:21 -0400
Subject: [PATCH 12/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index f54c3bd..a53f1e1 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -37,10 +37,10 @@ jobs:
 
             -   name: Setup packages
                 uses: actions/setup-node@v3
+                working-directory: frontend
                 with:
                      node-version: 18
                      cache: 'npm'
-                     working-directory: frontend
 
             -   name: Install packages
                 run: npm ci

From 0666303c16b5bd207b666b20b0ea9cd238d83b06 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 16:39:54 -0400
Subject: [PATCH 13/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index a53f1e1..aafa5a0 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -36,24 +36,20 @@ jobs:
                     fetch-depth: 0
 
             -   name: Setup packages
-                uses: actions/setup-node@v3
                 working-directory: frontend
+                uses: actions/setup-node@v3
                 with:
                      node-version: 18
                      cache: 'npm'
 
             -   name: Install packages
                 run: npm ci
-                working-directory: frontend
 
             -   name: Run lint
                 run: npm run lint
-                working-directory: frontend
 
             -   name: Run unit tests
                 run: npm run test:unit:ci
-                working-directory: frontend
 
             -   name: Run build
                 run: npm run build
-                working-directory: frontend

From dcd3a489566e08617b76d366fec7db377ccc908c Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 16:48:51 -0400
Subject: [PATCH 14/30] Added GitHub action flow for frontend.

---
 .github/workflows/main.yaml | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index aafa5a0..2b67624 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -33,23 +33,31 @@ jobs:
         steps:
             -   uses: actions/checkout@v3
                 with:
-                    fetch-depth: 0
+                    persist-credentials: false
 
             -   name: Setup packages
-                working-directory: frontend
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
-                     cache: 'npm'
+
+            -   name: Cache node_modules
+                uses: actions/cache@v3
+                with:
+                    path: node_modules
+                    key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package-lock.json') }}
 
             -   name: Install packages
+                working-directory: ./frontend
                 run: npm ci
 
             -   name: Run lint
+                working-directory: ./frontend
                 run: npm run lint
 
             -   name: Run unit tests
+                working-directory: ./frontend
                 run: npm run test:unit:ci
 
             -   name: Run build
+                working-directory: ./frontend
                 run: npm run build

From 746631a2cb15f1c501997a155b94e88f1d0f2f8d Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 17:37:39 -0400
Subject: [PATCH 15/30] Ran linter

---
 frontend/.eslintrc.cjs                        |   6 +-
 frontend/package.json                         |   2 +-
 frontend/playwright.config.ts                 | 170 +++++++++---------
 frontend/src/components/BaseButton.vue        |   4 +-
 frontend/src/components/BaseInputField.vue    |   2 +-
 frontend/src/components/BaseRadioField.vue    |   4 +-
 frontend/src/components/BaseSelectField.vue   |   2 +-
 frontend/src/components/BrokerInformation.vue |   8 +-
 frontend/src/components/ClusterBlock.vue      |   2 +-
 .../components/DataGrid/BooleanDataFilter.vue |   2 +-
 frontend/src/components/MessageTabs.vue       |   2 +-
 frontend/src/components/OffCanvas.vue         |   2 +-
 frontend/src/components/SchemaReference.vue   |   6 +-
 frontend/src/forms/NewSchemaForm.vue          |   4 +-
 .../forms/SchemaCompatibilitySettingsForm.vue |  14 +-
 frontend/src/views/ErrorPage.vue              |   1 -
 frontend/src/views/TopicMessageView.vue       |   2 +-
 frontend/tailwind.config.cjs                  |   5 +-
 18 files changed, 117 insertions(+), 121 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 1ae98de..9e849b8 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -7,10 +7,10 @@ module.exports = {
         'plugin:vue/vue3-essential',
         'eslint:recommended',
         '@vue/eslint-config-typescript',
-        '@vue/eslint-config-prettier'
+        '@vue/eslint-config-prettier',
     ],
     parserOptions: {
-        ecmaVersion: 'latest'
+        ecmaVersion: 'latest',
     },
     rules: {
         'vue/multi-word-component-names': 0,
@@ -39,5 +39,5 @@ module.exports = {
                 ignoreHTMLTextContents: false,
             },
         ],
-    }
+    },
 }
diff --git a/frontend/package.json b/frontend/package.json
index 82dd3af..daad1a2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,7 @@
         "test:e2e": "playwright test",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+        "lint": "eslint . --ext .vue,.js,.jsx,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
     },
     "dependencies": {
         "@codemirror/lang-json": "^6.0.0",
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index 333a4dc..95c5730 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -11,102 +11,102 @@ import { devices } from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 const config: PlaywrightTestConfig = {
-  testDir: './e2e',
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000
-  },
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:5173',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    testDir: './e2e',
+    /* Maximum time one test can run for. */
+    timeout: 30 * 1000,
+    expect: {
+        /**
+         * Maximum time expect() should wait for the condition to be met.
+         * For example in `await expect(locator).toHaveText();`
+         */
+        timeout: 5000,
+    },
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: 'http://localhost:5173',
 
-    /* Only on CI systems run the tests headless */
-    headless: !!process.env.CI
-  },
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
 
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome']
-      }
+        /* Only on CI systems run the tests headless */
+        headless: !!process.env.CI,
     },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox']
-      }
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari']
-      }
-    }
 
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: {
+                ...devices['Desktop Chrome'],
+            },
+        },
+        {
+            name: 'firefox',
+            use: {
+                ...devices['Desktop Firefox'],
+            },
+        },
+        {
+            name: 'webkit',
+            use: {
+                ...devices['Desktop Safari'],
+            },
+        },
+
+        /* Test against mobile viewports. */
+        // {
+        //   name: 'Mobile Chrome',
+        //   use: {
+        //     ...devices['Pixel 5'],
+        //   },
+        // },
+        // {
+        //   name: 'Mobile Safari',
+        //   use: {
+        //     ...devices['iPhone 12'],
+        //   },
+        // },
 
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
-  ],
+        /* Test against branded browsers. */
+        // {
+        //   name: 'Microsoft Edge',
+        //   use: {
+        //     channel: 'msedge',
+        //   },
+        // },
+        // {
+        //   name: 'Google Chrome',
+        //   use: {
+        //     channel: 'chrome',
+        //   },
+        // },
+    ],
 
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
+    /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+    // outputDir: 'test-results/',
 
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    /**
+    /* Run your local dev server before starting the tests */
+    webServer: {
+        /**
      * Use the dev server by default for faster feedback loop.
      * Use the preview server on CI for more realistic testing.
     Playwright will re-use the local server if there is already a dev-server running.
      */
-    command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
-    port: 5173,
-    reuseExistingServer: !process.env.CI
-  }
+        command: process.env.CI ? 'vite preview --port 5173' : 'vite dev',
+        port: 5173,
+        reuseExistingServer: !process.env.CI,
+    },
 }
 
 export default config
diff --git a/frontend/src/components/BaseButton.vue b/frontend/src/components/BaseButton.vue
index ab8a3db..179c26b 100644
--- a/frontend/src/components/BaseButton.vue
+++ b/frontend/src/components/BaseButton.vue
@@ -11,14 +11,14 @@
         </div>
         <div
             v-else-if="!loading && disabled"
-            class="flex h-full w-full cursor-not-allowed select-none items-center justify-center rounded border border-transparent bg-gray-400 py-2 px-4 text-center text-white dark:border-gray-600 dark:bg-gray-600"
+            class="flex h-full w-full cursor-not-allowed select-none items-center justify-center rounded border border-transparent bg-gray-400 px-4 py-2 text-center text-white dark:border-gray-600 dark:bg-gray-600"
         >
             <div class="block text-center dark:text-gray-500">{{ label }}</div>
         </div>
         <button
             v-else
             @mousedown="$emit('click')"
-            class="relative flex h-full w-full items-center justify-center overflow-hidden rounded border border-green-600 bg-green-500 py-2 px-4 text-white transition duration-200 ease-linear hover:bg-green-600 hover:shadow-lg dark:hover:shadow-black"
+            class="relative flex h-full w-full items-center justify-center overflow-hidden rounded border border-green-600 bg-green-500 px-4 py-2 text-white transition duration-200 ease-linear hover:bg-green-600 hover:shadow-lg dark:hover:shadow-black"
             @click="$emit('click')"
             :type="type"
         >
diff --git a/frontend/src/components/BaseInputField.vue b/frontend/src/components/BaseInputField.vue
index 8f30171..5904240 100644
--- a/frontend/src/components/BaseInputField.vue
+++ b/frontend/src/components/BaseInputField.vue
@@ -27,7 +27,7 @@
             @input="handleInput"
             class="block rounded border bg-white text-black transition-shadow duration-200 ease-linear focus:shadow-lg dark:bg-transparent dark:text-gray-100"
             :class="[
-                { 'px-2 py-1': size === 'small', 'px-2 py-3': size === 'medium', 'py-4 px-2': size === 'large' },
+                { 'px-2 py-1': size === 'small', 'px-2 py-3': size === 'medium', 'px-2 py-4': size === 'large' },
                 [
                     hasError
                         ? 'border-red-400 hover:border-red-500 focus:border-red-500 focus:shadow-red-100 focus:ring-red-500 dark:focus:shadow-red-900'
diff --git a/frontend/src/components/BaseRadioField.vue b/frontend/src/components/BaseRadioField.vue
index e3d420e..a2f4fb9 100644
--- a/frontend/src/components/BaseRadioField.vue
+++ b/frontend/src/components/BaseRadioField.vue
@@ -43,10 +43,10 @@
  * file that was distributed with this source code.
  */
 import { getId } from '@/util/Util'
-import { defineEmits, defineProps, type PropType, ref } from 'vue'
+import { defineEmits, defineProps, type PropType } from 'vue'
 import InformationIcon from '@/icons/InformationIcon.vue'
 
-const props = defineProps({
+defineProps({
     name: {
         type: String,
         default: () => getId(),
diff --git a/frontend/src/components/BaseSelectField.vue b/frontend/src/components/BaseSelectField.vue
index 10b0df5..00881b9 100644
--- a/frontend/src/components/BaseSelectField.vue
+++ b/frontend/src/components/BaseSelectField.vue
@@ -27,7 +27,7 @@
                 {
                     'px-2 py-1': size === 'small',
                     'px-2 py-3': size === 'medium',
-                    'py-4 px-2': size === 'large',
+                    'px-2 py-4': size === 'large',
                     '': size === 'custom',
                 },
                 [
diff --git a/frontend/src/components/BrokerInformation.vue b/frontend/src/components/BrokerInformation.vue
index 5eecce1..6c0efb1 100644
--- a/frontend/src/components/BrokerInformation.vue
+++ b/frontend/src/components/BrokerInformation.vue
@@ -20,23 +20,23 @@
         <div v-show="!collapsed" class="flex flex-1 flex-col rounded-b p-2 shadow dark:shadow-gray-700">
             <div class="flex flex-wrap space-x-2">
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Id <span class="text-green-400">{{ node?.id }}</span>
                 </div>
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Port <span class="text-green-400">{{ node?.port }}</span>
                 </div>
                 <div
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Host <span class="text-green-400">{{ node?.host }}</span>
                 </div>
                 <div
                     v-if="node.rack !== null"
-                    class="rounded border border-green-100 bg-green-50 py-1 px-3 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
+                    class="rounded border border-green-100 bg-green-50 px-3 py-1 uppercase shadow dark:border-gray-700 dark:bg-gray-700 dark:shadow-gray-700"
                 >
                     Rack: <span class="text-green-400">{{ node?.rack }}</span>
                 </div>
diff --git a/frontend/src/components/ClusterBlock.vue b/frontend/src/components/ClusterBlock.vue
index 5247b97..e0e5485 100644
--- a/frontend/src/components/ClusterBlock.vue
+++ b/frontend/src/components/ClusterBlock.vue
@@ -2,7 +2,7 @@
     <ul>
         <li
             @click="collapsed = !collapsed"
-            class="mt-2 mb-2 flex cursor-pointer items-center justify-between uppercase dark:border-dotted dark:border-gray-400"
+            class="mb-2 mt-2 flex cursor-pointer items-center justify-between uppercase dark:border-dotted dark:border-gray-400"
             :title="collapsed ? 'Click to expand the panel.' : 'Click to collapse the panel.'"
         >
             <span class="block flex cursor-pointer items-center space-x-2 text-green-500 dark:text-gray-100">
diff --git a/frontend/src/components/DataGrid/BooleanDataFilter.vue b/frontend/src/components/DataGrid/BooleanDataFilter.vue
index ffb95bc..160039f 100644
--- a/frontend/src/components/DataGrid/BooleanDataFilter.vue
+++ b/frontend/src/components/DataGrid/BooleanDataFilter.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="z-10 flex flex-col rounded-b border-b border-r border-l border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
+        class="z-10 flex flex-col rounded-b border-b border-l border-r border-green-300 bg-green-100 p-2 shadow-lg dark:border-gray-800 dark:bg-gray-700"
         v-click-outside="clickedOutsideComponent"
         ref="root"
     >
diff --git a/frontend/src/components/MessageTabs.vue b/frontend/src/components/MessageTabs.vue
index e61fe8f..e80acef 100644
--- a/frontend/src/components/MessageTabs.vue
+++ b/frontend/src/components/MessageTabs.vue
@@ -119,7 +119,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { computed, defineEmits, defineProps, onMounted, onUnmounted, type PropType, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, onMounted, onUnmounted, type PropType, ref } from 'vue'
 import type { TopicMessage } from '@/entity/TopicMessage'
 import eventBus from '@/util/EventBus'
 import { ApplicationEventTypes } from '@/entity/ApplicationEventTypes'
diff --git a/frontend/src/components/OffCanvas.vue b/frontend/src/components/OffCanvas.vue
index de26c2b..4aa0169 100644
--- a/frontend/src/components/OffCanvas.vue
+++ b/frontend/src/components/OffCanvas.vue
@@ -51,7 +51,7 @@
                                             :class="
                                                 $route.name === 'dashboard'
                                                     ? 'bg-green-500 text-white shadow-inner dark:bg-gray-700'
-                                                    : 'text-green-500 hover:cursor-pointer hover:bg-green-50 dark:text-white dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:bg-gray-600'
+                                                    : 'text-green-500 hover:cursor-pointer hover:bg-green-50 dark:text-gray-100 dark:text-white dark:hover:bg-gray-600 dark:hover:bg-gray-600'
                                             "
                                             class="mb-2 block flex w-full content-center items-center rounded p-2 transition duration-200 ease-linear"
                                             :to="{ name: 'dashboard' }"
diff --git a/frontend/src/components/SchemaReference.vue b/frontend/src/components/SchemaReference.vue
index 562573d..1136878 100644
--- a/frontend/src/components/SchemaReference.vue
+++ b/frontend/src/components/SchemaReference.vue
@@ -12,10 +12,10 @@
             <div
                 v-for="(reference, index) in references"
                 :key="'reference-schema-' + index"
-                class="overflow-y-auto md:mt-2 md:flex md:flex-col md:space-y-2 md:space-y-0 md:space-x-2"
+                class="overflow-y-auto md:mt-2 md:flex md:flex-col md:space-x-2 md:space-y-0 md:space-y-2"
             >
                 <div class="font-bold">Reference {{ index + 1 }}</div>
-                <div class="space-y-2 overflow-y-auto md:mt-2 md:flex md:items-center md:space-y-0 md:space-x-2">
+                <div class="space-y-2 overflow-y-auto md:mt-2 md:flex md:items-center md:space-x-2 md:space-y-0">
                     <div class="md:flex md:flex-1 md:flex-col md:p-1">
                         <div class="flex items-center">
                             <div>Reference name *</div>
@@ -97,7 +97,7 @@
                 </div>
             </div>
             <button
-                class="relative mt-4 mb-14 flex items-center justify-center overflow-hidden rounded border border-green-500 border-green-500 px-4 py-2 text-green-500 transition duration-200 ease-linear hover:bg-green-100 hover:shadow dark:hover:bg-gray-700 dark:hover:shadow-black"
+                class="relative mb-14 mt-4 flex items-center justify-center overflow-hidden rounded border border-green-500 border-green-500 px-4 py-2 text-green-500 transition duration-200 ease-linear hover:bg-green-100 hover:shadow dark:hover:bg-gray-700 dark:hover:shadow-black"
                 @click="addReference"
             >
                 <ripple ripple-class="bg-green-200 dark:bg-green-200 opacity-25"></ripple>
diff --git a/frontend/src/forms/NewSchemaForm.vue b/frontend/src/forms/NewSchemaForm.vue
index 7eb53a6..827eefc 100644
--- a/frontend/src/forms/NewSchemaForm.vue
+++ b/frontend/src/forms/NewSchemaForm.vue
@@ -43,7 +43,7 @@
                 class="flex w-full justify-between border-t bg-gray-100 px-4 pt-2 dark:border-gray-900 dark:bg-gray-800"
             >
                 <button
-                    class="w-24 rounded bg-red-500 py-2 px-4 text-white transition duration-200 ease-linear hover:bg-red-700"
+                    class="w-24 rounded bg-red-500 px-4 py-2 text-white transition duration-200 ease-linear hover:bg-red-700"
                     @click="emit('cancel')"
                     type="button"
                 >
@@ -58,7 +58,7 @@
                         <span class="w-34 hidden md:block">Valid schema</span>
                     </div>
                     <button
-                        class="relative h-10 w-24 overflow-hidden rounded bg-cyan-500 py-2 px-4 text-white transition duration-200 ease-linear hover:bg-cyan-600"
+                        class="relative h-10 w-24 overflow-hidden rounded bg-cyan-500 px-4 py-2 text-white transition duration-200 ease-linear hover:bg-cyan-600"
                         type="button"
                         @click="validateSchema"
                     >
diff --git a/frontend/src/forms/SchemaCompatibilitySettingsForm.vue b/frontend/src/forms/SchemaCompatibilitySettingsForm.vue
index 33a4837..4f3035b 100644
--- a/frontend/src/forms/SchemaCompatibilitySettingsForm.vue
+++ b/frontend/src/forms/SchemaCompatibilitySettingsForm.vue
@@ -12,7 +12,7 @@
                                     label="Backward"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300"
                                         >Consumers using the new schema can read data written by producers using the
@@ -27,7 +27,7 @@
                                     label="Transitive Backward"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300"
                                         >Consumers using the new schema can read data written by producers using the
@@ -42,7 +42,7 @@
                                     label="Forward"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300"
                                         >Consumers using the latest registered schema can read data written by producers
@@ -57,7 +57,7 @@
                                     label="Transitive Forward"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300">
                                         Consumers using all the previously registered schemas can read data written by
@@ -72,7 +72,7 @@
                                     label="Full"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300">
                                         The new schema is forward and backward compatible with the latest registered
@@ -87,7 +87,7 @@
                                     label="Transitive Full"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300">
                                         The new schema is forward and backward compatible with all previously registered
@@ -102,7 +102,7 @@
                                     label="None"
                                     un-selected-class="hover:bg-green-50 dark:hover:bg-gray-800"
                                     selected-class="bg-green-100 dark:bg-gray-700 dark:shadow-gray-800 rounded"
-                                    class="mx-4 mt-4 mb-2 p-4"
+                                    class="mx-4 mb-2 mt-4 p-4"
                                 >
                                     <span class="italic text-gray-600 dark:text-gray-300">
                                         Schema compatibility checks are disabled.
diff --git a/frontend/src/views/ErrorPage.vue b/frontend/src/views/ErrorPage.vue
index 8bc7757..7534830 100644
--- a/frontend/src/views/ErrorPage.vue
+++ b/frontend/src/views/ErrorPage.vue
@@ -44,7 +44,6 @@ import { ref, computed } from 'vue'
 import Ripple from '@/components/Ripple.vue'
 
 const error = ref<LocationQueryValue | LocationQueryValue[] | undefined>(useRoute().query.code)
-const meta = useRoute().meta
 
 if (error.value === undefined) {
     error.value = '404'
diff --git a/frontend/src/views/TopicMessageView.vue b/frontend/src/views/TopicMessageView.vue
index 8492a98..db6cea4 100644
--- a/frontend/src/views/TopicMessageView.vue
+++ b/frontend/src/views/TopicMessageView.vue
@@ -443,7 +443,7 @@ function processTopicMessage(topicMessage: TopicMessage) {
     }
 }
 
-async function handleError(errorResponse: ErrorResponse, retryCount = 1) {
+async function handleError(errorResponse: ErrorResponse) {
     if (errorResponse.httpCode === 0) {
         try {
             await startStream()
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index e158170..05be2df 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -2,10 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        "./index.html",
-        "./src/**/*.{vue,js,ts,jsx,tsx}",
-    ],
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     theme: {
         extend: {
             minHeight: {

From ec9944c6ba27db53ba9c4c5c1233e349abb02bc3 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 17:40:47 -0400
Subject: [PATCH 16/30] Ran linter

---
 .github/workflows/main.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 2b67624..6419720 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -23,7 +23,7 @@ jobs:
               run: echo frontend is affected
 
             - name: Prevent from running
-              if: steps.changed-files-specific.outputs.any_changed == 'true'
+              if: steps.changed-files-specific.outputs.any_changed != 'true'
               run: exit 1
     run-test:
         name: Run tests and build frontend

From c396f9ade52e30732bd3b5cffde40179a29e8bd1 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 17:41:32 -0400
Subject: [PATCH 17/30] Ran linter

---
 .github/workflows/main.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 6419720..33de40f 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -23,7 +23,8 @@ jobs:
               run: echo frontend is affected
 
             - name: Prevent from running
-              if: steps.changed-files-specific.outputs.any_changed != 'true'
+#              if: steps.changed-files-specific.outputs.any_changed != 'true'
+              if: steps.changed-files-specific.outputs.any_changed == 'true'
               run: exit 1
     run-test:
         name: Run tests and build frontend

From 8fe14822c76140caca652be189b79cfc78214664 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 17:48:14 -0400
Subject: [PATCH 18/30] Ran linter

---
 .github/workflows/main.yaml | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 33de40f..2c66667 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -40,12 +40,8 @@ jobs:
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
-
-            -   name: Cache node_modules
-                uses: actions/cache@v3
-                with:
-                    path: node_modules
-                    key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package-lock.json') }}
+                     cache: 'npm'
+                     cache-dependency-path: frontend/package-lock.json
 
             -   name: Install packages
                 working-directory: ./frontend

From b1a92957fa6bfb537ff10146afd2049929f1bfc1 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 17:50:49 -0400
Subject: [PATCH 19/30] Fixed action

---
 .github/workflows/main.yaml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index 2c66667..b45aeb4 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -23,8 +23,7 @@ jobs:
               run: echo frontend is affected
 
             - name: Prevent from running
-#              if: steps.changed-files-specific.outputs.any_changed != 'true'
-              if: steps.changed-files-specific.outputs.any_changed == 'true'
+              if: steps.changed-files-specific.outputs.any_changed != 'true'
               run: exit 1
     run-test:
         name: Run tests and build frontend

From e331d628d32e686e43d2beabe7878943cc9060a4 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 19:02:07 -0400
Subject: [PATCH 20/30] Fixed action

---
 .github/workflows/main.yaml | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index b45aeb4..49d3e46 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -4,38 +4,24 @@ on:
         branches:
             - "workflow"
 jobs:
-    check-changes-in-frontend:
-        runs-on: ubuntu-latest
-        name: Check for changes in frontend
-        steps:
-            - uses: actions/checkout@v3
-              with:
-                  fetch-depth: 0
-
-            - name: Get changed files in the frontend folder
-              id: changed-files-specific
-              uses: tj-actions/changed-files@v34
-              with:
-                  files: frontend/**
-
-            - name: Run step if any file(s) in the frontend folder change
-              if: steps.changed-files-specific.outputs.any_changed == 'true'
-              run: echo frontend is affected
-
-            - name: Prevent from running
-              if: steps.changed-files-specific.outputs.any_changed != 'true'
-              run: exit 1
     run-test:
         name: Run tests and build frontend
         timeout-minutes: 60
         runs-on: ubuntu-latest
-        needs: [check-changes-in-frontend]
         steps:
             -   uses: actions/checkout@v3
                 with:
                     persist-credentials: false
+                    fetch-depth: 0
+
+            - name: Get changed files in the frontend folder
+              id: changed-files-specific
+              uses: tj-actions/changed-files@v34
+              with:
+                  files: frontend/**
 
             -   name: Setup packages
+                if: steps.changed-files-specific.outputs.any_changed == 'true'
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
@@ -43,17 +29,21 @@ jobs:
                      cache-dependency-path: frontend/package-lock.json
 
             -   name: Install packages
+                if: steps.changed-files-specific.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm ci
 
             -   name: Run lint
+                if: steps.changed-files-specific.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run lint
 
             -   name: Run unit tests
+                if: steps.changed-files-specific.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run test:unit:ci
 
             -   name: Run build
+                if: steps.changed-files-specific.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run build

From 30999ed6a5ca59d2cffcf1439fa556b4b193f762 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 19:04:15 -0400
Subject: [PATCH 21/30] Fixed action

---
 .github/workflows/{main.yaml => frontend.yaml} | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)
 rename .github/workflows/{main.yaml => frontend.yaml} (71%)

diff --git a/.github/workflows/main.yaml b/.github/workflows/frontend.yaml
similarity index 71%
rename from .github/workflows/main.yaml
rename to .github/workflows/frontend.yaml
index 49d3e46..cd26a00 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/frontend.yaml
@@ -15,13 +15,13 @@ jobs:
                     fetch-depth: 0
 
             - name: Get changed files in the frontend folder
-              id: changed-files-specific
+              id: was-any-frontend-files-changed
               uses: tj-actions/changed-files@v34
               with:
                   files: frontend/**
 
             -   name: Setup packages
-                if: steps.changed-files-specific.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
@@ -29,21 +29,21 @@ jobs:
                      cache-dependency-path: frontend/package-lock.json
 
             -   name: Install packages
-                if: steps.changed-files-specific.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm ci
 
             -   name: Run lint
-                if: steps.changed-files-specific.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run lint
 
             -   name: Run unit tests
-                if: steps.changed-files-specific.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run test:unit:ci
 
             -   name: Run build
-                if: steps.changed-files-specific.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run build

From 3d1f2c39850b768bc40d5771acba6aba1a01d4c8 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 19:05:15 -0400
Subject: [PATCH 22/30] Fixed action

---
 .github/workflows/frontend.yaml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml
index cd26a00..c4b8771 100644
--- a/.github/workflows/frontend.yaml
+++ b/.github/workflows/frontend.yaml
@@ -21,7 +21,7 @@ jobs:
                   files: frontend/**
 
             -   name: Setup packages
-                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
@@ -29,21 +29,21 @@ jobs:
                      cache-dependency-path: frontend/package-lock.json
 
             -   name: Install packages
-                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
                 working-directory: ./frontend
                 run: npm ci
 
             -   name: Run lint
-                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
                 working-directory: ./frontend
                 run: npm run lint
 
             -   name: Run unit tests
-                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
                 working-directory: ./frontend
                 run: npm run test:unit:ci
 
             -   name: Run build
-                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
                 working-directory: ./frontend
                 run: npm run build

From d8d67e8cb9222676d18eeb54a9cf44ae4157b6bb Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Mon, 24 Apr 2023 19:06:27 -0400
Subject: [PATCH 23/30] Fixed action

---
 .github/workflows/frontend.yaml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/frontend.yaml b/.github/workflows/frontend.yaml
index c4b8771..e8944a5 100644
--- a/.github/workflows/frontend.yaml
+++ b/.github/workflows/frontend.yaml
@@ -1,4 +1,4 @@
-name: 'UI Tests'
+name: 'Frontend Tests'
 on:
     push:
         branches:
@@ -21,7 +21,7 @@ jobs:
                   files: frontend/**
 
             -   name: Setup packages
-                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 uses: actions/setup-node@v3
                 with:
                      node-version: 18
@@ -29,21 +29,21 @@ jobs:
                      cache-dependency-path: frontend/package-lock.json
 
             -   name: Install packages
-                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm ci
 
             -   name: Run lint
-                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run lint
 
             -   name: Run unit tests
-                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run test:unit:ci
 
             -   name: Run build
-                if: steps.was-any-frontend-files-changed.outputs.any_changed != 'true'
+                if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run build

From 73f7b8f0fee51334cdec1f7ef957cddc2d5e02ae Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 11:39:05 -0400
Subject: [PATCH 24/30] Added Gradle test

---
 .github/workflows/{frontend.yaml => integration.yaml} | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)
 rename .github/workflows/{frontend.yaml => integration.yaml} (89%)

diff --git a/.github/workflows/frontend.yaml b/.github/workflows/integration.yaml
similarity index 89%
rename from .github/workflows/frontend.yaml
rename to .github/workflows/integration.yaml
index e8944a5..49ec81c 100644
--- a/.github/workflows/frontend.yaml
+++ b/.github/workflows/integration.yaml
@@ -1,4 +1,4 @@
-name: 'Frontend Tests'
+name: 'Integration Tests'
 on:
     push:
         branches:
@@ -47,3 +47,9 @@ jobs:
                 if: steps.was-any-frontend-files-changed.outputs.any_changed == 'true'
                 working-directory: ./frontend
                 run: npm run build
+
+            -   name: Setup Gradle
+                uses: gradle/gradle-build-action@v2
+
+            -   name: Run build with Gradle Wrapper
+                run: ./gradlew build

From f35e06e5cd75d2b4a08582f7a1a518047d316469 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 11:41:54 -0400
Subject: [PATCH 25/30] Added Gradle test

---
 .github/workflows/integration.yaml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/integration.yaml b/.github/workflows/integration.yaml
index 49ec81c..b3f30d5 100644
--- a/.github/workflows/integration.yaml
+++ b/.github/workflows/integration.yaml
@@ -50,6 +50,8 @@ jobs:
 
             -   name: Setup Gradle
                 uses: gradle/gradle-build-action@v2
+                working-directory: ./
 
             -   name: Run build with Gradle Wrapper
                 run: ./gradlew build
+                working-directory: ./

From 34ba44eead2d67f6cabad5a37bbcba2ded8a0b1a Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 11:42:48 -0400
Subject: [PATCH 26/30] Added Gradle test

---
 .github/workflows/integration.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/integration.yaml b/.github/workflows/integration.yaml
index b3f30d5..a0f2084 100644
--- a/.github/workflows/integration.yaml
+++ b/.github/workflows/integration.yaml
@@ -50,7 +50,6 @@ jobs:
 
             -   name: Setup Gradle
                 uses: gradle/gradle-build-action@v2
-                working-directory: ./
 
             -   name: Run build with Gradle Wrapper
                 run: ./gradlew build

From 7057b6285a687a17eb879cd1120921457a428521 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 11:53:21 -0400
Subject: [PATCH 27/30] Added Gradle test

---
 .github/workflows/integration.yaml | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/integration.yaml b/.github/workflows/integration.yaml
index a0f2084..af03b6a 100644
--- a/.github/workflows/integration.yaml
+++ b/.github/workflows/integration.yaml
@@ -48,9 +48,11 @@ jobs:
                 working-directory: ./frontend
                 run: npm run build
 
-            -   name: Setup Gradle
-                uses: gradle/gradle-build-action@v2
+            -   name: Set up JDK 17
+                uses: actions/setup-java@v3
+                with:
+                    java-version: '17'
+                    distribution: 'temurin'
+                    cache: 'gradle'
 
-            -   name: Run build with Gradle Wrapper
-                run: ./gradlew build
-                working-directory: ./
+            -   run: ./gradlew build --no-daemon

From 5a2cbbb523a23d2ed31bd54e7c2e74a164b274e9 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 12:13:27 -0400
Subject: [PATCH 28/30] Added wrapper validation.

---
 .github/workflows/gradle-wrapper-validation.yml     | 13 +++++++++++++
 .../workflows/{integration.yaml => integration.yml} |  0
 2 files changed, 13 insertions(+)
 create mode 100644 .github/workflows/gradle-wrapper-validation.yml
 rename .github/workflows/{integration.yaml => integration.yml} (100%)

diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
new file mode 100644
index 0000000..7ae7a30
--- /dev/null
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -0,0 +1,13 @@
+name: "Validate Gradle Wrapper"
+on:
+    push:
+        branches:
+            - "workflow"
+
+jobs:
+    validation:
+        name: "Validation"
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: gradle/wrapper-validation-action@v1
diff --git a/.github/workflows/integration.yaml b/.github/workflows/integration.yml
similarity index 100%
rename from .github/workflows/integration.yaml
rename to .github/workflows/integration.yml

From e633d1db80920cac303435624898603a83f56897 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 12:41:31 -0400
Subject: [PATCH 29/30] Added wrapper validation.

---
 .github/workflows/gradle-wrapper-validation.yml            | 6 +++---
 .../workflows/{integration.yml => integration-test.yml}    | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)
 rename .github/workflows/{integration.yml => integration-test.yml} (94%)

diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index 7ae7a30..598f4dd 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -1,12 +1,12 @@
-name: "Validate Gradle Wrapper"
+name: Validate Gradle Wrapper
 on:
     push:
         branches:
-            - "workflow"
+            - workflow
 
 jobs:
     validation:
-        name: "Validation"
+        name: Validation
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration-test.yml
similarity index 94%
rename from .github/workflows/integration.yml
rename to .github/workflows/integration-test.yml
index af03b6a..d05dae3 100644
--- a/.github/workflows/integration.yml
+++ b/.github/workflows/integration-test.yml
@@ -1,8 +1,9 @@
-name: 'Integration Tests'
+name: Integration Tests
 on:
     push:
-        branches:
-            - "workflow"
+        branches: [main, main-okta]
+    pull_request:
+        branches: [main, main-okta]
 jobs:
     run-test:
         name: Run tests and build frontend

From 4c37331ef38fd630914f4bb5ea758200b7537c64 Mon Sep 17 00:00:00 2001
From: nicholasnet <nirmalp@hotmail.com>
Date: Tue, 25 Apr 2023 12:44:06 -0400
Subject: [PATCH 30/30] Some minor edits.

---
 .github/workflows/gradle-wrapper-validation.yml | 5 +++--
 .github/workflows/integration-test.yml          | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index 598f4dd..57ebae2 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -1,8 +1,9 @@
 name: Validate Gradle Wrapper
 on:
     push:
-        branches:
-            - workflow
+        branches: [main, main-okta]
+    pull_request:
+        branches: [main, main-okta]
 
 jobs:
     validation:
diff --git a/.github/workflows/integration-test.yml b/.github/workflows/integration-test.yml
index d05dae3..926b52b 100644
--- a/.github/workflows/integration-test.yml
+++ b/.github/workflows/integration-test.yml
@@ -4,6 +4,7 @@ on:
         branches: [main, main-okta]
     pull_request:
         branches: [main, main-okta]
+
 jobs:
     run-test:
         name: Run tests and build frontend