Merge #57776

57776: ui: fix Download icon rendering on DiagnosticsView component r=koorosh a=koorosh

Resolves #57698

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

**Before**:
<img width="1437" alt="Screen Shot 2020-12-08 at 1 37 13 PM" src="https://user-images.githubusercontent.com/3106437/101758114-a2011f80-3ae0-11eb-903f-d5056075b8cd.png">

**After:**
<img width="1221" alt="Screen Shot 2020-12-10 at 12 09 19 PM" src="https://user-images.githubusercontent.com/3106437/101758162-b0e7d200-3ae0-11eb-92a5-3c7d04040239.png">


Co-authored-by: Andrii Vorobiov <[email protected]>

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

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
 

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

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>
           );
         }