@backstage/plugin-app-visualizer 0.1.6 → 0.1.7-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/components/AppVisualizerPage/AppVisualizerPage.esm.js +1 -2
  3. package/dist/components/AppVisualizerPage/AppVisualizerPage.esm.js.map +1 -1
  4. package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js +5 -8
  5. package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js.map +1 -1
  6. package/dist/components/AppVisualizerPage/TextVisualizer.esm.js +5 -5
  7. package/dist/components/AppVisualizerPage/TextVisualizer.esm.js.map +1 -1
  8. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @backstage/plugin-app-visualizer
2
2
 
3
+ ## 0.1.7-next.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+ - @backstage/core-components@0.14.8-next.0
9
+ - @backstage/core-plugin-api@1.9.2
10
+ - @backstage/frontend-plugin-api@0.6.6-next.0
11
+
3
12
  ## 0.1.6
4
13
 
5
14
  ### Patch Changes
package/dist/components/AppVisualizerPage/AppVisualizerPage.esm.js CHANGED
@@ -9,7 +9,6 @@ import { TreeVisualizer } from './TreeVisualizer.esm.js';
9
9
  import { useLocation, useRoutes, useParams, matchRoutes, useNavigate } from 'react-router-dom';
10
10
 
11
11
  function AppVisualizerPage() {
12
- var _a;
13
12
  const appTreeApi = useApi(appTreeApiRef);
14
13
  const { tree } = appTreeApi.getTree();
15
14
  const tabs = useMemo(
@@ -38,7 +37,7 @@ function AppVisualizerPage() {
38
37
  const location = useLocation();
39
38
  const element = useRoutes(tabs, location);
40
39
  const currentPath = `/${useParams()["*"]}`;
41
- const [matchedRoute] = (_a = matchRoutes(tabs, currentPath)) != null ? _a : [];
40
+ const [matchedRoute] = matchRoutes(tabs, currentPath) ?? [];
42
41
  const currentTabIndex = matchedRoute ? tabs.findIndex((t) => t.path === matchedRoute.route.path) : 0;
43
42
  const navigate = useNavigate();
44
43
  const handleTabChange = useCallback(
package/dist/components/AppVisualizerPage/AppVisualizerPage.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppVisualizerPage.esm.js","sources":["../../../src/components/AppVisualizerPage/AppVisualizerPage.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { Content, Header, HeaderTabs, Page } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { appTreeApiRef } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DetailedVisualizer } from './DetailedVisualizer';\nimport { TextVisualizer } from './TextVisualizer';\nimport { TreeVisualizer } from './TreeVisualizer';\nimport {\n matchRoutes,\n useLocation,\n useNavigate,\n useParams,\n useRoutes,\n} from 'react-router-dom';\n\nexport function AppVisualizerPage() {\n const appTreeApi = useApi(appTreeApiRef);\n const { tree } = appTreeApi.getTree();\n\n const tabs = useMemo(\n () => [\n {\n id: 'tree',\n path: 'tree',\n label: 'Tree',\n element: <TreeVisualizer tree={tree} />,\n },\n {\n id: 'detailed',\n path: 'detailed',\n label: 'Detailed',\n element: <DetailedVisualizer tree={tree} />,\n },\n {\n id: 'text',\n path: 'text',\n label: 'Text',\n element: <TextVisualizer tree={tree} />,\n },\n ],\n [tree],\n );\n\n const location = useLocation();\n const element = useRoutes(tabs, location);\n\n const currentPath = `/${useParams()['*']}`;\n const [matchedRoute] = matchRoutes(tabs, currentPath) ?? [];\n\n const currentTabIndex = matchedRoute\n ? tabs.findIndex(t => t.path === matchedRoute.route.path)\n : 0;\n\n const navigate = useNavigate();\n const handleTabChange = useCallback(\n (index: number) => {\n navigate(tabs[index].id);\n },\n [navigate, tabs],\n );\n\n useEffect(() => {\n if (!element) {\n navigate(tabs[0].path);\n }\n }, [element, navigate, tabs]);\n\n return (\n <Page themeId=\"tool\">\n <Header title=\"App Visualizer\" />\n <Content noPadding stretch>\n <Box display=\"flex\" flexDirection=\"column\" height=\"100%\">\n <HeaderTabs\n tabs={tabs}\n selectedIndex={currentTabIndex}\n onChange={handleTabChange}\n />\n {element}\n </Box>\n </Content>\n </Page>\n );\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AppVisualizerPage.esm.js","sources":["../../../src/components/AppVisualizerPage/AppVisualizerPage.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { Content, Header, HeaderTabs, Page } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { appTreeApiRef } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DetailedVisualizer } from './DetailedVisualizer';\nimport { TextVisualizer } from './TextVisualizer';\nimport { TreeVisualizer } from './TreeVisualizer';\nimport {\n matchRoutes,\n useLocation,\n useNavigate,\n useParams,\n useRoutes,\n} from 'react-router-dom';\n\nexport function AppVisualizerPage() {\n const appTreeApi = useApi(appTreeApiRef);\n const { tree } = appTreeApi.getTree();\n\n const tabs = useMemo(\n () => [\n {\n id: 'tree',\n path: 'tree',\n label: 'Tree',\n element: <TreeVisualizer tree={tree} />,\n },\n {\n id: 'detailed',\n path: 'detailed',\n label: 'Detailed',\n element: <DetailedVisualizer tree={tree} />,\n },\n {\n id: 'text',\n path: 'text',\n label: 'Text',\n element: <TextVisualizer tree={tree} />,\n },\n ],\n [tree],\n );\n\n const location = useLocation();\n const element = useRoutes(tabs, location);\n\n const currentPath = `/${useParams()['*']}`;\n const [matchedRoute] = matchRoutes(tabs, currentPath) ?? [];\n\n const currentTabIndex = matchedRoute\n ? tabs.findIndex(t => t.path === matchedRoute.route.path)\n : 0;\n\n const navigate = useNavigate();\n const handleTabChange = useCallback(\n (index: number) => {\n navigate(tabs[index].id);\n },\n [navigate, tabs],\n );\n\n useEffect(() => {\n if (!element) {\n navigate(tabs[0].path);\n }\n }, [element, navigate, tabs]);\n\n return (\n <Page themeId=\"tool\">\n <Header title=\"App Visualizer\" />\n <Content noPadding stretch>\n <Box display=\"flex\" flexDirection=\"column\" height=\"100%\">\n <HeaderTabs\n tabs={tabs}\n selectedIndex={currentTabIndex}\n onChange={handleTabChange}\n />\n {element}\n </Box>\n </Content>\n </Page>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAgCO,SAAS,iBAAoB,GAAA;AAClC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,UAAA,CAAW,OAAQ,EAAA,CAAA;AAEpC,EAAA,MAAM,IAAO,GAAA,OAAA;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA,CAAA;AAAA,OACvC;AAAA,MACA;AAAA,QACE,EAAI,EAAA,UAAA;AAAA,QACJ,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAmB,IAAY,EAAA,CAAA;AAAA,OAC3C;AAAA,MACA;AAAA,QACE,EAAI,EAAA,MAAA;AAAA,QACJ,IAAM,EAAA,MAAA;AAAA,QACN,KAAO,EAAA,MAAA;AAAA,QACP,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAY,EAAA,CAAA;AAAA,OACvC;AAAA,KACF;AAAA,IACA,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,IAAA,EAAM,QAAQ,CAAA,CAAA;AAExC,EAAA,MAAM,WAAc,GAAA,CAAA,CAAA,EAAI,SAAU,EAAA,CAAE,GAAG,CAAC,CAAA,CAAA,CAAA;AACxC,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,YAAY,IAAM,EAAA,WAAW,KAAK,EAAC,CAAA;AAE1D,EAAM,MAAA,eAAA,GAAkB,YACpB,GAAA,IAAA,CAAK,SAAU,CAAA,CAAA,CAAA,KAAK,EAAE,IAAS,KAAA,YAAA,CAAa,KAAM,CAAA,IAAI,CACtD,GAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,KAAkB,KAAA;AACjB,MAAS,QAAA,CAAA,IAAA,CAAK,KAAK,CAAA,CAAE,EAAE,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,UAAU,IAAI,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAS,EAAA;AACZ,MAAS,QAAA,CAAA,IAAA,CAAK,CAAC,CAAA,CAAE,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,QAAA,EAAU,IAAI,CAAC,CAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAM,gBAAiB,EAAA,CAAA,kBAC9B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,WAAS,IAAC,EAAA,OAAA,EAAO,wBACvB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,SAAQ,MAAO,EAAA,aAAA,EAAc,QAAS,EAAA,MAAA,EAAO,MAChD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,aAAe,EAAA,eAAA;AAAA,MACf,QAAU,EAAA,eAAA;AAAA,KAAA;AAAA,GACZ,EACC,OACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js CHANGED
@@ -122,20 +122,18 @@ const useOutputStyles = makeStyles((theme) => ({
122
122
  })
123
123
  }));
124
124
  function getFullPath(node) {
125
- var _a, _b;
126
125
  if (!node) {
127
126
  return "";
128
127
  }
129
- const parent = (_a = node.edges.attachedTo) == null ? void 0 : _a.node;
130
- const part = (_b = node.instance) == null ? void 0 : _b.getData(coreExtensionData.routePath);
128
+ const parent = node.edges.attachedTo?.node;
129
+ const part = node.instance?.getData(coreExtensionData.routePath);
131
130
  if (!part) {
132
131
  return getFullPath(parent);
133
132
  }
134
133
  return getFullPath(parent) + part;
135
134
  }
136
135
  function OutputLink(props) {
137
- var _a, _b;
138
- const routeRef = (_b = (_a = props.node) == null ? void 0 : _a.instance) == null ? void 0 : _b.getData(coreExtensionData.routeRef);
136
+ const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);
139
137
  let link = void 0;
140
138
  try {
141
139
  link = useRouteRef(routeRef)();
@@ -144,13 +142,12 @@ function OutputLink(props) {
144
142
  return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, props.dataRef.id) }, /* @__PURE__ */ React.createElement(Box, { className: props.className }, link ? /* @__PURE__ */ React.createElement(Link, { to: link }, "link") : null));
145
143
  }
146
144
  function Output(props) {
147
- var _a;
148
145
  const { dataRef, node } = props;
149
146
  const { id } = dataRef;
150
- const instance = node == null ? void 0 : node.instance;
147
+ const instance = node?.instance;
151
148
  const classes = useOutputStyles({ color: getOutputColor(id) });
152
149
  if (id === coreExtensionData.routePath.id) {
153
- return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, getFullPath(node)) }, /* @__PURE__ */ React.createElement(Box, { className: classes.output }, String((_a = instance == null ? void 0 : instance.getData(dataRef)) != null ? _a : "")));
150
+ return /* @__PURE__ */ React.createElement(Tooltip, { title: /* @__PURE__ */ React.createElement(Typography, null, getFullPath(node)) }, /* @__PURE__ */ React.createElement(Box, { className: classes.output }, String(instance?.getData(dataRef) ?? "")));
154
151
  }
