Merge pull request #4372 from kiranpatel11/master

feat(CatalogTable): truncate long description with ellipsis and tooltip
2021-02-18 19:28:47 +01:00
parent 8282af801b 3469cc71cc
commit 3a940a7d0b
11 changed files with 163 additions and 3 deletions
@@ -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.
@@ -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.
@@ -1,5 +1,8 @@
 comment: false # Ref: https://docs.codecov.io/docs/pull-request-comments

+ignore:
+  - '**/*.stories.*'
+
 coverage:
  status:
    project:
@@ -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"
@@ -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 = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} />
+  </Box>
+);
+
+export const MultiLine = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} line={2} />
+  </Box>
+);
+
+export const DifferentTitle = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip
+      title="Visit loremipsum.io for more info"
+      text={text}
+      line={2}
+    />
+  </Box>
+);
@@ -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 (
+    <Tooltip
+      title={props.title ?? props.text!}
+      placement={props.placement}
+      disableHoverListener={!hover}
+    >
+      <TextTruncate
+        text={props.text}
+        line={props.line}
+        onToggled={handleToggled}
+      />
+    </Tooltip>
+  );
+};
@@ -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';
@@ -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';
@@ -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
+        text={entity.metadata.description}
+        placement="bottom-start"
+      />
+    ),
  },
  {
    title: 'Tags',
@@ -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
+        text={entity.metadata.description}
+        placement="bottom-start"
+      />
+    ),
  },
  {
    title: 'Tags',
@@ -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"