@backstage-community/plugin-tekton 3.22.2 → 3.25.0

package/dist/components/common/ErrorPanel.esm.js

@@ -1,7 +1,9 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { WarningPanel } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Typography } from '@material-ui/core';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const ErrorPanel = ({ allErrors }) => {
   const {
@@ -9,24 +11,30 @@ const ErrorPanel = ({ allErrors }) => {
       metadata: { name: entityName }
     }
   } = useEntity();
-  return /* @__PURE__ */ React__default.createElement("div", { className: "warning-panel", style: { marginBottom: "16px" } }, /* @__PURE__ */ React__default.createElement(
+  const { t } = useTranslationRef(tektonTranslationRef);
+  return /* @__PURE__ */ jsx("div", { className: "warning-panel", style: { marginBottom: "16px" }, children: /* @__PURE__ */ jsx(
     WarningPanel,
     {
-      title: "There was a problem retrieving Kubernetes objects",
-      message: `There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`
-    },
-    /* @__PURE__ */ React__default.createElement("div", null, "Errors:", allErrors.map((err, _index) => {
-      const errMessage = err.message ? `${err.message}` : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;
-      return /* @__PURE__ */ React__default.createElement(
-        Typography,
-        {
-          variant: "body2",
-          key: `${err.resourcePath}-${err.statusCode}`
-        },
-        err.errorType === "FETCH_ERROR" ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}` : errMessage
-      );
-    }))
-  ));
+      title: t("errorPanel.title"),
+      message: t("errorPanel.description", {
+        entityName
+      }),
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        "Errors:",
+        allErrors.map((err, _index) => {
+          const errMessage = err.message ? `${err.message}` : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;
+          return /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              children: err.errorType === "FETCH_ERROR" ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}` : errMessage
+            },
+            `${err.resourcePath}-${err.statusCode}`
+          );
+        })
+      ] })
+    }
+  ) });
 };
 
 export { ErrorPanel };

package/dist/components/common/ErrorPanel.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorPanel.esm.js","sources":["../../../src/components/common/ErrorPanel.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport { WarningPanel } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\n\nimport { Typography } from '@material-ui/core';\n\nimport { ClusterError, ClusterErrors } from '../../types/types';\n\ntype ErrorPanelProps = { allErrors: ClusterErrors };\n\nexport const ErrorPanel = ({ allErrors }: ErrorPanelProps) => {\n  const {\n    entity: {\n      metadata: { name: entityName },\n    },\n  } = useEntity();\n  return (\n    <div className=\"warning-panel\" style={{ marginBottom: '16px' }}>\n      <WarningPanel\n        title=\"There was a problem retrieving Kubernetes objects\"\n        message={`There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`}\n      >\n        <div>\n          Errors:\n          {allErrors.map((err: ClusterError, _index) => {\n            const errMessage = err.message\n              ? `${err.message}`\n              : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;\n            return (\n              <Typography\n                variant=\"body2\"\n                key={`${err.resourcePath}-${err.statusCode}`}\n              >\n                {err.errorType === 'FETCH_ERROR'\n                  ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}`\n                  : errMessage}\n              </Typography>\n            );\n          })}\n        </div>\n      </WarningPanel>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA0BO,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAiC,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,QAAA,EAAU,EAAE,IAAA,EAAM,UAAW;AAAA;AAC/B,MACE,SAAU,EAAA;AACd,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EAAgB,OAAO,EAAE,YAAA,EAAc,QACpD,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,mDAAA;AAAA,MACN,OAAA,EAAS,4EAA4E,UAAU,CAAA,2EAAA;AAAA,KAAA;AAAA,iDAE9F,KAAI,EAAA,IAAA,EAAA,SAAA,EAEF,UAAU,GAAI,CAAA,CAAC,KAAmB,MAAW,KAAA;AAC5C,MAAA,MAAM,UAAa,GAAA,GAAA,CAAI,OACnB,GAAA,CAAA,EAAG,IAAI,OAAO,CAAA,CAAA,GACd,CAAwC,qCAAA,EAAA,GAAA,CAAI,YAAY,CAAa,UAAA,EAAA,GAAA,CAAI,SAAS,CAAA,eAAA,EAAkB,IAAI,UAAU,CAAA,CAAA;AACtH,MACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,KAAK,CAAG,EAAA,GAAA,CAAI,YAAY,CAAA,CAAA,EAAI,IAAI,UAAU,CAAA;AAAA,SAAA;AAAA,QAEzC,GAAA,CAAI,cAAc,aACf,GAAA,CAAA,qCAAA,EAAwC,IAAI,SAAS,CAAA,WAAA,EAAc,GAAI,CAAA,OAAO,CAC9E,CAAA,GAAA;AAAA,OACN;AAAA,KAEH,CACH;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ErrorPanel.esm.js","sources":["../../../src/components/common/ErrorPanel.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { WarningPanel } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\n\nimport { Typography } from '@material-ui/core';\n\nimport { ClusterError, ClusterErrors } from '../../types/types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\ntype ErrorPanelProps = { allErrors: ClusterErrors };\n\nexport const ErrorPanel = ({ allErrors }: ErrorPanelProps) => {\n  const {\n    entity: {\n      metadata: { name: entityName },\n    },\n  } = useEntity();\n  const { t } = useTranslationRef(tektonTranslationRef);\n  return (\n    <div className=\"warning-panel\" style={{ marginBottom: '16px' }}>\n      <WarningPanel\n        title={t('errorPanel.title')}\n        message={t('errorPanel.description', {\n          entityName,\n        })}\n      >\n        <div>\n          Errors:\n          {allErrors.map((err: ClusterError, _index) => {\n            const errMessage = err.message\n              ? `${err.message}`\n              : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;\n            return (\n              <Typography\n                variant=\"body2\"\n                key={`${err.resourcePath}-${err.statusCode}`}\n              >\n                {err.errorType === 'FETCH_ERROR'\n                  ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}`\n                  : errMessage}\n              </Typography>\n            );\n          })}\n        </div>\n      </WarningPanel>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAiC,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,QAAA,EAAU,EAAE,IAAA,EAAM,UAAW;AAAA;AAC/B,MACE,SAAU,EAAA;AACd,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EACE,uBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EAAgB,OAAO,EAAE,YAAA,EAAc,QACpD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,kBAAkB,CAAA;AAAA,MAC3B,OAAA,EAAS,EAAE,wBAA0B,EAAA;AAAA,QACnC;AAAA,OACD,CAAA;AAAA,MAED,+BAAC,KAAI,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAEF,SAAU,CAAA,GAAA,CAAI,CAAC,GAAA,EAAmB,MAAW,KAAA;AAC5C,UAAA,MAAM,UAAa,GAAA,GAAA,CAAI,OACnB,GAAA,CAAA,EAAG,IAAI,OAAO,CAAA,CAAA,GACd,CAAwC,qCAAA,EAAA,GAAA,CAAI,YAAY,CAAa,UAAA,EAAA,GAAA,CAAI,SAAS,CAAA,eAAA,EAAkB,IAAI,UAAU,CAAA,CAAA;AACtH,UACE,uBAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAQ,EAAA,OAAA;AAAA,cAGP,QAAA,EAAA,GAAA,CAAI,cAAc,aACf,GAAA,CAAA,qCAAA,EAAwC,IAAI,SAAS,CAAA,WAAA,EAAc,GAAI,CAAA,OAAO,CAC9E,CAAA,GAAA;AAAA,aAAA;AAAA,YAJC,CAAG,EAAA,GAAA,CAAI,YAAY,CAAA,CAAA,EAAI,IAAI,UAAU,CAAA;AAAA,WAK5C;AAAA,SAEH;AAAA,OACH,EAAA;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/common/PermissionAlert.esm.js

@@ -1,13 +1,19 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Alert, AlertTitle } from '@material-ui/lab';
 import { kubernetesClustersReadPermission, kubernetesResourcesReadPermission } from '@backstage/plugin-kubernetes-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const permissions = [
   kubernetesClustersReadPermission,
   kubernetesResourcesReadPermission
 ].map((p) => p.name).join(", ");
 const PermissionAlert = () => {
-  return /* @__PURE__ */ React__default.createElement(Alert, { severity: "warning", "data-testid": "no-permission-alert" }, /* @__PURE__ */ React__default.createElement(AlertTitle, null, "Permission required"), "To view Tekton Pipeline Runs, contact your administrator to give you the following permission(s): ", permissions, ".");
+  const { t } = useTranslationRef(tektonTranslationRef);
+  return /* @__PURE__ */ jsxs(Alert, { severity: "warning", "data-testid": "no-permission-alert", children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("permissionAlert.title") }),
+    t("permissionAlert.description", { permissions })
+  ] });
 };
 
 export { PermissionAlert as default };

