feat: better icon for pod deletion (#830)

* feat: better icon for pod deletion Signed-off-by: axel7083 <[email protected]> * Update packages/frontend/src/lib/ApplicationActions.svelte Signed-off-by: axel7083 <[email protected]> * Update packages/frontend/src/lib/ApplicationActions.svelte Signed-off-by: axel7083 <[email protected]> --------- Signed-off-by: axel7083 <[email protected]>
containers · Apr 8, 2024 · 6d03878 · 6d03878
1 parent 42609e0
commit 6d03878
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 5 deletions.
diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
@@ -244,7 +244,7 @@ export class StudioApiImpl implements StudioAPI {
     // Do not wait on the promise as the api would probably timeout before the user answer.
     podmanDesktopApi.window
       .showWarningMessage(
-        `Stop the AI App "${recipe.name}"? This will delete the containers running the application and model.`,
+        `Delete the AI App "${recipe.name}"? This will delete the containers running the application and model.`,
         'Confirm',
         'Cancel',
       )

diff --git a/packages/frontend/src/lib/ApplicationActions.spec.ts b/packages/frontend/src/lib/ApplicationActions.spec.ts
@@ -0,0 +1,88 @@
+/**********************************************************************
+ * 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 { expect, test, vi, beforeEach } from 'vitest';
+
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { studioClient } from '../utils/client';
+import ApplicationActions from '/@/lib/ApplicationActions.svelte';
+import type { ApplicationState } from '@shared/src/models/IApplicationState';
+
+vi.mock('../utils/client', async () => ({
+  studioClient: {
+    requestRemoveApplication: vi.fn(),
+    requestRestartApplication: vi.fn(),
+    requestOpenApplication: vi.fn(),
+  },
+}));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  vi.mocked(studioClient.requestRemoveApplication).mockResolvedValue(undefined);
+  vi.mocked(studioClient.requestRestartApplication).mockResolvedValue(undefined);
+  vi.mocked(studioClient.requestOpenApplication).mockResolvedValue(undefined);
+});
+
+test('deletion action should call requestRemoveApplication', async () => {
+  render(ApplicationActions, {
+    object: {
+      pod: {},
+    } as unknown as ApplicationState,
+    recipeId: 'dummy-recipe-id',
+    modelId: 'dummy-model-id',
+  });
+
+  const deleteBtn = screen.getByTitle('Delete AI App');
+  expect(deleteBtn).toBeVisible();
+
+  await fireEvent.click(deleteBtn);
+  expect(studioClient.requestRemoveApplication).toHaveBeenCalledWith('dummy-recipe-id', 'dummy-model-id');
+});
+
+test('open action should call requestOpenApplication', async () => {
+  render(ApplicationActions, {
+    object: {
+      pod: {},
+    } as unknown as ApplicationState,
+    recipeId: 'dummy-recipe-id',
+    modelId: 'dummy-model-id',
+  });
+
+  const openBtn = screen.getByTitle('Open AI App');
+  expect(openBtn).toBeVisible();
+
+  await fireEvent.click(openBtn);
+  expect(studioClient.requestOpenApplication).toHaveBeenCalledWith('dummy-recipe-id', 'dummy-model-id');
+});
+
+test('restart action should call requestRestartApplication', async () => {
+  render(ApplicationActions, {
+    object: {
+      pod: {},
+    } as unknown as ApplicationState,
+    recipeId: 'dummy-recipe-id',
+    modelId: 'dummy-model-id',
+  });
+
+  const restartBtn = screen.getByTitle('Restart AI App');
+  expect(restartBtn).toBeVisible();
+
+  await fireEvent.click(restartBtn);
+  expect(studioClient.requestRestartApplication).toHaveBeenCalledWith('dummy-recipe-id', 'dummy-model-id');
+});
diff --git a/packages/frontend/src/lib/ApplicationActions.svelte b/packages/frontend/src/lib/ApplicationActions.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-import { faRotateForward, faStop, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { faRotateForward, faArrowUpRightFromSquare, faTrash } from '@fortawesome/free-solid-svg-icons';
 import ListItemButtonIcon from '/@/lib/button/ListItemButtonIcon.svelte';
 import { studioClient } from '/@/utils/client';
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
 export let object: ApplicationState | undefined;
 export let recipeId: string;
 export let modelId: string;
 
-function stopApplication() {
+function deleteApplication() {
   studioClient.requestRemoveApplication(recipeId, modelId).catch(err => {
-    console.error(`Something went wrong while trying to stop AI App: ${String(err)}.`);
+    console.error(`Something went wrong while trying to delete AI App: ${String(err)}.`);
   });
 }
 
@@ -27,7 +27,7 @@ function openApplication() {
 </script>
 
 {#if object?.pod !== undefined}
-  <ListItemButtonIcon icon="{faStop}" onClick="{() => stopApplication()}" title="Stop AI App" />
+  <ListItemButtonIcon icon="{faTrash}" onClick="{() => deleteApplication()}" title="Delete AI App" />
 
   <ListItemButtonIcon icon="{faArrowUpRightFromSquare}" onClick="{() => openApplication()}" title="Open AI App" />