CE-2207: display record table name links as ellipsis with tooltip

src/components/common/Helper.js

@@ -162,16 +162,19 @@ export function noWrapText(text) {
   return <Typography noWrap>{text}</Typography>;
 }
 
-export const EllipsisTextLink = styled(({ text, className, ...props }) => {
-  return (
-    <Tooltip
-      title={text}
-      className={className}
-    >
-      <Link {...props}>{text}</Link>
-    </Tooltip>
-  );
-})({
+export const EllipsisTextLink = styled(
+  ({ text, className, TooltipProps, ...props }) => {
+    return (
+      <Tooltip
+        title={text}
+        className={className}
+        {...TooltipProps}
+      >
+        <Link {...props}>{text}</Link>
+      </Tooltip>
+    );
+  }
+)({
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
   overflow: "hidden"

src/components/records/RecordTable.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Table } from "@ess-ics/ce-ui-common";
 import { RecordStatusIcon } from "./RecordIcons";
 import { Grid, Tooltip, Typography, Link } from "@mui/material";
+import { EllipsisTextLink } from "../common/Helper";
 
 const recordsColumns = [
   {
@@ -40,6 +41,27 @@ const iocDetailsColumns = [
   { field: "iocVersion", headerName: "Version", width: "15ch", sortable: false }
 ];
 
+function createRecordName(record) {
+  return (
+    <EllipsisTextLink
+      href={`/records/${encodeURIComponent(record.name)}`}
+      text={record.name}
+      TooltipProps={{
+        PopperProps: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [100, 0]
+              }
+            }
+          ]
+        }
+      }}
+    />
+  );
+}
+
 function createRecordDescription(description) {
   return (
     <>
@@ -99,11 +121,7 @@ export function createRecordsRow(record) {
         <RecordStatusIcon record={record} />
       </Grid>
     ),
-    name: (
-      <Link href={`/records/${encodeURIComponent(record.name)}`}>
-        {record.name}
-      </Link>
-    ),
+    name: createRecordName(record),
     description: createRecordDescription(record.description),
     iocName: createIocLink(record),
     hostName: createHostLink(record)
@@ -124,11 +142,7 @@ export function createIocDetailsRow(record) {
       </Grid>
     ),
     description: createRecordDescription(record.description),
-    name: (
-      <Link href={`/records/${encodeURIComponent(record.name)}`}>
-        {record.name}
-      </Link>
-    ),
+    name: createRecordName(record),
     iocVersion: record.iocVersion
   };
 }