@backstage/plugin-api-docs 0.13.5-next.1 → 0.13.5

package/dist/components/ApisCards/ConsumedApisCard.esm.js

@@ -2,12 +2,16 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_CONSUMES_API } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { useEntity, useRelatedEntities, EntityTable } from '@backstage/plugin-catalog-react';
-import { getApiEntityColumns } from './presets.esm.js';
+import { EntityRelationCard } from '@backstage/plugin-catalog-react/alpha';
+import { getApiEntityColumnConfig, getApiEntityColumns } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const ConsumedApisCard = (props) => {
+function isLegacyProps(props) {
+  return "variant" in props || "columns" in props || "tableOptions" in props;
+}
+function ConsumedApisCardLegacy(props) {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
@@ -55,6 +59,31 @@ const ConsumedApisCard = (props) => {
       entities
     }
   );
+}
+const ConsumedApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  const { entity } = useEntity();
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsx(ConsumedApisCardLegacy, { ...props });
+  }
+  const {
+    title = t("consumedApisCard.title"),
+    columnConfig = getApiEntityColumnConfig(t)
+  } = props;
+  return /* @__PURE__ */ jsx(
+    EntityRelationCard,
+    {
+      title,
+      relationType: RELATION_CONSUMES_API,
+      columnConfig,
+      emptyState: {
+        message: t("consumedApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }),
+        helpLink: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional"
+      }
+    }
+  );
 };
 
 export { ConsumedApisCard };

