From b03b37081f70b51c61dc63b9d8e293d68142e2af Mon Sep 17 00:00:00 2001
From: Andrii Vorobiov <and.vorobiov@gmail.com>
Date: Thu, 10 Dec 2020 12:05:58 +0200
Subject: [PATCH] ui: fix Download icon rendering on DiagnosticsView component

Previously (with some regression changes), an icon on Statement
Diagnostics view wasn't rendered and instead base64 encoded string
was shown.

This fix introduces two kinds of changes:
- Reused Download icon from `ui-components` package so it is renders
properly
- styles for `Anchor` and `Button` components are extended with `fill`
attribute with the same values as for `color` attribute. It allows
nested SVG elements (icons) to inherit proper colors even when link or button
are hovered or disabled.

Release note (ui change): fixes corrupted icon rendering on Statement
Details page > Diagnostics tab
---
 pkg/ui/src/components/anchor/anchor.module.styl   |  2 ++
 pkg/ui/src/components/button/button.module.styl   |  4 ++++
 .../diagnostics/diagnosticsView.module.styl       |  2 +-
 .../statements/diagnostics/diagnosticsView.tsx    | 15 ++++-----------
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/pkg/ui/src/components/anchor/anchor.module.styl b/pkg/ui/src/components/anchor/anchor.module.styl
index aecf993ce8df..68b4266045d4 100644
--- a/pkg/ui/src/components/anchor/anchor.module.styl
+++ b/pkg/ui/src/components/anchor/anchor.module.styl
@@ -12,5 +12,7 @@
 
 .crl-anchor
   color $colors--link
+  fill $colors--link
   &:hover
     color $colors--info-4
+    fill $colors--info-4
diff --git a/pkg/ui/src/components/button/button.module.styl b/pkg/ui/src/components/button/button.module.styl
index ce965892bfd7..8550a3e285a5 100644
--- a/pkg/ui/src/components/button/button.module.styl
+++ b/pkg/ui/src/components/button/button.module.styl
@@ -19,9 +19,11 @@
   border solid 1px transparent
   background-color transparent
   color $colors--primary-blue-3
+  fill $colors--primary-blue-3
 
   &:hover
     color $colors--primary-blue-4
+    fill $colors--primary-blue-4
 
   &:active
     border solid 2px $colors--primary-blue-1
@@ -32,6 +34,7 @@
 
   &.crl-button--disabled
     color $colors--neutral-4
+    fill $colors--neutral-4
     pointer-events none
     cursor default
 
@@ -43,6 +46,7 @@
     line-height 22px
     letter-spacing 0.1px
     color $colors--neutral-7
+    fill $colors--neutral-7
     &:hover
       text-decoration underline
 
diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.module.styl b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.module.styl
index f1b938c44992..14d7f4c19d46 100644
--- a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.module.styl
+++ b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.module.styl
@@ -44,7 +44,7 @@
 
   &__icon
     display inline-block
-    color inherit
+    fill inherit
     font-style normal
     line-height 0
     text-align center
diff --git a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx
index 125991d35903..525ddfa5704a 100644
--- a/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx
+++ b/pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx
@@ -33,10 +33,7 @@ import {
   selectDiagnosticsReportsCountByStatementFingerprint,
 } from "src/redux/statements/statementsSelectors";
 import { createStatementDiagnosticsReportAction } from "src/redux/statements";
-import { trustIcon } from "src/util/trust";
-
 import { DiagnosticStatusBadge } from "./diagnosticStatusBadge";
-import DownloadIcon from "!!url-loader!assets/download.svg";
 import EmptyListIcon from "!!url-loader!assets/emptyState/empty-list-results.svg";
 import styles from "./diagnosticsView.module.styl";
 import { cockroach } from "src/js/protos";
@@ -47,6 +44,7 @@ import { statementDiagnostics } from "src/util/docs";
 import { createStatementDiagnosticsAlertLocalSetting } from "src/redux/alerts";
 import { trackActivateDiagnostics, trackDownloadDiagnosticsBundle } from "src/util/analytics";
 import { EmptyTable } from "@cockroachlabs/admin-ui-components";
+import { Download } from "@cockroachlabs/icons";
 
 interface DiagnosticsViewOwnProps {
   statementFingerprint?: string;
@@ -98,22 +96,17 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
         if (record.completed) {
           return (
             <div className={cx("crl-statements-diagnostics-view__actions-column")}>
-              <a href={`_admin/v1/stmtbundle/${record.statement_diagnostics_id}`}
+              <Anchor href={`_admin/v1/stmtbundle/${record.statement_diagnostics_id}`}
                  onClick={() => trackDownloadDiagnosticsBundle(record.statement_fingerprint)}>
                 <Button
                   size="small"
                   type="flat"
                   iconPosition="left"
-                  icon={() => (
-                    <span
-                      className={cx("crl-statements-diagnostics-view__icon")}
-                      dangerouslySetInnerHTML={ trustIcon(DownloadIcon) }
-                    />
-                  )}
+                  icon={() => <Download className={cx("crl-statements-diagnostics-view__icon")} />}
                 >
                   Bundle (.zip)
                 </Button>
-              </a>
+              </Anchor>
             </div>
           );
         }