diff --git a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx index c7726ed1..2ba7450c 100644 --- a/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx @@ -9,12 +9,14 @@ interface AddEnvironmentVariableRowProps { onDelete: () => void; register: UseFormRegister; index: number; + isDeleteDisabled: boolean; } const AddEnvironmentVariableRow = ({ onDelete, register, index, + isDeleteDisabled, }: AddEnvironmentVariableRowProps) => { return (
@@ -22,18 +24,26 @@ const AddEnvironmentVariableRow = ({ Key
Value
- onDelete()}> + onDelete()} + disabled={isDeleteDisabled} + > {'>'}
diff --git a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx index dc2e726e..4645dfbe 100644 --- a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx +++ b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { Card, Collapse, Typography } from '@material-tailwind/react'; -import HorizontalLine from '../../../HorizontalLine'; import EditEnvironmentVariableRow from './EditEnvironmentVariableRow'; import { Environments, EnvironmentVariable } from '../../../../types/project'; @@ -26,7 +25,6 @@ const DisplayEnvironmentVariables = ({
^
{environment}
{variables.length} variables
- {variables.length === 0 ? ( diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx index b48bf3f9..c9eddf64 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx @@ -1,6 +1,6 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; -import { Toaster } from 'react-hot-toast'; +import toast, { Toaster } from 'react-hot-toast'; import { Typography, @@ -8,12 +8,14 @@ import { Card, Button, Checkbox, + Chip, } from '@material-tailwind/react'; import AddEnvironmentVariableRow from './AddEnvironmentVariableRow'; import DisplayEnvironmentVariables from './DisplayEnvironmentVariables'; import environmentVariablesData from '../../../../assets/environment-variables.json'; import { EnvironmentVariable, Environments } from '../../../../types/project'; +import HorizontalLine from '../../../HorizontalLine'; export type EnvironmentVariablesFormValues = { variables: { @@ -28,31 +30,59 @@ export type EnvironmentVariablesFormValues = { }; export const EnvironmentVariablesTabPanel = () => { - const { handleSubmit, register, control } = - useForm({ - defaultValues: { - variables: [{ key: '', value: '' }], - environment: { - development: false, - preview: false, - production: false, - }, + const { + handleSubmit, + register, + control, + reset, + formState: { isSubmitSuccessful, errors }, + } = useForm({ + defaultValues: { + variables: [{ key: '', value: '' }], + environment: { + development: false, + preview: false, + production: false, }, - }); - + }, + }); const [createNewVariable, setCreateNewVariable] = useState(false); const { fields, append, remove } = useFieldArray({ name: 'variables', control, + rules: { + required: 'Add at least 1 environment variables', + }, }); + useEffect(() => { + if (isSubmitSuccessful) { + reset(); + } + }, [isSubmitSuccessful, reset]); + const getEnvironmentVariable = useCallback((environment: Environments) => { return (environmentVariablesData as EnvironmentVariable[]).filter((item) => item.environments.includes(environment), ); }, []); + const isFieldEmpty = useMemo(() => { + if (errors.variables) { + return fields.some((_, index) => { + if ( + errors.variables![index]?.value?.type === 'required' || + errors.variables![index]?.key?.type === 'required' + ) { + return true; + } + }); + } + + return false; + }, [fields, errors.variables]); + return ( <> Environment variables @@ -67,8 +97,17 @@ export const EnvironmentVariablesTabPanel = () => { + Create new variable - -
{})}> + + { + toast.success( + data.variables.length > 1 + ? `${data.variables.length} variables added` + : `Variable added`, + ); + reset(); + })} + > {fields.map((field, index) => { return ( { index={index} register={register} onDelete={() => remove(index)} + isDeleteDisabled={fields.length === 1} /> ); })} @@ -96,6 +136,14 @@ export const EnvironmentVariablesTabPanel = () => { ^ Import .env + {isFieldEmpty && ( + + )}
{ environment={Environments.PRODUCTION} variables={getEnvironmentVariable(Environments.PRODUCTION)} /> + +