Merge branch 'master' into 46926_1

packages/kbn-config-schema/src/types/array_type.test.ts

@@ -85,14 +85,29 @@ test('fails if mixed types of content in array', () => {
   );
 });
 
-test('returns empty array if input is empty but type has default value', () => {
-  const type = schema.arrayOf(schema.string({ defaultValue: 'test' }));
+test('fails if sparse content in array', () => {
+  const type = schema.arrayOf(schema.string());
   expect(type.validate([])).toEqual([]);
+  expect(() => type.validate([undefined])).toThrowErrorMatchingInlineSnapshot(
+    `"[0]: sparse array are not allowed"`
+  );
 });
 
-test('returns empty array if input is empty even if type is required', () => {
-  const type = schema.arrayOf(schema.string());
+test('fails if sparse content in array if optional', () => {
+  const type = schema.arrayOf(schema.maybe(schema.string()));
+  expect(type.validate([])).toEqual([]);
+  expect(() => type.validate([undefined])).toThrowErrorMatchingInlineSnapshot(
+    `"[0]: sparse array are not allowed"`
+  );
+});
+
+test('fails if sparse content in array if nullable', () => {
+  const type = schema.arrayOf(schema.nullable(schema.string()));
   expect(type.validate([])).toEqual([]);
+  expect(type.validate([null])).toEqual([null]);
+  expect(() => type.validate([undefined])).toThrowErrorMatchingInlineSnapshot(
+    `"[0]: sparse array are not allowed"`
+  );
 });
 
 test('fails for null values if optional', () => {
@@ -102,9 +117,19 @@ test('fails for null values if optional', () => {
   );
 });
 
+test('returns empty array if input is empty but type has default value', () => {
+  const type = schema.arrayOf(schema.string({ defaultValue: 'test' }));
+  expect(type.validate([])).toEqual([]);
+});
+
+test('returns empty array if input is empty even if type is required', () => {
+  const type = schema.arrayOf(schema.string());
+  expect(type.validate([])).toEqual([]);
+});
+
 test('handles default values for undefined values', () => {
-  const type = schema.arrayOf(schema.string({ defaultValue: 'foo' }));
-  expect(type.validate([undefined])).toEqual(['foo']);
+  const type = schema.arrayOf(schema.string(), { defaultValue: ['foo'] });
+  expect(type.validate(undefined)).toEqual(['foo']);
 });
 
 test('array within array', () => {

packages/kbn-config-schema/src/types/array_type.ts

@@ -31,7 +31,7 @@ export class ArrayType<T> extends Type<T[]> {
     let schema = internals
       .array()
       .items(type.getSchema().optional())
-      .sparse();
+      .sparse(false);
 
     if (options.minSize !== undefined) {
       schema = schema.min(options.minSize);
@@ -49,6 +49,8 @@ export class ArrayType<T> extends Type<T[]> {
       case 'any.required':
       case 'array.base':
         return `expected value of type [array] but got [${typeDetect(value)}]`;
+      case 'array.sparse':
+        return `sparse array are not allowed`;
       case 'array.parse':
         return `could not parse array value from [${value}]`;
       case 'array.min':

src/plugins/advanced_settings/public/_index.scss

@@ -17,4 +17,4 @@
  * under the License.
  */
 
- @import './management_app/advanced_settings';
+@import './management_app/index';

src/plugins/advanced_settings/public/management_app/_index.scss

@@ -0,0 +1,3 @@
+@import './advanced_settings';
+
+@import './components/index';

src/plugins/advanced_settings/public/management_app/advanced_settings.scss

@@ -17,21 +17,27 @@
  * under the License.
  */
 
-.mgtAdvancedSettings__field {
+ .mgtAdvancedSettings__field {
   + * {
     margin-top: $euiSize;
   }
 
-  &Wrapper {
-    width: 640px;
 
-    @include internetExplorerOnly() {
-      min-height: 1px;
-    }
+  padding-left: $euiSizeS;
+  margin-left: -$euiSizeS;
+  &--unsaved {
+    // Simulates a left side border without shifting content
+    box-shadow: -$euiSizeXS 0px $euiColorSecondary;
   }
-
-  &Actions {
-    padding-top: $euiSizeM;
+  &--invalid {
+    // Simulates a left side border without shifting content
+    box-shadow: -$euiSizeXS 0px $euiColorDanger;
+  }
+  @include internetExplorerOnly() {
+    min-height: 1px;
+  }
+  &Row {
+    padding-left: $euiSizeS;
   }
 
   @include internetExplorerOnly {
@@ -40,3 +46,19 @@
     }
   }
 }
+
+.mgtAdvancedSettingsForm__unsavedCount {
+  @include euiBreakpoint('xs', 's') {
+    display: none;
+  }
+}
+
+.mgtAdvancedSettingsForm__unsavedCountMessage{
+  // Simulates a left side border without shifting content
+  box-shadow: -$euiSizeXS 0px $euiColorSecondary;
+  padding-left: $euiSizeS;
+}
+
+.mgtAdvancedSettingsForm__button {
+  width: 100%;
+}

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -38,7 +38,7 @@ import { ComponentRegistry } from '../';
 
 import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
-import { FieldSetting, IQuery } from './types';
+import { FieldSetting, IQuery, SettingsChanges } from './types';
 
 interface AdvancedSettingsProps {
   enableSaving: boolean;
@@ -177,6 +177,13 @@ export class AdvancedSettingsComponent extends Component<
     });
   };
 
+  saveConfig = async (changes: SettingsChanges) => {
+    const arr = Object.entries(changes).map(([key, value]) =>
+      this.props.uiSettings.set(key, value)
+    );
+    return Promise.all(arr);
+  };
+
   render() {
     const { filteredSettings, query, footerQueryMatched } = this.state;
     const componentRegistry = this.props.componentRegistry;
@@ -205,18 +212,19 @@ export class AdvancedSettingsComponent extends Component<
         <AdvancedSettingsVoiceAnnouncement queryText={query.text} settings={filteredSettings} />
 
         <Form
-          settings={filteredSettings}
+          settings={this.groupedSettings}
+          visibleSettings={filteredSettings}
           categories={this.categories}
           categoryCounts={this.categoryCounts}
           clearQuery={this.clearQuery}
-          save={this.props.uiSettings.set.bind(this.props.uiSettings)}
-          clear={this.props.uiSettings.remove.bind(this.props.uiSettings)}
+          save={this.saveConfig}
           showNoResultsMessage={!footerQueryMatched}
           enableSaving={this.props.enableSaving}
           dockLinks={this.props.dockLinks}
           toasts={this.props.toasts}
         />
         <PageFooter
+          toasts={this.props.toasts}
           query={query}
           onQueryMatchChange={this.onFooterQueryMatchChange}
           enableSaving={this.props.enableSaving}

src/plugins/advanced_settings/public/management_app/components/_index.scss

@@ -0,0 +1 @@
+@import './form/index';