From 1d95e5d057bff02ef810b0278def4e0f8fc2a4df Mon Sep 17 00:00:00 2001
From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com>
Date: Thu, 16 May 2024 12:01:27 +0200
Subject: [PATCH] chore: move Tab to ui package (#7226)

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 .../src/lib/compose/ComposeDetails.svelte     |  2 +-
 .../src/lib/container/ContainerDetails.svelte |  3 +-
 .../lib/deployments/DeploymentDetails.svelte  |  2 +-
 .../src/lib/image/ImageDetails.svelte         |  2 +-
 .../renderer/src/lib/image/RunImage.svelte    |  3 +-
 .../ingresses-routes/IngressDetails.svelte    |  2 +-
 .../lib/ingresses-routes/RouteDetails.svelte  |  2 +-
 .../renderer/src/lib/pod/PodDetails.svelte    |  3 +-
 ...erencesContainerConnectionRendering.svelte |  2 +-
 ...rencesKubernetesConnectionRendering.svelte |  2 +-
 .../src/lib/service/ServiceDetails.svelte     |  2 +-
 .../TroubleshootingPage.svelte                |  3 +-
 .../renderer/src/lib/ui/FormPageSpec.svelte   |  3 +-
 .../src/lib/volume/VolumeDetails.svelte       |  2 +-
 packages/ui/package.json                      |  7 +++-
 packages/ui/src/lib/index.ts                  |  2 ++
 packages/ui/src/lib/tab/Tab.spec.ts           | 35 +++++++++++++++++++
 .../src/lib/ui => ui/src/lib/tab}/Tab.svelte  |  0
 18 files changed, 59 insertions(+), 18 deletions(-)
 create mode 100644 packages/ui/src/lib/tab/Tab.spec.ts
 rename packages/{renderer/src/lib/ui => ui/src/lib/tab}/Tab.svelte (100%)

diff --git a/packages/renderer/src/lib/compose/ComposeDetails.svelte b/packages/renderer/src/lib/compose/ComposeDetails.svelte
index c8b565356df..216cd0b3241 100644
--- a/packages/renderer/src/lib/compose/ComposeDetails.svelte
+++ b/packages/renderer/src/lib/compose/ComposeDetails.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
 
@@ -10,7 +11,6 @@ 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 Tab from '../ui/Tab.svelte';
 import ComposeActions from './ComposeActions.svelte';
 import ComposeDetailsInspect from './ComposeDetailsInspect.svelte';
 import ComposeDetailsKube from './ComposeDetailsKube.svelte';
diff --git a/packages/renderer/src/lib/container/ContainerDetails.svelte b/packages/renderer/src/lib/container/ContainerDetails.svelte
index d281ae67a05..92dbef04472 100644
--- a/packages/renderer/src/lib/container/ContainerDetails.svelte
+++ b/packages/renderer/src/lib/container/ContainerDetails.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
-import { ErrorMessage } from '@podman-desktop/ui-svelte';
+import { ErrorMessage, Tab } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
@@ -12,7 +12,6 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
 import Link from '../ui/Link.svelte';
 import StateChange from '../ui/StateChange.svelte';
-import Tab from '../ui/Tab.svelte';
 import { ContainerUtils } from './container-utils';
 import ContainerActions from './ContainerActions.svelte';
 import ContainerDetailsInspect from './ContainerDetailsInspect.svelte';
diff --git a/packages/renderer/src/lib/deployments/DeploymentDetails.svelte b/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
index a4b701942db..65735ddb3a7 100644
--- a/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentDetails.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { V1Deployment } from '@kubernetes/client-node';
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { stringify } from 'yaml';
 
@@ -11,7 +12,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { DeploymentUtils } from './deployment-utils';
 import DeploymentActions from './DeploymentActions.svelte';
 import DeploymentDetailsSummary from './DeploymentDetailsSummary.svelte';
diff --git a/packages/renderer/src/lib/image/ImageDetails.svelte b/packages/renderer/src/lib/image/ImageDetails.svelte
index c49127b625b..c390798de08 100644
--- a/packages/renderer/src/lib/image/ImageDetails.svelte
+++ b/packages/renderer/src/lib/image/ImageDetails.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 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';
 
