From 7c3c0389dc16332d3f074387f11764a262b6f8f1 Mon Sep 17 00:00:00 2001
From: Camille TJHOA <ctjhoa@qovery.com>
Date: Thu, 19 Sep 2024 09:21:07 +0200
Subject: [PATCH] feat(services): add show hide extra labels annotations in
 creation flows (#1677)

* chore: add @radix-ui/react-collapsible

* feat(services): add show/hide extra labels/annotations in creation flows
---
 .../step-general/step-general.tsx             | 31 +++++++++++++++----
 package.json                                  |  1 +
 yarn.lock                                     |  3 +-
 3 files changed, 28 insertions(+), 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
index a75084dee81..83607a339d3 100644
--- 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
index 1dbdff95144..5277d732715 100644
--- 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
index b7dd51457e6..55a4e3b8442 100644
--- 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: