@red-hat-developer-hub/backstage-plugin-dynamic-home-page 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @red-hat-developer-hub/backstage-plugin-dynamic-home-page
 
+## 1.2.0
+
+### Minor Changes
+
+- a75760c: add the ability to let users customize their homepage grid layout using the [Backstage Customizable homepage component](https://github.com/backstage/backstage/blob/master/plugins/home/README.md#customizable-home-page).
+
+  This change does not affect the original `HomePage` as it introduces this new capability through new components. So, the user has a choice of choosing its HomePage implementation via the plugin configuration (dynamic routes).
+
+### Patch Changes
+
+- 1a25bba: Updated dependency `react-router-dom` to `6.30.0`.
+- 3dce00f: Updated dependency `react-router-dom` to `6.29.0`.
+- 680ede5: Updated dependency `@mui/icons-material` to `5.16.14`.
+  Updated dependency `@mui/styles` to `5.16.14`.
+  Updated dependency `@mui/material` to `5.16.14`.
+  Updated dependency `@mui/styled-engine` to `5.16.14`.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/components/CustomizableGrid.esm.js

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { ErrorBoundary } from '@backstage/core-components';
+import { CustomHomepageGrid } from '@backstage/plugin-home';
+import { makeStyles } from 'tss-react/mui';
+import 'react-grid-layout/css/styles.css';
+
+const useStyles = makeStyles()({
+  // Make card content scrollable (so that cards don't overlap)
+  cardWrapper: {
+    '& > div[class*="MuiCard-root"]': {
+      width: "100%",
+      height: "100%"
+    },
+    '& div[class*="MuiCardContent-root"]': {
+      overflow: "auto"
+    }
+  }
+});
+const CustomizableGrid = (props) => {
+  const { classes } = useStyles();
+  const cards = useMemo(() => {
+    return props.mountPoints.map((mountPoint, index) => {
+      const id = (index + 1).toString();
+      const layouts = {};
+      if (mountPoint.config?.layouts) {
+        for (const [breakpoint, layout] of Object.entries(
+          mountPoint.config.layouts
+        )) {
+          layouts[breakpoint] = {
+            i: id,
+            x: layout.x ?? 0,
+            y: layout.y ?? 0,
+            w: layout.w ?? 12,
+            h: layout.h ?? 4,
+            isDraggable: false,
+            isResizable: false
+          };
+        }
+      } else {
+        ["xl", "lg", "md", "sm", "xs", "xxs"].forEach((breakpoint) => {
+          layouts[breakpoint] = {
+            i: id,
+            x: 0,
+            y: 0,
+            w: 12,
+            h: 4,
+            isDraggable: false,
+            isResizable: false
+          };
+        });
+      }
+      return {
+        id,
+        Component: mountPoint.Component,
+        props: mountPoint.config?.props,
+        layouts
+      };
+    });
+  }, [props.mountPoints]);
+  const children = useMemo(() => {
+    return cards.map((card) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        key: card.id,
+        "data-cardid": card.id,
+        "data-testid": `home-page card ${card.id}`,
+        "data-layout": JSON.stringify(card.layouts),
+        className: classes.cardWrapper
+      },
+      /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(card.Component, { ...card.props }))
+    ));
+  }, [cards, classes.cardWrapper]);
+  return /* @__PURE__ */ React.createElement(CustomHomepageGrid, null, children);
+};
+
+export { CustomizableGrid };
+//# sourceMappingURL=CustomizableGrid.esm.js.map

package/dist/components/CustomizableGrid.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizableGrid.esm.js","sources":["../../src/components/CustomizableGrid.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// This complete read-only home page grid picks up the idea and styles from\n// https://github.com/backstage/backstage/blob/master/plugins/home\n// Esp. from the CustomHomepageGrid component:\n// https://github.com/backstage/backstage/blob/master/plugins/home/src/components/CustomHomepage/CustomHomepageGrid.tsx\n// but without the drag and drop functionality.\n\nimport React, { useMemo } from 'react';\nimport { Layout } from 'react-grid-layout';\n\nimport { ErrorBoundary } from '@backstage/core-components';\nimport { CustomHomepageGrid } from '@backstage/plugin-home';\n\nimport { makeStyles } from 'tss-react/mui';\n\n// Removes the doubled scrollbar\nimport 'react-grid-layout/css/styles.css';\n\nimport { HomePageCardMountPoint } from '../types';\n\ninterface Card {\n  id: string;\n  Component: React.ComponentType<any>;\n  props?: Record<string, any>;\n  layouts: Record<string, Layout>;\n}\n\nconst useStyles = makeStyles()({\n  // Make card content scrollable (so that cards don't overlap)\n  cardWrapper: {\n    '& > div[class*=\"MuiCard-root\"]': {\n      width: '100%',\n      height: '100%',\n    },\n    '& div[class*=\"MuiCardContent-root\"]': {\n      overflow: 'auto',\n    },\n  },\n});\n\n/**\n * @public\n */\nexport interface CustomizableGridProps {\n  mountPoints: HomePageCardMountPoint[];\n  breakpoints?: Record<string, number>;\n  cols?: Record<string, number>;\n}\n\n/**\n * @public\n */\nexport const CustomizableGrid = (props: CustomizableGridProps) => {\n  const { classes } = useStyles();\n\n  const cards = useMemo<Card[]>(() => {\n    return props.mountPoints.map<Card>((mountPoint, index) => {\n      const id = (index + 1).toString();\n      const layouts: Record<string, Layout> = {};\n\n      if (mountPoint.config?.layouts) {\n        for (const [breakpoint, layout] of Object.entries(\n          mountPoint.config.layouts,\n        )) {\n          layouts[breakpoint] = {\n            i: id,\n            x: layout.x ?? 0,\n            y: layout.y ?? 0,\n            w: layout.w ?? 12,\n            h: layout.h ?? 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        }\n      } else {\n        // Default layout for cards without a layout configuration\n        ['xl', 'lg', 'md', 'sm', 'xs', 'xxs'].forEach(breakpoint => {\n          layouts[breakpoint] = {\n            i: id,\n            x: 0,\n            y: 0,\n            w: 12,\n            h: 4,\n            isDraggable: false,\n            isResizable: false,\n          };\n        });\n      }\n\n      return {\n        id,\n        Component: mountPoint.Component,\n        props: mountPoint.config?.props,\n        layouts,\n      };\n    });\n  }, [props.mountPoints]);\n\n  const children = useMemo(() => {\n    return cards.map(card => (\n      <div\n        key={card.id}\n        data-cardid={card.id}\n        data-testid={`home-page card ${card.id}`}\n        data-layout={JSON.stringify(card.layouts)}\n        className={classes.cardWrapper}\n      >\n        <ErrorBoundary>\n          <card.Component {...card.props} />\n        </ErrorBoundary>\n      </div>\n    ));\n  }, [cards, classes.cardWrapper]);\n\n  return <CustomHomepageGrid>{children}</CustomHomepageGrid>;\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CustomizableHomePage.esm.js

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import { Page, Content, EmptyState } from '@backstage/core-components';
+import { Header } from './Header.esm.js';
+import { CustomizableGrid } from './CustomizableGrid.esm.js';
+
+const CustomizableHomePage = (props) => {
+  const filteredAndSortedHomePageCards = useMemo(() => {
+    if (!props.cards) {
+      return [];
+    }
+    const filteredAndSorted = props.cards.filter(
+      (card) => card.enabled !== false && (!card.config?.priority || card.config.priority >= 0)
+    );
+    filteredAndSorted.sort(
+      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0)
+    );
+    return filteredAndSorted;
+  }, [props.cards]);
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { ...props }), /* @__PURE__ */ React.createElement(Content, null, filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ React.createElement(
+    EmptyState,
+    {
+      title: "No home page cards (mount points) configured or found.",
+      missing: "content"
+    }
+  ) : /* @__PURE__ */ React.createElement(CustomizableGrid, { mountPoints: filteredAndSortedHomePageCards })));
+};
+
+export { CustomizableHomePage };
+//# sourceMappingURL=CustomizableHomePage.esm.js.map

