From 41d943a538350eb1d92a5439a5eb3ea666b17170 Mon Sep 17 00:00:00 2001
From: Jeff MAURY <jmaury@redhat.com>
Date: Thu, 23 May 2024 19:05:34 +0200
Subject: [PATCH] refactor: move EmptyScreen/FilteredEmptyScreen to ui package
 (#7278)

* refactor: move EmptyScreen/FilteredEmptyScreen to ui package

Fixes #6919

Signed-off-by: Jeff MAURY <jmaury@redhat.com>
---
 .../src/lib/compose/ComposeDetailsLogs.svelte   |  2 +-
 .../lib/container/ContainerDetailsLogs.svelte   |  2 +-
 .../container/ContainerDetailsTerminal.svelte   |  2 +-
 .../ContainerDetailsTtyTerminal.svelte          |  2 +-
 .../lib/container/ContainerEmptyScreen.svelte   | 10 +++++++---
 .../src/lib/container/ContainerList.svelte      |  3 +--
 .../deployments/DeploymentEmptyScreen.svelte    |  3 ++-
 .../src/lib/deployments/DeploymentsList.svelte  |  2 +-
 .../src/lib/extensions/ExtensionDetails.svelte  |  3 +--
 .../extensions/ExtensionDetailsReadme.svelte    |  2 +-
 .../src/lib/extensions/ExtensionList.svelte     |  3 +--
 .../src/lib/image/ImageEmptyScreen.svelte       |  8 ++++++--
 .../renderer/src/lib/image/ImagesList.svelte    | 11 +++++++++--
 .../image/NoContainerEngineEmptyScreen.svelte   |  4 +---
 .../IngressRouteEmptyScreen.svelte              |  3 ++-
 .../ingresses-routes/IngressesRoutesList.svelte | 11 +++++++++--
 .../lib/pod/KubernetesTerminalBrowser.svelte    |  2 +-
 .../renderer/src/lib/pod/PodDetailsLogs.svelte  |  2 +-
 .../renderer/src/lib/pod/PodEmptyScreen.svelte  |  8 ++++++--
 packages/renderer/src/lib/pod/PodsList.svelte   |  3 +--
 ...encesAuthenticationProvidersRendering.svelte |  3 +--
 .../PreferencesCliToolsRendering.svelte         |  3 ++-
 ...ncesConnectionCreationOrEditRendering.svelte |  3 +--
 .../PreferencesConnectionDetailsLogs.svelte     |  2 +-
 ...referencesKubernetesContextsRendering.svelte |  3 +--
 .../PreferencesResourcesRendering.svelte        |  3 +--
 .../src/lib/service/ServiceEmptyScreen.svelte   |  3 ++-
 .../src/lib/service/ServicesList.svelte         |  2 +-
 .../src/lib/volume/VolumeEmptyScreen.svelte     |  8 ++++++--
 .../renderer/src/lib/volume/VolumesList.svelte  | 11 +++++++++--
 packages/ui/package.json                        |  8 ++++++++
 packages/ui/src/lib/index.ts                    |  4 ++++
 .../src/lib/screen}/EmptyScreen.spec.ts         |  6 +++---
 .../ui => ui/src/lib/screen}/EmptyScreen.svelte | 17 +++++++++++------
 .../src/lib/screen}/FilteredEmptyScreen.spec.ts |  9 ++++-----
 .../src/lib/screen}/FilteredEmptyScreen.svelte  |  9 +++++----
 36 files changed, 114 insertions(+), 66 deletions(-)
 rename packages/{renderer/src/lib/ui => ui/src/lib/screen}/EmptyScreen.spec.ts (86%)
 rename packages/{renderer/src/lib/ui => ui/src/lib/screen}/EmptyScreen.svelte (79%)
 rename packages/{renderer/src/lib/ui => ui/src/lib/screen}/FilteredEmptyScreen.spec.ts (89%)
 rename packages/{renderer/src/lib/ui => ui/src/lib/screen}/FilteredEmptyScreen.svelte (69%)

diff --git a/packages/renderer/src/lib/compose/ComposeDetailsLogs.svelte b/packages/renderer/src/lib/compose/ComposeDetailsLogs.svelte
index 9cd5b8b38d662..bec6385dfcff2 100644
--- a/packages/renderer/src/lib/compose/ComposeDetailsLogs.svelte
+++ b/packages/renderer/src/lib/compose/ComposeDetailsLogs.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -9,7 +10,6 @@ import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings'
 import { getPanelDetailColor } from '../color/color';
 import { ansi256Colours, colourizedANSIContainerName } from '../editor/editor-utils';
 import { isMultiplexedLog } from '../stream/stream-utils';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import type { ComposeInfoUI } from './ComposeInfoUI';
 