package/dist/components/common/PermissionAlert.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PermissionAlert.esm.js","sources":["../../../src/components/common/PermissionAlert.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport { Alert, AlertTitle } from '@material-ui/lab';\nimport {\n  kubernetesClustersReadPermission,\n  kubernetesResourcesReadPermission,\n} from '@backstage/plugin-kubernetes-common';\n\nconst permissions = [\n  kubernetesClustersReadPermission,\n  kubernetesResourcesReadPermission,\n]\n  .map(p => p.name)\n  .join(', ');\n\nconst PermissionAlert = () => {\n  return (\n    <Alert severity=\"warning\" data-testid=\"no-permission-alert\">\n      <AlertTitle>Permission required</AlertTitle>\n      To view Tekton Pipeline Runs, contact your administrator to give you the\n      following permission(s): {permissions}.\n    </Alert>\n  );\n};\nexport default PermissionAlert;\n"],"names":["React"],"mappings":";;;;AAuBA,MAAM,WAAc,GAAA;AAAA,EAClB,gCAAA;AAAA,EACA;AACF,CAAA,CACG,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,IAAI,CAAA,CACf,KAAK,IAAI,CAAA;AAEZ,MAAM,kBAAkB,MAAM;AAC5B,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAM,QAAS,EAAA,SAAA,EAAU,aAAY,EAAA,qBAAA,EAAA,kBACnCA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAW,qBAAmB,CAAA,EAAa,oGAElB,EAAA,WAAA,EAAY,GACxC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PermissionAlert.esm.js","sources":["../../../src/components/common/PermissionAlert.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { Alert, AlertTitle } from '@material-ui/lab';\nimport {\n  kubernetesClustersReadPermission,\n  kubernetesResourcesReadPermission,\n} from '@backstage/plugin-kubernetes-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\nconst permissions = [\n  kubernetesClustersReadPermission,\n  kubernetesResourcesReadPermission,\n]\n  .map(p => p.name)\n  .join(', ');\n\nconst PermissionAlert = () => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <Alert severity=\"warning\" data-testid=\"no-permission-alert\">\n      <AlertTitle>{t('permissionAlert.title')}</AlertTitle>\n      {t('permissionAlert.description', { permissions })}\n    </Alert>\n  );\n};\nexport default PermissionAlert;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,WAAc,GAAA;AAAA,EAClB,gCAAA;AAAA,EACA;AACF,CAAA,CACG,IAAI,CAAK,CAAA,KAAA,CAAA,CAAE,IAAI,CAAA,CACf,KAAK,IAAI,CAAA;AAEZ,MAAM,kBAAkB,MAAM;AAC5B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAM,QAAS,EAAA,SAAA,EAAU,eAAY,qBACpC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,UAAA,EAAA,EAAY,QAAE,EAAA,CAAA,CAAA,uBAAuB,CAAE,EAAA,CAAA;AAAA,IACvC,CAAE,CAAA,6BAAA,EAA+B,EAAE,WAAA,EAAa;AAAA,GACnD,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/common/StatusSelector.esm.js

@@ -1,9 +1,12 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
 import { Select } from '@backstage/core-components';
 import { makeStyles, Typography } from '@material-ui/core';
 import './StatusSelector.css.esm.js';
 import { ComputedStatus } from '@janus-idp/shared-react';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   label: {
@@ -26,22 +29,26 @@ const statusOptions = Object.entries(ComputedStatus).sort(([keyA], [keyB]) => {
 }));
 const StatusSelector = () => {
   const classes = useStyles();
-  const { selectedStatus, setSelectedStatus } = React__default.useContext(
+  const { selectedStatus, setSelectedStatus } = useContext(
     TektonResourcesContext
   );
   const onStatusChange = (status) => {
     setSelectedStatus(status);
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: "bs-tkn-status-selector" }, /* @__PURE__ */ React__default.createElement(Typography, { className: classes.label }, "Status"), /* @__PURE__ */ React__default.createElement(
-    Select,
-    {
-      onChange: onStatusChange,
-      label: "",
-      items: statusOptions,
-      selected: selectedStatus,
-      margin: "dense"
-    }
-  ));
+  const { t } = useTranslationRef(tektonTranslationRef);
+  return /* @__PURE__ */ jsxs("div", { className: "bs-tkn-status-selector", children: [
+    /* @__PURE__ */ jsx(Typography, { className: classes.label, children: t("statusSelector.label") }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        onChange: onStatusChange,
+        label: "",
+        items: statusOptions,
+        selected: selectedStatus,
+        margin: "dense"
+      }
+    )
+  ] });
 };
 
 export { StatusSelector, statusOptions };

package/dist/components/common/StatusSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusSelector.esm.js","sources":["../../../src/components/common/StatusSelector.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { makeStyles, Theme, Typography } from '@material-ui/core';\n\nimport './StatusSelector.css';\n\nimport { ComputedStatus } from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  label: {\n    color: theme.palette.text.primary,\n    fontSize: '1rem',\n    paddingRight: '10px',\n    fontWeight: 'bold',\n  },\n}));\n\nexport const statusOptions = Object.entries(ComputedStatus)\n  .sort(([keyA], [keyB]) => {\n    if (keyA === keyB) {\n      return 0;\n    } else if (keyA < keyB) {\n      return -1;\n    }\n    return 1;\n  })\n  .map(([key, value]) => ({\n    value: key,\n    label: value,\n  }));\n\nexport const StatusSelector = () => {\n  const classes = useStyles();\n  const { selectedStatus, setSelectedStatus } = React.useContext(\n    TektonResourcesContext,\n  );\n\n  const onStatusChange = (status: SelectedItems) => {\n    setSelectedStatus(status as ComputedStatus);\n  };\n\n  return (\n    <div className=\"bs-tkn-status-selector\">\n      <Typography className={classes.label}>Status</Typography>\n      <Select\n        onChange={onStatusChange}\n        label=\"\"\n        items={statusOptions}\n        selected={selectedStatus}\n        margin=\"dense\"\n      />\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,MAAA;AAAA,IACV,YAAc,EAAA,MAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,aAAgB,GAAA,MAAA,CAAO,OAAQ,CAAA,cAAc,CACvD,CAAA,IAAA,CAAK,CAAC,CAAC,IAAI,CAAA,EAAG,CAAC,IAAI,CAAM,KAAA;AACxB,EAAA,IAAI,SAAS,IAAM,EAAA;AACjB,IAAO,OAAA,CAAA;AAAA,GACT,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,IAAO,OAAA,EAAA;AAAA;AAET,EAAO,OAAA,CAAA;AACT,CAAC,EACA,GAAI,CAAA,CAAC,CAAC,GAAA,EAAK,KAAK,CAAO,MAAA;AAAA,EACtB,KAAO,EAAA,GAAA;AAAA,EACP,KAAO,EAAA;AACT,CAAE,CAAA;AAEG,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAkB,EAAA,GAAIA,cAAM,CAAA,UAAA;AAAA,IAClD;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,MAA0B,KAAA;AAChD,IAAA,iBAAA,CAAkB,MAAwB,CAAA;AAAA,GAC5C;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAAO,EAAA,EAAA,QAAM,CAC5C,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,cAAA;AAAA,MACV,KAAM,EAAA,EAAA;AAAA,MACN,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,cAAA;AAAA,MACV,MAAO,EAAA;AAAA;AAAA,GAEX,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusSelector.esm.js","sources":["../../../src/components/common/StatusSelector.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { useContext } from 'react';\n\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { makeStyles, Theme, Typography } from '@material-ui/core';\n\nimport './StatusSelector.css';\n\nimport { ComputedStatus } from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  label: {\n    color: theme.palette.text.primary,\n    fontSize: '1rem',\n    paddingRight: '10px',\n    fontWeight: 'bold',\n  },\n}));\n\nexport const statusOptions = Object.entries(ComputedStatus)\n  .sort(([keyA], [keyB]) => {\n    if (keyA === keyB) {\n      return 0;\n    } else if (keyA < keyB) {\n      return -1;\n    }\n    return 1;\n  })\n  .map(([key, value]) => ({\n    value: key,\n    label: value,\n  }));\n\nexport const StatusSelector = () => {\n  const classes = useStyles();\n  const { selectedStatus, setSelectedStatus } = useContext(\n    TektonResourcesContext,\n  );\n\n  const onStatusChange = (status: SelectedItems) => {\n    setSelectedStatus(status as ComputedStatus);\n  };\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <div className=\"bs-tkn-status-selector\">\n      <Typography className={classes.label}>\n        {t('statusSelector.label')}\n      </Typography>\n      <Select\n        onChange={onStatusChange}\n        label=\"\"\n        items={statusOptions}\n        selected={selectedStatus}\n        margin=\"dense\"\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA6BA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,MAAA;AAAA,IACV,YAAc,EAAA,MAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,aAAgB,GAAA,MAAA,CAAO,OAAQ,CAAA,cAAc,CACvD,CAAA,IAAA,CAAK,CAAC,CAAC,IAAI,CAAA,EAAG,CAAC,IAAI,CAAM,KAAA;AACxB,EAAA,IAAI,SAAS,IAAM,EAAA;AACjB,IAAO,OAAA,CAAA;AAAA,GACT,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,IAAO,OAAA,EAAA;AAAA;AAET,EAAO,OAAA,CAAA;AACT,CAAC,EACA,GAAI,CAAA,CAAC,CAAC,GAAA,EAAK,KAAK,CAAO,MAAA;AAAA,EACtB,KAAO,EAAA,GAAA;AAAA,EACP,KAAO,EAAA;AACT,CAAE,CAAA;AAEG,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA,EAAE,cAAgB,EAAA,iBAAA,EAAsB,GAAA,UAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,MAA0B,KAAA;AAChD,IAAA,iBAAA,CAAkB,MAAwB,CAAA;AAAA,GAC5C;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAC5B,EAAA,QAAA,EAAA,CAAA,CAAE,sBAAsB,CAC3B,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,cAAA;AAAA,QACV,KAAM,EAAA,EAAA;AAAA,QACN,KAAO,EAAA,aAAA;AAAA,QACP,QAAU,EAAA,cAAA;AAAA,QACV,MAAO,EAAA;AAAA;AAAA;AACT,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/common/TableExpandCollapse.esm.js

@@ -1,8 +1,11 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
 import { makeStyles, Tooltip, IconButton } from '@material-ui/core';
 import Collapse from '@material-ui/icons/UnfoldLess';
 import Expand from '@material-ui/icons/UnfoldMore';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles({
   expandCollapse: {
@@ -15,29 +18,31 @@ const useStyles = makeStyles({
 });
 const TableExpandCollapse = () => {
   const classes = useStyles();
-  const { isExpanded, setIsExpanded } = React__default.useContext(
-    TektonResourcesContext
-  );
+  const { isExpanded, setIsExpanded } = useContext(TektonResourcesContext);
+  const { t } = useTranslationRef(tektonTranslationRef);
   const handleExpandCollaspse = () => {
     setIsExpanded(!isExpanded);
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes.expandCollapse }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: "Collapse all", placement: "top" }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
-    IconButton,
-    {
-      onClick: () => handleExpandCollaspse(),
-      disabled: !isExpanded,
-      className: classes.iconButton
-    },
-    /* @__PURE__ */ React__default.createElement(Collapse, null)
-  ))), /* @__PURE__ */ React__default.createElement(Tooltip, { title: "Expand all", placement: "top" }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
-    IconButton,
-    {
-      onClick: () => handleExpandCollaspse(),
-      disabled: isExpanded,
-      className: classes.iconButton
-    },
-    /* @__PURE__ */ React__default.createElement(Expand, null)
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: classes.expandCollapse, children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: t("tableExpandCollapse.collapseAll"), placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => handleExpandCollaspse(),
+        disabled: !isExpanded,
+        className: classes.iconButton,
+        children: /* @__PURE__ */ jsx(Collapse, {})
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(Tooltip, { title: t("tableExpandCollapse.expandAll"), placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => handleExpandCollaspse(),
+        disabled: isExpanded,
+        className: classes.iconButton,
+        children: /* @__PURE__ */ jsx(Expand, {})
+      }
+    ) }) })
+  ] });
 };
 
 export { TableExpandCollapse };

