fix(ui): disable QuickConnection button when user has no namespaces

Author: luizhf42

ui/src/components/QuickConnection/QuickConnection.vue

@@ -4,29 +4,27 @@
       color="primary"
       variant="flat"
       tabindex="0"
-      aria-label="Dialog Quick Connection"
       data-test="quick-connection-open-btn"
       prepend-icon="mdi-console"
       block
+      text="Quick Connect"
+      :disabled
       @click="showDialog = true"
-    >
-      Quick Connect
-    </v-btn>
+    />
 
-    <div>
-      <p
-        class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
-        data-test="quick-connect-instructions"
+    <p
+      v-if="!disabled"
+      class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1"
+      data-test="quick-connect-instructions"
+    >
+      Press <v-chip
+        density="compact"
+        size="small"
+        label
       >
-        Press <v-chip
-          density="compact"
-          size="small"
-          label
-        >
-          Ctrl+K
-        </v-chip> to Quick Connect!
-      </p>
-    </div>
+        Ctrl+K
+      </v-chip> to Quick Connect!
+    </p>
 
     <WindowDialog
       v-model="showDialog"
@@ -130,6 +128,8 @@ import { useMagicKeys } from "@vueuse/core";
 import QuickConnectionList from "./QuickConnectionList.vue";
 import WindowDialog from "@/components/Dialogs/WindowDialog.vue";
 
+const props = defineProps<{ disabled: boolean }>();
+
 const showDialog = ref(false);
 const filter = ref("");
 const listRef = ref<InstanceType<typeof QuickConnectionList> & { rootEl?: HTMLElement }>();
@@ -146,6 +146,7 @@ const normalizeLabel = (label: string) => label.toLowerCase().replace(/\s+/g, "-
 useMagicKeys({
   passive: false,
   onEventFired(event) {
+    if (props.disabled) return;
     if (event.ctrlKey && event.key.toLowerCase() === "k" && event.type === "keydown") {
       event.preventDefault();
       showDialog.value = !showDialog.value;
@@ -155,6 +156,8 @@ useMagicKeys({
     }
   },
 });
+
+defineExpose({ showDialog });
 </script>
 
 <style scoped lang="scss">

ui/src/layouts/AppLayout.vue

@@ -127,7 +127,7 @@
       </template>
 
       <v-col class="d-flex align-end justify-center">
-        <QuickConnection />
+        <QuickConnection :disabled="!hasNamespaces" />
       </v-col>
     </v-list>
   </v-navigation-drawer>

ui/tests/components/QuickConnection/QuickConnection.spec.ts

@@ -69,9 +69,8 @@ describe("Quick Connection", () => {
       .reply(200, devices);
 
     wrapper = mount(QuickConnection, {
-      global: {
-        plugins: [vuetify, router, SnackbarPlugin],
-      },
+      global: { plugins: [vuetify, router, SnackbarPlugin] },
+      props: { disabled: false },
     });
   });
 
@@ -108,6 +107,20 @@ describe("Quick Connection", () => {
 
     dispatchEvent(event);
 
-    expect(wrapper.find('[data-test="quick-connection-open-btn"]').exists()).toBe(true);
+    expect(wrapper.vm.showDialog).toBe(true);
+  });
+
+  it("Disables the button when disabled prop is true", async () => {
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('[data-test="quick-connection-open-btn"]').attributes("disabled")).toBeDefined();
+  });
+
+  it("Ignores Ctrl + K keydown when disabled prop is true", async () => {
+    await wrapper.setProps({ disabled: true });
+    const event = new KeyboardEvent("keydown", { ctrlKey: true, key: "k" });
+
+    dispatchEvent(event);
+
+    expect(wrapper.vm.showDialog).toBe(false);
   });
 });

ui/tests/components/QuickConnection/__snapshots__/QuickConnection.spec.ts.snap

@@ -1,18 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Quick Connection > Renders the component 1`] = `
-"<div data-v-136d2a2f=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" aria-label="Dialog Quick Connection" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Quick Connect </span>
+"<div data-v-136d2a2f=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Quick Connect</span>
     <!---->
     <!---->
   </button>
-  <div data-v-136d2a2f="">
-    <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--light v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
-      <!---->
-      <!---->
-    <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
+  <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--light v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
     <!---->
