From bb8b6986e0aa286775c66338d203cb93cb3c5953 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Fri, 3 Jun 2022 12:47:40 +1000 Subject: [PATCH] move table ui atoms to tableScope --- package.json | 2 +- src/atoms/globalScope/ui.ts | 96 +----------- src/atoms/tableScope/ui.ts | 143 ++++++++++++++++++ src/components/ColumnMenu/ColumnMenu.tsx | 12 +- src/components/ColumnModals/ColumnModals.tsx | 9 +- .../ColumnModals/NewColumnModal.tsx | 9 +- .../SideDrawer/SideDrawerFields.tsx | 4 +- .../Table/ColumnHeader/ColumnHeader.tsx | 9 +- src/components/Table/EmptyTable.tsx | 4 +- src/components/Table/FinalColumnHeader.tsx | 9 +- .../CloudLogs/BuildLogs/BuildLogs.tsx | 5 +- .../CloudLogs/BuildLogs/BuildLogsSnack.tsx | 11 +- .../TableToolbar/CloudLogs/CloudLogs.tsx | 4 +- .../TableToolbar/CloudLogs/CloudLogsModal.tsx | 5 +- .../CloudLogs/TimeRangeSelect.tsx | 2 +- .../TableToolbar/CloudLogs/utils.ts | 23 +-- src/components/TableToolbar/Export/Export.tsx | 5 +- .../TableToolbar/Extensions/Extensions.tsx | 4 +- .../TableToolbar/Filters/Filters.tsx | 4 +- .../TableToolbar/Filters/FiltersPopover.tsx | 4 +- .../TableToolbar/Webhooks/WebhookList.tsx | 14 +- .../TableToolbar/Webhooks/Webhooks.tsx | 4 +- src/layouts/Navigation/NavTableSection.tsx | 1 + test.js | 4 - yarn.lock | 8 +- 25 files changed, 214 insertions(+), 181 deletions(-) delete mode 100644 test.js diff --git a/package.json b/package.json index 71a417db..8bac1a9c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "file-saver": "^2.0.5", "firebase": "^9.6.11", "firebaseui": "^6.0.1", - "jotai": "^1.6.5", + "jotai": "^1.7.1", "json-stable-stringify-without-jsonify": "^1.0.1", "json2csv": "^5.0.7", "jszip": "^3.10.0", diff --git a/src/atoms/globalScope/ui.ts b/src/atoms/globalScope/ui.ts index 3e0edbc3..245beee3 100644 --- a/src/atoms/globalScope/ui.ts +++ b/src/atoms/globalScope/ui.ts @@ -1,13 +1,8 @@ import { atom } from "jotai"; -import { atomWithStorage, atomWithHash } from "jotai/utils"; +import { atomWithStorage } from "jotai/utils"; -import type { DialogProps, ButtonProps, PopoverProps } from "@mui/material"; -import type { - TableSettings, - TableSchema, - ColumnConfig, - TableFilter, -} from "@src/types/table"; +import type { DialogProps, ButtonProps } from "@mui/material"; +import type { TableSettings, TableSchema } from "@src/types/table"; import { getTableSchemaAtom } from "./project"; /** @@ -165,91 +160,6 @@ export const tableDescriptionDismissedAtom = atomWithStorage( [] ); -/** - * Open table column menu. Set to `null` to close. - * - * @example Basic usage: - * ``` - * const openColumnMenu = useSetAtom(columnMenuAtom, globalScope); - * openColumnMenu({ column, anchorEl: ... }); - * ``` - * - * @example Close: - * ``` - * openColumnMenu(null) - * ``` - */ -export const columnMenuAtom = atom<{ - column: ColumnConfig; - anchorEl: PopoverProps["anchorEl"]; -} | null>(null); - -/** - * Opens a table column modal. Set to `null` to close. - * Modals: new column, name change, type change, column settings. - * - * @example Basic usage: - * ``` - * const openColumnModal = useSetAtom(columnModalAtom, globalScope); - * openColumnModal({ type: "...", column }); - * ``` - * - * @example Close: - * ``` - * openColumnModal(null) - * ``` - */ -export const columnModalAtom = atomWithHash<{ - type: "new" | "name" | "type" | "config"; - columnKey?: string; - index?: number; -} | null>("columnModal", null, { replaceState: true }); - -export type TableFiltersPopoverState = { - open: boolean; - defaultQuery?: TableFilter; -}; -/** - * Store table filter popover state. - * Calling the set function resets props. - * - * @example Basic usage: - * ``` - * const openTableFiltersPopover = useSetAtom(tableFiltersPopoverAtom, globalScope); - * openTableFiltersPopover({ query: ... }); - * ``` - * - * @example Close: - * ``` - * openTableFiltersPopover({ open: false }) - * ``` - */ -export const tableFiltersPopoverAtom = atom( - { open: false } as TableFiltersPopoverState, - (_, set, update?: Partial) => { - set(tableFiltersPopoverAtom, { open: true, ...update }); - } -); - -/** - * Opens a table modal. Set to `null` to close. - * Modals: cloud logs, extensions, webhooks, export. - * - * @example Basic usage: - * ``` - * const openTableModal = useSetAtom(tableModalAtom, globalScope); - * openTableModal("..."); - * ``` - * - * @example Close: - * ``` - * openTableModal(null) - * ``` - */ -export const tableModalAtom = atomWithHash< - "cloudLogs" | "extensions" | "webhooks" | "export" | null ->("tableModal", null, { replaceState: true }); - /** Store current JSON editor view */ export const jsonEditorAtom = atomWithStorage<"tree" | "code">( "__ROWY__JSON_EDITOR", diff --git a/src/atoms/tableScope/ui.ts b/src/atoms/tableScope/ui.ts index 280a9286..25aecd2a 100644 --- a/src/atoms/tableScope/ui.ts +++ b/src/atoms/tableScope/ui.ts @@ -1,4 +1,100 @@ import { atom } from "jotai"; +import { atomWithStorage, atomWithHash } from "jotai/utils"; + +import type { PopoverProps } from "@mui/material"; +import type { ColumnConfig, TableFilter } from "@src/types/table"; +import { SEVERITY_LEVELS } from "@src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon"; + +/** + * Open table column menu. Set to `null` to close. + * + * @example Basic usage: + * ``` + * const openColumnMenu = useSetAtom(columnMenuAtom, globalScope); + * openColumnMenu({ column, anchorEl: ... }); + * ``` + * + * @example Close: + * ``` + * openColumnMenu(null) + * ``` + */ +export const columnMenuAtom = atom<{ + column: ColumnConfig; + anchorEl: PopoverProps["anchorEl"]; +} | null>(null); + +/** + * Opens a table column modal. Set to `null` to close. + * Modals: new column, name change, type change, column settings. + * + * @example Basic usage: + * ``` + * const openColumnModal = useSetAtom(columnModalAtom, globalScope); + * openColumnModal({ type: "...", column }); + * ``` + * + * @example Close: + * ``` + * openColumnModal(null) + * ``` + */ +export const columnModalAtom = atomWithHash<{ + type: "new" | "name" | "type" | "config"; + columnKey?: string; + index?: number; +} | null>("columnModal", null, { replaceState: true }); + +export type TableFiltersPopoverState = { + open: boolean; + defaultQuery?: TableFilter; +}; +/** + * Store table filter popover state. + * Calling the set function resets props. + * + * @example Basic usage: + * ``` + * const openTableFiltersPopover = useSetAtom(tableFiltersPopoverAtom, globalScope); + * openTableFiltersPopover({ query: ... }); + * ``` + * + * @example Close: + * ``` + * openTableFiltersPopover({ open: false }) + * ``` + */ +export const tableFiltersPopoverAtom = atom( + { open: false } as TableFiltersPopoverState, + (_, set, update?: Partial) => { + set(tableFiltersPopoverAtom, { open: true, ...update }); + } +); + +/** Store whether to show hidden fields (override) in side drawer */ +export const sideDrawerShowHiddenFieldsAtom = atomWithStorage( + "__ROWY__SIDE_DRAWER_SHOW_HIDDEN_FIELDS", + false +); + +/** + * Opens a table modal. Set to `null` to close. + * Modals: cloud logs, extensions, webhooks, export. + * + * @example Basic usage: + * ``` + * const openTableModal = useSetAtom(tableModalAtom, globalScope); + * openTableModal("..."); + * ``` + * + * @example Close: + * ``` + * openTableModal(null) + * ``` + */ +export const tableModalAtom = atomWithHash< + "cloudLogs" | "extensions" | "webhooks" | "export" | null +>("tableModal", null, { replaceState: true }); /** Store side drawer open state */ export const sideDrawerOpenAtom = atom(false); @@ -8,3 +104,50 @@ export const selectedCellAtom = atom<{ path: string; columnKey: string; } | null>(null); + +/* +function selectedCellBeforeUnloadHandler(event: BeforeUnloadEvent) { + event.preventDefault(); + return (event.returnValue = + "Are you sure you want to leave? You have selected a cell and will lose your position in the table."); +} +export type SelectedCell = { + path: string; + columnKey: string; +}; + +export const selectedCellAtom = atom< + SelectedCell | null, + SetStateAction +>(null, (get, set, update) => { + window.removeEventListener("beforeunload", selectedCellBeforeUnloadHandler); + if (update !== null) { + console.log("set beforeunload"); + window.addEventListener("beforeunload", selectedCellBeforeUnloadHandler); + } + + set( + selectedCellAtom, + isFunction(update) ? update(get(selectedCellAtom)) : update + ); +}); +*/ + +export type CloudLogFilters = { + type: "webhook" | "functions" | "audit" | "build"; + timeRange: + | { type: "seconds" | "minutes" | "hours" | "days"; value: number } + | { type: "range"; start: Date; end: Date }; + severity?: Array; + webhook?: string[]; + auditRowId?: string; + buildLogExpanded?: number; +}; + +export const cloudLogFiltersAtom = atomWithHash( + "cloudLogFilters", + { + type: "build", + timeRange: { type: "days", value: 7 }, + } +); diff --git a/src/components/ColumnMenu/ColumnMenu.tsx b/src/components/ColumnMenu/ColumnMenu.tsx index 5236d0f2..52455ed5 100644 --- a/src/components/ColumnMenu/ColumnMenu.tsx +++ b/src/components/ColumnMenu/ColumnMenu.tsx @@ -33,9 +33,6 @@ import { userSettingsAtom, updateUserSettingsAtom, confirmDialogAtom, - columnMenuAtom, - columnModalAtom, - tableFiltersPopoverAtom, altPressAtom, } from "@src/atoms/globalScope"; import { @@ -44,6 +41,9 @@ import { updateColumnAtom, deleteColumnAtom, tableOrdersAtom, + columnMenuAtom, + columnModalAtom, + tableFiltersPopoverAtom, } from "@src/atoms/tableScope"; import { FieldType } from "@src/constants/fields"; import { getFieldProp } from "@src/components/fields"; @@ -69,16 +69,16 @@ export interface IMenuModalProps { export default function ColumnMenu() { const [userSettings] = useAtom(userSettingsAtom, globalScope); const [updateUserSettings] = useAtom(updateUserSettingsAtom, globalScope); - const [columnMenu, setColumnMenu] = useAtom(columnMenuAtom, globalScope); - const openColumnModal = useSetAtom(columnModalAtom, globalScope); const confirm = useSetAtom(confirmDialogAtom, globalScope); const [tableId] = useAtom(tableIdAtom, tableScope); const updateColumn = useSetAtom(updateColumnAtom, tableScope); const deleteColumn = useSetAtom(deleteColumnAtom, tableScope); const [tableOrders, setTableOrders] = useAtom(tableOrdersAtom, tableScope); + const [columnMenu, setColumnMenu] = useAtom(columnMenuAtom, tableScope); + const openColumnModal = useSetAtom(columnModalAtom, tableScope); const openTableFiltersPopover = useSetAtom( tableFiltersPopoverAtom, - globalScope + tableScope ); const [altPress] = useAtom(altPressAtom, globalScope); diff --git a/src/components/ColumnModals/ColumnModals.tsx b/src/components/ColumnModals/ColumnModals.tsx index fef7eabd..d7f00489 100644 --- a/src/components/ColumnModals/ColumnModals.tsx +++ b/src/components/ColumnModals/ColumnModals.tsx @@ -5,8 +5,11 @@ import NameChangeModal from "./NameChangeModal"; import TypeChangeModal from "./TypeChangeModal"; import ColumnConfigModal from "./ColumnConfigModal"; -import { globalScope, columnModalAtom } from "@src/atoms/globalScope"; -import { tableScope, tableSchemaAtom } from "@src/atoms/tableScope"; +import { + tableScope, + tableSchemaAtom, + columnModalAtom, +} from "@src/atoms/tableScope"; import { ColumnConfig } from "@src/types/table"; export interface IColumnModalProps { @@ -15,8 +18,8 @@ export interface IColumnModalProps { } export default function ColumnModals() { - const [columnModal, setColumnModal] = useAtom(columnModalAtom, globalScope); const [tableSchema] = useAtom(tableSchemaAtom, tableScope); + const [columnModal, setColumnModal] = useAtom(columnModalAtom, tableScope); if (!columnModal) return null; diff --git a/src/components/ColumnModals/NewColumnModal.tsx b/src/components/ColumnModals/NewColumnModal.tsx index 63377747..68e5f973 100644 --- a/src/components/ColumnModals/NewColumnModal.tsx +++ b/src/components/ColumnModals/NewColumnModal.tsx @@ -8,15 +8,12 @@ import { TextField, Typography, Button } from "@mui/material"; import Modal from "@src/components/Modal"; import FieldsDropdown from "./FieldsDropdown"; -import { - globalScope, - columnModalAtom, - updateTableAtom, -} from "@src/atoms/globalScope"; +import { globalScope, updateTableAtom } from "@src/atoms/globalScope"; import { tableScope, tableSettingsAtom, addColumnAtom, + columnModalAtom, } from "@src/atoms/tableScope"; import { FieldType } from "@src/constants/fields"; import { getFieldProp } from "@src/components/fields"; @@ -32,10 +29,10 @@ const AUDIT_FIELD_TYPES = [ export default function NewColumnModal({ handleClose, }: Pick) { - const [columnModal, setColumnModal] = useAtom(columnModalAtom, globalScope); const [updateTable] = useAtom(updateTableAtom, globalScope); const [tableSettings] = useAtom(tableSettingsAtom, tableScope); const addColumn = useSetAtom(addColumnAtom, tableScope); + const [columnModal, setColumnModal] = useAtom(columnModalAtom, tableScope); const [columnLabel, setColumnLabel] = useState(""); const [fieldKey, setFieldKey] = useState(""); diff --git a/src/components/SideDrawer/SideDrawerFields.tsx b/src/components/SideDrawer/SideDrawerFields.tsx index 1f0838a6..8a12c3c9 100644 --- a/src/components/SideDrawer/SideDrawerFields.tsx +++ b/src/components/SideDrawer/SideDrawerFields.tsx @@ -9,7 +9,6 @@ import { globalScope, userRolesAtom, userSettingsAtom, - sideDrawerShowHiddenFieldsAtom, } from "@src/atoms/globalScope"; import { tableScope, @@ -17,6 +16,7 @@ import { tableSettingsAtom, tableColumnsOrderedAtom, selectedCellAtom, + sideDrawerShowHiddenFieldsAtom, } from "@src/atoms/tableScope"; import { formatSubTableName } from "@src/utils/table"; import { getFieldProp } from "@src/components/fields"; @@ -36,7 +36,7 @@ export default function SideDrawerFields({ row }: ISideDrawerFieldsProps) { const [selectedCell] = useAtom(selectedCellAtom, tableScope); const [showHiddenFields, setShowHiddenFields] = useAtom( sideDrawerShowHiddenFieldsAtom, - globalScope + tableScope ); const userDocHiddenFields = diff --git a/src/components/Table/ColumnHeader/ColumnHeader.tsx b/src/components/Table/ColumnHeader/ColumnHeader.tsx index 0f1c523e..4b00b43c 100644 --- a/src/components/Table/ColumnHeader/ColumnHeader.tsx +++ b/src/components/Table/ColumnHeader/ColumnHeader.tsx @@ -21,10 +21,13 @@ import ColumnHeaderSort from "./ColumnHeaderSort"; import { globalScope, userRolesAtom, - columnMenuAtom, altPressAtom, } from "@src/atoms/globalScope"; -import { tableScope, updateColumnAtom } from "@src/atoms/tableScope"; +import { + tableScope, + updateColumnAtom, + columnMenuAtom, +} from "@src/atoms/tableScope"; import { FieldType } from "@src/constants/fields"; import { getFieldProp } from "@src/components/fields"; import { COLUMN_HEADER_HEIGHT } from "@src/components/Table/Column"; @@ -54,7 +57,7 @@ export default function DraggableHeaderRenderer({ }: IDraggableHeaderRendererProps) { const [userRoles] = useAtom(userRolesAtom, globalScope); const updateColumn = useSetAtom(updateColumnAtom, tableScope); - const openColumnMenu = useSetAtom(columnMenuAtom, globalScope); + const openColumnMenu = useSetAtom(columnMenuAtom, tableScope); const [altPress] = useAtom(altPressAtom, globalScope); const [{ isDragging }, dragRef] = useDrag({ diff --git a/src/components/Table/EmptyTable.tsx b/src/components/Table/EmptyTable.tsx index 6b1136ac..e3033e1a 100644 --- a/src/components/Table/EmptyTable.tsx +++ b/src/components/Table/EmptyTable.tsx @@ -4,11 +4,11 @@ import { Grid, Stack, Typography, Button, Divider } from "@mui/material"; import { Import as ImportIcon } from "@src/assets/icons"; import { AddColumn as AddColumnIcon } from "@src/assets/icons"; -import { globalScope, columnModalAtom } from "@src/atoms/globalScope"; import { tableScope, tableSettingsAtom, tableRowsAtom, + columnModalAtom, } from "@src/atoms/tableScope"; import { APP_BAR_HEIGHT } from "@src/layouts/Navigation"; @@ -18,7 +18,7 @@ import { APP_BAR_HEIGHT } from "@src/layouts/Navigation"; // import ImportCSV from "@src/components/TableToolbar/ImportCsv"; export default function EmptyTable() { - const openColumnModal = useSetAtom(columnModalAtom, globalScope); + const openColumnModal = useSetAtom(columnModalAtom, tableScope); const [tableSettings] = useAtom(tableSettingsAtom, tableScope); const [tableRows] = useAtom(tableRowsAtom, tableScope); diff --git a/src/components/Table/FinalColumnHeader.tsx b/src/components/Table/FinalColumnHeader.tsx index 288d6983..b360af0a 100644 --- a/src/components/Table/FinalColumnHeader.tsx +++ b/src/components/Table/FinalColumnHeader.tsx @@ -4,15 +4,12 @@ import { Column } from "react-data-grid"; import { Button } from "@mui/material"; import { AddColumn as AddColumnIcon } from "@src/assets/icons"; -import { - globalScope, - userRolesAtom, - columnModalAtom, -} from "@src/atoms/globalScope"; +import { globalScope, userRolesAtom } from "@src/atoms/globalScope"; +import { tableScope, columnModalAtom } from "@src/atoms/tableScope"; const FinalColumnHeader: Column["headerRenderer"] = ({ column }) => { const [userRoles] = useAtom(userRolesAtom, globalScope); - const openColumnModal = useSetAtom(columnModalAtom, globalScope); + const openColumnModal = useSetAtom(columnModalAtom, tableScope); if (!userRoles.includes("ADMIN")) return null; diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx index d411dacb..9eba005c 100644 --- a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx +++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogs.tsx @@ -23,8 +23,7 @@ import CloudLogSubheader from "@src/components/TableToolbar/CloudLogs/CloudLogSu import { DATE_TIME_FORMAT } from "@src/constants/dates"; import useBuildLogs from "./useBuildLogs"; -import { cloudLogFiltersAtom } from "@src/components/TableToolbar/CloudLogs/utils"; -import { globalScope } from "@src/atoms/globalScope"; +import { tableScope, cloudLogFiltersAtom } from "@src/atoms/tableScope"; const Accordion = styled(MuiAccordion)(({ theme }) => ({ background: "none", @@ -108,7 +107,7 @@ export default function BuildLogs(props: Partial) { const { logs, latestStatus } = useBuildLogs(); const [cloudLogFilters, setCloudLogFilters] = useAtom( cloudLogFiltersAtom, - globalScope + tableScope ); if (!latestStatus) diff --git a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx index a2589291..9cc98650 100644 --- a/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx +++ b/src/components/TableToolbar/CloudLogs/BuildLogs/BuildLogsSnack.tsx @@ -14,8 +14,11 @@ import CircularProgressOptical from "@src/components/CircularProgressOptical"; import { isTargetInsideBox } from "@src/utils/ui"; import { useSnackLogContext } from "@src/contexts/SnackLogContext"; import useBuildLogs from "./useBuildLogs"; -import { globalScope, tableModalAtom } from "@src/atoms/globalScope"; -import { cloudLogFiltersAtom } from "@src/components/TableToolbar/CloudLogs/utils"; +import { + tableScope, + tableModalAtom, + cloudLogFiltersAtom, +} from "@src/atoms/tableScope"; export interface IBuildLogsSnackProps { onClose: () => void; @@ -28,8 +31,8 @@ export default function BuildLogsSnack({ }: IBuildLogsSnackProps) { const snackLogContext = useSnackLogContext(); const { latestLog } = useBuildLogs(); - const setModal = useSetAtom(tableModalAtom, globalScope); - const setCloudLogFilters = useSetAtom(cloudLogFiltersAtom, globalScope); + const setModal = useSetAtom(tableModalAtom, tableScope); + const setCloudLogFilters = useSetAtom(cloudLogFiltersAtom, tableScope); const latestActiveLog = latestLog?.startTimeStamp > snackLogContext.latestBuildTimestamp - 5000 || latestLog?.startTimeStamp > snackLogContext.latestBuildTimestamp + 5000 diff --git a/src/components/TableToolbar/CloudLogs/CloudLogs.tsx b/src/components/TableToolbar/CloudLogs/CloudLogs.tsx index 8c7c6aee..0b215329 100644 --- a/src/components/TableToolbar/CloudLogs/CloudLogs.tsx +++ b/src/components/TableToolbar/CloudLogs/CloudLogs.tsx @@ -8,13 +8,13 @@ import { globalScope, projectSettingsAtom, rowyRunModalAtom, - tableModalAtom, } from "@src/atoms/globalScope"; +import { tableScope, tableModalAtom } from "@src/atoms/tableScope"; export default function CloudLogs() { const [projectSettings] = useAtom(projectSettingsAtom, globalScope); const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); - const [modal, setModal] = useAtom(tableModalAtom, globalScope); + const [modal, setModal] = useAtom(tableModalAtom, tableScope); const open = modal === "cloudLogs"; const setOpen = (open: boolean) => setModal(open ? "cloudLogs" : null); diff --git a/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx b/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx index 8862da21..fc60044a 100644 --- a/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx +++ b/src/components/TableToolbar/CloudLogs/CloudLogsModal.tsx @@ -34,8 +34,9 @@ import { tableScope, tableSettingsAtom, tableSchemaAtom, + cloudLogFiltersAtom, } from "@src/atoms/tableScope"; -import { cloudLogFiltersAtom, cloudLogFetcher } from "./utils"; +import { cloudLogFetcher } from "./utils"; export default function CloudLogsModal(props: IModalProps) { const [projectId] = useAtom(projectIdAtom, globalScope); @@ -48,7 +49,7 @@ export default function CloudLogsModal(props: IModalProps) { const [tableSchema] = useAtom(tableSchemaAtom, tableScope); const [cloudLogFilters, setCloudLogFilters] = useAtom( cloudLogFiltersAtom, - globalScope + tableScope ); const { data, mutate, isValidating } = useSWR( diff --git a/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx b/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx index 34693791..b6da74a8 100644 --- a/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx +++ b/src/components/TableToolbar/CloudLogs/TimeRangeSelect.tsx @@ -5,7 +5,7 @@ import { MenuItem, } from "@mui/material"; -import type { CloudLogFilters } from "./utils"; +import type { CloudLogFilters } from "@src/atoms/tableScope"; export interface ITimeRangeSelectProps extends Partial> { diff --git a/src/components/TableToolbar/CloudLogs/utils.ts b/src/components/TableToolbar/CloudLogs/utils.ts index 2c1cc112..895a7295 100644 --- a/src/components/TableToolbar/CloudLogs/utils.ts +++ b/src/components/TableToolbar/CloudLogs/utils.ts @@ -1,27 +1,6 @@ -import { atomWithHash } from "jotai/utils"; import { sub } from "date-fns"; - import { rowyRunAtom } from "@src/atoms/globalScope"; -import { SEVERITY_LEVELS } from "./CloudLogSeverityIcon"; - -export type CloudLogFilters = { - type: "webhook" | "functions" | "audit" | "build"; - timeRange: - | { type: "seconds" | "minutes" | "hours" | "days"; value: number } - | { type: "range"; start: Date; end: Date }; - severity?: Array; - webhook?: string[]; - auditRowId?: string; - buildLogExpanded?: number; -}; - -export const cloudLogFiltersAtom = atomWithHash( - "cloudLogFilters", - { - type: "build", - timeRange: { type: "days", value: 7 }, - } -); +import { CloudLogFilters } from "@src/atoms/tableScope"; export const cloudLogFetcher = ( endpointRoot: string, diff --git a/src/components/TableToolbar/Export/Export.tsx b/src/components/TableToolbar/Export/Export.tsx index fb4c8367..d8a2619e 100644 --- a/src/components/TableToolbar/Export/Export.tsx +++ b/src/components/TableToolbar/Export/Export.tsx @@ -22,12 +22,13 @@ import Modal from "@src/components/Modal"; import ExportDetails from "./ModalContentsExport"; import DownloadDetails from "./ModalContentsDownload"; -import { globalScope, tableModalAtom } from "@src/atoms/globalScope"; +import { globalScope } from "@src/atoms/globalScope"; import { tableScope, tableSettingsAtom, tableFiltersAtom, tableOrdersAtom, + tableModalAtom, } from "@src/atoms/tableScope"; import { firebaseDbAtom } from "@src/sources/ProjectSourceFirebase"; import { TableRow } from "@src/types/table"; @@ -39,7 +40,7 @@ export interface IExportModalContentsProps { // TODO: Generalize and remove Firestore dependencies export default function Export() { - const [modal, setModal] = useAtom(tableModalAtom, globalScope); + const [modal, setModal] = useAtom(tableModalAtom, tableScope); const open = modal === "export"; const setOpen = (open: boolean) => setModal(open ? "export" : null); const [mode, setMode] = useState<"Export" | "Download">("Export"); diff --git a/src/components/TableToolbar/Extensions/Extensions.tsx b/src/components/TableToolbar/Extensions/Extensions.tsx index acbdd7e0..c4b4881b 100644 --- a/src/components/TableToolbar/Extensions/Extensions.tsx +++ b/src/components/TableToolbar/Extensions/Extensions.tsx @@ -17,13 +17,13 @@ import { rowyRunAtom, rowyRunModalAtom, confirmDialogAtom, - tableModalAtom, } from "@src/atoms/globalScope"; import { tableScope, tableSettingsAtom, tableSchemaAtom, updateTableSchemaAtom, + tableModalAtom, } from "@src/atoms/tableScope"; import { useSnackLogContext } from "@src/contexts/SnackLogContext"; @@ -38,10 +38,10 @@ export default function Extensions() { const [rowyRun] = useAtom(rowyRunAtom, globalScope); const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); const confirm = useSetAtom(confirmDialogAtom, globalScope); - const [modal, setModal] = useAtom(tableModalAtom, globalScope); const [tableSettings] = useAtom(tableSettingsAtom, tableScope); const [tableSchema] = useAtom(tableSchemaAtom, tableScope); const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope); + const [modal, setModal] = useAtom(tableModalAtom, tableScope); const currentExtensionObjects = (tableSchema.extensionObjects ?? []) as IExtension[]; diff --git a/src/components/TableToolbar/Filters/Filters.tsx b/src/components/TableToolbar/Filters/Filters.tsx index f7ca3267..87b63af9 100644 --- a/src/components/TableToolbar/Filters/Filters.tsx +++ b/src/components/TableToolbar/Filters/Filters.tsx @@ -25,7 +25,6 @@ import { userSettingsAtom, updateUserSettingsAtom, userRolesAtom, - tableFiltersPopoverAtom, } from "@src/atoms/globalScope"; import { tableScope, @@ -35,6 +34,7 @@ import { tableFiltersAtom, tableOrdersAtom, updateTableSchemaAtom, + tableFiltersPopoverAtom, } from "@src/atoms/tableScope"; import { useFilterInputs, INITIAL_QUERY } from "./useFilterInputs"; import { analytics, logEvent } from "@src/analytics"; @@ -61,7 +61,7 @@ export default function Filters() { const [localFilters, setLocalFilters] = useAtom(tableFiltersAtom, tableScope); const [, setTableOrders] = useAtom(tableOrdersAtom, tableScope); const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope); - const [{ defaultQuery }] = useAtom(tableFiltersPopoverAtom, globalScope); + const [{ defaultQuery }] = useAtom(tableFiltersPopoverAtom, tableScope); const tableFilterInputs = useFilterInputs(tableColumnsOrdered); const setTableQuery = tableFilterInputs.setQuery; diff --git a/src/components/TableToolbar/Filters/FiltersPopover.tsx b/src/components/TableToolbar/Filters/FiltersPopover.tsx index 6f2598c2..af349cc9 100644 --- a/src/components/TableToolbar/Filters/FiltersPopover.tsx +++ b/src/components/TableToolbar/Filters/FiltersPopover.tsx @@ -6,7 +6,7 @@ import FilterIcon from "@mui/icons-material/FilterList"; import ButtonWithStatus from "@src/components/ButtonWithStatus"; -import { globalScope, tableFiltersPopoverAtom } from "@src/atoms/globalScope"; +import { tableScope, tableFiltersPopoverAtom } from "@src/atoms/tableScope"; import type { TableFilter } from "@src/types/table"; import type { useFilterInputs } from "./useFilterInputs"; @@ -32,7 +32,7 @@ export default function FiltersPopover({ }: IFiltersPopoverProps) { const [{ open }, setTableFiltersPopoverState] = useAtom( tableFiltersPopoverAtom, - globalScope + tableScope ); const anchorEl = useRef(null); diff --git a/src/components/TableToolbar/Webhooks/WebhookList.tsx b/src/components/TableToolbar/Webhooks/WebhookList.tsx index 54ea97ad..95d5671d 100644 --- a/src/components/TableToolbar/Webhooks/WebhookList.tsx +++ b/src/components/TableToolbar/Webhooks/WebhookList.tsx @@ -22,13 +22,13 @@ import EmptyState from "@src/components/EmptyState"; import { webhookNames, IWebhook } from "./utils"; import { DATE_TIME_FORMAT } from "@src/constants/dates"; +import { globalScope, projectSettingsAtom } from "@src/atoms/globalScope"; import { - globalScope, - projectSettingsAtom, + tableScope, + tableSettingsAtom, tableModalAtom, -} from "@src/atoms/globalScope"; -import { tableScope, tableSettingsAtom } from "@src/atoms/tableScope"; -import { cloudLogFiltersAtom } from "@src/components/TableToolbar/CloudLogs/utils"; + cloudLogFiltersAtom, +} from "@src/atoms/tableScope"; export interface IWebhookListProps { webhooks: IWebhook[]; @@ -44,9 +44,9 @@ export default function WebhookList({ handleDelete, }: IWebhookListProps) { const [projectSettings] = useAtom(projectSettingsAtom, globalScope); - const setModal = useSetAtom(tableModalAtom, globalScope); const [tableSettings] = useAtom(tableSettingsAtom, tableScope); - const setCloudLogFilters = useSetAtom(cloudLogFiltersAtom, globalScope); + const setModal = useSetAtom(tableModalAtom, tableScope); + const setCloudLogFilters = useSetAtom(cloudLogFiltersAtom, tableScope); const baseUrl = `${projectSettings.services?.hooks}/wh/${tableSettings.collection}/`; diff --git a/src/components/TableToolbar/Webhooks/Webhooks.tsx b/src/components/TableToolbar/Webhooks/Webhooks.tsx index 2d2d24f1..48566b1b 100644 --- a/src/components/TableToolbar/Webhooks/Webhooks.tsx +++ b/src/components/TableToolbar/Webhooks/Webhooks.tsx @@ -17,13 +17,13 @@ import { compatibleRowyRunVersionAtom, rowyRunModalAtom, confirmDialogAtom, - tableModalAtom, } from "@src/atoms/globalScope"; import { tableScope, tableSettingsAtom, tableSchemaAtom, updateTableSchemaAtom, + tableModalAtom, } from "@src/atoms/tableScope"; import { emptyWebhookObject, IWebhook, WebhookType } from "./utils"; import { runRoutes } from "@src/constants/runRoutes"; @@ -39,10 +39,10 @@ export default function Webhooks() { ); const openRowyRunModal = useSetAtom(rowyRunModalAtom, globalScope); const confirm = useSetAtom(confirmDialogAtom, globalScope); - const [modal, setModal] = useAtom(tableModalAtom, globalScope); const [tableSettings] = useAtom(tableSettingsAtom, tableScope); const [tableSchema] = useAtom(tableSchemaAtom, tableScope); const [updateTableSchema] = useAtom(updateTableSchemaAtom, tableScope); + const [modal, setModal] = useAtom(tableModalAtom, tableScope); const { enqueueSnackbar } = useSnackbar(); const currentWebhooks = (tableSchema.webhooks ?? []) as IWebhook[]; diff --git a/src/layouts/Navigation/NavTableSection.tsx b/src/layouts/Navigation/NavTableSection.tsx index 408577ab..b44bba23 100644 --- a/src/layouts/Navigation/NavTableSection.tsx +++ b/src/layouts/Navigation/NavTableSection.tsx @@ -46,6 +46,7 @@ export default function NavTableSection({ theme.transitions.create("transform"), }} diff --git a/test.js b/test.js deleted file mode 100644 index bb8fe795..00000000 --- a/test.js +++ /dev/null @@ -1,4 +0,0 @@ -const values = [true, false, undefined, null, "string"]; -const randIndx = Math.floor(Math.random() * 6); -values.push(Math.random() * 100); -console.log(values, values[randIndx], randIndx); diff --git a/yarn.lock b/yarn.lock index dab0d8c5..a2bf8304 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8325,10 +8325,10 @@ jju@~1.4.0: resolved "https://registry.yarnpkg.com/jju/-/jju-1.4.0.tgz#a3abe2718af241a2b2904f84a625970f389ae32a" integrity sha1-o6vicYryQaKykE+EpiWXDzia4yo= -jotai@^1.6.5: - version "1.6.5" - resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.6.5.tgz#989efe63dc65beea23b3a5eab56f689d78e38070" - integrity sha512-B+DGV5ALIkIeyA1Bi9yBpdGmcWkmDS/p8C1XFYx9jFBs+lkeOdu0WAozAPCG4Qq1EcQ68vF+07HmPYFN5kf9OQ== +jotai@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.7.1.tgz#a8ed7e05dc4ea0d6692f1301126340a24ee1350c" + integrity sha512-Ucighxm0GwjvMpnLn7//CrHFSgLoL7LxHhXm7ofUNIktsRE4TAAhzrwsBb0LjJ0DuBJqQEJq9/jbHFfjO0ylYQ== js-base64@^2.4.3: version "2.6.4"