@@ -15,7 +16,6 @@ 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 Tab from '../ui/Tab.svelte';
 import {
   IMAGE_DETAILS_VIEW_BADGES,
   IMAGE_DETAILS_VIEW_ICONS,
diff --git a/packages/renderer/src/lib/image/RunImage.svelte b/packages/renderer/src/lib/image/RunImage.svelte
index 767915fbe70..ad09e2b6829 100644
--- a/packages/renderer/src/lib/image/RunImage.svelte
+++ b/packages/renderer/src/lib/image/RunImage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faFolderOpen, faMinusCircle, faPlay, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
-import { Button, Checkbox, ErrorMessage, Input } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, Input, Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -17,7 +17,6 @@ import type { ContainerInfoUI } from '../container/ContainerInfoUI';
 import { splitSpacesHandlingDoubleQuotes } from '../string/string';
 import FormPage from '../ui/FormPage.svelte';
 import NumberInput from '../ui/NumberInput.svelte';
-import Tab from '../ui/Tab.svelte';
 import type { ImageInfoUI } from './ImageInfoUI';
 
 interface PortInfo {
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte b/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
index cc3416630a0..b710bb98c04 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressDetails.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { V1Ingress } from '@kubernetes/client-node';
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { stringify } from 'yaml';
 
@@ -12,7 +13,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
diff --git a/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte b/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
index 32d5f638085..f3a3e00b507 100644
--- a/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/RouteDetails.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { stringify } from 'yaml';
 
@@ -12,7 +13,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteActions from './IngressRouteActions.svelte';
 import ServiceDetailsSummary from './IngressRouteDetailsSummary.svelte';
diff --git a/packages/renderer/src/lib/pod/PodDetails.svelte b/packages/renderer/src/lib/pod/PodDetails.svelte
index 78c70fa2c9f..36fb7357741 100644
--- a/packages/renderer/src/lib/pod/PodDetails.svelte
+++ b/packages/renderer/src/lib/pod/PodDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ErrorMessage } from '@podman-desktop/ui-svelte';
+import { ErrorMessage, Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -9,7 +9,6 @@ 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 Tab from '../ui/Tab.svelte';
 import KubernetesTerminalBrowser from './KubernetesTerminalBrowser.svelte';
 import { PodUtils } from './pod-utils';
 import PodActions from './PodActions.svelte';
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
index 32474942055..439bff19b26 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
@@ -16,7 +17,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
index fa07b90fbf8..a9df5fc23a3 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesConnectionRendering.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
@@ -16,7 +17,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { eventCollect } from './preferences-connection-rendering-task';
 import PreferencesConnectionActions from './PreferencesConnectionActions.svelte';
 import PreferencesConnectionDetailsLogs from './PreferencesConnectionDetailsLogs.svelte';
diff --git a/packages/renderer/src/lib/service/ServiceDetails.svelte b/packages/renderer/src/lib/service/ServiceDetails.svelte
index 0cf5b7c4c8b..495c879e743 100644
--- a/packages/renderer/src/lib/service/ServiceDetails.svelte
+++ b/packages/renderer/src/lib/service/ServiceDetails.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { V1Service } from '@kubernetes/client-node';
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { stringify } from 'yaml';
 
@@ -12,7 +13,6 @@ 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 Tab from '../ui/Tab.svelte';
 import { ServiceUtils } from './service-utils';
 import ServiceActions from './ServiceActions.svelte';
 import ServiceDetailsSummary from './ServiceDetailsSummary.svelte';
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
index 8173c92c231..d0246715efd 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPage.svelte
@@ -1,8 +1,9 @@
 <script>
+import { Tab } from '@podman-desktop/ui-svelte';
+
 import Route from '/@/Route.svelte';
 
 import FormPage from '../ui/FormPage.svelte';
-import Tab from '../ui/Tab.svelte';
 import TroubleshootingDevToolsConsoleLogs from './TroubleshootingDevToolsConsoleLogs.svelte';
 import TroubleshootingGatherLogs from './TroubleshootingGatherLogs.svelte';
 import TroubleshootingPageProviders from './TroubleshootingPageProviders.svelte';
diff --git a/packages/renderer/src/lib/ui/FormPageSpec.svelte b/packages/renderer/src/lib/ui/FormPageSpec.svelte
index 9c277a6ecdb..3482ac5cce9 100644
--- a/packages/renderer/src/lib/ui/FormPageSpec.svelte
+++ b/packages/renderer/src/lib/ui/FormPageSpec.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
+
 import FormPage from './FormPage.svelte';
-import Tab from './Tab.svelte';
 </script>
 
 <FormPage title="Test component" showBreadcrumb="{false}">
diff --git a/packages/renderer/src/lib/volume/VolumeDetails.svelte b/packages/renderer/src/lib/volume/VolumeDetails.svelte
index ae7013c3ee1..65322950a9d 100644
--- a/packages/renderer/src/lib/volume/VolumeDetails.svelte
+++ b/packages/renderer/src/lib/volume/VolumeDetails.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Tab } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
 import Route from '../../Route.svelte';
@@ -6,7 +7,6 @@ import { volumeListInfos } from '../../stores/volumes';
 import StatusIcon from '../images/StatusIcon.svelte';
 import VolumeIcon from '../images/VolumeIcon.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
-import Tab from '../ui/Tab.svelte';
 import VolumeDetailsSummary from '././VolumeDetailsSummary.svelte';
 import { VolumeUtils } from './volume-utils';
 import VolumeActions from './VolumeActions.svelte';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7d0709e9a7d..1ae24dc6067 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -63,6 +63,10 @@
     "./icons/ContainerIcon": {
       "types": "./dist/icons/ContainerIcon.d.ts",
       "svelte": "./dist/icons/ContainerIcon.svelte"
+    },
+    "./Tab": {
+      "types": "./dist/tab/Tab.svelte.d.ts",
+      "svelte": "./dist/tab/Tab.svelte"
     }
   },
   "peerDependencies": {
@@ -76,7 +80,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "moment": "^2.30.1",
     "humanize-duration": "^3.32.0",
-    "svelte-fa": "^4.0.2"
+    "svelte-fa": "^4.0.2",
+    "tinro": "^0.6.12"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.1",
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 4bdf7776fa5..52ad6f0649b 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -22,6 +22,7 @@ import Checkbox from './checkbox/Checkbox.svelte';
 import Input from './input/Input.svelte';
 import Modal from './modal/Modal.svelte';
 import Spinner from './spinner/Spinner.svelte';
+import Tab from './tab/Tab.svelte';
 import TableDurationColumn from './table/DurationColumn.svelte';
 import TableSimpleColumn from './table/SimpleColumn.svelte';
 import { Column as TableColumn, Row as TableRow } from './table/table';
@@ -37,6 +38,7 @@ export {
   Input,
   Modal,
   Spinner,
+  Tab,
   Table,
   TableColumn,
   TableDurationColumn,
diff --git a/packages/ui/src/lib/tab/Tab.spec.ts b/packages/ui/src/lib/tab/Tab.spec.ts
new file mode 100644
index 00000000000..d722892bbe2
--- /dev/null
+++ b/packages/ui/src/lib/tab/Tab.spec.ts
@@ -0,0 +1,35 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+
+import { render, screen } from '@testing-library/svelte';
+import { router } from 'tinro';
+import { expect, test } from 'vitest';
+
+import Tab from './Tab.svelte';
+
+test('check link element is created by using url and title', async () => {
+  router.goto('/');
+  render(Tab, { url: 'url', title: 'title' });
+
+  const item = screen.getByText('title');
+  expect(item).toBeDefined();
+  expect((item as HTMLAnchorElement).href.endsWith('/url')).toBeTruthy();
+  expect(item.textContent).equals('title');
+});
diff --git a/packages/renderer/src/lib/ui/Tab.svelte b/packages/ui/src/lib/tab/Tab.svelte
similarity index 100%
rename from packages/renderer/src/lib/ui/Tab.svelte
rename to packages/ui/src/lib/tab/Tab.svelte