diff --git a/.changeset/small-bikes-enjoy.md b/.changeset/small-bikes-enjoy.md new file mode 100644 index 0000000000..2b624ece2f --- /dev/null +++ b/.changeset/small-bikes-enjoy.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +--- + +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. diff --git a/.github/codecov.yml b/.github/codecov.yml index d39038615f..a15de165d0 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: diff --git a/packages/core/package.json b/packages/core/package.json index c93f9cad9c..f6afa76b7f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -37,20 +37,21 @@ "@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", + "@types/react-text-truncate": "^0.14.0", "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 +62,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" 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..e0cbe7c814 --- /dev/null +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx @@ -0,0 +1,48 @@ +/* + * 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 { 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 MultiLine = () => ( + + + +); + +export const DifferentTitle = () => ( + + + +); diff --git a/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx new file mode 100644 index 0000000000..9bbe7aeb81 --- /dev/null +++ b/packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -0,0 +1,49 @@ +/* + * 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 = { + text: TextTruncateProps['text']; + line?: TextTruncateProps['line']; + element?: TextTruncateProps['element']; + title?: TooltipProps['title']; + placement?: TooltipProps['placement']; +}; + +export const OverflowTooltip = (props: Props) => { + const [hover, setHover] = useState(false); + + const handleToggled = (truncated: boolean) => { + setHover(truncated); + }; + + 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..729f659b56 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..91f187855a 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 d7bcc7a3a5..6974e0bb5c 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" @@ -1861,6 +1862,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 +6607,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" @@ -20931,7 +20940,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== @@ -21665,6 +21674,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"