From 69541676cf1dae7ff5fb05d4f0b6122155eae996 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Thu, 16 Dec 2021 04:18:51 +0100
Subject: [PATCH] Started fixing background issues for condition and
 documentation modals

---
 frontend/src/components/ParsedAction.jsx |  30 ++++--
 frontend/src/views/AngularWorkflow.jsx   | 117 ++++++++++++++---------
 2 files changed, 90 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index e5d6ae55..a35ee256 100644
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -979,9 +979,9 @@ const ParsedAction = (props) => {
 			return helperText
 		}
 
-		console.log("D: ", selectedAction)
-		console.log("DESC: ", selectedAction.description)
-		console.log("DESC2: ", selectedApp.description)
+		//console.log("D: ", selectedAction)
+		//console.log("DESC: ", selectedAction.description)
+		//console.log("DESC2: ", selectedApp.description)
 
     // FIXME: Issue #40 - selectedActionParameters not reset
     if (
@@ -993,13 +993,14 @@ const ParsedAction = (props) => {
         <div style={{ marginTop: hideExtraTypes ? 10 : 30 }}>
 					<Tooltip
 						color="secondary"
-						title={"Click to learn more"}
+						title={"Click to learn more about this action"}
 						placement="top"
 					>
 						<Button 
 							variant="text" 
 							color="secondary" 
-							style={{textTransform: "none",}}
+							style={{justifyContent: "flex-start", textAlign: "left", textTransform: "none", width: "100%",}}
+							fullWidth
 							onClick={() => {
 								setHiddenDescription(!hiddenDescription)
 							}}
@@ -1112,7 +1113,7 @@ const ParsedAction = (props) => {
               data.configuration &&
               hideExtraTypes
             ) {
-              console.log("GENERATED WITH DATA: ", data);
+              //console.log("GENERATED WITH DATA: ", data);
               return null;
             }
 
@@ -1898,6 +1899,7 @@ const ParsedAction = (props) => {
                           height: 24,
                           marginRight: 10,
                         }}
+												color="primary"
                         onClick={() => {
                           setAuthenticationModalOpen(true);
                         }}
@@ -2092,7 +2094,7 @@ const ParsedAction = (props) => {
 
   const expansionModal = (
     <Dialog
-      disableEnforceFocus={true}
+      disableEnforceFocus={false}
       hideBackdrop={true}
       open={expansionModalOpen}
       onClose={() => {
@@ -2775,16 +2777,24 @@ const ParsedAction = (props) => {
 					</Select>
 				: null*/}
 
-        {selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 && hideExtraTypes !== true && hiddenDescription === false ? (
+        {selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 &&  hiddenDescription === false ? (
 						<div
 							style={{
-								marginTop: 10,
+								border: "1px solid rgba(255,255,255,0.6)",
+								borderRadius: theme.palette.borderRadius,
+								marginTop: 15,
 								marginBottom: 10,
 								maxHeight: 60,
 								overflow: "hidden",
+								padding: 15, 
 							}}
 						>
-							{selectedAction.description}
+							<Typography style={{}}>
+								<b>Description</b>
+							</Typography>
+							<Typography style={{}}>
+								{selectedAction.description}
+							</Typography>
 						</div>
 					) : null}
 
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index 2e1d8ade..bc705c30 100644
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -36,6 +36,7 @@ import {
   IconButton,
   Menu,
   Input,
+	Fade,
   FormGroup,
   FormControlLabel,
   Typography,
@@ -5333,6 +5334,10 @@ const AngularWorkflow = (props) => {
   // Starts on current node and climbs UP the tree to the root object.
   // Sends back everything in it's path
   const getParents = (action) => {
+		if (action === undefined || action === null) {
+			return []
+		}
+
     var allkeys = [action.id];
     var handled = [];
     var results = [];
@@ -5865,8 +5870,11 @@ const AngularWorkflow = (props) => {
 
   const conditionsModal = (
     <Dialog
-      modal
+      disableEnforceFocus={true}
+      hideBackdrop={true}
+			disableBackdropClick={true}
       open={conditionsModalOpen}
+      style={{ pointerEvents: "none" }}
       PaperProps={{
         style: {
           backgroundColor: surfaceColor,
@@ -5875,10 +5883,6 @@ const AngularWorkflow = (props) => {
         },
       }}
       onClose={() => {
-        setConditionsModalOpen(false);
-        setSourceValue({});
-        setConditionValue({});
-        setDestinationValue({});
       }}
     >
       <span
@@ -6095,8 +6099,22 @@ const AngularWorkflow = (props) => {
           </div>
         </DialogContent>
         <DialogActions>
+					<Button
+            style={{ borderRadius: "0px" }}
+						variant="text"
+            onClick={() => {
+        			setConditionsModalOpen(false);
+        			setSourceValue({});
+        			setConditionValue({});
+        			setDestinationValue({});
+            }}
+            color="secondary"
+          >
+           	Cancel 
+          </Button>
           <Button
             style={{ borderRadius: "0px" }}
+						variant="contained"
             onClick={() => {
               setSelectedEdge({});
 
@@ -9867,44 +9885,46 @@ const AngularWorkflow = (props) => {
       }
 
       return (
-        <div id="rightside_actions" style={rightsidebarStyle}>
-          <ParsedAction
-            id="rightside_subactions"
-            getAppAuthentication={getAppAuthentication}
-            appAuthentication={appAuthentication}
-            authenticationType={authenticationType}
-            scrollConfig={scrollConfig}
-            setScrollConfig={setScrollConfig}
-            selectedAction={selectedAction}
-            workflow={workflow}
-            setWorkflow={setWorkflow}
-            setSelectedAction={setSelectedAction}
-            setUpdate={setUpdate}
-            selectedApp={selectedApp}
-            workflowExecutions={workflowExecutions}
-            setSelectedResult={setSelectedResult}
-            setSelectedApp={setSelectedApp}
-            setSelectedTrigger={setSelectedTrigger}
-            setSelectedEdge={setSelectedEdge}
-            setCurrentView={setCurrentView}
-            cy={cy}
-            setAuthenticationModalOpen={setAuthenticationModalOpen}
-            setVariablesModalOpen={setVariablesModalOpen}
-            setLastSaved={setLastSaved}
-            setCodeModalOpen={setCodeModalOpen}
-            selectedNameChange={selectedNameChange}
-            rightsidebarStyle={rightsidebarStyle}
-            showEnvironment={showEnvironment}
-            selectedActionEnvironment={selectedActionEnvironment}
-            environments={environments}
-            setNewSelectedAction={setNewSelectedAction}
-            sortByKey={sortByKey}
-            appApiViewStyle={appApiViewStyle}
-            globalUrl={globalUrl}
-            setSelectedActionEnvironment={setSelectedActionEnvironment}
-            requiresAuthentication={requiresAuthentication}
-          />
-        </div>
+				<Fade in={true} style={{ transitionDelay: `$0ms` }}>
+					<div id="rightside_actions" style={rightsidebarStyle}>
+						<ParsedAction
+							id="rightside_subactions"
+							getAppAuthentication={getAppAuthentication}
+							appAuthentication={appAuthentication}
+							authenticationType={authenticationType}
+							scrollConfig={scrollConfig}
+							setScrollConfig={setScrollConfig}
+							selectedAction={selectedAction}
+							workflow={workflow}
+							setWorkflow={setWorkflow}
+							setSelectedAction={setSelectedAction}
+							setUpdate={setUpdate}
+							selectedApp={selectedApp}
+							workflowExecutions={workflowExecutions}
+							setSelectedResult={setSelectedResult}
+							setSelectedApp={setSelectedApp}
+							setSelectedTrigger={setSelectedTrigger}
+							setSelectedEdge={setSelectedEdge}
+							setCurrentView={setCurrentView}
+							cy={cy}
+							setAuthenticationModalOpen={setAuthenticationModalOpen}
+							setVariablesModalOpen={setVariablesModalOpen}
+							setLastSaved={setLastSaved}
+							setCodeModalOpen={setCodeModalOpen}
+							selectedNameChange={selectedNameChange}
+							rightsidebarStyle={rightsidebarStyle}
+							showEnvironment={showEnvironment}
+							selectedActionEnvironment={selectedActionEnvironment}
+							environments={environments}
+							setNewSelectedAction={setNewSelectedAction}
+							sortByKey={sortByKey}
+							appApiViewStyle={appApiViewStyle}
+							globalUrl={globalUrl}
+							setSelectedActionEnvironment={setSelectedActionEnvironment}
+							requiresAuthentication={requiresAuthentication}
+						/>
+					</div>
+				</Fade>
       );
     } else if (Object.getOwnPropertyNames(selectedComment).length > 0) {
       return (
@@ -11572,7 +11592,6 @@ const AngularWorkflow = (props) => {
 
   const executionVariableModal = executionVariablesModalOpen ? (
     <Dialog
-      modal
       open={executionVariablesModalOpen}
       onClose={() => {
         setNewVariableName("");
@@ -12173,14 +12192,18 @@ const AngularWorkflow = (props) => {
   // This whole part is redundant. Made it part of Arguments instead.
   const authenticationModal = authenticationModalOpen ? (
     <Dialog
+      disableEnforceFocus={true}
+      hideBackdrop={true}
       open={authenticationModalOpen}
+			style={{pointerEvents: "none",}}
       onClose={() => {
-        if (configureWorkflowModalOpen) {
-          setSelectedAction({});
-        }
+        //if (configureWorkflowModalOpen) {
+        //  setSelectedAction({});
+        //}
       }}
       PaperProps={{
         style: {
+					pointerEvents: "none",
           backgroundColor: surfaceColor,
           color: "white",
           minWidth: 1100,