@backstage/plugin-catalog-import 0.12.12 → 0.12.13-next.2

package/CHANGELOG.md

@@ -1,15 +1,57 @@
 # @backstage/plugin-catalog-import
 
-## 0.12.12
+## 0.12.13-next.2
 
 ### Patch Changes
 
-- e50a4f7: Expose the `UnpackNestedValue` type as it's been removed from `react-hook-form`
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
 - Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1-next.1
+  - @backstage/integration-react@1.2.6-next.1
+  - @backstage/core-compat-api@0.4.1-next.2
+  - @backstage/core-components@0.17.1-next.1
+  - @backstage/core-plugin-api@1.10.6-next.0
+  - @backstage/plugin-catalog-react@1.17.0-next.2
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/config@1.3.2
+  - @backstage/errors@1.2.7
+  - @backstage/integration@1.16.3-next.0
+  - @backstage/plugin-catalog-common@1.1.3
+
+## 0.12.12-next.1
+
+### Patch Changes
+
+- 5b9514f: Expose the `UnpackNestedValue` type as it's been removed from `react-hook-form`
+- f1d9a64: adding translation for `Register an existing component` text
+- Updated dependencies
+  - @backstage/core-components@0.17.1-next.0
+  - @backstage/integration-react@1.2.6-next.0
+  - @backstage/integration@1.16.3-next.0
+  - @backstage/frontend-plugin-api@0.10.1-next.0
+  - @backstage/plugin-catalog-react@1.16.1-next.1
+  - @backstage/core-compat-api@0.4.1-next.1
+  - @backstage/catalog-client@1.9.1
+  - @backstage/catalog-model@1.7.3
+  - @backstage/config@1.3.2
+  - @backstage/core-plugin-api@1.10.5
+  - @backstage/errors@1.2.7
+  - @backstage/plugin-catalog-common@1.1.3
+
+## 0.12.12-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-catalog-react@1.16.1-next.0
+  - @backstage/core-compat-api@0.4.1-next.0
   - @backstage/catalog-client@1.9.1
   - @backstage/catalog-model@1.7.3
   - @backstage/config@1.3.2
-  - @backstage/core-compat-api@0.4.0
   - @backstage/core-components@0.17.0
   - @backstage/core-plugin-api@1.10.5
   - @backstage/errors@1.2.7
@@ -17,7 +59,6 @@
   - @backstage/integration@1.16.2
   - @backstage/integration-react@1.2.5
   - @backstage/plugin-catalog-common@1.1.3
-  - @backstage/plugin-catalog-react@1.16.0
 
 ## 0.12.11
 

package/dist/alpha.d.ts

@@ -1,6 +1,13 @@
+import * as react from 'react';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
-import React__default from 'react';
+import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
+
+/** @alpha */
+declare const catalogImportTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"catalog-import", {
+    readonly pageTitle: "Register an existing component";
+    readonly "importInfoCard.title": "Register an existing component";
+}>;
 
 /** @alpha */
 declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
@@ -26,7 +33,7 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
         configInput: {
             path?: string | undefined;
         };
-        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<React__default.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
+        output: _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<react.JSX.Element, "core.reactElement", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<string, "core.routing.path", {}> | _backstage_frontend_plugin_api.ConfigurableExtensionDataRef<_backstage_frontend_plugin_api.RouteRef<_backstage_frontend_plugin_api.AnyRouteRefParams>, "core.routing.ref", {
             optional: true;
         }>;
         inputs: {};
@@ -38,4 +45,4 @@ declare const _default: _backstage_frontend_plugin_api.FrontendPlugin<{
     }>;
 }>;
 
-export { _default as default };
+export { catalogImportTranslationRef, _default as default };

package/dist/alpha.esm.js

@@ -1,19 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
 import { createApiFactory, discoveryApiRef, fetchApiRef, configApiRef } from '@backstage/core-plugin-api';
 import { convertLegacyRouteRef, compatWrapper } from '@backstage/core-compat-api';
 import { PageBlueprint, ApiBlueprint, createFrontendPlugin } from '@backstage/frontend-plugin-api';
 import { scmAuthApiRef, scmIntegrationsApiRef } from '@backstage/integration-react';
-import React from 'react';
 import { catalogImportApiRef } from './api/CatalogImportApi.esm.js';
 import { CatalogImportClient } from './api/CatalogImportClient.esm.js';
 import { rootRouteRef } from './plugin.esm.js';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
+export { catalogImportTranslationRef } from './translation.esm.js';
 
 const catalogImportPage = PageBlueprint.make({
   params: {
     defaultPath: "/catalog-import",
     routeRef: convertLegacyRouteRef(rootRouteRef),
     loader: () => import('./components/ImportPage/index.esm.js').then(
-      (m) => compatWrapper(/* @__PURE__ */ React.createElement(m.ImportPage, null))
+      (m) => compatWrapper(/* @__PURE__ */ jsx(m.ImportPage, {}))
     )
   }
 });

