@red-hat-developer-hub/plugin-cost-management 2.2.1 → 2.3.0

package/dist/pages/optimizations/OptimizationsPage.esm.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useMemo, useCallback } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import snakeCase from 'lodash/snakeCase';
@@ -141,63 +142,66 @@ function OptimizationsPage() {
     }));
   }, []);
   if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
   }
-  return /* @__PURE__ */ React.createElement(BasePage, { pageTitle: "Resource Optimization", withContentPadding: true }, /* @__PURE__ */ React.createElement(PageLayout, null, /* @__PURE__ */ React.createElement(PageLayout.Filters, null, /* @__PURE__ */ React.createElement(
-    Filters,
-    {
-      cluster: {
-        options: [],
-        label: "CLUSTERS"
-      },
-      project: {
-        options: [],
-        label: "PROJECTS"
-      },
-      workload: {
-        options: [],
-        label: "WORKLOADS"
-      },
-      workloadType: {
-        options: [],
-        label: "TYPES"
-      },
-      onFiltersChange: handleFiltersChange,
-      onFiltersReset: handleFiltersReset
-    }
-  )), /* @__PURE__ */ React.createElement(PageLayout.Table, null, /* @__PURE__ */ React.createElement(
-    Table,
-    {
-      components: {
-        Toolbar: TableToolbar
-      },
-      title: `Optimizable containers (${optimizableContainersCount ?? "N/A"})`,
-      options: {
-        debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,
-        padding: DEFAULT_PADDING,
-        pageSize: queryState.limit,
-        pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
-        paging: true,
-        search: true,
-        sorting: true,
-        thirdSortClick: false
-      },
-      localization: {
-        toolbar: {
-          searchPlaceholder: "Search container name"
-        }
-      },
-      data,
-      columns,
-      isLoading: loading,
-      totalCount: optimizableContainersCount,
-      page: currentPage,
-      onPageChange: handlePageChange,
-      onRowsPerPageChange: handleRowsPerPageChange,
-      onOrderChange: handleOrderChange,
-      onSearchChange: handleSearchChange
-    }
-  ))));
+  return /* @__PURE__ */ jsx(BasePage, { pageTitle: "Resource Optimization", withContentPadding: true, children: /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(PageLayout.Filters, { children: /* @__PURE__ */ jsx(
+      Filters,
+      {
+        cluster: {
+          options: [],
+          label: "CLUSTERS"
+        },
+        project: {
+          options: [],
+          label: "PROJECTS"
+        },
+        workload: {
+          options: [],
+          label: "WORKLOADS"
+        },
+        workloadType: {
+          options: [],
+          label: "TYPES"
+        },
+        onFiltersChange: handleFiltersChange,
+        onFiltersReset: handleFiltersReset
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PageLayout.Table, { children: /* @__PURE__ */ jsx(
+      Table,
+      {
+        components: {
+          Toolbar: TableToolbar
+        },
+        title: `Optimizable containers (${optimizableContainersCount ?? "N/A"})`,
+        options: {
+          debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,
+          padding: DEFAULT_PADDING,
+          pageSize: queryState.limit,
+          pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,
+          paging: true,
+          search: true,
+          sorting: true,
+          thirdSortClick: false
+        },
+        localization: {
+          toolbar: {
+            searchPlaceholder: "Search container name"
+          }
+        },
+        data,
+        columns,
+        isLoading: loading,
+        totalCount: optimizableContainersCount,
+        page: currentPage,
+        onPageChange: handlePageChange,
+        onRowsPerPageChange: handleRowsPerPageChange,
+        onOrderChange: handleOrderChange,
+        onSearchChange: handleSearchChange
+      }
+    ) })
+  ] }) });
 }
 OptimizationsPage.displayName = "OptimizationsPage";
 

