diff --git a/src/components/IOC/IOCTable.js b/src/components/IOC/IOCTable.js index 5f217215d70f207b846af61ce196505199922dc4..5ca1d16f0cdc5dad2c1a67398872ec3630f2de7e 100644 --- a/src/components/IOC/IOCTable.js +++ b/src/components/IOC/IOCTable.js @@ -1,6 +1,6 @@ import React, { useCallback } from 'react'; import { CustomTable } from "../common/table/CustomTable"; -import { Grid, Tooltip } from "@material-ui/core"; +import { Grid, Tooltip, Typography } from "@material-ui/core"; import { IOCStatusIcon } from './IOCIcons'; import { noWrapText } from '../common/Helper'; import { useRedirect } from '../../hooks/Redirect'; @@ -29,11 +29,17 @@ const hostDetailsColumns = [ ] function createGitVersionField(version, shortVersion) { + const versionText = shortVersion ?? version; return ( <> {version ? <Tooltip title={version} arrow enterDelay={400}> - <label>{noWrapText(shortVersion ?? version)}</label> + <Typography style={{ fontFamily: "monospace", + overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}> + { versionText?.length > 10 ? + `${versionText.substring(0, 10)}...` : versionText + } + </Typography> </Tooltip> : "---" } diff --git a/src/components/IOC/IOCTable.spec.js b/src/components/IOC/IOCTable.spec.js index d45eecb5b01cc703ec0f700c3209fa8b75e7b853..5455f417179676476a4286d9df58d2591299fa07 100644 --- a/src/components/IOC/IOCTable.spec.js +++ b/src/components/IOC/IOCTable.spec.js @@ -25,7 +25,7 @@ describe("HostTable", () => { it("Truncates all text content", () => { cy.get("tbody > tr").first() .find(".MuiTypography-noWrap") - .should("have.length", textColumns.length) + .should("have.length", textColumns.length - 1) }) it("Displays correct content in first row", () => {