Skip to content

Commit

Permalink
feat(logs): add action toolbar for pipeline and deployment (#1786)
Browse files Browse the repository at this point in the history
* refacto: environment-action-toolbar to avoid circular dependencies

* feat: add action-toolbar pipeline

* feat: add service-action-toolbar in the header-logs

* feat: update all modal with dark version
  • Loading branch information
RemiBonnet authored Dec 12, 2024
1 parent 0aa212d commit e1165cb
Show file tree
Hide file tree
Showing 41 changed files with 249 additions and 173 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function EnvironmentStages({
</HeaderEnvironmentStages>
<div className="flex h-[calc(100vh-120px)] justify-center border border-t-0 border-neutral-500 bg-neutral-600">
<div className="h-full w-full">
<div className="flex h-full gap-0.5 overflow-y-scroll py-6 pl-6 pr-4">
<div className="flex h-full gap-0.5 overflow-y-scroll py-6 pl-4 pr-3">
{!deploymentStages ? (
<div className="mt-6 flex h-full w-full justify-center">
<LoaderSpinner className="h-6 w-6" theme="dark" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import clsx from 'clsx'
import { type DeploymentHistoryEnvironmentV2, type Environment, type EnvironmentStatus } from 'qovery-typescript-axios'
import { type PropsWithChildren } from 'react'
import { EnvironmentActionToolbar } from '@qovery/domains/environments/feature'
import { IconEnum } from '@qovery/shared/enums'
import { ActionTriggerStatusChip, Icon, Tooltip } from '@qovery/shared/ui'
import { dateUTCString } from '@qovery/shared/util-dates'
Expand Down Expand Up @@ -59,6 +60,7 @@ export function HeaderEnvironmentStages({
</Tooltip>
)}
</span>
<EnvironmentActionToolbar variant="deployment" environment={environment} />
{deploymentHistory?.trigger_action && (
<>
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="6" fill="none" viewBox="0 0 5 6">
Expand Down
1 change: 1 addition & 0 deletions libs/domains/environments/feature/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ export * from './lib/hooks/use-deploy-environment/use-deploy-environment'
export * from './lib/hooks/use-check-dockerfile/use-check-dockerfile'
export * from './lib/hooks/use-lifecycle-templates/use-lifecycle-templates'
export * from './lib/hooks/use-lifecycle-template/use-lifecycle-template'
export * from './lib/hooks/use-deploy-all-services/use-deploy-all-services'
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ exports[`CreateCloneEnvironmentModal should match snapshots 1`] = `
class="p-5"
>
<h2
class="h4 max-w-sm truncate text-neutral-400"
class="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50"
>
Create Environment
</h2>
<p
class="mt-2 text-sm text-neutral-350"
class="mt-2 text-sm text-neutral-350 dark:text-neutral-50"
>
Create a new environment and deploy your applications.
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ jest.mock('../hooks/use-deployment-status/use-deployment-status', () => {
}
})

jest.mock('@qovery/domains/services/feature', () => ({
jest.mock('../hooks/use-service-count/use-service-count', () => ({
useServiceCount: () => ({
data: mockServices,
isFetched: true,
Expand All @@ -49,4 +49,13 @@ describe('EnvironmentActionToolbar', () => {

expect(baseElement).toMatchSnapshot()
})

it('should have variant with only deployment actions', () => {
renderWithProviders(<EnvironmentActionToolbar environment={mockEnvironment} variant="deployment" />, {
container: document.body,
})

expect(screen.getByLabelText(/manage deployment/i)).toBeInTheDocument()
expect(screen.queryByLabelText(/other actions/i)).not.toBeInTheDocument()
})
})
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { type Environment, OrganizationEventTargetType, StateEnum } from 'qovery-typescript-axios'
import { useLocation } from 'react-router-dom'
import { UpdateAllModal, useServiceCount } from '@qovery/domains/services/feature'
import { AUDIT_LOGS_PARAMS_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
import {
ActionToolbar,
Expand All @@ -25,10 +24,22 @@ import { useCancelDeploymentEnvironment } from '../hooks/use-cancel-deployment-e
import { useDeleteEnvironment } from '../hooks/use-delete-environment/use-delete-environment'
import { useDeployEnvironment } from '../hooks/use-deploy-environment/use-deploy-environment'
import { useDeploymentStatus } from '../hooks/use-deployment-status/use-deployment-status'
import { useServiceCount } from '../hooks/use-service-count/use-service-count'
import { useStopEnvironment } from '../hooks/use-stop-environment/use-stop-environment'
import { TerraformExportModal } from '../terraform-export-modal/terraform-export-modal'
import { UpdateAllModal } from '../update-all-modal/update-all-modal'

function MenuManageDeployment({ environment, state }: { environment: Environment; state: StateEnum }) {
type ActionToolbarVariant = 'default' | 'deployment'

function MenuManageDeployment({
environment,
state,
variant,
}: {
environment: Environment
state: StateEnum
variant: ActionToolbarVariant
}) {
const { openModal } = useModal()
const { openModalConfirmation } = useModalConfirmation()
const { mutate: deployEnvironment } = useDeployEnvironment({ projectId: environment.project.id })
Expand Down Expand Up @@ -83,7 +94,12 @@ function MenuManageDeployment({ environment, state }: { environment: Environment
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<ActionToolbar.Button aria-label="Manage Deployment">
<ActionToolbar.Button
aria-label="Manage Deployment"
size={variant === 'default' ? 'md' : 'sm'}
variant={variant === 'default' ? 'outline' : 'surface'}
radius={variant === 'deployment' ? 'rounded' : 'none'}
>
<Tooltip content="Manage Deployment">
<div className="flex h-full w-full items-center justify-center">
<Icon iconName="play" className="mr-4" />
Expand Down Expand Up @@ -218,30 +234,39 @@ function MenuOtherActions({ state, environment }: { state: StateEnum; environmen

export interface EnvironmentActionToolbarProps {
environment: Environment
variant?: ActionToolbarVariant
}

export function EnvironmentActionToolbar({ environment }: EnvironmentActionToolbarProps) {
export function EnvironmentActionToolbar({ environment, variant = 'default' }: EnvironmentActionToolbarProps) {
const { pathname } = useLocation()
const { data: countServices, isFetched: isFetchedServices } = useServiceCount({ environmentId: environment.id })

const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environment.id })
const hasServices = Boolean(countServices)

if (!deploymentStatus || !isFetchedServices) return <Skeleton height={36} width={144} />
if (!deploymentStatus || !isFetchedServices)
return <Skeleton height={variant === 'default' ? 36 : 28} width={variant === 'default' ? 144 : 67} />

return (
<ActionToolbar.Root>
{hasServices && <MenuManageDeployment environment={environment} state={deploymentStatus.state} />}
<Tooltip content="Logs">
<ActionToolbar.Button asChild>
<Link
to={ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)}
state={{ prevUrl: pathname }}
>
<Icon iconName="timeline" />
</Link>
</ActionToolbar.Button>
</Tooltip>
<MenuOtherActions environment={environment} state={deploymentStatus.state} />
{hasServices && (
<MenuManageDeployment environment={environment} state={deploymentStatus.state} variant={variant} />
)}
{variant === 'default' && (
<>
<Tooltip content="Logs">
<ActionToolbar.Button asChild>
<Link
to={ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id)}
state={{ prevUrl: pathname }}
>
<Icon iconName="timeline" />
</Link>
</ActionToolbar.Button>
</Tooltip>
<MenuOtherActions environment={environment} state={deploymentStatus.state} />
</>
)}
</ActionToolbar.Root>
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ exports[`TerraformExportModal should match with snapshots 1`] = `
class="p-5"
>
<h2
class="h4 max-w-sm truncate text-neutral-400"
class="h4 max-w-sm truncate text-neutral-400 dark:text-neutral-50"
>
Export as Terraform
</h2>
<p
class="mt-2 text-sm text-neutral-350"
class="mt-2 text-sm text-neutral-350 dark:text-neutral-50"
>
Export full environment & resources into Terraform manifests (only for Admin).
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
class="p-6"
>
<h2
class="h4 mb-1 max-w-sm truncate text-neutral-400"
class="h4 mb-1 max-w-sm truncate text-neutral-400 dark:text-neutral-50"
>
Deploy latest version for..
</h2>
<p
class="mb-4 text-sm text-neutral-350"
class="mb-4 text-sm text-neutral-350 dark:text-neutral-50"
>
Select the services you want to update to the latest version
</p>
<div
class="mb-4 flex items-center justify-between text-sm text-neutral-400"
class="mb-4 flex items-center justify-between text-sm text-neutral-400 dark:text-neutral-50"
>
<p>
For
<strong
class="font-medium text-neutral-400"
class="font-medium"
>
Barry Lyons
</strong>
Expand All @@ -45,11 +45,11 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
/>
<ul>
<li
class="rounded-t flex justify-between border border-b-0 p-4 border border-brand-500 bg-brand-50 false"
class="rounded-t flex justify-between border border-b-0 p-4 dark:border-neutral-400 border border-brand-500 bg-brand-50 dark:bg-neutral-500 false"
data-testid="outdated-service-row"
>
<div
class="flex font-medium text-neutral-400"
class="flex font-medium text-neutral-400 dark:text-neutral-50"
>
<div
class="relative flex items-center gap-2 mr-4"
Expand All @@ -70,7 +70,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
Amy Maxwell
</div>
<div
class="ml-auto flex"
class="ml-auto flex items-center"
>
<div
class="flex items-center opacity-50"
Expand Down Expand Up @@ -98,7 +98,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand Down Expand Up @@ -141,7 +141,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand All @@ -159,11 +159,11 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
</div>
</li>
<li
class=" flex justify-between border border-b-0 p-4 border-neutral-250 border-t-brand-500"
class=" flex justify-between border border-b-0 p-4 dark:border-neutral-400 border-neutral-250 border-t-brand-500"
data-testid="outdated-service-row"
>
<div
class="flex font-medium text-neutral-400"
class="flex font-medium text-neutral-400 dark:text-neutral-50"
>
<div
class="relative flex items-center gap-2 mr-4"
Expand All @@ -180,7 +180,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
Jeff Rhodes
</div>
<div
class="ml-auto flex"
class="ml-auto flex items-center"
>
<div
class="flex items-center "
Expand Down Expand Up @@ -208,7 +208,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand Down Expand Up @@ -251,7 +251,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand All @@ -269,11 +269,11 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
</div>
</li>
<li
class=" rounded-b !border-b flex justify-between border border-b-0 p-4 border-neutral-250 false"
class=" rounded-b !border-b flex justify-between border border-b-0 p-4 dark:border-neutral-400 border-neutral-250 false"
data-testid="outdated-service-row"
>
<div
class="flex font-medium text-neutral-400"
class="flex font-medium text-neutral-400 dark:text-neutral-50"
>
<div
class="relative flex items-center gap-2 mr-4"
Expand All @@ -290,7 +290,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
Joseph Morgan
</div>
<div
class="ml-auto flex"
class="ml-auto flex items-center"
>
<div
class="flex items-center "
Expand Down Expand Up @@ -318,7 +318,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand Down Expand Up @@ -361,7 +361,7 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
data-testid="tag-commit"
>
<span
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200"
class="inline-flex items-center rounded text-xs font-bold h-7 px-2 flex items-center justify-center border font-medium bg-white dark:bg-transparent w-[90px] border-neutral-250 text-neutral-350 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-400"
data-testid="tag"
>
<div
Expand All @@ -385,10 +385,10 @@ exports[`UpdateAllModal should reduce opacity of commit blocks 1`] = `
/>
</div>
<div
class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-white py-6"
class="sticky bottom-0 -mb-6 flex justify-end gap-3 bg-white py-6 dark:bg-neutral-550"
>
<button
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-sm h-11 px-5 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400"
class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 hover:[&:not(:focus-visible):not(:disabled)]:shadow-sm active:[&:not(:focus-visible)]:shadow-none outline-brand-500 text-sm h-11 px-5 rounded border border-transparent text-neutral-350 hover:[&:not(:active):not(:focus-visible)]:border-neutral-300 hover:[&:not(:disabled)]:text-neutral-400 dark:hover:[&:not(:disabled)]:text-neutral-250 focus-visible:text-neutral-400 active:bg-neutral-150 dark:active:bg-transparent active:text-neutral-400 disabled:text-neutral-300 disabled:bg-neutral-150 disabled:border-none"
data-testid="cancel-button"
>
Cancel
Expand Down
Loading

0 comments on commit e1165cb

Please sign in to comment.