ui: Link from statement diagnostics to details page

We have Statements diagnostics history page with list
of all requested diagnostics.
Before, statement fingerprint were represented as a
simple text and now it is a links to statement details
page.

One notion, that it is possible to have diagnostics for
statements which is already cleared. In this case
statement is displayed as a text instead of link.

Release note (admin ui change): Add links to statement
details from Statement Diagnostics history page.

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

pkg/ui/src/components/table/table.styl

@@ -11,6 +11,9 @@
 @require '~src/components/core/index.styl'
 
 .crl-table-wrapper
+  .ant-table
+    color $colors--primary-text
+
   // Table header
   .ant-table-thead
     background-color $colors--neutral-1

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

@@ -14,6 +14,8 @@ import { connect } from "react-redux";
 import moment from "moment";
 import { Action, Dispatch } from "redux";
 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 HeaderSection from "src/views/shared/components/headerSection";
@@ -22,11 +24,13 @@ import { getStatementDiagnostics } from "src/util/api";
 import { trustIcon } from "src/util/trust";
 import DownloadIcon from "!!raw-loader!assets/download.svg";
 import {
+  selectStatementByFingerprint,
   selectStatementDiagnosticsReports,
 } from "src/redux/statements/statementsSelectors";
 import {
   invalidateStatementDiagnosticsRequests,
   refreshStatementDiagnosticsRequests,
+  refreshStatements,
 } from "src/redux/apiReducers";
 import { DiagnosticStatusBadge } from "src/views/statements/diagnostics/diagnosticStatusBadge";
 import "./statementDiagnosticsHistoryView.styl";
@@ -60,9 +64,25 @@ class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosti
       key: "statement",
       title: "statement",
       sorter: sortByStatementFingerprintField,
-      render: (_text, record) => (
-        <Text textType={TextTypes.Code}>{record.statement_fingerprint}</Text>
-      ),
+      render: (_text, record) => {
+        const { getStatementByFingerprint } = this.props;
+        const fingerprint = record.statement_fingerprint;
+        const statement = getStatementByFingerprint(fingerprint);
+        const { implicit_txn: implicitTxn = "true", query } = statement?.key?.key_data || {};
+
+        if (isUndefined(query)) {
+          return <Text textType={TextTypes.Code}>{fingerprint}</Text>
+        }
+
+        return (
+          <Link
+            to={ `/statement/${implicitTxn}/${encodeURIComponent(query)}` }
+            className="crl-statements-diagnostics-view__statements-link"
+          >
+            <Text textType={TextTypes.Code}>{fingerprint}</Text>
+          </Link>
+        )
+      },
     },
     {
       key: "status",
@@ -182,6 +202,7 @@ class StatementDiagnosticsHistoryView extends React.Component<StatementDiagnosti
 
 interface MapStateToProps {
   diagnosticsReports: IStatementDiagnosticsReport[];
+  getStatementByFingerprint: (fingerprint: string) => ReturnType<typeof selectStatementByFingerprint>;
 }
 
 interface MapDispatchToProps {
@@ -190,12 +211,14 @@ interface MapDispatchToProps {
 
 const mapStateToProps = (state: AdminUIState): MapStateToProps => ({
   diagnosticsReports: selectStatementDiagnosticsReports(state) || [],
+  getStatementByFingerprint: (fingerprint: string) => selectStatementByFingerprint(state, fingerprint),
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<Action, AdminUIState>): MapDispatchToProps => ({
   refresh: () => {
     dispatch(invalidateStatementDiagnosticsRequests());
     dispatch(refreshStatementDiagnosticsRequests());
+    dispatch(refreshStatements());
   },
 });
 

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

@@ -52,6 +52,11 @@
     vertical-align -0.125em
     margin-right $spacing-x-small
 
+  &__statements-link
+    color $colors--title
+    &:hover
+      color $colors--link
+
 .summary--card__empty-sate
   background-color $colors--white
   background-image url("../../../../assets/statementsPage/emptyTracingBackground.svg")