added highlighting to app chips

frontend/src/components/OrgHeaderexpanded.jsx

@@ -167,41 +167,25 @@ const OrgHeaderexpanded = (props) => {
   const [workflow, setWorkflow] = React.useState({})
 
   //   notification workflow
-	const [notificationApp, setNotificationApp] = React.useState("")
 	const [notificationWorkflowModal, setNotificationWorkflowModal] = React.useState(false);
 	const [selectedAppDetails, setSelectedAppDetails] = React.useState({});
 	const [notificationWorkflowTestModal, setNotificationWorkflowTestModal] = React.useState(false);
-	const [webhookInputValue, setWebhookInputValue] = React.useState("");
-	const [authOptions, setAuthOptions] = React.useState([]);
 	const [selectedAuth, setSelectedAuth] = React.useState('');
-	// const [selectedAppAuth, setSelectedAppAuth] = React.useState({}); // for getting selected app auth parameters
+	const [emailData,setEmailData] = React.useState([]);
-	const [authenticationModal, setAuthenticationModal] = React.useState(false);
-
 	const [notificationAppDetails, setNotificationAppDetails] = React.useState([]);
+	const [generatedWorkflow, setGeneatedWorkflow] = React.useState({});
 
-	// const [tempResult, setTempResult] = React.useState([])
-
-	// useEffect(() => {
-	// 	if (authOptions.length < 1) {
-	// 		{getAppConfig(selectedAppDetails.id)}
-	// 	}
-	//   }, [authOptions.length]); // not using this now
-
-	  useEffect(() => {
-		if (notificationAppList.length > 0) {
-		  (async () => {
-			const nameList = notificationAppList.map(item => item.name);
-			await prepareNotificationAppList(nameList);
-		  })();
-		}
-	  }, [notificationAppList]);
-	  
 
 	// for jira & email modal
 	const [textFieldValue, setTextFieldValue] = React.useState("");
 	const [textFieldOneValue, setTextFieldOneValue] = React.useState("");
 
-  const getAvailableWorkflows = (trigger_index) => {
+	useEffect(() => {
+		let nameList = notificationAppList.length > 0? notificationAppList.map(item => item.name): ["email"];
+		prepareNotificationAppList(nameList)
+	  }, [notificationAppList,workflows]);
+
+  const  getAvailableWorkflows =  (trigger_index) => {
     fetch(globalUrl + "/api/v1/workflows", {
       method: "GET",
       headers: {
@@ -390,7 +374,6 @@ const OrgHeaderexpanded = (props) => {
 	const prepareNotificationAppList = async (appList) => {
 		// getting App ID,Authentication fields and saved auths for each app
 		var result = []
-		if (appList.length > 0) {
 			fetch(globalUrl + "/api/v1/apps", {
 				method: "GET",
 				headers: {
@@ -408,6 +391,8 @@ const OrgHeaderexpanded = (props) => {
 			}).then((responseJson) => {
 				if (responseJson !== undefined) {
 					const filteredApps = responseJson.filter(app => appList.includes(app.name));
+					const emailData = responseJson.filter(app => app.name === "email")
+					setEmailData(emailData)
 					const appDetails = filteredApps.map(app => ({ name: app.name, id: app.id })); //mapped apps with IDs as sometime Ids were not correct in security framework
 					// console.log("appDetails: ", appDetails)
 					// result = appDetails
@@ -434,7 +419,7 @@ const OrgHeaderexpanded = (props) => {
 							}
 							// console.log("responseJson of auth: ", responseJson.data)
 							result = await mergeAuthData(appDetails, responseJson.data)
-							console.log("merged auth data: ", result)
+							// console.log("merged auth data: ", result)
 							// console.log("result", result)
 							result.map(item => {
 								fetch(globalUrl + `/api/v1/apps/${item.id}/config`, {
@@ -462,19 +447,19 @@ const OrgHeaderexpanded = (props) => {
 									item.large_image = decodedString.large_image
 									setNotificationAppDetails(result)
 									console.log("notificationAppDetails: ", notificationAppDetails)
-									// setSelectedAppAuth(decodedString.authentication)
+								}).then(async()=>{
+									await checkIfAlreadyGenerated(appList,workflows);
+									
 								}).catch((error) => {
 									console.log("Error getting app config: " + error);
 									toast("Error getting app config: " + error);
 								})
 							})
-							// get auth config for each app as it is required to render the modal when auth is not available
 						})
 				}
 			}).catch((error) => {
 				console.log("Error getting app ids: " + error);
-			})
+			})		
-		}
 	}
 
 
@@ -504,7 +489,7 @@ const OrgHeaderexpanded = (props) => {
 
 const generateNotificationWorkflow = async (appname,appImage,appAuthId,projectId,issuetype) => {
 	//currently only supports JIRA figure out a way to support more apps
-	var workflowName = `[GENARATED] ${appname} notification workflow`
+	var workflowName = `[GENERATED] ${appname} notification workflow`
 	var workflowDescription = "Generated by Shuffle for sending info/error notifications."
 	var data = {
 		"name": workflowName,
@@ -632,7 +617,7 @@ const generateNotificationWorkflow = async (appname,appImage,appAuthId,projectId
 
 const generateEmailNotificationWorkflow = async (appname,appImage,shuffleAPIKey,recepients) => {
 	//currently only supports  figure out a way to support more apps
-	var workflowName = `[GENARATED] ${appname} notification workflow`
+	var workflowName = `[GENERATED] ${appname} notification workflow`
 	var workflowDescription = "Generated by Shuffle for sending info/error notifications."
 	var data = {
 		"name": workflowName,
@@ -745,64 +730,6 @@ const generateEmailNotificationWorkflow = async (appname,appImage,shuffleAPIKey,
 		})
 }
 
-const getAppAuth = async (appName) => {
-	fetch(globalUrl + "/api/v1/apps/authentication", {
-		method: "GET",
-		headers: {
-			"Content-Type": "application/json",
-			Accept: "application/json",
-		},
-		credentials: "include",
-	})
-		.then((response) => {
-			if (response.status !== 200) {
-				toast(`Failed getting auth for ${appName}: `, response.reason);
-				console.log("Status not 200 for app auth :O!");
-				return;
-			}
-			return response.json();
-		}).then((responseJson) => {
-			if (!responseJson.success) {
-				console.log("Could not get app auth")
-				return;
-			}
-			var authList = responseJson.data.filter(entry => entry.app.name === appName)
-			console.log("authList: ", authList)
-			setAuthOptions(authList);
-
-		}).catch((error) => {
-			console.log("Error getting app auth: " + error);
-		})
-}
-
-const getAppConfig = async (appId) => {
-	fetch(globalUrl + `/api/v1/apps/${appId}/config`, {
-		method: "GET",
-		headers: {
-			"Content-Type": "application/json",
-			Accept: "application/json",
-		},
-		credentials: "include",
-	}).then((response) => {
-			if (response.status !== 200) {
-				toast(`Failed getting config for ${appId}: `, response.reason);
-				console.log("Status not 200 for app config :O!");
-				return;
-			}
-			return response.json();
-		}).then((responseJson) => {
-			if (!responseJson.success) {
-				console.log("Could not get app config")
-				return;
-			}
-			var decodedString = JSON.parse(atob(responseJson.app));
-			console.log("dcodedString: ",decodedString)
-			return decodedString.authentication
-			// setSelectedAppAuth(decodedString.authentication)
-		}).catch((error) => {
-			console.log("Error getting app config: " + error);
-		})
-}
 
 const testWorkflowModal = notificationWorkflowTestModal ?
 	(<Dialog
@@ -852,10 +779,6 @@ const testWorkflowModal = notificationWorkflowTestModal ?
 		</FormControl>
 	</Dialog>) : null
 
-const notificationWorkflowModalValid = () => {
-return selectedAuth && webhookInputValue;
-};
-
 const modalView = notificationWorkflowModal ? (
 	<Dialog
 		open={notificationWorkflowModal}
@@ -878,10 +801,10 @@ const modalView = notificationWorkflowModal ? (
 			<DialogContent style={{ color: "rgba(255,255,255,0.65)", overflowY: 'auto', maxHeight: '450px' }}>
 				<Divider style={{ marginBottom: '1em', backgroundColor: 'rgba(255,255,255,0.12)' }} />
 				{console.log("len Selected app details: ", selectedAppDetails)}
-				{(selectedAppDetails.authentication_data || selectedAppDetails.auth_config.required == false) ?
+				{(selectedAppDetails.authentication_data || (selectedAppDetails.auth_config && selectedAppDetails.auth_config.required == false) || (selectedAppDetails.authentication && selectedAppDetails.authentication.required == false)) ?
 					<>
 						<Box mb={2}>
-							{selectedAppDetails.auth_config.required == false ? "No authentication required":
+							{(selectedAppDetails.auth_config && selectedAppDetails.auth_config.required == false || (selectedAppDetails.authentication && selectedAppDetails.authentication.required == false)) ? "No authentication required":
 							<>
 							<Typography variant="body1" style={{ marginBottom: '0.5rem' }}>
 								Pick an authentication method from the list
@@ -892,14 +815,15 @@ const modalView = notificationWorkflowModal ? (
 									labelId="demo-simple-select-label"
 									id="demo-simple-select"
 									value={selectedAuth}
-									disabled = {selectedAppDetails.auth_config.required == false ? true : false} 
+									disabled = {(selectedAppDetails.auth_config && selectedAppDetails.auth_config.required == false || (selectedAppDetails.authentication && selectedAppDetails.authentication.required == false))} 
 									onChange={(event) => {setSelectedAuth(event.target.value)
+										console.log("event.target.value: ",event.target.value)
 										console.log("Selected auth: ", selectedAuth)
 									}}
 									label="Available authentications"
 									required={true}
 								>
-									{selectedAppDetails.auth_config.required == false  ?  "No authentication required" : selectedAppDetails.authentication_data.map((option) => (
+									{(selectedAppDetails.auth_config && selectedAppDetails.auth_config.required == false || (selectedAppDetails.authentication && selectedAppDetails.authentication.required == false))  ?  "No authentication required" : selectedAppDetails.authentication_data.map((option) => (
 										<MenuItem key={option.id} value={option.id}>
 											<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
 												<Chip label={option.app.app_version} variant="outlined" />
@@ -1010,45 +934,61 @@ const modalView = notificationWorkflowModal ? (
 ) : null
 
 
+	const checkIfAlreadyGenerated = async (appList, workflows) => { // fixxxxxxxxxxxxxxxxxxxxx	
+
+		var workflowName = workflows.find(workflow => workflow.id === notificationWorkflow)
+		if (workflowName) {
+			workflowName = workflowName.name
+		}
+		else {
+			console.log("no workflow set")
+			return
+		}
+		if (workflowName) {
+			const parts = workflowName.split(' ');
+			console.log("parts", parts)
+			if (parts[0].toString() === "[GENERATED]" && parts.length > 1) {
+				console.log("parts1", parts[1])
+				if ((appList.includes(parts[1]))) {
+					console.log("workflow already generated")
+					setGeneatedWorkflow({"app_name": parts[1]})
+				}
+			}
+		}
+		else {
+			return
+		}
+	}
+
 const renderChips = (apps) => {
-if (!apps || apps.length === 0) {
+	return (
-	return (<Typography variant="caption" display="block" gutterBottom>
+		<Stack direction="row" spacing={1}>
-		<Chip
+			{apps.map((app) => (
-			label="email"
+				<Chip
-			variant="outlined"
+					key={app.id}
-			onClick={() => {
+					label={app.name}
-				console.log(`Clicked EMAIL`)
+					variant={generatedWorkflow.app_name === app.name? "filled":"outlined"}
-				setSelectedAppDetails("email")
+					disabled={generatedWorkflow.app_name === app.name ? true:false}
-				setNotificationWorkflowModal(true)
+					onClick={() => {
-				// setNotificationWorkflowModal(true)
+						console.log(`Clicked ${app.name}`)
-			}}
+						console.log("app: ",app)
-			avatar={<img src={"https://storage.googleapis.com/shuffle_public/app_images/email_f33aa6a9c04e64cbf5d89d927ff0cd38.png"} alt={"email app logo"} style={{ width: 24, height: 24, borderRadius: '50%' }} />}
+						setSelectedAppDetails(app)
-		/>
+						if (app.authentication_data && app.authentication_data.length > 0){ //fixxxxxxxx
-	</Typography>)
+							console.log("authdata: ",app.authentication_data[0])
-}
+							setSelectedAuth(app.authentication_data[app.authentication_data.length-1].id)
+						}
+						setNotificationWorkflowModal(true)
+						// getAppAuth(app.name)
+						console.log("selectedAppDEtails",selectedAppDetails)
+					}}
+					avatar={<img src={app.large_image} alt={app.name} style={{ width: 24, height: 24, borderRadius: '50%' }} />}
 
-return (
+				/>
-	<Stack direction="row" spacing={1}>
+			))}
-		{apps.map((app) => (
+		</Stack>
-			<Chip
+	);
-				key={app.id}
-				label={app.name}
-				variant="outlined"
-				onClick={() => {
-					console.log(`Clicked ${app.name}`)
-					setSelectedAppDetails(app)
-					setNotificationWorkflowModal(true)
-					// getAppAuth(app.name)
-					console.log("selectedAppDEtails",selectedAppDetails)
-				}}
-				avatar={<img src={app.large_image} alt={app.name} style={{ width: 24, height: 24, borderRadius: '50%' }} />}
-			/>
-		))}
-	</Stack>
-);
 };
 
-
 	return (
 		<div style={{ textAlign: "center" }}>
 			<Grid container spacing={3} style={{ textAlign: "left" }}>
@@ -1058,12 +998,8 @@ return (
 						{modalView}
 					{/*{testWorkflowModal} */}
 					<div style={{ marginBottom: '10px' }}>
-						{renderChips(notificationAppDetails)}</div>
+						{renderChips(notificationAppDetails.length > 0 ? notificationAppDetails : emailData)}
-						{/*
+					</div>
-						<Typography variant="body2" color="textSecondary">
-							Add a Workflow that receives notifications from Shuffle when an error occurs in one of your workflows
-						</Typography>
-						*/}
 						<div style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
 							{workflows !== undefined && workflows !== null && workflows.length > 0 ?
 								<Autocomplete