diff --git a/packages/renderer/src/lib/container/ContainerDetailsLogs.svelte b/packages/renderer/src/lib/container/ContainerDetailsLogs.svelte
index c584c059ab0df..1827230504748 100644
--- a/packages/renderer/src/lib/container/ContainerDetailsLogs.svelte
+++ b/packages/renderer/src/lib/container/ContainerDetailsLogs.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -8,7 +9,6 @@ import { FitAddon } from 'xterm-addon-fit';
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
 import { getPanelDetailColor } from '../color/color';
 import { isMultiplexedLog } from '../stream/stream-utils';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import type { ContainerInfoUI } from './ContainerInfoUI';
 
diff --git a/packages/renderer/src/lib/container/ContainerDetailsTerminal.svelte b/packages/renderer/src/lib/container/ContainerDetailsTerminal.svelte
index 5871bd0e9728e..7a6e5109d76b2 100644
--- a/packages/renderer/src/lib/container/ContainerDetailsTerminal.svelte
+++ b/packages/renderer/src/lib/container/ContainerDetailsTerminal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { router } from 'tinro';
 import { Terminal } from 'xterm';
@@ -10,7 +11,6 @@ import { getExistingTerminal, registerTerminal } from '/@/stores/container-termi
 
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
 import { getPanelDetailColor } from '../color/color';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import type { ContainerInfoUI } from './ContainerInfoUI';
 
diff --git a/packages/renderer/src/lib/container/ContainerDetailsTtyTerminal.svelte b/packages/renderer/src/lib/container/ContainerDetailsTtyTerminal.svelte
index 00bca3b22caa4..64bd5d63976b8 100644
--- a/packages/renderer/src/lib/container/ContainerDetailsTtyTerminal.svelte
+++ b/packages/renderer/src/lib/container/ContainerDetailsTtyTerminal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { router } from 'tinro';
 import { Terminal } from 'xterm';
@@ -8,7 +9,6 @@ import { FitAddon } from 'xterm-addon-fit';
 
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
 import { getPanelDetailColor } from '../color/color';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import type { ContainerInfoUI } from './ContainerInfoUI';
 
diff --git a/packages/renderer/src/lib/container/ContainerEmptyScreen.svelte b/packages/renderer/src/lib/container/ContainerEmptyScreen.svelte
index 005c5ef219457..b59b7d46e1da0 100644
--- a/packages/renderer/src/lib/container/ContainerEmptyScreen.svelte
+++ b/packages/renderer/src/lib/container/ContainerEmptyScreen.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 
-import EmptyScreen from '../ui/EmptyScreen.svelte';
-
 export let runningOnly: boolean;
 export let stoppedOnly: boolean;
 
@@ -35,4 +34,9 @@ function getCommandLine(stoppedOnly: boolean): string {
 }
 </script>
 
-<EmptyScreen icon="{ContainerIcon}" title="{title}" message="{message}" commandline="{commandLine}" />
+<EmptyScreen
+  icon="{ContainerIcon}"
+  title="{title}"
+  message="{message}"
+  commandline="{commandLine}"
+  on:click="{() => window.clipboardWriteText(commandLine)}" />
diff --git a/packages/renderer/src/lib/container/ContainerList.svelte b/packages/renderer/src/lib/container/ContainerList.svelte
index 5229d87af1a18..e743cde9e80d6 100644
--- a/packages/renderer/src/lib/container/ContainerList.svelte
+++ b/packages/renderer/src/lib/container/ContainerList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faChevronDown, faChevronRight, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button, Checkbox, ErrorMessage, Modal, NavPage } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, FilteredEmptyScreen, Modal, NavPage } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
@@ -30,7 +30,6 @@ import SolidPodIcon from '../images/SolidPodIcon.svelte';
 import StatusIcon from '../images/StatusIcon.svelte';
 import { PodUtils } from '../pod/pod-utils';
 import PodActions from '../pod/PodActions.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import ProviderInfo from '../ui/ProviderInfo.svelte';
 import StateChange from '../ui/StateChange.svelte';
 import { CONTAINER_LIST_VIEW } from '../view/views';
diff --git a/packages/renderer/src/lib/deployments/DeploymentEmptyScreen.svelte b/packages/renderer/src/lib/deployments/DeploymentEmptyScreen.svelte
index 4ddb5db31c877..e457489bd7f0a 100644
--- a/packages/renderer/src/lib/deployments/DeploymentEmptyScreen.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentEmptyScreen.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import DeploymentIcon from '../images/DeploymentIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 </script>
 
 <EmptyScreen
diff --git a/packages/renderer/src/lib/deployments/DeploymentsList.svelte b/packages/renderer/src/lib/deployments/DeploymentsList.svelte
index 13d05823b7c72..3e04e3da7dea1 100644
--- a/packages/renderer/src/lib/deployments/DeploymentsList.svelte
+++ b/packages/renderer/src/lib/deployments/DeploymentsList.svelte
@@ -2,6 +2,7 @@
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import {
   Button,
+  FilteredEmptyScreen,
   NavPage,
   Table,
   TableColumn,
@@ -20,7 +21,6 @@ import {
 
 import DeploymentIcon from '../images/DeploymentIcon.svelte';
 import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { DeploymentUtils } from './deployment-utils';
 import DeploymentColumnActions from './DeploymentColumnActions.svelte';
 import DeploymentColumnConditions from './DeploymentColumnConditions.svelte';
diff --git a/packages/renderer/src/lib/extensions/ExtensionDetails.svelte b/packages/renderer/src/lib/extensions/ExtensionDetails.svelte
index 934344c5798fe..6a9408ba9ef8e 100644
--- a/packages/renderer/src/lib/extensions/ExtensionDetails.svelte
+++ b/packages/renderer/src/lib/extensions/ExtensionDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen } from '@podman-desktop/ui-svelte';
 import { derived, type Readable } from 'svelte/store';
 
 import extensionIcon from '/@/lib/images/ExtensionIcon.svelte';
@@ -9,7 +9,6 @@ import { catalogExtensionInfos } from '/@/stores/catalog-extensions';
 
 import FeaturedExtensionDownload from '../featured/FeaturedExtensionDownload.svelte';
 import DetailsPage from '../ui/DetailsPage.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import ExtensionStatus from '../ui/ExtensionStatus.svelte';
 import type { ExtensionDetailsUI } from './extension-details-ui';
 import ExtensionBadge from './ExtensionBadge.svelte';
diff --git a/packages/renderer/src/lib/extensions/ExtensionDetailsReadme.svelte b/packages/renderer/src/lib/extensions/ExtensionDetailsReadme.svelte
index ac5fdbefba28d..e1c8583565c38 100644
--- a/packages/renderer/src/lib/extensions/ExtensionDetailsReadme.svelte
+++ b/packages/renderer/src/lib/extensions/ExtensionDetailsReadme.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 import { faFileText } from '@fortawesome/free-solid-svg-icons';
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
 import Markdown from '../markdown/Markdown.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 
 export let readme: { content?: string; uri?: string };
 
diff --git a/packages/renderer/src/lib/extensions/ExtensionList.svelte b/packages/renderer/src/lib/extensions/ExtensionList.svelte
index 1c6adf51c3e4c..2817498ddce1f 100644
--- a/packages/renderer/src/lib/extensions/ExtensionList.svelte
+++ b/packages/renderer/src/lib/extensions/ExtensionList.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 import { faCloudDownload } from '@fortawesome/free-solid-svg-icons';
-import { Button, NavPage } from '@podman-desktop/ui-svelte';
+import { Button, FilteredEmptyScreen, NavPage } from '@podman-desktop/ui-svelte';
 import { derived, type Readable, writable } from 'svelte/store';
 
 import InstalledExtensionList from '/@/lib/extensions/InstalledExtensionList.svelte';
 import ExtensionIcon from '/@/lib/images/ExtensionIcon.svelte';
-import FilteredEmptyScreen from '/@/lib/ui/FilteredEmptyScreen.svelte';
 import { type CombinedExtensionInfoUI, combinedInstalledExtensions } from '/@/stores/all-installed-extensions';
 import { catalogExtensionInfos } from '/@/stores/catalog-extensions';
 import { featuredExtensionInfos } from '/@/stores/featuredExtensions';
diff --git a/packages/renderer/src/lib/image/ImageEmptyScreen.svelte b/packages/renderer/src/lib/image/ImageEmptyScreen.svelte
index f7e33b37811ad..651699c4f6fa7 100644
--- a/packages/renderer/src/lib/image/ImageEmptyScreen.svelte
+++ b/packages/renderer/src/lib/image/ImageEmptyScreen.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import ImageIcon from '../images/ImageIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
+
+const commandLine = 'podman pull quay.io/podman/hello';
 </script>
 
 <EmptyScreen
   icon="{ImageIcon}"
   title="No images"
   message="Pull a first image using the following command line:"
-  commandline="podman pull quay.io/podman/hello" />
+  commandline="{commandLine}"
+  on:click="{() => window.clipboardWriteText(commandLine)}" />
diff --git a/packages/renderer/src/lib/image/ImagesList.svelte b/packages/renderer/src/lib/image/ImagesList.svelte
index c51eb941cbf96..80d17802d5391 100644
--- a/packages/renderer/src/lib/image/ImagesList.svelte
+++ b/packages/renderer/src/lib/image/ImagesList.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 import { faArrowCircleDown, faCube, faDownload, faTrash, faUpload } from '@fortawesome/free-solid-svg-icons';
-import { Button, NavPage, Table, TableColumn, TableRow, TableSimpleColumn } from '@podman-desktop/ui-svelte';
+import {
+  Button,
+  FilteredEmptyScreen,
+  NavPage,
+  Table,
+  TableColumn,
+  TableRow,
+  TableSimpleColumn,
+} from '@podman-desktop/ui-svelte';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
@@ -20,7 +28,6 @@ import type { ContextUI } from '../context/context';
 import type { EngineInfoUI } from '../engine/EngineInfoUI';
 import Prune from '../engine/Prune.svelte';
 import ImageIcon from '../images/ImageIcon.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { IMAGE_LIST_VIEW_BADGES, IMAGE_LIST_VIEW_ICONS, IMAGE_VIEW_BADGES, IMAGE_VIEW_ICONS } from '../view/views';
 import { ImageUtils } from './image-utils';
 import ImageColumnActions from './ImageColumnActions.svelte';
diff --git a/packages/renderer/src/lib/image/NoContainerEngineEmptyScreen.svelte b/packages/renderer/src/lib/image/NoContainerEngineEmptyScreen.svelte
index 3945c1a8d0d87..dde4eb3831fe9 100644
--- a/packages/renderer/src/lib/image/NoContainerEngineEmptyScreen.svelte
+++ b/packages/renderer/src/lib/image/NoContainerEngineEmptyScreen.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen } from '@podman-desktop/ui-svelte';
 import { router } from 'tinro';
 
