@backstage/plugin-devtools 0.1.39-next.1 → 0.1.39-next.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/plugin-devtools
 
+## 0.1.39-next.2
+
+### Patch Changes
+
+- 08c922e: Migrated `ConfigContent` component from Material UI to Backstage UI (BUI).
+- Updated dependencies
+  - @backstage/ui@0.15.0-next.2
+  - @backstage/core-components@0.18.10-next.1
+
 ## 0.1.39-next.1
 
 ### Patch Changes

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

@@ -1,57 +1,49 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Progress, WarningPanel } from '@backstage/core-components';
-import Box from '@material-ui/core/Box';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import { useTheme, makeStyles, createStyles } from '@material-ui/core/styles';
-import Alert from '@material-ui/lab/Alert';
+import { useApi, appThemeApiRef } from '@backstage/core-plugin-api';
+import { Alert, Box, Text } from '@backstage/ui';
+import useObservable from 'react-use/esm/useObservable';
 import ReactJson from 'react-json-view';
 import { useConfig } from '../../../hooks/useConfig.esm.js';
 import '../../../api/DevToolsApi.esm.js';
 import '@backstage/errors';
-import '@backstage/core-plugin-api';
 import 'react-use/esm/useAsync';
 import 'react-use/esm/useAsyncRetry';
 import 'react';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    warningStyle: {
-      paddingBottom: theme.spacing(2)
-    },
-    paperStyle: {
-      padding: theme.spacing(2)
-    }
-  })
-);
 const WarningContent = ({ error }) => {
   if (!error.messages) {
-    return /* @__PURE__ */ jsx(Typography, { children: error.message });
+    return /* @__PURE__ */ jsx(Text, { as: "p", children: error.message });
   }
   const messages = error.messages;
-  return /* @__PURE__ */ jsx(Box, { children: messages.map((message) => /* @__PURE__ */ jsx(Typography, { children: message })) });
+  return /* @__PURE__ */ jsx(Box, { children: messages.map((message) => /* @__PURE__ */ jsx(Text, { as: "p", children: message }, message)) });
 };
 const ConfigContent = () => {
-  const classes = useStyles();
-  const theme = useTheme();
+  const appThemeApi = useApi(appThemeApiRef);
+  const activeThemeId = useObservable(
+    appThemeApi.activeThemeId$(),
+    appThemeApi.getActiveThemeId()
+  );
+  const activeTheme = appThemeApi.getInstalledThemes().find((t) => t.id === activeThemeId);
+  const isDark = activeTheme?.variant === "dark";
   const { configInfo, loading, error } = useConfig();
   if (loading) {
     return /* @__PURE__ */ jsx(Progress, {});
   } else if (error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
+    return /* @__PURE__ */ jsx(Alert, { status: "danger", description: error.message });
   }
   if (!configInfo) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: "Unable to load config data" });
