Fix unresponsive copy button on instructions modal

This commit fixes the bug where the "Copy" button does not copy when
clicked on download instructions modal (on Linux and macOS).

This commit also introduces several improvements to the UI components
related to copy action and their interaction with the clipboard feature.

It adds more tests to avoid regression of the bugs and improves
maintainability, testability and adherence to Vue's reactive principles.

Changes include:

- Fix non-responsive copy button in the download instructions modal by
  triggering a `click` event in `AppIcon.vue`.
- Improve `TheCodeButtons.vue`:
  - Remove redundant `getCurrentCode` function.
  - Separate components for each button for better separation of
    concerns and higher testability.
  - Use the `gap` property in the flexbox layout, replacing the less
    explicit sibling combinator approach.
- Add `useClipboard` compositional hook for more idiomatic Vue approach
  to interacting with the clipboard.
- Add `useCurrentCode` compositional hook to handle current code state
  more effectively with unified logic.
- Abstract clipboard operations to an interface to isolate
  responsibilities.
- Switch clipboard implementation to the `navigator.clipboard` API,
  moving away from the deprecated `document.execCommand`.
- Move clipboard logic to the presentation layer to conform to
  separation of concerns and domain-driven design principles.
- Improve `IconButton.vue` component to increase reusability with
  consistent sizing.

src/infrastructure/Clipboard.ts

@@ -1,13 +0,0 @@
-export class Clipboard {
-  public static copyText(text: string): void {
-    const el = document.createElement('textarea');
-    el.value = text;
-    el.setAttribute('readonly', ''); // to avoid focus
-    el.style.position = 'absolute';
-    el.style.left = '-9999px';
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    document.body.removeChild(el);
-  }
-}

src/presentation/bootstrapping/DependencyProvider.ts

@@ -5,6 +5,8 @@ import { useAutoUnsubscribedEvents } from '@/presentation/components/Shared/Hook
 import { IApplicationContext } from '@/application/Context/IApplicationContext';
 import { RuntimeEnvironment } from '@/infrastructure/RuntimeEnvironment/RuntimeEnvironment';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { useClipboard } from '../components/Shared/Hooks/Clipboard/UseClipboard';
+import { useCurrentCode } from '../components/Shared/Hooks/UseCurrentCode';
 
 export function provideDependencies(
   context: IApplicationContext,
@@ -23,6 +25,12 @@ export function provideDependencies(
     const { events } = api.inject(InjectionKeys.useAutoUnsubscribedEvents)();
     return useCollectionState(context, events);
   });
+  registerTransient(InjectionKeys.useClipboard, () => useClipboard());
+  registerTransient(InjectionKeys.useCurrentCode, () => {
+    const { events } = api.inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const state = api.inject(InjectionKeys.useCollectionState)();
+    return useCurrentCode(state, events);
+  });
 }
 
 export interface VueDependencyInjectionApi {

src/presentation/components/Code/CodeButtons/CodeCopyButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <IconButton
+    text="Copy"
+    @click="copyCode"
+    icon-name="copy"
+  />
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, inject,
+} from 'vue';
+import { InjectionKeys } from '@/presentation/injectionSymbols';
+import IconButton from './IconButton.vue';
+
+export default defineComponent({
+  components: {
+    IconButton,
+  },
+  setup() {
+    const { copyText } = inject(InjectionKeys.useClipboard)();
+    const { currentCode } = inject(InjectionKeys.useCurrentCode)();
+
+    async function copyCode() {
+      await copyText(currentCode.value);
+    }
+
+    return {
+      copyCode,
+    };
+  },
+});
+</script>

