Added frontend fixes for app creation and getting started UI

2022-01-12 14:02:58 +01:00
parent 8e3ee76a46
commit b2dafd6f28
5 changed files with 292 additions and 91 deletions
@@ -3586,7 +3586,7 @@ const Admin = (props) => {
          <h2 style={{ display: "inline" }}>App Authentication</h2>
          <span style={{ marginLeft: 25 }}>
            Control the authentication options for individual apps.{" "}
-            <b>Actions can be destructive!</b>
+            PS: Actions performed here can be destructive!
          </span>
          &nbsp;
          <a
@@ -3594,7 +3594,7 @@ const Admin = (props) => {
            href="https://shuffler.io/docs/organizations#app_authentication"
            style={{ textDecoration: "none", color: "#f85a3e" }}
          >
-            Learn more
+            Learn more about authentication
          </a>
        </div>
        <Divider
@@ -3618,21 +3618,27 @@ const Admin = (props) => {
              primary="App Name"
              style={{ minWidth: 175, maxWidth: 175, marginLeft: 10 }}
            />
-            <ListItemText
+            {/*<ListItemText
              primary="Ready"
              style={{ minWidth: 100, maxWidth: 100 }}
-            />
+            />*/}
            <ListItemText
              primary="Workflows"
-              style={{ minWidth: 110, maxWidth: 110, overflow: "hidden" }}
+              style={{ minWidth: 100, maxWidth: 100, overflow: "hidden" }}
            />
+						{/*
            <ListItemText
-              primary="Actions"
-              style={{ minWidth: 110, maxWidth: 110, overflow: "hidden" }}
+              primary="App Usage"
+              style={{ minWidth: 100, maxWidth: 100, overflow: "hidden" }}
            />
+						*/}
            <ListItemText
              primary="Fields"
-              style={{ minWidth: 200, maxWidth: 200, overflow: "hidden" }}
+              style={{ minWidth: 125, maxWidth: 125, overflow: "hidden" }}
+            />
+            <ListItemText
+              primary="Last Edited"
+              style={{ minWidth: 225, maxWidth: 225, overflow: "hidden" }}
            />
            <ListItemText primary="Actions" />
          </ListItem>
@@ -3644,13 +3650,15 @@ const Admin = (props) => {
                  bgColor = "#1f2023";
                }

+								console.log("Auth data: ", data)
+
                return (
                  <ListItem key={index} style={{ backgroundColor: bgColor }}>
                    <ListItemText
                      primary=<img
                        alt=""
                        src={data.app.large_image}
-                        style={{ maxWidth: 50 }}
+                        style={{ maxWidth: 50, borderRadius: theme.palette.borderRadius, }}
                      />
                      style={{ minWidth: 75, maxWidth: 75 }}
                    />
@@ -3666,28 +3674,34 @@ const Admin = (props) => {
                      primary={data.app.name}
                      style={{ minWidth: 175, maxWidth: 175, marginLeft: 10 }}
                    />
+										{/*
                    <ListItemText
                      primary={data.defined === false ? "No" : "Yes"}
-                      style={{ minWidth: 100, maxWidth: 100, marginLeft: 10 }}
+                      style={{ minWidth: 100, maxWidth: 100, }}
                    />
+										*/}
                    <ListItemText
                      primary={
                        data.workflow_count === null ? 0 : data.workflow_count
                      }
                      style={{
-                        minWidth: 110,
-                        maxWidth: 110,
+                        minWidth: 100,
+                        maxWidth: 100,
+												textAlign: "center",
                        overflow: "hidden",
                      }}
                    />
+										{/*
                    <ListItemText
                      primary={data.node_count}
                      style={{
                        minWidth: 110,
                        maxWidth: 110,
+												textAlign: "center",
                        overflow: "hidden",
                      }}
                    />
+										*/}
                    <ListItemText
                      primary={
                        data.fields === null || data.fields === undefined
@@ -3699,11 +3713,19 @@ const Admin = (props) => {
                              .join(", ")
                      }
                      style={{
-                        minWidth: 200,
-                        maxWidth: 200,
+                        minWidth: 125,
+                        maxWidth: 125,
                        overflow: "hidden",
                      }}
                    />
+										<ListItemText
+											style={{
+												maxWidth: 225,
+												minWidth: 225,
+												overflow: "hidden",
+											}}
+											primary={new Date(data.edited * 1000).toISOString()}
+										/>
                    <ListItemText>
                      <IconButton
                        onClick={() => {
@@ -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 &&
@@ -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) => {
          <Button
            color="primary"
            style={{ maxWidth: 50, marginLeft: 15 }}
-            variant="contained"
+            variant="outlined"
            onClick={() => {
              console.log("ADD NEW!");
              extraAuth.push(defaultAuth);
@@ -2631,71 +2644,94 @@ const AppCreator = (defaultprops) => {
      <div style={{ color: "white", marginTop: 20 }}>
        <Typography variant="body1">API key authentication</Typography>
        <Typography variant="body2" color="textSecondary">
-          Add the name of the field used for authentication, e.g. "X-APIKEY"
+          Add the name of the field used for authentication, e.g. "X-APIKEY". Should NOT be your actual API-key.
        </Typography>
-        <TextField
-          required
-          style={{ flex: "1", backgroundColor: inputColor }}
-          fullWidth={true}
-          placeholder="Field Name (not token)"
-          type="name"
-          id="standard-required"
-          margin="normal"
-          variant="outlined"
-          value={parameterName}
-          helperText={
-            <span style={{ color: "white", marginBottom: "2px" }}>
-              Can't be empty. Can't contain any of the following characters:
-              !#$%&'^"+-._~|]+$
-            </span>
-          }
-          onChange={(e) => {
-            setParameterName(e.target.value);
-          }}
-          InputProps={{
-            classes: {
-              notchedOutline: classes.notchedOutline,
-            },
-            style: {
-              color: "white",
-            },
-          }}
-        />
-        Field type
-        <Select
-          fullWidth
-          onChange={(e) => {
-            setParameterLocation(e.target.value);
-          }}
-          value={parameterLocation}
-          style={{
-            borderRadius: 5,
-            backgroundColor: inputColor,
-            paddingLeft: "10px",
-            color: "white",
-            height: "50px",
-          }}
-          inputProps={{
-            name: "age",
-            id: "outlined-age-simple",
-          }}
-        >
-          {apikeySelection.map((data, index) => {
-            if (data === undefined) {
-              return null;
-            }
+				<div style={{display: "flex", marginTop: 10, }}>
+					<div style={{flex: 4,}}>
+        		Key	
+						<TextField
+							required
+							style={{ marginTop: 0, backgroundColor: inputColor }}
+							fullWidth={true}
+							placeholder="Field Name (key, NOT your actual API-key)"
+							type="name"
+							id="standard-required"
+							margin="normal"
+							variant="outlined"
+							value={parameterName}
+							helperText={
+								<span style={{ color: "white", marginBottom: "2px" }}>
+									Can't be empty or contain any of the following: !#$%&'^"+-._~|]+$
+								</span>
+							}
+							onChange={(e) => {
+								setParameterName(e.target.value);
+							}}
+							InputProps={{
+								classes: {
+									notchedOutline: classes.notchedOutline,
+								},
+								style: {
+									color: "white",
+								},
+							}}
+						/>
+					</div>
+					<div style={{marginLeft: 5, flex: 1,}}>
+        		Field type
+        		<Select
+        		  fullWidth
+        		  onChange={(e) => {
+        		    setParameterLocation(e.target.value);
+        		  }}
+        		  value={parameterLocation}
+        		  style={{
+        		    borderRadius: 5,
+        		    backgroundColor: inputColor,
+        		    paddingLeft: 10,
+        		    color: "white",
+        		    height: 57,
+        		  }}
+        		  inputProps={{
+        		    name: "age",
+        		    id: "outlined-age-simple",
+        		  }}
+        		>
+        		  {apikeySelection.map((data, index) => {
+        		    if (data === undefined) {
+        		      return null;
+        		    }

-            return (
-              <MenuItem
-                key={index}
-                style={{ backgroundColor: inputColor, color: "white" }}
-                value={data}
-              >
-                {data}
-              </MenuItem>
-            );
-          })}
-        </Select>
+        		    return (
+        		      <MenuItem
+        		        key={index}
+        		        style={{ backgroundColor: inputColor, color: "white" }}
+        		        value={data}
+        		      >
+        		        {data}
+        		      </MenuItem>
+        		    );
+        		  })}
+        		</Select>
+					</div>
+					<div style={{marginLeft: 5, flex: 1,}}>
+        		Value prefix	
+						<TextField
+							style={{ marginTop: 0, flex: "1", backgroundColor: inputColor }}
+							fullWidth={true}
+							placeholder="Token, SSWS..."
+							type="name"
+							id="standard-notrequired"
+							margin="normal"
+							variant="outlined"
+							value={refreshUrl}
+							onChange={(e) => {
+								// Just reusing this state
+      	        setRefreshUrl(e.target.value);
+							}}
+						/>
+					</div>
+				</div>
      </div>
    ) : null;

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";

 import { Typography, CircularProgress } from "@material-ui/core";
+import theme from '../theme';

 const SetAuthentication = (props) => {
  const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
@@ -127,22 +128,57 @@ const SetAuthentication = (props) => {
      body: JSON.stringify(appAuthData),
    })
      .then((response) => {
+          const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+					const tmpView = new URLSearchParams(cursearch).get("state");
+      		if (
+      		  tmpView !== undefined &&
+      		  tmpView !== null &&
+      		  tmpView.length > 0
+      		) {
+						console.log("State to find app name from: ", tmpView)
+      		}
+
        if (response.status !== 200) {
          console.log("Status not 200 for oauth2 authentication");
          setFailed(true);
-        }
+        } else {
+        	setFinished(true);
+					setTimeout(() => {
+						window.close();
+					}, 2500);
+				}

        return response.json();
      })
      .then((responseJson) => {
        //setUserSettings(responseJson)
        console.log("Resp: ", responseJson);
-        setFinished(true);
-        setResponse(responseJson.reason);

-        setTimeout(() => {
-          window.close();
-        }, 1000);
+				if (responseJson.reason !== undefined) {
+        	setResponse(responseJson.reason);
+        	setFinished(true);
+
+				} else {
+          const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
+					var tmpView = new URLSearchParams(cursearch).get("error_description");
+      		if (
+      		  tmpView !== undefined &&
+      		  tmpView !== null &&
+      		  tmpView.length > 0
+      		) {
+						setResponse(tmpView)
+      		} else {
+						tmpView = new URLSearchParams(cursearch).get("error");
+      			if (
+      			  tmpView !== undefined &&
+      			  tmpView !== null &&
+      			  tmpView.length > 0
+      			) {
+							setResponse(tmpView)
+						}
+					}
+				}
+
      })
      .catch((error) => {
        console.log(error);
@@ -150,15 +186,23 @@ const SetAuthentication = (props) => {
  }

  return (
-    <div style={{ width: 1000, margin: "auto", itemAlign: "center" }}>
+    <div style={{ maringTop: 50, padding: 50, border: "1px solid rgba(255,255,255,0.6)", borderRadius: theme.palette.borderRadius,  width: 500, margin: "auto", itemAlign: "center", textAlign: "center",}}>
+      <Typography
+        variant="h4"
+        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
+      >
+				Oauth2 setup
+      </Typography>
      <Typography
        variant="h6"
-        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 200 }}
+        style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
      >
        {!finished ? (
-          <CircularProgress />
+					failed ? 
+						null :
+          	<CircularProgress />
        ) : (
-          "DONE WITH AUTH - this will close soon!!"
+          "Done - this window should close within 3 seconds."
        )}
        <div />
        {failed ? "Failed setup. Error: " : ""} {response}