feat: image functionality added

elastic · Jan 6, 2020 · 87a563f · 87a563f
1 parent a4548e1
commit 87a563f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 64 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
@@ -65,9 +65,18 @@ export class Field extends PureComponent {
     super();
     this.state = {
       loading: false,
-      changeImage: false,
     };
-    this.changeImageForm = null;
+    this.changeImageForm = React.createRef();
+  }
+
+  handleChange = unsavedChanges => {
+    return this.props.handleChange(this.props.setting.name, unsavedChanges, this.props.category);
+  };
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.setting.type === 'image' && prevProps.value && !this.props.value) {
+      this.cancelChangeImage();
+    }
   }
 
   getDisplayedDefaultValue(type, defVal, optionLabels = {}) {
@@ -116,20 +125,16 @@ export class Field extends PureComponent {
         newUnsavedValue = value;
     }
 
-    this.props.handleChange(
-      this.props.setting.name,
-      {
-        value: newUnsavedValue,
-        error,
-        isInvalid,
-      },
-      this.props.category
-    );
+    this.handleChange({
+      value: newUnsavedValue,
+      error,
+      isInvalid,
+    });
   };
 
   onFieldChange = e => {
     const targetValue = e.target.value;
-    const { type, validation, name } = this.props.setting;
+    const { type, validation } = this.props.setting;
     const { value } = this.props;
 
     let newUnsavedValue = undefined;
@@ -155,15 +160,11 @@ export class Field extends PureComponent {
       }
     }
 
-    this.props.handleChange(
-      name,
-      {
-        value: newUnsavedValue,
-        isInvalid,
-        error,
-      },
-      this.props.category
-    );
+    this.handleChange({
+      value: newUnsavedValue,
+      isInvalid,
+      error,
+    });
   };
 
   onFieldKeyDown = async ({ keyCode, target }) => {
@@ -172,19 +173,25 @@ export class Field extends PureComponent {
       target.blur();
     }
     if (keyCode === keyCodes.ESCAPE) {
-      this.clearChange(this.props.name);
+      this.cancelChange();
     }
   };
 
   onFieldEscape = ({ keyCode }) => {
     if (keyCode === keyCodes.ESCAPE) {
-      this.clearChange(this.props.name);
+      this.cancelChange();
     }
   };
 
+  cancelChange = () => {
+    this.props.clearChange(this.props.setting.name);
+  };
+
   onImageChange = async files => {
     if (!files.length) {
-      this.props.clearChange(this.props.name);
+      this.handleChange({
+        changeImage: false,
+      });
       return;
     }
 
@@ -193,27 +200,20 @@ export class Field extends PureComponent {
     try {
       const base64Image = await this.getImageAsBase64(file);
       const isInvalid = !!(maxSize && maxSize.length && base64Image.length > maxSize.length);
-      this.setState({
+
+      this.handleChange({
         changeImage: true,
+        value: base64Image,
+        isInvalid,
+        error: isInvalid
+          ? i18n.translate('kbn.management.settings.field.imageTooLargeErrorMessage', {
+              defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}',
+              values: {
+                maxSizeDescription: maxSize.description,
+              },
+            })
+          : null,
       });
-
-      this.props.handleChange(
-        this.props.setting.name,
-        {
-          changeImage: true,
-          value: base64Image,
-          isInvalid,
-          error: isInvalid
-            ? i18n.translate('kbn.management.settings.field.imageTooLargeErrorMessage', {
-                defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}',
-                values: {
-                  maxSizeDescription: maxSize.description,
-                },
-              })
-            : null,
-        },
-        this.props.category
-      );
     } catch (err) {
       showImageCouldNotBeSaved();
       this.cancelChangeImage();
@@ -239,26 +239,19 @@ export class Field extends PureComponent {
   }
 
   changeImage = () => {
-    this.setState({
+    this.handleChange({
+      value: null,
       changeImage: true,
     });
   };
 
   cancelChangeImage = () => {
-    if (this.changeImageForm) {
-      this.changeImageForm.fileInput.value = null;
-      this.changeImageForm.handleChange({});
+    if (this.changeImageForm.current) {
+      this.changeImageForm.current.fileInput.value = null;
+      this.changeImageForm.current.handleChange({});
     }
 
-    this.setState({
-      changeImage: false,
-    });
-
-    this.props.clearChange(this.props.setting.name);
-  };
-
-  cancelEdit = () => {
-    this.props.clearChange(this.props.setting.name);
+    this.cancelChange();
   };
 
   resetField = async () => {
@@ -279,7 +272,8 @@ export class Field extends PureComponent {
 
   renderField(setting) {
     const { enableSaving, value: unsavedValue } = this.props;
-    const { loading, changeImage } = this.state;
+    const changeImage = this.props.unsavedChanges?.changeImage;
+    const { loading } = this.state;
     const { name, value, type, options, optionLabels = {}, isOverridden, ariaName } = setting;
 
     switch (type) {
@@ -339,9 +333,7 @@ export class Field extends PureComponent {
               disabled={loading || isOverridden || !enableSaving}
               onChange={this.onImageChange}
               accept=".jpg,.jpeg,.png"
-              ref={input => {
-                this.changeImageForm = input;
-              }}
+              ref={this.changeImageForm}
               onKeyDown={this.onFieldEscape}
               data-test-subj={`advancedSetting-editField-${name}`}
             />
@@ -543,7 +535,7 @@ export class Field extends PureComponent {
   }
 
   renderChangeImageLink(setting) {
-    const { changeImage } = this.state;
+    const changeImage = this.props.unsavedChanges?.changeImage;
     const { type, value, ariaName, name } = setting;
     if (type !== 'image' || !value || changeImage) {
       return;

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
@@ -190,9 +190,6 @@ export class Form extends PureComponent {
       if (requiresReload) {
         showPageReloadToast();
       }
-      // if (this.state.changeImage) {
-      //   this.cancelChangeImage();
-      // }
     } catch (e) {
       showUnableToSave();
     }