package/dist/components/common/TableExpandCollapse.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandCollapse.esm.js","sources":["../../../src/components/common/TableExpandCollapse.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport { IconButton, makeStyles, Tooltip } from '@material-ui/core';\nimport Collapse from '@material-ui/icons/UnfoldLess';\nimport Expand from '@material-ui/icons/UnfoldMore';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\n\nconst useStyles = makeStyles({\n  expandCollapse: {\n    flexGrow: 1,\n    textAlign: 'end',\n  },\n  iconButton: {\n    padding: '2px',\n  },\n});\n\nexport const TableExpandCollapse = () => {\n  const classes = useStyles();\n  const { isExpanded, setIsExpanded } = React.useContext(\n    TektonResourcesContext,\n  );\n\n  const handleExpandCollaspse = () => {\n    setIsExpanded(!isExpanded);\n  };\n  return (\n    <div className={classes.expandCollapse}>\n      <Tooltip title=\"Collapse all\" placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={!isExpanded}\n            className={classes.iconButton}\n          >\n            <Collapse />\n          </IconButton>\n        </span>\n      </Tooltip>\n      <Tooltip title=\"Expand all\" placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={isExpanded}\n            className={classes.iconButton}\n          >\n            <Expand />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAuBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,cAAgB,EAAA;AAAA,IACd,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,UAAA,EAAY,aAAc,EAAA,GAAIA,cAAM,CAAA,UAAA;AAAA,IAC1C;AAAA,GACF;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,GAC3B;AACA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,cACtB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAM,cAAe,EAAA,SAAA,EAAU,KACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,MACrC,UAAU,CAAC,UAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,iDAElB,QAAS,EAAA,IAAA;AAAA,GAEd,CACF,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAM,YAAa,EAAA,SAAA,EAAU,KACpC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,MACrC,QAAU,EAAA,UAAA;AAAA,MACV,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,iDAElB,MAAO,EAAA,IAAA;AAAA,GAEZ,CACF,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TableExpandCollapse.esm.js","sources":["../../../src/components/common/TableExpandCollapse.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { useContext } from 'react';\n\nimport { IconButton, makeStyles, Tooltip } from '@material-ui/core';\nimport Collapse from '@material-ui/icons/UnfoldLess';\nimport Expand from '@material-ui/icons/UnfoldMore';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\nconst useStyles = makeStyles({\n  expandCollapse: {\n    flexGrow: 1,\n    textAlign: 'end',\n  },\n  iconButton: {\n    padding: '2px',\n  },\n});\n\nexport const TableExpandCollapse = () => {\n  const classes = useStyles();\n  const { isExpanded, setIsExpanded } = useContext(TektonResourcesContext);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const handleExpandCollaspse = () => {\n    setIsExpanded(!isExpanded);\n  };\n  return (\n    <div className={classes.expandCollapse}>\n      <Tooltip title={t('tableExpandCollapse.collapseAll')} placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={!isExpanded}\n            className={classes.iconButton}\n          >\n            <Collapse />\n          </IconButton>\n        </span>\n      </Tooltip>\n      <Tooltip title={t('tableExpandCollapse.expandAll')} placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={isExpanded}\n            className={classes.iconButton}\n          >\n            <Expand />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,cAAgB,EAAA;AAAA,IACd,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,UAAA,EAAY,aAAc,EAAA,GAAI,WAAW,sBAAsB,CAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,GAC3B;AACA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,cACtB,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAO,CAAE,CAAA,iCAAiC,GAAG,SAAU,EAAA,KAAA,EAC9D,8BAAC,MACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,QACrC,UAAU,CAAC,UAAA;AAAA,QACX,WAAW,OAAQ,CAAA,UAAA;AAAA,QAEnB,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,OAEd,CACF,EAAA,CAAA;AAAA,oBACA,GAAA,CAAC,WAAQ,KAAO,EAAA,CAAA,CAAE,+BAA+B,CAAG,EAAA,SAAA,EAAU,KAC5D,EAAA,QAAA,kBAAA,GAAA,CAAC,MACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,QACrC,QAAU,EAAA,UAAA;AAAA,QACV,WAAW,OAAQ,CAAA,UAAA;AAAA,QAEnB,8BAAC,MAAO,EAAA,EAAA;AAAA;AAAA,OAEZ,CACF,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/pipeline-topology/PipelineLayout.esm.js

@@ -1,15 +1,16 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Visualization, GRAPH_POSITION_CHANGE_EVENT, GRAPH_LAYOUT_END_EVENT, VisualizationProvider, TopologyView, VisualizationSurface, TopologyControlBar, createTopologyControlButtons, action, defaultControlButtonsOptions } from '@patternfly/react-topology';
 import { DROP_SHADOW_SPACING, GRAPH_MIN_WIDTH, TOOLBAR_HEIGHT, NODE_HEIGHT } from '../../consts/pipeline-topology-const.esm.js';
 import { getLayoutData } from '../../utils/pipeline-topology-utils.esm.js';
 import pipelineComponentFactory, { layoutFactory } from './pipelineComponentFactory.esm.js';
 
 const PipelineLayout = ({ model }) => {
-  const [vis, setVis] = React__default.useState(null);
-  const [maxSize, setMaxSize] = React__default.useState({ height: 0, width: 0 });
-  const storedGraphModel = React__default.useRef(null);
+  const [vis, setVis] = useState(null);
+  const [maxSize, setMaxSize] = useState({ height: 0, width: 0 });
+  const storedGraphModel = useRef(null);
   const layout = model.graph.layout;
-  const onLayoutUpdate = React__default.useCallback(
+  const onLayoutUpdate = useCallback(
     (nodes) => {
       const nodeBounds = nodes.map(
         (node) => node.getBounds()
@@ -45,13 +46,13 @@ const PipelineLayout = ({ model }) => {
     },
     [setMaxSize, layout]
   );
-  React__default.useEffect(() => {
+  useEffect(() => {
     if (model.graph.id !== storedGraphModel?.current?.id) {
       storedGraphModel.current = null;
       setVis(null);
     }
   }, [vis, model]);
-  React__default.useEffect(() => {
+  useEffect(() => {
     let mounted = true;
     if (vis === null) {
       const controller = new Visualization();
@@ -79,7 +80,7 @@ const PipelineLayout = ({ model }) => {
       mounted = false;
     };
   }, [vis, model, onLayoutUpdate]);
-  React__default.useEffect(() => {
+  useEffect(() => {
     if (model && vis) {
       const graph = storedGraphModel.current;
       if (graph) {
@@ -89,7 +90,7 @@ const PipelineLayout = ({ model }) => {
     }
   }, [model, vis]);
   if (!vis) return null;
-  const controlBar = (controller) => /* @__PURE__ */ React__default.createElement(
+  const controlBar = (controller) => /* @__PURE__ */ jsx(
     TopologyControlBar,
     {
       controlButtons: createTopologyControlButtons({
@@ -111,14 +112,14 @@ const PipelineLayout = ({ model }) => {
       })
     }
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
         height: Math.min(window.innerHeight, maxSize?.height)
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(VisualizationProvider, { controller: vis }, /* @__PURE__ */ React__default.createElement(TopologyView, { controlBar: controlBar(vis) }, /* @__PURE__ */ React__default.createElement(VisualizationSurface, null)))
+      },
+      children: /* @__PURE__ */ jsx(VisualizationProvider, { controller: vis, children: /* @__PURE__ */ jsx(TopologyView, { controlBar: controlBar(vis), children: /* @__PURE__ */ jsx(VisualizationSurface, {}) }) })
+    }
   );
 };
 

package/dist/components/pipeline-topology/PipelineLayout.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineLayout.esm.js","sources":["../../../src/components/pipeline-topology/PipelineLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport {\n  action,\n  Controller,\n  createTopologyControlButtons,\n  defaultControlButtonsOptions,\n  EdgeModel,\n  GRAPH_LAYOUT_END_EVENT,\n  GRAPH_POSITION_CHANGE_EVENT,\n  GraphModel,\n  Node,\n  NodeModel,\n  Rect,\n  TopologyControlBar,\n  TopologyView,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface,\n} from '@patternfly/react-topology';\n\nimport {\n  DROP_SHADOW_SPACING,\n  GRAPH_MIN_WIDTH,\n  NODE_HEIGHT,\n  PipelineLayout as PipelineLayoutTypes,\n  TOOLBAR_HEIGHT,\n} from '../../consts/pipeline-topology-const';\nimport { PipelineMixedNodeModel } from '../../types/pipeline-topology-types';\nimport { getLayoutData } from '../../utils/pipeline-topology-utils';\nimport pipelineComponentFactory, {\n  layoutFactory,\n} from './pipelineComponentFactory';\n\ntype PipelineLayoutProps = {\n  model: {\n    graph: GraphModel;\n    nodes: PipelineMixedNodeModel[];\n    edges: EdgeModel[];\n  };\n};\n\nexport const PipelineLayout = ({ model }: PipelineLayoutProps) => {\n  const [vis, setVis] = React.useState<Controller | null>(null);\n  const [maxSize, setMaxSize] = React.useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n  const storedGraphModel = React.useRef<GraphModel | null>(null);\n\n  const layout: PipelineLayoutTypes = model.graph.layout as PipelineLayoutTypes;\n\n  const onLayoutUpdate = React.useCallback(\n    (nodes: Node[]) => {\n      const nodeBounds = nodes.map((node: Node<NodeModel, any>) =>\n        node.getBounds(),\n      );\n      const maxWidth = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.width)\n          .reduce((w1: number, w2: number) => Math.max(w1, w2), 0),\n      );\n      const maxHeight = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.height)\n          .reduce((h1: number, h2: number) => Math.max(h1, h2), 0),\n      );\n      const maxObject =\n        nodeBounds.find((nb: Rect) => nb.height === maxHeight) ??\n        ({ y: 0 } as Rect);\n\n      const maxX = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.x)\n          .reduce((x1: number, x2: number) => Math.max(x1, x2), 0),\n      );\n      const maxY = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.y)\n          .reduce((y1: number, y2: number) => Math.max(y1, y2), 0),\n      );\n\n      let horizontalMargin = 0;\n      let verticalMargin = 0;\n      if (layout) {\n        horizontalMargin = getLayoutData(layout)?.marginx || 0;\n        verticalMargin = getLayoutData(layout)?.marginy || 0;\n      }\n      const finallyTaskHeight =\n        maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;\n      const regularTaskHeight =\n        maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;\n\n      setMaxSize({\n        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,\n        width: Math.max(\n          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,\n          GRAPH_MIN_WIDTH,\n        ),\n      });\n    },\n    [setMaxSize, layout],\n  );\n\n  React.useEffect(() => {\n    if (model.graph.id !== storedGraphModel?.current?.id) {\n      storedGraphModel.current = null;\n      setVis(null);\n    }\n  }, [vis, model]);\n\n  React.useEffect(() => {\n    let mounted = true;\n    if (vis === null) {\n      const controller = new Visualization();\n      controller.registerLayoutFactory(layoutFactory);\n      controller.registerComponentFactory(pipelineComponentFactory);\n      controller.fromModel(model);\n      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {\n        storedGraphModel.current = controller.getGraph().toModel();\n      });\n      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {\n        onLayoutUpdate(controller.getGraph().getNodes());\n      });\n      if (mounted) {\n        setVis(controller);\n      }\n    } else {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n      vis.getGraph().layout();\n    }\n    return () => {\n      mounted = false;\n    };\n  }, [vis, model, onLayoutUpdate]);\n\n  React.useEffect(() => {\n    if (model && vis) {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n    }\n  }, [model, vis]);\n\n  if (!vis) return null;\n\n  const controlBar = (controller: Controller) => (\n    <TopologyControlBar\n      controlButtons={createTopologyControlButtons({\n        ...defaultControlButtonsOptions,\n        zoomInCallback: action(() => {\n          controller.getGraph().scaleBy(4 / 3);\n        }),\n        zoomOutCallback: action(() => {\n          controller.getGraph().scaleBy(0.75);\n        }),\n        fitToScreenCallback: action(() => {\n          controller.getGraph().fit(80);\n        }),\n        resetViewCallback: action(() => {\n          controller.getGraph().reset();\n          controller.getGraph().layout();\n        }),\n        legend: false,\n      })}\n    />\n  );\n\n  return (\n    <div\n      style={{\n        height: Math.min(window.innerHeight, maxSize?.height),\n      }}\n    >\n      <VisualizationProvider controller={vis}>\n        <TopologyView controlBar={controlBar(vis)}>\n          <VisualizationSurface />\n        </TopologyView>\n      </VisualizationProvider>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"PipelineLayout.esm.js","sources":["../../../src/components/pipeline-topology/PipelineLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { useState, useRef, useCallback, useEffect } from 'react';\n\nimport {\n  action,\n  Controller,\n  createTopologyControlButtons,\n  defaultControlButtonsOptions,\n  EdgeModel,\n  GRAPH_LAYOUT_END_EVENT,\n  GRAPH_POSITION_CHANGE_EVENT,\n  GraphModel,\n  Node,\n  NodeModel,\n  Rect,\n  TopologyControlBar,\n  TopologyView,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface,\n} from '@patternfly/react-topology';\n\nimport {\n  DROP_SHADOW_SPACING,\n  GRAPH_MIN_WIDTH,\n  NODE_HEIGHT,\n  PipelineLayout as PipelineLayoutTypes,\n  TOOLBAR_HEIGHT,\n} from '../../consts/pipeline-topology-const';\nimport { PipelineMixedNodeModel } from '../../types/pipeline-topology-types';\nimport { getLayoutData } from '../../utils/pipeline-topology-utils';\nimport pipelineComponentFactory, {\n  layoutFactory,\n} from './pipelineComponentFactory';\n\ntype PipelineLayoutProps = {\n  model: {\n    graph: GraphModel;\n    nodes: PipelineMixedNodeModel[];\n    edges: EdgeModel[];\n  };\n};\n\nexport const PipelineLayout = ({ model }: PipelineLayoutProps) => {\n  const [vis, setVis] = useState<Controller | null>(null);\n  const [maxSize, setMaxSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n  const storedGraphModel = useRef<GraphModel | null>(null);\n\n  const layout: PipelineLayoutTypes = model.graph.layout as PipelineLayoutTypes;\n\n  const onLayoutUpdate = useCallback(\n    (nodes: Node[]) => {\n      const nodeBounds = nodes.map((node: Node<NodeModel, any>) =>\n        node.getBounds(),\n      );\n      const maxWidth = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.width)\n          .reduce((w1: number, w2: number) => Math.max(w1, w2), 0),\n      );\n      const maxHeight = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.height)\n          .reduce((h1: number, h2: number) => Math.max(h1, h2), 0),\n      );\n      const maxObject =\n        nodeBounds.find((nb: Rect) => nb.height === maxHeight) ??\n        ({ y: 0 } as Rect);\n\n      const maxX = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.x)\n          .reduce((x1: number, x2: number) => Math.max(x1, x2), 0),\n      );\n      const maxY = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.y)\n          .reduce((y1: number, y2: number) => Math.max(y1, y2), 0),\n      );\n\n      let horizontalMargin = 0;\n      let verticalMargin = 0;\n      if (layout) {\n        horizontalMargin = getLayoutData(layout)?.marginx || 0;\n        verticalMargin = getLayoutData(layout)?.marginy || 0;\n      }\n      const finallyTaskHeight =\n        maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;\n      const regularTaskHeight =\n        maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;\n\n      setMaxSize({\n        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,\n        width: Math.max(\n          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,\n          GRAPH_MIN_WIDTH,\n        ),\n      });\n    },\n    [setMaxSize, layout],\n  );\n\n  useEffect(() => {\n    if (model.graph.id !== storedGraphModel?.current?.id) {\n      storedGraphModel.current = null;\n      setVis(null);\n    }\n  }, [vis, model]);\n\n  useEffect(() => {\n    let mounted = true;\n    if (vis === null) {\n      const controller = new Visualization();\n      controller.registerLayoutFactory(layoutFactory);\n      controller.registerComponentFactory(pipelineComponentFactory);\n      controller.fromModel(model);\n      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {\n        storedGraphModel.current = controller.getGraph().toModel();\n      });\n      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {\n        onLayoutUpdate(controller.getGraph().getNodes());\n      });\n      if (mounted) {\n        setVis(controller);\n      }\n    } else {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n      vis.getGraph().layout();\n    }\n    return () => {\n      mounted = false;\n    };\n  }, [vis, model, onLayoutUpdate]);\n\n  useEffect(() => {\n    if (model && vis) {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n    }\n  }, [model, vis]);\n\n  if (!vis) return null;\n\n  const controlBar = (controller: Controller) => (\n    <TopologyControlBar\n      controlButtons={createTopologyControlButtons({\n        ...defaultControlButtonsOptions,\n        zoomInCallback: action(() => {\n          controller.getGraph().scaleBy(4 / 3);\n        }),\n        zoomOutCallback: action(() => {\n          controller.getGraph().scaleBy(0.75);\n        }),\n        fitToScreenCallback: action(() => {\n          controller.getGraph().fit(80);\n        }),\n        resetViewCallback: action(() => {\n          controller.getGraph().reset();\n          controller.getGraph().layout();\n        }),\n        legend: false,\n      })}\n    />\n  );\n\n  return (\n    <div\n      style={{\n        height: Math.min(window.innerHeight, maxSize?.height),\n      }}\n    >\n      <VisualizationProvider controller={vis}>\n        <TopologyView controlBar={controlBar(vis)}>\n          <VisualizationSurface />\n        </TopologyView>\n      </VisualizationProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/pipeline-topology/PipelineRunVisualization.esm.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useDarkTheme } from '../../hooks/useDarkTheme.esm.js';
 import { PipelineVisualizationView } from './PipelineVisualizationView.esm.js';
 
@@ -6,7 +6,7 @@ const PipelineRunVisualization = ({
   pipelineRunName
 }) => {
   useDarkTheme();
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, pipelineRunName && /* @__PURE__ */ React__default.createElement(PipelineVisualizationView, { pipelineRun: pipelineRunName }));
+  return /* @__PURE__ */ jsx(Fragment, { children: pipelineRunName && /* @__PURE__ */ jsx(PipelineVisualizationView, { pipelineRun: pipelineRunName }) });
 };
 
 export { PipelineRunVisualization };

package/dist/components/pipeline-topology/PipelineRunVisualization.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunVisualization.esm.js","sources":["../../../src/components/pipeline-topology/PipelineRunVisualization.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport React from 'react';\n\nimport { useDarkTheme } from '../../hooks/useDarkTheme';\nimport { PipelineVisualizationView } from './PipelineVisualizationView';\n\ntype PipelineRunVisualizationProps = {\n  pipelineRunName?: string;\n};\n\nexport const PipelineRunVisualization = ({\n  pipelineRunName,\n}: PipelineRunVisualizationProps) => {\n  useDarkTheme();\n\n  return (\n    <>\n      {pipelineRunName && (\n        <PipelineVisualizationView pipelineRun={pipelineRunName} />\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AACF,CAAqC,KAAA;AACnC,EAAa,YAAA,EAAA;AAEb,EAAA,mFAEK,eACC,oBAAAA,cAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,WAAA,EAAa,iBAAiB,CAE7D,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PipelineRunVisualization.esm.js","sources":["../../../src/components/pipeline-topology/PipelineRunVisualization.tsx"],"sourcesContent":["/*\n * Copyright 2024 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 */\nimport { useDarkTheme } from '../../hooks/useDarkTheme';\nimport { PipelineVisualizationView } from './PipelineVisualizationView';\n\ntype PipelineRunVisualizationProps = {\n  pipelineRunName?: string;\n};\n\nexport const PipelineRunVisualization = ({\n  pipelineRunName,\n}: PipelineRunVisualizationProps) => {\n  useDarkTheme();\n\n  return (\n    <>\n      {pipelineRunName && (\n        <PipelineVisualizationView pipelineRun={pipelineRunName} />\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AACF,CAAqC,KAAA;AACnC,EAAa,YAAA,EAAA;AAEb,EAAA,uCAEK,QACC,EAAA,eAAA,oBAAA,GAAA,CAAC,yBAA0B,EAAA,EAAA,WAAA,EAAa,iBAAiB,CAE7D,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/pipeline-topology/PipelineTaskNode.esm.js

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useContext, useRef, useMemo } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { useHover, useDetailsLevel, RunStatus, WhenDecorator, DEFAULT_WHEN_OFFSET, TaskNode, ScaleDetailsLevel, Layer, TOP_LAYER, DEFAULT_LAYER } from '@patternfly/react-topology';
 import { observer } from 'mobx-react';
@@ -17,12 +18,12 @@ const PipelineTaskNode = ({
   contextMenuOpen,
   ...rest
 }) => {
-  const [open, setOpen] = React__default.useState(false);
-  const { watchResourcesData } = React__default.useContext(
+  const [open, setOpen] = useState(false);
+  const { watchResourcesData } = useContext(
     TektonResourcesContext
   );
   const data = element.getData();
-  const triggerRef = React__default.useRef(null);
+  const triggerRef = useRef(null);
   const pipelineRun = data.pipelineRun;
   const [hover, hoverRef] = useHover();
   const detailsLevel = useDetailsLevel();
@@ -45,7 +46,7 @@ const PipelineTaskNode = ({
     ({ status }) => status === RunStatus.Succeeded
   ).length;
   const badge = stepStatusList.length > 0 && data.status ? `${succeededStepsCount}/${stepStatusList.length}` : null;
-  const passedData = React__default.useMemo(() => {
+  const passedData = useMemo(() => {
     const newData = { ...data };
     Object.keys(newData).forEach((key) => {
       if (newData[key] === void 0) {
@@ -55,7 +56,7 @@ const PipelineTaskNode = ({
     return newData;
   }, [data]);
   const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);
-  const whenDecorator = data.whenStatus ? /* @__PURE__ */ React__default.createElement(
+  const whenDecorator = data.whenStatus ? /* @__PURE__ */ jsx(
     WhenDecorator,
     {
       element,
@@ -66,67 +67,70 @@ const PipelineTaskNode = ({
   const activeTaskId = taskRuns.find(
     (tr) => tr?.metadata?.labels?.[TEKTON_PIPELINE_RUN] === pipelineRun?.metadata?.name && tr?.metadata?.labels?.[TEKTON_PIPELINE_TASK] === data.task?.name
   )?.metadata?.name;
-  const taskNode = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
-    PipelineRunLogDialog,
-    {
-      pipelineRun,
-      open,
-      closeDialog,
-      pods,
-      taskRuns,
-      activeTask: activeTaskId
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    TaskNode,
-    {
-      className: "bs-tkn-pipeline-task-node",
-      element,
-      onContextMenu: data.showContextMenu ? onContextMenu : void 0,
-      contextMenuOpen,
-      scaleNode: (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high,
-      hideDetailsAtMedium: true,
-      ...passedData,
-      ...rest,
-      badge,
-      truncateLength: element.getData()?.label?.length,
-      onSelect: activeTaskId && openDialog
-    },
-    whenDecorator
-  ));
-  return /* @__PURE__ */ React__default.createElement(
-    Layer,
-    {
-      id: detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen) ? TOP_LAYER : DEFAULT_LAYER
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "g",
+  const taskNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PipelineRunLogDialog,
+      {
+        pipelineRun,
+        open,
+        closeDialog,
+        pods,
+        taskRuns,
+        activeTask: activeTaskId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TaskNode,
       {
-        "data-test": `task ${element.getLabel()}`,
         className: "bs-tkn-pipeline-task-node",
-        ref: hoverRef
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Tooltip,
+        element,
+        onContextMenu: data.showContextMenu ? onContextMenu : void 0,
+        contextMenuOpen,
+        scaleNode: (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high,
+        hideDetailsAtMedium: true,
+        ...passedData,
+        ...rest,
+        badge,
+        truncateLength: element.getData()?.label?.length,
+        onSelect: activeTaskId && openDialog,
+        children: whenDecorator
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(
+    Layer,
+    {
+      id: detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen) ? TOP_LAYER : DEFAULT_LAYER,
+      children: /* @__PURE__ */ jsx(
+        "g",
         {
-          position: "bottom",
-          enableFlip: false,
-          content: /* @__PURE__ */ React__default.createElement(
-            PipelineVisualizationStepList,
+          "data-test": `task ${element.getLabel()}`,
+          className: "bs-tkn-pipeline-task-node",
+          ref: hoverRef,
+          children: /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              isSpecOverview: !data.status,
-              taskName: element.getLabel(),
-              steps: stepStatusList,
-              isFinallyTask
+              position: "bottom",
+              enableFlip: false,
+              content: /* @__PURE__ */ jsx(
+                PipelineVisualizationStepList,
+                {
+                  isSpecOverview: !data.status,
+                  taskName: element.getLabel(),
+                  steps: stepStatusList,
+                  isFinallyTask
+                }
+              ),
+              triggerRef,
+              children: /* @__PURE__ */ jsx("g", { ref: triggerRef, children: taskNode })
             }
-          ),
-          triggerRef
-        },
-        /* @__PURE__ */ React__default.createElement("g", { ref: triggerRef }, taskNode)
+          )
+        }
       )
-    )
+    }
   );
 };
-var PipelineTaskNode$1 = React__default.memo(observer(PipelineTaskNode));
+var PipelineTaskNode$1 = memo(observer(PipelineTaskNode));
 
 export { PipelineTaskNode$1 as default };
 //# sourceMappingURL=PipelineTaskNode.esm.js.map