Add text to loading state cluster details (#1510)

* Update the ChecksResultOverview

* Add test for refactored Spinner component

* Add Spinner story

* Enrich CHeckResultsOverview test

assets/js/components/ClusterDetails/ChecksResultOverview.jsx

@@ -18,8 +18,12 @@ 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 text-gray-600">
+          Checks execution running...
+        </span>
+        <Spinner size="xl" className="pt-12" />
       </div>
     );
   }

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

assets/js/components/Spinner.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
-import { computedIconCssClass } from '@lib/icon';
-
 import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
 
-function Spinner({ centered = false }) {
+function Spinner({ className = '', size = 'm' }) {
   return (
-    <div role="alert" aria-label="Loading">
-      <EOS_LOADING_ANIMATED
-        className={computedIconCssClass('fill-jungle-green-500', centered)}
-      />
+    <div role="alert" aria-label="Loading" className={className}>
+      <EOS_LOADING_ANIMATED size={size} className="fill-jungle-green-500" />
     </div>
   );
 }

assets/js/components/Spinner.stories.jsx

@@ -0,0 +1,27 @@
+import Spinner from './Spinner';
+
+export default {
+  title: 'Spinner',
+  component: Spinner,
+};
+
+export const Default = {
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Add padding or margin',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    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' },
+      },
+    },
+  },
+};

assets/js/components/Spinner.test.jsx

@@ -0,0 +1,23 @@
+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 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).toHaveAttribute('width', '32');
+  });
+});