chore: move Tab to ui package (#7226)

Signed-off-by: lstocchi <lstocchi@redhat.com>

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';

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';

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';

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,

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 {

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';

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';

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';

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';

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';

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';

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';

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}">

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';

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",

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,

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');
+});