From da3f2d246990475dd99c90a027a5b91b3b12b792 Mon Sep 17 00:00:00 2001
From: MilanPospisil <arkanus@seznam.cz>
Date: Tue, 21 Feb 2023 15:26:54 +0100
Subject: [PATCH] Refactor components to functional from start to namespace
 form2 (#3224)

* Collection filter
No-Issue

* Prettier

* Collection list-item

* collection list

* confirm modal, date component, delete collection modal

* delete execution environment modal

* delete modal && empty state folder

* Apply rebase changes
---
 .../collection-list/collection-filter.tsx     | 136 ++++++-------
 .../collection-list/collection-list-item.tsx  | 184 +++++++++---------
 .../collection-list/collection-list.tsx       |  90 ++++-----
 .../confirm-modal/confirm-modal.tsx           |  74 ++++---
 .../date-component/date-component.tsx         |  22 +--
 .../delete-modal/delete-collection-modal.tsx  | 127 ++++++------
 .../delete-execution-environment-modal.tsx    | 150 +++++++-------
 src/components/delete-modal/delete-modal.tsx  |  84 ++++----
 .../empty-state/empty-state-custom.tsx        |  41 ++--
 .../empty-state/empty-state-filter.tsx        |  34 ++--
 .../empty-state/empty-state-no-data.tsx       |  22 +--
 .../empty-state/empty-state-unauthorized.tsx  |  34 ++--
 12 files changed, 472 insertions(+), 526 deletions(-)

diff --git a/src/components/collection-list/collection-filter.tsx b/src/components/collection-list/collection-filter.tsx
index 1bfab5d695..095eb4a108 100644
--- a/src/components/collection-list/collection-filter.tsx
+++ b/src/components/collection-list/collection-filter.tsx
@@ -6,9 +6,10 @@ import {
   ToolbarItem,
 } from '@patternfly/react-core';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { AppliedFilters, CompoundFilter } from 'src/components';
 import { Constants } from 'src/constants';
-import { AppContext } from 'src/loaders/app-context';
+import { useContext } from 'src/loaders/app-context';
 import './collection-filter.scss';
 
 interface IProps {
@@ -23,86 +24,71 @@ interface IProps {
   updateParams: (p) => void;
 }
 
-interface IState {
-  inputText: string;
-}
-
-export class CollectionFilter extends React.Component<IProps, IState> {
-  static contextType = AppContext;
-
-  constructor(props) {
-    super(props);
+export const CollectionFilter = (props: IProps) => {
+  const context = useContext();
+  const [inputText, setInputText] = useState(props.params.keywords || '');
 
-    this.state = {
-      inputText: props.params.keywords || '',
-    };
-  }
+  useEffect(() => {
+    setInputText(props.params['keywords'] || '');
+  }, [props.params.keywords]);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.params.keywords !== this.props.params['keywords']) {
-      this.setState({ inputText: this.props.params['keywords'] || '' });
-    }
-  }
+  const { ignoredParams, params, updateParams } = props;
+  const { display_signatures } = context.featureFlags;
+  const display_tags = ignoredParams.includes('tags') === false;
 
-  render() {
-    const { ignoredParams, params, updateParams } = this.props;
-    const { display_signatures } = this.context.featureFlags;
-    const display_tags = ignoredParams.includes('tags') === false;
+  const filterConfig = [
+    {
+      id: 'keywords',
+      title: t`Keywords`,
+    },
+    display_tags && {
+      id: 'tags',
+      title: t`Tag`,
+      inputType: 'multiple' as const,
+      options: Constants.COLLECTION_FILTER_TAGS.map((tag) => ({
+        id: tag,
+        title: tag,
+      })),
+    },
+    display_signatures && {
+      id: 'sign_state',
+      title: t`Sign state`,
+      inputType: 'select' as const,
+      options: [
+        { id: 'signed', title: t`Signed` },
+        { id: 'unsigned', title: t`Unsigned` },
+      ],
+    },
+  ].filter(Boolean);
 
-    const filterConfig = [
-      {
-        id: 'keywords',
-        title: t`Keywords`,
-      },
-      display_tags && {
-        id: 'tags',
-        title: t`Tag`,
-        inputType: 'multiple' as const,
-        options: Constants.COLLECTION_FILTER_TAGS.map((tag) => ({
-          id: tag,
-          title: tag,
-        })),
-      },
-      display_signatures && {
-        id: 'sign_state',
-        title: t`Sign state`,
-        inputType: 'select' as const,
-        options: [
-          { id: 'signed', title: t`Signed` },
-          { id: 'unsigned', title: t`Unsigned` },
-        ],
-      },
-    ].filter(Boolean);
-
-    return (
-      <Toolbar>
-        <ToolbarContent>
-          <ToolbarGroup style={{ marginLeft: 0 }}>
+  return (
+    <Toolbar>
+      <ToolbarContent>
+        <ToolbarGroup style={{ marginLeft: 0 }}>
+          <ToolbarItem>
+            <CompoundFilter
+              inputText={inputText}
+              onChange={(text) => setInputText(text)}
+              updateParams={updateParams}
+              params={params}
+              filterConfig={filterConfig}
+            />
             <ToolbarItem>
-              <CompoundFilter
-                inputText={this.state.inputText}
-                onChange={(text) => this.setState({ inputText: text })}
+              <AppliedFilters
+                niceNames={{
+                  sign_state: t`sign state`,
+                  tags: t`tags`,
+                  keywords: t`keywords`,
+                }}
+                style={{ marginTop: '16px' }}
                 updateParams={updateParams}
                 params={params}
-                filterConfig={filterConfig}
+                ignoredParams={ignoredParams}
               />
-              <ToolbarItem>
-                <AppliedFilters
-                  niceNames={{
-                    sign_state: t`sign state`,
-                    tags: t`tags`,
-                    keywords: t`keywords`,
-                  }}
-                  style={{ marginTop: '16px' }}
-                  updateParams={updateParams}
-                  params={params}
-                  ignoredParams={ignoredParams}
-                />
-              </ToolbarItem>
             </ToolbarItem>
-          </ToolbarGroup>
-        </ToolbarContent>
-      </Toolbar>
-    );
-  }
-}
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
diff --git a/src/components/collection-list/collection-list-item.tsx b/src/components/collection-list/collection-list-item.tsx
index 2b38bc2c06..8693994963 100644
--- a/src/components/collection-list/collection-list-item.tsx
+++ b/src/components/collection-list/collection-list-item.tsx
@@ -31,105 +31,103 @@ interface IProps extends CollectionListType {
   repo?: string;
 }
 
-export class CollectionListItem extends React.Component<IProps> {
-  render() {
-    const {
-      name,
-      latest_version,
-      namespace,
-      showNamespace,
-      controls,
-      deprecated,
-      displaySignatures,
-      repo,
-      sign_state,
-    } = this.props;
+export const CollectionListItem = (props: IProps) => {
+  const {
+    name,
+    latest_version,
+    namespace,
+    showNamespace,
+    controls,
+    deprecated,
+    displaySignatures,
+    repo,
+    sign_state,
+  } = props;
 
-    const cells = [];
+  const cells = [];
 
-    const company = namespace.company || namespace.name;
-
-    if (showNamespace) {
-      cells.push(
-        <DataListCell isFilled={false} alignRight={false} key='ns'>
-          <Logo
-            alt={t`${company} logo`}
-            fallbackToDefault
-            image={namespace.avatar_url}
-            size='40px'
-            unlockWidth
-            width='97px'
-          />
-        </DataListCell>,
-      );
-    }
-
-    const contentSummary = convertContentSummaryCounts(latest_version.metadata);
+  const company = namespace.company || namespace.name;
 
+  if (showNamespace) {
     cells.push(
-      <DataListCell key='content'>
-        <div>
-          <Link
-            to={formatPath(Paths.collectionByRepo, {
-              collection: name,
-              namespace: namespace.name,
-              repo: repo,
-            })}
-            data-cy='CollectionList-name'
-          >
-            {name}
-          </Link>
-          {deprecated && <DeprecatedTag />}
-          {showNamespace ? (
-            <TextContent>
-              <Text component={TextVariants.small}>
-                <Trans>Provided by {company}</Trans>
-              </Text>
-            </TextContent>
-          ) : null}
-        </div>
-        <div className='hub-entry'>{latest_version.metadata.description}</div>
-        <div className='hub-entry pf-l-flex pf-m-wrap'>
-          {Object.keys(contentSummary.contents).map((type) => (
-            <div key={type}>
-              <CollectionNumericLabel
-                count={contentSummary.contents[type]}
-                type={type}
-              />
-            </div>
-          ))}
-        </div>
-        <div className='hub-entry pf-l-flex pf-m-wrap'>
-          <LabelGroup {...chipGroupProps()}>
-            {latest_version.metadata.tags.map((tag, index) => (
-              <Tag key={index}>{tag}</Tag>
-            ))}
-          </LabelGroup>
-        </div>
+      <DataListCell isFilled={false} alignRight={false} key='ns'>
+        <Logo
+          alt={t`${company} logo`}
+          fallbackToDefault
+          image={namespace.avatar_url}
+          size='40px'
+          unlockWidth
+          width='97px'
+        />
       </DataListCell>,
     );
+  }
 
-    cells.push(
-      <DataListCell isFilled={false} alignRight key='stats'>
-        {controls ? <div className='hub-entry'>{controls}</div> : null}
-        <div className='hub-right-col hub-entry'>
-          <Trans>
-            Updated <DateComponent date={latest_version.created_at} />
-          </Trans>
-        </div>
-        <div className='hub-entry'>v{latest_version.version}</div>
-        {displaySignatures ? (
-          <SignatureBadge className='hub-entry' signState={sign_state} />
+  const contentSummary = convertContentSummaryCounts(latest_version.metadata);
+
+  cells.push(
+    <DataListCell key='content'>
+      <div>
+        <Link
+          to={formatPath(Paths.collectionByRepo, {
+            collection: name,
+            namespace: namespace.name,
+            repo: repo,
+          })}
+          data-cy='CollectionList-name'
+        >
+          {name}
+        </Link>
+        {deprecated && <DeprecatedTag />}
+        {showNamespace ? (
+          <TextContent>
+            <Text component={TextVariants.small}>
+              <Trans>Provided by {company}</Trans>
+            </Text>
+          </TextContent>
         ) : null}
-      </DataListCell>,
-    );
+      </div>
+      <div className='hub-entry'>{latest_version.metadata.description}</div>
+      <div className='hub-entry pf-l-flex pf-m-wrap'>
+        {Object.keys(contentSummary.contents).map((type) => (
+          <div key={type}>
+            <CollectionNumericLabel
+              count={contentSummary.contents[type]}
+              type={type}
+            />
+          </div>
+        ))}
+      </div>
+      <div className='hub-entry pf-l-flex pf-m-wrap'>
+        <LabelGroup {...chipGroupProps()}>
+          {latest_version.metadata.tags.map((tag, index) => (
+            <Tag key={index}>{tag}</Tag>
+          ))}
+        </LabelGroup>
+      </div>
+    </DataListCell>,
+  );
 
-    return (
-      <DataListItem data-cy='CollectionListItem'>
-        <DataListItemRow>
-          <DataListItemCells dataListCells={cells} />
-        </DataListItemRow>
-      </DataListItem>
-    );
-  }
-}
+  cells.push(
+    <DataListCell isFilled={false} alignRight key='stats'>
+      {controls ? <div className='hub-entry'>{controls}</div> : null}
+      <div className='hub-right-col hub-entry'>
+        <Trans>
+          Updated <DateComponent date={latest_version.created_at} />
+        </Trans>
+      </div>
+      <div className='hub-entry'>v{latest_version.version}</div>
+      {displaySignatures ? (
+        <SignatureBadge className='hub-entry' signState={sign_state} />
+      ) : null}
+    </DataListCell>,
+  );
+
+  return (
+    <DataListItem data-cy='CollectionListItem'>
+      <DataListItemRow>
+        <DataListItemCells dataListCells={cells} />
+      </DataListItemRow>
+    </DataListItem>
+  );
+};
diff --git a/src/components/collection-list/collection-list.tsx b/src/components/collection-list/collection-list.tsx
index 9786565957..616b929d12 100644
--- a/src/components/collection-list/collection-list.tsx
+++ b/src/components/collection-list/collection-list.tsx
@@ -27,52 +27,48 @@ interface IProps {
 }
 
 // only used in namespace detail, collections uses individual items
-export class CollectionList extends React.Component<IProps> {
-  render() {
-    const {
-      collections,
-      displaySignatures,
-      params,
-      updateParams,
-      ignoredParams,
-      itemCount,
-      showControls,
-      repo,
-    } = this.props;
+export const CollectionList = (props: IProps) => {
+  const {
+    collections,
+    displaySignatures,
+    params,
+    updateParams,
+    ignoredParams,
+    itemCount,
+    showControls,
+    repo,
+  } = props;
 
-    return (
-      <React.Fragment>
-        <DataList aria-label={t`List of Collections`}>
-          {collections.length > 0 ? (
-            collections.map((c) => (
-              <CollectionListItem
-                controls={
-                  showControls ? this.props.renderCollectionControls(c) : null
-                }
-                key={c.id}
-                {...c}
-                repo={repo}
-                displaySignatures={displaySignatures}
-              />
-            ))
-          ) : (
-            <EmptyStateFilter
-              clearAllFilters={() => {
-                ParamHelper.clearAllFilters({
-                  params,
-                  ignoredParams,
-                  updateParams,
-                });
-              }}
+  return (
+    <React.Fragment>
+      <DataList aria-label={t`List of Collections`}>
+        {collections.length > 0 ? (
+          collections.map((c) => (
+            <CollectionListItem
+              controls={showControls ? props.renderCollectionControls(c) : null}
+              key={c.id}
+              {...c}
+              repo={repo}
+              displaySignatures={displaySignatures}
             />
-          )}
-        </DataList>
-        <Pagination
-          params={params}
-          updateParams={(p) => updateParams(p)}
-          count={itemCount}
-        />
-      </React.Fragment>
-    );
-  }
-}
+          ))
+        ) : (
+          <EmptyStateFilter
+            clearAllFilters={() => {
+              ParamHelper.clearAllFilters({
+                params,
+                ignoredParams,
+                updateParams,
+              });
+            }}
+          />
+        )}
+      </DataList>
+      <Pagination
+        params={params}
+        updateParams={(p) => updateParams(p)}
+        count={itemCount}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/src/components/confirm-modal/confirm-modal.tsx b/src/components/confirm-modal/confirm-modal.tsx
index dfb3b49f80..af71b9dd6d 100644
--- a/src/components/confirm-modal/confirm-modal.tsx
+++ b/src/components/confirm-modal/confirm-modal.tsx
@@ -12,42 +12,40 @@ interface IProps {
   confirmButtonTitle?: string;
 }
 
-export class ConfirmModal extends React.Component<IProps> {
-  render() {
-    const {
-      cancelAction,
-      children,
-      confirmAction,
-      isDisabled,
-      title,
-      spinner,
-      confirmButtonTitle,
-    } = this.props;
+export const ConfirmModal = (props: IProps) => {
+  const {
+    cancelAction,
+    children,
+    confirmAction,
+    isDisabled,
+    title,
+    spinner,
+    confirmButtonTitle,
+  } = props;
 
-    return (
-      <Modal
-        actions={[
-          <Button
-            key='confirm'
-            onClick={confirmAction}
-            variant='primary'
-            isDisabled={isDisabled}
-          >
-            {confirmButtonTitle ? confirmButtonTitle : t`Yes`}
-            {spinner && <Spinner size='sm'></Spinner>}
-          </Button>,
-          <Button key='cancel' onClick={cancelAction} variant='link'>
-            {t`Cancel`}
-          </Button>,
-        ]}
-        isOpen={true}
-        onClose={cancelAction}
-        title={title}
-        titleIconVariant='warning'
-        variant='small'
-      >
-        {children}
-      </Modal>
-    );
-  }
-}
+  return (
+    <Modal
+      actions={[
+        <Button
+          key='confirm'
+          onClick={confirmAction}
+          variant='primary'
+          isDisabled={isDisabled}
+        >
+          {confirmButtonTitle ? confirmButtonTitle : t`Yes`}
+          {spinner && <Spinner size='sm'></Spinner>}
+        </Button>,
+        <Button key='cancel' onClick={cancelAction} variant='link'>
+          {t`Cancel`}
+        </Button>,
+      ]}
+      isOpen={true}
+      onClose={cancelAction}
+      title={title}
+      titleIconVariant='warning'
+      variant='small'
+    >
+      {children}
+    </Modal>
+  );
+};
diff --git a/src/components/date-component/date-component.tsx b/src/components/date-component/date-component.tsx
index 9d1b5e39a4..6e44295eea 100644
--- a/src/components/date-component/date-component.tsx
+++ b/src/components/date-component/date-component.tsx
@@ -6,16 +6,14 @@ interface IProps {
   date: string;
 }
 
-export class DateComponent extends React.Component<IProps> {
-  render() {
-    const { date } = this.props;
+export const DateComponent = (props: IProps) => {
+  const { date } = props;
 
-    return (
-      date && (
-        <Tooltip content={moment(date).format('DD MMMM YYYY, HH:mm Z')}>
-          {moment(date).fromNow()}
-        </Tooltip>
-      )
-    );
-  }
-}
+  return (
+    date && (
+      <Tooltip content={moment(date).format('DD MMMM YYYY, HH:mm Z')}>
+        {moment(date).fromNow()}
+      </Tooltip>
+    )
+  );
+};
diff --git a/src/components/delete-modal/delete-collection-modal.tsx b/src/components/delete-modal/delete-collection-modal.tsx
index 87cfff0e0b..224b098a73 100644
--- a/src/components/delete-modal/delete-collection-modal.tsx
+++ b/src/components/delete-modal/delete-collection-modal.tsx
@@ -14,69 +14,66 @@ interface IProps {
   setConfirmDelete: (val) => void;
 }
 
-export class DeleteCollectionModal extends React.Component<IProps> {
-  render() {
-    const {
-      deleteCollection,
-      isDeletionPending,
-      confirmDelete,
-      collectionVersion,
-      cancelAction,
-      deleteAction,
-      setConfirmDelete,
-    } = this.props;
+export const DeleteCollectionModal = (props: IProps) => {
+  const {
+    deleteCollection,
+    isDeletionPending,
+    confirmDelete,
+    collectionVersion,
+    cancelAction,
+    deleteAction,
+    setConfirmDelete,
+  } = props;
 
-    return (
-      deleteCollection && (
-        <DeleteModal
-          spinner={isDeletionPending}
-          cancelAction={() => cancelAction()}
-          deleteAction={() => deleteAction()}
-          isDisabled={!confirmDelete || isDeletionPending}
-          title={
-            collectionVersion
-              ? t`Delete collection version?`
-              : t`Delete collection?`
-          }
-        >
-          <Text style={{ paddingBottom: 'var(--pf-global--spacer--md)' }}>
-            {collectionVersion ? (
-              <>
-                {(deleteCollection as CollectionDetailType).all_versions
-                  .length === 1 ? (
-                  <Trans>
-                    Deleting{' '}
-                    <b>
-                      {deleteCollection.name} v{collectionVersion}
-                    </b>{' '}
-                    and its data will be lost and this will cause the entire
-                    collection to be deleted.
-                  </Trans>
-                ) : (
-                  <Trans>
-                    Deleting{' '}
-                    <b>
-                      {deleteCollection.name} v{collectionVersion}
-                    </b>{' '}
-                    and its data will be lost.
-                  </Trans>
-                )}
-              </>
-            ) : (
-              <Trans>
-                Deleting <b>{deleteCollection.name}</b> and its data will be
-                lost.
-              </Trans>
-            )}
-          </Text>
-          <Checkbox
-            isChecked={confirmDelete}
-            onChange={setConfirmDelete}
-            label={t`I understand that this action cannot be undone.`}
-            id='delete_confirm'
-          />
-        </DeleteModal>
-      )
-    );
-  }
-}
+  return (
+    deleteCollection && (
+      <DeleteModal
+        spinner={isDeletionPending}
+        cancelAction={() => cancelAction()}
+        deleteAction={() => deleteAction()}
+        isDisabled={!confirmDelete || isDeletionPending}
+        title={
+          collectionVersion
+            ? t`Delete collection version?`
+            : t`Delete collection?`
+        }
+      >
+        <Text style={{ paddingBottom: 'var(--pf-global--spacer--md)' }}>
+          {collectionVersion ? (
+            <>
+              {(deleteCollection as CollectionDetailType).all_versions
+                .length === 1 ? (
+                <Trans>
+                  Deleting{' '}
+                  <b>
+                    {deleteCollection.name} v{collectionVersion}
+                  </b>{' '}
+                  and its data will be lost and this will cause the entire
+                  collection to be deleted.
+                </Trans>
+              ) : (
+                <Trans>
+                  Deleting{' '}
+                  <b>
+                    {deleteCollection.name} v{collectionVersion}
+                  </b>{' '}
+                  and its data will be lost.
+                </Trans>
+              )}
+            </>
+          ) : (
+            <Trans>
+              Deleting <b>{deleteCollection.name}</b> and its data will be lost.
+            </Trans>
+          )}
+        </Text>
+        <Checkbox
+          isChecked={confirmDelete}
+          onChange={setConfirmDelete}
+          label={t`I understand that this action cannot be undone.`}
+          id='delete_confirm'
+        />
+      </DeleteModal>
+    )
+  );
+};
diff --git a/src/components/delete-modal/delete-execution-environment-modal.tsx b/src/components/delete-modal/delete-execution-environment-modal.tsx
index c41c3a5542..ad7b629452 100644
--- a/src/components/delete-modal/delete-execution-environment-modal.tsx
+++ b/src/components/delete-modal/delete-execution-environment-modal.tsx
@@ -1,16 +1,11 @@
 import { Trans, t } from '@lingui/macro';
 import { Checkbox, Text } from '@patternfly/react-core';
-import * as React from 'react';
+import React, { useState } from 'react';
 import { ExecutionEnvironmentAPI } from 'src/api';
 import { DeleteModal } from 'src/components/delete-modal/delete-modal';
 import { waitForTask } from 'src/utilities';
 import { errorMessage } from 'src/utilities';
 
-interface IState {
-  confirmDelete: boolean;
-  isDeletionPending: boolean;
-}
-
 interface IProps {
   closeAction: () => void;
   selectedItem: string;
@@ -18,81 +13,78 @@ interface IProps {
   afterDelete: () => void;
 }
 
-export class DeleteExecutionEnvironmentModal extends React.Component<
-  IProps,
-  IState
-> {
-  constructor(props) {
-    super(props);
+export const DeleteExecutionEnvironmentModal = (props: IProps) => {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [isDeletionPending, setIsDeletionPending] = useState(false);
 
-    this.state = {
-      confirmDelete: false,
-      isDeletionPending: false,
-    };
-  }
+  const { selectedItem, closeAction } = props;
 
-  render() {
-    const { selectedItem, closeAction } = this.props;
-    const { isDeletionPending, confirmDelete } = this.state;
+  return (
+    <DeleteModal
+      spinner={isDeletionPending}
+      title={t`Delete container?`}
+      cancelAction={() => closeAction()}
+      deleteAction={() =>
+        deleteContainer(
+          selectedItem,
+          props,
+          setConfirmDelete,
+          setIsDeletionPending,
+        )
+      }
+      isDisabled={!confirmDelete || isDeletionPending}
+    >
+      <Text className='delete-container-modal-message'>
+        <Trans>
+          Deleting <b>{selectedItem}</b> and its data will be lost.
+        </Trans>
+      </Text>
+      <Checkbox
+        isChecked={confirmDelete}
+        onChange={(value) => setConfirmDelete(value)}
+        label={t`I understand that this action cannot be undone.`}
+        id='delete_confirm'
+      />
+    </DeleteModal>
+  );
+};
 
-    return (
-      <DeleteModal
-        spinner={isDeletionPending}
-        title={t`Delete container?`}
-        cancelAction={() => closeAction()}
-        deleteAction={() => this.deleteContainer(selectedItem)}
-        isDisabled={!confirmDelete || isDeletionPending}
-      >
-        <Text className='delete-container-modal-message'>
-          <Trans>
-            Deleting <b>{selectedItem}</b> and its data will be lost.
-          </Trans>
-        </Text>
-        <Checkbox
-          isChecked={confirmDelete}
-          onChange={(value) => this.setState({ confirmDelete: value })}
-          label={t`I understand that this action cannot be undone.`}
-          id='delete_confirm'
-        />
-      </DeleteModal>
-    );
-  }
+function deleteContainer(
+  selectedItem: string,
+  props,
+  setConfirmDelete,
+  setIsDeletionPending,
+) {
+  const { addAlert, closeAction, afterDelete } = props;
 
-  deleteContainer(selectedItem: string) {
-    const { addAlert, closeAction, afterDelete } = this.props;
-    this.setState({ isDeletionPending: true }, () =>
-      ExecutionEnvironmentAPI.deleteExecutionEnvironment(selectedItem)
-        .then((result) => {
-          const taskId = result.data.task.split('tasks/')[1].replace('/', '');
-          waitForTask(taskId).then(() => {
-            this.setState({
-              confirmDelete: false,
-              isDeletionPending: false,
-            });
-            closeAction();
-            addAlert(
-              <Trans>
-                Execution environment &quot;{selectedItem}&quot; has been
-                successfully deleted.
-              </Trans>,
-              'success',
-            );
-            afterDelete();
-          });
-        })
-        .catch((e) => {
-          const { status, statusText } = e.response;
-          this.setState({
-            confirmDelete: false,
-            isDeletionPending: false,
-          });
-          addAlert(
-            t`Execution environment "${selectedItem}" could not be deleted.`,
-            'danger',
-            errorMessage(status, statusText),
-          );
-          closeAction();
-        }),
-    );
-  }
+  setIsDeletionPending(true);
+
+  ExecutionEnvironmentAPI.deleteExecutionEnvironment(selectedItem)
+    .then((result) => {
+      const taskId = result.data.task.split('tasks/')[1].replace('/', '');
+      waitForTask(taskId).then(() => {
+        setConfirmDelete(false);
+        setIsDeletionPending(false);
+        closeAction();
+        addAlert(
+          <Trans>
+            Execution environment &quot;{selectedItem}&quot; has been
+            successfully deleted.
+          </Trans>,
+          'success',
+        );
+        afterDelete();
+      });
+    })
+    .catch((e) => {
+      const { status, statusText } = e.response;
+      setConfirmDelete(false);
+      setIsDeletionPending(false);
+      addAlert(
+        t`Execution environment "${selectedItem}" could not be deleted.`,
+        'danger',
+        errorMessage(status, statusText),
+      );
+      closeAction();
+    });
 }
diff --git a/src/components/delete-modal/delete-modal.tsx b/src/components/delete-modal/delete-modal.tsx
index fab2f02d41..2c618c23e4 100644
--- a/src/components/delete-modal/delete-modal.tsx
+++ b/src/components/delete-modal/delete-modal.tsx
@@ -13,49 +13,41 @@ export interface IProps {
   variant?: ModalProps['variant'];
 }
 
-export class DeleteModal extends React.Component<IProps> {
-  static defaultProps = {
-    variant: 'small',
-  };
-
-  render() {
-    const {
-      cancelAction,
-      children,
-      deleteAction,
-      isDisabled,
-      title,
-      spinner,
-      variant,
-    } = this.props;
-
-    return (
-      <Modal
-        actions={[
-          <div data-cy='delete-button' key='delete'>
-            <Button
-              key='delete'
-              onClick={deleteAction}
-              variant='danger'
-              isDisabled={isDisabled}
-            >
-              {t`Delete`}
-              {spinner && <Spinner size='sm'></Spinner>}
-            </Button>
-          </div>,
-          <Button key='cancel' onClick={cancelAction} variant='link'>
-            {t`Cancel`}
-          </Button>,
-        ]}
-        isOpen={true}
-        onClose={cancelAction}
-        title={title}
-        titleIconVariant='warning'
-        variant={variant}
-        data-cy='modal_checkbox'
-      >
-        {children}
-      </Modal>
-    );
-  }
-}
+export const DeleteModal = ({
+  cancelAction,
+  children,
+  deleteAction,
+  isDisabled,
+  title,
+  spinner,
+  variant = 'small',
+}: IProps) => {
+  return (
+    <Modal
+      actions={[
+        <div data-cy='delete-button' key='delete'>
+          <Button
+            key='delete'
+            onClick={deleteAction}
+            variant='danger'
+            isDisabled={isDisabled}
+          >
+            {t`Delete`}
+            {spinner && <Spinner size='sm'></Spinner>}
+          </Button>
+        </div>,
+        <Button key='cancel' onClick={cancelAction} variant='link'>
+          {t`Cancel`}
+        </Button>,
+      ]}
+      isOpen={true}
+      onClose={cancelAction}
+      title={title}
+      titleIconVariant='warning'
+      variant={variant}
+      data-cy='modal_checkbox'
+    >
+      {children}
+    </Modal>
+  );
+};
diff --git a/src/components/empty-state/empty-state-custom.tsx b/src/components/empty-state/empty-state-custom.tsx
index ffd8d8b860..9d1897ce7f 100644
--- a/src/components/empty-state/empty-state-custom.tsx
+++ b/src/components/empty-state/empty-state-custom.tsx
@@ -18,26 +18,21 @@ interface IProps {
   variant?: 'xs' | 'small' | 'large' | 'xl' | 'full';
 }
 
-export class EmptyStateCustom extends React.Component<IProps> {
-  static defaultProps = {
-    variant: 'small',
-  };
-
-  render() {
-    return (
-      <EmptyState
-        variant={EmptyStateVariant[this.props.variant]}
-        data-cy='EmptyState'
-      >
-        <EmptyStateIcon icon={this.props.icon} />
-        <Title headingLevel='h4' size='lg'>
-          {this.props.title}
-        </Title>
-        <EmptyStateBody>{this.props.description}</EmptyStateBody>
-        {this.props.button && (
-          <EmptyStatePrimary>{this.props.button}</EmptyStatePrimary>
-        )}
-      </EmptyState>
-    );
-  }
-}
+export const EmptyStateCustom = ({
+  icon,
+  title,
+  description,
+  button,
+  variant = 'small',
+}: IProps) => {
+  return (
+    <EmptyState variant={EmptyStateVariant[variant]} data-cy='EmptyState'>
+      <EmptyStateIcon icon={icon} />
+      <Title headingLevel='h4' size='lg'>
+        {title}
+      </Title>
+      <EmptyStateBody>{description}</EmptyStateBody>
+      {button && <EmptyStatePrimary>{button}</EmptyStatePrimary>}
+    </EmptyState>
+  );
+};
diff --git a/src/components/empty-state/empty-state-filter.tsx b/src/components/empty-state/empty-state-filter.tsx
index 8eeb98f301..e5438444e3 100644
--- a/src/components/empty-state/empty-state-filter.tsx
+++ b/src/components/empty-state/empty-state-filter.tsx
@@ -8,21 +8,19 @@ interface IProps {
   clearAllFilters?: () => void;
 }
 
-export class EmptyStateFilter extends React.Component<IProps> {
-  render() {
-    return (
-      <EmptyStateCustom
-        title={t`No results found`}
-        description={t`No results match the filter criteria. Try changing your filter settings.`}
-        icon={SearchIcon}
-        button={
-          this.props.clearAllFilters ? (
-            <Button onClick={this.props.clearAllFilters} variant='link'>
-              {t`Clear all filters`}
-            </Button>
-          ) : null
-        }
-      />
-    );
-  }
-}
+export const EmptyStateFilter = (props: IProps) => {
+  return (
+    <EmptyStateCustom
+      title={t`No results found`}
+      description={t`No results match the filter criteria. Try changing your filter settings.`}
+      icon={SearchIcon}
+      button={
+        props.clearAllFilters ? (
+          <Button onClick={props.clearAllFilters} variant='link'>
+            {t`Clear all filters`}
+          </Button>
+        ) : null
+      }
+    />
+  );
+};
diff --git a/src/components/empty-state/empty-state-no-data.tsx b/src/components/empty-state/empty-state-no-data.tsx
index 6362380738..7aa58bfa92 100644
--- a/src/components/empty-state/empty-state-no-data.tsx
+++ b/src/components/empty-state/empty-state-no-data.tsx
@@ -9,15 +9,13 @@ interface IProps {
   description: ReactNode;
 }
 
-export class EmptyStateNoData extends React.Component<IProps> {
-  render() {
-    return (
-      <EmptyStateCustom
-        icon={this.props.button ? PlusCircleIcon : CubesIcon}
-        title={this.props.title}
-        description={this.props.description}
-        button={this.props.button}
-      />
-    );
-  }
-}
+export const EmptyStateNoData = (props: IProps) => {
+  return (
+    <EmptyStateCustom
+      icon={props.button ? PlusCircleIcon : CubesIcon}
+      title={props.title}
+      description={props.description}
+      button={props.button}
+    />
+  );
+};
diff --git a/src/components/empty-state/empty-state-unauthorized.tsx b/src/components/empty-state/empty-state-unauthorized.tsx
index 93fd1a97b7..d9a7617c55 100644
--- a/src/components/empty-state/empty-state-unauthorized.tsx
+++ b/src/components/empty-state/empty-state-unauthorized.tsx
@@ -4,21 +4,19 @@ import * as React from 'react';
 import { LoginLink } from 'src/components';
 import { EmptyStateCustom } from './empty-state-custom';
 
-export class EmptyStateUnauthorized extends React.Component {
-  render() {
-    return (
-      <EmptyStateCustom
-        icon={LockIcon}
-        title={t`You do not have access to Automation Hub`}
-        description={
-          <>
-            {t`Contact your organization administrator for more information.`}
-            <br />
-            <br />
-            <LoginLink button />
-          </>
-        }
-      />
-    );
-  }
-}
+export const EmptyStateUnauthorized = () => {
+  return (
+    <EmptyStateCustom
+      icon={LockIcon}
+      title={t`You do not have access to Automation Hub`}
+      description={
+        <>
+          {t`Contact your organization administrator for more information.`}
+          <br />
+          <br />
+          <LoginLink button />
+        </>
+      }
+    />
+  );
+};