Commit 5fff70be authored by Andrii Vorobiov's avatar Andrii Vorobiov

ui: Refactor classNames usage with bind for PlanView component

Previously, class names were constructed by simply accessing
style modules class names and assigning it to classes. It was
cumbersome and not readable at all.

To enhance this, `classnames/bind` alternate is used, which
allows simply put class names.

Release note: None
parent 83de8d32
......@@ -10,6 +10,7 @@
import _ from "lodash";
import React, { Fragment } from "react";
import classNames from "classnames/bind";
import { cockroach } from "src/js/protos";
import { ToolTipWrapper } from "src/views/shared/components/toolTip";
import styles from "./planView.module.styl";
......@@ -17,13 +18,15 @@ import styles from "./planView.module.styl";
import IAttr = cockroach.sql.ExplainTreePlanNode.IAttr;
import IExplainTreePlanNode = cockroach.sql.IExplainTreePlanNode;
const cx = classNames.bind(styles);
const WARNING_ICON = (
<svg className={styles["warning-icon"]} width="17" height="17" viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg">
<svg className={cx("warning-icon")} width="17" height="17" viewBox="0 0 24 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7798 2.18656L23.4186 15.5005C25.0821 18.4005 22.9761 21.9972 19.6387 21.9972H4.3619C1.02395 21.9972 -1.08272 18.4009 0.582041 15.5005M0.582041 15.5005L8.21987 2.18656C9.89189 -0.728869 14.1077 -0.728837 15.7798 2.18656M13.4002 7.07075C13.4002 6.47901 12.863 5.99932 12.2002 5.99932C11.5375 5.99932 11.0002 6.47901 11.0002 7.07075V13.4993C11.0002 14.0911 11.5375 14.5707 12.2002 14.5707C12.863 14.5707 13.4002 14.0911 13.4002 13.4993V7.07075ZM13.5717 17.2774C13.5717 16.5709 12.996 15.9981 12.286 15.9981C11.5759 15.9981 11.0002 16.5709 11.0002 17.2774V17.2902C11.0002 17.9967 11.5759 18.5695 12.286 18.5695C12.996 18.5695 13.5717 17.9967 13.5717 17.2902V17.2774Z"/>
</svg>
);
const NODE_ICON = (
<span className={styles["node-icon"]}>&#x26AC;</span>
<span className={cx("node-icon")}>&#x26AC;</span>
);
// FlatPlanNodeAttribute contains a flattened representation of IAttr[].
......@@ -204,9 +207,9 @@ class PlanNodeDetails extends React.Component<PlanNodeDetailProps> {
keyClassName = "";
}
return (
<div key={attr.key} className={styles[attrClassName]}>
<div key={attr.key} className={cx(attrClassName)}>
{attr.warn && WARNING_ICON}
<span className={styles[keyClassName]}>{attr.key}</span>
<span className={cx(keyClassName)}>{attr.key}</span>
{this.renderAttributeValues(attr.values)}
</div>
);
......@@ -216,7 +219,7 @@ class PlanNodeDetails extends React.Component<PlanNodeDetailProps> {
const node = this.props.node;
if (node.attrs && node.attrs.length > 0) {
return (
<div className={styles[`nodeAttributes`]}>
<div className={cx("nodeAttributes")}>
{node.attrs.map( (attr) => this.renderAttribute(attr))}
</div>
);
......@@ -226,7 +229,7 @@ class PlanNodeDetails extends React.Component<PlanNodeDetailProps> {
render() {
const node = this.props.node;
return (
<div className={styles[`nodeDetails`]}>
<div className={cx("nodeDetails")}>
{NODE_ICON} <b>{_.capitalize(node.name)}</b>
{this.renderNodeDetails()}
</div>
......@@ -327,16 +330,16 @@ export class PlanView extends React.Component<PlanViewProps, PlanViewState> {
);
return (
<table className={styles["plan-view-table"]}>
<table className={cx("plan-view-table")}>
<thead>
<tr className={styles["plan-view-table__row--header"]}>
<th className={styles["plan-view-table__cell"]}>
<h2 className={`${styles["base-heading"]} ${styles["summary--card__title"]}`}>{this.props.title}</h2>
<div className={styles["plan-view-table__tooltip"]}>
<tr className={cx("plan-view-table__row--header")}>
<th className={cx("plan-view-table__cell")}>
<h2 className={cx("base-heading", "summary--card__title")}>{this.props.title}</h2>
<div className={cx("plan-view-table__tooltip")}>
<ToolTipWrapper
text={lastSampledHelpText}>
<div className={styles["plan-view-table__tooltip-hover-area"]}>
<div className={styles["plan-view-table__info-icon"]}>i</div>
<div className={cx("plan-view-table__tooltip-hover-area")}>
<div className={cx("plan-view-table__info-icon")}>i</div>
</div>
</ToolTipWrapper>
</div>
......@@ -344,9 +347,9 @@ export class PlanView extends React.Component<PlanViewProps, PlanViewState> {
</tr>
</thead>
<tbody>
<tr className={styles["plan-view-table__row--body"]}>
<td className={`${styles["plan-view"]} ${styles["plan-view-table__cell"]}`} style={{ textAlign: "left" }}>
<div className={styles["plan-view-container"]}>
<tr className={cx("plan-view-table__row--body")}>
<td className={cx("plan-view", "plan-view-table__cell")} style={{ textAlign: "left" }}>
<div className={cx("plan-view-container")}>
<div
id="plan-view-inner-container"
ref={this.innerContainer}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment