feat(dropdown-variable): show service name in the list (#1676)

* feat(dropdown-variable): show service name in the list * fix: test snapshots
Qovery · Sep 18, 2024 · 2c35601 · 2c35601
1 parent 833a796
commit 2c35601
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 33 deletions.
diff --git a/...variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap b/...variables/feature/src/lib/dropdown-variable/__snapshots__/dropdown-variable.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`DropdownVariable should render dropdown content when clicked 1`] = `
 <div
   aria-labelledby="radix-:rf:"
   aria-orientation="vertical"
-  class="rounded border border-neutral-200 bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded flex max-h-60 w-[256px] flex-col p-2"
+  class="rounded border border-neutral-200 bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
   data-align="center"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -39,29 +39,42 @@ exports[`DropdownVariable should render dropdown content when clicked 1`] = `
     class="overflow-y-auto"
   >
     <div
-      class="flex text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 h-[52px] flex-col items-start justify-center gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
       tabindex="-1"
       type="button"
     >
-      <span
-        class="text-sm font-medium"
+      <div
+        class="flex flex-col items-start justify-center gap-1"
       >
         <span
-          class=""
-          data-state="closed"
-          data-testid="truncate-text"
+          class="text-sm font-medium"
         >
-          QOVERY_CONTAINER_Z04308D
-          ...
+          <span
+            class=""
+            data-state="closed"
+            data-testid="truncate-text"
+          >
+            QOVERY_CONTAINER_Z043
+            ...
+          </span>
         </span>
-      </span>
+        <span
+          class="truncate text-xs font-normal"
+        >
+          back-end-A
+        </span>
+      </div>
       <span
-        class="truncate text-xs font-normal"
+        class=""
+        data-state="closed"
       >
-        test
+        <i
+          aria-hidden="true"
+          class="fa-regular fa-info-circle text-neutral-400"
+        />
       </span>
     </div>
   </div>

diff --git a/libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx b/libs/domains/variables/feature/src/lib/dropdown-variable/dropdown-variable.tsx
@@ -1,6 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { type PropsWithChildren, useState } from 'react'
-import { Icon, InputSearch, Popover, Truncate, dropdownMenuItemVariants } from '@qovery/shared/ui'
+import { Icon, InputSearch, Popover, Tooltip, Truncate, dropdownMenuItemVariants } from '@qovery/shared/ui'
 import { twMerge } from '@qovery/shared/util-js'
 import { useVariables } from '../hooks/use-variables/use-variables'
 
@@ -32,7 +32,7 @@ export function DropdownVariable({ environmentId, onChange, children }: Dropdown
       <Popover.Root open={open} onOpenChange={(open) => setOpen(open)}>
         <Popover.Trigger>{children}</Popover.Trigger>
         <DropdownMenu.Content asChild>
-          <Popover.Content className="flex max-h-60 w-[256px] flex-col p-2">
+          <Popover.Content className="flex max-h-60 w-[248px] min-w-[248px] flex-col p-2">
             {/* 
                 `stopPropagation` is used to prevent the event from `DropdownMenu.Root` parent
                 fix issue with item focus if we use input search
@@ -53,18 +53,29 @@ export function DropdownVariable({ environmentId, onChange, children }: Dropdown
                     <DropdownMenu.Item
                       className={twMerge(
                         dropdownMenuItemVariants({ color: 'brand' }),
-                        'h-[52px] flex-col items-start justify-center gap-1 px-2 py-1.5'
+                        'flex h-[52px] items-center justify-between gap-1 px-2 py-1.5'
                       )}
                       onClick={() => onChange(variable.key)}
                     >
-                      <span className="text-sm font-medium">
-                        <Truncate text={variable.key} truncateLimit={24} />
-                      </span>
+                      <div className="flex flex-col items-start justify-center gap-1">
+                        <span className="text-sm font-medium">
+                          <Truncate text={variable.key} truncateLimit={21} />
+                        </span>
 
+                        {variable.service_name ? (
+                          <span className="truncate text-xs font-normal">
+                            <Truncate text={variable.service_name} truncateLimit={30} />
+                          </span>
+                        ) : (
+                          <span className="text-xs font-normal text-neutral-300">no service</span>
+                        )}
+                      </div>
                       {variable.description && (
-                        <span className="truncate text-xs font-normal">
-                          <Truncate text={variable.description} truncateLimit={34} />
-                        </span>
+                        <Tooltip content={variable.description} side="bottom">
+                          <span>
+                            <Icon iconName="info-circle" iconStyle="regular" className="text-neutral-400" />
+                          </span>
+                        </Tooltip>
                       )}
                     </DropdownMenu.Item>
                   </Popover.Close>

diff --git a/...e/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap b/...e/src/lib/field-variable-suggestion/__snapshots__/field-variable-suggestion.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`FieldVariableSuggestion should render dropdown content when clicked 1`]
 <div
   aria-labelledby="radix-:rf:"
   aria-orientation="vertical"
-  class="rounded border border-neutral-200 bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded flex max-h-60 w-[256px] flex-col p-2"
+  class="rounded border border-neutral-200 bg-white shadow-xl outline-none data-[state=open]:data-[side=bottom]:animate-slidein-up-sm-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-sm-faded data-[state=open]:data-[side=top]:animate-slidein-down-sm-faded flex max-h-60 w-[248px] min-w-[248px] flex-col p-2"
   data-align="center"
   data-orientation="vertical"
   data-radix-menu-content=""
@@ -39,29 +39,42 @@ exports[`FieldVariableSuggestion should render dropdown content when clicked 1`]
     class="overflow-y-auto"
   >
     <div
-      class="flex text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 h-[52px] flex-col items-start justify-center gap-1 px-2 py-1.5"
+      class="text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 flex h-[52px] items-center justify-between gap-1 px-2 py-1.5"
       data-orientation="vertical"
       data-radix-collection-item=""
       role="menuitem"
       tabindex="-1"
       type="button"
     >
-      <span
-        class="text-sm font-medium"
+      <div
+        class="flex flex-col items-start justify-center gap-1"
       >
         <span
-          class=""
-          data-state="closed"
-          data-testid="truncate-text"
+          class="text-sm font-medium"
         >
-          QOVERY_CONTAINER_Z04308D
-          ...
+          <span
+            class=""
+            data-state="closed"
+            data-testid="truncate-text"
+          >
+            QOVERY_CONTAINER_Z043
+            ...
+          </span>
         </span>
-      </span>
+        <span
+          class="truncate text-xs font-normal"
+        >
+          back-end-A
+        </span>
+      </div>
       <span
-        class="truncate text-xs font-normal"
+        class=""
+        data-state="closed"
       >
-        test
+        <i
+          aria-hidden="true"
+          class="fa-regular fa-info-circle text-neutral-400"
+        />
       </span>
     </div>
   </div>