@backstage-community/plugin-tekton 3.38.0 → 3.40.0

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

@@ -1,23 +1,21 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { cloneElement } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import classNames from 'classnames';
 import { CamelCaseWrap } from './CamelCaseWrap.esm.js';
 
 const DASH = "-";
-const useStyles = makeStyles({
-  iconAndText: {
-    display: "flex",
-    fontWeight: 400,
-    fontSize: "14px"
-  },
-  flexChild: {
-    flex: " 0 0 auto",
-    position: "relative",
-    top: "0.125em"
-  }
-});
+const iconAndTextSx = {
+  display: "flex",
+  fontWeight: 400,
+  fontSize: "14px"
+};
+const flexChildSx = {
+  flex: "0 0 auto",
+  position: "relative",
+  top: "0.125em"
+};
 const StatusIconAndText = ({
   icon,
   title,
@@ -26,7 +24,6 @@ const StatusIconAndText = ({
   className,
   dataTestId
 }) => {
-  const styles = useStyles();
   if (!title) {
     return /* @__PURE__ */ jsx(Fragment, { children: DASH });
   }
@@ -39,17 +36,14 @@ const StatusIconAndText = ({
   return /* @__PURE__ */ jsxs(
     Typography,
     {
-      className: classNames(styles.iconAndText, className),
+      sx: iconAndTextSx,
+      className,
       "data-testid": dataTestId ?? `icon-with-title-${title}`,
       title,
       children: [
-        cloneElement(icon, {
-          className: classNames(
-            spin && "fa-spin",
-            icon.props.className,
-            styles.flexChild
-          )
-        }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: flexChildSx, children: cloneElement(icon, {
+          className: classNames(spin && "fa-spin", icon.props.className)
+        }) }),
         /* @__PURE__ */ jsx(CamelCaseWrap, { value: title, dataTest: "status-text" })
       ]
     }

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

@@ -1 +1 @@
-{"version":3,"file":"StatusIconAndText.esm.js","sources":["../../../src/components/common/StatusIconAndText.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { ReactElement, cloneElement } from 'react';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport { Typography } from '@material-ui/core';\nimport classNames from 'classnames';\n\nimport CamelCaseWrap from './CamelCaseWrap';\n\nconst DASH = '-';\n\nconst useStyles = makeStyles({\n  iconAndText: {\n    display: 'flex',\n    fontWeight: 400,\n    fontSize: '14px',\n  },\n\n  flexChild: {\n    flex: ' 0 0 auto',\n    position: 'relative',\n    top: '0.125em',\n  },\n});\n\nexport const StatusIconAndText = ({\n  icon,\n  title,\n  spin,\n  iconOnly,\n  className,\n  dataTestId,\n}: {\n  title: string;\n  iconOnly?: boolean;\n  className?: string;\n  icon: ReactElement;\n  spin?: boolean;\n  dataTestId?: string;\n}): ReactElement => {\n  const styles = useStyles();\n  if (!title) {\n    return <>{DASH}</>;\n  }\n\n  if (iconOnly) {\n    return (\n      <>\n        {cloneElement(icon, {\n          'data-testid': dataTestId ?? `icon-only-${title}`,\n          className: icon.props.className,\n        })}\n      </>\n    );\n  }\n\n  return (\n    <Typography\n      className={classNames(styles.iconAndText, className)}\n      data-testid={dataTestId ?? `icon-with-title-${title}`}\n      title={title}\n    >\n      {cloneElement(icon, {\n        className: classNames(\n          spin && 'fa-spin',\n          icon.props.className,\n          styles.flexChild,\n        ),\n      })}\n      <CamelCaseWrap value={title} dataTest=\"status-text\" />\n    </Typography>\n  );\n};\n\nexport default StatusIconAndText;\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,GAAA;AAEb,MAAM,YAAY,UAAA,CAAW;AAAA,EAC3B,WAAA,EAAa;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,GAAA;AAAA,IACZ,QAAA,EAAU;AAAA,GACZ;AAAA,EAEA,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,WAAA;AAAA,IACN,QAAA,EAAU,UAAA;AAAA,IACV,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAEM,MAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAOoB;AAClB,EAAA,MAAM,SAAS,SAAA,EAAU;AACzB,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,uCAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EACjB;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,IAAA,EAAM;AAAA,MAClB,aAAA,EAAe,UAAA,IAAc,CAAA,UAAA,EAAa,KAAK,CAAA,CAAA;AAAA,MAC/C,SAAA,EAAW,KAAK,KAAA,CAAM;AAAA,KACvB,CAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA,CAAW,MAAA,CAAO,WAAA,EAAa,SAAS,CAAA;AAAA,MACnD,aAAA,EAAa,UAAA,IAAc,CAAA,gBAAA,EAAmB,KAAK,CAAA,CAAA;AAAA,MACnD,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,YAAA,CAAa,IAAA,EAAM;AAAA,UAClB,SAAA,EAAW,UAAA;AAAA,YACT,IAAA,IAAQ,SAAA;AAAA,YACR,KAAK,KAAA,CAAM,SAAA;AAAA,YACX,MAAA,CAAO;AAAA;AACT,SACD,CAAA;AAAA,wBACD,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,KAAA,EAAO,UAAS,aAAA,EAAc;AAAA;AAAA;AAAA,GACtD;AAEJ;;;;"}
+{"version":3,"file":"StatusIconAndText.esm.js","sources":["../../../src/components/common/StatusIconAndText.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 { ReactElement, cloneElement } from 'react';\n\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport classNames from 'classnames';\n\nimport CamelCaseWrap from './CamelCaseWrap';\n\nconst DASH = '-';\n\nconst iconAndTextSx = {\n  display: 'flex',\n  fontWeight: 400,\n  fontSize: '14px',\n};\n\nconst flexChildSx = {\n  flex: '0 0 auto',\n  position: 'relative',\n  top: '0.125em',\n};\n\nexport const StatusIconAndText = ({\n  icon,\n  title,\n  spin,\n  iconOnly,\n  className,\n  dataTestId,\n}: {\n  title: string;\n  iconOnly?: boolean;\n  className?: string;\n  icon: ReactElement;\n  spin?: boolean;\n  dataTestId?: string;\n}): ReactElement => {\n  if (!title) {\n    return <>{DASH}</>;\n  }\n\n  if (iconOnly) {\n    return (\n      <>\n        {cloneElement(icon, {\n          'data-testid': dataTestId ?? `icon-only-${title}`,\n          className: icon.props.className,\n        })}\n      </>\n    );\n  }\n\n  return (\n    <Typography\n      sx={iconAndTextSx}\n      className={className}\n      data-testid={dataTestId ?? `icon-with-title-${title}`}\n      title={title}\n    >\n      <Box component=\"span\" sx={flexChildSx}>\n        {cloneElement(icon, {\n          className: classNames(spin && 'fa-spin', icon.props.className),\n        })}\n      </Box>\n      <CamelCaseWrap value={title} dataTest=\"status-text\" />\n    </Typography>\n  );\n};\n\nexport default StatusIconAndText;\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,GAAA;AAEb,MAAM,aAAA,GAAgB;AAAA,EACpB,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,GAAA;AAAA,EACZ,QAAA,EAAU;AACZ,CAAA;AAEA,MAAM,WAAA,GAAc;AAAA,EAClB,IAAA,EAAM,UAAA;AAAA,EACN,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK;AACP,CAAA;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAOoB;AAClB,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,uCAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EACjB;AAEA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,uBACE,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,IAAA,EAAM;AAAA,MAClB,aAAA,EAAe,UAAA,IAAc,CAAA,UAAA,EAAa,KAAK,CAAA,CAAA;AAAA,MAC/C,SAAA,EAAW,KAAK,KAAA,CAAM;AAAA,KACvB,CAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,aAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA,EAAa,UAAA,IAAc,CAAA,gBAAA,EAAmB,KAAK,CAAA,CAAA;AAAA,MACnD,KAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,OAAI,SAAA,EAAU,MAAA,EAAO,EAAA,EAAI,WAAA,EACvB,uBAAa,IAAA,EAAM;AAAA,UAClB,WAAW,UAAA,CAAW,IAAA,IAAQ,SAAA,EAAW,IAAA,CAAK,MAAM,SAAS;AAAA,SAC9D,CAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAO,KAAA,EAAO,UAAS,aAAA,EAAc;AAAA;AAAA;AAAA,GACtD;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { Select } from '@backstage/core-components';
-import { Typography, makeStyles } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import './StatusSelector.css.esm.js';
 import { ComputedStatus } from '@backstage-community/plugin-tekton-react';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
@@ -9,16 +9,13 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  label: {
-    color: theme.palette.text.primary,
-    fontSize: "1rem",
-    paddingRight: "10px",
-    fontWeight: "bold"
-  }
-}));
+const labelSx = {
+  color: "text.primary",
+  fontSize: "1rem",
+  paddingRight: "10px",
+  fontWeight: "bold"
+};
 const StatusSelector = () => {
-  const classes = useStyles();
   const { selectedStatus, setSelectedStatus } = useContext(
     TektonResourcesContext
   );
@@ -38,7 +35,7 @@ const StatusSelector = () => {
     label: t(`pipelineRunStatus.${key}`, { defaultValue: value })
   }));
   return /* @__PURE__ */ jsxs("div", { className: "bs-tkn-status-selector", children: [
-    /* @__PURE__ */ jsx(Typography, { className: classes.label, children: t("statusSelector.label") }),
+    /* @__PURE__ */ jsx(Typography, { sx: labelSx, children: t("statusSelector.label") }),
     /* @__PURE__ */ jsx(
       Select,
       {

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 { 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 '@backstage-community/plugin-tekton-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\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 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  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: t(`pipelineRunStatus.${key}` as any, { defaultValue: value }),\n    }));\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,CAAA,KAAA,MAAU;AAAA,EAC5C,KAAA,EAAO;AAAA,IACL,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,OAAA;AAAA,IAC1B,QAAA,EAAU,MAAA;AAAA,IACV,YAAA,EAAc,MAAA;AAAA,IACd,UAAA,EAAY;AAAA;AAEhB,CAAA,CAAE,CAAA;AAEK,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAA,EAAkB,GAAI,UAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,MAAA,KAA0B;AAChD,IAAA,iBAAA,CAAkB,MAAwB,CAAA;AAAA,EAC5C,CAAA;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,aAAA,GAAgB,MAAA,CAAO,OAAA,CAAQ,cAAc,CAAA,CAChD,IAAA,CAAK,CAAC,CAAC,IAAI,CAAA,EAAG,CAAC,IAAI,CAAA,KAAM;AACxB,IAAA,IAAI,SAAS,IAAA,EAAM;AACjB,MAAA,OAAO,CAAA;AAAA,IACT,CAAA,MAAA,IAAW,OAAO,IAAA,EAAM;AACtB,MAAA,OAAO,EAAA;AAAA,IACT;AACA,IAAA,OAAO,CAAA;AAAA,EACT,CAAC,CAAA,CACA,GAAA,CAAI,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,MAAO;AAAA,IACtB,KAAA,EAAO,GAAA;AAAA,IACP,KAAA,EAAO,EAAE,CAAA,kBAAA,EAAqB,GAAG,IAAW,EAAE,YAAA,EAAc,OAAO;AAAA,GACrE,CAAE,CAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAW,SAAA,EAAW,OAAA,CAAQ,KAAA,EAC5B,QAAA,EAAA,CAAA,CAAE,sBAAsB,CAAA,EAC3B,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,cAAA;AAAA,QACV,KAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO,aAAA;AAAA,QACP,QAAA,EAAU,cAAA;AAAA,QACV,MAAA,EAAO;AAAA;AAAA;AACT,GAAA,EACF,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 Typography from '@mui/material/Typography';\n\nimport './StatusSelector.css';\n\nimport { ComputedStatus } from '@backstage-community/plugin-tekton-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst labelSx = {\n  color: 'text.primary',\n  fontSize: '1rem',\n  paddingRight: '10px',\n  fontWeight: 'bold',\n};\n\nexport const StatusSelector = () => {\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  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: t(`pipelineRunStatus.${key}` as any, { defaultValue: value }),\n    }));\n\n  return (\n    <div className=\"bs-tkn-status-selector\">\n      <Typography sx={labelSx}>{t('statusSelector.label')}</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,OAAA,GAAU;AAAA,EACd,KAAA,EAAO,cAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,YAAA,EAAc,MAAA;AAAA,EACd,UAAA,EAAY;AACd,CAAA;AAEO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAA,EAAkB,GAAI,UAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,cAAA,GAAiB,CAAC,MAAA,KAA0B;AAChD,IAAA,iBAAA,CAAkB,MAAwB,CAAA;AAAA,EAC5C,CAAA;AACA,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,aAAA,GAAgB,MAAA,CAAO,OAAA,CAAQ,cAAc,CAAA,CAChD,IAAA,CAAK,CAAC,CAAC,IAAI,CAAA,EAAG,CAAC,IAAI,CAAA,KAAM;AACxB,IAAA,IAAI,SAAS,IAAA,EAAM;AACjB,MAAA,OAAO,CAAA;AAAA,IACT,CAAA,MAAA,IAAW,OAAO,IAAA,EAAM;AACtB,MAAA,OAAO,EAAA;AAAA,IACT;AACA,IAAA,OAAO,CAAA;AAAA,EACT,CAAC,CAAA,CACA,GAAA,CAAI,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,MAAO;AAAA,IACtB,KAAA,EAAO,GAAA;AAAA,IACP,KAAA,EAAO,EAAE,CAAA,kBAAA,EAAqB,GAAG,IAAW,EAAE,YAAA,EAAc,OAAO;AAAA,GACrE,CAAE,CAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,CAAA,CAAE,sBAAsB,CAAA,EAAE,CAAA;AAAA,oBACpD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,cAAA;AAAA,QACV,KAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO,aAAA;AAAA,QACP,QAAA,EAAU,cAAA;AAAA,QACV,MAAA,EAAO;AAAA;AAAA;AACT,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,36 +1,28 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { Tooltip, IconButton, makeStyles } from '@material-ui/core';
-import Collapse from '@material-ui/icons/UnfoldLess';
-import Expand from '@material-ui/icons/UnfoldMore';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Collapse from '@mui/icons-material/UnfoldLess';
+import Expand from '@mui/icons-material/UnfoldMore';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles({
-  expandCollapse: {
-    flexGrow: 1,
-    textAlign: "end"
-  },
-  iconButton: {
-    padding: "2px"
-  }
-});
 const TableExpandCollapse = () => {
-  const classes = useStyles();
   const { isExpanded, setIsExpanded } = useContext(TektonResourcesContext);
   const { t } = useTranslationRef(tektonTranslationRef);
   const handleExpandCollaspse = () => {
     setIsExpanded(!isExpanded);
   };
-  return /* @__PURE__ */ jsxs("div", { className: classes.expandCollapse, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, textAlign: "end" }, 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,
+        sx: { padding: "2px" },
         children: /* @__PURE__ */ jsx(Collapse, {})
       }
     ) }) }),
@@ -39,7 +31,7 @@ const TableExpandCollapse = () => {
       {
         onClick: () => handleExpandCollaspse(),
         disabled: isExpanded,
-        className: classes.iconButton,
+        sx: { padding: "2px" },
         children: /* @__PURE__ */ jsx(Expand, {})
       }
     ) }) })

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 { 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 '../../translations/index.ts';\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,UAAA,CAAW;AAAA,EAC3B,cAAA,EAAgB;AAAA,IACd,QAAA,EAAU,CAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAAA,EACA,UAAA,EAAY;AAAA,IACV,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,WAAW,sBAAsB,CAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,EAC3B,CAAA;AACA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAO,CAAA,CAAE,iCAAiC,GAAG,SAAA,EAAU,KAAA,EAC9D,8BAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAA,EAAsB;AAAA,QACrC,UAAU,CAAC,UAAA;AAAA,QACX,WAAW,OAAA,CAAQ,UAAA;AAAA,QAEnB,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,OAEd,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,CAAE,+BAA+B,CAAA,EAAG,SAAA,EAAU,KAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAA,EAAsB;AAAA,QACrC,QAAA,EAAU,UAAA;AAAA,QACV,WAAW,OAAA,CAAQ,UAAA;AAAA,QAEnB,8BAAC,MAAA,EAAA,EAAO;AAAA;AAAA,OAEZ,CAAA,EACF;AAAA,GAAA,EACF,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 Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Collapse from '@mui/icons-material/UnfoldLess';\nimport Expand from '@mui/icons-material/UnfoldMore';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nexport const TableExpandCollapse = () => {\n  const { isExpanded, setIsExpanded } = useContext(TektonResourcesContext);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const handleExpandCollaspse = () => {\n    setIsExpanded(!isExpanded);\n  };\n  return (\n    <Box sx={{ flexGrow: 1, textAlign: 'end' }}>\n      <Tooltip title={t('tableExpandCollapse.collapseAll')} placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={!isExpanded}\n            sx={{ padding: '2px' }}\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            sx={{ padding: '2px' }}\n          >\n            <Expand />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BO,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,WAAW,sBAAsB,CAAA;AACvE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,EAC3B,CAAA;AACA,EAAA,uBACE,IAAA,CAAC,OAAI,EAAA,EAAI,EAAE,UAAU,CAAA,EAAG,SAAA,EAAW,OAAM,EACvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAO,CAAA,CAAE,iCAAiC,GAAG,SAAA,EAAU,KAAA,EAC9D,8BAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAA,EAAsB;AAAA,QACrC,UAAU,CAAC,UAAA;AAAA,QACX,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,QAErB,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,OAEd,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,WAAQ,KAAA,EAAO,CAAA,CAAE,+BAA+B,CAAA,EAAG,SAAA,EAAU,KAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,qBAAA,EAAsB;AAAA,QACrC,QAAA,EAAU,UAAA;AAAA,QACV,EAAA,EAAI,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,QAErB,8BAAC,MAAA,EAAA,EAAO;AAAA;AAAA,OAEZ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineTaskNode.esm.js","sources":["../../../src/components/pipeline-topology/PipelineTaskNode.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 type { LegacyRef } from 'react';\n\nimport { useState, useContext, useRef, useMemo, memo } from 'react';\n\nimport { Tooltip } from '@patternfly/react-core';\nimport {\n  DEFAULT_LAYER,\n  DEFAULT_WHEN_OFFSET,\n  GraphElement,\n  Layer,\n  Node,\n  RunStatus,\n  ScaleDetailsLevel,\n  TaskNode,\n  TOP_LAYER,\n  useDetailsLevel,\n  useHover,\n  WhenDecorator,\n  WithContextMenuProps,\n  WithSelectionProps,\n} from '@patternfly/react-topology';\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { observer } from 'mobx-react';\n\nimport {\n  PipelineTaskWithStatus,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { NodeType } from '../../consts/pipeline-topology-const';\nimport {\n  TEKTON_PIPELINE_RUN,\n  TEKTON_PIPELINE_TASK,\n} from '../../consts/tekton-const';\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { StepStatus } from '../../types/taskRun';\nimport { TektonResourcesContextData } from '../../types/types';\nimport { createStepStatus } from '../../utils/pipeline-step-utils';\nimport { getTaskStatus } from '../../utils/pipelineRun-utils';\nimport PipelineRunLogDialog from '../PipelineRunLogs/PipelineRunLogDialog';\nimport { PipelineVisualizationStepList } from './PipelineVisualizationStepList';\n\nimport './PipelineTaskNode.css';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineTaskNodeProps = {\n  element: Node;\n} & WithContextMenuProps &\n  WithSelectionProps &\n  GraphElement;\n\nconst PipelineTaskNode = ({\n  element,\n  onContextMenu,\n  contextMenuOpen,\n  ...rest\n}: PipelineTaskNodeProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const { watchResourcesData } = useContext<TektonResourcesContextData>(\n    TektonResourcesContext,\n  );\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const data = element.getData();\n  const triggerRef = useRef<SVGGElement | null>(null);\n\n  const pipelineRun = data.pipelineRun;\n  const [hover, hoverRef] = useHover();\n  const detailsLevel = useDetailsLevel();\n  const isFinallyTask = element.getType() === NodeType.FINALLY_NODE;\n\n  const pods = watchResourcesData?.pods?.data || [];\n  const taskRuns = watchResourcesData?.taskruns?.data || [];\n  const openDialog = () => {\n    setOpen(true);\n  };\n\n  const closeDialog = () => {\n    setOpen(false);\n  };\n\n  const computedTask: PipelineTaskWithStatus = data.task;\n  const stepList =\n    computedTask?.status?.steps || computedTask?.taskSpec?.steps || [];\n\n  const taskStatus = getTaskStatus(data.pipelineRun, data.task);\n\n  const stepStatusList: StepStatus[] = stepList.map((step: { name: string }) =>\n    createStepStatus(step, taskStatus, t),\n  );\n  const succeededStepsCount = stepStatusList.filter(\n    ({ status }) => status === RunStatus.Succeeded,\n  ).length;\n\n  const badge =\n    stepStatusList.length > 0 && data.status\n      ? `${succeededStepsCount}/${stepStatusList.length}`\n      : null;\n\n  const passedData = useMemo(() => {\n    const newData = { ...data };\n    Object.keys(newData).forEach(key => {\n      if (newData[key] === undefined) {\n        delete newData[key];\n      }\n    });\n    return newData;\n  }, [data]);\n\n  const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);\n  const whenDecorator = data.whenStatus ? (\n    <WhenDecorator\n      element={element}\n      status={data.whenStatus}\n      leftOffset={\n        hasTaskIcon\n          ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75\n          : DEFAULT_WHEN_OFFSET\n      }\n    />\n  ) : null;\n  const activeTaskId = taskRuns.find(\n    (tr: TaskRunKind) =>\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_RUN] ===\n        pipelineRun?.metadata?.name &&\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_TASK] === data.task?.name,\n  )?.metadata?.name;\n\n  const taskNode = (\n    <>\n      <PipelineRunLogDialog\n        pipelineRun={pipelineRun}\n        open={open}\n        closeDialog={closeDialog}\n        pods={pods}\n        taskRuns={taskRuns}\n        activeTask={activeTaskId}\n      />\n      <TaskNode\n        className=\"bs-tkn-pipeline-task-node\"\n        element={element}\n        onContextMenu={data.showContextMenu ? onContextMenu : undefined}\n        contextMenuOpen={contextMenuOpen}\n        scaleNode={\n          (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high\n        }\n        hideDetailsAtMedium\n        {...passedData}\n        {...rest}\n        badge={badge}\n        truncateLength={element.getData()?.label?.length}\n        onSelect={activeTaskId && openDialog}\n      >\n        {whenDecorator}\n      </TaskNode>\n    </>\n  );\n\n  return (\n    <Layer\n      id={\n        detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen)\n          ? TOP_LAYER\n          : DEFAULT_LAYER\n      }\n    >\n      <g\n        data-test={`task ${element.getLabel()}`}\n        className=\"bs-tkn-pipeline-task-node\"\n        ref={hoverRef as LegacyRef<SVGGElement>}\n      >\n        <Tooltip\n          position=\"bottom\"\n          enableFlip={false}\n          content={\n            <PipelineVisualizationStepList\n              isSpecOverview={!data.status}\n              taskName={element.getLabel()}\n              steps={stepStatusList}\n              isFinallyTask={isFinallyTask}\n            />\n          }\n          triggerRef={triggerRef}\n        >\n          <g ref={triggerRef}>{taskNode}</g>\n        </Tooltip>\n      </g>\n    </Layer>\n  );\n};\n\nexport default memo(observer(PipelineTaskNode));\n"],"names":["PipelineTaskNode"],"mappings":"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"}
+{"version":3,"file":"PipelineTaskNode.esm.js","sources":["../../../src/components/pipeline-topology/PipelineTaskNode.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 type { LegacyRef } from 'react';\n\nimport { useState, useContext, useRef, useMemo, memo } from 'react';\n\nimport { Tooltip } from '@patternfly/react-core';\nimport {\n  DEFAULT_LAYER,\n  DEFAULT_WHEN_OFFSET,\n  GraphElement,\n  Layer,\n  Node,\n  RunStatus,\n  ScaleDetailsLevel,\n  TaskNode,\n  TOP_LAYER,\n  useDetailsLevel,\n  useHover,\n  WhenDecorator,\n  WithContextMenuProps,\n  WithSelectionProps,\n} from '@patternfly/react-topology';\nimport { observer } from 'mobx-react';\n\nimport {\n  PipelineTaskWithStatus,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { NodeType } from '../../consts/pipeline-topology-const';\nimport {\n  TEKTON_PIPELINE_RUN,\n  TEKTON_PIPELINE_TASK,\n} from '../../consts/tekton-const';\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { StepStatus } from '../../types/taskRun';\nimport { TektonResourcesContextData } from '../../types/types';\nimport { createStepStatus } from '../../utils/pipeline-step-utils';\nimport { getTaskStatus } from '../../utils/pipelineRun-utils';\nimport PipelineRunLogDialog from '../PipelineRunLogs/PipelineRunLogDialog';\nimport { PipelineVisualizationStepList } from './PipelineVisualizationStepList';\n\nimport './PipelineTaskNode.css';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineTaskNodeProps = {\n  element: Node;\n} & WithContextMenuProps &\n  WithSelectionProps &\n  GraphElement;\n\nconst PipelineTaskNode = ({\n  element,\n  onContextMenu,\n  contextMenuOpen,\n  ...rest\n}: PipelineTaskNodeProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n  const { watchResourcesData } = useContext<TektonResourcesContextData>(\n    TektonResourcesContext,\n  );\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const data = element.getData();\n  const triggerRef = useRef<SVGGElement | null>(null);\n\n  const pipelineRun = data.pipelineRun;\n  const [hover, hoverRef] = useHover();\n  const detailsLevel = useDetailsLevel();\n  const isFinallyTask = element.getType() === NodeType.FINALLY_NODE;\n\n  const pods = watchResourcesData?.pods?.data || [];\n  const taskRuns = watchResourcesData?.taskruns?.data || [];\n  const openDialog = () => {\n    setOpen(true);\n  };\n\n  const closeDialog = () => {\n    setOpen(false);\n  };\n\n  const computedTask: PipelineTaskWithStatus = data.task;\n  const stepList =\n    computedTask?.status?.steps || computedTask?.taskSpec?.steps || [];\n\n  const taskStatus = getTaskStatus(data.pipelineRun, data.task);\n\n  const stepStatusList: StepStatus[] = stepList.map((step: { name: string }) =>\n    createStepStatus(step, taskStatus, t),\n  );\n  const succeededStepsCount = stepStatusList.filter(\n    ({ status }) => status === RunStatus.Succeeded,\n  ).length;\n\n  const badge =\n    stepStatusList.length > 0 && data.status\n      ? `${succeededStepsCount}/${stepStatusList.length}`\n      : null;\n\n  const passedData = useMemo(() => {\n    const newData = { ...data };\n    Object.keys(newData).forEach(key => {\n      if (newData[key] === undefined) {\n        delete newData[key];\n      }\n    });\n    return newData;\n  }, [data]);\n\n  const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);\n  const whenDecorator = data.whenStatus ? (\n    <WhenDecorator\n      element={element}\n      status={data.whenStatus}\n      leftOffset={\n        hasTaskIcon\n          ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75\n          : DEFAULT_WHEN_OFFSET\n      }\n    />\n  ) : null;\n  const activeTaskId = taskRuns.find(\n    (tr: TaskRunKind) =>\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_RUN] ===\n        pipelineRun?.metadata?.name &&\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_TASK] === data.task?.name,\n  )?.metadata?.name;\n\n  const taskNode = (\n    <>\n      <PipelineRunLogDialog\n        pipelineRun={pipelineRun}\n        open={open}\n        closeDialog={closeDialog}\n        pods={pods}\n        taskRuns={taskRuns}\n        activeTask={activeTaskId}\n      />\n      <TaskNode\n        className=\"bs-tkn-pipeline-task-node\"\n        element={element}\n        onContextMenu={data.showContextMenu ? onContextMenu : undefined}\n        contextMenuOpen={contextMenuOpen}\n        scaleNode={\n          (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high\n        }\n        hideDetailsAtMedium\n        {...passedData}\n        {...rest}\n        badge={badge}\n        truncateLength={element.getData()?.label?.length}\n        onSelect={activeTaskId && openDialog}\n      >\n        {whenDecorator}\n      </TaskNode>\n    </>\n  );\n\n  return (\n    <Layer\n      id={\n        detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen)\n          ? TOP_LAYER\n          : DEFAULT_LAYER\n      }\n    >\n      <g\n        data-test={`task ${element.getLabel()}`}\n        className=\"bs-tkn-pipeline-task-node\"\n        ref={hoverRef as LegacyRef<SVGGElement>}\n      >\n        <Tooltip\n          position=\"bottom\"\n          enableFlip={false}\n          content={\n            <PipelineVisualizationStepList\n              isSpecOverview={!data.status}\n              taskName={element.getLabel()}\n              steps={stepStatusList}\n              isFinallyTask={isFinallyTask}\n            />\n          }\n          triggerRef={triggerRef}\n        >\n          <g ref={triggerRef}>{taskNode}</g>\n        </Tooltip>\n      </g>\n    </Layer>\n  );\n};\n\nexport default memo(observer(PipelineTaskNode));\n"],"names":["PipelineTaskNode"],"mappings":"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"}

package/dist/components/pipeline-topology/PipelineVisualization.css.esm.js

@@ -1,5 +1,5 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = ".bs-tkn-pipeline-visualization__label {\n  align-items: baseline;\n  padding-bottom: var(--pf-t--global--spacer--xs);\n}\n\n.bs-tkn-pipeline-visualization__label .badge {\n  font-size: 17px;\n  line-height: 20px;\n  margin-right: 4px;\n  min-width: 24px;\n  padding: 0 7px;\n  border-radius: 20px;\n  color: var(--pf-t--color--white);\n  display: inline-block;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-content {\n  border-radius: 20px;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-visualization-surface {\n  font-size: 1rem;\n  border-radius: 1rem;\n}\n";
+var css_248z = ".bs-tkn-pipeline-visualization__label {\n  align-items: center;\n  padding-bottom: var(--pf-t--global--spacer--xs);\n}\n\n.bs-tkn-pipeline-visualization__label .badge {\n  font-size: 14px;\n  line-height: 16px;\n  margin-right: 4px;\n  min-width: 20px;\n  padding: 0 5px;\n  border-radius: 20px;\n  color: var(--pf-t--color--white);\n  display: inline-block;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-content {\n  border-radius: 20px;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-visualization-surface {\n  font-size: 1rem;\n  border-radius: 1rem;\n}\n";
 styleInject(css_248z);
 //# sourceMappingURL=PipelineVisualization.css.esm.js.map

package/dist/components/pipeline-topology/PipelineVisualizationStepList.css.esm.js

@@ -1,5 +1,5 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = ".bs-tkn-pipeline-visualization-step-list {\n  min-width: 10em;\n}\n\n.bs-tkn-pipeline-visualization-step-list__task-name {\n  font-weight: var(--pf-t--global--font--weight--heading);\n  line-height: var(--pf-t--global--spacer--lg);\n  max-height: var(--pf-t--global--spacer--2xl);\n  max-width: 15em;\n  margin: 0 auto 10px auto;\n\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n}\n\n.bs-tkn-pipeline-visualization-step-list__task-type {\n  line-height: var(--pf-t--global--spacer--xs);\n  max-height: var(--pf-t--global--spacer--2xl);\n  margin: 0 auto 10px auto;\n}\n\n.bs-tkn-pipeline-visualization-step-list__step {\n  display: flex;\n  margin-bottom: var(--pf-t--global--spacer--xs);\n}\n\n.bs-tkn-pipeline-visualization-step-list__step--task-run {\n  margin-bottom: var(--pf-t--global--spacer--sm);\n}\n\n.bs-tkn-pipeline-visualization-step-list__step:last-child {\n  margin-bottom: 0;\n}\n\n.bs-tkn-pipeline-visualization-step-list__bullet {\n  font-size: 1rem;\n}\n\n.bs-tkn-pipeline-visualization-step-list__icon {\n  flex: 0 0 18px;\n}\n\n.bs-tkn-pipeline-visualization-step-list__icon-backdrop {\n  fill: var(--pf-t--color--white);\n}\n\n.bs-tkn-pipeline-visualization-step-list__name {\n  flex: 1 1 auto;\n  overflow: hidden;\n  padding-left: var(--pf-t--global--spacer--sm);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.bs-tkn-pipeline-visualization-step-list__name.is-main-focus {\n  padding: 0 var(--pf-t--global--spacer--sm);\n  text-align: center;\n}\n\n.bs-tkn-pipeline-visualization-step-list__duration {\n  flex: 0 0 auto;\n  padding-left: var(--pf-t--global--spacer--sm);\n  text-align: right;\n}\n";
+var css_248z = ".bs-tkn-pipeline-visualization-step-list {\n  min-width: 10em;\n}\n\n.bs-tkn-pipeline-visualization-step-list__task-name {\n  font-weight: var(--pf-t--global--font--weight--heading);\n  line-height: var(--pf-t--global--spacer--lg);\n  max-height: var(--pf-t--global--spacer--2xl);\n  max-width: 15em;\n  margin: 0 auto 10px auto;\n\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n}\n\n.bs-tkn-pipeline-visualization-step-list__task-type {\n  line-height: var(--pf-t--global--spacer--xs);\n  max-height: var(--pf-t--global--spacer--2xl);\n  margin: 0 auto 10px auto;\n}\n\n.bs-tkn-pipeline-visualization-step-list__step {\n  align-items: center;\n  display: flex;\n  margin-bottom: var(--pf-t--global--spacer--xs);\n}\n\n.bs-tkn-pipeline-visualization-step-list__step--task-run {\n  align-items: center;\n  display: grid;\n  gap: 0.5rem;\n  grid-template-columns: 1rem 1fr auto;\n  margin-bottom: var(--pf-t--global--spacer--sm);\n}\n\n.bs-tkn-pipeline-visualization-step-list__step--task-run\n  .bs-tkn-pipeline-visualization-step-list__name,\n.bs-tkn-pipeline-visualization-step-list__step--task-run\n  .bs-tkn-pipeline-visualization-step-list__duration {\n  line-height: 1rem;\n  padding-left: 0;\n}\n\n.bs-tkn-pipeline-visualization-step-list__step:last-child {\n  margin-bottom: 0;\n}\n\n.bs-tkn-pipeline-visualization-step-list__bullet {\n  font-size: 1rem;\n}\n\n.bs-tkn-pipeline-visualization-step-list__icon {\n  align-items: center;\n  display: flex;\n  height: 1rem;\n  justify-content: center;\n  width: 1rem;\n}\n\n.bs-tkn-pipeline-visualization-step-list__icon-backdrop {\n  fill: var(--pf-t--color--white);\n}\n\n.bs-tkn-pipeline-visualization-step-list__name {\n  flex: 1 1 auto;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  padding-left: var(--pf-t--global--spacer--sm);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.bs-tkn-pipeline-visualization-step-list__name.is-main-focus {\n  padding: 0 var(--pf-t--global--spacer--sm);\n  text-align: center;\n}\n\n.bs-tkn-pipeline-visualization-step-list__duration {\n  flex: 0 0 auto;\n  line-height: 1rem;\n  padding-left: var(--pf-t--global--spacer--sm);\n  text-align: right;\n  white-space: nowrap;\n}\n";
 styleInject(css_248z);
 //# sourceMappingURL=PipelineVisualizationStepList.css.esm.js.map

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

@@ -1,16 +1,113 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import AutorenewOutlined from '@mui/icons-material/AutorenewOutlined';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import ErrorOutline from '@mui/icons-material/ErrorOutline';
+import HourglassEmptyOutlined from '@mui/icons-material/HourglassEmptyOutlined';
+import KeyboardDoubleArrowRight from '@mui/icons-material/KeyboardDoubleArrowRight';
+import NotInterestedOutlined from '@mui/icons-material/NotInterestedOutlined';
+import ReportProblemOutlined from '@mui/icons-material/ReportProblemOutlined';
 import classNames from 'classnames';
-import { Status } from '../common/Status.esm.js';
 import './PipelineVisualizationStepList.css.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
+const tooltipStatusIconSx = {
+  display: "block",
+  fontSize: "1rem",
+  height: "1rem",
+  width: "1rem"
+};
 const TooltipColoredStatusIcon = ({
   status
 }) => {
-  const icon = /* @__PURE__ */ jsx(Status, { status, iconOnly: true });
-  return icon;
+  const theme = useTheme();
+  const statusLabel = String(status);
+  switch (statusLabel) {
+    case "Succeeded":
+    case "Completed":
+    case "Synced":
+      return /* @__PURE__ */ jsx(
+        CheckCircleOutline,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.ok }
+        }
+      );
+    case "Failed":
+    case "Failure":
+    case "Error":
+    case "ImagePullBackOff":
+    case "CrashLoopBackOff":
+    case "ErrImagePull":
+      return /* @__PURE__ */ jsx(
+        ErrorOutline,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.error }
+        }
+      );
+    case "Warning":
+    case "RequiresApproval":
+      return /* @__PURE__ */ jsx(
+        ReportProblemOutlined,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.warning }
+        }
+      );
+    case "In Progress":
+    case "Progress":
+    case "Progressing":
+    case "Running":
+    case "Installing":
+    case "Updating":
+      return /* @__PURE__ */ jsx(
+        AutorenewOutlined,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.running }
+        }
+      );
+    case "Pending":
+    case "New":
+    case "Idle":
+    case "PipelineNotStarted":
+      return /* @__PURE__ */ jsx(
+        HourglassEmptyOutlined,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.pending }
+        }
+      );
+    case "Cancelled":
+    case "Cancelling":
+    case "Deleting":
+    case "Terminating":
+    case "Uninstalling":
+      return /* @__PURE__ */ jsx(
+        NotInterestedOutlined,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.status.aborted }
+        }
+      );
+    case "Skipped":
+      return /* @__PURE__ */ jsx(
+        KeyboardDoubleArrowRight,
+        {
+          sx: { ...tooltipStatusIconSx, color: theme.palette.text.secondary }
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: {
+            ...tooltipStatusIconSx,
+            borderRadius: "50%",
+            backgroundColor: theme.palette.status.aborted
+          }
+        }
+      );
+  }
 };
 const PipelineVisualizationStepList = ({
   isSpecOverview,

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineVisualizationStepList.esm.js","sources":["../../../src/components/pipeline-topology/PipelineVisualizationStepList.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 { RunStatus } from '@patternfly/react-topology';\nimport classNames from 'classnames';\n\nimport { Status } from '../common/Status';\nimport { StepStatus } from '../../types/taskRun';\n\nimport './PipelineVisualizationStepList.css';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nexport type PipelineVisualizationStepListProps = {\n  isSpecOverview: boolean;\n  taskName: string;\n  steps: StepStatus[];\n  isFinallyTask?: boolean;\n  hideHeader?: boolean;\n};\n\ntype TooltipColoredStatusIconProps = {\n  status: RunStatus;\n};\n\nconst TooltipColoredStatusIcon = ({\n  status,\n}: TooltipColoredStatusIconProps) => {\n  const icon = <Status status={status} iconOnly />;\n  return icon;\n};\n\nexport const PipelineVisualizationStepList = ({\n  isSpecOverview,\n  taskName,\n  steps,\n  isFinallyTask,\n  hideHeader,\n}: PipelineVisualizationStepListProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n  return (\n    <div className=\"bs-tkn-pipeline-visualization-step-list\">\n      {!hideHeader && (\n        <div className=\"bs-tkn-pipeline-visualization-step-list__task-name\">\n          {taskName}\n        </div>\n      )}\n      {isFinallyTask && (\n        <div className=\"bs-tkn-pipeline-visualization-step-list__task-type\">\n          {t('pipelineVisualization.stepList.finallyTaskTitle')}\n        </div>\n      )}\n      {steps?.map(({ duration, name, status }) => {\n        return (\n          <div\n            className={classNames(\n              'bs-tkn-pipeline-visualization-step-list__step',\n              {\n                'bs-tkn-pipeline-visualization-step-list__step--task-run':\n                  !isSpecOverview,\n              },\n            )}\n            key={name}\n          >\n            {!isSpecOverview ? (\n              <div className=\"bs-tkn-pipeline-visualization-step-list__icon\">\n                <TooltipColoredStatusIcon status={status} />\n              </div>\n            ) : (\n              <span className=\"bs-tkn-pipeline-visualization-step-list__bullet\">\n                &bull;\n              </span>\n            )}\n            <div className=\"bs-tkn-pipeline-visualization-step-list__name\">\n              {name}\n            </div>\n            {!isSpecOverview && (\n              <div className=\"bs-tkn-pipeline-visualization-step-list__duration\">\n                {duration}\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAqCA,MAAM,2BAA2B,CAAC;AAAA,EAChC;AACF,CAAA,KAAqC;AACnC,EAAA,MAAM,IAAA,mBAAO,GAAA,CAAC,MAAA,EAAA,EAAO,MAAA,EAAgB,UAAQ,IAAA,EAAC,CAAA;AAC9C,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,MAAM,gCAAgC,CAAC;AAAA,EAC5C,cAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KAA0C;AACxC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACZ,QAAA,EAAA;AAAA,IAAA,CAAC,UAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sDACZ,QAAA,EAAA,QAAA,EACH,CAAA;AAAA,IAED,iCACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACZ,QAAA,EAAA,CAAA,CAAE,iDAAiD,CAAA,EACtD,CAAA;AAAA,IAED,OAAO,GAAA,CAAI,CAAC,EAAE,QAAA,EAAU,IAAA,EAAM,QAAO,KAAM;AAC1C,MAAA,uBACE,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,UAAA;AAAA,YACT,+CAAA;AAAA,YACA;AAAA,cACE,2DACE,CAAC;AAAA;AACL,WACF;AAAA,UAGC,QAAA,EAAA;AAAA,YAAA,CAAC,cAAA,mBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iDACb,QAAA,kBAAA,GAAA,CAAC,wBAAA,EAAA,EAAyB,MAAA,EAAgB,CAAA,EAC5C,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAkD,QAAA,EAAA,QAAA,EAElE,CAAA;AAAA,4BAEF,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACZ,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,YACC,CAAC,cAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDACZ,QAAA,EAAA,QAAA,EACH;AAAA;AAAA,SAAA;AAAA,QAjBG;AAAA,OAmBP;AAAA,IAEJ,CAAC;AAAA,GAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PipelineVisualizationStepList.esm.js","sources":["../../../src/components/pipeline-topology/PipelineVisualizationStepList.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 { RunStatus } from '@patternfly/react-topology';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport AutorenewOutlined from '@mui/icons-material/AutorenewOutlined';\nimport CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';\nimport ErrorOutline from '@mui/icons-material/ErrorOutline';\nimport HourglassEmptyOutlined from '@mui/icons-material/HourglassEmptyOutlined';\nimport KeyboardDoubleArrowRight from '@mui/icons-material/KeyboardDoubleArrowRight';\nimport NotInterestedOutlined from '@mui/icons-material/NotInterestedOutlined';\nimport ReportProblemOutlined from '@mui/icons-material/ReportProblemOutlined';\nimport classNames from 'classnames';\n\nimport { StepStatus } from '../../types/taskRun';\n\nimport './PipelineVisualizationStepList.css';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nexport type PipelineVisualizationStepListProps = {\n  isSpecOverview: boolean;\n  taskName: string;\n  steps: StepStatus[];\n  isFinallyTask?: boolean;\n  hideHeader?: boolean;\n};\n\ntype TooltipColoredStatusIconProps = {\n  status: RunStatus;\n};\n\nconst tooltipStatusIconSx = {\n  display: 'block',\n  fontSize: '1rem',\n  height: '1rem',\n  width: '1rem',\n};\n\nconst TooltipColoredStatusIcon = ({\n  status,\n}: TooltipColoredStatusIconProps) => {\n  const theme = useTheme();\n  const statusLabel = String(status);\n\n  switch (statusLabel) {\n    case 'Succeeded':\n    case 'Completed':\n    case 'Synced':\n      return (\n        <CheckCircleOutline\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.ok }}\n        />\n      );\n    case 'Failed':\n    case 'Failure':\n    case 'Error':\n    case 'ImagePullBackOff':\n    case 'CrashLoopBackOff':\n    case 'ErrImagePull':\n      return (\n        <ErrorOutline\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.error }}\n        />\n      );\n    case 'Warning':\n    case 'RequiresApproval':\n      return (\n        <ReportProblemOutlined\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.warning }}\n        />\n      );\n    case 'In Progress':\n    case 'Progress':\n    case 'Progressing':\n    case 'Running':\n    case 'Installing':\n    case 'Updating':\n      return (\n        <AutorenewOutlined\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.running }}\n        />\n      );\n    case 'Pending':\n    case 'New':\n    case 'Idle':\n    case 'PipelineNotStarted':\n      return (\n        <HourglassEmptyOutlined\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.pending }}\n        />\n      );\n    case 'Cancelled':\n    case 'Cancelling':\n    case 'Deleting':\n    case 'Terminating':\n    case 'Uninstalling':\n      return (\n        <NotInterestedOutlined\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.status.aborted }}\n        />\n      );\n    case 'Skipped':\n      return (\n        <KeyboardDoubleArrowRight\n          sx={{ ...tooltipStatusIconSx, color: theme.palette.text.secondary }}\n        />\n      );\n    default:\n      return (\n        <Box\n          component=\"span\"\n          sx={{\n            ...tooltipStatusIconSx,\n            borderRadius: '50%',\n            backgroundColor: theme.palette.status.aborted,\n          }}\n        />\n      );\n  }\n};\n\nexport const PipelineVisualizationStepList = ({\n  isSpecOverview,\n  taskName,\n  steps,\n  isFinallyTask,\n  hideHeader,\n}: PipelineVisualizationStepListProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n  return (\n    <div className=\"bs-tkn-pipeline-visualization-step-list\">\n      {!hideHeader && (\n        <div className=\"bs-tkn-pipeline-visualization-step-list__task-name\">\n          {taskName}\n        </div>\n      )}\n      {isFinallyTask && (\n        <div className=\"bs-tkn-pipeline-visualization-step-list__task-type\">\n          {t('pipelineVisualization.stepList.finallyTaskTitle')}\n        </div>\n      )}\n      {steps?.map(({ duration, name, status }) => {\n        return (\n          <div\n            className={classNames(\n              'bs-tkn-pipeline-visualization-step-list__step',\n              {\n                'bs-tkn-pipeline-visualization-step-list__step--task-run':\n                  !isSpecOverview,\n              },\n            )}\n            key={name}\n          >\n            {!isSpecOverview ? (\n              <div className=\"bs-tkn-pipeline-visualization-step-list__icon\">\n                <TooltipColoredStatusIcon status={status} />\n              </div>\n            ) : (\n              <span className=\"bs-tkn-pipeline-visualization-step-list__bullet\">\n                &bull;\n              </span>\n            )}\n            <div className=\"bs-tkn-pipeline-visualization-step-list__name\">\n              {name}\n            </div>\n            {!isSpecOverview && (\n              <div className=\"bs-tkn-pipeline-visualization-step-list__duration\">\n                {duration}\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskGroupEdge.esm.js","sources":["../../../src/components/pipeline-topology/TaskGroupEdge.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 { Edge, TaskEdge } from '@patternfly/react-topology';\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { observer } from 'mobx-react';\n\nimport { GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL } from '../../consts/pipeline-topology-const';\n\ninterface TaskEdgeProps {\n  element: Edge;\n}\n\nconst TaskGroupEdge = (props: TaskEdgeProps) => (\n  <TaskEdge\n    nodeSeparation={GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL}\n    {...props}\n  />\n);\n\nexport default observer(TaskGroupEdge);\n"],"names":["TaskGroupEdge"],"mappings":";;;;;AAyBA,MAAMA,eAAA,GAAgB,CAAC,KAAA,qBACrB,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,cAAA,EAAgB,2CAAA;AAAA,IACf,GAAG;AAAA;AACN,CAAA;AAGF,oBAAe,SAASA,eAAa,CAAA;;;;"}
+{"version":3,"file":"TaskGroupEdge.esm.js","sources":["../../../src/components/pipeline-topology/TaskGroupEdge.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 { Edge, TaskEdge } from '@patternfly/react-topology';\nimport { observer } from 'mobx-react';\n\nimport { GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL } from '../../consts/pipeline-topology-const';\n\ninterface TaskEdgeProps {\n  element: Edge;\n}\n\nconst TaskGroupEdge = (props: TaskEdgeProps) => (\n  <TaskEdge\n    nodeSeparation={GROUPED_PIPELINE_NODE_SEPARATION_HORIZONTAL}\n    {...props}\n  />\n);\n\nexport default observer(TaskGroupEdge);\n"],"names":["TaskGroupEdge"],"mappings":";;;;;AAwBA,MAAMA,eAAA,GAAgB,CAAC,KAAA,qBACrB,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,cAAA,EAAgB,2CAAA;AAAA,IACf,GAAG;AAAA;AACN,CAAA;AAGF,oBAAe,SAASA,eAAa,CAAA;;;;"}

package/dist/hooks/useDarkTheme.esm.js

@@ -1,20 +1,20 @@
 import { useEffect } from 'react';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
 
 const THEME_DARK = "dark";
 const THEME_DARK_CLASS = "pf-v6-theme-dark";
 const useDarkTheme = () => {
   const {
-    palette: { type }
+    palette: { mode }
   } = useTheme();
   useEffect(() => {
     const htmlTagElement = document.documentElement;
-    if (type === THEME_DARK) {
+    if (mode === THEME_DARK) {
       htmlTagElement.classList.add(THEME_DARK_CLASS);
     } else {
       htmlTagElement.classList.remove(THEME_DARK_CLASS);
     }
-  }, [type]);
+  }, [mode]);
 };
 
 export { useDarkTheme };

package/dist/hooks/useDarkTheme.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDarkTheme.esm.js","sources":["../../src/hooks/useDarkTheme.ts"],"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 { useEffect } from 'react';\n\nimport { useTheme } from '@material-ui/core/styles';\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nexport const useDarkTheme = () => {\n  const {\n    palette: { type },\n  } = useTheme();\n\n  useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (type === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [type]);\n};\n"],"names":[],"mappings":";;;AAmBA,MAAM,UAAA,GAAa,MAAA;AACnB,MAAM,gBAAA,GAAmB,kBAAA;AAElB,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM;AAAA,IACJ,OAAA,EAAS,EAAE,IAAA;AAAK,MACd,QAAA,EAAS;AAEb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,iBAAiB,QAAA,CAAS,eAAA;AAChC,IAAA,IAAI,SAAS,UAAA,EAAY;AACvB,MAAA,cAAA,CAAe,SAAA,CAAU,IAAI,gBAAgB,CAAA;AAAA,IAC/C,CAAA,MAAO;AACL,MAAA,cAAA,CAAe,SAAA,CAAU,OAAO,gBAAgB,CAAA;AAAA,IAClD;AAAA,EAEF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACX;;;;"}
+{"version":3,"file":"useDarkTheme.esm.js","sources":["../../src/hooks/useDarkTheme.ts"],"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 { useEffect } from 'react';\n\nimport { useTheme } from '@mui/material/styles';\n\nconst THEME_DARK = 'dark';\nconst THEME_DARK_CLASS = 'pf-v6-theme-dark';\n\nexport const useDarkTheme = () => {\n  const {\n    palette: { mode },\n  } = useTheme();\n\n  useEffect(() => {\n    const htmlTagElement = document.documentElement;\n    if (mode === THEME_DARK) {\n      htmlTagElement.classList.add(THEME_DARK_CLASS);\n    } else {\n      htmlTagElement.classList.remove(THEME_DARK_CLASS);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [mode]);\n};\n"],"names":[],"mappings":";;;AAmBA,MAAM,UAAA,GAAa,MAAA;AACnB,MAAM,gBAAA,GAAmB,kBAAA;AAElB,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM;AAAA,IACJ,OAAA,EAAS,EAAE,IAAA;AAAK,MACd,QAAA,EAAS;AAEb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,iBAAiB,QAAA,CAAS,eAAA;AAChC,IAAA,IAAI,SAAS,UAAA,EAAY;AACvB,MAAA,cAAA,CAAe,SAAA,CAAU,IAAI,gBAAgB,CAAA;AAAA,IAC/C,CAAA,MAAO;AACL,MAAA,cAAA,CAAe,SAAA,CAAU,OAAO,gBAAgB,CAAA;AAAA,IAClD;AAAA,EAEF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACX;;;;"}

package/dist/styles/tektonEmotionCache.esm.js

@@ -0,0 +1,9 @@
+import createCache from '@emotion/cache';
+
+const tektonEmotionCache = createCache({
+  key: "tekton",
+  prepend: true
+});
+
+export { tektonEmotionCache };
+//# sourceMappingURL=tektonEmotionCache.esm.js.map

package/dist/styles/tektonEmotionCache.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tektonEmotionCache.esm.js","sources":["../../src/styles/tektonEmotionCache.ts"],"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 createCache from '@emotion/cache';\n\n/** Scoped Emotion cache so Tekton sx/styled classes don't collide with the host app. */\nexport const tektonEmotionCache = createCache({\n  key: 'tekton',\n  prepend: true,\n});\n"],"names":[],"mappings":";;AAkBO,MAAM,qBAAqB,WAAA,CAAY;AAAA,EAC5C,GAAA,EAAK,QAAA;AAAA,EACL,OAAA,EAAS;AACX,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-tekton",
-  "version": "3.38.0",
+  "version": "3.40.0",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
@@ -60,22 +60,22 @@
   },
   "dependencies": {
     "@aonic-ui/pipelines": "^3.1.0",
-    "@backstage-community/plugin-tekton-common": "^1.21.0",
-    "@backstage-community/plugin-tekton-react": "^0.6.0",
-    "@backstage/catalog-model": "^1.8.0",
-    "@backstage/core-components": "^0.18.9",
-    "@backstage/core-plugin-api": "^1.12.5",
-    "@backstage/frontend-plugin-api": "^0.16.2",
-    "@backstage/plugin-catalog-react": "^2.1.4",
-    "@backstage/plugin-kubernetes-common": "^0.9.11",
-    "@backstage/plugin-kubernetes-react": "^0.5.18",
-    "@backstage/plugin-permission-react": "^0.5.0",
+    "@backstage-community/plugin-tekton-common": "^1.23.0",
+    "@backstage-community/plugin-tekton-react": "^0.8.0",
+    "@backstage/catalog-model": "^1.9.0",
+    "@backstage/core-components": "^0.18.11",
+    "@backstage/core-plugin-api": "^1.12.7",
+    "@backstage/frontend-plugin-api": "^0.17.2",
+    "@backstage/plugin-catalog-react": "^3.1.0",
+    "@backstage/plugin-kubernetes-common": "^0.9.12",
+    "@backstage/plugin-kubernetes-react": "^0.5.20",
+    "@backstage/plugin-permission-react": "^0.5.2",
     "@backstage/theme": "^0.7.3",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.11.4",
     "@kubernetes/client-node": "1.4.0",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.45",
-    "@mui/icons-material": "5.18.0",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
     "@patternfly/patternfly": "^6.0.0",
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-table": "^6.3.1",
@@ -85,6 +85,7 @@
     "classnames": "^2.3.2",
     "dagre": "^0.8.5",
     "lodash": "^4.17.21",
+    "mobx-react": "^7.6.0",
     "react-use": "^17.4.0"
   },
   "peerDependencies": {
@@ -94,10 +95,10 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
-    "@backstage/cli": "^0.36.1",
-    "@backstage/dev-utils": "^1.1.22",
-    "@backstage/test-utils": "^1.7.17",
-    "@playwright/test": "^1.57.0",
+    "@backstage/cli": "^0.36.3",
+    "@backstage/dev-utils": "^1.1.24",
+    "@backstage/test-utils": "^1.7.19",
+    "@playwright/test": "1.61.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",