package/dist/components/CustomizableHomePage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizableHomePage.esm.js","sources":["../../src/components/CustomizableHomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { CustomizableGrid } from './CustomizableGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const CustomizableHomePage = (props: HomePageProps) => {\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState\n            title=\"No home page cards (mount points) configured or found.\"\n            missing=\"content\"\n          />\n        ) : (\n          <CustomizableGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6Ba,MAAA,oBAAA,GAAuB,CAAC,KAAyB,KAAA;AAC5D,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,kBACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CACnB,kBAAA,KAAA,CAAA,aAAA,CAAC,OACE,EAAA,IAAA,EAAA,8BAAA,CAA+B,WAAW,CACzC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,wDAAA;AAAA,MACN,OAAQ,EAAA;AAAA;AAAA,sBAGT,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA,EAAiB,WAAa,EAAA,8BAAA,EAAgC,CAEnE,CACF,CAAA;AAEJ;;;;"}

package/dist/components/DynamicCustomizableHomePage.esm.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useDynamicHomePageCards } from '../hooks/useDynamicHomePageCards.esm.js';
+import { CustomizableHomePage } from './CustomizableHomePage.esm.js';
+
+const DynamicCustomizableHomePage = (props) => {
+  const cards = useDynamicHomePageCards();
+  return /* @__PURE__ */ React.createElement(CustomizableHomePage, { ...props, cards });
+};
+
+export { DynamicCustomizableHomePage };
+//# sourceMappingURL=DynamicCustomizableHomePage.esm.js.map

package/dist/components/DynamicCustomizableHomePage.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicCustomizableHomePage.esm.js","sources":["../../src/components/DynamicCustomizableHomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport type { ClockConfig } from '@backstage/plugin-home';\n\nimport { useDynamicHomePageCards } from '../hooks/useDynamicHomePageCards';\nimport { CustomizableHomePage } from './CustomizableHomePage';\nimport type { LocalClockProps } from './LocalClock';\n\n/**\n * This type is similar to Omit&lt;HomePageProps, 'cards'&gt;.\n * We redefine it here to avoid the need to export HomePageProps to the API export!\n * @public\n */\nexport interface DynamicCustomizableHomePageProps {\n  title?: string;\n  personalizedTitle?: string;\n  pageTitle?: string;\n  subtitle?: string;\n  localClock?: LocalClockProps;\n  worldClocks?: ClockConfig[];\n}\n\n/**\n * @public\n */\nexport const DynamicCustomizableHomePage = (\n  props: DynamicCustomizableHomePageProps,\n) => {\n  const cards = useDynamicHomePageCards();\n\n  return <CustomizableHomePage {...props} cards={cards} />;\n};\n"],"names":[],"mappings":";;;;AAyCa,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,QAAQ,uBAAwB,EAAA;AAEtC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,EAAsB,GAAG,KAAA,EAAO,KAAc,EAAA,CAAA;AACxD;;;;"}

package/dist/components/Header.esm.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useApi, identityApiRef } from '@backstage/core-plugin-api';
+import { Header as Header$1 } from '@backstage/core-components';
+import { HeaderWorldClock } from '@backstage/plugin-home';
+import useAsync from 'react-use/esm/useAsync';
+import { LocalClock } from './LocalClock.esm.js';
+
+const getPersonalizedTitle = (title, displayName) => {
+  const firstName = displayName?.split(" ")[0];
+  const replacedTitle = title.replace("{{firstName}}", firstName ?? "").replace("{{displayName}}", displayName ?? "");
+  return replacedTitle;
+};
+const Header = (props) => {
+  const identityApi = useApi(identityApiRef);
+  const { value: profile } = useAsync(() => identityApi.getProfileInfo());
+  const title = React.useMemo(() => {
+    if (profile?.displayName && props.personalizedTitle) {
+      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);
+    } else if (props.title) {
+      return getPersonalizedTitle(props.title, profile?.displayName);
+    }
+    return getPersonalizedTitle("Welcome back!", profile?.displayName);
+  }, [profile?.displayName, props.personalizedTitle, props.title]);
+  const subtitle = React.useMemo(() => {
+    return props.subtitle ? getPersonalizedTitle(props.subtitle, profile?.displayName) : undefined;
+  }, [props.subtitle, profile?.displayName]);
+  return /* @__PURE__ */ React.createElement(
+    Header$1,
+    {
+      title,
+      subtitle,
+      pageTitleOverride: props.pageTitle
+    },
+    props.localClock?.format && props.localClock?.format !== "none" ? /* @__PURE__ */ React.createElement(
+      LocalClock,
+      {
+        label: props.localClock?.label ?? (props.worldClocks && props.worldClocks.length > 0 ? "Local" : undefined),
+        format: props.localClock?.format ?? (props.worldClocks && props.worldClocks.length > 0 ? "time" : undefined),
+        lang: props.localClock?.lang
+      }
+    ) : null,
+    props.worldClocks && props.worldClocks.length > 0 ? /* @__PURE__ */ React.createElement(HeaderWorldClock, { clockConfigs: props.worldClocks }) : null
+  );
+};
+
+export { Header, getPersonalizedTitle };
+//# sourceMappingURL=Header.esm.js.map

