@backstage-community/plugin-tekton 3.23.0 → 3.25.0

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

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { Progress, InfoCard } from '@backstage/core-components';
 import { makeStyles, Box, Paper, Toolbar, Typography, Table, TableBody, TableRow, TableCell, TablePagination } from '@material-ui/core';
 import { ComputedStatus, pipelineRunStatus } from '@janus-idp/shared-react';
@@ -11,10 +12,12 @@ import 'classnames';
 import '../common/ResourceStatus.css.esm.js';
 import { StatusSelector } from '../common/StatusSelector.esm.js';
 import { TableExpandCollapse } from '../common/TableExpandCollapse.esm.js';
-import { PipelineRunColumnHeader } from './PipelineRunColumnHeader.esm.js';
+import { getPipelineRunColumnHeader } from './PipelineRunColumnHeader.esm.js';
 import { PipelineRunListSearchBar } from './PipelineRunListSearchBar.esm.js';
 import { PipelineRunTableBody } from './PipelineRunTableBody.esm.js';
 import { EnhancedTableHead } from './PipelineTableHeader.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -42,15 +45,22 @@ const WrapperInfoCard = ({
   allErrors,
   showClusterSelector = true,
   titleClassName
-}) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, allErrors && allErrors.length > 0 && /* @__PURE__ */ React__default.createElement(ErrorPanel, { allErrors }), /* @__PURE__ */ React__default.createElement(
-  InfoCard,
-  {
-    ...showClusterSelector && {
-      title: /* @__PURE__ */ React__default.createElement("div", { className: titleClassName }, /* @__PURE__ */ React__default.createElement(ClusterSelector, null), /* @__PURE__ */ React__default.createElement(StatusSelector, null), /* @__PURE__ */ React__default.createElement(TableExpandCollapse, null))
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  allErrors && allErrors.length > 0 && /* @__PURE__ */ jsx(ErrorPanel, { allErrors }),
+  /* @__PURE__ */ jsx(
+    InfoCard,
+    {
+      ...showClusterSelector && {
+        title: /* @__PURE__ */ jsxs("div", { className: titleClassName, children: [
+          /* @__PURE__ */ jsx(ClusterSelector, {}),
+          /* @__PURE__ */ jsx(StatusSelector, {}),
+          /* @__PURE__ */ jsx(TableExpandCollapse, {})
+        ] })
+      },
+      children
     }
-  },
-  children
-));
+  )
+] });
 const PipelineRunList = () => {
   const {
     loaded,
@@ -60,29 +70,31 @@ const PipelineRunList = () => {
     clusters,
     selectedCluster,
     selectedStatus
-  } = React__default.useContext(TektonResourcesContext);
-  const [search, setSearch] = React__default.useState("");
-  const [order, setOrder] = React__default.useState("desc");
-  const [orderBy, setOrderBy] = React__default.useState("status.startTime");
-  const [orderById, setOrderById] = React__default.useState("startTime");
-  const [page, setPage] = React__default.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React__default.useState(5);
-  const updateStateOnFilterChanges = React__default.useRef(false);
-  React__default.useEffect(() => {
+  } = useContext(TektonResourcesContext);
+  const [search, setSearch] = useState("");
+  const [order, setOrder] = useState("desc");
+  const [orderBy, setOrderBy] = useState("status.startTime");
+  const [orderById, setOrderById] = useState("startTime");
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const { t } = useTranslationRef(tektonTranslationRef);
+  const pipelineRunColumnHeader = getPipelineRunColumnHeader(t);
+  const updateStateOnFilterChanges = useRef(false);
+  useEffect(() => {
     if (updateStateOnFilterChanges.current) {
       setPage(0);
     } else {
       updateStateOnFilterChanges.current = true;
     }
   }, [selectedCluster, selectedStatus, search]);
-  const allPipelineRuns = React__default.useMemo(() => {
+  const allPipelineRuns = useMemo(() => {
     const plrs = watchResourcesData?.pipelineruns?.data?.map((d) => ({
       ...d,
       id: d.metadata.uid
     })) ?? [];
     return plrs;
   }, [watchResourcesData]);
-  const filteredPipelineRuns = React__default.useMemo(() => {
+  const filteredPipelineRuns = useMemo(() => {
     let plrs = allPipelineRuns;
     if (selectedStatus && selectedStatus !== ComputedStatus.All) {
       plrs = plrs.filter((plr) => pipelineRunStatus(plr) === selectedStatus);
@@ -97,13 +109,13 @@ const PipelineRunList = () => {
     plrs = plrs.sort(getComparator(order, orderBy, orderById));
     return plrs;
   }, [allPipelineRuns, selectedStatus, search, order, orderBy, orderById]);
-  const visibleRows = React__default.useMemo(() => {
+  const visibleRows = useMemo(() => {
     return filteredPipelineRuns.slice(
       page * rowsPerPage,
       page * rowsPerPage + rowsPerPage
     );
   }, [filteredPipelineRuns, page, rowsPerPage, order, orderById]);
-  const handleRequestSort = React__default.useCallback(
+  const handleRequestSort = useCallback(
     (_event, property, id) => {
       const isAsc = orderBy === property && order === "asc";
       setOrder(isAsc ? "desc" : "asc");
@@ -129,57 +141,69 @@ const PipelineRunList = () => {
     ...selectedClusterErrors ?? []
   ];
   if (!loaded && !responseError)
-    return /* @__PURE__ */ React__default.createElement("div", { "data-testid": "tekton-progress" }, /* @__PURE__ */ React__default.createElement(Progress, null));
-  return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx("div", { "data-testid": "tekton-progress", children: /* @__PURE__ */ jsx(Progress, {}) });
+  return /* @__PURE__ */ jsx(
     WrapperInfoCard,
     {
       allErrors,
       showClusterSelector: clusters.length > 0,
-      titleClassName: classes.title
-    },
-    /* @__PURE__ */ React__default.createElement(Box, null, /* @__PURE__ */ React__default.createElement(Paper, null, /* @__PURE__ */ React__default.createElement(Toolbar, null, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5", component: "h2" }, "Pipeline Runs"), /* @__PURE__ */ React__default.createElement(PipelineRunListSearchBar, { value: search, onChange: setSearch })), /* @__PURE__ */ React__default.createElement(
-      Table,
-      {
-        "aria-labelledby": "Pipeline Runs",
-        size: "small",
-        style: { width: "100%" }
-      },
-      /* @__PURE__ */ React__default.createElement(
-        EnhancedTableHead,
-        {
-          order,
-          orderBy,
-          orderById,
-          onRequestSort: handleRequestSort
-        }
-      ),
-      visibleRows?.length > 0 ? /* @__PURE__ */ React__default.createElement(TableBody, null, /* @__PURE__ */ React__default.createElement(PipelineRunTableBody, { rows: visibleRows }), emptyRows > 0 && /* @__PURE__ */ React__default.createElement(TableRow, { style: { height: 55 * emptyRows } }, /* @__PURE__ */ React__default.createElement(TableCell, { colSpan: PipelineRunColumnHeader.length })), /* @__PURE__ */ React__default.createElement(TableRow, { className: classes.footer }, /* @__PURE__ */ React__default.createElement(
-        TablePagination,
-        {
-          rowsPerPageOptions: [
-            { value: 5, label: "5 rows" },
-            { value: 10, label: "10 rows" },
-            { value: 25, label: "25 rows" }
-          ],
-          count: filteredPipelineRuns.length,
-          rowsPerPage,
-          page,
-          onPageChange: handleChangePage,
-          onRowsPerPageChange: handleChangeRowsPerPage,
-          labelRowsPerPage: null
-        }
-      ))) : /* @__PURE__ */ React__default.createElement("tbody", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: PipelineRunColumnHeader.length }, /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          "data-testid": "no-pipeline-runs",
-          className: classes.empty
-        },
-        "No Pipeline Runs found"
-      ))))
-    )))
+      titleClassName: classes.title,
+      children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Paper, { children: [
+        /* @__PURE__ */ jsxs(Toolbar, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", children: t("pipelineRunList.title") }),
+          /* @__PURE__ */ jsx(PipelineRunListSearchBar, { value: search, onChange: setSearch })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            "aria-labelledby": "Pipeline Runs",
+            size: "small",
+            style: { width: "100%" },
+            children: [
+              /* @__PURE__ */ jsx(
+                EnhancedTableHead,
+                {
+                  order,
+                  orderBy,
+                  orderById,
+                  onRequestSort: handleRequestSort
+                }
+              ),
+              visibleRows?.length > 0 ? /* @__PURE__ */ jsxs(TableBody, { children: [
+                /* @__PURE__ */ jsx(PipelineRunTableBody, { rows: visibleRows }),
+                emptyRows > 0 && /* @__PURE__ */ jsx(TableRow, { style: { height: 55 * emptyRows }, children: /* @__PURE__ */ jsx(TableCell, { colSpan: pipelineRunColumnHeader.length }) }),
+                /* @__PURE__ */ jsx(TableRow, { className: classes.footer, children: /* @__PURE__ */ jsx(
+                  TablePagination,
+                  {
+                    rowsPerPageOptions: [
+                      { value: 5, label: "5 rows" },
+                      { value: 10, label: "10 rows" },
+                      { value: 25, label: "25 rows" }
+                    ],
+                    count: filteredPipelineRuns.length,
+                    rowsPerPage,
+                    page,
+                    onPageChange: handleChangePage,
+                    onRowsPerPageChange: handleChangeRowsPerPage,
+                    labelRowsPerPage: null
+                  }
+                ) })
+              ] }) : /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: pipelineRunColumnHeader.length, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "no-pipeline-runs",
+                  className: classes.empty,
+                  children: t("pipelineRunList.noPipelineRuns")
+                }
+              ) }) }) })
+            ]
+          }
+        )
+      ] }) })
+    }
   );
 };
