@backstage/plugin-home 0.4.14 → 0.4.17

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @backstage/plugin-home
 
+## 0.4.17
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-model@0.12.0
+  - @backstage/core-components@0.9.0
+  - @backstage/plugin-search@0.7.2
+  - @backstage/plugin-catalog-react@0.8.0
+  - @backstage/core-plugin-api@0.8.0
+
+## 0.4.16
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.8.10
+  - @backstage/plugin-catalog-react@0.7.0
+  - @backstage/catalog-model@0.11.0
+  - @backstage/core-plugin-api@0.7.0
+  - @backstage/plugin-search@0.7.1
+
+## 0.4.15
+
+### Patch Changes
+
+- 1ed305728b: Bump `node-fetch` to version 2.6.7 and `cross-fetch` to version 3.1.5
+- c77c5c7eb6: Added `backstage.role` to `package.json`
+- 651b919dbb: Add Renderer support for the HomePageToolkit component.
+
+  Previously `<HomePageToolkit Renderer={ComponentAccordion} Tools={[]} />` would
+  result in the error `can't access property "map", props.tools is undefined`.
+  This change adds a context that can pass props down to the HomePageToolkit.
+  Also introduced is an `expanded` prop on the `ComponentAccordion` to setting
+  the default expanded state. See `In Accordian` story for details.
+
+- Updated dependencies
+  - @backstage/core-components@0.8.9
+  - @backstage/core-plugin-api@0.6.1
+  - @backstage/plugin-catalog-react@0.6.15
+  - @backstage/plugin-search@0.7.0
+  - @backstage/catalog-model@0.10.0
+  - @backstage/theme@0.2.15
+
 ## 0.4.14
 
 ### Patch Changes

package/dist/esm/{index-e6d55b70.esm.js → index-75392e0a.esm.js}

@@ -1,6 +1,24 @@
 import { Link } from '@backstage/core-components';
 import { makeStyles, List, ListItemIcon, ListItemText } from '@material-ui/core';
