ui: Show tooltip with full statement in Diagnostics history page

Before, statements column on Statements diagnostics history page
displayed full statement and didn't have tooltips.

With current changes, statements column behave almost the same
way as on Statements page:
- statement is shortened
- tooltip is added with full statement
- in case shortened statement is the same as full statement -
then don't display tooltip at all.

Release note (admin ui change): Add tooltips with full length
statements on Statement diagnostics history page.

Release justification: bug fixes and low-risk updates to new functionality

pkg/ui/src/views/reports/containers/statementDiagnosticsHistory/index.tsx

@@ -17,7 +17,16 @@ import Long from "long";
 import { isUndefined } from "lodash";
 import { Link } from "react-router-dom";
 
-import { Button, ColumnsConfig, DownloadFile, DownloadFileRef, Table, Text, TextTypes } from "src/components";
+import {
+  Button,
+  ColumnsConfig,
+  DownloadFile,
+  DownloadFileRef,
+  Table,
+  Text,
+  TextTypes,
+  Tooltip,
+} from "src/components";
 import HeaderSection from "src/views/shared/components/headerSection";
 import { AdminUIState } from "src/redux/state";
 import { getStatementDiagnostics } from "src/util/api";
@@ -44,9 +53,36 @@ import {
   sortByStatementFingerprintField,
 } from "src/views/statements/diagnostics";
 import { trackDownloadDiagnosticsBundle } from "src/util/analytics";
+import { shortStatement } from "src/views/statements/statementsTable";
+import { summarize } from "src/util/sql/summarize";
 
 type StatementDiagnosticsHistoryViewProps = MapStateToProps & MapDispatchToProps;
 
+const StatementColumn: React.FC<{ fingerprint: string }> = ({ fingerprint }) => {
+  const summary = summarize(fingerprint);
+  const shortenedStatement = shortStatement(summary, fingerprint);
+  const showTooltip = fingerprint !== shortenedStatement;
+
+  if (showTooltip) {
+    return (
+      <Text textType={TextTypes.Code}>
+        <Tooltip
+          placement="bottom"
+          title={
+            <pre className="cl-table-link__description">{ fingerprint }</pre>
+          }
+          overlayClassName="cl-table-link__statement-tooltip--fixed-width"
+        >
+          {shortenedStatement}
+        </Tooltip>
+      </Text>
+    );
+  }
+  return (
+    <Text textType={TextTypes.Code}>{shortenedStatement}</Text>
+  );
+};
+
 class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosticsHistoryViewProps> {
   columns: ColumnsConfig<IStatementDiagnosticsReport> = [
     {
@@ -71,17 +107,17 @@ class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosti
         const { implicit_txn: implicitTxn = "true", query } = statement?.key?.key_data || {};
 
         if (isUndefined(query)) {
-          return <Text textType={TextTypes.Code}>{fingerprint}</Text>
+          return <StatementColumn fingerprint={fingerprint} />;
         }
 
         return (
           <Link
             to={ `/statement/${implicitTxn}/${encodeURIComponent(query)}` }
             className="crl-statements-diagnostics-view__statements-link"
           >
-            <Text textType={TextTypes.Code}>{fingerprint}</Text>
+            <StatementColumn fingerprint={fingerprint} />
           </Link>
-        )
+        );
       },
     },
     {

pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl

@@ -107,4 +107,5 @@
   font-size $font-size--small
   line-height 22px
   color $colors--neutral-1
-  white-space pre-wrap
+  white-space pre-wrap
+  margin-bottom 0

pkg/ui/src/views/statements/diagnostics/diagnosticsView.styl

@@ -53,7 +53,7 @@
     margin-right $spacing-x-small
 
   &__statements-link
-    color $colors--title
+    color $colors--primary-text
     &:hover
       color $colors--link