@backstage-community/plugin-tekton 3.39.0 → 3.40.0

package/dist/components/PipelineRunLogs/PipelineRunLogDialog.esm.js

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useState, useEffect } from 'react';
 import { ErrorBoundary } from '@backstage/core-components';
-import { Dialog, DialogTitle, Box, IconButton, DialogContent, makeStyles, createStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import { tektonGroupColor } from '../../types/types.esm.js';
 import ResourceBadge from '../PipelineRunList/ResourceBadge.esm.js';
@@ -11,21 +15,17 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    titleContainer: {
-      display: "flex",
-      alignItems: "center",
-      gap: theme.spacing(1)
-    },
-    closeButton: {
-      position: "absolute",
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  })
-);
+const titleContainerSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1
+};
+const closeButtonSx = {
+  position: "absolute",
+  right: (theme) => theme.spacing(1),
+  top: (theme) => theme.spacing(1),
+  color: (theme) => theme.palette.grey[500]
+};
 const PipelineRunLogDialog$1 = ({
   open,
   closeDialog,
@@ -35,7 +35,6 @@ const PipelineRunLogDialog$1 = ({
   activeTask,
   forSBOM
 }) => {
-  const classes = useStyles();
   const [task, setTask] = useState(activeTask);
   const { t } = useTranslationRef(tektonTranslationRef);
   useEffect(() => {
@@ -52,7 +51,7 @@ const PipelineRunLogDialog$1 = ({
       open,
       onClose: closeDialog,
       children: [
-        /* @__PURE__ */ jsx(DialogTitle, { id: "pipelinerun-logs", title: t("pipelineRunLogs.title"), children: /* @__PURE__ */ jsxs(Box, { className: classes.titleContainer, children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "pipelinerun-logs", title: t("pipelineRunLogs.title"), children: /* @__PURE__ */ jsxs(Box, { sx: titleContainerSx, children: [
           /* @__PURE__ */ jsx(
             ResourceBadge,
             {
@@ -65,7 +64,7 @@ const PipelineRunLogDialog$1 = ({
             IconButton,
             {
               "aria-label": "close",
-              className: classes.closeButton,
+              sx: closeButtonSx,
               onClick: closeDialog,
               children: /* @__PURE__ */ jsx(CloseIcon, {})
             }

package/dist/components/PipelineRunLogs/PipelineRunLogDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunLogDialog.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogDialog.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, useEffect, memo } from 'react';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport {\n  Box,\n  createStyles,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  makeStyles,\n  Theme,\n} from '@material-ui/core';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { tektonGroupColor } from '../../types/types';\nimport ResourceBadge from '../PipelineRunList/ResourceBadge';\nimport PipelineRunLogDownloader from './PipelineRunLogDownloader';\nimport PipelineRunLogs from './PipelineRunLogs';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    titleContainer: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n    },\n    closeButton: {\n      position: 'absolute',\n      right: theme.spacing(1),\n      top: theme.spacing(1),\n      color: theme.palette.grey[500],\n    },\n  }),\n);\n\ntype PipelineRunLogDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n  pods: V1Pod[];\n  activeTask?: string;\n  forSBOM?: boolean;\n};\nconst PipelineRunLogDialog = ({\n  open,\n  closeDialog,\n  pipelineRun,\n  pods,\n  taskRuns,\n  activeTask,\n  forSBOM,\n}: PipelineRunLogDialogProps) => {\n  const classes = useStyles();\n\n  const [task, setTask] = useState(activeTask);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    // If we trigger this dialog for the SBOM task, update the current active task.\n    if (forSBOM && activeTask) {\n      setTask(activeTask);\n    }\n  }, [forSBOM, activeTask]);\n\n  return (\n    <Dialog\n      data-testid=\"pipelinerun-logs-dialog\"\n      maxWidth=\"xl\"\n      fullWidth\n      open={open}\n      onClose={closeDialog}\n    >\n      <DialogTitle id=\"pipelinerun-logs\" title={t('pipelineRunLogs.title')}>\n        <Box className={classes.titleContainer}>\n          <ResourceBadge\n            color={tektonGroupColor}\n            abbr=\"PLR\"\n            name={pipelineRun?.metadata?.name ?? ''}\n          />\n          <IconButton\n            aria-label=\"close\"\n            className={classes.closeButton}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent>\n        <ErrorBoundary>\n          <PipelineRunLogDownloader\n            pods={pods}\n            activeTask={task}\n            pipelineRun={pipelineRun}\n          />\n          <PipelineRunLogs\n            pipelineRun={pipelineRun}\n            taskRuns={taskRuns}\n            pods={pods}\n            activeTask={task}\n            setActiveTask={setTask}\n          />\n        </ErrorBoundary>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default memo(PipelineRunLogDialog);\n"],"names":["PipelineRunLogDialog"],"mappings":";;;;;;;;;;;;;AA4CA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,KACtB;AAAA,IACA,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACtB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,GAAG;AAAA;AAC/B,GACD;AACH,CAAA;AAWA,MAAMA,yBAAuB,CAAC;AAAA,EAC5B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAiC;AAC/B,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,UAAU,CAAA;AAC3C,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,WAAW,UAAA,EAAY;AACzB,MAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,yBAAA;AAAA,MACZ,QAAA,EAAS,IAAA;AAAA,MACT,SAAA,EAAS,IAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,kBAAA,EAAmB,KAAA,EAAO,CAAA,CAAE,uBAAuB,CAAA,EACjE,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EACtB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,gBAAA;AAAA,cACP,IAAA,EAAK,KAAA;AAAA,cACL,IAAA,EAAM,WAAA,EAAa,QAAA,EAAU,IAAA,IAAQ;AAAA;AAAA,WACvC;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,OAAA;AAAA,cACX,WAAW,OAAA,CAAQ,WAAA;AAAA,cACnB,OAAA,EAAS,WAAA;AAAA,cAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,aAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,wBAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,UAAA,EAAY,IAAA;AAAA,cACZ;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,WAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,UAAA,EAAY,IAAA;AAAA,cACZ,aAAA,EAAe;AAAA;AAAA;AACjB,SAAA,EACF,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,2BAAe,KAAKA,sBAAoB,CAAA;;;;"}
+{"version":3,"file":"PipelineRunLogDialog.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogDialog.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, useEffect, memo } from 'react';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { tektonGroupColor } from '../../types/types';\nimport ResourceBadge from '../PipelineRunList/ResourceBadge';\nimport PipelineRunLogDownloader from './PipelineRunLogDownloader';\nimport PipelineRunLogs from './PipelineRunLogs';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst titleContainerSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n};\n\nconst closeButtonSx: SxProps<Theme> = {\n  position: 'absolute',\n  right: (theme: Theme) => theme.spacing(1),\n  top: (theme: Theme) => theme.spacing(1),\n  color: (theme: Theme) => theme.palette.grey[500],\n};\n\ntype PipelineRunLogDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n  pods: V1Pod[];\n  activeTask?: string;\n  forSBOM?: boolean;\n};\nconst PipelineRunLogDialog = ({\n  open,\n  closeDialog,\n  pipelineRun,\n  pods,\n  taskRuns,\n  activeTask,\n  forSBOM,\n}: PipelineRunLogDialogProps) => {\n  const [task, setTask] = useState(activeTask);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    // If we trigger this dialog for the SBOM task, update the current active task.\n    if (forSBOM && activeTask) {\n      setTask(activeTask);\n    }\n  }, [forSBOM, activeTask]);\n\n  return (\n    <Dialog\n      data-testid=\"pipelinerun-logs-dialog\"\n      maxWidth=\"xl\"\n      fullWidth\n      open={open}\n      onClose={closeDialog}\n    >\n      <DialogTitle id=\"pipelinerun-logs\" title={t('pipelineRunLogs.title')}>\n        <Box sx={titleContainerSx}>\n          <ResourceBadge\n            color={tektonGroupColor}\n            abbr=\"PLR\"\n            name={pipelineRun?.metadata?.name ?? ''}\n          />\n          <IconButton\n            aria-label=\"close\"\n            sx={closeButtonSx}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent>\n        <ErrorBoundary>\n          <PipelineRunLogDownloader\n            pods={pods}\n            activeTask={task}\n            pipelineRun={pipelineRun}\n          />\n          <PipelineRunLogs\n            pipelineRun={pipelineRun}\n            taskRuns={taskRuns}\n            pods={pods}\n            activeTask={task}\n            setActiveTask={setTask}\n          />\n        </ErrorBoundary>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default memo(PipelineRunLogDialog);\n"],"names":["PipelineRunLogDialog"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,MAAM,gBAAA,GAAmB;AAAA,EACvB,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK;AACP,CAAA;AAEA,MAAM,aAAA,GAAgC;AAAA,EACpC,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,CAAC,KAAA,KAAiB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,EACxC,GAAA,EAAK,CAAC,KAAA,KAAiB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,EACtC,OAAO,CAAC,KAAA,KAAiB,KAAA,CAAM,OAAA,CAAQ,KAAK,GAAG;AACjD,CAAA;AAWA,MAAMA,yBAAuB,CAAC;AAAA,EAC5B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,KAAiC;AAC/B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,UAAU,CAAA;AAC3C,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,WAAW,UAAA,EAAY;AACzB,MAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,yBAAA;AAAA,MACZ,QAAA,EAAS,IAAA;AAAA,MACT,SAAA,EAAS,IAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,kBAAA,EAAmB,KAAA,EAAO,CAAA,CAAE,uBAAuB,CAAA,EACjE,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,gBAAA,EACP,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,gBAAA;AAAA,cACP,IAAA,EAAK,KAAA;AAAA,cACL,IAAA,EAAM,WAAA,EAAa,QAAA,EAAU,IAAA,IAAQ;AAAA;AAAA,WACvC;AAAA,0BACA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,OAAA;AAAA,cACX,EAAA,EAAI,aAAA;AAAA,cACJ,OAAA,EAAS,WAAA;AAAA,cAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,aAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,wBAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,UAAA,EAAY,IAAA;AAAA,cACZ;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,WAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,UAAA,EAAY,IAAA;AAAA,cACZ,aAAA,EAAe;AAAA;AAAA;AACjB,SAAA,EACF,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,2BAAe,KAAKA,sBAAoB,CAAA;;;;"}

package/dist/components/PipelineRunLogs/PipelineRunLogViewer.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DismissableBanner, LogViewer } from '@backstage/core-components';
-import { Paper } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { usePodLogsOfPipelineRun } from '../../hooks/usePodLogsOfPipelineRun.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
@@ -47,7 +47,7 @@ ${value[idx].text}`
             Skeleton,
             {
               "data-testid": "logs-skeleton",
-              variant: "rect",
+              variant: "rectangular",
               width: "100%",
               height: "100%"
             }

package/dist/components/PipelineRunLogs/PipelineRunLogViewer.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunLogViewer.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogViewer.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 { DismissableBanner, LogViewer } from '@backstage/core-components';\nimport { V1Container, V1Pod } from '@kubernetes/client-node';\nimport { Paper } from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { usePodLogsOfPipelineRun } from '../../hooks/usePodLogsOfPipelineRun';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineRunLogViewerProps = { pod: V1Pod };\n\nconst PipelineRunLogViewer = ({ pod }: PipelineRunLogViewerProps) => {\n  const { value, error, loading } = usePodLogsOfPipelineRun({\n    pod,\n  });\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const containersList = pod?.spec?.containers || [];\n  let text = '';\n\n  text = containersList.reduce(\n    (acc: string, container: V1Container, idx: number) => {\n      if (container?.name && value?.[idx]?.text) {\n        return acc\n          .concat(\n            `${container.name.toLocaleUpperCase('en-US')}\\n${value[idx].text}`,\n          )\n          .concat(idx === containersList.length - 1 ? '' : '\\n');\n      }\n      return acc;\n    },\n    '',\n  );\n\n  return (\n    <>\n      {error && (\n        <DismissableBanner\n          message={error?.message}\n          variant=\"error\"\n          fixed={false}\n          id=\"pod-logs\"\n        />\n      )}\n      <Paper\n        elevation={1}\n        style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n      >\n        {loading && (\n          <Skeleton\n            data-testid=\"logs-skeleton\"\n            variant=\"rect\"\n            width=\"100%\"\n            height=\"100%\"\n          />\n        )}\n        {pod && !loading && (\n          <LogViewer text={text || t('pipelineRunLogs.noLogs')} />\n        )}\n      </Paper>\n    </>\n  );\n};\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      retry: 5,\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\nconst PipelineRunLogViewerWithQueryClient = ({\n  pod,\n}: PipelineRunLogViewerProps) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <PipelineRunLogViewer pod={pod} />\n    </QueryClientProvider>\n  );\n};\n\nexport { PipelineRunLogViewerWithQueryClient as PipelineRunLogViewer };\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,oBAAA,GAAuB,CAAC,EAAE,GAAA,EAAI,KAAiC;AACnE,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,OAAA,KAAY,uBAAA,CAAwB;AAAA,IACxD;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,cAAA,GAAiB,GAAA,EAAK,IAAA,EAAM,UAAA,IAAc,EAAC;AACjD,EAAA,IAAI,IAAA,GAAO,EAAA;AAEX,EAAA,IAAA,GAAO,cAAA,CAAe,MAAA;AAAA,IACpB,CAAC,GAAA,EAAa,SAAA,EAAwB,GAAA,KAAgB;AACpD,MAAA,IAAI,SAAA,EAAW,IAAA,IAAQ,KAAA,GAAQ,GAAG,GAAG,IAAA,EAAM;AACzC,QAAA,OAAO,GAAA,CACJ,MAAA;AAAA,UACC,CAAA,EAAG,SAAA,CAAU,IAAA,CAAK,iBAAA,CAAkB,OAAO,CAAC;AAAA,EAAK,KAAA,CAAM,GAAG,CAAA,CAAE,IAAI,CAAA;AAAA,UAEjE,MAAA,CAAO,GAAA,KAAQ,eAAe,MAAA,GAAS,CAAA,GAAI,KAAK,IAAI,CAAA;AAAA,MACzD;AACA,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,SAAS,KAAA,EAAO,OAAA;AAAA,QAChB,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAO,KAAA;AAAA,QACP,EAAA,EAAG;AAAA;AAAA,KACL;AAAA,oBAEF,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,CAAA;AAAA,QACX,OAAO,EAAE,MAAA,EAAQ,QAAQ,KAAA,EAAO,MAAA,EAAQ,WAAW,OAAA,EAAQ;AAAA,QAE1D,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,eAAA;AAAA,cACZ,OAAA,EAAQ,MAAA;AAAA,cACR,KAAA,EAAM,MAAA;AAAA,cACN,MAAA,EAAO;AAAA;AAAA,WACT;AAAA,UAED,GAAA,IAAO,CAAC,OAAA,oBACP,GAAA,CAAC,aAAU,IAAA,EAAM,IAAA,IAAQ,CAAA,CAAE,wBAAwB,CAAA,EAAG;AAAA;AAAA;AAAA;AAE1D,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,MAAM,WAAA,GAAc,IAAI,WAAA,CAAY;AAAA,EAClC,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,CAAA;AAAA,MACP,oBAAA,EAAsB;AAAA;AACxB;AAEJ,CAAC,CAAA;AAED,MAAM,sCAAsC,CAAC;AAAA,EAC3C;AACF,CAAA,KAAiC;AAC/B,EAAA,2BACG,mBAAA,EAAA,EAAoB,MAAA,EAAQ,aAC3B,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAU,CAAA,EAClC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"PipelineRunLogViewer.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogViewer.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 { DismissableBanner, LogViewer } from '@backstage/core-components';\nimport { V1Container, V1Pod } from '@kubernetes/client-node';\nimport Paper from '@mui/material/Paper';\nimport Skeleton from '@mui/material/Skeleton';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { usePodLogsOfPipelineRun } from '../../hooks/usePodLogsOfPipelineRun';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineRunLogViewerProps = { pod: V1Pod };\n\nconst PipelineRunLogViewer = ({ pod }: PipelineRunLogViewerProps) => {\n  const { value, error, loading } = usePodLogsOfPipelineRun({\n    pod,\n  });\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const containersList = pod?.spec?.containers || [];\n  let text = '';\n\n  text = containersList.reduce(\n    (acc: string, container: V1Container, idx: number) => {\n      if (container?.name && value?.[idx]?.text) {\n        return acc\n          .concat(\n            `${container.name.toLocaleUpperCase('en-US')}\\n${value[idx].text}`,\n          )\n          .concat(idx === containersList.length - 1 ? '' : '\\n');\n      }\n      return acc;\n    },\n    '',\n  );\n\n  return (\n    <>\n      {error && (\n        <DismissableBanner\n          message={error?.message}\n          variant=\"error\"\n          fixed={false}\n          id=\"pod-logs\"\n        />\n      )}\n      <Paper\n        elevation={1}\n        style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n      >\n        {loading && (\n          <Skeleton\n            data-testid=\"logs-skeleton\"\n            variant=\"rectangular\"\n            width=\"100%\"\n            height=\"100%\"\n          />\n        )}\n        {pod && !loading && (\n          <LogViewer text={text || t('pipelineRunLogs.noLogs')} />\n        )}\n      </Paper>\n    </>\n  );\n};\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      retry: 5,\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\nconst PipelineRunLogViewerWithQueryClient = ({\n  pod,\n}: PipelineRunLogViewerProps) => {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <PipelineRunLogViewer pod={pod} />\n    </QueryClientProvider>\n  );\n};\n\nexport { PipelineRunLogViewerWithQueryClient as PipelineRunLogViewer };\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,oBAAA,GAAuB,CAAC,EAAE,GAAA,EAAI,KAAiC;AACnE,EAAA,MAAM,EAAE,KAAA,EAAO,KAAA,EAAO,OAAA,KAAY,uBAAA,CAAwB;AAAA,IACxD;AAAA,GACD,CAAA;AACD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,cAAA,GAAiB,GAAA,EAAK,IAAA,EAAM,UAAA,IAAc,EAAC;AACjD,EAAA,IAAI,IAAA,GAAO,EAAA;AAEX,EAAA,IAAA,GAAO,cAAA,CAAe,MAAA;AAAA,IACpB,CAAC,GAAA,EAAa,SAAA,EAAwB,GAAA,KAAgB;AACpD,MAAA,IAAI,SAAA,EAAW,IAAA,IAAQ,KAAA,GAAQ,GAAG,GAAG,IAAA,EAAM;AACzC,QAAA,OAAO,GAAA,CACJ,MAAA;AAAA,UACC,CAAA,EAAG,SAAA,CAAU,IAAA,CAAK,iBAAA,CAAkB,OAAO,CAAC;AAAA,EAAK,KAAA,CAAM,GAAG,CAAA,CAAE,IAAI,CAAA;AAAA,UAEjE,MAAA,CAAO,GAAA,KAAQ,eAAe,MAAA,GAAS,CAAA,GAAI,KAAK,IAAI,CAAA;AAAA,MACzD;AACA,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,SAAS,KAAA,EAAO,OAAA;AAAA,QAChB,OAAA,EAAQ,OAAA;AAAA,QACR,KAAA,EAAO,KAAA;AAAA,QACP,EAAA,EAAG;AAAA;AAAA,KACL;AAAA,oBAEF,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,CAAA;AAAA,QACX,OAAO,EAAE,MAAA,EAAQ,QAAQ,KAAA,EAAO,MAAA,EAAQ,WAAW,OAAA,EAAQ;AAAA,QAE1D,QAAA,EAAA;AAAA,UAAA,OAAA,oBACC,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,eAAA;AAAA,cACZ,OAAA,EAAQ,aAAA;AAAA,cACR,KAAA,EAAM,MAAA;AAAA,cACN,MAAA,EAAO;AAAA;AAAA,WACT;AAAA,UAED,GAAA,IAAO,CAAC,OAAA,oBACP,GAAA,CAAC,aAAU,IAAA,EAAM,IAAA,IAAQ,CAAA,CAAE,wBAAwB,CAAA,EAAG;AAAA;AAAA;AAAA;AAE1D,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,MAAM,WAAA,GAAc,IAAI,WAAA,CAAY;AAAA,EAClC,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,CAAA;AAAA,MACP,oBAAA,EAAsB;AAAA;AACxB;AAEJ,CAAC,CAAA;AAED,MAAM,sCAAsC,CAAC;AAAA,EAC3C;AACF,CAAA,KAAiC;AAC/B,EAAA,2BACG,mBAAA,EAAA,EAAoB,MAAA,EAAQ,aAC3B,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAU,CAAA,EAClC,CAAA;AAEJ;;;;"}

package/dist/components/PipelineRunLogs/PipelineRunLogs.esm.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
 import { Progress, LogViewer } from '@backstage/core-components';
-import { Paper } from '@material-ui/core';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import { getTaskRunsForPipelineRun, pipelineRunFilterReducer } from '@backstage-community/plugin-tekton-react';
 import { getSortedTaskRuns, getActiveTaskRun } from '../../utils/taskRun-utils.esm.js';
 import { PipelineRunLogViewer as PipelineRunLogViewerWithQueryClient } from './PipelineRunLogViewer.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunLogs.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogs.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, useEffect, useMemo } from 'react';\n\nimport { LogViewer, Progress } from '@backstage/core-components';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport { Paper } from '@material-ui/core';\nimport Grid from '@material-ui/core/Grid';\n\nimport {\n  getTaskRunsForPipelineRun,\n  pipelineRunFilterReducer,\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { getActiveTaskRun, getSortedTaskRuns } from '../../utils/taskRun-utils';\nimport { PipelineRunLogViewer } from './PipelineRunLogViewer';\nimport { TaskStatusStepper } from './TaskStatusStepper';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineRunLogsProps = {\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n  pods: V1Pod[];\n  activeTask?: string;\n  setActiveTask: (t: string) => void;\n};\nexport const PipelineRunLogs = ({\n  pipelineRun,\n  taskRuns,\n  pods,\n  activeTask,\n  setActiveTask,\n}: PipelineRunLogsProps) => {\n  const PLRTaskRuns = getTaskRunsForPipelineRun(pipelineRun, taskRuns);\n  const sortedTaskRuns = getSortedTaskRuns(PLRTaskRuns);\n  const taskRunFromYaml = PLRTaskRuns?.reduce(\n    (acc: { [value: string]: TaskRunKind }, value) => {\n      if (value?.metadata?.name) {\n        acc[value.metadata.name] = value;\n      }\n      return acc;\n    },\n    {},\n  );\n\n  const completed = pipelineRunFilterReducer(pipelineRun);\n  const [lastActiveStepId, setLastActiveStepId] = useState<string>('');\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    const mostRecentFailedOrActiveStep = sortedTaskRuns.find(tr =>\n      ['Failed', 'Running'].includes(tr.status),\n    );\n\n    if (completed && !mostRecentFailedOrActiveStep && !activeTask) {\n      setLastActiveStepId(sortedTaskRuns[sortedTaskRuns.length - 1]?.id);\n      return;\n    }\n\n    setLastActiveStepId(\n      !activeTask ? (mostRecentFailedOrActiveStep?.id as string) : '',\n    );\n  }, [sortedTaskRuns, completed, activeTask]);\n\n  const currentStepId = activeTask || lastActiveStepId;\n  const activeItem = getActiveTaskRun(sortedTaskRuns, currentStepId);\n  const podName =\n    activeItem && taskRunFromYaml?.[currentStepId]?.status?.podName;\n  const podData = useMemo(\n    () =>\n      pods.find(pod => {\n        return pod?.metadata?.name === podName;\n      }),\n    [pods, podName],\n  );\n\n  return (\n    <Grid container>\n      <Grid item xs={3}>\n        <Paper>\n          <TaskStatusStepper\n            steps={sortedTaskRuns}\n            currentStepId={currentStepId}\n            onUserStepChange={setActiveTask}\n          />\n        </Paper>\n      </Grid>\n      <Grid item xs={9}>\n        {!currentStepId && <Progress />}\n        <div style={{ height: '80vh' }}>\n          {!podData ? (\n            <Paper\n              elevation={1}\n              style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n            >\n              <LogViewer text={t('pipelineRunLogs.noLogs')} />\n            </Paper>\n          ) : (\n            <PipelineRunLogViewer pod={podData} />\n          )}\n        </div>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default PipelineRunLogs;\n"],"names":["PipelineRunLogViewer"],"mappings":"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"}
+{"version":3,"file":"PipelineRunLogs.esm.js","sources":["../../../src/components/PipelineRunLogs/PipelineRunLogs.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, useEffect, useMemo } from 'react';\n\nimport { LogViewer, Progress } from '@backstage/core-components';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport Grid from '@mui/material/Grid';\nimport Paper from '@mui/material/Paper';\n\nimport {\n  getTaskRunsForPipelineRun,\n  pipelineRunFilterReducer,\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { getActiveTaskRun, getSortedTaskRuns } from '../../utils/taskRun-utils';\nimport { PipelineRunLogViewer } from './PipelineRunLogViewer';\nimport { TaskStatusStepper } from './TaskStatusStepper';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineRunLogsProps = {\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n  pods: V1Pod[];\n  activeTask?: string;\n  setActiveTask: (t: string) => void;\n};\nexport const PipelineRunLogs = ({\n  pipelineRun,\n  taskRuns,\n  pods,\n  activeTask,\n  setActiveTask,\n}: PipelineRunLogsProps) => {\n  const PLRTaskRuns = getTaskRunsForPipelineRun(pipelineRun, taskRuns);\n  const sortedTaskRuns = getSortedTaskRuns(PLRTaskRuns);\n  const taskRunFromYaml = PLRTaskRuns?.reduce(\n    (acc: { [value: string]: TaskRunKind }, value) => {\n      if (value?.metadata?.name) {\n        acc[value.metadata.name] = value;\n      }\n      return acc;\n    },\n    {},\n  );\n\n  const completed = pipelineRunFilterReducer(pipelineRun);\n  const [lastActiveStepId, setLastActiveStepId] = useState<string>('');\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useEffect(() => {\n    const mostRecentFailedOrActiveStep = sortedTaskRuns.find(tr =>\n      ['Failed', 'Running'].includes(tr.status),\n    );\n\n    if (completed && !mostRecentFailedOrActiveStep && !activeTask) {\n      setLastActiveStepId(sortedTaskRuns[sortedTaskRuns.length - 1]?.id);\n      return;\n    }\n\n    setLastActiveStepId(\n      !activeTask ? (mostRecentFailedOrActiveStep?.id as string) : '',\n    );\n  }, [sortedTaskRuns, completed, activeTask]);\n\n  const currentStepId = activeTask || lastActiveStepId;\n  const activeItem = getActiveTaskRun(sortedTaskRuns, currentStepId);\n  const podName =\n    activeItem && taskRunFromYaml?.[currentStepId]?.status?.podName;\n  const podData = useMemo(\n    () =>\n      pods.find(pod => {\n        return pod?.metadata?.name === podName;\n      }),\n    [pods, podName],\n  );\n\n  return (\n    <Grid container>\n      <Grid item xs={3}>\n        <Paper>\n          <TaskStatusStepper\n            steps={sortedTaskRuns}\n            currentStepId={currentStepId}\n            onUserStepChange={setActiveTask}\n          />\n        </Paper>\n      </Grid>\n      <Grid item xs={9}>\n        {!currentStepId && <Progress />}\n        <div style={{ height: '80vh' }}>\n          {!podData ? (\n            <Paper\n              elevation={1}\n              style={{ height: '100%', width: '100%', minHeight: '30rem' }}\n            >\n              <LogViewer text={t('pipelineRunLogs.noLogs')} />\n            </Paper>\n          ) : (\n            <PipelineRunLogViewer pod={podData} />\n          )}\n        </div>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default PipelineRunLogs;\n"],"names":["PipelineRunLogViewer"],"mappings":"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"}

package/dist/components/PipelineRunLogs/PodLogsDownloadLink.esm.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useContext } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';
-import { Button } from '@material-ui/core';
+import Button from '@mui/material/Button';
 import DownloadIcon from '@mui/icons-material/FileDownloadOutlined';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
 import { getPodLogs } from '../../utils/log-downloader-utils.esm.js';

package/dist/components/PipelineRunLogs/PodLogsDownloadLink.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PodLogsDownloadLink.esm.js","sources":["../../../src/components/PipelineRunLogs/PodLogsDownloadLink.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, ReactElement } from 'react';\n\nimport { useState, useContext } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport { Button } from '@material-ui/core';\nimport DownloadIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { ContainerScope } from '../../hooks/usePodLogsOfPipelineRun';\nimport { TektonResourcesContextData } from '../../types/types';\nimport { getPodLogs } from '../../utils/log-downloader-utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\nimport { downloadLogFile } from '../../utils/download-log-file-utils';\n\nconst PodLogsDownloadLink: FC<{\n  pods: V1Pod[];\n  fileName: string;\n  downloadTitle: string;\n}> = ({ pods, fileName, downloadTitle, ...props }): ReactElement => {\n  const [downloading, setDownloading] = useState<boolean>(false);\n  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const { clusters, selectedCluster = 0 } =\n    useContext<TektonResourcesContextData>(TektonResourcesContext);\n  const currCluster = clusters.length > 0 ? clusters[selectedCluster] : '';\n\n  const getLogs = (podScope: ContainerScope): Promise<{ text: string }> => {\n    const { podName, podNamespace, containerName, clusterName } = podScope;\n    return kubernetesProxyApi.getPodLogs({\n      podName: podName,\n      namespace: podNamespace,\n      containerName: containerName,\n      clusterName: clusterName,\n    });\n  };\n\n  return (\n    <Button\n      disabled={downloading}\n      title={\n        downloading\n          ? t('pipelineRunLogs.podLogsDownloadLink.downloading')\n          : downloadTitle\n      }\n      onClick={() => {\n        setDownloading(true);\n        getPodLogs(pods, getLogs, currCluster)\n          .then((logs: string) => {\n            setDownloading(false);\n            downloadLogFile(logs || '', fileName);\n          })\n          .catch(err => {\n            // eslint-disable-next-line no-console\n            console.warn('Download failed', err);\n            setDownloading(false);\n          });\n      }}\n      {...props}\n    >\n      <DownloadIcon style={{ verticalAlign: '-0.180em' }} />\n      {downloadTitle || t('pipelineRunLogs.podLogsDownloadLink.title')}\n    </Button>\n  );\n};\nexport default PodLogsDownloadLink;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,mBAAA,GAID,CAAC,EAAE,IAAA,EAAM,UAAU,aAAA,EAAe,GAAG,OAAM,KAAoB;AAClE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAC7D,EAAA,MAAM,kBAAA,GAAqB,OAAO,qBAAqB,CAAA;AACvD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,GAAkB,CAAA,EAAE,GACpC,WAAuC,sBAAsB,CAAA;AAC/D,EAAA,MAAM,cAAc,QAAA,CAAS,MAAA,GAAS,CAAA,GAAI,QAAA,CAAS,eAAe,CAAA,GAAI,EAAA;AAEtE,EAAA,MAAM,OAAA,GAAU,CAAC,QAAA,KAAwD;AACvE,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,aAAA,EAAe,aAAY,GAAI,QAAA;AAC9D,IAAA,OAAO,mBAAmB,UAAA,CAAW;AAAA,MACnC,OAAA;AAAA,MACA,SAAA,EAAW,YAAA;AAAA,MACX,aAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,WAAA;AAAA,MACV,KAAA,EACE,WAAA,GACI,CAAA,CAAE,iDAAiD,CAAA,GACnD,aAAA;AAAA,MAEN,SAAS,MAAM;AACb,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,UAAA,CAAW,MAAM,OAAA,EAAS,WAAW,CAAA,CAClC,IAAA,CAAK,CAAC,IAAA,KAAiB;AACtB,UAAA,cAAA,CAAe,KAAK,CAAA;AACpB,UAAA,eAAA,CAAgB,IAAA,IAAQ,IAAI,QAAQ,CAAA;AAAA,QACtC,CAAC,CAAA,CACA,KAAA,CAAM,CAAA,GAAA,KAAO;AAEZ,UAAA,OAAA,CAAQ,IAAA,CAAK,mBAAmB,GAAG,CAAA;AACnC,UAAA,cAAA,CAAe,KAAK,CAAA;AAAA,QACtB,CAAC,CAAA;AAAA,MACL,CAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAO,EAAE,aAAA,EAAe,YAAW,EAAG,CAAA;AAAA,QACnD,aAAA,IAAiB,EAAE,2CAA2C;AAAA;AAAA;AAAA,GACjE;AAEJ;;;;"}
+{"version":3,"file":"PodLogsDownloadLink.esm.js","sources":["../../../src/components/PipelineRunLogs/PodLogsDownloadLink.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, ReactElement } from 'react';\n\nimport { useState, useContext } from 'react';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { kubernetesProxyApiRef } from '@backstage/plugin-kubernetes-react';\n\nimport { V1Pod } from '@kubernetes/client-node';\nimport Button from '@mui/material/Button';\nimport DownloadIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { ContainerScope } from '../../hooks/usePodLogsOfPipelineRun';\nimport { TektonResourcesContextData } from '../../types/types';\nimport { getPodLogs } from '../../utils/log-downloader-utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\nimport { downloadLogFile } from '../../utils/download-log-file-utils';\n\nconst PodLogsDownloadLink: FC<{\n  pods: V1Pod[];\n  fileName: string;\n  downloadTitle: string;\n}> = ({ pods, fileName, downloadTitle, ...props }): ReactElement => {\n  const [downloading, setDownloading] = useState<boolean>(false);\n  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  const { clusters, selectedCluster = 0 } =\n    useContext<TektonResourcesContextData>(TektonResourcesContext);\n  const currCluster = clusters.length > 0 ? clusters[selectedCluster] : '';\n\n  const getLogs = (podScope: ContainerScope): Promise<{ text: string }> => {\n    const { podName, podNamespace, containerName, clusterName } = podScope;\n    return kubernetesProxyApi.getPodLogs({\n      podName: podName,\n      namespace: podNamespace,\n      containerName: containerName,\n      clusterName: clusterName,\n    });\n  };\n\n  return (\n    <Button\n      disabled={downloading}\n      title={\n        downloading\n          ? t('pipelineRunLogs.podLogsDownloadLink.downloading')\n          : downloadTitle\n      }\n      onClick={() => {\n        setDownloading(true);\n        getPodLogs(pods, getLogs, currCluster)\n          .then((logs: string) => {\n            setDownloading(false);\n            downloadLogFile(logs || '', fileName);\n          })\n          .catch(err => {\n            // eslint-disable-next-line no-console\n            console.warn('Download failed', err);\n            setDownloading(false);\n          });\n      }}\n      {...props}\n    >\n      <DownloadIcon style={{ verticalAlign: '-0.180em' }} />\n      {downloadTitle || t('pipelineRunLogs.podLogsDownloadLink.title')}\n    </Button>\n  );\n};\nexport default PodLogsDownloadLink;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,mBAAA,GAID,CAAC,EAAE,IAAA,EAAM,UAAU,aAAA,EAAe,GAAG,OAAM,KAAoB;AAClE,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAkB,KAAK,CAAA;AAC7D,EAAA,MAAM,kBAAA,GAAqB,OAAO,qBAAqB,CAAA;AACvD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,GAAkB,CAAA,EAAE,GACpC,WAAuC,sBAAsB,CAAA;AAC/D,EAAA,MAAM,cAAc,QAAA,CAAS,MAAA,GAAS,CAAA,GAAI,QAAA,CAAS,eAAe,CAAA,GAAI,EAAA;AAEtE,EAAA,MAAM,OAAA,GAAU,CAAC,QAAA,KAAwD;AACvE,IAAA,MAAM,EAAE,OAAA,EAAS,YAAA,EAAc,aAAA,EAAe,aAAY,GAAI,QAAA;AAC9D,IAAA,OAAO,mBAAmB,UAAA,CAAW;AAAA,MACnC,OAAA;AAAA,MACA,SAAA,EAAW,YAAA;AAAA,MACX,aAAA;AAAA,MACA;AAAA,KACD,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,WAAA;AAAA,MACV,KAAA,EACE,WAAA,GACI,CAAA,CAAE,iDAAiD,CAAA,GACnD,aAAA;AAAA,MAEN,SAAS,MAAM;AACb,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAA,UAAA,CAAW,MAAM,OAAA,EAAS,WAAW,CAAA,CAClC,IAAA,CAAK,CAAC,IAAA,KAAiB;AACtB,UAAA,cAAA,CAAe,KAAK,CAAA;AACpB,UAAA,eAAA,CAAgB,IAAA,IAAQ,IAAI,QAAQ,CAAA;AAAA,QACtC,CAAC,CAAA,CACA,KAAA,CAAM,CAAA,GAAA,KAAO;AAEZ,UAAA,OAAA,CAAQ,IAAA,CAAK,mBAAmB,GAAG,CAAA;AACnC,UAAA,cAAA,CAAe,KAAK,CAAA;AAAA,QACtB,CAAC,CAAA;AAAA,MACL,CAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAO,EAAE,aAAA,EAAe,YAAW,EAAG,CAAA;AAAA,QACnD,aAAA,IAAiB,EAAE,2CAA2C;AAAA;AAAA;AAAA,GACjE;AAEJ;;;;"}

package/dist/components/PipelineRunLogs/TaskStatusStepper.esm.js

@@ -1,14 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
-import { StepButton, makeStyles, createStyles, CircularProgress } from '@material-ui/core';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import Stepper from '@material-ui/core/Stepper';
-import Typography from '@material-ui/core/Typography';
-import Cancel from '@material-ui/icons/Cancel';
-import Check from '@material-ui/icons/Check';
-import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Step from '@mui/material/Step';
+import StepButton from '@mui/material/StepButton';
+import StepLabel from '@mui/material/StepLabel';
+import Stepper from '@mui/material/Stepper';
+import Typography from '@mui/material/Typography';
+import Cancel from '@mui/icons-material/Cancel';
+import Check from '@mui/icons-material/Check';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import classNames from 'classnames';
 import { ComputedStatus } from '@backstage-community/plugin-tekton-react';
 import { calculateDuration } from '../../utils/tekton-utils.esm.js';
@@ -16,33 +18,6 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    root: {
-      width: "100%"
-    },
-    titleContainer: {
-      display: "flex",
-      alignItems: "center",
-      gap: theme.spacing(1)
-    },
-    closeButton: {
-      position: "absolute",
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    },
-    labelWrapper: {
-      display: "flex",
-      flex: 1,
-      flexDirection: "row",
-      justifyContent: "space-between"
-    },
-    stepWrapper: {
-      width: "100%"
-    }
-  })
-);
 const StepTimeTicker = ({ step }) => {
   const [time, setTime] = useState("");
   const { t } = useTranslationRef(tektonTranslationRef);
@@ -55,24 +30,7 @@ const StepTimeTicker = ({ step }) => {
   }, 1e3);
   return /* @__PURE__ */ jsx(Typography, { variant: "caption", children: time });
 };
-const useStepIconStyles = makeStyles(
-  (theme) => createStyles({
-    root: {
-      color: theme.palette.text.disabled,
-      display: "flex",
-      height: 22,
-      alignItems: "center"
-    },
-    completed: {
-      color: theme.palette.status.ok
-    },
-    error: {
-      color: theme.palette.status.error
-    }
-  })
-);
 const TaskStepIconComponent = ({ active, completed, error }) => {
-  const classes = useStepIconStyles();
   const getMiddle = () => {
     if (active) {
       return /* @__PURE__ */ jsx(CircularProgress, { size: "24px" });
@@ -86,11 +44,23 @@ const TaskStepIconComponent = ({ active, completed, error }) => {
     return /* @__PURE__ */ jsx(FiberManualRecordIcon, {});
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
-      className: classNames(classes.root, {
-        [classes.completed]: completed,
-        [classes.error]: error
+      sx: {
+        color: (theme) => theme.palette.text.disabled,
+        display: "flex",
+        height: 22,
+        alignItems: "center",
+        ...completed && {
+          color: (theme) => theme.palette.status.ok
+        },
+        ...error && {
+          color: (theme) => theme.palette.status.error
+        }
+      },
+      className: classNames({
+        completed,
+        error
       }),
       children: getMiddle()
     }
@@ -98,9 +68,8 @@ const TaskStepIconComponent = ({ active, completed, error }) => {
 };
 const TaskStatusStepper = memo((props) => {
   const { steps, currentStepId, onUserStepChange } = props;
-  const classes = useStyles(props);
   const { t } = useTranslationRef(tektonTranslationRef);
-  return /* @__PURE__ */ jsx("div", { className: classes.root, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: props.classes?.root, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
     Stepper,
     {
       activeStep: steps.findIndex((s) => s.id === currentStepId),
@@ -121,11 +90,22 @@ const TaskStatusStepper = memo((props) => {
               active: isActive
             },
             StepIconComponent: TaskStepIconComponent,
-            className: classes.stepWrapper,
-            children: /* @__PURE__ */ jsxs("div", { className: classes.labelWrapper, children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: step.name }),
-              isSkipped ? /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("pipelineRunLogs.taskStatusStepper.skipped") }) : /* @__PURE__ */ jsx(StepTimeTicker, { step })
-            ] })
+            sx: { width: "100%" },
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  flex: 1,
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: step.name }),
+                  isSkipped ? /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("pipelineRunLogs.taskStatusStepper.skipped") }) : /* @__PURE__ */ jsx(StepTimeTicker, { step })
+                ]
+              }
+            )
           }
         ) }) }, step.id);
       })

package/dist/components/PipelineRunLogs/TaskStatusStepper.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskStatusStepper.esm.js","sources":["../../../src/components/PipelineRunLogs/TaskStatusStepper.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, memo } from 'react';\nimport useInterval from 'react-use/lib/useInterval';\n\nimport {\n  CircularProgress,\n  createStyles,\n  makeStyles,\n  StepButton,\n  StepIconProps,\n  Theme,\n} from '@material-ui/core';\nimport Step from '@material-ui/core/Step';\nimport StepLabel from '@material-ui/core/StepLabel';\nimport Stepper from '@material-ui/core/Stepper';\nimport Typography from '@material-ui/core/Typography';\nimport Cancel from '@material-ui/icons/Cancel';\nimport Check from '@material-ui/icons/Check';\nimport FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';\nimport classNames from 'classnames';\n\nimport { ComputedStatus } from '@backstage-community/plugin-tekton-react';\n\nimport { TaskStep } from '../../utils/taskRun-utils';\nimport { calculateDuration } from '../../utils/tekton-utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    root: {\n      width: '100%',\n    },\n    titleContainer: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n    },\n    closeButton: {\n      position: 'absolute',\n      right: theme.spacing(1),\n      top: theme.spacing(1),\n      color: theme.palette.grey[500],\n    },\n    labelWrapper: {\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    stepWrapper: {\n      width: '100%',\n    },\n  }),\n);\n\nconst StepTimeTicker = ({ step }: { step: TaskStep }) => {\n  const [time, setTime] = useState('');\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useInterval(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    setTime(calculateDuration(t, step.startedAt, step.endedAt));\n  }, 1000);\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n\nconst useStepIconStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    root: {\n      color: theme.palette.text.disabled,\n      display: 'flex',\n      height: 22,\n      alignItems: 'center',\n    },\n    completed: {\n      color: theme.palette.status.ok,\n    },\n    error: {\n      color: theme.palette.status.error,\n    },\n  }),\n);\n\nconst TaskStepIconComponent = ({ active, completed, error }: StepIconProps) => {\n  const classes = useStepIconStyles();\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"24px\" />;\n    }\n    if (completed) {\n      return <Check />;\n    }\n    if (error) {\n      return <Cancel />;\n    }\n    return <FiberManualRecordIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n};\n\ntype TaskStatusStepperProps = {\n  steps: TaskStep[];\n  currentStepId: string | undefined;\n  onUserStepChange: (id: string) => void;\n  classes?: {\n    root?: string;\n  };\n};\n\nexport const TaskStatusStepper = memo((props: TaskStatusStepperProps) => {\n  const { steps, currentStepId, onUserStepChange } = props;\n  const classes = useStyles(props);\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <div className={classes.root}>\n      <Stepper\n        activeStep={steps.findIndex(s => s.id === currentStepId)}\n        orientation=\"vertical\"\n        nonLinear\n      >\n        {steps.map((step, _) => {\n          const isCancelled = step.status === ComputedStatus.Cancelled;\n          const isActive = step.status === ComputedStatus.Running;\n          const isCompleted = step.status === ComputedStatus.Succeeded;\n          const isFailed = step.status === ComputedStatus.Failed;\n          const isSkipped = step.status === ComputedStatus.Skipped;\n\n          return (\n            <Step key={step.id} expanded>\n              <StepButton onClick={() => onUserStepChange(step.id)}>\n                <StepLabel\n                  StepIconProps={{\n                    completed: isCompleted,\n                    error: isFailed || isCancelled,\n                    active: isActive,\n                  }}\n                  StepIconComponent={TaskStepIconComponent}\n                  className={classes.stepWrapper}\n                >\n                  <div className={classes.labelWrapper}>\n                    <Typography variant=\"subtitle2\">{step.name}</Typography>\n                    {isSkipped ? (\n                      <Typography variant=\"caption\">\n                        {t('pipelineRunLogs.taskStatusStepper.skipped')}\n                      </Typography>\n                    ) : (\n                      <StepTimeTicker step={step} />\n                    )}\n                  </div>\n                </StepLabel>\n              </StepButton>\n            </Step>\n          );\n        })}\n      </Stepper>\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TaskStatusStepper.esm.js","sources":["../../../src/components/PipelineRunLogs/TaskStatusStepper.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, memo } from 'react';\nimport useInterval from 'react-use/lib/useInterval';\n\nimport Box from '@mui/material/Box';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Step from '@mui/material/Step';\nimport StepButton from '@mui/material/StepButton';\nimport StepLabel from '@mui/material/StepLabel';\nimport type { StepIconProps } from '@mui/material/StepIcon';\nimport Stepper from '@mui/material/Stepper';\nimport Typography from '@mui/material/Typography';\nimport Cancel from '@mui/icons-material/Cancel';\nimport Check from '@mui/icons-material/Check';\nimport FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';\nimport classNames from 'classnames';\n\nimport { ComputedStatus } from '@backstage-community/plugin-tekton-react';\n\nimport { TaskStep } from '../../utils/taskRun-utils';\nimport { calculateDuration } from '../../utils/tekton-utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst StepTimeTicker = ({ step }: { step: TaskStep }) => {\n  const [time, setTime] = useState('');\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  useInterval(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    setTime(calculateDuration(t, step.startedAt, step.endedAt));\n  }, 1000);\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n\nconst TaskStepIconComponent = ({ active, completed, error }: StepIconProps) => {\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"24px\" />;\n    }\n    if (completed) {\n      return <Check />;\n    }\n    if (error) {\n      return <Cancel />;\n    }\n    return <FiberManualRecordIcon />;\n  };\n\n  return (\n    <Box\n      sx={{\n        color: theme => theme.palette.text.disabled,\n        display: 'flex',\n        height: 22,\n        alignItems: 'center',\n        ...(completed && {\n          color: theme => theme.palette.status.ok,\n        }),\n        ...(error && {\n          color: theme => theme.palette.status.error,\n        }),\n      }}\n      className={classNames({\n        completed,\n        error,\n      })}\n    >\n      {getMiddle()}\n    </Box>\n  );\n};\n\ntype TaskStatusStepperProps = {\n  steps: TaskStep[];\n  currentStepId: string | undefined;\n  onUserStepChange: (id: string) => void;\n  classes?: {\n    root?: string;\n  };\n};\n\nexport const TaskStatusStepper = memo((props: TaskStatusStepperProps) => {\n  const { steps, currentStepId, onUserStepChange } = props;\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <Box className={props.classes?.root} sx={{ width: '100%' }}>\n      <Stepper\n        activeStep={steps.findIndex(s => s.id === currentStepId)}\n        orientation=\"vertical\"\n        nonLinear\n      >\n        {steps.map((step, _) => {\n          const isCancelled = step.status === ComputedStatus.Cancelled;\n          const isActive = step.status === ComputedStatus.Running;\n          const isCompleted = step.status === ComputedStatus.Succeeded;\n          const isFailed = step.status === ComputedStatus.Failed;\n          const isSkipped = step.status === ComputedStatus.Skipped;\n\n          return (\n            <Step key={step.id} expanded>\n              <StepButton onClick={() => onUserStepChange(step.id)}>\n                <StepLabel\n                  StepIconProps={{\n                    completed: isCompleted,\n                    error: isFailed || isCancelled,\n                    active: isActive,\n                  }}\n                  StepIconComponent={TaskStepIconComponent}\n                  sx={{ width: '100%' }}\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      flex: 1,\n                      flexDirection: 'row',\n                      justifyContent: 'space-between',\n                    }}\n                  >\n                    <Typography variant=\"subtitle2\">{step.name}</Typography>\n                    {isSkipped ? (\n                      <Typography variant=\"caption\">\n                        {t('pipelineRunLogs.taskStatusStepper.skipped')}\n                      </Typography>\n                    ) : (\n                      <StepTimeTicker step={step} />\n                    )}\n                  </Box>\n                </StepLabel>\n              </StepButton>\n            </Step>\n          );\n        })}\n      </Stepper>\n    </Box>\n  );\n});\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { ErrorBoundary } from '@backstage/core-components';
-import { Dialog, DialogTitle, Box, IconButton, DialogContent, makeStyles, createStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import { tektonGroupColor } from '../../types/types.esm.js';
 import PipelineRunOutput from '../PipelineRunList/PipelineRunOutput.esm.js';
@@ -10,28 +14,36 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    titleContainer: {
-      display: "flex",
-      alignItems: "center",
-      gap: theme.spacing(1)
-    },
-    closeButton: {
-      position: "absolute",
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  })
-);
+const titleContainerSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1
+};
+const closeButtonSx = {
+  position: "absolute",
+  right: (theme) => theme.spacing(1),
+  top: (theme) => theme.spacing(1),
+  color: (theme) => theme.palette.grey[500]
+};
+const dialogPaperSx = {
+  display: "flex",
+  flexDirection: "column",
+  height: "90vh",
+  maxHeight: "90vh"
+};
+const dialogContentSx = {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  overflow: "hidden"
+};
 const PipelineRunOutputDialog$1 = ({
   open,
   closeDialog,
   pipelineRun,
   taskRuns
 }) => {
-  const classes = useStyles();
   const { t } = useTranslationRef(tektonTranslationRef);
   return /* @__PURE__ */ jsxs(
     Dialog,
@@ -41,8 +53,9 @@ const PipelineRunOutputDialog$1 = ({
       fullWidth: true,
       open,
       onClose: closeDialog,
+      PaperProps: { sx: dialogPaperSx },
       children: [
-        /* @__PURE__ */ jsx(DialogTitle, { id: "pipelinerun-output", title: t("pipelineRunOutput.title"), children: /* @__PURE__ */ jsxs(Box, { className: classes.titleContainer, children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "pipelinerun-output", title: t("pipelineRunOutput.title"), children: /* @__PURE__ */ jsxs(Box, { sx: titleContainerSx, children: [
           /* @__PURE__ */ jsx(
             ResourceBadge,
             {
@@ -56,13 +69,13 @@ const PipelineRunOutputDialog$1 = ({
             IconButton,
             {
               "aria-label": "close",
-              className: classes.closeButton,
+              sx: closeButtonSx,
               onClick: closeDialog,
               children: /* @__PURE__ */ jsx(CloseIcon, {})
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PipelineRunOutput, { pipelineRun, taskRuns }) }) })
+        /* @__PURE__ */ jsx(DialogContent, { sx: dialogContentSx, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PipelineRunOutput, { pipelineRun, taskRuns }) }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunOutputDialog.esm.js","sources":["../../../src/components/PipelineRunOutput/PipelineRunOutputDialog.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 { memo } from 'react';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport {\n  Box,\n  createStyles,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  IconButton,\n  makeStyles,\n  Theme,\n} from '@material-ui/core';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { tektonGroupColor } from '../../types/types';\nimport PipelineRunOutput from '../PipelineRunList/PipelineRunOutput';\nimport ResourceBadge from '../PipelineRunList/ResourceBadge';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    titleContainer: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: theme.spacing(1),\n    },\n    closeButton: {\n      position: 'absolute',\n      right: theme.spacing(1),\n      top: theme.spacing(1),\n      color: theme.palette.grey[500],\n    },\n  }),\n);\n\ntype PipelineRunOutputDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n};\nconst PipelineRunOutputDialog = ({\n  open,\n  closeDialog,\n  pipelineRun,\n  taskRuns,\n}: PipelineRunOutputDialogProps) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <Dialog\n      data-testid=\"pipelinerun-output-dialog\"\n      maxWidth=\"xl\"\n      fullWidth\n      open={open}\n      onClose={closeDialog}\n    >\n      <DialogTitle id=\"pipelinerun-output\" title={t('pipelineRunOutput.title')}>\n        <Box className={classes.titleContainer}>\n          <ResourceBadge\n            color={tektonGroupColor}\n            abbr=\"PLR\"\n            name={pipelineRun?.metadata?.name ?? ''}\n          />{' '}\n          <IconButton\n            aria-label=\"close\"\n            className={classes.closeButton}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent>\n        <ErrorBoundary>\n          <PipelineRunOutput pipelineRun={pipelineRun} taskRuns={taskRuns} />\n        </ErrorBoundary>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default memo(PipelineRunOutputDialog);\n"],"names":["PipelineRunOutputDialog"],"mappings":";;;;;;;;;;;;AA0CA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,KACtB;AAAA,IACA,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,UAAA;AAAA,MACV,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACtB,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,MACpB,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK,GAAG;AAAA;AAC/B,GACD;AACH,CAAA;AAQA,MAAMA,4BAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAoC;AAClC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,2BAAA;AAAA,MACZ,QAAA,EAAS,IAAA;AAAA,MACT,SAAA,EAAS,IAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,oBAAA,EAAqB,KAAA,EAAO,CAAA,CAAE,yBAAyB,CAAA,EACrE,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EACtB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,gBAAA;AAAA,cACP,IAAA,EAAK,KAAA;AAAA,cACL,IAAA,EAAM,WAAA,EAAa,QAAA,EAAU,IAAA,IAAQ;AAAA;AAAA,WACvC;AAAA,UAAG,GAAA;AAAA,0BACH,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,OAAA;AAAA,cACX,WAAW,OAAA,CAAQ,WAAA;AAAA,cACnB,OAAA,EAAS,WAAA;AAAA,cAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,iBACC,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EACC,8BAAC,iBAAA,EAAA,EAAkB,WAAA,EAA0B,QAAA,EAAoB,CAAA,EACnE,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,8BAAe,KAAKA,yBAAuB,CAAA;;;;"}
+{"version":3,"file":"PipelineRunOutputDialog.esm.js","sources":["../../../src/components/PipelineRunOutput/PipelineRunOutputDialog.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 { memo } from 'react';\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport type { SxProps, Theme } from '@mui/material/styles';\nimport CloseIcon from '@mui/icons-material/Close';\n\nimport {\n  PipelineRunKind,\n  TaskRunKind,\n} from '@backstage-community/plugin-tekton-react';\n\nimport { tektonGroupColor } from '../../types/types';\nimport PipelineRunOutput from '../PipelineRunList/PipelineRunOutput';\nimport ResourceBadge from '../PipelineRunList/ResourceBadge';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\nconst titleContainerSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n};\n\nconst closeButtonSx: SxProps<Theme> = {\n  position: 'absolute',\n  right: (theme: Theme) => theme.spacing(1),\n  top: (theme: Theme) => theme.spacing(1),\n  color: (theme: Theme) => theme.palette.grey[500],\n};\n\nconst dialogPaperSx: SxProps<Theme> = {\n  display: 'flex',\n  flexDirection: 'column',\n  height: '90vh',\n  maxHeight: '90vh',\n};\n\nconst dialogContentSx: SxProps<Theme> = {\n  display: 'flex',\n  flexDirection: 'column',\n  flex: 1,\n  minHeight: 0,\n  overflow: 'hidden',\n};\n\ntype PipelineRunOutputDialogProps = {\n  open: boolean;\n  closeDialog: () => void;\n  pipelineRun: PipelineRunKind;\n  taskRuns: TaskRunKind[];\n};\nconst PipelineRunOutputDialog = ({\n  open,\n  closeDialog,\n  pipelineRun,\n  taskRuns,\n}: PipelineRunOutputDialogProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <Dialog\n      data-testid=\"pipelinerun-output-dialog\"\n      maxWidth=\"xl\"\n      fullWidth\n      open={open}\n      onClose={closeDialog}\n      PaperProps={{ sx: dialogPaperSx }}\n    >\n      <DialogTitle id=\"pipelinerun-output\" title={t('pipelineRunOutput.title')}>\n        <Box sx={titleContainerSx}>\n          <ResourceBadge\n            color={tektonGroupColor}\n            abbr=\"PLR\"\n            name={pipelineRun?.metadata?.name ?? ''}\n          />{' '}\n          <IconButton\n            aria-label=\"close\"\n            sx={closeButtonSx}\n            onClick={closeDialog}\n          >\n            <CloseIcon />\n          </IconButton>\n        </Box>\n      </DialogTitle>\n      <DialogContent sx={dialogContentSx}>\n        <ErrorBoundary>\n          <PipelineRunOutput pipelineRun={pipelineRun} taskRuns={taskRuns} />\n        </ErrorBoundary>\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nexport default memo(PipelineRunOutputDialog);\n"],"names":["PipelineRunOutputDialog"],"mappings":";;;;;;;;;;;;;;;;AAsCA,MAAM,gBAAA,GAAmB;AAAA,EACvB,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK;AACP,CAAA;AAEA,MAAM,aAAA,GAAgC;AAAA,EACpC,QAAA,EAAU,UAAA;AAAA,EACV,KAAA,EAAO,CAAC,KAAA,KAAiB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,EACxC,GAAA,EAAK,CAAC,KAAA,KAAiB,KAAA,CAAM,QAAQ,CAAC,CAAA;AAAA,EACtC,OAAO,CAAC,KAAA,KAAiB,KAAA,CAAM,OAAA,CAAQ,KAAK,GAAG;AACjD,CAAA;AAEA,MAAM,aAAA,GAAgC;AAAA,EACpC,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,MAAA,EAAQ,MAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AAEA,MAAM,eAAA,GAAkC;AAAA,EACtC,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,IAAA,EAAM,CAAA;AAAA,EACN,SAAA,EAAW,CAAA;AAAA,EACX,QAAA,EAAU;AACZ,CAAA;AAQA,MAAMA,4BAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAoC;AAClC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,2BAAA;AAAA,MACZ,QAAA,EAAS,IAAA;AAAA,MACT,SAAA,EAAS,IAAA;AAAA,MACT,IAAA;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,UAAA,EAAY,EAAE,EAAA,EAAI,aAAA,EAAc;AAAA,MAEhC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAG,oBAAA,EAAqB,KAAA,EAAO,CAAA,CAAE,yBAAyB,CAAA,EACrE,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,gBAAA,EACP,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,gBAAA;AAAA,cACP,IAAA,EAAK,KAAA;AAAA,cACL,IAAA,EAAM,WAAA,EAAa,QAAA,EAAU,IAAA,IAAQ;AAAA;AAAA,WACvC;AAAA,UAAG,GAAA;AAAA,0BACH,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,OAAA;AAAA,cACX,EAAA,EAAI,aAAA;AAAA,cACJ,OAAA,EAAS,WAAA;AAAA,cAET,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,aAAA,EAAA,EAAc,EAAA,EAAI,eAAA,EACjB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,WAAA,EAA0B,QAAA,EAAoB,CAAA,EACnE,CAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,8BAAe,KAAKA,yBAAuB,CAAA;;;;"}

package/dist/components/PipelineRunParamsAndResults/PipelineRunParams.esm.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import '../../translations/index.esm.js';
 import { Output } from './Output.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';

package/dist/components/PipelineRunParamsAndResults/PipelineRunParams.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineRunParams.esm.js","sources":["../../../src/components/PipelineRunParamsAndResults/PipelineRunParams.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\nimport { Typography } from '@material-ui/core';\nimport { tektonTranslationRef } from '../../translations';\nimport { Output } from './Output';\n\ntype PipelineRunParamsProps = {\n  pipelineRun: PipelineRunKind;\n};\n\nexport const PipelineRunParams = ({ pipelineRun }: PipelineRunParamsProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const noDataAvailable =\n    pipelineRun.spec?.params === undefined ||\n    pipelineRun.spec?.params.length === 0;\n\n  if (noDataAvailable) {\n    return (\n      <Typography align=\"center\" variant=\"body2\">\n        {t('pipelineRunParamsAndResults.noParams')}\n      </Typography>\n    );\n  }\n\n  return <Output results={pipelineRun?.spec.params ?? []} />;\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,iBAAA,GAAoB,CAAC,EAAE,WAAA,EAAY,KAA8B;AAC5E,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,eAAA,GACJ,YAAY,IAAA,EAAM,MAAA,KAAW,UAC7B,WAAA,CAAY,IAAA,EAAM,OAAO,MAAA,KAAW,CAAA;AAEtC,EAAA,IAAI,eAAA,EAAiB;AACnB,IAAA,uBACE,GAAA,CAAC,cAAW,KAAA,EAAM,QAAA,EAAS,SAAQ,OAAA,EAChC,QAAA,EAAA,CAAA,CAAE,sCAAsC,CAAA,EAC3C,CAAA;AAAA,EAEJ;AAEA,EAAA,2BAAQ,MAAA,EAAA,EAAO,OAAA,EAAS,aAAa,IAAA,CAAK,MAAA,IAAU,EAAC,EAAG,CAAA;AAC1D;;;;"}
+{"version":3,"file":"PipelineRunParams.esm.js","sources":["../../../src/components/PipelineRunParamsAndResults/PipelineRunParams.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { PipelineRunKind } from '@backstage-community/plugin-tekton-react';\nimport Typography from '@mui/material/Typography';\nimport { tektonTranslationRef } from '../../translations';\nimport { Output } from './Output';\n\ntype PipelineRunParamsProps = {\n  pipelineRun: PipelineRunKind;\n};\n\nexport const PipelineRunParams = ({ pipelineRun }: PipelineRunParamsProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n  const noDataAvailable =\n    pipelineRun.spec?.params === undefined ||\n    pipelineRun.spec?.params.length === 0;\n\n  if (noDataAvailable) {\n    return (\n      <Typography align=\"center\" variant=\"body2\">\n        {t('pipelineRunParamsAndResults.noParams')}\n      </Typography>\n    );\n  }\n\n  return <Output results={pipelineRun?.spec.params ?? []} />;\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,MAAM,iBAAA,GAAoB,CAAC,EAAE,WAAA,EAAY,KAA8B;AAC5E,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AACpD,EAAA,MAAM,eAAA,GACJ,YAAY,IAAA,EAAM,MAAA,KAAW,UAC7B,WAAA,CAAY,IAAA,EAAM,OAAO,MAAA,KAAW,CAAA;AAEtC,EAAA,IAAI,eAAA,EAAiB;AACnB,IAAA,uBACE,GAAA,CAAC,cAAW,KAAA,EAAM,QAAA,EAAS,SAAQ,OAAA,EAChC,QAAA,EAAA,CAAA,CAAE,sCAAsC,CAAA,EAC3C,CAAA;AAAA,EAEJ;AAEA,EAAA,2BAAQ,MAAA,EAAA,EAAO,OAAA,EAAS,aAAa,IAAA,CAAK,MAAA,IAAU,EAAC,EAAG,CAAA;AAC1D;;;;"}

package/dist/components/PipelineRunParamsAndResults/PipelineRunParamsAndResults.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
-import { Typography } from '@material-ui/core';
+import Typography from '@mui/material/Typography';
 import { PipelineRunParams } from './PipelineRunParams.esm.js';
 import { PipelineRunResults } from './PipelineRunResults.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';