Skip to content

Commit

Permalink
[7.x] Advanced settings UI change to centralize save state (#5… (#58373)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbondyra authored Feb 25, 2020
1 parent 328333d commit c3109b5
Show file tree
Hide file tree
Showing 19 changed files with 5,086 additions and 4,589 deletions.
2 changes: 1 addition & 1 deletion src/plugins/advanced_settings/public/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@
* under the License.
*/

@import './management_app/advanced_settings';
@import './management_app/index';
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import './advanced_settings';

@import './components/index';
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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%;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import './form/index';
Loading

0 comments on commit c3109b5

Please sign in to comment.