-var PipelineRunList$1 = React__default.memo(PipelineRunList);
+var PipelineRunList$1 = memo(PipelineRunList);
 
 export { PipelineRunList$1 as default };
 //# sourceMappingURL=PipelineRunList.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunList.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunList.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { InfoCard, Progress } from '@backstage/core-components';\n\nimport {\n  Box,\n  makeStyles,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TablePagination,\n  TableRow,\n  Toolbar,\n  Typography,\n} from '@material-ui/core';\n\nimport {\n  ComputedStatus,\n  PipelineRunKind,\n  pipelineRunStatus,\n} from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { ClusterErrors, Order } from '../../types/types';\nimport { getComparator } from '../../utils/tekton-utils';\nimport { ClusterSelector, ErrorPanel } from '../common';\nimport { StatusSelector } from '../common/StatusSelector';\nimport { TableExpandCollapse } from '../common/TableExpandCollapse';\nimport { PipelineRunColumnHeader } from './PipelineRunColumnHeader';\nimport { PipelineRunListSearchBar } from './PipelineRunListSearchBar';\nimport { PipelineRunTableBody } from './PipelineRunTableBody';\nimport { EnhancedTableHead } from './PipelineTableHeader';\n\ntype WrapperInfoCardProps = {\n  allErrors?: ClusterErrors;\n  showClusterSelector?: boolean;\n  titleClassName?: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    alignItems: 'start',\n    padding: theme.spacing(3, 0, 2.5, 2.5),\n  },\n  empty: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  title: {\n    display: 'flex',\n    gap: '20px',\n    alignItems: 'center',\n  },\n  footer: {\n    '&:nth-of-type(odd)': {\n      backgroundColor: `${theme.palette.background.paper}`,\n    },\n  },\n}));\n\nconst WrapperInfoCard = ({\n  children,\n  allErrors,\n  showClusterSelector = true,\n  titleClassName,\n}: React.PropsWithChildren<WrapperInfoCardProps>) => (\n  <>\n    {allErrors && allErrors.length > 0 && <ErrorPanel allErrors={allErrors} />}\n    <InfoCard\n      {...(showClusterSelector && {\n        title: (\n          <div className={titleClassName}>\n            <ClusterSelector />\n            <StatusSelector />\n            <TableExpandCollapse />\n          </div>\n        ),\n      })}\n    >\n      {children}\n    </InfoCard>\n  </>\n);\n\nconst PipelineRunList = () => {\n  const {\n    loaded,\n    responseError,\n    watchResourcesData,\n    selectedClusterErrors,\n    clusters,\n    selectedCluster,\n    selectedStatus,\n  } = React.useContext(TektonResourcesContext);\n  const [search, setSearch] = React.useState<string>('');\n  const [order, setOrder] = React.useState<Order>('desc');\n  const [orderBy, setOrderBy] = React.useState<string>('status.startTime');\n  const [orderById, setOrderById] = React.useState<string>('startTime'); // 2 columns have the same field\n  const [page, setPage] = React.useState<number>(0);\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(5);\n\n  // Jump to first page when cluster, status and search filter changed\n  const updateStateOnFilterChanges = React.useRef(false);\n  React.useEffect(() => {\n    if (updateStateOnFilterChanges.current) {\n      setPage(0);\n    } else {\n      updateStateOnFilterChanges.current = true;\n    }\n  }, [selectedCluster, selectedStatus, search]);\n\n  const allPipelineRuns = React.useMemo(() => {\n    const plrs =\n      watchResourcesData?.pipelineruns?.data?.map(d => ({\n        ...d,\n        id: d.metadata.uid,\n      })) ?? [];\n    return plrs as PipelineRunKind[];\n  }, [watchResourcesData]);\n\n  const filteredPipelineRuns = React.useMemo(() => {\n    let plrs = allPipelineRuns;\n\n    if (selectedStatus && selectedStatus !== ComputedStatus.All) {\n      plrs = plrs.filter(plr => pipelineRunStatus(plr) === selectedStatus);\n    }\n\n    if (search) {\n      const f = search.toLocaleUpperCase('en-US');\n      plrs = plrs.filter((plr: PipelineRunKind) => {\n        const n = plr.metadata?.name?.toLocaleUpperCase('en-US');\n        return n?.includes(f);\n      });\n    }\n\n    plrs = plrs.sort(getComparator(order, orderBy, orderById));\n\n    return plrs;\n  }, [allPipelineRuns, selectedStatus, search, order, orderBy, orderById]);\n\n  const visibleRows = React.useMemo(() => {\n    return filteredPipelineRuns.slice(\n      page * rowsPerPage,\n      page * rowsPerPage + rowsPerPage,\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filteredPipelineRuns, page, rowsPerPage, order, orderById]);\n\n  const handleRequestSort = React.useCallback(\n    (_event: React.MouseEvent<unknown>, property: string, id: string) => {\n      const isAsc = orderBy === property && order === 'asc';\n      setOrder(isAsc ? 'desc' : 'asc');\n      setOrderBy(property);\n      setOrderById(id);\n    },\n    [order, orderBy],\n  );\n\n  const handleChangePage = (_event: unknown, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const handleChangeRowsPerPage = (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    setRowsPerPage(parseInt(event.target.value, 10));\n    setPage(0);\n  };\n\n  // Avoid a layout jump when reaching the last page with empty rows.\n  const emptyRows =\n    page > 0\n      ? Math.max(\n          0,\n          (1 + page) * rowsPerPage - (filteredPipelineRuns.length ?? 0),\n        )\n      : 0;\n\n  const classes = useStyles();\n\n  const allErrors: ClusterErrors = [\n    ...(responseError ? [{ message: responseError }] : []),\n    ...(selectedClusterErrors ?? []),\n  ];\n\n  if (!loaded && !responseError)\n    return (\n      <div data-testid=\"tekton-progress\">\n        <Progress />\n      </div>\n    );\n\n  return (\n    <WrapperInfoCard\n      allErrors={allErrors}\n      showClusterSelector={clusters.length > 0}\n      titleClassName={classes.title}\n    >\n      <Box>\n        <Paper>\n          <Toolbar>\n            <Typography variant=\"h5\" component=\"h2\">\n              Pipeline Runs\n            </Typography>\n            <PipelineRunListSearchBar value={search} onChange={setSearch} />\n          </Toolbar>\n          <Table\n            aria-labelledby=\"Pipeline Runs\"\n            size=\"small\"\n            style={{ width: '100%' }}\n          >\n            <EnhancedTableHead\n              order={order}\n              orderBy={orderBy}\n              orderById={orderById}\n              onRequestSort={handleRequestSort}\n            />\n            {visibleRows?.length > 0 ? (\n              <TableBody>\n                <PipelineRunTableBody rows={visibleRows} />\n                {emptyRows > 0 && (\n                  <TableRow style={{ height: 55 * emptyRows }}>\n                    <TableCell colSpan={PipelineRunColumnHeader.length} />\n                  </TableRow>\n                )}\n                <TableRow className={classes.footer}>\n                  <TablePagination\n                    rowsPerPageOptions={[\n                      { value: 5, label: '5 rows' },\n                      { value: 10, label: '10 rows' },\n                      { value: 25, label: '25 rows' },\n                    ]}\n                    count={filteredPipelineRuns.length}\n                    rowsPerPage={rowsPerPage}\n                    page={page}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                    labelRowsPerPage={null}\n                  />\n                </TableRow>\n              </TableBody>\n            ) : (\n              <tbody>\n                <tr>\n                  <td colSpan={PipelineRunColumnHeader.length}>\n                    <div\n                      data-testid=\"no-pipeline-runs\"\n                      className={classes.empty}\n                    >\n                      No Pipeline Runs found\n                    </div>\n                  </td>\n                </tr>\n              </tbody>\n            )}\n          </Table>\n        </Paper>\n      </Box>\n    </WrapperInfoCard>\n  );\n};\n\nexport default React.memo(PipelineRunList);\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"PipelineRunList.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunList.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 { PropsWithChildren, MouseEvent, ChangeEvent } from 'react';\n\nimport {\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n  useMemo,\n  useCallback,\n  memo,\n} from 'react';\n\nimport { InfoCard, Progress } from '@backstage/core-components';\n\nimport {\n  Box,\n  makeStyles,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TablePagination,\n  TableRow,\n  Toolbar,\n  Typography,\n} from '@material-ui/core';\n\nimport {\n  ComputedStatus,\n  PipelineRunKind,\n  pipelineRunStatus,\n} from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { ClusterErrors, Order } from '../../types/types';\nimport { getComparator } from '../../utils/tekton-utils';\nimport { ClusterSelector, ErrorPanel } from '../common';\nimport { StatusSelector } from '../common/StatusSelector';\nimport { TableExpandCollapse } from '../common/TableExpandCollapse';\nimport { getPipelineRunColumnHeader } from './PipelineRunColumnHeader';\nimport { PipelineRunListSearchBar } from './PipelineRunListSearchBar';\nimport { PipelineRunTableBody } from './PipelineRunTableBody';\nimport { EnhancedTableHead } from './PipelineTableHeader';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\ntype WrapperInfoCardProps = {\n  allErrors?: ClusterErrors;\n  showClusterSelector?: boolean;\n  titleClassName?: string;\n};\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    alignItems: 'start',\n    padding: theme.spacing(3, 0, 2.5, 2.5),\n  },\n  empty: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  title: {\n    display: 'flex',\n    gap: '20px',\n    alignItems: 'center',\n  },\n  footer: {\n    '&:nth-of-type(odd)': {\n      backgroundColor: `${theme.palette.background.paper}`,\n    },\n  },\n}));\n\nconst WrapperInfoCard = ({\n  children,\n  allErrors,\n  showClusterSelector = true,\n  titleClassName,\n}: PropsWithChildren<WrapperInfoCardProps>) => (\n  <>\n    {allErrors && allErrors.length > 0 && <ErrorPanel allErrors={allErrors} />}\n    <InfoCard\n      {...(showClusterSelector && {\n        title: (\n          <div className={titleClassName}>\n            <ClusterSelector />\n            <StatusSelector />\n            <TableExpandCollapse />\n          </div>\n        ),\n      })}\n    >\n      {children}\n    </InfoCard>\n  </>\n);\n\nconst PipelineRunList = () => {\n  const {\n    loaded,\n    responseError,\n    watchResourcesData,\n    selectedClusterErrors,\n    clusters,\n    selectedCluster,\n    selectedStatus,\n  } = useContext(TektonResourcesContext);\n  const [search, setSearch] = useState<string>('');\n  const [order, setOrder] = useState<Order>('desc');\n  const [orderBy, setOrderBy] = useState<string>('status.startTime');\n  const [orderById, setOrderById] = useState<string>('startTime'); // 2 columns have the same field\n  const [page, setPage] = useState<number>(0);\n  const [rowsPerPage, setRowsPerPage] = useState<number>(5);\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const pipelineRunColumnHeader = getPipelineRunColumnHeader(t);\n\n  // Jump to first page when cluster, status and search filter changed\n  const updateStateOnFilterChanges = useRef(false);\n  useEffect(() => {\n    if (updateStateOnFilterChanges.current) {\n      setPage(0);\n    } else {\n      updateStateOnFilterChanges.current = true;\n    }\n  }, [selectedCluster, selectedStatus, search]);\n\n  const allPipelineRuns = useMemo(() => {\n    const plrs =\n      watchResourcesData?.pipelineruns?.data?.map(d => ({\n        ...d,\n        id: d.metadata.uid,\n      })) ?? [];\n    return plrs as PipelineRunKind[];\n  }, [watchResourcesData]);\n\n  const filteredPipelineRuns = useMemo(() => {\n    let plrs = allPipelineRuns;\n\n    if (selectedStatus && selectedStatus !== ComputedStatus.All) {\n      plrs = plrs.filter(plr => pipelineRunStatus(plr) === selectedStatus);\n    }\n\n    if (search) {\n      const f = search.toLocaleUpperCase('en-US');\n      plrs = plrs.filter((plr: PipelineRunKind) => {\n        const n = plr.metadata?.name?.toLocaleUpperCase('en-US');\n        return n?.includes(f);\n      });\n    }\n\n    plrs = plrs.sort(getComparator(order, orderBy, orderById));\n\n    return plrs;\n  }, [allPipelineRuns, selectedStatus, search, order, orderBy, orderById]);\n\n  const visibleRows = useMemo(() => {\n    return filteredPipelineRuns.slice(\n      page * rowsPerPage,\n      page * rowsPerPage + rowsPerPage,\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [filteredPipelineRuns, page, rowsPerPage, order, orderById]);\n\n  const handleRequestSort = useCallback(\n    (_event: MouseEvent<unknown>, property: string, id: string) => {\n      const isAsc = orderBy === property && order === 'asc';\n      setOrder(isAsc ? 'desc' : 'asc');\n      setOrderBy(property);\n      setOrderById(id);\n    },\n    [order, orderBy],\n  );\n\n  const handleChangePage = (_event: unknown, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {\n    setRowsPerPage(parseInt(event.target.value, 10));\n    setPage(0);\n  };\n\n  // Avoid a layout jump when reaching the last page with empty rows.\n  const emptyRows =\n    page > 0\n      ? Math.max(\n          0,\n          (1 + page) * rowsPerPage - (filteredPipelineRuns.length ?? 0),\n        )\n      : 0;\n\n  const classes = useStyles();\n\n  const allErrors: ClusterErrors = [\n    ...(responseError ? [{ message: responseError }] : []),\n    ...(selectedClusterErrors ?? []),\n  ];\n\n  if (!loaded && !responseError)\n    return (\n      <div data-testid=\"tekton-progress\">\n        <Progress />\n      </div>\n    );\n\n  return (\n    <WrapperInfoCard\n      allErrors={allErrors}\n      showClusterSelector={clusters.length > 0}\n      titleClassName={classes.title}\n    >\n      <Box>\n        <Paper>\n          <Toolbar>\n            <Typography variant=\"h5\" component=\"h2\">\n              {t('pipelineRunList.title')}\n            </Typography>\n            <PipelineRunListSearchBar value={search} onChange={setSearch} />\n          </Toolbar>\n          <Table\n            aria-labelledby=\"Pipeline Runs\"\n            size=\"small\"\n            style={{ width: '100%' }}\n          >\n            <EnhancedTableHead\n              order={order}\n              orderBy={orderBy}\n              orderById={orderById}\n              onRequestSort={handleRequestSort}\n            />\n            {visibleRows?.length > 0 ? (\n              <TableBody>\n                <PipelineRunTableBody rows={visibleRows} />\n                {emptyRows > 0 && (\n                  <TableRow style={{ height: 55 * emptyRows }}>\n                    <TableCell colSpan={pipelineRunColumnHeader.length} />\n                  </TableRow>\n                )}\n                <TableRow className={classes.footer}>\n                  <TablePagination\n                    rowsPerPageOptions={[\n                      { value: 5, label: '5 rows' },\n                      { value: 10, label: '10 rows' },\n                      { value: 25, label: '25 rows' },\n                    ]}\n                    count={filteredPipelineRuns.length}\n                    rowsPerPage={rowsPerPage}\n                    page={page}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                    labelRowsPerPage={null}\n                  />\n                </TableRow>\n              </TableBody>\n            ) : (\n              <tbody>\n                <tr>\n                  <td colSpan={pipelineRunColumnHeader.length}>\n                    <div\n                      data-testid=\"no-pipeline-runs\"\n                      className={classes.empty}\n                    >\n                      {t('pipelineRunList.noPipelineRuns')}\n                    </div>\n                  </td>\n                </tr>\n              </tbody>\n            )}\n          </Table>\n        </Paper>\n      </Box>\n    </WrapperInfoCard>\n  );\n};\n\nexport default memo(PipelineRunList);\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,9 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { makeStyles, FormControl, Input, InputAdornment, IconButton } from '@material-ui/core';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { tektonTranslationRef } from '../../translation.esm.js';
 
 const useStyles = makeStyles({
   formControl: {
@@ -14,28 +16,29 @@ const PipelineRunListSearchBar = ({
   onChange
 }) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React__default.createElement(FormControl, { className: classes.formControl }, /* @__PURE__ */ React__default.createElement(
+  const { t } = useTranslationRef(tektonTranslationRef);
+  return /* @__PURE__ */ jsx(FormControl, { className: classes.formControl, children: /* @__PURE__ */ jsx(
     Input,
     {
       "aria-label": "search",
-      placeholder: "Search",
+      placeholder: t("pipelineRunList.searchBarPlaceholder"),
       autoComplete: "off",
       onChange: (event) => onChange(event.target.value),
       value,
-      startAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React__default.createElement(Search, null)),
-      endAdornment: /* @__PURE__ */ React__default.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React__default.createElement(
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, {}) }),
+      endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
         IconButton,
         {
           "aria-label": "clear search",
           onClick: () => onChange(""),
           edge: "end",
           disabled: !value,
-          "data-testid": "clear-search"
-        },
-        /* @__PURE__ */ React__default.createElement(Clear, null)
-      ))
+          "data-testid": "clear-search",
+          children: /* @__PURE__ */ jsx(Clear, {})
+        }
+      ) })
     }
