fix: remove tinro from Tab and ui (podman-desktop#7288)

* fix: remove tinro from Tab and ui Signed-off-by: lstocchi <[email protected]> * fix: use selected prop in tab component Signed-off-by: lstocchi <[email protected]> * fix: fix wrong tab url Signed-off-by: lstocchi <[email protected]> --------- Signed-off-by: lstocchi <[email protected]>
feloy · May 23, 2024 · 6b615e4 · 6b615e4
1 parent 6427681
commit 6b615e4
Show file tree

Hide file tree

Showing 18 changed files with 191 additions and 65 deletions.
diff --git a/packages/renderer/src/lib/compose/ComposeDetails.svelte b/packages/renderer/src/lib/compose/ComposeDetails.svelte
@@ -2,6 +2,7 @@
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import { containersInfos } from '/@/stores/containers';
 
@@ -11,6 +12,7 @@ import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import ComposeIcon from '../images/PodIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import ComposeActions from './ComposeActions.svelte';
 import ComposeDetailsInspect from './ComposeDetailsInspect.svelte';
 import ComposeDetailsKube from './ComposeDetailsKube.svelte';
@@ -96,10 +98,16 @@ onDestroy(() => {
       <ComposeActions compose="{compose}" detailed="{true}" on:update="{() => (compose = compose)}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">

diff --git a/packages/renderer/src/lib/container/ContainerDetails.svelte b/packages/renderer/src/lib/container/ContainerDetails.svelte
@@ -11,6 +11,7 @@ import { containersInfos } from '../../stores/containers';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { ContainerUtils } from './container-utils';
 import ContainerActions from './ContainerActions.svelte';
 import ContainerDetailsInspect from './ContainerDetailsInspect.svelte';
@@ -90,16 +91,25 @@ onMount(() => {
       <ContainerStatistics container="{container}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
 
       {#if container.engineType === 'podman' && container.groupInfo.type === ContainerGroupInfoTypeUI.STANDALONE}
-        <Tab title="Kube" url="kube" />
+        <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
       {/if}
-      <Tab title="Terminal" url="terminal" />
+      <Tab
+        title="Terminal"
+        selected="{isTabSelected($router.path, 'terminal')}"
+        url="{getTabUrl($router.path, 'terminal')}" />
       {#if displayTty}
-        <Tab title="Tty" url="tty" />
+        <Tab title="Tty" selected="{isTabSelected($router.path, 'tty')}" url="{getTabUrl($router.path, 'tty')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">

diff --git a/packages/renderer/src/lib/deployments/DeploymentDetails.svelte b/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Deployment } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextDeployments } from '/@/stores/kubernetes-contexts-state';
@@ -12,6 +13,7 @@ import DeploymentIcon from '../images/DeploymentIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { DeploymentUtils } from './deployment-utils';
 import DeploymentActions from './DeploymentActions.svelte';
 import DeploymentDetailsSummary from './DeploymentDetailsSummary.svelte';
@@ -63,9 +65,15 @@ async function loadDetails() {
       <DeploymentActions deployment="{deployment}" detailed="{true}" on:update="{() => (deployment = deployment)}" />
     </svelte:fragment>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">

diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -3,6 +3,7 @@ import type { ImageInfo } from '@podman-desktop/api';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
+import { router } from 'tinro';
 
 import { containersInfos } from '/@/stores/containers';
 import { context } from '/@/stores/context';
@@ -16,6 +17,7 @@ import type { ContextUI } from '../context/context';
 import StatusIcon from '../images/StatusIcon.svelte';
 import Badge from '../ui/Badge.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import {
   IMAGE_DETAILS_VIEW_BADGES,
   IMAGE_DETAILS_VIEW_ICONS,
@@ -142,11 +144,20 @@ onDestroy(() => {
       groupContributions="{true}"
       on:update="{() => (image = image)}" />
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="History" url="history" />
-      <Tab title="Inspect" url="inspect" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="History"
+        selected="{isTabSelected($router.path, 'history')}"
+        url="{getTabUrl($router.path, 'history')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
       {#if showCheckTab}
-        <Tab title="Check" url="check" />
+        <Tab title="Check" selected="{isTabSelected($router.path, 'check')}" url="{getTabUrl($router.path, 'check')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">

diff --git a/packages/renderer/src/lib/image/RunImage.svelte b/packages/renderer/src/lib/image/RunImage.svelte
@@ -17,6 +17,7 @@ import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import { splitSpacesHandlingDoubleQuotes } from '../string/string';
 import FormPage from '../ui/FormPage.svelte';
 import NumberInput from '../ui/NumberInput.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import type { ImageInfoUI } from './ImageInfoUI';
 
 interface PortInfo {
@@ -629,10 +630,22 @@ async function assertAllPortAreValid(): Promise<void> {
       <div slot="content" class="px-5 pb-5 min-w-full h-fit">
         <div class="bg-charcoal-600 px-6 py-4 space-y-2 lg:px-8 sm:pb-6 xl:pb-8">
           <div class="flex flex-row px-2 border-b border-charcoal-400">
-            <Tab title="Basic" url="basic" />
-            <Tab title="Advanced" url="advanced" />
-            <Tab title="Networking" url="networking" />
-            <Tab title="Security" url="security" />
+            <Tab
+              title="Basic"
+              selected="{isTabSelected($router.path, 'basic')}"
+              url="{getTabUrl($router.path, 'basic')}" />
+            <Tab
+              title="Advanced"
+              selected="{isTabSelected($router.path, 'advanced')}"
+              url="{getTabUrl($router.path, 'advanced')}" />
+            <Tab
+              title="Networking"
+              selected="{isTabSelected($router.path, 'networking')}"
+              url="{getTabUrl($router.path, 'networking')}" />
+            <Tab
+              title="Security"
+              selected="{isTabSelected($router.path, 'security')}"
+              url="{getTabUrl($router.path, 'security')}" />
           </div>
           <div>
             <Route path="/basic" breadcrumb="Basic" navigationHint="tab">

diff --git a/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte b/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Ingress } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextIngresses } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadIngressDetails() {
       <StateChange state="{ingressUI.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">

diff --git a/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte b/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextRoutes } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadRouteDetails() {
       <StateChange state="{routeUI.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">

diff --git a/packages/renderer/src/lib/pod/PodDetails.svelte b/packages/renderer/src/lib/pod/PodDetails.svelte
@@ -9,6 +9,7 @@ import PodIcon from '../images/PodIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import KubernetesTerminalBrowser from './KubernetesTerminalBrowser.svelte';
 import { PodUtils } from './pod-utils';
 import PodActions from './PodActions.svelte';
@@ -75,12 +76,21 @@ onMount(() => {
       <StateChange state="{pod.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Logs" url="logs" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
       {#if pod.kind === 'kubernetes'}
-        <Tab title="Terminal" url="k8s-terminal" />
+        <Tab
+          title="Terminal"
+          selected="{isTabSelected($router.path, 'k8s-terminal')}"
+          url="{getTabUrl($router.path, 'k8s-terminal')}" />
       {/if}
     </svelte:fragment>
     <svelte:fragment slot="content">

diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
@@ -3,6 +3,7 @@ import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import type {
   ProviderContainerConnectionInfo,
@@ -17,6 +18,7 @@ import IconImage from '../appearance/IconImage.svelte';
 import ConnectionErrorInfoButton from '../ui/ConnectionErrorInfoButton.svelte';
 import ConnectionStatus from '../ui/ConnectionStatus.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
@@ -156,9 +158,12 @@ function setNoLogs() {
       </svelte:fragment>
       <IconImage slot="icon" image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
       <svelte:fragment slot="tabs">
-        <Tab title="Summary" url="summary" />
+        <Tab
+          title="Summary"
+          selected="{isTabSelected($router.path, 'summary')}"
+          url="{getTabUrl($router.path, 'summary')}" />
         {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" url="logs" />
+          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
         {/if}
       </svelte:fragment>
       <svelte:fragment slot="content">

diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
@@ -3,6 +3,7 @@ import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
+import { router } from 'tinro';
 
 import type {
   ProviderContainerConnectionInfo,
@@ -17,6 +18,7 @@ import IconImage from '../appearance/IconImage.svelte';
 import ConnectionErrorInfoButton from '../ui/ConnectionErrorInfoButton.svelte';
 import ConnectionStatus from '../ui/ConnectionStatus.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
@@ -154,9 +156,12 @@ function setNoLogs() {
         <IconImage image="{providerInfo?.images?.icon}" alt="{providerInfo?.name}" class="max-h-10" />
       </svelte:fragment>
       <svelte:fragment slot="tabs">
-        <Tab title="Summary" url="summary" />
+        <Tab
+          title="Summary"
+          selected="{isTabSelected($router.path, 'summary')}"
+          url="{getTabUrl($router.path, 'summary')}" />
         {#if connectionInfo.lifecycleMethods && connectionInfo.lifecycleMethods.length > 0}
-          <Tab title="Logs" url="logs" />
+          <Tab title="Logs" selected="{isTabSelected($router.path, 'logs')}" url="{getTabUrl($router.path, 'logs')}" />
         {/if}
       </svelte:fragment>
       <svelte:fragment slot="content">

diff --git a/packages/renderer/src/lib/service/ServiceDetails.svelte b/packages/renderer/src/lib/service/ServiceDetails.svelte
@@ -2,6 +2,7 @@
 import type { V1Service } from '@kubernetes/client-node';
 import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
+import { router } from 'tinro';
 import { stringify } from 'yaml';
 
 import { kubernetesCurrentContextServices } from '/@/stores/kubernetes-contexts-state';
@@ -13,6 +14,7 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import KubeEditYAML from '../kube/KubeEditYAML.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import StateChange from '../ui/StateChange.svelte';
+import { getTabUrl, isTabSelected } from '../ui/Util';
 import { ServiceUtils } from './service-utils';
 import ServiceActions from './ServiceActions.svelte';
 import ServiceDetailsSummary from './ServiceDetailsSummary.svelte';
@@ -65,9 +67,15 @@ async function loadDetails() {
       <StateChange state="{service.status}" />
     </div>
     <svelte:fragment slot="tabs">
-      <Tab title="Summary" url="summary" />
-      <Tab title="Inspect" url="inspect" />
-      <Tab title="Kube" url="kube" />
+      <Tab
+        title="Summary"
+        selected="{isTabSelected($router.path, 'summary')}"
+        url="{getTabUrl($router.path, 'summary')}" />
+      <Tab
+        title="Inspect"
+        selected="{isTabSelected($router.path, 'inspect')}"
+        url="{getTabUrl($router.path, 'inspect')}" />
+      <Tab title="Kube" selected="{isTabSelected($router.path, 'kube')}" url="{getTabUrl($router.path, 'kube')}" />
     </svelte:fragment>
     <svelte:fragment slot="content">
       <Route path="/summary" breadcrumb="Summary" navigationHint="tab">