feat: 'Only Mine' toggle for execution tasks list (#343)

Signed-off-by: Olga Nad <[email protected]>

package.json

@@ -102,6 +102,7 @@
         "@storybook/testing-library": "^0.0.9",
         "@testing-library/jest-dom": "^5.5.0",
         "@testing-library/react": "^10.0.3",
+        "@testing-library/react-hooks": "^7.0.2",
         "@types/cheerio": "^0.22.2",
         "@types/compression-webpack-plugin": "^9.1.1",
         "@types/d3-shape": "^1.2.6",

src/components/Entities/EntityExecutions.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
-import { fetchStates } from 'components/hooks/types';
 import { WaitForData } from 'components/common/WaitForData';
 import { ExecutionFilters } from 'components/Executions/ExecutionFilters';
 import { useExecutionShowArchivedState } from 'components/Executions/filters/useExecutionArchiveState';
@@ -14,6 +13,7 @@ import { SortDirection } from 'models/AdminEntity/types';
 import { ResourceIdentifier } from 'models/Common/types';
 import { executionSortFields } from 'models/Execution/constants';
 import { compact } from 'lodash';
+import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
 import { executionFilterGenerator } from './generators';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -42,6 +42,7 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
   const styles = useStyles();
   const filtersState = useWorkflowExecutionFiltersState();
   const archivedFilter = useExecutionShowArchivedState();
+  const onlyMyExecutionsFilterState = useOnlyMyExecutionsFilterState({});
 
   const sort = {
     key: executionSortFields.createdAt,
@@ -57,7 +58,9 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
     ...baseFilters,
     ...filtersState.appliedFilters,
     archivedFilter.getFilter(),
+    onlyMyExecutionsFilterState.getFilter(),
   ]);
