feat(ui): move modal component to ui package (podman-desktop#7207)

Signed-off-by: axel7083 <[email protected]>

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 } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, Modal } from '@podman-desktop/ui-svelte';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
 import { get, type Unsubscriber } from 'svelte/store';
@@ -21,7 +21,6 @@ import { findMatchInLeaves } from '../../stores/search-util';
 import { viewsContributions } from '../../stores/views';
 import ComposeActions from '../compose/ComposeActions.svelte';
 import type { ContextUI } from '../context/context';
-import Modal from '../dialogs/Modal.svelte';
 import type { EngineInfoUI } from '../engine/EngineInfoUI';
 import Prune from '../engine/Prune.svelte';
 import NoContainerEngineEmptyScreen from '../image/NoContainerEngineEmptyScreen.svelte';

packages/renderer/src/lib/dialogs/MessageBox.svelte

@@ -2,10 +2,10 @@
 import { faCircle, faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import { faCircleExclamation, faInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { Button, type ButtonType } from '@podman-desktop/ui-svelte';
+import { Modal } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import Fa from 'svelte-fa';
 
-import Modal from '/@/lib/dialogs/Modal.svelte';
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import type { MessageBoxOptions } from './messagebox-input';

packages/renderer/src/lib/dialogs/QuickPickInput.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { Button, Checkbox } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, Modal } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount, tick } from 'svelte';
 
-import Modal from '/@/lib/dialogs/Modal.svelte';
 import Markdown from '/@/lib/markdown/Markdown.svelte';
 
 import type { InputBoxOptions, QuickPickOptions } from './quickpick-input';

packages/renderer/src/lib/extensions/InstallManuallyExtensionModal.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 import { faCloudDownload } from '@fortawesome/free-solid-svg-icons';
-import { Button, Input } from '@podman-desktop/ui-svelte';
+import { Button, Input, Modal } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
-import Modal from '/@/lib/dialogs/Modal.svelte';
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 export let closeCallback: () => void;

packages/renderer/src/lib/feedback/SendFeedback.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 import { faFrown, faGrinStars, faMeh, faSmile } from '@fortawesome/free-solid-svg-icons';
-import { Button, ErrorMessage } from '@podman-desktop/ui-svelte';
+import { Button, ErrorMessage, Modal } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import type { FeedbackProperties } from '../../../../preload/src/index';
-import Modal from '../dialogs/Modal.svelte';
 import WarningMessage from '../ui/WarningMessage.svelte';
 
 let displayModal = false;

packages/renderer/src/lib/image/PushImageModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faCheckCircle, faCircleArrowUp, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, Modal } from '@podman-desktop/ui-svelte';
 import { onMount, tick } from 'svelte';
 import Fa from 'svelte-fa';
 import { router } from 'tinro';
@@ -10,7 +10,6 @@ import { FitAddon } from 'xterm-addon-fit';
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
 import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
-import Modal from '../dialogs/Modal.svelte';
 import Link from '../ui/Link.svelte';
 import type { ImageInfoUI } from './ImageInfoUI';
 

packages/renderer/src/lib/image/RenameImageModal.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-import { Button, ErrorMessage, Input } from '@podman-desktop/ui-svelte';
+import { Button, ErrorMessage, Input, Modal } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 
-import Modal from '../dialogs/Modal.svelte';
 import type { ImageInfoUI } from './ImageInfoUI';
 
 export let closeCallback: () => void;

packages/renderer/src/lib/preferences/PreferencesProviderInstallationModal.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, Modal } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 import type { CheckStatus, ProviderInfo } from '/@api/provider-info';
 
 import ProviderLogo from '../dashboard/ProviderLogo.svelte';
-import Modal from '../dialogs/Modal.svelte';
 
 export let providerToBeInstalled: { provider: ProviderInfo; displayName: string };
 export let preflightChecks: CheckStatus[];

packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { faHistory, faPlay, faStop } from '@fortawesome/free-solid-svg-icons';
-import { Button, ErrorMessage } from '@podman-desktop/ui-svelte';
+import { Button, ErrorMessage, Modal } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 import { router } from 'tinro';
 import type { Terminal } from 'xterm';
@@ -15,7 +15,6 @@ import type {
 import type { IConfigurationPropertyRecordedSchema } from '../../../../main/src/plugin/configuration-registry';
 import Route from '../../Route.svelte';
 import { providerInfos } from '../../stores/providers';
-import Modal from '../dialogs/Modal.svelte';
 import FormPage from '../ui/FormPage.svelte';
 import TerminalWindow from '../ui/TerminalWindow.svelte';
 import PreferencesConnectionCreationRendering from './PreferencesConnectionCreationOrEditRendering.svelte';

packages/renderer/src/lib/troubleshooting/TroubleshootingPageStoreDetails.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 import { faRefresh, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { Button } from '@podman-desktop/ui-svelte';
+import { Button, Modal } from '@podman-desktop/ui-svelte';
 import humanizeDuration from 'humanize-duration';
 import moment from 'moment';
 
 import CloseButton from '/@/lib/ui/CloseButton.svelte';
 import type { EventStoreInfo } from '/@/stores/event-store';
 
-import Modal from '../dialogs/Modal.svelte';
-
 export let closeCallback: () => void;
 
 export let eventStoreInfo: EventStoreInfo;

packages/ui/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "env": {
+    "browser": true,
+    "node": false
+  },
+  "extends": ["../../.eslintrc.json"]
+}

packages/ui/src/lib/index.ts

@@ -20,10 +20,11 @@ import type { ButtonType } from './button/Button';
 import Button from './button/Button.svelte';
 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 Tooltip from './tooltip/Tooltip.svelte';
 import { isFontAwesomeIcon } from './utils/icon-utils';
 
 export type { ButtonType };
-export { Button, Checkbox, ErrorMessage, Input, Spinner, Tooltip };
+export { Button, Checkbox, ErrorMessage, Input, Modal, Spinner, Tooltip };
 export { isFontAwesomeIcon };

packages/renderer/src/lib/dialogs/Modal.spec.ts → packages/ui/src/lib/modal/Modal.spec.ts

@@ -1,5 +1,5 @@
 /**********************************************************************
- * Copyright (C) 2023 Red Hat, Inc.
+ * 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.
@@ -22,7 +22,7 @@ import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, test, vi } from 'vitest';
 
-import Modal from '/@/lib/dialogs/Modal.svelte';
+import Modal from './Modal.svelte';
 
 test('modal should be visible', async () => {
   render(Modal);

packages/renderer/src/lib/dialogs/Modal.svelte → packages/ui/src/lib/modal/Modal.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 import { createEventDispatcher, onDestroy } from 'svelte';
 
-import { tabWithinParent } from './dialog-utils';
+import { tabWithinParent } from '../utils/dialog-utils';
 
 const dispatch = createEventDispatcher();
-const close = () => dispatch('close');
+const close = (): boolean => dispatch('close');
 
 let modal: HTMLDivElement;
 export let name = '';
 export let top: boolean = false;
 
-const handle_keydown = (e: any) => {
+const handle_keydown = (e: KeyboardEvent): void => {
   if (e.key === 'Escape') {
     close();
     return;