Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: fix Download icon rendering on DiagnosticsView component #57776

Merged
merged 1 commit into from
Jan 11, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions pkg/ui/src/components/anchor/anchor.module.styl
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,7 @@

.crl-anchor
color $colors--link
fill $colors--link
&:hover
color $colors--info-4
fill $colors--info-4
4 changes: 4 additions & 0 deletions pkg/ui/src/components/button/button.module.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -32,6 +34,7 @@

&.crl-button--disabled
color $colors--neutral-4
fill $colors--neutral-4
pointer-events none
cursor default

Expand All @@ -43,6 +46,7 @@
line-height 22px
letter-spacing 0.1px
color $colors--neutral-7
fill $colors--neutral-7
&:hover
text-decoration underline

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

&__icon
display inline-block
color inherit
fill inherit
font-style normal
line-height 0
text-align center
Expand Down
15 changes: 4 additions & 11 deletions pkg/ui/src/views/statements/diagnostics/diagnosticsView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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>
);
}
Expand Down