+ {/*
+
+ )
+}
+
+export default AppGrid;
diff --git a/frontend/src/components/CreatorGrid.jsx b/frontend/src/components/CreatorGrid.jsx
new file mode 100644
index 00000000..bc9bad64
--- /dev/null
+++ b/frontend/src/components/CreatorGrid.jsx
@@ -0,0 +1,261 @@
+import React, { useEffect, useState } from 'react';
+
+import ReactGA from 'react-ga';
+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 algoliasearch from 'algoliasearch/lite';
+import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
+import {
+ Grid,
+ Paper,
+ TextField,
+ ButtonBase,
+ InputAdornment,
+ Typography,
+ Button,
+ Tooltip,
+ Card,
+ Box,
+ CardContent,
+ IconButton,
+ Zoom,
+ CardMedia,
+ CardActionArea,
+} from '@material-ui/core';
+
+import {
+ SkipNext as SkipNextIcon,
+ SkipPrevious as SkipPreviousIcon,
+ PlayArrow as PlayArrowIcon,
+} from "@material-ui/icons";
+
+import WorkflowPaper from "../components/WorkflowPaper.jsx"
+
+const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
+const CreatorGrid = props => {
+ const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
+ const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
+ const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
+ const theme = useTheme();
+ //const [apps, setApps] = React.useState([]);
+ //const [filteredApps, setFilteredApps] = React.useState([]);
+ const [formMail, setFormMail] = React.useState("");
+ const [message, setMessage] = React.useState("");
+ const [formMessage, setFormMessage] = React.useState("");
+
+ const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
+
+ const innerColor = "rgba(255,255,255,0.65)"
+ const borderRadius = 3
+ window.title = "Shuffle | Workflows | Discover your use-case"
+
+ const submitContact = (email, message) => {
+ const data = {
+ "firstname": "",
+ "lastname": "",
+ "title": "",
+ "companyname": "",
+ "email": email,
+ "phone": "",
+ "message": message,
+ }
+
+ const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
+
+ fetch(globalUrl+"/api/v1/contact", {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ })
+ .then(response => response.json())
+ .then(response => {
+ if (response.success === true) {
+ setFormMessage(response.reason)
+ //alert.info("Thanks for submitting!")
+ } else {
+ setFormMessage(errorMessage)
+ }
+
+ setFormMail("")
+ setMessage("")
+ })
+ .catch(error => {
+ setFormMessage(errorMessage)
+ console.log(error)
+ });
+ }
+
+ // value={currentRefinement}
+ const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
+ useEffect(() => {
+ if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
+ const urlSearchParams = new URLSearchParams(window.location.search)
+ const params = Object.fromEntries(urlSearchParams.entries())
+ const foundQuery = params["q"]
+ if (foundQuery !== null && foundQuery !== undefined) {
+ refine(foundQuery)
+ }
+ }
+ }, [])
+
+ return (
+
+ )
+ }
+
+ const paperAppContainer = {
+ display: "flex",
+ flexWrap: "wrap",
+ alignContent: "space-between",
+ marginTop: 5,
+ }
+
+ var workflowDelay = -50
+ const Hits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
+ var counted = 0
+
+ return (
+
+
+
+ */}
+
+
+
+
+ {showSuggestion === true ?
+
+ Search by
+
+
+ ![Algolia logo]({"/images/logo-algolia-nebula-blue-full.svg"})
+
+
+
+
+
+
+
+ Can't find what you're looking for?
+
+ {formMessage}
+
+ : null
+ }
+
+
+
+ setFormMail(e.target.value)}
+ />
+ setMessage(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+ {showSuggestion === true ?
+
+ Search by
+
+
+
+
+
+
+ )
+}
+
+export default CreatorGrid;
diff --git a/frontend/src/components/DocsGrid.jsx b/frontend/src/components/DocsGrid.jsx
new file mode 100644
index 00000000..a2aa63c3
--- /dev/null
+++ b/frontend/src/components/DocsGrid.jsx
@@ -0,0 +1,340 @@
+import React, {useEffect, useState} from 'react';
+
+import ReactGA from 'react-ga';
+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 algoliasearch from 'algoliasearch/lite';
+import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
+import {
+ Zoom,
+ Grid,
+ Paper,
+ TextField,
+ ButtonBase,
+ InputAdornment,
+ Typography,
+ Button,
+ Tooltip
+} from '@material-ui/core';
+
+const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
+const DocsGrid = props => {
+ const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
+ const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
+ const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
+ const theme = useTheme();
+ //const [apps, setApps] = React.useState([]);
+ //const [filteredApps, setFilteredApps] = React.useState([]);
+ const [formMail, setFormMail] = React.useState("");
+ const [message, setMessage] = React.useState("");
+ const [formMessage, setFormMessage] = React.useState("");
+
+ const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
+
+ const innerColor = "rgba(255,255,255,0.65)"
+ const borderRadius = 3
+ window.title = "Shuffle | Apps | Find and integrate any app"
+
+ const submitContact = (email, message) => {
+ const data = {
+ "firstname": "",
+ "lastname": "",
+ "title": "",
+ "companyname": "",
+ "email": email,
+ "phone": "",
+ "message": message,
+ }
+
+ const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
+
+ fetch(globalUrl+"/api/v1/contact", {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ })
+ .then(response => response.json())
+ .then(response => {
+ if (response.success === true) {
+ setFormMessage(response.reason)
+ //alert.info("Thanks for submitting!")
+ } else {
+ setFormMessage(errorMessage)
+ }
+
+ setFormMail("")
+ setMessage("")
+ })
+ .catch(error => {
+ setFormMessage(errorMessage)
+ console.log(error)
+ });
+ }
+
+ const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
+ useEffect(() => {
+ if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
+ const urlSearchParams = new URLSearchParams(window.location.search)
+ const params = Object.fromEntries(urlSearchParams.entries())
+ const foundQuery = params["q"]
+ if (foundQuery !== null && foundQuery !== undefined) {
+ console.log("Got query: ", foundQuery)
+ refine(foundQuery)
+ }
+ }
+ }, [])
+
+ return (
+
+ )
+ }
+
+ var workflowDelay = -50
+ const Hits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
+ var counted = 0
+ //console.log(hits)
+ //var curhits = hits
+ //if (hits.length > 0 && defaultApps.length === 0) {
+ // setDefaultApps(hits)
+ //}
+
+ //const [defaultApps, setDefaultApps] = React.useState([])
+ //console.log(hits)
+ //if (hits.length > 0 && hits.length !== innerHits.length) {
+ // setInnerHits(hits)
+ //}
+
+ return (
+
+
+
+
+ Can't find what you're looking for?
+
+ {formMessage}
+
+ : null
+ }
+
+
+
+ setFormMail(e.target.value)}
+ />
+ setMessage(e.target.value)}
+ />
+
+
+
+
+
+
+ {/*
+
+ )
+}
+
+export default DocsGrid;
diff --git a/frontend/src/components/EditWorkflow.jsx b/frontend/src/components/EditWorkflow.jsx
new file mode 100644
index 00000000..786fc3b5
--- /dev/null
+++ b/frontend/src/components/EditWorkflow.jsx
@@ -0,0 +1,331 @@
+import React, { useEffect, useContext } from "react";
+import theme from '../theme';
+import { isMobile } from "react-device-detect"
+import ChipInput from "material-ui-chip-input";
+
+import {
+ Badge,
+ Avatar,
+ Grid,
+ InputLabel,
+ Select,
+ ListSubheader,
+ Paper,
+ Tooltip,
+ Divider,
+ Button,
+ TextField,
+ FormControl,
+ IconButton,
+ Menu,
+ MenuItem,
+ FormControlLabel,
+ Chip,
+ Switch,
+ Typography,
+ Zoom,
+ CircularProgress,
+ Dialog,
+ DialogTitle,
+ DialogActions,
+ DialogContent,
+ OutlinedInput,
+ Checkbox,
+ ListItemText,
+} from "@material-ui/core";
+
+import {
+ ExpandLess as ExpandLessIcon,
+ ExpandMore as ExpandMoreIcon,
+ Publish as PublishIcon,
+} from "@material-ui/icons";
+
+const EditWorkflow = (props) => {
+ const { workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, } = props
+
+ const [submitLoading, setSubmitLoading] = React.useState(false);
+ const [selectedUsecases, setSelectedUsecases] = React.useState([]);
+ const [showMoreClicked, setShowMoreClicked] = React.useState(false);
+ const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
+ const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
+ const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
+
+ if (workflow === undefined || workflow.id === undefined || setWorkflow === undefined || modalOpen !== true) {
+ return null
+ }
+
+ var upload = "";
+ var total_count = 0
+
+ return (
+
+ )
+}
+
+export default EditWorkflow;
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 7a7ae609..82696474 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -39,6 +39,7 @@ import {
} from "@mui/icons-material";
//import LogoutIcon from '@mui/icons-material/Logout';
import { useAlert } from "react-alert";
+import SearchField from '../components/Searchfield'
const hoverColor = "#f85a3e";
const hoverOutColor = "#e8eaf6";
@@ -506,7 +507,7 @@ const Header = (props) => {
//
+
+
+ */}
+
+
+
+
+ {showSuggestion === true ?
+
+ Search by
+
+
+
+
+
+
+
+
+
+
+ Can't find what you're looking for?
+
+ {formMessage}
+
+ : null
+ }
+
+
+
+ setFormMail(e.target.value)}
+ />
+ setMessage(e.target.value)}
+ />
+
+
+
+
+
+
const loginTextBrowser = !isLoggedIn ? (
-
-
+
{
-
+ {!isLoaded ? null :
+ userdata.chat_disabled === true ? null :
+
) : (
+
+ }
+ - {
-
+
-
-
{
{
*/}
-
+
{
*/}
+ {!isLoaded ? null :
+ userdata.chat_disabled === true ? null :
+
+
+ }
{avatarMenu}
{notificationMenu}
diff --git a/frontend/src/components/Searchfield.js b/frontend/src/components/Searchfield.js
new file mode 100644
index 00000000..502b16ec
--- /dev/null
+++ b/frontend/src/components/Searchfield.js
@@ -0,0 +1,586 @@
+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,
+ IconButton,
+ TextField,
+ InputAdornment,
+ List,
+ Card,
+ ListItem,
+ ListItemAvatar,
+ ListItemText,
+ Avatar,
+ Typography,
+ Tooltip,
+} from '@material-ui/core';
+
+import {
+ AvatarGroup,
+} from "@mui/material"
+
+import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
+
+import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
+//import { InstantSearch, SearchBox, Hits, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
+
+// https://www.algolia.com/doc/api-reference/widgets/search-box/react/
+//const searchClient = algoliasearch("WIC466KTV8", "fff61b6ae3802ec2b47fed9ab50b532e")
+const chipStyle = {
+ backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white",
+}
+
+const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
+//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
+const SearchField = props => {
+ const { serverside, } = props
+ const theme = useTheme();
+ let navigate = useNavigate();
+ const borderRadius = 3
+ const node = useRef()
+ const [searchOpen, setSearchOpen] = useState(false)
+ const [oldPath, setOldPath] = useState("")
+
+ if (serverside === true) {
+ return null
+ }
+
+ if (window !== undefined && window.location !== undefined && window.location.pathname === "/search") {
+ return null
+ }
+
+ const isCloud =
+ window.location.host === "localhost:3002" ||
+ window.location.host === "shuffler.io";
+
+ if (window.location.pathname !== oldPath) {
+ setSearchOpen(false)
+ setOldPath(window.location.pathname)
+ }
+
+ //useEffect(() => {
+ // if (searchOpen) {
+ // var tarfield = document.getElementById("shuffle_search_field")
+ // tarfield.focus()
+ // }
+ //}, searchOpen)
+
+ const SearchBox = ({currentRefinement, refine, isSearchStalled, } ) => {
+
+ /*
+ endAdornment: (
+ {
+ event.preventDefault()
+ }}>
+ {
+ setSearchOpen(false)
+ }} />
+
+ ),
+ */
+
+ return (
+
+ )
+ }
+
+ const WorkflowHits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
+
+ var tmp = searchOpen
+ if (!searchOpen) {
+ return null
+ }
+
+
+ const positionInfo = document.activeElement.getBoundingClientRect()
+ const outerlistitemStyle = {
+ width: "100%",
+ overflowX: "hidden",
+ overflowY: "hidden",
+ borderBottom: "1px solid rgba(255,255,255,0.4)",
+ }
+
+ if (hits.length > 4) {
+ hits = hits.slice(0, 4)
+ }
+
+ var type = "workflows"
+ const baseImage =
+
+ Workflows
+
+
+
+ See all workflows
+
+
+
+ */}
+
+ )
+ }
+
+ const AppHits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
+
+ var tmp = searchOpen
+ if (!searchOpen) {
+ return null
+ }
+
+ const positionInfo = document.activeElement.getBoundingClientRect()
+ const outerlistitemStyle = {
+ width: "100%",
+ overflowX: "hidden",
+ overflowY: "hidden",
+ borderBottom: "1px solid rgba(255,255,255,0.4)",
+ }
+
+ if (hits.length > 4) {
+ hits = hits.slice(0, 4)
+ }
+
+ var type = "app"
+ const baseImage =
+ {
+ setSearchOpen(false)
+ }}>
+
+
+ Apps
+
+
+
+ See more
+
+
+
+
+ )
+ }
+
+ const DocHits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(0)
+
+ var tmp = searchOpen
+ if (!searchOpen) {
+ return null
+ }
+
+
+ const positionInfo = document.activeElement.getBoundingClientRect()
+ const outerlistitemStyle = {
+ width: "100%",
+ overflowX: "hidden",
+ overflowY: "hidden",
+ borderBottom: "1px solid rgba(255,255,255,0.4)",
+ }
+
+ if (hits.length > 4) {
+ hits = hits.slice(0, 4)
+ }
+
+ const type = "documentation"
+ const baseImage =
+ {
+ setSearchOpen(false)
+ }}>
+
+
+ Documentation
+
+ {/*
+ {
+ setSearchOpen(false)
+ }}>
+
+ */}
+
+ Search by
+
+
+
+
+
+ : null}
+
+ )
+ }
+
+ const CustomSearchBox = connectSearchBox(SearchBox)
+ const CustomAppHits = connectHits(AppHits)
+ const CustomWorkflowHits = connectHits(WorkflowHits)
+ const CustomDocHits = connectHits(DocHits)
+
+ return (
+
+ {hits.map((data, index) => {
+ workflowDelay += 50
+
+ return (
+
+
+
+
+ )
+ })}
+
+ )
+ }
+
+ const CustomSearchBox = connectSearchBox(SearchBox)
+ const CustomHits = connectHits(Hits)
+
+ return (
+
-
+ {hits.length === 0 ?
+
+
+ {appGroup.map((app, index) => {
+ // Putting all this in secondary of ListItemText looked weird.
+ return (
+
+
+ {/*
+ {
+ navigate("/apps/"+app.id)
+ }}
+ >
+
+
+
+ )
+ })}
+ -
+ {hits.length === 0 ?
+
-
+ {hits.length === 0 ?
+
+
+
+ : null}
+
+ {
+ console.log("CLICKED")
+ }}>
+
+
+
+
+
+
+
+
+ )
+}
+
+export default SearchField;
diff --git a/frontend/src/components/WorkflowGrid.jsx b/frontend/src/components/WorkflowGrid.jsx
new file mode 100644
index 00000000..f639bce3
--- /dev/null
+++ b/frontend/src/components/WorkflowGrid.jsx
@@ -0,0 +1,360 @@
+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 algoliasearch from 'algoliasearch/lite';
+import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
+import {
+ Grid,
+ Paper,
+ TextField,
+ ButtonBase,
+ InputAdornment,
+ Typography,
+ Button,
+ Tooltip,
+ Zoom,
+ Chip,
+} from '@material-ui/core';
+
+import WorkflowPaper from "../components/WorkflowPaper.jsx"
+
+const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
+const AppGrid = props => {
+ const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
+
+ const isCloud =
+ window.location.host === "localhost:3002" ||
+ window.location.host === "shuffler.io";
+
+ const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
+ const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
+ const theme = useTheme();
+ //const [apps, setApps] = React.useState([]);
+ //const [filteredApps, setFilteredApps] = React.useState([]);
+ const [formMail, setFormMail] = React.useState("");
+ const [message, setMessage] = React.useState("");
+ const [formMessage, setFormMessage] = React.useState("");
+ const [usecases, setUsecases] = React.useState([]);
+
+ const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
+
+ const innerColor = "rgba(255,255,255,0.65)"
+ const borderRadius = 3
+ window.title = "Shuffle | Workflows | Discover your use-case"
+
+ const submitContact = (email, message) => {
+ const data = {
+ "firstname": "",
+ "lastname": "",
+ "title": "",
+ "companyname": "",
+ "email": email,
+ "phone": "",
+ "message": message,
+ }
+
+ const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
+
+ fetch(globalUrl+"/api/v1/contact", {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ })
+ .then(response => response.json())
+ .then(response => {
+ if (response.success === true) {
+ setFormMessage(response.reason)
+ //alert.info("Thanks for submitting!")
+ } else {
+ setFormMessage(errorMessage)
+ }
+
+ setFormMail("")
+ setMessage("")
+ })
+ .catch(error => {
+ setFormMessage(errorMessage)
+ console.log(error)
+ });
+ }
+
+ const handleKeysetting = (categorydata, workflows) => {
+ console.log("Workflows: ", workflows)
+ //workflows[0].category = ["detect"]
+ //workflows[0].usecase_ids = ["Correlate tickets"]
+
+ if (workflows !== undefined && workflows !== null) {
+ const newcategories = []
+ for (var key in categorydata) {
+ var category = categorydata[key]
+ category.matches = []
+
+ for (var subcategorykey in category.list) {
+ var subcategory = category.list[subcategorykey]
+ subcategory.matches = []
+
+ for (var workflowkey in workflows) {
+ const workflow = workflows[workflowkey]
+
+ if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
+ for (var usecasekey in workflow.usecase_ids) {
+ if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory.name.toLowerCase()) {
+ console.log("Got match: ", workflow.usecase_ids[usecasekey])
+
+ category.matches.push({
+ "workflow": workflow.id,
+ "category": subcategory.name,
+ })
+ subcategory.matches.push(workflow.id)
+ break
+ }
+ }
+ }
+
+ if (subcategory.matches.length > 0) {
+ break
+ }
+ }
+ }
+
+ newcategories.push(category)
+ }
+
+ console.log("Categories: ", newcategories)
+ setUsecases(newcategories)
+ } else {
+ for (var key in categorydata) {
+ categorydata[key].matches = []
+ }
+ setUsecases(categorydata)
+ }
+ }
+
+ const fetchUsecases = (workflows) => {
+ fetch(globalUrl + "/api/v1/workflows/usecases", {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status !== 200) {
+ console.log("Status not 200 for usecases");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.success !== false) {
+ console.log("Usecases: ", responseJson)
+ //handleKeysetting(responseJson, workflows)
+ }
+ })
+ .catch((error) => {
+ //alert.error("ERROR: " + error.toString());
+ console.log("ERROR: " + error.toString());
+ });
+ };
+
+ useEffect(() => {
+ fetchUsecases()
+ }, [])
+
+ // value={currentRefinement}
+ const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
+ useEffect(() => {
+ if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
+ const urlSearchParams = new URLSearchParams(window.location.search)
+ const params = Object.fromEntries(urlSearchParams.entries())
+ const foundQuery = params["q"]
+ if (foundQuery !== null && foundQuery !== undefined) {
+ console.log("Got query: ", foundQuery)
+ refine(foundQuery)
+ }
+ }
+ }, [])
+
+ return (
+
+ )
+ }
+
+ const paperAppContainer = {
+ display: "flex",
+ flexWrap: "wrap",
+ alignContent: "space-between",
+ marginTop: 5,
+ }
+
+ var workflowDelay = -50
+ const Hits = ({ hits }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
+ var counted = 0
+
+
+ return (
+
+
+
+
+ {showSuggestion === true ?
+
+ Search by
+
+
+
+
+
+
+ )
+}
+
+export default AppGrid;
diff --git a/frontend/src/components/WorkflowPaper.jsx b/frontend/src/components/WorkflowPaper.jsx
index 5d3b68cb..21a9d7ea 100644
--- a/frontend/src/components/WorkflowPaper.jsx
+++ b/frontend/src/components/WorkflowPaper.jsx
@@ -91,6 +91,11 @@ const WorkflowPaper = (props) => {
}
//console.log("IMG: ", data)
+ var parsedUrl = `workflows/${data.objectID}`
+
+ if (data.__queryID !== undefined && data.__queryID !== null) {
+ parsedUrl += `?queryID=${data.__queryID}`
+ }
return (
+
+ {usecases !== null && usecases !== undefined && usecases.length > 0 ?
+
+ {usecases.map((usecase, index) => {
+ console.log(usecase)
+ return (
+ {
+ console.log("Clicked!")
+ //addFilter(usecase.name.slice(3,usecase.name.length))
+ }}
+ variant="outlined"
+ color="primary"
+ />
+ )
+ })}
+
+ : null}
+
+
+ Can't find what you're looking for?
+
+ {formMessage}
+
+ : null
+ }
+
+
+
+ setFormMail(e.target.value)}
+ />
+ setMessage(e.target.value)}
+ />
+
+
+
+
+
+
@@ -134,7 +139,7 @@ const WorkflowPaper = (props) => {
}}
>
{parsedName}
diff --git a/frontend/src/views/Search.jsx b/frontend/src/views/Search.jsx
new file mode 100644
index 00000000..8ee8a186
--- /dev/null
+++ b/frontend/src/views/Search.jsx
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from "react";
+
+import theme from '../theme';
+import {isMobile} from "react-device-detect";
+import AppGrid from "../components/AppGrid.jsx"
+import WorkflowGrid from "../components/WorkflowGrid.jsx"
+import CreatorGrid from "../components/CreatorGrid.jsx"
+import DocsGrid from "../components/DocsGrid.jsx"
+import { useNavigate, Link } from "react-router-dom";
+
+import {
+ Tabs,
+ Paper,
+ Tab,
+} from "@material-ui/core";
+
+import {
+ Business as BusinessIcon,
+ Apps as AppsIcon,
+ Polymer as PolymerIcon,
+ EmojiObjects as EmojiObjectsIcon,
+ Description as DescriptionIcon,
+} from "@material-ui/icons";
+
+
+const bodyDivStyle = {
+ margin: "auto",
+ maxWidth: 1024,
+ scrollX: "hidden",
+ overflowX: "hidden",
+}
+
+const boxStyle = {
+ color: "white",
+ flex: "1",
+ marginLeft: 10,
+ marginRight: 10,
+ paddingLeft: 30,
+ paddingRight: 30,
+ paddingBottom: 30,
+ paddingTop: 30,
+ display: "flex",
+ flexDirection: "column",
+ overflowX: "hidden",
+ minHeight: 400,
+}
+
+// Should be different if logged in :|
+const Search = (props) => {
+ const { globalUrl, isLoaded, serverside, userdata } = props;
+ let navigate = useNavigate();
+
+ const [curTab, setCurTab] = useState(0);
+ const iconStyle = { marginRight: 10 };
+
+ const views = {
+ 0: "apps",
+ 1: "workflows",
+ 2: "docs",
+ 3: "creators",
+ }
+
+ const setConfig = (event, inputValue) => {
+ const newValue = parseInt(inputValue)
+ console.log("NEW: ", newValue)
+
+ setCurTab(newValue)
+ if (newValue === 0) {
+ document.title = "Shuffle - search - apps";
+ } else if (newValue === 1) {
+ document.title = "Shuffle - search - workflows";
+ } else if (newValue === 2) {
+ document.title = "Shuffle - search - documentation";
+ } else if (newValue === 3) {
+ document.title = "Shuffle - search - creators";
+ } else {
+ document.title = "Shuffle - search";
+ }
+
+
+ const urlSearchParams = new URLSearchParams(window.location.search)
+ const params = Object.fromEntries(urlSearchParams.entries())
+ const foundQuery = params["q"]
+ var extraQ = ""
+ if (foundQuery !== null && foundQuery !== undefined) {
+ extraQ = "&q="+foundQuery
+ }
+
+ navigate(`/search?tab=${views[newValue]}`+extraQ)
+ }
+
+ useEffect(() => {
+ if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
+ const urlSearchParams = new URLSearchParams(window.location.search)
+ const params = Object.fromEntries(urlSearchParams.entries())
+ const foundTab = params["tab"]
+ if (foundTab !== null && foundTab !== undefined) {
+ for (var key in Object.keys(views)) {
+ const value = views[key]
+ console.log(key, value)
+ if (value === foundTab) {
+ setConfig("", key)
+ break
+ }
+ }
+ }
+ }
+ }, [])
+
+ if (isLoaded === false) {
+ return null
+ }
+
+
+ // Random names for type & autoComplete. Didn't research :^)
+ const landingpageDataBrowser =
+
+
+
+ const loadedCheck = isLoaded ?
+
+
+
+
+
+
+
+ {curTab === 0 ?
+
+
+
+ :
+ {landingpageDataBrowser}
+
+
+
+ // #1f2023?
+ return(
+
+ {loadedCheck}
+
+ )
+}
+
+export default Search;