From e4194801c512f4b7da609763ad32df1bdbd07865 Mon Sep 17 00:00:00 2001 From: Vishnu Nithin Reddy <78612244+nithinrdy@users.noreply.github.com> Date: Thu, 21 Sep 2023 13:06:16 +0530 Subject: [PATCH 1/5] Create a `Table Settings` section. Contains options to customize saving behavior in case of changes to a table's sorting and columns' widths. --- .../Settings/UserSettings/TableSettings.tsx | 103 ++++++++++++++++++ src/pages/Settings/UserSettingsPage.tsx | 2 + src/types/settings.d.ts | 9 +- 3 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 src/components/Settings/UserSettings/TableSettings.tsx diff --git a/src/components/Settings/UserSettings/TableSettings.tsx b/src/components/Settings/UserSettings/TableSettings.tsx new file mode 100644 index 00000000..b2b441da --- /dev/null +++ b/src/components/Settings/UserSettings/TableSettings.tsx @@ -0,0 +1,103 @@ +import { merge } from "lodash-es"; +import { IUserSettingsChildProps } from "@src/pages/Settings/UserSettingsPage"; + +import { + FormControl, + FormControlLabel, + Divider, + Checkbox, + Collapse, +} from "@mui/material"; + +export default function TableSettings({ + settings, + updateSettings, +}: IUserSettingsChildProps) { + return ( + <> + + { + updateSettings({ + defaultTableSettings: merge(settings.defaultTableSettings, { + saveSortingPopupDisabled: e.target.checked, + }), + }); + }} + /> + } + label="Disable popup - to save sorting changes to the team" + style={{ marginLeft: -11, marginBottom: 13 }} + /> + + { + updateSettings({ + defaultTableSettings: merge(settings.defaultTableSettings, { + automaticallyApplySorting: e.target.checked, + }), + }); + }} + /> + } + label="Automatically apply sorting changes to all users" + style={{ marginLeft: 20, marginBottom: 10, marginTop: -13 }} + /> + + + + + { + updateSettings({ + defaultTableSettings: merge(settings.defaultTableSettings, { + saveColumnWidthPopupDisabled: e.target.checked, + }), + }); + }} + /> + } + label="Disable popup - to save column width changes to the team" + style={{ marginLeft: -11, marginTop: 13 }} + /> + + { + updateSettings({ + defaultTableSettings: merge(settings.defaultTableSettings, { + automaticallyApplyColumnWidth: e.target.checked, + }), + }); + }} + /> + } + label="Automatically apply column width changes to all users" + style={{ marginLeft: 20 }} + /> + + + + ); +} diff --git a/src/pages/Settings/UserSettingsPage.tsx b/src/pages/Settings/UserSettingsPage.tsx index 1981157f..efcaad02 100644 --- a/src/pages/Settings/UserSettingsPage.tsx +++ b/src/pages/Settings/UserSettingsPage.tsx @@ -19,6 +19,7 @@ import { } from "@src/atoms/projectScope"; import { useScrollToHash } from "@src/hooks/useScrollToHash"; import { UserSettings } from "@src/types/settings"; +import TableSettings from "@src/components/Settings/UserSettings/TableSettings"; export interface IUserSettingsChildProps { settings: UserSettings; @@ -57,6 +58,7 @@ export default function UserSettingsPage() { const sections = [ { title: "Account", Component: Account, props: childProps }, { title: "Theme", Component: Theme, props: childProps }, + { title: "Table Settings", Component: TableSettings, props: childProps }, { title: "Personalization", Component: Personalization, props: childProps }, ]; diff --git a/src/types/settings.d.ts b/src/types/settings.d.ts index 334df8b9..1f9bee10 100644 --- a/src/types/settings.d.ts +++ b/src/types/settings.d.ts @@ -50,7 +50,14 @@ export type UserSettings = Partial<{ theme: Record<"base" | "light" | "dark", ThemeOptions>; favoriteTables: string[]; - /** Stores user overrides */ + /** Stores default user settings for all tables */ + defaultTableSettings: Partial<{ + saveSortingPopupDisabled: boolean; + automaticallyApplySorting: boolean; + saveColumnWidthPopupDisabled: boolean; + automaticallyApplyColumnWidth: boolean; + }>; + /** Stores table-specific user overrides */ tables: Record< string, Partial<{ From 540373dbfd211820480bb94108c31a44d314dc37 Mon Sep 17 00:00:00 2001 From: Vishnu Nithin Reddy <78612244+nithinrdy@users.noreply.github.com> Date: Thu, 21 Sep 2023 20:51:21 +0530 Subject: [PATCH 2/5] Create atom to fetch `defaultTableSettings` from. Use atom in useSave*** hooks to determine if popups are to be shown (and if not, whether changes are to be applied automatically). --- src/atoms/projectScope/user.ts | 7 +++++ .../Table/ColumnHeader/useSaveTableSorts.tsx | 24 ++++++++++++++--- src/components/Table/useSaveColumnSizing.tsx | 26 +++++++++++++++++-- 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/atoms/projectScope/user.ts b/src/atoms/projectScope/user.ts index 62bcc175..e6337df7 100644 --- a/src/atoms/projectScope/user.ts +++ b/src/atoms/projectScope/user.ts @@ -30,6 +30,13 @@ export const themeOverriddenAtom = atomWithStorage( false ); +/** User's default table settings (affecting saving and popup behavior) */ +export const defaultTableSettingsAtom = atom((get) => { + const userSettings = get(userSettingsAtom); + console.log("defaultTableSettings", userSettings.defaultTableSettings); + return userSettings.defaultTableSettings; +}); + /** Customized base theme based on project and user settings */ export const customizedThemesAtom = atom((get) => { const publicSettings = get(publicSettingsAtom); diff --git a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx index c0c239ed..0d6e8821 100644 --- a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx +++ b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx @@ -1,5 +1,5 @@ import { useCallback, useState } from "react"; -import { useAtom } from "jotai"; +import { useAtom, useAtomValue } from "jotai"; import { SnackbarKey, useSnackbar } from "notistack"; import LoadingButton from "@mui/lab/LoadingButton"; @@ -11,17 +11,25 @@ import { tableScope, updateTableSchemaAtom, } from "@src/atoms/tableScope"; -import { projectScope, updateUserSettingsAtom } from "@src/atoms/projectScope"; +import { + defaultTableSettingsAtom, + projectScope, + updateUserSettingsAtom, +} from "@src/atoms/projectScope"; import { TableSort } from "@src/types/table"; function useSaveTableSorts(canEditColumns: boolean) { const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope); const [updateUserSettings] = useAtom(updateUserSettingsAtom, projectScope); const [tableId] = useAtom(tableIdAtom, tableScope); + const defaultTableSettings = useAtomValue( + defaultTableSettingsAtom, + projectScope + ); const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const [snackbarId, setSnackbarId] = useState(null); - // Offer to save when table sorts changes + // Offer to save when table sorts changes, depending on user settings const trigger = useCallback( (sorts: TableSort[]) => { if (!updateTableSchema) throw new Error("Cannot update table schema"); @@ -33,6 +41,15 @@ function useSaveTableSorts(canEditColumns: boolean) { }); } if (!canEditColumns) return; + // If the user has disabled the popup, return early + if (defaultTableSettings?.saveSortingPopupDisabled) { + // If the user has `automaticallyApplySorting` set to true, apply the sorting before returning + if (defaultTableSettings?.automaticallyApplySorting) { + const updateTable = async () => await updateTableSchema({ sorts }); + updateTable(); + } + return; + } if (snackbarId) { closeSnackbar(snackbarId); } @@ -57,6 +74,7 @@ function useSaveTableSorts(canEditColumns: boolean) { tableId, closeSnackbar, updateTableSchema, + defaultTableSettings, ] ); diff --git a/src/components/Table/useSaveColumnSizing.tsx b/src/components/Table/useSaveColumnSizing.tsx index af1a6e37..bae45118 100644 --- a/src/components/Table/useSaveColumnSizing.tsx +++ b/src/components/Table/useSaveColumnSizing.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { useSetAtom } from "jotai"; +import { useAtomValue, useSetAtom } from "jotai"; import { useSnackbar } from "notistack"; import { useDebounce } from "use-debounce"; import { isEqual, isEmpty } from "lodash-es"; @@ -13,6 +13,10 @@ import { updateColumnAtom, IUpdateColumnOptions, } from "@src/atoms/tableScope"; +import { + defaultTableSettingsAtom, + projectScope, +} from "@src/atoms/projectScope"; import { DEBOUNCE_DELAY } from "./Table"; import { ColumnSizingState } from "@tanstack/react-table"; @@ -26,14 +30,31 @@ export function useSaveColumnSizing( ) { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const updateColumn = useSetAtom(updateColumnAtom, tableScope); + const defaultTableSettings = useAtomValue( + defaultTableSettingsAtom, + projectScope + ); // Debounce for saving to schema const [debouncedColumnSizing] = useDebounce(columnSizing, DEBOUNCE_DELAY, { equalityFn: isEqual, }); - // Offer to save when column sizing changes + // Offer to save when column sizing changes, depending on user settings useEffect(() => { if (!canEditColumns || isEmpty(debouncedColumnSizing)) return; + // If the user has disabled the popup, return early + if (defaultTableSettings?.saveColumnWidthPopupDisabled) { + // If the user has `automaticallyApplyColumnWidth` set to true, apply the column width before returning + if (defaultTableSettings?.automaticallyApplyColumnWidth) { + const updateTable = async () => { + for (const [key, value] of Object.entries(debouncedColumnSizing)) { + await updateColumn({ key, config: { width: value } }); + } + }; + updateTable(); + } + return; + } const snackbarId = enqueueSnackbar("Save column sizes for all users?", { action: ( @@ -52,6 +73,7 @@ export function useSaveColumnSizing( enqueueSnackbar, closeSnackbar, updateColumn, + defaultTableSettings, ]); return null; From 03bbce2b97a928e758b8306399059fdffc2efd91 Mon Sep 17 00:00:00 2001 From: Vishnu Nithin Reddy <78612244+nithinrdy@users.noreply.github.com> Date: Thu, 21 Sep 2023 21:09:26 +0530 Subject: [PATCH 3/5] Remove stray console.log and better variable naming --- src/atoms/projectScope/user.ts | 1 - .../Settings/UserSettings/TableSettings.tsx | 20 +++++++++---------- .../Table/ColumnHeader/useSaveTableSorts.tsx | 6 +++--- src/components/Table/useSaveColumnSizing.tsx | 6 +++--- src/types/settings.d.ts | 8 ++++---- 5 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/atoms/projectScope/user.ts b/src/atoms/projectScope/user.ts index e6337df7..5c03281e 100644 --- a/src/atoms/projectScope/user.ts +++ b/src/atoms/projectScope/user.ts @@ -33,7 +33,6 @@ export const themeOverriddenAtom = atomWithStorage( /** User's default table settings (affecting saving and popup behavior) */ export const defaultTableSettingsAtom = atom((get) => { const userSettings = get(userSettingsAtom); - console.log("defaultTableSettings", userSettings.defaultTableSettings); return userSettings.defaultTableSettings; }); diff --git a/src/components/Settings/UserSettings/TableSettings.tsx b/src/components/Settings/UserSettings/TableSettings.tsx index b2b441da..6c4bfcb9 100644 --- a/src/components/Settings/UserSettings/TableSettings.tsx +++ b/src/components/Settings/UserSettings/TableSettings.tsx @@ -20,12 +20,12 @@ export default function TableSettings({ control={ { updateSettings({ defaultTableSettings: merge(settings.defaultTableSettings, { - saveSortingPopupDisabled: e.target.checked, + saveSortsPopupDisabled: e.target.checked, }), }); }} @@ -34,17 +34,17 @@ export default function TableSettings({ label="Disable popup - to save sorting changes to the team" style={{ marginLeft: -11, marginBottom: 13 }} /> - + { updateSettings({ defaultTableSettings: merge(settings.defaultTableSettings, { - automaticallyApplySorting: e.target.checked, + automaticallyApplySorts: e.target.checked, }), }); }} @@ -61,12 +61,12 @@ export default function TableSettings({ control={ { updateSettings({ defaultTableSettings: merge(settings.defaultTableSettings, { - saveColumnWidthPopupDisabled: e.target.checked, + saveColumnSizingPopupDisabled: e.target.checked, }), }); }} @@ -76,18 +76,18 @@ export default function TableSettings({ style={{ marginLeft: -11, marginTop: 13 }} /> { updateSettings({ defaultTableSettings: merge(settings.defaultTableSettings, { - automaticallyApplyColumnWidth: e.target.checked, + automaticallyApplyColumnSizing: e.target.checked, }), }); }} diff --git a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx index 0d6e8821..3c8c9980 100644 --- a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx +++ b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx @@ -42,9 +42,9 @@ function useSaveTableSorts(canEditColumns: boolean) { } if (!canEditColumns) return; // If the user has disabled the popup, return early - if (defaultTableSettings?.saveSortingPopupDisabled) { - // If the user has `automaticallyApplySorting` set to true, apply the sorting before returning - if (defaultTableSettings?.automaticallyApplySorting) { + if (defaultTableSettings?.saveSortsPopupDisabled) { + // If the user has `automaticallyApplySorts` set to true, apply the sorting before returning + if (defaultTableSettings?.automaticallyApplySorts) { const updateTable = async () => await updateTableSchema({ sorts }); updateTable(); } diff --git a/src/components/Table/useSaveColumnSizing.tsx b/src/components/Table/useSaveColumnSizing.tsx index bae45118..68ec4668 100644 --- a/src/components/Table/useSaveColumnSizing.tsx +++ b/src/components/Table/useSaveColumnSizing.tsx @@ -43,9 +43,9 @@ export function useSaveColumnSizing( useEffect(() => { if (!canEditColumns || isEmpty(debouncedColumnSizing)) return; // If the user has disabled the popup, return early - if (defaultTableSettings?.saveColumnWidthPopupDisabled) { - // If the user has `automaticallyApplyColumnWidth` set to true, apply the column width before returning - if (defaultTableSettings?.automaticallyApplyColumnWidth) { + if (defaultTableSettings?.saveColumnSizingPopupDisabled) { + // If the user has `automaticallyApplyColumnSizing` set to true, apply the column width before returning + if (defaultTableSettings?.automaticallyApplyColumnSizing) { const updateTable = async () => { for (const [key, value] of Object.entries(debouncedColumnSizing)) { await updateColumn({ key, config: { width: value } }); diff --git a/src/types/settings.d.ts b/src/types/settings.d.ts index 1f9bee10..0c5321d1 100644 --- a/src/types/settings.d.ts +++ b/src/types/settings.d.ts @@ -52,10 +52,10 @@ export type UserSettings = Partial<{ favoriteTables: string[]; /** Stores default user settings for all tables */ defaultTableSettings: Partial<{ - saveSortingPopupDisabled: boolean; - automaticallyApplySorting: boolean; - saveColumnWidthPopupDisabled: boolean; - automaticallyApplyColumnWidth: boolean; + saveSortsPopupDisabled: boolean; + automaticallyApplySorts: boolean; + saveColumnSizingPopupDisabled: boolean; + automaticallyApplyColumnSizing: boolean; }>; /** Stores table-specific user overrides */ tables: Record< From 6e21feba0d45f160734139c434b190801294428e Mon Sep 17 00:00:00 2001 From: Vishnu Nithin Reddy <78612244+nithinrdy@users.noreply.github.com> Date: Thu, 21 Sep 2023 21:16:23 +0530 Subject: [PATCH 4/5] Group like imports --- src/pages/Settings/UserSettingsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Settings/UserSettingsPage.tsx b/src/pages/Settings/UserSettingsPage.tsx index efcaad02..83b30e78 100644 --- a/src/pages/Settings/UserSettingsPage.tsx +++ b/src/pages/Settings/UserSettingsPage.tsx @@ -9,6 +9,7 @@ import SettingsSkeleton from "@src/components/Settings/SettingsSkeleton"; import SettingsSection from "@src/components/Settings/SettingsSection"; import Account from "@src/components/Settings/UserSettings/Account"; import Theme from "@src/components/Settings/UserSettings/Theme"; +import TableSettings from "@src/components/Settings/UserSettings/TableSettings"; import Personalization from "@src/components/Settings/UserSettings/Personalization"; import { @@ -19,7 +20,6 @@ import { } from "@src/atoms/projectScope"; import { useScrollToHash } from "@src/hooks/useScrollToHash"; import { UserSettings } from "@src/types/settings"; -import TableSettings from "@src/components/Settings/UserSettings/TableSettings"; export interface IUserSettingsChildProps { settings: UserSettings; From c0b04884e66294556a20b0335f7c4f9124deeaca Mon Sep 17 00:00:00 2001 From: Vishnu Nithin Reddy <78612244+nithinrdy@users.noreply.github.com> Date: Wed, 4 Oct 2023 18:17:39 +0530 Subject: [PATCH 5/5] Move save pop-ups out of the way, to the corner --- src/components/Table/ColumnHeader/useSaveTableSorts.tsx | 2 +- src/components/Table/useSaveColumnSizing.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx index 3c8c9980..76efdbef 100644 --- a/src/components/Table/ColumnHeader/useSaveTableSorts.tsx +++ b/src/components/Table/ColumnHeader/useSaveTableSorts.tsx @@ -60,7 +60,7 @@ function useSaveTableSorts(canEditColumns: boolean) { updateTable={async () => await updateTableSchema({ sorts })} /> ), - anchorOrigin: { horizontal: "center", vertical: "top" }, + anchorOrigin: { horizontal: "left", vertical: "bottom" }, }) ); diff --git a/src/components/Table/useSaveColumnSizing.tsx b/src/components/Table/useSaveColumnSizing.tsx index 68ec4668..b0c1d55c 100644 --- a/src/components/Table/useSaveColumnSizing.tsx +++ b/src/components/Table/useSaveColumnSizing.tsx @@ -63,7 +63,7 @@ export function useSaveColumnSizing( updateColumn={updateColumn} /> ), - anchorOrigin: { horizontal: "center", vertical: "top" }, + anchorOrigin: { horizontal: "left", vertical: "bottom" }, }); return () => closeSnackbar(snackbarId);