Merge pull request #24391 from npiyush97/removetrunc

removing react-text-truncate

.changeset/sweet-spiders-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Removing react-text-truncate with css styles.

packages/core-components/api-report.md

@@ -47,7 +47,6 @@ import { StyledComponentProps } from '@material-ui/core/styles/withStyles';
 import { StyleRules } from '@material-ui/styles';
 import { StyleRules as StyleRules_2 } from '@material-ui/core/styles/withStyles';
 import { TabProps } from '@material-ui/core/Tab';
-import { TextTruncateProps } from 'react-text-truncate';
 import { Theme } from '@material-ui/core/styles';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { WithStyles } from '@material-ui/core/styles';

packages/core-components/package.json

@@ -8,24 +8,25 @@
   "backstage": {
     "role": "web-library"
   },
+  "keywords": [
+    "backstage"
+  ],
   "homepage": "https://backstage.io",
   "repository": {
     "type": "git",
     "url": "https://github.com/backstage/backstage",
     "directory": "packages/core-components"
   },
-  "keywords": [
-    "backstage"
-  ],
   "license": "Apache-2.0",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
     "./alpha": "./src/alpha.ts",
     "./testUtils": "./src/testUtils.ts",
     "./package.json": "./package.json"
   },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "typesVersions": {
     "*": {
       "alpha": [
@@ -39,15 +40,18 @@
       ]
     }
   },
-  "sideEffects": false,
+  "files": [
+    "dist",
+    "config.d.ts"
+  ],
   "scripts": {
     "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
     "lint": "backstage-cli package lint",
-    "test": "backstage-cli package test",
     "prepack": "backstage-cli package prepack",
     "postpack": "backstage-cli package postpack",
-    "clean": "backstage-cli package clean",
-    "start": "backstage-cli package start"
+    "start": "backstage-cli package start",
+    "test": "backstage-cli package test"
   },
   "dependencies": {
     "@backstage/config": "workspace:^",
@@ -63,7 +67,6 @@
     "@react-hookz/web": "^24.0.0",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
     "@types/react-sparklines": "^1.7.0",
-    "@types/react-text-truncate": "^0.14.0",
     "ansi-regex": "^6.0.1",
     "classnames": "^2.2.6",
     "d3-selection": "^3.0.0",
@@ -82,7 +85,6 @@
     "react-markdown": "^8.0.0",
     "react-sparklines": "^1.7.0",
     "react-syntax-highlighter": "^15.4.5",
-    "react-text-truncate": "^0.19.0",
     "react-use": "^17.3.2",
     "react-virtualized-auto-sizer": "^1.0.11",
     "react-window": "^1.8.6",
@@ -90,11 +92,6 @@
     "zen-observable": "^0.10.0",
     "zod": "^3.22.4"
   },
-  "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
-    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
-  },
   "devDependencies": {
     "@backstage/app-defaults": "workspace:^",
     "@backstage/cli": "workspace:^",
@@ -120,9 +117,10 @@
     "history": "^5.0.0",
     "msw": "^1.0.0"
   },
-  "files": [
-    "dist",
-    "config.d.ts"
-  ],
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
+  },
   "configSchema": "config.d.ts"
 }

packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx

@@ -16,15 +16,13 @@
 
 import { makeStyles } from '@material-ui/core/styles';
 import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
-import React, { useState } from 'react';
-import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
-import { useIsMounted } from '@react-hookz/web';
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
 
 type Props = {
-  text: TextTruncateProps['text'];
-  line?: TextTruncateProps['line'];
-  element?: TextTruncateProps['element'];
+  text?: string | undefined;
   title?: TooltipProps['title'];
+  line?: number | undefined;
   placement?: TooltipProps['placement'];
 };
 
@@ -35,33 +33,26 @@ const useStyles = makeStyles(
     container: {
       overflow: 'visible !important',
     },
+    typo: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      display: '-webkit-box',
+      '-webkit-line-clamp': ({ line }: Props) => line || 1,
+      '-webkit-box-orient': 'vertical',
+    },
   },
   { name: 'BackstageOverflowTooltip' },
 );
 
 export function OverflowTooltip(props: Props) {
-  const [hover, setHover] = useState(false);
-  const isMounted = useIsMounted();
-  const classes = useStyles();
-
-  const handleToggled = (truncated: boolean) => {
-    if (isMounted()) {
-      setHover(truncated);
-    }
-  };
+  const classes = useStyles(props);
 
   return (
     <Tooltip
       title={props.title ?? (props.text || '')}
       placement={props.placement}
-      disableHoverListener={!hover}
     >
-      <TextTruncate
-        text={props.text}
-        line={props.line}
-        onToggled={handleToggled}
-        containerClassName={classes.container}
-      />
+      <Typography className={classes.typo}>{props.text}</Typography>
     </Tooltip>
   );
 }

plugins/catalog-react/src/components/EntityTable/presets.test.tsx

@@ -72,7 +72,7 @@ describe('systemEntityColumns', () => {
       expect(screen.getByText('my-namespace/my-system')).toBeInTheDocument();
       expect(screen.getByText('my-namespace/my-domain')).toBeInTheDocument();
       expect(screen.getByText('test')).toBeInTheDocument();
-      expect(screen.getByText(/Some/)).toBeInTheDocument();
+      expect(screen.queryAllByText(/Some/)).not.toHaveLength(0);
     });
   });
 });
@@ -126,7 +126,7 @@ describe('componentEntityColumns', () => {
       expect(screen.getByText('test')).toBeInTheDocument();
       expect(screen.getByText('production')).toBeInTheDocument();
       expect(screen.getByText('service')).toBeInTheDocument();
-      expect(screen.getByText(/Some/)).toBeInTheDocument();
+      expect(screen.queryAllByText(/Some/)).not.toHaveLength(0);
     });
   });
 });

yarn.lock

@@ -4068,7 +4068,6 @@ __metadata:
     "@types/react-helmet": ^6.1.0
     "@types/react-sparklines": ^1.7.0
     "@types/react-syntax-highlighter": ^15.0.0
-    "@types/react-text-truncate": ^0.14.0
     "@types/react-virtualized-auto-sizer": ^1.0.1
     "@types/react-window": ^1.8.5
     "@types/zen-observable": ^0.8.0
@@ -4093,7 +4092,6 @@ __metadata:
     react-markdown: ^8.0.0
     react-sparklines: ^1.7.0
     react-syntax-highlighter: ^15.4.5
-    react-text-truncate: ^0.19.0
     react-use: ^17.3.2
     react-virtualized-auto-sizer: ^1.0.11
     react-window: ^1.8.6