From 03a844398f2cadf22f494479b9e93dc7fe6c48b8 Mon Sep 17 00:00:00 2001
From: Kevin Cormier <kcormier@redhat.com>
Date: Wed, 13 Nov 2024 14:53:07 -0500
Subject: [PATCH] WIP Remove AcmProviderCard

Signed-off-by: Kevin Cormier <kcormier@redhat.com>
---
 .../AcmProviderCard.stories.tsx               |  28 -----
 .../AcmProviderCard/AcmProviderCard.test.tsx  |  59 ---------
 .../AcmProviderCard/AcmProviderCard.tsx       | 118 +-----------------
 3 files changed, 2 insertions(+), 203 deletions(-)
 delete mode 100644 frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.stories.tsx
 delete mode 100644 frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.test.tsx

diff --git a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.stories.tsx b/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.stories.tsx
deleted file mode 100644
index d4fe365d489..00000000000
--- a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/* Copyright Contributors to the Open Cluster Management project */
-
-import { useState } from 'react'
-import { AcmOverviewProviders, AcmProviderCard } from './AcmProviderCard'
-import { Provider } from '../'
-
-export default {
-  title: 'Provider',
-  component: AcmProviderCard,
-}
-
-export const ProviderCard = () => {
-  const [filter, setFilter] = useState<string | undefined>(undefined)
-  const providers = Object.values(Provider).map((provider: Provider, i) => ({
-    provider,
-    clusterCount: i <= 1 ? i : Math.floor(Math.random() * 100 + 1),
-    danger: i === 0,
-    isSelected: provider === filter,
-    onClick: (provider: string) => {
-      if (provider === filter) {
-        setFilter(undefined)
-      } else {
-        setFilter(provider)
-      }
-    },
-  }))
-  return <AcmOverviewProviders providers={providers} />
-}
diff --git a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.test.tsx b/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.test.tsx
deleted file mode 100644
index 03ff62c64d4..00000000000
--- a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/* Copyright Contributors to the Open Cluster Management project */
-
-import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { axe } from 'jest-axe'
-import { AcmOverviewProviders, AcmProviderCard } from './AcmProviderCard'
-import { Provider } from '../'
-
-describe('AcmOverviewProviders', () => {
-  const providers = Object.values(Provider).map((provider, i) => ({
-    provider,
-    clusterCount: Math.floor(Math.random() * 100 + 1),
-    danger: i === 0,
-    onClick: jest.fn(),
-  }))
-  test('renders', () => {
-    const { getByTestId } = render(<AcmOverviewProviders providers={providers} />)
-    Object.values(Provider).forEach((provider) => {
-      const id = provider.toLowerCase().replace(/\s+/g, '-')
-      expect(getByTestId(`${id}-provider-card`)).toBeInTheDocument()
-    })
-  })
-  test('has zero accessibility defects', async () => {
-    const { container } = render(<AcmOverviewProviders providers={providers} />)
-    expect(await axe(container)).toHaveNoViolations()
-  })
-})
-
-describe('AcmProviderCard', () => {
-  const onClick = jest.fn()
-
-  test('renders and can be interacted with', () => {
-    const ProviderCard = () => <AcmProviderCard provider={Provider.aws} onClick={onClick} clusterCount={5} />
-    const { getByTestId, getByText } = render(<ProviderCard />)
-    expect(getByTestId('aws-provider-card')).toBeInTheDocument()
-    userEvent.tab()
-    expect(getByTestId('aws-provider-card')).toHaveFocus()
-    userEvent.type(getByTestId('aws-provider-card'), '{enter}')
-    expect(onClick).toHaveBeenCalled()
-    expect(onClick).toHaveBeenCalledWith('aws')
-    userEvent.type(getByTestId('aws-provider-card'), '{space}')
-    expect(onClick).toHaveBeenCalled()
-    expect(onClick).toHaveBeenCalledWith('aws')
-    userEvent.click(getByTestId('aws-provider-card'))
-    expect(onClick).toHaveBeenCalled()
-    expect(onClick).toHaveBeenCalledWith('aws')
-    expect(getByText('Clusters')).toBeInstanceOf(HTMLParagraphElement)
-  })
-  test('can render a danger state', () => {
-    const ProviderCard = () => <AcmProviderCard danger provider={Provider.aws} onClick={onClick} clusterCount={1} />
-    const { container } = render(<ProviderCard />)
-    expect(container.querySelector('#aws-provider-card .danger-icon')).toBeTruthy()
-  })
-  test('has zero accessibility defects', async () => {
-    const ProviderCard = () => <AcmProviderCard danger provider={Provider.aws} onClick={onClick} clusterCount={0} />
-    const { container } = render(<ProviderCard />)
-    expect(await axe(container)).toHaveNoViolations()
-  })
-})
diff --git a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.tsx b/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.tsx
index 23f2b30c584..82e769660ee 100644
--- a/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.tsx
+++ b/frontend/src/ui-components/AcmProvider/AcmProviderCard/AcmProviderCard.tsx
@@ -1,121 +1,7 @@
 /* Copyright Contributors to the Open Cluster Management project */
 
