@backstage-community/plugin-tekton 3.39.0 → 3.40.1

package/dist/components/PipelineRunList/PipelineRunVulnerabilities.esm.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
 import AngleDoubleDownIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';
 import AngleDoubleUpIcon from '@mui/icons-material/KeyboardDoubleArrowUpOutlined';
 import { Tooltip } from '@patternfly/react-core';
-import { t_color_yellow_40 } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';
 import { t_color_orange_40 } from '@patternfly/react-tokens/dist/js/t_color_orange_40';
 import classNames from 'classnames';
 import { usePipelineRunScanResults } from '../../hooks/usePipelineRunScanResults.esm.js';
@@ -13,167 +12,238 @@ import '../../translations/index.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useVStyles = makeStyles((theme) => ({
-  pipelineVulnerabilities: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(1)
-  },
-  severityContainer: {
-    alignItems: "center",
-    display: "flex",
-    flexWrap: "nowrap",
-    gap: theme.spacing(0.5)
-  },
-  severityStatus: {
-    alignItems: "center",
-    display: "flex",
-    flexWrap: "nowrap",
-    gap: theme.spacing(0.5)
-  },
-  severityCount: {
-    fontWeight: "bold"
-  },
-  criticalStatus: {
-    height: "1em",
-    width: "1em"
-  },
-  highStatus: {
-    color: t_color_orange_40.value,
-    height: "0.8em",
-    width: "0.8em"
-  },
-  mediumStatus: {
-    color: t_color_yellow_40.value,
-    height: "1.3em",
-    width: "1.3em"
-  },
-  lowStatus: {
-    height: "0.8em",
-    width: "0.8em"
-  }
-}));
 const PipelineRunVulnerabilities = ({
   pipelineRun,
   condensed
 }) => {
-  const classes = useVStyles();
   const scanResults = usePipelineRunScanResults(pipelineRun);
   const { t } = useTranslationRef(tektonTranslationRef);
-  return /* @__PURE__ */ jsx("div", { className: classes.pipelineVulnerabilities, children: scanResults?.vulnerabilities ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: classNames(classes.severityContainer, "severity"), children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.severityStatus, children: [
-        /* @__PURE__ */ jsx(
-          Tooltip,
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 1
+      },
+      children: scanResults?.vulnerabilities ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            content: t(
-              "pipelineRunList.vulnerabilitySeverityTitle.critical"
-            ),
-            children: /* @__PURE__ */ jsx(
-              CriticalRiskIcon,
-              {
-                className: classes.criticalStatus,
-                title: t(
-                  "pipelineRunList.vulnerabilitySeverityTitle.critical"
-                )
-              }
-            )
+            className: classNames("severity"),
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    gap: 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: t(
+                          "pipelineRunList.vulnerabilitySeverityTitle.critical"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          CriticalRiskIcon,
+                          {
+                            height: "1em",
+                            width: "1em",
+                            title: t(
+                              "pipelineRunList.vulnerabilitySeverityTitle.critical"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.critical") : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: { fontWeight: "bold" },
+                  "data-testid": "pipelinerun-critical-vulnerabilities-count",
+                  children: scanResults.vulnerabilities.critical || 0
+                }
+              )
+            ]
           }
         ),
-        !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.critical") : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classes.severityCount,
-          "data-testid": "pipelinerun-critical-vulnerabilities-count",
-          children: scanResults.vulnerabilities.critical || 0
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: classNames(classes.severityContainer, "severity"), children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.severityStatus, children: [
-        /* @__PURE__ */ jsx(
-          Tooltip,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            content: t("pipelineRunList.vulnerabilitySeverityTitle.high"),
-            children: /* @__PURE__ */ jsx(
-              AngleDoubleUpIcon,
-              {
-                className: classes.highStatus,
-                titleAccess: t(
-                  "pipelineRunList.vulnerabilitySeverityTitle.high"
-                )
-              }
-            )
+            className: classNames("severity"),
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    gap: 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: t("pipelineRunList.vulnerabilitySeverityTitle.high"),
+                        children: /* @__PURE__ */ jsx(
+                          AngleDoubleUpIcon,
+                          {
+                            sx: {
+                              color: t_color_orange_40.value,
+                              height: "0.8em",
+                              width: "0.8em"
+                            },
+                            titleAccess: t(
+                              "pipelineRunList.vulnerabilitySeverityTitle.high"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.high") : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: { fontWeight: "bold" },
+                  "data-testid": "pipelinerun-high-vulnerabilities-count",
+                  children: scanResults.vulnerabilities.high || 0
+                }
+              )
+            ]
           }
         ),
-        !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.high") : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classes.severityCount,
-          "data-testid": "pipelinerun-high-vulnerabilities-count",
-          children: scanResults.vulnerabilities.high || 0
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: classNames(classes.severityContainer, "severity"), children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.severityStatus, children: [
-        /* @__PURE__ */ jsx(
-          Tooltip,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            content: t("pipelineRunList.vulnerabilitySeverityTitle.medium"),
-            children: /* @__PURE__ */ jsx(
-              EqualsIcon,
-              {
-                className: classes.mediumStatus,
-                title: t("pipelineRunList.vulnerabilitySeverityTitle.medium")
-              }
-            )
+            className: classNames("severity"),
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    gap: 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: t("pipelineRunList.vulnerabilitySeverityTitle.medium"),
+                        children: /* @__PURE__ */ jsx(
+                          EqualsIcon,
+                          {
+                            height: "1.3em",
+                            width: "1.3em",
+                            title: t("pipelineRunList.vulnerabilitySeverityTitle.medium")
+                          }
+                        )
+                      }
+                    ),
+                    !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.medium") : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: { fontWeight: "bold" },
+                  "data-testid": "pipelinerun-medium-vulnerabilities-count",
+                  children: scanResults.vulnerabilities.medium || 0
+                }
+              )
+            ]
           }
         ),