-import EmptyScreen from '../ui/EmptyScreen.svelte';
-
 function gotoResourcesPage() {
   router.goto('/preferences/resources/');
 }
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressRouteEmptyScreen.svelte b/packages/renderer/src/lib/ingresses-routes/IngressRouteEmptyScreen.svelte
index 7ef9cfce9d1a9..1ef65b8f7d68e 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressRouteEmptyScreen.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressRouteEmptyScreen.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import IngressRouteIcon from '../images/IngressRouteIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 </script>
 
 <EmptyScreen
diff --git a/packages/renderer/src/lib/ingresses-routes/IngressesRoutesList.svelte b/packages/renderer/src/lib/ingresses-routes/IngressesRoutesList.svelte
index b7f0beb5a143c..8021c915012e7 100644
--- a/packages/renderer/src/lib/ingresses-routes/IngressesRoutesList.svelte
+++ b/packages/renderer/src/lib/ingresses-routes/IngressesRoutesList.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button, NavPage, Table, TableColumn, TableRow, TableSimpleColumn } from '@podman-desktop/ui-svelte';
+import {
+  Button,
+  FilteredEmptyScreen,
+  NavPage,
+  Table,
+  TableColumn,
+  TableRow,
+  TableSimpleColumn,
+} from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
 
@@ -15,7 +23,6 @@ import type { V1Route } from '/@api/openshift-types';
 
 import IngressRouteIcon from '../images/IngressRouteIcon.svelte';
 import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { IngressRouteUtils } from './ingress-route-utils';
 import IngressRouteColumnActions from './IngressRouteColumnActions.svelte';
 import IngressRouteColumnBackend from './IngressRouteColumnBackend.svelte';
diff --git a/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte b/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
index 8c812538740a1..9ff916c450a6b 100644
--- a/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
+++ b/packages/renderer/src/lib/pod/KubernetesTerminalBrowser.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
-import EmptyScreen from '/@/lib/ui/EmptyScreen.svelte';
 import NoLogIcon from '/@/lib/ui/NoLogIcon.svelte';
 import { podsInfos } from '/@/stores/pods';
 
diff --git a/packages/renderer/src/lib/pod/PodDetailsLogs.svelte b/packages/renderer/src/lib/pod/PodDetailsLogs.svelte
index f2c34bdebbd2a..6d91d6ccb5ba0 100644
--- a/packages/renderer/src/lib/pod/PodDetailsLogs.svelte
+++ b/packages/renderer/src/lib/pod/PodDetailsLogs.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -9,7 +10,6 @@ import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings'
 import { getPanelDetailColor } from '../color/color';
 import { ansi256Colours, colourizedANSIContainerName } from '../editor/editor-utils';
 import { isMultiplexedLog } from '../stream/stream-utils';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import type { PodInfoUI } from './PodInfoUI';
 
diff --git a/packages/renderer/src/lib/pod/PodEmptyScreen.svelte b/packages/renderer/src/lib/pod/PodEmptyScreen.svelte
index c6a97e89abb6f..fc06b662b9bf9 100644
--- a/packages/renderer/src/lib/pod/PodEmptyScreen.svelte
+++ b/packages/renderer/src/lib/pod/PodEmptyScreen.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import PodIcon from '../images/PodIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
+
+const commandLine = 'podman pod create --label myFirstPod';
 </script>
 
 <EmptyScreen
   icon="{PodIcon}"
   title="No pods"
   message="Run a first pod using the following command line:"
