feat(services): add show hide extra labels annotations in creation fl…

…ows (#1677) * chore: add @radix-ui/react-collapsible * feat(services): add show/hide extra labels/annotations in creation flows
Qovery · Sep 19, 2024 · 7c3c038 · 7c3c038
1 parent 96fa2bf
commit 7c3c038
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/libs/pages/services/src/lib/ui/page-application-create/step-general/step-general.tsx b/libs/pages/services/src/lib/ui/page-application-create/step-general/step-general.tsx
@@ -1,5 +1,6 @@
+import * as Collapsible from '@radix-ui/react-collapsible'
 import { type Organization } 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 { AnnotationSetting, LabelSetting } from '@qovery/domains/organizations/feature'
@@ -22,6 +23,7 @@ export function StepGeneral(props: StepGeneralProps) {
   const { control, watch, formState } = useFormContext<ApplicationGeneralData>()
   const { organizationId = '', environmentId = '', projectId = '', slug, option } = useParams()
   const navigate = useNavigate()
+  const [openExtraAttributes, setOpenExtraAttributes] = useState(false)
 
   const watchServiceType = watch('serviceType')
   const watchIsPublicRepository = watch('is_public_repository')
@@ -120,11 +122,28 @@ export function StepGeneral(props: StepGeneralProps) {
           </Section>
         )}
 
-        <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>
 
         <div className="flex justify-between">
           <Button

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",

diff --git a/yarn.lock b/yarn.lock
@@ -4025,6 +4025,7 @@ __metadata:
     "@radix-ui/react-accordion": ^1.2.0
     "@radix-ui/react-avatar": ^1.1.0
     "@radix-ui/react-checkbox": ^1.1.1
+    "@radix-ui/react-collapsible": ^1.1.0
     "@radix-ui/react-dialog": ^1.1.1
     "@radix-ui/react-dropdown-menu": ^2.1.1
     "@radix-ui/react-popover": ^1.1.1
@@ -4283,7 +4284,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-collapsible@npm:1.1.0":
+"@radix-ui/react-collapsible@npm:1.1.0, @radix-ui/react-collapsible@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-collapsible@npm:1.1.0"
   dependencies: