From ae5feee10201e39af982cdf92fb825f920dd8437 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 15 Nov 2021 13:43:18 -0500
Subject: [PATCH 1/7] Wrap toolbar filters with PF ToolbarToggleGroup

https://issues.redhat.com/browse/COST-2065
---
 .../components/priceListToolbar.tsx           | 32 ++++++++++++-------
 .../costModel/assignSourcesModalToolbar.tsx   | 17 +++++++---
 .../costModels/costModel/sourcesToolbar.tsx   | 22 +++++++------
 .../costModels/costModelsDetails/toolbar.tsx  | 27 ++++++++++------
 .../assignSourcesToolbar.tsx                  | 17 +++++++---
 .../components/dataToolbar/dataToolbar.tsx    | 25 ++++++++-------
 6 files changed, 88 insertions(+), 52 deletions(-)

diff --git a/src/pages/costModels/components/priceListToolbar.tsx b/src/pages/costModels/components/priceListToolbar.tsx
index f605ebfb3..063c76796 100644
--- a/src/pages/costModels/components/priceListToolbar.tsx
+++ b/src/pages/costModels/components/priceListToolbar.tsx
@@ -5,7 +5,9 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ToolbarItemVariant,
+  ToolbarToggleGroup,
 } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import React from 'react';
 
 import { styles } from './priceListToolbar.styles';
