From 5b72c8d51718a3b8ac812bdba2b539923898d90d Mon Sep 17 00:00:00 2001 From: Frikky Date: Wed, 12 Jul 2023 01:28:07 +0200 Subject: [PATCH] Started react 16->18 migration and material-ui->mui migration --- frontend/Dockerfile | 2 +- frontend/build.sh | 2 +- frontend/package.json | 24 +- frontend/run.sh | 12 +- frontend/src/App.jsx | 9 +- frontend/src/components/AlertTemplate.js | 10 +- frontend/src/components/AppFramework.jsx | 2 +- frontend/src/components/AppGrid.jsx | 6 +- frontend/src/components/Appsearch.jsx | 2 +- frontend/src/components/AppsearchPopout.jsx | 2 +- .../src/components/AuthenticationItem.jsx | 2 +- .../src/components/AuthenticationNormal.jsx | 2 +- .../src/components/AuthenticationWindow.jsx | 476 ++++++++++++++++++ frontend/src/components/CacheView.jsx | 3 +- frontend/src/components/CreatorGrid.jsx | 15 +- frontend/src/components/DocsGrid.jsx | 6 +- frontend/src/components/Dropzone.jsx | 4 +- frontend/src/components/EditWorkflow.jsx | 2 +- frontend/src/components/Files.jsx | 2 +- frontend/src/components/Header.jsx | 5 +- frontend/src/components/OrgHeader.jsx | 9 +- frontend/src/components/OrgHeaderexpanded.jsx | 10 +- frontend/src/components/ParsedAction.jsx | 3 +- frontend/src/components/Searchfield.js | 5 +- frontend/src/components/Searchfield.jsx | 5 +- frontend/src/components/ShuffleCodeEditor.jsx | 2 +- frontend/src/components/WorkflowGrid.jsx | 2 +- frontend/src/components/WorkflowPaper.jsx | 2 +- frontend/src/components/WorkflowPaperNew.jsx | 2 +- frontend/src/components/Workflowsearch.jsx | 2 +- frontend/src/index.js | 20 +- frontend/src/views/Admin.jsx | 37 +- frontend/src/views/AngularWorkflow.jsx | 13 +- frontend/src/views/AppCreator.jsx | 5 +- frontend/src/views/Apps.jsx | 2 +- frontend/src/views/Dashboard.jsx | 2 +- frontend/src/views/DashboardViews.jsx | 2 +- frontend/src/views/Docs.jsx | 2 +- frontend/src/views/Faq.jsx | 4 +- frontend/src/views/GettingStarted.jsx | 8 - frontend/src/views/Landingpage.jsx | 8 +- frontend/src/views/LandingpageNew.jsx | 18 +- frontend/src/views/Search.jsx | 6 +- frontend/src/views/Services.jsx | 2 +- frontend/src/views/Workflows.jsx | 4 +- 45 files changed, 624 insertions(+), 139 deletions(-) create mode 100755 frontend/src/components/AuthenticationWindow.jsx diff --git a/frontend/Dockerfile b/frontend/Dockerfile index b2d4f2ce..46d90c13 100755 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,5 +1,5 @@ # Build environment -FROM node:14 as builder +FROM node:18 as builder RUN mkdir /usr/src/app diff --git a/frontend/build.sh b/frontend/build.sh index 9dc0626f..0f536e9d 100755 --- a/frontend/build.sh +++ b/frontend/build.sh @@ -1,3 +1,3 @@ -npm run build +yarn run build rm -rf ../backend/go-app/build cp -r build/ ../backend/go-app/build diff --git a/frontend/package.json b/frontend/package.json index 5082a3b8..2efb1929 100755 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,7 +1,7 @@ { "name": "shuffler", "homepage": "https://shuffler.io", - "version": "1.2.0", + "version": "1.3.0", "private": true, "dependencies": { "@codemirror/commands": "^6.2.2", @@ -10,12 +10,11 @@ "@emotion/styled": "^11.6.0", "@lezer/highlight": "^1.1.3", "@material-ui/core": "^4.5.2", - "@material-ui/icons": "^4.5.1", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.5.2", "@material-ui/utils": "^4.11.2", "@metamask/detect-provider": "^1.2.0", - "@mui/icons-material": "^5.2.1", + "@mui/icons-material": "^5.14.0", "@mui/material": "^5.2.3", "@mui/x-data-grid": "^5.17.11", "@uiw/codemirror-themes": "^4.19.9", @@ -23,7 +22,7 @@ "@use-it/interval": "^1.0.0", "algoliasearch": "^4.13.1", "class-transformer": "^0.4.0", - "create-react-app": "^4.0.3", + "create-react-app": "^5.0.1", "cytoscape": "^3.15.1", "cytoscape-clipboard": "^2.2.1", "cytoscape-cxtmenu": "^3.1.1", @@ -41,11 +40,13 @@ "material-icons": "^0.7.7", "material-icons-react": "^1.0.4", "material-ui-chip-input": "^2.0.0-beta.2", - "material-ui-nested-menu-item": "^1.0.2", "md5-file": "^4.0.0", "mdbreact": "^4.21.1", + "mime": "^3.0.0", "moment": "^2.29.1", - "react": "^16.14.0", + "mui-nested-menu": "^3.2.1", + "process": "^0.11.10", + "react": "^18.2.0", "react-alert": "^5.5.0", "react-alert-template-basic": "^1.0.0", "react-alice-carousel": "^2.6.4", @@ -55,7 +56,7 @@ "react-cookie": "^4.0.1", "react-cytoscapejs": "^1.2.0", "react-device-detect": "^1.9.10", - "react-dom": "^16.14.0", + "react-dom": "^18.2.0", "react-draggable": "^3.3.2", "react-driftjs": "^1.2.2", "react-dropzone": "^10.1.10", @@ -64,12 +65,12 @@ "react-instantsearch-dom": "^6.28.0", "react-json-pretty": "^2.2.0", "react-json-view": "^1.19.1", - "react-markdown": "^4.2.2", + "react-markdown": "^8.0.7", "react-markdown-github": "^3.3.1", "react-powerhooks": "0.0.7", "react-router": "6.2.1", "react-router-dom": "6.2.1", - "react-scripts": "^4.0.1", + "react-scripts": "^5.0.1", "react-shepherd": "^3.3.6", "reactstrap": "^7.1.0", "reaviz": "^12.1.0", @@ -109,6 +110,9 @@ "babel-eslint": "^10.1.0", "prettier": "2.4.1", "promise-window": "^1.2.1", - "webpack": "^4.44.2" + "react-16": "npm:react@16.13.1", + "react-dom-16": "npm:react-dom@16.13.1", + "react-error-overlay": "6.0.9", + "webpack": "^4.46.0" } } diff --git a/frontend/run.sh b/frontend/run.sh index 0ba2beea..9a608216 100755 --- a/frontend/run.sh +++ b/frontend/run.sh @@ -10,9 +10,9 @@ docker tag ghcr.io/frikky/shuffle-frontend:nightly ghcr.io/shuffle/shuffle-front echo "Starting server" # Rerun build locally for it to update :) -#docker run -it \ -# -p 3001:80 \ -# -p 3002:443 \ -# -v $(pwd)/build:/usr/share/nginx/html:ro \ -# --rm \ -# nginx +docker run -it \ + -p 3001:80 \ + -p 3002:443 \ + -v $(pwd)/build:/usr/share/nginx/html:ro \ + --rm \ + ghcr.io/frikky/shuffle-frontend:nightly diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 1ab5b924..a70f701e 100755 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -7,7 +7,7 @@ import { removeCookies, useCookies } from "react-cookie"; import Workflows from "./views/Workflows"; import GettingStarted from "./views/GettingStarted"; import EditWebhook from "./views/EditWebhook"; -import AngularWorkflow from "./views/AngularWorkflow"; +import AngularWorkflow from "./views/AngularWorkflow.jsx"; import Header from "./components/Header.jsx"; import theme from "./theme"; @@ -19,7 +19,7 @@ import Dashboard from "./views/Dashboard.jsx"; import DashboardView from "./views/DashboardViews.jsx"; import AdminSetup from "./views/AdminSetup"; import Admin from "./views/Admin"; -import Docs from "./views/Docs"; +import Docs from "./views/Docs.jsx"; import Introduction from "./views/Introduction"; import SetAuthentication from "./views/SetAuthentication"; import SetAuthenticationSSO from "./views/SetAuthenticationSSO"; @@ -31,10 +31,9 @@ import LoginPage from "./views/LoginPage"; import SettingsPage from "./views/SettingsPage"; import KeepAlive from "./views/KeepAlive.jsx"; -import MyView from "./views/MyView"; - import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles"; +import UpdateAuthentication from "./views/UpdateAuthentication.jsx"; import FrameworkWrapper from "./views/FrameworkWrapper.jsx"; import ScrollToTop from "./components/ScrollToTop"; import AlertTemplate from "./components/AlertTemplate"; @@ -472,7 +471,7 @@ const App = (message, props) => { /> } /> - } /> + } /> { const { diff --git a/frontend/src/components/AuthenticationItem.jsx b/frontend/src/components/AuthenticationItem.jsx index eef9806c..c8add063 100644 --- a/frontend/src/components/AuthenticationItem.jsx +++ b/frontend/src/components/AuthenticationItem.jsx @@ -25,7 +25,7 @@ import { Edit as EditIcon, Delete as DeleteIcon, SelectAll as SelectAllIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; const AuthenticationItem = (props) => { const { data, index, globalUrl, getAppAuthentication } = props diff --git a/frontend/src/components/AuthenticationNormal.jsx b/frontend/src/components/AuthenticationNormal.jsx index 5d3a4fd3..d6cd8e35 100644 --- a/frontend/src/components/AuthenticationNormal.jsx +++ b/frontend/src/components/AuthenticationNormal.jsx @@ -17,7 +17,7 @@ import { import { LockOpen as LockOpenIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; const AuthenticationData = (props) => { const { diff --git a/frontend/src/components/AuthenticationWindow.jsx b/frontend/src/components/AuthenticationWindow.jsx new file mode 100755 index 00000000..49782559 --- /dev/null +++ b/frontend/src/components/AuthenticationWindow.jsx @@ -0,0 +1,476 @@ +import React, { useState, useEffect } from "react"; + +import theme from '../theme.jsx'; +import { v4 as uuidv4 } from "uuid"; +import { useAlert } from "react-alert"; + +import { + Divider, + MenuItem, + Button, + Dialog, + DialogTitle, + DialogActions, + DialogContent, + Textfield, + TextField, + Typography, + Select, + IconButton, +} from "@material-ui/core"; + +import { + LockOpen as LockOpenIcon, + Close as CloseIcon, +} from "@mui/icons-material"; + +import PaperComponent from "../components/PaperComponent.jsx" +import { useParams, useNavigate, Link } from "react-router-dom"; + +const AuthenticationData = (props) => { + const { + globalUrl, + selectedApp, + getAppAuthentication, + authenticationModalOpen, + setAuthenticationModalOpen, + + configureWorkflowModalOpen, + workflow, + setUpdate, + selectedAction, + setSelectedAction, + isLoggedIn, + authFieldsOnly, + } = props + + const alert = useAlert() + let navigate = useNavigate(); + const [submitSuccessful, setSubmitSuccessful] = useState(false) + const [authenticationOption, setAuthenticationOptions] = React.useState({ + app: JSON.parse(JSON.stringify(selectedApp)), + fields: {}, + label: "", + usage: [ + { + workflow_id: workflow === undefined ? "" : workflow.id, + }, + ], + id: uuidv4(), + active: true, + }); + + useEffect(() => { + if (isLoggedIn === false && authFieldsOnly !== true) { + navigate(`/login?view=${window.location.pathname}&message=Log in to authenticate this app`) + } + }, []) + + const setNewAppAuth = (appAuthData) => { + var headers = { + "Content-Type": "application/json", + "Accept": "application/json", + } + + // Find org_id and authorization from queries and add to headers + if (window.location.search !== "") { + const params = new URLSearchParams(window.location.search) + const org_id = params.get("org_id") + const authorization = params.get("authorization") + if (org_id !== null && authorization !== null) { + headers["Org-Id"] = org_id + headers["Authorization"] = "Bearer " + authorization + } + } + + fetch(globalUrl + "/api/v1/apps/authentication", { + method: "PUT", + headers: headers, + body: JSON.stringify(appAuthData), + credentials: "include", + }) + .then((response) => { + if (response.status !== 200) { + console.log("Status not 200 for setting app auth :O!"); + } + + return response.json(); + }) + .then((responseJson) => { + if (!responseJson.success) { + if (responseJson.reason === undefined) { + alert.error("Failed to set app auth. Are you logged in?") + } else { + alert.error("Failed to set app auth: " + responseJson.reason); + } + } else { + setSubmitSuccessful(true) + if (getAppAuthentication !== undefined) { + getAppAuthentication(true, false); + } + + if (setAuthenticationModalOpen !== undefined) { + setAuthenticationModalOpen(false) + } + } + }) + .catch((error) => { + //alert.error(error.toString()); + console.log("New auth error: ", error.toString()); + }); + }; + + if (selectedApp.authentication === undefined || selectedApp.authentication.parameters === null || + selectedApp.authentication.parameters === undefined || selectedApp.authentication.parameters.length === 0) { + + return ( + + + {selectedApp.name} does not require authentication + + + ); + } + + authenticationOption.app.actions = []; + + for (let paramkey in selectedApp.authentication.parameters) { + if ( + authenticationOption.fields[ + selectedApp.authentication.parameters[paramkey].name + ] === undefined + ) { + authenticationOption.fields[ + selectedApp.authentication.parameters[paramkey].name + ] = ""; + } + } + + const handleSubmitCheck = () => { + if (authenticationOption.label.length === 0) { + authenticationOption.label = `Auth for ${selectedApp.name}`; + } + + // Automatically mapping fields that already exist (predefined). + // Warning if fields are NOT filled + for (let paramkey in selectedApp.authentication.parameters) { + if ( + authenticationOption.fields[ + selectedApp.authentication.parameters[paramkey].name + ].length === 0 + ) { + if ( + selectedApp.authentication.parameters[paramkey].value !== undefined && + selectedApp.authentication.parameters[paramkey].value !== null && + selectedApp.authentication.parameters[paramkey].value.length > 0 + ) { + authenticationOption.fields[ + selectedApp.authentication.parameters[paramkey].name + ] = selectedApp.authentication.parameters[paramkey].value; + } else { + if ( + selectedApp.authentication.parameters[paramkey].schema.type === "bool" + ) { + authenticationOption.fields[ + selectedApp.authentication.parameters[paramkey].name + ] = "false"; + } else { + alert.info( + "Field " + + selectedApp.authentication.parameters[paramkey].name + + " can't be empty" + ); + return; + } + } + } + } + + console.log("Action: ", selectedAction); + + if (selectedAction !== undefined) { + selectedAction.authentication_id = authenticationOption.id; + selectedAction.selectedAuthentication = authenticationOption; + if ( + selectedAction.authentication === undefined || + selectedAction.authentication === null + ) { + selectedAction.authentication = [authenticationOption]; + } else { + selectedAction.authentication.push(authenticationOption); + } + + setSelectedAction(selectedAction); + } + + var newAuthOption = JSON.parse(JSON.stringify(authenticationOption)); + var newFields = []; + console.log("Fields: ", newAuthOption.fields) + for (let authkey in newAuthOption.fields) { + const value = newAuthOption.fields[authkey]; + newFields.push({ + "key": authkey, + "value": value, + }); + } + + newAuthOption.fields = newFields; + setNewAppAuth(newAuthOption); + + if (configureWorkflowModalOpen === true) { + setSelectedAction({}); + } + + if (setUpdate !== undefined) { + setUpdate(authenticationOption.id); + } + }; + + if (authenticationOption.label === null || authenticationOption.label === undefined) { + authenticationOption.label = selectedApp.name + " authentication"; + } + + const authenticationParameters = selectedApp.authentication.parameters.map((data, index) => { + return ( +
+
+ + + {data.name.replace("_basic", "", -1).replace("_", " ", -1)} + +
+ + {data.schema !== undefined && + data.schema !== null && + data.schema.type === "bool" ? ( + + ) : ( + { + authenticationOption.fields[data.name] = + event.target.value; + }} + /> + )} +
+ ); + }) + + const authenticationButtons = + + {authFieldsOnly === true ? null : + + } + + + // Check if only the auth items should show + if (authFieldsOnly === true) { + return ( +
+ {submitSuccessful === true ? + + App succesfully configured! You may close this window. + + : + + {authenticationParameters} + {authenticationButtons} + + } +
+ ) + } + + return ( + { + //if (configureWorkflowModalOpen) { + // setSelectedAction({}); + //} + setAuthenticationModalOpen(false); + }} + PaperProps={{ + style: { + pointerEvents: "auto", + backgroundColor: theme.palette.surfaceColor, + color: "white", + minWidth: 600, + minHeight: 600, + maxHeight: 600, + padding: 15, + overflow: "hidden", + zIndex: 10012, + border: theme.palette.defaultBorder, + }, + }} + > + { + setAuthenticationModalOpen(false); + if (configureWorkflowModalOpen === true) { + setSelectedAction({}); + } + }} + > + + + +
+ Authentication for {selectedApp.name} +
+ + + + What is app authentication? + +
+ These are required fields for authenticating with {selectedApp.name} +
+ Name - what is this used for? + { + authenticationOption.label = event.target.value; + }} + /> + +
+ {authenticationParameters} + + + + {authenticationButtons} + +
+ ); +}; + +export default AuthenticationData; diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx index 12ec0c1c..61084753 100644 --- a/frontend/src/components/CacheView.jsx +++ b/frontend/src/components/CacheView.jsx @@ -40,8 +40,7 @@ import { Business as BusinessIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon, -} from "@material-ui/icons"; -import data from "./frameworkStyle.jsx"; +} from "@mui/icons-material"; const scrollStyle1 = { height: 100, diff --git a/frontend/src/components/CreatorGrid.jsx b/frontend/src/components/CreatorGrid.jsx index 45e1961f..a6b6cbac 100644 --- a/frontend/src/components/CreatorGrid.jsx +++ b/frontend/src/components/CreatorGrid.jsx @@ -4,7 +4,12 @@ import ReactGA from 'react-ga4'; import { useTheme } from '@material-ui/core/styles'; import {Link} from 'react-router-dom'; -import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons'; +import { + SkipNext as SkipNextIcon, + SkipPrevious as SkipPreviousIcon, + PlayArrow as PlayArrowIcon, + VerifiedUser as VerifiedUserIcon, + Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material'; import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom'; @@ -31,14 +36,6 @@ import { AvatarGroup, } from "@mui/material" -import { - SkipNext as SkipNextIcon, - SkipPrevious as SkipPreviousIcon, - PlayArrow as PlayArrowIcon, - VerifiedUser as VerifiedUserIcon, -} from "@material-ui/icons"; - - const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240") const CreatorGrid = props => { const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props diff --git a/frontend/src/components/DocsGrid.jsx b/frontend/src/components/DocsGrid.jsx index ea20cd0e..4331c15b 100644 --- a/frontend/src/components/DocsGrid.jsx +++ b/frontend/src/components/DocsGrid.jsx @@ -4,7 +4,7 @@ import ReactGA from 'react-ga4'; import { useTheme } from '@material-ui/core/styles'; import {Link} from 'react-router-dom'; -import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons'; +import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material'; import aa from 'search-insights' import algoliasearch from 'algoliasearch/lite'; @@ -26,7 +26,7 @@ import { ListItemText, } from '@material-ui/core'; -import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons' + const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240") const DocsGrid = props => { @@ -182,7 +182,7 @@ const DocsGrid = props => { //const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : "" const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : "" - const baseImage = + const baseImage = const avatar = data.image_url === undefined ? baseImage : diff --git a/frontend/src/components/Dropzone.jsx b/frontend/src/components/Dropzone.jsx index 6ea9f0de..911bd87b 100755 --- a/frontend/src/components/Dropzone.jsx +++ b/frontend/src/components/Dropzone.jsx @@ -1,6 +1,8 @@ import React, { useRef, useState } from "react"; import { useEffect } from "react"; -import BackupIcon from "@material-ui/icons/Backup"; +import { + Backup as BackupIcon +} from "@mui/icons-material"; const dragOverStyle = { backgroundColor: "rgba(0,0,0,0.8)", diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx index 22a9d9ea..3ceaaf23 100644 --- a/frontend/src/components/EditWorkflow.jsx +++ b/frontend/src/components/EditWorkflow.jsx @@ -44,7 +44,7 @@ import { ExpandMore as ExpandMoreIcon, Publish as PublishIcon, OpenInNew as OpenInNewIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; const EditWorkflow = (props) => { const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props diff --git a/frontend/src/components/Files.jsx b/frontend/src/components/Files.jsx index a3f4e520..c2a00240 100644 --- a/frontend/src/components/Files.jsx +++ b/frontend/src/components/Files.jsx @@ -27,7 +27,7 @@ import { Publish as PublishIcon, Clear as ClearIcon, Add as AddIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; import { useAlert } from "react-alert"; import Dropzone from "../components/Dropzone.jsx"; diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx index 975df6b7..8e27de82 100644 --- a/frontend/src/components/Header.jsx +++ b/frontend/src/components/Header.jsx @@ -34,12 +34,9 @@ import { Description as DescriptionIcon, EmojiObjects as EmojiObjectsIcon, Business as BusinessIcon, -} from '@material-ui/icons'; - -import { Analytics as AnalyticsIcon, Lightbulb as LightbulbIcon, -} from "@mui/icons-material"; +} from '@mui/icons-material'; import { useAlert } from "react-alert"; diff --git a/frontend/src/components/OrgHeader.jsx b/frontend/src/components/OrgHeader.jsx index 2f1b765e..2c7e3623 100644 --- a/frontend/src/components/OrgHeader.jsx +++ b/frontend/src/components/OrgHeader.jsx @@ -9,9 +9,12 @@ import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import { useAlert } from "react-alert"; import IconButton from "@material-ui/core/IconButton"; -import ExpandLessIcon from "@material-ui/icons/ExpandLess"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import SaveIcon from "@material-ui/icons/Save"; + +import { + ExpandLess as ExpandLessIcon, + ExpandMore as ExpandMoreIcon, + Save as SaveIcon, +} from "@mui/icons-material"; const useStyles = makeStyles({ notchedOutline: { diff --git a/frontend/src/components/OrgHeaderexpanded.jsx b/frontend/src/components/OrgHeaderexpanded.jsx index f2691e54..862fa503 100644 --- a/frontend/src/components/OrgHeaderexpanded.jsx +++ b/frontend/src/components/OrgHeaderexpanded.jsx @@ -26,9 +26,11 @@ import { } from "@material-ui/core"; import IconButton from "@material-ui/core/IconButton"; -import ExpandLessIcon from "@material-ui/icons/ExpandLess"; -import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; -import SaveIcon from "@material-ui/icons/Save"; +import { + ExpandLess as ExpandLessIcon, + ExpandMore as ExpandMoreIcon, + Save as SaveIcon, +} from "@mui/icons-material"; const useStyles = makeStyles({ notchedOutline: { @@ -699,4 +701,4 @@ const OrgHeaderexpanded = (props) => { ) } -export default OrgHeaderexpanded; \ No newline at end of file +export default OrgHeaderexpanded; diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 1871dee7..964fe2d9 100755 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -5,7 +5,8 @@ import { validateJson, GetIconInfo } from "../views/Workflows.jsx"; import { GetParsedPaths } from "../views/Apps.jsx"; import { sortByKey } from "../views/AngularWorkflow.jsx"; import { useTheme } from "@material-ui/core/styles"; -import NestedMenuItem from "material-ui-nested-menu-item"; +//import NestedMenuItem from "material-ui-nested-menu-item-v5"; +import { NestedMenuItem } from "mui-nested-menu"; import { useAlert } from "react-alert"; import theme from '../theme.jsx'; diff --git a/frontend/src/components/Searchfield.js b/frontend/src/components/Searchfield.js index 43fa7934..0a86014d 100644 --- a/frontend/src/components/Searchfield.js +++ b/frontend/src/components/Searchfield.js @@ -2,7 +2,6 @@ import React, {useState, useEffect, useRef} from 'react'; import { useNavigate, Link, useParams } from "react-router-dom"; import { useTheme } from '@material-ui/core/styles'; -import SearchIcon from '@material-ui/icons/Search'; import { Chip, @@ -23,7 +22,7 @@ import { AvatarGroup, } from "@mui/material" -import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons' +import {Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon} from '@mui/icons-material' import algoliasearch from 'algoliasearch/lite'; import aa from 'search-insights' @@ -158,7 +157,7 @@ const SearchField = props => { } var type = "workflows" - const baseImage = + const baseImage = return ( diff --git a/frontend/src/components/Searchfield.jsx b/frontend/src/components/Searchfield.jsx index 37e44bd5..4a13bd8d 100644 --- a/frontend/src/components/Searchfield.jsx +++ b/frontend/src/components/Searchfield.jsx @@ -2,7 +2,6 @@ import React, {useState, useEffect, useRef} from 'react'; import { useNavigate, Link, useParams } from "react-router-dom"; import { useTheme } from '@material-ui/core/styles'; -import SearchIcon from '@material-ui/icons/Search'; import { Chip, @@ -23,7 +22,7 @@ import { AvatarGroup, } from "@mui/material" -import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons' +import {Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon} from '@mui/icons-material' import algoliasearch from 'algoliasearch/lite'; import aa from 'search-insights' @@ -162,7 +161,7 @@ const SearchField = props => { } var type = "workflows" - const baseImage = + const baseImage = return ( diff --git a/frontend/src/components/ShuffleCodeEditor.jsx b/frontend/src/components/ShuffleCodeEditor.jsx index 50b159a9..f3eccb15 100644 --- a/frontend/src/components/ShuffleCodeEditor.jsx +++ b/frontend/src/components/ShuffleCodeEditor.jsx @@ -18,7 +18,7 @@ import theme from '../theme.jsx'; import Checkbox from '@mui/material/Checkbox'; import { orange } from '@mui/material/colors'; import { isMobile } from "react-device-detect" -import NestedMenuItem from "material-ui-nested-menu-item"; +import { NestedMenuItem } from "mui-nested-menu" import { GetParsedPaths, FindJsonPath } from "../views/Apps.jsx"; import { SetJsonDotnotation } from "../views/AngularWorkflow.jsx"; diff --git a/frontend/src/components/WorkflowGrid.jsx b/frontend/src/components/WorkflowGrid.jsx index c086790d..b2c9d0be 100644 --- a/frontend/src/components/WorkflowGrid.jsx +++ b/frontend/src/components/WorkflowGrid.jsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { useTheme } from '@material-ui/core/styles'; import {Link} from 'react-router-dom'; -import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons'; +import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material'; import algoliasearch from 'algoliasearch/lite'; import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom'; diff --git a/frontend/src/components/WorkflowPaper.jsx b/frontend/src/components/WorkflowPaper.jsx index 516756d2..09cf01fc 100644 --- a/frontend/src/components/WorkflowPaper.jsx +++ b/frontend/src/components/WorkflowPaper.jsx @@ -19,7 +19,7 @@ import { Edit as EditIcon, BubbleChart as BubbleChartIcon, MoreVert as MoreVertIcon, -} from '@material-ui/icons'; +} from '@mui/icons-material'; import { useNavigate, Link, useParams } from "react-router-dom"; diff --git a/frontend/src/components/WorkflowPaperNew.jsx b/frontend/src/components/WorkflowPaperNew.jsx index 3234bdee..0efde264 100644 --- a/frontend/src/components/WorkflowPaperNew.jsx +++ b/frontend/src/components/WorkflowPaperNew.jsx @@ -20,7 +20,7 @@ import { Edit as EditIcon, BubbleChart as BubbleChartIcon, MoreVert as MoreVertIcon, -} from '@material-ui/icons'; +} from '@mui/icons-material'; import { useNavigate, Link, useParams } from "react-router-dom"; diff --git a/frontend/src/components/Workflowsearch.jsx b/frontend/src/components/Workflowsearch.jsx index 152fdd83..895d3fd0 100644 --- a/frontend/src/components/Workflowsearch.jsx +++ b/frontend/src/components/Workflowsearch.jsx @@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'; import { useTheme } from '@material-ui/core/styles'; import {Link} from 'react-router-dom'; -import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons'; +import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material'; //import algoliasearch from 'algoliasearch/lite'; import algoliasearch from 'algoliasearch'; diff --git a/frontend/src/index.js b/frontend/src/index.js index 781cb802..338dbe71 100755 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,12 +1,16 @@ import React from "react"; -import ReactDOM from "react-dom"; -import "./index.css"; +import { createRoot } from "react-dom/client"; import App from "./App"; -import * as serviceWorker from "./serviceWorker"; -ReactDOM.render(, document.getElementById("root")); +//import "./index.css"; +//import reportWebVitals from "./reportWebVitals"; -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); +const rootElement = document.getElementById("root"); +const root = createRoot(rootElement); +root.render( + + + +); + +//reportWebVitals(); diff --git a/frontend/src/views/Admin.jsx b/frontend/src/views/Admin.jsx index 2082cf2a..0b8ff7c2 100755 --- a/frontend/src/views/Admin.jsx +++ b/frontend/src/views/Admin.jsx @@ -7,9 +7,7 @@ import CodeEditor from "../components/ShuffleCodeEditor.jsx"; import getLocalCodeData from "../components/ShuffleCodeEditor.jsx"; import CacheView from "../components/CacheView.jsx"; import theme from "../theme.jsx"; -import AddIcon from "@mui/icons-material/Add"; -import ClearIcon from '@mui/icons-material/Clear'; -import StorageIcon from '@mui/icons-material/Storage'; + //import ToggleButton from '@mui/material/ToggleButton'; import { FormControl, @@ -57,7 +55,7 @@ import { OpenInNew as OpenInNewIcon, CloudDownload as CloudDownloadIcon, Description as DescriptionIcon, - Polymer as PolymerIcon, + Code as CodeIcon, CheckCircle as CheckCircleIcon, Close as CloseIcon, Apps as AppsIcon, @@ -66,13 +64,15 @@ import { Cached as CachedIcon, AccessibilityNew as AccessibilityNewIcon, Lock as LockIcon, - Eco as EcoIcon, Schedule as ScheduleIcon, Cloud as CloudIcon, Business as BusinessIcon, - Visibility as VisibilityIcon, - VisibilityOff as VisibilityOffIcon, -} from "@material-ui/icons"; + Visibility as VisibilityIcon, + VisibilityOff as VisibilityOffIcon, + Add as AddIcon, + Clear as ClearIcon, + Storage as StorageIcon, +} from "@mui/icons-material"; import { useAlert } from "react-alert"; import Dropzone from "../components/Dropzone.jsx"; @@ -182,6 +182,11 @@ const Admin = (props) => { const [billingInfo, setBillingInfo] = React.useState({}); const [selectedStatus, setSelectedStatus] = React.useState([]); + useEffect(() => { + getUsers() + }, []); + + useEffect(() => { if (isDropzone) { //redirectOpenApi(); @@ -987,6 +992,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user leads.push("student") } + if (responseJson.lead_info.internal) { + leads.push("internal") + } + setSelectedStatus(leads) } @@ -1485,10 +1494,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user }); }; - useEffect(() => { - getUsers() - }, []); - const getSettings = () => { fetch(globalUrl + "/api/v1/getsettings", { method: "GET", @@ -2186,7 +2191,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user primary: "Workflows", secondary: "", active: true, - icon: , + icon: , }, { primary: "Apps", @@ -2386,7 +2391,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user renderValue={(selected) => selected.join(', ')} MenuProps={MenuProps} > - {["contacted", "lead", "pov", "demo done", "customer", "student", ].map((name) => ( + {["contacted", "lead", "pov", "demo done", "customer", "student", "internal"].map((name) => ( -1} /> @@ -2755,7 +2760,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user item.usage === null ? 0 : item.usage, data_collection: "None", active: item.active, - icon: , + icon: , }; return ( @@ -4356,7 +4361,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user - + Environments /> diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index 36c82003..ad55179a 100755 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -10,7 +10,7 @@ import { useNavigate, Link, useParams } from "react-router-dom"; // import { Prompt } from "react-router"; // FIXME import { useBeforeunload } from "react-beforeunload"; import ReactJson from "react-json-view"; -import NestedMenuItem from "material-ui-nested-menu-item"; +import { NestedMenuItem } from "mui-nested-menu" import ReactMarkdown from "react-markdown"; import { useAlert } from "react-alert"; import theme from '../theme.jsx'; @@ -87,7 +87,7 @@ import { ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, - Polymer as PolymerIcon, + Code as CodeIcon, FormatListNumbered as FormatListNumberedIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, @@ -108,15 +108,12 @@ import { AddComment as AddCommentIcon, Edit as EditIcon, Send as SendIcon, -} from "@material-ui/icons"; - -import { Preview as PreviewIcon, ContentCopy as ContentCopyIcon, Circle as CircleIcon, SquareFoot as SquareFootIcon, AutoFixHigh as AutoFixHighIcon, -} from '@mui/icons-material'; +} from "@mui/icons-material"; import Autocomplete from "@material-ui/lab/Autocomplete"; @@ -4998,6 +4995,8 @@ const AngularWorkflow = (defaultprops) => { const edgeData = event.target.data(); if (edgeData.decorator === true) { return; + + } const cytoscapeElement = document.getElementById("cytoscape_view") @@ -12162,7 +12161,7 @@ const AngularWorkflow = (defaultprops) => { margin: "0px 0px 0px 0px", }} > - + Workflows diff --git a/frontend/src/views/AppCreator.jsx b/frontend/src/views/AppCreator.jsx index b040bb99..f9173292 100755 --- a/frontend/src/views/AppCreator.jsx +++ b/frontend/src/views/AppCreator.jsx @@ -39,11 +39,8 @@ import { ZoomInOutlined as ZoomInOutlinedIcon, ZoomOutOutlined as ZoomOutOutlinedIcon, Loop as LoopIcon, -} from "@material-ui/icons"; - -import { AddPhotoAlternate as AddPhotoAlternateIcon, -} from '@mui/icons-material'; +} from "@mui/icons-material"; import { v4 as uuidv4 } from "uuid"; import { Link, useParams } from "react-router-dom"; diff --git a/frontend/src/views/Apps.jsx b/frontend/src/views/Apps.jsx index 44c3e594..52a458be 100755 --- a/frontend/src/views/Apps.jsx +++ b/frontend/src/views/Apps.jsx @@ -46,7 +46,7 @@ import { Search as SearchIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; import { ForkRight as ForkRightIcon, diff --git a/frontend/src/views/Dashboard.jsx b/frontend/src/views/Dashboard.jsx index 15549a36..58cc7fec 100755 --- a/frontend/src/views/Dashboard.jsx +++ b/frontend/src/views/Dashboard.jsx @@ -33,7 +33,7 @@ import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon, OpenInNew as OpenInNewIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; import WorkflowPaper from "../components/WorkflowPaper.jsx" import { removeParam } from "../views/AngularWorkflow.jsx" diff --git a/frontend/src/views/DashboardViews.jsx b/frontend/src/views/DashboardViews.jsx index 19c678fa..63745485 100644 --- a/frontend/src/views/DashboardViews.jsx +++ b/frontend/src/views/DashboardViews.jsx @@ -33,7 +33,7 @@ import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon, OpenInNew as OpenInNewIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; import WorkflowPaper from "../components/WorkflowPaper.jsx" import { removeParam } from "../views/AngularWorkflow.jsx" diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx index e0d974f5..2e229d21 100755 --- a/frontend/src/views/Docs.jsx +++ b/frontend/src/views/Docs.jsx @@ -23,7 +23,7 @@ import { import { Link as LinkIcon, Edit as EditIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; const Body = { //maxWidth: 1000, diff --git a/frontend/src/views/Faq.jsx b/frontend/src/views/Faq.jsx index 42d24261..46296ea2 100644 --- a/frontend/src/views/Faq.jsx +++ b/frontend/src/views/Faq.jsx @@ -3,7 +3,7 @@ import {isMobile} from "react-device-detect"; import {Link} from 'react-router-dom'; import {Divider, List, ListItem, ListItemText, Card, CardContent, Grid, Typography, Button, ButtonGroup, FormControl, Dialog, DialogTitle, DialogActions, DialogContent, Tooltip} from '@material-ui/core'; -import {ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon} from '@material-ui/icons'; +import {ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon} from '@mui/icons-material'; const hrefStyle = { textDecoration: "none", @@ -255,4 +255,4 @@ const Faq = (props) => { ) } -export default Faq; \ No newline at end of file +export default Faq; diff --git a/frontend/src/views/GettingStarted.jsx b/frontend/src/views/GettingStarted.jsx index 87dd1be0..e6114356 100644 --- a/frontend/src/views/GettingStarted.jsx +++ b/frontend/src/views/GettingStarted.jsx @@ -58,7 +58,6 @@ import { CloudDownload as CloudDownloadIcon, } from "@mui/icons-material"; -import NestedMenuItem from "material-ui-nested-menu-item"; //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons'; //https://next.material-ui.com/components/material-icons/ @@ -1061,13 +1060,6 @@ const GettingStarted = (props) => { {"Duplicate Workflow"} - {/*= 0} style={{backgroundColor: inputColor, color: "white"}} onClick={() => { - //copyWorkflow(data) - //setOpen(false) - }} key={"duplicate"}> - - {"Copy to Child Org"} - */} { diff --git a/frontend/src/views/Landingpage.jsx b/frontend/src/views/Landingpage.jsx index ed02060f..a0de1eee 100755 --- a/frontend/src/views/Landingpage.jsx +++ b/frontend/src/views/Landingpage.jsx @@ -4,9 +4,11 @@ import Paper from "@material-ui/core/Paper"; import Button from "@material-ui/core/Button"; import Divider from "@material-ui/core/Divider"; import { BrowserView, MobileView } from "react-device-detect"; -import ScheduleIcon from "@material-ui/icons/Schedule"; -import Web from "@material-ui/icons/Web"; -import AccountTree from "@material-ui/icons/AccountTree"; +import { + Schedule as ScheduleIcon, + Web as WebIcon, + AccountTree as AccountTreeIcon, +} from "@mui/icons-material"; const bodyDivStyle = { margin: "auto", diff --git a/frontend/src/views/LandingpageNew.jsx b/frontend/src/views/LandingpageNew.jsx index 252d389c..c859beee 100755 --- a/frontend/src/views/LandingpageNew.jsx +++ b/frontend/src/views/LandingpageNew.jsx @@ -11,12 +11,14 @@ import Divider from "@material-ui/core/Divider"; import Grid from "@material-ui/core/Grid"; import { BrowserView, MobileView } from "react-device-detect"; -import ScheduleIcon from "@material-ui/icons/Schedule"; -import Web from "@material-ui/icons/Web"; -import AccountTree from "@material-ui/icons/AccountTree"; -import InfoIcon from "@material-ui/icons/Info"; -import ArrowForwardIcon from "@material-ui/icons/ArrowForward"; -import CreateIcon from "@material-ui/icons/Create"; +import { + Schedule as ScheduleIcon, + Web as WebIcon, + AccountTree as AccountTreeIcon, + Info as InfoIcon, + ArrowForward as ArrowForwardIcon, + Create as CreateIcon, +} from "@mui/icons-material"; const bodyDivStyle = { margin: "auto", @@ -86,7 +88,7 @@ const LandingPage = (props) => { "Simple integrations", "Easily use others' or create your own integration", "/docs/features", - ), @@ -94,7 +96,7 @@ const LandingPage = (props) => { "Workflows", "Access the power of automation within minutes, whether its on premise or in the cloud", "/docs/features", - ), diff --git a/frontend/src/views/Search.jsx b/frontend/src/views/Search.jsx index 942a1ec9..79ccca1a 100644 --- a/frontend/src/views/Search.jsx +++ b/frontend/src/views/Search.jsx @@ -15,10 +15,10 @@ import { import { Apps as AppsIcon, - Polymer as PolymerIcon, + Code as CodeIcon, EmojiObjects as EmojiObjectsIcon, Description as DescriptionIcon, -} from "@material-ui/icons"; +} from "@mui/icons-material"; const bodyDivStyle = { @@ -137,7 +137,7 @@ const Search = (props) => { /> - Workflows + Workflows /> { ) : null} - {userdata.priorities !== undefined && userdata.priorities !== null && userdata.priorities.length > 0 && userdata.priorities[0].name.includes("CPU") ? + {userdata.priorities !== undefined && userdata.priorities !== null && userdata.priorities.length > 0 && userdata.priorities[0].name.includes("CPU") && userdata.priorities[0].active === true ?