@backstage/plugin-home 0.5.2 → 0.5.3-next.1

package/dist/index.esm.js

@@ -1,16 +1,17 @@
-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 { ContentHeader, ErrorBoundary, InfoCard } from '@backstage/core-components';
+import { createRouteRef, createPlugin, createRoutableExtension, createComponentExtension, useElementFilter, useApi, storageApiRef, getComponentData } from '@backstage/core-plugin-api';
+import { createCardExtension as createCardExtension$1, SettingsModal as SettingsModal$1 } from '@backstage/plugin-home-react';
+import React, { useCallback, useMemo } from 'react';
 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 { 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';
@@ -18,15 +19,119 @@ 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 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';
 
-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 rootRouteRef = createRouteRef({
+  id: "home"
+});
+
+const homePlugin = createPlugin({
+  id: "home",
+  routes: {
+    root: rootRouteRef
+  }
+});
+const HomepageCompositionRoot = homePlugin.provide(
+  createRoutableExtension({
+    name: "HomepageCompositionRoot",
+    component: () => import('./esm/index-c05eb451.esm.js').then((m) => m.HomepageCompositionRoot),
+    mountPoint: rootRouteRef
+  })
+);
+const ComponentAccordion = homePlugin.provide(
+  createComponentExtension({
+    name: "ComponentAccordion",
+    component: {
+      lazy: () => import('./esm/index-3155d776.esm.js').then((m) => m.ComponentAccordion)
+    }
+  })
+);
+const ComponentTabs = homePlugin.provide(
+  createComponentExtension({
+    name: "ComponentTabs",
+    component: {
+      lazy: () => import('./esm/index-3155d776.esm.js').then((m) => m.ComponentTabs)
+    }
+  })
+);
+const ComponentTab = homePlugin.provide(
+  createComponentExtension({
+    name: "ComponentTab",
+    component: {
+      lazy: () => import('./esm/index-3155d776.esm.js').then((m) => m.ComponentTab)
+    }
+  })
+);
+const WelcomeTitle = homePlugin.provide(
+  createComponentExtension({
+    name: "WelcomeTitle",
+    component: {
+      lazy: () => import('./esm/index-87a51b51.esm.js').then((m) => m.WelcomeTitle)
+    }
+  })
+);
+const HomePageCompanyLogo = homePlugin.provide(
+  createComponentExtension({
+    name: "CompanyLogo",
+    component: {
+      lazy: () => import('./esm/index-476343c1.esm.js').then((m) => m.CompanyLogo)
+    }
+  })
+);
+const HomePageRandomJoke = homePlugin.provide(
+  createCardExtension$1({
+    name: "HomePageRandomJoke",
+    title: "Random Joke",
+    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(
+  createCardExtension$1({
+    name: "HomePageToolkit",
+    title: "Toolkit",
+    components: () => import('./esm/index-40d9ffac.esm.js')
+  })
+);
+const HomePageStarredEntities = homePlugin.provide(
+  createCardExtension$1({
+    name: "HomePageStarredEntities",
+    title: "Your Starred Entities",
+    components: () => import('./esm/index-f5981b27.esm.js')
+  })
+);
+const HeaderWorldClock = homePlugin.provide(
+  createComponentExtension({
+    name: "HeaderWorldClock",
+    component: {
+      lazy: () => import('./esm/index-59fc0760.esm.js').then(
+        (m) => m.HeaderWorldClock
+      )
+    }
+  })
+);
 
 const Form = withTheme(require("@rjsf/material-ui").Theme);
 const useStyles$3 = makeStyles(
@@ -150,44 +255,60 @@ const CustomHomepageButtons = (props) => {
     numWidgets,
     clearLayout,
     setAddWidgetDialogOpen,
-    changeEditMode
+    changeEditMode,
+    defaultConfigAvailable,
+    restoreDefault
   } = props;
   const styles = useStyles$2();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, !editMode && numWidgets > 0 ? /* @__PURE__ */ React.createElement(
-    Button$1,
+    Button,
     {
       variant: "contained",
       color: "primary",
       onClick: () => changeEditMode(true),
+      size: "small",
       startIcon: /* @__PURE__ */ React.createElement(EditIcon, null)
     },
     "Edit"
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, numWidgets > 0 && /* @__PURE__ */ React.createElement(
-    Button$1,
+  ) : /* @__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"
+    "Clear all"
   ), /* @__PURE__ */ React.createElement(
-    Button$1,
+    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$1,
+    Button,
     {
       className: styles.contentHeaderBtn,
       variant: "contained",
       color: "primary",
       onClick: () => changeEditMode(false),
+      size: "small",
       startIcon: /* @__PURE__ */ React.createElement(SaveIcon, null)
     },
     "Save"
@@ -243,10 +364,14 @@ const useStyles$1 = makeStyles(
       marginLeft: theme.spacing(2)
     },
     widgetWrapper: {
-      "& > *:first-child": {
+      overflow: "hidden",
+      '& > div[class*="MuiCard-root"]': {
         width: "100%",
         height: "100%"
       },
+      '& div[class*="MuiCardContent-root"]': {
+        overflow: "auto"
+      },
       "& + .react-grid-placeholder": {
         backgroundColor: theme.palette.primary.light
       },
@@ -347,6 +472,7 @@ const availableWidgetsFilter = (elements) => {
 const CustomHomepageGrid = (props) => {
   var _a;
   const styles = useStyles$1();
+  const theme = useTheme();
   const availableWidgets = useElementFilter(
     props.children,
     availableWidgetsFilter,
@@ -426,6 +552,9 @@ const CustomHomepageGrid = (props) => {
       setWidgets(newWidgets);
     }
   };
+  const handleRestoreDefaultConfig = () => {
+    setWidgets(defaultLayout);
+  };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, /* @__PURE__ */ React.createElement(
     CustomHomepageButtons,
     {
@@ -433,7 +562,9 @@ const CustomHomepageGrid = (props) => {
       numWidgets: widgets.length,
       clearLayout,
       setAddWidgetDialogOpen,
-      changeEditMode
+      changeEditMode,
+      defaultConfigAvailable: props.config !== void 0,
+      restoreDefault: handleRestoreDefaultConfig
     }
   )), /* @__PURE__ */ React.createElement(
     Dialog,
@@ -447,10 +578,15 @@ const CustomHomepageGrid = (props) => {
     {
       className: styles.responsiveGrid,
       measureBeforeMount: true,
-      compactType: "horizontal",
+      compactType: props.compactType,
+      style: props.style,
+      allowOverlap: props.allowOverlap,
+      preventCollision: props.preventCollision,
       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 },
+      containerPadding: props.containerPadding,
+      margin: props.containerMargin,
+      breakpoints: props.breakpoints ? props.breakpoints : theme.breakpoints.values,
+      cols: props.cols ? props.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) }
@@ -489,187 +625,6 @@ const CustomHomepageGrid = (props) => {
   ));
 };
 
-function createCardExtension(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((componentParts) => {
-        return (props) => {
-          return /* @__PURE__ */ React.createElement(
-            CardExtension,
-            {
-              ...props,
-              ...componentParts,
-              title: props.title || title,
-              isCustomizable
-            }
-          );
-        };
-      })
-    }
-  });
-}
-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"
-});
-
-const homePlugin = createPlugin({
-  id: "home",
-  routes: {
-    root: rootRouteRef
-  }
-});
-const HomepageCompositionRoot = homePlugin.provide(
-  createRoutableExtension({
-    name: "HomepageCompositionRoot",
-    component: () => import('./esm/index-966fb783.esm.js').then((m) => m.HomepageCompositionRoot),
-    mountPoint: rootRouteRef
-  })
-);
-const ComponentAccordion = homePlugin.provide(
-  createComponentExtension({
-    name: "ComponentAccordion",
-    component: {
-      lazy: () => import('./esm/index-287238a7.esm.js').then((m) => m.ComponentAccordion)
-    }
-  })
-);
-const ComponentTabs = homePlugin.provide(
-  createComponentExtension({
-    name: "ComponentTabs",
-    component: {
-      lazy: () => import('./esm/index-287238a7.esm.js').then((m) => m.ComponentTabs)
-    }
-  })
-);
-const ComponentTab = homePlugin.provide(
-  createComponentExtension({
-    name: "ComponentTab",
-    component: {
-      lazy: () => import('./esm/index-287238a7.esm.js').then((m) => m.ComponentTab)
-    }
-  })
-);
-const WelcomeTitle = homePlugin.provide(
-  createComponentExtension({
-    name: "WelcomeTitle",
-    component: {
-      lazy: () => import('./esm/index-87a51b51.esm.js').then((m) => m.WelcomeTitle)
-    }
-  })
-);
-const HomePageCompanyLogo = homePlugin.provide(
-  createComponentExtension({
-    name: "CompanyLogo",
-    component: {
-      lazy: () => import('./esm/index-476343c1.esm.js').then((m) => m.CompanyLogo)
-    }
-  })
-);
-const HomePageRandomJoke = homePlugin.provide(
-  createCardExtension({
-    name: "HomePageRandomJoke",
-    title: "Random Joke",
-    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(
-  createCardExtension({
-    name: "HomePageToolkit",
-    title: "Toolkit",
-    components: () => import('./esm/index-40d9ffac.esm.js')
-  })
-);
-const HomePageStarredEntities = homePlugin.provide(
-  createCardExtension({
-    name: "HomePageStarredEntities",
-    title: "Your Starred Entities",
-    components: () => import('./esm/index-f5981b27.esm.js')
-  })
-);
-const HeaderWorldClock = homePlugin.provide(
-  createComponentExtension({
-    name: "HeaderWorldClock",
-    component: {
-      lazy: () => import('./esm/index-59fc0760.esm.js').then(
-        (m) => m.HeaderWorldClock
-      )
-    }
-  })
-);
-
 const TemplateBackstageLogo = (props) => {
   return /* @__PURE__ */ React.createElement(
     "svg",
@@ -716,5 +671,8 @@ const TemplateBackstageLogoIcon = () => {
   );
 };
 
+const createCardExtension = createCardExtension$1;
+const SettingsModal = SettingsModal$1;
+
 export { ComponentAccordion, ComponentTab, ComponentTabs, CustomHomepageGrid, HeaderWorldClock, HomePageCompanyLogo, HomePageRandomJoke, HomePageStarredEntities, HomePageToolkit, HomepageCompositionRoot, SettingsModal, TemplateBackstageLogo, TemplateBackstageLogoIcon, WelcomeTitle, createCardExtension, homePlugin };
 //# sourceMappingURL=index.esm.js.map