@backstage-community/plugin-tekton 3.38.0 → 3.40.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @backstage-community/plugin-tekton
 
+## 3.40.0
+
+### Minor Changes
+
+- 3ad9785: Backstage version bump to v1.52.0
+
+### Patch Changes
+
+- 9ec30ec: Migrated the Tekton plugin UI from Material UI v4 (`@material-ui/*`) to MUI v5 (`@mui/*`). Replaced `makeStyles`/`withStyles` usage with `sx` prop styling and added `TektonStylesProvider` with a class name seed to avoid CSS collisions with the host app. No breaking API changes.
+- 6622075: Updated dependency `@playwright/test` to `1.61.1`.
+- 0aa5613: Replaced legacy `@mui/styles` `StylesProvider` with Emotion `CacheProvider` in `TektonStylesProvider` to scope sx/styled class names and avoid CSS collisions with the host app. Removed the `@mui/styles` and unused `@mui/lab` dependencies in favor of `@emotion/cache` and `@emotion/react`. Fixed the pipeline run output dialog layout so expanded output sections scroll inside the dialog instead of overflowing its border. Declared `mobx-react` as a direct dependency for pipeline topology components. No breaking API changes.
+- Updated dependencies [3ad9785]
+  - @backstage-community/plugin-tekton-common@1.23.0
+  - @backstage-community/plugin-tekton-react@0.8.0
+
+## 3.39.0
+
+### Minor Changes
+
+- bbdacfc: Backstage version bump to v1.51.0
+
+### Patch Changes
+
+- Updated dependencies [bbdacfc]
+  - @backstage-community/plugin-tekton-common@1.22.0
+  - @backstage-community/plugin-tekton-react@0.7.0
+
 ## 3.38.0
 
 ### Minor Changes

package/dist/components/Icons/CriticalRiskIcon.esm.js

@@ -3,7 +3,9 @@ import { t_color_red_60 } from '@patternfly/react-tokens/dist/js/t_color_red_60'
 
 const CriticalRiskIcon = ({
   className,
-  title
+  height,
+  title,
+  width
 }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -12,6 +14,8 @@ const CriticalRiskIcon = ({
       fill: t_color_red_60.value,
       xmlns: "http://www.w3.org/2000/svg",
       className,
+      height,
+      width,
       children: [
         title && /* @__PURE__ */ jsx("title", { children: title }),
         /* @__PURE__ */ jsx("path", { d: "M897.86597,252.24865 L491.105712,7.96742801 C473.40731,-2.65897781 451.300057,-2.65597516 433.611654,7.97743687 L27.1213875,252.245648 C10.3059556,262.353595 0.0163032058,280.549701 0.0163032058,300.182078 L0.0163032058,967.971163 C-1.04266102,1010.81008 49.7156241,1038.89994 85.4314175,1015.41816 C85.4304175,1015.42016 432.807682,798.630273 432.807682,798.630273 C450.891071,787.348287 473.816296,787.342282 491.906685,798.624268 L839.584939,1015.4612 C875.297732,1039.03406 926.031018,1010.73602 924.984054,968.003192 C924.985054,968.005193 924.985054,300.192087 924.985054,300.192087 C924.985054,280.552703 914.688401,262.353595 897.86597,252.24865" })

package/dist/components/Icons/CriticalRiskIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalRiskIcon.esm.js","sources":["../../../src/components/Icons/CriticalRiskIcon.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 { ReactElement } from 'react';\n\nimport { t_color_red_60 as criticalColor } from '@patternfly/react-tokens/dist/js/t_color_red_60';\n\nconst CriticalRiskIcon = ({\n  className,\n  title,\n}: {\n  className: string;\n  title?: string;\n}): ReactElement => {\n  return (\n    <svg\n      viewBox=\"0 0 925 1024\"\n      fill={criticalColor.value}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      {title && <title>{title}</title>}\n      <path d=\"M897.86597,252.24865 L491.105712,7.96742801 C473.40731,-2.65897781 451.300057,-2.65597516 433.611654,7.97743687 L27.1213875,252.245648 C10.3059556,262.353595 0.0163032058,280.549701 0.0163032058,300.182078 L0.0163032058,967.971163 C-1.04266102,1010.81008 49.7156241,1038.89994 85.4314175,1015.41816 C85.4304175,1015.42016 432.807682,798.630273 432.807682,798.630273 C450.891071,787.348287 473.816296,787.342282 491.906685,798.624268 L839.584939,1015.4612 C875.297732,1039.03406 926.031018,1010.73602 924.984054,968.003192 C924.985054,968.005193 924.985054,300.192087 924.985054,300.192087 C924.985054,280.552703 914.688401,262.353595 897.86597,252.24865\" />\n    </svg>\n  );\n};\n\nexport default CriticalRiskIcon;\n"],"names":["criticalColor"],"mappings":";;;AAmBA,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAA;AAAA,EACA;AACF,CAAA,KAGoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,cAAA;AAAA,MACR,MAAMA,cAAA,CAAc,KAAA;AAAA,MACpB,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+oBAAA,EAAgpB;AAAA;AAAA;AAAA,GAC1pB;AAEJ;;;;"}
+{"version":3,"file":"CriticalRiskIcon.esm.js","sources":["../../../src/components/Icons/CriticalRiskIcon.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 { CSSProperties, ReactElement } from 'react';\n\nimport { t_color_red_60 as criticalColor } from '@patternfly/react-tokens/dist/js/t_color_red_60';\n\nconst CriticalRiskIcon = ({\n  className,\n  height,\n  title,\n  width,\n}: {\n  className?: string;\n  height?: CSSProperties['height'];\n  title?: string;\n  width?: CSSProperties['width'];\n}): ReactElement => {\n  return (\n    <svg\n      viewBox=\"0 0 925 1024\"\n      fill={criticalColor.value}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      height={height}\n      width={width}\n    >\n      {title && <title>{title}</title>}\n      <path d=\"M897.86597,252.24865 L491.105712,7.96742801 C473.40731,-2.65897781 451.300057,-2.65597516 433.611654,7.97743687 L27.1213875,252.245648 C10.3059556,262.353595 0.0163032058,280.549701 0.0163032058,300.182078 L0.0163032058,967.971163 C-1.04266102,1010.81008 49.7156241,1038.89994 85.4314175,1015.41816 C85.4304175,1015.42016 432.807682,798.630273 432.807682,798.630273 C450.891071,787.348287 473.816296,787.342282 491.906685,798.624268 L839.584939,1015.4612 C875.297732,1039.03406 926.031018,1010.73602 924.984054,968.003192 C924.985054,968.005193 924.985054,300.192087 924.985054,300.192087 C924.985054,280.552703 914.688401,262.353595 897.86597,252.24865\" />\n    </svg>\n  );\n};\n\nexport default CriticalRiskIcon;\n"],"names":["criticalColor"],"mappings":";;;AAmBA,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAKoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,cAAA;AAAA,MACR,MAAMA,cAAA,CAAc,KAAA;AAAA,MACpB,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,+oBAAA,EAAgpB;AAAA;AAAA;AAAA,GAC1pB;AAEJ;;;;"}

package/dist/components/Icons/EqualsIcon.esm.js

@@ -3,7 +3,9 @@ import { t_color_yellow_40 } from '@patternfly/react-tokens/dist/js/t_color_yell
 
 const EqualsIcon = ({
   className,
-  title
+  height,
+  title,
+  width
 }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -12,6 +14,8 @@ const EqualsIcon = ({
       fill: t_color_yellow_40.value,
       xmlns: "http://www.w3.org/2000/svg",
       className,
+      height,
+      width,
       children: [
         title && /* @__PURE__ */ jsx("title", { children: title }),
         /* @__PURE__ */ jsx("path", { d: "M160-280v-120h640v120H160Zm0-280v-120h640v120H160Z" })

package/dist/components/Icons/EqualsIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EqualsIcon.esm.js","sources":["../../../src/components/Icons/EqualsIcon.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 { ReactElement } from 'react';\n\nimport { t_color_yellow_40 as mediumColor } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';\n\nconst EqualsIcon = ({\n  className,\n  title,\n}: {\n  className: string;\n  title?: string;\n}): ReactElement => {\n  return (\n    <svg\n      viewBox=\"0 -960 960 960\"\n      fill={mediumColor.value}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      {title && <title>{title}</title>}\n      <path d=\"M160-280v-120h640v120H160Zm0-280v-120h640v120H160Z\" />\n    </svg>\n  );\n};\n\nexport default EqualsIcon;\n"],"names":["mediumColor"],"mappings":";;;AAmBA,MAAM,aAAa,CAAC;AAAA,EAClB,SAAA;AAAA,EACA;AACF,CAAA,KAGoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,gBAAA;AAAA,MACR,MAAMA,iBAAA,CAAY,KAAA;AAAA,MAClB,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oDAAA,EAAqD;AAAA;AAAA;AAAA,GAC/D;AAEJ;;;;"}
+{"version":3,"file":"EqualsIcon.esm.js","sources":["../../../src/components/Icons/EqualsIcon.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 { CSSProperties, ReactElement } from 'react';\n\nimport { t_color_yellow_40 as mediumColor } from '@patternfly/react-tokens/dist/js/t_color_yellow_40';\n\nconst EqualsIcon = ({\n  className,\n  height,\n  title,\n  width,\n}: {\n  className?: string;\n  height?: CSSProperties['height'];\n  title?: string;\n  width?: CSSProperties['width'];\n}): ReactElement => {\n  return (\n    <svg\n      viewBox=\"0 -960 960 960\"\n      fill={mediumColor.value}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n      height={height}\n      width={width}\n    >\n      {title && <title>{title}</title>}\n      <path d=\"M160-280v-120h640v120H160Zm0-280v-120h640v120H160Z\" />\n    </svg>\n  );\n};\n\nexport default EqualsIcon;\n"],"names":["mediumColor"],"mappings":";;;AAmBA,MAAM,aAAa,CAAC;AAAA,EAClB,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAKoB;AAClB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,gBAAA;AAAA,MACR,MAAMA,iBAAA,CAAY,KAAA;AAAA,MAClB,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAS,GAAA,CAAC,WAAO,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oDAAA,EAAqD;AAAA;AAAA;AAAA,GAC/D;AAEJ;;;;"}

package/dist/components/Icons/LinkToSbomIcon.esm.js

@@ -1,22 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyles, createStyles } from '@material-ui/core';
-import classNames from 'classnames';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    icon: {
-      fill: theme.palette.text.primary
-    },
-    disabledButton: {
-      fill: theme.palette.text.disabled
-    }
-  })
-);
 const LinkToSBomIcon = ({
   disabled,
   dataTestId
 }) => {
-  const classes = useStyles();
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -25,9 +14,9 @@ const LinkToSBomIcon = ({
       height: "24",
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
-      className: classNames(classes.icon, {
-        [classes.disabledButton]: disabled
-      }),
+      style: {
+        fill: disabled ? theme.palette.text.disabled : theme.palette.text.primary
+      },
       children: /* @__PURE__ */ jsx("path", { d: "M11 17H7C5.61667 17 4.4375 16.5125 3.4625 15.5375C2.4875 14.5625 2 13.3833 2 12C2 10.6167 2.4875 9.4375 3.4625 8.4625C4.4375 7.4875 5.61667 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5625 7.4875 20.5375 8.4625C21.5125 9.4375 22 10.6167 22 12C22 13.3833 21.5125 14.5625 20.5375 15.5375C19.5625 16.5125 18.3833 17 17 17H13Z" })
     }
   );

package/dist/components/Icons/LinkToSbomIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkToSbomIcon.esm.js","sources":["../../../src/components/Icons/LinkToSbomIcon.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 { ReactElement } from 'react';\n\nimport { createStyles, makeStyles, Theme } from '@material-ui/core';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    icon: {\n      fill: theme.palette.text.primary,\n    },\n    disabledButton: {\n      fill: theme.palette.text.disabled,\n    },\n  }),\n);\n\nconst LinkToSBomIcon = ({\n  disabled,\n  dataTestId,\n}: {\n  dataTestId: string;\n  disabled?: boolean;\n}): ReactElement => {\n  const classes = useStyles();\n  return (\n    <svg\n      data-testid={dataTestId}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(classes.icon, {\n        [classes.disabledButton]: disabled,\n      })}\n    >\n      <path d=\"M11 17H7C5.61667 17 4.4375 16.5125 3.4625 15.5375C2.4875 14.5625 2 13.3833 2 12C2 10.6167 2.4875 9.4375 3.4625 8.4625C4.4375 7.4875 5.61667 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5625 7.4875 20.5375 8.4625C21.5125 9.4375 22 10.6167 22 12C22 13.3833 21.5125 14.5625 20.5375 15.5375C19.5625 16.5125 18.3833 17 17 17H13Z\" />\n    </svg>\n  );\n};\n\nexport default LinkToSBomIcon;\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA,KAC3B;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAC3B,GACD;AACH,CAAA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAA;AAAA,EACA;AACF,CAAA,KAGoB;AAClB,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,UAAA;AAAA,MACb,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,UAAA,CAAW,OAAA,CAAQ,IAAA,EAAM;AAAA,QAClC,CAAC,OAAA,CAAQ,cAAc,GAAG;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,2nBAAA,EAA4nB;AAAA;AAAA,GACtoB;AAEJ;;;;"}
+{"version":3,"file":"LinkToSbomIcon.esm.js","sources":["../../../src/components/Icons/LinkToSbomIcon.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 { ReactElement } from 'react';\n\nimport { useTheme } from '@mui/material/styles';\n\nconst LinkToSBomIcon = ({\n  disabled,\n  dataTestId,\n}: {\n  dataTestId: string;\n  disabled?: boolean;\n}): ReactElement => {\n  const theme = useTheme();\n  return (\n    <svg\n      data-testid={dataTestId}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        fill: disabled\n          ? theme.palette.text.disabled\n          : theme.palette.text.primary,\n      }}\n    >\n      <path d=\"M11 17H7C5.61667 17 4.4375 16.5125 3.4625 15.5375C2.4875 14.5625 2 13.3833 2 12C2 10.6167 2.4875 9.4375 3.4625 8.4625C4.4375 7.4875 5.61667 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5625 7.4875 20.5375 8.4625C21.5125 9.4375 22 10.6167 22 12C22 13.3833 21.5125 14.5625 20.5375 15.5375C19.5625 16.5125 18.3833 17 17 17H13Z\" />\n    </svg>\n  );\n};\n\nexport default LinkToSBomIcon;\n"],"names":[],"mappings":";;;AAmBA,MAAM,iBAAiB,CAAC;AAAA,EACtB,QAAA;AAAA,EACA;AACF,CAAA,KAGoB;AAClB,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,UAAA;AAAA,MACb,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAM,4BAAA;AAAA,MACN,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,WACF,KAAA,CAAM,OAAA,CAAQ,KAAK,QAAA,GACnB,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,OACzB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,2nBAAA,EAA4nB;AAAA;AAAA,GACtoB;AAEJ;;;;"}

package/dist/components/Icons/OutputIcon.esm.js

@@ -1,19 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyles, createStyles } from '@material-ui/core';
-import classNames from 'classnames';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    icon: {
-      fill: theme.palette.text.primary
-    },
-    disabledButton: {
-      fill: theme.palette.text.disabled
-    }
-  })
-);
 const OutputIcon = ({ disabled }) => {
-  const classes = useStyles();
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -22,9 +11,9 @@ const OutputIcon = ({ disabled }) => {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: classNames(classes.icon, {
-        [classes.disabledButton]: disabled
-      }),
+      style: {
+        fill: disabled ? theme.palette.text.disabled : theme.palette.text.primary
+      },
       children: /* @__PURE__ */ jsx("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM7 12V10H17V12H7ZM7 16V14H13V16H7Z" })
     }
   );

