From 7aa31e54188af51a14ec193c4f88839946061315 Mon Sep 17 00:00:00 2001
From: e-salad <e-salad@users.noreply.github.com>
Date: Sat, 23 Nov 2024 00:47:15 -0600
Subject: [PATCH] improve script selection functionality

- Improve validation for configuration import
- Refactor SaveSelectionButton.vue implementation
- Add floppy-disk-gear icon for SaveSelectionButton
---
 .../Dialog/Browser/FileSaverDialog.ts         |  2 +
 .../assets/icons/floppy-disk-gear.svg         |  4 ++
 .../CodeButtons/Save/SaveSelectionButton.vue  | 30 +++++---
 .../TheRecommendationSelector.vue             | 70 ++++++++++++++++---
 .../components/Shared/Icon/IconName.ts        |  1 +
 5 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 src/presentation/assets/icons/floppy-disk-gear.svg

diff --git a/src/infrastructure/Dialog/Browser/FileSaverDialog.ts b/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
index b29e565d3..4d77961c5 100644
--- a/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
+++ b/src/infrastructure/Dialog/Browser/FileSaverDialog.ts
@@ -39,4 +39,6 @@ const MimeTypes: Record<FileType, string> = {
   // otherwise they ignore extension and save the file as text.
   [FileType.BatchFile]: 'application/bat', // https://en.wikipedia.org/wiki/Batch_file
   [FileType.ShellScript]: 'text/x-shellscript', // https://de.wikipedia.org/wiki/Shellskript#MIME-Typ
+  [FileType.Json]: 'application/json', // https://en.wikipedia.org/wiki/JSON
+
 } as const;
diff --git a/src/presentation/assets/icons/floppy-disk-gear.svg b/src/presentation/assets/icons/floppy-disk-gear.svg
new file mode 100644
index 000000000..3f5b8e793
--- /dev/null
+++ b/src/presentation/assets/icons/floppy-disk-gear.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="574" height="598" fill="none" viewBox="0 0 574 598">
+  <path fill="#000" fill-rule="evenodd" d="M64 118c-35.3 0-64 28.7-64 64v320c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V259.3c0-4.065-2.419-7.665-5.947-9.683l-16.092-9.206a7.525 7.525 0 0 0-9.9 2.215 7.523 7.523 0 0 1-8.2 2.929l-9.317-2.621a13.974 13.974 0 0 1-2.95-1.206l-32.763-17.997a14.371 14.371 0 0 1-2.48-1.721c-2.445-2.111-6.902-6.089-7.351-8.51l-1-15-.901-15.774c-.065-1.132-.637-2.272-.373-3.376.083-.35.189-.69.088-1.13-.114-.503-.309-1.005-.33-1.519-.154-3.786-1.406-6.45-3.233-8.247-1.591-1.565-28.072-13.97-28.743-16.099-.225-.711-.275-.761-.645-1.409-1.691-2.958-6.081-11.792-4.863-21.946 1.5-12.5-7-10.907-7.5-11-.5-.093-241.5 0-241.5 0Zm32 64c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32v-64c0-17.7-14.3-32-32-32H96Zm173.255 210.745a64.003 64.003 0 0 0-90.51 0 64 64 0 1 0 90.51 0Z" clip-rule="evenodd"/>
+  <path fill="#000" d="M571.685 93.628a9.005 9.005 0 0 0-4.376-6.074l-22.495-12.82a22 22 0 0 1-11.107-19.036l-.09-25.088a8.992 8.992 0 0 0-3.183-6.84A125.878 125.878 0 0 0 489.127.518a9.003 9.003 0 0 0-7.267.664L458.749 14.1a22 22 0 0 1-21.475-.003L414.128 1.148a9.003 9.003 0 0 0-7.278-.675 125.88 125.88 0 0 0-41.263 23.342 8.997 8.997 0 0 0-3.183 6.829l-.112 25.135a22 22 0 0 1-11.107 19.016L328.679 87.62a8.997 8.997 0 0 0-4.376 6.075 119.776 119.776 0 0 0 0 46.752 8.998 8.998 0 0 0 4.376 6.074l22.495 12.82a22.004 22.004 0 0 1 11.107 19.035l.089 25.1a8.994 8.994 0 0 0 3.184 6.84 125.892 125.892 0 0 0 41.307 23.252 9.003 9.003 0 0 0 7.267-.664l23.138-12.959a22.002 22.002 0 0 1 21.492-.006l23.135 12.943a8.9 8.9 0 0 0 4.388 1.125 9.112 9.112 0 0 0 2.891-.473 126.092 126.092 0 0 0 41.262-23.32 9.006 9.006 0 0 0 3.183-6.828l.112-25.135a22.003 22.003 0 0 1 11.107-19.016l22.507-12.826a9.005 9.005 0 0 0 4.376-6.075 119.813 119.813 0 0 0-.034-46.707Zm-123.674 68.384a44.997 44.997 0 1 1-.001-89.993 44.997 44.997 0 0 1 .001 89.993Z"/>
+</svg>
diff --git a/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
index 624bdc7fb..32bb205e7 100644
--- a/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
+++ b/src/presentation/components/Code/CodeButtons/Save/SaveSelectionButton.vue
@@ -1,7 +1,7 @@
 <template>
   <IconButton
     text="Save Selection"
