DT-1495 - use description instead of tooltip on reset menu item (#2373)

* use description instead of tooltip on reset menu item

* fix menu width on workflow actions

Author: rossedfort

src/lib/components/workflow-actions.svelte

@@ -31,7 +31,7 @@
   let terminateConfirmationModalOpen = false;
   let resetConfirmationModalOpen = false;
   let signalConfirmationModalOpen = false;
-  let resetTooltipText: string;
+  let resetDescription: string;
   let coreUser = coreUserStore();
 
   $: cancelEnabled = workflowCancelEnabled(
@@ -71,20 +71,20 @@
     enabled: boolean;
     testId: string;
     destructive?: boolean;
-    tooltip?: string;
+    description?: string;
   }[];
 
   $: {
     if (!resetAuthorized) {
-      resetTooltipText = translate('workflows.reset-disabled-unauthorized');
+      resetDescription = translate('workflows.reset-disabled-unauthorized');
     } else if (resetAuthorized && workflow?.pendingChildren?.length > 0) {
-      resetTooltipText = translate('workflows.reset-disabled-pending-children');
+      resetDescription = translate('workflows.reset-disabled-pending-children');
     } else if (
       resetAuthorized &&
       workflow?.pendingChildren?.length === 0 &&
       $resetEvents.length === 0
     ) {
-      resetTooltipText = translate('workflows.reset-disabled-no-events');
+      resetDescription = translate('workflows.reset-disabled-no-events');
     }
   }
 
@@ -94,22 +94,22 @@
       onClick: () => (resetConfirmationModalOpen = true),
       testId: 'reset-button',
       enabled: resetEnabled,
-      tooltip: resetEnabled ? '' : resetTooltipText,
+      description: resetEnabled ? '' : resetDescription,
     },
     {
       label: translate('workflows.signal'),
       onClick: () => (signalConfirmationModalOpen = true),
       testId: 'signal-button',
       enabled: signalEnabled,
-      tooltip: signalEnabled ? '' : translate('workflows.signal-disabled'),
+      description: signalEnabled ? '' : translate('workflows.signal-disabled'),
     },
     {
       label: translate('workflows.terminate'),
       onClick: () => (terminateConfirmationModalOpen = true),
       testId: 'terminate-button',
       enabled: terminateEnabled,
       destructive: true,
-      tooltip: terminateEnabled
+      description: terminateEnabled
         ? ''
         : translate('workflows.terminate-disabled'),
     },
@@ -119,27 +119,27 @@
 {#if isRunning}
   <SplitButton
     id="workflow-actions"
+    menuClass="w-[24rem]"
     position="right"
     disabled={actionsDisabled}
     primaryActionDisabled={!cancelEnabled || cancelInProgress}
     on:click={() => (cancelConfirmationModalOpen = true)}
     label={translate('workflows.request-cancellation')}
     menuLabel={translate('workflows.workflow-actions')}
   >
-    {#each workflowActions as { onClick, destructive, label, enabled, testId, tooltip }}
+    {#each workflowActions as { onClick, destructive, label, enabled, testId, description }}
       {#if destructive}
         <MenuDivider />
       {/if}
-      <Tooltip text={tooltip} hide={!tooltip} width={200} left>
-        <MenuItem
-          on:click={onClick}
-          {destructive}
-          disabled={!enabled}
-          data-testid={testId}
-        >
-          {label}
-        </MenuItem>
-      </Tooltip>
+      <MenuItem
+        on:click={onClick}
+        {destructive}
+        disabled={!enabled}
+        data-testid={testId}
+        {description}
+      >
+        {label}
+      </MenuItem>
     {/each}
     {#if !workflowCreateDisabled($page)}
       <MenuDivider />
@@ -162,6 +162,7 @@
 {:else if !workflowCreateDisabled($page)}
   <SplitButton
     id="workflow-actions"
+    menuClass="w-[16rem]"
     position="right"
     primaryActionDisabled={!resetEnabled}
     on:click={() => (resetConfirmationModalOpen = true)}
@@ -184,7 +185,7 @@
     </MenuItem>
   </SplitButton>
 {:else}
-  <Tooltip bottomRight width={200} text={resetTooltipText} hide={resetEnabled}>
+  <Tooltip bottomRight width={200} text={resetDescription} hide={resetEnabled}>
     <Button
       aria-label={translate('workflows.reset')}
       disabled={!resetEnabled}

src/lib/holocene/split-button.svelte

@@ -12,6 +12,7 @@
   export let position: 'left' | 'right' = 'left';
   export let primaryActionDisabled = false;
   export let href: string | undefined = undefined;
+  export let menuClass: string | undefined = undefined;
 </script>
 
 <MenuContainer class={$$props.class}>
@@ -38,7 +39,7 @@
     />
   </div>
 
-  <Menu id="{id}-menu" {position} class="max-w-fit">
+  <Menu id="{id}-menu" {position} class={menuClass}>
     <slot />
   </Menu>
 </MenuContainer>