mirror of
https://github.com/Kong/insomnia
synced 2024-11-08 06:39:48 +00:00
Replace export data and more with Preferences (#7570)
This commit is contained in:
Jack Kavanagh
GitHub
parent
fe5e582c2c
commit
6c35b1681c
@ -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>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user