Multiple frontend & backend fixes

This commit is contained in:
Frikky
2024-01-17 14:26:53 +01:00
parent 09ab560dd5
commit 14498f1fb4
10 changed files with 735 additions and 249 deletions
+8 -6
View File
@@ -454,12 +454,9 @@ const Header = (props) => {
return response.json();
})
.then(function (responseJson) {
console.log("In here?")
if (responseJson.success === true) {
if (
responseJson.region_url !== undefined &&
responseJson.region_url !== null &&
responseJson.region_url.length > 0
) {
if (responseJson.region_url !== undefined && responseJson.region_url !== null && responseJson.region_url.length > 0) {
console.log("Region Change: ", responseJson.region_url);
localStorage.setItem("globalUrl", responseJson.region_url);
//globalUrl = responseJson.region_url
@@ -468,9 +465,14 @@ const Header = (props) => {
setTimeout(() => {
window.location.reload();
}, 2000);
toast("Successfully changed active organization - refreshing!");
} else {
toast("Failed changing org: ", responseJson.reason);
if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
toast(responseJson.reason);
} else {
toast("Failed changing org. Try again or contact support@shuffler.io if this persists.");
}
}
})
.catch((error) => {
+34 -9
View File
@@ -11,6 +11,7 @@ import { NestedMenuItem } from "mui-nested-menu";
//import { useAlert
import {
Chip,
ButtonGroup,
Popper,
TextField,
@@ -3298,14 +3299,12 @@ const ParsedAction = (props) => {
<Typography style={{color: "rgba(255,255,255,0.7)"}}>Authentication</Typography>
<div style={{ display: "flex" }}>
<Select
MenuProps={{
disableScrollLock: true,
}}
MenuProps={{
disableScrollLock: true,
}}
labelId="select-app-auth"
value={
Object.getOwnPropertyNames(
selectedAction.selectedAuthentication
).length === 0
Object.getOwnPropertyNames(selectedAction.selectedAuthentication).length === 0
? "No selection"
: selectedAction.selectedAuthentication
}
@@ -3353,7 +3352,11 @@ const ParsedAction = (props) => {
<em>No selection</em>
</MenuItem>
{selectedAction.authentication.map((data) => {
//console.log("AUTH DATA: ", data)
console.log("AUTH DATA: ", data)
if (data.last_modified === true) {
console.log("LAST MODIFIED: ", data.label)
}
return (
<MenuItem
key={data.id}
@@ -3363,7 +3366,21 @@ const ParsedAction = (props) => {
}}
value={data}
>
{data.label} - ({data.app.app_version})
{data.last_modified === true ?
<Chip
style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer",}}
label={"Latest"}
variant="outlined"
color="secondary"
/>
: null}
<Chip
style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer",}}
label={data.app.app_version}
variant="outlined"
color="secondary"
/>
{data.label}
</MenuItem>
);
})}
@@ -3449,6 +3466,14 @@ const ParsedAction = (props) => {
}}
value={data.Name}
>
{data.default === true ?
<Chip
style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer",}}
label={"Default"}
variant="outlined"
color="secondary"
/>
: null}
{data.Name}
</MenuItem>
);
@@ -3562,7 +3587,7 @@ const ParsedAction = (props) => {
options={selectedApp.actions === undefined || selectedApp.actions === null ? [] : selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
backgroundColor: theme.palette.surfaceColor,
color: "white",
},
}}
+81 -70
View File
@@ -42,14 +42,20 @@ const chipStyle = {
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
const SearchData = props => {
const { serverside, userdata, setModalOpen, modalOpen } = props
let navigate = useNavigate();
const borderRadius = 3
const node = useRef()
const [searchOpen, setSearchOpen] = useState(true)
const [searchOpen, setSearchOpen] = useState(false)
const [oldPath, setOldPath] = useState("")
const [value, setValue] = useState("");
const [userTyped, setUserTyped] = useState(false)
const handleLinkClick = () => {
if (modalOpen) {
setModalOpen(false); // Assuming setModalOpen is defined correctly
} else {
console.log("Condition not met, staying on the same page");
}
};
if (serverside === true) {
return null
@@ -72,37 +78,36 @@ const SearchData = props => {
// }, searchOpen)
const SearchBox = ({ currentRefinement, refine, isSearchStalled, }) => {
const [inputValue, setInputValue] = useState(currentRefinement);
const textFieldRef = useRef(null);
const keyPressHandler = (e) => {
// e.preventDefault();
if (e.which === 13) {
// alert("You pressed enter!");
navigate("/search?q=" + currentRefinement, { state: value, replace: true });
setSearchOpen(false)
setModalOpen(false)
return
// navigate(`/search?q=${currentRefinement}`, { state: value, replace: true });
// setModalOpen(false);
const trimmedValue = inputValue.trim();
if (trimmedValue !== '') {
e.preventDefault();
navigate(`/search?q=${trimmedValue}`, { state: trimmedValue, replace: true });
setModalOpen(false);
}
}
};
/*
endAdornment: (
<InputAdornment position="end" style={{textAlign: "right", zIndex: 5001, cursor: "pointer", width: 100, }} onMouseOver={(event) => {
event.preventDefault()
}}>
<CloseIcon style={{marginRight: 5,}} onClick={() => {
setSearchOpen(false)
}} />
</InputAdornment>
),
*/
useEffect(() => {
if (searchOpen && textFieldRef.current) {
textFieldRef.current.focus();
}
}, [searchOpen]);
return (
<form id="search_form" noValidate type="searchbox" action="" role="search" onClick={() => {
}}
>
<TextField
fullWidth
style={{ zIndex: 1100, marginTop:-20,marginBottom: 200, position:"fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
style={{ zIndex: 1100, marginTop: -20, marginBottom: 200, position: "fixed", backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: 685, }}
InputProps={{
style: {
color: "white",
@@ -130,28 +135,30 @@ const SearchData = props => {
type="search"
color="primary"
placeholder="Find Public Apps, Workflows, Documentation..."
value={currentRefinement}
onKeyDown={keyPressHandler}
value={inputValue}
id="shuffle_search_field"
onClick={(event) => {
if (!searchOpen) {
setSearchOpen(true)
setTimeout(() => {
var tarfield = document.getElementById("shuffle_search_field")
//console.log("TARFIELD: ", tarfield)
tarfield.focus()
}, 250)
if (inputValue.trim() !== '') {
setSearchOpen(true);
}
}}
onBlur={(event) => {
//setTimeout(() => {
// setSearchOpen(false)
//}, 500)
setSearchOpen(inputValue.trim() !== '')
}}
onChange={(event) => {
refine(event.currentTarget.value)
const newValue = event.target.value;
setInputValue(newValue);
refine(newValue);
if (newValue.trim() !== '') {
setSearchOpen(true);
} else {
setSearchOpen(false);
}
}}
onKeyDown={keyPressHandler}
inputRef={textFieldRef}
limit={5}
autoFocus
/>
{/*isSearchStalled ? 'My search is stalled' : ''*/}
</form>
@@ -183,8 +190,8 @@ const SearchData = props => {
const baseImage = <CodeIcon />
return (
<Card elevation={0} style={{ marginRight: 10,marginTop:50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 105 }}>
<Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 75, boxShadows: "none", }}>
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 105 }}>
Workflows
</Typography>
@@ -234,7 +241,7 @@ const SearchData = props => {
<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
//console.log("CLICK")
setSearchOpen(true)
setModalOpen(false)
aa('init', {
appId: searchClient.appId,
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
@@ -258,7 +265,6 @@ const SearchData = props => {
event.preventDefault()
window.open(parsedUrl, '_blank');
}
setModalOpen(false)
}}>
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
setMouseHoverIndex(index)
@@ -350,7 +356,7 @@ const SearchData = props => {
}}>
<CloseIcon />
</IconButton> */}
<Typography variant="h6" style={{ margin: "40px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 50 }}>
<Typography variant="h6" style={{ margin: "40px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 50 }}>
Apps
</Typography>
@@ -424,10 +430,9 @@ const SearchData = props => {
return (
<Link key={hit.objectID} to={parsedUrl} style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
console.log("CLICK")
setSearchOpen(true)
setModalOpen(false)
setModalOpen(false)
aa('init', {
appId: searchClient.appId,
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
@@ -513,13 +518,13 @@ const SearchData = props => {
//console.log(type, hits.length, hits)
return (
<Card elevation={0} style={{ marginRight: 10,marginTop:50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
<Card elevation={0} style={{ marginRight: 10, marginTop: 50, color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: "100%", left: 470, boxShadows: "none", }}>
{/* <IconButton style={{ zIndex: 5000, position: "absolute", right: 14, color: "grey" }} onClick={() => {
setSearchOpen(false)
}}>
<CloseIcon />
</IconButton> */}
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color:"#FF8444", borderBottom: "1px solid", width: 152}}>
<Typography variant="h6" style={{ margin: "10px 10px 0px 20px", color: "#FF8444", borderBottom: "1px solid", width: 152 }}>
Documentation
</Typography>
{/*
@@ -608,7 +613,7 @@ const SearchData = props => {
console.log("CLICK")
setSearchOpen(true)
setModalOpen(false)
setModalOpen(false)
}}>
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
setMouseHoverIndex(index)
@@ -636,14 +641,14 @@ const SearchData = props => {
</Card>
)
}
const gettingStartData = !searchOpen ? (
const gettingStartData = !searchOpen ? (
<Grid
container
direction="row"
alignItems="center"
// justify="space-evenly"
>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", marginTop: 70, }}>
<Grid item xs={6} style={{ alignItems: "center", flexDirection: "row", marginTop: 70, }}>
<List style={{ width: "100%", marginLeft: 10, color: "var(--Paragraph-text, #C8C8C8)" }}>
<ListItem>
<ArticleIcon style={{ marginRight: 10, display: "flex", width: 22 }} />
@@ -651,28 +656,34 @@ const SearchData = props => {
</ListItem>
<div style={{ marginLeft: 25, }}>
<ListItem>
<Link onClick={() => { window.location = "/docs"; }} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/docs" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Documentation</Typography>
<KeyboardArrowRightIcon />
</Link>
</ListItem>
<ListItem>
<Link to="https://github.com/Shuffle/Shuffle/blob/main/.github/install-guide.md" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Onprem Installation</Typography>
<a
href="https://github.com/Shuffle/Shuffle/blob/main/.github/install-guide.md"
style={{
textDecoration: "none",
color: "var(--Paragraph-text, #C8C8C8)",
display: "flex"
}}
>
<Typography variant="body1" style={{ fontSize: 16 }}>
Onprem Installation
</Typography>
<KeyboardArrowRightIcon />
</Link>
</a>
</ListItem>
<ListItem>
<Link to="/usecases" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/usecases" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Explore Usecases</Typography>
<KeyboardArrowRightIcon />
</Link>
</ListItem>
<ListItem>
<Link to="/search?tab=workflows" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/search?tab=workflows" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Find public workflows</Typography>
<KeyboardArrowRightIcon />
</Link>
@@ -688,25 +699,25 @@ const SearchData = props => {
</ListItem>
<div style={{ marginLeft: 35 }}>
<ListItem>
<Link to="/docs/app_creation" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/docs/app_creation" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Create Apps</Typography>
<KeyboardArrowRightIcon />
</Link>
</ListItem>
<ListItem>
<Link to="/apps" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/apps" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Find Apps</Typography>
<KeyboardArrowRightIcon />
</Link>
</ListItem>
<ListItem>
<Link to="/workflows" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/workflows" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Workflows</Typography>
<KeyboardArrowRightIcon />
</Link>
</ListItem>
<ListItem>
<Link to="/creators" style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Link to="/creators" onClick={handleLinkClick} style={{ textDecoration: "none", color: "var(--Paragraph-text, #C8C8C8)", display: "flex" }}>
<Typography variant="body1" style={{ fontSize: 16, }}>Creator</Typography>
<KeyboardArrowRightIcon />
</Link>
@@ -721,7 +732,7 @@ const SearchData = props => {
</Button>
</Grid>
</Grid>
): null
) : null
const CustomSearchBox = connectSearchBox(SearchBox)
const CustomAppHits = connectHits(AppHits)
@@ -731,17 +742,17 @@ const SearchData = props => {
const modalView = (
<div>
<Grid container style={{ display: "contents", }}>
<Grid item xs="auto" style={{ }}>
<Grid item xs="auto" style={{}}>
<Index indexName="appsearch">
<CustomAppHits />
</Index>
</Grid>
<Grid item xs="auto" style={{ }}>
<Grid item xs="auto" style={{}}>
<Index indexName="workflows">
<CustomWorkflowHits />
</Index>
</Grid>
<Grid item xs="auto" style={{ }}>
<Grid item xs="auto" style={{}}>
<Index indexName="documentation">
<CustomDocHits />
</Index>
@@ -753,14 +764,14 @@ const SearchData = props => {
return (
<div ref={node} style={{ width: "100%", maxWidth: "100%", margin: "auto", }}>
<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
console.log("CLICKED")
}}>
<Configure clickAnalytics />
<CustomSearchBox onClick={() => {
console.log("Click 2")
}}/>
{modalView}
<CustomSearchBox />
{modalView}
</InstantSearch>
{gettingStartData}
{gettingStartData}
</div>
)
}
+3 -3
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import theme from '../theme.jsx';
import { useNavigate, Link, useParams } from "react-router-dom";
import SearchBox from "./SearchData.jsx";
import SearchBox from "../components/SearchData.jsx";
import {
Chip,
@@ -91,8 +91,8 @@ const SearchField = props => {
}}
>
{isHeader ? <div style={{ display: "flex"}}>
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for docs, apps, workflows and more</DialogTitle>
<Button fullWidth style={{ marginLeft: 470 }} onClick={() => {
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for Docs, Apps, Workflows and more</DialogTitle>
<Button fullWidth style={{ marginLeft:180, }} onClick={() => {
setModalOpen(false);
}}><CloseIcon /></Button>
</div>
@@ -365,7 +365,6 @@ const WorkflowTemplatePopup = (props) => {
fontSize: 18,
color: "rgba(255, 132, 68, 1)",
marginTop: 32,
justifyContent: isMobile ? "center" : null,
fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
fontWeight: 550,
}}
@@ -449,7 +448,7 @@ const WorkflowTemplatePopup = (props) => {
return (
<div style={{ display: "flex", maxWidth: isCloud ? 470 : isMobile? null: 450, minWidth: isCloud ? 470 : isMobile? null: 450, height: 78, borderRadius: 8, }}>
<div style={{ display: "flex", maxWidth: isCloud ? 470 : isMobile? 345: 450, minWidth: isCloud ? 470 : isMobile? null: 450, height: 78, borderRadius: 8, }}>
<ModalView />
<div
// variant={isActive === 1 ? "contained" : "outlined"}
@@ -457,7 +456,7 @@ const WorkflowTemplatePopup = (props) => {
disabled={visualOnly === true}
style={{
margin: isHomePage ? isMobile ? null : 4 : 4 ,
width: "100%",
width: isHomePage? isMobile ? null : "100%" : "100%",
borderRadius: 8,
textTransform: "none",
backgroundColor: isHomePage ? null : theme.palette.inputColor,
@@ -503,31 +502,31 @@ const WorkflowTemplatePopup = (props) => {
<div style={{display: "flex", flex: 1, marginTop: 3, }}>
{img1 !== undefined && img1 !== "" && srcapp !== undefined && srcapp !== "" ?
<Tooltip title={srcapp.replaceAll(":default", "").replaceAll("_", " ").replaceAll(" API", "")} placement="top">
<span style={srcapp !== undefined && srcapp.includes(":default") ? imagestyleWrapperDefault : imagestyleWrapper}>
<div style={srcapp !== undefined && srcapp.includes(":default") ? imagestyleWrapperDefault : imagestyleWrapper}>
<img src={img1} style={srcapp !== undefined && srcapp.includes(":default") ? imagestyleDefault : imagestyle} />
</span>
</div>
</Tooltip>
:
<span style={{width: 50, }} />
<div style={{width: 50, }} />
}
{img2 !== undefined && img2 !== "" && dstapp !== undefined && dstapp !== "" ?
<Tooltip title={dstapp.replaceAll(":default", "").replaceAll("_", " ").replaceAll(" API", "")} placement="top">
<span style={{display: "flex", }}>
<div style={{display: "flex", }}>
<TrendingFlatIcon style={{ marginTop: 7, }} />
<span style={dstapp !== undefined && dstapp.includes(":default") ? imagestyleWrapperDefault : imagestyleWrapper}>
<div style={dstapp !== undefined && dstapp.includes(":default") ? imagestyleWrapperDefault : imagestyleWrapper}>
<img src={img2} style={dstapp !== undefined && dstapp.includes(":default") ? imagestyleDefault : imagestyle} />
</span>
</span>
</div>
</div>
</Tooltip>
:
<span style={{width: 50, }} />
<div style={{width: 50, }} />
}
</div>
<div style={{ flex: 3, marginLeft: 20, }}>
<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16,fontWeight: isHomePage? 600 : null,textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" :"rgba(241, 241, 241, 1)"}} >
{parsedTitle}
</Typography>
<Typography variant="body2" color="textSecondary" style={{ fontSize: isMobile ? 10: 16, fontWeight: isHomePage ? 400 : null, textTransform: 'capitalize', marginTop: 0, overflow: "hidden", maxHeight: 21, overflow: "hidden",}} color="rgba(158, 158, 158, 1)">
<Typography variant="body2" color="textSecondary" style={{ fontSize: isMobile ? 10: 16, fontWeight: isHomePage ? 400 : null, textTransform: 'capitalize', marginTop: 0, overflow: "hidden", maxHeight: 31,}} color="rgba(158, 158, 158, 1)">
{parsedDescription}
</Typography>
</div>