chore: deleting status icon

Currently there is no indication in the status icon when something is being deleted.
We're adding text to the age column (#4056), but the design preference is that this
is re-enforced by the status icon changing into a spinner.

This adds the DELETING status, using a correctly sized Spinner component with no
border. Added a test, and some missing tests for other states.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/images/StatusIcon.spec.ts

@@ -0,0 +1,65 @@
+/**********************************************************************
+ * 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
+ ***********************************************************************/
+
+import '@testing-library/jest-dom/vitest';
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusIcon from './StatusIcon.svelte';
+
+test('Expect starting styling', async () => {
+  const status = 'STARTING';
+  render(StatusIcon, { status });
+  const icon = screen.getByRole('status');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('title', status);
+
+  expect(icon).toHaveClass('bg-green-600');
+});
+
+test('Expect running styling', async () => {
+  const status = 'RUNNING';
+  render(StatusIcon, { status });
+  const icon = screen.getByRole('status');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('title', status);
+
+  expect(icon).toHaveClass('bg-green-400');
+});
+
+test('Expect degraded styling', async () => {
+  const status = 'DEGRADED';
+  render(StatusIcon, { status });
+  const icon = screen.getByRole('status');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('title', status);
+
+  expect(icon).toHaveClass('bg-amber-600');
+});
+
+test('Expect deleting styling', async () => {
+  const status = 'DELETING';
+  render(StatusIcon, { status });
+  const icon = screen.getByRole('status');
+  expect(icon).toBeInTheDocument();
+  expect(icon).toHaveAttribute('title', status);
+  expect(icon).not.toHaveAttribute('border');
+
+  const spinner = screen.getByRole('img');
+  expect(spinner).toBeInTheDocument();
+  expect(spinner).toHaveAttribute('width', '1.4em');
+});

packages/renderer/src/lib/images/StatusIcon.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 import StarIcon from './StarIcon.svelte';
+import Spinner from '../ui/Spinner.svelte';
 
-// status: one of RUNNING, STARTING, USED, CREATED, or DEGRADED
+// status: one of RUNNING, STARTING, USED, CREATED, DELETING, or DEGRADED
 // any other status will result in a standard outlined box
 export let status = '';
 export let icon: any = undefined;
@@ -15,12 +16,14 @@ $: solid = status === 'RUNNING' || status === 'STARTING' || status === 'USED' ||
     class:bg-green-400="{status === 'RUNNING' || status === 'USED'}"
     class:bg-green-600="{status === 'STARTING'}"
     class:bg-amber-600="{status === 'DEGRADED'}"
-    class:border-2="{!solid}"
+    class:border-2="{!solid && status !== 'DELETING'}"
     class:border-gray-700="{!solid}"
     class:text-gray-700="{!solid}"
     role="status"
     title="{status}">
-    {#if typeof icon === 'string'}
+    {#if status === 'DELETING'}
+      <Spinner size="1.4em" />
+    {:else if typeof icon === 'string'}
       <span class="{icon}" aria-hidden="true"></span>
     {:else}
       <svelte:component this="{icon}" size="20" solid="{solid}" />

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

@@ -3,7 +3,7 @@ export let size = '2em';
 </script>
 
 <i class="flex justify-center items-center">
-  <svg width="{size}" height="{size}" viewBox="0 0 100 100">
+  <svg width="{size}" height="{size}" viewBox="0 0 100 100" role="img">
     <defs>
       <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
         <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"></stop>