marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added highlighting to app chips

Browse Source
This commit is contained in:
dhaval055
2024-03-12 12:29:50 +00:00
parent b2a126e6b1
commit 7eda67bc44
1 changed files with 75 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/OrgHeaderexpanded.jsx
+58 -122
View File
@@ -167,40 +167,24 @@ 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 [authenticationModal, setAuthenticationModal] = React.useState(false);
const [emailData,setEmailData] = React.useState([]);
const [notificationAppDetails, setNotificationAppDetails] = 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]);
const [generatedWorkflow, setGeneatedWorkflow] = React.useState({});
// for jira & email modal
const [textFieldValue, setTextFieldValue] = React.useState("");
const [textFieldOneValue, setTextFieldOneValue] = React.useState("");
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",
@@ -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,20 +447,20 @@ 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);
})
}
}
const executeTestWorkflow = async (workflowid) => {
@@ -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 renderChips = (apps) => {
if (!apps || apps.length === 0) {
return (<Typography variant="caption" display="block" gutterBottom>
<Chip
label="email"
variant="outlined"
onClick={() => {
console.log(`Clicked EMAIL`)
setSelectedAppDetails("email")
setNotificationWorkflowModal(true)
// setNotificationWorkflowModal(true)
}}
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%' }} />}
/>
</Typography>)
}
const checkIfAlreadyGenerated = async (appList, workflows) => { // fixxxxxxxxxxxxxxxxxxxxx
return (
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) => {
return (
<Stack direction="row" spacing={1}>
{apps.map((app) => (
<Chip
key={app.id}
label={app.name}
variant="outlined"
variant={generatedWorkflow.app_name === app.name? "filled":"outlined"}
disabled={generatedWorkflow.app_name === app.name ? true:false}
onClick={() => {
console.log(`Clicked ${app.name}`)
console.log("app: ",app)
setSelectedAppDetails(app)
if (app.authentication_data && app.authentication_data.length > 0){ //fixxxxxxxx
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%' }} />}
/>
))}
</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>
{/*
<Typography variant="body2" color="textSecondary">
Add a Workflow that receives notifications from Shuffle when an error occurs in one of your workflows
</Typography>
*/}
{renderChips(notificationAppDetails.length > 0 ? notificationAppDetails : emailData)}
</div>
<div style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
{workflows !== undefined && workflows !== null && workflows.length > 0 ?
<Autocomplete