Merge pull request #1887 from amir20/keyboard

Improves keyboard short cuts and adds a test

Dockerfile

@@ -10,15 +10,17 @@ WORKDIR /build
 COPY pnpm-lock.yaml ./
 RUN pnpm fetch --prod
 
-# Copy files
-COPY package.json .* vite.config.ts index.html ./
+# Copy package.json and install dependencies
+COPY package.json ./
+RUN pnpm install -r --offline --prod --ignore-scripts
 
 # Copy assets and translations to build
+COPY .* vite.config.ts index.html ./
 COPY assets ./assets
 COPY locales ./locales
 
-# Install dependencies
-RUN pnpm install -r --offline --prod --ignore-scripts && pnpm build
+# Build assets
+RUN pnpm build
 
 FROM --platform=$BUILDPLATFORM golang:1.19.1-alpine AS builder
 

assets/components/Search.vue

@@ -22,23 +22,17 @@
 </template>
 
 <script lang="ts" setup>
-const { Meta_F, Ctrl_F, esc } = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if ((e.ctrlKey || e.metaKey) && e.key === "f" && e.type === "keydown") e.preventDefault();
-  },
-});
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
-whenever(
-  () => Meta_F.value || Ctrl_F.value,
-  () => {
+onKeyStroke("f", (e) => {
+  if (e.ctrlKey || e.metaKey) {
     showSearch.value = true;
     nextTick(() => input.value?.focus() || input.value?.select());
+    e.preventDefault();
   }
-);
-whenever(esc, () => resetSearch());
+});
+
 onUnmounted(() => resetSearch());
 </script>
 

assets/layouts/default.vue

@@ -50,24 +50,21 @@ import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
-const { Meta_K, Ctrl_K } = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if ((e.ctrlKey || e.metaKey) && e.key === "k" && e.type === "keydown") e.preventDefault();
-  },
-});
+
 const containerStore = useContainerStore();
 const { activeContainers, visibleContainers } = storeToRefs(containerStore);
 
-whenever(
-  () => Meta_K.value || Ctrl_K.value,
-  () => showFuzzySearch()
-);
-
 watchEffect(() => {
   setTitle(`${visibleContainers.value.length} containers`);
 });
 
+onKeyStroke("k", (e) => {
+  if (e.ctrlKey || e.metaKey) {
+    showFuzzySearch();
+    e.preventDefault();
+  }
+});
+
 function showFuzzySearch() {
   oruga.modal.open({
     // parent: this,

e2e/cypress/e2e/dozze_default.cy.js

@@ -9,7 +9,7 @@ context("Dozzle default mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () =>
     cy.get("li.running", { timeout: 10000 }).removeDates().replaceSkippedElements().matchImage();
   });
 
-  it("correct title", () => {
+  it("correct title is shown", () => {
     cy.title().should("eq", "1 containers - Dozzle");
 
     cy.get("li.running:first a").click();
@@ -17,9 +17,15 @@ context("Dozzle default mode", { baseUrl: Cypress.env("DOZZLE_DEFAULT") }, () =>
     cy.title().should("include", "- Dozzle");
   });
 
-  it("settings page", () => {
+  it("navigating to setting page works ", () => {
     cy.get("a[href='/settings']").click();
 
     cy.contains("About");
   });
+
+  it("shortcut for fuzzy search works", () => {
+    cy.get("body").type("{ctrl}k");
+
+    cy.get("input[placeholder='Search containers using ⌘ + k or ctrl + k']").should("be.visible");
+  });
 });