package/dist/alpha.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.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  configApiRef,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  createFrontendPlugin,\n  PageBlueprint,\n  ApiBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport {\n  scmAuthApiRef,\n  scmIntegrationsApiRef,\n} from '@backstage/integration-react';\nimport React from 'react';\nimport { CatalogImportClient, catalogImportApiRef } from './api';\nimport { rootRouteRef } from './plugin';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\n// TODO: It's currently possible to override the import page with a custom one. We need to decide\n//       whether this type of override is typically done with an input or by overriding the entire extension.\nconst catalogImportPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/catalog-import',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    loader: () =>\n      import('./components/ImportPage').then(m =>\n        compatWrapper(<m.ImportPage />),\n      ),\n  },\n});\n\nconst catalogImportApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: catalogImportApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmAuthApi: scmAuthApiRef,\n        fetchApi: fetchApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        catalogApi: catalogApiRef,\n        configApi: configApiRef,\n      },\n      factory: ({\n        discoveryApi,\n        scmAuthApi,\n        fetchApi,\n        scmIntegrationsApi,\n        catalogApi,\n        configApi,\n      }) =>\n        new CatalogImportClient({\n          discoveryApi,\n          scmAuthApi,\n          scmIntegrationsApi,\n          fetchApi,\n          catalogApi,\n          configApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  id: 'catalog-import',\n  extensions: [catalogImportApi, catalogImportPage],\n  routes: {\n    importPage: convertLegacyRouteRef(rootRouteRef),\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0CA,MAAM,iBAAA,GAAoB,cAAc,IAAK,CAAA;AAAA,EAC3C,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA,iBAAA;AAAA,IACb,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,MAAQ,EAAA,MACN,OAAO,sCAAyB,CAAE,CAAA,IAAA;AAAA,MAAK,OACrC,aAAc,iBAAA,KAAA,CAAA,aAAA,CAAC,CAAE,CAAA,UAAA,EAAF,IAAa,CAAE;AAAA;AAChC;AAEN,CAAC,CAAA;AAED,MAAM,gBAAA,GAAmB,aAAa,IAAK,CAAA;AAAA,EACzC,MAAQ,EAAA;AAAA,IACN,SAAS,gBAAiB,CAAA;AAAA,MACxB,GAAK,EAAA,mBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,UAAY,EAAA,aAAA;AAAA,QACZ,QAAU,EAAA,WAAA;AAAA,QACV,kBAAoB,EAAA,qBAAA;AAAA,QACpB,UAAY,EAAA,aAAA;AAAA,QACZ,SAAW,EAAA;AAAA,OACb;AAAA,MACA,SAAS,CAAC;AAAA,QACR,YAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,kBAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF,KACE,IAAI,mBAAoB,CAAA;AAAA,QACtB,YAAA;AAAA,QACA,UAAA;AAAA,QACA,kBAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACD;AAAA,KACJ;AAAA;AAEL,CAAC,CAAA;AAGD,YAAe,oBAAqB,CAAA;AAAA,EAClC,EAAI,EAAA,gBAAA;AAAA,EACJ,UAAA,EAAY,CAAC,gBAAA,EAAkB,iBAAiB,CAAA;AAAA,EAChD,MAAQ,EAAA;AAAA,IACN,UAAA,EAAY,sBAAsB,YAAY;AAAA;AAElD,CAAC,CAAA;;;;"}
+{"version":3,"file":"alpha.esm.js","sources":["../src/alpha.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  configApiRef,\n  createApiFactory,\n  discoveryApiRef,\n  fetchApiRef,\n} from '@backstage/core-plugin-api';\nimport {\n  compatWrapper,\n  convertLegacyRouteRef,\n} from '@backstage/core-compat-api';\nimport {\n  createFrontendPlugin,\n  PageBlueprint,\n  ApiBlueprint,\n} from '@backstage/frontend-plugin-api';\nimport {\n  scmAuthApiRef,\n  scmIntegrationsApiRef,\n} from '@backstage/integration-react';\nimport { CatalogImportClient, catalogImportApiRef } from './api';\nimport { rootRouteRef } from './plugin';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nexport * from './translation';\n\n// TODO: It's currently possible to override the import page with a custom one. We need to decide\n//       whether this type of override is typically done with an input or by overriding the entire extension.\nconst catalogImportPage = PageBlueprint.make({\n  params: {\n    defaultPath: '/catalog-import',\n    routeRef: convertLegacyRouteRef(rootRouteRef),\n    loader: () =>\n      import('./components/ImportPage').then(m =>\n        compatWrapper(<m.ImportPage />),\n      ),\n  },\n});\n\nconst catalogImportApi = ApiBlueprint.make({\n  params: {\n    factory: createApiFactory({\n      api: catalogImportApiRef,\n      deps: {\n        discoveryApi: discoveryApiRef,\n        scmAuthApi: scmAuthApiRef,\n        fetchApi: fetchApiRef,\n        scmIntegrationsApi: scmIntegrationsApiRef,\n        catalogApi: catalogApiRef,\n        configApi: configApiRef,\n      },\n      factory: ({\n        discoveryApi,\n        scmAuthApi,\n        fetchApi,\n        scmIntegrationsApi,\n        catalogApi,\n        configApi,\n      }) =>\n        new CatalogImportClient({\n          discoveryApi,\n          scmAuthApi,\n          scmIntegrationsApi,\n          fetchApi,\n          catalogApi,\n          configApi,\n        }),\n    }),\n  },\n});\n\n/** @alpha */\nexport default createFrontendPlugin({\n  id: 'catalog-import',\n  extensions: [catalogImportApi, catalogImportPage],\n  routes: {\n    importPage: convertLegacyRouteRef(rootRouteRef),\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;;AA2CA,MAAM,iBAAA,GAAoB,cAAc,IAAK,CAAA;AAAA,EAC3C,MAAQ,EAAA;AAAA,IACN,WAAa,EAAA,iBAAA;AAAA,IACb,QAAA,EAAU,sBAAsB,YAAY,CAAA;AAAA,IAC5C,MAAQ,EAAA,MACN,OAAO,sCAAyB,CAAE,CAAA,IAAA;AAAA,MAAK,OACrC,aAAc,iBAAA,GAAA,CAAC,CAAE,CAAA,UAAA,EAAF,EAAa,CAAE;AAAA;AAChC;AAEN,CAAC,CAAA;AAED,MAAM,gBAAA,GAAmB,aAAa,IAAK,CAAA;AAAA,EACzC,MAAQ,EAAA;AAAA,IACN,SAAS,gBAAiB,CAAA;AAAA,MACxB,GAAK,EAAA,mBAAA;AAAA,MACL,IAAM,EAAA;AAAA,QACJ,YAAc,EAAA,eAAA;AAAA,QACd,UAAY,EAAA,aAAA;AAAA,QACZ,QAAU,EAAA,WAAA;AAAA,QACV,kBAAoB,EAAA,qBAAA;AAAA,QACpB,UAAY,EAAA,aAAA;AAAA,QACZ,SAAW,EAAA;AAAA,OACb;AAAA,MACA,SAAS,CAAC;AAAA,QACR,YAAA;AAAA,QACA,UAAA;AAAA,QACA,QAAA;AAAA,QACA,kBAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF,KACE,IAAI,mBAAoB,CAAA;AAAA,QACtB,YAAA;AAAA,QACA,UAAA;AAAA,QACA,kBAAA;AAAA,QACA,QAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACD;AAAA,KACJ;AAAA;AAEL,CAAC,CAAA;AAGD,YAAe,oBAAqB,CAAA;AAAA,EAClC,EAAI,EAAA,gBAAA;AAAA,EACJ,UAAA,EAAY,CAAC,gBAAA,EAAkB,iBAAiB,CAAA;AAAA,EAChD,MAAQ,EAAA;AAAA,IACN,UAAA,EAAY,sBAAsB,YAAY;AAAA;AAElD,CAAC,CAAA;;;;"}

package/dist/components/Buttons/index.esm.js

@@ -1,8 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { LinkButton } from '@backstage/core-components';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -25,31 +25,35 @@ const useStyles = makeStyles((theme) => ({
 const NextButton = (props) => {
   const { loading, ...buttonProps } = props;
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      color: "primary",
-      variant: "contained",
-      ...buttonProps,
-      disabled: props.disabled || props.loading
-    }
-  ), props.loading && /* @__PURE__ */ React.createElement(CircularProgress, { size: "1.5rem", className: classes.buttonProgress }), props.loading);
+  return /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: "primary",
+        variant: "contained",
+        ...buttonProps,
+        disabled: props.disabled || props.loading
+      }
+    ),
+    props.loading && /* @__PURE__ */ jsx(CircularProgress, { size: "1.5rem", className: classes.buttonProgress }),
+    props.loading
+  ] });
 };
 const BackButton = (props) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(Button, { variant: "outlined", className: classes.button, ...props }, props.children || "Back");
