chore: fix tests

Signed-off-by: Nastya Rusina <[email protected]>

src/basics/FeatureFlags/FeatureFlags.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
 
 import { FeatureFlagsProvider, useFeatureFlag } from '.';
 import { FeatureFlag } from './defaultConfig';
@@ -46,7 +46,7 @@ describe('FeatureFlags', () => {
             window.getFeatureFlag(FeatureFlag.TestFlagUndefined)
         ).toBeFalsy();
 
-        window.setFeatureFlag(FeatureFlag.TestFlagUndefined, true);
+        act(() => window.setFeatureFlag(FeatureFlag.TestFlagUndefined, true));
         await waitFor(() => {
             // check that flag cghanged value
             expect(
@@ -60,7 +60,7 @@ describe('FeatureFlags', () => {
         expect(screen.getByText(/Disabled/i)).toBeTruthy();
 
         // Enable flag
-        window.setFeatureFlag(FeatureFlag.TestFlagUndefined, true);
+        act(() => window.setFeatureFlag(FeatureFlag.TestFlagUndefined, true));
         await waitFor(() => {
             // check that component was updated accordingly
             expect(screen.getByText(/Enabled/i)).toBeTruthy();

src/components/Entities/EntityExecutions.tsx

@@ -13,6 +13,7 @@ import { SortDirection } from 'models/AdminEntity/types';
 import { ResourceIdentifier } from 'models/Common/types';
 import { executionSortFields } from 'models/Execution/constants';
 import { executionFilterGenerator } from './generators';
+import { compact } from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) => ({
     filtersContainer: {
@@ -39,11 +40,7 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
     const { domain, project, resourceType } = id;
     const styles = useStyles();
     const filtersState = useWorkflowExecutionFiltersState();
-    const {
-        showArchived,
-        setShowArchived,
-        getFilter: getAcrhiveFilter
-    } = useExecutionShowArchivedState();
+    const archivedFilter = useExecutionShowArchivedState();
 
     const sort = {
         key: executionSortFields.createdAt,
@@ -55,15 +52,16 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
         [id, resourceType]
     );
 
+    const allFilters = compact([
+        ...baseFilters,
+        ...filtersState.appliedFilters,
+        archivedFilter.getFilter()
+    ]);
     const executions = useWorkflowExecutions(
         { domain, project },
         {
             sort,
-            filter: [
-                ...baseFilters,
-                ...filtersState.appliedFilters,
-                getAcrhiveFilter()
-            ],
+            filter: allFilters,
             limit: 100
         }
     );
@@ -75,7 +73,8 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
     }
 
     /** Don't render component until finish fetching user profile */
-    if (filtersState.filters[4].status !== 'LOADED') {
+    const lastIndex = filtersState.filters.length - 1;
+    if (filtersState.filters[lastIndex].status !== 'LOADED') {
         return null;
     }
 
@@ -89,8 +88,8 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
                     {...filtersState}
                     chartIds={chartIds}
                     clearCharts={clearCharts}
-                    showArchived={showArchived}
-                    onArchiveFilterChange={setShowArchived}
+                    showArchived={archivedFilter.showArchived}
+                    onArchiveFilterChange={archivedFilter.setShowArchived}
                 />
             </div>
             <WaitForData {...executions}>

src/components/Entities/EntityVersions.tsx

@@ -1,7 +1,6 @@
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { WaitForData } from 'components/common/WaitForData';
-import { useWorkflowExecutionFiltersState } from 'components/Executions/filters/useExecutionFiltersState';
 import { WorkflowVersionsTable } from 'components/Executions/Tables/WorkflowVersionsTable';
 import { isLoadingState } from 'components/hooks/fetchMachine';
 import { useWorkflowVersions } from 'components/hooks/useWorkflowVersions';

src/components/Executions/filters/useExecutionArchiveState.ts

@@ -5,7 +5,7 @@ import { ExecutionState } from 'models/Execution/enums';
 interface ArchiveFilterState {
     showArchived: boolean;
     setShowArchived: (newValue: boolean) => void;
-    getFilter: () => FilterOperation;
+    getFilter: () => FilterOperation | null;
 }
 
 /**
@@ -14,13 +14,17 @@ interface ArchiveFilterState {
 export function useExecutionShowArchivedState(): ArchiveFilterState {
     const [showArchived, setShowArchived] = useState(false);
 
-    const getFilter = (): FilterOperation => {
+    // By default all values are returned with EXECUTION_ACTIVE state,
+    // so filter need to be applied only for ARCHIVED executions
+    const getFilter = (): FilterOperation | null => {
+        if (!showArchived) {
+            return null;
+        }
+
         return {
             key: 'state',
             operation: FilterOperationName.EQ,
-            value: showArchived
-                ? ExecutionState.EXECUTION_ARCHIVED
-                : ExecutionState.EXECUTION_ACTIVE
+            value: ExecutionState.EXECUTION_ARCHIVED
         };
     };
 

src/components/Project/ProjectExecutions.tsx

@@ -25,6 +25,7 @@ import { useExecutionShowArchivedState } from 'components/Executions/filters/use
 import { WaitForData } from 'components/common/WaitForData';
 import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
+import { compact } from 'lodash';
 
 const useStyles = makeStyles((theme: Theme) => ({
     container: {
@@ -62,15 +63,16 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
     projectId: project
 }) => {
     const styles = useStyles();
-    const filtersState = useWorkflowExecutionFiltersState();
     const archivedFilter = useExecutionShowArchivedState();
+    const filtersState = useWorkflowExecutionFiltersState();
 
-    const filters = React.useMemo(() => {
-        return [...filtersState.appliedFilters, archivedFilter.getFilter()];
-    }, [filtersState, archivedFilter]);
+    const allFilters = compact([
+        ...filtersState.appliedFilters,
+        archivedFilter.getFilter()
+    ]);
     const config = {
         sort: defaultSort,
-        filter: filters
+        filter: allFilters
     };
 
     // Remount the table whenever we change project/domain/filters to ensure
@@ -80,9 +82,9 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
             getCacheKey({
                 domain,
                 project,
-                filters: filters
+                filters: allFilters
             }),
-        [domain, project, filters]
+        [domain, project, allFilters]
     );
 
     const query = useInfiniteQuery({
@@ -106,11 +108,12 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
         history.push(Routes.ExecutionDetails.makeUrl(item.metadata));
     }, []);
 
+    // to show only in bar chart view
     const last100Executions = useWorkflowExecutions(
         { domain, project },
         {
             sort: defaultSort,
-            filter: filters,
+            filter: allFilters,
             limit: 100
         }
     );
@@ -138,7 +141,8 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
     );
 
     /** Don't render component until finish fetching user profile */
-    if (filtersState.filters[4].status === 'LOADED') {
+    const filterLength = filtersState.filters.length;
+    if (filtersState.filters[filterLength - 1].status === 'LOADED') {
         return (
             <div className={styles.container}>
                 <Typography

src/components/Project/test/ProjectExecutions.test.tsx

@@ -26,6 +26,9 @@ import { getUserProfile } from 'models/Common/api';
 import { UserProfile } from 'models/Common/types';
 
 jest.mock('components/Executions/Tables/WorkflowExecutionsTable');
+jest.mock('notistack', () => ({
+    useSnackbar: () => ({ enqueueSnackbar: jest.fn() })
+}));
 
 describe('ProjectExecutions', () => {
     let basicPythonFixture: ReturnType<typeof basicPythonWorkflow.generate>;