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"