+  return /* @__PURE__ */ jsx(Button, { variant: "outlined", className: classes.button, ...props, children: props.children || "Back" });
 };
 const ViewComponentButton = (props) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     LinkButton,
     {
       color: "primary",
       variant: "contained",
       className: classes.button,
-      ...props
-    },
-    props.children
+      ...props,
+      children: props.children
+    }
   );
 };
 

package/dist/components/Buttons/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/Buttons/index.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { LinkButton } from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { ComponentProps } from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  wrapper: {\n    marginTop: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    position: 'relative',\n  },\n  buttonProgress: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: -12,\n    marginLeft: -12,\n  },\n  button: {\n    marginTop: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nexport const NextButton = (\n  props: ComponentProps<typeof Button> & { loading?: boolean },\n) => {\n  const { loading, ...buttonProps } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.wrapper}>\n      <Button\n        color=\"primary\"\n        variant=\"contained\"\n        {...buttonProps}\n        disabled={props.disabled || props.loading}\n      />\n      {props.loading && (\n        <CircularProgress size=\"1.5rem\" className={classes.buttonProgress} />\n      )}\n      {props.loading}\n    </div>\n  );\n};\n\nexport const BackButton = (props: ComponentProps<typeof Button>) => {\n  const classes = useStyles();\n\n  return (\n    <Button variant=\"outlined\" className={classes.button} {...props}>\n      {props.children || 'Back'}\n    </Button>\n  );\n};\n\nexport const ViewComponentButton = (\n  props: ComponentProps<typeof LinkButton>,\n) => {\n  const classes = useStyles();\n\n  return (\n    <LinkButton\n      color=\"primary\"\n      variant=\"contained\"\n      className={classes.button}\n      {...props}\n    >\n      {props.children}\n    </LinkButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,OAAS,EAAA;AAAA,IACP,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,CAAA,EAAA;AAAA,IACX,UAAY,EAAA,CAAA;AAAA,GACd;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAEhC,CAAE,CAAA,CAAA;AAEW,MAAA,UAAA,GAAa,CACxB,KACG,KAAA;AACH,EAAA,MAAM,EAAE,OAAA,EAAS,GAAG,WAAA,EAAgB,GAAA,KAAA;AACpC,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,OACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,WAAA;AAAA,MACJ,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,KAAM,CAAA;AAAA;AAAA,GAEnC,EAAA,KAAA,CAAM,OACL,oBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,IAAA,EAAK,QAAS,EAAA,SAAA,EAAW,OAAQ,CAAA,cAAA,EAAgB,CAEpE,EAAA,KAAA,CAAM,OACT,CAAA;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAClE,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAQ,UAAW,EAAA,SAAA,EAAW,OAAQ,CAAA,MAAA,EAAS,GAAG,KAAA,EAAA,EACvD,KAAM,CAAA,QAAA,IAAY,MACrB,CAAA;AAEJ;AAEa,MAAA,mBAAA,GAAsB,CACjC,KACG,KAAA;AACH,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACR,WAAW,OAAQ,CAAA,MAAA;AAAA,MAClB,GAAG;AAAA,KAAA;AAAA,IAEH,KAAM,CAAA;AAAA,GACT;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/Buttons/index.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { LinkButton } from '@backstage/core-components';\nimport Button from '@material-ui/core/Button';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ComponentProps } from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  wrapper: {\n    marginTop: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    position: 'relative',\n  },\n  buttonProgress: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: -12,\n    marginLeft: -12,\n  },\n  button: {\n    marginTop: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nexport const NextButton = (\n  props: ComponentProps<typeof Button> & { loading?: boolean },\n) => {\n  const { loading, ...buttonProps } = props;\n  const classes = useStyles();\n\n  return (\n    <div className={classes.wrapper}>\n      <Button\n        color=\"primary\"\n        variant=\"contained\"\n        {...buttonProps}\n        disabled={props.disabled || props.loading}\n      />\n      {props.loading && (\n        <CircularProgress size=\"1.5rem\" className={classes.buttonProgress} />\n      )}\n      {props.loading}\n    </div>\n  );\n};\n\nexport const BackButton = (props: ComponentProps<typeof Button>) => {\n  const classes = useStyles();\n\n  return (\n    <Button variant=\"outlined\" className={classes.button} {...props}>\n      {props.children || 'Back'}\n    </Button>\n  );\n};\n\nexport const ViewComponentButton = (\n  props: ComponentProps<typeof LinkButton>,\n) => {\n  const classes = useStyles();\n\n  return (\n    <LinkButton\n      color=\"primary\"\n      variant=\"contained\"\n      className={classes.button}\n      {...props}\n    >\n      {props.children}\n    </LinkButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,OAAS,EAAA;AAAA,IACP,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC5B,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,cAAgB,EAAA;AAAA,IACd,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,CAAA,EAAA;AAAA,IACX,UAAY,EAAA,CAAA;AAAA,GACd;AAAA,EACA,MAAQ,EAAA;AAAA,IACN,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA;AAEhC,CAAE,CAAA,CAAA;AAEW,MAAA,UAAA,GAAa,CACxB,KACG,KAAA;AACH,EAAA,MAAM,EAAE,OAAA,EAAS,GAAG,WAAA,EAAgB,GAAA,KAAA;AACpC,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,OACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAM,EAAA,SAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACP,GAAG,WAAA;AAAA,QACJ,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,KAAM,CAAA;AAAA;AAAA,KACpC;AAAA,IACC,KAAA,CAAM,2BACJ,GAAA,CAAA,gBAAA,EAAA,EAAiB,MAAK,QAAS,EAAA,SAAA,EAAW,QAAQ,cAAgB,EAAA,CAAA;AAAA,IAEpE,KAAM,CAAA;AAAA,GACT,EAAA,CAAA;AAEJ;AAEa,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAClE,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,OAAA,EAAQ,UAAW,EAAA,SAAA,EAAW,OAAQ,CAAA,MAAA,EAAS,GAAG,KAAA,EACvD,QAAM,EAAA,KAAA,CAAA,QAAA,IAAY,MACrB,EAAA,CAAA;AAEJ;AAEa,MAAA,mBAAA,GAAsB,CACjC,KACG,KAAA;AACH,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EACE,uBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,SAAA;AAAA,MACN,OAAQ,EAAA,WAAA;AAAA,MACR,WAAW,OAAQ,CAAA,MAAA;AAAA,MAClB,GAAG,KAAA;AAAA,MAEH,QAAM,EAAA,KAAA,CAAA;AAAA;AAAA,GACT;AAEJ;;;;"}

package/dist/components/DefaultImportPage/DefaultImportPage.esm.js

