paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(CatalogTable): truncate long description with ellipsis and tooltip

Browse Source
This commit is contained in:
Kiran Patel
2021-02-03 17:33:19 +11:00
parent 2d8e78ed4c
commit 5469a9761f
9 changed files with 136 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/small-bikes-enjoy.md
+9
View File
@@ -0,0 +1,9 @@
---
'@backstage/core': minor
'@backstage/plugin-api-docs': minor
'@backstage/plugin-catalog': minor
---
Introduced generic OverflowTooltip component for cases where longer text needs to be truncated with ellipsis and show hover tooltip with full text. This is particularly useful in the cases where longer description text is rendered in table. e.g. CatalogTable and ApiExplorerTable.
Changes made in CatalogTable and ApiExplorerTable for using the OverflowTooltip component for truncating large description and showing tooltip on hover-over.
packages/core/package.json
+4 -2
View File
@@ -37,20 +37,20 @@
"@material-ui/lab": "4.0.0-alpha.45",
"@testing-library/react-hooks": "^3.4.2",
"@types/dagre": "^0.7.44",
"@types/prop-types": "^15.7.3",
"@types/react": "^16.9",
"@types/react-sparklines": "^1.7.0",
"@types/prop-types": "^15.7.3",
"classnames": "^2.2.6",
"clsx": "^1.1.0",
"d3-selection": "^2.0.0",
"d3-shape": "^2.0.0",
"d3-zoom": "^2.0.0",
"dagre": "^0.8.5",
"qs": "^6.9.4",
"immer": "^8.0.1",
"lodash": "^4.17.15",
"material-table": "^1.69.1",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"rc-progress": "^3.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
@@ -61,6 +61,7 @@
"react-router-dom": "6.0.0-beta.0",
"react-sparklines": "^1.7.0",
"react-syntax-highlighter": "^13.5.1",
"react-text-truncate": "^0.16.0",
"react-use": "^15.3.3",
"remark-gfm": "^1.0.0",
"zen-observable": "^0.8.15"
@@ -79,6 +80,7 @@
"@types/jest": "^26.0.7",
"@types/node": "^12.0.0",
"@types/react-helmet": "^6.1.0",
"@types/react-text-truncate": "^0.14.0",
"@types/zen-observable": "^0.8.0"
},
"files": [
packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx
+26
View File
@@ -0,0 +1,26 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { OverflowTooltip } from './OverflowTooltip';
const text =
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
export const Default = () => <OverflowTooltip title={text} text={text} />;
export const MultiLine = () => (
<OverflowTooltip title={text} text={text} line={2} />
);
packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx
+50
View File
@@ -0,0 +1,50 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Tooltip, TooltipProps } from '@material-ui/core';
import React, { useState } from 'react';
import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
type Props = {
title: TooltipProps['title'];
placement?: TooltipProps['placement'];
text?: TextTruncateProps['text'];
line?: TextTruncateProps['line'];
element?: TextTruncateProps['element'];
};
export const OverflowTooltip = (props: Props) => {
const [hover, setHover] = useState(false);
const handleToggled = (truncated: boolean) => {
const hover = truncated ? true : false;
setHover(hover);
};
return (
<Tooltip
title={props.title}
placement={props.placement}
disableHoverListener={!hover}
>
<TextTruncate
text={props.text}
line={props.line}
onToggled={handleToggled}
/>
</Tooltip>
);
};
packages/core/src/components/OverflowTooltip/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { OverflowTooltip } from './OverflowTooltip';
packages/core/src/components/index.ts
+1
View File
@@ -29,6 +29,7 @@ export * from './Lifecycle';
export * from './Link';
export * from './MarkdownContent';
export * from './OAuthRequestDialog';
export * from './OverflowTooltip';
export * from './Progress';
export * from './ProgressBars';
export * from './Select';
plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+7
View File
@@ -23,6 +23,7 @@ import {
} from '@backstage/catalog-model';
import {
CodeSnippet,
OverflowTooltip,
Table,
TableColumn,
TableFilter,
@@ -92,6 +93,12 @@ const columns: TableColumn<EntityRow>[] = [
{
title: 'Description',
field: 'entity.metadata.description',
render: ({ entity }) => (
<OverflowTooltip
title={entity.metadata.description as string}
text={entity.metadata.description}
/>
),
},
{
title: 'Tags',
plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+7
View File
@@ -25,6 +25,7 @@ import {
TableColumn,
TableProps,
WarningPanel,
OverflowTooltip,
} from '@backstage/core';
import {
EntityRefLink,
@@ -91,6 +92,12 @@ const columns: TableColumn<EntityRow>[] = [
{
title: 'Description',
field: 'entity.metadata.description',
render: ({ entity }) => (
<OverflowTooltip
title={entity.metadata.description as string}
text={entity.metadata.description}
/>
),
},
{
title: 'Tags',
yarn.lock
+16 -1
View File
@@ -1861,6 +1861,7 @@
react-router-dom "6.0.0-beta.0"
react-sparklines "^1.7.0"
react-syntax-highlighter "^13.5.1"
react-text-truncate "^0.16.0"
react-use "^15.3.3"
remark-gfm "^1.0.0"
zen-observable "^0.8.15"
@@ -6605,6 +6606,13 @@
dependencies:
"@types/react" "*"
"@types/react-text-truncate@^0.14.0":
version "0.14.0"
resolved "https://registry.npmjs.org/@types/react-text-truncate/-/react-text-truncate-0.14.0.tgz#588bbabbc7f2a13815e805f3a48942db73fe65fe"
integrity sha512-XZNmx8mMPFjRLFjFqIF5uLPXEZ4THKxoEv1yU63JzInV3ES42PD+DaQOK6+Rd+cRolzrNoY4YIY9rrW8kh4ikw==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.2.0":
version "4.2.4"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"
@@ -20939,7 +20947,7 @@ promzard@^0.3.0:
dependencies:
read "1"
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -21673,6 +21681,13 @@ react-test-renderer@^16.13.1:
react-is "^16.8.6"
scheduler "^0.19.1"
react-text-truncate@^0.16.0:
version "0.16.0"
resolved "https://registry.npmjs.org/react-text-truncate/-/react-text-truncate-0.16.0.tgz#03bbb942437dfba5cc0faf614f1339f888926f80"
integrity sha512-hMFXhUHgIBCCDaOfOsZAFeO4DGfG/paLyaS/F+X11CXseuScpxmMBUW6Luwjk9/FlGrVJWNGy1FSfK6b4yyiIg==
dependencies:
prop-types "^15.5.7"
react-textarea-autosize@^8.1.1:
version "8.2.0"
resolved "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.2.0.tgz#fae38653f5ec172a855fd5fffb39e466d56aebdb"