feat: add the buttonBar

elastic · Dec 30, 2019 · 122b838 · 122b838
1 parent 54b54fc
commit 122b838
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 9 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js
@@ -264,8 +264,6 @@ export class Field extends PureComponent {
     this.props.clearChange(this.props.setting.name);
   };
 
-  constructS;
-
   saveEdit = () => {
     const { name, defVal, type, requiresPageReload } = this.props.setting;
     const { value, unsavedChanges } = this.props;

diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/form/form.js
@@ -19,6 +19,8 @@
 
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { i18n } from '@kbn/i18n';
 
 import {
   EuiFlexGroup,
@@ -28,6 +30,9 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -45,8 +50,8 @@ export class Form extends PureComponent {
     enableSaving: PropTypes.bool.isRequired,
   };
 
-  constructor(props) {
-    super(props);
+  constructor() {
+    super();
     this.state = {
       unsavedChanges: {},
     };
@@ -201,6 +206,7 @@ export class Form extends PureComponent {
 
   render() {
     const { settings, categories, categoryCounts, clearQuery } = this.props;
+    const { unsavedChanges } = this.state;
     const currentCategories = [];
 
     categories.forEach(category => {
@@ -211,11 +217,49 @@ export class Form extends PureComponent {
 
     return (
       <>
-        {currentCategories.length
-          ? currentCategories.map(category => {
-              return this.renderCategory(category, settings[category], categoryCounts[category]); // fix this
-            })
-          : this.maybeRenderNoSettings(clearQuery)}
+        <div>
+          {currentCategories.length
+            ? currentCategories.map(category => {
+                return this.renderCategory(category, settings[category], categoryCounts[category]); // fix this
+              })
+            : this.maybeRenderNoSettings(clearQuery)}
+        </div>
+        {!isEmpty(unsavedChanges) && (
+          <EuiBottomBar>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  color="secondary"
+                  fill
+                  size="s"
+                  iconType="check"
+                  onClick={() => {}}
+                  aria-label={i18n.translate('kbn.management.settings.field.saveButtonAriaLabel', {
+                    defaultMessage: 'Save changes',
+                  })}
+                >
+                  Save changes
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  color="ghost"
+                  size="s"
+                  iconType="cross"
+                  onClick={() => {}}
+                  aria-label={i18n.translate(
+                    'kbn.management.settings.field.cancelButtonAriaLabel',
+                    {
+                      defaultMessage: 'Cancel all changes',
+                    }
+                  )}
+                >
+                  Cancel all changes
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiBottomBar>
+        )}
       </>
     );
   }