Skip to content

Commit

Permalink
tmp save
Browse files Browse the repository at this point in the history
  • Loading branch information
@yaoweiprc
yaoweiprc committed Dec 26, 2024
1 parent bf5a064 commit 3ec73d1
Show file tree
Hide file tree
Showing 7 changed files with 589 additions and 618 deletions.
10 changes: 8 additions & 2 deletions packages/insomnia/src/main.development.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { checkIfRestartNeeded } from './main/squirrel-startup';
import * as updates from './main/updates';
import * as windowUtils from './main/window-utils';
import * as models from './models/index';
import type { Project, RemoteProject } from './models/project';
import { PROJECT_STORAGE_TYPE, type Project, type RemoteProject } from './models/project';
import type { Stats } from './models/stats';
import type { ToastNotification } from './ui/components/toast';

Expand Down Expand Up @@ -231,7 +231,13 @@ async function _createModelInstances() {
const scratchPad = await models.workspace.getById(models.workspace.SCRATCHPAD_WORKSPACE_ID);
if (!scratchpadProject) {
console.log('[main] Initializing Scratch Pad Project');
await models.project.create({ _id: models.project.SCRATCHPAD_PROJECT_ID, name: getProductName(), remoteId: null, parentId: models.organization.SCRATCHPAD_ORGANIZATION_ID });
await models.project.create({
_id: models.project.SCRATCHPAD_PROJECT_ID,
name: getProductName(),
remoteId: null,
parentId: models.organization.SCRATCHPAD_ORGANIZATION_ID,
storageType: PROJECT_STORAGE_TYPE.LOCAL,
});
}

if (!scratchPad) {
Expand Down
3 changes: 3 additions & 0 deletions packages/insomnia/src/models/project.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const canSync = false;
export const SCRATCHPAD_PROJECT_ID = `${prefix}_scratchpad`;

export const isScratchpadProject = (project: Pick<Project, '_id'>) => project._id === SCRATCHPAD_PROJECT_ID;
// TODO: check all
export const isLocalProject = (project: Pick<Project, 'remoteId'>): project is LocalProject => project.remoteId === null;
export const isRemoteProject = (project: Pick<Project, 'remoteId'>): project is RemoteProject => !isLocalProject(project);
export const projectHasSettings = (project: Pick<Project, '_id'>) => !isScratchpadProject(project);
Expand Down Expand Up @@ -53,6 +54,8 @@ export function init(): Partial<Project> {
return {
name: 'My Project',
remoteId: null, // `null` is necessary for the model init logic to work properly
gitRepositoryId: null,
storageType: PROJECT_STORAGE_TYPE.LOCAL,
};
}

Expand Down
213 changes: 20 additions & 193 deletions packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,10 @@ import type { IconName } from '@fortawesome/fontawesome-svg-core';
import React, { type FC, Fragment, useEffect, useState } from 'react';
import {
Button,
Dialog,
Heading,
Input,
Label,
Menu,
MenuItem,
MenuTrigger,
Modal,
ModalOverlay,
Popover,
Radio,
RadioGroup,
TextField,
Tooltip,
TooltipTrigger,
} from 'react-aria-components';
Expand All @@ -28,11 +19,13 @@ import { ORG_STORAGE_RULE } from '../../routes/organization';
import { Icon } from '../icon';
import { showAlert, showModal } from '../modals';
import { AskModal } from '../modals/ask-modal';
import ProjectEditModal, { PROJECT_EDIT_MODAL_TYPE } from '../modals/project-edit-modal';

interface Props {
project: Project & { hasUncommittedOrUnpushedChanges?: boolean };
organizationId: string;
storage: ORG_STORAGE_RULE;
isGitSyncEnabled: boolean;
}

interface ProjectActionItem {
Expand All @@ -42,17 +35,20 @@ interface ProjectActionItem {
action: (projectId: string, projectName: string) => void;
}

export const ProjectDropdown: FC<Props> = ({ project, organizationId, storage }) => {
export const ProjectDropdown: FC<Props> = ({
project,
organizationId,
storage,
isGitSyncEnabled,
}) => {
const [isProjectSettingsModalOpen, setIsProjectSettingsModalOpen] =
useState(false);
const deleteProjectFetcher = useFetcher();
const updateProjectFetcher = useFetcher();
const [projectType, setProjectType] = useState<'local' | 'remote' | ''>('');

const isRemoteProjectInconsistent = isRemoteProject(project) && storage === ORG_STORAGE_RULE.LOCAL_ONLY;
const isLocalProjectInconsistent = !isRemoteProject(project) && storage === ORG_STORAGE_RULE.CLOUD_ONLY;
const isProjectInconsistent = isRemoteProjectInconsistent || isLocalProjectInconsistent;
const showStorageRestrictionMessage = storage !== ORG_STORAGE_RULE.CLOUD_PLUS_LOCAL;

const projectActionList: ProjectActionItem[] = [
{
Expand Down Expand Up @@ -88,6 +84,8 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storage })
},
];

// TODO: use new modal

useEffect(() => {
if (deleteProjectFetcher.data && deleteProjectFetcher.data.error && deleteProjectFetcher.state === 'idle') {
showAlert({
Expand Down Expand Up @@ -164,188 +162,17 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storage })
</Menu>
</Popover>
</MenuTrigger>
<ModalOverlay
isOpen={isProjectSettingsModalOpen}
onOpenChange={isOpen => {
setProjectType('');
setIsProjectSettingsModalOpen(isOpen);
<ProjectEditModal
{...{
modalType: PROJECT_EDIT_MODAL_TYPE.EDIT,
isOpen: isProjectSettingsModalOpen,
setIsOpen: setIsProjectSettingsModalOpen,
orgStorageRule: storage,
organizationId,
projectToEdit: project,
isGitSyncEnabled,
}}
isDismissable
className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
>
<Modal
onOpenChange={isOpen => {
setProjectType('');
setIsProjectSettingsModalOpen(isOpen);
}}
className="max-w-2xl 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'>{projectType === 'local' ? 'Confirm conversion to local storage' : projectType === 'remote' ? 'Confirm cloud synchronization' : 'Project Settings'}</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>
<form
className='flex flex-col gap-4'
onSubmit={e => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const type = formData.get('type');
// If the project is local and the user is trying to change it to remote
if (type === 'remote' && !project.remoteId && !projectType) {
setProjectType('remote');
// If the project is remote and the user is trying to change it to local
} else if (type === 'local' && project.remoteId && !projectType) {
setProjectType('local');
} else {
if (!type) {
showAlert({
title: 'Project type not selected',
message: 'Please select a project type before continuing',
});
return;
}

updateProjectFetcher.submit(formData, {
action: `/organization/${organizationId}/project/${project._id}/update`,
method: 'post',
});

close();
}
}}
>
<div className={`flex flex-col gap-4 ${projectType ? 'hidden' : ''}`}>
<TextField
autoFocus
name="name"
defaultValue={project.name}
className="group relative flex-1 flex flex-col gap-2"
>
<Label className='text-sm text-[--hl]'>
Project name
</Label>
<Input
placeholder="My project"
className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
/>
</TextField>
<RadioGroup name="type" defaultValue={storage === ORG_STORAGE_RULE.CLOUD_PLUS_LOCAL ? project.remoteId ? 'remote' : 'local' : storage !== ORG_STORAGE_RULE.CLOUD_ONLY ? 'local' : 'remote'} className="flex flex-col gap-2">
<Label className="text-sm text-[--hl]">
Project type
</Label>
<div className="flex gap-2">
<Radio
isDisabled={storage === ORG_STORAGE_RULE.LOCAL_ONLY}
value="remote"
className="data-[selected]:border-[--color-surprise] flex-1 data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
>
<div className='flex items-center gap-2'>
<Icon icon="globe" />
<Heading className="text-lg font-bold">Cloud Sync</Heading>
</div>
<p className='pt-2'>
Encrypted and synced securely to the cloud, ideal for out of the box collaboration.
</p>
</Radio>
<Radio
isDisabled={storage === ORG_STORAGE_RULE.CLOUD_ONLY}
value="local"
className="data-[selected]:border-[--color-surprise] flex-1 data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
>
<div className='flex items-center gap-2'>
<Icon icon="laptop" />
<Heading className="text-lg font-bold">Local Vault</Heading>
</div>
<p className="pt-2">
Stored locally only with no cloud. Ideal when collaboration is not needed.
</p>
</Radio>
</div>
</RadioGroup>
</div>

{projectType === 'local' && (
<div className='text-[--color-font] flex flex-col gap-4'>
<div className='flex flex-col gap-4'>
<p>
We will be converting your Cloud Sync project into a local project, and permanently remove all cloud data for this project from the cloud.
</p>
<ul className='text-left flex flex-col gap-2'>
<li><i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.</li>
<li><i className="fa fa-check text-emerald-600" /> Your collaborators will not be able to push and pull files anymore.</li>
<li><i className="fa fa-check text-emerald-600" /> The project will become local also for every existing collaborator.</li>
</ul>
<p>
You can still use Git Sync for local projects without using the cloud, and you can synchronize a local project back to the cloud if you decide to do so.
</p>
<p className='flex gap-2 items-center'>
<Icon icon="triangle-exclamation" className='text-[--color-warning]' />
Remember to pull your latest project updates before this operation
</p>
</div>
</div>
)}
{projectType === 'remote' && (
<div className='text-[--color-font] flex flex-col gap-4'>
<div className='flex flex-col gap-4'>
<p>
We will be synchronizing your local project to Insomnia's Cloud in a secure encrypted format which will enable cloud collaboration.
</p>
<ul className='text-left flex flex-col gap-2'>
<li><i className="fa fa-check text-emerald-600" /> Your data in the cloud is encrypted and secure.</li>
<li><i className="fa fa-check text-emerald-600" /> You can now collaborate with any amount of users and use cloud features.</li>
<li><i className="fa fa-check text-emerald-600" /> Your project will be always available on any client after logging in.</li>
</ul>
<p>
You can still use Git Sync for cloud projects.
</p>
</div>
</div>
)}
<div className="flex justify-between gap-2 items-center">
<div className="flex items-center gap-2 text-sm">
<Icon icon="info-circle" />
<span>
{showStorageRestrictionMessage && `The organization owner mandates that projects must be created and stored ${storage.split('_').join(' ')}.`} You can optionally enable Git Sync
</span>
</div>
<div className='flex items-center gap-2'>
<Button
onPress={() => {
if (projectType) {
setProjectType('');
} else {
close();
}
}}
className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
>
Cancel
</Button>
<Button
type="submit"
className="hover:no-underline bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
>
{projectType ? 'Confirm' : 'Update'}
</Button>
</div>
</div>
</form>
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
/>
</Fragment>
);
};
Loading

0 comments on commit 3ec73d1

Please sign in to comment.