feat: add "Email Backups" to "Backups" section (#778)

* feat: add "Email Backups" to "Backups" section

* chore: remove comment

* chore: better wording

* chore: put working snjs version

* chore: better wording

* style: reuse existing css classes and add the missing one

* feat: add "No email backup" option

* refactor: move the function outside of the useEffect, remove unused utility function

* feat (WIP): move CloudLink to backups section

* chore: versions bump, type fixes

* fix: handle the case when the setting update fails

* style: remove dashed border from the confirmation code, UI improvements

* feat: implement removing integration, improve interaction on different events

* feat: implement non-interactive textarea for showing and copying the code

* fix: fix TS errors

* feat: implement "Perform backup" logic
- remove the code for copying the confirmation code for backup integration
- also remove unnecessary parameters passed to Provider

* feat: don't show "CloudLink" in preferences pane

* chore: show error in console on exception

* refactor: better naming, add `coverage` folder to gitignore

* fix: return correct setting name

* refactor: use async/await for the sake of consistency

* chore: remove duplicate line

* feat: get urls for cloud backup from snjs

* chore: update dependencies

* refactor: set both `token` and `frequency` settings when enabling cloud integration; get only `frequency` when checking the integration status

* refactor: once the setting is successfully saved, don't get its value from backend; instead, use its value that's still in frontend

* feat: move "Receive a notification email if a cloud backup fails." into cloud backups section

* fix: text correction

* fix: get correct cloud integration url from snjs based on prod/dev environment

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -17,6 +17,7 @@ import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { ExtensionPane } from './panes/ExtensionPane';
+import { Backups } from '@/preferences/panes/Backups';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -26,16 +27,54 @@ interface PreferencesProps extends MfaProps {
 
 const PaneSelector: FunctionComponent<
   PreferencesProps & { menu: PreferencesMenu }
-> = observer(
-  ({
-     menu,
-     appState,
-     application,
-     mfaProvider,
-     userProvider
-   }) => {
-    switch (menu.selectedPaneId) {
-      case 'general':
+> = observer(({ menu, appState, application, mfaProvider, userProvider }) => {
+  switch (menu.selectedPaneId) {
+    case 'general':
+      return (
+        <General
+          appState={appState}
+          application={application}
+          extensionsLatestVersions={menu.extensionsLatestVersions}
+        />
+      );
+    case 'account':
+      return (
+        <AccountPreferences application={application} appState={appState} />
+      );
+    case 'appearance':
+      return null;
+    case 'security':
+      return (
+        <Security
+          mfaProvider={mfaProvider}
+          userProvider={userProvider}
+          appState={appState}
+          application={application}
+        />
+      );
+    case 'backups':
+      return <Backups application={application} appState={appState} />;
+    case 'listed':
+      return <Listed application={application} />;
+    case 'shortcuts':
+      return null;
+    case 'accessibility':
+      return null;
+    case 'get-free-month':
+      return null;
+    case 'help-feedback':
+      return <HelpAndFeedback />;
+    default:
+      if (menu.selectedExtension != undefined) {
+        return (
+          <ExtensionPane
+            application={application}
+            appState={appState}
+            extension={menu.selectedExtension}
+            preferencesMenu={menu}
+          />
+        );
+      } else {
         return (
           <General
             appState={appState}
@@ -43,55 +82,9 @@ const PaneSelector: FunctionComponent<
             extensionsLatestVersions={menu.extensionsLatestVersions}
           />
         );
-      case 'account':
-        return (
-          <AccountPreferences
-            application={application}
-            appState={appState}
-          />
-        );
-      case 'appearance':
-        return null;
-      case 'security':
-        return (
-          <Security
-            mfaProvider={mfaProvider}
-            userProvider={userProvider}
-            appState={appState}
-            application={application}
-          />
-        );
-      case 'listed':
-        return <Listed application={application} />;
-      case 'shortcuts':
-        return null;
-      case 'accessibility':
-        return null;
-      case 'get-free-month':
-        return null;
-      case 'help-feedback':
-        return <HelpAndFeedback />;
-      default:
-        if (menu.selectedExtension != undefined) {
-          return (
-            <ExtensionPane
-              application={application}
-              appState={appState}
-              extension={menu.selectedExtension}
-              preferencesMenu={menu}
-            />
-          );
-        } else {
-          return (
-            <General
-              appState={appState}
-              application={application}
-              extensionsLatestVersions={menu.extensionsLatestVersions}
-            />
-          );
-        }
-    }
-  });
+      }
+  }
+});
 
 const PreferencesCanvas: FunctionComponent<
   PreferencesProps & { menu: PreferencesMenu }
@@ -105,8 +98,13 @@ const PreferencesCanvas: FunctionComponent<
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
   (props) => {
     const menu = useMemo(
-      () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
-      [props.appState.enableUnfinishedFeatures, props.application]);
+      () =>
+        new PreferencesMenu(
+          props.application,
+          props.appState.enableUnfinishedFeatures
+        ),
+      [props.appState.enableUnfinishedFeatures, props.application]
+    );
 
     useEffect(() => {
       menu.selectPane(props.appState.preferences.currentPane);