Skip to content

Commit

Permalink
feat(ui): reduce ButtonLegacy usage
Browse files Browse the repository at this point in the history
  • Loading branch information
ctjhoa committed Feb 29, 2024
1 parent 77b62bf commit 3d87239
Show file tree
Hide file tree
Showing 17 changed files with 161 additions and 179 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
Button,
EmptyState,
Icon,
Link,
StatusChip,
TablePrimitives,
Tooltip,
Expand Down Expand Up @@ -148,23 +149,22 @@ export function EnvironmentList({ project, clusterAvailable, className, ...props
const environment = info.row.original
return (
<Tooltip content="See overview">
<Button
<Link
as="button"
to={
SERVICES_URL(environment.organization.id, environment.project.id, environment.id) +
SERVICES_GENERAL_URL
}
onClick={(e) => e.stopPropagation()}
className="text-xs gap-2 whitespace-nowrap"
size="md"
color="neutral"
variant="outline"
radius="full"
onClick={(e) => {
e.stopPropagation()
navigate(
SERVICES_URL(environment.organization.id, environment.project.id, environment.id) +
SERVICES_GENERAL_URL
)
}}
>
<StatusChip status={environment.runningStatus?.state} />
{value}
</Button>
</Link>
</Tooltip>
)
},
Expand All @@ -181,20 +181,19 @@ export function EnvironmentList({ project, clusterAvailable, className, ...props
const environment = info.row.original
return (
<Tooltip content="See logs">
<Button
<Link
as="button"
to={ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)}
onClick={(e) => e.stopPropagation()}
className="text-xs gap-2 whitespace-nowrap"
size="md"
color="neutral"
variant="outline"
radius="full"
onClick={(e) => {
e.stopPropagation()
navigate(ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id))
}}
>
<StatusChip status={environment.deploymentStatus?.state} />
{value}
</Button>
</Link>
</Tooltip>
)
},
Expand All @@ -211,18 +210,17 @@ export function EnvironmentList({ project, clusterAvailable, className, ...props
const environment = info.row.original
return (
<Tooltip content={`${environment.cluster_name} (${environment.cloud_provider.cluster})`}>
<Button
<Link
as="button"
to={CLUSTER_URL(environment.organization.id, environment.cluster_id)}
onClick={(e) => e.stopPropagation()}
color="neutral"
variant="surface"
size="xs"
onClick={(e) => {
e.stopPropagation()
navigate(CLUSTER_URL(environment.organization.id, environment.cluster_id))
}}
>
<Icon className="mr-2" name={environment.cloud_provider.provider} width="16" />
<Truncate text={value} truncateLimit={30} />
</Button>
</Link>
</Tooltip>
)
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ export interface EnvironmentModeProps extends Omit<BadgeProps, 'color'> {
export function EnvironmentMode({ mode, ...props }: EnvironmentModeProps) {
return match(mode)
.with('PRODUCTION', () => (
<Badge variant="surface" color="red" {...props}>
<Badge variant="outline" color="red" {...props}>
Production
</Badge>
))
.with('DEVELOPMENT', () => (
<Badge variant="surface" color="neutral" {...props}>
<Badge variant="outline" color="neutral" {...props}>
Development
</Badge>
))
.with('PREVIEW', () => (
<Badge variant="surface" color="purple" {...props}>
<Badge variant="outline" color="purple" {...props}>
Preview
</Badge>
))
.with('STAGING', () => (
<Badge variant="surface" color="neutral" {...props}>
<Badge variant="outline" color="neutral" {...props}>
Staging
</Badge>
))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function GitRepository({
<Dt>Repository:</Dt>
<Dd>
<a href={buildGitProviderUrl(gitRepository.url)} target="_blank" rel="noopener noreferrer">
<Badge variant="surface" size="xs" className="gap-1">
<Button color="neutral" variant="surface" size="xs" className="gap-1">
<Icon
name={
gitRepository.url.includes('//github')
Expand All @@ -68,7 +68,7 @@ function GitRepository({
width={14}
/>
<Truncate text={gitRepository.name} truncateLimit={18} />
</Badge>
</Button>
</a>
</Dd>
</>
Expand All @@ -82,10 +82,10 @@ function GitRepository({
target="_blank"
rel="noopener noreferrer"
>
<Badge variant="surface" size="xs" className="gap-1">
<Button color="neutral" variant="surface" size="xs" className="gap-1">
<Icon iconName="code-branch" height={14} width={14} />
<Truncate text={gitRepository.branch} truncateLimit={18} />
</Badge>
</Button>
</a>
</Dd>
</>
Expand Down
92 changes: 54 additions & 38 deletions libs/domains/services/feature/src/lib/service-list/service-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ import {
Button,
Checkbox,
EmptyState,
ExternalLink,
Icon,
Link,
StatusChip,
TablePrimitives,
Tooltip,
Expand Down Expand Up @@ -244,30 +246,27 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
cell: (info) => {
const value = info.getValue()
const service = info.row.original
const link = match(service)
.with(
{ serviceType: ServiceTypeEnum.DATABASE },
({ id }) => DATABASE_URL(organizationId, projectId, environmentId, id) + DATABASE_GENERAL_URL
)
.otherwise(({ id }) => APPLICATION_URL(organizationId, projectId, environmentId, id) + SERVICES_GENERAL_URL)
return (
<Tooltip content="See overview">
<Button
<Link
as="button"
to={link}
onClick={(e) => e.stopPropagation()}
className="text-xs gap-2 whitespace-nowrap"
size="md"
color="neutral"
variant="outline"
radius="full"
onClick={(e) => {
e.stopPropagation()
const link = match(service)
.with(
{ serviceType: ServiceTypeEnum.DATABASE },
({ id }) => DATABASE_URL(organizationId, projectId, environmentId, id) + DATABASE_GENERAL_URL
)
.otherwise(
({ id }) => APPLICATION_URL(organizationId, projectId, environmentId, id) + SERVICES_GENERAL_URL
)
navigate(link)
}}
>
<StatusChip status={service.runningStatus?.state} />
{value}
</Button>
</Link>
</Tooltip>
)
},
Expand All @@ -284,22 +283,19 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
const service = info.row.original
return (
<Tooltip content="See logs">
<Button
<Link
as="button"
to={ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(service.id)}
onClick={(e) => e.stopPropagation()}
className="text-xs gap-2 whitespace-nowrap"
size="md"
color="neutral"
variant="outline"
radius="full"
onClick={(e) => {
e.stopPropagation()
navigate(
ENVIRONMENT_LOGS_URL(organizationId, projectId, environmentId) + DEPLOYMENT_LOGS_URL(service.id)
)
}}
>
<StatusChip status={service.deploymentStatus?.state} />
{value}
</Button>
</Link>
</Tooltip>
)
},
Expand All @@ -323,29 +319,41 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
<div className="flex flex-col gap-1">
<LastCommit gitRepository={gitRepository} service={service} />
{gitRepository.branch && gitRepository.url && (
<a
href={buildGitProviderUrl(gitRepository.url, gitRepository.branch)}
target="_blank"
rel="noopener noreferrer"
>
<Badge variant="surface" size="xs" className="gap-1 whitespace-nowrap">
<span className="inline-block">
<ExternalLink
as="button"
href={buildGitProviderUrl(gitRepository.url, gitRepository.branch)}
onClick={(e) => e.stopPropagation()}
color="neutral"
variant="surface"
size="xs"
className="gap-1 whitespace-nowrap"
>
<Icon iconName="code-branch" height={14} width={14} />
<Truncate text={gitRepository.branch} truncateLimit={18} />
</Badge>
</a>
</ExternalLink>
</span>
)}
</div>
</div>
)
const containerInfo = (containerImage?: Pick<ContainerResponse, 'image_name' | 'tag' | 'registry'>) =>
containerImage && (
<div className="flex flex-col gap-1 ml-7" onClick={(e) => e.stopPropagation()}>
<a href={containerImage.registry.url} target="_blank" rel="noopener noreferrer">
<Badge variant="surface" size="xs" className="items-center gap-1 capitalize whitespace-nowrap">
<span className="inline-block">
<ExternalLink
as="button"
href={containerImage.registry.url}
onClick={(e) => e.stopPropagation()}
color="neutral"
variant="surface"
size="xs"
className="items-center gap-1 capitalize whitespace-nowrap"
>
<Icon width={16} name={containerRegistryKindToIcon(containerImage.registry.kind)} />
<Truncate text={containerImage.registry.name.toLowerCase()} truncateLimit={18} />
</Badge>
</a>
</ExternalLink>
</span>
<div>
<Badge variant="surface" size="xs" className="gap-1 whitespace-nowrap">
<Icon width={16} name={IconEnum.CONTAINER} />
Expand All @@ -366,12 +374,20 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
const helmInfo = (helmRepository?: HelmResponseAllOfSourceOneOf1Repository) =>
helmRepository && (
<div className="flex flex-col gap-1 ml-7" onClick={(e) => e.stopPropagation()}>
<a href={helmRepository.repository?.url} target="_blank" rel="noopener noreferrer">
<Badge variant="surface" size="xs" className="items-center gap-1 whitespace-nowrap">
<span className="inline-block">
<ExternalLink
as="button"
href={helmRepository.repository?.url}
onClick={(e) => e.stopPropagation()}
color="neutral"
variant="surface"
size="xs"
className="items-center gap-1 whitespace-nowrap"
>
<Icon width={16} name={IconEnum.HELM_OFFICIAL} />
<Truncate text={(helmRepository.repository?.name ?? '').toLowerCase()} truncateLimit={18} />
</Badge>
</a>
</ExternalLink>
</span>
<div>
<Badge variant="surface" size="xs" className="gap-1 whitespace-nowrap">
<Icon width={16} name={IconEnum.HELM_OFFICIAL} />
Expand Down
13 changes: 10 additions & 3 deletions libs/pages/application/src/lib/ui/container/container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { EnvironmentMode } from '@qovery/domains/environments/feature'
import { type AnyService, type Database } from '@qovery/domains/services/data-access'
import { NeedRedeployFlag, ServiceActionToolbar } from '@qovery/domains/services/feature'
import { IconEnum } from '@qovery/shared/enums'
import { Badge, Header, Icon, Section, Skeleton, Tooltip } from '@qovery/shared/ui'
import { CLUSTER_URL } from '@qovery/shared/routes'
import { Header, Icon, Link, Section, Skeleton, Tooltip } from '@qovery/shared/ui'
import TabsFeature from '../../feature/tabs-feature/tabs-feature'

export const ApplicationContext = createContext<{
Expand Down Expand Up @@ -39,10 +40,16 @@ export function Container({ service, environment, children }: PropsWithChildren<
)}
<Skeleton width={120} height={22} show={!cluster}>
<Tooltip content={cluster?.name ?? ''}>
<Badge size="xs" variant="outline">
<Link
as="button"
color="neutral"
variant="surface"
size="xs"
to={CLUSTER_URL(environment?.organization.id, environment?.cluster_id)}
>
<Icon name={environment?.cloud_provider.provider as IconEnum} width="16" />
<p className="ml-1.5 max-w-[200px] truncate">{cluster?.name}</p>
</Badge>
</Link>
</Tooltip>
</Skeleton>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
import { type Cluster } from 'qovery-typescript-axios'
import { useParams } from 'react-router-dom'
import { CLUSTERS_CREATION_GENERAL_URL, CLUSTERS_CREATION_URL, CLUSTERS_URL } from '@qovery/shared/routes'
import {
ButtonLegacy,
EmptyState,
Heading,
HelpSection,
IconAwesomeEnum,
LoaderSpinner,
Section,
} from '@qovery/shared/ui'
import { EmptyState, Heading, HelpSection, Icon, Link, LoaderSpinner, Section } from '@qovery/shared/ui'
import CardCluster from '../card-cluster/card-cluster'

export interface PageClustersGeneralProps {
Expand All @@ -31,9 +23,10 @@ export function PageClustersGeneral(props: PageClustersGeneralProps) {
<Heading className="mb-2">Manage your clusters</Heading>
<p className="text-neutral-400 text-xs">Manage your infrastructure across different Cloud providers.</p>
</div>
<ButtonLegacy iconRight={IconAwesomeEnum.CIRCLE_PLUS} link={goToCreateCluster}>
<Link as="button" to={goToCreateCluster} className="gap-2" size="lg">
Add Cluster
</ButtonLegacy>
<Icon iconName="circle-plus" />
</Link>
</div>
{loading && clusters?.length === 0 ? (
<div data-testid="clusters-loader" className="flex justify-center">
Expand All @@ -52,9 +45,9 @@ export function PageClustersGeneral(props: PageClustersGeneralProps) {
title="No cluster set"
description="A cluster is necessary to run your applications with Qovery"
>
<ButtonLegacy className="mt-5" link={goToCreateCluster}>
<Link as="button" to={goToCreateCluster} className="mt-5" size="md">
Add Cluster
</ButtonLegacy>
</Link>
</EmptyState>
)
)}
Expand Down
Loading

0 comments on commit 3d87239

Please sign in to comment.