Merge #48090

48090: ui: CSS modules for Statements Details page r=koorosh a=koorosh

Depends on #48012
Related to #47527

Following components are refactored to use CSS modules
 instead of global styles:
- Statement Details page
- Statements Diagnostics components
- Anchor
- Text
- Empty

Before, `Empty` component had styles which override
 Text, and Anchor components. Now, these styles are
 passed via `className` component props and custom
 styles defined by outer component.

Release note: None


Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>

pkg/ui/src/components/anchor/anchor.tsx

@@ -9,18 +9,23 @@
 // licenses/APL.txt.
 
 import React from "react";
-import "./anchor.styl";
+import classnames from "classnames/bind";
+import styles from "./anchor.module.styl";
 
 interface AnchorProps {
  onClick?: () => void;
  href?: string;
  target?: "_blank" | "_parent" | "_self";
+ className?: string;
 }
+
+const cx = classnames.bind(styles);
+
 export function Anchor(props: React.PropsWithChildren<AnchorProps>) {
- const { href, target, children, onClick } = props;
+ const { href, target, children, onClick, className } = props;
  return (
  <a
- className="crl-anchor"
+ className={cx("crl-anchor", className)}
  href={href}
  target={target}
  onClick={onClick}
@@ -32,4 +37,5 @@ export function Anchor(props: React.PropsWithChildren<AnchorProps>) {
 
 Anchor.defaultProps = {
  target: "_blank",
+ className: "",
 };

pkg/ui/src/components/empty/empty.styl → pkg/ui/src/components/empty/empty.module.styl

@@ -10,12 +10,6 @@
 
 @require '~src/components/core/index.styl'
 
-.summary--card.summary--card__empty-state
- padding 0
- .cl-empty-view
- &__content
- max-width 650px
-
 .cl-empty-view
  display flex
  flex-direction column
@@ -42,11 +36,11 @@
  max-width 600px
 
  &__main
- .text
+ &--text
  color $colors--neutral-6
  font-size $font-size--medium
  line-height $line-height--medium-small
- .crl-anchor
+ &--anchor
  margin-left 6px
 
  &__actions-column

pkg/ui/src/components/empty/empty.tsx

@@ -10,8 +10,11 @@
 
 import heroBannerLp from "assets/heroBannerLp.png";
 import React from "react";
+import classnames from "classnames/bind";
 import { Anchor, Button, Text, TextTypes } from "src/components";
-import "./empty.styl";
+import styles from "./empty.module.styl";
+
+const cx = classnames.bind(styles);
 
 export interface IEmptyProps {
  title?: string;
@@ -33,23 +36,36 @@ export const Empty = ({
  link,
  backgroundImage,
 }: IEmptyProps) => (
- <div className="cl-empty-view" style={{ backgroundImage: `url(${backgroundImage})` }}>
+ <div
+ className={cx("cl-empty-view")}
+ style={{ backgroundImage: `url(${backgroundImage})` }}
+ >
  <Text
- className="cl-empty-view__title"
+ className={cx("cl-empty-view__title")}
  textType={TextTypes.Heading3}
  >
  {title}
  </Text>
- <div className="cl-empty-view__content">
- <main className="cl-empty-view__main">
+ <div
+ className={cx("cl-empty-view__content")}
+ >
+ <main className={cx("cl-empty-view__main")}>
  <Text
+ className={cx("cl-empty-view__main--text")}
  textType={TextTypes.Body}
  >
  {description}
- {link && <Anchor href={link}>{anchor}</Anchor>}
+ {link && (
+ <Anchor
+ href={link}
+ className={cx("cl-empty-view__main--anchor")}
+ >
+ {anchor}
+ </Anchor>
+ )}
  </Text>
  </main>
- <footer className="cl-empty-view__footer">
+ <footer className={cx("cl-empty-view__footer")}>
  <Button
  type="primary"
  onClick={onClick}

pkg/ui/src/views/jobs/jobDetails.tsx

@@ -30,6 +30,7 @@ import JobsResponse = cockroach.server.serverpb.JobsResponse;
 import { Button, BackIcon } from "src/components/button";
 import { DATE_FORMAT } from "src/util/format";
 import { JobStatusCell } from "./jobStatusCell";
+import "src/views/shared/components/summaryCard/styles.styl";
 
 interface JobsTableProps extends RouteComponentProps {
  status: string;

pkg/ui/src/views/shared/components/summaryCard/index.tsx

@@ -9,20 +9,19 @@
 // licenses/APL.txt.
 
 import React from "react";
-import "./styles.styl";
+import classnames from "classnames/bind";
+import styles from "./summaryCard.module.styl";
 
 interface ISummaryCardProps {
  children: React.ReactNode;
  className?: string;
 }
 
+const cx = classnames.bind(styles);
+
 // tslint:disable-next-line: variable-name
-export const SummaryCard: React.FC<ISummaryCardProps> = ({ children, className }) => (
- <div className={`summary--card ${className}`}>
+export const SummaryCard: React.FC<ISummaryCardProps> = ({ children, className = "" }) => (
+ <div className={`${cx("summary--card")} ${className}`}>
  {children}
  </div>
 );
-
-SummaryCard.defaultProps = {
- className: "",
-};

pkg/ui/src/views/shared/components/summaryCard/summaryCard.module.styl

@@ -0,0 +1,67 @@
+// Copyright 2018 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+@require "~styl/base/palette.styl"
+
+.summary--card
+ border-radius 3px
+ box-shadow 0 0 1px 0 rgba(67, 90, 111, 0.41)
+ background-color $adminui-white
+ padding 25px
+ margin-bottom 15px
+ &__divider
+ width 100%
+ height 1px
+ margin 22px 0
+ background $table-border
+ &__title
+ font-family SourceSansPro-Regular
+ font-size 20px
+ line-height 1.6
+ letter-spacing -0.2px
+ color $popover-color
+ margin-bottom 25px
+ &__counting
+ &--value
+ font-family SourceSansPro-Regular
+ font-size 20pt
+ line-height 1.6
+ letter-spacing -0.2px
+ color $text-color
+ margin-bottom 15px
+ &--label
+ font-family SourceSansPro-Regular
+ font-size 14pt
+ line-height 1.67
+ letter-spacing 0.3px
+ color $secondary-text-color
+ margin-bottom 0
+ &__item
+ display flex;
+ justify-content space-between
+ margin-bottom 10px
+ &--label
+ font-family SourceSansPro-Regular
+ font-size 14px
+ line-height 1.57
+ letter-spacing 0.1px
+ color $secondary-text-color
+ margin-right 5px
+ margin-bottom 0
+ &--value
+ font-family SourceSansPro-Regular
+ font-size 14px
+ font-weight 600
+ line-height 1.71
+ letter-spacing 0.1px
+ color $popover-color
+ margin-bottom 0
+ &-red
+ color $alert-color

pkg/ui/src/views/shared/components/toolTip/index.tsx

@@ -11,15 +11,18 @@
 import { Tooltip } from "antd";
 import React from "react";
 import { AbstractTooltipProps } from "antd/es/tooltip";
-import classNames from "classnames";
+import classNames from "classnames/bind";
 
-import "./tooltip.styl";
+import styles from "./tooltip.module.styl";
 
 interface ToolTipWrapperProps extends AbstractTooltipProps {
  text: React.ReactNode;
  short?: boolean;
  children?: React.ReactNode;
 }
+
+const cx = classNames.bind(styles);
+
 /**
  * ToolTipWrapper wraps its children with an area that detects mouseover events
  * and, when hovered, displays a floating tooltip to the immediate right of
@@ -33,9 +36,14 @@ interface ToolTipWrapperProps extends AbstractTooltipProps {
 // tslint:disable-next-line: variable-name
 export const ToolTipWrapper = (props: ToolTipWrapperProps) => {
  const { text, children, placement } = props;
- const overlayClassName = classNames("tooltip__preset--white", `tooltip__preset--placement-${placement}`);
+ const overlayClassName = cx("tooltip__preset--white", `tooltip__preset--placement-${placement}`);
  return (
- <Tooltip title={ text } placement="bottom" overlayClassName={overlayClassName} {...props}>
+ <Tooltip
+ title={ text }
+ placement="bottom"
+ overlayClassName={overlayClassName}
+ {...props}
+ >
  {children}
  </Tooltip>
  );

pkg/ui/src/views/shared/components/toolTip/tooltip.styl → pkg/ui/src/views/shared/components/toolTip/tooltip.module.styl

@@ -10,9 +10,9 @@
 
 @require '~src/components/core/index.styl'
 
-.ant-tooltip.tooltip__preset--white
+:global(.ant-tooltip).tooltip__preset--white
  max-width 500px
- .ant-tooltip-content
+ :global(.ant-tooltip-content)
  position relative
  &:after, &:before
  content ''
@@ -25,10 +25,10 @@
  border-width 10px
  &:before
  border-width 10px
- .ant-tooltip-arrow
+ :global(.ant-tooltip-arrow)
  &:before
  background-color transparent
- .ant-tooltip-inner
+ :global(.ant-tooltip-inner)
  padding 10px
  border-radius 3px
  border solid 1px $colors--neutral-2
@@ -39,7 +39,7 @@
  color $colors--neutral-6
 
 .tooltip__preset--placement-bottom
- .ant-tooltip-content
+ :global(.ant-tooltip-content)
  &:after, &:before
  transform translate(-50%, 0)
  left 50%
@@ -51,7 +51,7 @@
  border-color transparent transparent $colors--neutral-2 transparent
 
 .tooltip__preset--placement-left
- .ant-tooltip-content
+ :global(.ant-tooltip-content)
  &:after, &:before
  top 50%
  transform translate(0, -50%)

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

@@ -57,9 +57,10 @@
  &:hover
  color $colors--link
 
-.summary--card__empty-sate
+.summary--card__empty-state
  background-color $colors--white
  background-image url("../../../../assets/statementsPage/emptyTracingBackground.svg")
  background-repeat no-repeat
  background-position-x right
- padding $spacing-large $spacing-x-large $spacing-x-large $spacing-x-large
+ padding 0
+

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

@@ -14,6 +14,7 @@ import { Link } from "react-router-dom";
 import moment from "moment";
 import Long from "long";
 import emptyTracingBackground from "assets/statementsPage/emptyTracingBackground.svg";
+import classnames from "classnames/bind";
 
 import {
  Button,
@@ -36,7 +37,7 @@ import { trustIcon } from "src/util/trust";
 
 import { DiagnosticStatusBadge } from "./diagnosticStatusBadge";
 import DownloadIcon from "!!raw-loader!assets/download.svg";
-import "./diagnosticsView.styl";
+import styles from "./diagnosticsView.module.styl";
 import { cockroach } from "src/js/protos";
 import IStatementDiagnosticsReport = cockroach.server.serverpb.IStatementDiagnosticsReport;
 import StatementDiagnosticsRequest = cockroach.server.serverpb.StatementDiagnosticsRequest;
@@ -58,6 +59,8 @@ interface DiagnosticsViewState {
  };
 }
 
+const cx = classnames.bind(styles);
+
 export class DiagnosticsView extends React.Component<DiagnosticsViewProps, DiagnosticsViewState> {
  columns: ColumnsConfig<IStatementDiagnosticsReport> = [
  {
@@ -93,7 +96,7 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
  render: (_text, record) => {
  if (record.completed) {
  return (
- <div className="crl-statements-diagnostics-view__actions-column">
+ <div className={cx("crl-statements-diagnostics-view__actions-column")}>
  <a href={`_admin/v1/stmtbundle/${record.statement_diagnostics_id}`}
  onClick={() => trackDownloadDiagnosticsBundle(record.statement_fingerprint)}>
  <Button
@@ -102,7 +105,7 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
  iconPosition="left"
  icon={() => (
  <span
- className="crl-statements-diagnostics-view__icon"
+ className={cx("crl-statements-diagnostics-view__icon")}
  dangerouslySetInnerHTML={ trustIcon(DownloadIcon) }
  />
  )}
@@ -149,15 +152,15 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
 
  if (!hasData) {
  return (
- <SummaryCard className="summary--card__empty-state">
+ <SummaryCard className={cx("summary--card__empty-state")}>
  <EmptyDiagnosticsView {...this.props} />
  </SummaryCard>
  );
  }
  return (
  <SummaryCard>
  <div
- className="crl-statements-diagnostics-view__title"
+ className={cx("crl-statements-diagnostics-view__title")}
  >
  <Text
  textType={TextTypes.Heading3}
@@ -170,7 +173,7 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
  onClick={this.onActivateButtonClick}
  disabled={!canRequestDiagnostics}
  type="secondary"
- className="crl-statements-diagnostics-view__activate-button"
+ className={cx("crl-statements-diagnostics-view__activate-button")}
  >
  Activate diagnostics
  </Button>
@@ -181,7 +184,7 @@ export class DiagnosticsView extends React.Component<DiagnosticsViewProps, Diagn
  dataSource={dataSource}
  columns={this.columns}
  />
- <div className="crl-statements-diagnostics-view__footer">
+ <div className={cx("crl-statements-diagnostics-view__footer")}>
  <Link to="/reports/statements/diagnosticshistory">All statement diagnostics</Link>
  </div>
  <DownloadFile ref={this.downloadRef}/>