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

* 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

Author: ryankeairns

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot

@@ -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}

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx

@@ -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}

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.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>
   );

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js

@@ -130,6 +130,7 @@ class ImageUpload extends React.Component {
           idSelected={urlType}
           onChange={this.changeUrlType}
           isFullWidth
+          className="canvasSidebar__buttonGroup"
         />
       </EuiFormRow>
     );

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.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>

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.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>
   );
 };

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.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),
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.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>
     );

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.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];