package/dist/components/ApisCards/ConsumedApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConsumedApisCard.esm.js","sources":["../../../src/components/ApisCards/ConsumedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_CONSUMES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { getApiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ConsumedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('consumedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_CONSUMES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAK3B;AACJ,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,wBAAwB,CAAA;AAAA,IAClC,OAAA,GAAU,oBAAoB,CAAC,CAAA;AAAA,IAC/B,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,QACvC,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,qCAAA,EAAuC;AAAA,UACxC,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,iGAAA;AAAA,YACH,gBAAA,EAAgB,IAAA;AAAA,YAEf,YAAE,uBAAuB;AAAA;AAAA,SAC5B,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ConsumedApisCard.esm.js","sources":["../../../src/components/ApisCards/ConsumedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_CONSUMES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  EntityRelationCard,\n  EntityColumnConfig,\n} from '@backstage/plugin-catalog-react/alpha';\nimport { getApiEntityColumns, getApiEntityColumnConfig } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport interface ConsumedApisCardProps {\n  title?: string;\n  columnConfig?: EntityColumnConfig[];\n}\n\n/**\n * Props for the legacy MUI-based rendering.\n * @deprecated Use {@link ConsumedApisCardProps} instead.\n * @public\n */\nexport interface ConsumedApisCardLegacyProps {\n  title?: string;\n  /** @deprecated Use `columnConfig` instead. */\n  variant?: InfoCardVariants;\n  /** @deprecated Use `columnConfig` instead. */\n  columns?: TableColumn<ApiEntity>[];\n  /** @deprecated Use `columnConfig` instead. */\n  tableOptions?: TableOptions;\n}\n\nfunction isLegacyProps(\n  props: ConsumedApisCardProps | ConsumedApisCardLegacyProps,\n): props is ConsumedApisCardLegacyProps {\n  return 'variant' in props || 'columns' in props || 'tableOptions' in props;\n}\n\nfunction ConsumedApisCardLegacy(props: ConsumedApisCardLegacyProps) {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('consumedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_CONSUMES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n}\n\n/**\n * @public\n */\nexport const ConsumedApisCard = (\n  props: ConsumedApisCardProps | ConsumedApisCardLegacyProps,\n) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const { entity } = useEntity();\n\n  if (isLegacyProps(props)) {\n    return <ConsumedApisCardLegacy {...props} />;\n  }\n\n  const {\n    title = t('consumedApisCard.title'),\n    columnConfig = getApiEntityColumnConfig(t),\n  } = props;\n\n  return (\n    <EntityRelationCard\n      title={title}\n      relationType={RELATION_CONSUMES_API}\n      columnConfig={columnConfig}\n      emptyState={{\n        message: t('consumedApisCard.emptyContent.title', {\n          entity: entity.kind.toLocaleLowerCase('en-US'),\n        }),\n        helpLink:\n          'https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional',\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ApisCards/HasApisCard.esm.js

@@ -1,14 +1,18 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_HAS_PART } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
-import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
+import { useEntity, EntityTable, useRelatedEntities } from '@backstage/plugin-catalog-react';
+import { EntityRelationCard } from '@backstage/plugin-catalog-react/alpha';
 import { useMemo } from 'react';
-import { createSpecApiTypeColumn } from './presets.esm.js';
+import { getHasApisColumnConfig, createSpecApiTypeColumn } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const HasApisCard = (props) => {
+function isLegacyProps(props) {
+  return "variant" in props || "columns" in props || "tableOptions" in props;
+}
+function HasApisCardLegacy(props) {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   const presetColumns = useMemo(() => {
     return [
@@ -59,6 +63,32 @@ const HasApisCard = (props) => {
       entities
     }
   );
+}
+const HasApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  const { entity } = useEntity();
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsx(HasApisCardLegacy, { ...props });
+  }
+  const {
+    title = t("hasApisCard.title"),
+    columnConfig = getHasApisColumnConfig(t)
+  } = props;
+  return /* @__PURE__ */ jsx(
+    EntityRelationCard,
+    {
+      title,
+      entityKind: "API",
+      relationType: RELATION_HAS_PART,
+      columnConfig,
+      emptyState: {
+        message: t("hasApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }),
+        helpLink: "https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api"
+      }
+    }
+  );
 };
 
 export { HasApisCard };

package/dist/components/ApisCards/HasApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HasApisCard.esm.js","sources":["../../../src/components/ApisCards/HasApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_HAS_PART } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { useMemo } from 'react';\nimport { createSpecApiTypeColumn } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const HasApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const presetColumns: TableColumn<ApiEntity>[] = useMemo(() => {\n    return [\n      EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n      EntityTable.columns.createOwnerColumn(),\n      createSpecApiTypeColumn(t),\n      EntityTable.columns.createSpecLifecycleColumn(),\n      EntityTable.columns.createMetadataDescriptionColumn(),\n    ];\n  }, [t]);\n  const {\n    variant = 'gridItem',\n    title = t('hasApisCard.title'),\n    columns = presetColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_HAS_PART,\n    kind: 'API',\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('hasApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('hasApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAyCO,MAAM,WAAA,GAAc,CAAC,KAAA,KAKtB;AACJ,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM,aAAA,GAA0C,QAAQ,MAAM;AAC5D,IAAA,OAAO;AAAA,MACL,YAAY,OAAA,CAAQ,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,MAChE,WAAA,CAAY,QAAQ,iBAAA,EAAkB;AAAA,MACtC,wBAAwB,CAAC,CAAA;AAAA,MACzB,WAAA,CAAY,QAAQ,yBAAA,EAA0B;AAAA,MAC9C,WAAA,CAAY,QAAQ,+BAAA;AAAgC,KACtD;AAAA,EACF,CAAA,EAAG,CAAC,CAAC,CAAC,CAAA;AACN,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,mBAAmB,CAAA;AAAA,IAC7B,OAAA,GAAU,aAAA;AAAA,IACV,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM,iBAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,QAClC,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,gCAAA,EAAkC;AAAA,UACnC,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,gFAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"HasApisCard.esm.js","sources":["../../../src/components/ApisCards/HasApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_HAS_PART } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  EntityRelationCard,\n  EntityColumnConfig,\n} from '@backstage/plugin-catalog-react/alpha';\nimport { useMemo } from 'react';\nimport { createSpecApiTypeColumn, getHasApisColumnConfig } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport interface HasApisCardProps {\n  title?: string;\n  columnConfig?: EntityColumnConfig[];\n}\n\n/**\n * Props for the legacy MUI-based rendering.\n * @deprecated Use {@link HasApisCardProps} instead.\n * @public\n */\nexport interface HasApisCardLegacyProps {\n  title?: string;\n  /** @deprecated Use `columnConfig` instead. */\n  variant?: InfoCardVariants;\n  /** @deprecated Use `columnConfig` instead. */\n  columns?: TableColumn<ApiEntity>[];\n  /** @deprecated Use `columnConfig` instead. */\n  tableOptions?: TableOptions;\n}\n\nfunction isLegacyProps(\n  props: HasApisCardProps | HasApisCardLegacyProps,\n): props is HasApisCardLegacyProps {\n  return 'variant' in props || 'columns' in props || 'tableOptions' in props;\n}\n\nfunction HasApisCardLegacy(props: HasApisCardLegacyProps) {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const presetColumns: TableColumn<ApiEntity>[] = useMemo(() => {\n    return [\n      EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n      EntityTable.columns.createOwnerColumn(),\n      createSpecApiTypeColumn(t),\n      EntityTable.columns.createSpecLifecycleColumn(),\n      EntityTable.columns.createMetadataDescriptionColumn(),\n    ];\n  }, [t]);\n  const {\n    variant = 'gridItem',\n    title = t('hasApisCard.title'),\n    columns = presetColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_HAS_PART,\n    kind: 'API',\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('hasApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('hasApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n}\n\n/**\n * @public\n */\nexport const HasApisCard = (\n  props: HasApisCardProps | HasApisCardLegacyProps,\n) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const { entity } = useEntity();\n\n  if (isLegacyProps(props)) {\n    return <HasApisCardLegacy {...props} />;\n  }\n\n  const {\n    title = t('hasApisCard.title'),\n    columnConfig = getHasApisColumnConfig(t),\n  } = props;\n\n  return (\n    <EntityRelationCard\n      title={title}\n      entityKind=\"API\"\n      relationType={RELATION_HAS_PART}\n      columnConfig={columnConfig}\n      emptyState={{\n        message: t('hasApisCard.emptyContent.title', {\n          entity: entity.kind.toLocaleLowerCase('en-US'),\n        }),\n        helpLink:\n          'https://backstage.io/docs/features/software-catalog/descriptor-format#kind-api',\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA+DA,SAAS,cACP,KAAA,EACiC;AACjC,EAAA,OAAO,SAAA,IAAa,KAAA,IAAS,SAAA,IAAa,KAAA,IAAS,cAAA,IAAkB,KAAA;AACvE;AAEA,SAAS,kBAAkB,KAAA,EAA+B;AACxD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM,aAAA,GAA0C,QAAQ,MAAM;AAC5D,IAAA,OAAO;AAAA,MACL,YAAY,OAAA,CAAQ,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,MAChE,WAAA,CAAY,QAAQ,iBAAA,EAAkB;AAAA,MACtC,wBAAwB,CAAC,CAAA;AAAA,MACzB,WAAA,CAAY,QAAQ,yBAAA,EAA0B;AAAA,MAC9C,WAAA,CAAY,QAAQ,+BAAA;AAAgC,KACtD;AAAA,EACF,CAAA,EAAG,CAAC,CAAC,CAAC,CAAA;AACN,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,mBAAmB,CAAA;AAAA,IAC7B,OAAA,GAAU,aAAA;AAAA,IACV,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM,iBAAA;AAAA,IACN,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,QAClC,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,gCAAA,EAAkC;AAAA,UACnC,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,gFAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAKO,MAAM,WAAA,GAAc,CACzB,KAAA,KACG;AACH,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,IAAI,aAAA,CAAc,KAAK,CAAA,EAAG;AACxB,IAAA,uBAAO,GAAA,CAAC,iBAAA,EAAA,EAAmB,GAAG,KAAA,EAAO,CAAA;AAAA,EACvC;AAEA,EAAA,MAAM;AAAA,IACJ,KAAA,GAAQ,EAAE,mBAAmB,CAAA;AAAA,IAC7B,YAAA,GAAe,uBAAuB,CAAC;AAAA,GACzC,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,UAAA,EAAW,KAAA;AAAA,MACX,YAAA,EAAc,iBAAA;AAAA,MACd,YAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,EAAE,gCAAA,EAAkC;AAAA,UAC3C,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CAAA;AAAA,QACD,QAAA,EACE;AAAA;AACJ;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ApisCards/ProvidedApisCard.esm.js

@@ -2,12 +2,16 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_PROVIDES_API } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { useEntity, useRelatedEntities, EntityTable } from '@backstage/plugin-catalog-react';
-import { getApiEntityColumns } from './presets.esm.js';
+import { EntityRelationCard } from '@backstage/plugin-catalog-react/alpha';
+import { getApiEntityColumnConfig, getApiEntityColumns } from './presets.esm.js';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const ProvidedApisCard = (props) => {
+function isLegacyProps(props) {
+  return "variant" in props || "columns" in props || "tableOptions" in props;
+}
+function ProvidedApisCardLegacy(props) {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
@@ -55,6 +59,31 @@ const ProvidedApisCard = (props) => {
       entities
     }
   );
+}
+const ProvidedApisCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  const { entity } = useEntity();
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsx(ProvidedApisCardLegacy, { ...props });
+  }
+  const {
+    title = t("providedApisCard.title"),
+    columnConfig = getApiEntityColumnConfig(t)
+  } = props;
+  return /* @__PURE__ */ jsx(
+    EntityRelationCard,
+    {
+      title,
+      relationType: RELATION_PROVIDES_API,
+      columnConfig,
+      emptyState: {
+        message: t("providedApisCard.emptyContent.title", {
+          entity: entity.kind.toLocaleLowerCase("en-US")
+        }),
+        helpLink: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional"
+      }
+    }
+  );
 };
 
 export { ProvidedApisCard };

package/dist/components/ApisCards/ProvidedApisCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvidedApisCard.esm.js","sources":["../../../src/components/ApisCards/ProvidedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_PROVIDES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport { getApiEntityColumns } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ProvidedApisCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ApiEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('providedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_PROVIDES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwCO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAK3B;AACJ,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,wBAAwB,CAAA;AAAA,IAClC,OAAA,GAAU,oBAAoB,CAAC,CAAA;AAAA,IAC/B,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,8BAA8B,CAAA;AAAA,QACvC,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,qCAAA,EAAuC;AAAA,UACxC,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,iBAAA,CAAkB,OAAO;AAAA,SAC9C,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,iGAAA;AAAA,YACH,gBAAA,EAAgB,IAAA;AAAA,YAEf,YAAE,uBAAuB;AAAA;AAAA,SAC5B,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ProvidedApisCard.esm.js","sources":["../../../src/components/ApisCards/ProvidedApisCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity, RELATION_PROVIDES_API } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  EntityRelationCard,\n  EntityColumnConfig,\n} from '@backstage/plugin-catalog-react/alpha';\nimport { getApiEntityColumns, getApiEntityColumnConfig } from './presets';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport interface ProvidedApisCardProps {\n  title?: string;\n  columnConfig?: EntityColumnConfig[];\n}\n\n/**\n * Props for the legacy MUI-based rendering.\n * @deprecated Use {@link ProvidedApisCardProps} instead.\n * @public\n */\nexport interface ProvidedApisCardLegacyProps {\n  title?: string;\n  /** @deprecated Use `columnConfig` instead. */\n  variant?: InfoCardVariants;\n  /** @deprecated Use `columnConfig` instead. */\n  columns?: TableColumn<ApiEntity>[];\n  /** @deprecated Use `columnConfig` instead. */\n  tableOptions?: TableOptions;\n}\n\nfunction isLegacyProps(\n  props: ProvidedApisCardProps | ProvidedApisCardLegacyProps,\n): props is ProvidedApisCardLegacyProps {\n  return 'variant' in props || 'columns' in props || 'tableOptions' in props;\n}\n\nfunction ProvidedApisCardLegacy(props: ProvidedApisCardLegacyProps) {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('providedApisCard.title'),\n    columns = getApiEntityColumns(t),\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_PROVIDES_API,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providedApisCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providedApisCard.emptyContent.title', {\n              entity: entity.kind.toLocaleLowerCase('en-US'),\n            })}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link\n              to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\"\n              externalLinkIcon\n            >\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ApiEntity[]}\n    />\n  );\n}\n\n/**\n * @public\n */\nexport const ProvidedApisCard = (\n  props: ProvidedApisCardProps | ProvidedApisCardLegacyProps,\n) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const { entity } = useEntity();\n\n  if (isLegacyProps(props)) {\n    return <ProvidedApisCardLegacy {...props} />;\n  }\n\n  const {\n    title = t('providedApisCard.title'),\n    columnConfig = getApiEntityColumnConfig(t),\n  } = props;\n\n  return (\n    <EntityRelationCard\n      title={title}\n      relationType={RELATION_PROVIDES_API}\n      columnConfig={columnConfig}\n      emptyState={{\n        message: t('providedApisCard.emptyContent.title', {\n          entity: entity.kind.toLocaleLowerCase('en-US'),\n        }),\n        helpLink:\n          'https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional',\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ApisCards/presets.esm.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { EntityTable } from '@backstage/plugin-catalog-react';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import ToggleButton from '@material-ui/lab/ToggleButton';
+import { entityDataTableColumns } from '@backstage/plugin-catalog-react/alpha';
+import { Cell, ButtonIcon } from '@backstage/ui';
+import { RiPuzzleLine } from '@remixicon/react';
 import { useState } from 'react';
 import '@backstage/core-components';
 import '@backstage/core-plugin-api';
@@ -29,12 +30,13 @@ const ApiDefinitionButton = ({ apiEntity }) => {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      ToggleButton,
+      ButtonIcon,
       {
         "aria-label": t("apiDefinitionDialog.toggleButtonAriaLabel"),
-        onClick: () => setDialogOpen(!dialogOpen),
-        value: dialogOpen,
-        children: /* @__PURE__ */ jsx(ExtensionIcon, {})
+        onPress: () => setDialogOpen(!dialogOpen),
+        variant: "tertiary",
+        size: "small",
+        icon: /* @__PURE__ */ jsx(RiPuzzleLine, {})
       }
     ),
     /* @__PURE__ */ jsx(
@@ -64,6 +66,42 @@ const getApiEntityColumns = (t) => {
     createApiDefinitionColumn(t)
   ];
 };
+function createSpecApiTypeColumnConfig(t) {
+  return {
+    id: "apiType",
+    label: t("apiEntityColumns.typeTitle"),
+    isSortable: true,
+    cell: (entity) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(ApiTypeTitle, { apiEntity: entity }) }),
+    sortValue: (entity) => entity.spec?.type ?? ""
+  };
+}
+function createApiDefinitionColumnConfig(t) {
+  return {
+    id: "apiDefinition",
+    label: t("apiEntityColumns.apiDefinitionTitle"),
+    cell: (entity) => /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(ApiDefinitionButton, { apiEntity: entity }) })
+  };
+}
+function getApiEntityColumnConfig(t) {
+  return [
+    entityDataTableColumns.createEntityRefColumn({ defaultKind: "API" }),
+    entityDataTableColumns.createSystemColumn(),
+    entityDataTableColumns.createOwnerColumn(),
+    createSpecApiTypeColumnConfig(t),
+    entityDataTableColumns.createSpecLifecycleColumn(),
+    entityDataTableColumns.createMetadataDescriptionColumn(),
+    createApiDefinitionColumnConfig(t)
+  ];
+}
+function getHasApisColumnConfig(t) {
+  return [
+    entityDataTableColumns.createEntityRefColumn({ defaultKind: "API" }),
+    entityDataTableColumns.createOwnerColumn(),
+    createSpecApiTypeColumnConfig(t),
+    entityDataTableColumns.createSpecLifecycleColumn(),
+    entityDataTableColumns.createMetadataDescriptionColumn()
+  ];
+}
 
