UX improvement delete dashboard modal (#368)

Author: pranavgoel29

src/pages/Dashboards/Dashboard.tsx

@@ -23,8 +23,14 @@ import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { EditTileType, ImportDashboardType, Tile as TileType } from '@/@types/parseable/api/dashboards';
 import { templates } from './assets/templates';
 
-const { toggleCreateDashboardModal, toggleCreateTileModal, toggleDuplicateTileModal, toggleDeleteTileModal, handlePaging, toggleImportDashboardModal } =
-	dashboardsStoreReducers;
+const {
+	toggleCreateDashboardModal,
+	toggleCreateTileModal,
+	toggleDuplicateTileModal,
+	toggleDeleteTileModal,
+	handlePaging,
+	toggleImportDashboardModal,
+} = dashboardsStoreReducers;
 
 const TilesView = (props: { onLayoutChange: (layout: Layout[]) => void }) => {
 	const [activeDashboard, setDashbaordsStore] = useDashboardsStore((store) => store.activeDashboard);
@@ -66,7 +72,7 @@ const TilesView = (props: { onLayoutChange: (layout: Layout[]) => void }) => {
 	if (showNoTilesView) return <NoTilesView />;
 
 	return (
-		<Stack ref={scrollRef} className={classes.tilesViewConatiner} style={{ overflowY: 'scroll' }}>
+		<Stack ref={scrollRef} className={classes.tilesViewContainer} style={{ overflowY: 'scroll' }}>
 			<GridLayout
 				className="layout"
 				layout={layout}
@@ -151,7 +157,10 @@ const DeleteTileModal = () => {
 	);
 };
 
-const DashboardTemplates = (props: {onImport: (template: ImportDashboardType) => void; isImportingDashboard: boolean}) => {
+const DashboardTemplates = (props: {
+	onImport: (template: ImportDashboardType) => void;
+	isImportingDashboard: boolean;
+}) => {
 	return (
 		<Stack gap={0} mt={6}>
 			{_.map(templates, (template) => {
@@ -174,12 +183,12 @@ const DashboardTemplates = (props: {onImport: (template: ImportDashboardType) =>
 			})}
 		</Stack>
 	);
-}
+};
 
 const ImportDashboardModal = () => {
 	const [importDashboardModalOpen, setDashboardStore] = useDashboardsStore((store) => store.importDashboardModalOpen);
 	const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
-	const [isStandAloneMode] = useAppStore(store => store.isStandAloneMode)
+	const [isStandAloneMode] = useAppStore((store) => store.isStandAloneMode);
 	const [file, setFile] = useState<File | null>(null);
 	const closeModal = useCallback(() => {
 		setDashboardStore((store) => toggleImportDashboardModal(store, false));
@@ -208,9 +217,9 @@ const ImportDashboardModal = () => {
 					const newDashboard: ImportDashboardType = JSON.parse(target.result);
 					if (_.isEmpty(newDashboard)) return;
 
-					return makePostCall(newDashboard)
+					return makePostCall(newDashboard);
 				} catch (error) {
-					console.log("error", error)
+					console.log('error', error);
 				}
 			};
 			reader.readAsText(file);
@@ -336,13 +345,13 @@ const InvalidDashboardView = () => {
 };
 
 const findTileByTileId = (tiles: TileType[], tileId: string | null) => {
-	return _.find(tiles, tile => tile.tile_id === tileId)
-}
+	return _.find(tiles, (tile) => tile.tile_id === tileId);
+};
 
 const DuplicateTileModal = () => {
-	const [duplicateTileModalOpen, setDashboardsStore] = useDashboardsStore(store => store.duplicateTileModalOpen)
-	const [editTileId] = useDashboardsStore(store => store.editTileId);
-	const [activeDashboard] = useDashboardsStore(store => store.activeDashboard)
+	const [duplicateTileModalOpen, setDashboardsStore] = useDashboardsStore((store) => store.duplicateTileModalOpen);
+	const [editTileId] = useDashboardsStore((store) => store.editTileId);
+	const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
 	const [inputValue, setInputValue] = useState<string>('');
 	const onClose = useCallback(() => {
 		setDashboardsStore((store) => toggleDuplicateTileModal(store, false, null));
@@ -399,7 +408,9 @@ const DuplicateTileModal = () => {
 						</Button>
 					</Box>
 					<Box>
-						<Button onClick={handleSubmit} loading={isUpdatingDashboard} disabled={_.isEmpty(inputValue)}>Done</Button>
+						<Button onClick={handleSubmit} loading={isUpdatingDashboard} disabled={_.isEmpty(inputValue)}>
+							Done
+						</Button>
 					</Box>
 				</Stack>
 			</Stack>
@@ -422,9 +433,9 @@ const Dashboard = () => {
 	return (
 		<Stack style={{ flex: 1 }} gap={0}>
 			<DeleteTileModal />
-			<DuplicateTileModal/>
+			<DuplicateTileModal />
 			<Toolbar layoutRef={layoutRef} />
-			<ImportDashboardModal/>
+			<ImportDashboardModal />
 			{activeDashboard ? <TilesView onLayoutChange={onLayoutChange} /> : <InvalidDashboardView />}
 		</Stack>
 	);

src/pages/Dashboards/Toolbar.tsx

@@ -158,10 +158,15 @@ const DeleteDashboardModal = () => {
 					<Text className={classes.deleteWarningText}>
 						Are you sure want to delete this dashboard and its contents ?
 					</Text>
+					<Text className={classes.deleteConfirmationText}>
+						Please type <span className={classes.deleteConfirmationTextHighlight}>{`"${activeDashboard.name}"`}</span>{' '}
+						to confirm deletion.
+					</Text>
+
 					<TextInput
 						value={confirmText}
 						onChange={onChangeHandler}
-						placeholder={'Type the dashboard name to confirm. ie ' + activeDashboard.name}
+						placeholder={'Type the dashboard name to confirm.'}
 					/>
 				</Stack>
 				<Stack style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>

src/pages/Dashboards/styles/DashboardView.module.css

@@ -16,6 +16,10 @@
     align-self: center;
 }
 
+.tilesViewContainer {
+   margin-bottom: 1rem;
+}
+
 .dashboardIcon {
     color: var(--mantine-color-brandPrimary-4);
 }

src/pages/Dashboards/styles/toolbar.module.css

@@ -1,71 +1,80 @@
 .editLayoutBtn {
-    color: var(--mantine-color-gray-7);
-    border: 1px #e9ecef solid;
-    border-radius: rem(8px);
-    font-size: 0.65rem;
+	color: var(--mantine-color-gray-7);
+	border: 1px #e9ecef solid;
+	border-radius: rem(8px);
+	font-size: 0.65rem;
 
-    &:hover {
-        color: black;
-        background-color: white;
-    }
+	&:hover {
+		color: black;
+		background-color: white;
+	}
 
-    &.active {
-        color: white;
+	&.active {
+		color: white;
 
-        &:hover {
-            background-color: var(--mantine-color-brandPrimary-4);
-            color: white;
-        }
-    }
+		&:hover {
+			background-color: var(--mantine-color-brandPrimary-4);
+			color: white;
+		}
+	}
 }
 
 .addTileBtn {
-    background-color: white;
-    color: var(--mantine-color-gray-7);
-    border: 1px #e9ecef solid;
-    border-radius: rem(8px);
-    font-size: 0.65rem;
+	background-color: white;
+	color: var(--mantine-color-gray-7);
+	border: 1px #e9ecef solid;
+	border-radius: rem(8px);
+	font-size: 0.65rem;
 
-    &:hover {
-        color: black;
-    }
+	&:hover {
+		color: black;
+	}
 }
 
 .addTileBtn:hover {
-    background-color: #E0E0E0;
+	background-color: #e0e0e0;
 }
 
 .editLayoutBtn:hover {
-    background-color: #E0E0E0;
+	background-color: #e0e0e0;
 }
 
 .toolbarContainer {
-    padding: 0.4rem 0.8rem;
-    border-bottom: 1px solid var(--mantine-color-gray-1);
+	padding: 0.4rem 0.8rem;
+	border-bottom: 1px solid var(--mantine-color-gray-1);
 }
 
 .dashboardTitle {
-    font-size: 0.8rem;
-    font-weight: 500;
+	font-size: 0.8rem;
+	font-weight: 500;
 }
 
 .dashboardDescription {
-    font-size: 0.7rem;
-    color: var(--mantine-color-gray-6);
+	font-size: 0.7rem;
+	color: var(--mantine-color-gray-6);
 }
 
 .editIcon {
-    padding: 0.25rem;
-    cursor: pointer;
-    border-radius: 50%;
-    margin-left: 0.2rem;
+	padding: 0.25rem;
+	cursor: pointer;
+	border-radius: 50%;
+	margin-left: 0.2rem;
 
-    &:hover {
-        background-color: var(--mantine-color-gray-1);
-    }
+	&:hover {
+		background-color: var(--mantine-color-gray-1);
+	}
 }
 
 .deleteWarningText {
-    font-size: 0.7rem;
-    color: var(--mantine-color-gray-6);
-}
+	font-size: 0.7rem;
+	color: var(--mantine-color-gray-7);
+}
+
+.deleteConfirmationText {
+	font-size: 0.7rem;
+	color: var(--mantine-color-gray-6);
+}
+
+.deleteConfirmationTextHighlight {
+	font-weight: 500;
+}