fix: validate connection modal status, retry button, and copy nits (#3347)

* fix: validate connection modal status, retry button, and copy nits

- Fix isValid check (=== true) so HTTP error responses without a valid
  field don't show as "Connection is valid"
- Fix result assignment so onError captures the real error message from
  the API body instead of being overwritten by the raw return value
- Add Retry button to modal; replace Cancel to avoid modal closing on retry
- Add hideCancel prop to Modal component
- Match skeleton height to result row so modal doesn't resize on retry
- Update empty state button copy to "Create Serverless Worker Deployment"
- Change AWS Setup Guide card title to font-medium

* fix: use portal for deployment status tooltip to fix z-index clipping

Author: rossnelson

src/lib/components/deployments/deployment-status.svelte

@@ -51,7 +51,7 @@
   );
 </script>
 
-<Tooltip text={tooltip[status]} topLeft width={250}>
+<Tooltip text={tooltip[status]} topLeft width={250} usePortal>
   <p class={deploymentStatus({ status })}>
     {#if icon[status]}<Icon name={icon[status]!} />{/if}{label}
   </p>

src/lib/components/deployments/validate-connection-modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Button from '$lib/holocene/button.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Modal from '$lib/holocene/modal.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -7,32 +8,45 @@
     buildId: string;
     open: boolean;
     loading: boolean;
-    result: { valid: boolean; message?: string } | null;
+    result: { message?: string } | null;
     onClose: () => void;
+    onRetry: () => void;
   }
 
-  let { buildId, open, loading, result, onClose }: Props = $props();
+  let { buildId, open, loading, result, onClose, onRetry }: Props = $props();
 
-  const isValid = $derived(result?.valid !== false);
+  const isValid = $derived(!result?.message);
 </script>
 
 <Modal
   id="validate-connection-modal-{buildId}"
   {open}
-  confirmText={translate('common.close')}
-  cancelText={translate('common.cancel')}
-  on:confirmModal={onClose}
-  on:cancelModal={onClose}
+  confirmText=""
+  cancelText=""
+  hideCancel
+  hideConfirm
 >
   <h3 slot="title">
     {translate('deployments.validate-connection')}
     <span class="font-mono text-secondary">{buildId}</span>
   </h3>
+  <svelte:fragment slot="footer">
+    <div class="flex w-full items-center justify-end gap-2">
+      <Button variant="ghost" on:click={onRetry}
+        >{translate('common.retry')}</Button
+      >
+      <Button variant="primary" on:click={onClose}
+        >{translate('common.close')}</Button
+      >
+    </div>
+  </svelte:fragment>
   <div slot="content">
     {#if loading}
-      <div class="flex flex-col gap-2">
-        <div class="h-3 w-32 animate-pulse rounded bg-subtle"></div>
-        <div class="h-3 w-48 animate-pulse rounded bg-subtle"></div>
+      <div class="flex items-center gap-2">
+        <div
+          class="h-5 w-5 shrink-0 animate-pulse rounded-full bg-subtle"
+        ></div>
+        <div class="h-5 w-40 animate-pulse rounded bg-subtle"></div>
       </div>
     {:else if result}
       <div class="flex items-start gap-2">

src/lib/components/deployments/version-table-row.svelte

@@ -152,9 +152,7 @@
   let deleteVersionError = $state('');
   let showValidateModal = $state(false);
   let validateLoading = $state(false);
-  let validateResult = $state<{ valid: boolean; message?: string } | null>(
-    null,
-  );
+  let validateResult = $state<{ message?: string } | null>(null);
 
   async function handleValidateConnection() {
     validateResult = null;
@@ -171,16 +169,16 @@
       validateLoading = false;
       return;
     }
-    validateResult = await validateWorkerDeploymentVersionComputeConfig(
+    let errorMessage: string | undefined;
+    await validateWorkerDeploymentVersionComputeConfig(
       { namespace, deploymentName, buildId: versionBuildId, computeConfig },
-      () => {
-        validateLoading = false;
-        validateResult = {
-          valid: false,
-          message: translate('deployments.validate-connection-error'),
-        };
+      (error) => {
+        errorMessage =
+          (error.body as { message?: string })?.message ??
+          translate('deployments.validate-connection-error');
       },
     );
+    validateResult = { message: errorMessage };
     validateLoading = false;
   }
 
@@ -307,6 +305,7 @@
   loading={validateLoading}
   result={validateResult}
   onClose={() => (showValidateModal = false)}
+  onRetry={handleValidateConnection}
 />
 
 <DeleteVersionModal

src/lib/components/workers/serverless-worker-form/serverless-worker-setup-guide.svelte

@@ -38,7 +38,7 @@ Resources:
   const snippetContent = $derived(cfnTemplate ?? defaultCfnTemplate);
 </script>
 
-<h3 class="mb-4 text-base font-semibold">
+<h3 class="mb-4 text-base font-medium">
   {translate('workers.setup-guide-title')}
 </h3>
 <Timeline>

src/lib/holocene/modal.svelte

@@ -14,6 +14,7 @@
     confirmDisabled?: boolean;
     confirmText: string;
     confirmType?: ComponentProps<Button>['variant'];
+    hideCancel?: boolean;
     hideConfirm?: boolean;
     hightlightNav?: boolean;
     id: string;
@@ -25,6 +26,7 @@
     class?: string;
   }
 
+  export let hideCancel = false;
   export let hideConfirm = false;
   export let confirmText: string;
   export let cancelText: string;
@@ -131,12 +133,14 @@
         <div></div>
       </slot>
       <div class="flex items-center justify-end space-x-2">
-        <Button
-          data-testid="cancel-modal-button"
-          variant="ghost"
-          disabled={loading}
-          on:click={closeModal}>{cancelText}</Button
-        >
+        {#if !hideCancel}
+          <Button
+            data-testid="cancel-modal-button"
+            variant="ghost"
+            disabled={loading}
+            on:click={closeModal}>{cancelText}</Button
+          >
+        {/if}
         {#if !hideConfirm}
           <Button
             variant={confirmType}

src/lib/i18n/locales/en/workers.ts

@@ -103,8 +103,8 @@ export const Strings = {
     'An IAM role allowing Temporal to invoke your function',
   'serverless-empty-prereq-queue':
     'A task queue name for your serverless worker',
-  'create-serverless-worker': 'Create Worker Deployment',
-  'create-serverless-title': 'Create Worker Deployment',
+  'create-serverless-worker': 'Create Serverless Worker Deployment',
+  'create-serverless-title': 'Create Serverless Worker Deployment',
   'edit-serverless-worker': 'Edit',
   'edit-serverless-worker-title': 'Edit Serverless Worker',
   'serverless-detail-title': 'Serverless Worker Details',