feat(tag-cluster-type): add component (#455)

libs/pages/cluster/src/lib/ui/container/container.tsx

@@ -2,7 +2,7 @@ import { useLocation, useParams } from 'react-router-dom'
 import { ClusterButtonsActions } from '@qovery/shared/console-shared'
 import { ClusterEntity } from '@qovery/shared/interfaces'
 import { CLUSTER_SETTINGS_URL, CLUSTER_URL } from '@qovery/shared/routes'
-import { Header, Icon, IconAwesomeEnum, Skeleton, Tabs, Tag, TagSize } from '@qovery/shared/ui'
+import { Header, Icon, IconAwesomeEnum, Skeleton, Tabs, Tag, TagClusterType, TagSize } from '@qovery/shared/ui'
 
 export interface ContainerProps {
   children: React.ReactNode
@@ -38,6 +38,14 @@ export function Container(props: ContainerProps) {
           DEFAULT
         </Tag>
       )}
+      <Skeleton width={120} height={32} show={!cluster}>
+        <TagClusterType
+          className="text-text-500 border-element-light-lighter-400"
+          size={TagSize.BIG}
+          cloudProvider={cluster?.cloud_provider}
+          kubernetes={cluster?.kubernetes}
+        />
+      </Skeleton>
       <Skeleton width={120} height={32} show={!cluster}>
         <Tag size={TagSize.BIG} className="text-text-500 border border-element-light-lighter-400 truncate">
           {cluster?.region}

libs/pages/clusters/src/lib/ui/card-cluster/card-cluster.tsx

@@ -1,7 +1,7 @@
 import { StateEnum } from 'qovery-typescript-axios'
 import { ClusterButtonsActions } from '@qovery/shared/console-shared'
 import { ClusterEntity } from '@qovery/shared/interfaces'
-import { Icon, Skeleton, StatusChip, Tag } from '@qovery/shared/ui'
+import { Icon, Skeleton, StatusChip, Tag, TagClusterType } from '@qovery/shared/ui'
 import { getStatusClusterMessage } from '@qovery/shared/utils'
 
 export interface CardClusterProps {
@@ -78,6 +78,11 @@ export function CardCluster(props: CardClusterProps) {
             DEFAULT
           </Tag>
         )}
+        <TagClusterType
+          className="text-text-400 border-element-light-lighter-500 mr-2"
+          cloudProvider={cluster?.cloud_provider}
+          kubernetes={cluster?.kubernetes}
+        />
         <Tag dataTestId="tag-region" className="text-text-400 border border-element-light-lighter-500 truncate mr-2">
           {cluster.region}
         </Tag>

libs/shared/ui/src/index.ts

@@ -60,6 +60,7 @@ export * from './lib/components/table/table-row-filter/table-row-filter'
 export * from './lib/components/table/table-head-filter/table-head-filter'
 export * from './lib/components/tooltip/tooltip'
 export * from './lib/components/tag-mode/tag-mode'
+export * from './lib/components/tag-cluster-type/tag-cluster-type'
 export * from './lib/components/status-chip/status-chip'
 export * from './lib/components/status-label/status-label'
 export * from './lib/components/skeleton/skeleton'

libs/shared/ui/src/lib/components/tag-cluster-type/tag-cluster-type.spec.tsx

@@ -0,0 +1,48 @@
+import { render } from '__tests__/utils/setup-jest'
+import { CloudProviderEnum, KubernetesEnum } from 'qovery-typescript-axios'
+import TagClusterType, { TagClusterTypeProps } from './tag-cluster-type'
+
+describe('TagClusterType', () => {
+  let props: TagClusterTypeProps = {
+    cloudProvider: CloudProviderEnum.AWS,
+    kubernetes: KubernetesEnum.MANAGED,
+  }
+
+  it('should render successfully', () => {
+    const { baseElement } = render(<TagClusterType {...props} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should render content for AWS and Managed', () => {
+    const { baseElement } = render(<TagClusterType {...props} />)
+    expect(baseElement.textContent).toBe('Managed (EKS)')
+  })
+
+  it('should render content for AWS and K3S', () => {
+    props = {
+      cloudProvider: CloudProviderEnum.AWS,
+      kubernetes: KubernetesEnum.K3_S,
+    }
+
+    const { baseElement } = render(<TagClusterType {...props} />)
+    expect(baseElement.textContent).toBe('EC2 (K3S)')
+  })
+
+  it('should render content for Scaleway', () => {
+    props = {
+      cloudProvider: CloudProviderEnum.SCW,
+    }
+
+    const { baseElement } = render(<TagClusterType {...props} />)
+    expect(baseElement.textContent).toBe('Managed (Kapsule)')
+  })
+
+  it('should render content for DO', () => {
+    props = {
+      cloudProvider: CloudProviderEnum.DO,
+    }
+
+    const { baseElement } = render(<TagClusterType {...props} />)
+    expect(baseElement.textContent).toBe('Managed (DOKS)')
+  })
+})

libs/shared/ui/src/lib/components/tag-cluster-type/tag-cluster-type.stories.tsx

@@ -0,0 +1,18 @@
+import { select } from '@storybook/addon-knobs'
+import { Meta, Story } from '@storybook/react'
+import { CloudProviderEnum, KubernetesEnum } from 'qovery-typescript-axios'
+import { TagClusterType, TagClusterTypeProps } from './tag-cluster-type'
+
+export default {
+  component: TagClusterType,
+  title: 'Tag/TagClusterType',
+} as Meta
+
+const Template: Story<TagClusterTypeProps> = (args) => <TagClusterType {...args} />
+
+export const Primary = Template.bind({})
+
+Primary.args = {
+  cloud_provider: select('Cloud Provider', CloudProviderEnum, CloudProviderEnum.AWS),
+  kubernetes: select('Kubernetes', KubernetesEnum, KubernetesEnum.MANAGED),
+}

libs/shared/ui/src/lib/components/tag-cluster-type/tag-cluster-type.tsx

@@ -0,0 +1,42 @@
+import { CloudProviderEnum, KubernetesEnum } from 'qovery-typescript-axios'
+import { Tag, TagSize } from '../tag/tag'
+
+export interface TagClusterTypeProps {
+  cloudProvider?: CloudProviderEnum
+  kubernetes?: KubernetesEnum
+  size?: TagSize
+  className?: string
+}
+
+export function TagClusterType(props: TagClusterTypeProps) {
+  const { cloudProvider, kubernetes, size = TagSize.NORMAL, className = '' } = props
+
+  const content = (cloudProvider?: CloudProviderEnum, kubernetes?: KubernetesEnum): string => {
+    // AWS
+    if (kubernetes === KubernetesEnum.K3_S && cloudProvider === CloudProviderEnum.AWS) {
+      return 'EC2 (K3S)'
+    } else if (kubernetes === KubernetesEnum.MANAGED && cloudProvider === CloudProviderEnum.AWS) {
+      return 'Managed (EKS)'
+    }
+
+    // Digital Ocean
+    if (cloudProvider === CloudProviderEnum.DO) {
+      return 'Managed (DOKS)'
+    }
+
+    // Scaleway
+    if (cloudProvider === CloudProviderEnum.SCW) {
+      return 'Managed (Kapsule)'
+    }
+
+    return ''
+  }
+
+  return (
+    <Tag size={size} className={`border truncate ${className}`}>
+      {content(cloudProvider, kubernetes)}
+    </Tag>
+  )
+}
+
+export default TagClusterType