Merge pull request #1653 from glific/feature/flow-dialog-update

Changes required in dialogboxes in floweditor
glific · Sep 16, 2021 · 975b0e7 · 975b0e7
2 parents 0c36578 + a858d2e
commit 975b0e7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 19 deletions.
diff --git a/src/components/UI/DialogBox/DialogBox.tsx b/src/components/UI/DialogBox/DialogBox.tsx
@@ -13,6 +13,7 @@ export interface DialogProps {
   title: string;
   handleOk?: Function;
   handleCancel?: Function;
+  handleMiddle?: Function;
   children?: ReactNode;
   buttonOk?: string;
   buttonCancel?: string;
@@ -26,14 +27,18 @@ export interface DialogProps {
   contentText?: string;
   disableOk?: boolean;
   alwaysOntop?: boolean;
+  buttonMiddle?: string | null;
+  additionalTitleStyles?: string | null;
 }
 
 export const DialogBox: React.SFC<DialogProps> = ({
   open = true,
   title,
   handleOk = () => {},
   handleCancel = () => {},
+  handleMiddle = () => {},
   children,
+  additionalTitleStyles,
   buttonOk = 'Confirm',
   buttonCancel = 'Cancel',
   colorOk = 'primary',
@@ -46,21 +51,14 @@ export const DialogBox: React.SFC<DialogProps> = ({
   contentText,
   disableOk = false,
   alwaysOntop = false,
+  buttonMiddle,
 }) => {
-  const handleCancelButton = () => {
-    handleCancel();
-  };
-
-  const handleOKButton = () => {
-    handleOk();
-  };
-
   let cancelButtonDisplay = null;
   if (!skipCancel) {
     cancelButtonDisplay = (
       <Button
         variant="contained"
-        onClick={handleCancelButton}
+        onClick={() => handleCancel()}
         color={colorCancel}
         data-testid="cancel-button"
       >
@@ -74,16 +72,30 @@ export const DialogBox: React.SFC<DialogProps> = ({
     titleStyle = styles.DialogTitleLeft;
   }
 
+  if (additionalTitleStyles) {
+    titleStyle = [titleStyle, additionalTitleStyles].join(' ');
+  }
+
   let contentStyle = styles.DialogContentLeft;
   if (contentAlign === 'center') {
     contentStyle = styles.DialogContentCenter;
   }
 
+  let middleButtonDisplay;
+
+  if (buttonMiddle) {
+    middleButtonDisplay = (
+      <Button onClick={() => handleMiddle()} color="primary" variant="outlined">
+        {buttonMiddle}
+      </Button>
+    );
+  }
+
   let okButtonDisplay = null;
   if (!skipOk) {
     okButtonDisplay = (
       <Button
-        onClick={handleOKButton}
+        onClick={() => handleOk()}
         disabled={disableOk}
         color={colorOk}
         variant="contained"
@@ -107,7 +119,7 @@ export const DialogBox: React.SFC<DialogProps> = ({
         scrollPaper: styles.ScrollPaper,
         root: alwaysOntop ? styles.DialogboxRoot : '',
       }}
-      onClose={handleCancelButton}
+      onClose={() => handleCancel()}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
     >
@@ -122,6 +134,7 @@ export const DialogBox: React.SFC<DialogProps> = ({
       </DialogContent>
       <DialogActions className={dialogActionStyle}>
         {okButtonDisplay}
+        {middleButtonDisplay}
         {cancelButtonDisplay}
       </DialogActions>
     </Dialog>

diff --git a/src/components/floweditor/FlowEditor.module.css b/src/components/floweditor/FlowEditor.module.css
@@ -53,6 +53,7 @@
 .DialogDescription {
   text-align: center;
   margin: 0;
+  margin-bottom: 16px;
   font-size: 14px;
   font-weight: 400;
   color: #073f24;
@@ -103,3 +104,19 @@
   border-radius: 50%;
   border: 2px solid #073f24;
 }
+
+.DialogContent {
+  max-width: 331px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: 12px;
+  color: #073f24;
+}
+
+.DialogTitle > h2 {
+  font-size: 24px;
+}
+
+.PublishDialogTitle {
+  max-width: none !important;
+}
diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx
@@ -160,6 +160,7 @@ export const FlowEditor = (props: FlowEditorProps) => {
 
   const config = setConfig(uuid);
   const [published, setPublished] = useState(false);
+  const [stayOnPublish, setStayOnPublish] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [lastLocation, setLastLocation] = useState<Location | null>(null);
   const [confirmedNavigation, setConfirmedNavigation] = useState(false);
@@ -243,12 +244,20 @@ export const FlowEditor = (props: FlowEditorProps) => {
   if (modalVisible) {
     modal = (
       <DialogBox
-        title="Do you want to navigate away without saving your changes?"
+        title="Unsaved changes!"
         handleOk={handleConfirmNavigationClick}
         handleCancel={closeModal}
         colorOk="secondary"
+        buttonOk="Ignore & leave"
+        buttonCancel="Stay & recheck"
         alignButtons="center"
-      />
+        contentAlign="center"
+        additionalTitleStyles={styles.DialogTitle}
+      >
+        <div className={styles.DialogContent}>
+          Your changes will not be saved if you navigate away. Please save as draft or publish.
+        </div>
+      </DialogBox>
     );
   }
 
@@ -352,12 +361,22 @@ export const FlowEditor = (props: FlowEditorProps) => {
   if (publishDialog) {
     dialog = (
       <DialogBox
-        title="Are you ready to publish the flow?"
-        buttonOk="Publish"
-        handleOk={() => handlePublishFlow()}
+        title="Ready to publish?"
+        buttonOk="Publish & Stay"
+        titleAlign="center"
+        buttonMiddle="Publish & go back"
+        handleOk={() => {
+          setStayOnPublish(true);
+          handlePublishFlow();
+        }}
         handleCancel={() => handleCancelFlow()}
+        handleMiddle={() => {
+          setStayOnPublish(false);
+          handlePublishFlow();
+        }}
         alignButtons="center"
         buttonCancel="Cancel"
+        additionalTitleStyles={styles.PublishDialogTitle}
       >
         <p className={styles.DialogDescription}>New changes will be activated for the users</p>
       </DialogBox>
@@ -385,7 +404,11 @@ export const FlowEditor = (props: FlowEditorProps) => {
 
   if (published && !IsError) {
     setNotification(client, 'The flow has been published');
-    return <Redirect to="/flow" />;
+    if (!stayOnPublish) {
+      return <Redirect to="/flow" />;
+    }
+    setPublishDialog(false);
+    setPublished(false);
   }
 
   const resetMessage = () => {
@@ -444,9 +467,7 @@ export const FlowEditor = (props: FlowEditorProps) => {
           data-testid="saveDraftButton"
           className={simulatorId === 0 ? styles.Draft : styles.SimulatorDraft}
           onClick={() => {
-            setConfirmedNavigation(true);
             setNotification(client, 'The flow has been saved as draft');
-            history.push('/flow');
           }}
         >
           Save as draft