@backstage/plugin-home 0.4.33-next.3 → 0.5.0

package/dist/index.esm.js

@@ -1,66 +1,565 @@
-import { createReactExtension, useApp, createRouteRef, createPlugin, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
-import React, { Suspense } from 'react';
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, makeStyles } from '@material-ui/core';
+import { useElementFilter, useApi, storageApiRef, getComponentData, createReactExtension, useApp, createRouteRef, createPlugin, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
+import React, { useCallback, useMemo, Suspense } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, makeStyles, createStyles, Grid, Tooltip, ListItemAvatar, IconButton as IconButton$1 } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
-import { InfoCard } from '@backstage/core-components';
+import { ContentHeader, ErrorBoundary, InfoCard } from '@backstage/core-components';
 import 'react-router-dom';
+import { WidthProvider, Responsive } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { compact } from 'lodash';
+import useObservable from 'react-use/lib/useObservable';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import Form from '@rjsf/material-ui';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import AddIcon from '@material-ui/icons/Add';
+import ListItemText from '@material-ui/core/ListItemText';
+import Button$1 from '@material-ui/core/Button';
+import SaveIcon from '@material-ui/icons/Save';
+import EditIcon from '@material-ui/icons/Edit';
+import { z } from 'zod';
 
 const SettingsModal = (props) => {
   const { open, close, componentName, children } = props;
   return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: () => close() }, /* @__PURE__ */ React.createElement(DialogTitle, null, "Settings - ", componentName), /* @__PURE__ */ React.createElement(DialogContent, null, children), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: () => close(), color: "primary", variant: "contained" }, "Close")));
 };
 