-import React from 'react';
+import React, { createContext } from 'react';
+
+const Context = createContext(void 0);
+const ContextProvider = ({
+  children,
+  tools
+}) => {
+  const [toolsValue, _setTools] = React.useState(tools);
+  const value = {
+    tools: toolsValue
+  };
+  return /* @__PURE__ */ React.createElement(Context.Provider, {
+    value
+  }, children);
+};
+const useToolkit = () => {
+  const value = React.useContext(Context);
+  return value;
+};
 
 const useStyles = makeStyles((theme) => ({
   toolkit: {
@@ -28,10 +46,13 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 const Content = (props) => {
+  var _a;
   const classes = useStyles();
+  const toolkit = useToolkit();
+  const tools = (_a = toolkit == null ? void 0 : toolkit.tools) != null ? _a : props.tools;
   return /* @__PURE__ */ React.createElement(List, {
     className: classes.toolkit
-  }, props.tools.map((tool) => /* @__PURE__ */ React.createElement(Link, {
+  }, tools.map((tool) => /* @__PURE__ */ React.createElement(Link, {
     key: tool.url,
     to: tool.url,
     className: classes.tool
@@ -43,5 +64,5 @@ const Content = (props) => {
   }))));
 };
 
-export { Content };
-//# sourceMappingURL=index-e6d55b70.esm.js.map
+export { Content, ContextProvider };
+//# sourceMappingURL=index-75392e0a.esm.js.map

package/dist/esm/index-75392e0a.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-75392e0a.esm.js","sources":["../../src/homePageComponents/Toolkit/Context.tsx","../../src/homePageComponents/Toolkit/Content.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\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, { createContext } from 'react';\n\nexport type Tool = {\n  label: string;\n  url: string;\n  icon: React.ReactNode;\n};\n\ntype ToolkitContextValue = {\n  tools: Tool[];\n};\n\nconst Context = createContext<ToolkitContextValue | undefined>(undefined);\n\nexport const ContextProvider = ({\n  children,\n  tools,\n}: {\n  children: JSX.Element;\n  tools: Tool[];\n}) => {\n  const [toolsValue, _setTools] = React.useState(tools);\n\n  const value: ToolkitContextValue = {\n    tools: toolsValue,\n  };\n\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n\nexport const useToolkit = () => {\n  const value = React.useContext(Context);\n  return value;\n};\n\nexport default Context;\n","/*\n * Copyright 2021 The Backstage Authors\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 { Link } from '@backstage/core-components';\nimport {\n  makeStyles,\n  List,\n  ListItemIcon,\n  ListItemText,\n} from '@material-ui/core';\nimport React from 'react';\nimport { useToolkit, Tool } from './Context';\n\nconst useStyles = makeStyles(theme => ({\n  toolkit: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    textAlign: 'center',\n  },\n  tool: {\n    margin: theme.spacing(0.5, 1),\n  },\n  label: {\n    marginTop: theme.spacing(1),\n    fontSize: '0.9em',\n    lineHeight: '1.25',\n    color: theme.palette.text.secondary,\n  },\n  icon: {\n    width: '64px',\n    height: '64px',\n    borderRadius: '50px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    boxShadow: theme.shadows[1],\n    backgroundColor: theme.palette.background.default,\n  },\n}));\n\n/**\n * Props for Toolkit content component {@link Content}.\n *\n * @public\n */\nexport type ToolkitContentProps = {\n  tools: Tool[];\n};\n\n/**\n * A component to display a list of tools for the user.\n *\n * @public\n */\nexport const Content = (props: ToolkitContentProps) => {\n  const classes = useStyles();\n  const toolkit = useToolkit();\n  const tools = toolkit?.tools ?? props.tools;\n\n  return (\n    <List className={classes.toolkit}>\n      {tools.map((tool: Tool) => (\n        <Link key={tool.url} to={tool.url} className={classes.tool}>\n          <ListItemIcon className={classes.icon}>{tool.icon}</ListItemIcon>\n          <ListItemText\n            secondaryTypographyProps={{ className: classes.label }}\n            secondary={tool.label}\n          />\n        </Link>\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;AA4BA,MAAM,UAAU,cAA+C;MAElD,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,MAII;AACJ,QAAM,CAAC,YAAY,aAAa,MAAM,SAAS;AAE/C,QAAM,QAA6B;AAAA,IACjC,OAAO;AAAA;AAGT,6CAAQ,QAAQ,UAAT;AAAA,IAAkB;AAAA,KAAe;AAAA;MAG7B,aAAa,MAAM;AAC9B,QAAM,QAAQ,MAAM,WAAW;AAC/B,SAAO;AAAA;;ACtBT,MAAM,YAAY,WAAW;AAAU,EACrC,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA;AAAA,EAEb,MAAM;AAAA,IACJ,QAAQ,MAAM,QAAQ,KAAK;AAAA;AAAA,EAE7B,OAAO;AAAA,IACL,WAAW,MAAM,QAAQ;AAAA,IACzB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO,MAAM,QAAQ,KAAK;AAAA;AAAA,EAE5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,IACzB,iBAAiB,MAAM,QAAQ,WAAW;AAAA;AAAA;MAkBjC,UAAU,CAAC,UAA+B;AAlEvD;AAmEE,QAAM,UAAU;AAChB,QAAM,UAAU;AAChB,QAAM,QAAQ,yCAAS,UAAT,YAAkB,MAAM;AAEtC,6CACG,MAAD;AAAA,IAAM,WAAW,QAAQ;AAAA,KACtB,MAAM,IAAI,CAAC,6CACT,MAAD;AAAA,IAAM,KAAK,KAAK;AAAA,IAAK,IAAI,KAAK;AAAA,IAAK,WAAW,QAAQ;AAAA,yCACnD,cAAD;AAAA,IAAc,WAAW,QAAQ;AAAA,KAAO,KAAK,2CAC5C,cAAD;AAAA,IACE,0BAA0B,EAAE,WAAW,QAAQ;AAAA,IAC/C,WAAW,KAAK;AAAA;AAAA;;;;"}

package/dist/esm/{index-bce831c1.esm.js → index-a82f6713.esm.js}

@@ -14,4 +14,4 @@ const HomepageCompositionRoot = (props) => {
 };
 
 export { HomepageCompositionRoot };
-//# sourceMappingURL=index-bce831c1.esm.js.map
+//# sourceMappingURL=index-a82f6713.esm.js.map

package/dist/esm/{index-bce831c1.esm.js.map → index-a82f6713.esm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-bce831c1.esm.js","sources":["../../src/components/HomepageCompositionRoot.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\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, { ReactNode } from 'react';\nimport { useOutlet } from 'react-router';\n\nexport const HomepageCompositionRoot = (props: {\n  title?: string;\n  children?: ReactNode;\n}) => {\n  const outlet = useOutlet();\n  const children = props.children ?? outlet;\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;;;;;;;MAmBa,0BAA0B,CAAC,UAGlC;AAtBN;AAuBE,QAAM,SAAS;AACf,QAAM,WAAW,YAAM,aAAN,YAAkB;AACnC,mEAAU;AAAA;;;;"}
+{"version":3,"file":"index-a82f6713.esm.js","sources":["../../src/components/HomepageCompositionRoot.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\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, { ReactNode } from 'react';\nimport { useOutlet } from 'react-router';\n\nexport const HomepageCompositionRoot = (props: {\n  title?: string;\n  children?: ReactNode;\n}) => {\n  const outlet = useOutlet();\n  const children = props.children ?? outlet;\n  return <>{children}</>;\n};\n"],"names":[],"mappings":";;;;;;;;MAmBa,0BAA0B,CAAC,UAGlC;AAtBN;AAuBE,QAAM,SAAS;AACf,QAAM,WAAW,YAAM,aAAN,YAAkB;AACnC,mEAAU;AAAA;;;;"}

package/dist/esm/{index-f319937c.esm.js → index-ef0465b6.esm.js}

@@ -11,10 +11,14 @@ import '@backstage/core-plugin-api';
 const useStyles = makeStyles((theme) => ({
   settingsIconButton: {
     padding: theme.spacing(0, 1, 0, 0)
+  },
+  contentContainer: {
+    width: "100%"
   }
 }));
 const ComponentAccordion = ({
   title,
+  expanded = false,
   Content,
   Actions,
   Settings,
@@ -23,7 +27,7 @@ const ComponentAccordion = ({
 }) => {
   const classes = useStyles();
   const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(expanded);
   const handleOpenSettings = (e) => {
     e.stopPropagation();
     setSettingsIsExpanded((prevState) => !prevState);
@@ -34,13 +38,15 @@ const ComponentAccordion = ({
     componentName: title
   }, /* @__PURE__ */ React.createElement(Settings, null)), /* @__PURE__ */ React.createElement(Accordion, {
     expanded: isExpanded,
-    onChange: (_e, expanded) => setIsExpanded(expanded)
+    onChange: (_e, expandedValue) => setIsExpanded(expandedValue)
   }, /* @__PURE__ */ React.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null)
   }, Settings && /* @__PURE__ */ React.createElement(IconButton, {
     onClick: handleOpenSettings,
     className: classes.settingsIconButton
-  }, /* @__PURE__ */ React.createElement(SettingsIcon, null)), /* @__PURE__ */ React.createElement(Typography, null, title)), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Content, null), Actions && /* @__PURE__ */ React.createElement(Actions, null)))));
+  }, /* @__PURE__ */ React.createElement(SettingsIcon, null)), /* @__PURE__ */ React.createElement(Typography, null, title)), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement("div", {
+    className: classes.contentContainer
+  }, /* @__PURE__ */ React.createElement(Content, null), Actions && /* @__PURE__ */ React.createElement(Actions, null)))));
   return ContextProvider ? /* @__PURE__ */ React.createElement(ContextProvider, {
     ...childProps
   }, innerContent) : innerContent;
@@ -80,4 +86,4 @@ const ComponentTab = ({
 };
 
 export { ComponentAccordion, ComponentTab, ComponentTabs };
-//# sourceMappingURL=index-f319937c.esm.js.map
+//# sourceMappingURL=index-ef0465b6.esm.js.map

package/dist/esm/index-ef0465b6.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-ef0465b6.esm.js","sources":["../../src/componentRenderers/ComponentAccordion.tsx","../../src/componentRenderers/ComponentTabs/ComponentTabs.tsx","../../src/componentRenderers/ComponentTabs/ComponentTab.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\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';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Typography,\n  IconButton,\n  Theme,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SettingsIcon from '@material-ui/icons/Settings';\n\nimport { SettingsModal } from '../components';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  settingsIconButton: {\n    padding: theme.spacing(0, 1, 0, 0),\n  },\n  contentContainer: {\n    width: '100%',\n  },\n}));\n\nexport const ComponentAccordion = ({\n  title,\n  expanded = false,\n  Content,\n  Actions,\n  Settings,\n  ContextProvider,\n  ...childProps\n}: {\n  title: string;\n  expanded?: boolean;\n  Content: () => JSX.Element;\n  Actions?: () => JSX.Element;\n  Settings?: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  const classes = useStyles();\n  const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(expanded);\n\n  const handleOpenSettings = (e: any) => {\n    e.stopPropagation();\n    setSettingsIsExpanded(prevState => !prevState);\n  };\n\n  const innerContent = (\n    <>\n      {Settings && (\n        <SettingsModal\n          open={settingsIsExpanded}\n          close={() => setSettingsIsExpanded(false)}\n          componentName={title}\n        >\n          <Settings />\n        </SettingsModal>\n      )}\n      <Accordion\n        expanded={isExpanded}\n        onChange={(_e: any, expandedValue: boolean) =>\n          setIsExpanded(expandedValue)\n        }\n      >\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          {Settings && (\n            <IconButton\n              onClick={handleOpenSettings}\n              className={classes.settingsIconButton}\n            >\n              <SettingsIcon />\n            </IconButton>\n          )}\n          <Typography>{title}</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <div className={classes.contentContainer}>\n            <Content />\n            {Actions && <Actions />}\n          </div>\n        </AccordionDetails>\n      </Accordion>\n    </>\n  );\n\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>{innerContent}</ContextProvider>\n  ) : (\n    innerContent\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\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';\nimport { Tabs, Tab } from '@material-ui/core';\nimport { InfoCard } from '@backstage/core-components';\n\ntype TabType = {\n  label: string;\n  Component: () => JSX.Element;\n};\n\nexport const ComponentTabs = ({\n  title,\n  tabs,\n}: {\n  title: string;\n  tabs: TabType[];\n}) => {\n  const [value, setValue] = React.useState(0);\n\n  const handleChange = (_event: any, newValue: number) => {\n    setValue(newValue);\n  };\n\n  return (\n    <InfoCard title={title}>\n      <Tabs value={value} onChange={handleChange}>\n        {tabs.map(t => (\n          <Tab key={t.label} label={t.label} />\n        ))}\n      </Tabs>\n      {tabs.map(({ Component }, idx) => (\n        <div\n          key={idx}\n          {...(idx !== value ? { style: { display: 'none' } } : {})}\n        >\n          <Component />\n        </div>\n      ))}\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\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\nexport const ComponentTab = ({\n  title,\n  Content,\n  ContextProvider,\n  ...childProps\n}: {\n  title: string;\n  Content: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>\n      <Content />\n    </ContextProvider>\n  ) : (\n    <Content />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BA,MAAM,YAAY,WAAW,CAAC;AAAkB,EAC9C,oBAAoB;AAAA,IAClB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG;AAAA;AAAA,EAElC,kBAAkB;AAAA,IAChB,OAAO;AAAA;AAAA;MAIE,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MAQC;AACJ,QAAM,UAAU;AAChB,QAAM,CAAC,oBAAoB,yBAAyB,MAAM,SAAS;AACnE,QAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS;AAEnD,QAAM,qBAAqB,CAAC,MAAW;AACrC,MAAE;AACF,0BAAsB,eAAa,CAAC;AAAA;AAGtC,QAAM,yEAED,gDACE,eAAD;AAAA,IACE,MAAM;AAAA,IACN,OAAO,MAAM,sBAAsB;AAAA,IACnC,eAAe;AAAA,yCAEd,UAAD,4CAGH,WAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,IAAS,kBAClB,cAAc;AAAA,yCAGf,kBAAD;AAAA,IAAkB,gDAAa,gBAAD;AAAA,KAC3B,gDACE,YAAD;AAAA,IACE,SAAS;AAAA,IACT,WAAW,QAAQ;AAAA,yCAElB,cAAD,4CAGH,YAAD,MAAa,6CAEd,kBAAD,0CACG,OAAD;AAAA,IAAK,WAAW,QAAQ;AAAA,yCACrB,SAAD,OACC,+CAAY,SAAD;AAOtB,SAAO,sDACJ,iBAAD;AAAA,OAAqB;AAAA,KAAa,gBAElC;AAAA;;MCjFS,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,MAII;AACJ,QAAM,CAAC,OAAO,YAAY,MAAM,SAAS;AAEzC,QAAM,eAAe,CAAC,QAAa,aAAqB;AACtD,aAAS;AAAA;AAGX,6CACG,UAAD;AAAA,IAAU;AAAA,yCACP,MAAD;AAAA,IAAM;AAAA,IAAc,UAAU;AAAA,KAC3B,KAAK,IAAI,2CACP,KAAD;AAAA,IAAK,KAAK,EAAE;AAAA,IAAO,OAAO,EAAE;AAAA,QAG/B,KAAK,IAAI,CAAC,EAAE,aAAa,4CACvB,OAAD;AAAA,IACE,KAAK;AAAA,OACA,QAAQ,QAAQ,EAAE,OAAO,EAAE,SAAS,aAAa;AAAA,yCAErD,WAAD;AAAA;;MChCG,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MAKC;AACJ,SAAO,sDACJ,iBAAD;AAAA,OAAqB;AAAA,yCAClB,SAAD,6CAGD,SAAD;AAAA;;;;"}

package/dist/index.d.ts

@@ -34,6 +34,7 @@ declare type Tool = {
     url: string;
     icon: React__default.ReactNode;
 };
+
 /**
  * Props for Toolkit content component {@link Content}.
  *
@@ -50,8 +51,9 @@ declare const HomepageCompositionRoot: (props: {
     title?: string | undefined;
     children?: React.ReactNode;
 }) => JSX.Element;
-declare const ComponentAccordion: ({ title, Content, Actions, Settings, ContextProvider, ...childProps }: {
+declare const ComponentAccordion: ({ title, expanded, Content, Actions, Settings, ContextProvider, ...childProps }: {
     title: string;
+    expanded?: boolean | undefined;
     Content: () => JSX.Element;
     Actions?: (() => JSX.Element) | undefined;
     Settings?: (() => JSX.Element) | undefined;

package/dist/index.esm.js

@@ -146,25 +146,25 @@ const homePlugin = createPlugin({
 });
 const HomepageCompositionRoot = homePlugin.provide(createRoutableExtension({
   name: "HomepageCompositionRoot",
-  component: () => import('./esm/index-bce831c1.esm.js').then((m) => m.HomepageCompositionRoot),
+  component: () => import('./esm/index-a82f6713.esm.js').then((m) => m.HomepageCompositionRoot),
   mountPoint: rootRouteRef
 }));
 const ComponentAccordion = homePlugin.provide(createComponentExtension({
   name: "ComponentAccordion",
   component: {
-    lazy: () => import('./esm/index-f319937c.esm.js').then((m) => m.ComponentAccordion)
+    lazy: () => import('./esm/index-ef0465b6.esm.js').then((m) => m.ComponentAccordion)
   }
 }));
 const ComponentTabs = homePlugin.provide(createComponentExtension({
   name: "ComponentTabs",
   component: {
-    lazy: () => import('./esm/index-f319937c.esm.js').then((m) => m.ComponentTabs)
+    lazy: () => import('./esm/index-ef0465b6.esm.js').then((m) => m.ComponentTabs)
   }
 }));
 const ComponentTab = homePlugin.provide(createComponentExtension({
   name: "ComponentTab",
   component: {
-    lazy: () => import('./esm/index-f319937c.esm.js').then((m) => m.ComponentTab)
+    lazy: () => import('./esm/index-ef0465b6.esm.js').then((m) => m.ComponentTab)
   }
 }));
 const WelcomeTitle = homePlugin.provide(createComponentExtension({
@@ -187,7 +187,7 @@ const HomePageRandomJoke = homePlugin.provide(createCardExtension({
 const HomePageToolkit = homePlugin.provide(createCardExtension({
   name: "HomePageToolkit",
   title: "Toolkit",
-  components: () => import('./esm/index-e6d55b70.esm.js')
+  components: () => import('./esm/index-75392e0a.esm.js')
 }));
 const HomePageStarredEntities = homePlugin.provide(createCardExtension({
   name: "HomePageStarredEntities",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@backstage/plugin-home",
   "description": "A Backstage plugin that helps you build a home page",
-  "version": "0.4.14",
+  "version": "0.4.17",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -10,23 +10,36 @@
     "main": "dist/index.esm.js",
     "types": "dist/index.d.ts"
   },
+  "backstage": {
+    "role": "frontend-plugin"
+  },
+  "homepage": "https://github.com/backstage/backstage/tree/master/plugins/home#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/home"
+  },
+  "keywords": [
+    "backstage",
+    "homepage"
+  ],
   "scripts": {
-    "build": "backstage-cli plugin:build",
-    "start": "backstage-cli plugin:serve",
-    "lint": "backstage-cli lint",
-    "test": "backstage-cli test",
+    "build": "backstage-cli package build",
+    "start": "backstage-cli package start",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
     "diff": "backstage-cli plugin:diff",
-    "prepack": "backstage-cli prepack",
-    "postpack": "backstage-cli postpack",
-    "clean": "backstage-cli clean"
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "clean": "backstage-cli package clean"
   },
   "dependencies": {
-    "@backstage/catalog-model": "^0.9.10",
-    "@backstage/core-components": "^0.8.8",
-    "@backstage/core-plugin-api": "^0.6.0",
-    "@backstage/plugin-catalog-react": "^0.6.14",
-    "@backstage/plugin-search": "^0.6.2",
-    "@backstage/theme": "^0.2.14",
+    "@backstage/catalog-model": "^0.12.0",
+    "@backstage/core-components": "^0.9.0",
+    "@backstage/core-plugin-api": "^0.8.0",
+    "@backstage/plugin-catalog-react": "^0.8.0",
+    "@backstage/plugin-search": "^0.7.2",
+    "@backstage/theme": "^0.2.15",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
@@ -39,20 +52,20 @@
     "react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.13.2",
-    "@backstage/core-app-api": "^0.5.2",
-    "@backstage/dev-utils": "^0.2.21",
-    "@backstage/test-utils": "^0.2.4",
+    "@backstage/cli": "^0.15.0",
+    "@backstage/core-app-api": "^0.6.0",
+    "@backstage/dev-utils": "^0.2.24",
+    "@backstage/test-utils": "^0.3.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.8",
     "@types/jest": "^26.0.7",
     "@types/node": "^14.14.32",
-    "cross-fetch": "^3.0.6",
+    "cross-fetch": "^3.1.5",
     "msw": "^0.35.0"
   },
   "files": [
     "dist"
   ],
-  "gitHead": "4f4bc77a4152d372b10a4e8d97d92f00e23f3b56"
+  "gitHead": "04bb0dd824b78f6b57dac62c3015e681f094045c"
 }

package/dist/esm/index-e6d55b70.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-e6d55b70.esm.js","sources":["../../src/homePageComponents/Toolkit/Content.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\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 { Link } from '@backstage/core-components';\nimport {\n  makeStyles,\n  List,\n  ListItemIcon,\n  ListItemText,\n} from '@material-ui/core';\nimport React from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  toolkit: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    textAlign: 'center',\n  },\n  tool: {\n    margin: theme.spacing(0.5, 1),\n  },\n  label: {\n    marginTop: theme.spacing(1),\n    fontSize: '0.9em',\n    lineHeight: '1.25',\n    color: theme.palette.text.secondary,\n  },\n  icon: {\n    width: '64px',\n    height: '64px',\n    borderRadius: '50px',\n    justifyContent: 'center',\n    alignItems: 'center',\n    boxShadow: theme.shadows[1],\n    backgroundColor: theme.palette.background.default,\n  },\n}));\n\ntype Tool = {\n  label: string;\n  url: string;\n  icon: React.ReactNode;\n};\n\n/**\n * Props for Toolkit content component {@link Content}.\n *\n * @public\n */\nexport type ToolkitContentProps = {\n  tools: Tool[];\n};\n\n/**\n * A component to display a list of tools for the user.\n *\n * @public\n */\nexport const Content = (props: ToolkitContentProps) => {\n  const classes = useStyles();\n\n  return (\n    <List className={classes.toolkit}>\n      {props.tools.map((tool: Tool) => (\n        <Link key={tool.url} to={tool.url} className={classes.tool}>\n          <ListItemIcon className={classes.icon}>{tool.icon}</ListItemIcon>\n          <ListItemText\n            secondaryTypographyProps={{ className: classes.label }}\n            secondary={tool.label}\n          />\n        </Link>\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":";;;;AAyBA,MAAM,YAAY,WAAW;AAAU,EACrC,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA;AAAA,EAEb,MAAM;AAAA,IACJ,QAAQ,MAAM,QAAQ,KAAK;AAAA;AAAA,EAE7B,OAAO;AAAA,IACL,WAAW,MAAM,QAAQ;AAAA,IACzB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO,MAAM,QAAQ,KAAK;AAAA;AAAA,EAE5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,IACzB,iBAAiB,MAAM,QAAQ,WAAW;AAAA;AAAA;MAwBjC,UAAU,CAAC,UAA+B;AACrD,QAAM,UAAU;AAEhB,6CACG,MAAD;AAAA,IAAM,WAAW,QAAQ;AAAA,KACtB,MAAM,MAAM,IAAI,CAAC,6CACf,MAAD;AAAA,IAAM,KAAK,KAAK;AAAA,IAAK,IAAI,KAAK;AAAA,IAAK,WAAW,QAAQ;AAAA,yCACnD,cAAD;AAAA,IAAc,WAAW,QAAQ;AAAA,KAAO,KAAK,2CAC5C,cAAD;AAAA,IACE,0BAA0B,EAAE,WAAW,QAAQ;AAAA,IAC/C,WAAW,KAAK;AAAA;AAAA;;;;"}

package/dist/esm/index-f319937c.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-f319937c.esm.js","sources":["../../src/componentRenderers/ComponentAccordion.tsx","../../src/componentRenderers/ComponentTabs/ComponentTabs.tsx","../../src/componentRenderers/ComponentTabs/ComponentTab.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\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';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Typography,\n  IconButton,\n  Theme,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport SettingsIcon from '@material-ui/icons/Settings';\n\nimport { SettingsModal } from '../components';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  settingsIconButton: {\n    padding: theme.spacing(0, 1, 0, 0),\n  },\n}));\n\nexport const ComponentAccordion = ({\n  title,\n  Content,\n  Actions,\n  Settings,\n  ContextProvider,\n  ...childProps\n}: {\n  title: string;\n  Content: () => JSX.Element;\n  Actions?: () => JSX.Element;\n  Settings?: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  const classes = useStyles();\n  const [settingsIsExpanded, setSettingsIsExpanded] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  const handleOpenSettings = (e: any) => {\n    e.stopPropagation();\n    setSettingsIsExpanded(prevState => !prevState);\n  };\n\n  const innerContent = (\n    <>\n      {Settings && (\n        <SettingsModal\n          open={settingsIsExpanded}\n          close={() => setSettingsIsExpanded(false)}\n          componentName={title}\n        >\n          <Settings />\n        </SettingsModal>\n      )}\n      <Accordion\n        expanded={isExpanded}\n        onChange={(_e: any, expanded: boolean) => setIsExpanded(expanded)}\n      >\n        <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n          {Settings && (\n            <IconButton\n              onClick={handleOpenSettings}\n              className={classes.settingsIconButton}\n            >\n              <SettingsIcon />\n            </IconButton>\n          )}\n          <Typography>{title}</Typography>\n        </AccordionSummary>\n        <AccordionDetails>\n          <div>\n            <Content />\n            {Actions && <Actions />}\n          </div>\n        </AccordionDetails>\n      </Accordion>\n    </>\n  );\n\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>{innerContent}</ContextProvider>\n  ) : (\n    innerContent\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\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';\nimport { Tabs, Tab } from '@material-ui/core';\nimport { InfoCard } from '@backstage/core-components';\n\ntype TabType = {\n  label: string;\n  Component: () => JSX.Element;\n};\n\nexport const ComponentTabs = ({\n  title,\n  tabs,\n}: {\n  title: string;\n  tabs: TabType[];\n}) => {\n  const [value, setValue] = React.useState(0);\n\n  const handleChange = (_event: any, newValue: number) => {\n    setValue(newValue);\n  };\n\n  return (\n    <InfoCard title={title}>\n      <Tabs value={value} onChange={handleChange}>\n        {tabs.map(t => (\n          <Tab key={t.label} label={t.label} />\n        ))}\n      </Tabs>\n      {tabs.map(({ Component }, idx) => (\n        <div\n          key={idx}\n          {...(idx !== value ? { style: { display: 'none' } } : {})}\n        >\n          <Component />\n        </div>\n      ))}\n    </InfoCard>\n  );\n};\n","/*\n * Copyright 2021 The Backstage Authors\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\nexport const ComponentTab = ({\n  title,\n  Content,\n  ContextProvider,\n  ...childProps\n}: {\n  title: string;\n  Content: () => JSX.Element;\n  ContextProvider?: (props: any) => JSX.Element;\n}) => {\n  return ContextProvider ? (\n    <ContextProvider {...childProps}>\n      <Content />\n    </ContextProvider>\n  ) : (\n    <Content />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BA,MAAM,YAAY,WAAW,CAAC;AAAkB,EAC9C,oBAAoB;AAAA,IAClB,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG;AAAA;AAAA;MAIvB,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MAOC;AACJ,QAAM,UAAU;AAChB,QAAM,CAAC,oBAAoB,yBAAyB,MAAM,SAAS;AACnE,QAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS;AAEnD,QAAM,qBAAqB,CAAC,MAAW;AACrC,MAAE;AACF,0BAAsB,eAAa,CAAC;AAAA;AAGtC,QAAM,yEAED,gDACE,eAAD;AAAA,IACE,MAAM;AAAA,IACN,OAAO,MAAM,sBAAsB;AAAA,IACnC,eAAe;AAAA,yCAEd,UAAD,4CAGH,WAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,IAAS,aAAsB,cAAc;AAAA,yCAEvD,kBAAD;AAAA,IAAkB,gDAAa,gBAAD;AAAA,KAC3B,gDACE,YAAD;AAAA,IACE,SAAS;AAAA,IACT,WAAW,QAAQ;AAAA,yCAElB,cAAD,4CAGH,YAAD,MAAa,6CAEd,kBAAD,0CACG,OAAD,0CACG,SAAD,OACC,+CAAY,SAAD;AAOtB,SAAO,sDACJ,iBAAD;AAAA,OAAqB;AAAA,KAAa,gBAElC;AAAA;;MC1ES,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,MAII;AACJ,QAAM,CAAC,OAAO,YAAY,MAAM,SAAS;AAEzC,QAAM,eAAe,CAAC,QAAa,aAAqB;AACtD,aAAS;AAAA;AAGX,6CACG,UAAD;AAAA,IAAU;AAAA,yCACP,MAAD;AAAA,IAAM;AAAA,IAAc,UAAU;AAAA,KAC3B,KAAK,IAAI,2CACP,KAAD;AAAA,IAAK,KAAK,EAAE;AAAA,IAAO,OAAO,EAAE;AAAA,QAG/B,KAAK,IAAI,CAAC,EAAE,aAAa,4CACvB,OAAD;AAAA,IACE,KAAK;AAAA,OACA,QAAQ,QAAQ,EAAE,OAAO,EAAE,SAAS,aAAa;AAAA,yCAErD,WAAD;AAAA;;MChCG,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MAKC;AACJ,SAAO,sDACJ,iBAAD;AAAA,OAAqB;AAAA,yCAClB,SAAD,6CAGD,SAAD;AAAA;;;;"}