From b5f4679d1b0be2df215cbea87846f7ce262804e9 Mon Sep 17 00:00:00 2001 From: Tim deBoer Date: Fri, 22 Sep 2023 14:26:25 -0400 Subject: [PATCH] feat: show status text during state changes When an object is being deleted there is no indication in the UI. Mairin suggested two changes: - Change status icon to a spinner. (This will be done separately, and although it shows _something_ is happening, it doesn't tell you what it is) - Replacing the age column in the Container/PodList to show Starting/Stopping/ Deleting when one of these state changes is happening, and adding the equivalent message below the action buttons in the corresponding Details page. Since the same state message will appear in all 4 places, I created a really simple StateChange component. It just shows a simple message when in these states, and if you want to hide something when these messages are shown you can use its slot. Fixes #3529. Signed-off-by: Tim deBoer --- .../renderer/src/lib/ContainerList.svelte | 5 ++- .../src/lib/container/ContainerDetails.svelte | 4 +- .../renderer/src/lib/pod/PodDetails.svelte | 4 ++ packages/renderer/src/lib/pod/PodsList.svelte | 5 ++- .../renderer/src/lib/ui/StateChange.spec.ts | 45 +++++++++++++++++++ .../renderer/src/lib/ui/StateChange.svelte | 7 +++ 6 files changed, 67 insertions(+), 3 deletions(-) create mode 100644 packages/renderer/src/lib/ui/StateChange.spec.ts create mode 100644 packages/renderer/src/lib/ui/StateChange.svelte diff --git a/packages/renderer/src/lib/ContainerList.svelte b/packages/renderer/src/lib/ContainerList.svelte index cdd0f22fce97..b9a4ae3c773f 100644 --- a/packages/renderer/src/lib/ContainerList.svelte +++ b/packages/renderer/src/lib/ContainerList.svelte @@ -38,6 +38,7 @@ import { CONTAINER_LIST_VIEW } from './view/views'; import type { ViewInfoUI } from '../../../main/src/plugin/api/view-info'; import type { ContextUI } from './context/context'; import Button from './ui/Button.svelte'; +import StateChange from './ui/StateChange.svelte'; const containerUtils = new ContainerUtils(); let openChoiceModal = false; @@ -605,7 +606,9 @@ function errorCallback(container: ContainerInfoUI, errorMessage: string): void {
-
{container.uptime}
+
+ {container.uptime} +
-
+
+
diff --git a/packages/renderer/src/lib/pod/PodDetails.svelte b/packages/renderer/src/lib/pod/PodDetails.svelte index 235da429093e..82b7ccfe6ca9 100644 --- a/packages/renderer/src/lib/pod/PodDetails.svelte +++ b/packages/renderer/src/lib/pod/PodDetails.svelte @@ -14,6 +14,7 @@ import PodDetailsLogs from './PodDetailsLogs.svelte'; import DetailsPage from '../ui/DetailsPage.svelte'; import Tab from '../ui/Tab.svelte'; import ErrorMessage from '../ui/ErrorMessage.svelte'; +import StateChange from '../ui/StateChange.svelte'; export let podName: string; export let engineId: string; @@ -72,6 +73,9 @@ function errorCallback(errorMessage: string): void { errorCallback="{error => errorCallback(error)}" detailed="{true}" /> +
+ +
diff --git a/packages/renderer/src/lib/pod/PodsList.svelte b/packages/renderer/src/lib/pod/PodsList.svelte index 22e25784e3bc..fdb045deba1b 100644 --- a/packages/renderer/src/lib/pod/PodsList.svelte +++ b/packages/renderer/src/lib/pod/PodsList.svelte @@ -24,6 +24,7 @@ import ErrorMessage from '../ui/ErrorMessage.svelte'; import Checkbox from '../ui/Checkbox.svelte'; import Button from '../ui/Button.svelte'; import { faTrash } from '@fortawesome/free-solid-svg-icons'; +import StateChange from '../ui/StateChange.svelte'; export let searchTerm = ''; $: searchPattern.set(searchTerm); @@ -276,7 +277,9 @@ function errorCallback(pod: PodInfoUI, errorMessage: string): void {
-
{pod.age}
+
+ {pod.age} +
diff --git a/packages/renderer/src/lib/ui/StateChange.spec.ts b/packages/renderer/src/lib/ui/StateChange.spec.ts new file mode 100644 index 000000000000..41db7e43a64c --- /dev/null +++ b/packages/renderer/src/lib/ui/StateChange.spec.ts @@ -0,0 +1,45 @@ +/********************************************************************** + * Copyright (C) 2023 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 + ***********************************************************************/ + +/* eslint-disable @typescript-eslint/no-explicit-any */ + +import '@testing-library/jest-dom/vitest'; +import { test, expect } from 'vitest'; +import { render, screen } from '@testing-library/svelte'; +import StateChange from './StateChange.svelte'; + +test('Check status starting', async () => { + render(StateChange, { state: 'STARTING' }); + + const step = screen.getByText('Starting...'); + expect(step).toBeInTheDocument(); +}); + +test('Check status stopping', async () => { + render(StateChange, { state: 'STOPPING' }); + + const status = screen.getByText('Stopping...'); + expect(status).toBeInTheDocument(); +}); + +test('Check status deleting', async () => { + render(StateChange, { state: 'DELETING' }); + + const status = screen.getByText('Deleting...'); + expect(status).toBeInTheDocument(); +}); diff --git a/packages/renderer/src/lib/ui/StateChange.svelte b/packages/renderer/src/lib/ui/StateChange.svelte new file mode 100644 index 000000000000..48f287c2182c --- /dev/null +++ b/packages/renderer/src/lib/ui/StateChange.svelte @@ -0,0 +1,7 @@ + + +{#if state === 'STARTING'}Starting...{:else if state === 'STOPPING'}Stopping...{:else if state === 'DELETING'}Deleting...{:else} + +{/if}