@@ -35,18 +37,24 @@ export const PriceListToolbar: React.SFC<PriceListToolbarProps> = ({
   return (
     <Toolbar style={styles.toolbar} clearAllFilters={onClear} id="price-list-toolbar">
       <ToolbarContent>
-        <ToolbarGroup variant="filter-group">
-          <ToolbarItem>{primary}</ToolbarItem>
-          {secondaries.map(secondary => {
-            return (
-              <ToolbarItem key={secondary.name}>
-                <ToolbarFilter deleteChip={secondary.onRemove} chips={secondary.filters} categoryName={secondary.name}>
-                  {selected === secondary.name ? secondary.component : ''}
-                </ToolbarFilter>
-              </ToolbarItem>
-            );
-          })}
-        </ToolbarGroup>
+        <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
+          <ToolbarGroup variant="filter-group">
+            <ToolbarItem>{primary}</ToolbarItem>
+            {secondaries.map(secondary => {
+              return (
+                <ToolbarItem key={secondary.name}>
+                  <ToolbarFilter
+                    deleteChip={secondary.onRemove}
+                    chips={secondary.filters}
+                    categoryName={secondary.name}
+                  >
+                    {selected === secondary.name ? secondary.component : ''}
+                  </ToolbarFilter>
+                </ToolbarItem>
+              );
+            })}
+          </ToolbarGroup>
+        </ToolbarToggleGroup>
         <ToolbarItem>{button}</ToolbarItem>
         <ToolbarItem variant={ToolbarItemVariant.pagination}>{pagination}</ToolbarItem>
       </ToolbarContent>
diff --git a/src/pages/costModels/costModel/assignSourcesModalToolbar.tsx b/src/pages/costModels/costModel/assignSourcesModalToolbar.tsx
index 277653b22..ad28c8b97 100644
--- a/src/pages/costModels/costModel/assignSourcesModalToolbar.tsx
+++ b/src/pages/costModels/costModel/assignSourcesModalToolbar.tsx
@@ -8,7 +8,9 @@ import {
   ToolbarContent,
   ToolbarFilter,
   ToolbarItem,
+  ToolbarToggleGroup,
 } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import messages from 'locales/messages';
 import React from 'react';
@@ -64,11 +66,16 @@ export const AssignSourcesToolbarBase: React.SFC<AssignSourcesToolbarBaseProps>
   return (
     <Toolbar id="assign-sources-toolbar" clearAllFilters={filter.onClearAll}>
       <ToolbarContent>
-        <ToolbarItem variant="search-filter">
-          <ToolbarFilter deleteChip={filter.onRemove} chips={filter.query.name} categoryName="name">
-            <FilterInput placeholder={intl.formatMessage(messages.CostModelsFilterPlaceholder)} {...filterInputProps} />
-          </ToolbarFilter>
-        </ToolbarItem>
+        <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
+          <ToolbarItem variant="search-filter">
+            <ToolbarFilter deleteChip={filter.onRemove} chips={filter.query.name} categoryName="name">
+              <FilterInput
+                placeholder={intl.formatMessage(messages.CostModelsFilterPlaceholder)}
+                {...filterInputProps}
+              />
+            </ToolbarFilter>
+          </ToolbarItem>
+        </ToolbarToggleGroup>
         <ToolbarItem variant="pagination">
           <Pagination
             isCompact={paginationProps.isCompact}
diff --git a/src/pages/costModels/costModel/sourcesToolbar.tsx b/src/pages/costModels/costModel/sourcesToolbar.tsx
index 819089c8a..57c28e641 100644
--- a/src/pages/costModels/costModel/sourcesToolbar.tsx
+++ b/src/pages/costModels/costModel/sourcesToolbar.tsx
@@ -10,7 +10,9 @@ import {
   ToolbarContent,
   ToolbarFilter,
   ToolbarItem,
+  ToolbarToggleGroup,
 } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { ReadOnlyTooltip } from 'pages/costModels/components/readOnlyTooltip';
 import React from 'react';
@@ -66,15 +68,17 @@ export const SourcesToolbar: React.SFC<SourcesToolbarProps> = ({
   return (
     <Toolbar id="assign-sources-toolbar" clearAllFilters={filter.onClearAll}>
       <ToolbarContent>
-        <ToolbarItem variant="search-filter">
-          <ToolbarFilter
-            deleteChip={filter.onRemove}
-            chips={filter.query.name}
-            categoryName={filter.categoryNames.name}
-          >
-            <FilterInput {...filterInputProps} />
-          </ToolbarFilter>
-        </ToolbarItem>
+        <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
+          <ToolbarItem variant="search-filter">
+            <ToolbarFilter
+              deleteChip={filter.onRemove}
+              chips={filter.query.name}
+              categoryName={filter.categoryNames.name}
+            >
+              <FilterInput {...filterInputProps} />
+            </ToolbarFilter>
+          </ToolbarItem>
+        </ToolbarToggleGroup>
         <ToolbarItem>
           <ReadOnlyTooltip isDisabled={actionButtonProps.isDisabled}>
             <Button {...actionButtonProps} />
diff --git a/src/pages/costModels/costModelsDetails/toolbar.tsx b/src/pages/costModels/costModelsDetails/toolbar.tsx
index ec31fbb1a..6d0c4fd2e 100644
--- a/src/pages/costModels/costModelsDetails/toolbar.tsx
+++ b/src/pages/costModels/costModelsDetails/toolbar.tsx
@@ -1,4 +1,11 @@
-import { ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarItemVariant } from '@patternfly/react-core';
+import {
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarItemVariant,
+  ToolbarToggleGroup,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import React from 'react';
 
 import { CreateCostModelButton } from './createCostModelButton';
@@ -10,14 +17,16 @@ const CostModelsToolbar = () => {
     <ClearableToolbar>
       <ToolbarContent>
         <ToolbarGroup variant="filter-group">
-          <ToolbarItem>
-            <CostModelsFilterSelector />
-          </ToolbarItem>
-          <ToolbarItem>
-            <NameFilter />
-            <DescriptionFilter />
-            <SourceTypeFilter />
-          </ToolbarItem>
+          <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
+            <ToolbarItem>
+              <CostModelsFilterSelector />
+            </ToolbarItem>
+            <ToolbarItem>
+              <NameFilter />
+              <DescriptionFilter />
+              <SourceTypeFilter />
+            </ToolbarItem>
+          </ToolbarToggleGroup>
           <ToolbarItem>
             <CreateCostModelButton />
           </ToolbarItem>
diff --git a/src/pages/costModels/createCostModelWizard/assignSourcesToolbar.tsx b/src/pages/costModels/createCostModelWizard/assignSourcesToolbar.tsx
index 342736a25..a115de809 100644
--- a/src/pages/costModels/createCostModelWizard/assignSourcesToolbar.tsx
+++ b/src/pages/costModels/createCostModelWizard/assignSourcesToolbar.tsx
@@ -8,7 +8,9 @@ import {
   ToolbarContent,
   ToolbarFilter,
   ToolbarItem,
+  ToolbarToggleGroup,
 } from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import messages from 'locales/messages';
 import React from 'react';
@@ -64,11 +66,16 @@ export const AssignSourcesToolbarBase: React.SFC<AssignSourcesToolbarBaseProps>
   return (
     <Toolbar id="assign-sources-toolbar" clearAllFilters={filter.onClearAll}>
       <ToolbarContent>
-        <ToolbarItem variant="search-filter">
-          <ToolbarFilter deleteChip={filter.onRemove} chips={filter.query.name} categoryName="name">
-            <FilterInput placeholder={intl.formatMessage(messages.CostModelsFilterPlaceholder)} {...filterInputProps} />
-          </ToolbarFilter>
-        </ToolbarItem>
+        <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
+          <ToolbarItem variant="search-filter">
+            <ToolbarFilter deleteChip={filter.onRemove} chips={filter.query.name} categoryName="name">
+              <FilterInput
+                placeholder={intl.formatMessage(messages.CostModelsFilterPlaceholder)}
+                {...filterInputProps}
+              />
+            </ToolbarFilter>
+          </ToolbarItem>
+        </ToolbarToggleGroup>
         <ToolbarItem variant="pagination">
           <Pagination
             isCompact={paginationProps.isCompact}
diff --git a/src/pages/views/components/dataToolbar/dataToolbar.tsx b/src/pages/views/components/dataToolbar/dataToolbar.tsx
index c77e49f68..fd11d08c7 100644
--- a/src/pages/views/components/dataToolbar/dataToolbar.tsx
+++ b/src/pages/views/components/dataToolbar/dataToolbar.tsx
@@ -852,9 +852,9 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
       <div style={style ? style : styles.toolbarContainer}>
         <Toolbar id="details-toolbar" clearAllFilters={this.onDelete as any} collapseListedFiltersBreakpoint="xl">
           <ToolbarContent>
-            <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
-              {showBulkSelect && <ToolbarItem variant="bulk-select">{this.getBulkSelect()}</ToolbarItem>}
-              {showFilter && (
+            {showBulkSelect && <ToolbarItem variant="bulk-select">{this.getBulkSelect()}</ToolbarItem>}
+            {showFilter && (
+              <ToolbarToggleGroup breakpoint="xl" toggleIcon={<FilterIcon />}>
                 <ToolbarGroup variant="filter-group">
                   {this.getCategorySelect()}
                   {this.getTagKeySelect()}
@@ -865,15 +865,16 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
                       .filter(option => option.key !== tagKey && option.key !== orgUnitIdKey)
                       .map(option => this.getCategoryInput(option))}
                 </ToolbarGroup>
-              )}
-              {(Boolean(showExport) || Boolean(showColumnManagement)) && (
-                <ToolbarGroup>
-                  {Boolean(showExport) && this.getExportButton()}
-                  {Boolean(showColumnManagement) && this.getColumnManagement()}
-                </ToolbarGroup>
-              )}
-              {dateRange && <ToolbarGroup>{dateRange}</ToolbarGroup>}
-            </ToolbarToggleGroup>
+              </ToolbarToggleGroup>
+            )}
+            {(Boolean(showExport) || Boolean(showColumnManagement)) && (
+              <ToolbarGroup>
+                {Boolean(showExport) && this.getExportButton()}
+                {Boolean(showColumnManagement) && this.getColumnManagement()}
+              </ToolbarGroup>
+            )}
+            {dateRange && <ToolbarGroup>{dateRange}</ToolbarGroup>}
+
             <ToolbarItem alignment={{ default: 'alignRight' }} variant="pagination">
               {pagination}
             </ToolbarItem>

From 859be576f92f1aa36c27a41191228134b4d8c758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Maro=C5=A1i?= <marvusm.mmi@gmail.com>
Date: Tue, 16 Nov 2021 09:48:42 +0100
Subject: [PATCH 2/7] Force react-redux sharing

---
 package.json      | 4 ++--
 webpack.config.js | 1 +
 yarn.lock         | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index e74d4671f..5f0fd4dc4 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "@formatjs/cli": "4.2.12",
-    "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.1",
+    "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.6",
     "@testing-library/react": "11.2.5",
     "@types/enzyme": "3.10.8",
     "@types/jest": "26.0.20",
@@ -131,4 +131,4 @@
   "insights": {
     "appname": "cost-management"
   }
-}
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index c655a4258..8cf32370d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -198,6 +198,7 @@ module.exports = (_env, argv) => {
          * Package can be re-enabled for sharing once chrome starts providing global routing pakcage to all applications
          */
         exclude: ['react-router-dom'],
+        shared: [{ 'react-redux': { requiredVersion: dependencies['react-redux'] } }],
         exposes: {
           './RootApp': path.resolve(__dirname, './src/federatedEntry.tsx'),
           // Shared component module path. Must include default export!
diff --git a/yarn.lock b/yarn.lock
index 79f4b447a..fb0ac719f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -808,10 +808,10 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
   integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
 
-"@redhat-cloud-services/frontend-components-config-utilities@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-config-utilities/-/frontend-components-config-utilities-1.5.1.tgz#415aa787c6d924124f5f4b22df8ecbdadb045242"
-  integrity sha512-e0dxHZZRW4QSEP7aNSmgb5T+/hQanSOnqj/gkz4/pTpAspkelpyStK4DtXxP2eZCQ4Ozme/jxo4J+EiRDEbBNg==
+"@redhat-cloud-services/frontend-components-config-utilities@^1.5.6":
+  version "1.5.6"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-config-utilities/-/frontend-components-config-utilities-1.5.6.tgz#5e1ee2d78c8ce451cf5da543024ccfa594d96e54"
+  integrity sha512-8EoRKJAmAKYTkmTF0LflKDfN1synRNFs5EH5HMqxVfOODM07Y5NcJ/mSGZrwSvx1xkVaUgGpF8JfC6UIbwSnag==
 
 "@redhat-cloud-services/frontend-components-notifications@^3.2.4":
   version "3.2.4"

From 41a97ab9b69ebf85cdab212a4187261df91f4bfc Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 15 Nov 2021 12:41:30 -0500
Subject: [PATCH 3/7] PatternFly milestone update

https://issues.redhat.com/browse/COST-2067
---
 koku-ui-manifest |  22 +++++-----
 package.json     |  22 +++++-----
 yarn.lock        | 108 +++++++++++++++++++++++------------------------
 3 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/koku-ui-manifest b/koku-ui-manifest
index 11b7d89ab..eb3613024 100644
--- a/koku-ui-manifest
+++ b/koku-ui-manifest
@@ -116,22 +116,22 @@ mgmt_services/cost-mgmt:koku-ui/@nodelib/fs.scandir:2.1.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@nodelib/fs.stat:2.0.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@nodelib/fs.stat:2.0.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@nodelib/fs.walk:1.2.8.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/patternfly:4.151.4.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-charts:6.21.9.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-core:4.168.9.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-icons:4.19.9.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-styles:4.18.9.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-table:4.37.9.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@patternfly/react-tokens:4.20.9.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/patternfly:4.159.1.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-charts:6.28.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-core:4.175.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-icons:4.26.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-styles:4.25.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-table:4.44.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@patternfly/react-tokens:4.27.4.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@popperjs/core:2.10.2.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-config-utilities:1.5.1.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-notifications:3.2.4.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-config-utilities:1.5.6.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-notifications:3.2.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-translations:3.2.3.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-utilities:3.2.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-utilities:3.2.5.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components-utilities:3.2.5.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components:3.4.11.yarnlock
-mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/rbac-client:1.0.101.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/frontend-components:3.5.1.yarnlock
+mgmt_services/cost-mgmt:koku-ui/@redhat-cloud-services/rbac-client:1.0.103.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@restart/context:2.1.4.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@restart/hooks:0.3.27.yarnlock
 mgmt_services/cost-mgmt:koku-ui/@restart/hooks:0.3.27.yarnlock
diff --git a/package.json b/package.json
index 5f0fd4dc4..ab0cf597f 100644
--- a/package.json
+++ b/package.json
@@ -37,18 +37,18 @@
   "dependencies": {
     "@formatjs/cli": "4.2.12",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@patternfly/patternfly": "^4.151.4",
-    "@patternfly/react-charts": "^6.21.9",
-    "@patternfly/react-core": "^4.168.9",
-    "@patternfly/react-icons": "^4.19.9",
-    "@patternfly/react-styles": "^4.18.9",
-    "@patternfly/react-table": "^4.37.9",
-    "@patternfly/react-tokens": "^4.20.9",
-    "@redhat-cloud-services/frontend-components": "^3.4.11",
-    "@redhat-cloud-services/frontend-components-notifications": "^3.2.4",
+    "@patternfly/patternfly": "^4.159.1",
+    "@patternfly/react-charts": "^6.28.4",
+    "@patternfly/react-core": "^4.175.4",
+    "@patternfly/react-icons": "^4.26.4",
+    "@patternfly/react-styles": "^4.25.4",
+    "@patternfly/react-table": "^4.44.4",
+    "@patternfly/react-tokens": "^4.27.4",
+    "@redhat-cloud-services/frontend-components": "^3.5.1",
+    "@redhat-cloud-services/frontend-components-notifications": "^3.2.5",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.3",
     "@redhat-cloud-services/frontend-components-utilities": "^3.2.5",
-    "@redhat-cloud-services/rbac-client": "^1.0.101",
+    "@redhat-cloud-services/rbac-client": "^1.0.103",
     "@types/date-fns": "2.6.0",
     "@types/qs": "6.9.5",
     "@types/react": "17.0.2",
@@ -131,4 +131,4 @@
   "insights": {
     "appname": "cost-management"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index fb0ac719f..0a483d436 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -732,18 +732,18 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@patternfly/patternfly@^4.151.4":
-  version "4.151.4"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.151.4.tgz#c0cfe04ec4572f6d45c2c2b0c1e7a4f0026bdc24"
-  integrity sha512-TsXePErYetJ8eGkttczkiRBpQH8wAa5bS9aJ8ScFxRvpOw4LfivZ3AKBaQxgONWS6muUN1SxbaGF8qWuRMGo5Q==
-
-"@patternfly/react-charts@^6.21.9":
-  version "6.21.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-6.21.9.tgz#5d5d0a17dc6fd556280d195f33959c5407421581"
-  integrity sha512-u9EafMT0W/Z5mMJgLS0bwBFEyfH5lyX1zJKBiwoHGbQruNVSyya0F1dE/auHC1XC3NWAInvpcCLuBlZGbw47kw==
-  dependencies:
-    "@patternfly/react-styles" "^4.18.9"
-    "@patternfly/react-tokens" "^4.20.9"
+"@patternfly/patternfly@^4.159.1":
+  version "4.159.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.159.1.tgz#36a0dc7c31bd17acc64db5777dca33a541ffec73"
+  integrity sha512-CPLE7yAmtETH8TAdQhHkyFmyvjGwsv/7PeR4k57DY9X4IHpx41m4SXrv9cBCr/+Uy8o2SjvE8dtlZb+h0rLByQ==
+
+"@patternfly/react-charts@^6.28.4":
+  version "6.28.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-6.28.4.tgz#a06309dd6773e053c2de4d8e1fde814137513c9b"
+  integrity sha512-0craRoUaajy7MO54GMAIpxu8rv27R1U2wizMbwPmXqd2zedFrlWW3+Dmm6p7tpyy1cZ66XvDm9wdSvHHjQYiRQ==
+  dependencies:
+    "@patternfly/react-styles" "^4.25.4"
+    "@patternfly/react-tokens" "^4.27.4"
     hoist-non-react-statics "^3.3.0"
     lodash "^4.17.19"
     tslib "^2.0.0"
@@ -763,45 +763,45 @@
     victory-voronoi-container "^35.9.1"
     victory-zoom-container "^35.9.0"
 
-"@patternfly/react-core@^4.168.9":
-  version "4.168.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.168.9.tgz#e6daf408b1822d4967b8bbe7914e311db2fb44c2"
-  integrity sha512-7AfsxVMN7jaJ1rHnbjWm0kM2tOYNp1SjTgqbJj87GJzXVSO3NWihmIrOqNfev982ymKhTmc1gnzqhERO1PMjkw==
+"@patternfly/react-core@^4.175.4":
+  version "4.175.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.175.4.tgz#1dae2a6b5eb58209a47bdc3bf457c47b68ccee54"
+  integrity sha512-bnQhvXKbprni5WhlbMI+nbYxwMR03bFZtUk+F7JiLM96uk/yCrPjUes6u8Pbgkh/HhsRYx8K1kx84WmC+MyD5w==
   dependencies:
-    "@patternfly/react-icons" "^4.19.9"
-    "@patternfly/react-styles" "^4.18.9"
-    "@patternfly/react-tokens" "^4.20.9"
+    "@patternfly/react-icons" "^4.26.4"
+    "@patternfly/react-styles" "^4.25.4"
+    "@patternfly/react-tokens" "^4.27.4"
     focus-trap "6.2.2"
     react-dropzone "9.0.0"
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
-"@patternfly/react-icons@^4.19.9":
-  version "4.19.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.19.9.tgz#9d24881fae15d952afe296ae8880fae1f03c80b2"
-  integrity sha512-qrNCtBV/V1/+rBbZCt4mFhgL9F/iRIfeDjxHTPSYuuovDJoAoNtqjOoHj8kA9k6ZqZ2MpoY2CcOdz+ZyAJI/hQ==
-
-"@patternfly/react-styles@^4.18.9":
-  version "4.18.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.18.9.tgz#38de5df4714f6f49409588073d88eb294ebc8501"
-  integrity sha512-HFbZWQA0v/MXiu8AgWy0x8O3Qhm7crOZJ3DFdZwCejN5z8fjxTuicEqFnch68cesTKv7b7f/9jrhq4qtrRHCJQ==
-
-"@patternfly/react-table@^4.37.9":
-  version "4.37.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.37.9.tgz#c28eaca98ff5d834388ea0cafa2edefd08d9fa57"
-  integrity sha512-4zJ4nbJKPwvVToCKobdbrhYJGyxYcv798QxmvJUYeVN8Gh0YMBvc6eZyO0QB02JcBO9QkUzNpv1GMEGgvMdYIQ==
-  dependencies:
-    "@patternfly/react-core" "^4.168.9"
-    "@patternfly/react-icons" "^4.19.9"
-    "@patternfly/react-styles" "^4.18.9"
-    "@patternfly/react-tokens" "^4.20.9"
+"@patternfly/react-icons@^4.26.4":
+  version "4.26.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.26.4.tgz#3cd6c2d8405027e25b847e24d8a000d4af88537a"
+  integrity sha512-h1NJixtNVK+nYxLON3HOO0xguA9qXQ5rkGUo4TZJ/kRehFCJMH8PPeebdOAKgAo38NjS2/06+atNKjDRl6zYcA==
+
+"@patternfly/react-styles@^4.25.4":
+  version "4.25.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.25.4.tgz#e49c9b290d1e48a12e9d62f3e57079fccf758392"
+  integrity sha512-GHFLzsvyimymkGTTyTW8HZDlhYbGpCqw/69Se1EHCaZnbTYluiJMRI6YfNTRC5ZvYF+x4GMAG5AjwQ5LfbZ/xg==
+
+"@patternfly/react-table@^4.44.4":
+  version "4.44.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.44.4.tgz#38e11f15339324efe642a3f01139afe77af0845f"
+  integrity sha512-UV2kq4OV1v6Hv2TXvvsEApPwbAyD6zvurvl0/BZoqqEHTWVQedG0m1jUN9jFMTJiD4GTESvg6TAcSowGkJlTug==
+  dependencies:
+    "@patternfly/react-core" "^4.175.4"
+    "@patternfly/react-icons" "^4.26.4"
+    "@patternfly/react-styles" "^4.25.4"
+    "@patternfly/react-tokens" "^4.27.4"
     lodash "^4.17.19"
     tslib "^2.0.0"
 
-"@patternfly/react-tokens@^4.20.9":
-  version "4.20.9"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.20.9.tgz#b3100c7f9267895db47ae9ebcb6f66984f6a03ad"
-  integrity sha512-vxY3hGYgy6lseNVfSpHPw7JZ6zg96DXiPBHZ9dZhiNCloOs71SkxLEyZU6sYIWzNn4X7j3tYe9k8G4QxNCMeBg==
+"@patternfly/react-tokens@^4.27.4":
+  version "4.27.4"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.27.4.tgz#9a292a2ac24e17714456a0b6ee5b512a0850ec05"
+  integrity sha512-+DVCp4edPwORQF2zH6aG8e7FhLBXKsZgxMEYBU1/3qQSp+gf6Q8M4HiqbNnR6uo99tYJ9JiEcbGZu4Mx+nDIuA==
 
 "@popperjs/core@^2.5.3":
   version "2.10.2"
@@ -813,10 +813,10 @@
   resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-config-utilities/-/frontend-components-config-utilities-1.5.6.tgz#5e1ee2d78c8ce451cf5da543024ccfa594d96e54"
   integrity sha512-8EoRKJAmAKYTkmTF0LflKDfN1synRNFs5EH5HMqxVfOODM07Y5NcJ/mSGZrwSvx1xkVaUgGpF8JfC6UIbwSnag==
 
-"@redhat-cloud-services/frontend-components-notifications@^3.2.4":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-3.2.4.tgz#4a5c45a2d05ecd16e5916397d7c33e6fdae76e9a"
-  integrity sha512-8wYFXidJptCfbEXEmi1tM4adHmSVSWEmTjjZ/JD7UCPlmQ3Cr9D+sWyUf4x9iUS5kvSlnUMS1DnwjMjhy10s7g==
+"@redhat-cloud-services/frontend-components-notifications@^3.2.5":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components-notifications/-/frontend-components-notifications-3.2.5.tgz#7f86ae13085754d584ae44f3bc6a1866c83de0f5"
+  integrity sha512-HZKPYiNvBKMP5F3nicdIwPdMBh4o524b+THz0zN4pax0rb6RydR20E5OQ0taHqzUyObyTedM8w4O5ulNpVHduQ==
   dependencies:
     "@redhat-cloud-services/frontend-components-utilities" "*"
     redux-promise-middleware "6.1.2"
@@ -843,20 +843,20 @@
     mkdirp "^1.0.4"
     react-content-loader ">=3.4.1"
 
-"@redhat-cloud-services/frontend-components@^3.4.11":
-  version "3.4.11"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-3.4.11.tgz#e0a5fda1c6980f8b14ece2e22617e0cc263e0157"
-  integrity sha512-+6EA/g3EZRPv5scVBiRxmLBY694Qi18aqM3fEayAshwWLALHzbTE7t0voTqTle92bq8XKoCUPRbjnZb21Sg96Q==
+"@redhat-cloud-services/frontend-components@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-3.5.1.tgz#8c06b1dfb4bc399dafe90e0c924c68ea0cb0d3df"
+  integrity sha512-bPsr4XDSDmWdUuMweWmzd4H8IzWgxApaML4cU1k4x7sCb22NpvBec8W2pLBeZ9I9sRo2ZObQho2bdp5BiOxScg==
   dependencies:
     "@redhat-cloud-services/frontend-components-utilities" ">=3.0.0"
     "@scalprum/core" "^0.1.1"
     "@scalprum/react-core" "^0.1.7"
     sanitize-html "^2.3.2"
 
-"@redhat-cloud-services/rbac-client@^1.0.101":
-  version "1.0.101"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/rbac-client/-/rbac-client-1.0.101.tgz#9a77a467f0588f0d9d9be2f78d427017d43644cc"
-  integrity sha512-5/tN3UL4db65wEJ5py5x/prMt+sWbOunKdHMpj53bBxgojJVbDBAgbu/Y+j6JBP6qDCEblw6e0VSj8IEKruX9A==
+"@redhat-cloud-services/rbac-client@^1.0.103":
+  version "1.0.103"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/rbac-client/-/rbac-client-1.0.103.tgz#bb7cd41cc546ef6b852e6533b2f1449851829e91"
+  integrity sha512-FvFbIT6yH8+QmDabjuAkXATnZ4mSWubOrFvKV3QY5ukSmigmsROgP0eUnp8lgd5rvz6TcnTyt1OBcS4HE4rvMQ==
   dependencies:
     axios "^0.21.1"
 

From 1393837f98beecaa5b185aca959563bd25ff6c88 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Fri, 19 Nov 2021 12:04:40 -0500
Subject: [PATCH 4/7] Remove filters from tag key value queries

---
 .../views/components/dataToolbar/tagValue.tsx | 22 ++-----------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/pages/views/components/dataToolbar/tagValue.tsx b/src/pages/views/components/dataToolbar/tagValue.tsx
index 6b88d42c6..ff5941758 100644
--- a/src/pages/views/components/dataToolbar/tagValue.tsx
+++ b/src/pages/views/components/dataToolbar/tagValue.tsx
@@ -10,7 +10,7 @@ import {
   ToolbarChipGroup,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { getQuery, logicalAndPrefix, orgUnitIdKey, parseQuery, Query, tagPrefix } from 'api/queries/query';
+import { getQuery, orgUnitIdKey, parseQuery, Query } from 'api/queries/query';
 import { Tag, TagPathsType, TagType } from 'api/tags/tag';
 import { intl } from 'components/i18n';
 import messages from 'locales/messages';
@@ -178,21 +178,13 @@ const mapStateToProps = createMapStateToProps<TagValueOwnProps, TagValueStatePro
     const groupBy = groupByOrgValue ? orgUnitIdKey : getGroupById(query);
     const groupByValue = groupByOrgValue ? groupByOrgValue : getGroupByValue(query);
 
-    // Prune unsupported tag params from filter_by
-    const filterByParams = query && query.filter_by ? query.filter_by : {};
-    for (const key of Object.keys(filterByParams)) {
-      if (key.indexOf(tagPrefix) !== -1) {
-        filterByParams[key] = undefined;
-      }
-    }
-
     const tagKeyFilter = tagKey
       ? {
           key: tagKey,
         }
       : {};
 
-    const tagQueryParams =
+    const tagQuery =
       endDate && startDate
         ? {
             start_date: startDate,
@@ -210,16 +202,6 @@ const mapStateToProps = createMapStateToProps<TagValueOwnProps, TagValueStatePro
             },
           };
 
-    const tagQuery = {
-      ...tagQueryParams,
-      filter_by: {
-        // Add filters here to apply logical OR/AND
-        ...filterByParams,
-        ...(query && query.filter && query.filter.account && { [`${logicalAndPrefix}account`]: query.filter.account }),
-        ...(groupBy && groupBy.indexOf(tagPrefix) === -1 && { [groupBy]: groupByValue }), // Note: Cannot use group_by with tags
-      },
-    };
-
     // Omitting key_only to share a single, cached request -- although the header doesn't need key values, the toolbar does
     const tagQueryString = getQuery({
       ...tagQuery,

From 00f61445550eca2d3b4f3b0f7fc460ef757111cb Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Fri, 19 Nov 2021 12:19:46 -0500
Subject: [PATCH 5/7] Fix PatternFly ToolbarFilter error with categoryName

https://issues.redhat.com/browse/COST-2094
---
 .../components/dataToolbar/dataToolbar.tsx    | 20 +++++++++----------
 .../details/awsDetails/detailsToolbar.tsx     |  4 ++--
 .../details/azureDetails/detailsToolbar.tsx   |  8 ++++----
 .../details/gcpDetails/detailsToolbar.tsx     |  4 ++--
 .../details/ibmDetails/detailsToolbar.tsx     |  4 ++--
 .../details/ocpDetails/detailsToolbar.tsx     |  8 ++++----
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/pages/views/components/dataToolbar/dataToolbar.tsx b/src/pages/views/components/dataToolbar/dataToolbar.tsx
index fd11d08c7..96f814b73 100644
--- a/src/pages/views/components/dataToolbar/dataToolbar.tsx
+++ b/src/pages/views/components/dataToolbar/dataToolbar.tsx
@@ -27,7 +27,7 @@ import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import { SearchIcon } from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import { Org } from 'api/orgs/org';
 import { orgUnitIdKey, orgUnitNameKey, Query, tagKey, tagPrefix } from 'api/queries/query';
-import { ResourcePathsType } from 'api/resources/resource';
+import { ResourcePathsType, ResourceType } from 'api/resources/resource';
 import { isResourceTypeValid } from 'api/resources/resourceUtils';
 import { Tag, TagPathsType } from 'api/tags/tag';
 import messages from 'locales/messages';
@@ -367,25 +367,25 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
   };
 
   // Category input
-  public getCategoryInput = categoryOption => {
+  public getCategoryInput = (categoryOption: ToolbarChipGroup) => {
     const { intl, isDisabled, resourcePathsType } = this.props;
     const { currentCategory, filters, categoryInput } = this.state;
 
     return (
       <ToolbarFilter
-        categoryName={categoryOption}
-        chips={filters[categoryOption.key] as any}
+        categoryName={categoryOption.name}
+        chips={filters[categoryOption.key] as string[]}
         deleteChip={this.onDelete}
         key={categoryOption.key}
         showToolbarItem={currentCategory === categoryOption.key}
       >
         <InputGroup>
-          {isResourceTypeValid(resourcePathsType, categoryOption.key) ? (
+          {isResourceTypeValid(resourcePathsType, categoryOption.key as ResourceType) ? (
             <ResourceTypeahead
               isDisabled={isDisabled}
               onSelect={value => this.onCategoryInputSelect(value, categoryOption.key)}
               resourcePathsType={resourcePathsType}
-              resourceType={categoryOption.key}
+              resourceType={categoryOption.key as ResourceType}
             />
           ) : (
             <>
@@ -707,13 +707,13 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
 
   // Tag value select
 
-  public getTagValueSelect = tagKeyOption => {
+  public getTagValueSelect = (tagKeyOption: ToolbarChipGroup) => {
     const { tagReportPathsType } = this.props;
     const { currentCategory, currentTagKey, filters, tagKeyValueInput } = this.state;
 
     return (
       <ToolbarFilter
-        categoryName={tagKeyOption}
+        categoryName={tagKeyOption.name}
         chips={filters.tag[tagKeyOption.key]}
         deleteChip={this.onDelete}
         key={tagKeyOption.key}
@@ -862,8 +862,8 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
                   {this.getOrgUnitSelect()}
                   {options &&
                     options
-                      .filter(option => option.key !== tagKey && option.key !== orgUnitIdKey)
-                      .map(option => this.getCategoryInput(option))}
+                      .filter(val => val.key !== tagKey && val.key !== orgUnitIdKey)
+                      .map(val => this.getCategoryInput(val))}
                 </ToolbarGroup>
               </ToolbarToggleGroup>
             )}
diff --git a/src/pages/views/details/awsDetails/detailsToolbar.tsx b/src/pages/views/details/awsDetails/detailsToolbar.tsx
index 28d9a2580..a6f752466 100644
--- a/src/pages/views/details/awsDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/awsDetails/detailsToolbar.tsx
@@ -93,13 +93,13 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
       { name: intl.formatMessage(messages.FilterByValues, { value: 'service' }), key: 'service' },
       { name: intl.formatMessage(messages.FilterByValues, { value: 'region' }), key: 'region' },
     ];
-    if (orgReport && orgReport.data && orgReport.data.length > 0) {
+    if (orgReport && orgReport.data && orgReport.data.length) {
       options.push({
         name: intl.formatMessage(messages.FilterByValues, { value: 'org_unit_id' }),
         key: orgUnitIdKey,
       });
     }
-    if (tagReport && tagReport.data && tagReport.data.length > 0) {
+    if (tagReport && tagReport.data && tagReport.data.length) {
       options.push({ name: intl.formatMessage(messages.FilterByValues, { value: 'tag' }), key: tagKey });
     }
     return options;
diff --git a/src/pages/views/details/azureDetails/detailsToolbar.tsx b/src/pages/views/details/azureDetails/detailsToolbar.tsx
index e9ff64556..3a537ab98 100644
--- a/src/pages/views/details/azureDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/azureDetails/detailsToolbar.tsx
@@ -89,12 +89,12 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
         name: intl.formatMessage(messages.FilterByValues, { value: 'resource_location' }),
         key: 'resource_location',
       },
-      { name: intl.formatMessage(messages.FilterByValues, { value: 'tag' }), key: tagKey },
     ];
 
-    return tagReport && tagReport.data && tagReport.data.length
-      ? options
-      : options.filter(option => option.key !== tagKey);
+    if (tagReport && tagReport.data && tagReport.data.length) {
+      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: tagKey }), key: tagKey });
+    }
+    return options;
   };
 
   public render() {
diff --git a/src/pages/views/details/gcpDetails/detailsToolbar.tsx b/src/pages/views/details/gcpDetails/detailsToolbar.tsx
index 19c8cbb11..fafc362de 100644
--- a/src/pages/views/details/gcpDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/gcpDetails/detailsToolbar.tsx
@@ -86,8 +86,8 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
       { name: intl.formatMessage(messages.FilterByValues, { value: 'region' }), key: 'region' },
     ];
 
-    if (tagReport && tagReport.data && tagReport.data.length > 0) {
-      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: 'tag' }), key: tagKey });
+    if (tagReport && tagReport.data && tagReport.data.length) {
+      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: tagKey }), key: tagKey });
     }
     return options;
   };
diff --git a/src/pages/views/details/ibmDetails/detailsToolbar.tsx b/src/pages/views/details/ibmDetails/detailsToolbar.tsx
index 300d17273..880c6d382 100644
--- a/src/pages/views/details/ibmDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/ibmDetails/detailsToolbar.tsx
@@ -86,8 +86,8 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
       { name: intl.formatMessage(messages.FilterByValues, { value: 'region' }), key: 'region' },
     ];
 
-    if (tagReport && tagReport.data && tagReport.data.length > 0) {
-      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: 'tag' }), key: tagKey });
+    if (tagReport && tagReport.data && tagReport.data.length) {
+      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: tagKey }), key: tagKey });
     }
     return options;
   };
diff --git a/src/pages/views/details/ocpDetails/detailsToolbar.tsx b/src/pages/views/details/ocpDetails/detailsToolbar.tsx
index 4096751fa..9dc0f035b 100644
--- a/src/pages/views/details/ocpDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/ocpDetails/detailsToolbar.tsx
@@ -98,12 +98,12 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
       { name: intl.formatMessage(messages.FilterByValues, { value: 'cluster' }), key: 'cluster' },
       { name: intl.formatMessage(messages.FilterByValues, { value: 'node' }), key: 'node' },
       { name: intl.formatMessage(messages.FilterByValues, { value: 'project' }), key: 'project' },
-      { name: intl.formatMessage(messages.FilterByValues, { value: 'tag' }), key: tagKey },
     ];
 
-    return tagReport && tagReport.data && tagReport.data.length
-      ? options
-      : options.filter(option => option.key !== tagKey);
+    if (tagReport && tagReport.data && tagReport.data.length) {
+      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: tagKey }), key: tagKey });
+    }
+    return options;
   };
 
   public render() {

From 353c249ee320f102dd967407af72c7a10f1844a8 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Fri, 19 Nov 2021 12:23:49 -0500
Subject: [PATCH 6/7] Updated comments

---
 src/pages/views/components/dataToolbar/dataToolbar.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/views/components/dataToolbar/dataToolbar.tsx b/src/pages/views/components/dataToolbar/dataToolbar.tsx
index 96f814b73..a7e1a58cf 100644
--- a/src/pages/views/components/dataToolbar/dataToolbar.tsx
+++ b/src/pages/views/components/dataToolbar/dataToolbar.tsx
@@ -371,6 +371,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
     const { intl, isDisabled, resourcePathsType } = this.props;
     const { currentCategory, filters, categoryInput } = this.state;
 
+    // Todo: categoryName workaround for https://issues.redhat.com/browse/COST-2094
     return (
       <ToolbarFilter
         categoryName={categoryOption.name}

From e032af2aa538a0280e3e8a85eeaa45e473824b85 Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Fri, 19 Nov 2021 19:50:50 -0500
Subject: [PATCH 7/7] Fix category name collisions with PatternFly
 ToolbarFilter

https://issues.redhat.com/browse/COST-2094
---
 .../components/dataToolbar/dataToolbar.tsx    | 36 ++++++++++++++-----
 .../details/ocpDetails/detailsToolbar.tsx     |  5 ++-
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/pages/views/components/dataToolbar/dataToolbar.tsx b/src/pages/views/components/dataToolbar/dataToolbar.tsx
index a7e1a58cf..7216e4589 100644
--- a/src/pages/views/components/dataToolbar/dataToolbar.tsx
+++ b/src/pages/views/components/dataToolbar/dataToolbar.tsx
@@ -105,6 +105,9 @@ const defaultFilters = {
   tag: {},
 };
 
+// Todo: categoryName workaround for https://issues.redhat.com/browse/COST-2094
+export const categoryPrefix = '_';
+
 export class DataToolbarBase extends React.Component<DataToolbarProps> {
   protected defaultState: DataToolbarState = {
     categoryInput: '',
@@ -192,9 +195,12 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
   private onDelete = (type: any, chip: any) => {
     // Todo: workaround for https://github.com/patternfly/patternfly-react/issues/3552
     // This prevents us from using a localized string, if necessary
-    const filterType = type && type.key ? type.key : type;
+    const _type = type && type.key ? type.key : type;
     const id = chip && chip.key ? chip.key : chip;
 
+    // Todo: categoryName workaround for https://issues.redhat.com/browse/COST-2094
+    const filterType = _type && _type.indexOf(categoryPrefix) === 0 ? _type.substring(categoryPrefix.length) : _type;
+
     if (filterType) {
       this.setState(
         (prevState: any) => {
@@ -320,7 +326,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
     return (
       <ToolbarItem>
         <Select
-          id="categorySelect"
+          id="category-select"
           isDisabled={isDisabled}
           isOpen={isCategorySelectOpen}
           onSelect={this.handleOnCategorySelect}
@@ -352,9 +358,15 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
   };
 
   private handleOnCategorySelect = (event, selection: CategoryOption) => {
+    // Todo: categoryName workaround for https://issues.redhat.com/browse/COST-2094
+    const currentCategory =
+      selection.value.indexOf(categoryPrefix) === 0
+        ? selection.value.substring(categoryPrefix.length)
+        : selection.value;
+
     this.setState({
       categoryInput: '',
-      currentCategory: selection.value,
+      currentCategory,
       currentTagKey: undefined,
       isCategorySelectOpen: !this.state.isCategorySelectOpen,
     });
@@ -372,9 +384,14 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
     const { currentCategory, filters, categoryInput } = this.state;
 
     // Todo: categoryName workaround for https://issues.redhat.com/browse/COST-2094
+    const categoryName = {
+      name: categoryOption.name,
+      key: `${categoryPrefix}${categoryOption.key}`,
+    };
+
     return (
       <ToolbarFilter
-        categoryName={categoryOption.name}
+        categoryName={categoryName}
         chips={filters[categoryOption.key] as string[]}
         deleteChip={this.onDelete}
         key={categoryOption.key}
@@ -392,8 +409,8 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
             <>
               <TextInput
                 isDisabled={isDisabled}
-                name={`${categoryOption.key}-input`}
-                id={`${categoryOption.key}-input`}
+                name={`category-input-${categoryOption.key}`}
+                id={`category-input-${categoryOption.key}`}
                 type="search"
                 aria-label={intl.formatMessage(messages.FilterByInputAriaLabel, { value: categoryOption.key })}
                 onChange={this.handleOnCategoryInputChange}
@@ -432,6 +449,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
     if ((event && event.key && event.key !== 'Enter') || categoryInput.trim() === '') {
       return;
     }
+
     this.setState(
       (prevState: any) => {
         const prevFilters = prevState.filters[key];
@@ -714,7 +732,7 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
 
     return (
       <ToolbarFilter
-        categoryName={tagKeyOption.name}
+        categoryName={tagKeyOption}
         chips={filters.tag[tagKeyOption.key]}
         deleteChip={this.onDelete}
         key={tagKeyOption.key}
@@ -863,8 +881,8 @@ export class DataToolbarBase extends React.Component<DataToolbarProps> {
                   {this.getOrgUnitSelect()}
                   {options &&
                     options
-                      .filter(val => val.key !== tagKey && val.key !== orgUnitIdKey)
-                      .map(val => this.getCategoryInput(val))}
+                      .filter(option => option.key !== tagKey && option.key !== orgUnitIdKey)
+                      .map(option => this.getCategoryInput(option))}
                 </ToolbarGroup>
               </ToolbarToggleGroup>
             )}
diff --git a/src/pages/views/details/ocpDetails/detailsToolbar.tsx b/src/pages/views/details/ocpDetails/detailsToolbar.tsx
index 9dc0f035b..d3890a870 100644
--- a/src/pages/views/details/ocpDetails/detailsToolbar.tsx
+++ b/src/pages/views/details/ocpDetails/detailsToolbar.tsx
@@ -101,7 +101,10 @@ export class DetailsToolbarBase extends React.Component<DetailsToolbarProps> {
     ];
 
     if (tagReport && tagReport.data && tagReport.data.length) {
-      options.push({ name: intl.formatMessage(messages.FilterByValues, { value: tagKey }), key: tagKey });
+      options.push({
+        name: intl.formatMessage(messages.FilterByValues, { value: tagKey }),
+        key: tagKey,
+      });
     }
     return options;
   };