diff --git a/ui/src/app/shared/components/error-panel.tsx b/ui/src/app/shared/components/error-panel.tsx
index d1cb2f62db5f..b03e44f3234d 100644
--- a/ui/src/app/shared/components/error-panel.tsx
+++ b/ui/src/app/shared/components/error-panel.tsx
@@ -6,46 +6,40 @@ interface Props {
     errorInfo?: ErrorInfo;
 }
 
-export class ErrorPanel extends React.Component<Props> {
-    constructor(props: Props) {
-        super(props);
-    }
-
-    public render() {
-        return (
-            <div className='white-box'>
-                <h3>
-                    <i className='fa fa-skull status-icon--failed' /> {this.props.error.message}
-                </h3>
-                <p>
-                    <i className='fa fa-redo' /> <a href='javascript:document.location.reload();'>Reload this page</a> to try again.
-                </p>
-                {this.props.error.response && (
-                    <>
-                        {this.props.error.response.req && (
-                            <>
-                                <h5>Request</h5>
-                                <pre>
-                                    {this.props.error.response.req.method} {this.props.error.response.req.url}
-                                </pre>
-                            </>
-                        )}
+export function ErrorPanel(props: Props) {
+    return (
+        <div className='white-box'>
+            <h3>
+                <i className='fa fa-skull status-icon--failed' /> {props.error.message}
+            </h3>
+            <p>
+                <i className='fa fa-redo' /> <a href='javascript:document.location.reload();'>Reload this page</a> to try again.
+            </p>
+            {props.error.response && (
+                <>
+                    {props.error.response.req && (
                         <>
-                            <h5>Response</h5>
-                            <pre>HTTP {this.props.error.response.status}</pre>
-                            {this.props.error.response.body && <pre>{JSON.stringify(this.props.error.response.body, null, 2)}</pre>}
+                            <h5>Request</h5>
+                            <pre>
+                                {props.error.response.req.method} {props.error.response.req.url}
+                            </pre>
                         </>
-                    </>
-                )}
-                <h5>Stack Trace</h5>
-                <pre>{this.props.error.stack}</pre>
-                {this.props.errorInfo && (
+                    )}
                     <>
-                        <h5>Component Stack</h5>
-                        <pre>{this.props.errorInfo.componentStack}</pre>
+                        <h5>Response</h5>
+                        <pre>HTTP {props.error.response.status}</pre>
+                        {props.error.response.body && <pre>{JSON.stringify(props.error.response.body, null, 2)}</pre>}
                     </>
-                )}
-            </div>
-        );
-    }
+                </>
+            )}
+            <h5>Stack Trace</h5>
+            <pre>{props.error.stack}</pre>
+            {props.errorInfo && (
+                <>
+                    <h5>Component Stack</h5>
+                    <pre>{props.errorInfo.componentStack}</pre>
+                </>
+            )}
+        </div>
+    );
 }
diff --git a/ui/src/app/shared/components/inline-table/inline-table.tsx b/ui/src/app/shared/components/inline-table/inline-table.tsx
index be075827d453..b0da9340faa4 100644
--- a/ui/src/app/shared/components/inline-table/inline-table.tsx
+++ b/ui/src/app/shared/components/inline-table/inline-table.tsx
@@ -11,19 +11,17 @@ interface Row {
     right: ReactChild;
 }
 
-export class InlineTable extends React.Component<TableProps> {
-    public render() {
-        return (
-            <div className='it'>
-                {this.props.rows.map((row, i) => {
-                    return (
-                        <div key={i} className='it--row'>
-                            <div className='it--col it--key'>{row.left}</div>
-                            <div className='it--col'>{row.right}</div>
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    }
+export function InlineTable(props: TableProps) {
+    return (
+        <div className='it'>
+            {props.rows.map((row, i) => {
+                return (
+                    <div key={i} className='it--row'>
+                        <div className='it--col it--key'>{row.left}</div>
+                        <div className='it--col'>{row.right}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
 }
diff --git a/ui/src/app/shared/components/nudge.tsx b/ui/src/app/shared/components/nudge.tsx
index c40be0800e40..9ae47df31314 100644
--- a/ui/src/app/shared/components/nudge.tsx
+++ b/ui/src/app/shared/components/nudge.tsx
@@ -1,29 +1,24 @@
 import * as React from 'react';
+import {useState} from 'react';
 import {Notice} from './notice';
 
-export class Nudge extends React.Component<{key: string}, {closed: boolean}> {
-    constructor(props: Readonly<{key: string}>) {
-        super(props);
-        this.state = {closed: localStorage.getItem(props.key) !== null};
+export function Nudge(props: React.PropsWithChildren<{key: string}>) {
+    const [closed, setClosed] = useState(localStorage.getItem(props.key) !== null);
+    function close() {
+        setClosed(true);
+        localStorage.setItem(props.key, '{}');
     }
 
-    public render() {
-        return (
-            !this.state.closed && (
-                <Notice style={{marginLeft: 0, marginRight: 0}}>
-                    {this.props.children}
-                    <span className='fa-pull-right'>
-                        <a onClick={() => this.close()}>
-                            <i className='fa fa-times' />
-                        </a>{' '}
-                    </span>
-                </Notice>
-            )
-        );
-    }
-
-    private close() {
-        this.setState({closed: true});
-        localStorage.setItem(this.props.key, '{}');
-    }
+    return (
+        !closed && (
+            <Notice style={{marginLeft: 0, marginRight: 0}}>
+                {props.children}
+                <span className='fa-pull-right'>
+                    <a onClick={() => close()}>
+                        <i className='fa fa-times' />
+                    </a>{' '}
+                </span>
+            </Notice>
+        )
+    );
 }
diff --git a/ui/src/app/shared/components/pagination-panel.tsx b/ui/src/app/shared/components/pagination-panel.tsx
index 552654ce3ae8..da1906a02b52 100644
--- a/ui/src/app/shared/components/pagination-panel.tsx
+++ b/ui/src/app/shared/components/pagination-panel.tsx
@@ -2,61 +2,56 @@ import * as React from 'react';
 import {Pagination, parseLimit} from '../pagination';
 import {WarningIcon} from './fa-icons';
 
-export class PaginationPanel extends React.Component<{pagination: Pagination; onChange: (pagination: Pagination) => void; numRecords: number}> {
-    public render() {
-        return (
-            <p style={{paddingBottom: '45px'}}>
-                <button
-                    disabled={!this.props.pagination.offset}
-                    className='argo-button argo-button--base-o'
-                    onClick={() => this.props.onChange({limit: this.props.pagination.limit})}>
-                    First page
-                </button>
-                <button
-                    disabled={!this.props.pagination.nextOffset}
-                    className='argo-button argo-button--base-o'
-                    onClick={() =>
-                        this.props.onChange({
-                            limit: this.props.pagination.limit,
-                            offset: this.props.pagination.nextOffset
-                        })
-                    }>
-                    Next page <i className='fa fa-chevron-right' />
-                </button>
-                {this.props.pagination.limit > 0 && this.props.pagination.limit <= this.props.numRecords ? (
-                    <>
-                        <WarningIcon /> Workflows cannot be globally sorted when paginated
-                    </>
-                ) : (
-                    <span />
-                )}
-                <small className='fa-pull-right'>
-                    <select
-                        className='small'
-                        onChange={e => {
-                            const limit = parseLimit(e.target.value);
-                            const newValue: Pagination = {limit};
+export function PaginationPanel(props: {pagination: Pagination; onChange: (pagination: Pagination) => void; numRecords: number}) {
+    return (
+        <p style={{paddingBottom: '45px'}}>
+            <button disabled={!props.pagination.offset} className='argo-button argo-button--base-o' onClick={() => props.onChange({limit: props.pagination.limit})}>
+                First page
+            </button>
+            <button
+                disabled={!props.pagination.nextOffset}
+                className='argo-button argo-button--base-o'
+                onClick={() =>
+                    props.onChange({
+                        limit: props.pagination.limit,
+                        offset: props.pagination.nextOffset
+                    })
+                }>
+                Next page <i className='fa fa-chevron-right' />
+            </button>
+            {props.pagination.limit > 0 && props.pagination.limit <= props.numRecords ? (
+                <>
+                    <WarningIcon /> Workflows cannot be globally sorted when paginated
+                </>
+            ) : (
+                <span />
+            )}
+            <small className='fa-pull-right'>
+                <select
+                    className='small'
+                    onChange={e => {
+                        const limit = parseLimit(e.target.value);
+                        const newValue: Pagination = {limit};
 
-                            // Only return the offset if we're actually going to be limiting
-                            // the results we're requesting.  If we're requesting all records,
-                            // we should not skip any by setting an offset.
-                            // The offset must be initialized whenever the pagination limit is changed.
-                            if (limit) {
-                                newValue.offset = '';
-                            }
+                        // Only return the offset if we're actually going to be limiting
+                        // the results we're requesting.  If we're requesting all records,
+                        // we should not skip any by setting an offset.
+                        // The offset must be initialized whenever the pagination limit is changed.
+                        if (limit) {
+                            newValue.offset = '';
+                        }
 
-                            this.props.onChange(newValue);
-                        }}
-                        value={this.props.pagination.limit || 0}>
-                        {[5, 10, 20, 50, 100, 500, 0].map(limit => (
-                            <option key={limit} value={limit}>
-                                {limit === 0 ? 'all' : limit}
-                            </option>
-                        ))}
-                    </select>{' '}
-                    results per page
-                </small>
-            </p>
-        );
-    }
+                        props.onChange(newValue);
+                    }}
+                    value={props.pagination.limit || 0}>
+                    {[5, 10, 20, 50, 100, 500, 0].map(limit => (
+                        <option key={limit} value={limit}>
+                            {limit === 0 ? 'all' : limit}
+                        </option>
+                    ))}
+                </select>{' '}
+                results per page
+            </small>
+        </p>
+    );
 }
diff --git a/ui/src/app/shared/conditions-panel.tsx b/ui/src/app/shared/conditions-panel.tsx
index 44b17f86819a..15689982e860 100644
--- a/ui/src/app/shared/conditions-panel.tsx
+++ b/ui/src/app/shared/conditions-panel.tsx
@@ -48,21 +48,19 @@ function getConditionIcon(condition: ConditionType): JSX.Element {
     }
 }
 
-export class ConditionsPanel extends React.Component<Props> {
-    public render() {
-        return (
-            <>
-                {this.props.conditions &&
-                    Object.entries(this.props.conditions).map(([_, condition]) => {
-                        return (
-                            <div key={condition.type} style={{lineHeight: '120%', marginTop: '16px'}}>
-                                {getConditionIcon(condition.type)}
-                                <span className='condition-panel__type'>{condition.type}</span>
-                                {': ' + (condition.message || condition.status)}
-                            </div>
-                        );
-                    })}
-            </>
-        );
-    }
+export function ConditionsPanel(props: Props) {
+    return (
+        <>
+            {props.conditions &&
+                Object.entries(props.conditions).map(([_, condition]) => {
+                    return (
+                        <div key={condition.type} style={{lineHeight: '120%', marginTop: '16px'}}>
+                            {getConditionIcon(condition.type)}
+                            <span className='condition-panel__type'>{condition.type}</span>
+                            {': ' + (condition.message || condition.status)}
+                        </div>
+                    );
+                })}
+        </>
+    );
 }
diff --git a/ui/src/app/shared/resources-duration.tsx b/ui/src/app/shared/resources-duration.tsx
index 152a742af6a6..b3ca1b73e7b6 100644
--- a/ui/src/app/shared/resources-duration.tsx
+++ b/ui/src/app/shared/resources-duration.tsx
@@ -5,18 +5,16 @@ interface Props {
     resourcesDuration: {[resource: string]: number};
 }
 
-export class ResourcesDuration extends React.Component<Props> {
-    public render() {
-        return (
-            <>
-                {this.props.resourcesDuration &&
-                    Object.entries(this.props.resourcesDuration)
-                        .map(([resource, duration]) => formatDuration(duration, 1) + '*(' + denominator(resource) + ' ' + resource + ')')
-                        .join(',')}{' '}
-                <a href='https://argoproj.github.io/argo-workflows/resource-duration/'>
-                    <i className='fa fa-info-circle' />
-                </a>
-            </>
-        );
-    }
+export function ResourcesDuration(props: Props) {
+    return (
+        <>
+            {props.resourcesDuration &&
+                Object.entries(props.resourcesDuration)
+                    .map(([resource, duration]) => formatDuration(duration, 1) + '*(' + denominator(resource) + ' ' + resource + ')')
+                    .join(',')}{' '}
+            <a href='https://argoproj.github.io/argo-workflows/resource-duration/'>
+                <i className='fa fa-info-circle' />
+            </a>
+        </>
+    );
 }
diff --git a/ui/src/app/workflow-templates/components/workflow-template-creator.tsx b/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
index 58e6982b85d9..5b768e217761 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-creator.tsx
@@ -10,7 +10,7 @@ import {services} from '../../shared/services';
 import {Utils} from '../../shared/utils';
 import {WorkflowTemplateEditor} from './workflow-template-editor';
 
-export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: string; onCreate: (workflow: WorkflowTemplate) => void}) => {
+export function WorkflowTemplateCreator({namespace, onCreate}: {namespace: string; onCreate: (workflow: WorkflowTemplate) => void}) {
     const [template, setTemplate] = useState<WorkflowTemplate>(exampleWorkflowTemplate(Utils.getNamespaceWithDefault(namespace)));
     const [error, setError] = useState<Error>();
     return (
@@ -35,4 +35,4 @@ export const WorkflowTemplateCreator = ({namespace, onCreate}: {namespace: strin
             </p>
         </>
     );
-};
+}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
index d2a6dd7dbeb7..dbcc104c2c45 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-details/workflow-template-details.tsx
@@ -16,7 +16,7 @@ import {WidgetGallery} from '../../../widgets/widget-gallery';
 import {SubmitWorkflowPanel} from '../../../workflows/components/submit-workflow-panel';
 import {WorkflowTemplateEditor} from '../workflow-template-editor';
 
-export const WorkflowTemplateDetails = ({history, location, match}: RouteComponentProps<any>) => {
+export function WorkflowTemplateDetails({history, location, match}: RouteComponentProps<any>) {
     // boiler-plate
     const {notifications, navigation, popup} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
@@ -139,4 +139,4 @@ export const WorkflowTemplateDetails = ({history, location, match}: RouteCompone
             )}
         </Page>
     );
-};
+}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-editor.tsx b/ui/src/app/workflow-templates/components/workflow-template-editor.tsx
index 76059a783a22..5607c446e498 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-editor.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-editor.tsx
@@ -7,7 +7,7 @@ import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';
 import {ObjectEditor} from '../../shared/components/object-editor/object-editor';
 
-export const WorkflowTemplateEditor = ({
+export function WorkflowTemplateEditor({
     onChange,
     onError,
     onTabSelected,
@@ -19,7 +19,7 @@ export const WorkflowTemplateEditor = ({
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
-}) => {
+}) {
     return (
         <Tabs
             key='tabs'
@@ -55,4 +55,4 @@ export const WorkflowTemplateEditor = ({
             ]}
         />
     );
-};
+}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-filters/workflow-template-filters.tsx b/ui/src/app/workflow-templates/components/workflow-template-filters/workflow-template-filters.tsx
index 602f6aa19e12..a4e5d484829c 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-filters/workflow-template-filters.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-filters/workflow-template-filters.tsx
@@ -13,7 +13,7 @@ interface WorkflowFilterProps {
     onChange: (namespace: string, labels: string[]) => void;
 }
 
-export const WorkflowTemplateFilters = ({templates, namespace, labels, onChange}: WorkflowFilterProps) => {
+export function WorkflowTemplateFilters({templates, namespace, labels, onChange}: WorkflowFilterProps) {
     const [labelSuggestion, setLabelSuggestion] = useState([]);
 
     useEffect(() => {
@@ -58,4 +58,4 @@ export const WorkflowTemplateFilters = ({templates, namespace, labels, onChange}
             </div>
         </div>
     );
-};
+}
diff --git a/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx b/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
index 950d5686c88a..201f3206435a 100644
--- a/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
+++ b/ui/src/app/workflow-templates/components/workflow-template-list/workflow-template-list.tsx
@@ -27,7 +27,7 @@ require('./workflow-template-list.scss');
 
 const learnMore = <a href='https://argoproj.github.io/argo-workflows/workflow-templates/'>Learn more</a>;
 
-export const WorkflowTemplateList = ({match, location, history}: RouteComponentProps<any>) => {
+export function WorkflowTemplateList({match, location, history}: RouteComponentProps<any>) {
     // boiler-plate
     const queryParams = new URLSearchParams(location.search);
     const {navigation} = useContext(Context);
@@ -163,4 +163,4 @@ export const WorkflowTemplateList = ({match, location, history}: RouteComponentP
             </SlidingPanel>
         </Page>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/events-panel.tsx b/ui/src/app/workflows/components/events-panel.tsx
index 9cb20b792c9c..b49027b7e951 100644
--- a/ui/src/app/workflows/components/events-panel.tsx
+++ b/ui/src/app/workflows/components/events-panel.tsx
@@ -10,7 +10,7 @@ import debounce from '../../shared/debounce';
 import {ListWatch} from '../../shared/list-watch';
 import {services} from '../../shared/services';
 
-export const EventsPanel = ({namespace, name, kind}: {namespace: string; name: string; kind: string}) => {
+export function EventsPanel({namespace, name, kind}: {namespace: string; name: string; kind: string}) {
     const [showAll, setShowAll] = useState(false);
     const [hideNormal, setHideNormal] = useState(false);
     const [events, setEvents] = useState<Event[]>();
@@ -53,7 +53,7 @@ export const EventsPanel = ({namespace, name, kind}: {namespace: string; name: s
     const tableRef = useRef<HTMLDivElement | null>(null);
 
     useEffect(() => {
-        const calculateTooltips = () => {
+        function calculateTooltips() {
             const table = tableRef.current;
 
             if (table) {
@@ -75,7 +75,7 @@ export const EventsPanel = ({namespace, name, kind}: {namespace: string; name: s
                     }
                 }
             }
-        };
+        }
 
         const [debouncedCalculateTooltips, cleanup] = debounce(calculateTooltips, 1000);
 
@@ -134,4 +134,4 @@ export const EventsPanel = ({namespace, name, kind}: {namespace: string; name: s
             )}
         </>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-artifacts.tsx b/ui/src/app/workflows/components/workflow-artifacts.tsx
index 8ae8dbb67bc0..9b700ec8998b 100644
--- a/ui/src/app/workflows/components/workflow-artifacts.tsx
+++ b/ui/src/app/workflows/components/workflow-artifacts.tsx
@@ -9,7 +9,7 @@ interface Props {
     archived: boolean;
 }
 
-export const WorkflowArtifacts = (props: Props) => {
+export function WorkflowArtifacts(props: Props) {
     const workflowStatusNodes = (props.workflow.status && props.workflow.status.nodes) || {};
     const artifacts =
         Object.keys(workflowStatusNodes)
@@ -60,4 +60,4 @@ export const WorkflowArtifacts = (props: Props) => {
             </div>
         </div>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.tsx b/ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.tsx
index 011750e5ed21..3edf8101d542 100644
--- a/ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.tsx
+++ b/ui/src/app/workflows/components/workflow-creator-info/workflow-creator-info.tsx
@@ -9,41 +9,35 @@ interface WorkflowCreatorInfoProps {
     onChange: (key: string, value: string) => void;
 }
 
-export class WorkflowCreatorInfo extends React.Component<WorkflowCreatorInfoProps, {}> {
-    constructor(props: WorkflowCreatorInfoProps) {
-        super(props);
-    }
-
-    public render() {
-        const w = this.props.workflow;
-        const creatorLabels = [];
-        if (w.metadata.labels) {
-            const creatorInfoMap = new Map<string, [string, string]>([
-                ['Name', [labels.creator, w.metadata.labels[labels.creator]]],
-                ['Email', [labels.creatorEmail, w.metadata.labels[labels.creatorEmail]]],
-                ['Preferred username', [labels.creatorPreferredUsername, w.metadata.labels[labels.creatorPreferredUsername]]]
-            ]);
-            creatorInfoMap.forEach((value: [string, string], key: string) => {
-                const [searchKey, searchValue] = value;
-                if (searchValue !== '' && searchValue !== undefined) {
-                    creatorLabels.push(
-                        <div
-                            title={`List workflows created by ${key}=${searchValue}`}
-                            className='tag'
-                            key={`${w.metadata.uid}-${key}`}
-                            onClick={async e => {
-                                e.preventDefault();
-                                this.props.onChange(searchKey, searchValue);
-                            }}>
-                            <div className='key'>{key}</div>
-                            <div className='value'>{searchValue}</div>
-                        </div>
-                    );
-                }
-            });
-        } else {
-            creatorLabels.push(<div key={`${w.metadata.uid}- `}> No creator information </div>);
-        }
-        return <div className='wf-row-creator-labels'>{creatorLabels}</div>;
+export function WorkflowCreatorInfo(props: WorkflowCreatorInfoProps) {
+    const w = props.workflow;
+    const creatorLabels = [];
+    if (w.metadata.labels) {
+        const creatorInfoMap = new Map<string, [string, string]>([
+            ['Name', [labels.creator, w.metadata.labels[labels.creator]]],
+            ['Email', [labels.creatorEmail, w.metadata.labels[labels.creatorEmail]]],
+            ['Preferred username', [labels.creatorPreferredUsername, w.metadata.labels[labels.creatorPreferredUsername]]]
+        ]);
+        creatorInfoMap.forEach((value: [string, string], key: string) => {
+            const [searchKey, searchValue] = value;
+            if (searchValue !== '' && searchValue !== undefined) {
+                creatorLabels.push(
+                    <div
+                        title={`List workflows created by ${key}=${searchValue}`}
+                        className='tag'
+                        key={`${w.metadata.uid}-${key}`}
+                        onClick={async e => {
+                            e.preventDefault();
+                            props.onChange(searchKey, searchValue);
+                        }}>
+                        <div className='key'>{key}</div>
+                        <div className='value'>{searchValue}</div>
+                    </div>
+                );
+            }
+        });
+    } else {
+        creatorLabels.push(<div key={`${w.metadata.uid}- `}> No creator information </div>);
     }
+    return <div className='wf-row-creator-labels'>{creatorLabels}</div>;
 }
diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
index c423150cf0ec..0146abe15f45 100644
--- a/ui/src/app/workflows/components/workflow-creator.tsx
+++ b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -14,7 +14,7 @@ import {WorkflowEditor} from './workflow-editor';
 
 type Stage = 'choose-method' | 'submit-workflow' | 'full-editor';
 
-export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCreate: (workflow: Workflow) => void}) => {
+export function WorkflowCreator({namespace, onCreate}: {namespace: string; onCreate: (workflow: Workflow) => void}) {
     const [workflowTemplates, setWorkflowTemplates] = useState<WorkflowTemplate[]>();
     const [workflowTemplate, setWorkflowTemplate] = useState<WorkflowTemplate>();
     const [stage, setStage] = useState<Stage>('choose-method');
@@ -123,4 +123,4 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
             )}
         </>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx b/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
index d577cce7dfeb..6607a3b058b1 100644
--- a/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
+++ b/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
@@ -1,46 +1,44 @@
 import * as React from 'react';
 import {WorkflowDagRenderOptions} from './workflow-dag';
 
-export class WorkflowDagRenderOptionsPanel extends React.Component<WorkflowDagRenderOptions & {onChange: (changed: WorkflowDagRenderOptions) => void}> {
-    private get workflowDagRenderOptions() {
-        return this.props as WorkflowDagRenderOptions;
+export function WorkflowDagRenderOptionsPanel(props: WorkflowDagRenderOptions & {onChange: (changed: WorkflowDagRenderOptions) => void}) {
+    function workflowDagRenderOptions() {
+        return props as WorkflowDagRenderOptions;
     }
 
-    public render() {
-        return (
-            <>
-                <a
-                    onClick={() =>
-                        this.props.onChange({
-                            ...this.workflowDagRenderOptions,
-                            showArtifacts: !this.workflowDagRenderOptions.showArtifacts
-                        })
-                    }
-                    className={this.workflowDagRenderOptions.showArtifacts ? 'active' : ''}
-                    title='Toggle artifacts'>
-                    <i className='fa fa-file-alt' />
-                </a>
-                <a
-                    onClick={() =>
-                        this.props.onChange({
-                            ...this.workflowDagRenderOptions,
-                            expandNodes: new Set()
-                        })
-                    }
-                    title='Collapse all nodes'>
-                    <i className='fa fa-compress fa-fw' data-fa-transform='rotate-45' />
-                </a>
-                <a
-                    onClick={() =>
-                        this.props.onChange({
-                            ...this.workflowDagRenderOptions,
-                            expandNodes: new Set(['*'])
-                        })
-                    }
-                    title='Expand all nodes'>
-                    <i className='fa fa-expand fa-fw' data-fa-transform='rotate-45' />
-                </a>
-            </>
-        );
-    }
+    return (
+        <>
+            <a
+                onClick={() =>
+                    props.onChange({
+                        ...workflowDagRenderOptions(),
+                        showArtifacts: !workflowDagRenderOptions().showArtifacts
+                    })
+                }
+                className={workflowDagRenderOptions().showArtifacts ? 'active' : ''}
+                title='Toggle artifacts'>
+                <i className='fa fa-file-alt' />
+            </a>
+            <a
+                onClick={() =>
+                    props.onChange({
+                        ...workflowDagRenderOptions(),
+                        expandNodes: new Set()
+                    })
+                }
+                title='Collapse all nodes'>
+                <i className='fa fa-compress fa-fw' data-fa-transform='rotate-45' />
+            </a>
+            <a
+                onClick={() =>
+                    props.onChange({
+                        ...workflowDagRenderOptions(),
+                        expandNodes: new Set(['*'])
+                    })
+                }
+                title='Expand all nodes'>
+                <i className='fa fa-expand fa-fw' data-fa-transform='rotate-45' />
+            </a>
+        </>
+    );
 }
diff --git a/ui/src/app/workflows/components/workflow-editor.tsx b/ui/src/app/workflows/components/workflow-editor.tsx
index e0ed3cbd58a1..184fcbb249c3 100644
--- a/ui/src/app/workflows/components/workflow-editor.tsx
+++ b/ui/src/app/workflows/components/workflow-editor.tsx
@@ -6,7 +6,7 @@ import {MetadataEditor} from '../../shared/components/editors/metadata-editor';
 import {WorkflowParametersEditor} from '../../shared/components/editors/workflow-parameters-editor';
 import {ObjectEditor} from '../../shared/components/object-editor/object-editor';
 
-export const WorkflowEditor = ({
+export function WorkflowEditor({
     selectedTabKey,
     onTabSelected,
     onError,
@@ -18,7 +18,7 @@ export const WorkflowEditor = ({
     onError: (error: Error) => void;
     onTabSelected?: (tab: string) => void;
     selectedTabKey?: string;
-}) => {
+}) {
     return (
         <Tabs
             key='tabs'
@@ -44,4 +44,4 @@ export const WorkflowEditor = ({
             ]}
         />
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-from.tsx b/ui/src/app/workflows/components/workflow-from.tsx
index 69e3e4a7a51f..c99f546f075b 100644
--- a/ui/src/app/workflows/components/workflow-from.tsx
+++ b/ui/src/app/workflows/components/workflow-from.tsx
@@ -4,7 +4,7 @@ import {ClusterWorkflowTemplateLink} from '../../cluster-workflow-templates/comp
 import {CronWorkflowLink} from '../../cron-workflows/components/cron-workflow-link';
 import {WorkflowTemplateLink} from '../../workflow-templates/components/workflow-template-link';
 
-export const WorkflowFrom = (props: {namespace: string; labels: {[name: string]: string}}) => {
+export function WorkflowFrom(props: {namespace: string; labels: {[name: string]: string}}) {
     const workflowTemplate = props.labels[labels.workflowTemplate];
     const clusterWorkflowTemplate = props.labels[labels.clusterWorkflowTemplate];
     const cronWorkflow = props.labels[labels.cronWorkflow];
@@ -16,4 +16,4 @@ export const WorkflowFrom = (props: {namespace: string; labels: {[name: string]:
             {!workflowTemplate && !clusterWorkflowTemplate && !cronWorkflow && '-'}
         </>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-labels/workflow-labels.tsx b/ui/src/app/workflows/components/workflow-labels/workflow-labels.tsx
index 2b064cb5f539..f98c067ecaa6 100644
--- a/ui/src/app/workflows/components/workflow-labels/workflow-labels.tsx
+++ b/ui/src/app/workflows/components/workflow-labels/workflow-labels.tsx
@@ -8,34 +8,28 @@ interface WorkflowLabelsProps {
     onChange: (key: string, value: string) => void;
 }
 
-export class WorkflowLabels extends React.Component<WorkflowLabelsProps, {}> {
-    constructor(props: WorkflowLabelsProps) {
-        super(props);
+export function WorkflowLabels(props: WorkflowLabelsProps) {
+    const labels = [];
+    const w = props.workflow;
+    if (w.metadata.labels) {
+        labels.push(
+            Object.entries(w.metadata.labels).map(([key, value]) => (
+                <div
+                    title={`List workflows labelled with ${key}=${value}`}
+                    className='tag'
+                    key={`${w.metadata.uid}-${key}`}
+                    onClick={async e => {
+                        e.preventDefault();
+                        props.onChange(key, value);
+                    }}>
+                    <div className='key'>{key}</div>
+                    <div className='value'>{value}</div>
+                </div>
+            ))
+        );
+    } else {
+        labels.push(<div key={`${w.metadata.uid}-none`}> No labels </div>);
     }
 
-    public render() {
-        const labels = [];
-        const w = this.props.workflow;
-        if (w.metadata.labels) {
-            labels.push(
-                Object.entries(w.metadata.labels).map(([key, value]) => (
-                    <div
-                        title={`List workflows labelled with ${key}=${value}`}
-                        className='tag'
-                        key={`${w.metadata.uid}-${key}`}
-                        onClick={async e => {
-                            e.preventDefault();
-                            this.props.onChange(key, value);
-                        }}>
-                        <div className='key'>{key}</div>
-                        <div className='value'>{value}</div>
-                    </div>
-                ))
-            );
-        } else {
-            labels.push(<div key={`${w.metadata.uid}-none`}> No labels </div>);
-        }
-
-        return <div className='wf-row-labels'>{labels}</div>;
-    }
+    return <div className='wf-row-labels'>{labels}</div>;
 }
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
index 4e351237122d..a7b5d14394c2 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/full-height-logs-viewer.tsx
@@ -5,7 +5,7 @@ import {LogsViewerProps} from 'argo-ui/src/components/logs-viewer/logs-viewer';
 
 require('./workflow-logs-viewer.scss');
 
-export const FullHeightLogsViewer = (props: LogsViewerProps) => {
+export function FullHeightLogsViewer(props: LogsViewerProps) {
     const ref = React.useRef(null);
     const [height, setHeight] = React.useState<number>(null);
     const {source} = props;
@@ -20,4 +20,4 @@ export const FullHeightLogsViewer = (props: LogsViewerProps) => {
             {height && <LogsViewer source={source} />}
         </div>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/json-logs-field-selector.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/json-logs-field-selector.tsx
index 0079f7663b12..07a3898e1889 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/json-logs-field-selector.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/json-logs-field-selector.tsx
@@ -5,7 +5,7 @@ export interface SelectedJsonFields {
     values: string[];
 }
 
-export const JsonLogsFieldSelector = ({fields, onChange}: {fields: SelectedJsonFields; onChange: (v: string[]) => void}) => {
+export function JsonLogsFieldSelector({fields, onChange}: {fields: SelectedJsonFields; onChange: (v: string[]) => void}) {
     const [inputFields, setInputFields] = React.useState(fields);
     const [key, setKey] = React.useState('');
     const deleteItem = (k: string) => {
@@ -61,7 +61,7 @@ export const JsonLogsFieldSelector = ({fields, onChange}: {fields: SelectedJsonF
             </div>
         </>
     );
-};
+}
 
 export const extractJsonValue = (obj: any, jsonpath: string): string | null => {
     const fields = jsonpath.split('.');
diff --git a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
index 14579c606170..b2c94abd83ff 100644
--- a/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-logs-viewer/workflow-logs-viewer.tsx
@@ -48,16 +48,16 @@ interface ParsedTime {
     fullstring: string;
 }
 // extract the time field from a string
-const parseTime = (formattedString: string): undefined | ParsedTime => {
+function parseTime(formattedString: string): undefined | ParsedTime {
     const re = new RegExp('time="(.*?)"');
     const table = re.exec(formattedString);
     if (table === null || table.length !== 2) {
         return undefined;
     }
     return {quoted: table[1], fullstring: table[0]};
-};
+}
 
-const parseAndTransform = (formattedString: string, timezone: string) => {
+function parseAndTransform(formattedString: string, timezone: string) {
     const maybeTime = parseTime(formattedString);
     if (maybeTime === undefined) {
         return formattedString;
@@ -71,9 +71,9 @@ const parseAndTransform = (formattedString: string, timezone: string) => {
     } catch {
         return formattedString;
     }
-};
+}
 
-export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container, archived}: WorkflowLogsViewerProps) => {
+export function WorkflowLogsViewer({workflow, nodeId, initialPodName, container, archived}: WorkflowLogsViewerProps) {
     const storage = new ScopedLocalStorage('workflow-logs-viewer');
     const storedJsonFields = storage.getItem('jsonFields', {
         values: []
@@ -202,7 +202,7 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
     const [candidateContainer, setCandidateContainer] = useState(container);
     const filteredTimezones = timezones.filter(tz => tz.startsWith(uiTimezone) || uiTimezone === '');
 
-    const popupJsonFieldSelector = async () => {
+    async function popupJsonFieldSelector() {
         const fields = {...selectedJsonFields};
         const updated = await popup.confirm('Select Json Fields', () => (
             <JsonLogsFieldSelector
@@ -216,7 +216,7 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
             storage.setItem('jsonFields', fields, {values: []});
             setSelectedJsonFields(fields);
         }
-    };
+    }
 
     return (
         <div className='workflow-logs-viewer'>
@@ -333,4 +333,4 @@ export const WorkflowLogsViewer = ({workflow, nodeId, initialPodName, container,
             </p>
         </div>
     );
-};
+}
diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
index 6a4fd98af42d..87b505991d2a 100644
--- a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
+++ b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -1,6 +1,7 @@
 import {Tabs, Ticker, Tooltip} from 'argo-ui';
 import moment from 'moment';
 import * as React from 'react';
+import {useState} from 'react';
 
 import * as models from '../../../../models';
 import {Artifact, NodeStatus, Workflow} from '../../../../models';
@@ -377,49 +378,39 @@ const WorkflowNodeContainer = (props: {
     );
 };
 
-class WorkflowNodeContainers extends React.Component<Props, {selectedSidecar: string}> {
-    constructor(props: Props) {
-        super(props);
-        this.state = {selectedSidecar: null};
-    }
-
-    public render() {
-        const template = getResolvedTemplates(this.props.workflow, this.props.node);
-        if (!template || (!template.container && !template.containerSet && !template.script)) {
-            return (
-                <div className='white-box'>
-                    <div className='row'>
-                        <div className='columns small-12 text-center'>No data to display</div>
-                    </div>
-                </div>
-            );
-        }
-        const containers = (template.containerSet ? template.containerSet.containers : []).concat(template.sidecars || []);
-
-        const container = (this.state.selectedSidecar && containers.find(item => item.name === this.state.selectedSidecar)) || template.container || template.script;
+function WorkflowNodeContainers(props: Props) {
+    const [selectedSidecar, setSelectedSidecar] = useState(null);
 
+    const template = getResolvedTemplates(props.workflow, props.node);
+    if (!template || (!template.container && !template.containerSet && !template.script)) {
         return (
-            <div className='workflow-node-info__containers'>
-                {this.state.selectedSidecar && <i className='fa fa-angle-left workflow-node-info__sidecar-back' onClick={() => this.setState({selectedSidecar: null})} />}
-                <WorkflowNodeContainer
-                    nodeId={this.props.node.id}
-                    container={container}
-                    onShowContainerLogs={this.props.onShowContainerLogs}
-                    onShowEvents={this.props.onShowEvents}
-                />
-                {!this.state.selectedSidecar && (
-                    <div>
-                        <p>SIDECARS:</p>
-                        {containers.map(sidecar => (
-                            <div className='workflow-node-info__sidecar' key={sidecar.name} onClick={() => this.setState({selectedSidecar: sidecar.name})}>
-                                <span>{sidecar.name}</span> <i className='fa fa-angle-right' />
-                            </div>
-                        ))}
-                    </div>
-                )}
+            <div className='white-box'>
+                <div className='row'>
+                    <div className='columns small-12 text-center'>No data to display</div>
+                </div>
             </div>
         );
     }
+
+    const containers = (template.containerSet ? template.containerSet.containers : []).concat(template.sidecars || []);
+    const container = (selectedSidecar && containers.find(item => item.name === selectedSidecar)) || template.container || template.script;
+
+    return (
+        <div className='workflow-node-info__containers'>
+            {selectedSidecar && <i className='fa fa-angle-left workflow-node-info__sidecar-back' onClick={() => setSelectedSidecar(null)} />}
+            <WorkflowNodeContainer nodeId={props.node.id} container={container} onShowContainerLogs={props.onShowContainerLogs} onShowEvents={props.onShowEvents} />
+            {!selectedSidecar && (
+                <div>
+                    <p>SIDECARS:</p>
+                    {containers.map(sidecar => (
+                        <div className='workflow-node-info__sidecar' key={sidecar.name} onClick={() => setSelectedSidecar(sidecar.name)}>
+                            <span>{sidecar.name}</span> <i className='fa fa-angle-right' />
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
 }
 
 const WorkflowNodeArtifacts = (props: {workflow: Workflow; node: NodeStatus; archived: boolean; isInput: boolean; artifacts: Artifact[]}) => {
diff --git a/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx b/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
index 523163e7b90c..a84df7d13766 100644
--- a/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
+++ b/ui/src/app/workflows/components/workflow-panel/workflow-panel.tsx
@@ -12,26 +12,24 @@ interface Props {
     nodeClicked: (nodeId: string) => void;
 }
 
-export class WorkflowPanel extends React.Component<Props> {
-    public render() {
-        if (!this.props.workflowStatus.nodes && this.props.workflowStatus.phase) {
-            return (
-                <div className='argo-container'>
-                    <Notice>
-                        <Phase value={this.props.workflowStatus.phase} />: {this.props.workflowStatus.message}
-                    </Notice>
-                </div>
-            );
-        }
-
+export function WorkflowPanel(props: Props) {
+    if (!props.workflowStatus.nodes && props.workflowStatus.phase) {
         return (
-            <WorkflowDag
-                workflowName={this.props.workflowMetadata.name}
-                nodes={this.props.workflowStatus.nodes}
-                artifactRepositoryRef={this.props.workflowStatus.artifactRepositoryRef}
-                selectedNodeId={this.props.selectedNodeId}
-                nodeClicked={this.props.nodeClicked}
-            />
+            <div className='argo-container'>
+                <Notice>
+                    <Phase value={props.workflowStatus.phase} />: {props.workflowStatus.message}
+                </Notice>
+            </div>
         );
     }
+
+    return (
+        <WorkflowDag
+            workflowName={props.workflowMetadata.name}
+            nodes={props.workflowStatus.nodes}
+            artifactRepositoryRef={props.workflowStatus.artifactRepositoryRef}
+            selectedNodeId={props.selectedNodeId}
+            nodeClicked={props.nodeClicked}
+        />
+    );
 }
diff --git a/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx b/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
index 1202f5cc369f..d4376c58e068 100644
--- a/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
+++ b/ui/src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx
@@ -10,59 +10,60 @@ interface WorkflowYamlViewerProps {
     selectedNode: models.NodeStatus;
 }
 
-export class WorkflowYamlViewer extends React.Component<WorkflowYamlViewerProps> {
-    public render() {
-        const contents: JSX.Element[] = [];
-        contents.push(<h3 key='title'>Node</h3>);
-        if (this.props.selectedNode) {
-            const parentNode = this.props.workflow.status.nodes[this.props.selectedNode.boundaryID];
-            if (parentNode) {
-                contents.push(
-                    <div key='parent-node'>
-                        <h4>{this.normalizeNodeName(this.props.selectedNode.displayName || this.props.selectedNode.name)}</h4>
-                        <ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={getResolvedTemplates(this.props.workflow, parentNode)} />
-                    </div>
-                );
-            }
+function normalizeNodeName(name: string) {
+    const parts = name.replace(/([(][^)]*[)])/g, '').split('.');
+    return parts[parts.length - 1];
+}
 
-            const currentNodeTemplate = getResolvedTemplates(this.props.workflow, this.props.selectedNode);
-            if (currentNodeTemplate) {
-                contents.push(
-                    <div key='current-node'>
-                        <h4>{this.props.selectedNode.name}</h4>
-                        <ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={currentNodeTemplate} />
-                    </div>
-                );
-            }
-        }
-        const templates = this.props.workflow.spec.templates;
-        if (templates && Object.keys(templates).length) {
+export function WorkflowYamlViewer(props: WorkflowYamlViewerProps) {
+    const contents: JSX.Element[] = [];
+    contents.push(<h3 key='title'>Node</h3>);
+
+    if (props.selectedNode) {
+        const parentNode = props.workflow.status.nodes[props.selectedNode.boundaryID];
+        if (parentNode) {
             contents.push(
-                <SlideContents
-                    title='Templates'
-                    key='templates'
-                    contents={<ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={templates} />}
-                    className='workflow-yaml-section'
-                />
+                <div key='parent-node'>
+                    <h4>{normalizeNodeName(props.selectedNode.displayName || props.selectedNode.name)}</h4>
+                    <ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={getResolvedTemplates(props.workflow, parentNode)} />
+                </div>
             );
         }
-        const storedTemplates = this.props.workflow.status.storedTemplates;
-        if (storedTemplates && Object.keys(storedTemplates).length) {
+
+        const currentNodeTemplate = getResolvedTemplates(props.workflow, props.selectedNode);
+        if (currentNodeTemplate) {
             contents.push(
-                <SlideContents
-                    title='Stored Templates'
-                    key='stored-templates'
-                    contents={<ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={storedTemplates} />}
-                    className='workflow-yaml-section'
-                />
+                <div key='current-node'>
+                    <h4>{props.selectedNode.name}</h4>
+                    <ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={currentNodeTemplate} />
+                </div>
             );
         }
+    }
 
-        return <div className='workflow-yaml-viewer'>{contents}</div>;
+    const templates = props.workflow.spec.templates;
+    if (templates && Object.keys(templates).length) {
+        contents.push(
+            <SlideContents
+                title='Templates'
+                key='templates'
+                contents={<ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={templates} />}
+                className='workflow-yaml-section'
+            />
+        );
     }
 
-    private normalizeNodeName(name: string) {
-        const parts = name.replace(/([(][^)]*[)])/g, '').split('.');
-        return parts[parts.length - 1];
+    const storedTemplates = props.workflow.status.storedTemplates;
+    if (storedTemplates && Object.keys(storedTemplates).length) {
+        contents.push(
+            <SlideContents
+                title='Stored Templates'
+                key='stored-templates'
+                contents={<ObjectEditor type='io.argoproj.workflow.v1alpha1.Template' value={storedTemplates} />}
+                className='workflow-yaml-section'
+            />
+        );
     }
+
+    return <div className='workflow-yaml-viewer'>{contents}</div>;
 }
diff --git a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
index 9b428205d38c..6a3f3dad2d16 100644
--- a/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
+++ b/ui/src/app/workflows/components/workflows-row/workflows-row.tsx
@@ -1,5 +1,6 @@
 import {Ticker} from 'argo-ui/src/index';
 import * as React from 'react';
+import {useState} from 'react';
 import {Link} from 'react-router-dom';
 import * as models from '../../../../models';
 import {isArchivedWorkflow, Workflow} from '../../../../models';
@@ -19,103 +20,92 @@ interface WorkflowsRowProps {
     columns: models.Column[];
 }
 
-interface WorkflowRowState {
-    hideDrawer: boolean;
-}
-
-export class WorkflowsRow extends React.Component<WorkflowsRowProps, WorkflowRowState> {
-    constructor(props: WorkflowsRowProps) {
-        super(props);
-        this.state = {
-            hideDrawer: true
-        };
-    }
+export function WorkflowsRow(props: WorkflowsRowProps) {
+    const [hideDrawer, setHideDrawer] = useState(true);
+    const wf = props.workflow;
 
-    public render() {
-        const wf = this.props.workflow;
-        return (
-            <div className='workflows-list__row-container'>
-                <div className='row argo-table-list__row'>
-                    <div className='columns small-1 workflows-list__status'>
-                        <input
-                            type='checkbox'
-                            className='workflows-list__status--checkbox'
-                            checked={this.props.checked}
-                            onClick={e => {
-                                e.stopPropagation();
-                            }}
-                            onChange={e => {
-                                this.props.select(this.props.workflow);
-                            }}
-                        />
-                        <PhaseIcon value={wf.status.phase} />
-                    </div>
-                    <Link
-                        to={{
-                            pathname: uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`),
-                            search: `?uid=${wf.metadata.uid}`
+    return (
+        <div className='workflows-list__row-container'>
+            <div className='row argo-table-list__row'>
+                <div className='columns small-1 workflows-list__status'>
+                    <input
+                        type='checkbox'
+                        className='workflows-list__status--checkbox'
+                        checked={props.checked}
+                        onClick={e => {
+                            e.stopPropagation();
                         }}
-                        className='small-11 row'>
-                        <div className='columns small-2'>
-                            {(wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_TITLE]) || wf.metadata.name}
-                            {wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_DESCRIPTION] ? <p>{wf.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
-                        </div>
-                        <div className='columns small-1'>{wf.metadata.namespace}</div>
-                        <div className='columns small-1'>
-                            <Timestamp date={wf.status.startedAt} />
-                        </div>
-                        <div className='columns small-1'>
-                            <Timestamp date={wf.status.finishedAt} />
-                        </div>
-                        <div className='columns small-1'>
-                            <Ticker>{() => <DurationPanel phase={wf.status.phase} duration={wfDuration(wf.status)} estimatedDuration={wf.status.estimatedDuration} />}</Ticker>
-                        </div>
-                        <div className='columns small-1'>{wf.status.progress || '-'}</div>
-                        <div className='columns small-2'>{wf.status.message || '-'}</div>
-                        <div className='columns small-1'>
-                            <div className='workflows-list__labels-container'>
-                                <div
-                                    onClick={e => {
-                                        e.preventDefault();
-                                        this.setState({hideDrawer: !this.state.hideDrawer});
-                                    }}
-                                    className={`workflows-row__action workflows-row__action--${this.state.hideDrawer ? 'show' : 'hide'}`}>
-                                    {this.state.hideDrawer ? (
-                                        <span>
-                                            SHOW <i className='fas fa-caret-down' />{' '}
-                                        </span>
-                                    ) : (
-                                        <span>
-                                            HIDE <i className='fas fa-caret-up' />
-                                        </span>
-                                    )}
-                                </div>
+                        onChange={e => {
+                            props.select(props.workflow);
+                        }}
+                    />
+                    <PhaseIcon value={wf.status.phase} />
+                </div>
+                <Link
+                    to={{
+                        pathname: uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`),
+                        search: `?uid=${wf.metadata.uid}`
+                    }}
+                    className='small-11 row'>
+                    <div className='columns small-2'>
+                        {(wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_TITLE]) || wf.metadata.name}
+                        {wf.metadata.annotations && wf.metadata.annotations[ANNOTATION_DESCRIPTION] ? <p>{wf.metadata.annotations[ANNOTATION_DESCRIPTION]}</p> : null}
+                    </div>
+                    <div className='columns small-1'>{wf.metadata.namespace}</div>
+                    <div className='columns small-1'>
+                        <Timestamp date={wf.status.startedAt} />
+                    </div>
+                    <div className='columns small-1'>
+                        <Timestamp date={wf.status.finishedAt} />
+                    </div>
+                    <div className='columns small-1'>
+                        <Ticker>{() => <DurationPanel phase={wf.status.phase} duration={wfDuration(wf.status)} estimatedDuration={wf.status.estimatedDuration} />}</Ticker>
+                    </div>
+                    <div className='columns small-1'>{wf.status.progress || '-'}</div>
+                    <div className='columns small-2'>{wf.status.message || '-'}</div>
+                    <div className='columns small-1'>
+                        <div className='workflows-list__labels-container'>
+                            <div
+                                onClick={e => {
+                                    e.preventDefault();
+                                    setHideDrawer(!hideDrawer);
+                                }}
+                                className={`workflows-row__action workflows-row__action--${hideDrawer ? 'show' : 'hide'}`}>
+                                {hideDrawer ? (
+                                    <span>
+                                        SHOW <i className='fas fa-caret-down' />{' '}
+                                    </span>
+                                ) : (
+                                    <span>
+                                        HIDE <i className='fas fa-caret-up' />
+                                    </span>
+                                )}
                             </div>
                         </div>
-                        <div className='columns small-1'>{isArchivedWorkflow(wf) ? 'true' : 'false'}</div>
-                        {(this.props.columns || []).map(column => {
-                            // best not to make any assumptions and wait until this data is filled
-                            const value = wf?.metadata?.labels?.[column.key] ?? 'unknown';
-                            return (
-                                <div key={column.name} className='columns small-1'>
-                                    {value}
-                                </div>
-                            );
-                        })}
-                        {this.state.hideDrawer ? (
-                            <span />
-                        ) : (
-                            <WorkflowDrawer
-                                name={wf.metadata.name}
-                                namespace={wf.metadata.namespace}
-                                onChange={key => {
-                                    this.props.onChange(key);
-                                }}
-                            />
-                        )}
-                    </Link>
-                </div>
+                    </div>
+                    <div className='columns small-1'>{isArchivedWorkflow(wf) ? 'true' : 'false'}</div>
+                    {(props.columns || []).map(column => {
+                        // best not to make any assumptions and wait until this data is filled
+                        const value = wf?.metadata?.labels?.[column.key] ?? 'unknown';
+                        return (
+                            <div key={column.name} className='columns small-1'>
+                                {value}
+                            </div>
+                        );
+                    })}
+                    {hideDrawer ? (
+                        <span />
+                    ) : (
+                        <WorkflowDrawer
+                            name={wf.metadata.name}
+                            namespace={wf.metadata.namespace}
+                            onChange={key => {
+                                props.onChange(key);
+                            }}
+                        />
+                    )}
+                </Link>
             </div>
-        );
-    }
+        </div>
+    );
 }
diff --git a/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx b/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
index 03d5fdeea115..c47796f2899c 100644
--- a/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
+++ b/ui/src/app/workflows/components/workflows-summary-container/workflows-summary-container.tsx
@@ -7,7 +7,7 @@ require('./workflows-summary-container.scss');
 
 type ReduceReturnType = Record<string, number>;
 
-export const WorkflowsSummaryContainer = (props: {workflows: Workflow[]}) => {
+export function WorkflowsSummaryContainer(props: {workflows: Workflow[]}) {
     const [wfSummary, setWfSummary] = useState(null);
     useEffect(() => {
         if (props.workflows) {
@@ -54,4 +54,4 @@ export const WorkflowsSummaryContainer = (props: {workflows: Workflow[]}) => {
             </div>
         </div>
     );
-};
+}