From 561180e4f4e00926057d6fd4a3e5df610798dc5d 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   |  1 +
 pkg/ui/src/components/button/button.module.styl   |  4 ++++
 .../diagnostics/diagnosticsView.module.styl       |  2 +-
 .../statements/diagnostics/diagnosticsView.tsx    | 15 ++++-----------
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/pkg/ui/src/components/anchor/anchor.module.styl b/pkg/ui/src/components/anchor/anchor.module.styl
index 806048c2e9fa..41ae895f8f18 100644
--- a/pkg/ui/src/components/anchor/anchor.module.styl
+++ b/pkg/ui/src/components/anchor/anchor.module.styl
@@ -12,3 +12,4 @@
 
 .crl-anchor
   color $colors--link
+  fill $colors--link
diff --git a/pkg/ui/src/components/button/button.module.styl b/pkg/ui/src/components/button/button.module.styl
index 738739febbcb..4e0b95fa6416 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 637ef0e03a3b..d684f877dd0d 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>
           );
         }