-    <!----></span> to Quick Connect! </p>
-  </div>
+    <!---->
+  <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
+  <!---->
+  <!----></span> to Quick Connect! </p>
   <!---->
   <!---->
 </div>"

ui/tests/layouts/__snapshots__/AppLayout.spec.ts.snap

@@ -247,18 +247,11 @@ exports[`App Layout Component > Renders the component 1`] = `
             </transition-stub>
           </div>
           <div data-v-e7291ef4="" class="v-col d-flex align-end justify-center">
-            <div data-v-136d2a2f="" data-v-e7291ef4=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" aria-label="Dialog Quick Connection" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator=""> Quick Connect </span>
+            <div data-v-136d2a2f="" data-v-e7291ef4=""><button data-v-136d2a2f="" tabindex="0" type="button" class="v-btn v-btn--block v-btn--disabled v-theme--dark bg-primary v-btn--density-default v-btn--size-default v-btn--variant-flat" disabled="" data-test="quick-connection-open-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><span class="v-btn__prepend"><i class="mdi-console mdi v-icon notranslate v-theme--dark v-icon--size-default" aria-hidden="true"></i></span><span class="v-btn__content" data-no-activator="">Quick Connect</span>
                 <!---->
                 <!---->
               </button>
-              <div data-v-136d2a2f="">
-                <p data-v-136d2a2f="" class="text-caption text-md font-weight-bold text-grey-darken-1 ma-1" data-test="quick-connect-instructions"> Press <span data-v-136d2a2f="" class="v-chip v-chip--label v-theme--dark v-chip--density-compact v-chip--size-small v-chip--variant-tonal" draggable="false"><!----><span class="v-chip__underlay"></span>
-                  <!---->
-                  <!---->
-                <div class="v-chip__content" data-no-activator=""> Ctrl+K </div>
-                <!---->
-                <!----></span> to Quick Connect! </p>
-              </div>
+              <!--v-if-->
               <!---->
               <!---->
             </div>
@@ -288,7 +281,7 @@ exports[`App Layout Component > Renders the component 1`] = `
           <!---->
           <!---->
           <!--teleport start-->
-          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-9" aria-owns="v-menu-v-9"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+          <!--teleport end--><button type="button" class="v-btn v-btn--stacked v-theme--light v-btn--density-comfortable v-btn--size-x-large v-btn--variant-text text-none p-2 border-e-thin border-s-thin" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-7" aria-owns="v-menu-v-7"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
             <!----><span class="v-btn__content" data-no-activator=""><div class="d-flex align-center ga-2"><span class="v-chip v-chip--label v-theme--light text-primary v-chip--density-default v-chip--size-default v-chip--variant-tonal text-uppercase" draggable="false"><!----><span class="v-chip__underlay"></span>
             <!---->
             <!---->
@@ -309,7 +302,7 @@ exports[`App Layout Component > Renders the component 1`] = `
         </ul>
       </div>
       <div class="v-spacer"></div>
-      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-13" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+      <div class="d-flex align-center ga-4 mr-4"><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-describedby="v-tooltip-v-11" aria-label="community-help-icon" data-test="support-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-help-circle mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
           <!---->
           <!---->
@@ -322,7 +315,7 @@ exports[`App Layout Component > Renders the component 1`] = `
           </div>
         </div>
         <!--teleport start-->
-        <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-21" aria-owns="v-menu-v-21" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!--teleport end--><button type="button" class="v-btn v-btn--icon v-theme--light text-primary v-btn--density-default v-btn--variant-text" aria-haspopup="menu" aria-expanded="false" aria-controls="v-menu-v-19" aria-owns="v-menu-v-19" data-test="user-menu-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
           <!----><span class="v-btn__content" data-no-activator=""><div data-v-09753bb1="" class="v-avatar v-theme--light bg-primary v-avatar--density-default v-avatar--variant-flat border" style="width: 1.5rem; height: 1.5rem;" email="" data-test="user-icon"><i data-v-09753bb1="" class="mdi-account mdi v-icon notranslate v-theme--light v-icon--size-default text-surface" aria-hidden="true" data-test="gravatar-placeholder"></i><!----><span class="v-avatar__underlay"></span>
       </div></span>
       <!---->