-import { css } from '@emotion/css'
-import {
-  Card,
-  CardFooter,
-  CardHeader,
-  Gallery,
-  GalleryItem,
-  Icon,
-  Stack,
-  StackItem,
-  Text,
-  TextVariants,
-  Title,
-} from '@patternfly/react-core'
-import { ExclamationCircleIcon } from '@patternfly/react-icons'
-import { Provider, ProviderIconMap, ProviderShortTextMap } from '../'
-import { Trans, useTranslation } from '../../../lib/acm-i18next'
 import { AddCluster } from '../../../routes/Infrastructure/Clusters/ManagedClusters/components/AddCluster'
-import { AcmEmptyState } from '../../AcmEmptyState'
-import { AcmIcon } from '../../AcmIcons/AcmIcons'
 
-const icon = css({
-  '& svg, & img': {
-    width: '56px',
-    height: '56px',
-  },
-})
-const providerTitle = css({
-  marginTop: '4px',
-  fontSize: 'var(--pf-v5-c-title--m-3xl--FontSize)',
-  lineHeight: 'var(--pf-v5-c-title--m-3xl--LineHeight)',
-})
-const dangerIcon = css({
-  width: '16px',
-  height: '16px',
-  marginLeft: '8px',
-  verticalAlign: 'unset !important',
-})
-const clusterCount = css({
-  fontSize: '28px',
-})
-const clusterText = css({
-  fontSize: '14px',
-  fontWeight: 600,
-})
-
-type ProviderCardProps = {
-  provider: Provider
-  clusterCount: number | undefined
-  onClick: (provider: string) => void
-  danger?: boolean
-  isSelected?: boolean
-}
-
-export function AcmOverviewProviders(props: { providers: ProviderCardProps[] }) {
-  const { t } = useTranslation()
-  if (props.providers.length === 0) {
-    return (
-      <AcmEmptyState
-        title={t('managed.emptyStateHeader')}
-        message={<Trans i18nKey="managed.emptyStateMsg" components={{ bold: <strong /> }} />}
-        action={<AddCluster type="button" />}
-      />
-    )
-  }
-  return (
-    <Gallery hasGutter>
-      {props.providers.map((provider) => (
-        <GalleryItem key={provider.provider}>
-          <AcmProviderCard {...provider} />
-        </GalleryItem>
-      ))}
-    </Gallery>
-  )
-}
-
-export function AcmProviderCard(props: ProviderCardProps) {
-  const { t } = useTranslation()
-  return (
-    <Card
-      onClick={() => props.onClick(props.provider)}
-      onKeyDown={(event: React.KeyboardEvent) => [13, 32].includes(event.keyCode) && props.onClick(props.provider)}
-      isSelectable
-      isSelected={props.isSelected}
-      id={`${props.provider}-provider-card`}
-    >
-      <Stack>
-        <StackItem>
-          <CardHeader>
-            <>
-              <div className={icon}>
-                <AcmIcon icon={ProviderIconMap[props.provider]} />
-              </div>
-              <Title headingLevel="h2" size="3xl" className={providerTitle} style={{ fontWeight: 300 }}>
-                {ProviderShortTextMap[props.provider]}
-                {props.danger && (
-                  <Icon status="danger">
-                    <ExclamationCircleIcon className={dangerIcon} />
-                  </Icon>
-                )}
-              </Title>
-            </>
-          </CardHeader>
-        </StackItem>
-        <StackItem isFilled></StackItem>
-        <StackItem>
-          <CardFooter>
-            <Text component={TextVariants.p} className={clusterCount}>
-              {props.clusterCount}
-            </Text>
-            <Text component={TextVariants.p} className={clusterText}>
-              {props.clusterCount === 1 ? t('Cluster') : t('Clusters')}
-            </Text>
-          </CardFooter>
-        </StackItem>
-      </Stack>
-    </Card>
-  )
+export function AcmOverviewProviders() {
+  return <AddCluster type="button" />
 }