From 683a3918cec7add5cba49d8f07611a0214efe888 Mon Sep 17 00:00:00 2001
From: Sebastian Richner <sebastian@richner.ag>
Date: Wed, 6 Mar 2024 13:32:30 +0100
Subject: [PATCH] Improve data export

---
 .../electron/main/services/WindowService.ts   |  25 +--
 .../components/DataExportUserInputTracker.vue | 120 ++++++-----
 .../DataExportWindowActivityTracker.vue       | 197 +++++++++---------
 3 files changed, 173 insertions(+), 169 deletions(-)

diff --git a/src/electron/electron/main/services/WindowService.ts b/src/electron/electron/main/services/WindowService.ts
index 0c16cb72..786dd83e 100644
--- a/src/electron/electron/main/services/WindowService.ts
+++ b/src/electron/electron/main/services/WindowService.ts
@@ -213,7 +213,7 @@ export class WindowService {
     const __dirname = dirname(__filename);
     const preload = join(__dirname, '../preload/index.mjs');
     this.dataExportWindow = new BrowserWindow({
-      width: 900,
+      width: 1200,
       height: 850,
       show: false,
       minimizable: false,
@@ -239,17 +239,18 @@ export class WindowService {
       return { action: 'deny' };
     });
 
-    const template = [
-      {
-        label: 'Edit',
-        submenu: [
-          { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
-          { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
-        ]
-      }
-    ];
-
-    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+    if (!is.dev) {
+      const template = [
+        {
+          label: 'Edit',
+          submenu: [
+            { label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },
+            { label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }
+          ]
+        }
+      ];
+      Menu.setApplicationMenu(Menu.buildFromTemplate(template));
+    }
 
     if (is.macOS) {
       await app.dock.show();
diff --git a/src/electron/src/components/DataExportUserInputTracker.vue b/src/electron/src/components/DataExportUserInputTracker.vue
index 2124638c..6b160525 100644
--- a/src/electron/src/components/DataExportUserInputTracker.vue
+++ b/src/electron/src/components/DataExportUserInputTracker.vue
@@ -32,64 +32,72 @@ const emitChange = () => {
 <template>
   <div class="my-5 border border-slate-400 p-2">
     <div class="prose">
-      <h2>Decide how your User Input data is shared</h2>
-      <p v-if="selectedOption != DataExportType.None">Here is a sample of your unmodified data:</p>
+      <h2>How do you want to share your User Input data?</h2>
     </div>
-    <div v-if="selectedOption != DataExportType.None" class="max-h-48 overflow-auto">
-      <table
-        class="table table-zebra table-pin-rows w-full overflow-auto text-xs"
-      >
-        <thead class="border-b">
-          <tr>
-            <th>Keys Total</th>
-            <th>Click Total</th>
-            <th>Moved Distance</th>
-            <th>Scroll Delta</th>
-            <th>Start Timestamp</th>
-            <th>End Timestamp</th>
-          </tr>
-        </thead>
-        <tbody class="">
-          <tr v-for="windowActivity in data" :key="windowActivity.id">
-            <td>{{ windowActivity.keysTotal }}</td>
-            <td>{{ windowActivity.clickTotal }}</td>
-            <td>{{ windowActivity.movedDistance }}</td>
-            <td>{{ windowActivity.scrollDelta }}</td>
-            <td>{{ windowActivity.tsStart.toLocaleString() }}</td>
-            <td>{{ windowActivity.tsEnd.toLocaleString() }}</td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="mt-4 flex w-1/3 flex-col">
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Share data as-is</span>
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.All"
+            class="radio checked:bg-blue-500"
+            @change="emitChange"
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Do not share this data</span>
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.None"
+            class="radio checked:bg-blue-500"
+            @change="emitChange"
+          />
+        </label>
+      </div>
     </div>
-    <div class="mt-4 flex">
-      <div class="mr-4">
-        <div class="prose">
-          <h2>How do you want to share your data?</h2>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Share data as-is</span>
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.All"
-              class="radio checked:bg-blue-500"
-              @change="emitChange"
-            />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Do not share this data</span>
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.None"
-              class="radio checked:bg-blue-500"
-              @change="emitChange"
-            />
-          </label>
-        </div>
+    <div class="prose mt-5">
+      <p>Here is a sample of your data:</p>
+    </div>
+    <div
+      class="relative mt-5"
+      :class="{
+        'cursor-not-allowed overflow-hidden opacity-50': selectedOption === DataExportType.None
+      }"
+    >
+      <div
+        v-if="selectedOption === DataExportType.None"
+        class="absolute inset-0 z-10 flex items-center justify-center bg-slate-800 bg-opacity-40"
+      >
+        <p class="bg-slate-800 p-5 text-lg text-white">This data is not being shared</p>
+      </div>
+      <div class="max-h-48 w-full overflow-y-auto">
+        <table class="table table-zebra table-pin-rows max-h-48 w-full text-xs">
+          <thead class="border-b">
+            <tr>
+              <th>Keys Total</th>
+              <th>Click Total</th>
+              <th>Moved Distance</th>
+              <th>Scroll Delta</th>
+              <th>Start Timestamp</th>
+              <th>End Timestamp</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="windowActivity in data" :key="windowActivity.id">
+              <td>{{ windowActivity.keysTotal }}</td>
+              <td>{{ windowActivity.clickTotal }}</td>
+              <td>{{ windowActivity.movedDistance }}</td>
+              <td>{{ windowActivity.scrollDelta }}</td>
+              <td>{{ windowActivity.tsStart.toLocaleString() }}</td>
+              <td>{{ windowActivity.tsEnd.toLocaleString() }}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
diff --git a/src/electron/src/components/DataExportWindowActivityTracker.vue b/src/electron/src/components/DataExportWindowActivityTracker.vue
index bca87a53..f47e5ae9 100644
--- a/src/electron/src/components/DataExportWindowActivityTracker.vue
+++ b/src/electron/src/components/DataExportWindowActivityTracker.vue
@@ -40,113 +40,51 @@ const emitObfuscateSampleData = async () => {
 <template>
   <div class="my-5 border border-slate-400 p-2">
     <div class="prose">
-      <h2>Decide how your Window Activity data is shared</h2>
-      <p v-if="selectedOption != DataExportType.None">
-        Here is a sample of your {{ shouldObfuscate ? 'modified' : 'unmodified' }} data:
-      </p>
-    </div>
-    <div v-if="selectedOption != DataExportType.None" class="max-h-48 overflow-auto">
-      <table class="table table-zebra table-pin-rows w-full overflow-auto text-xs">
-        <thead class="border-b">
-          <tr>
-            <th>Window Title</th>
-            <th>URL</th>
-            <th>Activity</th>
-            <th>Process Name</th>
-            <th>Process Path</th>
-            <th>Process ID</th>
-            <th>Timestamp</th>
-          </tr>
-        </thead>
-        <tbody class="">
-          <tr v-for="windowActivity in data" :key="windowActivity.id">
-            <td>
-              <div class="max-w-56 truncate">{{ windowActivity.windowTitle }}</div>
-            </td>
-            <td>
-              <div class="max-w-56 truncate">{{ windowActivity.url }}</div>
-            </td>
-            <td>{{ windowActivity.activity }}</td>
-            <td>{{ windowActivity.processName }}</td>
-            <td>
-              <div class="max-w-56 truncate">{{ windowActivity.processPath }}</div>
-            </td>
-            <td>{{ windowActivity.processId }}</td>
-            <td>{{ windowActivity.ts.toLocaleString() }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <h2>How do you want to share your Window Activity data?</h2>
     </div>
 
-    <div class="mt-8 flex flex-col">
-      <div class="flex w-2/3 flex-col">
-        <div class="prose">
-          <h2>How do you want to share your data?</h2>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">{{
-              obfuscationTermsInput.length > 0
-                ? 'Share partially obfuscated data'
-                : 'Share data as-is'
-            }}</span>
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.All"
-              class="radio checked:bg-blue-500"
-              @change="emitOptionChanged"
-            />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Obfuscate potentially sensitive data</span>
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.Obfuscate"
-              class="radio checked:bg-blue-500"
-              @change="emitOptionChanged"
-            />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text">Do not share this data</span>
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.None"
-              class="radio checked:bg-blue-500"
-              @change="emitOptionChanged"
-            />
-          </label>
-        </div>
-        <div class="form-control">
-          <label class="label cursor-pointer">
-            <span class="label-text"
-              >Only obfuscate data with the following (comma-separated) list of terms</span
-            >
-            <input
-              v-model="selectedOption"
-              type="radio"
-              :value="DataExportType.ObfuscateWithTerms"
-              class="radio checked:bg-blue-500"
-              @change="emitOptionChanged"
-            />
-          </label>
-        </div>
+    <div class="mt-4 flex w-1/3 flex-col">
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Share data as-is</span>
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.All"
+            class="radio checked:bg-blue-500"
+            @change="emitOptionChanged"
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Obfuscate potentially sensitive data</span>
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.Obfuscate"
+            class="radio checked:bg-blue-500"
+            @change="emitOptionChanged"
+          />
+        </label>
+      </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text"
+            >Only obfuscate data with the following (comma-separated) list of terms</span
+          >
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.ObfuscateWithTerms"
+            class="radio checked:bg-blue-500"
+            @change="emitOptionChanged"
+          />
+        </label>
       </div>
       <div v-if="selectedOption === DataExportType.ObfuscateWithTerms">
-        <div class="prose">
-          <h3>Obfuscate content by terms</h3>
-        </div>
         <div class="flex flex-col">
           <label class="form-control w-full">
-            <div class="label">
-              <span class="label-text">You can enter multiple terms separated by commas</span>
-            </div>
             <input
               v-model="obfuscationTermsInput"
               type="text"
@@ -161,6 +99,63 @@ const emitObfuscateSampleData = async () => {
           </button>
         </div>
       </div>
+      <div class="form-control">
+        <label class="label cursor-pointer">
+          <span class="label-text">Do not share this data</span>
+          <input
+            v-model="selectedOption"
+            type="radio"
+            :value="DataExportType.None"
+            class="radio checked:bg-blue-500"
+            @change="emitOptionChanged"
+          />
+        </label>
+      </div>
+    </div>
+    <div
+      class="relative mt-5"
+      :class="{
+        'cursor-not-allowed overflow-hidden opacity-50': selectedOption === DataExportType.None
+      }"
+    >
+      <div
+        v-if="selectedOption === DataExportType.None"
+        class="absolute inset-0 z-10 flex items-center justify-center bg-slate-800 bg-opacity-40"
+      >
+        <p class="bg-slate-800 p-5 text-lg text-white">This data is not being shared</p>
+      </div>
+      <div class="max-h-48 w-full overflow-y-auto">
+        <table class="table table-zebra table-pin-rows max-h-48 w-full text-xs">
+          <thead class="border-b">
+            <tr>
+              <th>Window Title</th>
+              <th>URL</th>
+              <th>Activity</th>
+              <th>Process Name</th>
+              <th>Process Path</th>
+              <th>Process ID</th>
+              <th>Timestamp</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="windowActivity in data" :key="windowActivity.id">
+              <td>
+                <div class="max-w-56 truncate">{{ windowActivity.windowTitle }}</div>
+              </td>
+              <td>
+                <div class="max-w-56 truncate">{{ windowActivity.url }}</div>
+              </td>
+              <td>{{ windowActivity.activity }}</td>
+              <td>{{ windowActivity.processName }}</td>
+              <td>
+                <div class="max-w-56 truncate">{{ windowActivity.processPath }}</div>
+              </td>
+              <td>{{ windowActivity.processId }}</td>
+              <td>{{ windowActivity.ts.toLocaleString() }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>