fix(toolbarFields): ent-4208 left, right select positioning (#824)

* toolbar, toolbarFields left, right select positioning * productViews, apply select positioning
RedHatInsights · Nov 29, 2021 · 7c08d29 · 7c08d29
1 parent 330223e
commit 7c08d29
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 24 deletions.
diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap
@@ -117,6 +117,7 @@ exports[`ProductView Component should allow custom inventory displays via config
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductGraphTallyQuery={[Function]}
@@ -278,6 +279,7 @@ exports[`ProductView Component should allow custom product views via props: cust
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductGraphTallyQuery={[Function]}
@@ -501,6 +503,7 @@ exports[`ProductView Component should render a basic component: basic 1`] = `
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductGraphTallyQuery={[Function]}

diff --git a/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap b/...components/productView/__tests__/__snapshots__/productViewOpenShiftContainer.test.js.snap
@@ -230,6 +230,7 @@ exports[`ProductViewOpenShiftContainer Component should render a basic component
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductQuery={[Function]}
@@ -260,6 +261,7 @@ exports[`ProductViewOpenShiftContainer Component should render a basic component
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductGraphTallyQuery={[Function]}
@@ -624,6 +626,7 @@ exports[`ProductViewOpenShiftContainer Component should render a basic component
                 },
               ]
             }
+            position="right"
             t={[Function]}
             useOnSelect={[Function]}
             useProductGraphTallyQuery={[Function]}

diff --git a/...components/productView/__tests__/__snapshots__/productViewOpenShiftDedicated.test.js.snap b/...components/productView/__tests__/__snapshots__/productViewOpenShiftDedicated.test.js.snap
@@ -118,6 +118,7 @@ exports[`ProductViewOpenShiftDedicated Component should render a basic component
           },
         ]
       }
+      position="right"
       t={[Function]}
       useOnSelect={[Function]}
       useProductGraphTallyQuery={[Function]}

diff --git a/src/components/productView/productView.js b/src/components/productView/productView.js
@@ -11,6 +11,7 @@ import { Toolbar } from '../toolbar/toolbar';
 import { ConnectedInventoryList } from '../inventoryList/inventoryList';
 import { helpers } from '../../common';
 import BannerMessages from '../bannerMessages/bannerMessages';
+import { SelectPosition } from '../form/select';
 import { ToolbarFieldGranularity } from '../toolbar/toolbarFieldGranularity';
 import InventoryTabs, { InventoryTab } from '../inventoryTabs/inventoryTabs';
 import { ConnectedInventorySubscriptions } from '../inventorySubscriptions/inventorySubscriptions';
@@ -104,7 +105,7 @@ const ProductView = ({ t, toolbarGraph, toolbarGraphDescription, useRouteDetail:
             cardTitle={graphCardTitle}
           >
             {(React.isValidElement(toolbarGraph) && toolbarGraph) ||
-              (toolbarGraph !== false && <ToolbarFieldGranularity />)}
+              (toolbarGraph !== false && <ToolbarFieldGranularity position={SelectPosition.right} />)}
           </ConnectedGraphCard>
         </PageSection>
         <PageSection>

diff --git a/src/components/productView/productViewOpenShiftContainer.js b/src/components/productView/productViewOpenShiftContainer.js
@@ -8,6 +8,7 @@ import { PageLayout, PageColumns, PageHeader, PageSection, PageToolbar } from '.
 import { RHSM_API_PATH_ID_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { apiQueries, storeHooks } from '../../redux';
 import GraphCard from '../graphCard/graphCard';
+import { SelectPosition } from '../form/select';
 import { ToolbarFieldUom } from '../toolbar/toolbarFieldUom';
 import { ToolbarFieldGranularity } from '../toolbar/toolbarFieldGranularity';
 import { ToolbarFieldRangedMonthly } from '../toolbar/toolbarFieldRangedMonthly';
@@ -107,9 +108,15 @@ const ProductViewOpenShiftContainer = ({ t, useRouteDetail: useAliasRouteDetail
             viewId={viewId}
             cardTitle={graphCardTitle}
           >
-            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT && uomFilter && <ToolbarFieldUom />}
-            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT && <ToolbarFieldGranularity />}
-            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT_METRICS && <ToolbarFieldRangedMonthly />}
+            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT && uomFilter && (
+              <ToolbarFieldUom position={SelectPosition.right} />
+            )}
+            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT && (
+              <ToolbarFieldGranularity position={SelectPosition.right} />
+            )}
+            {productId === RHSM_API_PATH_ID_TYPES.OPENSHIFT_METRICS && (
+              <ToolbarFieldRangedMonthly position={SelectPosition.right} />
+            )}
           </GraphCard>
         </PageSection>
         <PageSection>

diff --git a/src/components/productView/productViewOpenShiftDedicated.js b/src/components/productView/productViewOpenShiftDedicated.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ProductView } from './productView';
+import { SelectPosition } from '../form/select';
 import { ToolbarFieldRangedMonthly } from '../toolbar/toolbarFieldRangedMonthly';
 
 /**
@@ -8,7 +9,7 @@ import { ToolbarFieldRangedMonthly } from '../toolbar/toolbarFieldRangedMonthly'
  * @returns {Node}
  */
 const ProductViewOpenShiftDedicated = () => (
-  <ProductView toolbarGraph={<ToolbarFieldRangedMonthly />} toolbarGraphDescription />
+  <ProductView toolbarGraph={<ToolbarFieldRangedMonthly position={SelectPosition.right} />} toolbarGraphDescription />
 );
 
 /**

diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap
@@ -63,6 +63,7 @@ exports[`Toolbar Component should handle updating toolbar chips: chips 1`] = `
                 },
               ]
             }