package/dist/components/Icons/OutputIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OutputIcon.esm.js","sources":["../../../src/components/Icons/OutputIcon.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 { ReactElement } from 'react';\n\nimport { createStyles, makeStyles, Theme } from '@material-ui/core';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    icon: {\n      fill: theme.palette.text.primary,\n    },\n    disabledButton: {\n      fill: theme.palette.text.disabled,\n    },\n  }),\n);\n\nconst OutputIcon = ({ disabled }: { disabled?: boolean }): ReactElement => {\n  const classes = useStyles();\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(classes.icon, {\n        [classes.disabledButton]: disabled,\n      })}\n    >\n      <path d=\"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM7 12V10H17V12H7ZM7 16V14H13V16H7Z\" />\n    </svg>\n  );\n};\n\nexport default OutputIcon;\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA,KAC3B;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAC3B,GACD;AACH,CAAA;AAEA,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAS,KAA4C;AACzE,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,UAAA,CAAW,OAAA,CAAQ,IAAA,EAAM;AAAA,QAClC,CAAC,OAAA,CAAQ,cAAc,GAAG;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oVAAA,EAAqV;AAAA;AAAA,GAC/V;AAEJ;;;;"}
+{"version":3,"file":"OutputIcon.esm.js","sources":["../../../src/components/Icons/OutputIcon.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 { ReactElement } from 'react';\n\nimport { useTheme } from '@mui/material/styles';\n\nconst OutputIcon = ({ disabled }: { disabled?: boolean }): ReactElement => {\n  const theme = useTheme();\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        fill: disabled\n          ? theme.palette.text.disabled\n          : theme.palette.text.primary,\n      }}\n    >\n      <path d=\"M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V7H5V19ZM7 12V10H17V12H7ZM7 16V14H13V16H7Z\" />\n    </svg>\n  );\n};\n\nexport default OutputIcon;\n"],"names":[],"mappings":";;;AAmBA,MAAM,UAAA,GAAa,CAAC,EAAE,QAAA,EAAS,KAA4C;AACzE,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAM,4BAAA;AAAA,MACN,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,WACF,KAAA,CAAM,OAAA,CAAQ,KAAK,QAAA,GACnB,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,OACzB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oVAAA,EAAqV;AAAA;AAAA,GAC/V;AAEJ;;;;"}

package/dist/components/Icons/ViewLogsIcon.esm.js

@@ -1,19 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { makeStyles, createStyles } from '@material-ui/core';
-import classNames from 'classnames';
+import { useTheme } from '@mui/material/styles';
 
-const useStyles = makeStyles(
-  (theme) => createStyles({
-    icon: {
-      fill: theme.palette.text.primary
-    },
-    disabledButton: {
-      fill: theme.palette.text.disabled
-    }
-  })
-);
 const ViewLogsIcon = ({ disabled }) => {
-  const classes = useStyles();
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -21,9 +10,9 @@ const ViewLogsIcon = ({ disabled }) => {
       height: "24",
       viewBox: "0 0 24 24",
       xmlns: "http://www.w3.org/2000/svg",
-      className: classNames(classes.icon, {
-        [classes.disabledButton]: disabled
-      }),
+      style: {
+        fill: disabled ? theme.palette.text.disabled : theme.palette.text.primary
+      },
       children: /* @__PURE__ */ jsx("path", { d: "M4.5 21C4.0875 21 3.73438 20.8531 3.44063 20.5594C3.14688 20.2656 3 19.9125 3 19.5V4.5C3 4.0875 3.14688 3.73438 3.44063 3.44063C3.73438 3.14688 4.0875 3 4.5 3H19.5C19.9125 3 20.2656 3.14688 20.5594 3.44063C20.8531 3.73438 21 4.0875 21 4.5V19.5C21 19.9125 20.8531 20.2656 20.5594 20.5594C20.2656 20.8531 19.9125 21 19.5 21H4.5ZM4.5 19.5H19.5V6.5H4.5V19.5ZM12.001 16.875C10.667 16.875 9.475 16.5154 8.425 15.7962C7.375 15.077 6.60833 14.1437 6.125 12.9962C6.60833 11.8487 7.37466 10.9167 8.42398 10.2C9.47329 9.48333 10.665 9.125 11.999 9.125C13.333 9.125 14.525 9.48459 15.575 10.2038C16.625 10.923 17.3917 11.8563 17.875 13.0038C17.3917 14.1513 16.6253 15.0833 15.576 15.8C14.5267 16.5167 13.335 16.875 12.001 16.875ZM11.9971 14.25C11.649 14.25 11.3542 14.1282 11.1125 13.8846C10.8708 13.6409 10.75 13.3451 10.75 12.9971C10.75 12.649 10.8718 12.3542 11.1155 12.1125C11.3591 11.8708 11.6549 11.75 12.003 11.75C12.351 11.75 12.6458 11.8718 12.8875 12.1155C13.1292 12.3591 13.25 12.6549 13.25 13.003C13.25 13.351 13.1282 13.6458 12.8846 13.8875C12.6409 14.1292 12.3451 14.25 11.9971 14.25ZM12 15C12.56 15 13.0333 14.8067 13.42 14.42C13.8067 14.0333 14 13.56 14 13C14 12.44 13.8067 11.9667 13.42 11.58C13.0333 11.1933 12.56 11 12 11C11.44 11 10.9667 11.1933 10.58 11.58C10.1933 11.9667 10 12.44 10 13C10 13.56 10.1933 14.0333 10.58 14.42C10.9667 14.8067 11.44 15 12 15Z" })
     }
   );