src/presentation/components/Code/CodeButtons/CodeRunButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <IconButton
+    v-if="canRun"
+    text="Run"
+    @click="executeCode"
+    icon-name="play"
+  />
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, computed, inject,
+} from 'vue';
+import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+import { CodeRunner } from '@/infrastructure/CodeRunner';
+import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
+import IconButton from './IconButton.vue';
+
+export default defineComponent({
+  components: {
+    IconButton,
+  },
+  setup() {
+    const { currentState, currentContext } = inject(InjectionKeys.useCollectionState)();
+    const { os, isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+
+    const canRun = computed<boolean>(() => getCanRunState(currentState.value.os, isDesktop, os));
+
+    async function executeCode() {
+      await runCode(currentContext);
+    }
+
+    return {
+      isDesktopVersion: isDesktop,
+      canRun,
+      executeCode,
+    };
+  },
+});
+
+function getCanRunState(
+  selectedOs: OperatingSystem,
+  isDesktopVersion: boolean,
+  hostOs: OperatingSystem,
+): boolean {
+  const isRunningOnSelectedOs = selectedOs === hostOs;
+  return isDesktopVersion && isRunningOnSelectedOs;
+}
+
+async function runCode(context: IReadOnlyApplicationContext) {
+  const runner = new CodeRunner();
+  await runner.runCode(
+    /* code: */ context.state.code.current,
+    /* appName: */ context.app.info.name,
+    /* fileExtension: */ context.state.collection.scripting.fileExtension,
+  );
+}
+</script>

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -1,15 +1,17 @@
 <template>
-  <button
-    class="button"
-    type="button"
-    @click="onClicked"
-  >
-    <AppIcon
-      class="button__icon"
-      :icon="iconName"
-    />
-    <div class="button__text">{{text}}</div>
-  </button>
+  <div class="button-wrapper">
+    <button
+      class="button"
+      type="button"
+      @click="onClicked"
+    >
+      <AppIcon
+        class="button__icon"
+        :icon="iconName"
+      />
+      <div class="button__text">{{text}}</div>
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -49,10 +51,20 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
+.button-wrapper {
+  position: relative;
+  height: 70px;
+  .button {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .button {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
 
   background-color: $color-secondary;
   color: $color-on-secondary;
@@ -70,19 +82,17 @@ export default defineComponent({
 
   @include clickable;
 
-  width: 10%;
-  min-width: 90px;
   @include hover-or-touch {
     background: $color-surface;
     box-shadow: 0px 2px 10px 5px $color-secondary;
+    .button__text {
+      display: block;
+    }
+    .button__icon {
+      display: none;
+    }
   }
-  @include hover-or-touch('>&__text') {
-    display: block;
-  }
-  @include hover-or-touch('>&__icon') {
-    display: none;
-  }
-  &__text {
+  .button__text {
     display: none;
     font-family: $font-artistic;
     font-size: 1.5em;

src/presentation/components/Code/CodeButtons/Save/CodeSaveButton.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <IconButton
+      :text="isDesktopVersion ? 'Save' : 'Download'"
+      @click="saveCode"
+      :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
+    />
+    <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
+      <InstructionList :data="instructions" />
+    </ModalDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, ref, computed, inject,
+} from 'vue';
+import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
+import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
+import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
+import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+import IconButton from '../IconButton.vue';
+import InstructionList from './Instructions/InstructionList.vue';
+import { IInstructionListData } from './Instructions/InstructionListData';
+import { getInstructions, hasInstructions } from './Instructions/InstructionListDataFactory';
+
+export default defineComponent({
+  components: {
+    IconButton,
+    InstructionList,
+    ModalDialog,
+  },
+  setup() {
+    const { currentState } = inject(InjectionKeys.useCollectionState)();
+    const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+
+    const areInstructionsVisible = ref(false);
+    const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
+    const instructions = computed<IInstructionListData | undefined>(() => getDownloadInstructions(
+      currentState.value.collection.os,
+      fileName.value,
+    ));
+
+    function saveCode() {
+      saveCodeToDisk(fileName.value, currentState.value);
+      areInstructionsVisible.value = true;
+    }
+
+    return {
+      isDesktopVersion: isDesktop,
+      instructions,
+      fileName,
+      areInstructionsVisible,
+      saveCode,
+    };
+  },
+});
+
+function getDownloadInstructions(
+  os: OperatingSystem,
+  fileName: string,
+): IInstructionListData | undefined {
+  if (!hasInstructions(os)) {
+    return undefined;
+  }
+  return getInstructions(os, fileName);
+}
+
+function saveCodeToDisk(fileName: string, state: IReadOnlyCategoryCollectionState) {
+  const content = state.code.current;
+  const type = getType(state.collection.scripting.language);
+  SaveFileDialog.saveFile(content, fileName, type);
+}
+
+function getType(language: ScriptingLanguage) {
+  switch (language) {
+    case ScriptingLanguage.batchfile:
+      return FileType.BatchFile;
+    case ScriptingLanguage.shellscript:
+      return FileType.ShellScript;
+    default:
+      throw new Error('unknown file type');
+  }
+}
+function buildFileName(scripting: IScriptingDefinition) {
+  const fileName = 'privacy-script';
+  if (scripting.fileExtension) {
+    return `${fileName}.${scripting.fileExtension}`;
+  }
+  return fileName;
+}
+</script>

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, shallowRef } from 'vue';
-import { Clipboard } from '@/infrastructure/Clipboard';
+import { defineComponent, shallowRef, inject } from 'vue';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
+import { InjectionKeys } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   components: {
@@ -27,9 +27,11 @@ export default defineComponent({
     AppIcon,
   },
   setup() {
+    const { copyText } = inject(InjectionKeys.useClipboard)();
+
     const codeElement = shallowRef<HTMLElement | undefined>();
 
-    function copyCode() {
+    async function copyCode() {
       const element = codeElement.value;
       if (!element) {
         throw new Error('Code element could not be found.');
@@ -38,7 +40,7 @@ export default defineComponent({
       if (!code) {
         throw new Error('Code element does not contain any text.');
       }
-      Clipboard.copyText(code);
+      await copyText(code);
     }
 
     return {

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -1,168 +1,36 @@
 <template>
   <div class="container" v-if="hasCode">
-    <IconButton
-      v-if="canRun"
-      text="Run"
-      v-on:click="executeCode"
-      icon-name="play"
-    />
-    <IconButton
-      :text="isDesktopVersion ? 'Save' : 'Download'"
-      v-on:click="saveCode"
-      :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
-    />
-    <IconButton
-      text="Copy"
-      v-on:click="copyCode"
-      icon-name="copy"
-    />
-    <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
-      <InstructionList :data="instructions" />
-    </ModalDialog>
+    <CodeRunButton class="code-button" />
+    <CodeSaveButton class="code-button" />
+    <CodeCopyButton class="code-button" />
   </div>
 </template>
 
 <script lang="ts">
 import {
-  defineComponent, ref, computed, inject,
+  defineComponent, computed, inject,
 } from 'vue';
 import { InjectionKeys } from '@/presentation/injectionSymbols';
-import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
-import { Clipboard } from '@/infrastructure/Clipboard';
-import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
-import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
-import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
-import { IApplicationCode } from '@/application/Context/State/Code/IApplicationCode';
-import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
-import { OperatingSystem } from '@/domain/OperatingSystem';
-import { CodeRunner } from '@/infrastructure/CodeRunner';
-import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
-import InstructionList from './Instructions/InstructionList.vue';
-import IconButton from './IconButton.vue';
-import { IInstructionListData } from './Instructions/InstructionListData';
-import { getInstructions, hasInstructions } from './Instructions/InstructionListDataFactory';
+import CodeRunButton from './CodeRunButton.vue';
+import CodeCopyButton from './CodeCopyButton.vue';
+import CodeSaveButton from './Save/CodeSaveButton.vue';
 
 export default defineComponent({
   components: {
-    IconButton,
-    InstructionList,
-    ModalDialog,
+    CodeRunButton,
+    CodeCopyButton,
+    CodeSaveButton,
   },
   setup() {
-    const {
-      currentState, currentContext, onStateChange,
-    } = inject(InjectionKeys.useCollectionState)();
-    const { os, isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const { currentCode } = inject(InjectionKeys.useCurrentCode)();
 
-    const areInstructionsVisible = ref(false);
-    const canRun = computed<boolean>(() => getCanRunState(currentState.value.os, isDesktop, os));
-    const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
-    const hasCode = ref(false);
-    const instructions = computed<IInstructionListData | undefined>(() => getDownloadInstructions(
-      currentState.value.collection.os,
-      fileName.value,
-    ));
-
-    async function copyCode() {
-      const code = await getCurrentCode();
-      Clipboard.copyText(code.current);
-    }
-
-    function saveCode() {
-      saveCodeToDisk(fileName.value, currentState.value);
-      areInstructionsVisible.value = true;
-    }
-
-    async function executeCode() {
-      await runCode(currentContext);
-    }
-
-    onStateChange((newState) => {
-      updateCurrentCode(newState.code.current);
-      subscribeToCodeChanges(newState.code);
-    }, { immediate: true });
-
-    function subscribeToCodeChanges(code: IApplicationCode) {
-      events.unsubscribeAllAndRegister([
-        code.changed.on((newCode) => updateCurrentCode(newCode.code)),
-      ]);
-    }
-
-    function updateCurrentCode(code: string) {
-      hasCode.value = code && code.length > 0;
-    }
-
-    async function getCurrentCode(): Promise<IApplicationCode> {
-      const { code } = currentContext.state;
-      return code;
-    }
+    const hasCode = computed<boolean>(() => currentCode.value.length > 0);
 
     return {
-      isDesktopVersion: isDesktop,
-      canRun,
       hasCode,
-      instructions,
-      fileName,
-      areInstructionsVisible,
-      copyCode,
-      saveCode,
-      executeCode,
     };
   },
 });
-
-function getDownloadInstructions(
-  os: OperatingSystem,
-  fileName: string,
-): IInstructionListData | undefined {
-  if (!hasInstructions(os)) {
-    return undefined;
-  }
-  return getInstructions(os, fileName);
-}
-
-function getCanRunState(
-  selectedOs: OperatingSystem,
-  isDesktopVersion: boolean,
-  hostOs: OperatingSystem,
-): boolean {
-  const isRunningOnSelectedOs = selectedOs === hostOs;
-  return isDesktopVersion && isRunningOnSelectedOs;
-}
-
-function saveCodeToDisk(fileName: string, state: IReadOnlyCategoryCollectionState) {
-  const content = state.code.current;
-  const type = getType(state.collection.scripting.language);
-  SaveFileDialog.saveFile(content, fileName, type);
-}
-
-function getType(language: ScriptingLanguage) {
-  switch (language) {
-    case ScriptingLanguage.batchfile:
-      return FileType.BatchFile;
-    case ScriptingLanguage.shellscript:
-      return FileType.ShellScript;
-    default:
-      throw new Error('unknown file type');
-  }
-}
-function buildFileName(scripting: IScriptingDefinition) {
-  const fileName = 'privacy-script';
-  if (scripting.fileExtension) {
-    return `${fileName}.${scripting.fileExtension}`;
-  }
-  return fileName;
-}
-
-async function runCode(context: IReadOnlyApplicationContext) {
-  const runner = new CodeRunner();
-  await runner.runCode(
-    /* code: */ context.state.code.current,
-    /* appName: */ context.app.info.name,
-    /* fileExtension: */ context.state.collection.scripting.fileExtension,
-  );
-}
 </script>
 
 <style scoped lang="scss">
@@ -170,8 +38,10 @@ async function runCode(context: IReadOnlyApplicationContext) {
   display: flex;
   flex-direction: row;
   justify-content: center;
+  gap: 30px;
 }
-.container > * + * {
-  margin-left: 30px;
+.code-button {
+  width: 10%;
+  min-width: 90px;
 }
 </style>

src/presentation/components/Shared/Hooks/Clipboard/BrowserClipboard.ts

@@ -0,0 +1,15 @@
+import { Clipboard } from './Clipboard';
+
+export type NavigatorClipboard = typeof globalThis.navigator.clipboard;
+
+export class BrowserClipboard implements Clipboard {
+  constructor(
+    private readonly navigatorClipboard: NavigatorClipboard = globalThis.navigator.clipboard,
+  ) {
+
+  }
+
+  public async copyText(text: string): Promise<void> {
+    await this.navigatorClipboard.writeText(text);
+  }
+}

src/presentation/components/Shared/Hooks/Clipboard/Clipboard.ts

@@ -0,0 +1,3 @@
+export interface Clipboard {
+  copyText(text: string): Promise<void>;
+}

src/presentation/components/Shared/Hooks/Clipboard/UseClipboard.ts

@@ -0,0 +1,13 @@
+import { FunctionKeys } from '@/TypeHelpers';
+import { BrowserClipboard } from './BrowserClipboard';
+import { Clipboard } from './Clipboard';
+
+export function useClipboard(clipboard: Clipboard = new BrowserClipboard()) {
+  // Bind functions for direct use from destructured assignments such as `const { .. } = ...`.
+  const functionKeys: readonly FunctionKeys<Clipboard>[] = ['copyText'];
+  functionKeys.forEach((functionName) => {
+    const fn = clipboard[functionName];
+    clipboard[functionName] = fn.bind(clipboard);
+  });
+  return clipboard;
+}

src/presentation/components/Shared/Hooks/UseCurrentCode.ts

@@ -0,0 +1,32 @@
+import { ref } from 'vue';
+import { IApplicationCode } from '@/application/Context/State/Code/IApplicationCode';
+import { IEventSubscriptionCollection } from '@/infrastructure/Events/IEventSubscriptionCollection';
+import { useCollectionState } from './UseCollectionState';
+
+export function useCurrentCode(
+  state: ReturnType<typeof useCollectionState>,
+  events: IEventSubscriptionCollection,
+) {
+  const { onStateChange } = state;
+
+  const currentCode = ref<string>('');
+
+  onStateChange((newState) => {
+    updateCurrentCode(newState.code.current);
+    subscribeToCodeChanges(newState.code);
+  }, { immediate: true });
+
+  function subscribeToCodeChanges(code: IApplicationCode) {
+    events.unsubscribeAllAndRegister([
+      code.changed.on((newCode) => updateCurrentCode(newCode.code)),
+    ]);
+  }
+
+  function updateCurrentCode(newCode: string) {
+    currentCode.value = newCode;
+  }
+
+  return {
+    currentCode,
+  };
+}

src/presentation/components/Shared/Icon/AppIcon.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-html="svgContent" class="inline-icon" />
+  <div
+    class="inline-icon"
+    v-html="svgContent"
+    @click="onClicked"
+  />
 </template>
 
 <script lang="ts">
@@ -18,10 +22,19 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  emits: [
+    'click',
+  ],
+  setup(props, { emit }) {
     const useSvgLoaderHook = inject('useSvgLoaderHook', useSvgLoader);
+
     const { svgContent } = useSvgLoaderHook(() => props.icon);
-    return { svgContent };
+
+    function onClicked() {
+      emit('click');
+    }
+
+    return { svgContent, onClicked };
   },
 });
 

src/presentation/injectionSymbols.ts

@@ -1,7 +1,9 @@
-import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
-import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
-import { useRuntimeEnvironment } from '@/presentation/components/Shared/Hooks/UseRuntimeEnvironment';
-import type { useAutoUnsubscribedEvents } from './components/Shared/Hooks/UseAutoUnsubscribedEvents';
+import type { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import type { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
+import type { useRuntimeEnvironment } from '@/presentation/components/Shared/Hooks/UseRuntimeEnvironment';
+import type { useClipboard } from '@/presentation/components/Shared/Hooks/Clipboard/UseClipboard';
+import type { useCurrentCode } from '@/presentation/components/Shared/Hooks/UseCurrentCode';
+import type { useAutoUnsubscribedEvents } from '@/presentation/components/Shared/Hooks/UseAutoUnsubscribedEvents';
 import type { InjectionKey } from 'vue';
 
 export const InjectionKeys = {
@@ -9,6 +11,8 @@ export const InjectionKeys = {
   useApplication: defineSingletonKey<ReturnType<typeof useApplication>>('useApplication'),
   useRuntimeEnvironment: defineSingletonKey<ReturnType<typeof useRuntimeEnvironment>>('useRuntimeEnvironment'),
   useAutoUnsubscribedEvents: defineTransientKey<ReturnType<typeof useAutoUnsubscribedEvents>>('useAutoUnsubscribedEvents'),
+  useClipboard: defineTransientKey<ReturnType<typeof useClipboard>>('useClipboard'),
+  useCurrentCode: defineTransientKey<ReturnType<typeof useCurrentCode>>('useCurrentCode'),
 };
 
 function defineSingletonKey<T>(key: string): InjectionKey<T> {