Skip to content

Commit

Permalink
feat(service-list): feedback (#1802)
Browse files Browse the repository at this point in the history 
* Allow tooltip for small size

* Hide force run when deploying service

* Remove animation for deployment queue
  • Loading branch information
@RemiBonnet
RemiBonnet authored Jan 6, 2025
1 parent f70cd61 commit 359ceb6
Show file tree
Hide file tree
Showing 10 changed files with 239 additions and 88 deletions.
45 changes: 40 additions & 5 deletions ...ns/environments/feature/src/lib/environment-action-toolbar/environment-action-toolbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { type Environment, OrganizationEventTargetType, StateEnum } from 'qovery-typescript-axios'
import { useLocation } from 'react-router-dom'
import { match } from 'ts-pattern'
import { AUDIT_LOGS_PARAMS_URL, ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL } from '@qovery/shared/routes'
import {
ActionToolbar,
Expand Down Expand Up @@ -112,7 +113,23 @@ function MenuManageDeployment({
>
<Tooltip content="Manage Deployment">
<div className="flex h-full w-full items-center justify-center">
<Icon iconName="play" className="mr-4" />
{match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => <Icon iconName="loader" className="mr-3 animate-spin" />
)
.otherwise(() => (
<Icon iconName="play" className="mr-4" />
))}
<Icon iconName="chevron-down" />
</div>
</Tooltip>
Expand All @@ -139,10 +156,28 @@ function MenuManageDeployment({
Stop
</DropdownMenu.Item>
)}
<DropdownMenu.Separator />
<DropdownMenu.Item icon={<Icon iconName="rotate" />} onSelect={openUpdateAllModal}>
Deploy latest version for..
</DropdownMenu.Item>
{match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(() => (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item icon={<Icon iconName="rotate" />} onSelect={openUpdateAllModal}>
Deploy latest version for..
</DropdownMenu.Item>
</>
))}
</DropdownMenu.Content>
</DropdownMenu.Root>
)
Expand Down
133 changes: 90 additions & 43 deletions libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,24 +386,39 @@ function MenuManageDeployment({
Restart Service
</DropdownMenu.Item>
)}
{service.serviceType === 'JOB' && (
<DropdownMenu.Item
icon={<Icon iconName="play" />}
onSelect={() =>
openModal({
content: (
<ForceRunModalFeature
organizationId={environment.organization.id}
projectId={environment.project.id}
service={service}
/>
),
})
}
>
Force Run
</DropdownMenu.Item>
)}
{service.serviceType === 'JOB' &&
match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(() => (
<DropdownMenu.Item
icon={<Icon iconName="play" />}
onSelect={() =>
openModal({
content: (
<ForceRunModalFeature
organizationId={environment.organization.id}
projectId={environment.project.id}
service={service}
/>
),
})
}
>
Force Run
</DropdownMenu.Item>
))}
{isStopAvailable(state) && (
<DropdownMenu.Item icon={<Icon iconName="circle-stop" />} onSelect={mutationStop}>
Stop
Expand All @@ -418,19 +433,35 @@ function MenuManageDeployment({
.with({ serviceType: 'APPLICATION' }, ({ git_repository }) => git_repository)
.with({ serviceType: 'JOB' }, ({ source }) => source.docker?.git_repository)
.exhaustive()
return (
<>
<DropdownMenu.Separator />
{gitRepository && (
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployCommitVersion(service, gitRepository, 'Deploy another version')}
>
Deploy another version
</DropdownMenu.Item>
)}
</>
)

return match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(
() =>
gitRepository && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployCommitVersion(service, gitRepository, 'Deploy another version')}
>
Deploy another version
</DropdownMenu.Item>
</>
)
)
}
)
.with(
Expand All @@ -442,19 +473,35 @@ function MenuManageDeployment({
.with({ serviceType: 'CONTAINER' }, (source) => source)
.with({ serviceType: 'JOB' }, ({ source: { image } }) => image)
.exhaustive()
return (
containerSource.tag && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployTagVersion(service, containerSource)}
>
Deploy another version
</DropdownMenu.Item>
</>

return match(state)
.with(
'DEPLOYING',
'RESTARTING',
'BUILDING',
'DELETING',
'CANCELING',
'STOPPING',
'DEPLOYMENT_QUEUED',
'DELETE_QUEUED',
'STOP_QUEUED',
'RESTART_QUEUED',
() => null
)
.otherwise(
() =>
containerSource.tag && (
<>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={<Icon iconName="clock-rotate-left" />}
onSelect={() => deployTagVersion(service, containerSource)}
>
Deploy another version
</DropdownMenu.Item>
</>
)
)
)
}
)
.with(
Expand Down
32 changes: 16 additions & 16 deletions libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ServiceList should match snapshot 1`] = `
class="flex grow flex-col justify-between"
>
<table
class="divide-y divide-neutral-200 text-neutral-400 w-full min-w-[980px] text-ssm"
class="divide-y divide-neutral-200 text-neutral-400 w-full min-w-[1080px] overflow-x-scroll text-ssm"
>
<thead>
<tr>
Expand All @@ -29,7 +29,7 @@ exports[`ServiceList should match snapshot 1`] = `
</th>
<th
class="h-11 text-left px-6 border-r pl-0 font-medium"
style="width: 50%;"
style="width: 57%;"
>
<div
class="relative inline-block"
Expand Down Expand Up @@ -75,13 +75,13 @@ exports[`ServiceList should match snapshot 1`] = `
</th>
<th
class="h-11 text-left px-6 font-medium"
style="width: 35%;"
style="width: 30%;"
>
Target version
</th>
<th
class="h-11 text-left px-6 font-medium"
style="width: 5%;"
style="width: 3%;"
>
<button
class="flex items-center gap-1 truncate cursor-pointer select-none"
Expand Down Expand Up @@ -117,7 +117,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -414,7 +414,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -455,7 +455,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -667,7 +667,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -757,7 +757,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -798,7 +798,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -1312,7 +1312,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -1406,7 +1406,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down Expand Up @@ -1447,7 +1447,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 border-r pl-0 first:relative"
style="width: 50%;"
style="width: 57%;"
>
<div
class="flex items-center justify-between"
Expand Down Expand Up @@ -1754,7 +1754,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 35%;"
style="width: 30%;"
>
<div
class="flex items-center gap-1"
Expand Down Expand Up @@ -1848,7 +1848,7 @@ exports[`ServiceList should match snapshot 1`] = `
</td>
<td
class="h-14 py-0 px-6 first:relative"
style="width: 5%;"
style="width: 3%;"
>
<a
class="cursor-pointer transition duration-100 font-medium items-center text-sm group flex w-full translate-x-3 justify-end gap-1 text-right text-neutral-350 hover:translate-x-0 hover:text-brand-500"
Expand Down
Loading

0 comments on commit 359ceb6

Please sign in to comment.