From 08546ed19b1a2d431310ba8793b1a2bb18eb8a4d Mon Sep 17 00:00:00 2001
From: papadopan <antonios.papadopan@gmail.com>
Date: Thu, 19 Nov 2020 17:31:46 +0100
Subject: [PATCH] ui: form builder delete modal propery refactor

* closes #1950

Signed-off-by: papadopan <antonios.papadopan@gmail.com>
---
 .../PropertyEditor/DeletePropertyModal.js     | 35 +++++++++++
 .../PropertyEditor/customizeField.js          | 62 ++++++-------------
 2 files changed, 53 insertions(+), 44 deletions(-)
 create mode 100644 ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/DeletePropertyModal.js

diff --git a/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/DeletePropertyModal.js b/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/DeletePropertyModal.js
new file mode 100644
index 0000000000..99901941d3
--- /dev/null
+++ b/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/DeletePropertyModal.js
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Modal from "../../../../partials/Modal";
+import Button from "../../../../partials/Button";
+import Box from "grommet/components/Box";
+import Paragraph from "grommet/components/Paragraph";
+
+const DeletePropertyModal = ({ show, text, onClose, onDelete }) => {
+  return (
+    show && (
+      <Modal title="Delete Item" separator onClose={onClose}>
+        <Box pad={{ vertical: "medium", horizontal: "small" }}>
+          <Box align="center" justify="center" colorIndex="light-1">
+            <Paragraph margin="none">Are you sure you want to delete</Paragraph>
+            <Paragraph margin="none">{text}</Paragraph>
+          </Box>
+
+          <Box margin={{ top: "medium" }} direction="row" justify="between">
+            <Button text="Cancel" secondary onClick={onClose} />
+            <Button text="Delete" critical onClick={onDelete} />
+          </Box>
+        </Box>
+      </Modal>
+    )
+  );
+};
+
+DeletePropertyModal.propTypes = {
+  show: PropTypes.bool,
+  text: PropTypes.string,
+  onClose: PropTypes.func,
+  onDelete: PropTypes.func
+};
+
+export default DeletePropertyModal;
diff --git a/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js b/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js
index 0f9bcd1c69..69a61e8d8f 100644
--- a/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js
+++ b/ui/cap-react/src/components/cms/components/SchemaWizard/PropertyEditor/customizeField.js
@@ -1,12 +1,10 @@
 import React from "react";
 
 import Box from "grommet/components/Box";
-import Paragraph from "grommet/components/Paragraph";
 
 import Form from "../../../../drafts/form/GrommetForm";
 import { PropTypes } from "prop-types";
 import Button from "../../../../partials/Button";
-import Modal from "../../../../partials/Modal";
 
 import Image1 from "./svg/AccordionField";
 import Image2 from "./svg/TabObjectField";
@@ -19,6 +17,8 @@ import Image7 from "./svg/SidebarTwoColLayout";
 import { schemaSchema } from "../../utils/schemas";
 import { Label } from "grommet";
 
+import DeleteModal from "./DeletePropertyModal";
+
 const GRID_COLUMNS_OPTIONS = [
   "1/1",
   "1/2",
@@ -147,46 +147,20 @@ class CustomizeField extends React.Component {
   render() {
     return (
       <Box flex={false}>
-        {this.state.showDeleteLayer && (
-          <Modal
-            title="Delete Item"
-            separator
-            onClose={() => this.setState({ showDeleteLayer: false })}
-          >
-            <Box pad={{ vertical: "medium", horizontal: "small" }}>
-              <Box align="center" justify="center" colorIndex="light-1">
-                <Paragraph margin="none">
-                  Are you sure you want to delete
-                </Paragraph>
-                <Paragraph margin="none">
-                  {this.props.path
-                    .toJS()
-                    .path.filter(
-                      item => item != "properties" && item != "items"
-                    )
-                    .map(item => item)
-                    .join(" > ")}
-                </Paragraph>
-              </Box>
-
-              <Box margin={{ top: "medium" }} direction="row" justify="between">
-                <Button
-                  text="Cancel"
-                  secondary
-                  onClick={() => this.setState({ showDeleteLayer: false })}
-                />
-                <Button
-                  text="Delete"
-                  critical
-                  onClick={() => {
-                    this.props.deleteByPath(this.props.path.toJS());
-                    this.setState({ showDeleteLayer: false });
-                  }}
-                />
-              </Box>
-            </Box>
-          </Modal>
-        )}
+        <DeleteModal
+          show={this.state.showDeleteLayer}
+          text={this.props.path
+            .toJS()
+            .path.filter(item => item != "properties" && item != "items")
+            .map(item => item)
+            .join(" > ")}
+          onClose={() => this.setState({ showDeleteLayer: false })}
+          onDelete={() => {
+            this.props.deleteByPath(this.props.path.toJS());
+            this.setState({ showDeleteLayer: false });
+          }}
+        />
+
         <Box flex={true} margin={{ bottom: "small" }}>
           <Box
             colorIndex="accent-2"
@@ -384,14 +358,14 @@ class CustomizeField extends React.Component {
                         ? "white"
                         : null,
                     padding:
-                    this.props.uiSchema &&
+                      this.props.uiSchema &&
                       this.props.uiSchema.toJS()["ui:options"] &&
                       this.props.uiSchema.toJS()["ui:options"].align &&
                       align === this.props.uiSchema.toJS()["ui:options"].align
                         ? "0 2px"
                         : null,
                     borderRadius:
-                    this.props.uiSchema &&
+                      this.props.uiSchema &&
                       this.props.uiSchema.toJS()["ui:options"] &&
                       this.props.uiSchema.toJS()["ui:options"].align &&
                       align === this.props.uiSchema.toJS()["ui:options"].align