Design tweaks for esdocs datasource PR

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js

@@ -21,6 +21,6 @@ export const demodata = () => ({
   name: 'demodata',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'visualizeApp',
+  image: 'training',
   template: templateFromReactComponent(DemodataDatasource),
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js

@@ -95,6 +95,6 @@ export const essql = () => ({
   name: 'essql',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'sqlApp',
+  image: 'database',
   template: templateFromReactComponent(EssqlDatasource),
 });

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js

@@ -124,6 +124,6 @@ export const timelion = () => ({
   name: 'timelion',
   displayName: TIMELION,
   help: strings.getHelp(),
-  image: 'timelionApp',
+  image: 'visTimelion',
   template: templateFromReactComponent(TimelionDatasource),
 });

x-pack/legacy/plugins/canvas/i18n/expression_types.ts

@@ -185,15 +185,15 @@ export const ExpressionDataSourceStrings = {
       }),
     getSortFieldTitle: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldTitle', {
-        defaultMessage: 'Sort Field',
+        defaultMessage: 'Sort field',
       }),
     getSortFieldLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldLabel', {
         defaultMessage: 'Document sort field',
       }),
     getSortOrderTitle: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderTitle', {
-        defaultMessage: 'Sort Order',
+        defaultMessage: 'Sort order',
       }),
     getSortOrderLabel: () =>
       i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderLabel', {

x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss

@@ -6,8 +6,13 @@
   padding: 0 $euiSizeS;
 }
 
-.canvasDataSource__section {
-  padding: $euiSizeM;
+.canvasDataSource__section,
+.canvasDataSource__list {
+  padding: $euiSizeM $euiSizeM 0;
+}
+
+.canvasDataSource__sectionFooter {
+  padding: 0 $euiSizeM;
 }
 
 .canvasDataSource__triggerButton {
@@ -19,10 +24,6 @@
   margin-right: $euiSizeS;
 }
 
-.canvasDataSource__list {
-  padding: $euiSizeM;
-}
-
 .canvasDataSource__card .euiCard__content {
   padding-top: 0 !important; // sass-lint:disable-line no-important
 }

x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js

@@ -164,20 +164,20 @@ export class DatasourceComponent extends PureComponent {
           ) : (
             datasourceRender
           )}
-          <EuiHorizontalRule margin="m" />
-          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
-                {strings.getPreviewButtonLabel()}
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
-                {strings.getSaveButtonLabel()}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
         </div>
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup justifyContent="flexEnd" className="canvasDataSource__sectionFooter">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
+              {strings.getPreviewButtonLabel()}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
+              {strings.getSaveButtonLabel()}
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
         {datasourcePreview}
       </Fragment>

x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js

@@ -101,28 +101,22 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
         />
       </EuiFormRow>
 
+      <EuiSpacer size="s" />
       <EuiAccordion
         id="accordionAdvancedSettings"
-        buttonContent="Advanced Settings"
-        arrowDisplay="right"
+        buttonContent="Advanced settings"
+        className="canvasArg__accordion"
       >
-        <EuiFormRow
-          label={strings.getSortFieldTitle()}
-          helpText={strings.getSortFieldLabel()}
-          display="columnCompressed"
-        >
+        <EuiSpacer size="s" />
+        <EuiFormRow label={strings.getSortFieldTitle()} display="columnCompressed">
           <ESFieldSelect
             index={index}
             value={sortField}
             onChange={field => setArg('sort', [field, sortOrder].join(', '))}
           />
         </EuiFormRow>
 
-        <EuiFormRow
-          label={strings.getSortOrderTitle()}
-          helpText={strings.getSortOrderLabel()}
-          display="columnCompressed"
-        >
+        <EuiFormRow label={strings.getSortOrderTitle()} display="columnCompressed">
           <EuiSelect
             value={sortOrder.toLowerCase()}
             onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
@@ -163,6 +157,6 @@ export const esdocs = () => ({
   name: 'esdocs',
   displayName: strings.getDisplayName(),
   help: strings.getHelp(),
-  image: 'filebeatApp',
+  image: 'documents',
   template: templateFromReactComponent(EsdocsDatasource),
 });