feat: add tooltip with full path when cli tool is detected (podman-desktop#8330)

Signed-off-by: Denis Golovin <[email protected]>

Author: dgolovin

packages/renderer/src/lib/preferences/PreferencesCliTool.spec.ts

@@ -117,6 +117,8 @@ suite('CLI Tool item', () => {
     const versionElement = screen.getByLabelText('cli-version');
     expect(versionElement).toBeDefined();
     expect(versionElement.textContent).equal(`${cliToolInfoItem2.name} v${cliToolInfoItem2.version}`);
+    const displayFullPathElement = screen.getByText('Path: path/to/tool-name-2');
+    expect(displayFullPathElement).toBeInTheDocument();
     const updateLoadingButton = screen.getByRole('button', { name: 'Update' });
     expect(updateLoadingButton).toBeInTheDocument();
     expect(updateLoadingButton).toBeDisabled();

packages/renderer/src/lib/preferences/PreferencesCliTool.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faCircleArrowUp, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, Tooltip } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import type { CliToolInfo } from '/@api/cli-tool-info';
@@ -114,11 +114,13 @@ function getLoggerHandler(_cliToolId: string): ConnectionCallback {
         {#if cliTool.version}
           <div
             class="flex flex-row justify-between align-center bg-[var(--pd-invert-content-bg)] p-2 rounded-lg min-w-[320px] w-fit">
-            <div
-              class="flex text-[var(--pd-invert-content-card-text)] font-bold text-sm items-center"
-              aria-label="cli-version">
-              {cliTool.name} v{cliTool.version}
-            </div>
+            <Tooltip area-label="cli-full-path" bottomRight={true} tip="Path: {cliTool.path}">
+              <div
+                class="flex text-[var(--pd-invert-content-card-text)] font-bold text-sm items-center"
+                aria-label="cli-version">
+                {cliTool.name} v{cliTool.version}
+              </div>
+            </Tooltip>
             {#if cliTool.newVersion}
               <Button
                 type="link"