-export { createSpecApiTypeColumn, getApiEntityColumns };
+export { createSpecApiTypeColumn, getApiEntityColumnConfig, getApiEntityColumns, getHasApisColumnConfig };
 //# sourceMappingURL=presets.esm.js.map

package/dist/components/ApisCards/presets.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"presets.esm.js","sources":["../../../src/components/ApisCards/presets.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity } from '@backstage/catalog-model';\nimport { TableColumn } from '@backstage/core-components';\nimport { EntityTable } from '@backstage/plugin-catalog-react';\nimport ExtensionIcon from '@material-ui/icons/Extension';\nimport ToggleButton from '@material-ui/lab/ToggleButton';\nimport { useState } from 'react';\nimport { ApiTypeTitle } from '../ApiDefinitionCard';\nimport { ApiDefinitionDialog } from '../ApiDefinitionDialog';\nimport {\n  TranslationFunction,\n  useTranslationRef,\n} from '@backstage/core-plugin-api/alpha';\nimport { apiDocsTranslationRef } from '../../translation';\n\nexport function createSpecApiTypeColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.typeTitle'),\n    field: 'spec.type',\n    render: entity => <ApiTypeTitle apiEntity={entity} />,\n  };\n}\n\nconst ApiDefinitionButton = ({ apiEntity }: { apiEntity: ApiEntity }) => {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  return (\n    <>\n      <ToggleButton\n        aria-label={t('apiDefinitionDialog.toggleButtonAriaLabel')}\n        onClick={() => setDialogOpen(!dialogOpen)}\n        value={dialogOpen}\n      >\n        <ExtensionIcon />\n      </ToggleButton>\n      <ApiDefinitionDialog\n        entity={apiEntity}\n        open={dialogOpen}\n        onClose={() => setDialogOpen(false)}\n      />\n    </>\n  );\n};\n\nfunction createApiDefinitionColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.apiDefinitionTitle'),\n    render: entity => <ApiDefinitionButton apiEntity={entity} />,\n  };\n}\n\nexport const getApiEntityColumns = (\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity>[] => {\n  return [\n    EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n    EntityTable.columns.createSystemColumn(),\n    EntityTable.columns.createOwnerColumn(),\n    createSpecApiTypeColumn(t),\n    EntityTable.columns.createSpecLifecycleColumn(),\n    EntityTable.columns.createMetadataDescriptionColumn(),\n    createApiDefinitionColumn(t),\n  ];\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA8BO,SAAS,wBACd,CAAA,EACwB;AACxB,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,EAAE,4BAA4B,CAAA;AAAA,IACrC,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ,CAAA,MAAA,qBAAU,GAAA,CAAC,YAAA,EAAA,EAAa,WAAW,MAAA,EAAQ;AAAA,GACrD;AACF;AAEA,MAAM,mBAAA,GAAsB,CAAC,EAAE,SAAA,EAAU,KAAgC;AACvE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,EAAE,2CAA2C,CAAA;AAAA,QACzD,OAAA,EAAS,MAAM,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,QACxC,KAAA,EAAO,UAAA;AAAA,QAEP,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA,KACjB;AAAA,oBACA,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,SAAA;AAAA,QACR,IAAA,EAAM,UAAA;AAAA,QACN,OAAA,EAAS,MAAM,aAAA,CAAc,KAAK;AAAA;AAAA;AACpC,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,SAAS,0BACP,CAAA,EACwB;AACxB,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,IAC9C,MAAA,EAAQ,CAAA,MAAA,qBAAU,GAAA,CAAC,mBAAA,EAAA,EAAoB,WAAW,MAAA,EAAQ;AAAA,GAC5D;AACF;AAEO,MAAM,mBAAA,GAAsB,CACjC,CAAA,KAC6B;AAC7B,EAAA,OAAO;AAAA,IACL,YAAY,OAAA,CAAQ,qBAAA,CAAsB,EAAE,WAAA,EAAa,OAAO,CAAA;AAAA,IAChE,WAAA,CAAY,QAAQ,kBAAA,EAAmB;AAAA,IACvC,WAAA,CAAY,QAAQ,iBAAA,EAAkB;AAAA,IACtC,wBAAwB,CAAC,CAAA;AAAA,IACzB,WAAA,CAAY,QAAQ,yBAAA,EAA0B;AAAA,IAC9C,WAAA,CAAY,QAAQ,+BAAA,EAAgC;AAAA,IACpD,0BAA0B,CAAC;AAAA,GAC7B;AACF;;;;"}
+{"version":3,"file":"presets.esm.js","sources":["../../../src/components/ApisCards/presets.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 { ApiEntity } from '@backstage/catalog-model';\nimport { TableColumn } from '@backstage/core-components';\nimport { EntityTable } from '@backstage/plugin-catalog-react';\nimport {\n  EntityColumnConfig,\n  entityDataTableColumns,\n} from '@backstage/plugin-catalog-react/alpha';\nimport { ButtonIcon, Cell } from '@backstage/ui';\nimport { RiPuzzleLine } from '@remixicon/react';\nimport { useState } from 'react';\nimport { ApiTypeTitle } from '../ApiDefinitionCard';\nimport { ApiDefinitionDialog } from '../ApiDefinitionDialog';\nimport {\n  TranslationFunction,\n  useTranslationRef,\n} from '@backstage/core-plugin-api/alpha';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @deprecated Use `getApiEntityColumnConfig` instead. */\nexport function createSpecApiTypeColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.typeTitle'),\n    field: 'spec.type',\n    render: entity => <ApiTypeTitle apiEntity={entity} />,\n  };\n}\n\nconst ApiDefinitionButton = ({ apiEntity }: { apiEntity: ApiEntity }) => {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  return (\n    <>\n      <ButtonIcon\n        aria-label={t('apiDefinitionDialog.toggleButtonAriaLabel')}\n        onPress={() => setDialogOpen(!dialogOpen)}\n        variant=\"tertiary\"\n        size=\"small\"\n        icon={<RiPuzzleLine />}\n      />\n      <ApiDefinitionDialog\n        entity={apiEntity}\n        open={dialogOpen}\n        onClose={() => setDialogOpen(false)}\n      />\n    </>\n  );\n};\n\nfunction createApiDefinitionColumn(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity> {\n  return {\n    title: t('apiEntityColumns.apiDefinitionTitle'),\n    render: entity => <ApiDefinitionButton apiEntity={entity} />,\n  };\n}\n\n/** @deprecated Use `getApiEntityColumnConfig` instead. */\nexport const getApiEntityColumns = (\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): TableColumn<ApiEntity>[] => {\n  return [\n    EntityTable.columns.createEntityRefColumn({ defaultKind: 'API' }),\n    EntityTable.columns.createSystemColumn(),\n    EntityTable.columns.createOwnerColumn(),\n    createSpecApiTypeColumn(t),\n    EntityTable.columns.createSpecLifecycleColumn(),\n    EntityTable.columns.createMetadataDescriptionColumn(),\n    createApiDefinitionColumn(t),\n  ];\n};\n\n// Column config presets\n\nfunction createSpecApiTypeColumnConfig(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): EntityColumnConfig {\n  return {\n    id: 'apiType',\n    label: t('apiEntityColumns.typeTitle'),\n    isSortable: true,\n    cell: entity => (\n      <Cell>\n        <ApiTypeTitle apiEntity={entity as unknown as ApiEntity} />\n      </Cell>\n    ),\n    sortValue: entity =>\n      (entity.spec as Record<string, string> | undefined)?.type ?? '',\n  };\n}\n\nfunction createApiDefinitionColumnConfig(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): EntityColumnConfig {\n  return {\n    id: 'apiDefinition',\n    label: t('apiEntityColumns.apiDefinitionTitle'),\n    cell: entity => (\n      <Cell>\n        <ApiDefinitionButton apiEntity={entity as unknown as ApiEntity} />\n      </Cell>\n    ),\n  };\n}\n\nexport function getApiEntityColumnConfig(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): EntityColumnConfig[] {\n  return [\n    entityDataTableColumns.createEntityRefColumn({ defaultKind: 'API' }),\n    entityDataTableColumns.createSystemColumn(),\n    entityDataTableColumns.createOwnerColumn(),\n    createSpecApiTypeColumnConfig(t),\n    entityDataTableColumns.createSpecLifecycleColumn(),\n    entityDataTableColumns.createMetadataDescriptionColumn(),\n    createApiDefinitionColumnConfig(t),\n  ];\n}\n\nexport function getHasApisColumnConfig(\n  t: TranslationFunction<typeof apiDocsTranslationRef.T>,\n): EntityColumnConfig[] {\n  return [\n    entityDataTableColumns.createEntityRefColumn({ defaultKind: 'API' }),\n    entityDataTableColumns.createOwnerColumn(),\n    createSpecApiTypeColumnConfig(t),\n    entityDataTableColumns.createSpecLifecycleColumn(),\n    entityDataTableColumns.createMetadataDescriptionColumn(),\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ComponentsCards/ConsumingComponentsCard.esm.js

@@ -2,11 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_API_CONSUMED_BY } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
+import { entityColumnPresets, EntityRelationCard } from '@backstage/plugin-catalog-react/alpha';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const ConsumingComponentsCard = (props) => {
+function isLegacyProps(props) {
+  return "variant" in props || "columns" in props || "tableOptions" in props;
+}
+function ConsumingComponentsCardLegacy(props) {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
@@ -45,6 +49,28 @@ const ConsumingComponentsCard = (props) => {
       entities
     }
   );
+}
+const ConsumingComponentsCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsx(ConsumingComponentsCardLegacy, { ...props });
+  }
+  const {
+    title = t("consumingComponentsCard.title"),
+    columnConfig = entityColumnPresets.component.columns
+  } = props;
+  return /* @__PURE__ */ jsx(
+    EntityRelationCard,
+    {
+      title,
+      relationType: RELATION_API_CONSUMED_BY,
+      columnConfig,
+      emptyState: {
+        message: t("consumingComponentsCard.emptyContent.title"),
+        helpLink: "https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional"
+      }
+    }
+  );
 };
 
 export { ConsumingComponentsCard };

