@backstage-community/plugin-tekton 3.33.2 → 3.34.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 ### Dependencies
 
+## 3.34.1
+
+### Patch Changes
+
+- 39d5c9a: Added data test ids to pipeline run list for better plugin testability
+
+## 3.34.0
+
+### Minor Changes
+
+- 5ac7a59: Backstage version bump to v1.46.2
+
+### Patch Changes
+
+- Updated dependencies [5ac7a59]
+  - @backstage-community/plugin-tekton-common@1.17.0
+  - @backstage-community/plugin-tekton-react@0.2.0
+
 ## 3.33.2
 
 ### Patch Changes

package/README.md

@@ -226,7 +226,7 @@ annotations:
 
 ```
 
-results.name: `LINK_T0_SBOM`
+results.name: `LINK_TO_SBOM`
 
 results.value: `<sbom-viewer-url>`
 

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

@@ -56,6 +56,7 @@ const PipelineRunName = ({ row }) => {
       suffix: signed ? /* @__PURE__ */ jsx(Tooltip, { content: "Signed", children: /* @__PURE__ */ jsx(
         "div",
         {
+          "data-testid": "pipelinerun-signed",
           className: classNames(
             classes.signedIndicator,
             "signed-indicator"
@@ -95,31 +96,44 @@ const PipelineRunRow = ({
     });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(TableRow, { className: classes.plrRow, children: [
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(TableRow, { className: classes.plrRow, "data-testid": "pipelinerun-row", children: [
+      /* @__PURE__ */ jsx(TableCell, { "data-testid": "pipelinerun-expand-cell", children: /* @__PURE__ */ jsx(
         IconButton,
         {
           "aria-label": "expand row",
           size: "small",
           onClick: expandCollapseClickHandler,
+          role: "button",
+          "data-testid": "pipelinerun-expand-btn",
           children: open ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowRightIcon, {})
         }
       ) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(PipelineRunName, { row }) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(PipelineRunVulnerabilities, { pipelineRun: row, condensed: true }) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(PlrStatus, { obj: row }) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(PipelineRunTaskStatus, { pipelineRun: row }) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: startTime ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-name-cell", children: /* @__PURE__ */ jsx(PipelineRunName, { row }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-vulnerabilities-cell", children: /* @__PURE__ */ jsx(PipelineRunVulnerabilities, { pipelineRun: row, condensed: true }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-status-cell", children: /* @__PURE__ */ jsx(PlrStatus, { obj: row }) }),
+      /* @__PURE__ */ jsxs(TableCell, { align: "left", "data-testid": "pipelinerun-task-status-cell", children: [
+        /* @__PURE__ */ jsx(PipelineRunTaskStatus, { pipelineRun: row }),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-start-time-cell", children: startTime ? /* @__PURE__ */ jsx(
         Timestamp,
         {
+          "data-testid": "pipelinerun-start-time",
           className: "bs-tkn-timestamp",
           date: new Date(startTime)
         }
       ) : "-" }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: pipelineRunDuration(row, t) }),
-      /* @__PURE__ */ jsx(TableCell, { align: "left", children: /* @__PURE__ */ jsx(PipelineRunRowActions, { pipelineRun: row }) })
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-duration-cell", children: pipelineRunDuration(row, t) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", "data-testid": "pipelinerun-actions-cell", children: /* @__PURE__ */ jsx(PipelineRunRowActions, { pipelineRun: row }) })
     ] }),
-    /* @__PURE__ */ jsx(TableRow, { className: classes.plrVisRow, children: /* @__PURE__ */ jsx(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: 8, children: /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(Box, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx(PipelineRunVisualization, { pipelineRunName: row.metadata?.name }) }) }) }) })
+    /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        className: classes.plrVisRow,
+        "data-testid": "pipelinerun-visualisation-row",
+        children: /* @__PURE__ */ jsx(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: 8, children: /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx(Box, { marginTop: 1, marginBottom: 1, children: /* @__PURE__ */ jsx(PipelineRunVisualization, { pipelineRunName: row.metadata?.name }) }) }) })
+      }
+    )
   ] }, uid);
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunRow.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunRow.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 { SetStateAction, Dispatch } from 'react';\n\nimport { useEffect, Fragment } from 'react';\n\nimport {\n  Box,\n  Collapse,\n  IconButton,\n  makeStyles,\n  TableCell,\n  TableRow,\n  Theme,\n} from '@material-ui/core';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';\nimport { Timestamp, Tooltip } from '@patternfly/react-core';\n\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\n\nimport { TEKTON_SIGNED_ANNOTATION } from '../../consts/tekton-const';\nimport { OpenRowStatus, tektonGroupColor } from '../../types/types';\nimport { pipelineRunDuration } from '../../utils/tekton-utils';\nimport { PipelineRunVisualization } from '../pipeline-topology';\nimport PipelineRunRowActions from './PipelineRunRowActions';\nimport PipelineRunTaskStatus from './PipelineRunTaskStatus';\nimport PipelineRunVulnerabilities from './PipelineRunVulnerabilities';\nimport PlrStatus from './PlrStatus';\nimport ResourceBadge from './ResourceBadge';\n\nimport './PipelineRunRow.css';\n\nimport classNames from 'classnames';\n\nimport SignedBadgeIcon from '../Icons/SignedBadge';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  plrRow: {\n    '&:nth-of-type(odd)': {\n      backgroundColor: `${theme.palette.background.paper}`,\n    },\n  },\n  plrVisRow: {\n    borderBottom: `1px solid ${theme.palette.grey.A100}`,\n  },\n  signedIndicator: {\n    display: 'inline-block',\n    width: theme.spacing(2.5),\n    position: 'relative',\n    top: theme.spacing(0.5),\n  },\n}));\n\ntype PipelineRunRowProps = {\n  row: PipelineRunKind;\n  startTime: string;\n  isExpanded?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<OpenRowStatus>>;\n};\n\ntype PipelineRunNameProps = { row: PipelineRunKind };\n\nconst PipelineRunName = ({ row }: PipelineRunNameProps) => {\n  const classes = useStyles();\n  const name = row.metadata?.name;\n  const signed =\n    row?.metadata?.annotations?.[TEKTON_SIGNED_ANNOTATION] === 'true';\n\n  return (\n    <div>\n      {name ? (\n        <ResourceBadge\n          color={tektonGroupColor}\n          abbr=\"PLR\"\n          name={name || ''}\n          suffix={\n            signed ? (\n              <Tooltip content=\"Signed\">\n                <div\n                  className={classNames(\n                    classes.signedIndicator,\n                    'signed-indicator',\n                  )}\n                >\n                  <SignedBadgeIcon />\n                </div>\n              </Tooltip>\n            ) : null\n          }\n        />\n      ) : (\n        '-'\n      )}\n    </div>\n  );\n};\n\nexport const PipelineRunRow = ({\n  row,\n  startTime,\n  isExpanded = false,\n  open,\n  setOpen,\n}: PipelineRunRowProps) => {\n  const classes = useStyles();\n  const uid = row.metadata?.uid;\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    return setOpen((val: OpenRowStatus) => {\n      return {\n        ...val,\n        ...(uid && { [uid]: isExpanded }),\n      };\n    });\n  }, [isExpanded, uid, setOpen]);\n\n  const expandCollapseClickHandler = () => {\n    setOpen((val: OpenRowStatus) => {\n      return {\n        ...val,\n        ...(uid && {\n          [uid]: !val[uid],\n        }),\n      };\n    });\n  };\n\n  return (\n    <Fragment key={uid}>\n      <TableRow className={classes.plrRow}>\n        <TableCell>\n          <IconButton\n            aria-label=\"expand row\"\n            size=\"small\"\n            onClick={expandCollapseClickHandler}\n          >\n            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}\n          </IconButton>\n        </TableCell>\n        <TableCell align=\"left\">\n          <PipelineRunName row={row} />\n        </TableCell>\n        <TableCell align=\"left\">\n          <PipelineRunVulnerabilities pipelineRun={row} condensed />\n        </TableCell>\n        <TableCell align=\"left\">\n          <PlrStatus obj={row} />\n        </TableCell>\n        <TableCell align=\"left\">\n          <PipelineRunTaskStatus pipelineRun={row} />\n        </TableCell>\n        <TableCell align=\"left\">\n          {startTime ? (\n            <Timestamp\n              className=\"bs-tkn-timestamp\"\n              date={new Date(startTime)}\n            />\n          ) : (\n            '-'\n          )}\n        </TableCell>\n        <TableCell align=\"left\">{pipelineRunDuration(row, t)}</TableCell>\n        <TableCell align=\"left\">\n          <PipelineRunRowActions pipelineRun={row} />\n        </TableCell>\n      </TableRow>\n      <TableRow className={classes.plrVisRow}>\n        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>\n          <Collapse in={open} timeout=\"auto\" unmountOnExit>\n            <Box marginTop={1} marginBottom={1}>\n              <PipelineRunVisualization pipelineRunName={row.metadata?.name} />\n            </Box>\n          </Collapse>\n        </TableCell>\n      </TableRow>\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PipelineRunRow.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunRow.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 { SetStateAction, Dispatch } from 'react';\n\nimport { useEffect, Fragment } from 'react';\n\nimport {\n  Box,\n  Collapse,\n  IconButton,\n  makeStyles,\n  TableCell,\n  TableRow,\n  Theme,\n} from '@material-ui/core';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';\nimport { Timestamp, Tooltip } from '@patternfly/react-core';\n\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\n\nimport { TEKTON_SIGNED_ANNOTATION } from '../../consts/tekton-const';\nimport { OpenRowStatus, tektonGroupColor } from '../../types/types';\nimport { pipelineRunDuration } from '../../utils/tekton-utils';\nimport { PipelineRunVisualization } from '../pipeline-topology';\nimport PipelineRunRowActions from './PipelineRunRowActions';\nimport PipelineRunTaskStatus from './PipelineRunTaskStatus';\nimport PipelineRunVulnerabilities from './PipelineRunVulnerabilities';\nimport PlrStatus from './PlrStatus';\nimport ResourceBadge from './ResourceBadge';\n\nimport './PipelineRunRow.css';\n\nimport classNames from 'classnames';\n\nimport SignedBadgeIcon from '../Icons/SignedBadge';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst useStyles = makeStyles((theme: Theme) => ({\n  plrRow: {\n    '&:nth-of-type(odd)': {\n      backgroundColor: `${theme.palette.background.paper}`,\n    },\n  },\n  plrVisRow: {\n    borderBottom: `1px solid ${theme.palette.grey.A100}`,\n  },\n  signedIndicator: {\n    display: 'inline-block',\n    width: theme.spacing(2.5),\n    position: 'relative',\n    top: theme.spacing(0.5),\n  },\n}));\n\ntype PipelineRunRowProps = {\n  row: PipelineRunKind;\n  startTime: string;\n  isExpanded?: boolean;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<OpenRowStatus>>;\n};\n\ntype PipelineRunNameProps = { row: PipelineRunKind };\n\nconst PipelineRunName = ({ row }: PipelineRunNameProps) => {\n  const classes = useStyles();\n  const name = row.metadata?.name;\n  const signed =\n    row?.metadata?.annotations?.[TEKTON_SIGNED_ANNOTATION] === 'true';\n\n  return (\n    <div>\n      {name ? (\n        <ResourceBadge\n          color={tektonGroupColor}\n          abbr=\"PLR\"\n          name={name || ''}\n          suffix={\n            signed ? (\n              <Tooltip content=\"Signed\">\n                <div\n                  data-testid=\"pipelinerun-signed\"\n                  className={classNames(\n                    classes.signedIndicator,\n                    'signed-indicator',\n                  )}\n                >\n                  <SignedBadgeIcon />\n                </div>\n              </Tooltip>\n            ) : null\n          }\n        />\n      ) : (\n        '-'\n      )}\n    </div>\n  );\n};\n\nexport const PipelineRunRow = ({\n  row,\n  startTime,\n  isExpanded = false,\n  open,\n  setOpen,\n}: PipelineRunRowProps) => {\n  const classes = useStyles();\n  const uid = row.metadata?.uid;\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    return setOpen((val: OpenRowStatus) => {\n      return {\n        ...val,\n        ...(uid && { [uid]: isExpanded }),\n      };\n    });\n  }, [isExpanded, uid, setOpen]);\n\n  const expandCollapseClickHandler = () => {\n    setOpen((val: OpenRowStatus) => {\n      return {\n        ...val,\n        ...(uid && {\n          [uid]: !val[uid],\n        }),\n      };\n    });\n  };\n\n  return (\n    <Fragment key={uid}>\n      <TableRow className={classes.plrRow} data-testid=\"pipelinerun-row\">\n        <TableCell data-testid=\"pipelinerun-expand-cell\">\n          <IconButton\n            aria-label=\"expand row\"\n            size=\"small\"\n            onClick={expandCollapseClickHandler}\n            role=\"button\"\n            data-testid=\"pipelinerun-expand-btn\"\n          >\n            {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}\n          </IconButton>\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-name-cell\">\n          <PipelineRunName row={row} />\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-vulnerabilities-cell\">\n          <PipelineRunVulnerabilities pipelineRun={row} condensed />\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-status-cell\">\n          <PlrStatus obj={row} />\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-task-status-cell\">\n          <PipelineRunTaskStatus pipelineRun={row} /> {/* Missed here */}\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-start-time-cell\">\n          {startTime ? (\n            <Timestamp\n              data-testid=\"pipelinerun-start-time\"\n              className=\"bs-tkn-timestamp\"\n              date={new Date(startTime)}\n            />\n          ) : (\n            '-'\n          )}\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-duration-cell\">\n          {pipelineRunDuration(row, t)}\n        </TableCell>\n        <TableCell align=\"left\" data-testid=\"pipelinerun-actions-cell\">\n          <PipelineRunRowActions pipelineRun={row} />\n        </TableCell>\n      </TableRow>\n      <TableRow\n        className={classes.plrVisRow}\n        data-testid=\"pipelinerun-visualisation-row\"\n      >\n        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={8}>\n          <Collapse in={open} timeout=\"auto\" unmountOnExit>\n            <Box marginTop={1} marginBottom={1}>\n              <PipelineRunVisualization pipelineRunName={row.metadata?.name} />\n            </Box>\n          </Collapse>\n        </TableCell>\n      </TableRow>\n    </Fragment>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,SAAA,GAAY,UAAA,CAAW,CAAC,KAAA,MAAkB;AAAA,EAC9C,MAAA,EAAQ;AAAA,IACN,oBAAA,EAAsB;AAAA,MACpB,eAAA,EAAiB,CAAA,EAAG,KAAA,CAAM,OAAA,CAAQ,WAAW,KAAK,CAAA;AAAA;AACpD,GACF;AAAA,EACA,SAAA,EAAW;AAAA,IACT,YAAA,EAAc,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,KAAK,IAAI,CAAA;AAAA,GACpD;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,cAAA;AAAA,IACT,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IACxB,QAAA,EAAU,UAAA;AAAA,IACV,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA;AAE1B,CAAA,CAAE,CAAA;AAYF,MAAM,eAAA,GAAkB,CAAC,EAAE,GAAA,EAAI,KAA4B;AACzD,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,IAAA,GAAO,IAAI,QAAA,EAAU,IAAA;AAC3B,EAAA,MAAM,MAAA,GACJ,GAAA,EAAK,QAAA,EAAU,WAAA,GAAc,wBAAwB,CAAA,KAAM,MAAA;AAE7D,EAAA,uBACE,GAAA,CAAC,SACE,QAAA,EAAA,IAAA,mBACC,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,gBAAA;AAAA,MACP,IAAA,EAAK,KAAA;AAAA,MACL,MAAM,IAAA,IAAQ,EAAA;AAAA,MACd,MAAA,EACE,MAAA,mBACE,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAQ,QAAA,EACf,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,oBAAA;AAAA,UACZ,SAAA,EAAW,UAAA;AAAA,YACT,OAAA,CAAQ,eAAA;AAAA,YACR;AAAA,WACF;AAAA,UAEA,8BAAC,eAAA,EAAA,EAAgB;AAAA;AAAA,SAErB,CAAA,GACE;AAAA;AAAA,MAIR,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,GAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,IAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,GAAA,GAAM,IAAI,QAAA,EAAU,GAAA;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,OAAA,CAAQ,CAAC,GAAA,KAAuB;AACrC,MAAA,OAAO;AAAA,QACL,GAAG,GAAA;AAAA,QACH,GAAI,GAAA,IAAO,EAAE,CAAC,GAAG,GAAG,UAAA;AAAW,OACjC;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,UAAA,EAAY,GAAA,EAAK,OAAO,CAAC,CAAA;AAE7B,EAAA,MAAM,6BAA6B,MAAM;AACvC,IAAA,OAAA,CAAQ,CAAC,GAAA,KAAuB;AAC9B,MAAA,OAAO;AAAA,QACL,GAAG,GAAA;AAAA,QACH,GAAI,GAAA,IAAO;AAAA,UACT,CAAC,GAAG,GAAG,CAAC,IAAI,GAAG;AAAA;AACjB,OACF;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,4BACG,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,OAAA,CAAQ,MAAA,EAAQ,eAAY,iBAAA,EAC/C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,eAAY,yBAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,YAAA;AAAA,UACX,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAS,0BAAA;AAAA,UACT,IAAA,EAAK,QAAA;AAAA,UACL,aAAA,EAAY,wBAAA;AAAA,UAEX,QAAA,EAAA,IAAA,mBAAO,GAAA,CAAC,qBAAA,EAAA,EAAsB,CAAA,uBAAM,sBAAA,EAAA,EAAuB;AAAA;AAAA,OAC9D,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,aAAU,KAAA,EAAM,MAAA,EAAO,eAAY,uBAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,GAAA,EAAU,CAAA,EAC7B,CAAA;AAAA,sBACA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAM,MAAA,EAAO,aAAA,EAAY,kCAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,0BAAA,EAAA,EAA2B,WAAA,EAAa,GAAA,EAAK,SAAA,EAAS,IAAA,EAAC,CAAA,EAC1D,CAAA;AAAA,sBACA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAM,MAAA,EAAO,aAAA,EAAY,2BAClC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,GAAA,EAAK,GAAA,EAAK,CAAA,EACvB,CAAA;AAAA,sBACA,IAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAM,MAAA,EAAO,eAAY,8BAAA,EAClC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,aAAa,GAAA,EAAK,CAAA;AAAA,QAAE;AAAA,OAAA,EAC7C,CAAA;AAAA,0BACC,SAAA,EAAA,EAAU,KAAA,EAAM,MAAA,EAAO,aAAA,EAAY,+BACjC,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,wBAAA;AAAA,UACZ,SAAA,EAAU,kBAAA;AAAA,UACV,IAAA,EAAM,IAAI,IAAA,CAAK,SAAS;AAAA;AAAA,UAG1B,GAAA,EAEJ,CAAA;AAAA,sBACA,GAAA,CAAC,aAAU,KAAA,EAAM,MAAA,EAAO,eAAY,2BAAA,EACjC,QAAA,EAAA,mBAAA,CAAoB,GAAA,EAAK,CAAC,CAAA,EAC7B,CAAA;AAAA,sBACA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAM,MAAA,EAAO,aAAA,EAAY,4BAClC,QAAA,kBAAA,GAAA,CAAC,qBAAA,EAAA,EAAsB,WAAA,EAAa,GAAA,EAAK,CAAA,EAC3C;AAAA,KAAA,EACF,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,SAAA;AAAA,QACnB,aAAA,EAAY,+BAAA;AAAA,QAEZ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAO,EAAE,eAAe,CAAA,EAAG,UAAA,EAAY,CAAA,EAAE,EAAG,OAAA,EAAS,CAAA,EAC9D,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAI,IAAA,EAAM,OAAA,EAAQ,MAAA,EAAO,aAAA,EAAa,IAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,GAAG,YAAA,EAAc,CAAA,EAC/B,QAAA,kBAAA,GAAA,CAAC,wBAAA,EAAA,EAAyB,iBAAiB,GAAA,CAAI,QAAA,EAAU,IAAA,EAAM,CAAA,EACjE,GACF,CAAA,EACF;AAAA;AAAA;AACF,GAAA,EAAA,EAtDa,GAuDf,CAAA;AAEJ;;;;"}

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

@@ -82,7 +82,14 @@ const PipelineRunVulnerabilities = ({
         ),
         !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.critical") : null
       ] }),
-      /* @__PURE__ */ jsx("span", { className: classes.severityCount, children: scanResults.vulnerabilities.critical || 0 })
+      /* @__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: [
@@ -103,7 +110,14 @@ const PipelineRunVulnerabilities = ({
         ),
         !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.high") : null
       ] }),
-      /* @__PURE__ */ jsx("span", { className: classes.severityCount, children: scanResults.vulnerabilities.high || 0 })
+      /* @__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: [
@@ -122,7 +136,14 @@ const PipelineRunVulnerabilities = ({
         ),
         !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.medium") : null
       ] }),
-      /* @__PURE__ */ jsx("span", { className: classes.severityCount, children: scanResults.vulnerabilities.medium || 0 })
+      /* @__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: [
@@ -143,7 +164,14 @@ const PipelineRunVulnerabilities = ({
         ),
         !condensed ? t("pipelineRunList.vulnerabilitySeverityTitle.low") : null
       ] }),
-      /* @__PURE__ */ jsx("span", { className: classes.severityCount, children: scanResults.vulnerabilities.low || 0 })
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: classes.severityCount,
+          "data-testid": "pipelinerun-low-vulnerabilities-count",
+          children: scanResults.vulnerabilities.low || 0
+        }
+      )
     ] })
   ] }) : "-" });
 };

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 className={classes.severityCount}>\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 className={classes.severityCount}>\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 className={classes.severityCount}>\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 className={classes.severityCount}>\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 { 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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"}

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

@@ -9,8 +9,16 @@ const ResourceBadge = ({
   suffix
 }) => {
   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", { className: "badge", style: { backgroundColor: color }, children: abbr }) }),
-    /* @__PURE__ */ jsx(SplitItem, { children: /* @__PURE__ */ jsx("span", { children: name }) }),
+    /* @__PURE__ */ jsx(SplitItem, { style: { marginRight: "var(--pf-t--global--spacer--sm)" }, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-testid": "pipelinerun-abbr-badge",
+        className: "badge",
+        style: { backgroundColor: color },
+        children: abbr
+      }
+    ) }),
+    /* @__PURE__ */ jsx(SplitItem, { children: /* @__PURE__ */ jsx("span", { "data-testid": "pipelinerun-name", 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 className=\"badge\" style={{ backgroundColor: color }}>\n          {abbr}\n        </span>\n      </SplitItem>\n      <SplitItem>\n        <span>{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,aAAU,KAAA,EAAO,EAAE,WAAA,EAAa,iCAAA,IAC/B,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,OAAA,EAAQ,OAAO,EAAE,eAAA,EAAiB,KAAA,EAAM,EACrD,gBACH,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAM,gBAAK,CAAA,EACd,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 { 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;;;;"}

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

@@ -118,7 +118,7 @@ const PipelineLayout = ({ model }) => {
       style: {
         height: Math.min(window.innerHeight, maxSize?.height)
       },
-      children: /* @__PURE__ */ jsx(VisualizationProvider, { controller: vis, children: /* @__PURE__ */ jsx(TopologyView, { controlBar: controlBar(vis), children: /* @__PURE__ */ jsx(VisualizationSurface, {}) }) })
+      children: /* @__PURE__ */ jsx(VisualizationProvider, { controller: vis, children: /* @__PURE__ */ jsx(TopologyView, { controlBar: controlBar(vis), children: /* @__PURE__ */ jsx(VisualizationSurface, { "data-testid": "pipeline-visualization-surface" }) }) })
     }
   );
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineLayout.esm.js","sources":["../../../src/components/pipeline-topology/PipelineLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useRef, useCallback, useEffect } from 'react';\n\nimport {\n  action,\n  Controller,\n  createTopologyControlButtons,\n  defaultControlButtonsOptions,\n  EdgeModel,\n  GRAPH_LAYOUT_END_EVENT,\n  GRAPH_POSITION_CHANGE_EVENT,\n  GraphModel,\n  Node,\n  NodeModel,\n  Rect,\n  TopologyControlBar,\n  TopologyView,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface,\n} from '@patternfly/react-topology';\n\nimport {\n  DROP_SHADOW_SPACING,\n  GRAPH_MIN_WIDTH,\n  NODE_HEIGHT,\n  PipelineLayout as PipelineLayoutTypes,\n  TOOLBAR_HEIGHT,\n} from '../../consts/pipeline-topology-const';\nimport { PipelineMixedNodeModel } from '../../types/pipeline-topology-types';\nimport { getLayoutData } from '../../utils/pipeline-topology-utils';\nimport pipelineComponentFactory, {\n  layoutFactory,\n} from './pipelineComponentFactory';\n\ntype PipelineLayoutProps = {\n  model: {\n    graph: GraphModel;\n    nodes: PipelineMixedNodeModel[];\n    edges: EdgeModel[];\n  };\n};\n\nexport const PipelineLayout = ({ model }: PipelineLayoutProps) => {\n  const [vis, setVis] = useState<Controller | null>(null);\n  const [maxSize, setMaxSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n  const storedGraphModel = useRef<GraphModel | null>(null);\n\n  const layout: PipelineLayoutTypes = model.graph.layout as PipelineLayoutTypes;\n\n  const onLayoutUpdate = useCallback(\n    (nodes: Node[]) => {\n      const nodeBounds = nodes.map((node: Node<NodeModel, any>) =>\n        node.getBounds(),\n      );\n      const maxWidth = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.width)\n          .reduce((w1: number, w2: number) => Math.max(w1, w2), 0),\n      );\n      const maxHeight = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.height)\n          .reduce((h1: number, h2: number) => Math.max(h1, h2), 0),\n      );\n      const maxObject =\n        nodeBounds.find((nb: Rect) => nb.height === maxHeight) ??\n        ({ y: 0 } as Rect);\n\n      const maxX = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.x)\n          .reduce((x1: number, x2: number) => Math.max(x1, x2), 0),\n      );\n      const maxY = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.y)\n          .reduce((y1: number, y2: number) => Math.max(y1, y2), 0),\n      );\n\n      let horizontalMargin = 0;\n      let verticalMargin = 0;\n      if (layout) {\n        horizontalMargin = getLayoutData(layout)?.marginx || 0;\n        verticalMargin = getLayoutData(layout)?.marginy || 0;\n      }\n      const finallyTaskHeight =\n        maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;\n      const regularTaskHeight =\n        maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;\n\n      setMaxSize({\n        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,\n        width: Math.max(\n          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,\n          GRAPH_MIN_WIDTH,\n        ),\n      });\n    },\n    [setMaxSize, layout],\n  );\n\n  useEffect(() => {\n    if (model.graph.id !== storedGraphModel?.current?.id) {\n      storedGraphModel.current = null;\n      setVis(null);\n    }\n  }, [vis, model]);\n\n  useEffect(() => {\n    let mounted = true;\n    if (vis === null) {\n      const controller = new Visualization();\n      controller.registerLayoutFactory(layoutFactory);\n      controller.registerComponentFactory(pipelineComponentFactory);\n      controller.fromModel(model);\n      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {\n        storedGraphModel.current = controller.getGraph().toModel();\n      });\n      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {\n        onLayoutUpdate(controller.getGraph().getNodes());\n      });\n      if (mounted) {\n        setVis(controller);\n      }\n    } else {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n      vis.getGraph().layout();\n    }\n    return () => {\n      mounted = false;\n    };\n  }, [vis, model, onLayoutUpdate]);\n\n  useEffect(() => {\n    if (model && vis) {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n    }\n  }, [model, vis]);\n\n  if (!vis) return null;\n\n  const controlBar = (controller: Controller) => (\n    <TopologyControlBar\n      controlButtons={createTopologyControlButtons({\n        ...defaultControlButtonsOptions,\n        zoomInCallback: action(() => {\n          controller.getGraph().scaleBy(4 / 3);\n        }),\n        zoomOutCallback: action(() => {\n          controller.getGraph().scaleBy(0.75);\n        }),\n        fitToScreenCallback: action(() => {\n          controller.getGraph().fit(80);\n        }),\n        resetViewCallback: action(() => {\n          controller.getGraph().reset();\n          controller.getGraph().layout();\n        }),\n        legend: false,\n      })}\n    />\n  );\n\n  return (\n    <div\n      style={{\n        height: Math.min(window.innerHeight, maxSize?.height),\n      }}\n    >\n      <VisualizationProvider controller={vis}>\n        <TopologyView controlBar={controlBar(vis)}>\n          <VisualizationSurface />\n        </TopologyView>\n      </VisualizationProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PipelineLayout.esm.js","sources":["../../../src/components/pipeline-topology/PipelineLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useRef, useCallback, useEffect } from 'react';\n\nimport {\n  action,\n  Controller,\n  createTopologyControlButtons,\n  defaultControlButtonsOptions,\n  EdgeModel,\n  GRAPH_LAYOUT_END_EVENT,\n  GRAPH_POSITION_CHANGE_EVENT,\n  GraphModel,\n  Node,\n  NodeModel,\n  Rect,\n  TopologyControlBar,\n  TopologyView,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface,\n} from '@patternfly/react-topology';\n\nimport {\n  DROP_SHADOW_SPACING,\n  GRAPH_MIN_WIDTH,\n  NODE_HEIGHT,\n  PipelineLayout as PipelineLayoutTypes,\n  TOOLBAR_HEIGHT,\n} from '../../consts/pipeline-topology-const';\nimport { PipelineMixedNodeModel } from '../../types/pipeline-topology-types';\nimport { getLayoutData } from '../../utils/pipeline-topology-utils';\nimport pipelineComponentFactory, {\n  layoutFactory,\n} from './pipelineComponentFactory';\n\ntype PipelineLayoutProps = {\n  model: {\n    graph: GraphModel;\n    nodes: PipelineMixedNodeModel[];\n    edges: EdgeModel[];\n  };\n};\n\nexport const PipelineLayout = ({ model }: PipelineLayoutProps) => {\n  const [vis, setVis] = useState<Controller | null>(null);\n  const [maxSize, setMaxSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n  const storedGraphModel = useRef<GraphModel | null>(null);\n\n  const layout: PipelineLayoutTypes = model.graph.layout as PipelineLayoutTypes;\n\n  const onLayoutUpdate = useCallback(\n    (nodes: Node[]) => {\n      const nodeBounds = nodes.map((node: Node<NodeModel, any>) =>\n        node.getBounds(),\n      );\n      const maxWidth = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.width)\n          .reduce((w1: number, w2: number) => Math.max(w1, w2), 0),\n      );\n      const maxHeight = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.height)\n          .reduce((h1: number, h2: number) => Math.max(h1, h2), 0),\n      );\n      const maxObject =\n        nodeBounds.find((nb: Rect) => nb.height === maxHeight) ??\n        ({ y: 0 } as Rect);\n\n      const maxX = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.x)\n          .reduce((x1: number, x2: number) => Math.max(x1, x2), 0),\n      );\n      const maxY = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.y)\n          .reduce((y1: number, y2: number) => Math.max(y1, y2), 0),\n      );\n\n      let horizontalMargin = 0;\n      let verticalMargin = 0;\n      if (layout) {\n        horizontalMargin = getLayoutData(layout)?.marginx || 0;\n        verticalMargin = getLayoutData(layout)?.marginy || 0;\n      }\n      const finallyTaskHeight =\n        maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;\n      const regularTaskHeight =\n        maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;\n\n      setMaxSize({\n        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,\n        width: Math.max(\n          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,\n          GRAPH_MIN_WIDTH,\n        ),\n      });\n    },\n    [setMaxSize, layout],\n  );\n\n  useEffect(() => {\n    if (model.graph.id !== storedGraphModel?.current?.id) {\n      storedGraphModel.current = null;\n      setVis(null);\n    }\n  }, [vis, model]);\n\n  useEffect(() => {\n    let mounted = true;\n    if (vis === null) {\n      const controller = new Visualization();\n      controller.registerLayoutFactory(layoutFactory);\n      controller.registerComponentFactory(pipelineComponentFactory);\n      controller.fromModel(model);\n      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {\n        storedGraphModel.current = controller.getGraph().toModel();\n      });\n      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {\n        onLayoutUpdate(controller.getGraph().getNodes());\n      });\n      if (mounted) {\n        setVis(controller);\n      }\n    } else {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n      vis.getGraph().layout();\n    }\n    return () => {\n      mounted = false;\n    };\n  }, [vis, model, onLayoutUpdate]);\n\n  useEffect(() => {\n    if (model && vis) {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n    }\n  }, [model, vis]);\n\n  if (!vis) return null;\n\n  const controlBar = (controller: Controller) => (\n    <TopologyControlBar\n      controlButtons={createTopologyControlButtons({\n        ...defaultControlButtonsOptions,\n        zoomInCallback: action(() => {\n          controller.getGraph().scaleBy(4 / 3);\n        }),\n        zoomOutCallback: action(() => {\n          controller.getGraph().scaleBy(0.75);\n        }),\n        fitToScreenCallback: action(() => {\n          controller.getGraph().fit(80);\n        }),\n        resetViewCallback: action(() => {\n          controller.getGraph().reset();\n          controller.getGraph().layout();\n        }),\n        legend: false,\n      })}\n    />\n  );\n\n  return (\n    <div\n      style={{\n        height: Math.min(window.innerHeight, maxSize?.height),\n      }}\n    >\n      <VisualizationProvider controller={vis}>\n        <TopologyView controlBar={controlBar(vis)}>\n          <VisualizationSurface data-testid=\"pipeline-visualization-surface\" />\n        </TopologyView>\n      </VisualizationProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
-import * as _backstage_core_plugin_api_alpha from '@backstage/core-plugin-api/alpha';
+import * as _backstage_frontend_plugin_api from '@backstage/frontend-plugin-api';
 
 /**
  * A Tekton plugin.
@@ -33,7 +33,7 @@ declare const isTektonCIAvailable: (entity: Entity) => boolean;
  * Tekton translation reference.
  * @public
  */
-declare const tektonTranslationRef: _backstage_core_plugin_api_alpha.TranslationRef<"tekton", {
+declare const tektonTranslationRef: _backstage_frontend_plugin_api.TranslationRef<"tekton", {
     readonly "errorPanel.title": "There was a problem retrieving Kubernetes objects";
     readonly "errorPanel.description": "There was a problem retrieving some Kubernetes resources for the entity: {{entityName}}. This could mean that the Error Reporting card is not completely accurate.";
     readonly "permissionAlert.title": "Permission required";
@@ -109,6 +109,6 @@ declare const tektonTranslationRef: _backstage_core_plugin_api_alpha.Translation
  * The translation resource for the Tekton plugin
  * @public
  */
-declare const tektonTranslations: _backstage_core_plugin_api_alpha.TranslationResource<"tekton">;
+declare const tektonTranslations: _backstage_frontend_plugin_api.TranslationResource<"tekton">;
 
 export { TektonCI, isTektonCIAvailable, tektonPlugin, tektonTranslationRef, tektonTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-tekton",
-  "version": "3.33.2",
+  "version": "3.34.1",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
@@ -60,18 +60,18 @@
   },
   "dependencies": {
     "@aonic-ui/pipelines": "^3.1.0",
-    "@backstage-community/plugin-tekton-common": "^1.16.0",
-    "@backstage-community/plugin-tekton-react": "^0.1.2",
+    "@backstage-community/plugin-tekton-common": "^1.17.0",
+    "@backstage-community/plugin-tekton-react": "^0.2.0",
     "@backstage/catalog-model": "^1.7.6",
-    "@backstage/core-components": "^0.18.3",
-    "@backstage/core-plugin-api": "^1.12.0",
-    "@backstage/frontend-plugin-api": "^0.13.1",
-    "@backstage/plugin-catalog-react": "^1.21.3",
-    "@backstage/plugin-kubernetes-common": "^0.9.8",
-    "@backstage/plugin-kubernetes-react": "^0.5.13",
-    "@backstage/plugin-permission-react": "^0.4.38",
-    "@backstage/theme": "^0.7.0",
-    "@backstage/ui": "^0.9.1",
+    "@backstage/core-components": "^0.18.4",
+    "@backstage/core-plugin-api": "^1.12.1",
+    "@backstage/frontend-plugin-api": "^0.13.2",
+    "@backstage/plugin-catalog-react": "^1.21.4",
+    "@backstage/plugin-kubernetes-common": "^0.9.9",
+    "@backstage/plugin-kubernetes-react": "^0.5.14",
+    "@backstage/plugin-permission-react": "^0.4.39",
+    "@backstage/theme": "^0.7.1",
+    "@backstage/ui": "^0.10.0",
     "@kubernetes/client-node": "1.4.0",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.11.3",
@@ -95,9 +95,9 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
-    "@backstage/cli": "^0.34.5",
-    "@backstage/dev-utils": "^1.1.17",
-    "@backstage/test-utils": "^1.7.13",
+    "@backstage/cli": "^0.35.1",
+    "@backstage/dev-utils": "^1.1.18",
+    "@backstage/test-utils": "^1.7.14",
     "@playwright/test": "^1.57.0",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "14.3.1",