diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx index c1dd6fdd..3937345e 100644 --- a/frontend/src/views/Workflows2.jsx +++ b/frontend/src/views/Workflows2.jsx @@ -647,7 +647,8 @@ const Workflows2 = (props) => { const [selectedCategory, setSelectedCategory] = useState([]); const [selectedLabel, setSelectedLabel] = useState([]); const [mouseHoverIndex, setMouseHoverIndex] = useState(-1); - const [isLoading, setIsLoading] = useState(false); + const [isLoadingWorkflow, setIsLoadingWorkflow] = useState(false); + const [isLoadingPublicWorkflow, setIsLoadingPublicWorkflow] = useState(false); const [view, setView] = useState("grid"); const classes = useStyles(theme) const imgSize = 60; @@ -710,6 +711,15 @@ const Workflows2 = (props) => { document.title = "Shuffle - Workflows"; const handleTabChange = (event, newValue) => { + // Set loading when switching to public workflows tab + if (newValue === 2) { + setIsLoadingPublicWorkflow(true); + // Simulate loading time for the Algolia search results + setTimeout(() => { + setIsLoadingPublicWorkflow(false); + }, 2000); + } + setCurrTab(newValue); }; @@ -2044,42 +2054,42 @@ const Workflows2 = (props) => { }; const getWorkflowAppgroup = (data) => { - if(currTab !== 2){ + if (currTab !== 2) { if (data.actions === undefined || data.actions === null) { return [] } - + var appsFound = [] for (var key in data.actions) { const parsedAction = data.actions[key] if (parsedAction.large_image === undefined || parsedAction.large_image === null || parsedAction.large_image === "") { continue } - + if (parsedAction.app_name === "Shuffle Tools" || parsedAction.app_id === "bc78f35c6c6351b07a09b7aed5d29652") { continue } - + if (appsFound.findIndex(data => data.app_name === parsedAction.app_name) < 0) { appsFound.push(parsedAction) } } - }else{ + } else { if (data.action_references === undefined || data.action_references === null) { return [] } - + var appsFound = [] for (var key in data.action_references) { const parsedAction = data.action_references[key] if (parsedAction.image_url === undefined || parsedAction.image_url === null || parsedAction.image_url === "") { continue } - - if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "3e2bdf9d5069fe3f4746c29d68785a6a") { + + if (parsedAction.name === "Shuffle Tools" || parsedAction.id === "bc78f35c6c6351b07a09b7aed5d29652") { continue } - + if (appsFound.findIndex(data => data.name === parsedAction.name) < 0) { appsFound.push(parsedAction) } @@ -2090,7 +2100,7 @@ const Workflows2 = (props) => { } const WorkflowPaper = (props) => { - const { data, type="org" } = props; + const { data, type = "org" } = props; const [open, setOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -2120,7 +2130,6 @@ const Workflows2 = (props) => { const actions = data.actions !== null ? data.actions.length : 0; const appGroup = getWorkflowAppgroup(data) - console.log("appgroup", appGroup) const [triggers, subflows] = getWorkflowMeta(data) const hasSuborgs = data.suborg_distribution !== undefined && data.suborg_distribution !== null && data.suborg_distribution.length > 0 @@ -2242,7 +2251,7 @@ const Workflows2 = (props) => { ); var image = ""; - + var orgName = ""; var orgId = ""; if (userdata.orgs !== undefined) { @@ -2366,9 +2375,9 @@ const Workflows2 = (props) => { */ }} title={ -
@@ -2379,25 +2388,25 @@ const Workflows2 = (props) => { overflow: "hidden", border: `1px solid ${theme.palette.inputColor}`, }}> - {data.name}
) : null} - + Edit: {data.name} - + {(isDistributed || hasSuborgs) && (
{ }} > -
{ // } useEffect(() => { - console.log("CurrTab: ", currTab) - console.log("Workflows: ", workflows) if (userdata !== undefined && userdata !== null) { + var filteredWorkflows = [] + setIsLoadingWorkflow(true); if (currTab === 0) { - const orgWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id) - setFilteredWorkflows(orgWorkflows) + filteredWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id) } else if (currTab === 1) { - const myWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id && workflow?.owner === userdata?.id) - setFilteredWorkflows(myWorkflows) + filteredWorkflows = workflows.filter(workflow => workflow?.org_id === userdata?.active_org?.id && workflow?.owner === userdata?.id) } - } else { - setFilteredWorkflows([]) + setFilteredWorkflows(filteredWorkflows) + setIsLoadingWorkflow(false); } }, [currTab, workflows, userdata]) + useEffect(() => { + console.log("SearchQuery: ", searchQuery) + }, [searchQuery]) + const Hits = ({ hits }) => { var counted = 0 console.log("Public workflows", hits) + + if (isLoadingPublicWorkflow) { + return ( +
+ +
+ ); + } + return (
{hits.map((data, index) => { return @@ -3816,6 +3836,11 @@ const Workflows2 = (props) => { const CustomHits = connectHits(Hits) + + const handleCategoryChange = (e) => { + setSelectedCategory(e.target.value) + } + const WorkflowView = memo(() => { if (workflows.length === 0) { } @@ -4009,46 +4034,84 @@ const Workflows2 = (props) => {
- setSearchQuery(e.target.value)} - style={{ flex: 0.7, borderRadius: 8 }} - InputProps={{ - style: { borderRadius: 8 }, - endAdornment: ( - - {searchQuery.length === 0 ? : - setSearchQuery('')} - /> - } - - ), + color="primary" + value={filters} + onChange={(chips) => { + console.log("CHANGE: ", chips); + setFilters(chips); + findWorkflow(chips); }} + style={{ flex: 0.9, borderRadius: 8 }} + // style={searchStyle} + //onAdd={(chip) => { + // console.log("ADd: ", chip); + // addFilter(chip); + //}} + //onDelete={(_, index) => { + // console.log("Remove: ", index); + // removeFilter(index); + //}} /> + +
{ {submitLoading ? : } - + (upload = ref)} + onChange={importFiles} + /> + { width: '55px', height: '55px', }} - onClick={() => {/* Add export handling */ }} + disabled={isCloud} + variant="text" + onClick={() => { + exportAllWorkflows(workflows); + }} > @@ -4124,8 +4199,8 @@ const Workflows2 = (props) => { onClick={handleCreateWorkflow} style={{ height: "56px", - borderRadius: 7, - flex: 0.7, + borderRadius: 8, + flex: 0.8, textTransform: 'none', }} @@ -4139,37 +4214,50 @@ const Workflows2 = (props) => {
- {view === "grid" && currTab !== 2 ? ( -
- {filteredWorkflows.map((data, index) => { - // Shouldn't be a part of this list - if (data.public === true) { - return null - } + { + isLoadingWorkflow ? ( +
+ +
+ ) : ( + view === "grid" && currTab !== 2 ? ( + <> +
- if (firstLoad) { - workflowDelay += 75 - } else { - return - } - return ( - - {/**/} - - {/**/} - - ) - })} -
- ) : ( - currTab !== 2 && - )} + + {filteredWorkflows.map((data, index) => { + // Shouldn't be a part of this list + if (data.public === true) { + return null + } + + if (firstLoad) { + workflowDelay += 75 + } else { + return + } + + return ( + + {/**/} + + {/**/} + + ) + })} +
+ + ) : ( + currTab !== 2 && + ) + ) + } { currTab === 2 && @@ -4261,7 +4349,7 @@ const Workflows2 = (props) => { onClose={() => { }} PaperProps={{ style: { - backgroundColor: theme.palette.surfaceColor, + backgroundColor: theme.palette.surfaceColor, color: "white", minWidth: "800px", minHeight: "320px", @@ -4322,8 +4410,8 @@ const Workflows2 = (props) => { onChange={(e) => setDownloadBranch(e.target.value)} placeholder="master" fullWidth - /> -
+ /> +
Authentication (optional - private repos etc): @@ -4475,7 +4563,7 @@ const Workflows2 = (props) => { setVideoViewOpen(true) }}> Watch 2-min introduction video - +
{gettingStartedItems.map((item, index) => {