@@ -1,9 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Page, Header, Content, ContentHeader, SupportButton } from '@backstage/core-components';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import Grid from '@material-ui/core/Grid';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { useTheme } from '@material-ui/core/styles';
-import React from 'react';
 import { ImportInfoCard } from '../ImportInfoCard/ImportInfoCard.esm.js';
 import { ImportStepper } from '../ImportStepper/ImportStepper.esm.js';
 import '@material-ui/core/Box';
@@ -19,6 +19,7 @@ import '../EntityListComponent/EntityListComponent.esm.js';
 import 'lodash/partition';
 import '@backstage/catalog-model';
 import '@backstage/plugin-catalog-react';
+import 'react';
 import 'react-hook-form';
 import '../../api/CatalogImportApi.esm.js';
 import 'yaml';
@@ -36,18 +37,27 @@ import '@material-ui/core/ListItem';
 import '@material-ui/core/ListItemIcon';
 import '@material-ui/core/ListItemText';
 import '@backstage/errors';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { catalogImportTranslationRef } from '../../translation.esm.js';
 
 const DefaultImportPage = () => {
+  const { t } = useTranslationRef(catalogImportTranslationRef);
   const theme = useTheme();
   const configApi = useApi(configApiRef);
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
   const appTitle = configApi.getOptionalString("app.title") || "Backstage";
   const supportTitle = `Start tracking your component in ${appTitle} by adding it to the software catalog.`;
   const contentItems = [
-    /* @__PURE__ */ React.createElement(Grid, { key: 0, item: true, xs: 12, md: 4, lg: 6, xl: 8 }, /* @__PURE__ */ React.createElement(ImportInfoCard, null)),
-    /* @__PURE__ */ React.createElement(Grid, { key: 1, item: true, xs: 12, md: 8, lg: 6, xl: 4 }, /* @__PURE__ */ React.createElement(ImportStepper, null))
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, lg: 6, xl: 8, children: /* @__PURE__ */ jsx(ImportInfoCard, {}) }, 0),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 8, lg: 6, xl: 4, children: /* @__PURE__ */ jsx(ImportStepper, {}) }, 1)
   ];
-  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Header, { title: "Register an existing component" }), /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: `Start tracking your component in ${appTitle}` }, /* @__PURE__ */ React.createElement(SupportButton, null, supportTitle)), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, isMobile ? contentItems : contentItems.reverse())));
+  return /* @__PURE__ */ jsxs(Page, { themeId: "home", children: [
+    /* @__PURE__ */ jsx(Header, { title: t("pageTitle") }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(ContentHeader, { title: `Start tracking your component in ${appTitle}`, children: /* @__PURE__ */ jsx(SupportButton, { children: supportTitle }) }),
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: isMobile ? contentItems : contentItems.reverse() })
+    ] })
+  ] });
 };
 
 export { DefaultImportPage };

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