package/dist/pages/optimizations/OptimizationsPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptimizationsPage.esm.js","sources":["../../../src/pages/optimizations/OptimizationsPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 React, { useCallback, useMemo, useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport snakeCase from 'lodash/snakeCase';\nimport {\n  Link,\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport type { Recommendations } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport type { GetRecommendationListRequest } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TableToolbar } from './components/TableToolbar';\nimport { Filters } from './components/Filters';\nimport { BasePage } from '../../components/BasePage';\nimport { optimizationsBreakdownRouteRef } from '../../routes';\nimport { getTimeFromNow } from '../../utils/dates';\nimport { optimizationsApiRef } from '../../apis';\n\nexport const DEFAULT_DEBOUNCE_INTERVAL: number = 700;\nexport const DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 20, 50, 100];\nexport const DEFAULT_SORTING_DIRECTION: GetRecommendationListRequest['query']['orderHow'] =\n  'desc';\nexport const DEFAULT_SORTING_COLUMN: GetRecommendationListRequest['query']['orderBy'] =\n  'last_reported';\nexport const DEFAULT_PADDING: 'dense' | 'default' = 'dense';\n\n/** This type actually represents what's going to be sent to the back-end. */\ntype QueryState = Omit<\n  GetRecommendationListRequest['query'],\n  'startDate' | 'endDate'\n>;\n\ntype AvailableFilteringOptions = Pick<\n  QueryState,\n  'cluster' | 'project' | 'workload' | 'workloadType'\n>;\n\nconst initialQueryState: QueryState = {\n  limit: DEFAULT_PAGE_SIZE_OPTIONS[0],\n  offset: 0,\n  orderBy: DEFAULT_SORTING_COLUMN,\n  orderHow: DEFAULT_SORTING_DIRECTION,\n};\n\nconst availableFilteringOptionsInitialState: AvailableFilteringOptions = {\n  cluster: [],\n  project: [],\n  workload: [],\n  workloadType: [],\n};\n\n/** @public */\nexport function OptimizationsPage() {\n  const [currentPage, setCurrentPage] = useState<number>(0); // First page starts from 0\n  const [queryState, setQueryState] = useState<QueryState>(initialQueryState);\n  const api = useApi(optimizationsApiRef);\n  const { value, error, loading } = useAsync(async () => {\n    const response = await api.getRecommendationList({ query: queryState });\n    return response.json();\n  }, [queryState]);\n\n  const columns = useMemo<TableColumn<Recommendations>[]>(\n    () => [\n      {\n        title: 'Container',\n        field: 'container',\n        render: data => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          const link = useRouteRef(optimizationsBreakdownRouteRef);\n          return React.createElement(Link, {\n            to: link({ id: data.id! }),\n            children: data.container,\n          });\n        },\n      },\n      {\n        title: 'Project',\n        field: 'project',\n      },\n      {\n        title: 'Workload',\n        field: 'workload',\n      },\n      {\n        title: 'Type',\n        field: 'workloadType',\n      },\n      {\n        title: 'Cluster',\n        field: 'clusterAlias',\n      },\n      {\n        title: 'Last reported',\n        field: 'lastReported',\n        render(data, _type) {\n          return getTimeFromNow(data.lastReported?.toString());\n        },\n      },\n    ],\n    [],\n  );\n  const optimizableContainersCount = useMemo(\n    () => value?.meta?.count ?? 0,\n    [value?.meta?.count],\n  );\n  const data = useMemo(() => value?.data ?? [], [value?.data]);\n\n  const handlePageChange = useCallback(\n    (pageNumber: number, pageSize: number): void => {\n      setCurrentPage(pageNumber);\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: pageNumber * pageSize,\n        limit: pageSize,\n      }));\n    },\n    [],\n  );\n\n  const handleRowsPerPageChange = useCallback((pageSize: number): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      offset: (lastState.offset ?? 0) * pageSize,\n      limit: pageSize,\n    }));\n  }, []);\n\n  const handleOrderChange = useCallback(\n    (orderBy: number, orderDirection: 'desc' | 'asc'): void => {\n      const { field } = columns[orderBy];\n      setQueryState(lastState => ({\n        ...lastState,\n        orderBy:\n          field === 'clusterAlias'\n            ? 'cluster'\n            : (snakeCase(field as string) as NonNullable<\n                typeof lastState.orderBy\n              >),\n        orderHow: orderDirection as NonNullable<typeof lastState.orderHow>,\n      }));\n    },\n    [columns],\n  );\n\n  const handleFiltersChange = useCallback(\n    (\n      fieldId: 'cluster' | 'workloadType' | 'workload' | 'project',\n      values: string[],\n    ): void => {\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: 0,\n        [fieldId]: values,\n      }));\n      setCurrentPage(0);\n    },\n    [],\n  );\n\n  const handleFiltersReset = useCallback((): void => {\n    if (\n      queryState.cluster?.length === 0 &&\n      queryState.project?.length === 0 &&\n      queryState.workload?.length === 0 &&\n      queryState.workloadType?.length === 0\n    ) {\n      return;\n    }\n\n    setQueryState(lastQueryState => ({\n      ...lastQueryState,\n      ...availableFilteringOptionsInitialState,\n    }));\n  }, [\n    queryState.cluster?.length,\n    queryState.project?.length,\n    queryState.workload?.length,\n    queryState.workloadType?.length,\n  ]);\n\n  const handleSearchChange = useCallback((searchText: string): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      container: Array.from(new Set(searchText.split(',').filter(Boolean))),\n    }));\n  }, []);\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <BasePage pageTitle=\"Resource Optimization\" withContentPadding>\n      <PageLayout>\n        <PageLayout.Filters>\n          <Filters\n            cluster={{\n              options: [],\n              label: 'CLUSTERS',\n            }}\n            project={{\n              options: [],\n              label: 'PROJECTS',\n            }}\n            workload={{\n              options: [],\n              label: 'WORKLOADS',\n            }}\n            workloadType={{\n              options: [],\n              label: 'TYPES',\n            }}\n            onFiltersChange={handleFiltersChange}\n            onFiltersReset={handleFiltersReset}\n          />\n        </PageLayout.Filters>\n        <PageLayout.Table>\n          <Table<Recommendations>\n            components={{\n              Toolbar: TableToolbar,\n            }}\n            title={`Optimizable containers (${\n              optimizableContainersCount ?? 'N/A'\n            })`}\n            options={{\n              debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,\n              padding: DEFAULT_PADDING,\n              pageSize: queryState.limit,\n              pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,\n              paging: true,\n              search: true,\n              sorting: true,\n              thirdSortClick: false,\n            }}\n            localization={{\n              toolbar: {\n                searchPlaceholder: 'Search container name',\n              },\n            }}\n            data={data}\n            columns={columns}\n            isLoading={loading}\n            totalCount={optimizableContainersCount}\n            page={currentPage}\n            onPageChange={handlePageChange}\n            onRowsPerPageChange={handleRowsPerPageChange}\n            onOrderChange={handleOrderChange}\n            onSearchChange={handleSearchChange}\n          />\n        </PageLayout.Table>\n      </PageLayout>\n    </BasePage>\n  );\n}\nOptimizationsPage.displayName = 'OptimizationsPage';\n"],"names":["data"],"mappings":"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"}
+{"version":3,"file":"OptimizationsPage.esm.js","sources":["../../../src/pages/optimizations/OptimizationsPage.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { default as React, useCallback, useMemo, useState } from 'react';\nimport useAsync from 'react-use/lib/useAsync';\nimport snakeCase from 'lodash/snakeCase';\nimport {\n  Link,\n  ResponseErrorPanel,\n  Table,\n  TableColumn,\n} from '@backstage/core-components';\nimport type { Recommendations } from '@red-hat-developer-hub/plugin-cost-management-common/models';\nimport type { GetRecommendationListRequest } from '@red-hat-developer-hub/plugin-cost-management-common/clients';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { PageLayout } from '../../components/PageLayout';\nimport { TableToolbar } from './components/TableToolbar';\nimport { Filters } from './components/Filters';\nimport { BasePage } from '../../components/BasePage';\nimport { optimizationsBreakdownRouteRef } from '../../routes';\nimport { getTimeFromNow } from '../../utils/dates';\nimport { optimizationsApiRef } from '../../apis';\n\nexport const DEFAULT_DEBOUNCE_INTERVAL: number = 700;\nexport const DEFAULT_PAGE_SIZE_OPTIONS: number[] = [10, 20, 50, 100];\nexport const DEFAULT_SORTING_DIRECTION: GetRecommendationListRequest['query']['orderHow'] =\n  'desc';\nexport const DEFAULT_SORTING_COLUMN: GetRecommendationListRequest['query']['orderBy'] =\n  'last_reported';\nexport const DEFAULT_PADDING: 'dense' | 'default' = 'dense';\n\n/** This type actually represents what's going to be sent to the back-end. */\ntype QueryState = Omit<\n  GetRecommendationListRequest['query'],\n  'startDate' | 'endDate'\n>;\n\ntype AvailableFilteringOptions = Pick<\n  QueryState,\n  'cluster' | 'project' | 'workload' | 'workloadType'\n>;\n\nconst initialQueryState: QueryState = {\n  limit: DEFAULT_PAGE_SIZE_OPTIONS[0],\n  offset: 0,\n  orderBy: DEFAULT_SORTING_COLUMN,\n  orderHow: DEFAULT_SORTING_DIRECTION,\n};\n\nconst availableFilteringOptionsInitialState: AvailableFilteringOptions = {\n  cluster: [],\n  project: [],\n  workload: [],\n  workloadType: [],\n};\n\n/** @public */\nexport function OptimizationsPage() {\n  const [currentPage, setCurrentPage] = useState<number>(0); // First page starts from 0\n  const [queryState, setQueryState] = useState<QueryState>(initialQueryState);\n  const api = useApi(optimizationsApiRef);\n  const { value, error, loading } = useAsync(async () => {\n    const response = await api.getRecommendationList({ query: queryState });\n    return response.json();\n  }, [queryState]);\n\n  const columns = useMemo<TableColumn<Recommendations>[]>(\n    () => [\n      {\n        title: 'Container',\n        field: 'container',\n        render: data => {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          const link = useRouteRef(optimizationsBreakdownRouteRef);\n          return React.createElement(Link, {\n            to: link({ id: data.id! }),\n            children: data.container,\n          });\n        },\n      },\n      {\n        title: 'Project',\n        field: 'project',\n      },\n      {\n        title: 'Workload',\n        field: 'workload',\n      },\n      {\n        title: 'Type',\n        field: 'workloadType',\n      },\n      {\n        title: 'Cluster',\n        field: 'clusterAlias',\n      },\n      {\n        title: 'Last reported',\n        field: 'lastReported',\n        render(data, _type) {\n          return getTimeFromNow(data.lastReported?.toString());\n        },\n      },\n    ],\n    [],\n  );\n  const optimizableContainersCount = useMemo(\n    () => value?.meta?.count ?? 0,\n    [value?.meta?.count],\n  );\n  const data = useMemo(() => value?.data ?? [], [value?.data]);\n\n  const handlePageChange = useCallback(\n    (pageNumber: number, pageSize: number): void => {\n      setCurrentPage(pageNumber);\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: pageNumber * pageSize,\n        limit: pageSize,\n      }));\n    },\n    [],\n  );\n\n  const handleRowsPerPageChange = useCallback((pageSize: number): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      offset: (lastState.offset ?? 0) * pageSize,\n      limit: pageSize,\n    }));\n  }, []);\n\n  const handleOrderChange = useCallback(\n    (orderBy: number, orderDirection: 'desc' | 'asc'): void => {\n      const { field } = columns[orderBy];\n      setQueryState(lastState => ({\n        ...lastState,\n        orderBy:\n          field === 'clusterAlias'\n            ? 'cluster'\n            : (snakeCase(field as string) as NonNullable<\n                typeof lastState.orderBy\n              >),\n        orderHow: orderDirection as NonNullable<typeof lastState.orderHow>,\n      }));\n    },\n    [columns],\n  );\n\n  const handleFiltersChange = useCallback(\n    (\n      fieldId: 'cluster' | 'workloadType' | 'workload' | 'project',\n      values: string[],\n    ): void => {\n      setQueryState(lastQueryState => ({\n        ...lastQueryState,\n        offset: 0,\n        [fieldId]: values,\n      }));\n      setCurrentPage(0);\n    },\n    [],\n  );\n\n  const handleFiltersReset = useCallback((): void => {\n    if (\n      queryState.cluster?.length === 0 &&\n      queryState.project?.length === 0 &&\n      queryState.workload?.length === 0 &&\n      queryState.workloadType?.length === 0\n    ) {\n      return;\n    }\n\n    setQueryState(lastQueryState => ({\n      ...lastQueryState,\n      ...availableFilteringOptionsInitialState,\n    }));\n  }, [\n    queryState.cluster?.length,\n    queryState.project?.length,\n    queryState.workload?.length,\n    queryState.workloadType?.length,\n  ]);\n\n  const handleSearchChange = useCallback((searchText: string): void => {\n    setQueryState(lastState => ({\n      ...lastState,\n      container: Array.from(new Set(searchText.split(',').filter(Boolean))),\n    }));\n  }, []);\n\n  if (error) {\n    return <ResponseErrorPanel error={error} />;\n  }\n\n  return (\n    <BasePage pageTitle=\"Resource Optimization\" withContentPadding>\n      <PageLayout>\n        <PageLayout.Filters>\n          <Filters\n            cluster={{\n              options: [],\n              label: 'CLUSTERS',\n            }}\n            project={{\n              options: [],\n              label: 'PROJECTS',\n            }}\n            workload={{\n              options: [],\n              label: 'WORKLOADS',\n            }}\n            workloadType={{\n              options: [],\n              label: 'TYPES',\n            }}\n            onFiltersChange={handleFiltersChange}\n            onFiltersReset={handleFiltersReset}\n          />\n        </PageLayout.Filters>\n        <PageLayout.Table>\n          <Table<Recommendations>\n            components={{\n              Toolbar: TableToolbar,\n            }}\n            title={`Optimizable containers (${\n              optimizableContainersCount ?? 'N/A'\n            })`}\n            options={{\n              debounceInterval: DEFAULT_DEBOUNCE_INTERVAL,\n              padding: DEFAULT_PADDING,\n              pageSize: queryState.limit,\n              pageSizeOptions: DEFAULT_PAGE_SIZE_OPTIONS,\n              paging: true,\n              search: true,\n              sorting: true,\n              thirdSortClick: false,\n            }}\n            localization={{\n              toolbar: {\n                searchPlaceholder: 'Search container name',\n              },\n            }}\n            data={data}\n            columns={columns}\n            isLoading={loading}\n            totalCount={optimizableContainersCount}\n            page={currentPage}\n            onPageChange={handlePageChange}\n            onRowsPerPageChange={handleRowsPerPageChange}\n            onOrderChange={handleOrderChange}\n            onSearchChange={handleSearchChange}\n          />\n        </PageLayout.Table>\n      </PageLayout>\n    </BasePage>\n  );\n}\nOptimizationsPage.displayName = 'OptimizationsPage';\n"],"names":["data"],"mappings":"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"}

package/dist/pages/optimizations/components/ComboBox.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -42,38 +43,41 @@ function ComboBox(props) {
   const classes = useComboBoxStyles();
   const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, props.label), /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      ...props,
-      open: isOpen && props.options.length > 0,
-      onOpen: () => setIsOpen(true),
-      onClose: () => setIsOpen(false),
-      inputValue,
-      onInputChange: (_, value) => setInputValue(value),
-      disableCloseOnSelect: props.multiple,
-      includeInputInList: true,
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "expand-icon" }),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, className: classes.input, variant: "outlined" }),
-      renderOption: (option, { selected }) => !props.freeSolo ? /* @__PURE__ */ React.createElement(Box, { className: classes.fullWidth }, /* @__PURE__ */ React.createElement(
-        FixedWidthFormControlLabel,
-        {
-          className: classes.fullWidth,
-          control: /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              icon: /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
-              checkedIcon: /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" }),
-              checked: selected
-            }
-          ),
-          onClick: (event) => event.preventDefault(),
-          label: /* @__PURE__ */ React.createElement(Tooltip, { title: option }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(Box, { className: classes.boxLabel }, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, props.title))))
-        }
-      )) : option,
-      size: "small"
-    }
-  ));
+  return /* @__PURE__ */ jsxs(Box, { className: classes.root, pb: 1, pt: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { className: classes.label, variant: "button", component: "label", children: props.label }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        ...props,
+        open: isOpen && props.options.length > 0,
+        onOpen: () => setIsOpen(true),
+        onClose: () => setIsOpen(false),
+        inputValue,
+        onInputChange: (_, value) => setInputValue(value),
+        disableCloseOnSelect: props.multiple,
+        includeInputInList: true,
+        popupIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { "data-testid": "expand-icon" }),
+        renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, className: classes.input, variant: "outlined" }),
+        renderOption: (option, { selected }) => !props.freeSolo ? /* @__PURE__ */ jsx(Box, { className: classes.fullWidth, children: /* @__PURE__ */ jsx(
+          FixedWidthFormControlLabel,
+          {
+            className: classes.fullWidth,
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                icon: /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" }),
+                checkedIcon: /* @__PURE__ */ jsx(CheckBoxIcon, { fontSize: "small" }),
+                checked: selected
+              }
+            ),
+            onClick: (event) => event.preventDefault(),
+            label: /* @__PURE__ */ jsx(Tooltip, { title: option, children: /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(Box, { className: classes.boxLabel, children: /* @__PURE__ */ jsx(Typography, { noWrap: true, children: props.title }) }) }) })
+          }
+        ) }) : option,
+        size: "small"
+      }
+    )
+  ] });
 }
 
 export { ComboBox };

