Skip to content

Commit

Permalink
fix(service-creation-flow): labels/annotations if source selected (#1755
Browse files Browse the repository at this point in the history 
)

fix(service-creation-flow): display labels/annotations after source selected
  • Loading branch information
@RemiBonnet
RemiBonnet authored Nov 13, 2024
1 parent 7a9fa1c commit 5557486
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 43 deletions.
67 changes: 34 additions & 33 deletions libs/pages/services/src/lib/ui/page-application-create/step-general/step-general.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,41 +110,42 @@ export function StepGeneral(props: StepGeneralProps) {
</Section>

{watchServiceType && (
<Section className="gap-4">
<Heading>{watchServiceType === ServiceTypeEnum.APPLICATION ? 'Build and deploy' : 'Deploy'}</Heading>
{watchServiceType === ServiceTypeEnum.APPLICATION && <BuildSettings />}
<EntrypointCmdInputs />
{!watchIsPublicRepository && (
<AutoDeploySetting
source={watchServiceType === ServiceTypeEnum.CONTAINER ? 'CONTAINER_REGISTRY' : 'GIT'}
/>
)}
</Section>
<>
<Section className="gap-4">
<Heading>{watchServiceType === ServiceTypeEnum.APPLICATION ? 'Build and deploy' : 'Deploy'}</Heading>
{watchServiceType === ServiceTypeEnum.APPLICATION && <BuildSettings />}
<EntrypointCmdInputs />
{!watchIsPublicRepository && (
<AutoDeploySetting
source={watchServiceType === ServiceTypeEnum.CONTAINER ? 'CONTAINER_REGISTRY' : 'GIT'}
/>
)}
</Section>
<Collapsible.Root open={openExtraAttributes} onOpenChange={setOpenExtraAttributes} asChild>
<Section className="gap-4">
<div className="flex justify-between">
<Heading>Extra labels/annotations</Heading>
<Collapsible.Trigger className="flex items-center gap-2 text-sm font-medium">
{openExtraAttributes ? (
<>
Hide <Icon iconName="chevron-up" />
</>
) : (
<>
Show <Icon iconName="chevron-down" />
</>
)}
</Collapsible.Trigger>
</div>
<Collapsible.Content className="flex flex-col gap-4">
<LabelSetting />
<AnnotationSetting />
</Collapsible.Content>
</Section>
</Collapsible.Root>
</>
)}

<Collapsible.Root open={openExtraAttributes} onOpenChange={setOpenExtraAttributes} asChild>
<Section className="gap-4">
<div className="flex justify-between">
<Heading>Extra labels/annotations</Heading>
<Collapsible.Trigger className="flex items-center gap-2 text-sm font-medium">
{openExtraAttributes ? (
<>
Hide <Icon iconName="chevron-up" />
</>
) : (
<>
Show <Icon iconName="chevron-down" />
</>
)}
</Collapsible.Trigger>
</div>
<Collapsible.Content className="flex flex-col gap-4">
<LabelSetting />
<AnnotationSetting />
</Collapsible.Content>
</Section>
</Collapsible.Root>

<div className="flex justify-between">
<Button
onClick={() => navigate(SERVICES_URL(organizationId, projectId, environmentId))}
Expand Down
56 changes: 46 additions & 10 deletions libs/pages/services/src/lib/ui/page-database-create/step-general/step-general.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import * as Collapsible from '@radix-ui/react-collapsible'
import {
CloudProviderEnum,
type Cluster,
type ClusterFeatureAwsExistingVpc,
DatabaseAccessibilityEnum,
DatabaseModeEnum,
} from 'qovery-typescript-axios'
import { type FormEventHandler } from 'react'
import { type FormEventHandler, useState } from 'react'
import { Controller, useFormContext } from 'react-hook-form'
import { useNavigate, useParams } from 'react-router-dom'
import { match } from 'ts-pattern'
Expand Down Expand Up @@ -53,6 +54,7 @@ export function StepGeneral({
const { control, formState, watch } = useFormContext<GeneralData>()
const { organizationId = '', environmentId = '', projectId = '', slug, option } = useParams()
const navigate = useNavigate()
const [openExtraAttributes, setOpenExtraAttributes] = useState(false)

const watchType = watch('type')
const watchMode = watch('mode')
Expand Down Expand Up @@ -261,18 +263,52 @@ export function StepGeneral({
</Section>

{watchMode === DatabaseModeEnum.CONTAINER && (
<Section className="gap-4">
<Heading>Extra labels/annotations</Heading>
<LabelSetting />
<AnnotationSetting />
</Section>
<Collapsible.Root open={openExtraAttributes} onOpenChange={setOpenExtraAttributes} asChild>
<Section className="gap-4">
<div className="flex justify-between">
<Heading>Extra labels/annotations</Heading>
<Collapsible.Trigger className="flex items-center gap-2 text-sm font-medium">
{openExtraAttributes ? (
<>
Hide <Icon iconName="chevron-up" />
</>
) : (
<>
Show <Icon iconName="chevron-down" />
</>
)}
</Collapsible.Trigger>
</div>{' '}
<Collapsible.Content className="flex flex-col gap-4">
<LabelSetting />
<AnnotationSetting />
</Collapsible.Content>
</Section>
</Collapsible.Root>
)}

{watchMode === DatabaseModeEnum.MANAGED && (
<Section className="gap-4">
<Heading>Extra labels</Heading>
<LabelSetting />
</Section>
<Collapsible.Root open={openExtraAttributes} onOpenChange={setOpenExtraAttributes} asChild>
<Section className="gap-4">
<div className="flex justify-between">
<Heading>Extra labels</Heading>
<Collapsible.Trigger className="flex items-center gap-2 text-sm font-medium">
{openExtraAttributes ? (
<>
Hide <Icon iconName="chevron-up" />
</>
) : (
<>
Show <Icon iconName="chevron-down" />
</>
)}
</Collapsible.Trigger>
</div>{' '}
<Collapsible.Content className="flex flex-col gap-4">
<LabelSetting />
</Collapsible.Content>
</Section>
</Collapsible.Root>
)}

<div className="flex justify-between">
Expand Down

0 comments on commit 5557486

Please sign in to comment.