From eb4bdea89def840ccb214767ca09b76b549dce30 Mon Sep 17 00:00:00 2001 From: Krishna Gehlot Date: Tue, 25 Aug 2026 14:24:36 +0530 Subject: [PATCH] Revert "[UI] Add DashboardLayout and WidgetPicker components" --- .../DashboardLayout/DashboardLayout.tsx | 120 ------------- src/custom/DashboardLayout/index.tsx | 2 - src/custom/DashboardWidgets/PlainCard.tsx | 43 +++-- src/custom/ResponsiveDataTable.tsx | 20 +-- .../WidgetEmptyState/WidgetEmptyState.tsx | 87 ---------- src/custom/WidgetEmptyState/index.tsx | 2 - src/custom/WidgetPicker/WidgetPicker.tsx | 159 ------------------ src/custom/WidgetPicker/index.tsx | 1 - src/custom/index.ts | 3 - src/index.tsx | 19 +-- 10 files changed, 25 insertions(+), 431 deletions(-) delete mode 100644 src/custom/DashboardLayout/DashboardLayout.tsx delete mode 100644 src/custom/DashboardLayout/index.tsx delete mode 100644 src/custom/WidgetEmptyState/WidgetEmptyState.tsx delete mode 100644 src/custom/WidgetEmptyState/index.tsx delete mode 100644 src/custom/WidgetPicker/WidgetPicker.tsx delete mode 100644 src/custom/WidgetPicker/index.tsx diff --git a/src/custom/DashboardLayout/DashboardLayout.tsx b/src/custom/DashboardLayout/DashboardLayout.tsx deleted file mode 100644 index acf80415f..000000000 --- a/src/custom/DashboardLayout/DashboardLayout.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; -import { Box, Fab } from '../../base'; -import { AddIcon } from '../../icons/Add'; -import { useTheme, useMediaQuery } from '../../theme'; -import { BottomSheet } from '../BottomSheet'; - -export interface DashboardLayoutProps { - /** The main dashboard content (typically the React-Grid-Layout) */ - children: React.ReactNode; - - /** Whether Edit Mode is active (controls sidebar visibility). When this - * transitions from false → true the mobile sheet auto-opens. */ - isSidebarOpen: boolean; - - /** The content to render inside the sidebar (e.g., Widget Gallery) */ - sidebarContent: React.ReactNode; - - /** Accessible title for the mobile bottom sheet (used as aria-labelledby on the Dialog). - * Defaults to 'Widget Picker'. */ - sidebarTitle?: string; - - /** Optional custom width for the sidebar. Defaults to responsive width. */ - sidebarWidth?: string | number | Partial>; - - /** Optional sticky top offset for the sidebar (useful if page has a top navbar) */ - sidebarTopOffset?: string | number; - - /** Optional fixed height for the sticky sidebar. Defaults to 100vh */ - sidebarHeight?: string | number; -} - -export const DashboardLayout: React.FC = ({ - children, - isSidebarOpen, - sidebarContent, - sidebarTitle = 'Widget Picker', - sidebarWidth = { xs: '100%', md: '350px' }, - sidebarTopOffset = '0', - sidebarHeight = '100vh' -}) => { - const theme = useTheme(); - // We use the 'md' breakpoint (900px default) to switch between mobile and desktop layout - const isMobile = useMediaQuery(theme.breakpoints.down('md')); - - // isSheetVisible is independently owned by DashboardLayout: - // - resets to true whenever Edit Mode (isSidebarOpen) transitions OFF → ON - // - can be set to false by the user dismissing the sheet (FAB appears instead) - // - set to false when Edit Mode turns OFF - // This two-dimension model prevents the sheet from re-opening on every - // isSidebarOpen change after the user has intentionally minimized it. - const [isSheetVisible, setIsSheetVisible] = useState(isSidebarOpen); - const prevIsSidebarOpen = useRef(isSidebarOpen); - - useEffect(() => { - if (isSidebarOpen && !prevIsSidebarOpen.current) { - // Edit Mode just turned ON → pop the sheet open - setIsSheetVisible(true); - } - if (!isSidebarOpen) { - // Edit Mode turned OFF → close the sheet and hide the FAB - setIsSheetVisible(false); - } - prevIsSidebarOpen.current = isSidebarOpen; - }, [isSidebarOpen]); - - return ( - - - {children} - - - {isSidebarOpen && isMobile && ( - <> - setIsSheetVisible(false)} - title={sidebarTitle} - maxHeight="50vh" - > - {sidebarContent} - - - {/* FAB appears when Edit Mode is active but the sheet has been minimized, - letting users rearrange the dashboard and pull the picker back up. */} - {!isSheetVisible && ( - setIsSheetVisible(true)} - sx={(fabTheme) => ({ - position: 'fixed', - bottom: 24, - right: 24, - zIndex: fabTheme.zIndex.drawer, - })} - > - - - )} - - )} - - {isSidebarOpen && !isMobile && ( - - {sidebarContent} - - )} - - ); -}; diff --git a/src/custom/DashboardLayout/index.tsx b/src/custom/DashboardLayout/index.tsx deleted file mode 100644 index 552a08c05..000000000 --- a/src/custom/DashboardLayout/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { DashboardLayout } from './DashboardLayout'; -export type { DashboardLayoutProps } from './DashboardLayout'; diff --git a/src/custom/DashboardWidgets/PlainCard.tsx b/src/custom/DashboardWidgets/PlainCard.tsx index 8eb2b38a4..9eeddd8c1 100644 --- a/src/custom/DashboardWidgets/PlainCard.tsx +++ b/src/custom/DashboardWidgets/PlainCard.tsx @@ -1,7 +1,6 @@ import { Box, Card, CardContent, Link, Typography } from '../../base'; import { OpenInNewIcon } from '../../icons'; import { styled } from '../../theme'; -import { WidgetEmptyState } from '../WidgetEmptyState'; const StyledCard = styled(Card)(({ theme }) => ({ height: '100%', @@ -73,31 +72,27 @@ export const PlainCard = ({ title, icon, resources }: PlainCardProps): JSX.Eleme - {resources.length === 0 ? ( - - ) : ( - - {resources.map((item) => ( - - {item.icon} + + {resources.map((item) => ( + + {item.icon} - - {item.name} - + + {item.name} + - {item.external && ( - - - - )} - - ))} - - )} + {item.external && ( + + + + )} + + ))} + diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx index 54eb93311..9678cf7d4 100644 --- a/src/custom/ResponsiveDataTable.tsx +++ b/src/custom/ResponsiveDataTable.tsx @@ -1,4 +1,4 @@ -import MUIDataTable, { MUIDataTableColumn, MUIDataTableOptions } from '@sistent/mui-datatables'; +import MUIDataTable, { MUIDataTableColumn } from '@sistent/mui-datatables'; import React, { useCallback } from 'react'; import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base'; import { ShareIcon } from '../icons'; @@ -8,7 +8,6 @@ import { styled, useTheme } from './../theme'; import { ColView } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx'; import { TableAction } from './TableActions'; import { TooltipIcon } from './TooltipIconButton'; -import { WidgetEmptyState } from './WidgetEmptyState'; export const IconWrapper = styled('div', { shouldForwardProp: (prop) => prop !== 'disabled' @@ -142,7 +141,7 @@ export interface Column { export interface ResponsiveDataTableProps { data: string[][]; columns: MUIDataTableColumn[]; - options?: MUIDataTableOptions; + options?: object; tableCols?: MUIDataTableColumn[]; updateCols?: ((columns: MUIDataTableColumn[]) => void) | undefined; columnVisibility: Record | undefined; @@ -159,23 +158,8 @@ const ResponsiveDataTable = ({ rowsPerPageOptions = [10, 25, 50, 100], ...props }: ResponsiveDataTableProps): JSX.Element => { - const textLabels = options?.textLabels || {}; - const bodyTextLabels = textLabels.body || {}; - - const noMatchMessage = - typeof bodyTextLabels.noMatch === 'string' - ? bodyTextLabels.noMatch - : 'No data available'; - const updatedOptions = { ...options, - textLabels: { - ...textLabels, - body: { - ...bodyTextLabels, - noMatch: - } - }, print: false, download: false, search: false, diff --git a/src/custom/WidgetEmptyState/WidgetEmptyState.tsx b/src/custom/WidgetEmptyState/WidgetEmptyState.tsx deleted file mode 100644 index a2098ce61..000000000 --- a/src/custom/WidgetEmptyState/WidgetEmptyState.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import { Box, Typography, Button, Stack } from '../../base'; -import { useTheme } from '../../theme'; - -export interface WidgetEmptyStateProps { - /** The message to display when no data is available */ - message?: string; - - /** Optional icon to display above the message */ - icon?: React.ReactNode; - - /** Optional action button configuration */ - action?: { - label: string; - onClick: () => void; - }; -} - -export const WidgetEmptyState: React.FC = ({ - message = 'No data available', - icon, - action, -}) => { - const theme = useTheme(); - - return ( - // Outer container is a plain presentational box — role="status" is scoped - // only to the message Typography below so interactive descendants (icon, Button) - // are not degraded by the live-region semantics. - - - {icon && ( - - {icon} - - )} - {/* role="status" + aria-live scoped only to the message text, not the - interactive siblings — per ARIA spec, live regions must not contain - interactive elements or AT may hide/degrade their semantics. */} - - {message} - - {action && ( - - )} - - - ); -}; diff --git a/src/custom/WidgetEmptyState/index.tsx b/src/custom/WidgetEmptyState/index.tsx deleted file mode 100644 index 334bd8b95..000000000 --- a/src/custom/WidgetEmptyState/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export { WidgetEmptyState } from './WidgetEmptyState'; -export type { WidgetEmptyStateProps } from './WidgetEmptyState'; diff --git a/src/custom/WidgetPicker/WidgetPicker.tsx b/src/custom/WidgetPicker/WidgetPicker.tsx deleted file mode 100644 index 15aca9415..000000000 --- a/src/custom/WidgetPicker/WidgetPicker.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React from 'react'; -import { Box, IconButton, Stack, Typography } from '../../base'; -import { AddIcon, CloseIcon } from '../../icons'; -import { useTheme } from '../../theme'; -import type { SxProps, Theme } from '@mui/material'; - -export interface WidgetItem { - key: string; - title: string; - thumbnail?: string; - [key: string]: unknown; // Allow passing extra widget properties -} - -export interface WidgetPickerProps { - /** The list of widgets available to add */ - widgetsToAdd: WidgetItem[]; - - /** Callback when a widget is clicked to be added */ - onAddWidget: (widget: Omit, key: string) => void; - - /** Optional callback to close the picker (renders a Close icon if provided) */ - onClose?: () => void; - - /** Custom background color for the header. Defaults to theme.palette.background.default */ - headerBackgroundColor?: string; - - /** Custom text color for the header. Defaults to theme.palette.text.primary */ - headerTextColor?: string; - - /** Custom styles for the outer container (e.g. for custom box shadows or borders) */ - containerSx?: SxProps; -} - -export const WidgetPicker: React.FC = ({ - widgetsToAdd, - onAddWidget, - onClose, - headerBackgroundColor, - headerTextColor, - containerSx = {}, -}) => { - const theme = useTheme(); - - return ( - - - - Widgets - - {onClose && ( - - - - )} - - - - {widgetsToAdd.length === 0 && ( - - All widgets added to the layout. - - )} - - {widgetsToAdd.map(({ key, ...widget }) => ( - - - {widget.title} - onAddWidget(widget, key)} - > - - - - {widget.thumbnail && ( - {widget.title} - )} - - ))} - - - ); -}; diff --git a/src/custom/WidgetPicker/index.tsx b/src/custom/WidgetPicker/index.tsx deleted file mode 100644 index c33ea9de1..000000000 --- a/src/custom/WidgetPicker/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { WidgetPicker, type WidgetPickerProps, type WidgetItem } from './WidgetPicker'; diff --git a/src/custom/index.ts b/src/custom/index.ts index bfc9cd185..3f35c351e 100644 --- a/src/custom/index.ts +++ b/src/custom/index.ts @@ -1,10 +1,7 @@ // Export all custom components export * from './CustomTooltip'; -export * from './DashboardLayout'; export * from './HelperTextPopover'; export * from './Markdown'; export * from './Modal'; export * from './RJSFFormWrapper'; export * from './StyledAccordion'; -export * from './WidgetPicker'; -export * from './WidgetEmptyState'; diff --git a/src/index.tsx b/src/index.tsx index d104a9220..56e20a4f8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -32,11 +32,6 @@ export { type DangerConfirmationCheckbox, type DangerConfirmationModalProps } from './custom/DangerConfirmationModal'; - -export { - DashboardLayout, - type DashboardLayoutProps -} from './custom/DashboardLayout'; // Same nested-barrel dts-drop quirk as FeedbackButton above: UniversalFilter // (and its FilterColumn / UniversalFilterProps types) reaches the entry only // through `export * from './custom'`, so rollup-plugin-dts drops it from the @@ -98,16 +93,10 @@ export { } from './custom/permissions'; export { - WidgetPicker, - type WidgetPickerProps, - type WidgetItem -} from './custom/WidgetPicker'; - -export { - WidgetEmptyState, - type WidgetEmptyStateProps -} from './custom/WidgetEmptyState'; - + useAccessibleOrgs, + type UseAccessibleOrgsOptions, + type TriggerGetKeys +} from './custom/useAccessibleOrgs'; export { BottomSheet, type BottomSheetProps } from './custom/BottomSheet'; export { ActionButton, type ActionButtonProps, type Option } from './custom/ActionButton';