-  ));
+  ) });
 };
 
 export { PipelineRunListSearchBar };

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunListSearchBar.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunListSearchBar.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport {\n  FormControl,\n  IconButton,\n  Input,\n  InputAdornment,\n  makeStyles,\n} from '@material-ui/core';\nimport Clear from '@material-ui/icons/Clear';\nimport Search from '@material-ui/icons/Search';\n\ntype PipelineRunListSearchBarProps = {\n  value: string;\n  onChange: (filter: string) => void;\n};\n\nconst useStyles = makeStyles({\n  formControl: {\n    alignItems: 'flex-end',\n    flexGrow: 1,\n  },\n});\n\nexport const PipelineRunListSearchBar = ({\n  value,\n  onChange,\n}: PipelineRunListSearchBarProps) => {\n  const classes = useStyles();\n\n  return (\n    <FormControl className={classes.formControl}>\n      <Input\n        aria-label=\"search\"\n        placeholder=\"Search\"\n        autoComplete=\"off\"\n        onChange={event => onChange(event.target.value)}\n        value={value}\n        startAdornment={\n          <InputAdornment position=\"start\">\n            <Search />\n          </InputAdornment>\n        }\n        endAdornment={\n          <InputAdornment position=\"end\">\n            <IconButton\n              aria-label=\"clear search\"\n              onClick={() => onChange('')}\n              edge=\"end\"\n              disabled={!value}\n              data-testid=\"clear-search\"\n            >\n              <Clear />\n            </IconButton>\n          </InputAdornment>\n        }\n      />\n    </FormControl>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAgCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAEM,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,UAAU,SAAU,EAAA;AAE1B,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,QAAA;AAAA,MACX,WAAY,EAAA,QAAA;AAAA,MACZ,YAAa,EAAA,KAAA;AAAA,MACb,QAAU,EAAA,CAAA,KAAA,KAAS,QAAS,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC9C,KAAA;AAAA,MACA,gCACGA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,UAAS,OACvB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,YAAO,CACV,CAAA;AAAA,MAEF,YACE,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,cAAA;AAAA,UACX,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,UAC1B,IAAK,EAAA,KAAA;AAAA,UACL,UAAU,CAAC,KAAA;AAAA,UACX,aAAY,EAAA;AAAA,SAAA;AAAA,qDAEX,KAAM,EAAA,IAAA;AAAA,OAEX;AAAA;AAAA,GAGN,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PipelineRunListSearchBar.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunListSearchBar.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 {\n  FormControl,\n  IconButton,\n  Input,\n  InputAdornment,\n  makeStyles,\n} from '@material-ui/core';\nimport Clear from '@material-ui/icons/Clear';\nimport Search from '@material-ui/icons/Search';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translation';\n\ntype PipelineRunListSearchBarProps = {\n  value: string;\n  onChange: (filter: string) => void;\n};\n\nconst useStyles = makeStyles({\n  formControl: {\n    alignItems: 'flex-end',\n    flexGrow: 1,\n  },\n});\n\nexport const PipelineRunListSearchBar = ({\n  value,\n  onChange,\n}: PipelineRunListSearchBarProps) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <FormControl className={classes.formControl}>\n      <Input\n        aria-label=\"search\"\n        placeholder={t('pipelineRunList.searchBarPlaceholder')}\n        autoComplete=\"off\"\n        onChange={event => onChange(event.target.value)}\n        value={value}\n        startAdornment={\n          <InputAdornment position=\"start\">\n            <Search />\n          </InputAdornment>\n        }\n        endAdornment={\n          <InputAdornment position=\"end\">\n            <IconButton\n              aria-label=\"clear search\"\n              onClick={() => onChange('')}\n              edge=\"end\"\n              disabled={!value}\n              data-testid=\"clear-search\"\n            >\n              <Clear />\n            </IconButton>\n          </InputAdornment>\n        }\n      />\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAgCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,WAAa,EAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAU,EAAA;AAAA;AAEd,CAAC,CAAA;AAEM,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACG,GAAA,CAAA,WAAA,EAAA,EAAY,SAAW,EAAA,OAAA,CAAQ,WAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,QAAA;AAAA,MACX,WAAA,EAAa,EAAE,sCAAsC,CAAA;AAAA,MACrD,YAAa,EAAA,KAAA;AAAA,MACb,QAAU,EAAA,CAAA,KAAA,KAAS,QAAS,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC9C,KAAA;AAAA,MACA,gCACG,GAAA,CAAA,cAAA,EAAA,EAAe,UAAS,OACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAO,CACV,EAAA,CAAA;AAAA,MAEF,YACE,kBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAS,KACvB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,cAAA;AAAA,UACX,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,UAC1B,IAAK,EAAA,KAAA;AAAA,UACL,UAAU,CAAC,KAAA;AAAA,UACX,aAAY,EAAA,cAAA;AAAA,UAEZ,8BAAC,KAAM,EAAA,EAAA;AAAA;AAAA,OAEX,EAAA;AAAA;AAAA,GAGN,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,19 +1,25 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useCallback } from 'react';
 import { Progress } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { usePipelineRunOutput, Output } from '@aonic-ui/pipelines';
 import { Grid, Paper, Typography } from '@material-ui/core';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
 import { kubernetesProxyApiRef } from '../../types/types.esm.js';
+import { tektonTranslationRef } from '../../translation.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const PipelineRunOutput = ({
   pipelineRun,
   taskRuns
 }) => {
-  const { clusters, selectedCluster } = React__default.useContext(TektonResourcesContext);
+  const { clusters, selectedCluster } = useContext(
+    TektonResourcesContext
+  );
   const kubernetesProxyApi = useApi(kubernetesProxyApiRef);
+  const { t } = useTranslationRef(tektonTranslationRef);
   const currCluster = clusters.length > 0 && clusters[selectedCluster || 0] || "";
-  const getLogs = React__default.useCallback(
+  const getLogs = useCallback(
     async (podName, containerName) => {
       return await kubernetesProxyApi.getPodLogs({
         podName,
@@ -34,16 +40,16 @@ const PipelineRunOutput = ({
   const noDataAvailable = outputGroup?.ec?.data.length === 0 && outputGroup.results.data.length === 0 && isEmpty(outputGroup?.acsImageScan?.data) && isEmpty(outputGroup?.acsImageScan?.data) && isEmpty(outputGroup?.acsImageScan?.data);
   const renderOutput = () => {
     if (stillLoading && noDataAvailable) {
-      return /* @__PURE__ */ React__default.createElement(Progress, null);
+      return /* @__PURE__ */ jsx(Progress, {});
     }
     if (!stillLoading && noDataAvailable) {
-      return /* @__PURE__ */ React__default.createElement(Typography, { align: "center", variant: "body2" }, "No output found");
+      return /* @__PURE__ */ jsx(Typography, { align: "center", variant: "body2", children: t("pipelineRunOutput.noOutput") });
     }
     const metadata = outputGroup?.acsImageCheck?.data?.results?.[0]?.metadata?.additionalInfo;
     if (metadata?.name?.includes("@")) {
       metadata.name = metadata?.name.substr(0, metadata?.name.lastIndexOf("@"));
     }
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       Output,
       {
         enterpriseContractPolicies: outputGroup?.ec?.data ?? [],
@@ -56,14 +62,14 @@ const PipelineRunOutput = ({
       }
     );
   };
-  return /* @__PURE__ */ React__default.createElement(Grid, null, /* @__PURE__ */ React__default.createElement("div", { style: { height: "80vh" } }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx("div", { style: { height: "80vh" }, children: /* @__PURE__ */ jsx(
     Paper,
     {
       elevation: 1,
-      style: { height: "100%", width: "100%", minHeight: "30rem" }
-    },
-    renderOutput()
-  )));
+      style: { height: "100%", width: "100%", minHeight: "30rem" },
+      children: renderOutput()
+    }
+  ) }) });
 };
 
 export { PipelineRunOutput as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunOutput.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunOutput.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport {\n  ACSCheckResults,\n  ACSImageScanResult,\n  Output,\n  PipelineRunKind as PipelineRunV1Kind,\n  TaskRunKind as TaskRunV1Kind,\n  usePipelineRunOutput,\n} from '@aonic-ui/pipelines';\nimport { Grid, Paper, Typography } from '@material-ui/core';\n\nimport { PipelineRunKind, TaskRunKind } from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport {\n  kubernetesProxyApiRef,\n  TektonResourcesContextData,\n} from '../../types/types';\n\ntype PipelineRunOutputProps = {\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n};\n\nconst PipelineRunOutput: React.FC<PipelineRunOutputProps> = ({\n  pipelineRun,\n  taskRuns,\n}) => {\n  const { clusters, selectedCluster } =\n    React.useContext<TektonResourcesContextData>(TektonResourcesContext);\n  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);\n\n  const currCluster =\n    (clusters.length > 0 && clusters[selectedCluster || 0]) || '';\n\n  const getLogs = React.useCallback(\n    async (podName: string, containerName: string): Promise<string> => {\n      return await kubernetesProxyApi\n        .getPodLogs({\n          podName: podName,\n          namespace: pipelineRun?.metadata?.namespace ?? '',\n          containerName: containerName,\n          clusterName: currCluster,\n        })\n        .then(res => res?.text);\n    },\n    [kubernetesProxyApi, currCluster, pipelineRun],\n  );\n\n  const outputGroup = usePipelineRunOutput(\n    pipelineRun as PipelineRunV1Kind,\n    taskRuns as TaskRunV1Kind[],\n    getLogs,\n  );\n\n  const stillLoading =\n    outputGroup?.ec?.loading &&\n    (outputGroup?.acsImageScan?.loading ||\n      outputGroup?.acsImageCheck?.loading ||\n      outputGroup?.acsDeploymentCheck?.loading);\n\n  const isEmpty = (data: ACSCheckResults | ACSImageScanResult) =>\n    Object.keys(data).length === 0;\n  const noDataAvailable =\n    outputGroup?.ec?.data.length === 0 &&\n    outputGroup.results.data.length === 0 &&\n    isEmpty(outputGroup?.acsImageScan?.data) &&\n    isEmpty(outputGroup?.acsImageScan?.data) &&\n    isEmpty(outputGroup?.acsImageScan?.data);\n\n  const renderOutput = () => {\n    if (stillLoading && noDataAvailable) {\n      return <Progress />;\n    }\n\n    if (!stillLoading && noDataAvailable) {\n      return (\n        <Typography align=\"center\" variant=\"body2\">\n          No output found\n        </Typography>\n      );\n    }\n\n    const metadata =\n      outputGroup?.acsImageCheck?.data?.results?.[0]?.metadata?.additionalInfo;\n    if (metadata?.name?.includes('@')) {\n      metadata.name = metadata?.name.substr(0, metadata?.name.lastIndexOf('@'));\n    }\n\n    return (\n      <Output\n        enterpriseContractPolicies={outputGroup?.ec?.data ?? []}\n        acsImageScanResult={outputGroup?.acsImageScan?.data}\n        acsImageCheckResults={outputGroup?.acsImageCheck?.data}\n        acsDeploymentCheckResults={outputGroup?.acsDeploymentCheck?.data}\n        pipelineRunName={pipelineRun?.metadata?.name ?? ''}\n        pipelineRunStatus={outputGroup.status}\n        results={outputGroup.results.data}\n      />\n    );\n  };\n\n  return (\n    <Grid>\n      <div style={{ height: '80vh' }}>\n        <Paper\n          elevation={1}\n          style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n        >\n          {renderOutput()}\n        </Paper>\n      </div>\n    </Grid>\n  );\n};\nexport default PipelineRunOutput;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"PipelineRunOutput.esm.js","sources":["../../../src/components/PipelineRunList/PipelineRunOutput.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 { useContext, useCallback } from 'react';\n\nimport { Progress } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\n\nimport {\n  ACSCheckResults,\n  ACSImageScanResult,\n  Output,\n  PipelineRunKind as PipelineRunV1Kind,\n  TaskRunKind as TaskRunV1Kind,\n  usePipelineRunOutput,\n} from '@aonic-ui/pipelines';\nimport { Grid, Paper, Typography } from '@material-ui/core';\n\nimport { PipelineRunKind, TaskRunKind } from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport {\n  kubernetesProxyApiRef,\n  TektonResourcesContextData,\n} from '../../types/types';\nimport { tektonTranslationRef } from '../../translation';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\ntype PipelineRunOutputProps = {\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n};\n\nconst PipelineRunOutput: FC<PipelineRunOutputProps> = ({\n  pipelineRun,\n  taskRuns,\n}) => {\n  const { clusters, selectedCluster } = useContext<TektonResourcesContextData>(\n    TektonResourcesContext,\n  );\n  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const currCluster =\n    (clusters.length > 0 && clusters[selectedCluster || 0]) || '';\n\n  const getLogs = useCallback(\n    async (podName: string, containerName: string): Promise<string> => {\n      return await kubernetesProxyApi\n        .getPodLogs({\n          podName: podName,\n          namespace: pipelineRun?.metadata?.namespace ?? '',\n          containerName: containerName,\n          clusterName: currCluster,\n        })\n        .then(res => res?.text);\n    },\n    [kubernetesProxyApi, currCluster, pipelineRun],\n  );\n\n  const outputGroup = usePipelineRunOutput(\n    pipelineRun as PipelineRunV1Kind,\n    taskRuns as TaskRunV1Kind[],\n    getLogs,\n  );\n\n  const stillLoading =\n    outputGroup?.ec?.loading &&\n    (outputGroup?.acsImageScan?.loading ||\n      outputGroup?.acsImageCheck?.loading ||\n      outputGroup?.acsDeploymentCheck?.loading);\n\n  const isEmpty = (data: ACSCheckResults | ACSImageScanResult) =>\n    Object.keys(data).length === 0;\n  const noDataAvailable =\n    outputGroup?.ec?.data.length === 0 &&\n    outputGroup.results.data.length === 0 &&\n    isEmpty(outputGroup?.acsImageScan?.data) &&\n    isEmpty(outputGroup?.acsImageScan?.data) &&\n    isEmpty(outputGroup?.acsImageScan?.data);\n\n  const renderOutput = () => {\n    if (stillLoading && noDataAvailable) {\n      return <Progress />;\n    }\n\n    if (!stillLoading && noDataAvailable) {\n      return (\n        <Typography align=\"center\" variant=\"body2\">\n          {t('pipelineRunOutput.noOutput')}\n        </Typography>\n      );\n    }\n\n    const metadata =\n      outputGroup?.acsImageCheck?.data?.results?.[0]?.metadata?.additionalInfo;\n    if (metadata?.name?.includes('@')) {\n      metadata.name = metadata?.name.substr(0, metadata?.name.lastIndexOf('@'));\n    }\n\n    return (\n      <Output\n        enterpriseContractPolicies={outputGroup?.ec?.data ?? []}\n        acsImageScanResult={outputGroup?.acsImageScan?.data}\n        acsImageCheckResults={outputGroup?.acsImageCheck?.data}\n        acsDeploymentCheckResults={outputGroup?.acsDeploymentCheck?.data}\n        pipelineRunName={pipelineRun?.metadata?.name ?? ''}\n        pipelineRunStatus={outputGroup.status}\n        results={outputGroup.results.data}\n      />\n    );\n  };\n\n  return (\n    <Grid>\n      <div style={{ height: '80vh' }}>\n        <Paper\n          elevation={1}\n          style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n        >\n          {renderOutput()}\n        </Paper>\n      </div>\n    </Grid>\n  );\n};\nexport default PipelineRunOutput;\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, Fragment } from 'react';
 import { makeStyles, TableRow, TableCell, IconButton, Collapse, Box } from '@material-ui/core';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
@@ -13,6 +14,8 @@ import '../../consts/pipeline-topology-const.esm.js';
 import '../pipeline-topology/PipelineTaskNode.esm.js';
 import '../pipeline-topology/TaskGroupEdge.esm.js';
 import '../pipeline-topology/PipelineVisualization.css.esm.js';
+import '@backstage/core-plugin-api/alpha';
+import '../../translation.esm.js';
 import { PipelineRunVisualization } from '../pipeline-topology/PipelineRunVisualization.esm.js';
 import PipelineRunRowActions from './PipelineRunRowActions.esm.js';
 import PipelineRunTaskStatus from './PipelineRunTaskStatus.esm.js';
@@ -43,24 +46,24 @@ const PipelineRunName = ({ row }) => {
   const classes = useStyles();
   const name = row.metadata?.name;
   const signed = row?.metadata?.annotations?.[TEKTON_SIGNED_ANNOTATION] === "true";
-  return /* @__PURE__ */ React__default.createElement("div", null, name ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx("div", { children: name ? /* @__PURE__ */ jsx(
     ResourceBadge,
     {
       color: tektonGroupColor,
       abbr: "PLR",
       name: name || "",
-      suffix: signed ? /* @__PURE__ */ React__default.createElement(Tooltip, { content: "Signed" }, /* @__PURE__ */ React__default.createElement(
+      suffix: signed ? /* @__PURE__ */ jsx(Tooltip, { content: "Signed", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: classNames(
             classes.signedIndicator,
             "signed-indicator"
-          )
-        },
-        /* @__PURE__ */ React__default.createElement(SignedBadgeIcon, null)
-      )) : null
+          ),
+          children: /* @__PURE__ */ jsx(SignedBadgeIcon, {})
+        }
+      ) }) : null
     }
-  ) : "-");
+  ) : "-" });
 };
 const PipelineRunRow = ({
   row,
@@ -71,7 +74,7 @@ const PipelineRunRow = ({
 }) => {
   const classes = useStyles();
   const uid = row.metadata?.uid;
-  React__default.useEffect(() => {
+  useEffect(() => {
     return setOpen((val) => {
       return {
         ...val,
@@ -89,21 +92,33 @@ const PipelineRunRow = ({
       };
     });
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: uid }, /* @__PURE__ */ React__default.createElement(TableRow, { className: classes.plrRow }, /* @__PURE__ */ React__default.createElement(TableCell, null, /* @__PURE__ */ React__default.createElement(
-    IconButton,
-    {
-      "aria-label": "expand row",
-      size: "small",
-      onClick: expandCollapseClickHandler
-    },
-    open ? /* @__PURE__ */ React__default.createElement(KeyboardArrowDownIcon, null) : /* @__PURE__ */ React__default.createElement(KeyboardArrowRightIcon, null)
-  )), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, /* @__PURE__ */ React__default.createElement(PipelineRunName, { row })), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, /* @__PURE__ */ React__default.createElement(PipelineRunVulnerabilities, { pipelineRun: row, condensed: true })), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, /* @__PURE__ */ React__default.createElement(PlrStatus, { obj: row })), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, /* @__PURE__ */ React__default.createElement(PipelineRunTaskStatus, { pipelineRun: row })), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, startTime ? /* @__PURE__ */ React__default.createElement(
-    Timestamp,
-    {
-      className: "bs-tkn-timestamp",
-      date: new Date(startTime)
-    }
-  ) : "-"), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, pipelineRunDuration(row)), /* @__PURE__ */ React__default.createElement(TableCell, { align: "left" }, /* @__PURE__ */ React__default.createElement(PipelineRunRowActions, { pipelineRun: row }))), /* @__PURE__ */ React__default.createElement(TableRow, { className: classes.plrVisRow }, /* @__PURE__ */ React__default.createElement(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: 8 }, /* @__PURE__ */ React__default.createElement(Collapse, { in: open, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React__default.createElement(Box, { marginTop: 1, marginBottom: 1 }, /* @__PURE__ */ React__default.createElement(PipelineRunVisualization, { pipelineRunName: row.metadata?.name }))))));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TableRow, { className: classes.plrRow, children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "expand row",
+          size: "small",
+          onClick: expandCollapseClickHandler,
+          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(
+        Timestamp,
+        {
+          className: "bs-tkn-timestamp",
+          date: new Date(startTime)
+        }
+      ) : "-" }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", children: pipelineRunDuration(row) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "left", 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 }) }) }) }) })
+  ] }, uid);
 };
 
 export { PipelineRunRow };