feat: 'Only Mine' toggle for execution tasks list [WIP]

Signed-off-by: olga-union <[email protected]>
flyteorg · Mar 21, 2022 · 35ee452 · 35ee452
1 parent 5732fc1
commit 35ee452
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 100 deletions.
diff --git a/src/components/Entities/EntityExecutions.tsx b/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}>

diff --git a/src/components/Entities/EntityExecutionsBarChart.tsx b/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">

diff --git a/src/components/Executions/ExecutionFilters.tsx b/src/components/Executions/ExecutionFilters.tsx
@@ -57,7 +57,19 @@ export const ExecutionFilters: React.FC<{
   clearCharts?: () => void;
   showArchived?: boolean;
   onArchiveFilterChange?: (showArchievedItems: boolean) => void;
-}> = ({ filters, chartIds, clearCharts, showArchived, onArchiveFilterChange }) => {
+  onlyMyExecutionsFilterState?: {
+    onlyMyExecutionsValue: boolean;
+    isFilterDisabled: boolean;
+    onOnlyMyExecutionsFilterChange: (filterOnlyMyExecutions: boolean) => void;
+  };
+}> = ({
+  filters,
+  chartIds,
+  clearCharts,
+  showArchived,
+  onArchiveFilterChange,
+  onlyMyExecutionsFilterState,
+}) => {
   const styles = useStyles();
 
   filters = filters.map((filter) => {
@@ -113,12 +125,29 @@ export const ExecutionFilters: React.FC<{
           key="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)}
               />
             }

diff --git a/src/components/Executions/filters/types.ts b/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;

diff --git a/src/components/Executions/filters/useCurrentUserOnlyFilterState.ts b/src/components/Executions/filters/useCurrentUserOnlyFilterState.ts
diff --git a/src/components/Executions/filters/useExecutionFiltersState.ts b/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(),
   ]);
 }
 

diff --git a/src/components/Executions/filters/useOnlyMyExecutionsFilterState.ts b/src/components/Executions/filters/useOnlyMyExecutionsFilterState.ts
@@ -0,0 +1,43 @@
+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;
+}
+
+/**
+ *  Allows to filter executions by Current User Id
+ */
+export function useOnlyMyExecutionsFilterState(
+  isFilterDisabled?: boolean,
+  initialState?: boolean,
+): OnlyMyExecutionsFilterState {
+  const profile = useUserProfile();
+  const userId = profile.value?.subject ? profile.value.subject : '';
+  const [onlyMyExecutionsValue, setOnlyMyExecutionsValue] = useState<boolean>(
+    initialState ?? 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,
+  };
+}
diff --git a/src/components/Project/ProjectExecutions.tsx b/src/components/Project/ProjectExecutions.tsx
@@ -22,6 +22,7 @@ import {
 import classNames from 'classnames';
 import { useWorkflowExecutions } from 'components/hooks/useWorkflowExecutions';
 import { useExecutionShowArchivedState } from 'components/Executions/filters/useExecutionArchiveState';
+import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
 import { WaitForData } from 'components/common/WaitForData';
 import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
@@ -66,8 +67,13 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
   const styles = useStyles();
   const archivedFilter = useExecutionShowArchivedState();
   const filtersState = useWorkflowExecutionFiltersState();
+  const onlyMyExecutionsFilterState = useOnlyMyExecutionsFilterState();
 
-  const allFilters = compact([...filtersState.appliedFilters, archivedFilter.getFilter()]);
+  const allFilters = compact([
+    ...filtersState.appliedFilters,
+    archivedFilter.getFilter(),
+    onlyMyExecutionsFilterState.getFilter(),
+  ]);
   const config = {
     sort: defaultSort,
     filter: allFilters,
@@ -131,36 +137,31 @@ export const ProjectExecutions: React.FC<ProjectExecutionsProps> = ({
     />
   );
 
-  /** Don't render component until finish fetching user profile */
-  const lastIndex = filtersState.filters.length - 1;
-  if (filtersState.filters[lastIndex].status === fetchStates.LOADED) {
-    return (
-      <div className={styles.container}>
-        <Typography className={classNames(styles.header, styles.marginTop)} variant="h6">
-          Last 100 Executions in the Project
-        </Typography>
-        <div className={styles.chartContainer}>
-          <WaitForData {...last100Executions}>
-            <BarChart
-              chartIds={[]}
-              data={getExecutionTimeData(last100Executions.value)}
-              startDate={getStartExecutionTime(last100Executions.value)}
-              onClickItem={handleBarChartItemClick}
-            />
-          </WaitForData>
-        </div>
-        <Typography className={styles.header} variant="h6">
-          All Executions in the Project
-        </Typography>
-        <ExecutionFilters
-          {...filtersState}
-          showArchived={archivedFilter.showArchived}
-          onArchiveFilterChange={archivedFilter.setShowArchived}
-        />
-        <ErrorBoundary>{content}</ErrorBoundary>
+  return (
+    <div className={styles.container}>
+      <Typography className={classNames(styles.header, styles.marginTop)} variant="h6">
+        Last 100 Executions in the Project
+      </Typography>
+      <div className={styles.chartContainer}>
+        <WaitForData {...last100Executions}>
+          <BarChart
+            chartIds={[]}
+            data={getExecutionTimeData(last100Executions.value)}
+            startDate={getStartExecutionTime(last100Executions.value)}
+            onClickItem={handleBarChartItemClick}
+          />
+        </WaitForData>
       </div>
-    );
-  } else {
-    return null;
-  }
+      <Typography className={styles.header} variant="h6">
+        All Executions in the Project
+      </Typography>
+      <ExecutionFilters
+        {...filtersState}
+        showArchived={archivedFilter.showArchived}
+        onArchiveFilterChange={archivedFilter.setShowArchived}
+        onlyMyExecutionsFilterState={onlyMyExecutionsFilterState}
+      />
+      <ErrorBoundary>{content}</ErrorBoundary>
+    </div>
+  );
 };
diff --git a/src/components/Project/test/ProjectExecutions.test.tsx b/src/components/Project/test/ProjectExecutions.test.tsx
@@ -35,7 +35,7 @@ describe('ProjectExecutions', () => {
   let mockGetUserProfile: jest.Mock<ReturnType<typeof getUserProfile>>;
 
   const sampleUserProfile: UserProfile = {
-    sub: 'sub',
+    subject: 'subject',
   } as UserProfile;
 
   const defaultQueryParams1 = {
@@ -44,7 +44,7 @@ describe('ProjectExecutions', () => {
   };
 
   const defaultQueryParams2 = {
-    filters: 'eq(user,sub)',
+    filters: 'eq(user,subject)',
     [sortQueryKeys.direction]: SortDirection[SortDirection.DESCENDING],
     [sortQueryKeys.key]: executionSortFields.createdAt,
   };

diff --git a/src/models/Common/types.ts b/src/models/Common/types.ts
@@ -184,7 +184,7 @@ export type IdentifierScope =
   | Identifier;
 
 export interface UserProfile {
-  sub: string;
+  subject: string;
   name: string;
   preferredUsername: string;
   givenName: string;