From b2dafd6f2829fa2d42d9cc1bf3a70a7d3cd5e199 Mon Sep 17 00:00:00 2001 From: frikky Date: Wed, 12 Jan 2022 14:02:58 +0100 Subject: [PATCH] Added frontend fixes for app creation and getting started UI --- .../src/components/DetectionFramework.jsx | 99 ++++++++++- frontend/src/views/Admin.jsx | 50 ++++-- frontend/src/views/AngularWorkflow.jsx | 2 + frontend/src/views/AppCreator.jsx | 168 +++++++++++------- frontend/src/views/SetAuthentication.jsx | 64 +++++-- 5 files changed, 292 insertions(+), 91 deletions(-) diff --git a/frontend/src/components/DetectionFramework.jsx b/frontend/src/components/DetectionFramework.jsx index 52947586..bf841eef 100644 --- a/frontend/src/components/DetectionFramework.jsx +++ b/frontend/src/components/DetectionFramework.jsx @@ -576,7 +576,7 @@ const Framework = (props) => { const foundelement = cy.getElementById(discoveryData.id) if (foundelement !== undefined && foundelement !== null) { - console.log("element: ", foundelement) + //console.log("element: ", foundelement) foundelement.data("large_image", newSelectedApp.image_url) foundelement.data("text_margin_y", "60px") foundelement.data("margin_x", "0px") @@ -1105,7 +1105,88 @@ const Framework = (props) => { changeUsecase(selectedOption, usecaseType) } + const UsecaseHandler = (props) => { + const { data, index, diff } = props + + const svgSize = 20 + var svgIcon = + + + + + + + + if (data.direction === "right") { + svgIcon = + + + + + } else if (data.direction === "left") { + svgIcon = + + + + + + } + + //{"usecase_directional_arrow_"+index} + return ( + + + Usecase {index+1} + +
+
+
+
+ {svgIcon} +
+
+
+
+ + + ) + } + + const selectedUsecases = [ + { + "name": "Sync from ticket system 1 to 2 and back to 1", + "description": "Do cool shit weeeee - this just ensure they are syncing", + "image1": "cases", + "image2": "cases", + "direction": "both", + "automated": [ + { + "source": "BOTTOM_LEFT", + "target": "COMMS", + "description": "Email received", + "human": false, + }, + ] + }, + { + "name": "Send alerts when a ticket is created", + "description": "Do cool shit weeeee - this just ensure they are syncing", + "image1": "cases", + "image2": "comms", + "direction": "right", + "automated": [ + { + "source": "BOTTOM_LEFT", + "target": "COMMS", + "description": "Email received", + "human": false, + }, + ] + } + ] + //autounselectify={true} + var usecasediff = -100 return (
{showOptions === false ? null : @@ -1121,6 +1202,19 @@ const Framework = (props) => { })}
} + { + Object.getOwnPropertyNames(discoveryData).length > 0 ? +
+ {selectedUsecases.map((data, index) => { + usecasediff += 175 + + return ( + + ) + })} +
+ : null} + { Object.getOwnPropertyNames(discoveryData).length > 0 ? @@ -1132,6 +1226,9 @@ const Framework = (props) => { { + //cy.elements().unselectify(); + cy.elements().unselect() + e.preventDefault(); setDiscoveryData({}) setDefaultSearch("") diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx index f1c130e8..347d4568 100644 --- a/frontend/src/views/Admin.jsx +++ b/frontend/src/views/Admin.jsx @@ -3586,7 +3586,7 @@ const Admin = (props) => {

App Authentication

Control the authentication options for individual apps.{" "} - Actions can be destructive! + PS: Actions performed here can be destructive!   { href="https://shuffler.io/docs/organizations#app_authentication" style={{ textDecoration: "none", color: "#f85a3e" }} > - Learn more + Learn more about authentication { primary="App Name" style={{ minWidth: 175, maxWidth: 175, marginLeft: 10 }} /> - + />*/} + {/* + */} + @@ -3644,13 +3650,15 @@ const Admin = (props) => { bgColor = "#1f2023"; } + console.log("Auth data: ", data) + return ( style={{ minWidth: 75, maxWidth: 75 }} /> @@ -3666,28 +3674,34 @@ const Admin = (props) => { primary={data.app.name} style={{ minWidth: 175, maxWidth: 175, marginLeft: 10 }} /> + {/* + */} + {/* + */} { .join(", ") } style={{ - minWidth: 200, - maxWidth: 200, + minWidth: 125, + maxWidth: 125, overflow: "hidden", }} /> + { diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index e19c2ab2..53ae86ae 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -3340,6 +3340,8 @@ const AngularWorkflow = (defaultprops) => { typeof window === "undefined" || window.location === undefined ? "" : window.location.search; + + // FIXME: Don't check specific one here const tmpExec = new URLSearchParams(cursearch).get("execution_highlight"); if ( tmpExec !== undefined && diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index 35af3d61..70441a07 100644 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -1426,6 +1426,10 @@ const AppCreator = (defaultprops) => { setParameterName(value.name); setAuthenticationRequired(true); + if (value.description !== undefined && value.description !== null && value.description.length > 0) { + setRefreshUrl(value.description) + } + } else if (value.scheme === "basic") { setAuthenticationOption("Basic auth"); setAuthenticationRequired(true); @@ -1702,6 +1706,13 @@ const AppCreator = (defaultprops) => { //break } + if (queryitem.name.toLowerCase() == "file_id") { + item.queries[querykey].name = "fileid" + continue; + //skipped = true + //break + } + if ( queryitem.name.toLowerCase() == "url" || queryitem.name.toLowerCase() == "body" || @@ -1733,7 +1744,8 @@ const AppCreator = (defaultprops) => { console.log( item.name + " error: uses a bad query - not adding: ", queryitem.name - ); + ) + continue; } @@ -1996,7 +2008,8 @@ const AppCreator = (defaultprops) => { type: "apiKey", in: parameterLocation.toLowerCase(), name: newparamName, - }; + description: refreshUrl, + } } else if (authenticationOption === "Bearer auth") { data.components.securitySchemes["BearerAuth"] = { type: "http", @@ -2240,7 +2253,7 @@ const AppCreator = (defaultprops) => {