♻️ refactor: create delete variable dialog component

This commit is contained in:
Wahyu Kurniawan 2024-03-14 21:55:30 +07:00
parent 45e8e9a7f4
commit c1696fbf48
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 42 additions and 14 deletions

View File

@ -0,0 +1,36 @@
import ConfirmDialog, {
ConfirmDialogProps,
} from 'components/shared/ConfirmDialog';
import React from 'react';
interface DeleteVariableDialogProps extends ConfirmDialogProps {
variableKey: string;
}
export const DeleteVariableDialog = ({
variableKey,
open,
handleCancel,
handleConfirm,
...props
}: DeleteVariableDialogProps) => {
return (
<ConfirmDialog
{...props}
dialogTitle="Delete variable"
handleCancel={handleCancel}
open={open}
confirmButtonTitle="Yes, confirm delete"
handleConfirm={handleConfirm}
confirmButtonProps={{ variant: 'danger' }}
>
<p className="text-sm text-elements-mid-em">
Are you sure you want to delete the variable{' '}
<span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
{variableKey}
</span>
?
</p>
</ConfirmDialog>
);
};

View File

@ -5,8 +5,8 @@ import { EnvironmentVariable } from 'gql-client';
import { IconButton, Input, Typography } from '@material-tailwind/react';
import ConfirmDialog from '../../../shared/ConfirmDialog';
import { useGQLClient } from '../../../../context/GQLClientContext';
import { useGQLClient } from 'context/GQLClientContext';
import { DeleteVariableDialog } from 'components/projects/Dialog/DeleteVariableDialog';
const ShowPasswordIcon = ({
handler,
@ -161,20 +161,12 @@ const EditEnvironmentVariableRow = ({
</>
)}
</div>
<ConfirmDialog
dialogTitle="Delete variable"
handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
<DeleteVariableDialog
handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
open={deleteDialogOpen}
confirmButtonTitle="Yes, Confirm delete"
handleConfirm={removeEnvironmentVariableHandler}
color="red"
>
<Typography variant="small" placeholder={''}>
Are you sure you want to delete the variable&nbsp;
<span className="bg-blue-100">{variable.key}</span>?
</Typography>
</ConfirmDialog>
variableKey={variable.key}
/>
</>
);
};