Sid linking from clusters

assets/js/components/ClustersList.jsx

@@ -5,6 +5,7 @@ import Tags from '@components/Tags';
 import PageHeader from '@components/PageHeader';
 import { addTagToCluster, removeTagFromCluster } from '@state/clusters';
 import ClusterLink from '@components/ClusterLink';
+import SapSystemLink from '@components/SapSystemLink';
 import { ExecutionIcon } from '@components/ClusterDetails';
 import { post, del } from '@lib/network';
 import { useSearchParams } from 'react-router-dom';
@@ -24,6 +25,26 @@ const getClusterTypeLabel = (type) => {
   }
 };
 
+const getSapSystemLinkBySID = (
+  applicationInstances,
+  databaseInstances,
+  sid
+) => {
+  const foundInstance = applicationInstances
+    .map((instance) => ({ ...instance, type: 'sap_systems' }))
+    .concat(
+      databaseInstances.map((instance) => ({
+        ...instance,
+        type: 'databases',
+      }))
+    )
+    .find((instance) => instance.sid === sid);
+
+  return foundInstance
+    ? { sap_system_id: foundInstance.sap_system_id, type: foundInstance.type }
+    : null;
+};
+
 const addTag = (tag, clusterId) => {
   post(`/clusters/${clusterId}/tags`, {
     value: tag,
@@ -36,6 +57,9 @@ const removeTag = (tag, clusterId) => {
 
 function ClustersList() {
   const clusters = useSelector((state) => state.clustersList.clusters);
+  const { applicationInstances, databaseInstances } = useSelector(
+    (state) => state.sapSystemsList
+  );
   const dispatch = useDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -71,7 +95,23 @@ function ClustersList() {
         filterFromParams: true,
         filter: (filter, key) => (element) =>
           element[key].some((sid) => filter.includes(sid)),
-        render: (_, { sid }) => sid.join(', '),
+        render: (_, { sid }) =>
+          sid.map((singleSid) => {
+            const linkData = getSapSystemLinkBySID(
+              applicationInstances,
+              databaseInstances,
+              singleSid
+            );
+
+            return (
+              <SapSystemLink
+                systemType={linkData ? linkData.type : null}
+                sapSystemId={linkData ? linkData.sap_system_id : null}
+              >
+                {singleSid}
+              </SapSystemLink>
+            );
+          }),
       },
       {
         title: 'Hosts',

assets/js/components/ClustersList.test.jsx

@@ -143,7 +143,8 @@ describe('ClustersList component', () => {
 
       renderWithRouter(StatefulClustersList);
 
-      expect(screen.getByText('HA1, HA2')).toBeVisible();
+      expect(screen.getByText('HA1')).toBeVisible();
+      expect(screen.getByText('HA2')).toBeVisible();
     });
 
     it('should put the filters values in the query string when filters are selected', () => {

assets/js/components/SapSystemLink.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { EOS_WARNING_OUTLINED } from 'eos-icons-react';
 
+import Tooltip from '@components/Tooltip';
 import { Link } from 'react-router-dom';
 
 function SapSystemLink({ systemType, sapSystemId, children }) {
-  return sapSystemId ? (
+  return sapSystemId && systemType ? (
     <Link
       key={sapSystemId}
       className="text-jungle-green-500 hover:opacity-75"
@@ -12,7 +14,15 @@ function SapSystemLink({ systemType, sapSystemId, children }) {
       {children}
     </Link>
   ) : (
-    <span>{children}</span>
+    <Tooltip content="SAP System currently not registered." place="bottom">
+      <span className="group flex items-center relative">
+        <EOS_WARNING_OUTLINED
+          size="base"
+          className="centered fill-yellow-500"
+        />
+        <span className="ml-1 truncate max-w-[100px]">{children}</span>
+      </span>
+    </Tooltip>
   );
 }
 

assets/js/components/SapSystemLink.test.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { screen, render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { renderWithRouter } from '@lib/test-utils';
+import SapSystemLink from '@components/SapSystemLink';
+import { sapSystemFactory } from '@lib/test-utils/factories';
+
+describe('SapSystemLink', () => {
+  it('renders Link when sapSystemId and systemType is provided', () => {
+    const { id, sid } = sapSystemFactory.build();
+
+    renderWithRouter(
+      <SapSystemLink systemType="databases" sapSystemId={id}>
+        {sid}
+      </SapSystemLink>
+    );
+
+    const sapSystemLinkElement = screen.getByRole('link', { sid });
+
+    expect(sapSystemLinkElement).toBeInTheDocument();
+    expect(sapSystemLinkElement).toHaveAttribute('href', `/databases/${id}`);
+  });
+
+  it('renders warning span when sapSystemId or systemType are not provided', () => {
+    const { sid } = sapSystemFactory.build();
+
+    render(<SapSystemLink>{sid}</SapSystemLink>);
+
+    const sidElement = screen.getByText(sid);
+    fireEvent.mouseOver(sidElement);
+    expect(
+      screen.getByText('SAP System currently not registered.')
+    ).toBeInTheDocument();
+  });
+});