feat: show status text during state changes

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}