From 62e7b0d88ffe33a8d65ffb5577de77b811d5803e Mon Sep 17 00:00:00 2001
From: Florent BENOIT <fbenoit@redhat.com>
Date: Mon, 18 Dec 2023 09:03:23 +0100
Subject: [PATCH] feat: change layout of Troubleshooting page to use tabs
 (#5187)

* feat: change layout of Troubleshooting page to use tabs

fixes https://github.com/containers/podman-desktop/issues/5183
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
---
 packages/renderer/src/App.svelte              |  4 ++--
 .../TroubleshootingContainerEngines.svelte    |  2 +-
 .../TroubleshootingDevToolsConsoleLogs.svelte |  6 ++---
 .../TroubleshootingPage.spec.ts               | 16 ++++++++++++-
 .../TroubleshootingPage.svelte                | 23 +++++++++++++++----
 .../TroubleshootingPageStores.svelte          |  2 +-
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/packages/renderer/src/App.svelte b/packages/renderer/src/App.svelte
index b4a4384f69623..fbe0e38e122c6 100644
--- a/packages/renderer/src/App.svelte
+++ b/packages/renderer/src/App.svelte
@@ -59,7 +59,7 @@ window.events?.receive('display-help', () => {
 });
 
 window.events?.receive('display-troubleshooting', () => {
-  router.goto('/troubleshooting');
+  router.goto('/troubleshooting/repair-connections');
 });
 </script>
 
@@ -174,7 +174,7 @@ window.events?.receive('display-troubleshooting', () => {
         <Route path="/help" breadcrumb="Help">
           <HelpPage />
         </Route>
-        <Route path="/troubleshooting" breadcrumb="Troubleshooting">
+        <Route path="/troubleshooting/*" breadcrumb="Troubleshooting">
           <TroubleshootingPage />
         </Route>
       </div>
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingContainerEngines.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingContainerEngines.svelte
index 9f8a46ed3ce47..ae9c0b7f59a3e 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingContainerEngines.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingContainerEngines.svelte
@@ -9,7 +9,7 @@ $: containerEngines = providers.map(provider => provider.containerConnections).f
 $: containerEnginesRunning = containerEngines.filter(containerEngine => containerEngine.status === 'started');
 </script>
 
-<div class="flex flex-col bg-charcoal-600 p-4 rounded-lg">
+<div class="flex flex-col w-full bg-charcoal-600 m-4 p-4 rounded-lg">
   <div class="flex flex-row align-middle items-center">
     <ContainerIcon size="40" solid="{true}" class="pr-3 text-gray-700" />
     <div role="status" aria-label="container connections" class="text-xl">
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
index 1ca640bf4e435..0b3bbb6cd4c4f 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
@@ -24,8 +24,8 @@ function copyLogsToClipboard() {
 }
 </script>
 
-<div class="flex flex-col bg-charcoal-600 p-4 rounded-lg">
-  <div class="flex flex-row align-middle items-center w-full">
+<div class="flex flex-col w-full m-4 bg-charcoal-600 p-4 rounded-lg">
+  <div class="flex flex-row align-middle items-center w-full mb-4">
     <Fa size="30" class="pr-3 text-gray-700" icon="{faFileLines}" />
     <div class="text-xl">Logs</div>
     <div class="flex flex-1 justify-end">
@@ -34,7 +34,7 @@ function copyLogsToClipboard() {
     </div>
   </div>
   {#if logs.length > 0}
-    <div class="h-40 overflow-auto m-2 p-2 bg-charcoal-800">
+    <div class="h-full overflow-auto p-2 bg-charcoal-800">
       <ul aria-label="logs">
         {#each logs as log}
           <li>
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.spec.ts b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.spec.ts
index e70a769df7ebc..b5706d2e2df7f 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.spec.ts
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.spec.ts
@@ -20,7 +20,7 @@
 
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, test, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { fireEvent, render, screen } from '@testing-library/svelte';
 import TroubleshootingPage from './TroubleshootingPage.svelte';
 
 const getDevtoolsConsoleLogsMock = vi.fn();
@@ -33,7 +33,21 @@ test('Check Troubleshooting Page', async () => {
   getDevtoolsConsoleLogsMock.mockReturnValue([]);
   render(TroubleshootingPage, {});
 
+  // click on the first tab
+  const repairConnectionsLink = screen.getByRole('link', { name: 'Repair & Connections' });
+  expect(repairConnectionsLink).toBeInTheDocument();
+  await fireEvent.click(repairConnectionsLink);
+
   // check we have the container connections role
   const containerConnections = screen.getByRole('status', { name: 'container connections' });
   expect(containerConnections).toBeInTheDocument();
+
+  // click on the stores tab
+  const storesLink = screen.getByRole('link', { name: 'Stores' });
+  expect(storesLink).toBeInTheDocument();
+  await fireEvent.click(storesLink);
+
+  // check we have stores displayed
+  const stores = screen.getByRole('status', { name: 'stores' });
+  expect(stores).toBeInTheDocument();
 });
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
index c720ce84f5494..64079d2079459 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
@@ -1,18 +1,31 @@
 <script>
 import FormPage from '../ui/FormPage.svelte';
+import Tab from '../ui/Tab.svelte';
 import TroubleshootingDevToolsConsoleLogs from './TroubleshootingDevToolsConsoleLogs.svelte';
 import TroubleshootingPageProviders from './TroubleshootingPageProviders.svelte';
 import TroubleshootingPageStores from './TroubleshootingPageStores.svelte';
+import Route from '/@/Route.svelte';
 </script>
 
 <FormPage title="Troubleshooting" showBreadcrumb="{false}">
   <i slot="icon" class="fas fa-lightbulb fa-2x" aria-hidden="true"></i>
 
-  <div slot="content" class="flex flex-col space-y-4 p-4">
-    <TroubleshootingPageProviders />
+  <svelte:fragment slot="tabs">
+    <Tab title="Repair & Connections" url="repair-connections" />
+    <Tab title="Logs" url="logs" />
+    <Tab title="Stores" url="stores" />
+  </svelte:fragment>
+  <svelte:fragment slot="content">
+    <Route path="/repair-connections" breadcrumb="Repair & Connections" navigationHint="tab">
+      <TroubleshootingPageProviders />
+    </Route>
 
-    <TroubleshootingDevToolsConsoleLogs />
+    <Route path="/logs" breadcrumb="Logs" navigationHint="tab">
+      <TroubleshootingDevToolsConsoleLogs />
+    </Route>
 
-    <TroubleshootingPageStores />
-  </div>
+    <Route path="/stores" breadcrumb="Stores" navigationHint="tab">
+      <TroubleshootingPageStores />
+    </Route>
+  </svelte:fragment>
 </FormPage>
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
index 112d74fe76fed..f23991bbbc6fb 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
@@ -25,7 +25,7 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-col bg-charcoal-600 p-4 rounded-lg">
+<div class="flex w-full h-fit m-4 flex-col bg-charcoal-600 p-4 rounded-lg">
   <div class="flex flex-row align-middle items-center w-full mb-4">
     <Fa size="30" class="pr-3 text-gray-700" icon="{faDatabase}" />
     <div role="status" aria-label="stores" class="text-xl">Stores</div>