@backstage/plugin-home 0.5.9 → 0.5.10-next.1

package/dist/index.esm.js

@@ -1,31 +1,34 @@
-import { createRouteRef, createApiRef, createPlugin, createApiFactory, storageApiRef, identityApiRef, createRoutableExtension, createComponentExtension, useElementFilter, useApi, getComponentData } from '@backstage/core-plugin-api';
+import { createRouteRef, createPlugin, createApiFactory, storageApiRef, identityApiRef, createRoutableExtension, createComponentExtension } from '@backstage/core-plugin-api';
 import { createCardExtension as createCardExtension$1, SettingsModal as SettingsModal$1 } from '@backstage/plugin-home-react';
 import { WebStorage } from '@backstage/core-app-api';
-import React, { useCallback, useMemo, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { WidthProvider, Responsive } from 'react-grid-layout';
+import { v as visitsApiRef } from './esm/VisitListener-fa6f752b.esm.js';
+export { C as CustomHomepageGrid, V as VisitListener, v as visitsApiRef } from './esm/VisitListener-fa6f752b.esm.js';
+import React from 'react';
+import 'react-router-dom';
+import { makeStyles } from '@material-ui/core';
+import 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { makeStyles, createStyles, Dialog, DialogContent, Grid, Tooltip, DialogTitle, ListItemAvatar, useTheme } from '@material-ui/core';
-import { compact } from 'lodash';
-import useObservable from 'react-use/lib/useObservable';
-import { ContentHeader, ErrorBoundary } from '@backstage/core-components';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import SettingsIcon from '@material-ui/icons/Settings';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { withTheme } from '@rjsf/core-v5';
-import validator from '@rjsf/validator-ajv8';
-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 from '@material-ui/core/Button';
-import SaveIcon from '@material-ui/icons/Save';
-import EditIcon from '@material-ui/icons/Edit';
-import CancelIcon from '@material-ui/icons/Cancel';
-import { z } from 'zod';
-import { stringifyEntityRef } from '@backstage/catalog-model';
+import 'lodash';
+import 'react-use/lib/useObservable';
+import '@backstage/core-components';
+import '@material-ui/core/Typography';
+import '@material-ui/core/IconButton';
+import '@material-ui/icons/Settings';
+import '@material-ui/icons/Delete';
+import '@rjsf/core';
+import '@rjsf/material-ui';
+import '@rjsf/validator-ajv8';
+import '@material-ui/core/List';
+import '@material-ui/core/ListItem';
+import '@material-ui/icons/Add';
+import '@material-ui/core/ListItemText';
+import '@material-ui/core/Button';
+import '@material-ui/icons/Save';
+import '@material-ui/icons/Edit';
+import '@material-ui/icons/Cancel';
+import 'zod';
+import '@backstage/catalog-model';
 
 const rootRouteRef = createRouteRef({
   id: "home"
@@ -110,21 +113,35 @@ class VisitsStorageApi {
     return visit;
   }
   async persistAll(visits) {
-    const { userEntityRef } = await this.identityApi.getBackstageIdentity();
-    const storageKey = `${this.storageKeyPrefix}:${userEntityRef}`;
+    const storageKey = await this.getStorageKey();
     return this.storageApi.set(storageKey, visits);
   }
   async retrieveAll() {
     var _a;
+    const storageKey = await this.getStorageKey();
+    const snapshot = this.storageApi.snapshot(storageKey);
+    if ((snapshot == null ? void 0 : snapshot.presence) !== "unknown") {
+      return (_a = snapshot == null ? void 0 : snapshot.value) != null ? _a : [];
+    }
+    return new Promise((resolve, reject) => {
+      const subsription = this.storageApi.observe$(storageKey).subscribe({
+        next: (next) => {
+          var _a2;
+          const visits = (_a2 = next.value) != null ? _a2 : [];
+          subsription.unsubscribe();
+          resolve(visits);
+        },
+        error: (err) => {
+          subsription.unsubscribe();
+          reject(err);
+        }
+      });
+    });
+  }
+  async getStorageKey() {
     const { userEntityRef } = await this.identityApi.getBackstageIdentity();
     const storageKey = `${this.storageKeyPrefix}:${userEntityRef}`;
-    let visits;
-    try {
-      visits = (_a = this.storageApi.snapshot(storageKey).value) != null ? _a : [];
-    } catch {
-      visits = [];
-    }
-    return visits;
+    return storageKey;
   }
   // This assumes Visit fields are either numbers or strings
   compare(order, a, b) {
@@ -143,10 +160,6 @@ class VisitsWebStorageApi {
   }
 }
 
-const visitsApiRef = createApiRef({
-  id: "homepage.visits"
-});
-
 const homePlugin = createPlugin({
   id: "home",
   apis: [
@@ -166,7 +179,7 @@ const homePlugin = createPlugin({
 const HomepageCompositionRoot = homePlugin.provide(
   createRoutableExtension({
     name: "HomepageCompositionRoot",
-    component: () => import('./esm/index-20932a73.esm.js').then((m) => m.HomepageCompositionRoot),
+    component: () => import('./esm/index-20e7c88d.esm.js').then((m) => m.HomepageCompositionRoot),
     mountPoint: rootRouteRef
   })
 );
@@ -263,593 +276,15 @@ const HeaderWorldClock = homePlugin.provide(
 const HomePageTopVisited = homePlugin.provide(
   createCardExtension$1({
     name: "HomePageTopVisited",
-    components: () => import('./esm/TopVisited-918c6b5f.esm.js')
+    components: () => import('./esm/TopVisited-f4e8def1.esm.js')
   })
 );
 const HomePageRecentlyVisited = homePlugin.provide(
   createCardExtension$1({
     name: "HomePageRecentlyVisited",
-    components: () => import('./esm/RecentlyVisited-618bf2be.esm.js')
-  })
-);
-
-const Form = withTheme(require("@rjsf/material-ui-v5").Theme);
-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, deletable } = 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,
-      {
-        validator,
-        showErrorList: false,
-        schema: widget.settingsSchema,
-        uiSchema: widget.uiSchema,
-        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" })
-    ))),
-    deletable !== false && /* @__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) => {
-  return widget.title || 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%"
-      }
-    }
+    components: () => import('./esm/RecentlyVisited-3a78670a.esm.js')
   })
 );
-const CustomHomepageButtons = (props) => {
-  const {
-    editMode,
-    numWidgets,
-    clearLayout,
-    setAddWidgetDialogOpen,
-    changeEditMode,
-    defaultConfigAvailable,
-    restoreDefault
-  } = props;
-  const styles = useStyles$2();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !editMode && numWidgets > 0 ? /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      color: "primary",
-      onClick: () => changeEditMode(true),
-      size: "small",
-      startIcon: /* @__PURE__ */ React.createElement(EditIcon, null)
-    },
-    "Edit"
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, defaultConfigAvailable && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      className: styles.contentHeaderBtn,
-      onClick: restoreDefault,
-      size: "small",
-      startIcon: /* @__PURE__ */ React.createElement(CancelIcon, null)
-    },
-    "Restore defaults"
-  ), numWidgets > 0 && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      color: "secondary",
-      className: styles.contentHeaderBtn,
-      onClick: clearLayout,
-      size: "small",
-      startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null)
-    },
-    "Clear all"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      className: styles.contentHeaderBtn,
-      onClick: () => setAddWidgetDialogOpen(true),
-      size: "small",
-      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null)
-    },
-    "Add widget"
-  ), numWidgets > 0 && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: styles.contentHeaderBtn,
-      variant: "contained",
-      color: "primary",
-      onClick: () => changeEditMode(false),
-      size: "small",
-      startIcon: /* @__PURE__ */ React.createElement(SaveIcon, null)
-    },
-    "Save"
-  )));
-};
-
-const RSJFTypeSchema = z.any();
-const RSJFTypeUiSchema = 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"),
-  movable: z.boolean().optional(),
-  deletable: z.boolean().optional(),
-  resizable: z.boolean().optional()
-});
-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(),
-  uiSchema: RSJFTypeUiSchema.optional(),
-  movable: z.boolean().optional(),
-  deletable: z.boolean().optional(),
-  resizable: z.boolean().optional()
-});
-const GridWidgetSchema = z.object({
-  id: z.string(),
-  layout: LayoutSchema,
-  settings: z.record(z.string(), z.any()),
-  movable: z.boolean().optional(),
-  deletable: z.boolean().optional(),
-  resizable: z.boolean().optional()
-});
-const CustomHomepageGridStateV1Schema = z.object({
-  version: z.literal(1),
-  pages: z.record(z.string(), z.array(GridWidgetSchema))
-});
-
-const ResponsiveGrid = WidthProvider(Responsive);
-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: {
-      '& > div[class*="MuiCard-root"]': {
-        width: "100%",
-        height: "100%"
-      },
-      '& div[class*="MuiCardContent-root"]': {
-        overflow: "auto"
-      },
-      "& + .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: {},
-      movable: conf.movable,
-      deletable: conf.deletable,
-      resizable: conf.resizable
-    };
-  });
-  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, _n;
-    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,
-        uiSchema: (_b = config == null ? void 0 : config.settings) == null ? void 0 : _b.uiSchema,
-        width: (_d = (_c = config == null ? void 0 : config.layout) == null ? void 0 : _c.width) == null ? void 0 : _d.defaultColumns,
-        minWidth: (_f = (_e = config == null ? void 0 : config.layout) == null ? void 0 : _e.width) == null ? void 0 : _f.minColumns,
-        maxWidth: (_h = (_g = config == null ? void 0 : config.layout) == null ? void 0 : _g.width) == null ? void 0 : _h.maxColumns,
-        height: (_j = (_i = config == null ? void 0 : config.layout) == null ? void 0 : _i.height) == null ? void 0 : _j.defaultRows,
-        minHeight: (_l = (_k = config == null ? void 0 : config.layout) == null ? void 0 : _k.height) == null ? void 0 : _l.minRows,
-        maxHeight: (_n = (_m = config == null ? void 0 : config.layout) == null ? void 0 : _m.height) == null ? void 0 : _n.maxRows
-      })
-    ];
-  });
-};
-const CustomHomepageGrid = (props) => {
-  var _a;
-  const styles = useStyles$1();
-  const theme = useTheme();
-  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: {},
-        movable: widget.movable,
-        deletable: widget.deletable,
-        resizable: widget.resizable
-      }
-    ]);
-    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) => {
-        const resizable = w.resizable === false ? false : mode;
-        const movable = w.movable === false ? false : mode;
-        return {
-          ...w,
-          layout: { ...w.layout, isDraggable: movable, isResizable: resizable }
-        };
-      })
-    );
-  };
-  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);
-    }
-  };
-  const handleRestoreDefaultConfig = () => {
-    setWidgets(
-      defaultLayout.map((w) => {
-        const resizable = w.resizable === false ? false : editMode;
-        const movable = w.movable === false ? false : editMode;
-        return {
-          ...w,
-          layout: {
-            ...w.layout,
-            isDraggable: movable,
-            isResizable: resizable
-          }
-        };
-      })
-    );
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, /* @__PURE__ */ React.createElement(
-    CustomHomepageButtons,
-    {
-      editMode,
-      numWidgets: widgets.length,
-      clearLayout,
-      setAddWidgetDialogOpen,
-      changeEditMode,
-      defaultConfigAvailable: props.config !== void 0,
-      restoreDefault: handleRestoreDefaultConfig
-    }
-  )), /* @__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: props.compactType,
-      style: props.style,
-      allowOverlap: props.allowOverlap,
-      preventCollision: props.preventCollision,
-      draggableCancel: ".overlayGridItem,.widgetSettingsDialog,.disabled",
-      containerPadding: props.containerPadding,
-      margin: props.containerMargin,
-      breakpoints: props.breakpoints ? props.breakpoints : theme.breakpoints.values,
-      cols: props.cols ? props.cols : { xl: 12, lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
-      rowHeight: (_a = props.rowHeight) != null ? _a : 60,
-      onLayoutChange: handleLayoutChange,
-      layouts: { xl: 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 : {}
-      };
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: l.i,
-          className: `${styles.widgetWrapper} ${editMode && "edit"} ${w.movable === false && "disabled"}`
-        },
-        /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(widget.component.type, { ...widgetProps })),
-        editMode && /* @__PURE__ */ React.createElement(
-          WidgetSettingsOverlay,
-          {
-            id: l.i,
-            widget,
-            handleRemove,
-            handleSettingsSave,
-            settings: w.settings,
-            deletable: w.deletable
-          }
-        )
-      );
-    })
-  ));
-};
-
-const getToEntityRef = ({
-  rootPath = "catalog",
-  stringifyEntityRefImpl = stringifyEntityRef
-} = {}) => ({ pathname }) => {
-  const regex = new RegExp(
-    `^/${rootPath}/(?<namespace>[^/]+)/(?<kind>[^/]+)/(?<name>[^/]+)`
-  );
-  const result = regex.exec(pathname);
-  if (!result || !(result == null ? void 0 : result.groups))
-    return void 0;
-  const entity = {
-    namespace: result.groups.namespace,
-    kind: result.groups.kind,
-    name: result.groups.name
-  };
-  return stringifyEntityRefImpl(entity);
-};
-const getVisitName = ({ rootPath = "catalog", document = global.document } = {}) => ({ pathname }) => {
-  const regex = new RegExp(
-    `^/${rootPath}/(?<namespace>[^/]+)/(?<kind>[^/]+)/(?<name>[^/]+)`
-  );
-  let result = regex.exec(pathname);
-  if (result && (result == null ? void 0 : result.groups))
-    return result.groups.name;
-  result = /^\/(?<name>[^\/]+)$/.exec(pathname);
-  if (result && (result == null ? void 0 : result.groups))
-    return result.groups.name;
-  return document.title;
-};
-const VisitListener = ({
-  children,
-  toEntityRef,
-  visitName
-}) => {
-  const visitsApi = useApi(visitsApiRef);
-  const { pathname } = useLocation();
-  const toEntityRefImpl = toEntityRef != null ? toEntityRef : getToEntityRef();
-  const visitNameImpl = visitName != null ? visitName : getVisitName();
-  useEffect(() => {
-    const requestId = requestAnimationFrame(() => {
-      visitsApi.save({
-        visit: {
-          name: visitNameImpl({ pathname }),
-          pathname,
-          entityRef: toEntityRefImpl({ pathname })
-        }
-      });
-    });
-    return () => cancelAnimationFrame(requestId);
-  }, [visitsApi, pathname, toEntityRefImpl, visitNameImpl]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-};
 
 const TemplateBackstageLogo = (props) => {
   return /* @__PURE__ */ React.createElement(
@@ -900,5 +335,5 @@ const TemplateBackstageLogoIcon = () => {
 const createCardExtension = createCardExtension$1;
 const SettingsModal = SettingsModal$1;
 
-export { ComponentAccordion, ComponentTab, ComponentTabs, CustomHomepageGrid, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageRecentlyVisited, HomePageStarredEntities, HomePageToolkit, HomePageTopVisited, HomepageCompositionRoot, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, VisitListener, VisitsStorageApi, VisitsWebStorageApi, WelcomeTitle, createCardExtension, homePlugin, visitsApiRef };
+export { ComponentAccordion, ComponentTab, ComponentTabs, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageRecentlyVisited, HomePageStarredEntities, HomePageToolkit, HomePageTopVisited, HomepageCompositionRoot, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, VisitsStorageApi, VisitsWebStorageApi, WelcomeTitle, createCardExtension, homePlugin };
 //# sourceMappingURL=index.esm.js.map