@@ -1 +1 @@
-{"version":3,"file":"DefaultImportPage.esm.js","sources":["../../../src/components/DefaultImportPage/DefaultImportPage.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Grid from '@material-ui/core/Grid';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { useTheme } from '@material-ui/core/styles';\nimport React from 'react';\nimport { ImportInfoCard } from '../ImportInfoCard';\nimport { ImportStepper } from '../ImportStepper';\n\n/**\n * The default catalog import page.\n *\n * @public\n */\nexport const DefaultImportPage = () => {\n  const theme = useTheme();\n  const configApi = useApi(configApiRef);\n  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n\n  const supportTitle = `Start tracking your component in ${appTitle} by adding it to the software catalog.`;\n\n  const contentItems = [\n    <Grid key={0} item xs={12} md={4} lg={6} xl={8}>\n      <ImportInfoCard />\n    </Grid>,\n\n    <Grid key={1} item xs={12} md={8} lg={6} xl={4}>\n      <ImportStepper />\n    </Grid>,\n  ];\n\n  return (\n    <Page themeId=\"home\">\n      <Header title=\"Register an existing component\" />\n      <Content>\n        <ContentHeader title={`Start tracking your component in ${appTitle}`}>\n          <SupportButton>{supportTitle}</SupportButton>\n        </ContentHeader>\n\n        <Grid container spacing={2}>\n          {isMobile ? contentItems : contentItems.reverse()}\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,WAAW,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAC3D,EAAA,MAAM,QAAW,GAAA,SAAA,CAAU,iBAAkB,CAAA,WAAW,CAAK,IAAA,WAAA;AAE7D,EAAM,MAAA,YAAA,GAAe,oCAAoC,QAAQ,CAAA,sCAAA,CAAA;AAEjE,EAAA,MAAM,YAAe,GAAA;AAAA,wCAClB,IAAK,EAAA,EAAA,GAAA,EAAK,CAAG,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,EAAA,EAAI,CAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,oBAAe,CAClB,CAAA;AAAA,wCAEC,IAAK,EAAA,EAAA,GAAA,EAAK,CAAG,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAI,EAAI,EAAA,CAAA,EAAG,IAAI,CAAG,EAAA,EAAA,EAAI,CAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,mBAAc,CACjB;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAA,sCACX,MAAO,EAAA,EAAA,KAAA,EAAM,gCAAiC,EAAA,CAAA,sCAC9C,OACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,KAAA,EAAO,oCAAoC,QAAQ,CAAA,CAAA,EAAA,kBAC/D,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,IAAA,EAAe,YAAa,CAC/B,CAEA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAA,EACtB,WAAW,YAAe,GAAA,YAAA,CAAa,OAAQ,EAClD,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DefaultImportPage.esm.js","sources":["../../../src/components/DefaultImportPage/DefaultImportPage.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Content,\n  ContentHeader,\n  Header,\n  Page,\n  SupportButton,\n} from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Grid from '@material-ui/core/Grid';\nimport useMediaQuery from '@material-ui/core/useMediaQuery';\nimport { useTheme } from '@material-ui/core/styles';\nimport { ImportInfoCard } from '../ImportInfoCard';\nimport { ImportStepper } from '../ImportStepper';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { catalogImportTranslationRef } from '../../translation';\n\n/**\n * The default catalog import page.\n *\n * @public\n */\nexport const DefaultImportPage = () => {\n  const { t } = useTranslationRef(catalogImportTranslationRef);\n  const theme = useTheme();\n  const configApi = useApi(configApiRef);\n  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n\n  const supportTitle = `Start tracking your component in ${appTitle} by adding it to the software catalog.`;\n\n  const contentItems = [\n    <Grid key={0} item xs={12} md={4} lg={6} xl={8}>\n      <ImportInfoCard />\n    </Grid>,\n\n    <Grid key={1} item xs={12} md={8} lg={6} xl={4}>\n      <ImportStepper />\n    </Grid>,\n  ];\n\n  return (\n    <Page themeId=\"home\">\n      <Header title={t('pageTitle')} />\n      <Content>\n        <ContentHeader title={`Start tracking your component in ${appTitle}`}>\n          <SupportButton>{supportTitle}</SupportButton>\n        </ContentHeader>\n\n        <Grid container spacing={2}>\n          {isMobile ? contentItems : contentItems.reverse()}\n        </Grid>\n      </Content>\n    </Page>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,2BAA2B,CAAA;AAC3D,EAAA,MAAM,QAAQ,QAAS,EAAA;AACvB,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,WAAW,aAAc,CAAA,KAAA,CAAM,WAAY,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA;AAC3D,EAAA,MAAM,QAAW,GAAA,SAAA,CAAU,iBAAkB,CAAA,WAAW,CAAK,IAAA,WAAA;AAE7D,EAAM,MAAA,YAAA,GAAe,oCAAoC,QAAQ,CAAA,sCAAA,CAAA;AAEjE,EAAA,MAAM,YAAe,GAAA;AAAA,oBAClB,GAAA,CAAA,IAAA,EAAA,EAAa,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAC3C,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,KADP,CAEX,CAAA;AAAA,oBAEC,GAAA,CAAA,IAAA,EAAA,EAAa,IAAI,EAAA,IAAA,EAAC,IAAI,EAAI,EAAA,EAAA,EAAI,CAAG,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAC3C,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,KADN,CAEX;AAAA,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,MACZ,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,WAAW,CAAG,EAAA,CAAA;AAAA,yBAC9B,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,aAAA,EAAA,EAAc,OAAO,CAAoC,iCAAA,EAAA,QAAQ,IAChE,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAe,wBAAa,CAC/B,EAAA,CAAA;AAAA,sBAEA,GAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,GACtB,QAAW,EAAA,QAAA,GAAA,YAAA,GAAe,YAAa,CAAA,OAAA,EAC1C,EAAA;AAAA,KACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/EntityListComponent/EntityListComponent.esm.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { stringifyEntityRef } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import { entityPresentationApiRef, EntityRefLink, EntityDisplayName } from '@backstage/plugin-catalog-react';
@@ -11,7 +12,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import React, { useState } from 'react';
+import { useState, Fragment } from 'react';
 
 const useStyles = makeStyles((theme) => ({
   nested: {
@@ -42,50 +43,58 @@ const EntityListComponent = (props) => {
       )
     );
   }
-  return /* @__PURE__ */ React.createElement(List, null, firstListItem, locations.map((r) => /* @__PURE__ */ React.createElement(React.Fragment, { key: r.target }, /* @__PURE__ */ React.createElement(
-    ListItem,
-    {
-      dense: true,
-      button: Boolean(onItemClick),
-      onClick: () => onItemClick?.(r.target)
-    },
-    /* @__PURE__ */ React.createElement(ListItemIcon, null, locationListItemIcon(r.target)),
-    /* @__PURE__ */ React.createElement(
-      ListItemText,
-      {
-        primary: r.target,
-        secondary: `Entities: ${r.entities.length}`
-      }
-    ),
-    collapsed && /* @__PURE__ */ React.createElement(ListItemSecondaryAction, null, /* @__PURE__ */ React.createElement(IconButton, { edge: "end", onClick: () => handleClick(r.target) }, expandedUrls.includes(r.target) ? /* @__PURE__ */ React.createElement(ExpandLessIcon, null) : /* @__PURE__ */ React.createElement(ExpandMoreIcon, null)))
-  ), /* @__PURE__ */ React.createElement(
-    Collapse,
-    {
-      in: !collapsed || expandedUrls.includes(r.target),
-      timeout: "auto",
-      unmountOnExit: true
-    },
-    /* @__PURE__ */ React.createElement(List, { component: "div", disablePadding: true, dense: true }, sortEntities(r.entities).map((entity) => {
-      return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(List, { children: [
+    firstListItem,
+    locations.map((r) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
         ListItem,
         {
-          key: stringifyEntityRef(entity),
-          className: classes.nested,
-          ...withLinks ? {
-            component: EntityRefLink,
-            entityRef: entity,
-            button: withLinks
-          } : {}
-        },
-        /* @__PURE__ */ React.createElement(
-          ListItemText,
-          {
-            primary: /* @__PURE__ */ React.createElement(EntityDisplayName, { entityRef: entity })
-          }
-        )
-      );
-    }))
-  ))));
+          dense: true,
+          button: Boolean(onItemClick),
+          onClick: () => onItemClick?.(r.target),
+          children: [
+            /* @__PURE__ */ jsx(ListItemIcon, { children: locationListItemIcon(r.target) }),
+            /* @__PURE__ */ jsx(
+              ListItemText,
+              {
+                primary: r.target,
+                secondary: `Entities: ${r.entities.length}`
+              }
+            ),
+            collapsed && /* @__PURE__ */ jsx(ListItemSecondaryAction, { children: /* @__PURE__ */ jsx(IconButton, { edge: "end", onClick: () => handleClick(r.target), children: expandedUrls.includes(r.target) ? /* @__PURE__ */ jsx(ExpandLessIcon, {}) : /* @__PURE__ */ jsx(ExpandMoreIcon, {}) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Collapse,
+        {
+          in: !collapsed || expandedUrls.includes(r.target),
+          timeout: "auto",
+          unmountOnExit: true,
+          children: /* @__PURE__ */ jsx(List, { component: "div", disablePadding: true, dense: true, children: sortEntities(r.entities).map((entity) => {
+            return /* @__PURE__ */ jsx(
+              ListItem,
+              {
+                className: classes.nested,
+                ...withLinks ? {
+                  component: EntityRefLink,
+                  entityRef: entity,
+                  button: withLinks
+                } : {},
+                children: /* @__PURE__ */ jsx(
+                  ListItemText,
+                  {
+                    primary: /* @__PURE__ */ jsx(EntityDisplayName, { entityRef: entity })
+                  }
+                )
+              },
+              stringifyEntityRef(entity)
+            );
+          }) })
+        }
+      )
+    ] }, r.target))
+  ] });
 };
 
 export { EntityListComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"EntityListComponent.esm.js","sources":["../../../src/components/EntityListComponent/EntityListComponent.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Entity,\n  CompoundEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  EntityDisplayName,\n  EntityRefLink,\n  entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport Collapse from '@material-ui/core/Collapse';\nimport IconButton from '@material-ui/core/IconButton';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport React, { useState } from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  nested: {\n    paddingLeft: theme.spacing(4),\n  },\n}));\n\n/**\n * Props for {@link EntityListComponent}.\n *\n * @public\n */\nexport interface EntityListComponentProps {\n  locations: Array<{\n    target: string;\n    entities: (Entity | CompoundEntityRef)[];\n  }>;\n  locationListItemIcon: (target: string) => React.ReactElement;\n  collapsed?: boolean;\n  firstListItem?: React.ReactElement;\n  onItemClick?: (target: string) => void;\n  withLinks?: boolean;\n}\n\n/**\n * Shows a result list of entities.\n *\n * @public\n */\nexport const EntityListComponent = (props: EntityListComponentProps) => {\n  const {\n    locations,\n    collapsed = false,\n    locationListItemIcon,\n    onItemClick,\n    firstListItem,\n    withLinks = false,\n  } = props;\n\n  const classes = useStyles();\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const [expandedUrls, setExpandedUrls] = useState<string[]>([]);\n\n  const handleClick = (url: string) => {\n    setExpandedUrls(urls =>\n      urls.includes(url) ? urls.filter(u => u !== url) : urls.concat(url),\n    );\n  };\n\n  function sortEntities(entities: Array<CompoundEntityRef | Entity>) {\n    return entities.sort((a, b) =>\n      entityPresentationApi\n        .forEntity(stringifyEntityRef(a))\n        .snapshot.entityRef.localeCompare(\n          entityPresentationApi.forEntity(stringifyEntityRef(b)).snapshot\n            .entityRef,\n        ),\n    );\n  }\n\n  return (\n    <List>\n      {firstListItem}\n      {locations.map(r => (\n        <React.Fragment key={r.target}>\n          <ListItem\n            dense\n            button={Boolean(onItemClick) as any}\n            onClick={() => onItemClick?.(r.target)}\n          >\n            <ListItemIcon>{locationListItemIcon(r.target)}</ListItemIcon>\n\n            <ListItemText\n              primary={r.target}\n              secondary={`Entities: ${r.entities.length}`}\n            />\n\n            {collapsed && (\n              <ListItemSecondaryAction>\n                <IconButton edge=\"end\" onClick={() => handleClick(r.target)}>\n                  {expandedUrls.includes(r.target) ? (\n                    <ExpandLessIcon />\n                  ) : (\n                    <ExpandMoreIcon />\n                  )}\n                </IconButton>\n              </ListItemSecondaryAction>\n            )}\n          </ListItem>\n\n          <Collapse\n            in={!collapsed || expandedUrls.includes(r.target)}\n            timeout=\"auto\"\n            unmountOnExit\n          >\n            <List component=\"div\" disablePadding dense>\n              {sortEntities(r.entities).map(entity => {\n                return (\n                  <ListItem\n                    key={stringifyEntityRef(entity)}\n                    className={classes.nested}\n                    {...(withLinks\n                      ? {\n                          component: EntityRefLink,\n                          entityRef: entity,\n                          button: withLinks as any,\n                        }\n                      : {})}\n                  >\n                    <ListItemText\n                      primary={<EntityDisplayName entityRef={entity} />}\n                    />\n                  </ListItem>\n                );\n              })}\n            </List>\n          </Collapse>\n        </React.Fragment>\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntityListComponent.esm.js","sources":["../../../src/components/EntityListComponent/EntityListComponent.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Entity,\n  CompoundEntityRef,\n  stringifyEntityRef,\n} from '@backstage/catalog-model';\nimport { useApi } from '@backstage/core-plugin-api';\nimport {\n  EntityDisplayName,\n  EntityRefLink,\n  entityPresentationApiRef,\n} from '@backstage/plugin-catalog-react';\nimport Collapse from '@material-ui/core/Collapse';\nimport IconButton from '@material-ui/core/IconButton';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport ListItemIcon from '@material-ui/core/ListItemIcon';\nimport ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport { makeStyles } from '@material-ui/core/styles';\nimport ExpandLessIcon from '@material-ui/icons/ExpandLess';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { ReactElement, Fragment, useState } from 'react';\n\nconst useStyles = makeStyles(theme => ({\n  nested: {\n    paddingLeft: theme.spacing(4),\n  },\n}));\n\n/**\n * Props for {@link EntityListComponent}.\n *\n * @public\n */\nexport interface EntityListComponentProps {\n  locations: Array<{\n    target: string;\n    entities: (Entity | CompoundEntityRef)[];\n  }>;\n  locationListItemIcon: (target: string) => ReactElement;\n  collapsed?: boolean;\n  firstListItem?: ReactElement;\n  onItemClick?: (target: string) => void;\n  withLinks?: boolean;\n}\n\n/**\n * Shows a result list of entities.\n *\n * @public\n */\nexport const EntityListComponent = (props: EntityListComponentProps) => {\n  const {\n    locations,\n    collapsed = false,\n    locationListItemIcon,\n    onItemClick,\n    firstListItem,\n    withLinks = false,\n  } = props;\n\n  const classes = useStyles();\n  const entityPresentationApi = useApi(entityPresentationApiRef);\n  const [expandedUrls, setExpandedUrls] = useState<string[]>([]);\n\n  const handleClick = (url: string) => {\n    setExpandedUrls(urls =>\n      urls.includes(url) ? urls.filter(u => u !== url) : urls.concat(url),\n    );\n  };\n\n  function sortEntities(entities: Array<CompoundEntityRef | Entity>) {\n    return entities.sort((a, b) =>\n      entityPresentationApi\n        .forEntity(stringifyEntityRef(a))\n        .snapshot.entityRef.localeCompare(\n          entityPresentationApi.forEntity(stringifyEntityRef(b)).snapshot\n            .entityRef,\n        ),\n    );\n  }\n\n  return (\n    <List>\n      {firstListItem}\n      {locations.map(r => (\n        <Fragment key={r.target}>\n          <ListItem\n            dense\n            button={Boolean(onItemClick) as any}\n            onClick={() => onItemClick?.(r.target)}\n          >\n            <ListItemIcon>{locationListItemIcon(r.target)}</ListItemIcon>\n\n            <ListItemText\n              primary={r.target}\n              secondary={`Entities: ${r.entities.length}`}\n            />\n\n            {collapsed && (\n              <ListItemSecondaryAction>\n                <IconButton edge=\"end\" onClick={() => handleClick(r.target)}>\n                  {expandedUrls.includes(r.target) ? (\n                    <ExpandLessIcon />\n                  ) : (\n                    <ExpandMoreIcon />\n                  )}\n                </IconButton>\n              </ListItemSecondaryAction>\n            )}\n          </ListItem>\n\n          <Collapse\n            in={!collapsed || expandedUrls.includes(r.target)}\n            timeout=\"auto\"\n            unmountOnExit\n          >\n            <List component=\"div\" disablePadding dense>\n              {sortEntities(r.entities).map(entity => {\n                return (\n                  <ListItem\n                    key={stringifyEntityRef(entity)}\n                    className={classes.nested}\n                    {...(withLinks\n                      ? {\n                          component: EntityRefLink,\n                          entityRef: entity,\n                          button: withLinks as any,\n                        }\n                      : {})}\n                  >\n                    <ListItemText\n                      primary={<EntityDisplayName entityRef={entity} />}\n                    />\n                  </ListItem>\n                );\n              })}\n            </List>\n          </Collapse>\n        </Fragment>\n      ))}\n    </List>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ImportInfoCard/ImportInfoCard.esm.js

@@ -1,40 +1,81 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { InfoCard } from '@backstage/core-components';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import Chip from '@material-ui/core/Chip';
 import Typography from '@material-ui/core/Typography';
-import React from 'react';
 import { catalogImportApiRef } from '../../api/CatalogImportApi.esm.js';
 import 'yaml';
 import 'git-url-parse';
 import '@octokit/rest';
 import 'js-base64';
 import { useCatalogFilename } from '../../hooks/useCatalogFilename.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { catalogImportTranslationRef } from '../../translation.esm.js';
 
 const ImportInfoCard = (props) => {
   const {
     exampleLocationUrl = "https://github.com/backstage/backstage/blob/master/catalog-info.yaml",
     exampleRepositoryUrl = "https://github.com/backstage/backstage"
   } = props;
+  const { t } = useTranslationRef(catalogImportTranslationRef);
   const configApi = useApi(configApiRef);
   const appTitle = configApi.getOptionalString("app.title") || "Backstage";
   const catalogImportApi = useApi(catalogImportApiRef);
   const hasGithubIntegration = configApi.has("integrations.github");
   const catalogFilename = useCatalogFilename();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     InfoCard,
     {
-      title: "Register an existing component",
+      title: t("importInfoCard.title"),
       titleTypographyProps: { component: "h3" },
       deepLink: {
         title: "Learn more about the Software Catalog",
         link: "https://backstage.io/docs/features/software-catalog/"
-      }
-    },
-    /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "Enter the URL to your source code repository to add it to ", appTitle, "."),
-    /* @__PURE__ */ React.createElement(Typography, { component: "h4", variant: "h6" }, "Link to an existing entity file"),
-    /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", paragraph: true }, "Example: ", /* @__PURE__ */ React.createElement("code", null, exampleLocationUrl)),
-    /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "The wizard analyzes the file, previews the entities, and adds them to the ", appTitle, " catalog."),
-    hasGithubIntegration && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { component: "h4", variant: "h6" }, "Link to a repository", " ", /* @__PURE__ */ React.createElement(Chip, { label: "GitHub only", variant: "outlined", size: "small" })), /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2", color: "textSecondary", paragraph: true }, "Example: ", /* @__PURE__ */ React.createElement("code", null, exampleRepositoryUrl)), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "The wizard discovers all ", /* @__PURE__ */ React.createElement("code", null, catalogFilename), " files in the repository, previews the entities, and adds them to the ", appTitle, " ", "catalog."), catalogImportApi.preparePullRequest && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "If no entities are found, the wizard will prepare a Pull Request that adds an example ", /* @__PURE__ */ React.createElement("code", null, catalogFilename), " and prepares the ", appTitle, " catalog to load all entities as soon as the Pull Request is merged."))
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", paragraph: true, children: [
+          "Enter the URL to your source code repository to add it to ",
+          appTitle,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { component: "h4", variant: "h6", children: "Link to an existing entity file" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", color: "textSecondary", paragraph: true, children: [
+          "Example: ",
+          /* @__PURE__ */ jsx("code", { children: exampleLocationUrl })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", paragraph: true, children: [
+          "The wizard analyzes the file, previews the entities, and adds them to the ",
+          appTitle,
+          " catalog."
+        ] }),
+        hasGithubIntegration && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Typography, { component: "h4", variant: "h6", children: [
+            "Link to a repository",
+            " ",
+            /* @__PURE__ */ jsx(Chip, { label: "GitHub only", variant: "outlined", size: "small" })
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", color: "textSecondary", paragraph: true, children: [
+            "Example: ",
+            /* @__PURE__ */ jsx("code", { children: exampleRepositoryUrl })
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", paragraph: true, children: [
+            "The wizard discovers all ",
+            /* @__PURE__ */ jsx("code", { children: catalogFilename }),
+            " files in the repository, previews the entities, and adds them to the ",
+            appTitle,
+            " ",
+            "catalog."
+          ] }),
+          catalogImportApi.preparePullRequest && /* @__PURE__ */ jsxs(Typography, { variant: "body2", paragraph: true, children: [
+            "If no entities are found, the wizard will prepare a Pull Request that adds an example ",
+            /* @__PURE__ */ jsx("code", { children: catalogFilename }),
+            " and prepares the ",
+            appTitle,
+            " catalog to load all entities as soon as the Pull Request is merged."
+          ] })
+        ] })
+      ]
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ImportInfoCard.esm.js","sources":["../../../src/components/ImportInfoCard/ImportInfoCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { InfoCard } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Chip from '@material-ui/core/Chip';\nimport Typography from '@material-ui/core/Typography';\nimport React from 'react';\nimport { catalogImportApiRef } from '../../api';\nimport { useCatalogFilename } from '../../hooks';\n\n/**\n * Props for {@link ImportInfoCard}.\n *\n * @public\n */\nexport interface ImportInfoCardProps {\n  exampleLocationUrl?: string;\n  exampleRepositoryUrl?: string;\n}\n\n/**\n * Shows information about the import process.\n *\n * @public\n */\nexport const ImportInfoCard = (props: ImportInfoCardProps) => {\n  const {\n    exampleLocationUrl = 'https://github.com/backstage/backstage/blob/master/catalog-info.yaml',\n    exampleRepositoryUrl = 'https://github.com/backstage/backstage',\n  } = props;\n\n  const configApi = useApi(configApiRef);\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  const catalogImportApi = useApi(catalogImportApiRef);\n\n  const hasGithubIntegration = configApi.has('integrations.github');\n\n  const catalogFilename = useCatalogFilename();\n\n  return (\n    <InfoCard\n      title=\"Register an existing component\"\n      titleTypographyProps={{ component: 'h3' }}\n      deepLink={{\n        title: 'Learn more about the Software Catalog',\n        link: 'https://backstage.io/docs/features/software-catalog/',\n      }}\n    >\n      <Typography variant=\"body2\" paragraph>\n        Enter the URL to your source code repository to add it to {appTitle}.\n      </Typography>\n      <Typography component=\"h4\" variant=\"h6\">\n        Link to an existing entity file\n      </Typography>\n      <Typography variant=\"subtitle2\" color=\"textSecondary\" paragraph>\n        Example: <code>{exampleLocationUrl}</code>\n      </Typography>\n      <Typography variant=\"body2\" paragraph>\n        The wizard analyzes the file, previews the entities, and adds them to\n        the {appTitle} catalog.\n      </Typography>\n      {hasGithubIntegration && (\n        <>\n          <Typography component=\"h4\" variant=\"h6\">\n            Link to a repository{' '}\n            <Chip label=\"GitHub only\" variant=\"outlined\" size=\"small\" />\n          </Typography>\n          <Typography variant=\"subtitle2\" color=\"textSecondary\" paragraph>\n            Example: <code>{exampleRepositoryUrl}</code>\n          </Typography>\n          <Typography variant=\"body2\" paragraph>\n            The wizard discovers all <code>{catalogFilename}</code> files in the\n            repository, previews the entities, and adds them to the {appTitle}{' '}\n            catalog.\n          </Typography>\n          {catalogImportApi.preparePullRequest && (\n            <Typography variant=\"body2\" paragraph>\n              If no entities are found, the wizard will prepare a Pull Request\n              that adds an example <code>{catalogFilename}</code> and prepares\n              the {appTitle} catalog to load all entities as soon as the Pull\n              Request is merged.\n            </Typography>\n          )}\n        </>\n      )}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuCa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,kBAAqB,GAAA,sEAAA;AAAA,IACrB,oBAAuB,GAAA;AAAA,GACrB,GAAA,KAAA;AAEJ,EAAM,MAAA,SAAA,GAAY,OAAO,YAAY,CAAA;AACrC,EAAA,MAAM,QAAW,GAAA,SAAA,CAAU,iBAAkB,CAAA,WAAW,CAAK,IAAA,WAAA;AAC7D,EAAM,MAAA,gBAAA,GAAmB,OAAO,mBAAmB,CAAA;AAEnD,EAAM,MAAA,oBAAA,GAAuB,SAAU,CAAA,GAAA,CAAI,qBAAqB,CAAA;AAEhE,EAAA,MAAM,kBAAkB,kBAAmB,EAAA;AAE3C,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,gCAAA;AAAA,MACN,oBAAA,EAAsB,EAAE,SAAA,EAAW,IAAK,EAAA;AAAA,MACxC,QAAU,EAAA;AAAA,QACR,KAAO,EAAA,uCAAA;AAAA,QACP,IAAM,EAAA;AAAA;AACR,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,WAAS,IAAC,EAAA,EAAA,4DAAA,EACuB,UAAS,GACtE,CAAA;AAAA,wCACC,UAAW,EAAA,EAAA,SAAA,EAAU,IAAK,EAAA,OAAA,EAAQ,QAAK,iCAExC,CAAA;AAAA,oBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,WAAA,EAAY,KAAM,EAAA,eAAA,EAAgB,SAAS,EAAA,IAAA,EAAA,EAAC,WACrD,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA,EAAA,kBAAmB,CACrC,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,OAAA,EAAQ,WAAS,IAAC,EAAA,EAAA,4EAAA,EAE/B,UAAS,WAChB,CAAA;AAAA,IACC,oBACC,oBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACG,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAA,EAAK,sBACjB,EAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,OAAM,aAAc,EAAA,OAAA,EAAQ,UAAW,EAAA,IAAA,EAAK,OAAQ,EAAA,CAC5D,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,WAAA,EAAY,KAAM,EAAA,eAAA,EAAgB,SAAS,EAAA,IAAA,EAAA,EAAC,WACrD,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAM,oBAAqB,CACvC,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,SAAA,EAAS,IAAC,EAAA,EAAA,2BAAA,kBACV,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,eAAgB,CAAA,EAAO,wEACE,EAAA,QAAA,EAAU,KAAI,UAEzE,CAAA,EACC,gBAAiB,CAAA,kBAAA,oBACf,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,OAAA,EAAQ,WAAS,IAAC,EAAA,EAAA,wFAAA,kBAEd,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,eAAgB,CAAA,EAAO,oBAC9C,EAAA,QAAA,EAAS,sEAEhB,CAEJ;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"ImportInfoCard.esm.js","sources":["../../../src/components/ImportInfoCard/ImportInfoCard.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { InfoCard } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport Chip from '@material-ui/core/Chip';\nimport Typography from '@material-ui/core/Typography';\nimport { catalogImportApiRef } from '../../api';\nimport { useCatalogFilename } from '../../hooks';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { catalogImportTranslationRef } from '../../translation';\n\n/**\n * Props for {@link ImportInfoCard}.\n *\n * @public\n */\nexport interface ImportInfoCardProps {\n  exampleLocationUrl?: string;\n  exampleRepositoryUrl?: string;\n}\n\n/**\n * Shows information about the import process.\n *\n * @public\n */\nexport const ImportInfoCard = (props: ImportInfoCardProps) => {\n  const {\n    exampleLocationUrl = 'https://github.com/backstage/backstage/blob/master/catalog-info.yaml',\n    exampleRepositoryUrl = 'https://github.com/backstage/backstage',\n  } = props;\n\n  const { t } = useTranslationRef(catalogImportTranslationRef);\n  const configApi = useApi(configApiRef);\n  const appTitle = configApi.getOptionalString('app.title') || 'Backstage';\n  const catalogImportApi = useApi(catalogImportApiRef);\n\n  const hasGithubIntegration = configApi.has('integrations.github');\n\n  const catalogFilename = useCatalogFilename();\n\n  return (\n    <InfoCard\n      title={t('importInfoCard.title')}\n      titleTypographyProps={{ component: 'h3' }}\n      deepLink={{\n        title: 'Learn more about the Software Catalog',\n        link: 'https://backstage.io/docs/features/software-catalog/',\n      }}\n    >\n      <Typography variant=\"body2\" paragraph>\n        Enter the URL to your source code repository to add it to {appTitle}.\n      </Typography>\n      <Typography component=\"h4\" variant=\"h6\">\n        Link to an existing entity file\n      </Typography>\n      <Typography variant=\"subtitle2\" color=\"textSecondary\" paragraph>\n        Example: <code>{exampleLocationUrl}</code>\n      </Typography>\n      <Typography variant=\"body2\" paragraph>\n        The wizard analyzes the file, previews the entities, and adds them to\n        the {appTitle} catalog.\n      </Typography>\n      {hasGithubIntegration && (\n        <>\n          <Typography component=\"h4\" variant=\"h6\">\n            Link to a repository{' '}\n            <Chip label=\"GitHub only\" variant=\"outlined\" size=\"small\" />\n          </Typography>\n          <Typography variant=\"subtitle2\" color=\"textSecondary\" paragraph>\n            Example: <code>{exampleRepositoryUrl}</code>\n          </Typography>\n          <Typography variant=\"body2\" paragraph>\n            The wizard discovers all <code>{catalogFilename}</code> files in the\n            repository, previews the entities, and adds them to the {appTitle}{' '}\n            catalog.\n          </Typography>\n          {catalogImportApi.preparePullRequest && (\n            <Typography variant=\"body2\" paragraph>\n              If no entities are found, the wizard will prepare a Pull Request\n              that adds an example <code>{catalogFilename}</code> and prepares\n              the {appTitle} catalog to load all entities as soon as the Pull\n              Request is merged.\n            </Typography>\n          )}\n        </>\n      )}\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ImportPage/ImportPage.esm.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { useOutlet } from 'react-router-dom';
 import { DefaultImportPage } from '../DefaultImportPage/DefaultImportPage.esm.js';
 
 const ImportPage = () => {
   const outlet = useOutlet();
-  return outlet || /* @__PURE__ */ React.createElement(DefaultImportPage, null);
+  return outlet || /* @__PURE__ */ jsx(DefaultImportPage, {});
 };
 
 export { ImportPage };