+const useStyles$3 = makeStyles(
+  (theme) => createStyles({
+    iconGrid: {
+      height: "100%",
+      "& *": {
+        padding: 0
+      }
+    },
+    settingsOverlay: {
+      position: "absolute",
+      backgroundColor: "rgba(40, 40, 40, 0.93)",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      padding: theme.spacing(2),
+      color: "white"
+    }
+  })
+);
+const WidgetSettingsOverlay = (props) => {
+  const { id, widget, settings, handleRemove, handleSettingsSave } = props;
+  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
+  const styles = useStyles$3();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.settingsOverlay }, widget.settingsSchema && /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: settingsDialogOpen,
+      className: "widgetSettingsDialog",
+      onClose: () => setSettingsDialogOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(
+      Form,
+      {
+        showErrorList: false,
+        schema: widget.settingsSchema,
+        noHtml5Validate: true,
+        formData: settings,
+        formContext: { settings },
+        onSubmit: ({ formData, errors }) => {
+          if (errors.length === 0) {
+            handleSettingsSave(id, formData);
+            setSettingsDialogOpen(false);
+          }
+        }
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      className: styles.iconGrid,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    widget.settingsSchema && /* @__PURE__ */ React.createElement(Grid, { item: true, className: "overlayGridItem" }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Edit settings" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        color: "primary",
+        onClick: () => setSettingsDialogOpen(true)
+      },
+      /* @__PURE__ */ React.createElement(SettingsIcon, { fontSize: "large" })
+    ))),
+    /* @__PURE__ */ React.createElement(Grid, { item: true, className: "overlayGridItem" }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Delete widget" }, /* @__PURE__ */ React.createElement(IconButton, { color: "secondary", onClick: () => handleRemove(id) }, /* @__PURE__ */ React.createElement(DeleteIcon, { fontSize: "large" }))))
+  ));
+};
+
+const getTitle = (widget) => {
+  var _a;
+  return (_a = widget.title) != null ? _a : widget.name;
+};
+const AddWidgetDialog = (props) => {
+  const { widgets, handleAdd } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogTitle, null, "Add new widget to dashboard"), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(List, { dense: true }, widgets.map((widget) => {
+    return /* @__PURE__ */ React.createElement(
+      ListItem,
+      {
+        key: widget.name,
+        button: true,
+        onClick: () => handleAdd(widget)
+      },
+      /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(AddIcon, null)),
+      /* @__PURE__ */ React.createElement(
+        ListItemText,
+        {
+          secondary: widget.description && /* @__PURE__ */ React.createElement(
+            Typography,
+            {
+              component: "span",
+              variant: "caption",
+              color: "textPrimary"
+            },
+            widget.description
+          ),
+          primary: /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textPrimary" }, getTitle(widget))
+        }
+      )
+    );
+  }))));
+};
+
+const useStyles$2 = makeStyles(
+  (theme) => createStyles({
+    contentHeaderBtn: {
+      marginLeft: theme.spacing(2)
+    },
+    widgetWrapper: {
+      "& > *:first-child": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  })
+);
+const CustomHomepageButtons = (props) => {
+  const {
+    editMode,
+    numWidgets,
+    clearLayout,
+    setAddWidgetDialogOpen,
+    changeEditMode
+  } = props;
+  const styles = useStyles$2();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !editMode && numWidgets > 0 ? /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      variant: "contained",
+      color: "primary",
+      onClick: () => changeEditMode(true),
+      startIcon: /* @__PURE__ */ React.createElement(EditIcon, null)
+    },
+    "Edit"
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, numWidgets > 0 && /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      variant: "contained",
+      color: "secondary",
+      className: styles.contentHeaderBtn,
+      onClick: clearLayout,
+      startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null)
+    },
+    "Clear"
+  ), /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      variant: "contained",
+      className: styles.contentHeaderBtn,
+      onClick: () => setAddWidgetDialogOpen(true),
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null)
+    },
+    "Add widget"
+  ), numWidgets > 0 && /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      className: styles.contentHeaderBtn,
+      variant: "contained",
+      color: "primary",
+      onClick: () => changeEditMode(false),
+      startIcon: /* @__PURE__ */ React.createElement(SaveIcon, null)
+    },
+    "Save"
+  )));
+};
+
+const RSJFTypeSchema = z.any();
+const ReactElementSchema = z.any();
+const LayoutSchema = z.any();
+const LayoutConfigurationSchema = z.object({
+  component: ReactElementSchema,
+  x: z.number().nonnegative("x must be positive number"),
+  y: z.number().nonnegative("y must be positive number"),
+  width: z.number().positive("width must be positive number"),
+  height: z.number().positive("height must be positive number")
+});
+const WidgetSchema = z.object({
+  name: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  component: ReactElementSchema,
+  width: z.number().positive("width must be positive number").optional(),
+  height: z.number().positive("height must be positive number").optional(),
+  minWidth: z.number().positive("minWidth must be positive number").optional(),
+  maxWidth: z.number().positive("maxWidth must be positive number").optional(),
+  minHeight: z.number().positive("minHeight must be positive number").optional(),
+  maxHeight: z.number().positive("maxHeight must be positive number").optional(),
+  settingsSchema: RSJFTypeSchema.optional()
+});
+const GridWidgetSchema = z.object({
+  id: z.string(),
+  layout: LayoutSchema,
+  settings: z.record(z.string(), z.any())
+});
+const CustomHomepageGridStateV1Schema = z.object({
+  version: z.literal(1),
+  pages: z.record(z.string(), z.array(GridWidgetSchema))
+});
+
+const ResponsiveGrid = WidthProvider(Responsive);
+const hash = require("object-hash");
+const useStyles$1 = makeStyles(
+  (theme) => createStyles({
+    responsiveGrid: {
+      "& .react-grid-item > .react-resizable-handle:after": {
+        position: "absolute",
+        content: '""',
+        borderStyle: "solid",
+        borderWidth: "0 0 20px 20px",
+        borderColor: `transparent transparent ${theme.palette.primary.light} transparent`
+      }
+    },
+    contentHeaderBtn: {
+      marginLeft: theme.spacing(2)
+    },
+    widgetWrapper: {
+      "& > *:first-child": {
+        width: "100%",
+        height: "100%"
+      },
+      "& + .react-grid-placeholder": {
+        backgroundColor: theme.palette.primary.light
+      },
+      "&.edit > :active": {
+        cursor: "move"
+      }
+    }
+  })
+);
+function useHomeStorage(defaultWidgets) {
+  const key = "home";
+  const storageApi = useApi(storageApiRef).forBucket("home.customHomepage");
+  const setWidgets = useCallback(
+    (value) => {
+      const grid = {
+        version: 1,
+        pages: {
+          default: value
+        }
+      };
+      storageApi.set(key, JSON.stringify(grid));
+    },
+    [key, storageApi]
+  );
+  const homeSnapshot = useObservable(
+    storageApi.observe$(key),
+    storageApi.snapshot(key)
+  );
+  const widgets = useMemo(() => {
+    if (homeSnapshot.presence === "absent") {
+      return defaultWidgets;
+    }
+    try {
+      const grid = JSON.parse(homeSnapshot.value);
+      return CustomHomepageGridStateV1Schema.parse(grid).pages.default;
+    } catch (e) {
+      return defaultWidgets;
+    }
+  }, [homeSnapshot, defaultWidgets]);
+  return [widgets, setWidgets];
+}
+const convertConfigToDefaultWidgets = (config, availableWidgets) => {
+  const ret = config.map((conf, i) => {
+    var _a, _b;
+    const c = LayoutConfigurationSchema.parse(conf);
+    const name = React.isValidElement(c.component) ? getComponentData(c.component, "core.extensionName") : c.component;
+    if (!name) {
+      return null;
+    }
+    const widget = availableWidgets.find((w) => w.name === name);
+    if (!widget) {
+      return null;
+    }
+    const widgetId = `${widget.name}__${i}${Math.random().toString(36).slice(2)}`;
+    return {
+      id: widgetId,
+      layout: {
+        i: widgetId,
+        x: c.x,
+        y: c.y,
+        w: Math.min((_a = widget.maxWidth) != null ? _a : Number.MAX_VALUE, c.width),
+        h: Math.min((_b = widget.maxHeight) != null ? _b : Number.MAX_VALUE, c.height),
+        minW: widget.minWidth,
+        maxW: widget.maxWidth,
+        minH: widget.minHeight,
+        maxH: widget.maxHeight,
+        isDraggable: false,
+        isResizable: false
+      },
+      settings: {}
+    };
+  });
+  return compact(ret);
+};
+const availableWidgetsFilter = (elements) => {
+  return elements.selectByComponentData({
+    key: "core.extensionName"
+  }).getElements().flatMap((elem) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    const config = getComponentData(elem, "home.widget.config");
+    return [
+      WidgetSchema.parse({
+        component: elem,
+        name: getComponentData(elem, "core.extensionName"),
+        title: getComponentData(elem, "title"),
+        description: getComponentData(elem, "description"),
+        settingsSchema: (_a = config == null ? void 0 : config.settings) == null ? void 0 : _a.schema,
+        width: (_c = (_b = config == null ? void 0 : config.layout) == null ? void 0 : _b.width) == null ? void 0 : _c.defaultColumns,
+        minWidth: (_e = (_d = config == null ? void 0 : config.layout) == null ? void 0 : _d.width) == null ? void 0 : _e.minColumns,
+        maxWidth: (_g = (_f = config == null ? void 0 : config.layout) == null ? void 0 : _f.width) == null ? void 0 : _g.maxColumns,
+        height: (_i = (_h = config == null ? void 0 : config.layout) == null ? void 0 : _h.height) == null ? void 0 : _i.defaultRows,
+        minHeight: (_k = (_j = config == null ? void 0 : config.layout) == null ? void 0 : _j.height) == null ? void 0 : _k.minRows,
+        maxHeight: (_m = (_l = config == null ? void 0 : config.layout) == null ? void 0 : _l.height) == null ? void 0 : _m.maxRows
+      })
+    ];
+  });
+};
+const CustomHomepageGrid = (props) => {
+  var _a;
+  const styles = useStyles$1();
+  const availableWidgets = useElementFilter(
+    props.children,
+    availableWidgetsFilter,
+    [props]
+  );
+  const defaultLayout = props.config ? convertConfigToDefaultWidgets(props.config, availableWidgets) : [];
+  const [widgets, setWidgets] = useHomeStorage(defaultLayout);
+  const [addWidgetDialogOpen, setAddWidgetDialogOpen] = React.useState(false);
+  const editModeOn = widgets.find((w) => w.layout.isResizable) !== void 0;
+  const [editMode, setEditMode] = React.useState(editModeOn);
+  const getWidgetByName = (name) => {
+    return availableWidgets.find((widget) => widget.name === name);
+  };
+  const getWidgetNameFromKey = (key) => {
+    return key.split("__")[0];
+  };
+  const handleAdd = (widget) => {
+    var _a2, _b, _c, _d;
+    const widgetId = `${widget.name}__${widgets.length + 1}${Math.random().toString(36).slice(2)}`;
+    setWidgets([
+      ...widgets,
+      {
+        id: widgetId,
+        layout: {
+          i: widgetId,
+          x: 0,
+          y: Math.max(...widgets.map((w) => w.layout.y + w.layout.h)) + 1,
+          w: Math.min((_a2 = widget.maxWidth) != null ? _a2 : Number.MAX_VALUE, (_b = widget.width) != null ? _b : 12),
+          h: Math.min((_c = widget.maxHeight) != null ? _c : Number.MAX_VALUE, (_d = widget.height) != null ? _d : 4),
+          minW: widget.minWidth,
+          maxW: widget.maxWidth,
+          minH: widget.minHeight,
+          maxH: widget.maxHeight,
+          isResizable: editMode,
+          isDraggable: editMode
+        },
+        settings: {}
+      }
+    ]);
+    setAddWidgetDialogOpen(false);
+  };
+  const handleRemove = (widgetId) => {
+    setWidgets(widgets.filter((w) => w.id !== widgetId));
+  };
+  const handleSettingsSave = (widgetId, widgetSettings) => {
+    const idx = widgets.findIndex((w) => w.id === widgetId);
+    if (idx >= 0) {
+      const widget = widgets[idx];
+      widget.settings = widgetSettings;
+      widgets[idx] = widget;
+      setWidgets(widgets);
+    }
+  };
+  const clearLayout = () => {
+    setWidgets([]);
+  };
+  const changeEditMode = (mode) => {
+    setEditMode(mode);
+    setWidgets(
+      widgets.map((w) => {
+        return {
+          ...w,
+          layout: { ...w.layout, isDraggable: mode, isResizable: mode }
+        };
+      })
+    );
+  };
+  const handleLayoutChange = (newLayout, _) => {
+    if (editMode) {
+      const newWidgets = newLayout.map((l) => {
+        const widget = widgets.find((w) => w.id === l.i);
+        return {
+          ...widget,
+          layout: l
+        };
+      });
+      setWidgets(newWidgets);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, /* @__PURE__ */ React.createElement(
+    CustomHomepageButtons,
+    {
+      editMode,
+      numWidgets: widgets.length,
+      clearLayout,
+      setAddWidgetDialogOpen,
+      changeEditMode
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: addWidgetDialogOpen,
+      onClose: () => setAddWidgetDialogOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(AddWidgetDialog, { widgets: availableWidgets, handleAdd })
+  ), !editMode && widgets.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "h5", align: "center" }, "No widgets added. Start by clicking the 'Add widget' button."), /* @__PURE__ */ React.createElement(
+    ResponsiveGrid,
+    {
+      className: styles.responsiveGrid,
+      measureBeforeMount: true,
+      compactType: "horizontal",
+      draggableCancel: ".overlayGridItem,.widgetSettingsDialog",
+      breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
+      cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+      rowHeight: (_a = props.rowHeight) != null ? _a : 60,
+      onLayoutChange: handleLayoutChange,
+      layouts: { lg: widgets.map((w) => w.layout) }
+    },
+    widgets.map((w) => {
+      var _a2;
+      const l = w.layout;
+      const widgetName = getWidgetNameFromKey(l.i);
+      const widget = getWidgetByName(widgetName);
+      if (!widget || !widget.component) {
+        return null;
+      }
+      const widgetProps = {
+        ...widget.component.props,
+        ...(_a2 = w.settings) != null ? _a2 : {}
+      };
+      const propsHash = hash(widgetProps, {});
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: l.i,
+          className: `${styles.widgetWrapper} ${editMode && "edit"}`
+        },
+        /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(widget.component.type, { key: propsHash, ...widgetProps })),
+        editMode && /* @__PURE__ */ React.createElement(
+          WidgetSettingsOverlay,
+          {
+            id: l.i,
+            widget,
+            handleRemove,
+            handleSettingsSave,
+            settings: w.settings
+          }
+        )
+      );
+    })
+  ));
+};
+
 function createCardExtension(options) {
-  const { title, components, name } = options;
+  const { title, components, name, description, layout, settings } = options;
+  const isCustomizable = (settings == null ? void 0 : settings.schema) !== void 0;
   return createReactExtension({
     name,
+    data: { title, description, "home.widget.config": { layout, settings } },
     component: {
-      lazy: () => components().then(({ Content, Actions, Settings, ContextProvider }) => {
-        const CardExtension = (props) => {
-          const { Renderer, title: overrideTitle, ...childProps } = props;
-          const app = useApp();
-          const { Progress } = app.getComponents();
-          const [settingsOpen, setSettingsOpen] = React.useState(false);
-          if (Renderer) {
-            return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(
-              Renderer,
-              {
-                title: overrideTitle || title,
-                ...{
-                  Content,
-                  ...Actions ? { Actions } : {},
-                  ...Settings ? { Settings } : {},
-                  ...ContextProvider ? { ContextProvider } : {},
-                  ...childProps
-                }
-              }
-            ));
-          }
-          const cardProps = {
-            title: overrideTitle != null ? overrideTitle : title,
-            ...Settings ? {
-              action: /* @__PURE__ */ React.createElement(IconButton, { onClick: () => setSettingsOpen(true) }, /* @__PURE__ */ React.createElement(SettingsIcon, null, "Settings"))
-            } : {},
-            ...Actions ? {
-              actions: /* @__PURE__ */ React.createElement(Actions, null)
-            } : {}
-          };
-          const innerContent = /* @__PURE__ */ React.createElement(InfoCard, { ...cardProps }, Settings && /* @__PURE__ */ React.createElement(
-            SettingsModal,
+      lazy: () => components().then((componentParts) => {
+        return (props) => {
+          return /* @__PURE__ */ React.createElement(
+            CardExtension,
             {
-              open: settingsOpen,
-              componentName: title,
-              close: () => setSettingsOpen(false)
-            },
-            /* @__PURE__ */ React.createElement(Settings, null)
-          ), /* @__PURE__ */ React.createElement(Content, { ...childProps }));
-          return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, ContextProvider ? /* @__PURE__ */ React.createElement(ContextProvider, { ...childProps }, innerContent) : innerContent);
+              ...props,
+              ...componentParts,
+              title: props.title || title,
+              isCustomizable
+            }
+          );
         };
-        return CardExtension;
       })
     }
   });
 }
