dashboard: improvements to deployment name indicators (#36086)

- Adds a separate color for local dev deployments in the main display (cyan instead of green)
- Shows deployment names in the list of deployments

GitOrigin-RevId: 7209fd5523743331b73e9619678a6312d7e6fc04

Author: atrakh

npm-packages/dashboard/src/components/header/ProjectSelector/DeploymentMenuOptions.tsx

@@ -86,7 +86,14 @@ export function DeploymentMenuOptions({
         eventName="switch to production deployment"
       >
         <SignalIcon className="h-4 w-4" />
-        Production
+        <p>
+          Production{" "}
+          {prod && (
+            <span className="text-xs text-content-secondary">
+              ({prod?.name})
+            </span>
+          )}
+        </p>
       </SelectorItem>
       <AllPersonalDeployments team={team} project={project} close={close} />
       {previews.length === 0 && (
@@ -124,7 +131,7 @@ export function DeploymentMenuOptions({
                 onClick={() => logEvent("toggle preview deployments")}
               >
                 <div className="flex w-full items-center justify-between gap-2">
-                  <div className="p-2 text-xs text-content-secondary">
+                  <div className="p-2 text-xs font-semibold text-content-secondary">
                     Preview Deployments ({previews.length})
                   </div>
                   {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
@@ -145,6 +152,7 @@ export function DeploymentMenuOptions({
                         previewDeployment.previewIdentifier ??
                         previewDeployment.name
                       }
+                      name={previewDeployment.name}
                     />
                   </SelectorItem>
                 ))}
@@ -162,7 +170,7 @@ export function DeploymentMenuOptions({
                 onClick={() => logEvent("toggle other deployments")}
               >
                 <div className="flex w-full items-center justify-between gap-2">
-                  <div className="p-2 text-xs text-content-secondary">
+                  <div className="p-2 text-xs font-semibold text-content-secondary">
                     Other Deployments ({teamMemberDeployments.length})
                   </div>
                   {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
@@ -176,7 +184,10 @@ export function DeploymentMenuOptions({
                     selected={router.query.deploymentName === d.name}
                     eventName="switch to other deployment"
                   >
-                    <DeploymentOption identifier={`${d.creator}'s Dev`} />
+                    <DeploymentOption
+                      identifier={`${d.creator}'s Dev`}
+                      name={d.name}
+                    />
                   </SelectorItem>
                 ))}
               </Disclosure.Panel>
@@ -255,7 +266,8 @@ function AllPersonalDeployments({
             <GlobeIcon className="h-4 w-4" />
           )}
           <DeploymentOption
-            identifier={`${d.kind === "local" ? `${d.deviceName} ${hasMultipleActiveLocalDeployments ? `(Port ${d.port})` : ""}` : "Development (Cloud)"}`}
+            identifier={`${d.kind === "local" ? `${d.deviceName} ${hasMultipleActiveLocalDeployments ? `(Port ${d.port})` : ""}` : "Cloud Dev"}`}
+            name={d.name}
           />
         </SelectorItem>
       ))}
@@ -289,7 +301,13 @@ function sortDevDeployments(deployments: DeploymentResponse[]) {
   });
 }
 
-function DeploymentOption({ identifier }: { identifier: string }) {
+function DeploymentOption({
+  identifier,
+  name,
+}: {
+  identifier: string;
+  name: string;
+}) {
   const ref = useRef<HTMLDivElement>(null);
   const isOverflowing = useIsOverflowing(ref);
 
@@ -303,8 +321,11 @@ function DeploymentOption({ identifier }: { identifier: string }) {
       side="right"
       wrapsButton
     >
-      <p className="max-w-[14rem] truncate" ref={ref}>
-        {identifier}
+      <p className="max-w-[20rem] truncate" ref={ref}>
+        {identifier}{" "}
+        {name && (
+          <span className="text-xs text-content-secondary">({name})</span>
+        )}
       </p>
     </Tooltip>
   );

npm-packages/dashboard/src/elements/DeploymentDisplay.tsx

@@ -72,7 +72,8 @@ export function DeploymentLabel({
     <div
       className={cn(
         "flex items-center gap-2 rounded-md",
-        !inline && getBackgroundColor(deployment.deploymentType),
+        !inline &&
+          getBackgroundColor(deployment.deploymentType, deployment.kind),
         !inline && "p-1",
       )}
     >
@@ -96,7 +97,13 @@ export function DeploymentLabel({
   );
 }
 
-function getBackgroundColor(type: DeploymentType): string {
+function getBackgroundColor(
+  type: DeploymentType,
+  kind: "local" | "cloud",
+): string {
+  if (kind === "local") {
+    return "border border-cyan-700 bg-cyan-200/50 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-500";
+  }
   switch (type) {
     case "prod":
       return "border border-purple-600 dark:border-purple-900 bg-purple-100/50 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400";
@@ -131,7 +138,7 @@ function getDeploymentLabel({
       }
       return whoseName === null
         ? "Development (Cloud)"
-        : `${whoseName}’s Dev (Cloud)`;
+        : `${whoseName}’s Cloud Dev`;
     }
     default: {
       const _typecheck: never = deployment.deploymentType;