package/dist/pages/optimizations/components/ComboBox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.esm.js","sources":["../../../../src/pages/optimizations/components/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 React, { useState } from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Box from '@material-ui/core/Box';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete, AutocompleteProps } from '@material-ui/lab';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst useComboBoxStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  {\n    name: 'ComboBox',\n  },\n);\n\ntype ExcludedAutocompleteProps =\n  | 'clearOnEscape'\n  | 'disableCloseOnSelect'\n  | 'includeInputInList'\n  | 'size'\n  | 'popupIcon'\n  | 'renderInput'\n  | 'renderOption';\n\ntype ComboBoxProps<\n  T,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n> = Omit<\n  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,\n  ExcludedAutocompleteProps\n> & {\n  label: string;\n};\n\n/** @public */\nexport function ComboBox<\n  T extends string,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n>(props: ComboBoxProps<T, Multiple, DisableClearable, FreeSolo>) {\n  const classes = useComboBoxStyles();\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {props.label}\n      </Typography>\n      <Autocomplete<T, Multiple, DisableClearable, FreeSolo>\n        {...props}\n        open={isOpen && props.options.length > 0}\n        onOpen={() => setIsOpen(true)}\n        onClose={() => setIsOpen(false)}\n        inputValue={inputValue}\n        onInputChange={(_, value) => setInputValue(value)}\n        disableCloseOnSelect={props.multiple}\n        includeInputInList\n        popupIcon={<ExpandMoreIcon data-testid=\"expand-icon\" />}\n        renderInput={params => (\n          <TextField {...params} className={classes.input} variant=\"outlined\" />\n        )}\n        renderOption={(option, { selected }) =>\n          !props.freeSolo ? (\n            <Box className={classes.fullWidth}>\n              <FixedWidthFormControlLabel\n                className={classes.fullWidth}\n                control={\n                  <Checkbox\n                    icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                    checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                    checked={selected}\n                  />\n                }\n                onClick={event => event.preventDefault()}\n                label={\n                  <Tooltip title={option}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      <Box className={classes.boxLabel}>\n                        <Typography noWrap>{props.title}</Typography>\n                      </Box>\n                    </Box>\n                  </Tooltip>\n                }\n              />\n            </Box>\n          ) : (\n            option\n          )\n        }\n        size=\"small\"\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.esm.js","sources":["../../../../src/pages/optimizations/components/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useState } from 'react';\nimport { makeStyles, withStyles } from '@material-ui/core/styles';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Box from '@material-ui/core/Box';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { Autocomplete, AutocompleteProps } from '@material-ui/lab';\n\nconst FixedWidthFormControlLabel = withStyles(\n  _theme => ({\n    label: {\n      width: '100%',\n    },\n    root: {\n      width: '90%',\n    },\n  }),\n  { name: 'FixedWidthFormControlLabel' },\n)(FormControlLabel);\n\nconst useComboBoxStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n    input: {},\n    fullWidth: { width: '100%' },\n    boxLabel: {\n      width: '100%',\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n    },\n  },\n  {\n    name: 'ComboBox',\n  },\n);\n\ntype ExcludedAutocompleteProps =\n  | 'clearOnEscape'\n  | 'disableCloseOnSelect'\n  | 'includeInputInList'\n  | 'size'\n  | 'popupIcon'\n  | 'renderInput'\n  | 'renderOption';\n\ntype ComboBoxProps<\n  T,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n> = Omit<\n  AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,\n  ExcludedAutocompleteProps\n> & {\n  label: string;\n};\n\n/** @public */\nexport function ComboBox<\n  T extends string,\n  Multiple extends boolean | undefined = undefined,\n  DisableClearable extends boolean | undefined = undefined,\n  FreeSolo extends boolean | undefined = undefined,\n>(props: ComboBoxProps<T, Multiple, DisableClearable, FreeSolo>) {\n  const classes = useComboBoxStyles();\n  const [isOpen, setIsOpen] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography className={classes.label} variant=\"button\" component=\"label\">\n        {props.label}\n      </Typography>\n      <Autocomplete<T, Multiple, DisableClearable, FreeSolo>\n        {...props}\n        open={isOpen && props.options.length > 0}\n        onOpen={() => setIsOpen(true)}\n        onClose={() => setIsOpen(false)}\n        inputValue={inputValue}\n        onInputChange={(_, value) => setInputValue(value)}\n        disableCloseOnSelect={props.multiple}\n        includeInputInList\n        popupIcon={<ExpandMoreIcon data-testid=\"expand-icon\" />}\n        renderInput={params => (\n          <TextField {...params} className={classes.input} variant=\"outlined\" />\n        )}\n        renderOption={(option, { selected }) =>\n          !props.freeSolo ? (\n            <Box className={classes.fullWidth}>\n              <FixedWidthFormControlLabel\n                className={classes.fullWidth}\n                control={\n                  <Checkbox\n                    icon={<CheckBoxOutlineBlankIcon fontSize=\"small\" />}\n                    checkedIcon={<CheckBoxIcon fontSize=\"small\" />}\n                    checked={selected}\n                  />\n                }\n                onClick={event => event.preventDefault()}\n                label={\n                  <Tooltip title={option}>\n                    <Box display=\"flex\" alignItems=\"center\">\n                      <Box className={classes.boxLabel}>\n                        <Typography noWrap>{props.title}</Typography>\n                      </Box>\n                    </Box>\n                  </Tooltip>\n                }\n              />\n            </Box>\n          ) : (\n            option\n          )\n        }\n        size=\"small\"\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/pages/optimizations/components/Filters.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
@@ -26,33 +27,39 @@ function Filters(props) {
   const baseClasses = useBaseFiltersStyles();
   const classes = useFiltersStyles();
   const [globalKeyId, setGlobalKeyId] = useState(0);
-  return /* @__PURE__ */ React.createElement(Box, { className: baseClasses.root }, /* @__PURE__ */ React.createElement(Box, { className: baseClasses.header }, /* @__PURE__ */ React.createElement(Box, { className: baseClasses.value }, "Filters"), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      color: "primary",
-      onClick: (_) => {
-        onFiltersReset();
-        setGlobalKeyId(globalKeyId + 1);
-      }
-    },
-    "Reset"
-  )), /* @__PURE__ */ React.createElement(Box, { className: `${baseClasses.filters} ${classes.filters}` }, filterFieldIds.map((ffid) => /* @__PURE__ */ React.createElement(
-    ComboBox,
-    {
-      multiple: true,
-      freeSolo: true,
-      selectOnFocus: true,
-      clearOnBlur: true,
-      handleHomeEndKeys: true,
-      filterSelectedOptions: true,
-      key: `${ffid}-${globalKeyId}`,
-      label: filters[ffid].label,
-      options: filters[ffid].options,
-      onChange: (_, values) => {
-        onFiltersChange(ffid, values);
-      }
-    }
-  ))));
+  return /* @__PURE__ */ jsxs(Box, { className: baseClasses.root, children: [
+    /* @__PURE__ */ jsxs(Box, { className: baseClasses.header, children: [
+      /* @__PURE__ */ jsx(Box, { className: baseClasses.value, children: "Filters" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "primary",
+          onClick: (_) => {
+            onFiltersReset();
+            setGlobalKeyId(globalKeyId + 1);
+          },
+          children: "Reset"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: `${baseClasses.filters} ${classes.filters}`, children: filterFieldIds.map((ffid) => /* @__PURE__ */ jsx(
+      ComboBox,
+      {
+        multiple: true,
+        freeSolo: true,
+        selectOnFocus: true,
+        clearOnBlur: true,
+        handleHomeEndKeys: true,
+        filterSelectedOptions: true,
+        label: filters[ffid].label,
+        options: filters[ffid].options,
+        onChange: (_, values) => {
+          onFiltersChange(ffid, values);
+        }
+      },
+      `${ffid}-${globalKeyId}`
+    )) })
+  ] });
 }
 
 export { Filters };

package/dist/pages/optimizations/components/Filters.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.esm.js","sources":["../../../../src/pages/optimizations/components/Filters.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 React, { useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useBaseFiltersStyles } from '../../../components/filtersStyles';\nimport { ComboBox } from './ComboBox';\n\nconst useFiltersStyles = makeStyles(\n  theme => ({\n    filters: {\n      '& > *': {\n        marginTop: theme.spacing(2),\n      },\n    },\n  }),\n  { name: 'BackstageTableFilters' },\n);\n\nconst filterFieldIds = [\n  'cluster',\n  'project',\n  'workload',\n  'workloadType',\n] as const;\n\n/** @public */\nexport type FiltersProps = {\n  cluster: { label: string; options: string[] };\n  project: { label: string; options: string[] };\n  workload: { label: string; options: string[] };\n  workloadType: { label: string; options: string[] };\n  onFiltersChange: (\n    fieldId: 'cluster' | 'project' | 'workload' | 'workloadType',\n    values: string[],\n  ) => void;\n  onFiltersReset: () => void;\n};\n\n/** @public */\nexport function Filters(props: FiltersProps) {\n  const { onFiltersChange, onFiltersReset, ...filters } = props;\n  const baseClasses = useBaseFiltersStyles();\n  const classes = useFiltersStyles();\n  const [globalKeyId, setGlobalKeyId] = useState(0); // Used for reseting the ComboBoxes internal state\n\n  return (\n    <Box className={baseClasses.root}>\n      <Box className={baseClasses.header}>\n        <Box className={baseClasses.value}>Filters</Box>\n        <Button\n          color=\"primary\"\n          onClick={(_): void => {\n            onFiltersReset();\n            setGlobalKeyId(globalKeyId + 1);\n          }}\n        >\n          Reset\n        </Button>\n      </Box>\n      <Box className={`${baseClasses.filters} ${classes.filters}`}>\n        {filterFieldIds.map(ffid => (\n          <ComboBox\n            multiple\n            freeSolo\n            selectOnFocus\n            clearOnBlur\n            handleHomeEndKeys\n            filterSelectedOptions\n            key={`${ffid}-${globalKeyId}`}\n            label={filters[ffid].label}\n            options={filters[ffid].options}\n            onChange={(_, values): void => {\n              onFiltersChange(ffid, values);\n            }}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAuBA,MAAM,gBAAA,GAAmB,UAAA;AAAA,EACvB,CAAA,KAAA,MAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA,QACP,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC5B;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,uBAAA;AACV,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA;AAgBO,SAAS,QAAQ,KAAA,EAAqB;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAgB,GAAG,SAAQ,GAAI,KAAA;AACxD,EAAA,MAAM,cAAc,oBAAA,EAAqB;AACzC,EAAA,MAAM,UAAU,gBAAA,EAAiB;AACjC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,2CACG,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,IAAA,EAAA,sCACzB,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,MAAA,EAAA,sCACzB,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,KAAA,EAAA,EAAO,SAAO,CAAA,kBAC1C,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,SAAA;AAAA,MACN,OAAA,EAAS,CAAC,CAAA,KAAY;AACpB,QAAA,cAAA,EAAe;AACf,QAAA,cAAA,CAAe,cAAc,CAAC,CAAA;AAAA,MAChC;AAAA,KAAA;AAAA,IACD;AAAA,GAGH,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,GAAA,EAAA,EAAI,WAAW,CAAA,EAAG,WAAA,CAAY,OAAO,CAAA,CAAA,EAAI,OAAA,CAAQ,OAAO,CAAA,CAAA,EAAA,EACtD,cAAA,CAAe,IAAI,CAAA,IAAA,qBAClB,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAQ,IAAA;AAAA,MACR,QAAA,EAAQ,IAAA;AAAA,MACR,aAAA,EAAa,IAAA;AAAA,MACb,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,IAAA;AAAA,MACjB,qBAAA,EAAqB,IAAA;AAAA,MACrB,GAAA,EAAK,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,WAAW,CAAA,CAAA;AAAA,MAC3B,KAAA,EAAO,OAAA,CAAQ,IAAI,CAAA,CAAE,KAAA;AAAA,MACrB,OAAA,EAAS,OAAA,CAAQ,IAAI,CAAA,CAAE,OAAA;AAAA,MACvB,QAAA,EAAU,CAAC,CAAA,EAAG,MAAA,KAAiB;AAC7B,QAAA,eAAA,CAAgB,MAAM,MAAM,CAAA;AAAA,MAC9B;AAAA;AAAA,GAEH,CACH,CACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Filters.esm.js","sources":["../../../../src/pages/optimizations/components/Filters.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { useState } from 'react';\nimport Box from '@material-ui/core/Box';\nimport Button from '@material-ui/core/Button';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useBaseFiltersStyles } from '../../../components/filtersStyles';\nimport { ComboBox } from './ComboBox';\n\nconst useFiltersStyles = makeStyles(\n  theme => ({\n    filters: {\n      '& > *': {\n        marginTop: theme.spacing(2),\n      },\n    },\n  }),\n  { name: 'BackstageTableFilters' },\n);\n\nconst filterFieldIds = [\n  'cluster',\n  'project',\n  'workload',\n  'workloadType',\n] as const;\n\n/** @public */\nexport type FiltersProps = {\n  cluster: { label: string; options: string[] };\n  project: { label: string; options: string[] };\n  workload: { label: string; options: string[] };\n  workloadType: { label: string; options: string[] };\n  onFiltersChange: (\n    fieldId: 'cluster' | 'project' | 'workload' | 'workloadType',\n    values: string[],\n  ) => void;\n  onFiltersReset: () => void;\n};\n\n/** @public */\nexport function Filters(props: FiltersProps) {\n  const { onFiltersChange, onFiltersReset, ...filters } = props;\n  const baseClasses = useBaseFiltersStyles();\n  const classes = useFiltersStyles();\n  const [globalKeyId, setGlobalKeyId] = useState(0); // Used for reseting the ComboBoxes internal state\n\n  return (\n    <Box className={baseClasses.root}>\n      <Box className={baseClasses.header}>\n        <Box className={baseClasses.value}>Filters</Box>\n        <Button\n          color=\"primary\"\n          onClick={(_): void => {\n            onFiltersReset();\n            setGlobalKeyId(globalKeyId + 1);\n          }}\n        >\n          Reset\n        </Button>\n      </Box>\n      <Box className={`${baseClasses.filters} ${classes.filters}`}>\n        {filterFieldIds.map(ffid => (\n          <ComboBox\n            multiple\n            freeSolo\n            selectOnFocus\n            clearOnBlur\n            handleHomeEndKeys\n            filterSelectedOptions\n            key={`${ffid}-${globalKeyId}`}\n            label={filters[ffid].label}\n            options={filters[ffid].options}\n            onChange={(_, values): void => {\n              onFiltersChange(ffid, values);\n            }}\n          />\n        ))}\n      </Box>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAuBA,MAAM,gBAAA,GAAmB,UAAA;AAAA,EACvB,CAAA,KAAA,MAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS;AAAA,QACP,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC5B;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,uBAAA;AACV,CAAA;AAEA,MAAM,cAAA,GAAiB;AAAA,EACrB,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA;AAgBO,SAAS,QAAQ,KAAA,EAAqB;AAC3C,EAAA,MAAM,EAAE,eAAA,EAAiB,cAAA,EAAgB,GAAG,SAAQ,GAAI,KAAA;AACxD,EAAA,MAAM,cAAc,oBAAA,EAAqB;AACzC,EAAA,MAAM,UAAU,gBAAA,EAAiB;AACjC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,CAAC,CAAA;AAEhD,EAAA,uBACE,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,IAAA,EAC1B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,MAAA,EAC1B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,KAAA,EAAO,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,sBAC1C,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,SAAA;AAAA,UACN,OAAA,EAAS,CAAC,CAAA,KAAY;AACpB,YAAA,cAAA,EAAe;AACf,YAAA,cAAA,CAAe,cAAc,CAAC,CAAA;AAAA,UAChC,CAAA;AAAA,UACD,QAAA,EAAA;AAAA;AAAA;AAED,KAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,CAAA,EAAG,WAAA,CAAY,OAAO,CAAA,CAAA,EAAI,OAAA,CAAQ,OAAO,CAAA,CAAA,EACtD,QAAA,EAAA,cAAA,CAAe,GAAA,CAAI,CAAA,IAAA,qBAClB,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAQ,IAAA;AAAA,QACR,QAAA,EAAQ,IAAA;AAAA,QACR,aAAA,EAAa,IAAA;AAAA,QACb,WAAA,EAAW,IAAA;AAAA,QACX,iBAAA,EAAiB,IAAA;AAAA,QACjB,qBAAA,EAAqB,IAAA;AAAA,QAErB,KAAA,EAAO,OAAA,CAAQ,IAAI,CAAA,CAAE,KAAA;AAAA,QACrB,OAAA,EAAS,OAAA,CAAQ,IAAI,CAAA,CAAE,OAAA;AAAA,QACvB,QAAA,EAAU,CAAC,CAAA,EAAG,MAAA,KAAiB;AAC7B,UAAA,eAAA,CAAgB,MAAM,MAAM,CAAA;AAAA,QAC9B;AAAA,OAAA;AAAA,MALK,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,WAAW,CAAA;AAAA,KAO9B,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/pages/optimizations/components/TableToolbar.esm.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { MTableToolbar } from '@material-table/core';
 import { withStyles } from '@material-ui/core/styles';
 
@@ -26,7 +27,7 @@ function TableToolbar(toolbarProps) {
     },
     [onSearchChanged]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     StyledMTableToolbar,
     {
       ...toolbarProps,

package/dist/pages/optimizations/components/TableToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.esm.js","sources":["../../../../src/pages/optimizations/components/TableToolbar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 React, { MutableRefObject, useCallback } from 'react';\nimport { MTableToolbar } from '@material-table/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst StyledMTableToolbar = withStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(3, 0, 2.5, 2.5),\n    },\n    title: {\n      '& > h6': {\n        fontWeight: theme.typography.fontWeightBold,\n      },\n    },\n    searchField: {\n      paddingRight: theme.spacing(2),\n    },\n  }),\n  { name: 'ResourceOptimizationTableToolbar' },\n)(MTableToolbar);\n\n/**\n * Props for {@link TableToolbar}.\n *\n * @public\n */\nexport interface TableToolbarProps {\n  toolbarRef: MutableRefObject<any>;\n  setSearch: (value: string) => void;\n  onSearchChanged: (value: string) => void;\n  toggleFilters: () => void;\n  selectedFiltersLength: number;\n  showFiltersButton: boolean;\n}\n\n/**\n * Used to override `@backstage/core-components` Table's toolbar.\n *\n * @remarks\n *\n * The Table's built-in toolbar displays a \"Filters\" button to show or hide the table's filters.\n * This button becomes redundant when the table's initial state is set to\n * `{ filtersOpen: true }` which indicates the filters should always be visible.\n *\n * @public\n */\nexport function TableToolbar(toolbarProps: TableToolbarProps) {\n  const { toolbarRef, onSearchChanged } = toolbarProps;\n  const handleSearchChanged = useCallback(\n    (searchText: string) => {\n      onSearchChanged(searchText);\n    },\n    [onSearchChanged],\n  );\n\n  return (\n    <StyledMTableToolbar\n      {...toolbarProps}\n      ref={toolbarRef}\n      onSearchChanged={handleSearchChanged}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AAoBA,MAAM,mBAAA,GAAsB,UAAA;AAAA,EAC1B,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,SAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG;AAAA,KACvC;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,QACR,UAAA,EAAY,MAAM,UAAA,CAAW;AAAA;AAC/B,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC/B,GACF,CAAA;AAAA,EACA,EAAE,MAAM,kCAAA;AACV,CAAA,CAAE,aAAa,CAAA;AA2BR,SAAS,aAAa,YAAA,EAAiC;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAY,eAAA,EAAgB,GAAI,YAAA;AACxC,EAAA,MAAM,mBAAA,GAAsB,WAAA;AAAA,IAC1B,CAAC,UAAA,KAAuB;AACtB,MAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,IAC5B,CAAA;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,GAAA,EAAK,UAAA;AAAA,MACL,eAAA,EAAiB;AAAA;AAAA,GACnB;AAEJ;;;;"}
+{"version":3,"file":"TableToolbar.esm.js","sources":["../../../../src/pages/optimizations/components/TableToolbar.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\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 { MutableRefObject, useCallback } from 'react';\nimport { MTableToolbar } from '@material-table/core';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst StyledMTableToolbar = withStyles(\n  theme => ({\n    root: {\n      padding: theme.spacing(3, 0, 2.5, 2.5),\n    },\n    title: {\n      '& > h6': {\n        fontWeight: theme.typography.fontWeightBold,\n      },\n    },\n    searchField: {\n      paddingRight: theme.spacing(2),\n    },\n  }),\n  { name: 'ResourceOptimizationTableToolbar' },\n)(MTableToolbar);\n\n/**\n * Props for {@link TableToolbar}.\n *\n * @public\n */\nexport interface TableToolbarProps {\n  toolbarRef: MutableRefObject<any>;\n  setSearch: (value: string) => void;\n  onSearchChanged: (value: string) => void;\n  toggleFilters: () => void;\n  selectedFiltersLength: number;\n  showFiltersButton: boolean;\n}\n\n/**\n * Used to override `@backstage/core-components` Table's toolbar.\n *\n * @remarks\n *\n * The Table's built-in toolbar displays a \"Filters\" button to show or hide the table's filters.\n * This button becomes redundant when the table's initial state is set to\n * `{ filtersOpen: true }` which indicates the filters should always be visible.\n *\n * @public\n */\nexport function TableToolbar(toolbarProps: TableToolbarProps) {\n  const { toolbarRef, onSearchChanged } = toolbarProps;\n  const handleSearchChanged = useCallback(\n    (searchText: string) => {\n      onSearchChanged(searchText);\n    },\n    [onSearchChanged],\n  );\n\n  return (\n    <StyledMTableToolbar\n      {...toolbarProps}\n      ref={toolbarRef}\n      onSearchChanged={handleSearchChanged}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAoBA,MAAM,mBAAA,GAAsB,UAAA;AAAA,EAC1B,CAAA,KAAA,MAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,SAAS,KAAA,CAAM,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG;AAAA,KACvC;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,QACR,UAAA,EAAY,MAAM,UAAA,CAAW;AAAA;AAC/B,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAC/B,GACF,CAAA;AAAA,EACA,EAAE,MAAM,kCAAA;AACV,CAAA,CAAE,aAAa,CAAA;AA2BR,SAAS,aAAa,YAAA,EAAiC;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAY,eAAA,EAAgB,GAAI,YAAA;AACxC,EAAA,MAAM,mBAAA,GAAsB,WAAA;AAAA,IAC1B,CAAC,UAAA,KAAuB;AACtB,MAAA,eAAA,CAAgB,UAAU,CAAA;AAAA,IAC5B,CAAA;AAAA,IACA,CAAC,eAAe;AAAA,GAClB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,GAAA,EAAK,UAAA;AAAA,MACL,eAAA,EAAiB;AAAA;AAAA,GACnB;AAEJ;;;;"}

package/dist/pages/optimizations-breakdown/OptimizationsBreakdownPage.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import useAsync from 'react-use/esm/useAsync';
 import { Progress, ResponseErrorPanel, TabbedLayout } from '@backstage/core-components';
@@ -151,58 +152,63 @@ const OptimizationsBreakdownPage = () => {
     [recommendationsData]
   );
   if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+    return /* @__PURE__ */ jsx(Progress, {});
   }
   if (error) {
-    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     BasePage,
     {
       pageThemeId: "tool",
       pageTitle: recommendationsData.container,
       pageType: "Optimizations",
-      pageTypeLink: "/cost-management/optimizations"
-    },
-    applyError && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error: applyError }),
-    /* @__PURE__ */ React.createElement(TabbedLayout, null, /* @__PURE__ */ React.createElement(TabbedLayout.Route, { path: "/cost?", title: "Cost optimizations" }, /* @__PURE__ */ React.createElement(
-      OptimizationEngineTab,
-      {
-        optimizationType: OptimizationType.cost,
-        chartData: recommendationsData,
-        containerData,
-        recommendationTerm,
-        currentConfiguration,
-        recommendedConfiguration,
-        onRecommendationTermChange: handleRecommendationTermChange,
-        onApplyRecommendation: handleApplyRecommendation,
-        workflowId: workflowIdRef.current,
-        workflowUnavailableReason: workflowUnavailableReasonRef.current,
-        workflowErrorMessage: workflowErrorMessageRef.current
-      }
-    )), /* @__PURE__ */ React.createElement(
-      TabbedLayout.Route,
-      {
-        path: "/performance",
-        title: "Performance optimizations"
-      },
-      /* @__PURE__ */ React.createElement(
-        OptimizationEngineTab,
-        {
-          optimizationType: OptimizationType.performance,
-          chartData: recommendationsData,
-          containerData,
-          recommendationTerm,
-          currentConfiguration,
-          recommendedConfiguration,
-          onRecommendationTermChange: handleRecommendationTermChange,
-          onApplyRecommendation: handleApplyRecommendation,
-          workflowId: workflowIdRef.current,
-          workflowUnavailableReason: workflowUnavailableReasonRef.current,
-          workflowErrorMessage: workflowErrorMessageRef.current
-        }
-      )
-    ))
+      pageTypeLink: "/cost-management/optimizations",
+      children: [
+        applyError && /* @__PURE__ */ jsx(ResponseErrorPanel, { error: applyError }),
+        /* @__PURE__ */ jsxs(TabbedLayout, { children: [
+          /* @__PURE__ */ jsx(TabbedLayout.Route, { path: "/cost?", title: "Cost optimizations", children: /* @__PURE__ */ jsx(
+            OptimizationEngineTab,
+            {
+              optimizationType: OptimizationType.cost,
+              chartData: recommendationsData,
+              containerData,
+              recommendationTerm,
+              currentConfiguration,
+              recommendedConfiguration,
+              onRecommendationTermChange: handleRecommendationTermChange,
+              onApplyRecommendation: handleApplyRecommendation,
+              workflowId: workflowIdRef.current,
+              workflowUnavailableReason: workflowUnavailableReasonRef.current,
+              workflowErrorMessage: workflowErrorMessageRef.current
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TabbedLayout.Route,
+            {
+              path: "/performance",
+              title: "Performance optimizations",
+              children: /* @__PURE__ */ jsx(
+                OptimizationEngineTab,
+                {
+                  optimizationType: OptimizationType.performance,
+                  chartData: recommendationsData,
+                  containerData,
+                  recommendationTerm,
+                  currentConfiguration,
+                  recommendedConfiguration,
+                  onRecommendationTermChange: handleRecommendationTermChange,
+                  onApplyRecommendation: handleApplyRecommendation,
+                  workflowId: workflowIdRef.current,
+                  workflowUnavailableReason: workflowUnavailableReasonRef.current,
+                  workflowErrorMessage: workflowErrorMessageRef.current
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
   );
 };
 OptimizationsBreakdownPage.displayName = "OptimizationsBreakdownPage";