-        !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.medium") : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classes.severityCount,
-          "data-testid": "pipelinerun-medium-vulnerabilities-count",
-          children: scanResults.vulnerabilities.medium || 0
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: classNames(classes.severityContainer, "severity"), children: [
-      /* @__PURE__ */ jsxs("span", { className: classes.severityStatus, children: [
-        /* @__PURE__ */ jsx(
-          Tooltip,
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            content: t("pipelineRunList.vulnerabilitySeverityTitle.low"),
-            children: /* @__PURE__ */ jsx(
-              AngleDoubleDownIcon,
-              {
-                className: classes.lowStatus,
-                titleAccess: t(
-                  "pipelineRunList.vulnerabilitySeverityTitle.low"
-                )
-              }
-            )
+            className: classNames("severity"),
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: 0.5
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexWrap: "nowrap",
+                    gap: 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: t("pipelineRunList.vulnerabilitySeverityTitle.low"),
+                        children: /* @__PURE__ */ jsx(
+                          AngleDoubleDownIcon,
+                          {
+                            sx: { height: "0.8em", width: "0.8em" },
+                            titleAccess: t(
+                              "pipelineRunList.vulnerabilitySeverityTitle.low"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.low") : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: { fontWeight: "bold" },
+                  "data-testid": "pipelinerun-low-vulnerabilities-count",
+                  children: scanResults.vulnerabilities.low || 0
+                }
+              )
+            ]
           }
-        ),
-        !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.low") : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classes.severityCount,
-          "data-testid": "pipelinerun-low-vulnerabilities-count",
-          children: scanResults.vulnerabilities.low || 0
-        }
-      )
-    ] })
-  ] }) : "-" });
+        )
+      ] }) : "-"
+    }
+  );
 };
 
 export { PipelineRunVulnerabilities as default };

