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

package/dist/esm/VisitListener-fa6f752b.esm.js

@@ -0,0 +1,613 @@
+import React, { useCallback, useMemo, useEffect } from 'react';
+import { WidthProvider, Responsive } from 'react-grid-layout';
+import { createApiRef, useElementFilter, useApi, storageApiRef, getComponentData } from '@backstage/core-plugin-api';
+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';
+import { Theme } from '@rjsf/material-ui';
+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 { useLocation } from 'react-router-dom';
+import '@backstage/core-app-api';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+
+const visitsApiRef = createApiRef({
+  id: "homepage.visits"
+});
+
+const Form = withTheme(Theme);
+const useStyles$2 = 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$2();
+  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$1 = makeStyles(
+  (theme) => createStyles({
+    contentHeaderBtn: {
+      marginLeft: theme.spacing(2)
+    },
+    widgetWrapper: {
+      "& > *:first-child": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  })
+);
+const CustomHomepageButtons = (props) => {
+  const {
+    editMode,
+    numWidgets,
+    clearLayout,
+    setAddWidgetDialogOpen,
+    changeEditMode,
+    defaultConfigAvailable,
+    restoreDefault
+  } = props;
+  const styles = useStyles$1();
+  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 = 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();
+  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);
+};
+
+export { CustomHomepageGrid as C, VisitListener as V, visitsApiRef as v };
+//# sourceMappingURL=VisitListener-fa6f752b.esm.js.map