Add empty state to sbd details

assets/js/pages/ClusterDetails/HanaClusterDetails.stories.jsx

@@ -199,3 +199,14 @@ export const WithUnmanagedResources = {
     details: unmanagedNodeResources,
   },
 };
+
+export const WithNoSBDDevices = {
+  args: {
+    ...Hana.args,
+    details: {
+      ...Hana.args.details,
+      fencing_type: 'Diskless SBD',
+      sbd_devices: [],
+    },
+  },
+};

assets/js/pages/ClusterDetails/SBDDetails.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 
 import Pill from '@common/Pill';
 
+const sbdDetailsHeader = 'SBD/Fencing';
+const emptySBDListText = 'No additional fencing details to display.';
+
 const getStatusPill = (status) =>
   status === 'healthy' ? (
     <Pill className="bg-green-200 text-green-800 mr-2">Healthy</Pill>
@@ -13,17 +16,19 @@ function SBDDetails({ sbdDevices }) {
   return (
     <>
       <div className="mt-8">
-        <div>
-          <h2 className="text-2xl font-bold">SBD/Fencing</h2>
-        </div>
-      </div>
-      <div className="mt-2 bg-white shadow rounded-lg py-4 px-8 space-y-2 tn-sbd-details">
-        {sbdDevices.map(({ device, status }) => (
-          <div key={device}>
-            {getStatusPill(status)} {device}
-          </div>
-        ))}
+        <h2 className="text-2xl font-bold">{sbdDetailsHeader}</h2>
       </div>
+      {sbdDevices?.length > 0 ? (
+        <div className="mt-2 bg-white shadow rounded-lg py-4 px-8 space-y-2 tn-sbd-details">
+          {sbdDevices.map(({ device, status }) => (
+            <div key={device}>
+              {getStatusPill(status)} {device}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="mt-4">{emptySBDListText}</div>
+      )}
     </>
   );
 }

assets/js/pages/ClusterDetails/SBDDetails.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { sbdDevicesFactory } from '@lib/test-utils/factories';
+
+import { capitalize } from 'lodash';
+
+import SBDDetails from './SBDDetails';
+
+describe('SBDDetails', () => {
+  it('should render empty state message when sbd devices are empty', () => {
+    const expectedEmptyStateMsg = 'No additional fencing details to display.';
+    const sbdDevices = [];
+
+    render(<SBDDetails sbdDevices={sbdDevices} />);
+
+    expect(screen.getByText(expectedEmptyStateMsg)).toBeInTheDocument();
+  });
+
+  it.each([{ health: 'unhealthy' }, { health: 'healthy' }])(
+    'should render sbd device with specified $health health',
+    ({ health }) => {
+      const sbdDevices = sbdDevicesFactory.buildList(1, { status: health });
+      const { device: expectedDeviceName } = sbdDevices[0];
+
+      render(<SBDDetails sbdDevices={sbdDevices} />);
+
+      expect(screen.getByText(expectedDeviceName)).toBeTruthy();
+      expect(screen.getByText(capitalize(health))).toBeTruthy();
+    }
+  );
+
+  it('should render multiple devices and their status', () => {
+    const expectedSBD = [
+      sbdDevicesFactory.build({ status: 'unhealthy' }),
+      sbdDevicesFactory.build({ status: 'healthy' }),
+    ];
+
+    render(<SBDDetails sbdDevices={expectedSBD} />);
+
+    expectedSBD.forEach(({ device, status }) => {
+      expect(screen.getByText(device)).toBeInTheDocument();
+      expect(screen.getByText(capitalize(status))).toBeInTheDocument();
+    });
+  });
+});