+            position="left"
             t={[Function]}
             useOnSelect={[Function]}
             useProductQuery={[Function]}
@@ -133,6 +134,7 @@ exports[`Toolbar Component should hide categories when a single filter is availa
                 },
               ]
             }
+            position="left"
             t={[Function]}
             useOnSelect={[Function]}
             useProductQuery={[Function]}
@@ -210,6 +212,7 @@ exports[`Toolbar Component should render a basic component: basic 1`] = `
                 },
               ]
             }
+            position="left"
             t={[Function]}
             useOnSelect={[Function]}
             useProductQuery={[Function]}
@@ -249,6 +252,7 @@ exports[`Toolbar Component should render a basic component: basic 1`] = `
                 },
               ]
             }
+            position="left"
             t={[Function]}
             useOnSelect={[Function]}
             useProductQuery={[Function]}

diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldRangedMonthly.test.js.snap
@@ -239,7 +239,7 @@ exports[`ToolbarFieldRangedMonthly Component should handle selecting an option d
     ]
   }
   placeholder="t(curiosity-toolbar.placeholder, {\\"context\\":\\"rangedMonthly\\"})"
-  position="right"
+  position="left"
   selectedOptions={null}
   toggleIcon={null}
   variant="single"
@@ -428,7 +428,7 @@ exports[`ToolbarFieldRangedMonthly Component should render a basic component: ba
     ]
   }
   placeholder="t(curiosity-toolbar.placeholder, {\\"context\\":\\"rangedMonthly\\"})"
-  position="right"
+  position="left"
   selectedOptions={null}
   toggleIcon={null}
   variant="single"

diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldSelectCategory.test.js.snap
@@ -29,6 +29,7 @@ Array [
           },
         ]
       }
+      position="left"
       t={[Function]}
       useOnSelect={[Function]}
       useProductGraphTallyQuery={[Function]}
@@ -175,6 +176,7 @@ Array [
           },
         ]
       }
+      position="left"
       t={[Function]}
       useOnSelect={[Function]}
       useProductGraphTallyQuery={[Function]}
@@ -311,6 +313,7 @@ Array [
           },
         ]
       }
+      position="left"
       t={[Function]}
       useOnSelect={[Function]}
       useProductQuery={[Function]}
@@ -359,6 +362,7 @@ Array [
           },
         ]
       }
+      position="left"
       t={[Function]}
       useOnSelect={[Function]}
       useProductQuery={[Function]}
@@ -417,6 +421,7 @@ Array [
           },
         ]
       }
+      position="left"
       t={[Function]}
       useOnSelect={[Function]}
       useProductQuery={[Function]}
@@ -521,6 +526,7 @@ exports[`ToolbarFieldSelectCategory Component should render a basic component: b
               },
             ]
           }
+          position="left"
           t={[Function]}
           useOnSelect={[Function]}
           useProductQuery={[Function]}
