Dashboard region (#600)

* engagement filter redo

* test related

* fix issue with toolbar chips

* fix space error in Engagement search box. Fix cypress spec 2

* fix issue when clicking on engagement status links after original load

* lint failure avoidance

* fix page reload filter hold

* test

* add region filter. update patternfly

* update packges

* test awaits to reduce test noise

Author: mcanoy

src/components/engagement_categories/__tests__/engagement_editable_categories.spec.tsx

@@ -19,7 +19,7 @@ describe('Engagement Editable Categories', () => {
     const onUpdateField = jest.fn();
     const onSave = jest.fn();
     let view: RenderResult;
-    act(async () => {
+    await act(async () => {
       view = render(
         <TestStateWrapper>
           <FeatureToggles features={['writer', 'reader', 'engagementWriter']}>

src/components/engagement_data_cards/__tests__/data_cards.spec.tsx

@@ -12,7 +12,7 @@ import { act } from 'react-dom/test-utils';
 
 describe('Engagement summary card', () => {
   test('matches snapshot', async () => {
-    act(async () => {
+    await act(async () => {
       const rendered = render(
         <MemoryRouter>
           <TestStateWrapper>
@@ -28,7 +28,7 @@ describe('Engagement summary card', () => {
 
 describe('OpenShift Cluster Summary', () => {
   test('matches snapshot', async () => {
-    act(async () => {
+    await act(async () => {
       const rendered = render(
         <TestStateWrapper>
           <HostingEnvironmentCard />
@@ -41,7 +41,7 @@ describe('OpenShift Cluster Summary', () => {
 
 describe('Point of Contact Card', () => {
   test('matches snapshot', async () => {
-    act(async () => {
+    await act(async () => {
       const rendered = render(
         <TestStateWrapper>
           <PointOfContactCard />
@@ -54,7 +54,7 @@ describe('Point of Contact Card', () => {
 
 describe('Edit button', () => {
   test('should not be rendered for reader role', async () => {
-    act(async () => {
+    await act(async () => {
       const Component = () => (
         <MemoryRouter>
           <FeatureToggles features={[APP_FEATURES.reader]}>

src/components/engagement_data_cards/__tests__/timeline_card.spec.tsx

@@ -63,7 +63,7 @@ describe('Engagement Artifact Card', () => {
     expect(requestOpen).toHaveBeenCalled();
   });
   test('clicking the edit artifact dropdown item opens the edit artifact modal', async () => {
-    act(async () => {
+    await act(async () => {
       const requestOpen = jest.fn();
       render(
         <FeatureToggleContext.Provider

src/components/engagement_data_cards/engagement_artifact_card/__tests__/engagement_timeline_card.spec.tsx

@@ -27,7 +27,7 @@ describe('Engagement timeline card', () => {
   test('by default, when creating a new artifact, the first artifact type in the array of artifact types is selected', async () => {
     let view: RenderResult;
     const onUpdateField = jest.fn();
-    act(async () => {
+    await act(async () => {
       view = render(
         <TestStateWrapper>
           <EngagementContext.Provider

src/components/engagement_edit_modals/__tests__/engagement_summary_edit_modal.spec.tsx

@@ -84,7 +84,7 @@ describe('timezone select', () => {
     });
   });
   test('can toggle timezone dropdown', async () => {
-    act(async () => {
+    await act(async () => {
       const spy = jest.fn();
       const view = render(<Component spy={spy} />);
       const dropdown = await view.findByTestId('timezone-select');

src/components/feature/__tests__/feature.spec.tsx

@@ -7,7 +7,7 @@ import { TestStateWrapper } from '../../../common/test_state_wrapper';
 
 describe('Feature component', () => {
   test('should render inactive component if role is not present', async () => {
-    act(async () => {
+    await act(async () => {
       function Wrapper({ children }) {
         return (
           <TestStateWrapper>
@@ -30,7 +30,7 @@ describe('Feature component', () => {
   });
 
   test('should render the active component when the role is present', async () => {
-    act(async () => {
+    await act(async () => {
       function Wrapper({ children }) {
         return (
           <TestStateWrapper>

src/components/launch_alert_banner/__tests__/launch_alert_banner.spec.tsx

@@ -27,7 +27,7 @@ describe('Engagement launch alert banner ', () => {
 
   test('shows the delete button for launchable engagements', async () => {
     let view: RenderResult;
-    act(async () => {
+    await act(async () => {
       view = getLaunchBar();
     });
     expect(await view.findByTestId('delete-button')).toBeDefined();
@@ -48,7 +48,7 @@ describe('Engagement launch alert banner ', () => {
       );
 
     let view: RenderResult;
-    act(async () => {
+    await act(async () => {
       view = getLaunchBarForNonLaunchableEngagement();
     });
     expect(view.queryByTestId('delete-button')).toBeNull();

src/routes/create_new_engagement/__tests__/create_new_engagement.spec.tsx

@@ -7,7 +7,6 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { APP_FEATURES } from '../../../common/app_features';
 import { CreateNewEngagement } from '../create_new_engagement';
 import { Engagement } from '../../../schemas/engagement';
-import { EngagementFormConfig } from '../../../schemas/engagement_config';
 import { FeatureToggles } from '../../../context/feature_context/feature_toggles';
 import { MemoryRouter } from 'react-router';
 import React from 'react';

src/routes/dashboard/index.tsx

@@ -33,7 +33,7 @@ import { useCategories } from '../../hooks/use_categories';
 import { useEnabledUsers } from '../../hooks/use_enabled_users';
 import { useEngagementCollection } from '../../hooks/engagement_collection_hook';
 import { useEngagementFormConfig } from '../../context/engagement_config_context/engagement_config_hook';
-import { useHistory } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import { useServiceProviders } from '../../context/service_provider_context/service_provider_context';
 import { useSummaryCount } from '../../hooks/use_summary_count';
 import { useVersion } from '../../context/version_context/version_context';
@@ -60,6 +60,9 @@ export function Dashboard() {
     }
   }, [versionContext]);
 
+  const history = useHistory();
+  const location = useLocation();
+
   const {
     categoryService,
     engagementService,
@@ -69,17 +72,25 @@ export function Dashboard() {
     summaryCountService,
   } = useServiceProviders();
   const [isRegionSelectOpen, setIsRegionSelectOpen] = useState(false);
-  const [selectedRegions, setSelectedRegions] = useState<string[]>([]);
+  const [selectedRegions, setSelectedRegions] = useState(() => {
+    const search = new URLSearchParams(location.search);
+    const initialState = search.get('regions') ? search.get('regions').split(',') : [];
+    return initialState;
+  });
   const { engagementFormConfig } = useEngagementFormConfig(engagementService);
   const { getEngagements } = useEngagementCollection({
     engagementService,
   });
 
-  const history = useHistory();
   useEffect(() => {
     getEngagements({ perPage: 10000, pageNumber: 1, exclude: ['commits'] });
   }, [getEngagements]);
 
+  useEffect(() => {
+    const params = selectedRegions.length === 0 ? '' : `?regions=${selectedRegions.join(',')}`;
+    history.replace(`${location.pathname}${params}`)
+  }, [selectedRegions, history, location.pathname]);
+
   const [dateFilter, setDateFilter] = useState<DateFilter | undefined>(
     undefined
   );