package/dist/components/PipelineRunList/PipelineRunVulnerabilities.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunVulnerabilities.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunVulnerabilities.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 { FC } from 'react';\n\nimport { makeStyles, Theme } from '@material-ui/core';\nimport AngleDoubleDownIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';\nimport AngleDoubleUpIcon from '@mui/icons-material/KeyboardDoubleArrowUpOutlined';\nimport { Tooltip } from '@patternfly/react-core';\nimport { t_color_yellow_40 as mediumColor } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';\nimport { t_color_orange_40 as highColor } from '@patternfly/react-tokens/dist/js/t_color_orange_40';\nimport classNames from 'classnames';\n\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\n\nimport { usePipelineRunScanResults } from '../../hooks/usePipelineRunScanResults';\nimport CriticalRiskIcon from '../Icons/CriticalRiskIcon';\nimport EqualsIcon from '../Icons/EqualsIcon';\nimport { tektonTranslationRef } from '../../translations/index.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nconst useVStyles = makeStyles((theme: Theme) => ({\n  pipelineVulnerabilities: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: theme.spacing(1),\n  },\n  severityContainer: {\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    gap: theme.spacing(0.5),\n  },\n  severityStatus: {\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    gap: theme.spacing(0.5),\n  },\n  severityCount: {\n    fontWeight: 'bold',\n  },\n  criticalStatus: {\n    height: '1em',\n    width: '1em',\n  },\n  highStatus: {\n    color: highColor.value,\n    height: '0.8em',\n    width: '0.8em',\n  },\n  mediumStatus: {\n    color: mediumColor.value,\n    height: '1.3em',\n    width: '1.3em',\n  },\n  lowStatus: {\n    height: '0.8em',\n    width: '0.8em',\n  },\n}));\n\ntype PipelineRunVulnerabilitiesProps = {\n  pipelineRun: PipelineRunKind;\n  condensed?: boolean;\n};\n\nconst PipelineRunVulnerabilities: FC<PipelineRunVulnerabilitiesProps> = ({\n  pipelineRun,\n  condensed,\n}) => {\n  const classes = useVStyles();\n  const scanResults = usePipelineRunScanResults(pipelineRun);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <div className={classes.pipelineVulnerabilities}>\n      {scanResults?.vulnerabilities ? (\n        <>\n          <div className={classNames(classes.severityContainer, 'severity')}>\n            <span className={classes.severityStatus}>\n              <Tooltip\n                content={t(\n                  'pipelineRunList.vulnerabilitySeverityTitle.critical',\n                )}\n              >\n                <CriticalRiskIcon\n                  className={classes.criticalStatus}\n                  title={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.critical',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.critical')\n                : null}\n            </span>\n            <span\n              className={classes.severityCount}\n              data-testid=\"pipelinerun-critical-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.critical || 0}\n            </span>\n          </div>\n          <div className={classNames(classes.severityContainer, 'severity')}>\n            <span className={classes.severityStatus}>\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.high')}\n              >\n                <AngleDoubleUpIcon\n                  className={classes.highStatus}\n                  titleAccess={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.high',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.high')\n                : null}\n            </span>\n            <span\n              className={classes.severityCount}\n              data-testid=\"pipelinerun-high-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.high || 0}\n            </span>\n          </div>\n          <div className={classNames(classes.severityContainer, 'severity')}>\n            <span className={classes.severityStatus}>\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.medium')}\n              >\n                <EqualsIcon\n                  className={classes.mediumStatus}\n                  title={t('pipelineRunList.vulnerabilitySeverityTitle.medium')}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.medium')\n                : null}\n            </span>\n            <span\n              className={classes.severityCount}\n              data-testid=\"pipelinerun-medium-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.medium || 0}\n            </span>\n          </div>\n          <div className={classNames(classes.severityContainer, 'severity')}>\n            <span className={classes.severityStatus}>\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.low')}\n              >\n                <AngleDoubleDownIcon\n                  className={classes.lowStatus}\n                  titleAccess={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.low',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.low')\n                : null}\n            </span>\n            <span\n              className={classes.severityCount}\n              data-testid=\"pipelinerun-low-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.low || 0}\n            </span>\n          </div>\n        </>\n      ) : (\n        '-'\n      )}\n    </div>\n  );\n};\n\nexport default PipelineRunVulnerabilities;\n"],"names":["highColor","mediumColor"],"mappings":"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"}
+{"version":3,"file":"PipelineRunVulnerabilities.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunVulnerabilities.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 { FC } from 'react';\n\nimport Box from '@mui/material/Box';\nimport AngleDoubleDownIcon from '@mui/icons-material/KeyboardDoubleArrowDownOutlined';\nimport AngleDoubleUpIcon from '@mui/icons-material/KeyboardDoubleArrowUpOutlined';\nimport { Tooltip } from '@patternfly/react-core';\nimport { t_color_orange_40 as highColor } from '@patternfly/react-tokens/dist/js/t_color_orange_40';\nimport classNames from 'classnames';\n\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\n\nimport { usePipelineRunScanResults } from '../../hooks/usePipelineRunScanResults';\nimport CriticalRiskIcon from '../Icons/CriticalRiskIcon';\nimport EqualsIcon from '../Icons/EqualsIcon';\nimport { tektonTranslationRef } from '../../translations/index.ts';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\ntype PipelineRunVulnerabilitiesProps = {\n  pipelineRun: PipelineRunKind;\n  condensed?: boolean;\n};\n\nconst PipelineRunVulnerabilities: FC<PipelineRunVulnerabilitiesProps> = ({\n  pipelineRun,\n  condensed,\n}) => {\n  const scanResults = usePipelineRunScanResults(pipelineRun);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexWrap: 'wrap',\n        gap: 1,\n      }}\n    >\n      {scanResults?.vulnerabilities ? (\n        <>\n          <Box\n            className={classNames('severity')}\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              flexWrap: 'nowrap',\n              gap: 0.5,\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexWrap: 'nowrap',\n                gap: 0.5,\n              }}\n            >\n              <Tooltip\n                content={t(\n                  'pipelineRunList.vulnerabilitySeverityTitle.critical',\n                )}\n              >\n                <CriticalRiskIcon\n                  height=\"1em\"\n                  width=\"1em\"\n                  title={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.critical',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.critical')\n                : null}\n            </Box>\n            <Box\n              component=\"span\"\n              sx={{ fontWeight: 'bold' }}\n              data-testid=\"pipelinerun-critical-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.critical || 0}\n            </Box>\n          </Box>\n          <Box\n            className={classNames('severity')}\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              flexWrap: 'nowrap',\n              gap: 0.5,\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexWrap: 'nowrap',\n                gap: 0.5,\n              }}\n            >\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.high')}\n              >\n                <AngleDoubleUpIcon\n                  sx={{\n                    color: highColor.value,\n                    height: '0.8em',\n                    width: '0.8em',\n                  }}\n                  titleAccess={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.high',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.high')\n                : null}\n            </Box>\n            <Box\n              component=\"span\"\n              sx={{ fontWeight: 'bold' }}\n              data-testid=\"pipelinerun-high-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.high || 0}\n            </Box>\n          </Box>\n          <Box\n            className={classNames('severity')}\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              flexWrap: 'nowrap',\n              gap: 0.5,\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexWrap: 'nowrap',\n                gap: 0.5,\n              }}\n            >\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.medium')}\n              >\n                <EqualsIcon\n                  height=\"1.3em\"\n                  width=\"1.3em\"\n                  title={t('pipelineRunList.vulnerabilitySeverityTitle.medium')}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.medium')\n                : null}\n            </Box>\n            <Box\n              component=\"span\"\n              sx={{ fontWeight: 'bold' }}\n              data-testid=\"pipelinerun-medium-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.medium || 0}\n            </Box>\n          </Box>\n          <Box\n            className={classNames('severity')}\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              flexWrap: 'nowrap',\n              gap: 0.5,\n            }}\n          >\n            <Box\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                flexWrap: 'nowrap',\n                gap: 0.5,\n              }}\n            >\n              <Tooltip\n                content={t('pipelineRunList.vulnerabilitySeverityTitle.low')}\n              >\n                <AngleDoubleDownIcon\n                  sx={{ height: '0.8em', width: '0.8em' }}\n                  titleAccess={t(\n                    'pipelineRunList.vulnerabilitySeverityTitle.low',\n                  )}\n                />\n              </Tooltip>\n              {!condensed\n                ? t('pipelineRunList.vulnerabilitySeverityTitle.low')\n                : null}\n            </Box>\n            <Box\n              component=\"span\"\n              sx={{ fontWeight: 'bold' }}\n              data-testid=\"pipelinerun-low-vulnerabilities-count\"\n            >\n              {scanResults.vulnerabilities.low || 0}\n            </Box>\n          </Box>\n        </>\n      ) : (\n        '-'\n      )}\n    </Box>\n  );\n};\n\nexport default PipelineRunVulnerabilities;\n"],"names":["highColor"],"mappings":"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"}