+function CardExtension(props) {
+  const {
+    Renderer,
+    Content,
+    Settings,
+    Actions,
+    ContextProvider,
+    isCustomizable,
+    title,
+    ...childProps
+  } = props;
+  const app = useApp();
+  const { Progress } = app.getComponents();
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  if (Renderer) {
+    return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, /* @__PURE__ */ React.createElement(
+      Renderer,
+      {
+        title,
+        ...{
+          Content,
+          ...Actions ? { Actions } : {},
+          ...Settings && !isCustomizable ? { Settings } : {},
+          ...ContextProvider ? { ContextProvider } : {},
+          ...childProps
+        }
+      }
+    ));
+  }
+  const cardProps = {
+    title,
+    ...Settings && !isCustomizable ? {
+      action: /* @__PURE__ */ React.createElement(IconButton$1, { onClick: () => setSettingsOpen(true) }, /* @__PURE__ */ React.createElement(SettingsIcon, null, "Settings"))
+    } : {},
+    ...Actions ? {
+      actions: /* @__PURE__ */ React.createElement(Actions, null)
+    } : {}
+  };
+  const innerContent = /* @__PURE__ */ React.createElement(InfoCard, { ...cardProps }, Settings && !isCustomizable && /* @__PURE__ */ React.createElement(
+    SettingsModal,
+    {
+      open: settingsOpen,
+      componentName: title,
+      close: () => setSettingsOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(Settings, null)
+  ), /* @__PURE__ */ React.createElement(Content, { ...childProps }));
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: /* @__PURE__ */ React.createElement(Progress, null) }, ContextProvider ? /* @__PURE__ */ React.createElement(ContextProvider, { ...childProps }, innerContent) : innerContent);
+}
 
 const rootRouteRef = createRouteRef({
   id: "home"
@@ -75,7 +574,7 @@ const homePlugin = createPlugin({
 const HomepageCompositionRoot = homePlugin.provide(
   createRoutableExtension({
     name: "HomepageCompositionRoot",
-    component: () => import('./esm/index-236adacf.esm.js').then((m) => m.HomepageCompositionRoot),
+    component: () => import('./esm/index-a42ec1b1.esm.js').then((m) => m.HomepageCompositionRoot),
     mountPoint: rootRouteRef
   })
 );
@@ -83,7 +582,7 @@ const ComponentAccordion = homePlugin.provide(
   createComponentExtension({
     name: "ComponentAccordion",
     component: {
-      lazy: () => import('./esm/index-6bbcec36.esm.js').then((m) => m.ComponentAccordion)
+      lazy: () => import('./esm/index-93442718.esm.js').then((m) => m.ComponentAccordion)
     }
   })
 );
@@ -91,7 +590,7 @@ const ComponentTabs = homePlugin.provide(
   createComponentExtension({
     name: "ComponentTabs",
     component: {
-      lazy: () => import('./esm/index-6bbcec36.esm.js').then((m) => m.ComponentTabs)
+      lazy: () => import('./esm/index-93442718.esm.js').then((m) => m.ComponentTabs)
     }
   })
 );
@@ -99,7 +598,7 @@ const ComponentTab = homePlugin.provide(
   createComponentExtension({
     name: "ComponentTab",
     component: {
-      lazy: () => import('./esm/index-6bbcec36.esm.js').then((m) => m.ComponentTab)
+      lazy: () => import('./esm/index-93442718.esm.js').then((m) => m.ComponentTab)
     }
   })
 );
@@ -123,7 +622,26 @@ const HomePageRandomJoke = homePlugin.provide(
   createCardExtension({
     name: "HomePageRandomJoke",
     title: "Random Joke",
-    components: () => import('./esm/index-4517c5bc.esm.js')
+    components: () => import('./esm/index-4517c5bc.esm.js'),
+    description: "Shows a random joke about optional category",
+    layout: {
+      height: { minRows: 4 },
+      width: { minColumns: 3 }
+    },
+    settings: {
+      schema: {
+        title: "Random Joke settings",
+        type: "object",
+        properties: {
+          defaultCategory: {
+            title: "Category",
+            type: "string",
+            enum: ["any", "programming", "dad"],
+            default: "any"
+          }
+        }
+      }
+    }
   })
 );
 const HomePageToolkit = homePlugin.provide(
@@ -197,5 +715,5 @@ const TemplateBackstageLogoIcon = () => {
   );
 };
 
-export { ComponentAccordion, ComponentTab, ComponentTabs, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageStarredEntities, HomePageToolkit, HomepageCompositionRoot, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, WelcomeTitle, createCardExtension, homePlugin };
+export { ComponentAccordion, ComponentTab, ComponentTabs, CustomHomepageGrid, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageStarredEntities, HomePageToolkit, HomepageCompositionRoot, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, WelcomeTitle, createCardExtension, homePlugin };
 //# sourceMappingURL=index.esm.js.map