diff --git a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx index fe93e7ad..7f7a519e 100644 --- a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx @@ -1,16 +1,20 @@ import { useCallback, useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; -import toast from 'react-hot-toast'; -import { EnvironmentVariable } from 'gql-client'; - -import { - IconButton, - Typography, -} from '@snowballtools/material-tailwind-react-fork'; import { useGQLClient } from 'context/GQLClientContext'; import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog'; import { Input } from 'components/shared/Input'; +import { Button } from 'components/shared/Button'; +import { + CheckRoundFilledIcon, + CrossIcon, + EditBigIcon, + HideEyeOffIcon, + ShowEyeIcon, + TrashIcon, +} from 'components/shared/CustomIcon'; +import { EnvironmentVariable } from 'gql-client'; +import { useToast } from 'components/shared/Toast'; const ShowPasswordIcon = ({ handler, @@ -26,19 +30,24 @@ const ShowPasswordIcon = ({ }} className="cursor-pointer" > - {isVisible ? '-' : '+'} + {isVisible ? : } ); }; +export interface EditEnvironmentVariableRowProps { + variable: EnvironmentVariable; + onUpdate: () => Promise; + isFirstVariable?: boolean; +} + const EditEnvironmentVariableRow = ({ variable, onUpdate, -}: { - variable: EnvironmentVariable; - onUpdate: () => Promise; -}) => { + isFirstVariable = false, +}: EditEnvironmentVariableRowProps) => { const client = useGQLClient(); + const { toast, dismiss } = useToast(); const { handleSubmit, register, reset } = useForm({ defaultValues: { @@ -58,9 +67,19 @@ const EditEnvironmentVariableRow = ({ if (isEnvironmentVariableRemoved) { await onUpdate(); setDeleteDialogOpen((preVal) => !preVal); - toast.success('Variable deleted'); + toast({ + id: 'variable_deleted', + title: 'Variable deleted', + variant: 'success', + onDismiss: dismiss, + }); } else { - toast.error('Variable not deleted'); + toast({ + id: 'variable_not_deleted', + title: 'Variable not deleted', + variant: 'error', + onDismiss: dismiss, + }); } }, [variable, onUpdate]); @@ -71,10 +90,21 @@ const EditEnvironmentVariableRow = ({ if (isEnvironmentVariableUpdated) { await onUpdate(); - toast.success('Variable edited'); + toast({ + id: 'variable_updated', + title: 'Variable edited', + variant: 'success', + onDismiss: dismiss, + }); + setEdit((preVal) => !preVal); } else { - toast.error('Variable not edited'); + toast({ + id: 'variable_not_updated', + title: 'Variable not edited', + variant: 'error', + onDismiss: dismiss, + }); } }, [variable, onUpdate], @@ -86,71 +116,55 @@ const EditEnvironmentVariableRow = ({ return ( <> -
-
- Key - -
-
- Value - { - setShowPassword((prevShowPassword) => !prevShowPassword); - }} - isVisible={showPassword} - /> +
+ + { + setShowPassword((prevShowPassword) => !prevShowPassword); + }} + isVisible={showPassword || edit} + /> + } + {...register(`value`)} + /> + +
- {edit ? ( - <> -
- - {'S'} - -
-
- { - reset(); - setEdit((preVal) => !preVal); - }} - > - {'C'} - -
- - ) : ( - <> -
- { - setEdit((preVal) => !preVal); - }} - > - {'E'} - -
-
- setDeleteDialogOpen((preVal) => !preVal)} - > - {'D'} - -
- - )} + }} + > + {edit ? : } +
setDeleteDialogOpen((preVal) => !preVal)} diff --git a/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx new file mode 100644 index 00000000..0e69acef --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/EditBigIcon.tsx @@ -0,0 +1,26 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const EditBigIcon: React.FC = (props) => { + return ( + + + + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx new file mode 100644 index 00000000..dd95373f --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/HideEyeOffIcon.tsx @@ -0,0 +1,18 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const HideEyeOffIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx new file mode 100644 index 00000000..17aa1744 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/ShowEyeIcon.tsx @@ -0,0 +1,18 @@ +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const ShowEyeIcon: React.FC = (props) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index cfa0f2dc..2a7feddf 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -73,6 +73,9 @@ export * from './SwitchIcon'; export * from './CollaboratorsIcon'; export * from './ChevronUpSmallIcon'; export * from './ChevronDownSmallIcon'; +export * from './EditBigIcon'; +export * from './ShowEyeIcon'; +export * from './HideEyeOffIcon'; // Templates export * from './templates'; diff --git a/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx new file mode 100644 index 00000000..d91df2b9 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/EditBigIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { EditBigIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/EditBigIcon', + component: EditBigIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx new file mode 100644 index 00000000..ba8e2817 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/HideEyeOffIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { HideEyeOffIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/HideEyeOffIcon', + component: HideEyeOffIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx new file mode 100644 index 00000000..dbe81967 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ShowEyeIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ShowEyeIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ShowEyeIcon', + component: ShowEyeIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/MockStoriesData.ts b/packages/frontend/src/stories/MockStoriesData.ts index ce8e90c6..c3e3ac25 100644 --- a/packages/frontend/src/stories/MockStoriesData.ts +++ b/packages/frontend/src/stories/MockStoriesData.ts @@ -5,6 +5,12 @@ import { Role, OrganizationMember, ProjectMember, + EnvironmentVariable, + Deployment, + DeploymentStatus, + DomainStatus, + Domain, + Environment, } from 'gql-client'; export const user: User = { @@ -17,7 +23,7 @@ export const user: User = { gitHubToken: 'GitHub Token', }; -const organizationMember: OrganizationMember = { +export const organizationMember: OrganizationMember = { id: '1', member: user, role: Role.Owner, @@ -35,7 +41,7 @@ export const organization: Organization = { projects: [], }; -const member: ProjectMember = { +export const member: ProjectMember = { id: '1', member: user, permissions: [], @@ -44,18 +50,61 @@ const member: ProjectMember = { updatedAt: '2021-08-01T00:00:00.000Z', }; +export const environmentVariable0: EnvironmentVariable = { + id: '1', + key: 'API_KEY', + value: '123456', + environment: Environment.Development, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const environmentVariable1: EnvironmentVariable = { + id: '2', + key: 'API_KEY_2', + value: '123456', + environment: Environment.Development, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', +}; + +export const domain0: Domain = { + id: '1', + name: 'Domain', + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + branch: 'Branch', + status: DomainStatus.Live, + redirectTo: null, +}; + +export const deployment0: Deployment = { + id: '1', + url: 'https://deployment.com', + status: DeploymentStatus.Ready, + createdAt: '2021-08-01T00:00:00.000Z', + updatedAt: '2021-08-01T00:00:00.000Z', + branch: 'Branch', + environment: Environment.Development, + isCurrent: true, + commitHash: 'Commit Hash', + domain: domain0, + commitMessage: 'Commit Message', + createdBy: user, +}; + export const project: Project = { id: '1', - name: 'Project', + name: 'GithubUsername-ProjectName', owner: user, - deployments: [], + deployments: [deployment0], repository: 'Repository', prodBranch: 'Prod Branch', description: 'Description', createdAt: '2021-08-01T00:00:00.000Z', updatedAt: '2021-08-01T00:00:00.000Z', framework: 'NextJS', - environmentVariables: [], + environmentVariables: [environmentVariable0, environmentVariable1], organization: organization, template: 'Template', members: [member], diff --git a/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx b/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx new file mode 100644 index 00000000..811b0ea4 --- /dev/null +++ b/packages/frontend/src/stories/Project/Settings/EditEnvironmentVariableRow.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import EditEnvironmentVariableRow from 'components/projects/project/settings/EditEnvironmentVariableRow'; +import { environmentVariable0 } from '../../MockStoriesData'; + +const meta: Meta = { + title: 'Project/Settings/EditEnvironmentVariableRow', + component: EditEnvironmentVariableRow, + argTypes: { + variable: { + control: { + type: 'object', + }, + }, + onUpdate: { + action: 'update', + }, + }, + args: { + variable: environmentVariable0, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {};