[Canvas] Use compressed forms in sidebar (#49419)

* compressed sidebar design * add back metric help, style no datasource msg * re-style remove button * re-style element status section * remove unused component import * update storyshots * clean up unused i18n values * address feedback * address i81n feedback * update storyshot * convert string to i18n * style grouped sidebar messages * update storyshots
elastic · Nov 15, 2019 · 69431b5 · 69431b5
1 parent 504604a
commit 69431b5
Show file tree

Hide file tree

Showing 53 changed files with 628 additions and 483 deletions.
diff --git a/...uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot b/...uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
diff --git a/...k/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx b/...k/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
@@ -71,7 +71,11 @@ export class ExtendedTemplate extends PureComponent<Props> {
     const isDisabled = typeof this.props.argValue === 'boolean' && this.props.argValue === false;
 
     if (isDisabled) {
-      return <EuiText color="subdued">The axis is disabled</EuiText>;
+      return (
+        <EuiText color="subdued" size="xs">
+          <p>{strings.getDisabledText()}</p>
+        </EuiText>
+      );
     }
 
     const positions = {
@@ -85,7 +89,7 @@ export class ExtendedTemplate extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <EuiFormRow label={strings.getPositionLabel()} display="rowCompressed">
+        <EuiFormRow label={strings.getPositionLabel()} display="columnCompressed">
           <EuiSelect
             compressed
             value={position}

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
@@ -91,7 +91,7 @@ class DatacolumnArgInput extends Component {
     });
 
     return (
-      <EuiFlexGroup gutterSize="s" id={argId}>
+      <EuiFlexGroup gutterSize="s" id={argId} direction="row">
         <EuiFlexItem grow={false}>
           <SimpleMathFunction
             id={argId}

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js
@@ -59,15 +59,15 @@ const FilterGroupInput = ({ onValueChange, argValue, argId, filterGroups }) => {
             onChange={ev => setInputValue(ev.target.value)}
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
           <EuiButton type="submit" size="s" onClick={handleAddGroup}>
-            Set
+            {strings.getButtonSet()}
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiButtonEmpty color="danger" size="xs" onClick={() => setAddMode(!addMode)} flush="left">
-        Cancel
+        {strings.getButtonCancel()}
       </EuiButtonEmpty>
     </form>
   );

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
@@ -130,6 +130,7 @@ class ImageUpload extends React.Component {
           idSelected={urlType}
           onChange={this.changeUrlType}
           isFullWidth
+          className="canvasSidebar__buttonGroup"
         />
       </EuiFormRow>
     );

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
@@ -26,7 +26,7 @@ const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
       />
     </EuiFlexItem>
     {confirm && (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
         <EuiButton size="s" onClick={() => commit(value)}>
           {confirm}
         </EuiButton>

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
@@ -19,8 +19,14 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
     return null;
   }
   return (
-    <EuiFormRow display="rowCompressed">
-      <EuiSwitch compressed id={argId} checked={argValue} onChange={handleChange} />
+    <EuiFormRow display="columnCompressedSwitch">
+      <EuiSwitch
+        compressed
+        id={argId}
+        checked={argValue}
+        onChange={handleChange}
+        className="canvasArg__switch"
+      />
     </EuiFormRow>
   );
 };

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
@@ -5,36 +5,22 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiText } from '@elastic/eui';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
-import { ComponentStrings, CANVAS, DataSourceStrings } from '../../../i18n';
+import { DataSourceStrings } from '../../../i18n';
 
 const { DemoData: strings } = DataSourceStrings;
 
 const DemodataDatasource = () => (
-  <EuiText>
-    <h3>{strings.getHeading()}</h3>
-    <p>
-      <FormattedMessage
-        id="xpack.canvas.uis.dataSources.demoDataDescription"
-        defaultMessage="This data source is connected to every {canvas} element by default. Its purpose is to give you some playground data to get started. The demo set contains 4 strings, 3 numbers and a date. Feel free to experiment and, when you're ready, click {clickText} above to connect to your own data."
-        values={{
-          canvas: CANVAS,
-          clickText: (
-            <strong>{ComponentStrings.DatasourceDatasourceComponent.getChangeButtonLabel()}</strong>
-          ),
-        }}
-      />
-    </p>
+  <EuiText size="s">
+    <p>{strings.getDescription()}</p>
   </EuiText>
 );
 
 export const demodata = () => ({
   name: 'demodata',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  // Replace this with a better icon when we have time.
   image: 'logoElasticStack',
   template: templateFromReactComponent(DemodataDatasource),
 });
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -6,10 +6,10 @@
 
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow, EuiTextArea } from '@elastic/eui';
+import { EuiFormRow, EuiTextArea, EuiLink, EuiText } from '@elastic/eui';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
-import { DataSourceStrings } from '../../../i18n';
+import { DataSourceStrings, SQL_URL } from '../../../i18n';
 
 const { Essql: strings } = DataSourceStrings;
 
@@ -59,13 +59,24 @@ class EssqlDatasource extends PureComponent {
     const { isInvalid } = this.props;
 
     return (
-      <EuiFormRow isInvalid={isInvalid} label={strings.getLabel()}>
+      <EuiFormRow
+        isInvalid={isInvalid}
+        label={strings.getLabel()}
+        labelAppend={
+          <EuiText size="xs">
+            <EuiLink href={SQL_URL} target="_blank">
+              {strings.getLabelAppend()}
+            </EuiLink>
+          </EuiText>
+        }
+      >
         <EuiTextArea
           placeholder={this.defaultQuery}
           isInvalid={isInvalid}
           className="canvasTextArea__code"
           value={this.getQuery()}
           onChange={this.onChange}
+          rows={15}
         />
       </EuiFormRow>
     );

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { timelion } from './timelion';
 import { demodata } from './demodata';
 import { essql } from './essql';
+import { timelion } from './timelion';
 
-export const datasourceSpecs = [timelion, demodata, essql];
+export const datasourceSpecs = [demodata, essql, timelion];
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
@@ -12,13 +12,13 @@ import {
   EuiCallOut,
   EuiSpacer,
   EuiCode,
-  EuiText,
   EuiTextArea,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
 import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
 import { DataSourceStrings, TIMELION, CANVAS } from '../../../i18n';
+import { TooltipIcon } from '../../../public/components/tooltip_icon';
 
 const { Timelion: strings } = DataSourceStrings;
 
@@ -57,43 +57,12 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
 
   return (
     <div>
-      <EuiText size="xs">
-        <h3>{TIMELION}</h3>
-        <p>{strings.getAbout()}</p>
-      </EuiText>
-
-      <EuiSpacer />
-
-      <EuiFormRow label={strings.getQueryLabel()} helpText={strings.getQueryHelp()}>
-        <EuiTextArea
-          className="canvasTextArea__code"
-          value={getQuery()}
-          onChange={e => setArg(argName, e.target.value)}
-        />
-      </EuiFormRow>
-      {
-        // TODO: Time timelion interval picker should be a drop down
-      }
-      <EuiFormRow
-        label={strings.getIntervalLabel()}
-        helpText={strings.getIntervalHelp()}
-        display="rowCompressed"
-      >
-        <EuiFieldText
-          compressed
-          value={getInterval()}
-          onChange={e => setArg('interval', e.target.value)}
-        />
-      </EuiFormRow>
-
-      <EuiSpacer size="m" />
-
-      <EuiCallOut color="warning" title={strings.getTipsHeading()} size="s">
+      <EuiCallOut title={strings.getTipsHeading()} size="s" iconType="iInCircle">
         <ul>
           <li>
             <FormattedMessage
               id="xpack.canvas.uis.dataSources.timelion.tips.time"
-              defaultMessage="{timelion} requires a time range, you should add a time filter element to your page somewhere, or use the code editor to pass in a time filter."
+              defaultMessage="{timelion} requires a time range. Add a time filter element to your page or use the expression editor to pass one in."
               values={{
                 timelion: TIMELION,
               }}
@@ -102,7 +71,7 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
           <li>
             <FormattedMessage
               id="xpack.canvas.uis.dataSources.timelion.tips.functions"
-              defaultMessage="Some {timelion} functions, such as {functionExample}, don't translate to a {canvas} data table. Anything todo with data manipulation should work grand."
+              defaultMessage="Some {timelion} functions, such as {functionExample}, do not translate to a {canvas} data table. However, anything todo with data manipulation should work as expected."
               values={{
                 timelion: TIMELION,
                 canvas: CANVAS,
@@ -112,6 +81,35 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
           </li>
         </ul>
       </EuiCallOut>
+
+      <EuiSpacer size="m" />
+
+      <EuiFormRow
+        label={strings.getQueryLabel()}
+        helpText={strings.getQueryHelp()}
+        labelAppend={<TooltipIcon content={strings.getAbout()} />}
+      >
+        <EuiTextArea
+          className="canvasTextArea__code"
+          value={getQuery()}
+          onChange={e => setArg(argName, e.target.value)}
+          rows={15}
+        />
+      </EuiFormRow>
+      {
+        // TODO: Time timelion interval picker should be a drop down
+      }
+      <EuiFormRow
+        label={strings.getIntervalLabel()}
+        helpText={strings.getIntervalHelp()}
+        display="columnCompressed"
+      >
+        <EuiFieldText
+          compressed
+          value={getInterval()}
+          onChange={e => setArg('interval', e.target.value)}
+        />
+      </EuiFormRow>
     </div>
   );
 };

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
@@ -16,20 +16,20 @@ export const metric = () => ({
   modelArgs: [['_', { label: strings.getNumberDisplayName() }]],
   requiresContext: false,
   args: [
+    {
+      name: 'metricFormat',
+      displayName: strings.getMetricFormatDisplayName(),
+      help: strings.getMetricFormatHelp(),
+      argType: 'numberFormat',
+      default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
+    },
     {
       name: '_',
       displayName: strings.getLabelDisplayName(),
       help: strings.getLabelHelp(),
       argType: 'string',
       default: '""',
     },
-    {
-      name: 'labelFont',
-      displayName: strings.getLabelFontDisplayName(),
-      help: strings.getLabelFontHelp(),
-      argType: 'font',
-      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
-    },
     {
       name: 'metricFont',
       displayName: strings.getMetricFontDisplayName(),
@@ -38,11 +38,11 @@ export const metric = () => ({
       default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
     },
     {
-      name: 'metricFormat',
-      displayName: strings.getMetricFormatDisplayName(),
-      help: strings.getMetricFormatHelp(),
-      argType: 'numberFormat',
-      default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
+      name: 'labelFont',
+      displayName: strings.getLabelFontDisplayName(),
+      help: strings.getLabelFontHelp(),
+      argType: 'font',
+      default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
     },
   ],
 });