Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX improvement delete dashboard modal #368

Merged
merged 4 commits into from
Nov 11, 2024
Merged

UX improvement delete dashboard modal #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
67a4bc0
Fixed the class spelling for tiles container
pranavgoel29 Nov 10, 2024
928c534
Added bottom margin to the tiles container in dashboards
pranavgoel29 Nov 10, 2024
dd43ee1
Moved confirmation text inside the modal from the input placeholder
pranavgoel29 Nov 11, 2024
db16b35
Add quotes to highlight the input text
pranavgoel29 Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions src/pages/Dashboards/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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) => {
Expand All @@ -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));
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand Down
7 changes: 6 additions & 1 deletion src/pages/Dashboards/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }}>
Expand Down
4 changes: 4 additions & 0 deletions src/pages/Dashboards/styles/DashboardView.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
align-self: center;
}

.tilesViewContainer {
margin-bottom: 1rem;
}

.dashboardIcon {
color: var(--mantine-color-brandPrimary-4);
}
Expand Down
91 changes: 50 additions & 41 deletions src/pages/Dashboards/styles/toolbar.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading