From d413068221f5c23638c84c2c7d2ce3d068ced443 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 13:42:29 +0200
Subject: [PATCH 1/7] Update the ChecksResultOverview

---
 .../ClusterDetails/ChecksResultOverview.jsx       | 10 ++++++++--
 assets/js/components/Spinner.jsx                  | 15 ++++++++++-----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
index 16e5aaaf93..b4b125f705 100644
--- a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
+++ b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
@@ -18,8 +18,14 @@ function ChecksResultOverview({
 }) {
   if (loading || pendingStates.includes(data?.status)) {
     return (
-      <div className="flex flex-col items-center mt-2 px-4">
-        <Spinner />
+      <div className="flex flex-col items-center px-4">
+        <h1 className="text-center text-2xl font-bold">Check Summary</h1>
+        <span className="text-sm">Checks execution running...</span>
+        <Spinner
+          spinnerColor="fill-jungle-green-500"
+          size="xl"
+          wrapperClassName="pt-12"
+        />
       </div>
     );
   }
diff --git a/assets/js/components/Spinner.jsx b/assets/js/components/Spinner.jsx
index a2ba877924..93bb83aacb 100644
--- a/assets/js/components/Spinner.jsx
+++ b/assets/js/components/Spinner.jsx
@@ -1,13 +1,18 @@
 import React from 'react';
-import { computedIconCssClass } from '@lib/icon';
-
 import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
-function Spinner({ centered = false }) {
+function Spinner({
+  centered = false,
+  wrapperClassName = '',
+  size = 'm',
+  spinnerColor = 'fill-jungle-green-500',
+}) {
   return (
-    <div role="alert" aria-label="Loading">
+    <div role="alert" aria-label="Loading" className={wrapperClassName}>
       <EOS_LOADING_ANIMATED
-        className={computedIconCssClass('fill-jungle-green-500', centered)}
+        size={size}
+        centered={centered}
+        className={spinnerColor}
       />
     </div>
   );

From 44dbf14c3579a6b5c3df40ea8279c49649906231 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 13:43:09 +0200
Subject: [PATCH 2/7] Add test for refactored Spinner component

---
 assets/js/components/Spinner.test.jsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 assets/js/components/Spinner.test.jsx

diff --git a/assets/js/components/Spinner.test.jsx b/assets/js/components/Spinner.test.jsx
new file mode 100644
index 0000000000..4c02fdd35d
--- /dev/null
+++ b/assets/js/components/Spinner.test.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Spinner from './Spinner';
+
+describe('Spinner', () => {
+  it('renders the spinner component with default props', () => {
+    render(<Spinner />);
+    const spinnerElement = screen.getByRole('alert');
+    expect(spinnerElement).toBeInTheDocument();
+    expect(spinnerElement).toHaveAttribute('aria-label', 'Loading');
+    expect(spinnerElement.firstChild).toHaveClass('fill-jungle-green-500');
+  });
+
+  it('renders the spinner component with custom props', () => {
+    render(
+      <Spinner wrapperClassName="pt-12" size="xl" spinnerColor="fill-blue" />
+    );
+    const spinnerElement = screen.getByRole('alert');
+    expect(spinnerElement).toBeInTheDocument();
+    expect(spinnerElement).toHaveAttribute('aria-label', 'Loading');
+    expect(spinnerElement).toHaveClass('pt-12');
+    expect(spinnerElement.firstChild).toHaveClass('fill-blue');
+    expect(spinnerElement.firstChild).toHaveAttribute('width', '32');
+  });
+});

From 192cd54893f0e14d6afd9e46330d1865efc3d2f7 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 13:43:21 +0200
Subject: [PATCH 3/7] Add story

---
 assets/js/components/Spinner.stories.jsx | 42 ++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 assets/js/components/Spinner.stories.jsx

diff --git a/assets/js/components/Spinner.stories.jsx b/assets/js/components/Spinner.stories.jsx
new file mode 100644
index 0000000000..776bfbc9f6
--- /dev/null
+++ b/assets/js/components/Spinner.stories.jsx
@@ -0,0 +1,42 @@
+import Spinner from './Spinner';
+
+export default {
+  title: 'Spinner',
+  component: Spinner,
+};
+
+export const Default = {
+  argTypes: {
+    centered: {
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    wrapperClassName: {
+      control: 'text',
+      description: 'Add padding or margin',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '""' },
+      },
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['xs', 's', 'base', 'm', 'l', 'xl', 'xxl', 'xxxl'],
+      description: 'How big should be the spinner?',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'm' },
+      },
+    },
+    spinnerColor: {
+      description: 'Set tailwind fill color',
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};

From febb63255d3a2612e4bd0deb0fde21ded02b7c39 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 14:01:56 +0200
Subject: [PATCH 4/7] Enrich CHeckResultsOverview test

---
 .../js/components/ClusterDetails/ChecksResultOverview.jsx   | 6 +-----
 .../components/ClusterDetails/ChecksResultOverview.test.jsx | 4 ++++
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
index b4b125f705..c0fc34ff34 100644
--- a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
+++ b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
@@ -21,11 +21,7 @@ function ChecksResultOverview({
       <div className="flex flex-col items-center px-4">
         <h1 className="text-center text-2xl font-bold">Check Summary</h1>
         <span className="text-sm">Checks execution running...</span>
-        <Spinner
-          spinnerColor="fill-jungle-green-500"
-          size="xl"
-          wrapperClassName="pt-12"
-        />
+        <Spinner size="xl" wrapperClassName="pt-12" />
       </div>
     );
   }
diff --git a/assets/js/components/ClusterDetails/ChecksResultOverview.test.jsx b/assets/js/components/ClusterDetails/ChecksResultOverview.test.jsx
index 4c31d36f49..762535f83e 100644
--- a/assets/js/components/ClusterDetails/ChecksResultOverview.test.jsx
+++ b/assets/js/components/ClusterDetails/ChecksResultOverview.test.jsx
@@ -12,6 +12,10 @@ describe('ChecksResultOverview component', () => {
     render(<ChecksResultOverview loading />);
 
     expect(screen.getByRole('alert')).toBeVisible();
+    expect(screen.queryByText('Check Summary')).toBeInTheDocument();
+    expect(
+      screen.queryByText('Checks execution running...')
+    ).toBeInTheDocument();
     expect(screen.queryByText('Passing')).not.toBeInTheDocument();
     expect(screen.queryByText('Warning')).not.toBeInTheDocument();
     expect(screen.queryByText('Critical')).not.toBeInTheDocument();

From 9aa3a9efc9887b9dfb196c549c4102af4a59e4f5 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 14:17:47 +0200
Subject: [PATCH 5/7] Color text in gray when checks are running

---
 assets/js/components/ClusterDetails/ChecksResultOverview.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
index c0fc34ff34..d0d87ccc15 100644
--- a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
+++ b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
@@ -20,7 +20,9 @@ function ChecksResultOverview({
     return (
       <div className="flex flex-col items-center px-4">
         <h1 className="text-center text-2xl font-bold">Check Summary</h1>
-        <span className="text-sm">Checks execution running...</span>
+        <span className="text-sm text-gray-600">
+          Checks execution running...
+        </span>
         <Spinner size="xl" wrapperClassName="pt-12" />
       </div>
     );

From e38dcb627e9ea3120d138a2206bc7658402a03af Mon Sep 17 00:00:00 2001
From: EMaksy <eugen.maksymenko@suse.com>
Date: Fri, 9 Jun 2023 15:57:55 +0200
Subject: [PATCH 6/7] Apply comment suggestions

---
 .../ClusterDetails/ChecksResultOverview.jsx      |  2 +-
 assets/js/components/Spinner.jsx                 | 15 +++------------
 assets/js/components/Spinner.stories.jsx         | 16 +---------------
 assets/js/components/Spinner.test.jsx            |  5 +----
 4 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
index d0d87ccc15..df0542858e 100644
--- a/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
+++ b/assets/js/components/ClusterDetails/ChecksResultOverview.jsx
@@ -23,7 +23,7 @@ function ChecksResultOverview({
         <span className="text-sm text-gray-600">
           Checks execution running...
         </span>
-        <Spinner size="xl" wrapperClassName="pt-12" />
+        <Spinner size="xl" className="pt-12" />
       </div>
     );
   }
diff --git a/assets/js/components/Spinner.jsx b/assets/js/components/Spinner.jsx
index 93bb83aacb..c510eac064 100644
--- a/assets/js/components/Spinner.jsx
+++ b/assets/js/components/Spinner.jsx
@@ -1,19 +1,10 @@
 import React from 'react';
 import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
-function Spinner({
-  centered = false,
-  wrapperClassName = '',
-  size = 'm',
-  spinnerColor = 'fill-jungle-green-500',
-}) {
+function Spinner({ className = '', size = 'm' }) {
   return (
-    <div role="alert" aria-label="Loading" className={wrapperClassName}>
-      <EOS_LOADING_ANIMATED
-        size={size}
-        centered={centered}
-        className={spinnerColor}
-      />
+    <div role="alert" aria-label="Loading" className={className}>
+      <EOS_LOADING_ANIMATED size={size} className={'fill-jungle-green-500'} />
     </div>
   );
 }
diff --git a/assets/js/components/Spinner.stories.jsx b/assets/js/components/Spinner.stories.jsx
index 776bfbc9f6..bc5c3946aa 100644
--- a/assets/js/components/Spinner.stories.jsx
+++ b/assets/js/components/Spinner.stories.jsx
@@ -7,14 +7,7 @@ export default {
 
 export const Default = {
   argTypes: {
-    centered: {
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    wrapperClassName: {
+    className: {
       control: 'text',
       description: 'Add padding or margin',
       table: {
@@ -31,12 +24,5 @@ export const Default = {
         defaultValue: { summary: 'm' },
       },
     },
-    spinnerColor: {
-      description: 'Set tailwind fill color',
-      control: 'text',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
   },
 };
diff --git a/assets/js/components/Spinner.test.jsx b/assets/js/components/Spinner.test.jsx
index 4c02fdd35d..78c998edb4 100644
--- a/assets/js/components/Spinner.test.jsx
+++ b/assets/js/components/Spinner.test.jsx
@@ -13,14 +13,11 @@ describe('Spinner', () => {
   });
 
   it('renders the spinner component with custom props', () => {
-    render(
-      <Spinner wrapperClassName="pt-12" size="xl" spinnerColor="fill-blue" />
-    );
+    render(<Spinner className="pt-12" size="xl" />);
     const spinnerElement = screen.getByRole('alert');
     expect(spinnerElement).toBeInTheDocument();
     expect(spinnerElement).toHaveAttribute('aria-label', 'Loading');
     expect(spinnerElement).toHaveClass('pt-12');
-    expect(spinnerElement.firstChild).toHaveClass('fill-blue');
     expect(spinnerElement.firstChild).toHaveAttribute('width', '32');
   });
 });

From 81390aba46734efcd20247450619c491b40bb205 Mon Sep 17 00:00:00 2001
From: EMaksy <emaksymenko@suse.com>
Date: Fri, 9 Jun 2023 16:14:38 +0200
Subject: [PATCH 7/7] Remove unused defaultValue in story

---
 assets/js/components/Spinner.jsx         | 2 +-
 assets/js/components/Spinner.stories.jsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/js/components/Spinner.jsx b/assets/js/components/Spinner.jsx
index c510eac064..3881a1ac50 100644
--- a/assets/js/components/Spinner.jsx
+++ b/assets/js/components/Spinner.jsx
@@ -4,7 +4,7 @@ import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 function Spinner({ className = '', size = 'm' }) {
   return (
     <div role="alert" aria-label="Loading" className={className}>
-      <EOS_LOADING_ANIMATED size={size} className={'fill-jungle-green-500'} />
+      <EOS_LOADING_ANIMATED size={size} className="fill-jungle-green-500" />
     </div>
   );
 }
diff --git a/assets/js/components/Spinner.stories.jsx b/assets/js/components/Spinner.stories.jsx
index bc5c3946aa..5206f95f50 100644
--- a/assets/js/components/Spinner.stories.jsx
+++ b/assets/js/components/Spinner.stories.jsx
@@ -12,7 +12,6 @@ export const Default = {
       description: 'Add padding or margin',
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: '""' },
       },
     },
     size: {