+    return /* @__PURE__ */ jsx(Alert, { status: "danger", description: "Unable to load config data" });
   }
   return /* @__PURE__ */ jsxs(Box, { children: [
-    configInfo && configInfo.error && /* @__PURE__ */ jsx(Box, { className: classes.warningStyle, children: /* @__PURE__ */ jsx(WarningPanel, { title: "Config validation failed", children: /* @__PURE__ */ jsx(WarningContent, { error: configInfo.error }) }) }),
-    /* @__PURE__ */ jsx(Paper, { className: classes.paperStyle, children: /* @__PURE__ */ jsx(
+    configInfo && configInfo.error && /* @__PURE__ */ jsx(Box, { pb: "2", children: /* @__PURE__ */ jsx(WarningPanel, { title: "Config validation failed", children: /* @__PURE__ */ jsx(WarningContent, { error: configInfo.error }) }) }),
+    /* @__PURE__ */ jsx(Box, { bg: "neutral", p: "4", children: /* @__PURE__ */ jsx(
       ReactJson,
       {
         src: configInfo.config,
         name: "config",
         enableClipboard: false,
-        theme: theme.palette.type === "dark" ? "chalk" : "rjv-default"
+        theme: isDark ? "chalk" : "rjv-default"
       }
     ) })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigContent.esm.js","sources":["../../../../src/components/Content/ConfigContent/ConfigContent.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, WarningPanel } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  createStyles,\n  makeStyles,\n  Theme,\n  useTheme,\n} from '@material-ui/core/styles';\nimport Alert from '@material-ui/lab/Alert';\nimport ReactJson from 'react-json-view';\nimport { useConfig } from '../../../hooks';\nimport { ConfigError } from '@backstage/plugin-devtools-common';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    warningStyle: {\n      paddingBottom: theme.spacing(2),\n    },\n    paperStyle: {\n      padding: theme.spacing(2),\n    },\n  }),\n);\n\nexport const WarningContent = ({ error }: { error: ConfigError }) => {\n  if (!error.messages) {\n    return <Typography>{error.message}</Typography>;\n  }\n\n  const messages = error.messages as string[];\n\n  return (\n    <Box>\n      {messages.map(message => (\n        <Typography>{message}</Typography>\n      ))}\n    </Box>\n  );\n};\n\n/** @public */\nexport const ConfigContent = () => {\n  const classes = useStyles();\n  const theme = useTheme();\n  const { configInfo, loading, error } = useConfig();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n\n  if (!configInfo) {\n    return <Alert severity=\"error\">Unable to load config data</Alert>;\n  }\n\n  return (\n    <Box>\n      {configInfo && configInfo.error && (\n        <Box className={classes.warningStyle}>\n          <WarningPanel title=\"Config validation failed\">\n            <WarningContent error={configInfo.error} />\n          </WarningPanel>\n        </Box>\n      )}\n      <Paper className={classes.paperStyle}>\n        <ReactJson\n          src={configInfo.config as object}\n          name=\"config\"\n          enableClipboard={false}\n          theme={theme.palette.type === 'dark' ? 'chalk' : 'rjv-default'}\n        />\n      </Paper>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+BA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,YAAA,EAAc;AAAA,MACZ,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,KAChC;AAAA,IACA,UAAA,EAAY;AAAA,MACV,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC1B,GACD;AACH,CAAA;AAEO,MAAM,cAAA,GAAiB,CAAC,EAAE,KAAA,EAAM,KAA8B;AACnE,EAAA,IAAI,CAAC,MAAM,QAAA,EAAU;AACnB,IAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAY,QAAA,EAAA,KAAA,CAAM,OAAA,EAAQ,CAAA;AAAA,EACpC;AAEA,EAAA,MAAM,WAAW,KAAA,CAAM,QAAA;AAEvB,EAAA,uBACE,GAAA,CAAC,OACE,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,6BACZ,GAAA,CAAC,UAAA,EAAA,EAAY,QAAA,EAAA,OAAA,EAAQ,CACtB,CAAA,EACH,CAAA;AAEJ;AAGO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,KAAA,KAAU,SAAA,EAAU;AAEjD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BAAQ,QAAA,EAAA,EAAS,CAAA;AAAA,EACnB,WAAW,KAAA,EAAO;AAChB,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAS,gBAAM,OAAA,EAAQ,CAAA;AAAA,EAChD;AAEA,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAM,QAAA,EAAS,OAAA,EAAQ,QAAA,EAAA,4BAAA,EAA0B,CAAA;AAAA,EAC3D;AAEA,EAAA,4BACG,GAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,UAAA,IAAc,WAAW,KAAA,oBACxB,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,YAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAM,4BAClB,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAO,UAAA,CAAW,KAAA,EAAO,GAC3C,CAAA,EACF,CAAA;AAAA,oBAEF,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAW,OAAA,CAAQ,UAAA,EACxB,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAK,UAAA,CAAW,MAAA;AAAA,QAChB,IAAA,EAAK,QAAA;AAAA,QACL,eAAA,EAAiB,KAAA;AAAA,QACjB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SAAS,OAAA,GAAU;AAAA;AAAA,KACnD,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConfigContent.esm.js","sources":["../../../../src/components/Content/ConfigContent/ConfigContent.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, WarningPanel } from '@backstage/core-components';\nimport { appThemeApiRef, useApi } from '@backstage/core-plugin-api';\nimport { Alert, Box, Text } from '@backstage/ui';\nimport useObservable from 'react-use/esm/useObservable';\nimport ReactJson from 'react-json-view';\nimport { useConfig } from '../../../hooks';\nimport { ConfigError } from '@backstage/plugin-devtools-common';\n\nexport const WarningContent = ({ error }: { error: ConfigError }) => {\n  if (!error.messages) {\n    return <Text as=\"p\">{error.message}</Text>;\n  }\n\n  const messages = error.messages;\n\n  return (\n    <Box>\n      {messages.map(message => (\n        <Text as=\"p\" key={message}>\n          {message}\n        </Text>\n      ))}\n    </Box>\n  );\n};\n\n/** @public */\nexport const ConfigContent = () => {\n  const appThemeApi = useApi(appThemeApiRef);\n  const activeThemeId = useObservable(\n    appThemeApi.activeThemeId$(),\n    appThemeApi.getActiveThemeId(),\n  );\n  const activeTheme = appThemeApi\n    .getInstalledThemes()\n    .find(t => t.id === activeThemeId);\n  const isDark = activeTheme?.variant === 'dark';\n  const { configInfo, loading, error } = useConfig();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert status=\"danger\" description={error.message} />;\n  }\n\n  if (!configInfo) {\n    return <Alert status=\"danger\" description=\"Unable to load config data\" />;\n  }\n\n  return (\n    <Box>\n      {configInfo && configInfo.error && (\n        <Box pb=\"2\">\n          <WarningPanel title=\"Config validation failed\">\n            <WarningContent error={configInfo.error} />\n          </WarningPanel>\n        </Box>\n      )}\n      <Box bg=\"neutral\" p=\"4\">\n        <ReactJson\n          src={configInfo.config as object}\n          name=\"config\"\n          enableClipboard={false}\n          theme={isDark ? 'chalk' : 'rjv-default'}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBO,MAAM,cAAA,GAAiB,CAAC,EAAE,KAAA,EAAM,KAA8B;AACnE,EAAA,IAAI,CAAC,MAAM,QAAA,EAAU;AACnB,IAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAK,gBAAM,OAAA,EAAQ,CAAA;AAAA,EACrC;AAEA,EAAA,MAAM,WAAW,KAAA,CAAM,QAAA;AAEvB,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EACE,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAA,OAAA,qBACZ,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EACN,QAAA,EAAA,OAAA,EAAA,EADe,OAElB,CACD,CAAA,EACH,CAAA;AAEJ;AAGO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,WAAA,GAAc,OAAO,cAAc,CAAA;AACzC,EAAA,MAAM,aAAA,GAAgB,aAAA;AAAA,IACpB,YAAY,cAAA,EAAe;AAAA,IAC3B,YAAY,gBAAA;AAAiB,GAC/B;AACA,EAAA,MAAM,WAAA,GAAc,YACjB,kBAAA,EAAmB,CACnB,KAAK,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,aAAa,CAAA;AACnC,EAAA,MAAM,MAAA,GAAS,aAAa,OAAA,KAAY,MAAA;AACxC,EAAA,MAAM,EAAE,UAAA,EAAY,OAAA,EAAS,KAAA,KAAU,SAAA,EAAU;AAEjD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BAAQ,QAAA,EAAA,EAAS,CAAA;AAAA,EACnB,WAAW,KAAA,EAAO;AAChB,IAAA,2BAAQ,KAAA,EAAA,EAAM,MAAA,EAAO,QAAA,EAAS,WAAA,EAAa,MAAM,OAAA,EAAS,CAAA;AAAA,EAC5D;AAEA,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAM,MAAA,EAAO,QAAA,EAAS,aAAY,4BAAA,EAA6B,CAAA;AAAA,EACzE;AAEA,EAAA,4BACG,GAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,UAAA,IAAc,WAAW,KAAA,oBACxB,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,KACN,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAM,0BAAA,EAClB,8BAAC,cAAA,EAAA,EAAe,KAAA,EAAO,UAAA,CAAW,KAAA,EAAO,GAC3C,CAAA,EACF,CAAA;AAAA,oBAEF,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,SAAA,EAAU,GAAE,GAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,KAAK,UAAA,CAAW,MAAA;AAAA,QAChB,IAAA,EAAK,QAAA;AAAA,QACL,eAAA,EAAiB,KAAA;AAAA,QACjB,KAAA,EAAO,SAAS,OAAA,GAAU;AAAA;AAAA,KAC5B,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/package.json.esm.js

@@ -1,5 +1,5 @@
 var name = "@backstage/plugin-devtools";
-var version = "0.1.39-next.1";
+var version = "0.1.39-next.2";
 var backstage = {
 	role: "frontend-plugin",
 	pluginId: "devtools",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-devtools",
-  "version": "0.1.39-next.1",
+  "version": "0.1.39-next.2",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "devtools",
@@ -66,13 +66,13 @@
   },
   "dependencies": {
     "@backstage/core-compat-api": "0.5.11-next.0",
-    "@backstage/core-components": "0.18.10-next.0",
+    "@backstage/core-components": "0.18.10-next.1",
     "@backstage/core-plugin-api": "1.12.6-next.1",
     "@backstage/errors": "1.3.1-next.0",
     "@backstage/frontend-plugin-api": "0.17.0-next.1",
     "@backstage/plugin-devtools-common": "0.1.25-next.0",
     "@backstage/plugin-permission-react": "0.5.1-next.0",
-    "@backstage/ui": "0.15.0-next.1",
+    "@backstage/ui": "0.15.0-next.2",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",