feat(environment-action-toolbar): add environment metadata handling and clipboard functionality (#2681)

Author: RemiBonnet

libs/domains/environments/feature/src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap

@@ -14,64 +14,67 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
   />
   <div
     aria-hidden="true"
-    class="flex items-center gap-2"
     data-aria-hidden="true"
   >
-    <button
-      aria-controls="radix-:r7:"
-      aria-expanded="true"
-      aria-haspopup="menu"
-      aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
-      data-state="open"
-      id="radix-:r6:"
-      type="button"
+    <div
+      class="flex items-center gap-2"
     >
-      <div
-        class="flex h-full w-full items-center justify-center gap-1.5"
+      <button
+        aria-controls="radix-:r7:"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="Manage Deployment"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
+        data-state="open"
+        id="radix-:r6:"
+        type="button"
+      >
+        <div
+          class="flex h-full w-full items-center justify-center gap-1.5"
+          data-state="closed"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-rocket "
+          />
+        </div>
+      </button>
+      <a
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
+        params="[object Object]"
+        to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-rocket "
+          class="fa-regular fa-timeline "
         />
-      </div>
-    </button>
-    <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
-      data-state="closed"
-      params="[object Object]"
-      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
-    >
-      <i
-        aria-hidden="true"
-        class="fa-regular fa-timeline "
-      />
-    </a>
-    <button
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
-      data-state="closed"
-      id="radix-:ra:"
-      type="button"
-    >
-      <div
-        class="flex h-full w-full items-center justify-center"
+      </a>
+      <button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Other actions"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
         data-state="closed"
+        id="radix-:ra:"
+        type="button"
       >
-        <i
-          aria-hidden="true"
-          class="fa-solid fa-ellipsis-v "
-        />
-      </div>
-    </button>
+        <div
+          class="flex h-full w-full items-center justify-center"
+          data-state="closed"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-ellipsis-v "
+          />
+        </div>
+      </button>
+    </div>
   </div>
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 100% 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       aria-labelledby="radix-:r6:"
@@ -85,7 +88,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       dir="ltr"
       id="radix-:r7:"
       role="menu"
-      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;"
       tabindex="-1"
     >
       <div
@@ -198,64 +201,67 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
   />
   <div
     aria-hidden="true"
-    class="flex items-center gap-2"
     data-aria-hidden="true"
   >
-    <button
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="Manage Deployment"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
-      data-state="closed"
-      id="radix-:rq:"
-      type="button"
+    <div
+      class="flex items-center gap-2"
     >
-      <div
-        class="flex h-full w-full items-center justify-center gap-1.5"
+      <button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Manage Deployment"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-warning-strong text-xs h-7 justify-center px-0 rounded w-7 border border-warning-subtle text-warning hover:border-warning-component hover:bg-surface-warning-subtle data-[state=open]:bg-surface-warning-subtle"
         data-state="closed"
+        id="radix-:rq:"
+        type="button"
       >
-        <i
-          aria-hidden="true"
-          class="fa-regular fa-rocket "
-        />
-      </div>
-    </button>
-    <a
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
-      data-state="closed"
-      params="[object Object]"
-      to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
-    >
-      <i
-        aria-hidden="true"
-        class="fa-regular fa-timeline "
-      />
-    </a>
-    <button
-      aria-controls="radix-:rv:"
-      aria-expanded="true"
-      aria-haspopup="menu"
-      aria-label="Other actions"
-      class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
-      data-state="open"
-      id="radix-:ru:"
-      type="button"
-    >
-      <div
-        class="flex h-full w-full items-center justify-center"
+        <div
+          class="flex h-full w-full items-center justify-center gap-1.5"
+          data-state="closed"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-rocket "
+          />
+        </div>
+      </button>
+      <a
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-6 px-1.5 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral w-7"
         data-state="closed"
+        params="[object Object]"
+        to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments"
       >
         <i
           aria-hidden="true"
-          class="fa-solid fa-ellipsis-v "
+          class="fa-regular fa-timeline "
         />
-      </div>
-    </button>
+      </a>
+      <button
+        aria-controls="radix-:rv:"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="Other actions"
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 justify-center px-0 rounded w-7 bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+        data-state="open"
+        id="radix-:ru:"
+        type="button"
+      >
+        <div
+          class="flex h-full w-full items-center justify-center"
+          data-state="closed"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-ellipsis-v "
+          />
+        </div>
+      </button>
+    </div>
   </div>
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       aria-labelledby="radix-:ru:"
@@ -269,7 +275,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       dir="ltr"
       id="radix-:rv:"
       role="menu"
-      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
+      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: none; pointer-events: auto;"
       tabindex="-1"
     >
       <a
@@ -297,9 +303,9 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-copy text-sm mr-2 min-w-5 text-brand"
+          class="fa-regular fa-file-export text-sm mr-2 min-w-5 text-brand"
         />
-        Copy identifier
+        Export as Terraform
       </div>
       <div
         class="px-3 flex items-center h-8 text-sm font-medium outline-none select-none rounded data-[highlighted]:bg-surface-brand-component data-[highlighted]:text-brand hover:bg-surface-brand-component hover:text-brand cursor-pointer text-neutral"
@@ -310,22 +316,27 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-file-export text-sm mr-2 min-w-5 text-brand"
+          class="fa-regular fa-copy text-sm mr-2 min-w-5 text-brand"
         />
-        Export as Terraform
+        Clone
       </div>
       <div
-        class="px-3 flex items-center h-8 text-sm font-medium outline-none select-none rounded data-[highlighted]:bg-surface-brand-component data-[highlighted]:text-brand hover:bg-surface-brand-component hover:text-brand cursor-pointer text-neutral"
+        aria-controls="radix-:r14:"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        class="px-3 flex items-center h-8 text-sm font-medium outline-none select-none rounded data-[highlighted]:bg-surface-brand-component data-[highlighted]:text-brand hover:bg-surface-brand-component hover:text-brand cursor-pointer text-neutral data-[state=open]:bg-surface-brand-component data-[state=open]:text-brand"
         data-orientation="vertical"
         data-radix-collection-item=""
+        data-state="closed"
+        id="radix-:r15:"
         role="menuitem"
         tabindex="-1"
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-copy text-sm mr-2 min-w-5 text-brand"
+          class="fa-regular fa-circle-info text-sm mr-2 min-w-5 text-brand"
         />
-        Clone
+        Environment metadata
       </div>
       <div
         aria-orientation="horizontal"