package/dist/components/PipelineRunList/PipelineTableHeader.esm.js

@@ -1,21 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TableHead, TableRow, TableCell, TableSortLabel, makeStyles } from '@material-ui/core';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
 import { getPipelineRunColumnHeader } from './PipelineRunColumnHeader.esm.js';
+import { getMergedPipelineRunTableHeaderCellSx } from './pipelineRunTableColumns.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((theme) => ({
-  header: {
-    padding: theme.spacing(1, 2, 1, 2.5),
-    borderTop: `1px solid ${theme.palette.grey.A100}`,
-    borderBottom: `1px solid ${theme.palette.grey.A100}`,
-    // withStyles hasn't a generic overload for theme
-    fontWeight: "bold",
-    position: "static",
-    wordBreak: "normal"
-  }
-}));
 const EnhancedTableHead = ({
   order,
   orderBy,
@@ -25,16 +18,17 @@ const EnhancedTableHead = ({
   const createSortHandler = (property, id) => (event) => {
     onRequestSort(event, property, id);
   };
-  const classes = useStyles();
   const { t } = useTranslationRef(tektonTranslationRef);
   const pipelineRunColumnHeader = getPipelineRunColumnHeader(t);
   return /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: pipelineRunColumnHeader.map((headCell) => {
+    const columnId = headCell.id;
+    const isExpander = columnId === "expander";
     return /* @__PURE__ */ jsx(
       TableCell,
       {
-        className: classes.header,
+        sx: getMergedPipelineRunTableHeaderCellSx(columnId),
         align: "left",
-        padding: "normal",
+        padding: isExpander ? "checkbox" : "normal",
         sortDirection: orderBy === headCell.field ? headCell.defaultSort : false,
         children: headCell.field ? /* @__PURE__ */ jsx(
           TableSortLabel,
@@ -52,7 +46,7 @@ const EnhancedTableHead = ({
           headCell.title
         ] })
       },
-      headCell.id
+      columnId
     );
   }) }) });
 };

package/dist/components/PipelineRunList/PipelineTableHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineTableHeader.esm.js","sources":["../../../src/components/PipelineRunList/PipelineTableHeader.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 { MouseEvent } from 'react';\n\nimport {\n  makeStyles,\n  TableCell,\n  TableHead,\n  TableRow,\n  TableSortLabel,\n} from '@material-ui/core';\n\nimport { Order } from '../../types/types';\nimport { getPipelineRunColumnHeader } from './PipelineRunColumnHeader';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype EnhancedTableProps = {\n  onRequestSort: (\n    event: MouseEvent<unknown>,\n    property: string,\n    id: string,\n  ) => void;\n  order: Order;\n  orderBy: string;\n  orderById: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  header: {\n    padding: theme.spacing(1, 2, 1, 2.5),\n    borderTop: `1px solid ${theme.palette.grey.A100}`,\n    borderBottom: `1px solid ${theme.palette.grey.A100}`,\n    // withStyles hasn't a generic overload for theme\n    fontWeight: 'bold',\n    position: 'static',\n    wordBreak: 'normal',\n  },\n}));\n\nexport const EnhancedTableHead = ({\n  order,\n  orderBy,\n  orderById,\n  onRequestSort,\n}: EnhancedTableProps) => {\n  const createSortHandler =\n    (property: string, id: string) => (event: MouseEvent<unknown>) => {\n      onRequestSort(event, property, id);\n    };\n  const classes = useStyles();\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const pipelineRunColumnHeader = getPipelineRunColumnHeader(t);\n\n  return (\n    <TableHead>\n      <TableRow>\n        {pipelineRunColumnHeader.map(headCell => {\n          return (\n            <TableCell\n              className={classes.header}\n              key={headCell.id as string}\n              align=\"left\"\n              padding=\"normal\"\n              sortDirection={\n                orderBy === headCell.field ? headCell.defaultSort : false\n              }\n            >\n              {headCell.field ? (\n                <TableSortLabel\n                  active={\n                    orderBy === headCell.field && orderById === headCell.id\n                  }\n                  direction={order}\n                  onClick={createSortHandler(\n                    headCell.field as string,\n                    headCell.id as string,\n                  )}\n                >\n                  {headCell.title}\n                </TableSortLabel>\n              ) : (\n                <> {headCell.title}</>\n              )}\n            </TableCell>\n          );\n        })}\n      </TableRow>\n    </TableHead>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAyCA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,MAAA,EAAQ;AAAA,IACN,SAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,GAAG,GAAG,CAAA;AAAA,IACnC,SAAA,EAAW,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,KAAK,IAAI,CAAA,CAAA;AAAA,IAC/C,YAAA,EAAc,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,KAAK,IAAI,CAAA,CAAA;AAAA;AAAA,IAElD,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,QAAA;AAAA,IACV,SAAA,EAAW;AAAA;AAEf,CAAA,CAAE,CAAA;AAEK,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,iBAAA,GACJ,CAAC,QAAA,EAAkB,EAAA,KAAe,CAAC,KAAA,KAA+B;AAChE,IAAA,aAAA,CAAc,KAAA,EAAO,UAAU,EAAE,CAAA;AAAA,EACnC,CAAA;AACF,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,uBAAA,GAA0B,2BAA2B,CAAC,CAAA;AAE5D,EAAA,2BACG,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,uBAAA,CAAwB,IAAI,CAAA,QAAA,KAAY;AACvC,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,MAAA;AAAA,QAEnB,KAAA,EAAM,MAAA;AAAA,QACN,OAAA,EAAQ,QAAA;AAAA,QACR,aAAA,EACE,OAAA,KAAY,QAAA,CAAS,KAAA,GAAQ,SAAS,WAAA,GAAc,KAAA;AAAA,QAGrD,mBAAS,KAAA,mBACR,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,MAAA,EACE,OAAA,KAAY,QAAA,CAAS,KAAA,IAAS,cAAc,QAAA,CAAS,EAAA;AAAA,YAEvD,SAAA,EAAW,KAAA;AAAA,YACX,OAAA,EAAS,iBAAA;AAAA,cACP,QAAA,CAAS,KAAA;AAAA,cACT,QAAA,CAAS;AAAA,aACX;AAAA,YAEC,QAAA,EAAA,QAAA,CAAS;AAAA;AAAA,4BAGZ,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAAE,QAAA,CAAS;AAAA,SAAA,EAAM;AAAA,OAAA;AAAA,MArBhB,QAAA,CAAS;AAAA,KAuBhB;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PipelineTableHeader.esm.js","sources":["../../../src/components/PipelineRunList/PipelineTableHeader.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 { MouseEvent } from 'react';\n\nimport TableCell from '@mui/material/TableCell';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport TableSortLabel from '@mui/material/TableSortLabel';\n\nimport { Order } from '../../types/types';\nimport { getPipelineRunColumnHeader } from './PipelineRunColumnHeader';\nimport { getMergedPipelineRunTableHeaderCellSx } from './pipelineRunTableColumns';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype EnhancedTableProps = {\n  onRequestSort: (\n    event: MouseEvent<unknown>,\n    property: string,\n    id: string,\n  ) => void;\n  order: Order;\n  orderBy: string;\n  orderById: string;\n};\n\nexport const EnhancedTableHead = ({\n  order,\n  orderBy,\n  orderById,\n  onRequestSort,\n}: EnhancedTableProps) => {\n  const createSortHandler =\n    (property: string, id: string) => (event: MouseEvent<unknown>) => {\n      onRequestSort(event, property, id);\n    };\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const pipelineRunColumnHeader = getPipelineRunColumnHeader(t);\n\n  return (\n    <TableHead>\n      <TableRow>\n        {pipelineRunColumnHeader.map(headCell => {\n          const columnId = headCell.id as string;\n          const isExpander = columnId === 'expander';\n\n          return (\n            <TableCell\n              sx={getMergedPipelineRunTableHeaderCellSx(columnId)}\n              key={columnId}\n              align=\"left\"\n              padding={isExpander ? 'checkbox' : 'normal'}\n              sortDirection={\n                orderBy === headCell.field ? headCell.defaultSort : false\n              }\n            >\n              {headCell.field ? (\n                <TableSortLabel\n                  active={\n                    orderBy === headCell.field && orderById === headCell.id\n                  }\n                  direction={order}\n                  onClick={createSortHandler(\n                    headCell.field as string,\n                    headCell.id as string,\n                  )}\n                >\n                  {headCell.title}\n                </TableSortLabel>\n              ) : (\n                <> {headCell.title}</>\n              )}\n            </TableCell>\n          );\n        })}\n      </TableRow>\n    </TableHead>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAuCO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,iBAAA,GACJ,CAAC,QAAA,EAAkB,EAAA,KAAe,CAAC,KAAA,KAA+B;AAChE,IAAA,aAAA,CAAc,KAAA,EAAO,UAAU,EAAE,CAAA;AAAA,EACnC,CAAA;AACF,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,uBAAA,GAA0B,2BAA2B,CAAC,CAAA;AAE5D,EAAA,2BACG,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,uBAAA,CAAwB,IAAI,CAAA,QAAA,KAAY;AACvC,IAAA,MAAM,WAAW,QAAA,CAAS,EAAA;AAC1B,IAAA,MAAM,aAAa,QAAA,KAAa,UAAA;AAEhC,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,sCAAsC,QAAQ,CAAA;AAAA,QAElD,KAAA,EAAM,MAAA;AAAA,QACN,OAAA,EAAS,aAAa,UAAA,GAAa,QAAA;AAAA,QACnC,aAAA,EACE,OAAA,KAAY,QAAA,CAAS,KAAA,GAAQ,SAAS,WAAA,GAAc,KAAA;AAAA,QAGrD,mBAAS,KAAA,mBACR,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,MAAA,EACE,OAAA,KAAY,QAAA,CAAS,KAAA,IAAS,cAAc,QAAA,CAAS,EAAA;AAAA,YAEvD,SAAA,EAAW,KAAA;AAAA,YACX,OAAA,EAAS,iBAAA;AAAA,cACP,QAAA,CAAS,KAAA;AAAA,cACT,QAAA,CAAS;AAAA,aACX;AAAA,YAEC,QAAA,EAAA,QAAA,CAAS;AAAA;AAAA,4BAGZ,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAAE,QAAA,CAAS;AAAA,SAAA,EAAM;AAAA,OAAA;AAAA,MArBhB;AAAA,KAuBP;AAAA,EAEJ,CAAC,GACH,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/PipelineRunList/ResourceBadge.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}\n\n.bs-tkn-pipeline-visualization__label .badge {\n  font-size: 12px;\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";
+var css_248z = ".bs-tkn-pipeline-visualization__label {\n  align-items: center;\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";
 styleInject(css_248z);
 //# sourceMappingURL=ResourceBadge.css.esm.js.map

package/dist/components/PipelineRunList/ResourceBadge.esm.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTheme } from '@mui/material/styles';
 import { Split, SplitItem } from '@patternfly/react-core';
 import './ResourceBadge.css.esm.js';
 
@@ -8,6 +9,7 @@ const ResourceBadge = ({
   name,
   suffix
 }) => {
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs(Split, { className: "bs-tkn-pipeline-visualization__label", children: [
     /* @__PURE__ */ jsx(SplitItem, { style: { marginRight: "var(--pf-t--global--spacer--sm)" }, children: /* @__PURE__ */ jsx(
       "span",
@@ -18,7 +20,14 @@ const ResourceBadge = ({
         children: abbr
       }
     ) }),
-    /* @__PURE__ */ jsx(SplitItem, { children: /* @__PURE__ */ jsx("span", { "data-testid": "pipelinerun-name", children: name }) }),
+    /* @__PURE__ */ jsx(SplitItem, { children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-testid": "pipelinerun-name",
+        style: { color: theme.palette.text.primary },
+        children: name
+      }
+    ) }),
     suffix ? /* @__PURE__ */ jsx(SplitItem, { style: { marginLeft: "var(--pf-t--global--spacer--sm)" }, children: suffix }) : null
   ] });
 };

