From 7aa7f42c522a0b18027acbee8b30281a492f6fa1 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 22 Sep 2022 11:13:28 -0700
Subject: [PATCH] Improves keyboard short cuts and adds a test

---
 Dockerfile                          |  8 +++++---
 assets/components/Search.vue        | 16 +++++-----------
 assets/layouts/default.vue          | 19 ++++++++-----------
 e2e/cypress/e2e/dozze_default.cy.js | 10 ++++++++--
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 07940d44..e50da1de 100644
--- a/Dockerfile
+++ b/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
+RUN pnpm build
 
 FROM --platform=$BUILDPLATFORM golang:1.19.1-alpine AS builder
 
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index 48c2af5d..97326d17 100644
--- a/assets/components/Search.vue
+++ b/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>
 
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index 222ae679..091b6c4b 100644
--- a/assets/layouts/default.vue
+++ b/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,
diff --git a/e2e/cypress/e2e/dozze_default.cy.js b/e2e/cypress/e2e/dozze_default.cy.js
index d225420b..c952c9c4 100644
--- a/e2e/cypress/e2e/dozze_default.cy.js
+++ b/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");
+  });
 });