From 8045a83374612eb76ceda2ea912921f62215dc88 Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Tue, 24 Aug 2021 16:57:34 -0400
Subject: [PATCH] Refine the clear all data experience

---
 background.html                        | 35 ------------
 js/views/clear_data_view.js            | 77 --------------------------
 main.js                                |  3 +
 test/index.html                        | 35 ------------
 ts/components/ClearingData.stories.tsx | 19 +++++++
 ts/components/ClearingData.tsx         | 34 ++++++++++++
 ts/components/Preferences.tsx          | 22 +++++++-
 ts/shims/deleteAllData.ts              | 32 +++++++++++
 ts/shims/renderClearingDataView.tsx    | 15 +++++
 ts/util/createIPCEvents.ts             |  4 +-
 ts/util/lint/exceptions.json           | 50 +----------------
 11 files changed, 127 insertions(+), 199 deletions(-)
 delete mode 100644 js/views/clear_data_view.js
 create mode 100644 ts/components/ClearingData.stories.tsx
 create mode 100644 ts/components/ClearingData.tsx
 create mode 100644 ts/shims/deleteAllData.ts
 create mode 100644 ts/shims/renderClearingDataView.tsx

diff --git a/background.html b/background.html
index a6701d3eff36..b4325ffe5585 100644
--- a/background.html
+++ b/background.html
@@ -170,41 +170,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="clear-data">
-      {{#isStep1}}
-      <div class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <span class='banner-icon alert-outline-red'></span>
-            <div class='header'>{{ header }}</div>
-            <div class='body-text-wide'>{{ body }}</div>
-          </div>
-          <div class='nav'>
-            <div>
-              <a class='button neutral cancel'>{{ cancelButton }}</a>
-              <a class='button destructive delete-all-data'>{{ deleteButton }}</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      {{/isStep1}}
-      {{#isStep2}}
-      <div id='step2' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <span class='banner-icon delete'></span>
-            <div class='header'>{{ deleting }}</div>
-          </div>
-          <div class='progress'>
-            <div class='bar-container'>
-              <div class='bar progress-bar progress-bar-striped active'></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {{/isStep2}}
-    </script>
-
     <script type="text/x-tmpl-mustache" id="link-flow-template">
       <div class='module-title-bar-drag-area'></div>
 
diff --git a/js/views/clear_data_view.js b/js/views/clear_data_view.js
deleted file mode 100644
index 486aa450d6a4..000000000000
--- a/js/views/clear_data_view.js
+++ /dev/null
@@ -1,77 +0,0 @@
-// Copyright 2018-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-/* global i18n, Whisper, $ */
-
-// eslint-disable-next-line func-names
-(function () {
-  window.Whisper = window.Whisper || {};
-  const { Logs } = window.Signal;
-
-  const CLEAR_DATA_STEPS = {
-    CHOICE: 1,
-    DELETING: 2,
-  };
-  window.Whisper.ClearDataView = Whisper.View.extend({
-    template: () => $('#clear-data').html(),
-    className: 'full-screen-flow overlay',
-    events: {
-      'click .cancel': 'onCancel',
-      'click .delete-all-data': 'onDeleteAllData',
-    },
-    initialize() {
-      this.step = CLEAR_DATA_STEPS.CHOICE;
-    },
-    onCancel() {
-      this.remove();
-    },
-    async onDeleteAllData() {
-      window.log.info('Deleting everything!');
-      this.step = CLEAR_DATA_STEPS.DELETING;
-      this.render();
-
-      await this.clearAllData();
-    },
-    async clearAllData() {
-      try {
-        await Logs.deleteAll();
-
-        window.log.info('clearAllData: deleted all logs');
-
-        await window.Signal.Data.removeAll();
-
-        window.log.info('clearAllData: emptied database');
-
-        await window.Signal.Data.close();
-
-        window.log.info('clearAllData: closed database');
-
-        await window.Signal.Data.removeDB();
-
-        window.log.info('clearAllData: removed database');
-
-        await window.Signal.Data.removeOtherData();
-
-        window.log.info('clearAllData: removed all other data');
-      } catch (error) {
-        window.log.error(
-          'Something went wrong deleting all data:',
-          error && error.stack ? error.stack : error
-        );
-      }
-      window.restart();
-    },
-    render_attributes() {
-      return {
-        isStep1: this.step === CLEAR_DATA_STEPS.CHOICE,
-        header: i18n('deleteAllDataHeader'),
-        body: i18n('deleteAllDataBody'),
-        cancelButton: i18n('cancel'),
-        deleteButton: i18n('deleteAllDataButton'),
-
-        isStep2: this.step === CLEAR_DATA_STEPS.DELETING,
-        deleting: i18n('deleteAllDataProgress'),
-      };
-    },
-  });
-})();
diff --git a/main.js b/main.js
index c39e2815990c..362bc98f8752 100644
--- a/main.js
+++ b/main.js
@@ -1681,6 +1681,9 @@ ipc.on('close-settings', () => {
 });
 
 ipc.on('delete-all-data', () => {
+  if (settingsWindow) {
+    settingsWindow.close();
+  }
   if (mainWindow && mainWindow.webContents) {
     mainWindow.webContents.send('delete-all-data');
   }
diff --git a/test/index.html b/test/index.html
index 06164cff4da4..080f8a5c69fd 100644
--- a/test/index.html
+++ b/test/index.html
@@ -152,41 +152,6 @@
       </div>
     </script>
 
-    <script type="text/x-tmpl-mustache" id="clear-data">
-      {{#isStep1}}
-      <div class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <span class='banner-icon alert-outline-red'></span>
-            <div class='header'>{{ header }}</div>
-            <div class='body-text-wide'>{{ body }}</div>
-          </div>
-          <div class='nav'>
-            <div>
-              <a class='button neutral cancel'>{{ cancelButton }}</a>
-              <a class='button destructive delete-all-data'>{{ deleteButton }}</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      {{/isStep1}}
-      {{#isStep2}}
-      <div id='step2' class='step'>
-        <div class='inner'>
-          <div class='step-body'>
-            <span class='banner-icon delete'></span>
-            <div class='header'>{{ deleting }}</div>
-          </div>
-          <div class='progress'>
-            <div class='bar-container'>
-              <div class='bar progress-bar progress-bar-striped active'></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      {{/isStep2}}
-    </script>
-
     <script type="text/x-tmpl-mustache" id="link-flow-template">
       <div class='module-title-bar-drag-area'></div>
 
diff --git a/ts/components/ClearingData.stories.tsx b/ts/components/ClearingData.stories.tsx
new file mode 100644
index 000000000000..c3a1783d6698
--- /dev/null
+++ b/ts/components/ClearingData.stories.tsx
@@ -0,0 +1,19 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import enMessages from '../../_locales/en/messages.json';
+
+import { ClearingData } from './ClearingData';
+
+const i18n = setupI18n('en', enMessages);
+
+const story = storiesOf('Components/ClearingData', module);
+
+story.add('Clearing data', () => (
+  <ClearingData deleteAllData={action('deleteAllData')} i18n={i18n} />
+));
diff --git a/ts/components/ClearingData.tsx b/ts/components/ClearingData.tsx
new file mode 100644
index 000000000000..685b147817bf
--- /dev/null
+++ b/ts/components/ClearingData.tsx
@@ -0,0 +1,34 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { useEffect } from 'react';
+import { LocalizerType } from '../types/Util';
+
+export type PropsType = {
+  deleteAllData: () => void;
+  i18n: LocalizerType;
+};
+
+export function ClearingData({ deleteAllData, i18n }: PropsType): JSX.Element {
+  useEffect(() => {
+    deleteAllData();
+  }, [deleteAllData]);
+
+  return (
+    <div className="full-screen-flow overlay">
+      <div className="step">
+        <div className="inner">
+          <div className="step-body">
+            <span className="banner-icon delete" />
+            <div className="header">{i18n('deleteAllDataProgress')}</div>
+          </div>
+          <div className="progress">
+            <div className="bar-container">
+              <div className="bar progress-bar progress-bar-striped active" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx
index 2ce97f189996..6b2cb59bcfdb 100644
--- a/ts/components/Preferences.tsx
+++ b/ts/components/Preferences.tsx
@@ -14,6 +14,7 @@ import {
 import { Button, ButtonVariant } from './Button';
 import { ChatColorPicker } from './ChatColorPicker';
 import { Checkbox } from './Checkbox';
+import { ConfirmationDialog } from './ConfirmationDialog';
 import { ConversationType } from '../state/ducks/conversations';
 import {
   ConversationColorType,
@@ -234,6 +235,7 @@ export const Preferences = ({
   whoCanSeeMe,
   zoomFactor,
 }: PropsType): JSX.Element => {
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [page, setPage] = useState<Page>(Page.General);
   const [showSyncFailed, setShowSyncFailed] = useState(false);
   const [nowSyncing, setNowSyncing] = useState(false);
@@ -912,7 +914,7 @@ export const Preferences = ({
             right={
               <div className="Preferences__right-button">
                 <Button
-                  onClick={doDeleteAllData}
+                  onClick={() => setConfirmDelete(true)}
                   variant={ButtonVariant.SecondaryDestructive}
                 >
                   {i18n('clearDataButton')}
@@ -921,6 +923,24 @@ export const Preferences = ({
             }
           />
         </SettingsRow>
+        {confirmDelete ? (
+          <ConfirmationDialog
+            actions={[
+              {
+                action: doDeleteAllData,
+                style: 'negative',
+                text: i18n('clearDataButton'),
+              },
+            ]}
+            i18n={i18n}
+            onClose={() => {
+              setConfirmDelete(false);
+            }}
+            title={i18n('deleteAllDataHeader')}
+          >
+            {i18n('deleteAllDataBody')}
+          </ConfirmationDialog>
+        ) : null}
       </>
     );
   } else if (page === Page.ChatColor) {
diff --git a/ts/shims/deleteAllData.ts b/ts/shims/deleteAllData.ts
new file mode 100644
index 000000000000..68aff37dada9
--- /dev/null
+++ b/ts/shims/deleteAllData.ts
@@ -0,0 +1,32 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export async function deleteAllData(): Promise<void> {
+  try {
+    await window.Signal.Logs.deleteAll();
+
+    window.log.info('deleteAllData: deleted all logs');
+
+    await window.Signal.Data.removeAll();
+
+    window.log.info('deleteAllData: emptied database');
+
+    await window.Signal.Data.close();
+
+    window.log.info('deleteAllData: closed database');
+
+    await window.Signal.Data.removeDB();
+
+    window.log.info('deleteAllData: removed database');
+
+    await window.Signal.Data.removeOtherData();
+
+    window.log.info('deleteAllData: removed all other data');
+  } catch (error) {
+    window.log.error(
+      'Something went wrong deleting all data:',
+      error && error.stack ? error.stack : error
+    );
+  }
+  window.restart();
+}
diff --git a/ts/shims/renderClearingDataView.tsx b/ts/shims/renderClearingDataView.tsx
new file mode 100644
index 000000000000..ebdc69410e70
--- /dev/null
+++ b/ts/shims/renderClearingDataView.tsx
@@ -0,0 +1,15 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import { render } from 'react-dom';
+
+import { ClearingData } from '../components/ClearingData';
+import { deleteAllData } from './deleteAllData';
+
+export function renderClearingDataView(): void {
+  render(
+    <ClearingData deleteAllData={deleteAllData} i18n={window.i18n} />,
+    document.getElementById('app-container')
+  );
+}
diff --git a/ts/util/createIPCEvents.ts b/ts/util/createIPCEvents.ts
index bc3db15b308b..b07e9d95da06 100644
--- a/ts/util/createIPCEvents.ts
+++ b/ts/util/createIPCEvents.ts
@@ -22,6 +22,7 @@ import { calling } from '../services/calling';
 import { getConversationsWithCustomColorSelector } from '../state/selectors/conversations';
 import { getCustomColors } from '../state/selectors/items';
 import { themeChanged } from '../shims/themeChanged';
+import { renderClearingDataView } from '../shims/renderClearingDataView';
 
 import * as universalExpireTimer from './universalExpireTimer';
 import { PhoneNumberDiscoverability } from './phoneNumberDiscoverability';
@@ -376,8 +377,7 @@ export function createIPCEvents(
     deleteAllData: async () => {
       await window.sqlInitializer.goBackToMainProcess();
 
-      const clearDataView = new window.Whisper.ClearDataView().render();
-      $('body').append(clearDataView.el);
+      renderClearingDataView();
     },
 
     showStickerPack: (packId, key) => {
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index f73115ea59bd..d2e948f7b786 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -200,22 +200,6 @@
     "updated": "2018-09-19T21:59:32.770Z",
     "reasonDetail": "Protected from arbitrary input"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "js/views/clear_data_view.js",
-    "line": "    template: () => $('#clear-data').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Static selector, read-only access"
-  },
-  {
-    "rule": "jQuery-html(",
-    "path": "js/views/clear_data_view.js",
-    "line": "    template: () => $('#clear-data').html(),",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-02-26T18:44:56.450Z",
-    "reasonDetail": "Static selector, read-only access"
-  },
   {
     "rule": "jQuery-$(",
     "path": "js/views/debug_log_view.js",
@@ -14191,22 +14175,6 @@
     "updated": "2021-08-18T18:22:55.307Z",
     "reasonDetail": "Legacy code"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/util/createIPCEvents.js",
-    "line": "            $('body').append(clearDataView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-08-18T18:22:55.307Z",
-    "reasonDetail": "Legacy code"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "ts/util/createIPCEvents.js",
-    "line": "            $('body').append(clearDataView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-08-18T18:22:55.307Z",
-    "reasonDetail": "Legacy code"
-  },
   {
     "rule": "jQuery-prepend(",
     "path": "ts/util/createIPCEvents.js",
@@ -14247,22 +14215,6 @@
     "updated": "2021-08-18T18:22:55.307Z",
     "reasonDetail": "Legacy code"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "ts/util/createIPCEvents.ts",
-    "line": "      $('body').append(clearDataView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-08-18T18:22:55.307Z",
-    "reasonDetail": "Legacy code"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "ts/util/createIPCEvents.ts",
-    "line": "      $('body').append(clearDataView.el);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2021-08-18T18:22:55.307Z",
-    "reasonDetail": "Legacy code"
-  },
   {
     "rule": "jQuery-prepend(",
     "path": "ts/util/createIPCEvents.ts",
@@ -14359,4 +14311,4 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-22T03:00:34.561Z"
   }
-]
\ No newline at end of file
+]