@backstage/plugin-devtools 0.1.14 → 0.1.15-next.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/plugin-devtools
 
+## 0.1.15-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.14.8-next.0
+  - @backstage/core-compat-api@0.2.6-next.0
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/errors@1.2.4
+  - @backstage/frontend-plugin-api@0.6.6-next.0
+  - @backstage/plugin-devtools-common@0.1.9
+  - @backstage/plugin-permission-react@0.4.22
+
 ## 0.1.14
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-devtools",
-  "version": "0.1.14",
+  "version": "0.1.15-next.0",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/api/DevToolsClient.esm.js

@@ -1,15 +1,9 @@
 import { ResponseError } from '@backstage/errors';
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
 class DevToolsClient {
+  discoveryApi;
+  fetchApi;
   constructor(options) {
-    __publicField(this, "discoveryApi");
-    __publicField(this, "fetchApi");
     this.discoveryApi = options.discoveryApi;
     this.fetchApi = options.fetchApi;
   }

package/dist/api/DevToolsClient.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsClient.esm.js","sources":["../../src/api/DevToolsClient.ts"],"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 { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';\nimport {\n  ConfigInfo,\n  DevToolsInfo,\n  ExternalDependency,\n} from '@backstage/plugin-devtools-common';\nimport { ResponseError } from '@backstage/errors';\nimport { DevToolsApi } from './DevToolsApi';\n\nexport class DevToolsClient implements DevToolsApi {\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly fetchApi: FetchApi;\n\n  public constructor(options: {\n    discoveryApi: DiscoveryApi;\n    fetchApi: FetchApi;\n  }) {\n    this.discoveryApi = options.discoveryApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  public async getConfig(): Promise<ConfigInfo | undefined> {\n    const urlSegment = 'config';\n\n    const configInfo = await this.get<ConfigInfo | undefined>(urlSegment);\n    return configInfo;\n  }\n\n  public async getExternalDependencies(): Promise<\n    ExternalDependency[] | undefined\n  > {\n    const urlSegment = 'external-dependencies';\n\n    const externalDependencies = await this.get<\n      ExternalDependency[] | undefined\n    >(urlSegment);\n    return externalDependencies;\n  }\n\n  public async getInfo(): Promise<DevToolsInfo | undefined> {\n    const urlSegment = 'info';\n\n    const info = await this.get<DevToolsInfo | undefined>(urlSegment);\n    return info;\n  }\n\n  private async get<T>(path: string): Promise<T> {\n    const baseUrl = `${await this.discoveryApi.getBaseUrl('devtools')}/`;\n    const url = new URL(path, baseUrl);\n\n    const response = await this.fetchApi.fetch(url.toString());\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    return response.json() as Promise<T>;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,cAAsC,CAAA;AAAA,EAI1C,YAAY,OAGhB,EAAA;AANH,IAAiB,aAAA,CAAA,IAAA,EAAA,cAAA,CAAA,CAAA;AACjB,IAAiB,aAAA,CAAA,IAAA,EAAA,UAAA,CAAA,CAAA;AAMf,IAAA,IAAA,CAAK,eAAe,OAAQ,CAAA,YAAA,CAAA;AAC5B,IAAA,IAAA,CAAK,WAAW,OAAQ,CAAA,QAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,MAAa,SAA6C,GAAA;AACxD,IAAA,MAAM,UAAa,GAAA,QAAA,CAAA;AAEnB,IAAA,MAAM,UAAa,GAAA,MAAM,IAAK,CAAA,GAAA,CAA4B,UAAU,CAAA,CAAA;AACpE,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAa,uBAEX,GAAA;AACA,IAAA,MAAM,UAAa,GAAA,uBAAA,CAAA;AAEnB,IAAA,MAAM,oBAAuB,GAAA,MAAM,IAAK,CAAA,GAAA,CAEtC,UAAU,CAAA,CAAA;AACZ,IAAO,OAAA,oBAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAa,OAA6C,GAAA;AACxD,IAAA,MAAM,UAAa,GAAA,MAAA,CAAA;AAEnB,IAAA,MAAM,IAAO,GAAA,MAAM,IAAK,CAAA,GAAA,CAA8B,UAAU,CAAA,CAAA;AAChE,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAc,IAAO,IAA0B,EAAA;AAC7C,IAAA,MAAM,UAAU,CAAG,EAAA,MAAM,KAAK,YAAa,CAAA,UAAA,CAAW,UAAU,CAAC,CAAA,CAAA,CAAA,CAAA;AACjE,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,IAAA,EAAM,OAAO,CAAA,CAAA;AAEjC,IAAA,MAAM,WAAW,MAAM,IAAA,CAAK,SAAS,KAAM,CAAA,GAAA,CAAI,UAAU,CAAA,CAAA;AAEzD,IAAI,IAAA,CAAC,SAAS,EAAI,EAAA;AAChB,MAAM,MAAA,MAAM,aAAc,CAAA,YAAA,CAAa,QAAQ,CAAA,CAAA;AAAA,KACjD;AAEA,IAAA,OAAO,SAAS,IAAK,EAAA,CAAA;AAAA,GACvB;AACF;;;;"}
+{"version":3,"file":"DevToolsClient.esm.js","sources":["../../src/api/DevToolsClient.ts"],"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 { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';\nimport {\n  ConfigInfo,\n  DevToolsInfo,\n  ExternalDependency,\n} from '@backstage/plugin-devtools-common';\nimport { ResponseError } from '@backstage/errors';\nimport { DevToolsApi } from './DevToolsApi';\n\nexport class DevToolsClient implements DevToolsApi {\n  private readonly discoveryApi: DiscoveryApi;\n  private readonly fetchApi: FetchApi;\n\n  public constructor(options: {\n    discoveryApi: DiscoveryApi;\n    fetchApi: FetchApi;\n  }) {\n    this.discoveryApi = options.discoveryApi;\n    this.fetchApi = options.fetchApi;\n  }\n\n  public async getConfig(): Promise<ConfigInfo | undefined> {\n    const urlSegment = 'config';\n\n    const configInfo = await this.get<ConfigInfo | undefined>(urlSegment);\n    return configInfo;\n  }\n\n  public async getExternalDependencies(): Promise<\n    ExternalDependency[] | undefined\n  > {\n    const urlSegment = 'external-dependencies';\n\n    const externalDependencies = await this.get<\n      ExternalDependency[] | undefined\n    >(urlSegment);\n    return externalDependencies;\n  }\n\n  public async getInfo(): Promise<DevToolsInfo | undefined> {\n    const urlSegment = 'info';\n\n    const info = await this.get<DevToolsInfo | undefined>(urlSegment);\n    return info;\n  }\n\n  private async get<T>(path: string): Promise<T> {\n    const baseUrl = `${await this.discoveryApi.getBaseUrl('devtools')}/`;\n    const url = new URL(path, baseUrl);\n\n    const response = await this.fetchApi.fetch(url.toString());\n\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n\n    return response.json() as Promise<T>;\n  }\n}\n"],"names":[],"mappings":";;AAyBO,MAAM,cAAsC,CAAA;AAAA,EAChC,YAAA,CAAA;AAAA,EACA,QAAA,CAAA;AAAA,EAEV,YAAY,OAGhB,EAAA;AACD,IAAA,IAAA,CAAK,eAAe,OAAQ,CAAA,YAAA,CAAA;AAC5B,IAAA,IAAA,CAAK,WAAW,OAAQ,CAAA,QAAA,CAAA;AAAA,GAC1B;AAAA,EAEA,MAAa,SAA6C,GAAA;AACxD,IAAA,MAAM,UAAa,GAAA,QAAA,CAAA;AAEnB,IAAA,MAAM,UAAa,GAAA,MAAM,IAAK,CAAA,GAAA,CAA4B,UAAU,CAAA,CAAA;AACpE,IAAO,OAAA,UAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAa,uBAEX,GAAA;AACA,IAAA,MAAM,UAAa,GAAA,uBAAA,CAAA;AAEnB,IAAA,MAAM,oBAAuB,GAAA,MAAM,IAAK,CAAA,GAAA,CAEtC,UAAU,CAAA,CAAA;AACZ,IAAO,OAAA,oBAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAa,OAA6C,GAAA;AACxD,IAAA,MAAM,UAAa,GAAA,MAAA,CAAA;AAEnB,IAAA,MAAM,IAAO,GAAA,MAAM,IAAK,CAAA,GAAA,CAA8B,UAAU,CAAA,CAAA;AAChE,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEA,MAAc,IAAO,IAA0B,EAAA;AAC7C,IAAA,MAAM,UAAU,CAAG,EAAA,MAAM,KAAK,YAAa,CAAA,UAAA,CAAW,UAAU,CAAC,CAAA,CAAA,CAAA,CAAA;AACjE,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,IAAA,EAAM,OAAO,CAAA,CAAA;AAEjC,IAAA,MAAM,WAAW,MAAM,IAAA,CAAK,SAAS,KAAM,CAAA,GAAA,CAAI,UAAU,CAAA,CAAA;AAEzD,IAAI,IAAA,CAAC,SAAS,EAAI,EAAA;AAChB,MAAM,MAAA,MAAM,aAAc,CAAA,YAAA,CAAa,QAAQ,CAAA,CAAA;AAAA,KACjD;AAEA,IAAA,OAAO,SAAS,IAAK,EAAA,CAAA;AAAA,GACvB;AACF;;;;"}

package/dist/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.esm.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(
   })
 );
 const getExternalDependencyStatus = (result) => {
-  switch (result == null ? void 0 : result.status) {
+  switch (result?.status) {
     case "Healthy":
       return /* @__PURE__ */ React.createElement(Typography, { component: "span" }, /* @__PURE__ */ React.createElement(StatusOK, null), " ", result.status);
     case "Unhealthy":

package/dist/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalDependenciesContent.esm.js","sources":["../../../../src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.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 {\n  Progress,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport { ExternalDependency } from '@backstage/plugin-devtools-common';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport React from 'react';\nimport { useExternalDependencies } from '../../../hooks';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paperStyle: {\n      padding: theme.spacing(2),\n    },\n  }),\n);\n\nexport const getExternalDependencyStatus = (\n  result: Partial<ExternalDependency> | undefined,\n) => {\n  switch (result?.status) {\n    case 'Healthy':\n      return (\n        <Typography component=\"span\">\n          <StatusOK /> {result.status}\n        </Typography>\n      );\n    case 'Unhealthy':\n      return (\n        <Typography component=\"span\">\n          <StatusError /> {`${result.status}`}\n        </Typography>\n      );\n    case undefined:\n    default:\n      return (\n        <Typography component=\"span\">\n          <StatusWarning /> Unknown\n        </Typography>\n      );\n  }\n};\n\nconst columns: TableColumn[] = [\n  {\n    title: 'Name',\n    width: 'auto',\n    field: 'name',\n  },\n  {\n    title: 'Target',\n    width: 'auto',\n    field: 'target',\n  },\n  {\n    title: 'Type',\n    width: 'auto',\n    field: 'type',\n  },\n  {\n    title: 'Status',\n    width: 'auto',\n    render: (row: Partial<ExternalDependency>) => (\n      <Grid container direction=\"column\">\n        <Grid item>\n          <Typography variant=\"button\">\n            {getExternalDependencyStatus(row)}\n          </Typography>\n        </Grid>\n        <Grid item>{row.error && <Typography>{row.error}</Typography>}</Grid>\n      </Grid>\n    ),\n  },\n];\n\n/** @public */\nexport const ExternalDependenciesContent = () => {\n  const classes = useStyles();\n  const { externalDependencies, loading, error } = useExternalDependencies();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n\n  if (!externalDependencies || externalDependencies.length === 0) {\n    return (\n      <Box>\n        <Paper className={classes.paperStyle}>\n          <Typography>No external dependencies found</Typography>\n        </Paper>\n      </Box>\n    );\n  }\n\n  return (\n    <Table\n      title=\"Status\"\n      options={{\n        paging: true,\n        pageSize: 20,\n        pageSizeOptions: [20, 50, 100],\n        loadingType: 'linear',\n        showEmptyDataSourceMessage: !loading,\n      }}\n      columns={columns}\n      data={externalDependencies || []}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExternalDependenciesContent.esm.js","sources":["../../../../src/components/Content/ExternalDependenciesContent/ExternalDependenciesContent.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 {\n  Progress,\n  StatusError,\n  StatusOK,\n  StatusWarning,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport { ExternalDependency } from '@backstage/plugin-devtools-common';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport React from 'react';\nimport { useExternalDependencies } from '../../../hooks';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paperStyle: {\n      padding: theme.spacing(2),\n    },\n  }),\n);\n\nexport const getExternalDependencyStatus = (\n  result: Partial<ExternalDependency> | undefined,\n) => {\n  switch (result?.status) {\n    case 'Healthy':\n      return (\n        <Typography component=\"span\">\n          <StatusOK /> {result.status}\n        </Typography>\n      );\n    case 'Unhealthy':\n      return (\n        <Typography component=\"span\">\n          <StatusError /> {`${result.status}`}\n        </Typography>\n      );\n    case undefined:\n    default:\n      return (\n        <Typography component=\"span\">\n          <StatusWarning /> Unknown\n        </Typography>\n      );\n  }\n};\n\nconst columns: TableColumn[] = [\n  {\n    title: 'Name',\n    width: 'auto',\n    field: 'name',\n  },\n  {\n    title: 'Target',\n    width: 'auto',\n    field: 'target',\n  },\n  {\n    title: 'Type',\n    width: 'auto',\n    field: 'type',\n  },\n  {\n    title: 'Status',\n    width: 'auto',\n    render: (row: Partial<ExternalDependency>) => (\n      <Grid container direction=\"column\">\n        <Grid item>\n          <Typography variant=\"button\">\n            {getExternalDependencyStatus(row)}\n          </Typography>\n        </Grid>\n        <Grid item>{row.error && <Typography>{row.error}</Typography>}</Grid>\n      </Grid>\n    ),\n  },\n];\n\n/** @public */\nexport const ExternalDependenciesContent = () => {\n  const classes = useStyles();\n  const { externalDependencies, loading, error } = useExternalDependencies();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n\n  if (!externalDependencies || externalDependencies.length === 0) {\n    return (\n      <Box>\n        <Paper className={classes.paperStyle}>\n          <Typography>No external dependencies found</Typography>\n        </Paper>\n      </Box>\n    );\n  }\n\n  return (\n    <Table\n      title=\"Status\"\n      options={{\n        paging: true,\n        pageSize: 20,\n        pageSizeOptions: [20, 50, 100],\n        loadingType: 'linear',\n        showEmptyDataSourceMessage: !loading,\n      }}\n      columns={columns}\n      data={externalDependencies || []}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Content/InfoContent/InfoContent.esm.js

@@ -70,25 +70,25 @@ const InfoContent = () => {
     ListItemText,
     {
       primary: "Operating System",
-      secondary: about == null ? void 0 : about.operatingSystem
+      secondary: about?.operatingSystem
     }
   )), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(MemoryIcon, null))), /* @__PURE__ */ React.createElement(
     ListItemText,
     {
       primary: "Resource utilization",
-      secondary: about == null ? void 0 : about.resourceUtilization
+      secondary: about?.resourceUtilization
     }
   )), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(DescriptionIcon, null))), /* @__PURE__ */ React.createElement(
     ListItemText,
     {
       primary: "NodeJS Version",
-      secondary: about == null ? void 0 : about.nodeJsVersion
+      secondary: about?.nodeJsVersion
     }
   )), /* @__PURE__ */ React.createElement(ListItem, null, /* @__PURE__ */ React.createElement(ListItemAvatar, null, /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(BackstageLogoIcon, null))), /* @__PURE__ */ React.createElement(
     ListItemText,
     {
       primary: "Backstage Version",
-      secondary: about == null ? void 0 : about.backstageVersion
+      secondary: about?.backstageVersion
     }
   ))), /* @__PURE__ */ React.createElement(Divider, { orientation: "vertical", variant: "middle", flexItem: true }), /* @__PURE__ */ React.createElement(
     Button,
@@ -100,7 +100,7 @@ const InfoContent = () => {
       startIcon: /* @__PURE__ */ React.createElement(FileCopyIcon, null)
     },
     "Copy Info to Clipboard"
-  )), /* @__PURE__ */ React.createElement(InfoDependenciesTable, { infoDependencies: about == null ? void 0 : about.dependencies }));
+  )), /* @__PURE__ */ React.createElement(InfoDependenciesTable, { infoDependencies: about?.dependencies }));
 };
 
 export { InfoContent };