-    icon-name="content-save"
+    icon-name="floppy-disk-gear"
     @click="saveSelection"
   />
 </template>
@@ -11,6 +11,13 @@ import { defineComponent } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { FileType } from '@/presentation/common/Dialog';
 import IconButton from '../IconButton.vue';
+import { createScriptErrorDialog } from '../ScriptErrorDialog';
+
+interface SelectionConfig {
+  version: string;
+  timestamp: string;
+  selectedScripts: string[];
+}
 
 export default defineComponent({
   components: {
@@ -20,25 +27,28 @@ export default defineComponent({
     const { currentSelection } = injectKey((keys) => keys.useUserSelectionState);
     const { dialog } = injectKey((keys) => keys.useDialog);
     const { projectDetails } = injectKey((keys) => keys.useApplication);
+    const { scriptDiagnosticsCollector } = injectKey((keys) => keys.useScriptDiagnosticsCollector);
 
     async function saveSelection() {
-      // Create a config object with the current selection state
-      const config = {
-        version: projectDetails.version,
-        selectedScripts: currentSelection.value.scripts.selectedScripts.map((script) => script.id),
+      const config: SelectionConfig = {
+        version: projectDetails.version.toString(),
         timestamp: new Date().toISOString(),
+        selectedScripts: currentSelection.value.scripts.selectedScripts.map((script) => script.id),
       };
 
-      const configJson = JSON.stringify(config, null, 2);
-
       const { success, error } = await dialog.saveFile(
-        configJson,
+        JSON.stringify(config, null, 2),
         'privacy-selection.json',
         FileType.Json,
       );
 
-      if (!success && error) {
-        console.error('Failed to save selection:', error);
+      if (!success) {
+        dialog.showError(...(await createScriptErrorDialog({
+          errorContext: 'save',
+          errorType: error.type,
+          errorMessage: error.message,
+          isFileReadbackError: error.type === 'FileReadbackVerificationError',
+        }, scriptDiagnosticsCollector)));
       }
     }
 
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
index d5d165109..c2fcb3209 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
@@ -86,7 +86,7 @@
     <TooltipWrapper>
       <MenuOptionListItem
         label="Import"
-        :enabled="true"
+        :enabled="!isImporting"
         @click="loadFromFile"
       />
       <template #tooltip>
@@ -94,6 +94,10 @@
           :privacy-rating="0"
           description="Restores a previously saved script selection from a JSON file."
           recommendation="..."
+          :considerations="[
+            'All current selections will be cleared before import',
+            'Only .json files exported by privacy.sexy are supported',
+          ]"
         />
       </template>
     </TooltipWrapper>
@@ -102,7 +106,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed,
+  defineComponent, computed, ref,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
@@ -114,6 +118,8 @@ import { RecommendationStatusType } from './RecommendationStatusType';
 import RecommendationDocumentation from './RecommendationDocumentation.vue';
 
 interface SavedSelection {
+  version?: string;
+  timestamp?: string;
   selectedScripts: string[];
 }
 
@@ -129,6 +135,7 @@ export default defineComponent({
       currentSelection, modifyCurrentSelection,
     } = injectKey((keys) => keys.useUserSelectionState);
     const { currentState } = injectKey((keys) => keys.useCollectionState);
+    const { dialog } = injectKey((keys) => keys.useDialog);
 
     const currentCollection = computed<ICategoryCollection>(() => currentState.value.collection);
 
@@ -142,6 +149,8 @@ export default defineComponent({
       },
     });
 
+    const isImporting = ref(false);
+
     function selectRecommendationStatusType(type: RecommendationStatusType) {
       if (currentRecommendationStatusType.value === type) {
         return;
@@ -155,13 +164,16 @@ export default defineComponent({
     }
 
     async function loadFromFile() {
+      if (isImporting.value) {
+        return;
+      }
+
       try {
-        // Use file input to load the JSON file
+        isImporting.value = true;
         const input = document.createElement('input');
         input.type = 'file';
         input.accept = '.json';
 
-        // Create a promise to handle the file selection
         const file = await new Promise<File>((resolve, reject) => {
           input.onchange = (event) => {
             const { files } = (event.target as HTMLInputElement);
@@ -174,23 +186,53 @@ export default defineComponent({
           input.click();
         });
 
-        // Read the file content
         const content = await new Promise<string>((resolve, reject) => {
           const reader = new FileReader();
           reader.onload = () => resolve(reader.result as string);
-          reader.onerror = () => reject(reader.error);
+          reader.onerror = () => reject(new Error('Failed to read file'));
           reader.readAsText(file);
         });
 
-        const savedSelection = JSON.parse(content) as SavedSelection;
+        let savedSelection: SavedSelection;
+        try {
+          savedSelection = JSON.parse(content) as SavedSelection;
+          if (!Array.isArray(savedSelection.selectedScripts)) {
+            throw new Error('Invalid file format: missing or invalid scripts array');
+          }
+        } catch (parseError) {
+          dialog.showError('Import Error', 'The selected file is not a valid selection file.');
+          return;
+        }
 
         // Update the current selection state
-        modifyCurrentSelection((selection) => {
+        await modifyCurrentSelection((selection) => {
           // First deselect all scripts
           selection.scripts.deselectAll();
 
-          // Then select all scripts from the saved selection
-          savedSelection.selectedScripts.forEach((scriptId) => {
+          // Validate and apply each script selection
+          const validScripts = savedSelection.selectedScripts.filter(
+            (scriptId) => {
+              try {
+                return currentCollection.value.getScript(scriptId) !== undefined;
+              } catch {
+                return false;
+              }
+            },
+          );
+
+          if (validScripts.length === 0) {
+            throw new Error('No valid scripts found in the imported selection');
+          }
+
+          if (validScripts.length !== savedSelection.selectedScripts.length) {
+            dialog.showError(
+              'Import Warning',
+              'Some scripts from the imported selection were not found in the current collection.',
+            );
+          }
+
+          // Apply valid script selections
+          validScripts.forEach((scriptId) => {
             selection.scripts.processChanges({
               changes: [{
                 scriptId,
@@ -203,7 +245,12 @@ export default defineComponent({
           });
         });
       } catch (error) {
-        console.error('Failed to load selection:', error);
+        if (error instanceof Error && error.message !== 'No file selected') {
+          dialog.showError('Import Error', `Failed to import selection: ${error.message}`);
+          console.error('Failed to load selection:', error);
+        }
+      } finally {
+        isImporting.value = false;
       }
     }
 
@@ -212,6 +259,7 @@ export default defineComponent({
       currentRecommendationStatusType,
       selectRecommendationStatusType,
       loadFromFile,
+      isImporting,
     };
   },
 });
diff --git a/src/presentation/components/Shared/Icon/IconName.ts b/src/presentation/components/Shared/Icon/IconName.ts
index 8c97c4885..769f3cf14 100644
--- a/src/presentation/components/Shared/Icon/IconName.ts
+++ b/src/presentation/components/Shared/Icon/IconName.ts
@@ -16,6 +16,7 @@ export const IconNames = [
   'left-right',
   'file-arrow-down',
   'floppy-disk',
+  'floppy-disk-gear',
   'play',
   'lightbulb',
   'square-check',