-  commandline="podman pod create --label myFirstPod" />
+  commandline="{commandLine}"
+  on:click="{() => window.clipboardWriteText(commandLine)}" />
diff --git a/packages/renderer/src/lib/pod/PodsList.svelte b/packages/renderer/src/lib/pod/PodsList.svelte
index 7859a684e36f8..9912c3d50cebc 100644
--- a/packages/renderer/src/lib/pod/PodsList.svelte
+++ b/packages/renderer/src/lib/pod/PodsList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button, NavPage, Table, TableColumn, TableRow } from '@podman-desktop/ui-svelte';
+import { Button, FilteredEmptyScreen, NavPage, Table, TableColumn, TableRow } from '@podman-desktop/ui-svelte';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
@@ -15,7 +15,6 @@ import Prune from '../engine/Prune.svelte';
 import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.svelte';
 import PodIcon from '../images/PodIcon.svelte';
 import KubePlayButton from '../kube/KubePlayButton.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { PodUtils } from './pod-utils';
 import PodColumnActions from './PodColumnActions.svelte';
 import PodColumnAge from './PodColumnAge.svelte';
diff --git a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
index 096a8a3619608..7c10cf02ebeaf 100644
--- a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
@@ -5,7 +5,7 @@ import {
   faRightFromBracket,
   faRightToBracket,
 } from '@fortawesome/free-solid-svg-icons';
-import { Button, Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen, Tooltip } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import EmbeddableCatalogExtensionList from '/@/lib/extensions/EmbeddableCatalogExtensionList.svelte';
@@ -14,7 +14,6 @@ import { authenticationProviders } from '../../stores/authenticationProviders';
 import KeyIcon from '../images/KeyIcon.svelte';
 import DropdownMenu from '../ui/DropdownMenu.svelte';
 import DropdownMenuItem from '../ui/DropDownMenuItem.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import SettingsPage from './SettingsPage.svelte';
 </script>
 
diff --git a/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.svelte
index f7e20b4904ce2..0a872aa2e1665 100644
--- a/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesCliToolsRendering.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import { cliToolInfos } from '../../stores/cli-tools';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import EngineIcon from '../ui/EngineIcon.svelte';
 import PreferencesCliTool from './PreferencesCliTool.svelte';
 import SettingsPage from './SettingsPage.svelte';
diff --git a/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte
index 971c6ab2efb03..87216c968f2f0 100644
--- a/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesConnectionCreationOrEditRendering.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { faCubes } from '@fortawesome/free-solid-svg-icons';
 import type { AuditRequestItems, AuditResult, ConfigurationScope } from '@podman-desktop/api';
-import { Button, ErrorMessage, LinearProgress, Spinner } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen, ErrorMessage, LinearProgress, Spinner } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 /* eslint-disable import/no-duplicates */
 // https://github.com/import-js/eslint-plugin-import/issues/1479
