Instead of hiding, disable global filter (#1133)

src/js/App/GlobalFilter/GlobalFilter.js

@@ -20,12 +20,13 @@ const GlobalFilter = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [token, setToken] = useState();
   const dispatch = useDispatch();
-  const { isLoaded, count, total, sapCount } = useSelector(
-    ({ globalFilter: { tags, sid, workloads } }) => ({
+  const { isLoaded, count, total, sapCount, isDisabled } = useSelector(
+    ({ globalFilter: { tags, sid, workloads, globalFilterHidden } }) => ({
       isLoaded: tags?.isLoaded && sid?.isLoaded && workloads?.isLoaded,
       count: tags?.count || 0 + sid?.count || 0 + workloads?.count || 0,
       total: tags?.total || 0 + sid?.total || 0 + workloads?.total || 0,
       sapCount: workloads?.hasSap,
+      isDisabled: globalFilterHidden,
     }),
     shallowEqual
   );
@@ -115,14 +116,21 @@ const GlobalFilter = () => {
     1
   );
   chips?.splice(0, 0, ...(workloadsChip || []));
-  const GroupFilterWrapper = isAllowed() ? Fragment : Tooltip;
+  const GroupFilterWrapper = !isAllowed() || isDisabled ? Tooltip : Fragment;
   return (
     <Fragment>
       <Split hasGutter className="ins-c-chrome__global-filter">
         <SplitItem>
           {userLoaded && isAllowed() !== undefined ? (
-            <GroupFilterWrapper position="right" content="You do not have the required inventory permissions to perform this action">
-              <GroupFilter {...filter} isDisabled={!isAllowed()} placeholder="Filter results" />
+            <GroupFilterWrapper
+              {...((!isAllowed() || isDisabled) && {
+                content: !isAllowed()
+                  ? 'You do not have the required inventory permissions to perform this action'
+                  : 'Global filter is not applicable for this page',
+                position: 'right',
+              })}
+            >
+              <GroupFilter {...filter} isDisabled={!isAllowed() || isDisabled} placeholder="Filter results" />
             </GroupFilterWrapper>
           ) : (
             <Skeleton size={SkeletonSize.xl} />
@@ -135,16 +143,22 @@ const GlobalFilter = () => {
                 {chips.map(({ category, chips }, key) => (
                   <ChipGroup key={key} categoryName={category} className={category === 'Workloads' ? 'ins-m-sticky' : ''}>
                     {chips?.map(({ key: chipName, tagKey, value }, chipKey) => (
-                      <Chip key={chipKey} onClick={() => setValue(() => updateSelected(selectedTags, category, chipName, value, false))}>
+                      <Chip
+                        key={chipKey}
+                        onClick={() => setValue(() => updateSelected(selectedTags, category, chipName, value, false))}
+                        isReadOnly={isDisabled}
+                      >
                         {tagKey}
                         {value ? `=${value}` : ''}
                       </Chip>
                     ))}
                   </ChipGroup>
                 ))}
-                <Button variant="link" onClick={() => setValue(() => ({}))}>
-                  Clear filters
-                </Button>
+                {!isDisabled && (
+                  <Button variant="link" onClick={() => setValue(() => ({}))}>
+                    Clear filters
+                  </Button>
+                )}
               </Fragment>
             )}
           </SplitItem>

src/js/App/GlobalFilter/constants.js

@@ -116,7 +116,7 @@ export const generateFilter = async () => {
           [tag?.key]: {
             group: omit(workloads[0], 'tags'),
             isSelected: true,
-            item: {},
+            item: { tagKey: tag?.key },
           },
         }
       : data.Workloads;

src/js/App/RootApp.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import GlobalFilter from './GlobalFilter';
 
-const RootApp = ({ activeApp, activeLocation, appId, pageAction, pageObjectId, globalFilterHidden }) => {
+const RootApp = ({ activeApp, activeLocation, appId, pageAction, pageObjectId, globalFilterRemoved }) => {
   const isGlobalFilterEnabled =
-    (!globalFilterHidden && activeLocation === 'insights') || Boolean(localStorage.getItem('chrome:experimental:global-filter'));
+    (!globalFilterRemoved && activeLocation === 'insights') || Boolean(localStorage.getItem('chrome:experimental:global-filter'));
   return (
     <Fragment>
       <div
@@ -49,11 +49,11 @@ RootApp.propTypes = {
   activeLocation: PropTypes.string,
   pageAction: PropTypes.string,
   pageObjectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  globalFilterHidden: PropTypes.bool,
+  globalFilterRemoved: PropTypes.bool,
 };
 
-function stateToProps({ chrome: { activeApp, activeLocation, appId, pageAction, pageObjectId }, globalFilter: { globalFilterHidden } = {} }) {
-  return { activeApp, activeLocation, appId, pageAction, pageObjectId, globalFilterHidden };
+function stateToProps({ chrome: { activeApp, activeLocation, appId, pageAction, pageObjectId }, globalFilter: { globalFilterRemoved } = {} }) {
+  return { activeApp, activeLocation, appId, pageAction, pageObjectId, globalFilterRemoved };
 }
 
 export default connect(stateToProps, null)(RootApp);

src/js/chrome/entry.js

@@ -1,7 +1,7 @@
 import React, { lazy, Suspense, Fragment } from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
-import { globalFilterScope, toggleGlobalFilter } from '../redux/actions';
+import { globalFilterScope, toggleGlobalFilter, removeGlobalFilter } from '../redux/actions';
 import { spinUpStore } from '../redux-config';
 import * as actionTypes from '../redux/action-types';
 import loadInventory from '../inventory/index';
@@ -61,6 +61,7 @@ export function chromeInit(navResolver) {
     appAction,
     appObjectId,
     hideGlobalFilter: (isHidden) => store.dispatch(toggleGlobalFilter(isHidden)),
+    removeGlobalFilter: (isHidden) => store.dispatch(removeGlobalFilter(isHidden)),
     globalFilterScope: (scope) => store.dispatch(globalFilterScope(scope)),
     mapGlobalFilter: flatTags,
     appNavClick: ({ secondaryNav, ...payload }) => {

src/js/redux/action-types.js

@@ -17,3 +17,4 @@ export const CHROME_GET_ALL_WORKLOADS = '@@chrome/get-all-workloads';
 export const GLOBAL_FILTER_SCOPE = '@@chrome/set-global-filter-scope';
 export const GLOBAL_FILTER_UPDATE = '@@chrome/global-filter-update';
 export const GLOBAL_FILTER_TOGGLE = '@@chrome/global-filter-toggle';
+export const GLOBAL_FILTER_REMOVE = '@@chrome/global-filter-remove';

src/js/redux/actions.js

@@ -101,3 +101,10 @@ export function toggleGlobalFilter(isHidden = true) {
     payload: { isHidden },
   };
 }
+
+export function removeGlobalFilter(isHidden = true) {
+  return {
+    type: actionTypes.GLOBAL_FILTER_REMOVE,
+    payload: { isHidden },
+  };
+}

src/js/redux/globalFilterReducers.js

@@ -107,3 +107,10 @@ export function onGetAllWorkloadsPending(state) {
     },
   };
 }
+
+export function onGlobalFilterRemove(state, { payload }) {
+  return {
+    ...state,
+    globalFilterRemoved: payload.isHidden,
+  };
+}

src/js/redux/index.js

@@ -21,6 +21,7 @@ import {
   onGetAllSIDsPending,
   onGetAllWorkloads,
   onGetAllWorkloadsPending,
+  onGlobalFilterRemove,
 } from './globalFilterReducers';
 import {
   CLICK_ACTION,
@@ -38,6 +39,7 @@ import {
   GLOBAL_FILTER_SCOPE,
   GLOBAL_FILTER_TOGGLE,
   GLOBAL_FILTER_UPDATE,
+  GLOBAL_FILTER_REMOVE,
 } from './action-types';
 
 const reducers = {
@@ -61,6 +63,7 @@ const globalFilter = {
   [`${CHROME_GET_ALL_WORKLOADS}_PENDING`]: onGetAllWorkloadsPending,
   [GLOBAL_FILTER_SCOPE]: onSetGlobalFilterScope,
   [GLOBAL_FILTER_TOGGLE]: onGlobalFilterToggle,
+  [GLOBAL_FILTER_REMOVE]: onGlobalFilterRemove,
   [GLOBAL_FILTER_UPDATE]: onTagSelect,
 };