Advanced settings UI change to centralize save state (#53693)

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';