@@ -579,6 +585,7 @@ exports[`ToolbarFieldSelectCategory Component should render a basic component: b
               },
             ]
           }
+          position="left"
           t={[Function]}
           useOnSelect={[Function]}
           useProductQuery={[Function]}
@@ -658,6 +665,7 @@ Object {
             },
           ]
         }
+        position="left"
         t={[Function]}
         useOnSelect={[Function]}
         useProductQuery={[Function]}
@@ -716,6 +724,7 @@ Object {
             },
           ]
         }
+        position="left"
         t={[Function]}
         useOnSelect={[Function]}
         useProductQuery={[Function]}
@@ -783,6 +792,7 @@ Object {
             },
           ]
         }
+        position="left"
         t={[Function]}
         useOnSelect={[Function]}
         useProductQuery={[Function]}
@@ -841,6 +851,7 @@ Object {
             },
           ]
         }
+        position="left"
         t={[Function]}
         useOnSelect={[Function]}
         useProductQuery={[Function]}

diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
@@ -95,12 +95,11 @@ const Toolbar = ({
               </ToolbarItem>
             )}
             {options.map(({ title, value, component, isClearable, options: filterOptions }) => {
-              const chipProps = {};
+              const chipProps = { categoryName: title };
 
               if (isClearable !== false) {
                 chipProps.chips = setSelectedOptions({ options: filterOptions, value });
                 chipProps.deleteChip = () => onClearFilter({ options: filterOptions, value });
-                chipProps.categoryName = title;
               }
 
               return (

diff --git a/src/components/toolbar/toolbarFieldGranularity.js b/src/components/toolbar/toolbarFieldGranularity.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxTypes, storeHooks } from '../../redux';
 import { useProduct, useProductGraphTallyQuery } from '../productView/productViewContext';
-import { Select } from '../form/select';
+import { Select, SelectPosition } from '../form/select';
 import { RHSM_API_QUERY_GRANULARITY_TYPES as FIELD_TYPES, RHSM_API_QUERY_TYPES } from '../../types/rhsmApiTypes';
 import { dateHelpers } from '../../common';
 import { translate } from '../i18n/i18n';
@@ -66,6 +66,7 @@ const useOnSelect = ({
  * @param {object} props
  * @param {boolean} props.isFilter
  * @param {Array} props.options
+ * @param {string} props.position
  * @param {Function} props.t
  * @param {Function} props.useOnSelect
  * @param {Function} props.useProductGraphTallyQuery
@@ -74,6 +75,7 @@ const useOnSelect = ({
 const ToolbarFieldGranularity = ({
   isFilter,
   options,
+  position,
   t,
   useOnSelect: useAliasOnSelect,
   useProductGraphTallyQuery: useAliasProductGraphTallyQuery
@@ -89,6 +91,7 @@ const ToolbarFieldGranularity = ({
       options={updatedOptions}
       selectedOptions={updatedValue}
       placeholder={t(`curiosity-toolbar.placeholder${(isFilter && '_filter') || ''}`, { context: 'granularity' })}
+      position={position}
       data-test="toolbarFieldGranularity"
     />
   );
@@ -98,7 +101,7 @@ const ToolbarFieldGranularity = ({
  * Prop types.
  *
  * @type {{useOnSelect: Function, useProductGraphTallyQuery: Function, t: Function, isFilter: boolean,
- *     options: Array}}
+ *     options: Array, position: string}}
  */
 ToolbarFieldGranularity.propTypes = {
   isFilter: PropTypes.bool,
@@ -109,6 +112,7 @@ ToolbarFieldGranularity.propTypes = {
       selected: PropTypes.bool
     })
   ),
+  position: PropTypes.string,
   t: PropTypes.func,
   useOnSelect: PropTypes.func,
   useProductGraphTallyQuery: PropTypes.func
@@ -118,11 +122,12 @@ ToolbarFieldGranularity.propTypes = {
  * Default props.
  *
  * @type {{useOnSelect: Function, useProductGraphTallyQuery: Function, t: Function, isFilter: boolean,
- *     options: Array}}
+ *     options: Array, position: string}}
  */
 ToolbarFieldGranularity.defaultProps = {
   isFilter: false,
   options: toolbarFieldOptions,
+  position: SelectPosition.left,
   t: translate,
   useOnSelect,
   useProductGraphTallyQuery

diff --git a/src/components/toolbar/toolbarFieldRangedMonthly.js b/src/components/toolbar/toolbarFieldRangedMonthly.js
@@ -65,6 +65,7 @@ const useOnSelect = ({
  * @param {object} props
  * @param {boolean} props.isFilter
  * @param {Array} props.options
+ * @param {string} props.position
  * @param {Function} props.t
  * @param {Function} props.useOnSelect
  * @param {Function} props.useProductGraphTallyQuery
@@ -73,6 +74,7 @@ const useOnSelect = ({
 const ToolbarFieldRangedMonthly = ({
   isFilter,
   options,
+  position,
   t,
   useOnSelect: useAliasOnSelect,
   useProductGraphTallyQuery: useAliasProductGraphTallyQuery
@@ -91,7 +93,7 @@ const ToolbarFieldRangedMonthly = ({
       onSelect={onSelect}
       options={updatedOptions}
       placeholder={t(`curiosity-toolbar.placeholder${(isFilter && '_filter') || ''}`, { context: 'rangedMonthly' })}
-      position={SelectPosition.right}
+      position={position}
       maxHeight={250}
       data-test="toolbarFieldRangeGranularity"
     />
@@ -102,7 +104,7 @@ const ToolbarFieldRangedMonthly = ({
  * Prop types.
  *
  * @type {{useOnSelect: Function, useProductGraphTallyQuery: Function, t: Function, isFilter: boolean,
- *     options: Array}}
+ *     options: Array, position: string}}
  */
 ToolbarFieldRangedMonthly.propTypes = {
   isFilter: PropTypes.bool,
@@ -113,6 +115,7 @@ ToolbarFieldRangedMonthly.propTypes = {
       selected: PropTypes.bool
     })
   ),
+  position: PropTypes.string,
   t: PropTypes.func,
   useOnSelect: PropTypes.func,
   useProductGraphTallyQuery: PropTypes.func
@@ -122,11 +125,12 @@ ToolbarFieldRangedMonthly.propTypes = {
  * Default props.
  *
  * @type {{useOnSelect: Function, useProductGraphTallyQuery: Function, t: Function, isFilter: boolean,
- *     options: Array}}
+ *     options: Array, position: string}}
  */
 ToolbarFieldRangedMonthly.defaultProps = {
   isFilter: false,
   options: toolbarFieldOptions,
+  position: SelectPosition.left,
   t: translate,
   useOnSelect,
   useProductGraphTallyQuery