From 5469a9761f9f3a209def9c2b64d6c77c9c1352a4 Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Wed, 3 Feb 2021 17:33:19 +1100 Subject: [PATCH 1/9] feat(CatalogTable): truncate long description with ellipsis and tooltip --- .changeset/small-bikes-enjoy.md | 9 ++++ packages/core/package.json | 6 ++- .../OverflowTooltip.stories.tsx | 26 ++++++++++ .../OverflowTooltip/OverflowTooltip.tsx | 50 +++++++++++++++++++ .../src/components/OverflowTooltip/index.ts | 16 ++++++ packages/core/src/components/index.ts | 1 + .../ApiExplorerTable/ApiExplorerTable.tsx | 7 +++ .../components/CatalogTable/CatalogTable.tsx | 7 +++ yarn.lock | 17 ++++++- 9 files changed, 136 insertions(+), 3 deletions(-) create mode 100644 .changeset/small-bikes-enjoy.md create mode 100644 packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx create mode 100644 packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx create mode 100644 packages/core/src/components/OverflowTooltip/index.ts diff --git a/.changeset/small-bikes-enjoy.md b/.changeset/small-bikes-enjoy.md new file mode 100644 index 0000000000..f6e4dd4d9b --- /dev/null +++ b/.changeset/small-bikes-enjoy.md @@ -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. diff --git a/packages/core/package.json b/packages/core/package.json index c9045c6465..cbf5523a67 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -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": [ diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx new file mode 100644 index 0000000000..df6aba5cad --- /dev/null +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -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 = () => ; + +export const MultiLine = () => ( + +); diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx new file mode 100644 index 0000000000..02a45372f2 --- /dev/null +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -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 ( + + + + ); +}; diff --git a/packages/core/src/components/OverflowTooltip/index.ts b/packages/core/src/components/OverflowTooltip/index.ts new file mode 100644 index 0000000000..fe51e8267f --- /dev/null +++ b/packages/core/src/components/OverflowTooltip/index.ts @@ -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'; diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index 28056b33bf..58d0a8f569 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -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'; diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx index 701ca457df..1660436c46 100644 --- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx +++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx @@ -23,6 +23,7 @@ import { } from '@backstage/catalog-model'; import { CodeSnippet, + OverflowTooltip, Table, TableColumn, TableFilter, @@ -92,6 +93,12 @@ const columns: TableColumn[] = [ { title: 'Description', field: 'entity.metadata.description', + render: ({ entity }) => ( + + ), }, { title: 'Tags', diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index cdc7451601..43242faedb 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -25,6 +25,7 @@ import { TableColumn, TableProps, WarningPanel, + OverflowTooltip, } from '@backstage/core'; import { EntityRefLink, @@ -91,6 +92,12 @@ const columns: TableColumn[] = [ { title: 'Description', field: 'entity.metadata.description', + render: ({ entity }) => ( + + ), }, { title: 'Tags', diff --git a/yarn.lock b/yarn.lock index ac3a9e4a28..a8848a41a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" From ba070def578f4dcf1e3604e34b3e355bbe0e4ded Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Wed, 3 Feb 2021 18:01:55 +1100 Subject: [PATCH 2/9] (#2497) move devDependencies to dependencies for types ! to fix CI check --- packages/core/package.json | 2 +- yarn.lock | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/package.json b/packages/core/package.json index cbf5523a67..8655825cd8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -40,6 +40,7 @@ "@types/prop-types": "^15.7.3", "@types/react": "^16.9", "@types/react-sparklines": "^1.7.0", + "@types/react-text-truncate": "^0.14.0", "classnames": "^2.2.6", "clsx": "^1.1.0", "d3-selection": "^2.0.0", @@ -80,7 +81,6 @@ "@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": [ diff --git a/yarn.lock b/yarn.lock index a8848a41a6..a7b426f5bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1840,6 +1840,7 @@ "@types/prop-types" "^15.7.3" "@types/react" "^16.9" "@types/react-sparklines" "^1.7.0" + "@types/react-text-truncate" "^0.14.0" classnames "^2.2.6" clsx "^1.1.0" d3-selection "^2.0.0" From c380f32c35ca908eeee06745cfdbc3c78906bb98 Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Thu, 4 Feb 2021 09:04:23 +1100 Subject: [PATCH 3/9] feat(overflowtooltip): add text as default title for tooltip --- .../OverflowTooltip.stories.tsx | 26 +++++++++++++++++-- .../OverflowTooltip/OverflowTooltip.tsx | 8 +++--- .../ApiExplorerTable/ApiExplorerTable.tsx | 2 +- .../components/CatalogTable/CatalogTable.tsx | 2 +- 4 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx index df6aba5cad..e0cbe7c814 100644 --- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -13,14 +13,36 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { Box } from '@material-ui/core'; import React from 'react'; import { OverflowTooltip } from './OverflowTooltip'; +export default { + title: 'Data Display/OverflowTooltip', + component: OverflowTooltip, +}; + const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'; -export const Default = () => ; +export const Default = () => ( + + + +); export const MultiLine = () => ( - + + + +); + +export const DifferentTitle = () => ( + + + ); diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx index 02a45372f2..715f84503e 100644 --- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -19,11 +19,11 @@ import React, { useState } from 'react'; import TextTruncate, { TextTruncateProps } from 'react-text-truncate'; type Props = { - title: TooltipProps['title']; - placement?: TooltipProps['placement']; - text?: TextTruncateProps['text']; + text: TextTruncateProps['text']; line?: TextTruncateProps['line']; element?: TextTruncateProps['element']; + title?: TooltipProps['title']; + placement?: TooltipProps['placement']; }; export const OverflowTooltip = (props: Props) => { @@ -36,7 +36,7 @@ export const OverflowTooltip = (props: Props) => { return ( diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx index 1660436c46..729f659b56 100644 --- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx +++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx @@ -95,8 +95,8 @@ const columns: TableColumn[] = [ field: 'entity.metadata.description', render: ({ entity }) => ( ), }, diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 43242faedb..91f187855a 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -94,8 +94,8 @@ const columns: TableColumn[] = [ field: 'entity.metadata.description', render: ({ entity }) => ( ), }, From 1ec172a084a3b70f8f5de4d7810c91f1ae7f0672 Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Wed, 10 Feb 2021 11:19:26 +1100 Subject: [PATCH 4/9] modify version change from minor to patch for core, catalog and api-explore plugins --- .changeset/small-bikes-enjoy.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/small-bikes-enjoy.md b/.changeset/small-bikes-enjoy.md index f6e4dd4d9b..ffab05ec7b 100644 --- a/.changeset/small-bikes-enjoy.md +++ b/.changeset/small-bikes-enjoy.md @@ -1,7 +1,7 @@ --- -'@backstage/core': minor -'@backstage/plugin-api-docs': minor -'@backstage/plugin-catalog': minor +'@backstage/core': patch +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch --- 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. From 2c1f2a7c210e2a9f42f3bcf5130b723c403f9fab Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Wed, 10 Feb 2021 11:26:26 +1100 Subject: [PATCH 5/9] made two different changeset for OverflowTooltip in core and usage in plugins --- .changeset/small-bikes-enjoy.md | 3 --- .changeset/tricky-birds-appear.md | 5 +++++ 2 files changed, 5 insertions(+), 3 deletions(-) create mode 100644 .changeset/tricky-birds-appear.md diff --git a/.changeset/small-bikes-enjoy.md b/.changeset/small-bikes-enjoy.md index ffab05ec7b..2b624ece2f 100644 --- a/.changeset/small-bikes-enjoy.md +++ b/.changeset/small-bikes-enjoy.md @@ -1,9 +1,6 @@ --- -'@backstage/core': patch '@backstage/plugin-api-docs': patch '@backstage/plugin-catalog': patch --- -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. diff --git a/.changeset/tricky-birds-appear.md b/.changeset/tricky-birds-appear.md new file mode 100644 index 0000000000..ce1792c5da --- /dev/null +++ b/.changeset/tricky-birds-appear.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +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. From 6cc77b0f7d7bfcfe7215550c2bb30e8a95d16258 Mon Sep 17 00:00:00 2001 From: Kiran Patel Date: Wed, 10 Feb 2021 11:27:18 +1100 Subject: [PATCH 6/9] refactor setHover in OverflowTooltip --- .../core/src/components/OverflowTooltip/OverflowTooltip.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx index 715f84503e..17f228d681 100644 --- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -30,8 +30,7 @@ export const OverflowTooltip = (props: Props) => { const [hover, setHover] = useState(false); const handleToggled = (truncated: boolean) => { - const hover = truncated ? true : false; - setHover(hover); + setHover(truncated); }; return ( From f8284bed3e82ae199a533fb674f3eef63f2f1e0a Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 16 Feb 2021 10:28:33 +0100 Subject: [PATCH 7/9] chore: ignore stories codecov --- .github/codecov.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/codecov.yml b/.github/codecov.yml index d39038615f..191f22cb8a 100644 --- a/.github/codecov.yml +++ b/.github/codecov.yml @@ -1,5 +1,8 @@ comment: false # Ref: https://docs.codecov.io/docs/pull-request-comments +ignore: + - "**/*.stories.*" + coverage: status: project: From 8c5a6df2c85d2114974f405d87a236d898919c69 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 16 Feb 2021 10:48:10 +0100 Subject: [PATCH 8/9] chore: prettier --- .github/codecov.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/codecov.yml b/.github/codecov.yml index 191f22cb8a..a15de165d0 100644 --- a/.github/codecov.yml +++ b/.github/codecov.yml @@ -1,7 +1,7 @@ comment: false # Ref: https://docs.codecov.io/docs/pull-request-comments -ignore: - - "**/*.stories.*" +ignore: + - '**/*.stories.*' coverage: status: From 3469cc71cc8b55de93f2bac57eee7777bde39120 Mon Sep 17 00:00:00 2001 From: blam Date: Tue, 16 Feb 2021 11:13:12 +0100 Subject: [PATCH 9/9] chore: fix typings --- .../core/src/components/OverflowTooltip/OverflowTooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx index 17f228d681..9bbe7aeb81 100644 --- a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -35,7 +35,7 @@ export const OverflowTooltip = (props: Props) => { return (