package/dist/components/Header.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.esm.js","sources":["../../src/components/Header.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Header as BackstageHeader } from '@backstage/core-components';\nimport { ClockConfig, HeaderWorldClock } from '@backstage/plugin-home';\n\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { LocalClock, LocalClockProps } from './LocalClock';\n\nexport interface HeaderProps {\n  title?: string;\n  personalizedTitle?: string;\n  pageTitle?: string;\n  subtitle?: string;\n  localClock?: LocalClockProps;\n  worldClocks?: ClockConfig[];\n}\n\n// I kept this because I hope that we will add this soon or at least in Dynamic Home Page plugin 1.2 ~ RHDH 1.6.\n// const getTimeBasedTitle = (): string => {\n//   const currentHour = new Date(Date.now()).getHours();\n//   if (currentHour < 12) {\n//     return 'Good morning {{firstName}}';\n//   } else if (currentHour < 17) {\n//     return 'Good afternoon {{firstName}}';\n//   }\n//   return 'Good evening {{firstName}}';\n// };\n\nexport const getPersonalizedTitle = (\n  title: string,\n  displayName: string | undefined,\n) => {\n  const firstName = displayName?.split(' ')[0];\n  const replacedTitle = title\n    .replace('{{firstName}}', firstName ?? '')\n    .replace('{{displayName}}', displayName ?? '');\n  return replacedTitle;\n};\n\nexport const Header = (props: HeaderProps) => {\n  const identityApi = useApi(identityApiRef);\n  const { value: profile } = useAsync(() => identityApi.getProfileInfo());\n\n  const title = React.useMemo<string>(() => {\n    if (profile?.displayName && props.personalizedTitle) {\n      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);\n    } else if (props.title) {\n      return getPersonalizedTitle(props.title, profile?.displayName);\n    }\n    // return getPersonalizedTitle(getTimeBasedTitle(), profile?.displayName);\n    return getPersonalizedTitle('Welcome back!', profile?.displayName);\n  }, [profile?.displayName, props.personalizedTitle, props.title]);\n\n  const subtitle = React.useMemo<string | undefined>(() => {\n    return props.subtitle\n      ? getPersonalizedTitle(props.subtitle, profile?.displayName)\n      : undefined;\n  }, [props.subtitle, profile?.displayName]);\n\n  return (\n    <BackstageHeader\n      title={title}\n      subtitle={subtitle}\n      pageTitleOverride={props.pageTitle}\n    >\n      {props.localClock?.format && props.localClock?.format !== 'none' ? (\n        <LocalClock\n          label={\n            props.localClock?.label ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? 'Local'\n              : undefined)\n          }\n          format={\n            props.localClock?.format ??\n            (props.worldClocks && props.worldClocks.length > 0\n              ? 'time'\n              : undefined)\n          }\n          lang={props.localClock?.lang}\n        />\n      ) : null}\n\n      {props.worldClocks && props.worldClocks.length > 0 ? (\n        <HeaderWorldClock clockConfigs={props.worldClocks} />\n      ) : null}\n    </BackstageHeader>\n  );\n};\n"],"names":["BackstageHeader"],"mappings":";;;;;;;AA8Ca,MAAA,oBAAA,GAAuB,CAClC,KAAA,EACA,WACG,KAAA;AACH,EAAA,MAAM,SAAY,GAAA,WAAA,EAAa,KAAM,CAAA,GAAG,EAAE,CAAC,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,KACnB,CAAA,OAAA,CAAQ,eAAiB,EAAA,SAAA,IAAa,EAAE,CACxC,CAAA,OAAA,CAAQ,iBAAmB,EAAA,WAAA,IAAe,EAAE,CAAA;AAC/C,EAAO,OAAA,aAAA;AACT;AAEa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAM,MAAA,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAI,SAAS,MAAM,WAAA,CAAY,gBAAgB,CAAA;AAEtE,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAgB,MAAM;AACxC,IAAI,IAAA,OAAA,EAAS,WAAe,IAAA,KAAA,CAAM,iBAAmB,EAAA;AACnD,MAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,iBAAmB,EAAA,OAAA,CAAQ,WAAW,CAAA;AAAA,KAC1E,MAAA,IAAW,MAAM,KAAO,EAAA;AACtB,MAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,KAAO,EAAA,OAAA,EAAS,WAAW,CAAA;AAAA;AAG/D,IAAO,OAAA,oBAAA,CAAqB,eAAiB,EAAA,OAAA,EAAS,WAAW,CAAA;AAAA,GACnE,EAAG,CAAC,OAAS,EAAA,WAAA,EAAa,MAAM,iBAAmB,EAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAE/D,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,OAAA,CAA4B,MAAM;AACvD,IAAA,OAAO,MAAM,QACT,GAAA,oBAAA,CAAqB,MAAM,QAAU,EAAA,OAAA,EAAS,WAAW,CACzD,GAAA,SAAA;AAAA,KACH,CAAC,KAAA,CAAM,QAAU,EAAA,OAAA,EAAS,WAAW,CAAC,CAAA;AAEzC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,QAAA;AAAA,MACA,mBAAmB,KAAM,CAAA;AAAA,KAAA;AAAA,IAExB,MAAM,UAAY,EAAA,MAAA,IAAU,KAAM,CAAA,UAAA,EAAY,WAAW,MACxD,mBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA,EACE,KAAM,CAAA,UAAA,EAAY,KACjB,KAAA,KAAA,CAAM,eAAe,KAAM,CAAA,WAAA,CAAY,MAAS,GAAA,CAAA,GAC7C,OACA,GAAA,SAAA,CAAA;AAAA,QAEN,MAAA,EACE,KAAM,CAAA,UAAA,EAAY,MACjB,KAAA,KAAA,CAAM,eAAe,KAAM,CAAA,WAAA,CAAY,MAAS,GAAA,CAAA,GAC7C,MACA,GAAA,SAAA,CAAA;AAAA,QAEN,IAAA,EAAM,MAAM,UAAY,EAAA;AAAA;AAAA,KAExB,GAAA,IAAA;AAAA,IAEH,KAAA,CAAM,WAAe,IAAA,KAAA,CAAM,WAAY,CAAA,MAAA,GAAS,CAC/C,mBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,YAAA,EAAc,KAAM,CAAA,WAAA,EAAa,CACjD,GAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/HomePage.esm.js

