refactor: ui, convert cluster workflow template to functional component (argoproj#9809)

Signed-off-by: Tianchu Zhao <[email protected]>

Author: tczhao

ui/src/app/cluster-workflow-templates/components/cluster-workflow-template-list/cluster-workflow-template-list.tsx

@@ -1,90 +1,59 @@
 import {Page, SlidingPanel} from 'argo-ui';
 import * as React from 'react';
+import {useContext, useEffect, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 import * as models from '../../../../models';
 import {uiUrl} from '../../../shared/base';
-import {BasePage} from '../../../shared/components/base-page';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {ExampleManifests} from '../../../shared/components/example-manifests';
 import {InfoIcon} from '../../../shared/components/fa-icons';
 import {Loading} from '../../../shared/components/loading';
 import {Timestamp} from '../../../shared/components/timestamp';
 import {ZeroState} from '../../../shared/components/zero-state';
-import {Consumer} from '../../../shared/context';
+import {Context} from '../../../shared/context';
+import {useQueryParams} from '../../../shared/use-query-params';
+
 import {Footnote} from '../../../shared/footnote';
 import {services} from '../../../shared/services';
 import {ClusterWorkflowTemplateCreator} from '../cluster-workflow-template-creator';
-
 require('./cluster-workflow-template-list.scss');
 
-interface State {
-    templates?: models.ClusterWorkflowTemplate[];
-    error?: Error;
-}
-
-export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<any>, State> {
-    private get sidePanel() {
-        return this.queryParam('sidePanel');
-    }
+export const ClusterWorkflowTemplateList = ({history, location}: RouteComponentProps<any>) => {
+    const {navigation} = useContext(Context);
+    const queryParams = new URLSearchParams(location.search);
+    const [templates, setTemplates] = useState<models.ClusterWorkflowTemplate[]>();
+    const [error, setError] = useState<Error>();
+    const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
 
-    private set sidePanel(sidePanel) {
-        this.setQueryParams({sidePanel});
-    }
+    const fetchClusterWorkflowTemplates = () => {
+        services.clusterWorkflowTemplate
+            .list()
+            .then(retrievedTemplates => setTemplates(retrievedTemplates))
+            .then(() => setError(null))
+            .catch(setError);
+    };
 
-    constructor(props: RouteComponentProps<any>, context: any) {
-        super(props, context);
-        this.state = {};
-    }
+    useEffect(
+        useQueryParams(history, p => {
+            setSidePanel(p.get('sidePanel'));
+        }),
+        [history]
+    );
 
-    public componentDidMount(): void {
-        this.fetchClusterWorkflowTemplates();
+    useEffect(() => {
+        fetchClusterWorkflowTemplates();
         services.info.collectEvent('openedClusterWorkflowTemplateList').then();
-    }
-
-    public render() {
-        return (
-            <Consumer>
-                {ctx => (
-                    <Page
-                        title='Cluster Workflow Templates'
-                        toolbar={{
-                            breadcrumbs: [{title: 'Cluster Workflow Templates', path: uiUrl('cluster-workflow-templates')}],
-                            actionMenu: {
-                                items: [
-                                    {
-                                        title: 'Create New Cluster Workflow Template',
-                                        iconClassName: 'fa fa-plus',
-                                        action: () => (this.sidePanel = 'new')
-                                    }
-                                ]
-                            }
-                        }}>
-                        {this.renderTemplates()}
-                        <SlidingPanel isShown={this.sidePanel !== null} onClose={() => (this.sidePanel = null)}>
-                            <ClusterWorkflowTemplateCreator onCreate={wf => ctx.navigation.goto(uiUrl(`cluster-workflow-templates/${wf.metadata.name}`))} />
-                        </SlidingPanel>
-                    </Page>
-                )}
-            </Consumer>
-        );
-    }
-
-    private fetchClusterWorkflowTemplates(): void {
-        services.clusterWorkflowTemplate
-            .list()
-            .then(templates => this.setState({error: null, templates}))
-            .catch(error => this.setState({error}));
-    }
+    }, []);
 
-    private renderTemplates() {
-        if (this.state.error) {
-            return <ErrorNotice error={this.state.error} />;
+    const renderTemplates = () => {
+        if (error) {
+            return <ErrorNotice error={error} />;
         }
-        if (!this.state.templates) {
+        if (!templates) {
             return <Loading />;
         }
         const learnMore = <a href='https://argoproj.github.io/argo-workflows/cluster-workflow-templates/'>Learn more</a>;
-        if (this.state.templates.length === 0) {
+        if (templates.length === 0) {
             return (
                 <ZeroState title='No cluster workflow templates'>
                     <p>You can create new templates here or using the CLI.</p>
@@ -102,7 +71,7 @@ export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<an
                         <div className='columns small-5'>NAME</div>
                         <div className='columns small-3'>CREATED</div>
                     </div>
-                    {this.state.templates.map(t => (
+                    {templates.map(t => (
                         <Link className='row argo-table-list__row' key={t.metadata.uid} to={uiUrl(`cluster-workflow-templates/${t.metadata.name}`)}>
                             <div className='columns small-1'>
                                 <i className='fa fa-clone' />
@@ -119,5 +88,27 @@ export class ClusterWorkflowTemplateList extends BasePage<RouteComponentProps<an
                 </Footnote>
             </>
         );
-    }
-}
+    };
+
+    return (
+        <Page
+            title='Cluster Workflow Templates'
+            toolbar={{
+                breadcrumbs: [{title: 'Cluster Workflow Templates', path: uiUrl('cluster-workflow-templates')}],
+                actionMenu: {
+                    items: [
+                        {
+                            title: 'Create New Cluster Workflow Template',
+                            iconClassName: 'fa fa-plus',
+                            action: () => setSidePanel('new')
+                        }
+                    ]
+                }
+            }}>
+            {renderTemplates()}
+            <SlidingPanel isShown={sidePanel !== null} onClose={() => setSidePanel(null)}>
+                <ClusterWorkflowTemplateCreator onCreate={wf => navigation.goto(uiUrl(`cluster-workflow-templates/${wf.metadata.name}`))} />
+            </SlidingPanel>
+        </Page>
+    );
+};