From bc91237d7c54bdcd15c5c39a55def50d172bb659 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Sat, 12 Aug 2023 16:53:58 +0200
Subject: [PATCH] Refactor usage of tooltips for flexibility

This commit introduces a new Vue component to handle tooltips. It acts
as a wrapper for the `v-tooltip`. It enhances the maintainability,
readability and portability of tooltips by enabling the direct inclusion
of inline HTML in the tooltip components. It solves issues such as
absence of linting or editor support and cumbersome string
concatenation.

It also provides an abstraction layer that simplifies the switching
between different tooltip implementations, which would allow a smooth
migration to Vue 3 (see #230).
---
 docs/presentation.md                          |  11 +-
 .../Instructions/CodeInstruction.vue          |  20 ++--
 .../Instructions/InstructionList.vue          |  32 +++---
 .../Scripts/Menu/Selector/TheSelector.vue     | 101 +++++++++++-------
 .../components/Shared/TooltipWrapper.vue      |  65 +++++++++++
 5 files changed, 171 insertions(+), 58 deletions(-)
 create mode 100644 src/presentation/components/Shared/TooltipWrapper.vue

diff --git a/docs/presentation.md b/docs/presentation.md
index 7dee1eb3..49595164 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -61,9 +61,16 @@ Stateful components can mutate and/or react to state changes (e.g., user selecti
 
 📖 Refer to [architecture.md | Application State](./architecture.md#application-state) for an overview of event handling and [application.md | Application State](./presentation.md#application-state) for an in-depth understanding of state management in the application layer.
 
-## Modals
+## Shared UI components
 
-- [ModalDialog.vue](./../src/presentation/components/Shared/Modal/ModalDialog.vue) is a shared component utilized for rendering modal windows.
+Shared UI components promote consistency and simplifies the creation of the front-end.
+
+In order to maintain portability and easy maintainability, the preference is towards using homegrown components over third-party ones or comprehensive UI frameworks like Quasar.
+
+Shared components include:
+
+- [ModalDialog.vue](./../src/presentation/components/Shared/Modal/ModalDialog.vue) is utilized for rendering modal windows.
+- [TooltipWrapper.vue](./../src/presentation/components/Shared/TooltipWrapper.vue) acts as a wrapper for rendering tooltips.
 
 ## Sass naming convention
 
diff --git a/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue b/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
index 012756d6..8137c92a 100644
--- a/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
+++ b/src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue
@@ -2,20 +2,28 @@
   <span class="code-wrapper">
     <span class="dollar">$</span>
     <code><slot /></code>
-    <font-awesome-icon
-      class="copy-button"
-      :icon="['fas', 'copy']"
-      @click="copyCode"
-      v-tooltip.top-center="'Copy'"
-    />
+    <TooltipWrapper>
+      <font-awesome-icon
+        class="copy-button"
+        :icon="['fas', 'copy']"
+        @click="copyCode"
+      />
+      <template v-slot:tooltip>
+        Copy
+      </template>
+    </TooltipWrapper>
   </span>
 </template>
 
 <script lang="ts">
 import { defineComponent, useSlots } from 'vue';
 import { Clipboard } from '@/infrastructure/Clipboard';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 
 export default defineComponent({
+  components: {
+    TooltipWrapper,
+  },
   setup() {
     const slots = useSlots();
 
diff --git a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue b/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
index ac7523f2..45f673eb 100644
--- a/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
+++ b/src/presentation/components/Code/CodeButtons/Instructions/InstructionList.vue
@@ -26,21 +26,27 @@
         >
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
-            <font-awesome-icon
-              v-if="step.action.details"
-              class="explanation"
-              :icon="['fas', 'info-circle']"
-              v-tooltip.top-center="step.action.details"
-            />
+            <TooltipWrapper v-if="step.action.details">
+              <font-awesome-icon
+                class="explanation"
+                :icon="['fas', 'info-circle']"
+              />
+              <template v-slot:tooltip>
+                <div v-html="step.action.details" />
+              </template>
+            </TooltipWrapper>
           </div>
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
-            <font-awesome-icon
-              v-if="step.code.details"
-              class="explanation"
-              :icon="['fas', 'info-circle']"
-              v-tooltip.top-center="step.code.details"
-            />
+            <TooltipWrapper v-if="step.code.details">
+              <font-awesome-icon
+                class="explanation"
+                :icon="['fas', 'info-circle']"
+              />
+              <template v-slot:tooltip>
+                <div v-html="step.code.details" />
+              </template>
+            </TooltipWrapper>
           </div>
         </li>
       </ol>
@@ -53,6 +59,7 @@ import {
   defineComponent, PropType, computed,
 } from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { useApplication } from '@/presentation/components/Shared/Hooks/UseApplication';
 import CodeInstruction from './CodeInstruction.vue';
 import { IInstructionListData } from './InstructionListData';
@@ -60,6 +67,7 @@ import { IInstructionListData } from './InstructionListData';
 export default defineComponent({
   components: {
     CodeInstruction,
+    TooltipWrapper,
   },
   props: {
     data: {
diff --git a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
index cc4ad873..34819947 100644
--- a/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Selector/TheSelector.vue
@@ -1,49 +1,73 @@
 <template>
   <MenuOptionList label="Select">
-    <MenuOptionListItem
-      label="None"
-      :enabled="currentSelection !== SelectionType.None"
-      @click="selectType(SelectionType.None)"
-      v-tooltip="
-        'Deselect all selected scripts.<br/>'
-          + '💡 Good start to dive deeper into tweaks and select only what you want.'
-      "
-    />
-    <MenuOptionListItem
-      label="Standard"
-      :enabled="currentSelection !== SelectionType.Standard"
-      @click="selectType(SelectionType.Standard)"
-      v-tooltip="
-        '🛡️ Balanced for privacy and functionality.<br/>'
-          + 'OS and applications will function normally.<br/>'
-          + '💡 Recommended for everyone'"
-    />
-    <MenuOptionListItem
-      label="Strict"
-      :enabled="currentSelection !== SelectionType.Strict"
-      @click="selectType(SelectionType.Strict)"
-      v-tooltip="
-        '🚫 Stronger privacy, disables risky functions that may leak your data.<br/>'
-          + '⚠️ Double check to remove scripts where you would trade functionality for privacy<br/>'
-          + '💡 Recommended for daily users that prefers more privacy over non-essential functions'
-      "
-    />
-    <MenuOptionListItem
-      label="All"
-      :enabled="currentSelection !== SelectionType.All"
-      @click="selectType(SelectionType.All)"
-      v-tooltip="
-        '🔒 Strongest privacy, disabling any functionality that may leak your data.<br/>'
-          + '🛑 Not designed for daily users, it will break important functionalities.<br/>'
-          + '💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable'
-      "
-    />
+    <TooltipWrapper>
+      <!-- None -->
+      <MenuOptionListItem
+        label="None"
+        :enabled="currentSelection !== SelectionType.None"
+        @click="selectType(SelectionType.None)"
+      />
+      <template v-slot:tooltip>
+        Deselect all selected scripts.
+        <br />
+        💡 Good start to dive deeper into tweaks and select only what you want.
+      </template>
+    </TooltipWrapper>
+
+    <!-- Standard -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Standard"
+        :enabled="currentSelection !== SelectionType.Standard"
+        @click="selectType(SelectionType.Standard)"
+      />
+      <template v-slot:tooltip>
+        🛡️ Balanced for privacy and functionality.
+        <br />
+        OS and applications will function normally.
+        <br />
+        💡 Recommended for everyone
+      </template>
+    </TooltipWrapper>
+
+    <!-- Strict -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="Strict"
+        :enabled="currentSelection !== SelectionType.Strict"
+        @click="selectType(SelectionType.Strict)"
+      />
+      <template v-slot:tooltip>
+        🚫 Stronger privacy, disables risky functions that may leak your data.
+        <br />
+        ⚠️ Double check to remove scripts where you would trade functionality for privacy
+        <br />
+        💡 Recommended for daily users that prefers more privacy over non-essential functions
+      </template>
+    </TooltipWrapper>
+
+    <!-- All -->
+    <TooltipWrapper>
+      <MenuOptionListItem
+        label="All"
+        :enabled="currentSelection !== SelectionType.All"
+        @click="selectType(SelectionType.All)"
+      />
+      <template v-slot:tooltip>
+        🔒 Strongest privacy, disabling any functionality that may leak your data.
+        <br />
+        🛑 Not designed for daily users, it will break important functionalities.
+        <br />
+        💡 Only recommended for extreme use-cases like crime labs where no leak is acceptable
+      </template>
+    </TooltipWrapper>
   </MenuOptionList>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { useCollectionState } from '@/presentation/components/Shared/Hooks/UseCollectionState';
+import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import MenuOptionList from '../MenuOptionList.vue';
 import MenuOptionListItem from '../MenuOptionListItem.vue';
@@ -53,6 +77,7 @@ export default defineComponent({
   components: {
     MenuOptionList,
     MenuOptionListItem,
+    TooltipWrapper,
   },
   setup() {
     const { modifyCurrentState, onStateChange, events } = useCollectionState();
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
new file mode 100644
index 00000000..e4b35eec
--- /dev/null
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -0,0 +1,65 @@
+<!--
+  This component acts as a wrapper for the v-tooltip to solve the following:
+    - Direct inclusion of inline HTML in tooltip components has challenges such as
+      - absence of linting or editor support,
+      - involves cumbersome string concatenation.
+      This component caters to these issues by permitting HTML usage in a slot.
+    - It provides an abstraction for a third-party component which simplifies
+      switching and acts as an anti-corruption layer.
+-->
+
+<template>
+  <div class="tooltip-container" v-tooltip.top-center="tooltipHtml">
+    <slot />
+    <div class="tooltip-content" ref="tooltipWrapper">
+      <slot name="tooltip" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent, ref, onMounted, onUpdated, nextTick,
+} from 'vue';
+
+export default defineComponent({
+  setup() {
+    const tooltipWrapper = ref<HTMLElement | undefined>();
+    const tooltipHtml = ref<string | undefined>();
+
+    onMounted(() => updateTooltipHTML());
+
+    onUpdated(() => {
+      nextTick(() => {
+        updateTooltipHTML();
+      });
+    });
+
+    function updateTooltipHTML() {
+      const newValue = tooltipWrapper.value?.innerHTML;
+      const oldValue = tooltipHtml.value;
+      if (newValue === oldValue) {
+        return;
+      }
+      tooltipHtml.value = newValue;
+    }
+
+    return {
+      tooltipWrapper,
+      tooltipHtml,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+.tooltip-container {
+  display: inline-block;
+}
+
+.tooltip-content {
+  display: none;
+}
+</style>