package/dist/components/Content/InfoContent/InfoContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoContent.esm.js","sources":["../../../../src/components/Content/InfoContent/InfoContent.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 { Progress } from '@backstage/core-components';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Paper from '@material-ui/core/Paper';\nimport Button from '@material-ui/core/Button';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport React from 'react';\nimport { useInfo } from '../../../hooks';\nimport { InfoDependenciesTable } from './InfoDependenciesTable';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport MemoryIcon from '@material-ui/icons/Memory';\nimport DeveloperBoardIcon from '@material-ui/icons/DeveloperBoard';\nimport { BackstageLogoIcon } from './BackstageLogoIcon';\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\nimport { DevToolsInfo } from '@backstage/plugin-devtools-common';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paperStyle: {\n      display: 'flex',\n      marginBottom: theme.spacing(2),\n    },\n    flexContainer: {\n      display: 'flex',\n      flexDirection: 'row',\n      padding: 0,\n    },\n    copyButton: {\n      float: 'left',\n      margin: theme.spacing(2),\n    },\n  }),\n);\n\nconst copyToClipboard = ({ about }: { about: DevToolsInfo | undefined }) => {\n  if (about) {\n    let formatted = `OS: ${about.operatingSystem}\\nResources: ${about.resourceUtilization}\\nnode: ${about.nodeJsVersion}\\nbackstage: ${about.backstageVersion}\\nDependencies:\\n`;\n    const deps = about.dependencies;\n    for (const key in deps) {\n      if (Object.prototype.hasOwnProperty.call(deps, key)) {\n        formatted = `${formatted}    ${deps[key].name}: ${deps[key].versions}\\n`;\n      }\n    }\n    window.navigator.clipboard.writeText(formatted);\n  }\n};\n\n/** @public */\nexport const InfoContent = () => {\n  const classes = useStyles();\n  const { about, loading, error } = useInfo();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n  return (\n    <Box>\n      <Paper className={classes.paperStyle}>\n        <List className={classes.flexContainer}>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <DeveloperBoardIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Operating System\"\n              secondary={about?.operatingSystem}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <MemoryIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Resource utilization\"\n              secondary={about?.resourceUtilization}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <DescriptionIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"NodeJS Version\"\n              secondary={about?.nodeJsVersion}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <BackstageLogoIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Backstage Version\"\n              secondary={about?.backstageVersion}\n            />\n          </ListItem>\n        </List>\n        <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n        <Button\n          onClick={() => {\n            copyToClipboard({ about });\n          }}\n          className={classes.copyButton}\n          startIcon={<FileCopyIcon />}\n        >\n          Copy Info to Clipboard\n        </Button>\n      </Paper>\n      <InfoDependenciesTable infoDependencies={about?.dependencies} />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InfoContent.esm.js","sources":["../../../../src/components/Content/InfoContent/InfoContent.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 { Progress } from '@backstage/core-components';\nimport Avatar from '@material-ui/core/Avatar';\nimport Box from '@material-ui/core/Box';\nimport Divider from '@material-ui/core/Divider';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Paper from '@material-ui/core/Paper';\nimport Button from '@material-ui/core/Button';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport React from 'react';\nimport { useInfo } from '../../../hooks';\nimport { InfoDependenciesTable } from './InfoDependenciesTable';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport MemoryIcon from '@material-ui/icons/Memory';\nimport DeveloperBoardIcon from '@material-ui/icons/DeveloperBoard';\nimport { BackstageLogoIcon } from './BackstageLogoIcon';\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\nimport { DevToolsInfo } from '@backstage/plugin-devtools-common';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    paperStyle: {\n      display: 'flex',\n      marginBottom: theme.spacing(2),\n    },\n    flexContainer: {\n      display: 'flex',\n      flexDirection: 'row',\n      padding: 0,\n    },\n    copyButton: {\n      float: 'left',\n      margin: theme.spacing(2),\n    },\n  }),\n);\n\nconst copyToClipboard = ({ about }: { about: DevToolsInfo | undefined }) => {\n  if (about) {\n    let formatted = `OS: ${about.operatingSystem}\\nResources: ${about.resourceUtilization}\\nnode: ${about.nodeJsVersion}\\nbackstage: ${about.backstageVersion}\\nDependencies:\\n`;\n    const deps = about.dependencies;\n    for (const key in deps) {\n      if (Object.prototype.hasOwnProperty.call(deps, key)) {\n        formatted = `${formatted}    ${deps[key].name}: ${deps[key].versions}\\n`;\n      }\n    }\n    window.navigator.clipboard.writeText(formatted);\n  }\n};\n\n/** @public */\nexport const InfoContent = () => {\n  const classes = useStyles();\n  const { about, loading, error } = useInfo();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n  return (\n    <Box>\n      <Paper className={classes.paperStyle}>\n        <List className={classes.flexContainer}>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <DeveloperBoardIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Operating System\"\n              secondary={about?.operatingSystem}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <MemoryIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Resource utilization\"\n              secondary={about?.resourceUtilization}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <DescriptionIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"NodeJS Version\"\n              secondary={about?.nodeJsVersion}\n            />\n          </ListItem>\n          <ListItem>\n            <ListItemAvatar>\n              <Avatar>\n                <BackstageLogoIcon />\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText\n              primary=\"Backstage Version\"\n              secondary={about?.backstageVersion}\n            />\n          </ListItem>\n        </List>\n        <Divider orientation=\"vertical\" variant=\"middle\" flexItem />\n        <Button\n          onClick={() => {\n            copyToClipboard({ about });\n          }}\n          className={classes.copyButton}\n          startIcon={<FileCopyIcon />}\n        >\n          Copy Info to Clipboard\n        </Button>\n      </Paper>\n      <InfoDependenciesTable infoDependencies={about?.dependencies} />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DevToolsLayout/DevToolsLayout.esm.js

@@ -18,7 +18,7 @@ const DevToolsLayout = ({
       withStrictError: "Child of DevToolsLayout must be an DevToolsLayout.Route"
     }).getElements().map((child) => child.props)
   );
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { title: title != null ? title : "Backstage DevTools", subtitle }), /* @__PURE__ */ React.createElement(RoutedTabs, { routes }));
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { title: title ?? "Backstage DevTools", subtitle }), /* @__PURE__ */ React.createElement(RoutedTabs, { routes }));
 };
 DevToolsLayout.Route = Route;
 

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

