feat: 'Only Mine' toggle for execution tasks list

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/test/useOnlyMyExecutionsFilterState.test.ts

@@ -0,0 +1,35 @@
+import { loadedFetchable } from 'components/hooks/__mocks__/fetchableData';
+import { useUserProfile } from 'components/hooks/useUserProfile';
+import { useOnlyMyExecutionsFilterState } from 'components/Executions/filters/useOnlyMyExecutionsFilterState';
+import { UserProfile } from 'models/Common/types';
+import { FetchableData } from 'components/hooks/types';
+import { renderHook } from '@testing-library/react-hooks';
+
+jest.mock('components/hooks/useUserProfile');
+
+describe('useOnlyMyExecutionsFilterState', () => {
+ const mockUseRemoteLiteralMap = useUserProfile as jest.Mock<FetchableData<UserProfile | null>>;
+ mockUseRemoteLiteralMap.mockReturnValue(loadedFetchable(null, jest.fn()));
+
+ describe.each`
+ isFilterDisabled | initialValue | expected
+ ${undefined} | ${undefined} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: false }}
+ ${false} | ${undefined} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: false }}
+ ${true} | ${undefined} | ${{ isFilterDisabled: true, onlyMyExecutionsValue: false }}
+ ${undefined} | ${false} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: false }}
+ ${undefined} | ${true} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: true }}
+ ${false} | ${false} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: false }}
+ ${false} | ${true} | ${{ isFilterDisabled: false, onlyMyExecutionsValue: true }}
+ ${true} | ${false} | ${{ isFilterDisabled: true, onlyMyExecutionsValue: false }}
+ ${true} | ${true} | ${{ isFilterDisabled: true, onlyMyExecutionsValue: true }}
+ `('for each case', ({ isFilterDisabled, initialValue, expected }) => {
+ it(`should return ${JSON.stringify(
+ expected,
+ )} when called with isFilterDisabled = ${isFilterDisabled} and initialValue = ${initialValue}`, () => {
+ const { result } = renderHook(() =>
+ useOnlyMyExecutionsFilterState({ isFilterDisabled, initialValue }),
+ );
+ expect(result.current).toEqual(expect.objectContaining(expected));
+ });
+ });
+});

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,
+ };
+}