@@ -1,30 +1,9 @@
 import React, { useMemo } from 'react';
-import { useApi, identityApiRef } from '@backstage/core-plugin-api';
-import { Page, Header, Content, EmptyState } from '@backstage/core-components';
-import { HeaderWorldClock } from '@backstage/plugin-home';
-import useAsync from 'react-use/esm/useAsync';
+import { Page, Content, EmptyState } from '@backstage/core-components';
+import { Header } from './Header.esm.js';
 import { ReadOnlyGrid } from './ReadOnlyGrid.esm.js';
-import { LocalClock } from './LocalClock.esm.js';
 
-const getPersonalizedTitle = (title, displayName) => {
-  const firstName = displayName?.split(" ")[0];
-  const replacedTitle = title.replace("{{firstName}}", firstName ?? "").replace("{{displayName}}", displayName ?? "");
-  return replacedTitle;
-};
 const HomePage = (props) => {
-  const identityApi = useApi(identityApiRef);
-  const { value: profile } = useAsync(() => identityApi.getProfileInfo());
-  const title = React.useMemo(() => {
-    if (profile?.displayName && props.personalizedTitle) {
-      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);
-    } else if (props.title) {
-      return getPersonalizedTitle(props.title, profile?.displayName);
-    }
-    return getPersonalizedTitle("Welcome back!", profile?.displayName);
-  }, [profile?.displayName, props.personalizedTitle, props.title]);
-  const subtitle = React.useMemo(() => {
-    return props.subtitle ? getPersonalizedTitle(props.subtitle, profile?.displayName) : undefined;
-  }, [props.subtitle, profile?.displayName]);
   const filteredAndSortedHomePageCards = useMemo(() => {
     if (!props.cards) {
       return [];
@@ -37,23 +16,7 @@ const HomePage = (props) => {
     );
     return filteredAndSorted;
   }, [props.cards]);
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      title,
-      subtitle,
-      pageTitleOverride: props.pageTitle
-    },
-    props.localClock?.format && props.localClock?.format !== "none" ? /* @__PURE__ */ React.createElement(
-      LocalClock,
-      {
-        label: props.localClock?.label ?? (props.worldClocks && props.worldClocks.length > 0 ? "Local" : undefined),
-        format: props.localClock?.format ?? (props.worldClocks && props.worldClocks.length > 0 ? "time" : undefined),
-        lang: props.localClock?.lang
-      }
-    ) : null,
-    props.worldClocks && props.worldClocks.length > 0 ? /* @__PURE__ */ React.createElement(HeaderWorldClock, { clockConfigs: props.worldClocks }) : null
-  ), /* @__PURE__ */ React.createElement(Content, null, filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { ...props }), /* @__PURE__ */ React.createElement(Content, null, filteredAndSortedHomePageCards.length === 0 ? /* @__PURE__ */ React.createElement(
     EmptyState,
     {
       title: "No home page cards (mount points) configured or found.",

package/dist/components/HomePage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport { identityApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Content, EmptyState, Header, Page } from '@backstage/core-components';\nimport { ClockConfig, HeaderWorldClock } from '@backstage/plugin-home';\n\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { HomePageCardMountPoint } from '../types';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\nimport { LocalClock, LocalClockProps } from './LocalClock';\n\nexport interface HomePageProps {\n  title?: string;\n  personalizedTitle?: string;\n  pageTitle?: string;\n  subtitle?: string;\n  localClock?: LocalClockProps;\n  worldClocks?: ClockConfig[];\n  cards?: HomePageCardMountPoint[];\n}\n\n// I kept this because I hope that we will add this soon or at least in Dynamic Home Page plugin 1.2 ~ RHDH 1.6.\n// const getTimeBasedTitle = (): string => {\n//   const currentHour = new Date(Date.now()).getHours();\n//   if (currentHour < 12) {\n//     return 'Good morning {{firstName}}';\n//   } else if (currentHour < 17) {\n//     return 'Good afternoon {{firstName}}';\n//   }\n//   return 'Good evening {{firstName}}';\n// };\n\nconst getPersonalizedTitle = (\n  title: string,\n  displayName: string | undefined,\n) => {\n  const firstName = displayName?.split(' ')[0];\n  const replacedTitle = title\n    .replace('{{firstName}}', firstName ?? '')\n    .replace('{{displayName}}', displayName ?? '');\n  return replacedTitle;\n};\n\nexport const HomePage = (props: HomePageProps) => {\n  const identityApi = useApi(identityApiRef);\n  const { value: profile } = useAsync(() => identityApi.getProfileInfo());\n\n  const title = React.useMemo<string>(() => {\n    if (profile?.displayName && props.personalizedTitle) {\n      return getPersonalizedTitle(props.personalizedTitle, profile.displayName);\n    } else if (props.title) {\n      return getPersonalizedTitle(props.title, profile?.displayName);\n    }\n    // return getPersonalizedTitle(getTimeBasedTitle(), profile?.displayName);\n    return getPersonalizedTitle('Welcome back!', profile?.displayName);\n  }, [profile?.displayName, props.personalizedTitle, props.title]);\n\n  const subtitle = React.useMemo<string | undefined>(() => {\n    return props.subtitle\n      ? getPersonalizedTitle(props.subtitle, profile?.displayName)\n      : undefined;\n  }, [props.subtitle, profile?.displayName]);\n\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header\n        title={title}\n        subtitle={subtitle}\n        pageTitleOverride={props.pageTitle}\n      >\n        {props.localClock?.format && props.localClock?.format !== 'none' ? (\n          <LocalClock\n            label={\n              props.localClock?.label ??\n              (props.worldClocks && props.worldClocks.length > 0\n                ? 'Local'\n                : undefined)\n            }\n            format={\n              props.localClock?.format ??\n              (props.worldClocks && props.worldClocks.length > 0\n                ? 'time'\n                : undefined)\n            }\n            lang={props.localClock?.lang}\n          />\n        ) : null}\n\n        {props.worldClocks && props.worldClocks.length > 0 ? (\n          <HeaderWorldClock clockConfigs={props.worldClocks} />\n        ) : null}\n      </Header>\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState\n            title=\"No home page cards (mount points) configured or found.\"\n            missing=\"content\"\n          />\n        ) : (\n          <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"HomePage.esm.js","sources":["../../src/components/HomePage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport { Content, EmptyState, Page } from '@backstage/core-components';\n\nimport { HomePageCardMountPoint } from '../types';\n\nimport { Header, HeaderProps } from './Header';\nimport { ReadOnlyGrid } from './ReadOnlyGrid';\n\nexport interface HomePageProps extends HeaderProps {\n  cards?: HomePageCardMountPoint[];\n}\n\nexport const HomePage = (props: HomePageProps) => {\n  const filteredAndSortedHomePageCards = useMemo(() => {\n    if (!props.cards) {\n      return [];\n    }\n\n    const filteredAndSorted = props.cards.filter(\n      card =>\n        card.enabled !== false &&\n        (!card.config?.priority || card.config.priority >= 0),\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [props.cards]);\n\n  return (\n    <Page themeId=\"home\">\n      <Header {...props} />\n      <Content>\n        {filteredAndSortedHomePageCards.length === 0 ? (\n          <EmptyState\n            title=\"No home page cards (mount points) configured or found.\"\n            missing=\"content\"\n          />\n        ) : (\n          <ReadOnlyGrid mountPoints={filteredAndSortedHomePageCards} />\n        )}\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;AA6Ba,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAM,MAAA,8BAAA,GAAiC,QAAQ,MAAM;AACnD,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,MAAM,KAAM,CAAA,MAAA;AAAA,MACpC,CAAA,IAAA,KACE,IAAK,CAAA,OAAA,KAAY,KAChB,KAAA,CAAC,KAAK,MAAQ,EAAA,QAAA,IAAY,IAAK,CAAA,MAAA,CAAO,QAAY,IAAA,CAAA;AAAA,KACvD;AAEA,IAAkB,iBAAA,CAAA,IAAA;AAAA,MAChB,CAAC,GAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAQ,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,MAAA,EAAQ,QAAY,IAAA,CAAA;AAAA,KAC/D;AAEA,IAAO,OAAA,iBAAA;AAAA,GACN,EAAA,CAAC,KAAM,CAAA,KAAK,CAAC,CAAA;AAEhB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,kBACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,CACnB,kBAAA,KAAA,CAAA,aAAA,CAAC,OACE,EAAA,IAAA,EAAA,8BAAA,CAA+B,WAAW,CACzC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,wDAAA;AAAA,MACN,OAAQ,EAAA;AAAA;AAAA,sBAGT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,WAAa,EAAA,8BAAA,EAAgC,CAE/D,CACF,CAAA;AAEJ;;;;"}

package/dist/index.d.ts

@@ -34,6 +34,20 @@ interface DynamicHomePageProps {
     worldClocks?: ClockConfig[];
 }
 
+/**
+ * This type is similar to Omit<HomePageProps, 'cards'>.
+ * We redefine it here to avoid the need to export HomePageProps to the API export!
+ * @public
+ */
+interface DynamicCustomizableHomePageProps {
+    title?: string;
+    personalizedTitle?: string;
+    pageTitle?: string;
+    subtitle?: string;
+    localClock?: LocalClockProps;
+    worldClocks?: ClockConfig[];
+}
+
 /**
  * @public
  */
@@ -94,6 +108,11 @@ declare const dynamicHomePagePlugin: _backstage_core_plugin_api.BackstagePlugin<
  * @public
  */
 declare const DynamicHomePage: React.ComponentType<DynamicHomePageProps>;
+/**
+ * Customizable Dynamic Home Page
+ * @public
+ */
+declare const DynamicCustomizableHomePage: React.ComponentType<DynamicCustomizableHomePageProps>;
 /**
  * @public
  */
@@ -149,4 +168,4 @@ declare const VisitListener: () => React.JSX.Element | null;
  */
 declare const WorldClock: ({ worldClocks, timeFormat, justifyContent, }: WorldClockProps) => React.JSX.Element;
 
-export { CatalogStarredEntitiesCard, DynamicHomePage, type DynamicHomePageProps, FeaturedDocsCard, Headline, type HeadlineProps, JokeCard, type LocalClockProps, Markdown, MarkdownCard, type MarkdownCardProps, type MarkdownProps, Placeholder, type PlaceholderProps, QuickAccessCard, type QuickAccessCardProps, RecentlyVisitedCard, SearchBar, type SearchBarProps, TopVisitedCard, VisitListener, WorldClock, type WorldClockProps, dynamicHomePagePlugin };
+export { CatalogStarredEntitiesCard, DynamicCustomizableHomePage, type DynamicCustomizableHomePageProps, DynamicHomePage, type DynamicHomePageProps, FeaturedDocsCard, Headline, type HeadlineProps, JokeCard, type LocalClockProps, Markdown, MarkdownCard, type MarkdownCardProps, type MarkdownProps, Placeholder, type PlaceholderProps, QuickAccessCard, type QuickAccessCardProps, RecentlyVisitedCard, SearchBar, type SearchBarProps, TopVisitedCard, VisitListener, WorldClock, type WorldClockProps, dynamicHomePagePlugin };

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-export { CatalogStarredEntitiesCard, DynamicHomePage, FeaturedDocsCard, Headline, JokeCard, Markdown, MarkdownCard, Placeholder, QuickAccessCard, RecentlyVisitedCard, SearchBar, TopVisitedCard, VisitListener, WorldClock, dynamicHomePagePlugin } from './plugin.esm.js';
+export { CatalogStarredEntitiesCard, DynamicCustomizableHomePage, DynamicHomePage, FeaturedDocsCard, Headline, JokeCard, Markdown, MarkdownCard, Placeholder, QuickAccessCard, RecentlyVisitedCard, SearchBar, TopVisitedCard, VisitListener, WorldClock, dynamicHomePagePlugin } from './plugin.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/plugin.esm.js

@@ -35,6 +35,15 @@ const DynamicHomePage = dynamicHomePagePlugin.provide(
     mountPoint: rootRouteRef
   })
 );
+const DynamicCustomizableHomePage = dynamicHomePagePlugin.provide(
+  createRoutableExtension({
+    name: "DynamicCustomizableHomePage",
+    component: () => import('./components/DynamicCustomizableHomePage.esm.js').then(
+      (m) => m.DynamicCustomizableHomePage
+    ),
+    mountPoint: rootRouteRef
+  })
+);
 const SearchBar = dynamicHomePagePlugin.provide(
   createComponentExtension({
     name: "SearchBar",
@@ -140,5 +149,5 @@ const WorldClock = dynamicHomePagePlugin.provide(
   })
 );
 
-export { CatalogStarredEntitiesCard, DynamicHomePage, FeaturedDocsCard, Headline, JokeCard, Markdown, MarkdownCard, Placeholder, QuickAccessCard, RecentlyVisitedCard, SearchBar, TopVisitedCard, VisitListener, WorldClock, dynamicHomePagePlugin };
+export { CatalogStarredEntitiesCard, DynamicCustomizableHomePage, DynamicHomePage, FeaturedDocsCard, Headline, JokeCard, Markdown, MarkdownCard, Placeholder, QuickAccessCard, RecentlyVisitedCard, SearchBar, TopVisitedCard, VisitListener, WorldClock, dynamicHomePagePlugin };
 //# sourceMappingURL=plugin.esm.js.map

package/dist/plugin.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport {\n  configApiRef,\n  createApiFactory,\n  createComponentExtension,\n  createPlugin,\n  createRoutableExtension,\n  discoveryApiRef,\n  identityApiRef,\n  storageApiRef,\n} from '@backstage/core-plugin-api';\n\nimport {\n  type StarredEntitiesProps,\n  type VisitedByTypeProps,\n  type FeaturedDocsCardProps,\n  visitsApiRef,\n  VisitsStorageApi,\n} from '@backstage/plugin-home';\n\nimport { QuickAccessApiClient, quickAccessApiRef } from './api';\nimport { rootRouteRef } from './routes';\n\nimport type { DynamicHomePageProps } from './components/DynamicHomePage';\nimport type { SearchBarProps } from './components/SearchBar';\nimport type { QuickAccessCardProps } from './components/QuickAccessCard';\nimport type { HeadlineProps } from './components/Headline';\nimport type { MarkdownProps } from './components/Markdown';\nimport type { MarkdownCardProps } from './components/MarkdownCard';\nimport type { PlaceholderProps } from './components/Placeholder';\n\nexport type { DynamicHomePageProps } from './components/DynamicHomePage';\nexport type { SearchBarProps } from './components/SearchBar';\nexport type { QuickAccessCardProps } from './components/QuickAccessCard';\nexport type { HeadlineProps } from './components/Headline';\nexport type { MarkdownProps } from './components/Markdown';\nexport type { MarkdownCardProps } from './components/MarkdownCard';\nexport type { PlaceholderProps } from './components/Placeholder';\nexport type { LocalClockProps } from './components/LocalClock';\nexport type { WorldClockProps } from './components/WorldClock';\n\n/**\n * Dynamic Home Page Plugin\n * @public\n */\nexport const dynamicHomePagePlugin = createPlugin({\n  id: 'dynamic-home-page',\n  routes: {\n    root: rootRouteRef,\n  },\n  apis: [\n    createApiFactory({\n      api: quickAccessApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        configApi: configApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, configApi, identityApi }) =>\n        new QuickAccessApiClient({ discoveryApi, configApi, identityApi }),\n    }),\n    createApiFactory({\n      api: visitsApiRef,\n      deps: {\n        storageApi: storageApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ storageApi, identityApi }) =>\n        VisitsStorageApi.create({ storageApi, identityApi }),\n    }),\n  ],\n});\n\n/**\n * Dynamic Home Page\n * @public\n */\nexport const DynamicHomePage: React.ComponentType<DynamicHomePageProps> =\n  dynamicHomePagePlugin.provide(\n    createRoutableExtension({\n      name: 'DynamicHomePage',\n      component: () =>\n        import('./components/DynamicHomePage').then(m => m.DynamicHomePage),\n      mountPoint: rootRouteRef,\n    }),\n  );\n\n/**\n * @public\n */\nexport const SearchBar: React.ComponentType<SearchBarProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'SearchBar',\n      component: {\n        lazy: () => import('./components/SearchBar').then(m => m.SearchBar),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const QuickAccessCard: React.ComponentType<QuickAccessCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'QuickAccessCard',\n      component: {\n        lazy: () =>\n          import('./components/QuickAccessCard').then(m => m.QuickAccessCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Headline: React.ComponentType<HeadlineProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'Headline',\n      component: {\n        lazy: () => import('./components/Headline').then(m => m.Headline),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Markdown: React.ComponentType<MarkdownProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'Markdown',\n      component: {\n        lazy: () => import('./components/Markdown').then(m => m.Markdown),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const MarkdownCard: React.ComponentType<MarkdownCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'MarkdownCard',\n      component: {\n        lazy: () =>\n          import('./components/MarkdownCard').then(m => m.MarkdownCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Placeholder: React.ComponentType<PlaceholderProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'MarkdownCard',\n      component: {\n        lazy: () => import('./components/Placeholder').then(m => m.Placeholder),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const CatalogStarredEntitiesCard: React.ComponentType<StarredEntitiesProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'CatalogStarredEntitiesCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageStarredEntities),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const RecentlyVisitedCard: React.ComponentType<VisitedByTypeProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'RecentlyVisitedCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageRecentlyVisited),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const TopVisitedCard: React.ComponentType<VisitedByTypeProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'TopVisitedCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageTopVisited),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const FeaturedDocsCard: React.ComponentType<FeaturedDocsCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'FeaturedDocsCard',\n      component: {\n        lazy: () =>\n          import('./components/FeaturedDocsCard').then(m => m.FeaturedDocsCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const JokeCard: React.ComponentType<{\n  defaultCategory?: 'any' | 'programming';\n}> = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'JokeCard',\n    component: {\n      lazy: () =>\n        import('@backstage/plugin-home').then(m => m.HomePageRandomJoke),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const VisitListener = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'VisitListener',\n    component: {\n      lazy: () =>\n        import('./components/VisitListener').then(m => m.VisitListener),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const WorldClock = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'WorldClock',\n    component: {\n      lazy: () => import('./components/WorldClock').then(m => m.WorldClock),\n    },\n  }),\n);\n"],"names":[],"mappings":";;;;;AA8DO,MAAM,wBAAwB,YAAa,CAAA;AAAA,EAChD,EAAI,EAAA,mBAAA;AAAA,EACJ,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA;AAAA,GACR;AAAA,EACA,IAAM,EAAA;AAAA,IACJ,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,iBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,SAAW,EAAA,YAAA;AAAA,QACX,WAAa,EAAA;AAAA,OACf;AAAA,MACA,OAAS,EAAA,CAAC,EAAE,YAAA,EAAc,SAAW,EAAA,WAAA,EACnC,KAAA,IAAI,oBAAqB,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,aAAa;AAAA,KACpE,CAAA;AAAA,IACD,gBAAiB,CAAA;AAAA,MACf,GAAK,EAAA,YAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,UAAY,EAAA,aAAA;AAAA,QACZ,WAAa,EAAA;AAAA,OACf;AAAA,MACA,OAAA,EAAS,CAAC,EAAE,UAAY,EAAA,WAAA,EACtB,KAAA,gBAAA,CAAiB,MAAO,CAAA,EAAE,UAAY,EAAA,WAAA,EAAa;AAAA,KACtD;AAAA;AAEL,CAAC;AAMM,MAAM,kBACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,uBAAwB,CAAA;AAAA,IACtB,IAAM,EAAA,iBAAA;AAAA,IACN,SAAA,EAAW,MACT,OAAO,qCAA8B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,eAAe,CAAA;AAAA,IACpE,UAAY,EAAA;AAAA,GACb;AACH;AAKK,MAAM,YACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,WAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,+BAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,SAAS;AAAA;AACpE,GACD;AACH;AAKK,MAAM,kBACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,iBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,qCAA8B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,eAAe;AAAA;AACtE,GACD;AACH;AAKK,MAAM,WACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,UAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,8BAAuB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,QAAQ;AAAA;AAClE,GACD;AACH;AAKK,MAAM,WACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,UAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,8BAAuB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,QAAQ;AAAA;AAClE,GACD;AACH;AAKK,MAAM,eACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,cAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,kCAA2B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,YAAY;AAAA;AAChE,GACD;AACH;AAKK,MAAM,cACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,cAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,iCAA0B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,WAAW;AAAA;AACxE,GACD;AACH;AAKK,MAAM,6BACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,4BAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,wBAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,uBAAuB;AAAA;AACxE,GACD;AACH;AAKK,MAAM,sBACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,qBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,wBAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,uBAAuB;AAAA;AACxE,GACD;AACH;AAKK,MAAM,iBACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,gBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,wBAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,kBAAkB;AAAA;AACnE,GACD;AACH;AAKK,MAAM,mBACX,qBAAsB,CAAA,OAAA;AAAA,EACpB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,kBAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,sCAA+B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,gBAAgB;AAAA;AACxE,GACD;AACH;AAKK,MAAM,WAER,qBAAsB,CAAA,OAAA;AAAA,EACzB,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,UAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,wBAAwB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,kBAAkB;AAAA;AACnE,GACD;AACH;AAKO,MAAM,gBAAgB,qBAAsB,CAAA,OAAA;AAAA,EACjD,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,eAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MACJ,OAAO,mCAA4B,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,aAAa;AAAA;AAClE,GACD;AACH;AAKO,MAAM,aAAa,qBAAsB,CAAA,OAAA;AAAA,EAC9C,wBAAyB,CAAA;AAAA,IACvB,IAAM,EAAA,YAAA;AAAA,IACN,SAAW,EAAA;AAAA,MACT,IAAA,EAAM,MAAM,OAAO,gCAAyB,EAAE,IAAK,CAAA,CAAA,CAAA,KAAK,EAAE,UAAU;AAAA;AACtE,GACD;AACH;;;;"}
+{"version":3,"file":"plugin.esm.js","sources":["../src/plugin.ts"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\n\nimport {\n  configApiRef,\n  createApiFactory,\n  createComponentExtension,\n  createPlugin,\n  createRoutableExtension,\n  discoveryApiRef,\n  identityApiRef,\n  storageApiRef,\n} from '@backstage/core-plugin-api';\n\nimport {\n  type StarredEntitiesProps,\n  type VisitedByTypeProps,\n  type FeaturedDocsCardProps,\n  visitsApiRef,\n  VisitsStorageApi,\n} from '@backstage/plugin-home';\n\nimport { QuickAccessApiClient, quickAccessApiRef } from './api';\nimport { rootRouteRef } from './routes';\n\nimport type { DynamicHomePageProps } from './components/DynamicHomePage';\nimport type { DynamicCustomizableHomePageProps } from './components/DynamicCustomizableHomePage';\nimport type { SearchBarProps } from './components/SearchBar';\nimport type { QuickAccessCardProps } from './components/QuickAccessCard';\nimport type { HeadlineProps } from './components/Headline';\nimport type { MarkdownProps } from './components/Markdown';\nimport type { MarkdownCardProps } from './components/MarkdownCard';\nimport type { PlaceholderProps } from './components/Placeholder';\n\nexport type { DynamicHomePageProps } from './components/DynamicHomePage';\nexport type { DynamicCustomizableHomePageProps } from './components/DynamicCustomizableHomePage';\nexport type { SearchBarProps } from './components/SearchBar';\nexport type { QuickAccessCardProps } from './components/QuickAccessCard';\nexport type { HeadlineProps } from './components/Headline';\nexport type { MarkdownProps } from './components/Markdown';\nexport type { MarkdownCardProps } from './components/MarkdownCard';\nexport type { PlaceholderProps } from './components/Placeholder';\nexport type { LocalClockProps } from './components/LocalClock';\nexport type { WorldClockProps } from './components/WorldClock';\n\n/**\n * Dynamic Home Page Plugin\n * @public\n */\nexport const dynamicHomePagePlugin = createPlugin({\n  id: 'dynamic-home-page',\n  routes: {\n    root: rootRouteRef,\n  },\n  apis: [\n    createApiFactory({\n      api: quickAccessApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        configApi: configApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ discoveryApi, configApi, identityApi }) =>\n        new QuickAccessApiClient({ discoveryApi, configApi, identityApi }),\n    }),\n    createApiFactory({\n      api: visitsApiRef,\n      deps: {\n        storageApi: storageApiRef,\n        identityApi: identityApiRef,\n      },\n      factory: ({ storageApi, identityApi }) =>\n        VisitsStorageApi.create({ storageApi, identityApi }),\n    }),\n  ],\n});\n\n/**\n * Dynamic Home Page\n * @public\n */\nexport const DynamicHomePage: React.ComponentType<DynamicHomePageProps> =\n  dynamicHomePagePlugin.provide(\n    createRoutableExtension({\n      name: 'DynamicHomePage',\n      component: () =>\n        import('./components/DynamicHomePage').then(m => m.DynamicHomePage),\n      mountPoint: rootRouteRef,\n    }),\n  );\n\n/**\n * Customizable Dynamic Home Page\n * @public\n */\nexport const DynamicCustomizableHomePage: React.ComponentType<DynamicCustomizableHomePageProps> =\n  dynamicHomePagePlugin.provide(\n    createRoutableExtension({\n      name: 'DynamicCustomizableHomePage',\n      component: () =>\n        import('./components/DynamicCustomizableHomePage').then(\n          m => m.DynamicCustomizableHomePage,\n        ),\n      mountPoint: rootRouteRef,\n    }),\n  );\n\n/**\n * @public\n */\nexport const SearchBar: React.ComponentType<SearchBarProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'SearchBar',\n      component: {\n        lazy: () => import('./components/SearchBar').then(m => m.SearchBar),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const QuickAccessCard: React.ComponentType<QuickAccessCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'QuickAccessCard',\n      component: {\n        lazy: () =>\n          import('./components/QuickAccessCard').then(m => m.QuickAccessCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Headline: React.ComponentType<HeadlineProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'Headline',\n      component: {\n        lazy: () => import('./components/Headline').then(m => m.Headline),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Markdown: React.ComponentType<MarkdownProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'Markdown',\n      component: {\n        lazy: () => import('./components/Markdown').then(m => m.Markdown),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const MarkdownCard: React.ComponentType<MarkdownCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'MarkdownCard',\n      component: {\n        lazy: () =>\n          import('./components/MarkdownCard').then(m => m.MarkdownCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const Placeholder: React.ComponentType<PlaceholderProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'MarkdownCard',\n      component: {\n        lazy: () => import('./components/Placeholder').then(m => m.Placeholder),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const CatalogStarredEntitiesCard: React.ComponentType<StarredEntitiesProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'CatalogStarredEntitiesCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageStarredEntities),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const RecentlyVisitedCard: React.ComponentType<VisitedByTypeProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'RecentlyVisitedCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageRecentlyVisited),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const TopVisitedCard: React.ComponentType<VisitedByTypeProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'TopVisitedCard',\n      component: {\n        lazy: () =>\n          import('@backstage/plugin-home').then(m => m.HomePageTopVisited),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const FeaturedDocsCard: React.ComponentType<FeaturedDocsCardProps> =\n  dynamicHomePagePlugin.provide(\n    createComponentExtension({\n      name: 'FeaturedDocsCard',\n      component: {\n        lazy: () =>\n          import('./components/FeaturedDocsCard').then(m => m.FeaturedDocsCard),\n      },\n    }),\n  );\n\n/**\n * @public\n */\nexport const JokeCard: React.ComponentType<{\n  defaultCategory?: 'any' | 'programming';\n}> = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'JokeCard',\n    component: {\n      lazy: () =>\n        import('@backstage/plugin-home').then(m => m.HomePageRandomJoke),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const VisitListener = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'VisitListener',\n    component: {\n      lazy: () =>\n        import('./components/VisitListener').then(m => m.VisitListener),\n    },\n  }),\n);\n\n/**\n * @public\n */\nexport const WorldClock = dynamicHomePagePlugin.provide(\n  createComponentExtension({\n    name: 'WorldClock',\n    component: {\n      lazy: () => import('./components/WorldClock').then(m => m.WorldClock),\n    },\n  }),\n);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-dynamic-home-page",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -39,8 +39,8 @@
     "@backstage/plugin-home-react": "^0.1.22",
     "@backstage/plugin-search-react": "^1.8.5",
     "@backstage/theme": "^0.6.3",
-    "@mui/material": "5.16.13",
-    "@mui/styles": "5.16.13",
+    "@mui/material": "5.16.14",
+    "@mui/styles": "5.16.14",
     "@scalprum/react-core": "0.9.3",
     "react-grid-layout": "1.5.0",
     "react-use": "17.6.0",
@@ -48,7 +48,7 @@
   },
   "peerDependencies": {
     "react": "16.13.1 || ^17.0.0 || ^18.2.0",
-    "react-router-dom": "6.28.2"
+    "react-router-dom": "6.30.0"
   },
   "devDependencies": {
     "@backstage/cli": "^0.29.5",