From 642ba72b8f82f3dfdc51ff4292517876d04b9fcb Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Wed, 27 Dec 2023 11:29:31 +0530 Subject: [PATCH] Add section for displaying environment variables in project settings (#27) * Implement functionality to display environment variables * Handle confirm of confirm dialogs * Reset to default value on cancel button click * Rename delete dialog open variable --------- Co-authored-by: neeraj --- .../src/assets/environment-variables.json | 14 ++ .../deployments/DeploymentDetailsCard.tsx | 9 +- ...able.tsx => AddEnvironmentVariableRow.tsx} | 8 +- .../settings/DisplayEnvironmentVariables.tsx | 53 +++++++ .../settings/EditEnvironmentVariableRow.tsx | 142 ++++++++++++++++++ .../settings/EnvironmentVariablesTabPanel.tsx | 42 ++++-- .../project/settings/GeneralTabPanel.tsx | 3 - packages/frontend/src/types/project.ts | 13 ++ 8 files changed, 265 insertions(+), 19 deletions(-) create mode 100644 packages/frontend/src/assets/environment-variables.json rename packages/frontend/src/components/projects/project/settings/{EnvironmentVariable.tsx => AddEnvironmentVariableRow.tsx} (85%) create mode 100644 packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx create mode 100644 packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx diff --git a/packages/frontend/src/assets/environment-variables.json b/packages/frontend/src/assets/environment-variables.json new file mode 100644 index 00000000..65a4ec4a --- /dev/null +++ b/packages/frontend/src/assets/environment-variables.json @@ -0,0 +1,14 @@ +[ + { + "id": 1, + "key": "ABC", + "value": "ABC", + "environments": ["production", "preview"] + }, + { + "id": 2, + "key": "XYZ", + "value": "abc3", + "environments": ["preview"] + } +] diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx index 21086305..b74f63c7 100644 --- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx +++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx @@ -93,10 +93,11 @@ const DeploymentDetailsCard = ({ setChangeToProduction(!changeToProduction)} + handleOpen={() => setChangeToProduction((preVal) => !preVal)} open={changeToProduction} confirmButtonTitle="Change" color="blue" + handleConfirm={() => setChangeToProduction((preVal) => !preVal)} >
@@ -116,10 +117,11 @@ const DeploymentDetailsCard = ({ setRedeployToProduction(!redeployToProduction)} + handleOpen={() => setRedeployToProduction((preVal) => !preVal)} open={redeployToProduction} confirmButtonTitle="Redeploy" color="blue" + handleConfirm={() => setRedeployToProduction((preVal) => !preVal)} >
@@ -140,10 +142,11 @@ const DeploymentDetailsCard = ({ setRollbackDeployment(!rollbackDeployment)} + handleOpen={() => setRollbackDeployment((preVal) => !preVal)} open={rollbackDeployment} confirmButtonTitle="Rollback" color="blue" + handleConfirm={() => setRollbackDeployment((preVal) => !preVal)} >
diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariable.tsx b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx similarity index 85% rename from packages/frontend/src/components/projects/project/settings/EnvironmentVariable.tsx rename to packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx index b31ba114..c7726ed1 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariable.tsx +++ b/packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx @@ -5,17 +5,17 @@ import { Typography, Input, IconButton } from '@material-tailwind/react'; import { EnvironmentVariablesFormValues } from './EnvironmentVariablesTabPanel'; -interface EnvironmentVariableProps { +interface AddEnvironmentVariableRowProps { onDelete: () => void; register: UseFormRegister; index: number; } -const EnvironmentVariable = ({ +const AddEnvironmentVariableRow = ({ onDelete, register, index, -}: EnvironmentVariableProps) => { +}: AddEnvironmentVariableRowProps) => { return (
@@ -41,4 +41,4 @@ const EnvironmentVariable = ({ ); }; -export default EnvironmentVariable; +export default AddEnvironmentVariableRow; diff --git a/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx new file mode 100644 index 00000000..dc2e726e --- /dev/null +++ b/packages/frontend/src/components/projects/project/settings/DisplayEnvironmentVariables.tsx @@ -0,0 +1,53 @@ +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'; + +interface DisplayEnvironmentVariablesProps { + environment: Environments; + variables: EnvironmentVariable[]; +} + +const DisplayEnvironmentVariables = ({ + environment, + variables, +}: DisplayEnvironmentVariablesProps) => { + const [openCollapse, setOpenCollapse] = useState(false); + + return ( + <> +
setOpenCollapse((cur) => !cur)} + > +
^
+
{environment}
+
{variables.length} variables
+ +
+ + {variables.length === 0 ? ( + + + No environment variables added yet. + + + Once you add them, they’ll show up here. + + + ) : ( + variables.map((variable: EnvironmentVariable, index: number) => { + return ( + + ); + }) + )} + + + ); +}; + +export default DisplayEnvironmentVariables; diff --git a/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx new file mode 100644 index 00000000..aec238d8 --- /dev/null +++ b/packages/frontend/src/components/projects/project/settings/EditEnvironmentVariableRow.tsx @@ -0,0 +1,142 @@ +import React, { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import toast from 'react-hot-toast'; + +import { IconButton, Input, Typography } from '@material-tailwind/react'; + +import ConfirmDialog from '../../../shared/ConfirmDialog'; +import { EnvironmentVariable } from '../../../../types/project'; + +const ShowPasswordIcon = ({ + handler, + isVisible, +}: { + handler: () => void; + isVisible: boolean; +}) => { + return ( + { + handler(); + }} + className="cursor-pointer" + > + {isVisible ? '-' : '+'} + + ); +}; + +const EditEnvironmentVariableRow = ({ + variable, +}: { + variable: EnvironmentVariable; +}) => { + const { handleSubmit, register, reset } = useForm({ + defaultValues: { + key: variable.key, + value: variable.value, + }, + }); + + const [showPassword, setShowPassword] = useState(false); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [edit, setEdit] = useState(false); + + return ( + <> +
+
+ Key + +
+
+ Value + { + setShowPassword((prevShowPassword) => !prevShowPassword); + }} + isVisible={showPassword} + /> + } + {...register(`value`)} + /> +
+ {edit ? ( + <> +
+ { + toast.success('Variable edited'); + setEdit((preVal) => !preVal); + })} + size="sm" + > + {'S'} + +
+
+ { + reset(); + setEdit((preVal) => !preVal); + }} + > + {'C'} + +
+ + ) : ( + <> +
+ { + setEdit((preVal) => !preVal); + }} + > + {'E'} + +
+
+ setDeleteDialogOpen((preVal) => !preVal)} + > + {'D'} + +
+ + )} +
+ + setDeleteDialogOpen((preVal) => !preVal)} + open={deleteDialogOpen} + confirmButtonTitle="Yes, Confirm delete" + handleConfirm={() => { + setDeleteDialogOpen((preVal) => !preVal); + toast.success('Variable deleted'); + }} + color="red" + > + + Are you sure you want to delete the variable + {variable.key}? + + + + ); +}; + +export default EditEnvironmentVariableRow; diff --git a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx index 730291b6..b48bf3f9 100644 --- a/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx @@ -1,5 +1,6 @@ -import React, { useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { useFieldArray, useForm } from 'react-hook-form'; +import { Toaster } from 'react-hot-toast'; import { Typography, @@ -9,7 +10,10 @@ import { Checkbox, } from '@material-tailwind/react'; -import EnvironmentVariable from './EnvironmentVariable'; +import AddEnvironmentVariableRow from './AddEnvironmentVariableRow'; +import DisplayEnvironmentVariables from './DisplayEnvironmentVariables'; +import environmentVariablesData from '../../../../assets/environment-variables.json'; +import { EnvironmentVariable, Environments } from '../../../../types/project'; export type EnvironmentVariablesFormValues = { variables: { @@ -43,6 +47,12 @@ export const EnvironmentVariablesTabPanel = () => { control, }); + const getEnvironmentVariable = useCallback((environment: Environments) => { + return (environmentVariablesData as EnvironmentVariable[]).filter((item) => + item.environments.includes(environment), + ); + }, []); + return ( <> Environment variables @@ -61,13 +71,12 @@ export const EnvironmentVariablesTabPanel = () => {
{})}> {fields.map((field, index) => { return ( -
- remove(index)} - /> -
+ remove(index)} + /> ); })}
@@ -116,6 +125,21 @@ export const EnvironmentVariablesTabPanel = () => {
+
+ + + +
+ ); }; diff --git a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx index 15f1a474..132a9241 100644 --- a/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx +++ b/packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx @@ -66,7 +66,6 @@ const GeneralTabPanel = () => { App name { Description (Optional) { Project ID