155
152
  if (id === coreExtensionData.routeRef.id) {
156
153
  return /* @__PURE__ */ React.createElement(OutputLink, { ...props, className: classes.output });
package/dist/components/AppVisualizerPage/DetailedVisualizer.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {\n AppNode,\n AppTree,\n ExtensionDataRef,\n RouteRef,\n coreExtensionData,\n createApiExtension,\n createNavItemExtension,\n createThemeExtension,\n useRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport * as colors from '@material-ui/core/colors';\nimport { makeStyles } from '@material-ui/core/styles';\nimport InputIcon from '@material-ui/icons/InputSharp';\nimport DisabledIcon from '@material-ui/icons/NotInterestedSharp';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction createOutputColorGenerator(\n colorMap: { [extDataId: string]: string },\n availableColors: string[],\n) {\n const map = new Map<string, string>();\n let i = 0;\n\n return function getOutputColor(id: string) {\n if (id in colorMap) {\n return colorMap[id];\n }\n let color = map.get(id);\n if (color) {\n return color;\n }\n color = availableColors[i];\n i += 1;\n if (i >= availableColors.length) {\n i = 0;\n }\n map.set(id, color);\n return color;\n };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n {\n [coreExtensionData.reactElement.id]: colors.green[500],\n [coreExtensionData.routePath.id]: colors.yellow[500],\n [coreExtensionData.routeRef.id]: colors.purple[500],\n [createApiExtension.factoryDataRef.id]: colors.blue[500],\n [createThemeExtension.themeDataRef.id]: colors.lime[500],\n [createNavItemExtension.targetDataRef.id]: colors.orange[500],\n },\n\n [\n colors.blue[200],\n colors.orange[200],\n colors.green[200],\n colors.red[200],\n colors.yellow[200],\n colors.purple[200],\n colors.lime[200],\n ],\n);\n\ninterface StyleProps {\n enabled: boolean;\n depth: number;\n}\n\nconst config = {\n borderWidth: 0.75,\n};\n\nconst useStyles = makeStyles(theme => ({\n extension: {\n borderLeftWidth: theme.spacing(config.borderWidth),\n borderLeftStyle: 'solid',\n borderLeftColor: ({ depth }: StyleProps) =>\n colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n cursor: 'pointer',\n\n '&:hover $extensionHeader': {\n color: ({ enabled }: StyleProps) =>\n enabled ? theme.palette.primary.main : theme.palette.text.secondary,\n },\n },\n extensionHeader: {\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n\n padding: theme.spacing(0.5, 1),\n color: ({ enabled }: StyleProps) =>\n enabled ? theme.palette.text.primary : theme.palette.text.disabled,\n background: theme.palette.background.paper,\n\n borderTopRightRadius: theme.shape.borderRadius,\n borderBottomRightRadius: theme.shape.borderRadius,\n },\n extensionHeaderId: {\n userSelect: 'all',\n },\n extensionHeaderOutputs: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: theme.spacing(1),\n gap: theme.spacing(1),\n },\n attachments: {\n gap: theme.spacing(2),\n display: 'flex',\n flexDirection: 'column',\n },\n attachmentsInput: {\n '&:first-child $attachmentsInputTitle': {\n borderTop: 0,\n },\n },\n attachmentsInputTitle: {\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n padding: theme.spacing(1),\n\n borderTopWidth: theme.spacing(config.borderWidth),\n borderTopStyle: 'solid',\n borderTopColor: ({ depth }: StyleProps) =>\n colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n },\n attachmentsInputName: {\n marginLeft: theme.spacing(1),\n },\n attachmentsInputChildren: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(0.5),\n marginLeft: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nconst useOutputStyles = makeStyles(theme => ({\n output: ({ color }: { color: string }) => ({\n padding: `0 10px`,\n height: 20,\n borderRadius: 10,\n color: theme.palette.getContrastText(color),\n backgroundColor: color,\n }),\n}));\n\nfunction getFullPath(node?: AppNode): string {\n if (!node) {\n return '';\n }\n const parent = node.edges.attachedTo?.node;\n const part = node.instance?.getData(coreExtensionData.routePath);\n if (!part) {\n return getFullPath(parent);\n }\n return getFullPath(parent) + part;\n}\n\nfunction OutputLink(props: {\n dataRef: ExtensionDataRef<unknown>;\n node?: AppNode;\n className: string;\n}) {\n const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);\n\n let link: string | undefined = undefined;\n try {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n link = useRouteRef(routeRef as RouteRef<undefined>)();\n } catch {\n /* ignore */\n }\n\n return (\n <Tooltip title={<Typography>{props.dataRef.id}</Typography>}>\n <Box className={props.className}>\n {link ? <Link to={link}>link</Link> : null}\n </Box>\n </Tooltip>\n );\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n const { dataRef, node } = props;\n const { id } = dataRef;\n const instance = node?.instance;\n\n const classes = useOutputStyles({ color: getOutputColor(id) });\n\n if (id === coreExtensionData.routePath.id) {\n return (\n <Tooltip title={<Typography>{getFullPath(node)}</Typography>}>\n <Box className={classes.output}>\n {String(instance?.getData(dataRef) ?? '')}\n </Box>\n </Tooltip>\n );\n }\n\n if (id === coreExtensionData.routeRef.id) {\n return <OutputLink {...props} className={classes.output} />;\n }\n\n return (\n <Tooltip title={<Typography>{id}</Typography>}>\n <Box className={classes.output} />\n </Tooltip>\n );\n}\n\nfunction Attachments(props: {\n node: AppNode;\n enabled: boolean;\n depth: number;\n}) {\n const { node, enabled, depth } = props;\n const { attachments } = node.edges;\n\n const classes = useStyles({ enabled, depth });\n\n if (attachments.size === 0) {\n return null;\n }\n\n return (\n <Box className={classes.attachments}>\n {[...attachments.entries()]\n .sort(([a], [b]) => a.localeCompare(b))\n .map(([key, children]) => {\n return (\n <Box key={key} className={classes.attachmentsInput}>\n <Box className={classes.attachmentsInputTitle}>\n <InputIcon />\n <Typography className={classes.attachmentsInputName}>\n {key}\n </Typography>\n </Box>\n <Box className={classes.attachmentsInputChildren}>\n {children.map(childNode => (\n <Extension\n key={childNode.spec.id}\n node={childNode}\n depth={depth + 1}\n />\n ))}\n </Box>\n </Box>\n );\n })}\n </Box>\n );\n}\n\nfunction ExtensionTooltip(props: { node: AppNode }) {\n const parts = [];\n let node = props.node;\n parts.push(node.spec.id);\n while (node.edges.attachedTo) {\n const input = node.edges.attachedTo.input;\n node = node.edges.attachedTo.node;\n parts.push(`${node.spec.id} [${input}]`);\n }\n parts.reverse();\n\n return (\n <>\n {parts.map(part => (\n <Typography key={part}>{part}</Typography>\n ))}\n </>\n );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n const { node, depth } = props;\n\n const enabled = Boolean(node.instance);\n const classes = useStyles({ enabled, depth });\n\n const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n return (\n <Box key={node.spec.id} className={classes.extension}>\n <Box className={classes.extensionHeader}>\n <Tooltip title={<ExtensionTooltip node={node} />}>\n <Typography className={classes.extensionHeaderId}>\n {node.spec.id}\n </Typography>\n </Tooltip>\n <Box className={classes.extensionHeaderOutputs}>\n {dataRefs &&\n dataRefs.length > 0 &&\n dataRefs\n .sort((a, b) => a.id.localeCompare(b.id))\n .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n {!enabled && <DisabledIcon fontSize=\"small\" />}\n </Box>\n </Box>\n <Attachments node={node} enabled={enabled} depth={depth} />\n </Box>\n );\n}\n\nconst legendMap = {\n 'React Element': coreExtensionData.reactElement,\n 'Utility API': createApiExtension.factoryDataRef,\n 'Route Path': coreExtensionData.routePath,\n 'Route Ref': coreExtensionData.routeRef,\n 'Nav Target': createNavItemExtension.targetDataRef,\n Theme: createThemeExtension.themeDataRef,\n};\n\nfunction Legend() {\n return (\n <Box\n display=\"grid\"\n maxWidth={600}\n p={1}\n style={{\n grid: 'auto-flow / repeat(3, 1fr)',\n gap: 16,\n }}\n >\n {Object.entries(legendMap).map(([label, dataRef]) => (\n <Box\n key={dataRef.id}\n display=\"flex\"\n style={{ gap: 8 }}\n alignItems=\"center\"\n >\n <Output dataRef={dataRef} />\n <Typography>{label}</Typography>\n </Box>\n ))}\n </Box>\n );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n return (\n <Box display=\"flex\" height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\">\n <Box flex=\"1 1 0\" overflow=\"auto\" ml={2} mt={2}>\n <Extension node={tree.root} depth={0} />\n </Box>\n\n <Box component={Paper} flex=\"0 0 auto\" m={1}>\n <Legend />\n </Box>\n </Box>\n );\n}\n"],"names":["getOutputColor"],"mappings":"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"}
1
+ {"version":3,"file":"DetailedVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/DetailedVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 {\n AppNode,\n AppTree,\n ExtensionDataRef,\n RouteRef,\n coreExtensionData,\n createApiExtension,\n createNavItemExtension,\n createThemeExtension,\n useRouteRef,\n} from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Typography from '@material-ui/core/Typography';\nimport * as colors from '@material-ui/core/colors';\nimport { makeStyles } from '@material-ui/core/styles';\nimport InputIcon from '@material-ui/icons/InputSharp';\nimport DisabledIcon from '@material-ui/icons/NotInterestedSharp';\nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction createOutputColorGenerator(\n colorMap: { [extDataId: string]: string },\n availableColors: string[],\n) {\n const map = new Map<string, string>();\n let i = 0;\n\n return function getOutputColor(id: string) {\n if (id in colorMap) {\n return colorMap[id];\n }\n let color = map.get(id);\n if (color) {\n return color;\n }\n color = availableColors[i];\n i += 1;\n if (i >= availableColors.length) {\n i = 0;\n }\n map.set(id, color);\n return color;\n };\n}\n\nconst getOutputColor = createOutputColorGenerator(\n {\n [coreExtensionData.reactElement.id]: colors.green[500],\n [coreExtensionData.routePath.id]: colors.yellow[500],\n [coreExtensionData.routeRef.id]: colors.purple[500],\n [createApiExtension.factoryDataRef.id]: colors.blue[500],\n [createThemeExtension.themeDataRef.id]: colors.lime[500],\n [createNavItemExtension.targetDataRef.id]: colors.orange[500],\n },\n\n [\n colors.blue[200],\n colors.orange[200],\n colors.green[200],\n colors.red[200],\n colors.yellow[200],\n colors.purple[200],\n colors.lime[200],\n ],\n);\n\ninterface StyleProps {\n enabled: boolean;\n depth: number;\n}\n\nconst config = {\n borderWidth: 0.75,\n};\n\nconst useStyles = makeStyles(theme => ({\n extension: {\n borderLeftWidth: theme.spacing(config.borderWidth),\n borderLeftStyle: 'solid',\n borderLeftColor: ({ depth }: StyleProps) =>\n colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n cursor: 'pointer',\n\n '&:hover $extensionHeader': {\n color: ({ enabled }: StyleProps) =>\n enabled ? theme.palette.primary.main : theme.palette.text.secondary,\n },\n },\n extensionHeader: {\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n\n padding: theme.spacing(0.5, 1),\n color: ({ enabled }: StyleProps) =>\n enabled ? theme.palette.text.primary : theme.palette.text.disabled,\n background: theme.palette.background.paper,\n\n borderTopRightRadius: theme.shape.borderRadius,\n borderBottomRightRadius: theme.shape.borderRadius,\n },\n extensionHeaderId: {\n userSelect: 'all',\n },\n extensionHeaderOutputs: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: theme.spacing(1),\n gap: theme.spacing(1),\n },\n attachments: {\n gap: theme.spacing(2),\n display: 'flex',\n flexDirection: 'column',\n },\n attachmentsInput: {\n '&:first-child $attachmentsInputTitle': {\n borderTop: 0,\n },\n },\n attachmentsInputTitle: {\n display: 'flex',\n alignItems: 'center',\n width: 'fit-content',\n padding: theme.spacing(1),\n\n borderTopWidth: theme.spacing(config.borderWidth),\n borderTopStyle: 'solid',\n borderTopColor: ({ depth }: StyleProps) =>\n colors.grey[(700 - (depth % 6) * 100) as keyof typeof colors.grey],\n },\n attachmentsInputName: {\n marginLeft: theme.spacing(1),\n },\n attachmentsInputChildren: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(0.5),\n marginLeft: theme.spacing(1),\n marginBottom: theme.spacing(1),\n },\n}));\n\nconst useOutputStyles = makeStyles(theme => ({\n output: ({ color }: { color: string }) => ({\n padding: `0 10px`,\n height: 20,\n borderRadius: 10,\n color: theme.palette.getContrastText(color),\n backgroundColor: color,\n }),\n}));\n\nfunction getFullPath(node?: AppNode): string {\n if (!node) {\n return '';\n }\n const parent = node.edges.attachedTo?.node;\n const part = node.instance?.getData(coreExtensionData.routePath);\n if (!part) {\n return getFullPath(parent);\n }\n return getFullPath(parent) + part;\n}\n\nfunction OutputLink(props: {\n dataRef: ExtensionDataRef<unknown>;\n node?: AppNode;\n className: string;\n}) {\n const routeRef = props.node?.instance?.getData(coreExtensionData.routeRef);\n\n let link: string | undefined = undefined;\n try {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n link = useRouteRef(routeRef as RouteRef<undefined>)();\n } catch {\n /* ignore */\n }\n\n return (\n <Tooltip title={<Typography>{props.dataRef.id}</Typography>}>\n <Box className={props.className}>\n {link ? <Link to={link}>link</Link> : null}\n </Box>\n </Tooltip>\n );\n}\n\nfunction Output(props: { dataRef: ExtensionDataRef<unknown>; node?: AppNode }) {\n const { dataRef, node } = props;\n const { id } = dataRef;\n const instance = node?.instance;\n\n const classes = useOutputStyles({ color: getOutputColor(id) });\n\n if (id === coreExtensionData.routePath.id) {\n return (\n <Tooltip title={<Typography>{getFullPath(node)}</Typography>}>\n <Box className={classes.output}>\n {String(instance?.getData(dataRef) ?? '')}\n </Box>\n </Tooltip>\n );\n }\n\n if (id === coreExtensionData.routeRef.id) {\n return <OutputLink {...props} className={classes.output} />;\n }\n\n return (\n <Tooltip title={<Typography>{id}</Typography>}>\n <Box className={classes.output} />\n </Tooltip>\n );\n}\n\nfunction Attachments(props: {\n node: AppNode;\n enabled: boolean;\n depth: number;\n}) {\n const { node, enabled, depth } = props;\n const { attachments } = node.edges;\n\n const classes = useStyles({ enabled, depth });\n\n if (attachments.size === 0) {\n return null;\n }\n\n return (\n <Box className={classes.attachments}>\n {[...attachments.entries()]\n .sort(([a], [b]) => a.localeCompare(b))\n .map(([key, children]) => {\n return (\n <Box key={key} className={classes.attachmentsInput}>\n <Box className={classes.attachmentsInputTitle}>\n <InputIcon />\n <Typography className={classes.attachmentsInputName}>\n {key}\n </Typography>\n </Box>\n <Box className={classes.attachmentsInputChildren}>\n {children.map(childNode => (\n <Extension\n key={childNode.spec.id}\n node={childNode}\n depth={depth + 1}\n />\n ))}\n </Box>\n </Box>\n );\n })}\n </Box>\n );\n}\n\nfunction ExtensionTooltip(props: { node: AppNode }) {\n const parts = [];\n let node = props.node;\n parts.push(node.spec.id);\n while (node.edges.attachedTo) {\n const input = node.edges.attachedTo.input;\n node = node.edges.attachedTo.node;\n parts.push(`${node.spec.id} [${input}]`);\n }\n parts.reverse();\n\n return (\n <>\n {parts.map(part => (\n <Typography key={part}>{part}</Typography>\n ))}\n </>\n );\n}\n\nfunction Extension(props: { node: AppNode; depth: number }) {\n const { node, depth } = props;\n\n const enabled = Boolean(node.instance);\n const classes = useStyles({ enabled, depth });\n\n const dataRefs = node.instance && [...node.instance.getDataRefs()];\n\n return (\n <Box key={node.spec.id} className={classes.extension}>\n <Box className={classes.extensionHeader}>\n <Tooltip title={<ExtensionTooltip node={node} />}>\n <Typography className={classes.extensionHeaderId}>\n {node.spec.id}\n </Typography>\n </Tooltip>\n <Box className={classes.extensionHeaderOutputs}>\n {dataRefs &&\n dataRefs.length > 0 &&\n dataRefs\n .sort((a, b) => a.id.localeCompare(b.id))\n .map(ref => <Output key={ref.id} dataRef={ref} node={node} />)}\n {!enabled && <DisabledIcon fontSize=\"small\" />}\n </Box>\n </Box>\n <Attachments node={node} enabled={enabled} depth={depth} />\n </Box>\n );\n}\n\nconst legendMap = {\n 'React Element': coreExtensionData.reactElement,\n 'Utility API': createApiExtension.factoryDataRef,\n 'Route Path': coreExtensionData.routePath,\n 'Route Ref': coreExtensionData.routeRef,\n 'Nav Target': createNavItemExtension.targetDataRef,\n Theme: createThemeExtension.themeDataRef,\n};\n\nfunction Legend() {\n return (\n <Box\n display=\"grid\"\n maxWidth={600}\n p={1}\n style={{\n grid: 'auto-flow / repeat(3, 1fr)',\n gap: 16,\n }}\n >\n {Object.entries(legendMap).map(([label, dataRef]) => (\n <Box\n key={dataRef.id}\n display=\"flex\"\n style={{ gap: 8 }}\n alignItems=\"center\"\n >\n <Output dataRef={dataRef} />\n <Typography>{label}</Typography>\n </Box>\n ))}\n </Box>\n );\n}\n\nexport function DetailedVisualizer({ tree }: { tree: AppTree }) {\n return (\n <Box display=\"flex\" height=\"100%\" flex=\"1 1 100%\" flexDirection=\"column\">\n <Box flex=\"1 1 0\" overflow=\"auto\" ml={2} mt={2}>\n <Extension node={tree.root} depth={0} />\n </Box>\n\n <Box component={Paper} flex=\"0 0 auto\" m={1}>\n <Legend />\n </Box>\n </Box>\n );\n}\n"],"names":["getOutputColor"],"mappings":"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"}
package/dist/components/AppVisualizerPage/TextVisualizer.esm.js CHANGED
@@ -8,10 +8,10 @@ function mkDiv(children, options) {
8
8
  return /* @__PURE__ */ React.createElement(
9
9
  "div",
10
10
  {
11
- key: options == null ? void 0 : options.key,
11
+ key: options?.key,
12
12
  style: {
13
- color: options == null ? void 0 : options.color,
14
- marginLeft: (options == null ? void 0 : options.indent) ? 16 : void 0
13
+ color: options?.color,
14
+ marginLeft: options?.indent ? 16 : void 0
15
15
  }
16
16
  },
17
17
  children
@@ -19,7 +19,7 @@ function mkDiv(children, options) {
19
19
  }
20
20
  function nodeToText(node, options) {
21
21
  const dataRefIds = node.instance && [...node.instance.getDataRefs()].map((r) => r.id);
22
- const out = (options == null ? void 0 : options.showOutputs) && dataRefIds && dataRefIds.length > 0 ? ` out="${[...dataRefIds].sort().join(", ")}"` : "";
22
+ const out = options?.showOutputs && dataRefIds && dataRefIds.length > 0 ? ` out="${[...dataRefIds].sort().join(", ")}"` : "";
23
23
  const color = node.instance ? void 0 : "gray";
24
24
  if (node.edges.attachments.size === 0) {
25
25
  return mkDiv(`<${node.spec.id}${out}/>`, { color });
@@ -27,7 +27,7 @@ function nodeToText(node, options) {
27
27
  return mkDiv([
28
28
  mkDiv(`<${node.spec.id}${out}>`, { key: "start", color }),
29
29
  ...[...node.edges.attachments.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([key, v]) => {
30
- const children = v.filter((e) => (options == null ? void 0 : options.showDisabled) || e.instance).sort((a, b) => a.spec.id.localeCompare(b.spec.id));
30
+ const children = v.filter((e) => options?.showDisabled || e.instance).sort((a, b) => a.spec.id.localeCompare(b.spec.id));
31
31
  if (children.length === 0) {
32
32
  return mkDiv(`${key} []`, { indent: true });
33
33
  }
package/dist/components/AppVisualizerPage/TextVisualizer.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TextVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Paper from '@material-ui/core/Paper';\nimport React, { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n children: ReactNode,\n options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n return (\n <div\n key={options?.key}\n style={{\n color: options?.color,\n marginLeft: options?.indent ? 16 : undefined,\n }}\n >\n {children}\n </div>\n );\n}\n\nfunction nodeToText(\n node: AppNode,\n options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n const dataRefIds =\n node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n const out =\n options?.showOutputs && dataRefIds && dataRefIds.length > 0\n ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n : '';\n const color = node.instance ? undefined : 'gray';\n\n if (node.edges.attachments.size === 0) {\n return mkDiv(`<${node.spec.id}${out}/>`, { color });\n }\n\n return mkDiv([\n mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n ...[...node.edges.attachments.entries()]\n .sort(([a], [b]) => a.localeCompare(b))\n .map(([key, v]) => {\n const children = v\n .filter(e => options?.showDisabled || e.instance)\n .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n if (children.length === 0) {\n return mkDiv(`${key} []`, { indent: true });\n }\n return mkDiv(\n [\n mkDiv(`${key} [`),\n ...children.map(e =>\n mkDiv(nodeToText(e, options), { indent: true }),\n ),\n mkDiv(']'),\n ],\n { key, indent: true },\n );\n }),\n mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n const [showOutputs, setShowOutputs] = useState(false);\n const [showDisabled, setShowDisabled] = useState(false);\n\n return (\n <>\n <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n <div style={{ margin: 16, width: 'max-content' }}>\n {nodeToText(tree.root, { showOutputs, showDisabled })}\n </div>\n </Box>\n <Paper style={{ padding: '8px 16px' }}>\n <FormControlLabel\n control={\n <Checkbox\n checked={showOutputs}\n onChange={(_, value) => setShowOutputs(value)}\n />\n }\n label=\"Show Outputs\"\n />\n <FormControlLabel\n control={\n <Checkbox\n checked={showDisabled}\n onChange={(_, value) => setShowDisabled(value)}\n />\n }\n label=\"Show Disabled\"\n />\n </Paper>\n </>\n );\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"TextVisualizer.esm.js","sources":["../../../src/components/AppVisualizerPage/TextVisualizer.tsx"],"sourcesContent":["/*\n * Copyright 2023 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 { AppNode, AppTree } from '@backstage/frontend-plugin-api';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Paper from '@material-ui/core/Paper';\nimport React, { ReactNode, useState } from 'react';\n\nfunction mkDiv(\n children: ReactNode,\n options?: { indent?: boolean; key?: string | number; color?: string },\n) {\n return (\n <div\n key={options?.key}\n style={{\n color: options?.color,\n marginLeft: options?.indent ? 16 : undefined,\n }}\n >\n {children}\n </div>\n );\n}\n\nfunction nodeToText(\n node: AppNode,\n options?: { showOutputs?: boolean; showDisabled?: boolean },\n): ReactNode {\n const dataRefIds =\n node.instance && [...node.instance.getDataRefs()].map(r => r.id);\n const out =\n options?.showOutputs && dataRefIds && dataRefIds.length > 0\n ? ` out=\"${[...dataRefIds].sort().join(', ')}\"`\n : '';\n const color = node.instance ? undefined : 'gray';\n\n if (node.edges.attachments.size === 0) {\n return mkDiv(`<${node.spec.id}${out}/>`, { color });\n }\n\n return mkDiv([\n mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),\n ...[...node.edges.attachments.entries()]\n .sort(([a], [b]) => a.localeCompare(b))\n .map(([key, v]) => {\n const children = v\n .filter(e => options?.showDisabled || e.instance)\n .sort((a, b) => a.spec.id.localeCompare(b.spec.id));\n if (children.length === 0) {\n return mkDiv(`${key} []`, { indent: true });\n }\n return mkDiv(\n [\n mkDiv(`${key} [`),\n ...children.map(e =>\n mkDiv(nodeToText(e, options), { indent: true }),\n ),\n mkDiv(']'),\n ],\n { key, indent: true },\n );\n }),\n mkDiv(`</${node.spec.id}>`, { key: 'end', color }),\n ]);\n}\n\nexport function TextVisualizer({ tree }: { tree: AppTree }) {\n const [showOutputs, setShowOutputs] = useState(false);\n const [showDisabled, setShowDisabled] = useState(false);\n\n return (\n <>\n <Box style={{ overflow: 'auto', flex: '1 0 0' }}>\n <div style={{ margin: 16, width: 'max-content' }}>\n {nodeToText(tree.root, { showOutputs, showDisabled })}\n </div>\n </Box>\n <Paper style={{ padding: '8px 16px' }}>\n <FormControlLabel\n control={\n <Checkbox\n checked={showOutputs}\n onChange={(_, value) => setShowOutputs(value)}\n />\n }\n label=\"Show Outputs\"\n />\n <FormControlLabel\n control={\n <Checkbox\n checked={showDisabled}\n onChange={(_, value) => setShowDisabled(value)}\n />\n }\n label=\"Show Disabled\"\n />\n </Paper>\n </>\n );\n}\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/plugin-app-visualizer",
3
- "version": "0.1.6",
3
+ "version": "0.1.7-next.0",
4
4
  "description": "Visualizes the Backstage app structure",
5
5
  "backstage": {
6
6
  "role": "frontend-plugin"
@@ -30,14 +30,14 @@
30
30
  "test": "backstage-cli package test"
31
31
  },
32
32
  "dependencies": {
33
- "@backstage/core-components": "^0.14.7",
33
+ "@backstage/core-components": "^0.14.8-next.0",
34
34
  "@backstage/core-plugin-api": "^1.9.2",
35
- "@backstage/frontend-plugin-api": "^0.6.5",
35
+ "@backstage/frontend-plugin-api": "^0.6.6-next.0",
36
36
  "@material-ui/core": "^4.12.2",
37
37
  "@material-ui/icons": "^4.9.1"
38
38
  },
39
39
  "devDependencies": {
40
- "@backstage/cli": "^0.26.5",
40
+ "@backstage/cli": "^0.26.6-next.0",
41
41
  "@types/react": "^16.13.1 || ^17.0.0"
42
42
  },
43
43
  "peerDependencies": {