Fixed some of the first basic rendering issues

This commit is contained in:
Frikky
2023-08-15 21:08:35 +02:00
parent 7282185805
commit 2c140d23bd
20 changed files with 178 additions and 169 deletions
+9 -2
View File
@@ -6052,9 +6052,16 @@ func initHandlers() {
r.HandleFunc("/api/v1/orgs/{orgId}/list_cache", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/get_cache", shuffle.HandleGetCacheKey).Methods("POST", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/set_cache", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/cache/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/stats", shuffle.HandleGetStatistics).Methods("GET", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/revisions", shuffle.GetWorkflowRevisions).Methods("GET", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/cache", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/cache", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/cache/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/datastore", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/datastore", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
r.HandleFunc("/api/v1/orgs/{orgId}/datastore/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
// Docker orborus specific - downloads an image
r.HandleFunc("/api/v1/get_docker_image", getDockerImage).Methods("POST", "OPTIONS")
+3 -1
View File
@@ -13,6 +13,7 @@
"@mui/material": "^5.14.0",
"@mui/styles": "^5.14.0",
"@mui/x-data-grid": "^5.17.11",
"@mui/x-date-pickers": "^6.11.1",
"@uiw/codemirror-themes": "^4.21.7",
"@uiw/react-codemirror": "^4.21.7",
"@use-it/interval": "^1.0.0",
@@ -24,6 +25,7 @@
"cytoscape-edgehandles": "^3.6.0",
"cytoscape-node-html-label": "^1.1.5",
"d3": "^7.1.1",
"dayjs": "^1.11.9",
"dotenv": "^6.1.0",
"downshift": "^3.3.5",
"github-markdown-css": "^3.0.1",
@@ -36,11 +38,11 @@
"jss-nested": "^6.0.1",
"jss-props-sort": "^6.0.0",
"jss-vendor-prefixer": "^8.0.1",
"material-ui-chip-input": "^2.0.0-beta.2",
"md5-file": "^4.0.0",
"mdbreact": "^4.21.1",
"mime": "^3.0.0",
"moment": "^2.29.1",
"mui-chips-input": "^2.1.3",
"mui-nested-menu": "^3.2.1",
"process": "^0.11.10",
"react": "^18.2.0",
+1 -1
View File
@@ -167,7 +167,7 @@ const App = (message, props) => {
const includedData =
<div
style={{
backgroundColor: "#1F2023",
backgroundColor: theme.palette.backgroundColor,
color: "rgba(255, 255, 255, 0.65)",
minHeight: "100vh",
}}
+7 -9
View File
@@ -18,21 +18,19 @@ import {
Divider,
IconButton,
Badge,
CircularProgress,
CircularProgress,
Tooltip,
Dialog,
Chip,
Avatar,
} from "@material-ui/core";
Button,
} from "@mui/material";
import {
Button
} from '@material-ui/core';
import {
Close as CloseIcon,
Delete as DeleteIcon,
} from "@material-ui/icons";
} from "@mui/icons-material";
import * as edgehandles from "cytoscape-edgehandles";
import * as cytoscape from "cytoscape";
@@ -1996,7 +1994,7 @@ const AppFramework = (props) => {
{
Object.getOwnPropertyNames(discoveryData).length > 0 ?
<Paper style={{width: 275, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
<Paper style={{width: 300, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 25, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
{paperTitle.length > 0 ?
<span>
<Typography variant="h6" style={{textAlign: "center"}}>
@@ -2130,7 +2128,7 @@ const AppFramework = (props) => {
?
<span>
<Typography variant="body2" color="textSecondary" style={{marginTop: 10}}>
Click an app below to select it
Search to find your app
</Typography>
</span>
:
@@ -2165,7 +2163,7 @@ const AppFramework = (props) => {
elements={elements}
minZoom={0.35}
maxZoom={2.00}
style={{width: 560*scale, height: 560*scale, backgroundColor: "transparent", margin: "auto",}}
style={{width: 560*scale, height: 560*scale, backgroundColor: theme.palette.backgroundColor, margin: "auto",}}
stylesheet={frameworkStyle}
boxSelectionEnabled={false}
panningEnabled={false}
+15 -4
View File
@@ -1,14 +1,25 @@
import React, { useState, useEffect } from 'react';
import ReactGA from 'react-ga4';
import { useTheme } from '@material-ui/core/styles';
import theme from '../theme';
//import { useTheme } from '@material-ui/core/styles';
import {Link} from 'react-router-dom';
import { useAlert } from "react-alert";
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';
import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
import {
Grid,
Paper,
TextField,
ButtonBase,
InputAdornment,
Typography,
Button,
Tooltip
} from '@mui/material';
import aa from 'search-insights'
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
const Appsearch = props => {
@@ -18,7 +29,7 @@ const Appsearch = props => {
const alert = useAlert();
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
const theme = useTheme();
//const theme = useTheme();
//const [apps, setApps] = React.useState([]);
//const [filteredApps, setFilteredApps] = React.useState([]);
const [formMail, setFormMail] = React.useState("");
+4 -4
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useContext } from "react";
import theme from '../theme.jsx';
import { isMobile } from "react-device-detect"
import ChipInput from "material-ui-chip-input";
import { MuiChipsInput } from "mui-chips-input";
import UsecaseSearch from "../components/UsecaseSearch.jsx"
import dayjs from 'dayjs';
@@ -38,7 +38,7 @@ import {
FormControl,
FormLabel,
} from "@material-ui/core";
} from "@mui/material";
import {
DatePicker,
@@ -52,7 +52,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
@@ -260,7 +260,7 @@ const EditWorkflow = (props) => {
/>
</div>
<div style={{display: "flex", marginTop: 10, }}>
<ChipInput
<MuiChipsInput
style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto", }}
InputProps={{
style: {
+2 -2
View File
@@ -15,7 +15,7 @@ import {
Divider,
Select,
MenuItem,
} from "@material-ui/core";
} from "@mui/material";
import {
OpenInNew as OpenInNewIcon,
@@ -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";
+17 -14
View File
@@ -1,6 +1,7 @@
import React, {useState} from 'react';
import theme from '../theme.jsx';
import {BrowserView, MobileView} from "react-device-detect";
import { useTheme } from '@material-ui/core/styles';
//import { useTheme } from '@material-ui/core/styles';
import { useNavigate, Link } from "react-router-dom";
import ReactGA from 'react-ga4';
@@ -21,7 +22,7 @@ import {
IconButton,
Divider,
LinearProgress,
} from '@material-ui/core'
} from '@mui/material'
import {
MeetingRoom as MeetingRoomIcon,
@@ -29,12 +30,13 @@ import {
Settings as SettingsIcon,
Notifications as NotificationsIcon,
Home as HomeIcon,
Polymer as PolymerIcon,
Apps as AppsIcon,
Description as DescriptionIcon,
EmojiObjects as EmojiObjectsIcon,
Business as BusinessIcon,
} from '@material-ui/icons';
Polyline as PolylineIcon,
} from '@mui/icons-material';
import {
Analytics as AnalyticsIcon,
@@ -49,7 +51,7 @@ const hoverOutColor = "#e8eaf6"
const Header = props => {
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
const theme = useTheme();
//const theme = useTheme();
const alert = useAlert()
@@ -519,6 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
}
// Handle top bar or something
const defaultTop = 7
const loginTextBrowser = !isLoggedIn ?
<div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
<div style={{display: "flex", flex: 1, }}>
@@ -669,7 +672,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
</div>
</div>
:
<div style={{display: "flex", backgroundColor: "#1f2023",}}>
<div style={{display: "flex", }}>
<div style={{minWidth: 1250, maxWidth: 1250, display: "flex", margin: "auto", }}>
<div style={{flex: 1, flexDirection: "row"}}>
<List style={{height: 56, marginTop: "auto", marginBottom: "auto", display: "flex", flexDirect: "row", alignItems: "baseline", maxWidth: 340, }} component="nav">
@@ -691,9 +694,9 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
<Link to="/workflows" style={hrefStyle}>
<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
{/*
<PolymerIcon style={{marginRight: "5px"}} />
<PolylineIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
<Typography style={{marginTop: defaultTop, marginRight: 8, }}>Workflows</Typography>
</div>
</Link>
</ListItem>
@@ -703,7 +706,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<AppsIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0, marginRight: 5, }}>Apps</span>
<Typography style={{marginTop: defaultTop, marginRight: 5, }}>Apps</Typography>
</div>
</Link>
</ListItem>
@@ -720,7 +723,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<DescriptionIcon style={{marginRight: "5px"}} />
*/}
<span style={{marginTop: 0,}}>Docs</span>
<Typography style={{marginTop: defaultTop,}}>Docs</Typography>
</div>
</Link>
</ListItem>
@@ -1029,16 +1032,16 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
const loadedCheck =
<div style={{minHeight: 68}}>
<BrowserView>
{loginTextBrowser}
{loginTextBrowser}
</BrowserView>
<MobileView>
{loginTextMobile}
{loginTextMobile}
</MobileView>
</div>
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
return (
<div style={{backgroundColor: props.color === "undefined" ? "inherit" : props.color}}>
{loadedCheck}
<div style={{backgroundColor: theme.palette.backgroundColor, }}>
{loadedCheck}
</div>
)
}
+3 -2
View File
@@ -1,6 +1,6 @@
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import { useParams, useNavigate, Link } from "react-router-dom";
import { useTheme } from "@material-ui/core/styles";
//import { useTheme } from "@material-ui/core/styles";
import theme from '../theme.jsx';
import { useAlert } from "react-alert";
@@ -38,7 +38,8 @@ import {
CircularProgress,
Switch,
Fade,
} from "@material-ui/core";
} from "@mui/material";
import {
LockOpen as LockOpenIcon,
SupervisorAccount as SupervisorAccountIcon,
+17 -12
View File
@@ -1,17 +1,23 @@
import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import { useTheme } from "@material-ui/core/styles";
import theme from "../theme";
import { makeStyles } from "@mui/styles";
import {
Tooltip,
Grid,
Button,
TextField,
Typography,
IconButton,
} from "@mui/material";
import {
ExpandLess as ExpandLessIcon,
ExpandMore as ExpandMoreIcon,
Save as SaveIcon,
} from "@mui/icons-material";
import Tooltip from "@material-ui/core/Tooltip";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
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";
const useStyles = makeStyles({
notchedOutline: {
@@ -33,7 +39,6 @@ const OrgHeader = (props) => {
handleEditOrg,
} = props;
const theme = useTheme();
const alert = useAlert();
const classes = useStyles();
+1 -1
View File
@@ -9,7 +9,7 @@ import {
Grid,
Card,
Switch,
} from "@material-ui/core";
} from "@mui/material";
import Priority from "../components/Priority.jsx";
import { useAlert } from "react-alert";
+4 -4
View File
@@ -10,7 +10,7 @@ import {
Button,
Grid,
Card,
} from "@material-ui/core";
} from "@mui/material";
// import magic wand icon from material ui icons
import {
@@ -69,7 +69,7 @@ const Priority = (props) => {
return (
<div style={{border: priority.active === false ? "1px solid #000000" : priority.severity === 1 ? "1px solid #f85a3e" : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
<div style={{border: priority.active === false ? "1px solid #000000" : priority.severity === 1 ? "1px solid #f85a3e" : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 95, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
<div style={{flex: 2, overflow: "hidden",}}>
<span style={{display: "flex", }}>
{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, }}/> : null}
@@ -102,7 +102,7 @@ const Priority = (props) => {
}
</div>
<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
<Button style={{height: 50, borderRadius: 25, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "white", }} variant="contained" color="secondary" onClick={() => {
<Button style={{height: 50, borderRadius: 25, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
if (isCloud) {
ReactGA.event({
@@ -125,7 +125,7 @@ const Priority = (props) => {
}
}
}}>
explore
Explore
</Button>
{priority.active === true ?
<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
+5 -5
View File
@@ -615,7 +615,7 @@ const WelcomeForm = (props) => {
<Grid item xs={11} style={{marginTop: 25, }}>
{/*<FormLabel style={{ color: "#B9B9BA" }}>Find your integrations!</FormLabel>*/}
<div style={{display: "flex"}}>
<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"} style={{
<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"} color="secondary" style={{
flex: 1,
width: "100%",
padding: 25,
@@ -627,20 +627,20 @@ const WelcomeForm = (props) => {
</Button>
</div>
<div style={{display: "flex"}}>
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} onClick={(event) => { onNodeSelect("SIEM") }} >
<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} color="secondary" onClick={(event) => { onNodeSelect("SIEM") }} >
SIEM
</Button>
<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("ERADICATION") }} >
<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"} style={buttonStyle} startIcon={<NewReleasesIcon />} color="secondary" onClick={(event) => { onNodeSelect("ERADICATION") }} >
Endpoint
</Button>
</div>
<div style={{display: "flex"}}>
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<ExtensionIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<ExtensionIcon />} color="secondary" onClick={(event) => { onNodeSelect("INTEL") }} >
Intel
</Button>
<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} color="secondary" onClick={(event) => { onNodeSelect("EMAIL") }} >
Email
</Button>
</div>
+19 -18
View File
@@ -1,16 +1,14 @@
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/styles";
import theme from "../theme.jsx";
import { makeStyles } from "@mui/styles";
import { useNavigate, Link } from "react-router-dom";
import countries from "../components/Countries.jsx";
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,
InputLabel,
@@ -45,19 +43,21 @@ import {
DialogContent,
CircularProgress,
Box,
InputAdornment,
} from "@material-ui/core";
import { Autocomplete } from "@mui/material";
InputAdornment,
Autocomplete
} from "@mui/material";
import {
Add as AddIcon,
Clear as ClearIcon,
Storage as StorageIcon,
Edit as EditIcon,
FileCopy as FileCopyIcon,
SelectAll as SelectAllIcon,
OpenInNew as OpenInNewIcon,
CloudDownload as CloudDownloadIcon,
Description as DescriptionIcon,
Polymer as PolymerIcon,
Polyline as PolylineIcon,
CheckCircle as CheckCircleIcon,
Close as CloseIcon,
Apps as AppsIcon,
@@ -66,13 +66,14 @@ 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,
FmdGood as FmdGoodIcon,
} from "@mui/icons-material";
import { useAlert } from "react-alert";
import Dropzone from "../components/Dropzone.jsx";
@@ -2199,7 +2200,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
primary: "Workflows",
secondary: "",
active: true,
icon: <PolymerIcon style={{ color: itemColor }} />,
icon: <PolylineIcon style={{ color: itemColor }} />,
},
{
primary: "Apps",
@@ -2753,7 +2754,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: <PolymerIcon style={{ color: itemColor }} />,
icon: <PolylineIcon style={{ color: itemColor }} />,
};
return (
@@ -4356,7 +4357,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
<Tab
disabled={userdata.admin !== "true"}
label=<span>
<EcoIcon style={iconStyle} />
<FmdGoodIcon style={iconStyle} />
Environments
</span>
/>
+15 -28
View File
@@ -2,26 +2,21 @@
import React, { useState, useEffect, useLayoutEffect } from "react";
import ReactDOM from "react-dom"
import theme from "../theme.jsx";
import { useInterval } from "react-powerhooks";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import { makeStyles, } from "@mui/styles";
import { v4 as uuidv4 } from "uuid";
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';
import { isMobile } from "react-device-detect"
import aa from 'search-insights'
import Drift from "react-driftjs";
//import { Cron } from 'react-js-cron';
//import 'react-js-cron/dist/styles.css'
import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
@@ -67,11 +62,9 @@ import {
ListItemText,
ListItemAvatar,
Badge,
} from "@material-ui/core";
import {
AvatarGroup,
} from "@mui/material"
Autocomplete,
} from "@mui/material";
import {
Folder as FolderIcon,
@@ -87,7 +80,6 @@ import {
ArrowLeft as ArrowLeftIcon,
Cached as CachedIcon,
DirectionsRun as DirectionsRunIcon,
Polymer as PolymerIcon,
FormatListNumbered as FormatListNumberedIcon,
PlayArrow as PlayArrowIcon,
AspectRatio as AspectRatioIcon,
@@ -109,28 +101,26 @@ import {
Edit as EditIcon,
Send as SendIcon,
Restore as RestoreIcon,
} from "@material-ui/icons";
import {
Preview as PreviewIcon,
ContentCopy as ContentCopyIcon,
Circle as CircleIcon,
SquareFoot as SquareFootIcon,
AutoFixHigh as AutoFixHighIcon,
} from '@mui/icons-material';
import Autocomplete from "@material-ui/lab/Autocomplete";
Polyline as PolylineIcon,
} from "@mui/icons-material";
import * as cytoscape from "cytoscape";
import * as edgehandles from "cytoscape-edgehandles";
import * as clipboard from "cytoscape-clipboard";
//import * as clipboard from "cytoscape-clipboard";
//import undoRedo from "cytoscape-undo-redo";
//import cxtmenu from "cytoscape-cxtmenu";
import CytoscapeComponent from "react-cytoscapejs";
import undoRedo from "cytoscape-undo-redo";
import Draggable from "react-draggable";
import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
import cxtmenu from "cytoscape-cxtmenu";
import { validateJson, GetIconInfo } from "./Workflows.jsx";
import { GetParsedPaths } from "./Apps.jsx";
@@ -236,9 +226,9 @@ const inputColor = "#383B40";
// http://apps.cytoscape.org/apps/yfileslayoutalgorithms
cytoscape.use(edgehandles);
cytoscape.use(clipboard);
cytoscape.use(undoRedo);
cytoscape.use(cxtmenu);
//cytoscape.use(clipboard);
//cytoscape.use(undoRedo);
//cytoscape.use(cxtmenu);
// Adds specific text to items
//import popper from 'cytoscape-popper';
@@ -403,9 +393,6 @@ const AngularWorkflow = (defaultprops) => {
props.match = {}
props.match.params = params
//const theme = useTheme();
var to_be_copied = "";
const [firstrequest, setFirstrequest] = React.useState(true);
const [cystyle] = useState(cytoscapestyle);
@@ -12257,7 +12244,7 @@ const AngularWorkflow = (defaultprops) => {
margin: "0px 0px 0px 0px",
}}
>
<PolymerIcon style={{ marginRight: 10 }} />
<PolylineIcon style={{ marginRight: 10 }} />
Workflows
</h2>
</Link>
+3 -3
View File
@@ -45,7 +45,7 @@ import {
import { v4 as uuidv4 } from "uuid";
import { Link, useParams } from "react-router-dom";
import YAML from "yaml";
import ChipInput from "material-ui-chip-input";
import { MuiChipsInput } from "mui-chips-input";
import { useAlert } from "react-alert";
import words from "shellwords";
@@ -2925,7 +2925,7 @@ const AppCreator = (defaultprops) => {
>
Scopes for Oauth2
</Typography>
<ChipInput
<MuiChipsInput
style={{border: "2px solid #f86a3e", borderRadius: theme.palette.borderRadius,}}
required
InputProps={{
@@ -4396,7 +4396,7 @@ const AppCreator = (defaultprops) => {
})}
</Select>
<h4>Tags</h4>
<ChipInput
<MuiChipsInput
style={{ marginTop: 10 }}
InputProps={{
style: {
-6
View File
@@ -1867,12 +1867,6 @@ const Apps = (props) => {
style={{ backgroundColor: inputColor, borderRadius: 5 }}
InputProps={{
style: {
color: "white",
minHeight: "50px",
marginLeft: "5px",
maxWidth: "95%",
fontSize: "1em",
borderRadius: 5,
},
}}
disabled={
+3 -3
View File
@@ -69,7 +69,7 @@ import Dropzone from "../components/Dropzone.jsx";
import { useNavigate, Link, useParams } from "react-router-dom";
import { useAlert } from "react-alert";
import ChipInput from "material-ui-chip-input";
import { MuiChipsInput } from "mui-chips-input";
import { v4 as uuidv4 } from "uuid";
const inputColor = "#383B40";
@@ -1930,7 +1930,7 @@ const GettingStarted = (props) => {
margin="dense"
fullWidth
/>
<ChipInput
<MuiChipsInput
style={{ marginTop: 10 }}
InputProps={{
style: {
@@ -2435,7 +2435,7 @@ const GettingStarted = (props) => {
</Typography>
</div>
<div style={{ flex: 1, float: "right" }}>
<ChipInput
<MuiChipsInput
style={{}}
InputProps={{
style: {
+8 -4
View File
@@ -1,11 +1,12 @@
import React, { useState, useEffect } from 'react';
import ReactGA from 'react-ga4';
import WelcomeForm2 from "../components/WelcomeForm2.jsx";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import AppFramework from "../components/AppFramework.jsx";
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import {
ArrorForwardIos as ArrowForwardIosIcon,
} from '@mui/icons-material';
import {
Grid,
Container,
@@ -16,6 +17,9 @@ import {
Card,
CardContent,
CardActionArea,
Stepper,
Step,
StepLabel,
} from '@mui/material';
import theme from '../theme.jsx';
import { useNavigate, Link } from "react-router-dom";
+42 -46
View File
@@ -1,14 +1,10 @@
import React, { useEffect, useContext } from "react";
import ReactDOM from "react-dom"
import { makeStyles } from "@material-ui/core/styles";
import { makeStyles } from "@mui/styles";
import { Navigate } from "react-router-dom";
//import { Redirect } from "react-router-dom";
import SecurityFramework from '../components/SecurityFramework.jsx';
import EditWorkflow from "../components/EditWorkflow.jsx"
import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
import Priority from "../components/Priority.jsx";
import { isMobile } from "react-device-detect"
@@ -32,7 +28,6 @@ import {
MenuItem,
Chip,
Typography,
Zoom,
CircularProgress,
Dialog,
DialogTitle,
@@ -41,11 +36,10 @@ import {
Checkbox,
LinearProgress,
ListItemText,
} from "@material-ui/core";
import {
AvatarGroup,
} from "@mui/material"
Zoom,
} from "@mui/material";
import {
GridOn as GridOnIcon,
@@ -79,7 +73,7 @@ import {
RadioButtonUnchecked as RadioButtonUncheckedIcon,
ArrowLeft as ArrowLeftIcon,
ArrowRight as ArrowRightIcon,
} from "@material-ui/icons";
} from "@mui/icons-material";
//import NestedMenuItem from "material-ui-nested-menu-item";
//import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, 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';
@@ -93,12 +87,10 @@ import Dropzone from "../components/Dropzone.jsx";
import { useNavigate, Link } from "react-router-dom";
import { useAlert } from "react-alert";
import ChipInput from "material-ui-chip-input";
import { MuiChipsInput } from "mui-chips-input";
import { v4 as uuidv4 } from "uuid";
import theme from "../theme.jsx";
const inputColor = "#383B40";
const surfaceColor = "#27292D";
const svgSize = 24;
const imagesize = 22;
@@ -780,7 +772,7 @@ const Workflows = (props) => {
}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: 500,
padding: 30,
@@ -835,7 +827,7 @@ const Workflows = (props) => {
}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: 500,
padding: 50,
@@ -892,7 +884,7 @@ const Workflows = (props) => {
}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: 500,
},
@@ -1253,7 +1245,7 @@ const Workflows = (props) => {
width: "100%",
height: "250px",
color: "white",
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
display: "flex",
flexDirection: "column",
};
@@ -1271,7 +1263,7 @@ const Workflows = (props) => {
overflow: "hidden",
width: "100%",
color: "white",
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
padding: "12px 12px 0px 15px",
borderRadius: 5,
display: "flex",
@@ -1283,7 +1275,7 @@ const Workflows = (props) => {
height: "auto",
color: "white",
margin: "10px",
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
};
const workflowActionStyle = {
@@ -1603,7 +1595,7 @@ const Workflows = (props) => {
const innerColor = "rgba(255,255,255,0.3)";
const setupPaperStyle = {
minHeight: paperAppStyle.minHeight,
maxWidth: "100%",
maxWidth: "100%",
minWidth: paperAppStyle.width,
color: innerColor,
padding: paperAppStyle.padding,
@@ -1710,7 +1702,7 @@ const Workflows = (props) => {
}}
>
<MenuItem
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={(event) => {
event.stopPropagation()
ReactDOM.unstable_batchedUpdates(() => {
@@ -1734,7 +1726,7 @@ const Workflows = (props) => {
{"Edit details"}
</MenuItem>
<MenuItem
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => {
setSelectedWorkflow(data);
setPublishModalOpen(true);
@@ -1745,7 +1737,7 @@ const Workflows = (props) => {
{"Publish Workflow"}
</MenuItem>
<MenuItem
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => {
copyWorkflow(data);
setOpen(false);
@@ -1755,7 +1747,7 @@ const Workflows = (props) => {
<FileCopyIcon style={{ marginLeft: 0, marginRight: 8 }} />
{"Duplicate Workflow"}
</MenuItem>
{/*<NestedMenuItem disabled={userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length === 1 || userdata.orgs.length >= 0} style={{backgroundColor: inputColor, color: "white"}} onClick={() => {
{/*<NestedMenuItem disabled={userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length === 1 || userdata.orgs.length >= 0} style={{backgroundColor: theme.palette.inputColor, color: "white"}} onClick={() => {
//copyWorkflow(data)
//setOpen(false)
}} key={"duplicate"}>
@@ -1763,7 +1755,7 @@ const Workflows = (props) => {
{"Copy to Child Org"}
</NestedMenuItem>*/}
<MenuItem
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => {
setExportModalOpen(true);
@@ -1817,7 +1809,7 @@ const Workflows = (props) => {
{"Export Workflow"}
</MenuItem>
<MenuItem
style={{ backgroundColor: inputColor, color: "white" }}
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
onClick={() => {
setDeleteModalOpen(true);
setSelectedWorkflowId(data.id);
@@ -1909,7 +1901,7 @@ const Workflows = (props) => {
}
return (
<div style={{width: "100%", position: "relative",}}>
<div style={{width: "100%", position: "relative",}}>
<Paper square style={paperAppStyle}>
{selectedCategory !== "" ?
<Tooltip title={`Usecase Category: ${selectedCategory}`} placement="bottom">
@@ -2704,7 +2696,7 @@ const Workflows = (props) => {
}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: isMobile ? "90%" : "800px",
maxWidth: isMobile ? "90%" : "800px",
@@ -2760,7 +2752,7 @@ const Workflows = (props) => {
fullWidth
/>
<div style={{display: "flex", marginTop: 10, }}>
<ChipInput
<MuiChipsInput
style={{ flex: 1}}
InputProps={{
style: {
@@ -3245,7 +3237,7 @@ const Workflows = (props) => {
{isMobile ? null :
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
<div style={{ flex: 1, float: "right" }}>
<ChipInput
<MuiChipsInput
style={{}}
InputProps={{
style: {
@@ -3326,7 +3318,7 @@ const Workflows = (props) => {
{usecases.map((usecase, index) => {
//console.log(usecase)
const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length/usecase.list.length*100) : 0
console.log("Usecase Matches: ", usecase.matches, ", Percent: ", percentDone)
//console.log("Usecase Matches: ", usecase.matches, ", Percent: ", percentDone)
return (
<Paper
@@ -3461,9 +3453,11 @@ const Workflows = (props) => {
}
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
{returnData}
</Zoom>
<span>
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>*/}
{returnData}
{/*</Zoom>*/}
</span>
);
})}
</div>
@@ -3500,12 +3494,12 @@ const Workflows = (props) => {
/>
: null}
<div style={{marginTop: 15, marginBottom: 50, }}>
<div style={{marginTop: 30, marginBottom: 50, marginLeft: 30, }}>
{view === "grid" ? (
<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
<NewWorkflowPaper />
</Zoom>
{/*</Zoom>*/}
{filteredWorkflows.map((data, index) => {
// Shouldn't be a part of this list
@@ -3524,11 +3518,13 @@ const Workflows = (props) => {
}
return (
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<span>
{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
</Zoom>
{/*</Zoom>*/}
</span>
)
})}
</Grid>
@@ -3613,7 +3609,7 @@ const Workflows = (props) => {
onClose={() => {}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: "800px",
minHeight: "320px",
@@ -3640,7 +3636,7 @@ const Workflows = (props) => {
<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
Repository (supported: github, gitlab, bitbucket)
<TextField
style={{ backgroundColor: inputColor }}
style={{ backgroundColor: theme.palette.inputColor }}
variant="outlined"
margin="normal"
defaultValue={downloadUrl}
@@ -3660,7 +3656,7 @@ const Workflows = (props) => {
</span>
<div style={{ display: "flex" }}>
<TextField
style={{ backgroundColor: inputColor }}
style={{ backgroundColor: theme.palette.inputColor }}
variant="outlined"
margin="normal"
defaultValue={downloadBranch}
@@ -3681,7 +3677,7 @@ const Workflows = (props) => {
</span>
<div style={{ display: "flex" }}>
<TextField
style={{ flex: 1, backgroundColor: inputColor }}
style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
variant="outlined"
margin="normal"
InputProps={{
@@ -3697,7 +3693,7 @@ const Workflows = (props) => {
fullWidth
/>
<TextField
style={{ flex: 1, backgroundColor: inputColor }}
style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
variant="outlined"
margin="normal"
InputProps={{
@@ -3847,7 +3843,7 @@ const Workflows = (props) => {
}}
PaperProps={{
style: {
backgroundColor: surfaceColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
minWidth: 560,
minHeight: 415,