= (props) => (
+
+
+
+
+ {props.body}
+
+
+
+
+ {props.isExternal ? (
+
+ {props.linkTitle}
+
+
+
+
+ ) : (
+
+ {props.linkTitle}
+
+
+
+
+ )}
+
+
+);
+
+// Example widget content components
+const ExampleWidget1 = () => (
+
+);
+
+const ExampleWidget2 = () => (
+
+);
+
+const ExampleWidget3 = () => (
+
+);
+
+// Define widget mapping
+const widgetMapping: WidgetMapping = {
+ 'example-widget-1': {
+ defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Example Widget',
+ icon: ,
+ headerLink: {
+ title: 'View details',
+ href: '#'
+ }
+ },
+ renderWidget: () =>
+ },
+ 'chart-widget': {
+ defaults: { w: 2, h: 4, maxH: 8, minH: 3 },
+ config: {
+ title: 'Chart Widget',
+ icon:
+ },
+ renderWidget: () =>
+ },
+ 'notifications-widget': {
+ defaults: { w: 1, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Notification Widget',
+ icon:
+ },
+ renderWidget: () =>
+ }
+};
+
+// Define initial template
+const initialTemplate: ExtendedTemplateConfig = {
+ xl: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 2, y: 0, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ lg: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ md: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ sm: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 1, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 1, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ]
+};
+
+export const BasicExample: React.FunctionComponent = () => {
+ const [template, setTemplate] = React.useState(initialTemplate);
+
+ return (
+
+ {
+ setTemplate(newTemplate);
+ }}
+ documentationLink="https://www.patternfly.org"
+ initialDrawerOpen={true}
+ />
+
+ );
+};
diff --git a/packages/module/patternfly-docs/content/examples/LockedLayoutExample.tsx b/packages/module/patternfly-docs/content/examples/LockedLayoutExample.tsx
new file mode 100644
index 0000000..1df063d
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/LockedLayoutExample.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import WidgetLayout from '../../../src/WidgetLayout/WidgetLayout';
+import { WidgetMapping, ExtendedTemplateConfig } from '../../../src/WidgetLayout/types';
+import { CubeIcon, ChartLineIcon, ExternalLinkAltIcon, ArrowRightIcon } from '@patternfly/react-icons';
+import { Card, CardBody, CardFooter, Content, Icon } from '@patternfly/react-core';
+
+interface SimpleWidgetProps {
+ id: number;
+ body: string;
+ linkTitle: string;
+ url: string;
+ isExternal?: boolean;
+}
+
+const CardExample: React.FunctionComponent = (props) => (
+
+
+
+
+ {props.body}
+
+
+
+
+ {props.isExternal ? (
+
+ {props.linkTitle}
+
+
+
+
+ ) : (
+
+ {props.linkTitle}
+
+
+
+
+ )}
+
+
+);
+
+// Example widget content components
+const ExampleWidget1 = () => (
+
+);
+
+const ExampleWidget2 = () => (
+
+);
+
+// Define widget mapping
+const widgetMapping: WidgetMapping = {
+ 'example-widget-1': {
+ defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Example Widget',
+ icon: ,
+ headerLink: {
+ title: 'View details',
+ href: '#'
+ }
+ },
+ renderWidget: () =>
+ },
+ 'chart-widget': {
+ defaults: { w: 2, h: 4, maxH: 8, minH: 3 },
+ config: {
+ title: 'Chart Widget',
+ icon:
+ },
+ renderWidget: () =>
+ }
+};
+
+// Define initial template with locked widgets
+const initialTemplate: ExtendedTemplateConfig = {
+ xl: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget', static: true },
+ { i: 'chart-widget#1', x: 2, y: 0, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget', static: true }
+ ],
+ lg: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget', static: true },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget', static: true }
+ ],
+ md: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget', static: true },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget', static: true }
+ ],
+ sm: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 1, h: 3, widgetType: 'example-widget-1', title: 'Example Widget', static: true },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 1, h: 4, widgetType: 'chart-widget', title: 'Chart Widget', static: true }
+ ]
+};
+
+export const LockedLayoutExample: React.FunctionComponent = () => (
+
+
+
+);
+
diff --git a/packages/module/patternfly-docs/content/examples/WithoutDrawerExample.tsx b/packages/module/patternfly-docs/content/examples/WithoutDrawerExample.tsx
new file mode 100644
index 0000000..a6d96b4
--- /dev/null
+++ b/packages/module/patternfly-docs/content/examples/WithoutDrawerExample.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import WidgetLayout from '../../../src/WidgetLayout/WidgetLayout';
+import { WidgetMapping, ExtendedTemplateConfig } from '../../../src/WidgetLayout/types';
+import { CubeIcon, ChartLineIcon, BellIcon, ExternalLinkAltIcon, ArrowRightIcon } from '@patternfly/react-icons';
+import { Card, CardBody, CardFooter, Content, Icon } from '@patternfly/react-core';
+
+interface SimpleWidgetProps {
+ id: number;
+ body: string;
+ linkTitle: string;
+ url: string;
+ isExternal?: boolean;
+}
+
+const CardExample: React.FunctionComponent = (props) => (
+
+
+
+
+ {props.body}
+
+
+
+
+ {props.isExternal ? (
+
+ {props.linkTitle}
+
+
+
+
+ ) : (
+
+ {props.linkTitle}
+
+
+
+
+ )}
+
+
+);
+
+// Example widget content components
+const ExampleWidget1 = () => (
+
+);
+
+const ExampleWidget2 = () => (
+
+);
+
+const ExampleWidget3 = () => (
+
+);
+
+// Define widget mapping
+const widgetMapping: WidgetMapping = {
+ 'example-widget-1': {
+ defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Example Widget',
+ icon: ,
+ headerLink: {
+ title: 'View details',
+ href: '#'
+ }
+ },
+ renderWidget: () =>
+ },
+ 'chart-widget': {
+ defaults: { w: 2, h: 4, maxH: 8, minH: 3 },
+ config: {
+ title: 'Chart Widget',
+ icon:
+ },
+ renderWidget: () =>
+ },
+ 'notifications-widget': {
+ defaults: { w: 1, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Notification Widget',
+ icon:
+ },
+ renderWidget: () =>
+ }
+};
+
+// Define initial template
+const initialTemplate: ExtendedTemplateConfig = {
+ xl: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 2, y: 0, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ lg: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ md: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 2, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ],
+ sm: [
+ { i: 'example-widget-1#1', x: 0, y: 0, w: 1, h: 3, widgetType: 'example-widget-1', title: 'Example Widget' },
+ { i: 'chart-widget#1', x: 0, y: 3, w: 1, h: 4, widgetType: 'chart-widget', title: 'Chart Widget' }
+ ]
+};
+
+export const WithoutDrawerExample: React.FunctionComponent = () => (
+
+ {
+ // Template changes can be saved here
+ }}
+ />
+
+);
+
diff --git a/packages/module/patternfly-docs/content/examples/basic.md b/packages/module/patternfly-docs/content/examples/basic.md
index 34a3ab6..4adff32 100644
--- a/packages/module/patternfly-docs/content/examples/basic.md
+++ b/packages/module/patternfly-docs/content/examples/basic.md
@@ -9,21 +9,80 @@ id: Widgetized dashboard
source: react
# If you use typescript, the name of the interface to display props for
# These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['ExtendedButton']
----
+propComponents: ['WidgetLayout', 'GridLayout', 'WidgetDrawer']
+sortValue: 1
+sourceLink: https://github.com/patternfly/widgetized-dashboard
+---
+
+import { FunctionComponent, useState } from 'react';
+import { ExternalLinkAltIcon, ArrowRightIcon, CubeIcon, ChartLineIcon, BellIcon } from '@patternfly/react-icons';
+import { Card, CardBody, CardFooter, Content, Icon } from '@patternfly/react-core';
+import { WidgetLayout, GridLayout, WidgetDrawer } from '@patternfly/widgetized-dashboard';
+
+### Basic usage
+
+The WidgetLayout component provides a complete drag-and-drop dashboard experience with a widget drawer for adding and removing widgets.
+
+### Interactive example
-import { ExtendedButton } from "@patternfly/widgetized-dashboard";
+```js file="./BasicExample.tsx"
-## Basic usage
+```
+
+### Locked layout
-### Example
+Use `isLayoutLocked` to prevent users from modifying the layout.
-```js file="./Basic.tsx"
+```js file="./LockedLayoutExample.tsx"
```
-### Fullscreen example
+### Without drawer
+
+You can hide the widget drawer by setting `showDrawer={false}`.
-```js file="./Basic.tsx" isFullscreen
+```js file="./WithoutDrawerExample.tsx"
```
+
+## Key features
+
+- **Drag and drop**: Drag widgets from the drawer to add them to the dashboard
+- **Resize**: Drag corner handles to resize widgets
+- **Lock/unlock**: Lock widgets to prevent accidental changes
+- **Responsive**: Automatically adjusts layout for different screen sizes (xl, lg, md, sm)
+- **Persistent**: Save and restore layouts using the `onTemplateChange` callback
+
+## Widget mapping
+
+Define your widgets using the `WidgetMapping` type:
+
+```typescript
+const widgetMapping: WidgetMapping = {
+ 'my-widget': {
+ defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'My Widget',
+ icon:
+ },
+ renderWidget: (id) =>
+ }
+};
+```
+
+## Template configuration
+
+Define your initial layout using the `ExtendedTemplateConfig` type:
+
+```typescript
+const initialTemplate: ExtendedTemplateConfig = {
+ xl: [
+ { i: 'my-widget#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'my-widget', title: 'My Widget' }
+ ],
+ lg: [...],
+ md: [...],
+ sm: [...]
+};
+```
+
+Each breakpoint (xl, lg, md, sm) should have its own layout configuration to ensure proper responsive behavior.
diff --git a/packages/module/src/ExtendedButton/ExtendedButton.tsx b/packages/module/src/ExtendedButton/ExtendedButton.tsx
deleted file mode 100644
index b8119e9..0000000
--- a/packages/module/src/ExtendedButton/ExtendedButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Button, ButtonProps } from '@patternfly/react-core';
-
-export interface ExtendedButtonProps extends ButtonProps {
- /** Content to render inside the extended button component */
- children?: React.ReactNode;
-}
-
-export const ExtendedButton: React.FunctionComponent = ({
- children,
- ...props
-}: ExtendedButtonProps) => {
- const [currentVariantIndex, setCurrentVariantIndex] = React.useState(0);
-
- const buttonVariants: ButtonProps['variant'][] = [
- 'primary',
- 'secondary',
- 'tertiary'
- ];
-
- const handleClick = () => {
- setCurrentVariantIndex((previousVariantIndex) => (previousVariantIndex + 1) % buttonVariants.length);
- };
-
- return (
-
- );
-};
diff --git a/packages/module/src/ExtendedButton/__tests__/ExtendedButton.test.tsx b/packages/module/src/ExtendedButton/__tests__/ExtendedButton.test.tsx
deleted file mode 100644
index 3a8b357..0000000
--- a/packages/module/src/ExtendedButton/__tests__/ExtendedButton.test.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { ExtendedButton } from '../ExtendedButton';
-
-test('Renders without children', () => {
- render(
-
-
-
- );
-
- expect(screen.getByTestId('container').firstChild).toBeVisible();
-});
-
-test('Renders children', () => {
- render(Test);
-
- expect(screen.getByRole('button', { name: 'Test' })).toBeVisible();
-});
-
-test('Passes inherited props to the returned component', () => {
- render(Test);
-
- expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
-});
-
-test('Renders as a primary button initially', () => {
- render(Test);
-
- expect(screen.getByRole('button')).toHaveClass('pf-v6-c-button pf-m-primary', { exact: true });
-});
-
-test('Renders as a secondary button once it has been clicked once', () => {
- render(Test);
- const button = screen.getByRole('button');
- userEvent.click(screen.getByRole('button'));
-
- waitFor(() => {
- expect(button).toHaveClass('pf-v6-c-button pf-m-secondary', { exact: true });
- });
-});
-
-test('Renders as a tertiary button once it has been clicked twice', () => {
- render(Test);
-
- const button = screen.getByRole('button');
- userEvent.click(button);
- userEvent.click(button);
-
- waitFor(() => {
- expect(button).toHaveClass('pf-v6-c-button pf-m-tertiary', { exact: true });
- });
-});
-
-test('Loops back to rendering a primary button again after being clicked three times', () => {
- render(Test);
-
- const button = screen.getByRole('button');
- userEvent.click(button);
- userEvent.click(button);
- userEvent.click(button);
-
- expect(button).toHaveClass('pf-v6-c-button pf-m-primary', { exact: true });
-});
-
-test('Matches expected default snapshot', () => {
- const { asFragment } = render(Test);
-
- expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/module/src/ExtendedButton/__tests__/__snapshots__/ExtendedButton.test.tsx.snap b/packages/module/src/ExtendedButton/__tests__/__snapshots__/ExtendedButton.test.tsx.snap
deleted file mode 100644
index 9911eeb..0000000
--- a/packages/module/src/ExtendedButton/__tests__/__snapshots__/ExtendedButton.test.tsx.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Matches expected default snapshot 1`] = `
-
-
-
-`;
diff --git a/packages/module/src/ExtendedButton/index.ts b/packages/module/src/ExtendedButton/index.ts
deleted file mode 100644
index 03c57e3..0000000
--- a/packages/module/src/ExtendedButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ExtendedButton';
diff --git a/packages/module/src/WidgetLayout/GridLayout.tsx b/packages/module/src/WidgetLayout/GridLayout.tsx
new file mode 100644
index 0000000..d3c89ea
--- /dev/null
+++ b/packages/module/src/WidgetLayout/GridLayout.tsx
@@ -0,0 +1,289 @@
+import 'react-grid-layout/css/styles.css';
+import './styles';
+import ReactGridLayout, { Layout, ReactGridLayoutProps } from 'react-grid-layout';
+import GridTile, { SetWidgetAttribute } from './GridTile';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { isWidgetType } from './utils';
+import React from 'react';
+import {
+ ExtendedLayoutItem,
+ Variants,
+ WidgetMapping,
+ ExtendedTemplateConfig,
+ AnalyticsTracker,
+} from './types';
+import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateVariant, PageSection } from '@patternfly/react-core';
+import { ExternalLinkAltIcon, GripVerticalIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { columns, breakpoints, droppingElemId, getWidgetIdentifier, extendLayout, getGridDimensions } from './utils';
+
+export const defaultBreakpoints = breakpoints;
+
+// SVG resize handle as inline data URI
+const resizeHandleSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2IDEuMTQyODZMMTQuODU3MSAwTDAgMTQuODU3MVYxNkgxLjE0Mjg2TDE2IDEuMTQyODZaIiBmaWxsPSIjRDJEMkQyIi8+Cjwvc3ZnPgo=';
+
+const getResizeHandle = (resizeHandleAxis: string, ref: React.Ref) => (
+
+
+
+ {isLoaded ? widgetConfig.config.icon : }
+
+ )}
+
+ {isLoaded ? (
+
+ {widgetConfig?.config?.title || widgetType}
+
+ ) : (
+
+ )}
+ {hasHeader && isLoaded && (
+
+
+
+ )}
+
+
+
+
+
+ {children}
+
+ );
+};
+
+export default GridTile;
+
diff --git a/packages/module/src/WidgetLayout/WidgetDrawer.tsx b/packages/module/src/WidgetLayout/WidgetDrawer.tsx
new file mode 100644
index 0000000..c97eb03
--- /dev/null
+++ b/packages/module/src/WidgetLayout/WidgetDrawer.tsx
@@ -0,0 +1,172 @@
+import {
+ Button,
+ Card,
+ CardHeader,
+ CardTitle,
+ Flex,
+ Gallery,
+ GalleryItem,
+ Icon,
+ PageSection,
+ Split,
+ SplitItem,
+ Title,
+ Tooltip,
+} from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { CloseIcon, GripVerticalIcon, PlusCircleIcon } from '@patternfly/react-icons';
+import { WidgetMapping, WidgetConfiguration } from './types';
+
+export type WidgetDrawerProps = React.PropsWithChildren<{
+ /** Widget mapping definition */
+ widgetMapping: WidgetMapping;
+ /** List of currently used widget types (to filter out from drawer) */
+ currentlyUsedWidgets?: string[];
+ /** Whether the drawer is expanded */
+ isOpen?: boolean;
+ /** Callback when drawer open state changes */
+ onOpenChange?: (isOpen: boolean) => void;
+ /** Custom instruction text */
+ instructionText?: string;
+}>;
+
+const WidgetWrapper = ({ widgetType, config, onDragStart, onDragEnd }: {
+ widgetType: string;
+ config?: WidgetConfiguration;
+ onDragStart: (widgetType: string) => void;
+ onDragEnd: () => void;
+}) => {
+ const headerActions = (
+ Drag to add widget}>
+
+
+
+
+ );
+
+ return (
+ {
+ const nodeRect = (e.target as HTMLElement).getBoundingClientRect();
+
+ if (e.dataTransfer) {
+ e.dataTransfer.setDragImage(
+ e.target as HTMLDivElement,
+ e.clientX - nodeRect.left,
+ e.clientY - nodeRect.top
+ );
+ }
+
+ if (e.dataTransfer) {
+ e.dataTransfer.setData('text', widgetType);
+ }
+
+ onDragStart(widgetType);
+ }}
+ onDragEnd={onDragEnd}
+
+ unselectable="on"
+ draggable={true}
+ className="grid-tile"
+ ouiaId={`add-widget-card-${config?.title || widgetType}`}
+ >
+
+
+ {config?.icon && (
+
+ {config.icon}
+
+ )}
+ {config?.title || widgetType}
+
+
+
+ );
+};
+
+const WidgetDrawer = ({
+ children,
+ widgetMapping,
+ currentlyUsedWidgets = [],
+ isOpen: controlledIsOpen,
+ onOpenChange,
+ instructionText,
+}: WidgetDrawerProps) => {
+ const [internalIsOpen, setInternalIsOpen] = useState(false);
+
+ // Use controlled state if provided, otherwise use internal state
+ const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+ const setIsOpen = onOpenChange || setInternalIsOpen;
+
+ const filteredWidgetMapping = Object.entries(widgetMapping).filter(([type]) => !currentlyUsedWidgets.includes(type));
+
+ const defaultInstructionText = `Add new and previously removed widgets by clicking the icon, then drag and drop to a new location. Drag the corners of the cards to resize widgets.`;
+
+ const panelContent = (
+
+
+
+
+ {instructionText || (
+ <>
+ {defaultInstructionText.split('icon').map((part, i) =>
+ i === 0 ? part : (
+ <React.Fragment key={i}>
+ <GripVerticalIcon />
+ {part}
+ </React.Fragment>
+ )
+ )}
+ </>
+ )}
+
+
+
+
+
+
+ {filteredWidgetMapping.map(([type, widget], i) => (
+
+ {}}
+ onDragEnd={() => {}}
+ />
+
+ ))}
+
+
+ );
+
+ return (
+ <>
+
+
+
{panelContent}
}
+ {children}
+
+ );
+};
+
+export default WidgetDrawer;
+
diff --git a/packages/module/src/WidgetLayout/WidgetLayout.tsx b/packages/module/src/WidgetLayout/WidgetLayout.tsx
new file mode 100644
index 0000000..b2069c3
--- /dev/null
+++ b/packages/module/src/WidgetLayout/WidgetLayout.tsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import GridLayout from './GridLayout';
+import WidgetDrawer from './WidgetDrawer';
+import { ExtendedTemplateConfig, WidgetMapping, AnalyticsTracker } from './types';
+
+export interface WidgetLayoutProps {
+ /** Widget mapping definition */
+ widgetMapping: WidgetMapping;
+ /** Initial template configuration */
+ initialTemplate: ExtendedTemplateConfig;
+ /** Callback when template changes */
+ onTemplateChange?: (template: ExtendedTemplateConfig) => void;
+ /** Whether the layout is locked (disables drag, drop, resize) */
+ isLayoutLocked?: boolean;
+ /** Custom empty state component */
+ emptyStateComponent?: React.ReactNode;
+ /** Documentation link for empty state */
+ documentationLink?: string;
+ /** Analytics tracker (optional) */
+ analytics?: AnalyticsTracker;
+ /** Whether to show the widget drawer */
+ showDrawer?: boolean;
+ /** Whether to show the empty state when no widgets exist */
+ showEmptyState?: boolean;
+ /** Custom instruction text for the drawer */
+ drawerInstructionText?: string;
+ /** Whether the drawer is initially open */
+ initialDrawerOpen?: boolean;
+};
+
+const WidgetLayout = ({
+ widgetMapping,
+ initialTemplate,
+ onTemplateChange,
+ isLayoutLocked = false,
+ emptyStateComponent,
+ documentationLink,
+ analytics,
+ showDrawer = true,
+ showEmptyState = true,
+ drawerInstructionText,
+ initialDrawerOpen = false,
+}: WidgetLayoutProps) => {
+ const [template, setTemplate] = useState(initialTemplate);
+ const [drawerOpen, setDrawerOpen] = useState(initialDrawerOpen);
+ const [currentlyUsedWidgets, setCurrentlyUsedWidgets] = useState([]);
+
+ const handleTemplateChange = (newTemplate: ExtendedTemplateConfig) => {
+ setTemplate(newTemplate);
+ onTemplateChange?.(newTemplate);
+ };
+
+ const handleDrawerExpandChange = (expanded: boolean) => {
+ setDrawerOpen(expanded);
+ };
+
+ const handleActiveWidgetsChange = (widgetTypes: string[]) => {
+ setCurrentlyUsedWidgets(widgetTypes);
+ };
+
+ const gridLayout = (
+
+ );
+
+ if (!showDrawer) {
+ return gridLayout;
+ }
+
+ return (
+
+ {gridLayout}
+
+ );
+};
+
+export default WidgetLayout;
+
diff --git a/packages/module/src/WidgetLayout/__tests__/WidgetLayout.test.tsx b/packages/module/src/WidgetLayout/__tests__/WidgetLayout.test.tsx
new file mode 100644
index 0000000..5adb835
--- /dev/null
+++ b/packages/module/src/WidgetLayout/__tests__/WidgetLayout.test.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { WidgetLayout } from '../WidgetLayout';
+import { WidgetMapping, ExtendedTemplateConfig } from '../types';
+import { CubeIcon } from '@patternfly/react-icons';
+import { BrowserRouter } from 'react-router-dom';
+
+const mockWidgetMapping: WidgetMapping = {
+ 'test-widget': {
+ defaults: { w: 2, h: 3, maxH: 6, minH: 2 },
+ config: {
+ title: 'Test Widget',
+ icon:
+ },
+ renderWidget: (id) => Test Widget Content
+ }
+};
+
+const mockTemplate: ExtendedTemplateConfig = {
+ xl: [
+ { i: 'test-widget#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'test-widget', title: 'Test Widget' }
+ ],
+ lg: [
+ { i: 'test-widget#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'test-widget', title: 'Test Widget' }
+ ],
+ md: [
+ { i: 'test-widget#1', x: 0, y: 0, w: 2, h: 3, widgetType: 'test-widget', title: 'Test Widget' }
+ ],
+ sm: [
+ { i: 'test-widget#1', x: 0, y: 0, w: 1, h: 3, widgetType: 'test-widget', title: 'Test Widget' }
+ ]
+};
+
+const emptyTemplate: ExtendedTemplateConfig = {
+ xl: [],
+ lg: [],
+ md: [],
+ sm: []
+};
+
+describe('WidgetLayout', () => {
+ it('renders without crashing', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByTestId('widget-test-widget#1')).toBeInTheDocument();
+ });
+
+ it('shows empty state when no widgets are present', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByText(/No dashboard content/i)).toBeInTheDocument();
+ });
+
+ it('hides empty state when showEmptyState is false', () => {
+ render(
+
+
+
+ );
+ expect(screen.queryByText(/No dashboard content/i)).not.toBeInTheDocument();
+ });
+
+ it('hides drawer when showDrawer is false', () => {
+ render(
+
+
+
+ );
+ // Drawer instructions should not be present
+ expect(screen.queryByText(/Add new and previously removed widgets/i)).not.toBeInTheDocument();
+ });
+
+ it('renders widget with custom title', () => {
+ render(
+
+
+
+ );
+ expect(screen.getByText('Test Widget')).toBeInTheDocument();
+ });
+
+ it('calls onTemplateChange when template changes', () => {
+ const handleChange = jest.fn();
+ render(
+
+
+
+ );
+ // Note: Testing actual drag-and-drop interactions would require more complex testing setup
+ // This test just verifies the callback prop is accepted
+ expect(handleChange).not.toHaveBeenCalled();
+ });
+});
+
diff --git a/packages/module/src/WidgetLayout/__tests__/__snapshots__/WidgetLayout.test.tsx.snap b/packages/module/src/WidgetLayout/__tests__/__snapshots__/WidgetLayout.test.tsx.snap
new file mode 100644
index 0000000..006e639
--- /dev/null
+++ b/packages/module/src/WidgetLayout/__tests__/__snapshots__/WidgetLayout.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WidgetLayout renders without crashing 1`] = `
+
+
+ Test Widget Content
+
+