Remove Helper Classes from visualizations

client/app/components/ColorPicker/Swatch.jsx

@@ -6,9 +6,13 @@ import Tooltip from "antd/lib/tooltip";
 
 import "./swatch.less";
 
-export default function Swatch({ className, color, title, size, ...props }) {
+export default function Swatch({ className, color, title, size, style, ...props }) {
   const result = (
-    <span className={cx("color-swatch", className)} style={{ backgroundColor: color, width: size }} {...props} />
+    <span
+      className={cx("color-swatch", className)}
+      style={{ backgroundColor: color, width: size, ...style }}
+      {...props}
+    />
   );
 
   if (isString(title) && title !== "") {
@@ -23,13 +27,15 @@ export default function Swatch({ className, color, title, size, ...props }) {
 
 Swatch.propTypes = {
   className: PropTypes.string,
+  style: PropTypes.object,
   title: PropTypes.string,
   color: PropTypes.string,
   size: PropTypes.number,
 };
 
 Swatch.defaultProps = {
   className: null,
+  style: null,
   title: null,
   color: "transparent",
   size: 12,

client/app/components/ColorPicker/index.jsx

@@ -70,7 +70,7 @@ export default function ColorPicker({
   }, [validatedColor, visible]);
 
   return (
-    <React.Fragment>
+    <span className="color-picker-wrapper">
       {addonBefore}
       <Popover
         arrowPointAtCenter
@@ -110,7 +110,7 @@ export default function ColorPicker({
         )}
       </Popover>
       {addonAfter}
-    </React.Fragment>
+    </span>
   );
 }
 

client/app/components/ColorPicker/index.less

@@ -38,3 +38,7 @@
 .color-picker-trigger {
   cursor: pointer;
 }
+
+.color-picker-wrapper {
+  white-space: nowrap;
+}

client/app/components/json-view-interactive/json-view-interactive.less

@@ -1,5 +1,4 @@
-@import (reference, less) "~bootstrap/less/variables.less";
-@import (reference, less) "~@/assets/less/main.less";
+@import "../../visualizations/variables";
 
 @jvi-gutter: 20px;
 @jvi-spacing: 2px;
@@ -60,7 +59,7 @@
   color: @text-color;
 
   &.jvi-string {
-    color: @state-success-text;
+    color: @green;
   }
 
   &.jvi-braces {
@@ -82,10 +81,10 @@
 }
 
 .jvi-value {
-  color: @state-success-text;
+  color: @green;
 
   &.jvi-primitive {
-    color: @brand-warning;
+    color: @orange;
   }
 
   &.jvi-string {
@@ -94,14 +93,15 @@
 }
 
 .jvi-object-key {
-  .jvi-value, .jvi-punctuation {
-    color: @brand-primary;
+  .jvi-value,
+  .jvi-punctuation {
+    color: @blue;
   }
 }
 
 .jvi-comment {
   color: @text-muted;
-  font-family: @redash-font;
+  font-family: @visualizations-font;
   font-style: italic;
   margin: 0 0 0 2 * @jvi-spacing;
   opacity: 0.5;

client/app/components/visualizations/editor/ContextHelp.jsx

@@ -24,7 +24,7 @@ ContextHelp.defaultProps = {
   children: null,
 };
 
-ContextHelp.defaultIcon = <Icon className="m-l-5 m-r-5" type="question-circle" theme="filled" />;
+ContextHelp.defaultIcon = <Icon className="context-help-default-icon" type="question-circle" theme="filled" />;
 
 function NumberFormatSpecs() {
   const { HelpTriggerComponent } = visualizationsSettings;

client/app/components/visualizations/editor/Section.jsx

@@ -2,13 +2,15 @@ import React from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 
+import "./Section.less";
+
 function SectionTitle({ className, children, ...props }) {
   if (!children) {
     return null;
   }
 
   return (
-    <h4 className={cx("m-t-0", "m-b-15", className)} {...props}>
+    <h4 className={cx("visualization-editor-section-title", className)} {...props}>
       {children}
     </h4>
   );
@@ -26,7 +28,7 @@ SectionTitle.defaultProps = {
 
 export default function Section({ className, children, ...props }) {
   return (
-    <div className={cx("m-b-15", className)} {...props}>
+    <div className={cx("visualization-editor-section", className)} {...props}>
       {children}
     </div>
   );

client/app/components/visualizations/editor/Section.less

@@ -0,0 +1,8 @@
+.visualization-editor-section-title {
+  margin-top: 0px;
+  margin-bottom: 15px;
+}
+
+.visualization-editor-section {
+  margin-bottom: 15px;
+}

client/app/components/visualizations/editor/Switch.jsx

@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 import AntSwitch from "antd/lib/switch";
 import Typography from "antd/lib/typography";
 
+import "./Switch.less";
+
 export default function Switch({ id, children, disabled, ...props }) {
   const fallbackId = useMemo(
     () =>
@@ -15,9 +17,9 @@ export default function Switch({ id, children, disabled, ...props }) {
 
   if (children) {
     return (
-      <label htmlFor={id} className="d-flex align-items-center">
+      <label htmlFor={id} className="switch-with-label">
         <AntSwitch id={id} disabled={disabled} {...props} />
-        <Typography.Text className="m-l-10" disabled={disabled}>
+        <Typography.Text className="switch-text" disabled={disabled}>
           {children}
         </Typography.Text>
       </label>

client/app/components/visualizations/editor/Switch.less

@@ -0,0 +1,8 @@
+.switch-with-label {
+  display: flex;
+  align-items: center;
+
+  .switch-text {
+    margin-left: 10px;
+  }
+}

client/app/components/visualizations/editor/TextArea.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import cx from "classnames";
+import AntInput from "antd/lib/input";
+import withControlLabel from "./withControlLabel";
+
+import "./TextArea.less";
+
+function TextArea({ className, ...otherProps }) {
+  return <AntInput.TextArea className={cx("visualization-editor-text-area", className)} {...otherProps} />;
+}
+
+export default withControlLabel(TextArea);

client/app/components/visualizations/editor/TextArea.less

@@ -0,0 +1,3 @@
+.visualization-editor-text-area {
+  resize: vertical;
+}

client/app/components/visualizations/editor/context-help.less

@@ -1,12 +1,17 @@
-@import (reference, less) '~@/assets/less/main.less';
-
 a.visualization-editor-context-help {
-  &, .ant-typography & {
+  &,
+  .ant-typography & {
     font: inherit;
     color: inherit;
 
-    &:hover, &:active {
-      color: @link-hover-color;
+    &:hover,
+    &:active {
+      color: #0a6ebd;
     }
   }
 }
+
+.context-help-default-icon {
+  margin-left: 5px;
+  margin-right: 5px;
+}

client/app/components/visualizations/editor/control-label.less

@@ -5,3 +5,7 @@
     }
   }
 }
+
+.visualization-editor-input {
+  width: 100% !important;
+}

client/app/components/visualizations/editor/index.js

@@ -10,12 +10,12 @@ import withControlLabel, { ControlLabel } from "./withControlLabel";
 import createTabbedEditor from "./createTabbedEditor";
 import Section from "./Section";
 import Switch from "./Switch";
+import TextArea from "./TextArea";
 import ContextHelp from "./ContextHelp";
 
-export { Section, ControlLabel, Checkbox, Switch, ContextHelp, withControlLabel, createTabbedEditor };
+export { Section, ControlLabel, Checkbox, Switch, TextArea, ContextHelp, withControlLabel, createTabbedEditor };
 export const Select = withControlLabel(AntSelect);
 export const Input = withControlLabel(AntInput);
-export const TextArea = withControlLabel(AntInput.TextArea);
 export const InputNumber = withControlLabel(AntInputNumber);
 export const ColorPicker = withControlLabel(RedashColorPicker);
 export const TextAlignmentSelect = withControlLabel(RedashTextAlignmentSelect);

client/app/components/visualizations/editor/withControlLabel.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import * as Grid from "antd/lib/grid";
@@ -55,7 +56,7 @@ ControlLabel.defaultProps = {
 
 export default function withControlLabel(WrappedControl) {
   // eslint-disable-next-line react/prop-types
-  function ControlWrapper({ id, layout, label, labelProps, disabled, ...props }) {
+  function ControlWrapper({ className, id, layout, label, labelProps, disabled, ...props }) {
     const fallbackId = useMemo(
       () =>
         `visualization-editor-control-${Math.random()
@@ -70,7 +71,12 @@ export default function withControlLabel(WrappedControl) {
 
     return (
       <ControlLabel layout={layout} label={label} labelProps={labelProps} disabled={disabled}>
-        <WrappedControl id={labelProps.htmlFor} disabled={disabled} {...props} />
+        <WrappedControl
+          className={cx("visualization-editor-input", className)}
+          id={labelProps.htmlFor}
+          disabled={disabled}
+          {...props}
+        />
       </ControlLabel>
     );
   }

client/app/visualizations/chart/Editor/AxisSettings.jsx

@@ -27,7 +27,6 @@ export default function AxisSettings({ id, options, features, onChange }) {
       <Section>
         <Select
           label="Scale"
-          className="w-100"
           data-test={`Chart.${id}.Type`}
           defaultValue={options.type}
           onChange={type => optionsChanged({ type })}>
@@ -66,7 +65,6 @@ export default function AxisSettings({ id, options, features, onChange }) {
             <Grid.Col span={12}>
               <InputNumber
                 label="Min Value"
-                className="w-100"
                 placeholder="Auto"
                 data-test={`Chart.${id}.RangeMin`}
                 defaultValue={toNumber(options.rangeMin)}
@@ -76,7 +74,6 @@ export default function AxisSettings({ id, options, features, onChange }) {
             <Grid.Col span={12}>
               <InputNumber
                 label="Max Value"
-                className="w-100"
                 placeholder="Auto"
                 data-test={`Chart.${id}.RangeMax`}
                 defaultValue={toNumber(options.rangeMax)}

client/app/visualizations/chart/Editor/ChartTypeSelect.jsx

@@ -27,7 +27,7 @@ export default function ChartTypeSelect(props) {
     <Select {...props}>
       {map(chartTypes, ({ type, name, icon }) => (
         <Select.Option key={type} value={type} data-test={`Chart.ChartType.${type}`}>
-          <i className={`m-r-5 fa fa-${icon}`} />
+          <i className={`fa fa-${icon}`} style={{ marginRight: 5 }} />
           {name}
         </Select.Option>
       ))}

client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx

@@ -20,7 +20,6 @@ export default function ColumnMappingSelect({ value, availableColumns, type, onC
     <Section>
       <Select
         label={label}
-        className="w-100"
         data-test={`Chart.ColumnMapping.${type}`}
         mode={multiple ? "multiple" : "default"}
         allowClear

client/app/visualizations/chart/Editor/CustomChartSettings.jsx

@@ -17,7 +17,6 @@ export default function CustomChartSettings({ options, onOptionsChange }) {
         <TextArea
           label="Custom code"
           data-test="Chart.Custom.Code"
-          className="form-control v-resizable"
           rows="10"
           defaultValue={isNil(options.customCode) ? defaultCustomCode : options.customCode}
           onChange={event => onOptionsChange({ customCode: event.target.value })}

client/app/visualizations/chart/Editor/DataLabelsSettings.jsx

@@ -73,7 +73,7 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
             <React.Fragment>
               Data Labels
               <ContextHelp placement="topRight" arrowPointAtCenter>
-                <div className="p-b-5">Use special names to access additional properties:</div>
+                <div style={{ paddingBottom: 5 }}>Use special names to access additional properties:</div>
                 <div>
                   <code>{"{{ @@name }}"}</code> series name;
                 </div>
@@ -92,11 +92,11 @@ export default function DataLabelsSettings({ options, onOptionsChange }) {
                 <div>
                   <code>{"{{ @@size }}"}</code> bubble size;
                 </div>
-                <div className="p-t-5">
+                <div style={{ paddingTop: 5 }}>
                   Also, all query result columns can be referenced
                   <br />
                   using
-                  <code className="text-nowrap">{"{{ column_name }}"}</code> syntax.
+                  <code style={{ whiteSpace: "nowrap" }}>{"{{ column_name }}"}</code> syntax.
                 </div>
               </ContextHelp>
             </React.Fragment>

client/app/visualizations/chart/Editor/DefaultColorsSettings.jsx

@@ -46,7 +46,6 @@ export default function DefaultColorsSettings({ options, data, onOptionsChange }
       title: "Color",
       dataIndex: "color",
       width: "1%",
-      className: "text-nowrap",
       render: (unused, item) => (
         <ColorPicker
           data-test={`Chart.Series.${item.key}.Color`}

client/app/visualizations/chart/Editor/GeneralSettings.jsx

@@ -103,7 +103,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
       <Section>
         <ChartTypeSelect
           label="Chart Type"
-          className="w-100"
           data-test="Chart.GlobalSeriesType"
           defaultValue={options.globalSeriesType}
           onChange={handleGlobalSeriesTypeChange}
@@ -125,7 +124,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           <Section>
             <InputNumber
               label="Bubble Size Coefficient"
-              className="w-100"
               data-test="Chart.BubbleCoefficient"
               defaultValue={options.coefficient}
               onChange={value => onOptionsChange({ coefficient: toNumber(value) })}
@@ -135,7 +133,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
           <Section>
             <Select
               label="Bubble Size Proportional To"
-              className="w-100"
               data-test="Chart.SizeMode"
               defaultValue={options.sizemode}
               onChange={mode => onOptionsChange({ sizemode: mode })}>
@@ -154,7 +151,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         <Section>
           <Select
             label="Direction"
-            className="w-100"
             data-test="Chart.PieDirection"
             defaultValue={options.direction.type}
             onChange={type => onOptionsChange({ direction: { type } })}>
@@ -194,7 +190,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         <Section>
           <Select
             label="Stacking"
-            className="w-100"
             data-test="Chart.Stacking"
             defaultValue={options.series.stacking}
             disabled={!includes(["line", "area", "column"], options.globalSeriesType)}
@@ -224,7 +219,6 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         <Section>
           <Select
             label="Missing and NULL values"
-            className="w-100"
             data-test="Chart.MissingValues"
             defaultValue={options.missingValuesAsZero ? 1 : 0}
             onChange={value => onOptionsChange({ missingValuesAsZero: !!value })}>