fix: merge master. Towards argoproj#11879

Signed-off-by: Garett MacGowan <garettsoftware@gmail.com>
GarettSoftware · Nov 2, 2023 · bf3a4e7 · bf3a4e7
2 parents f5af96d + 6564221
commit bf3a4e7
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 93 deletions.
diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -185,8 +185,8 @@ export function WorkflowsList({match, location, history}: RouteComponentProps<an
             <WorkflowsToolbar
                 selectedWorkflows={selectedWorkflows}
                 clearSelection={clearSelectedWorkflows}
+                disabledActions={batchActionDisabled}
                 loadWorkflows={clearSelectedWorkflows}
-                isDisabled={batchActionDisabled}
             />
             <div className={`row ${selectedWorkflows.size === 0 ? '' : 'pt-60'}`}>
                 <div className='columns small-12 xlarge-2'>

diff --git a/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx b/ui/src/app/workflows/components/workflows-toolbar/workflows-toolbar.tsx
@@ -1,7 +1,8 @@
 import {NotificationType} from 'argo-ui';
 import * as React from 'react';
+import {useContext, useMemo} from 'react';
 import {isArchivedWorkflow, isWorkflowInCluster, Workflow} from '../../../../models';
-import {Consumer, ContextApis} from '../../../shared/context';
+import {Context} from '../../../shared/context';
 import {services} from '../../../shared/services';
 import * as Actions from '../../../shared/workflow-operations-map';
 import {WorkflowOperation, WorkflowOperationAction, WorkflowOperationName} from '../../../shared/workflow-operations-map';
@@ -10,66 +11,69 @@ require('./workflows-toolbar.scss');
 
 interface WorkflowsToolbarProps {
     selectedWorkflows: Map<string, Workflow>;
-    loadWorkflows: () => void;
-    isDisabled: Actions.OperationDisabled;
+    disabledActions: Actions.OperationDisabled;
     clearSelection: () => void;
+    loadWorkflows: () => void;
 }
 
-interface WorkflowGroupAction extends WorkflowOperation {
-    groupIsDisabled: boolean;
-    className: string;
-    groupAction: () => Promise<any>;
+interface WorkflowsOperation extends WorkflowOperation {
+    isDisabled: boolean;
+    action: () => Promise<any>;
 }
 
-export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}> {
-    constructor(props: WorkflowsToolbarProps) {
-        super(props);
-    }
+export function WorkflowsToolbar(props: WorkflowsToolbarProps) {
+    const {popup, notifications} = useContext(Context);
+    const numberSelected = props.selectedWorkflows.size;
 
-    public render() {
-        return (
-            <Consumer>
-                {ctx => (
-                    <div className={`workflows-toolbar ${this.getNumberSelected() === 0 ? 'hidden' : ''}`}>
-                        <div className='workflows-toolbar__count'>
-                            {this.getNumberSelected() === 0 ? 'No' : this.getNumberSelected()}
-                            &nbsp;workflow{this.getNumberSelected() === 1 ? '' : 's'} selected
-                        </div>
-                        <div className='workflows-toolbar__actions'>{this.renderActions(ctx)}</div>
-                    </div>
-                )}
-            </Consumer>
-        );
-    }
+    const operations = useMemo<WorkflowsOperation[]>(() => {
+        const actions: any = Actions.WorkflowOperationsMap;
 
-    private getNumberSelected(): number {
-        return this.props.selectedWorkflows.size;
-    }
+        return Object.keys(actions).map((actionName: WorkflowOperationName) => {
+            const action = actions[actionName];
+            return {
+                title: action.title,
+                iconClassName: action.iconClassName,
+                isDisabled: props.disabledActions[actionName],
+                action: async () => {
+                    const confirmed = await popup.confirm('Confirm', `Are you sure you want to ${action.title.toLowerCase()} all selected workflows?`);
+                    if (!confirmed) {
+                        return;
+                    }
 
-    private async performActionOnSelectedWorkflows(ctx: ContextApis, title: string, action: WorkflowOperationAction): Promise<any> {
-        const confirmed = await ctx.popup.confirm('Confirm', `Are you sure you want to ${title.toLowerCase()} all selected workflows?`);
-        if (!confirmed) {
-            return Promise.resolve(false);
-        }
+                    let deleteArchived = false;
+                    if (action.title === 'DELETE') {
+                        // check if there are archived workflows to delete
+                        for (const entry of props.selectedWorkflows) {
+                            if (isArchivedWorkflow(entry[1])) {
+                                deleteArchived = await popup.confirm('Confirm', 'Do you also want to delete them from the Archived Workflows database?');
+                                break;
+                            }
+                        }
+                    }
 
-        let deleteArchived = false;
-        if (title === 'DELETE') {
-            for (const entry of this.props.selectedWorkflows) {
-                if (isArchivedWorkflow(entry[1])) {
-                    deleteArchived = await ctx.popup.confirm('Confirm', 'Do you also want to delete them from the Archived Workflows database?');
-                    break;
-                }
-            }
-        }
+                    await performActionOnSelectedWorkflows(action.title, action.action, deleteArchived);
+
+                    props.clearSelection();
+                    notifications.show({
+                        content: `Performed '${action.title}' on selected workflows.`,
+                        type: NotificationType.Success
+                    });
+                    props.loadWorkflows();
+                },
+                disabled: () => false
+            } as WorkflowsOperation;
+        });
+    }, [props.selectedWorkflows]);
 
+    async function performActionOnSelectedWorkflows(title: string, action: WorkflowOperationAction, deleteArchived: boolean): Promise<any> {
         const promises: Promise<any>[] = [];
-        this.props.selectedWorkflows.forEach((wf: Workflow) => {
+        props.selectedWorkflows.forEach((wf: Workflow) => {
             if (title === 'DELETE') {
                 // The ones without archivalStatus label or with 'Archived' labels are the live workflows.
                 if (isWorkflowInCluster(wf)) {
                     promises.push(
                         services.workflows.delete(wf.metadata.name, wf.metadata.namespace).catch(reason =>
-                            ctx.notifications.show({
+                            notifications.show({
                                 content: `Unable to delete workflow ${wf.metadata.name} in the cluster: ${reason.toString()}`,
                                 type: NotificationType.Error
                             })
@@ -79,7 +83,7 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
                 if (deleteArchived && isArchivedWorkflow(wf)) {
                     promises.push(
                         services.workflows.deleteArchived(wf.metadata.uid, wf.metadata.namespace).catch(reason =>
-                            ctx.notifications.show({
+                            notifications.show({
                                 content: `Unable to delete workflow ${wf.metadata.name} in database: ${reason.toString()}`,
                                 type: NotificationType.Error
                             })
@@ -89,8 +93,7 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
             } else {
                 promises.push(
                     action(wf).catch(reason => {
-                        this.props.loadWorkflows();
-                        ctx.notifications.show({
+                        notifications.show({
                             content: `Unable to ${title} workflow: ${reason.content.toString()}`,
                             type: NotificationType.Error
                         });
@@ -101,48 +104,26 @@ export class WorkflowsToolbar extends React.Component<WorkflowsToolbarProps, {}>
         return Promise.all(promises);
     }
 
-    private renderActions(ctx: ContextApis): JSX.Element[] {
-        const actionButtons = [];
-        const actions: any = Actions.WorkflowOperationsMap;
-        const disabled = this.props.isDisabled;
-        const groupActions: WorkflowGroupAction[] = Object.keys(actions).map((actionName: WorkflowOperationName) => {
-            const action = actions[actionName];
-            return {
-                title: action.title,
-                iconClassName: action.iconClassName,
-                groupIsDisabled: disabled[actionName],
-                action,
-                groupAction: async () => {
-                    const confirmed = await this.performActionOnSelectedWorkflows(ctx, action.title, action.action);
-                    if (!confirmed) {
-                        return;
-                    }
-
-                    this.props.clearSelection();
-                    ctx.notifications.show({
-                        content: `Performed '${action.title}' on selected workflows.`,
-                        type: NotificationType.Success
-                    });
-                    this.props.loadWorkflows();
-                },
-                className: action.title,
-                disabled: () => false
-            } as WorkflowGroupAction;
-        });
-        for (const groupAction of groupActions) {
-            actionButtons.push(
-                <button
-                    key={groupAction.title}
-                    onClick={() => {
-                        groupAction.groupAction().catch();
-                    }}
-                    className={`workflows-toolbar__actions--${groupAction.className} workflows-toolbar__actions--action`}
-                    disabled={this.getNumberSelected() === 0 || groupAction.groupIsDisabled}>
-                    <i className={groupAction.iconClassName} />
-                    &nbsp;{groupAction.title}
-                </button>
-            );
-        }
-        return actionButtons;
-    }
+    return (
+        <div className={`workflows-toolbar ${numberSelected === 0 ? 'hidden' : ''}`}>
+            <div className='workflows-toolbar__count'>
+                {numberSelected === 0 ? 'No' : numberSelected}
+                &nbsp;workflow{numberSelected === 1 ? '' : 's'} selected
+            </div>
+            <div className='workflows-toolbar__actions'>
+                {operations.map(operation => {
+                    return (
+                        <button
+                            key={operation.title}
+                            onClick={operation.action}
+                            className={`workflows-toolbar__actions--${operation.title} workflows-toolbar__actions--action`}
+                            disabled={numberSelected === 0 || operation.isDisabled}>
+                            <i className={operation.iconClassName} />
+                            &nbsp;{operation.title}
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
 }