package/dist/components/PipelineRunList/ResourceBadge.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceBadge.esm.js","sources":["../../../src/components/PipelineRunList/ResourceBadge.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 { ReactNode } from 'react';\n\nimport { Split, SplitItem } from '@patternfly/react-core';\n\nimport './ResourceBadge.css';\n\nconst ResourceBadge = ({\n  color,\n  abbr,\n  name,\n  suffix,\n}: {\n  color: string;\n  abbr: string;\n  name: string;\n  suffix?: ReactNode;\n}) => {\n  return (\n    <Split className=\"bs-tkn-pipeline-visualization__label\">\n      <SplitItem style={{ marginRight: 'var(--pf-t--global--spacer--sm)' }}>\n        <span\n          data-testid=\"pipelinerun-abbr-badge\"\n          className=\"badge\"\n          style={{ backgroundColor: color }}\n        >\n          {abbr}\n        </span>\n      </SplitItem>\n      <SplitItem>\n        <span data-testid=\"pipelinerun-name\">{name}</span>\n      </SplitItem>\n      {suffix ? (\n        <SplitItem style={{ marginLeft: 'var(--pf-t--global--spacer--sm)' }}>\n          {suffix}\n        </SplitItem>\n      ) : null}\n    </Split>\n  );\n};\n\nexport default ResourceBadge;\n"],"names":[],"mappings":";;;;AAqBA,MAAM,gBAAgB,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAKM;AACJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sCAAA,EACf,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,EAAE,WAAA,EAAa,mCAAkC,EACjE,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,wBAAA;AAAA,QACZ,SAAA,EAAU,OAAA;AAAA,QACV,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM;AAAA,QAE/B,QAAA,EAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,wBACC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAK,aAAA,EAAY,kBAAA,EAAoB,gBAAK,CAAA,EAC7C,CAAA;AAAA,IACC,MAAA,uBACE,SAAA,EAAA,EAAU,KAAA,EAAO,EAAE,UAAA,EAAY,iCAAA,EAAkC,EAC/D,QAAA,EAAA,MAAA,EACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ResourceBadge.esm.js","sources":["../../../src/components/PipelineRunList/ResourceBadge.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 { ReactNode } from 'react';\n\nimport { useTheme } from '@mui/material/styles';\nimport { Split, SplitItem } from '@patternfly/react-core';\n\nimport './ResourceBadge.css';\n\nconst ResourceBadge = ({\n  color,\n  abbr,\n  name,\n  suffix,\n}: {\n  color: string;\n  abbr: string;\n  name: string;\n  suffix?: ReactNode;\n}) => {\n  const theme = useTheme();\n  return (\n    <Split className=\"bs-tkn-pipeline-visualization__label\">\n      <SplitItem style={{ marginRight: 'var(--pf-t--global--spacer--sm)' }}>\n        <span\n          data-testid=\"pipelinerun-abbr-badge\"\n          className=\"badge\"\n          style={{ backgroundColor: color }}\n        >\n          {abbr}\n        </span>\n      </SplitItem>\n      <SplitItem>\n        <span\n          data-testid=\"pipelinerun-name\"\n          style={{ color: theme.palette.text.primary }}\n        >\n          {name}\n        </span>\n      </SplitItem>\n      {suffix ? (\n        <SplitItem style={{ marginLeft: 'var(--pf-t--global--spacer--sm)' }}>\n          {suffix}\n        </SplitItem>\n      ) : null}\n    </Split>\n  );\n};\n\nexport default ResourceBadge;\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,gBAAgB,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAKM;AACJ,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sCAAA,EACf,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,EAAE,WAAA,EAAa,mCAAkC,EACjE,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,wBAAA;AAAA,QACZ,SAAA,EAAU,OAAA;AAAA,QACV,KAAA,EAAO,EAAE,eAAA,EAAiB,KAAA,EAAM;AAAA,QAE/B,QAAA,EAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,wBACC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,kBAAA;AAAA,QACZ,OAAO,EAAE,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,KAAK,OAAA,EAAQ;AAAA,QAE1C,QAAA,EAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,IACC,MAAA,uBACE,SAAA,EAAA,EAAU,KAAA,EAAO,EAAE,UAAA,EAAY,iCAAA,EAAkC,EAC/D,QAAA,EAAA,MAAA,EACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ;;;;"}

package/dist/components/PipelineRunList/pipelineRunTableColumns.esm.js

@@ -0,0 +1,58 @@
+const pipelineRunTableSx = {
+  width: "100%"
+};
+const pipelineRunTableCellSx = {
+  px: 1.5,
+  py: 1
+};
+const pipelineRunTableHeaderCellSx = {
+  px: 1.5,
+  py: 1,
+  borderTop: (theme) => `1px solid ${theme.palette.grey.A100}`,
+  borderBottom: (theme) => `1px solid ${theme.palette.grey.A100}`,
+  fontWeight: "bold",
+  wordBreak: "normal"
+};
+const columnSxById = {
+  expander: {
+    width: "1%",
+    whiteSpace: "nowrap",
+    pr: 0,
+    pl: 0.5
+  },
+  name: {
+    pl: 0.5,
+    wordBreak: "break-word"
+  },
+  vulnerabilities: {
+    whiteSpace: "nowrap"
+  },
+  status: {
+    whiteSpace: "nowrap"
+  },
+  "task-status": {
+    whiteSpace: "nowrap"
+  },
+  "start-time": {
+    whiteSpace: "nowrap"
+  },
+  duration: {
+    whiteSpace: "nowrap"
+  },
+  actions: {
+    width: "1%",
+    whiteSpace: "nowrap"
+  }
+};
+const getPipelineRunTableColumnSx = (columnId) => columnSxById[columnId] ?? {};
+const getMergedPipelineRunTableCellSx = (columnId) => [
+  pipelineRunTableCellSx,
+  getPipelineRunTableColumnSx(columnId)
+];
+const getMergedPipelineRunTableHeaderCellSx = (columnId) => [
+  pipelineRunTableHeaderCellSx,
+  getPipelineRunTableColumnSx(columnId)
+];
+
+export { getMergedPipelineRunTableCellSx, getMergedPipelineRunTableHeaderCellSx, getPipelineRunTableColumnSx, pipelineRunTableCellSx, pipelineRunTableHeaderCellSx, pipelineRunTableSx };
+//# sourceMappingURL=pipelineRunTableColumns.esm.js.map