From f28f5665fc513f0da0523040ae30fc095335bf0e Mon Sep 17 00:00:00 2001
From: Alexander Petric <alpetric@users.noreply.github.com>
Date: Fri, 3 Oct 2025 16:12:05 -0400
Subject: [PATCH] fix: app button tooltip also when disabled + audit log
 filters (#6751)

* also show tooltip on disabled button

* fix: audit log filters
---
 .../apps/components/buttons/AppButton.svelte  | 104 +++++++++---------
 .../auditLogs/AuditLogsFilters.svelte         |   2 +-
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 2724b500da..51ae40c21a 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -267,60 +267,64 @@
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		{#key css}
-			<Button
-				on:pointerdown={(e) => e.stopPropagation()}
-				btnClasses={twMerge(
-					css?.button?.class ?? '',
-					isMenuItem ? 'flex items-center justify-start' : '',
-					isMenuItem ? '!border-0' : '',
-					'wm-button',
-					`wm-button-${resolvedConfig.color}`
-				)}
-				variant={isMenuItem ? 'border' : 'contained'}
-				style={css?.button?.style}
-				wrapperClasses={twMerge(
-					css?.container?.class ?? '',
-					resolvedConfig.fillContainer ? 'w-full h-full' : '',
-					isMenuItem ? 'w-full' : '',
-					'wm-button-container',
-					`wm-button-container-${resolvedConfig.color}`
-				)}
-				wrapperStyle={css?.container?.style}
-				disabled={resolvedConfig.disabled}
-				on:click={handleClick}
-				size={resolvedConfig.size}
-				color={resolvedConfig.color}
+			<div
+				class="inline-flex"
 				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0
 					? String(resolvedConfig.tooltip)
 					: undefined}
-				loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
 			>
-				{#if resolvedConfig.beforeIcon}
-					{#key resolvedConfig.beforeIcon}
-						<div
-							class={resolvedConfig.label?.toString() &&
-							resolvedConfig.label?.toString()?.length > 0
-								? 'min-w-4'
-								: ''}
-							bind:this={beforeIconComponent}
-						></div>
-					{/key}
-				{/if}
-				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
-					<div>{resolvedConfig.label.toString()}</div>
-				{/if}
-				{#if resolvedConfig.afterIcon}
-					{#key resolvedConfig.afterIcon}
-						<div
-							class={resolvedConfig.label?.toString() &&
-							resolvedConfig.label?.toString()?.length > 0
-								? 'min-w-4'
-								: ''}
-							bind:this={afterIconComponent}
-						></div>
-					{/key}
-				{/if}
-			</Button>
+				<Button
+					on:pointerdown={(e) => e.stopPropagation()}
+					btnClasses={twMerge(
+						css?.button?.class ?? '',
+						isMenuItem ? 'flex items-center justify-start' : '',
+						isMenuItem ? '!border-0' : '',
+						'wm-button',
+						`wm-button-${resolvedConfig.color}`
+					)}
+					variant={isMenuItem ? 'border' : 'contained'}
+					style={css?.button?.style}
+					wrapperClasses={twMerge(
+						css?.container?.class ?? '',
+						resolvedConfig.fillContainer ? 'w-full h-full' : '',
+						isMenuItem ? 'w-full' : '',
+						'wm-button-container',
+						`wm-button-container-${resolvedConfig.color}`
+					)}
+					wrapperStyle={css?.container?.style}
+					disabled={resolvedConfig.disabled}
+					on:click={handleClick}
+					size={resolvedConfig.size}
+					color={resolvedConfig.color}
+					loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
+				>
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={beforeIconComponent}
+							></div>
+						{/key}
+					{/if}
+					{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
+						<div>{resolvedConfig.label.toString()}</div>
+					{/if}
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={afterIconComponent}
+							></div>
+						{/key}
+					{/if}
+				</Button>
+			</div>
 		{/key}
 	</AlignWrapper>
 </RunnableWrapper>
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index c5289dc413..f8a5b6dc46 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -423,7 +423,7 @@
 
 		<Select
 			bind:value={operation}
-			items={['all', ...Object.keys(operations)].map((r) => ({ value: r, label: r }))}
+			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
 			RightIcon={ChevronDown}
 		/>