package/dist/components/Icons/ViewLogsIcon.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewLogsIcon.esm.js","sources":["../../../src/components/Icons/ViewLogsIcon.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 { ReactElement } from 'react';\n\nimport { createStyles, makeStyles, Theme } from '@material-ui/core';\nimport classNames from 'classnames';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    icon: {\n      fill: theme.palette.text.primary,\n    },\n    disabledButton: {\n      fill: theme.palette.text.disabled,\n    },\n  }),\n);\n\nconst ViewLogsIcon = ({ disabled }: { disabled?: boolean }): ReactElement => {\n  const classes = useStyles();\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={classNames(classes.icon, {\n        [classes.disabledButton]: disabled,\n      })}\n    >\n      <path d=\"M4.5 21C4.0875 21 3.73438 20.8531 3.44063 20.5594C3.14688 20.2656 3 19.9125 3 19.5V4.5C3 4.0875 3.14688 3.73438 3.44063 3.44063C3.73438 3.14688 4.0875 3 4.5 3H19.5C19.9125 3 20.2656 3.14688 20.5594 3.44063C20.8531 3.73438 21 4.0875 21 4.5V19.5C21 19.9125 20.8531 20.2656 20.5594 20.5594C20.2656 20.8531 19.9125 21 19.5 21H4.5ZM4.5 19.5H19.5V6.5H4.5V19.5ZM12.001 16.875C10.667 16.875 9.475 16.5154 8.425 15.7962C7.375 15.077 6.60833 14.1437 6.125 12.9962C6.60833 11.8487 7.37466 10.9167 8.42398 10.2C9.47329 9.48333 10.665 9.125 11.999 9.125C13.333 9.125 14.525 9.48459 15.575 10.2038C16.625 10.923 17.3917 11.8563 17.875 13.0038C17.3917 14.1513 16.6253 15.0833 15.576 15.8C14.5267 16.5167 13.335 16.875 12.001 16.875ZM11.9971 14.25C11.649 14.25 11.3542 14.1282 11.1125 13.8846C10.8708 13.6409 10.75 13.3451 10.75 12.9971C10.75 12.649 10.8718 12.3542 11.1155 12.1125C11.3591 11.8708 11.6549 11.75 12.003 11.75C12.351 11.75 12.6458 11.8718 12.8875 12.1155C13.1292 12.3591 13.25 12.6549 13.25 13.003C13.25 13.351 13.1282 13.6458 12.8846 13.8875C12.6409 14.1292 12.3451 14.25 11.9971 14.25ZM12 15C12.56 15 13.0333 14.8067 13.42 14.42C13.8067 14.0333 14 13.56 14 13C14 12.44 13.8067 11.9667 13.42 11.58C13.0333 11.1933 12.56 11 12 11C11.44 11 10.9667 11.1933 10.58 11.58C10.1933 11.9667 10 12.44 10 13C10 13.56 10.1933 14.0333 10.58 14.42C10.9667 14.8067 11.44 15 12 15Z\" />\n    </svg>\n  );\n};\n\nexport default ViewLogsIcon;\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAA,GAAY,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAA,CAAa;AAAA,IACX,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA,KAC3B;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,KAAA,CAAM,OAAA,CAAQ,IAAA,CAAK;AAAA;AAC3B,GACD;AACH,CAAA;AAEA,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAA4C;AAC3E,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA,EAAW,UAAA,CAAW,OAAA,CAAQ,IAAA,EAAM;AAAA,QAClC,CAAC,OAAA,CAAQ,cAAc,GAAG;AAAA,OAC3B,CAAA;AAAA,MAED,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,u1CAAA,EAAw1C;AAAA;AAAA,GACl2C;AAEJ;;;;"}
+{"version":3,"file":"ViewLogsIcon.esm.js","sources":["../../../src/components/Icons/ViewLogsIcon.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 { ReactElement } from 'react';\n\nimport { useTheme } from '@mui/material/styles';\n\nconst ViewLogsIcon = ({ disabled }: { disabled?: boolean }): ReactElement => {\n  const theme = useTheme();\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      style={{\n        fill: disabled\n          ? theme.palette.text.disabled\n          : theme.palette.text.primary,\n      }}\n    >\n      <path d=\"M4.5 21C4.0875 21 3.73438 20.8531 3.44063 20.5594C3.14688 20.2656 3 19.9125 3 19.5V4.5C3 4.0875 3.14688 3.73438 3.44063 3.44063C3.73438 3.14688 4.0875 3 4.5 3H19.5C19.9125 3 20.2656 3.14688 20.5594 3.44063C20.8531 3.73438 21 4.0875 21 4.5V19.5C21 19.9125 20.8531 20.2656 20.5594 20.5594C20.2656 20.8531 19.9125 21 19.5 21H4.5ZM4.5 19.5H19.5V6.5H4.5V19.5ZM12.001 16.875C10.667 16.875 9.475 16.5154 8.425 15.7962C7.375 15.077 6.60833 14.1437 6.125 12.9962C6.60833 11.8487 7.37466 10.9167 8.42398 10.2C9.47329 9.48333 10.665 9.125 11.999 9.125C13.333 9.125 14.525 9.48459 15.575 10.2038C16.625 10.923 17.3917 11.8563 17.875 13.0038C17.3917 14.1513 16.6253 15.0833 15.576 15.8C14.5267 16.5167 13.335 16.875 12.001 16.875ZM11.9971 14.25C11.649 14.25 11.3542 14.1282 11.1125 13.8846C10.8708 13.6409 10.75 13.3451 10.75 12.9971C10.75 12.649 10.8718 12.3542 11.1155 12.1125C11.3591 11.8708 11.6549 11.75 12.003 11.75C12.351 11.75 12.6458 11.8718 12.8875 12.1155C13.1292 12.3591 13.25 12.6549 13.25 13.003C13.25 13.351 13.1282 13.6458 12.8846 13.8875C12.6409 14.1292 12.3451 14.25 11.9971 14.25ZM12 15C12.56 15 13.0333 14.8067 13.42 14.42C13.8067 14.0333 14 13.56 14 13C14 12.44 13.8067 11.9667 13.42 11.58C13.0333 11.1933 12.56 11 12 11C11.44 11 10.9667 11.1933 10.58 11.58C10.1933 11.9667 10 12.44 10 13C10 13.56 10.1933 14.0333 10.58 14.42C10.9667 14.8067 11.44 15 12 15Z\" />\n    </svg>\n  );\n};\n\nexport default ViewLogsIcon;\n"],"names":[],"mappings":";;;AAmBA,MAAM,YAAA,GAAe,CAAC,EAAE,QAAA,EAAS,KAA4C;AAC3E,EAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,IAAA;AAAA,MACN,MAAA,EAAO,IAAA;AAAA,MACP,OAAA,EAAQ,WAAA;AAAA,MACR,KAAA,EAAM,4BAAA;AAAA,MACN,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,WACF,KAAA,CAAM,OAAA,CAAQ,KAAK,QAAA,GACnB,KAAA,CAAM,QAAQ,IAAA,CAAK;AAAA,OACzB;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,u1CAAA,EAAw1C;AAAA;AAAA,GACl2C;AAEJ;;;;"}

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

