cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

Add confirmation for deleting domain from project settings page (#36)

Browse Source 
* Add delete domain dialog box

* Update toast message

* Fix table warning

* Remove Toaster from other parts of code

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
This commit is contained in:
Nabarun Gogoi 2023-12-28 15:31:46 +05:30 committed by GitHub
parent 7ba390d59b
commit abff6c83e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/projects/create/template/deploy/DeployStep.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import toast, { Toaster } from 'react-hot-toast';
import toast from 'react-hot-toast';
import { Collapse, Button, Typography } from '@material-tailwind/react';
@ -81,7 +81,6 @@ const DeployStep = ({
</div>
</div>
</Collapse>
<Toaster />
</div>
);
};

38
packages/frontend/src/components/projects/project/settings/DomainCard.tsx
View File

@ -1,5 +1,6 @@
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import {
Chip,
Typography,
@ -11,6 +12,8 @@ import {
} from '@material-tailwind/react';
import { DomainDetails, DomainStatus } from '../../../../types/project';
import ConfirmDialog from '../../../shared/ConfirmDialog';
import projectData from '../../../../assets/projects.json';
enum RefreshStatus {
IDLE,
@ -27,6 +30,10 @@ const CHECK_FAIL_TIMEOUT = 5000; // In milliseconds
const DomainCard = ({ domain }: DomainCardProps) => {
const [refreshStatus, SetRefreshStatus] = useState(RefreshStatus.IDLE);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const currProject = projectData.filter(
(data) => data.id === domain.projectid,
);
return (
<>
@ -63,11 +70,40 @@ const DomainCard = ({ domain }: DomainCardProps) => {
</MenuHandler>
<MenuList>
<MenuItem className="text-black">^ Edit domain</MenuItem>
<MenuItem className="text-red-500">^ Delete domain</MenuItem>
<MenuItem
className="text-red-500"
onClick={() => setDeleteDialogOpen(true)}
>
^ Delete domain
</MenuItem>
</MenuList>
</Menu>
</div>
<ConfirmDialog
dialogTitle="Delete domain?"
handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
open={deleteDialogOpen}
confirmButtonTitle="Yes, Delete domain"
handleConfirm={() => {
setDeleteDialogOpen((preVal) => !preVal);
toast.success(`Domain "${domain.name}" has been deleted`);
}}
color="red"
>
<Typography variant="small">
Once deleted, the project{' '}
<span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
{currProject[0].title}
</span>{' '}
will not be accessible from the domain{' '}
<span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
{domain.name}.
</span>
</Typography>
</ConfirmDialog>
</div>
<Typography variant="small">Production</Typography>
{domain.status === DomainStatus.PENDING && (
<Card className="bg-gray-200 p-4 text-sm">

3
packages/frontend/src/components/projects/project/settings/EnvironmentVariablesTabPanel.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import toast, { Toaster } from 'react-hot-toast';
import toast from 'react-hot-toast';
import {
Typography,
@ -189,7 +189,6 @@ export const EnvironmentVariablesTabPanel = () => {
variables={getEnvironmentVariable(Environments.DEVELOPMENT)}
/>
</div>
<Toaster position="bottom-center" />
</>
);
};

3
packages/frontend/src/components/projects/project/settings/GeneralTabPanel.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { useForm, Controller } from 'react-hook-form';
import toast, { Toaster } from 'react-hot-toast';
import toast from 'react-hot-toast';
import {
Button,
@ -175,7 +175,6 @@ const GeneralTabPanel = () => {
project={{ name: 'Iglootools' }}
/>
</div>
<Toaster />
</>
);
};

2
packages/frontend/src/index.tsx
View File

@ -6,6 +6,7 @@ import { ThemeProvider } from '@material-tailwind/react';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Toaster } from 'react-hot-toast';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
@ -14,6 +15,7 @@ root.render(
<React.StrictMode>
<ThemeProvider>
<App />
<Toaster position="bottom-center" />
</ThemeProvider>
</React.StrictMode>,
);

32
packages/frontend/src/pages/projects/id/domain/add/Config.tsx
View File

@ -15,21 +15,23 @@ const Config = () => {
</div>
<table className="rounded-lg w-3/4 text-blue-gray-600">
<tr className="border-b-2 border-gray-300">
<th className="text-left p-2">Type</th>
<th className="text-left p-2">Name</th>
<th className="text-left p-2">Value</th>
</tr>
<tr className="border-b-2 border-gray-300">
<td className="text-left p-2">A</td>
<td className="text-left p-2">@</td>
<td className="text-left p-2">56.49.19.21</td>
</tr>
<tr>
<td className="text-left p-2">CNAME</td>
<td className="text-left p-2">www</td>
<td className="text-left p-2">cname.snowballtools.xyz</td>
</tr>
<tbody>
<tr className="border-b-2 border-gray-300">
<th className="text-left p-2">Type</th>
<th className="text-left p-2">Name</th>
<th className="text-left p-2">Value</th>
</tr>
<tr className="border-b-2 border-gray-300">
<td className="text-left p-2">A</td>
<td className="text-left p-2">@</td>
<td className="text-left p-2">56.49.19.21</td>
</tr>
<tr>
<td className="text-left p-2">CNAME</td>
<td className="text-left p-2">www</td>
<td className="text-left p-2">cname.snowballtools.xyz</td>
</tr>
</tbody>
</table>
<Alert color="blue">