@@ -1 +1 @@
-{"version":3,"file":"DevToolsLayout.esm.js","sources":["../../../src/components/DevToolsLayout/DevToolsLayout.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 { Header, Page, RoutedTabs } from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\nimport { TabProps } from '@material-ui/core/Tab';\nimport { default as React } from 'react';\n\n/** @public */\nexport type SubRoute = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;\n};\n\nconst dataKey = 'plugin.devtools.devtoolsLayoutRoute';\n\nconst Route: (props: SubRoute) => null = () => null;\nattachComponentData(Route, dataKey, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type DevToolsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * DevTools is a compound component, which allows you to define a custom layout\n *\n * @example\n * ```jsx\n * <DevToolsLayout>\n *   <DevToolsLayout.Route path=\"/example\" title=\"Example tab\">\n *     <div>This is rendered under /example/anything-here route</div>\n *   </DevToolsLayout.Route>\n * </DevToolsLayout>\n * ```\n * @public\n */\nexport const DevToolsLayout = ({\n  children,\n  title,\n  subtitle,\n}: DevToolsLayoutProps) => {\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: dataKey,\n        withStrictError:\n          'Child of DevToolsLayout must be an DevToolsLayout.Route',\n      })\n      .getElements<SubRoute>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header title={title ?? 'Backstage DevTools'} subtitle={subtitle} />\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nDevToolsLayout.Route = Route;\n"],"names":[],"mappings":";;;;AAgCA,MAAM,OAAU,GAAA,qCAAA,CAAA;AAEhB,MAAM,QAAmC,MAAM,IAAA,CAAA;AAC/C,mBAAoB,CAAA,KAAA,EAAO,SAAS,IAAI,CAAA,CAAA;AAGxC,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA,CAAA;AAsBlD,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,OAAA;AAAA,MACL,eACE,EAAA,yDAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAO,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,oBAAA,EAAsB,QAAoB,EAAA,CAAA,kBACjE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,QAAgB,CAC9B,CAAA,CAAA;AAEJ,EAAA;AAEA,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}
+{"version":3,"file":"DevToolsLayout.esm.js","sources":["../../../src/components/DevToolsLayout/DevToolsLayout.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 { Header, Page, RoutedTabs } from '@backstage/core-components';\nimport {\n  attachComponentData,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\nimport { TabProps } from '@material-ui/core/Tab';\nimport { default as React } from 'react';\n\n/** @public */\nexport type SubRoute = {\n  path: string;\n  title: string;\n  children: JSX.Element;\n  tabProps?: TabProps<React.ElementType, { component?: React.ElementType }>;\n};\n\nconst dataKey = 'plugin.devtools.devtoolsLayoutRoute';\n\nconst Route: (props: SubRoute) => null = () => null;\nattachComponentData(Route, dataKey, true);\n\n// This causes all mount points that are discovered within this route to use the path of the route itself\nattachComponentData(Route, 'core.gatherMountPoints', true);\n\n/** @public */\nexport type DevToolsLayoutProps = {\n  title?: string;\n  subtitle?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * DevTools is a compound component, which allows you to define a custom layout\n *\n * @example\n * ```jsx\n * <DevToolsLayout>\n *   <DevToolsLayout.Route path=\"/example\" title=\"Example tab\">\n *     <div>This is rendered under /example/anything-here route</div>\n *   </DevToolsLayout.Route>\n * </DevToolsLayout>\n * ```\n * @public\n */\nexport const DevToolsLayout = ({\n  children,\n  title,\n  subtitle,\n}: DevToolsLayoutProps) => {\n  const routes = useElementFilter(children, elements =>\n    elements\n      .selectByComponentData({\n        key: dataKey,\n        withStrictError:\n          'Child of DevToolsLayout must be an DevToolsLayout.Route',\n      })\n      .getElements<SubRoute>()\n      .map(child => child.props),\n  );\n\n  return (\n    <Page themeId=\"home\">\n      <Header title={title ?? 'Backstage DevTools'} subtitle={subtitle} />\n      <RoutedTabs routes={routes} />\n    </Page>\n  );\n};\n\nDevToolsLayout.Route = Route;\n"],"names":[],"mappings":";;;;AAgCA,MAAM,OAAU,GAAA,qCAAA,CAAA;AAEhB,MAAM,QAAmC,MAAM,IAAA,CAAA;AAC/C,mBAAoB,CAAA,KAAA,EAAO,SAAS,IAAI,CAAA,CAAA;AAGxC,mBAAoB,CAAA,KAAA,EAAO,0BAA0B,IAAI,CAAA,CAAA;AAsBlD,MAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,MAAS,GAAA,gBAAA;AAAA,IAAiB,QAAA;AAAA,IAAU,CAAA,QAAA,KACxC,SACG,qBAAsB,CAAA;AAAA,MACrB,GAAK,EAAA,OAAA;AAAA,MACL,eACE,EAAA,yDAAA;AAAA,KACH,CACA,CAAA,WAAA,GACA,GAAI,CAAA,CAAA,KAAA,KAAS,MAAM,KAAK,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAO,KAAS,IAAA,oBAAA,EAAsB,QAAoB,EAAA,CAAA,kBACjE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,QAAgB,CAC9B,CAAA,CAAA;AAEJ,EAAA;AAEA,cAAA,CAAe,KAAQ,GAAA,KAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-devtools",
-  "version": "0.1.14",
+  "version": "0.1.15-next.0",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
@@ -40,11 +40,11 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
-    "@backstage/core-compat-api": "^0.2.5",
-    "@backstage/core-components": "^0.14.7",
+    "@backstage/core-compat-api": "^0.2.6-next.0",
+    "@backstage/core-components": "^0.14.8-next.0",
     "@backstage/core-plugin-api": "^1.9.2",
     "@backstage/errors": "^1.2.4",
-    "@backstage/frontend-plugin-api": "^0.6.5",
+    "@backstage/frontend-plugin-api": "^0.6.6-next.0",
     "@backstage/plugin-devtools-common": "^0.1.9",
     "@backstage/plugin-permission-react": "^0.4.22",
     "@material-ui/core": "^4.9.13",
@@ -60,8 +60,8 @@
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.26.5",
-    "@backstage/dev-utils": "^1.0.32",
+    "@backstage/cli": "^0.26.6-next.0",
+    "@backstage/dev-utils": "^1.0.33-next.0",
     "@testing-library/jest-dom": "^6.0.0"
   },
   "files": [