@@ -1,7 +1,15 @@
 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 { Box, Paper, Toolbar, Typography, Table, TableBody, TableRow, TableCell, TablePagination, makeStyles } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 import { ComputedStatus, pipelineRunStatus } from '@backstage-community/plugin-tekton-react';
 import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
 import { getComparator } from '../../utils/tekton-utils.esm.js';
@@ -16,43 +24,27 @@ 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 { pipelineRunTableSx } from './pipelineRunTableColumns.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    alignItems: "start",
-    padding: theme.spacing(3, 0, 2.5, 2.5)
-  },
-  empty: {
-    padding: theme.spacing(2),
-    display: "flex",
-    justifyContent: "center"
-  },
-  title: {
-    display: "flex",
-    gap: "20px",
-    alignItems: "center"
-  },
-  footer: {
-    "&:nth-of-type(odd)": {
-      backgroundColor: `${theme.palette.background.paper}`
-    }
-  }
-}));
+const titleSx = {
+  display: "flex",
+  gap: "20px",
+  alignItems: "center"
+};
 const WrapperInfoCard = ({
   children,
   allErrors,
-  showClusterSelector = true,
-  titleClassName
+  showClusterSelector = true
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   allErrors && allErrors.length > 0 && /* @__PURE__ */ jsx(ErrorPanel, { allErrors }),
   /* @__PURE__ */ jsx(
     InfoCard,
     {
       ...showClusterSelector && {
-        title: /* @__PURE__ */ jsxs("div", { className: titleClassName, children: [
+        title: /* @__PURE__ */ jsxs(Box, { sx: titleSx, children: [
           /* @__PURE__ */ jsx(ClusterSelector, {}),
           /* @__PURE__ */ jsx(StatusSelector, {}),
           /* @__PURE__ */ jsx(TableExpandCollapse, {})
@@ -136,7 +128,6 @@ const PipelineRunList$1 = () => {
     0,
     (1 + page) * rowsPerPage - (filteredPipelineRuns.length ?? 0)
   ) : 0;
-  const classes = useStyles();
   const allErrors = [
     ...responseError ? [{ message: responseError }] : [],
     ...selectedClusterErrors ?? []
@@ -148,7 +139,6 @@ const PipelineRunList$1 = () => {
     {
       allErrors,
       showClusterSelector: clusters.length > 0,
-      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") }),
@@ -159,7 +149,7 @@ const PipelineRunList$1 = () => {
           {
             "aria-labelledby": "Pipeline Runs",
             size: "small",
-            style: { width: "100%" },
+            sx: pipelineRunTableSx,
             children: [
               /* @__PURE__ */ jsx(
                 EnhancedTableHead,
@@ -173,45 +163,59 @@ const PipelineRunList$1 = () => {
               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,
+                /* @__PURE__ */ jsx(
+                  TableRow,
                   {
-                    rowsPerPageOptions: [
-                      {
-                        value: 5,
-                        label: t(
-                          "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
-                          { num: "5" }
-                        )
-                      },
-                      {
-                        value: 10,
-                        label: t(
-                          "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
-                          { num: "10" }
-                        )
-                      },
+                    sx: {
+                      "&:nth-of-type(odd)": {
+                        backgroundColor: (theme) => theme.palette.background.paper
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      TablePagination,
                       {
-                        value: 25,
-                        label: t(
-                          "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
-                          { num: "25" }
-                        )
+                        rowsPerPageOptions: [
+                          {
+                            value: 5,
+                            label: t(
+                              "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
+                              { num: "5" }
+                            )
+                          },
+                          {
+                            value: 10,
+                            label: t(
+                              "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
+                              { num: "10" }
+                            )
+                          },
+                          {
+                            value: 25,
+                            label: t(
+                              "pipelineRunList.tablePagination.rowsPerPageOptionLabel",
+                              { num: "25" }
+                            )
+                          }
+                        ],
+                        count: filteredPipelineRuns.length,
+                        rowsPerPage,
+                        page,
+                        onPageChange: handleChangePage,
+                        onRowsPerPageChange: handleChangeRowsPerPage,
+                        labelRowsPerPage: null
                       }
-                    ],
-                    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",
+                Box,
                 {
                   "data-testid": "no-pipeline-runs",
-                  className: classes.empty,
+                  sx: {
+                    padding: 2,
+                    display: "flex",
+                    justifyContent: "center"
+                  },
                   children: t("pipelineRunList.noPipelineRuns")
                 }
               ) }) }) })

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 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 '@backstage-community/plugin-tekton-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 '../../translations/index.ts';\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                      {\n                        value: 5,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '5' },\n                        ),\n                      },\n                      {\n                        value: 10,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '10' },\n                        ),\n                      },\n                      {\n                        value: 25,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '25' },\n                        ),\n                      },\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":["PipelineRunList"],"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 Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TablePagination from '@mui/material/TablePagination';\nimport TableRow from '@mui/material/TableRow';\nimport Toolbar from '@mui/material/Toolbar';\nimport Typography from '@mui/material/Typography';\n\nimport {\n  ComputedStatus,\n  PipelineRunKind,\n  pipelineRunStatus,\n} from '@backstage-community/plugin-tekton-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 { pipelineRunTableSx } from './pipelineRunTableColumns';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype WrapperInfoCardProps = {\n  allErrors?: ClusterErrors;\n  showClusterSelector?: boolean;\n};\n\nconst titleSx = {\n  display: 'flex',\n  gap: '20px',\n  alignItems: 'center',\n};\n\nconst WrapperInfoCard = ({\n  children,\n  allErrors,\n  showClusterSelector = true,\n}: PropsWithChildren<WrapperInfoCardProps>) => (\n  <>\n    {allErrors && allErrors.length > 0 && <ErrorPanel allErrors={allErrors} />}\n    <InfoCard\n      {...(showClusterSelector && {\n        title: (\n          <Box sx={titleSx}>\n            <ClusterSelector />\n            <StatusSelector />\n            <TableExpandCollapse />\n          </Box>\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 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    >\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            sx={pipelineRunTableSx}\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\n                  sx={{\n                    '&:nth-of-type(odd)': {\n                      backgroundColor: theme => theme.palette.background.paper,\n                    },\n                  }}\n                >\n                  <TablePagination\n                    rowsPerPageOptions={[\n                      {\n                        value: 5,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '5' },\n                        ),\n                      },\n                      {\n                        value: 10,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '10' },\n                        ),\n                      },\n                      {\n                        value: 25,\n                        label: t(\n                          'pipelineRunList.tablePagination.rowsPerPageOptionLabel',\n                          { num: '25' },\n                        ),\n                      },\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                    <Box\n                      data-testid=\"no-pipeline-runs\"\n                      sx={{\n                        padding: 2,\n                        display: 'flex',\n                        justifyContent: 'center',\n                      }}\n                    >\n                      {t('pipelineRunList.noPipelineRuns')}\n                    </Box>\n                  </td>\n                </tr>\n              </tbody>\n            )}\n          </Table>\n        </Paper>\n      </Box>\n    </WrapperInfoCard>\n  );\n};\n\nexport default memo(PipelineRunList);\n"],"names":["PipelineRunList"],"mappings":"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"}

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

@@ -1,24 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
-import { FormControl, Input, InputAdornment, IconButton, makeStyles } from '@material-ui/core';
-import Clear from '@material-ui/icons/Clear';
-import Search from '@material-ui/icons/Search';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import Clear from '@mui/icons-material/Clear';
+import Search from '@mui/icons-material/Search';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import '../../translations/index.esm.js';
 import { tektonTranslationRef } from '../../translations/ref.esm.js';
 
-const useStyles = makeStyles({
-  formControl: {
-    alignItems: "flex-end",
-    flexGrow: 1
-  }
-});
 const PipelineRunListSearchBar = ({
   value,
   onChange
 }) => {
-  const classes = useStyles();
   const { t } = useTranslationRef(tektonTranslationRef);
-  return /* @__PURE__ */ jsx(FormControl, { className: classes.formControl, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormControl, { sx: { alignItems: "flex-end", flexGrow: 1 }, children: /* @__PURE__ */ jsx(
     Input,
     {
       "aria-label": "search",

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 {\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 '../../translations/index.ts';\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,UAAA,CAAW;AAAA,EAC3B,WAAA,EAAa;AAAA,IACX,UAAA,EAAY,UAAA;AAAA,IACZ,QAAA,EAAU;AAAA;AAEd,CAAC,CAAA;AAEM,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA;AACF,CAAA,KAAqC;AACnC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACE,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,WAAA,EAC9B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,EAAE,sCAAsC,CAAA;AAAA,MACrD,YAAA,EAAa,KAAA;AAAA,MACb,QAAA,EAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC9C,KAAA;AAAA,MACA,gCACE,GAAA,CAAC,cAAA,EAAA,EAAe,UAAS,OAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,UAAO,CAAA,EACV,CAAA;AAAA,MAEF,YAAA,kBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAS,KAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,cAAA;AAAA,UACX,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,UAC1B,IAAA,EAAK,KAAA;AAAA,UACL,UAAU,CAAC,KAAA;AAAA,UACX,aAAA,EAAY,cAAA;AAAA,UAEZ,8BAAC,KAAA,EAAA,EAAM;AAAA;AAAA,OACT,EACF;AAAA;AAAA,GAEJ,EACF,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 FormControl from '@mui/material/FormControl';\nimport IconButton from '@mui/material/IconButton';\nimport Input from '@mui/material/Input';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Clear from '@mui/icons-material/Clear';\nimport Search from '@mui/icons-material/Search';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { tektonTranslationRef } from '../../translations/index.ts';\n\ntype PipelineRunListSearchBarProps = {\n  value: string;\n  onChange: (filter: string) => void;\n};\n\nexport const PipelineRunListSearchBar = ({\n  value,\n  onChange,\n}: PipelineRunListSearchBarProps) => {\n  const { t } = useTranslationRef(tektonTranslationRef);\n\n  return (\n    <FormControl sx={{ alignItems: 'flex-end', flexGrow: 1 }}>\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":";;;;;;;;;;;AA6BO,MAAM,2BAA2B,CAAC;AAAA,EACvC,KAAA;AAAA,EACA;AACF,CAAA,KAAqC;AACnC,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,oBAAoB,CAAA;AAEpD,EAAA,uBACE,GAAA,CAAC,eAAY,EAAA,EAAI,EAAE,YAAY,UAAA,EAAY,QAAA,EAAU,GAAE,EACrD,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,EAAE,sCAAsC,CAAA;AAAA,MACrD,YAAA,EAAa,KAAA;AAAA,MACb,QAAA,EAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MAC9C,KAAA;AAAA,MACA,gCACE,GAAA,CAAC,cAAA,EAAA,EAAe,UAAS,OAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,UAAO,CAAA,EACV,CAAA;AAAA,MAEF,YAAA,kBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAS,KAAA,EACvB,QAAA,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAW,cAAA;AAAA,UACX,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA;AAAA,UAC1B,IAAA,EAAK,KAAA;AAAA,UACL,UAAU,CAAC,KAAA;AAAA,UACX,aAAA,EAAY,cAAA;AAAA,UAEZ,8BAAC,KAAA,EAAA,EAAM;AAAA;AAAA,OACT,EACF;AAAA;AAAA,GAEJ,EACF,CAAA;AAEJ;;;;"}