From 026c199ead6734043e805fecb62792197d9b152d Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 19 Apr 2024 20:30:15 +0530 Subject: [PATCH 01/12] removing react-text-truncate Signed-off-by: npiyush97 --- .changeset/strange-doors-glow.md | 5 +++ .../OverflowTooltip/OverflowTooltip.tsx | 34 +++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) create mode 100644 .changeset/strange-doors-glow.md diff --git a/.changeset/strange-doors-glow.md b/.changeset/strange-doors-glow.md new file mode 100644 index 0000000000..71dcc375c0 --- /dev/null +++ b/.changeset/strange-doors-glow.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Removing react-text-truncate with css styles. diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index da489725e4..8585da1013 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* * Copyright 2020 The Backstage Authors * @@ -19,6 +20,7 @@ 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 Typography from '@material-ui/core/Typography'; type Props = { text: TextTruncateProps['text']; @@ -35,33 +37,35 @@ const useStyles = makeStyles( container: { overflow: 'visible !important', }, + typo: { + // width: 200, + display: 'inline-block', + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, }, { name: 'BackstageOverflowTooltip' }, ); export function OverflowTooltip(props: Props) { - const [hover, setHover] = useState(false); - const isMounted = useIsMounted(); + // const [hover, setHover] = useState(false); + // const isMounted = useIsMounted(); const classes = useStyles(); - - const handleToggled = (truncated: boolean) => { - if (isMounted()) { - setHover(truncated); - } - }; + console.log(classes); + // const handleToggled = (truncated: boolean) => { + // if (isMounted()) { + // setHover(truncated); + // } + // }; return ( - + {props.text} ); } From ad0ee563836559f34963f2ac7639aca1cf1679ad Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 19 Apr 2024 20:56:19 +0530 Subject: [PATCH 02/12] little cleanup Signed-off-by: npiyush97 --- .../OverflowTooltip/OverflowTooltip.tsx | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index 8585da1013..b7a33f97fc 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -17,15 +17,11 @@ 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; title?: TooltipProps['title']; placement?: TooltipProps['placement']; }; @@ -38,7 +34,6 @@ const useStyles = makeStyles( overflow: 'visible !important', }, typo: { - // width: 200, display: 'inline-block', overflow: 'hidden', whiteSpace: 'nowrap', @@ -49,21 +44,12 @@ const useStyles = makeStyles( ); export function OverflowTooltip(props: Props) { - // const [hover, setHover] = useState(false); - // const isMounted = useIsMounted(); const classes = useStyles(); - console.log(classes); - // const handleToggled = (truncated: boolean) => { - // if (isMounted()) { - // setHover(truncated); - // } - // }; return ( {props.text} From 7c234d0cead00265f05cbc81a6a84b5bd07d1b5f Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 19 Apr 2024 21:25:00 +0530 Subject: [PATCH 03/12] added style maxwidth 200 and props Signed-off-by: npiyush97 --- packages/core-components/api-report.md | 1 - packages/core-components/package.json | 46 +++++++++---------- .../OverflowTooltip.stories.tsx | 8 +--- .../OverflowTooltip/OverflowTooltip.tsx | 3 +- 4 files changed, 26 insertions(+), 32 deletions(-) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 7fd706db43..06676ab429 100644 --- a/packages/core-components/api-report.md +++ b/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'; diff --git a/packages/core-components/package.json b/packages/core-components/package.json index 9f632bcc7f..cbdb256c65 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -1,31 +1,32 @@ { "name": "@backstage/core-components", - "description": "Core components used by Backstage plugins and apps", "version": "0.14.4", - "publishConfig": { - "access": "public" - }, + "description": "Core components used by Backstage plugins and apps", "backstage": { "role": "web-library" }, + "publishConfig": { + "access": "public" + }, + "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" } diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx index 5ab5ba7dc4..a302a0a7e3 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -33,16 +33,12 @@ export const Default = () => ( export const MultiLine = () => ( - + ); export const DifferentTitle = () => ( - + ); diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index b7a33f97fc..12de79644f 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -21,7 +21,7 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; type Props = { - text: string; + text?: string | undefined; title?: TooltipProps['title']; placement?: TooltipProps['placement']; }; @@ -34,6 +34,7 @@ const useStyles = makeStyles( overflow: 'visible !important', }, typo: { + maxWidth: 200, display: 'inline-block', overflow: 'hidden', whiteSpace: 'nowrap', From 3e39b436e5a1cf837335acb57f6d7811e7683ba3 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 19 Apr 2024 21:26:54 +0530 Subject: [PATCH 04/12] add yarn.lock Signed-off-by: npiyush97 --- yarn.lock | 2 -- 1 file changed, 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 0a27eecdea..8ef4c2bab1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3923,7 +3923,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 @@ -3948,7 +3947,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 From d74a191b6c269ae9bcd99769d6d2a1d5dc902ff4 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 19 Apr 2024 21:33:31 +0530 Subject: [PATCH 05/12] missing this one Signed-off-by: npiyush97 --- plugins/catalog-react/src/components/EntityTable/columns.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx index 292235c78c..3357f1dded 100644 --- a/plugins/catalog-react/src/components/EntityTable/columns.tsx +++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx @@ -141,7 +141,6 @@ export const columnFactories = Object.freeze({ ), }; From 35dd24daceede25323023ccdf4fc815f0c90213c Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Sun, 5 May 2024 13:09:45 +0530 Subject: [PATCH 06/12] test fixed Signed-off-by: npiyush97 --- packages/core-components/package.json | 5 +---- .../src/components/EntityTable/presets.test.tsx | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/core-components/package.json b/packages/core-components/package.json index 5a813c6175..6addbc79d3 100644 --- a/packages/core-components/package.json +++ b/packages/core-components/package.json @@ -1,10 +1,7 @@ { "name": "@backstage/core-components", - "description": "Core components used by Backstage plugins and apps", "version": "0.14.6-next.1", - "publishConfig": { - "access": "public" - }, + "description": "Core components used by Backstage plugins and apps", "backstage": { "role": "web-library" }, diff --git a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx b/plugins/catalog-react/src/components/EntityTable/presets.test.tsx index 82075df5e9..afe4336300 100644 --- a/plugins/catalog-react/src/components/EntityTable/presets.test.tsx +++ b/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); }); }); }); From 359376aa9139b3bb5820d33f336d811976b55a80 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Sun, 5 May 2024 13:12:38 +0530 Subject: [PATCH 07/12] changeset added Signed-off-by: npiyush97 --- .changeset/sweet-spiders-rhyme.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/sweet-spiders-rhyme.md diff --git a/.changeset/sweet-spiders-rhyme.md b/.changeset/sweet-spiders-rhyme.md new file mode 100644 index 0000000000..58767cdfde --- /dev/null +++ b/.changeset/sweet-spiders-rhyme.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-catalog-react': patch +'@backstage/core-components': patch +--- + +Removing react-text-truncate with css styles. From 78e8704d1d260b67048056f193d216450043a617 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Sun, 5 May 2024 14:09:06 +0530 Subject: [PATCH 08/12] redundant changeset Signed-off-by: npiyush97 --- .changeset/strange-doors-glow.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/strange-doors-glow.md diff --git a/.changeset/strange-doors-glow.md b/.changeset/strange-doors-glow.md deleted file mode 100644 index 71dcc375c0..0000000000 --- a/.changeset/strange-doors-glow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/core-components': patch ---- - -Removing react-text-truncate with css styles. From 44fd44dea1d758011fabfbb2dc7f69b3022aded5 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Thu, 9 May 2024 00:15:51 +0530 Subject: [PATCH 09/12] line prop is back Signed-off-by: npiyush97 --- .../OverflowTooltip/OverflowTooltip.stories.tsx | 8 ++++++-- .../src/components/OverflowTooltip/OverflowTooltip.tsx | 9 +++++---- .../catalog-react/src/components/EntityTable/columns.tsx | 1 + plugins/catalog/src/components/CatalogTable/columns.tsx | 1 + 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx index a302a0a7e3..5ab5ba7dc4 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -33,12 +33,16 @@ export const Default = () => ( export const MultiLine = () => ( - + ); export const DifferentTitle = () => ( - + ); diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index 12de79644f..ab45d87d33 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ /* * Copyright 2020 The Backstage Authors * @@ -23,6 +22,7 @@ import Typography from '@material-ui/core/Typography'; type Props = { text?: string | undefined; title?: TooltipProps['title']; + line?: number | undefined; placement?: TooltipProps['placement']; }; @@ -35,17 +35,18 @@ const useStyles = makeStyles( }, typo: { maxWidth: 200, - display: 'inline-block', overflow: 'hidden', - whiteSpace: 'nowrap', textOverflow: 'ellipsis', + display: '-webkit-box', + '-webkit-line-clamp': ({ line }: Props) => line, + '-webkit-box-orient': 'vertical', }, }, { name: 'BackstageOverflowTooltip' }, ); export function OverflowTooltip(props: Props) { - const classes = useStyles(); + const classes = useStyles(props); return ( ), }; diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx index d5362badda..5d2f9146d9 100644 --- a/plugins/catalog/src/components/CatalogTable/columns.tsx +++ b/plugins/catalog/src/components/CatalogTable/columns.tsx @@ -141,6 +141,7 @@ export const columnFactories = Object.freeze({ ), width: 'auto', From 786c1dec28c615dc347ba2e5f8fd96eb3d52e013 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Thu, 9 May 2024 19:30:49 +0530 Subject: [PATCH 10/12] clamp 1 by default no need for whitespace Signed-off-by: npiyush97 --- .../src/components/OverflowTooltip/OverflowTooltip.tsx | 2 +- plugins/catalog-react/src/components/EntityTable/columns.tsx | 2 +- plugins/catalog/src/components/CatalogTable/columns.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index ab45d87d33..f0799b0d69 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles( overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', - '-webkit-line-clamp': ({ line }: Props) => line, + '-webkit-line-clamp': ({ line }: Props) => line || 1, '-webkit-box-orient': 'vertical', }, }, diff --git a/plugins/catalog-react/src/components/EntityTable/columns.tsx b/plugins/catalog-react/src/components/EntityTable/columns.tsx index e98c603d71..292235c78c 100644 --- a/plugins/catalog-react/src/components/EntityTable/columns.tsx +++ b/plugins/catalog-react/src/components/EntityTable/columns.tsx @@ -141,7 +141,7 @@ export const columnFactories = Object.freeze({ ), }; diff --git a/plugins/catalog/src/components/CatalogTable/columns.tsx b/plugins/catalog/src/components/CatalogTable/columns.tsx index 5d2f9146d9..d5362badda 100644 --- a/plugins/catalog/src/components/CatalogTable/columns.tsx +++ b/plugins/catalog/src/components/CatalogTable/columns.tsx @@ -141,7 +141,6 @@ export const columnFactories = Object.freeze({ ), width: 'auto', From 173987b38d65a9d5623eddfb3c6dc40e33e85ab9 Mon Sep 17 00:00:00 2001 From: npiyush97 Date: Fri, 10 May 2024 17:23:07 +0530 Subject: [PATCH 11/12] changeset change Signed-off-by: npiyush97 --- .changeset/sweet-spiders-rhyme.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/sweet-spiders-rhyme.md b/.changeset/sweet-spiders-rhyme.md index 58767cdfde..71dcc375c0 100644 --- a/.changeset/sweet-spiders-rhyme.md +++ b/.changeset/sweet-spiders-rhyme.md @@ -1,5 +1,4 @@ --- -'@backstage/plugin-catalog-react': patch '@backstage/core-components': patch --- From fa9def08249b0566b51a9528ce0a6e158e37dbfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 10 May 2024 20:30:21 +0200 Subject: [PATCH 12/12] Update packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- .../src/components/OverflowTooltip/OverflowTooltip.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index f0799b0d69..4b5b0f4bde 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -34,7 +34,6 @@ const useStyles = makeStyles( overflow: 'visible !important', }, typo: { - maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box',