package/dist/components/ComponentsCards/ConsumingComponentsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConsumingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ConsumingComponentsCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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  ComponentEntity,\n  RELATION_API_CONSUMED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/**\n * @public\n */\nexport const ConsumingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ComponentEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('consumingComponentsCard.title'),\n    columns = EntityTable.componentEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_CONSUMED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA0CO,MAAM,uBAAA,GAA0B,CAAC,KAAA,KAKlC;AACJ,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,UAAU,WAAA,CAAY,sBAAA;AAAA,IACtB,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,4CAA4C,CAAA,EACjD,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,iGAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ConsumingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ConsumingComponentsCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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  ComponentEntity,\n  RELATION_API_CONSUMED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  EntityRelationCard,\n  EntityColumnConfig,\n  entityColumnPresets,\n} from '@backstage/plugin-catalog-react/alpha';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport interface ConsumingComponentsCardProps {\n  title?: string;\n  columnConfig?: EntityColumnConfig[];\n}\n\n/**\n * Props for the legacy MUI-based rendering.\n * @deprecated Use {@link ConsumingComponentsCardProps} instead.\n * @public\n */\nexport interface ConsumingComponentsCardLegacyProps {\n  title?: string;\n  /** @deprecated Use `columnConfig` instead. */\n  variant?: InfoCardVariants;\n  /** @deprecated Use `columnConfig` instead. */\n  columns?: TableColumn<ComponentEntity>[];\n  /** @deprecated Use `columnConfig` instead. */\n  tableOptions?: TableOptions;\n}\n\nfunction isLegacyProps(\n  props: ConsumingComponentsCardProps | ConsumingComponentsCardLegacyProps,\n): props is ConsumingComponentsCardLegacyProps {\n  return 'variant' in props || 'columns' in props || 'tableOptions' in props;\n}\n\nfunction ConsumingComponentsCardLegacy(\n  props: ConsumingComponentsCardLegacyProps,\n) {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('consumingComponentsCard.title'),\n    columns = EntityTable.componentEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_CONSUMED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('consumingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('consumingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n}\n\n/**\n * @public\n */\nexport const ConsumingComponentsCard = (\n  props: ConsumingComponentsCardProps | ConsumingComponentsCardLegacyProps,\n) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n\n  if (isLegacyProps(props)) {\n    return <ConsumingComponentsCardLegacy {...props} />;\n  }\n\n  const {\n    title = t('consumingComponentsCard.title'),\n    columnConfig = entityColumnPresets.component.columns,\n  } = props;\n\n  return (\n    <EntityRelationCard\n      title={title}\n      relationType={RELATION_API_CONSUMED_BY}\n      columnConfig={columnConfig}\n      emptyState={{\n        message: t('consumingComponentsCard.emptyContent.title'),\n        helpLink:\n          'https://backstage.io/docs/features/software-catalog/descriptor-format#specconsumesapis-optional',\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiEA,SAAS,cACP,KAAA,EAC6C;AAC7C,EAAA,OAAO,SAAA,IAAa,KAAA,IAAS,SAAA,IAAa,KAAA,IAAS,cAAA,IAAkB,KAAA;AACvE;AAEA,SAAS,8BACP,KAAA,EACA;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,UAAU,WAAA,CAAY,sBAAA;AAAA,IACtB,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,4CAA4C,CAAA,EACjD,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,iGAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAKO,MAAM,uBAAA,GAA0B,CACrC,KAAA,KACG;AACH,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,IAAI,aAAA,CAAc,KAAK,CAAA,EAAG;AACxB,IAAA,uBAAO,GAAA,CAAC,6BAAA,EAAA,EAA+B,GAAG,KAAA,EAAO,CAAA;AAAA,EACnD;AAEA,EAAA,MAAM;AAAA,IACJ,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,YAAA,GAAe,oBAAoB,SAAA,CAAU;AAAA,GAC/C,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,YAAA,EAAc,wBAAA;AAAA,MACd,YAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,EAAE,4CAA4C,CAAA;AAAA,QACvD,QAAA,EACE;AAAA;AACJ;AAAA,GACF;AAEJ;;;;"}

package/dist/components/ComponentsCards/ProvidingComponentsCard.esm.js

@@ -2,11 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { RELATION_API_PROVIDED_BY } from '@backstage/catalog-model';
 import Typography from '@material-ui/core/Typography';
 import { EntityTable, useEntity, useRelatedEntities } from '@backstage/plugin-catalog-react';
+import { entityColumnPresets, EntityRelationCard } from '@backstage/plugin-catalog-react/alpha';
 import { InfoCard, Progress, WarningPanel, CodeSnippet, Link } from '@backstage/core-components';
 import { useTranslationRef } from '@backstage/frontend-plugin-api';
 import { apiDocsTranslationRef } from '../../translation.esm.js';
 
-const ProvidingComponentsCard = (props) => {
+function isLegacyProps(props) {
+  return "variant" in props || "columns" in props || "tableOptions" in props;
+}
+function ProvidingComponentsCardLegacy(props) {
   const { t } = useTranslationRef(apiDocsTranslationRef);
   const {
     variant = "gridItem",
@@ -45,6 +49,28 @@ const ProvidingComponentsCard = (props) => {
       entities
     }
   );
+}
+const ProvidingComponentsCard = (props) => {
+  const { t } = useTranslationRef(apiDocsTranslationRef);
+  if (isLegacyProps(props)) {
+    return /* @__PURE__ */ jsx(ProvidingComponentsCardLegacy, { ...props });
+  }
+  const {
+    title = t("providingComponentsCard.title"),
+    columnConfig = entityColumnPresets.component.columns
+  } = props;
+  return /* @__PURE__ */ jsx(
+    EntityRelationCard,
+    {
+      title,
+      relationType: RELATION_API_PROVIDED_BY,
+      columnConfig,
+      emptyState: {
+        message: t("providingComponentsCard.emptyContent.title"),
+        helpLink: "https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional"
+      }
+    }
+  );
 };
 
 export { ProvidingComponentsCard };

package/dist/components/ComponentsCards/ProvidingComponentsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProvidingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ProvidingComponentsCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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  ComponentEntity,\n  RELATION_API_PROVIDED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport const ProvidingComponentsCard = (props: {\n  variant?: InfoCardVariants;\n  title?: string;\n  columns?: TableColumn<ComponentEntity>[];\n  tableOptions?: TableOptions;\n}) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('providingComponentsCard.title'),\n    columns = EntityTable.componentEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_PROVIDED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAwCO,MAAM,uBAAA,GAA0B,CAAC,KAAA,KAKlC;AACJ,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,UAAU,WAAA,CAAY,sBAAA;AAAA,IACtB,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,4CAA4C,CAAA,EACjD,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,iGAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ProvidingComponentsCard.esm.js","sources":["../../../src/components/ComponentsCards/ProvidingComponentsCard.tsx"],"sourcesContent":["/*\n * Copyright 2020 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  ComponentEntity,\n  RELATION_API_PROVIDED_BY,\n} from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport {\n  EntityTable,\n  useEntity,\n  useRelatedEntities,\n} from '@backstage/plugin-catalog-react';\nimport {\n  EntityRelationCard,\n  EntityColumnConfig,\n  entityColumnPresets,\n} from '@backstage/plugin-catalog-react/alpha';\nimport {\n  CodeSnippet,\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n  TableColumn,\n  TableOptions,\n  WarningPanel,\n} from '@backstage/core-components';\nimport { useTranslationRef } from '@backstage/frontend-plugin-api';\nimport { apiDocsTranslationRef } from '../../translation';\n\n/** @public */\nexport interface ProvidingComponentsCardProps {\n  title?: string;\n  columnConfig?: EntityColumnConfig[];\n}\n\n/**\n * Props for the legacy MUI-based rendering.\n * @deprecated Use {@link ProvidingComponentsCardProps} instead.\n * @public\n */\nexport interface ProvidingComponentsCardLegacyProps {\n  title?: string;\n  /** @deprecated Use `columnConfig` instead. */\n  variant?: InfoCardVariants;\n  /** @deprecated Use `columnConfig` instead. */\n  columns?: TableColumn<ComponentEntity>[];\n  /** @deprecated Use `columnConfig` instead. */\n  tableOptions?: TableOptions;\n}\n\nfunction isLegacyProps(\n  props: ProvidingComponentsCardProps | ProvidingComponentsCardLegacyProps,\n): props is ProvidingComponentsCardLegacyProps {\n  return 'variant' in props || 'columns' in props || 'tableOptions' in props;\n}\n\nfunction ProvidingComponentsCardLegacy(\n  props: ProvidingComponentsCardLegacyProps,\n) {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n  const {\n    variant = 'gridItem',\n    title = t('providingComponentsCard.title'),\n    columns = EntityTable.componentEntityColumns,\n    tableOptions = {},\n  } = props;\n  const { entity } = useEntity();\n  const { entities, loading, error } = useRelatedEntities(entity, {\n    type: RELATION_API_PROVIDED_BY,\n  });\n\n  if (loading) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <Progress />\n      </InfoCard>\n    );\n  }\n\n  if (error || !entities) {\n    return (\n      <InfoCard variant={variant} title={title}>\n        <WarningPanel\n          severity=\"error\"\n          title={t('providingComponentsCard.error.title')}\n          message={<CodeSnippet text={`${error}`} language=\"text\" />}\n        />\n      </InfoCard>\n    );\n  }\n\n  return (\n    <EntityTable\n      title={title}\n      variant={variant}\n      emptyContent={\n        <div style={{ textAlign: 'center' }}>\n          <Typography variant=\"body1\">\n            {t('providingComponentsCard.emptyContent.title')}\n          </Typography>\n          <Typography variant=\"body2\">\n            <Link to=\"https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional\">\n              {t('apisCardHelpLinkTitle')}\n            </Link>\n          </Typography>\n        </div>\n      }\n      columns={columns}\n      tableOptions={tableOptions}\n      entities={entities as ComponentEntity[]}\n    />\n  );\n}\n\n/** @public */\nexport const ProvidingComponentsCard = (\n  props: ProvidingComponentsCardProps | ProvidingComponentsCardLegacyProps,\n) => {\n  const { t } = useTranslationRef(apiDocsTranslationRef);\n\n  if (isLegacyProps(props)) {\n    return <ProvidingComponentsCardLegacy {...props} />;\n  }\n\n  const {\n    title = t('providingComponentsCard.title'),\n    columnConfig = entityColumnPresets.component.columns,\n  } = props;\n\n  return (\n    <EntityRelationCard\n      title={title}\n      relationType={RELATION_API_PROVIDED_BY}\n      columnConfig={columnConfig}\n      emptyState={{\n        message: t('providingComponentsCard.emptyContent.title'),\n        helpLink:\n          'https://backstage.io/docs/features/software-catalog/descriptor-format#specprovidesapis-optional',\n      }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAiEA,SAAS,cACP,KAAA,EAC6C;AAC7C,EAAA,OAAO,SAAA,IAAa,KAAA,IAAS,SAAA,IAAa,KAAA,IAAS,cAAA,IAAkB,KAAA;AACvE;AAEA,SAAS,8BACP,KAAA,EACA;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AACrD,EAAA,MAAM;AAAA,IACJ,OAAA,GAAU,UAAA;AAAA,IACV,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,UAAU,WAAA,CAAY,sBAAA;AAAA,IACtB,eAAe;AAAC,GAClB,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,KAAA,EAAM,GAAI,mBAAmB,MAAA,EAAQ;AAAA,IAC9D,IAAA,EAAM;AAAA,GACP,CAAA;AAED,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,2BACG,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,IAAS,CAAC,QAAA,EAAU;AACtB,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,OAAA,EAAkB,KAAA,EAC1B,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAS,OAAA;AAAA,QACT,KAAA,EAAO,EAAE,qCAAqC,CAAA;AAAA,QAC9C,OAAA,sBAAU,WAAA,EAAA,EAAY,IAAA,EAAM,GAAG,KAAK,CAAA,CAAA,EAAI,UAAS,MAAA,EAAO;AAAA;AAAA,KAC1D,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,OAAA;AAAA,MACA,8BACE,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAE,SAAA,EAAW,UAAS,EAChC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EACjB,QAAA,EAAA,CAAA,CAAE,4CAA4C,CAAA,EACjD,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,iGAAA,EACN,QAAA,EAAA,CAAA,CAAE,uBAAuB,CAAA,EAC5B,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,MAEF,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;AAGO,MAAM,uBAAA,GAA0B,CACrC,KAAA,KACG;AACH,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,qBAAqB,CAAA;AAErD,EAAA,IAAI,aAAA,CAAc,KAAK,CAAA,EAAG;AACxB,IAAA,uBAAO,GAAA,CAAC,6BAAA,EAAA,EAA+B,GAAG,KAAA,EAAO,CAAA;AAAA,EACnD;AAEA,EAAA,MAAM;AAAA,IACJ,KAAA,GAAQ,EAAE,+BAA+B,CAAA;AAAA,IACzC,YAAA,GAAe,oBAAoB,SAAA,CAAU;AAAA,GAC/C,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,YAAA,EAAc,wBAAA;AAAA,MACd,YAAA;AAAA,MACA,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,EAAE,4CAA4C,CAAA;AAAA,QACvD,QAAA,EACE;AAAA;AACJ;AAAA,GACF;AAEJ;;;;"}