Added license popup properly

frontend/src/views/Admin.jsx

@@ -164,6 +164,11 @@ const Admin = (props) => {
   const [selectedOrganization, setSelectedOrganization] = React.useState({});
 
   //console.log("Selected: ", selectedOrganization)
+  const [appAuthenticationGroupModalOpen , setAppAuthenticationGroupModalOpen] = React.useState(false);
+  const [appsForAppAuthGroup, setAppsForAppAuthGroup] = React.useState([]);
+  const [appAuthenticationGroupName, setAppAuthenticationGroupName] = React.useState("");
+  const [appAuthenticationGroupDescription, setAppAuthenticationGroupDescription] = React.useState("");
+  const [appAuthenticationGroups, setAppAuthenticationGroups] = React.useState([]);
   const [organizationFeatures, setOrganizationFeatures] = React.useState({});
   const [loginInfo, setLoginInfo] = React.useState("");
   const [curTab, setCurTab] = React.useState(0);
@@ -426,6 +431,40 @@ const Admin = (props) => {
       });
   };
 
+  const createAppAuthenticationGroup = (name, description, appAuthIds) => {
+    let app_auths = appAuthIds.map((appAuthId) => {
+      return { id: appAuthId };
+    });
+
+    fetch(globalUrl + "/api/v1/apps/authentication/group", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify({
+        label: name,
+        description: description,
+        app_auths: app_auths
+      }),
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          throw new Error("Failed to create app authentication group");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        // getAppAuthenticationGroups();
+        toast("App authentication group created");
+      })
+      .catch((error) => {
+        toast(error.toString());
+      });
+  };
+
   const categories = [
     {
       name: "Ticketing",
@@ -2050,6 +2089,33 @@ If you're interested, please let me know a time that works for you, or set up a
       });
   };
 
+  const getAppAuthenticationGroups = () => {
+    fetch(globalUrl + "/api/v1/apps/authentication/group", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for apps :O!");
+          return;
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        if (responseJson.success === true) {
+          setAppAuthenticationGroups(responseJson.data);
+        }
+      })
+      .catch((error) => {
+        toast(error.toString());
+      });
+  };
+
   const getAppAuthentication = () => {
     fetch(globalUrl + "/api/v1/apps/authentication", {
       method: "GET",
@@ -2238,6 +2304,7 @@ If you're interested, please let me know a time that works for you, or set up a
     } else if (newValue === 2) {
       document.title = "Shuffle - admin - app authentication";
       getAppAuthentication();
+      getAppAuthenticationGroups();
     } else if (newValue === 3) {
       document.title = "Shuffle - admin - Files";
     } else if (newValue === 4) {
@@ -5095,8 +5162,145 @@ If you're interested, please let me know a time that works for you, or set up a
     setAuthenticationFields(newfields);
   };
 
+
+  const handleAppAuthGroupCheckbox = (data) => {
+    let appOrginal = data.app
+    if (appsForAppAuthGroup.includes(appOrginal.id)) {
+      return;
+    }
+
+    setAppsForAppAuthGroup([...appsForAppAuthGroup, data.id]);
+    console.log("Apps for app auth group: ", appsForAppAuthGroup);
+  };
+
   const authenticationView =
     curTab === 2 ? (
+    <>
+      {/* (appAuthenticationGroupModalOpen : { */}
+      {appAuthenticationGroupModalOpen && (
+        <Dialog
+          open={appAuthenticationGroupModalOpen}
+          onClose={() => {
+            setAppAuthenticationGroupModalOpen(false);
+          }}
+          PaperProps={{
+            style: {
+              backgroundColor: theme.palette.surfaceColor,
+              color: "white",
+              minWidth: "1200px",
+              minHeight: "320px",
+            },
+          }}
+        >
+          <DialogTitle>
+            <span style={{ color: "white" }}>App Authentication Groups</span>
+          </DialogTitle>
+
+          <DialogContent>
+            <div>
+              <TextField
+                color="primary"
+                style={{ backgroundColor: theme.palette.inputColor }}
+                autoFocus
+                InputProps={{
+                  style: {
+                    height: "50px",
+                    color: "white",
+                    fontSize: "1em",
+                  },
+                }}
+                required
+                fullWidth={true}
+                placeholder="Name"
+                id="namefield"
+                margin="normal"
+                variant="outlined"
+                onChange={(event) => {
+                  setAppAuthenticationGroupName(event.target.value);
+                }}
+              />
+            </div>
+            <div>
+              <TextField
+                color="primary"
+                style={{ backgroundColor: theme.palette.inputColor }}
+                autoFocus
+                InputProps={{
+                  style: {
+                    height: "50px",
+                    color: "white",
+                    fontSize: "1em",
+                  },
+                }}
+                required
+                fullWidth={true}
+                placeholder="Description"
+                id="descriptionfield"
+                margin="normal"
+                variant="outlined"
+                onChange={(event) => {
+                  setAppAuthenticationGroupDescription(event.target.value);
+                }}
+              />
+            </div>
+
+            <div>
+              {/* Show a check box list of all app authentications to add to the auth group */}
+              <div>
+              {authentication.map((data, index) => (
+                <div key={index}>
+                  <FormControlLabel
+                    control={
+                    <Tooltip
+                      title={data.app.name}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px', marginLeft: '5px' }}>
+                          <img 
+                            src={data.app.large_image ? data.app.large_image : '/images/no_image.png'}
+                            alt=""
+                            style={{ width: '50px', height: '50px', marginRight: '10px' }} 
+                          />
+                          <Checkbox
+                            checked={data.checked}
+                            onChange={(event) => {
+                              handleAppAuthGroupCheckbox(data)
+                            }}
+                            name={data.label}
+                            disabled={data.app.id in appsForAppAuthGroup}
+                          />
+                      </div>
+                    </Tooltip>
+                    }
+                  label={data.label}
+                  />
+                </div>
+              ))}
+            </div>
+
+            </div>
+
+
+            <div>
+              <Button
+                style={{}}
+                variant="contained"
+                color="primary"
+                onClick={() => {
+                  createAppAuthenticationGroup(
+                    appAuthenticationGroupName,
+                    appAuthenticationGroupDescription,
+                    appsForAppAuthGroup
+                  );
+                }}
+              >
+                Create
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+
+
       <div>
         <div style={{ marginTop: 20, marginBottom: 20 }}>
           <h2 style={{ display: "inline" }}>App Authentication</h2>
@@ -5376,6 +5580,134 @@ If you're interested, please let me know a time that works for you, or set up a
               })}
         </List>
       </div>
+
+      {/* <div>
+        <div style={{ marginTop: 20, marginBottom: 20 }}>
+          <h2 style={{ display: "inline" }}>App Authentication Groups</h2>
+          <span style={{ marginLeft: 25 }}>
+            Groups of authentication options for subflows.{" "}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="/docs/organizations#app_authentication_groups"
+              style={{ textDecoration: "none", color: "#f85a3e" }}
+            >
+                Learn more about App Authentication Groups  
+            </a>
+          </span>
+
+          <Divider
+            style={{
+              marginTop: 20,
+              marginBottom: 20,
+              backgroundColor: theme.palette.inputColor,
+            }}
+          />
+          <List>
+            <ListItem>
+              <ListItemText
+                primary="Label"
+                style={{ minWidth: 150, maxWidth: 150 }}
+              />
+              <ListItemText
+                primary="Description"
+                style={{ minWidth: 250, maxWidth: 250 }}
+              />
+              <ListItemText
+                primary="Apps"
+                style={{ minWidth: 250, maxWidth: 250 }}
+              />
+              <ListItemText
+                primary="CreatedAt"
+                style={{ minWidth: 150, maxWidth: 150 }}
+              />
+              <ListItemText 
+                primary="Actions"
+                style={{ minWidth: 150, maxWidth: 150 }}
+              />
+            </ListItem>
+
+            {appAuthenticationGroups.map((data, index) => {
+              var bgColor = "#27292d";
+              if (index % 2 === 0) {
+                bgColor = "#1f2023";
+              }
+              return (
+                <ListItem key={index} style={{ backgroundColor: bgColor }}>
+                  <ListItemText
+                    primary={data.label}
+                    style={{ minWidth: 150, maxWidth: 150 }}
+                  />
+                  <ListItemText
+                    primary={data.description}
+                    style={{ minWidth: 250, maxWidth: 250 }}
+                  />
+                  <ListItemText
+                    primary={
+                      <div style={{ display: 'flex' }}>
+                        {data.app_auths.map((appAuth, index) => (
+                          <Tooltip
+                            title={appAuth.app.name}
+                          >
+                            <img
+                              key={index}
+                              src={appAuth.app.large_image}
+                              alt={appAuth.app.name}
+                              style={{ width: '24px', height: '24px', marginRight: '5px' }}
+                            />
+                          </Tooltip>
+                        ))}
+                      </div>
+                    }
+                    style={{ minWidth: 250, maxWidth: 250 }}
+                  />
+                  <ListItemText
+                    primary={new Date(data.created * 1000).toLocaleDateString('en-GB')}
+                    style={{ minWidth: 150, maxWidth: 150 }}
+                  />
+                  <ListItemText
+                    primary={
+                      <div style={{ display: 'flex' }}>
+                        <IconButton
+                          onClick={() => {
+                          }}
+                          disabled={true}
+                        >
+                          <EditIcon />
+                        </IconButton>
+                        <IconButton
+                          onClick={() => {
+                            // deleteAppAuthenticationGroup(data);
+                          }}
+                          disabled={true}
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      </div>
+                    }
+                    style={{ minWidth: 150, maxWidth: 150 }}
+                  />
+
+                </ListItem>
+              );
+            }
+          )}
+          </List>
+
+          <Button
+            style={{ marginLeft: 10 }}
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setAppAuthenticationGroupModalOpen(true);
+            }}
+          >
+            Add Group
+          </Button>
+        
+        </div>
+      </div> */}
+    </>
     ) : null;
 
   const getLogs = async (ip, userId) => {

frontend/src/views/AngularWorkflow.jsx

@@ -141,6 +141,7 @@ import ParsedAction from "../components/ParsedAction.jsx";
 import PaperComponent from "../components/PaperComponent.jsx"
 import ExtraApps from "../components/ExtraApps.jsx"
 import EditWorkflow from "../components/EditWorkflow.jsx"
+import { act } from "react";
 // import AppStats from "../components/AppStats.jsx";
 const noImage = "/public/no_image.png";
 
@@ -3034,6 +3035,48 @@ const AngularWorkflow = (defaultprops) => {
   	}
   }
 
+  const [usedSubflowApps, setUsedSubflowApps] = React.useState([]);
+
+  const getWorkflowApps = (workflow_id) => {
+    let apps = []
+
+    if (workflow_id === "") {
+      console.log("workflow_id is empty");
+      return {};
+    }
+
+    fetch(`${globalUrl}/api/v1/workflows/${workflow_id}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for workflows :O!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        for (let index in responseJson.actions) {
+          apps.push(responseJson.actions[index]);
+        }
+        
+        console.log("Setting used subflow apps: ", apps)
+        setUsedSubflowApps(apps);
+
+        return apps
+      })
+      .catch((error) => {
+        console.log("Get workflow apps error: ", error);
+      });
+
+    return apps
+  };
+
   const getWorkflow = (workflow_id, sourcenode) => {
     fetch(`${globalUrl}/api/v1/workflows/${workflow_id}`, {
       method: "GET",
@@ -3863,6 +3906,16 @@ const AngularWorkflow = (defaultprops) => {
     
 	//const data = JSON.parse(JSON.stringify(event.target.data()))
     const data = event.target.data()
+  
+  console.log("NODE SELECT: ", data)
+
+  if (data.app_name === "Shuffle Workflow") {
+    console.log("Shuffle Workflow selected")
+    if (data.parameters[0].value !== undefined && data.parameters[0].value !== null && data.parameters[0].value.length > 0) {
+      console.log("Get workflow apps calling")
+      getWorkflowApps(data.parameters[0].value)
+    }
+  }
 
 	if (data.buttonType == "ACTIONSUGGESTION") {
   	  const attachedToId = data.attachedTo
@@ -11374,6 +11427,193 @@ const AngularWorkflow = (defaultprops) => {
 
 		setWorkflow(workflow);
 	}
+  // Function to transform the data
+  const transformAuthData = (authData) => {
+    const transformedData = {};
+
+    let subflowId = workflow.triggers[selectedTriggerIndex].parameters[0].value;
+
+    // get the apps used in "find your workflow"
+    if (subflowId === "" && subflowId === undefined && subflowId === null) {
+      console.log("subflow is empty")
+      return {};
+    }
+
+    let workflowApps = usedSubflowApps;
+
+    if (workflowApps === undefined || workflowApps === null) {
+      console.log("workflow apps is empty");
+      return {};
+    }
+
+    // get the app ids
+    // let appIdsInWorkflow = [...new Set(workflowApps.map(app => app.app_id))];
+    let appIdsInWorkflow = [];
+
+    Object.entries(workflowApps).forEach(([key, value]) => {
+      console.log("VALUE: ", value)
+      appIdsInWorkflow.push(value.app_id);
+    })
+
+    appIdsInWorkflow = [...new Set(appIdsInWorkflow)];
+
+    console.log("appIdsInWorkflow: ", appIdsInWorkflow)
+
+    console.log("authData: ", authData, "workflowApps: ", workflowApps)
+    
+    // loop through the authData and create transformedData which looks like:
+    // appId: [auth1, auth2, ...]
+    authData.forEach((auth) => {
+      const { app } = auth;
+      const appId = app.id;
+
+      // check if the app is used in the workflow
+      if (appIdsInWorkflow.includes(appId)) {
+        if (transformedData[appId] === undefined) {
+          transformedData[appId] = [];
+        }
+
+        transformedData[appId].push(auth);
+      }
+
+    });
+
+    console.log("transformedData: ", transformedData)
+
+    return transformedData;
+    
+  };
+
+  const AppAuthSelector = ({ appAuthData }) => {
+    const [selectedAuth, setSelectedAuth] = useState("");
+    const [transformedAuthData, setTransformedAuthData] = useState({});
+
+    useEffect(() => {
+      setTransformedAuthData(transformAuthData(appAuthData));
+    }, [appAuthData, selectedAuth]);
+
+    const handleShowingValue = (appName) => {
+      let mappingWithName = {}
+      let listWithValues = workflow.triggers[selectedTriggerIndex].parameters[5]?.value.split(";").filter(e => e).map(e => e.split("="))
+      console.log("LIST WITH VALUES: ", listWithValues)
+      for (let i = 0; i < listWithValues.length; i++) {
+        mappingWithName[listWithValues[i][0]] = listWithValues[i][1]
+      }
+
+      if (mappingWithName[appName] !== undefined) {
+        return mappingWithName[appName];
+      }
+      
+      return "no-overrides";
+    }
+
+    const handleSelectChange = (appName, appId, event) => {
+      const authId = event.target.value || "no-override";
+
+      if (authId === "no-override") {
+        // remove the override parameter
+        let oldValue = workflow.triggers[selectedTriggerIndex].parameters[5].value;      
+        // replace from appName= to the next ;
+        let newValue = oldValue.replace(new RegExp(appName + "=[^;]*;"), "");
+   
+        workflow.triggers[selectedTriggerIndex].parameters[5].value = newValue
+        setSelectedAuth("");
+        return
+      }
+
+      const auth = transformedAuthData[appId].find((auth) => auth.id === authId);
+
+      if (auth === undefined) {
+        setSelectedAuth("");
+        return;
+      }
+
+      // // check if the trigger already has an override parameter
+      // for (let i = 0; i < workflow.triggers[selectedTriggerIndex].parameters.length; i++) {
+      //   // if name includes the app id
+      //   if (workflow.triggers[selectedTriggerIndex].parameters[i].name.includes(appId + "_override")) {
+      //     // update the value
+      //     workflow.triggers[selectedTriggerIndex].parameters[i].value = auth.id;
+      //     setSelectedAuth(auth.id);
+      //     return;
+      //   }
+      // }
+    
+    if (workflow.triggers[selectedTriggerIndex].parameters[5] === undefined || workflow.triggers[selectedTriggerIndex].parameters[5] === null) {
+      workflow.triggers[selectedTriggerIndex].parameters[5] = {
+        name: "auth_override",
+        value: "",
+      };
+    }
+      
+     let authGroupValue = workflow.triggers[selectedTriggerIndex].parameters[5].value;
+
+     if (authGroupValue === undefined || authGroupValue === null || authGroupValue === "") {
+        workflow.triggers[selectedTriggerIndex].parameters[5].value = appName + "=" + auth.id + ";";
+     } else {
+        // check if the app is already in the list
+        if (authGroupValue.includes(appName)) {
+          let oldValue = workflow.triggers[selectedTriggerIndex].parameters[5].value;
+          let newValue = oldValue.replace(new RegExp(appName + "=[^;]*;"), appName + "=" + auth.id + ";");
+          workflow.triggers[selectedTriggerIndex].parameters[5].value = newValue;
+        } else {
+          workflow.triggers[selectedTriggerIndex].parameters[5].value += appName + "=" + auth.id + ";";
+        }
+     }
+
+      // workflow.triggers[selectedTriggerIndex].parameters.push({
+      //   name: auth.label + "_" + auth.app.id + "_override",
+      //   value: auth.id,
+      // });
+      setSelectedAuth(auth.id);
+    };
+
+    console.log("TRANSFORMED AUTH DATA: ", transformedAuthData);
+
+    return (
+    <div className="auth-container" style={{ padding: '20px', backgroundColor: '#26292D', borderRadius: '8px' }}>
+      {Object.entries(transformedAuthData).map(([appId, authList]) => (
+        <div key={appId} className="auth-item" style={{ marginBottom: '20px' }}>
+          <label className="auth-label" style={{ display: 'block', marginBottom: '10px', fontWeight: 'bold', color: '#E8E8E8' }}>
+            Select Authentication for {authList[0].app.name}:
+          </label>
+          <select 
+            value={handleShowingValue(authList[0].app.name)}
+            onChange={(e) => handleSelectChange(authList[0].app.name, authList[0].app.id, e)}
+            className="auth-select"
+            style={{
+              width: '100%',
+              padding: '10px',
+              fontSize: '16px',
+              borderRadius: '4px',
+              border: '1px solid #555',
+              backgroundColor: theme.palette.inputColor,
+              color: '#E8E8E8',
+              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+              transition: 'border-color 0.2s, box-shadow 0.2s',
+            }}
+            onFocus={(e) => e.target.style.borderColor = '#007BFF'}
+            onBlur={(e) => e.target.style.borderColor = '#555'}
+          >
+            <option value="no-override">No override</option>
+            {authList.flatMap((auth) => 
+              <option 
+                key={auth.id}
+                value={auth.id}
+                style={{
+                  backgroundColor: theme.palette.inputColor,
+                  fontSize: "1.2em",
+                }}
+              >
+                {auth.label}
+              </option> 
+            )}
+          </select>
+        </div>
+      ))}
+    </div>
+    );
+  };
 
   const SubflowSidebar = () => {
     const [menuPosition, setMenuPosition] = useState(null);
@@ -11860,6 +12100,10 @@ const AngularWorkflow = (defaultprops) => {
           name: "check_result",
           value: "false",
         };
+        workflow.triggers[selectedTriggerIndex].parameters[5] = {
+          name: "auth_override",
+          value: "",
+        };
 
         /*
         // API-key has been replaced by auth key for the execution. 
@@ -11880,8 +12124,6 @@ const AngularWorkflow = (defaultprops) => {
         */
       }
 
-
-
       const handleSubflowStartnodeSelection = (e) => {
         setSubworkflowStartnode(e.target.value);
 
@@ -12203,8 +12445,8 @@ const AngularWorkflow = (defaultprops) => {
                     borderRadius: theme.palette.borderRadius,
                   }}
                   onChange={(event, newValue) => {
-      				setLastSaved(false)
-					console.log("Found value: ", newValue)
+                    setLastSaved(false)
+                    console.log("Found value: ", newValue)
 
 					var parsedinput = { target: { value: newValue } }
 
@@ -12248,6 +12490,7 @@ const AngularWorkflow = (defaultprops) => {
                           }}
                           value={data}
 						  onClick={() => {	
+              getWorkflowApps(data.id);
 							handleWorkflowSelectionUpdate({
 								target: {
 									value: data
@@ -12329,7 +12572,7 @@ const AngularWorkflow = (defaultprops) => {
                       borderRadius: theme.palette.borderRadius,
                     }}
                     onChange={(event, newValue) => {
-      				  setLastSaved(false)
+      				        setLastSaved(false)
                       handleSubflowStartnodeSelection({ target: { value: newValue } })
                     }}
             		renderOption={(props, action, state) => {
@@ -12477,6 +12720,24 @@ const AngularWorkflow = (defaultprops) => {
 							*/}
             </div>
           </div>
+
+          <div>
+            <div>
+            <div className="app">
+              <div style={{ display: "flex", marginTop: 10 }}>
+                <div style={{ flex: "10" }}>
+                  <b>Auth Override</b>
+                </div>
+              </div>
+
+              <div style={{ display: "flex", marginTop: 10 }}>
+                <div style={{ flex: "10", marginLeft: 10 }}>
+                  <AppAuthSelector appAuthData={appAuthentication} />
+                </div>
+              </div>
+            </div>
+            </div>
+          </div>
         </div>
       );
     }