Replace export data and more with Preferences (Kong#7570)

Author: jackkav

packages/insomnia/src/ui/routes/auth.login.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';
-import { ActionFunction, Link, redirect, useFetcher, useNavigate } from 'react-router-dom';
+import { Button } from 'react-aria-components';
+import { ActionFunction, redirect, useFetcher, useNavigate } from 'react-router-dom';
 
-import { getAppWebsiteBaseURL } from '../../common/constants';
-import { exportAllData } from '../../common/export-all-data';
 import { SegmentEvent } from '../analytics';
 import { getLoginUrl } from '../auth-session-provider';
 import { Icon } from '../components/icon';
-import { showAlert } from '../components/modals';
-import { useRootLoaderData } from './root';
+import { showModal } from '../components/modals';
+import { SettingsModal } from '../components/modals/settings-modal';
 
 const GoogleIcon = (props: React.ReactSVGElement['props']) => {
   return (
@@ -52,15 +50,14 @@ export const action: ActionFunction = async ({
 const Login = () => {
   const loginFetcher = useFetcher();
   const navigate = useNavigate();
-  const { workspaceCount } = useRootLoaderData();
 
   const login = (provider: string) => {
-      loginFetcher.submit({
-        provider,
-      }, {
-        action: '/auth/login',
-        method: 'POST',
-      });
+    loginFetcher.submit({
+      provider,
+    }, {
+      action: '/auth/login',
+      method: 'POST',
+    });
   };
 
   return (
@@ -178,117 +175,18 @@ const Login = () => {
             Use the local Scratch Pad
           </span>
         </Button>
-        <DialogTrigger>
-          <Button
-            aria-label='Export data and more'
-            className='flex transition-colors justify-center text-[rgba(var(--color-font-rgb),0.8)] text-sm gap-[--padding-xs] hover:text-[--color-font] focus:text-[--color-font]'
-          >
-            <div>
-              <i className='fa fa-database' />
-            </div>
-            <span>
-              Export data and more
-            </span>
-          </Button>
-          <ModalOverlay isDismissable className="w-full h-[--visual-viewport-height] fixed top-0 left-0 flex items-center justify-center bg-black/30">
-            <Modal className="max-w-lg w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]">
-              <Dialog className="outline-none">
-                {({ close }) => (
-                  <div className='flex flex-col gap-4'>
-                    <div className='flex gap-2 items-center justify-between'>
-                      <Heading className='text-2xl'>Export data and more</Heading>
-                      <Button
-                        className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                        onPress={close}
-                      >
-                        <Icon icon="x" />
-                      </Button>
-                    </div>
-                    <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
-                      With Insomnia you can choose where to store your projects: locally with Local Vault, in the cloud with Cloud Sync or in a Git repository (Git Sync). Even with an account, your data is stored based on your settings.
-                    </p>
-                    <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
-                      You can get started with an account which gives you access to the best Insomnia experience (recommended):
-                    </p>
-                    <Button
-                      onPress={() => {
-                        window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/subscribe?plan=free`);
-                      }}
-                      aria-label='Get started for free'
-                      className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
-                    >
-                      <span>
-                        Get started for free
-                      </span>
-                      <Icon icon='arrow-right' />
-                    </Button>
-
-                    <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
-                      You can use Insomnia without an account in a limited way (only 1 collection) with the local Scratch Pad:
-                    </p>
-
-                    <Link
-                      to="/organization/org_scratchpad/project/proj_scratchpad/workspace/wrk_scratchpad/debug"
-                      aria-label='Go to Scratch Pad'
-                      className="px-4 py-1 outline-none font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
-                    >
-                      <span>
-                        Go to Scratch Pad
-                      </span>
-                      <Icon icon='arrow-right' />
-                    </Link>
-
-                    <p className='text-sm text-[rgba(var(--color-font-rgb),0.8)]'>
-                      Finally, you can export your local Insomnia data (projects, collections and other files) for portability:
-
-                    </p>
-
-                    <Button
-                      onPress={async () => {
-                        const { filePaths, canceled } = await window.dialog.showOpenDialog({
-                          properties: ['openDirectory', 'createDirectory', 'promptToCreate'],
-                          buttonLabel: 'Select',
-                          title: 'Export All Insomnia Data',
-                        });
-
-                        if (canceled) {
-                          return;
-                        }
-
-                        const [dirPath] = filePaths;
-
-                        try {
-                          dirPath && await exportAllData({
-                            dirPath,
-                          });
-                        } catch (e) {
-                          showAlert({
-                            title: 'Export Failed',
-                            message: 'An error occurred while exporting data. Please try again.',
-                          });
-                          console.error(e);
-                        }
-
-                        showAlert({
-                          title: 'Export Complete',
-                          message: 'All your data have been successfully exported',
-                        });
-                        window.main.trackSegmentEvent({
-                          event: SegmentEvent.exportAllCollections,
-                        });
-                      }}
-                      aria-label='Export all data'
-                      className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
-                    >
-                      <Icon icon="file-export" />
-                      <span>Export all data {`(${workspaceCount} files)`}</span>
-                    </Button>
-                  </div>
-                )}
-              </Dialog>
-            </Modal>
-          </ModalOverlay>
-        </DialogTrigger>
+        <Button
+          onPress={() => showModal(SettingsModal)}
+          aria-label='Preferences'
+          className='flex transition-colors justify-center text-[rgba(var(--color-font-rgb),0.8)] text-sm gap-[--padding-xs] hover:text-[--color-font] focus:text-[--color-font]'
+        >
+          <div>
+            <Icon icon="cog" />
+          </div>
+          <span>
+            Preferences
+          </span>
+        </Button>
       </div>
     </div>
   );