+
   const executions = useWorkflowExecutions(
     { domain, project },
     {
@@ -71,12 +74,6 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
     executions.value = executions.value.filter((item) => chartIds.includes(item.id.name));
   }
 
-  /** Don't render component until finish fetching user profile */
-  const lastIndex = filtersState.filters.length - 1;
-  if (filtersState.filters[lastIndex].status !== fetchStates.LOADED) {
-    return null;
-  }
-
   return (
     <>
       <Typography className={styles.header} variant="h6">
@@ -89,6 +86,7 @@ export const EntityExecutions: React.FC<EntityExecutionsProps> = ({
           clearCharts={clearCharts}
           showArchived={archivedFilter.showArchived}
           onArchiveFilterChange={archivedFilter.setShowArchived}
+          onlyMyExecutionsFilterState={onlyMyExecutionsFilterState}
         />
       </div>
       <WaitForData {...executions}>

src/components/Entities/EntityExecutionsBarChart.tsx

@@ -121,12 +121,6 @@ export const EntityExecutionsBarChart: React.FC<EntityExecutionsBarChartProps> =
     [onToggle],
   );
 
-  /** Don't render component until finish fetching user profile */
-  const lastIndex = filtersState.filters.length - 1;
-  if (filtersState.filters[lastIndex].status !== fetchStates.LOADED) {
-    return null;
-  }
-
   return (
     <WaitForData {...executions}>
       <Typography className={styles.header} variant="h6">

src/components/Executions/ExecutionFilters.tsx

@@ -31,6 +31,21 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+interface OnlyMyExecutionsFilterState {
+  onlyMyExecutionsValue: boolean;
+  isFilterDisabled: boolean;
+  onOnlyMyExecutionsFilterChange: (filterOnlyMyExecutions: boolean) => void;
+}
+
+export interface ExecutionFiltersProps {
+  filters: (FilterState | BooleanFilterState)[];
+  chartIds?: string[];
+  clearCharts?: () => void;
+  showArchived?: boolean;
+  onArchiveFilterChange?: (showArchievedItems: boolean) => void;
+  onlyMyExecutionsFilterState?: OnlyMyExecutionsFilterState;
+}
+
 const RenderFilter: React.FC<{ filter: FilterState }> = ({ filter }) => {
   const searchFilterState = filter as SearchFilterState;
   switch (filter.type) {
@@ -51,13 +66,14 @@ const RenderFilter: React.FC<{ filter: FilterState }> = ({ filter }) => {
  * This allows for the consuming code to have direct access to the
  * current filters without relying on complicated callback arrangements
  */
-export const ExecutionFilters: React.FC<{
-  filters: (FilterState | BooleanFilterState)[];
-  chartIds?: string[];
-  clearCharts?: () => void;
-  showArchived?: boolean;
-  onArchiveFilterChange?: (showArchievedItems: boolean) => void;
-}> = ({ filters, chartIds, clearCharts, showArchived, onArchiveFilterChange }) => {
+export const ExecutionFilters: React.FC<ExecutionFiltersProps> = ({
+  filters,
+  chartIds,
+  clearCharts,
+  showArchived,
+  onArchiveFilterChange,
+  onlyMyExecutionsFilterState,
+}) => {
   const styles = useStyles();
 
   filters = filters.map((filter) => {
@@ -111,14 +127,32 @@ export const ExecutionFilters: React.FC<{
           buttonText="Clear Manually Selected Executions"
           onReset={clearCharts}
           key="charts"
+          data-testId="clear-charts"
         />
       )}
+      {!!onlyMyExecutionsFilterState && (
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={onlyMyExecutionsFilterState.onlyMyExecutionsValue}
+                disabled={onlyMyExecutionsFilterState.isFilterDisabled}
+                onChange={(_, checked) =>
+                  onlyMyExecutionsFilterState.onOnlyMyExecutionsFilterChange(checked)
+                }
+              />
+            }
+            className={styles.checkbox}
+            label="Only my executions"
+          />
+        </FormGroup>
+      )}
       {!!onArchiveFilterChange && (
         <FormGroup>
           <FormControlLabel
             control={
               <Checkbox
-                value={showArchived}
+                checked={showArchived}
                 onChange={(_, checked) => onArchiveFilterChange(checked)}
               />
             }

src/components/Executions/__stories__/ExecutionFilters.stories.tsx

@@ -29,6 +29,11 @@ stories.add('Workflow executions - all', () => (
     clearCharts={action('clearCharts')}
     showArchived={false}
     onArchiveFilterChange={action('onArchiveFilterChange')}
+    onlyMyExecutionsFilterState={{
+      isFilterDisabled: false,
+      onlyMyExecutionsValue: false,
+      onOnlyMyExecutionsFilterChange: action('onOnlyMyExecutionsFilterChange'),
+    }}
   />
 ));
 stories.add('Workflow executions - minimal', () => (

src/components/Executions/filters/types.ts

@@ -22,10 +22,8 @@ export type FilterStateType = 'single' | 'multi' | 'search' | 'boolean';
 export interface FilterState {
   active: boolean;
   button: FilterButtonState;
-  hidden?: boolean;
   label: string;
   type: FilterStateType;
-  status?: string;
   getFilter: () => FilterOperation[];
   onReset: () => void;
   onChange?: (value) => void;

src/components/Executions/filters/useExecutionFiltersState.ts

@@ -11,7 +11,6 @@ import { FilterState } from './types';
 import { useMultiFilterState } from './useMultiFilterState';
 import { useSearchFilterState } from './useSearchFilterState';
 import { useSingleFilterState } from './useSingleFilterState';
-import { useCurrentUserOnlyFilterState } from './useCurrentUserOnlyFilterState';
 
 export interface ExecutionFiltersState {
   appliedFilters: FilterOperation[];
@@ -57,7 +56,6 @@ export function useWorkflowExecutionFiltersState() {
       label: filterLabels.duration,
       queryStateKey: 'duration',
     }),
-    useCurrentUserOnlyFilterState(),
   ]);
 }
 

src/components/Executions/filters/useOnlyMyExecutionsFilterState.ts

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { FilterOperation, FilterOperationName } from 'models/AdminEntity/types';
+import { useUserProfile } from 'components/hooks/useUserProfile';
+
+interface OnlyMyExecutionsFilterState {
+  onlyMyExecutionsValue: boolean;
+  isFilterDisabled: boolean;
+  onOnlyMyExecutionsFilterChange: (newValue: boolean) => void;
+  getFilter: () => FilterOperation | null;
+}
+
+interface OnlyMyExecutionsFilterStateProps {
+  isFilterDisabled?: boolean;
+  initialValue?: boolean;
+}
+
+/**
+ *  Allows to filter executions by Current User Id
+ */
+export function useOnlyMyExecutionsFilterState({
+  isFilterDisabled,
+  initialValue,
+}: OnlyMyExecutionsFilterStateProps): OnlyMyExecutionsFilterState {
+  const profile = useUserProfile();
+  const userId = profile.value?.subject ? profile.value.subject : '';
+  const [onlyMyExecutionsValue, setOnlyMyExecutionsValue] = useState<boolean>(
+    initialValue ?? false,
+  );
+
+  const getFilter = (): FilterOperation | null => {
+    if (!onlyMyExecutionsValue) {
+      return null;
+    }
+
+    return {
+      key: 'user',
+      value: userId,
+      operation: FilterOperationName.EQ,
+    };
+  };
+
+  return {
+    onlyMyExecutionsValue,
+    isFilterDisabled: isFilterDisabled ?? false,
+    onOnlyMyExecutionsFilterChange: setOnlyMyExecutionsValue,
+    getFilter,
+  };
+}