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 <git@tdeboer.ca>

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 {
                   </div></td>
                 <td class="whitespace-nowrap pl-4">
                   <div class="flex items-center">
-                    <div class="text-sm text-gray-700">{container.uptime}</div>
+                    <div class="text-sm text-gray-700">
+                      <StateChange state="{container.state}">{container.uptime}</StateChange>
+                    </div>
                   </div>
                 </td>
                 <td

packages/renderer/src/lib/container/ContainerDetails.svelte

@@ -20,6 +20,7 @@ import Tab from '../ui/Tab.svelte';
 import ErrorMessage from '../ui/ErrorMessage.svelte';
 import ContainerDetailsTtyTerminal from './ContainerDetailsTtyTerminal.svelte';
 import { router } from 'tinro';
+import StateChange from '../ui/StateChange.svelte';
 
 export let containerID: string;
 
@@ -94,7 +95,8 @@ function errorCallback(errorMessage: string): void {
         container="{container}"
         detailed="{true}" />
     </svelte:fragment>
-    <div slot="detail" class="flex py-2 w-full justify-end">
+    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-gray-700">
+      <StateChange state="{container.state}" />
       <ContainerStatistics container="{container}" />
     </div>
     <svelte:fragment slot="tabs">

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}" />
     </svelte:fragment>
+    <div slot="detail" class="flex py-2 w-full justify-end text-sm text-gray-700">
+      <StateChange state="{pod.status}" />
+    </div>
     <svelte:fragment slot="tabs">
       <Tab title="Summary" url="summary" />
       <Tab title="Logs" url="logs" />

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 {
             </td>
             <td class="px-6 py-2 whitespace-nowrap w-10">
               <div class="flex items-center">
-                <div class="text-sm text-gray-300">{pod.age}</div>
+                <div class="text-sm text-gray-300">
+                  <StateChange state="{pod.status}">{pod.age}</StateChange>
+                </div>
               </div>
             </td>
 

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

packages/renderer/src/lib/ui/StateChange.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+export let state: string;
+</script>
+
+{#if state === 'STARTING'}Starting...{:else if state === 'STOPPING'}Stopping...{:else if state === 'DELETING'}Deleting...{:else}
+  <slot />
+{/if}