@@ -22,7 +22,6 @@ import type {
 import type { IConfigurationPropertyRecordedSchema } from '../../../../main/src/plugin/configuration-registry';
 import Markdown from '../markdown/Markdown.svelte';
 import AuditMessageBox from '../ui/AuditMessageBox.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import TerminalWindow from '../ui/TerminalWindow.svelte';
 import EditableConnectionResourceItem from './item-formats/EditableConnectionResourceItem.svelte';
 import {
diff --git a/packages/renderer/src/lib/preferences/PreferencesConnectionDetailsLogs.svelte b/packages/renderer/src/lib/preferences/PreferencesConnectionDetailsLogs.svelte
index 7a2e70a19d642..9fa803a2e35d1 100644
--- a/packages/renderer/src/lib/preferences/PreferencesConnectionDetailsLogs.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesConnectionDetailsLogs.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import 'xterm/css/xterm.css';
 
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -9,7 +10,6 @@ import type { ProviderContainerConnectionInfo, ProviderKubernetesConnectionInfo
 
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
 import { getPanelDetailColor } from '../color/color';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import NoLogIcon from '../ui/NoLogIcon.svelte';
 import { writeToTerminal } from './Util';
 
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
index 61e90e7ddf1b7..ba9bd20c3fc0f 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 import { faRightToBracket, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { ErrorMessage } from '@podman-desktop/ui-svelte';
+import { EmptyScreen, ErrorMessage } from '@podman-desktop/ui-svelte';
 
 import { kubernetesContextsState } from '/@/stores/kubernetes-contexts-state';
 
 import { kubernetesContexts } from '../../stores/kubernetes-contexts';
 import { clearKubeUIContextErrors, setKubeUIContextError } from '../kube/KubeContextUI';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import EngineIcon from '../ui/EngineIcon.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import SettingsPage from './SettingsPage.svelte';
diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
index ee77ed98d0c57..916e8a882f25c 100644
--- a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { faArrowUpRightFromSquare, faGear } from '@fortawesome/free-solid-svg-icons';
 import type { ContainerProviderConnection } from '@podman-desktop/api';
-import { Button, Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, EmptyScreen, Tooltip } from '@podman-desktop/ui-svelte';
 import { Buffer } from 'buffer';
 import { filesize } from 'filesize';
 import { onDestroy, onMount } from 'svelte';
@@ -27,7 +27,6 @@ import { ContextKeyExpr } from '../context/contextKey';
 import { normalizeOnboardingWhenClause } from '../onboarding/onboarding-utils';
 import ConnectionErrorInfoButton from '../ui/ConnectionErrorInfoButton.svelte';
 import ConnectionStatus from '../ui/ConnectionStatus.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 import EngineIcon from '../ui/EngineIcon.svelte';
 import { PeerProperties } from './PeerProperties';
 import { eventCollect } from './preferences-connection-rendering-task';
diff --git a/packages/renderer/src/lib/service/ServiceEmptyScreen.svelte b/packages/renderer/src/lib/service/ServiceEmptyScreen.svelte
index b0604642573e7..5e1c009654b22 100644
--- a/packages/renderer/src/lib/service/ServiceEmptyScreen.svelte
+++ b/packages/renderer/src/lib/service/ServiceEmptyScreen.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import ServiceIcon from '../images/ServiceIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
 </script>
 
 <EmptyScreen icon="{ServiceIcon}" title="No services" message="Try switching to a different context or namespace" />
diff --git a/packages/renderer/src/lib/service/ServicesList.svelte b/packages/renderer/src/lib/service/ServicesList.svelte
index 589bd15da76b3..6b5f769704c69 100644
--- a/packages/renderer/src/lib/service/ServicesList.svelte
+++ b/packages/renderer/src/lib/service/ServicesList.svelte
@@ -2,6 +2,7 @@
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import {
   Button,
+  FilteredEmptyScreen,
   NavPage,
   Table,
   TableColumn,
@@ -17,7 +18,6 @@ import { kubernetesCurrentContextServicesFiltered, serviceSearchPattern } from '
 
 import ServiceIcon from '../images/ServiceIcon.svelte';
 import KubeApplyYamlButton from '../kube/KubeApplyYAMLButton.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { ServiceUtils } from './service-utils';
 import ServiceColumnActions from './ServiceColumnActions.svelte';
 import ServiceColumnName from './ServiceColumnName.svelte';
diff --git a/packages/renderer/src/lib/volume/VolumeEmptyScreen.svelte b/packages/renderer/src/lib/volume/VolumeEmptyScreen.svelte
index e72025e7ee7d7..2e8dfa473114e 100644
--- a/packages/renderer/src/lib/volume/VolumeEmptyScreen.svelte
+++ b/packages/renderer/src/lib/volume/VolumeEmptyScreen.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+import { EmptyScreen } from '@podman-desktop/ui-svelte';
+
 import VolumeIcon from '../images/VolumeIcon.svelte';
-import EmptyScreen from '../ui/EmptyScreen.svelte';
+
+const commandLine = 'podman volume create myFirstVolume';
 </script>
 
 <EmptyScreen
   icon="{VolumeIcon}"
   title="No volumes"
   message="Create a volume using the following command line:"
-  commandline="podman volume create myFirstVolume" />
+  commandline="{commandLine}"
+  on:click="{() => window.clipboardWriteText(commandLine)}" />
diff --git a/packages/renderer/src/lib/volume/VolumesList.svelte b/packages/renderer/src/lib/volume/VolumesList.svelte
index c8d01007bef62..6043134c97256 100644
--- a/packages/renderer/src/lib/volume/VolumesList.svelte
+++ b/packages/renderer/src/lib/volume/VolumesList.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 import { faPieChart, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button, NavPage, Table, TableColumn, TableRow, TableSimpleColumn } from '@podman-desktop/ui-svelte';
+import {
+  Button,
+  FilteredEmptyScreen,
+  NavPage,
+  Table,
+  TableColumn,
+  TableRow,
+  TableSimpleColumn,
+} from '@podman-desktop/ui-svelte';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/store';
@@ -12,7 +20,6 @@ import type { EngineInfoUI } from '../engine/EngineInfoUI';
 import Prune from '../engine/Prune.svelte';
 import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.svelte';
 import VolumeIcon from '../images/VolumeIcon.svelte';
-import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import { VolumeUtils } from './volume-utils';
 import VolumeColumnActions from './VolumeColumnActions.svelte';
 import VolumeColumnEnvironment from './VolumeColumnEnvironment.svelte';
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c6d7ba06f2f9e..92b1c2e16f046 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -83,6 +83,14 @@
     "./Link": {
       "types": "./dist/link/Link.d.ts",
       "svelte": "./dist/link/Link.svelte"
+    },
+    "./EmptyScreen": {
+      "types": "./dist/screen/EmptyScreen.d.ts",
+      "svelte": "./dist/screen/EmptyScreen.svelte"
+    },
+    "./FilteredEmptyScreen": {
+      "types": "./dist/screen/FilteredEmptyScreen.d.ts",
+      "svelte": "./dist/screen/FilteredEmptyScreen.svelte"
     }
   },
   "peerDependencies": {
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index ecd578604aa85..d19b68f685675 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -26,6 +26,8 @@ import Link from './link/Link.svelte';
 import Modal from './modal/Modal.svelte';
 import LinearProgress from './progress/LinearProgress.svelte';
 import Spinner from './progress/Spinner.svelte';
+import EmptyScreen from './screen/EmptyScreen.svelte';
+import FilteredEmptyScreen from './screen/FilteredEmptyScreen.svelte';
 import Tab from './tab/Tab.svelte';
 import TableDurationColumn from './table/DurationColumn.svelte';
 import TableSimpleColumn from './table/SimpleColumn.svelte';
@@ -38,7 +40,9 @@ export type { ButtonType };
 export {
   Button,
   Checkbox,
+  EmptyScreen,
   ErrorMessage,
+  FilteredEmptyScreen,
   Input,
   LinearProgress,
   Link,
diff --git a/packages/renderer/src/lib/ui/EmptyScreen.spec.ts b/packages/ui/src/lib/screen/EmptyScreen.spec.ts
similarity index 86%
rename from packages/renderer/src/lib/ui/EmptyScreen.spec.ts
rename to packages/ui/src/lib/screen/EmptyScreen.spec.ts
index 536f344182de6..2ad2f168e7bd9 100644
--- a/packages/renderer/src/lib/ui/EmptyScreen.spec.ts
+++ b/packages/ui/src/lib/screen/EmptyScreen.spec.ts
@@ -28,11 +28,11 @@ import EmptyScreen from './EmptyScreen.svelte';
 
 test('Expect copy in clipboard', async () => {
   const mock = vi.fn().mockImplementation(() => {});
-  (window as any).clipboardWriteText = mock;
-  render(EmptyScreen, { icon: '', commandline: 'podman run hello:world' });
+  const comp = render(EmptyScreen, { icon: '', commandline: 'podman run hello:world' });
+  comp.component.$on('click', mock);
   const button = screen.getByRole('button');
   expect(button).toBeInTheDocument();
   expect(button).toBeEnabled();
   await fireEvent.click(button);
-  expect(mock).toBeCalledWith('podman run hello:world');
+  expect(mock).toBeCalledWith(expect.objectContaining({ detail: 'podman run hello:world' }));
 });
diff --git a/packages/renderer/src/lib/ui/EmptyScreen.svelte b/packages/ui/src/lib/screen/EmptyScreen.svelte
similarity index 79%
rename from packages/renderer/src/lib/ui/EmptyScreen.svelte
rename to packages/ui/src/lib/screen/EmptyScreen.svelte
index e8e2c1b6a5a5c..e86dff5186e0a 100644
--- a/packages/renderer/src/lib/ui/EmptyScreen.svelte
+++ b/packages/ui/src/lib/screen/EmptyScreen.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 import { faPaste } from '@fortawesome/free-solid-svg-icons';
-import { isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
-import { onMount } from 'svelte';
+import { createEventDispatcher, onMount } from 'svelte';
 import Fa from 'svelte-fa';
 
+import Button from '../button/Button.svelte';
+import { isFontAwesomeIcon } from '../utils/icon-utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let icon: any;
 export let title = 'No title';
 export let message = 'Message';
@@ -14,6 +17,8 @@ export let hidden = false;
 let fontAwesomeIcon = false;
 let processed = false;
 
+const dispatch = createEventDispatcher<{ click: string }>();
+
 onMount(() => {
   if (isFontAwesomeIcon(icon)) {
     fontAwesomeIcon = true;
@@ -21,10 +26,10 @@ onMount(() => {
   processed = true;
 });
 
-function copyRunInstructionToClipboard() {
+function handleClick(): void {
   const text = copyTextDivElement?.textContent;
   if (text) {
-    window.clipboardWriteText(text);
+    dispatch('click', text);
   }
 }
 
@@ -60,8 +65,8 @@ let copyTextDivElement: HTMLDivElement;
           data-testid="copyTextDivElement">
           {commandline}
         </div>
-        <button title="Copy To Clipboard" class="ml-5" on:click="{() => copyRunInstructionToClipboard()}"
-          ><Fa class="h-5 w-5 cursor-pointer text-xl text-purple-500 hover:text-purple-600" icon="{faPaste}" /></button>
+        <Button title="Copy To Clipboard" class="ml-5" on:click="{handleClick}" type="link"
+          ><Fa class="h-5 w-5 cursor-pointer text-xl text-purple-500 hover:text-purple-600" icon="{faPaste}" /></Button>
       </div>
     {/if}
     {#if $$slots}
diff --git a/packages/renderer/src/lib/ui/FilteredEmptyScreen.spec.ts b/packages/ui/src/lib/screen/FilteredEmptyScreen.spec.ts
similarity index 89%
rename from packages/renderer/src/lib/ui/FilteredEmptyScreen.spec.ts
rename to packages/ui/src/lib/screen/FilteredEmptyScreen.spec.ts
index e4d895eca546e..8b46ccc6a8cec 100644
--- a/packages/renderer/src/lib/ui/FilteredEmptyScreen.spec.ts
+++ b/packages/ui/src/lib/screen/FilteredEmptyScreen.spec.ts
@@ -21,11 +21,10 @@ import '@testing-library/jest-dom/vitest';
 import { fireEvent, render, screen } from '@testing-library/svelte';
 import { expect, test, vi } from 'vitest';
 
-import DesktopIcon from '../images/DesktopIcon.svelte';
 import FilteredEmptyScreen from './FilteredEmptyScreen.svelte';
 
 test('Expect basic styling', async () => {
-  render(FilteredEmptyScreen, { icon: DesktopIcon, kind: 'object', searchTerm: 'test' });
+  render(FilteredEmptyScreen, { icon: '', kind: 'object', searchTerm: 'test' });
   // eslint-disable-next-line quotes
   const title = screen.getByText("No object matching 'test' found");
   expect(title).toBeInTheDocument();
@@ -34,7 +33,7 @@ test('Expect basic styling', async () => {
 
 test('Expect long search term to not display', async () => {
   render(FilteredEmptyScreen, {
-    icon: DesktopIcon,
+    icon: '',
     kind: 'object',
     searchTerm: 'a really long search term that will not fit in the UI',
   });
@@ -44,7 +43,7 @@ test('Expect long search term to not display', async () => {
 });
 
 test('Expect button to fire event and clear search term', async () => {
-  const config = { icon: DesktopIcon, kind: 'object', searchTerm: 'test' };
+  const config = { icon: '', kind: 'object', searchTerm: 'test' };
   const result = render(FilteredEmptyScreen, config);
 
   const resetMock = vi.fn();
@@ -63,7 +62,7 @@ test('Expect button to fire event and clear search term', async () => {
 });
 
 test('Expect button to fire event and respect event listener', async () => {
-  const config = { icon: DesktopIcon, kind: 'object', searchTerm: 'test' };
+  const config = { icon: '', kind: 'object', searchTerm: 'test' };
   const result = render(FilteredEmptyScreen, config);
 
   // setup mock event listener that just prevents default action
diff --git a/packages/renderer/src/lib/ui/FilteredEmptyScreen.svelte b/packages/ui/src/lib/screen/FilteredEmptyScreen.svelte
similarity index 69%
rename from packages/renderer/src/lib/ui/FilteredEmptyScreen.svelte
rename to packages/ui/src/lib/screen/FilteredEmptyScreen.svelte
index 7c5ea0667dda1..5e0d3ff096158 100644
--- a/packages/renderer/src/lib/ui/FilteredEmptyScreen.svelte
+++ b/packages/ui/src/lib/screen/FilteredEmptyScreen.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
-import { Button } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher } from 'svelte';
 
-import EmptyScreen from '../ui/EmptyScreen.svelte';
+import Button from '../button/Button.svelte';
+import EmptyScreen from './EmptyScreen.svelte';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export let icon: any;
 export let kind: string;
 export let searchTerm: string;
 
 const dispatch = createEventDispatcher();
-function onResetFilter() {
+function onResetFilter(): void {
   if (dispatch('resetFilter', searchTerm, { cancelable: true })) {
     searchTerm = '';
   }
@@ -23,5 +24,5 @@ $: filter = searchTerm && searchTerm.length > 20 ? 'filter' : `'${searchTerm}'`;
   title="No {kind} matching {filter} found"
   message="Not what you expected? Double-check your spelling."
   detail="Just want to view all of your {kind}?">
-  <Button on:click="{() => onResetFilter()}">Clear filter</Button>
+  <Button on:click="{onResetFilter}">Clear filter</Button>
 </EmptyScreen>