{apps.map((app, appIndex) => {
return (
{
}
if (setFrameworkData !== undefined) {
- console.log("Setting frameworkdata")
// Find discoveryData.id
var keys = []
for (const [key, value] of Object.entries(frameworkData)) {
@@ -2088,7 +2119,7 @@ const AppFramework = (props) => {
})}
)
- })}
+ })*/}
{showOptions === false ? null :
@@ -2197,7 +2228,7 @@ const AppFramework = (props) => {
if (foundelement !== undefined && foundelement !== null) {
//console.log("element: ", foundelement)
//console.log("DISC: ", discoveryData)
- foundelement.data("large_image", parsedDatatypeImages[discoveryData.id.toUpperCase()])
+ foundelement.data("large_image", parsedDatatypeImages()[discoveryData.id.toUpperCase()])
foundelement.data("text_margin_y", "14px")
foundelement.data("margin_x", "32px")
foundelement.data("margin_y", "19x")
diff --git a/frontend/src/components/AppGrid.jsx b/frontend/src/components/AppGrid.jsx
index 5bb08119..0f3fedef 100644
--- a/frontend/src/components/AppGrid.jsx
+++ b/frontend/src/components/AppGrid.jsx
@@ -1,385 +1,2051 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState, useRef } from "react";
-import theme from '../theme.jsx';
-import ReactGA from 'react-ga4';
-import {Link} from 'react-router-dom';
-import { removeQuery } from '../components/ScrollToTop.jsx';
+import theme from "../theme.jsx";
+import ReactGA from "react-ga4";
+import { Link } from "react-router-dom";
+import { removeQuery } from "../components/ScrollToTop.jsx";
+import { useMemo } from "react";
-import {
- Search as SearchIcon,
- CloudQueue as CloudQueueIcon,
- Code as CodeIcon
-} from '@mui/icons-material';
+import { Tabs, Tab, Collapse } from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import {
+ Search as SearchIcon,
+ CloudQueue as CloudQueueIcon,
+ Code as CodeIcon,
+ CollectionsOutlined,
+ CookieSharp,
+} from "@mui/icons-material";
+import { toast } from "react-toastify"
+import ClearIcon from '@mui/icons-material/Clear';
+import Box from '@mui/material/Box';
-import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch, Configure, connectSearchBox, connectHits, connectHitInsights } from 'react-instantsearch-dom';
+import CircularProgress from '@mui/material/CircularProgress';
-import aa from 'search-insights'
+import algoliasearch from "algoliasearch/lite";
+import {
+ InstantSearch,
+ Configure,
+ connectSearchBox,
+ connectHits,
+ connectHitInsights,
+ RefinementList,
+ ClearRefinements,
+ connectStateResults
+} from "react-instantsearch-dom";
-import {
- Zoom,
- Grid,
- Paper,
- TextField,
- ButtonBase,
- InputAdornment,
- Typography,
- Button,
- Tooltip
-} from '@mui/material';
+import aa from "search-insights";
+import { useLocation } from 'react-router-dom';
-const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
+import "./FilterCSS.css";
+
+import {
+ Zoom,
+ Grid,
+ Paper,
+ TextField,
+ ButtonBase,
+ InputAdornment,
+ Typography,
+ Button,
+ Tooltip,
+} from "@mui/material";
+
+const searchClient = algoliasearch(
+ "JNSS5CFDZZ",
+ "db08e40265e2941b9a7d8f644b6e5240"
+);
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
-const AppGrid = props => {
- const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, isHeader } = props
+
+const AppGrid = (props) => {
+ const {
+ maxRows,
+ showName,
+ showSuggestion,
+ isMobile,
+ globalUrl,
+ parsedXs,
+ isHeader,
+ } = 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 [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 rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows;
+ const xs =
+ parsedXs === undefined || parsedXs === null ? (isMobile ? 6 : 3) : parsedXs;
- const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
+ const [formMail, setFormMail] = React.useState("");
+ const [message, setMessage] = React.useState("");
+ const [formMessage, setFormMessage] = React.useState("");
- const innerColor = "rgba(255,255,255,0.65)"
- const borderRadius = 3
- window.title = "Shuffle | Apps | Find and integrate any app"
+ 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 noImage = "/public/no_image.png";
- 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."
+ const submitContact = (email, message) => {
+ const data = {
+ firstname: "",
+ lastname: "",
+ title: "",
+ companyname: "",
+ email: email,
+ phone: "",
+ message: message,
+ };
- 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)
- //toast("Thanks for submitting!")
- } else {
- setFormMessage(errorMessage)
- }
+ const errorMessage =
+ "Something went wrong. Please contact frikky@shuffler.io directly.";
- setFormMail("")
- setMessage("")
+ fetch(globalUrl + "/api/v1/contact", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
})
- .catch(error => {
- setFormMessage(errorMessage)
- console.log(error)
- });
- }
+ .then((response) => response.json())
+ .then((response) => {
+ if (response.success === true) {
+ setFormMessage(response.reason);
+ //toast("Thanks for submitting!")
+ } else {
+ setFormMessage(errorMessage);
+ }
- const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
- var defaultSearch = ""
- //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)
- defaultSearch = foundQuery
- }
- }
- //}, [])
+ setFormMail("");
+ setMessage("");
+ })
+ .catch((error) => {
+ setFormMessage(errorMessage);
+ console.log(error);
+ });
+ };
- return (
-
- )
- }
- var workflowDelay = -50
- const Hits = ({ hits, insights }) => {
- const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
- var counted = 0
+ //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);
+ defaultSearch = foundQuery;
+ searchQuery = foundQuery
+ }
+ }
+ //}, [])
- //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)
- //}
+ const handleSearch = () => {
+ refine(searchQuery.trim());
+ };
- return (
-
- {hits.map((data, index) => {
+ return (
+
+ );
+ };
- const paperStyle = {
- backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
- color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
- border: `1px solid ${innerColor}`,
- padding: isHeader ? null : 15,
- cursor: "pointer",
- position: "relative",
- minHeight: 116,
- }
-
- if (counted === 12/xs*rowHandler) {
- return null
- }
+ const [currTab, setCurrTab] = useState(0);
+ const location = useLocation();
- counted += 1
- var parsedname = ""
- for (var key = 0; key < data.name.length; key++) {
- var character = data.name.charAt(key)
- if (character === character.toUpperCase()) {
- //console.log(data.name[key], data.name[key+1])
- if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
- } else {
- parsedname += " "
- }
- }
+ useEffect(() => {
+ const queryParams = new URLSearchParams(location.search);
+ const tabParam = queryParams.get('tab');
+ if (tabParam === 'org_apps') {
+ setCurrTab(1);
+ } else if (tabParam === 'my_apps') {
+ setCurrTab(2);
+ } else {
+ setCurrTab(0);
+ }
+ }, [location.search]);
- parsedname += character
- }
-
- parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
- const appUrl = isCloud ? `/apps/${data.objectID}?queryID=${data.__queryID}` : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`
- return (
-
-
-
- {
- setMouseHoverIndex(index)
- /*
- ReactGA.event({
- category: "app_grid_view",
- action: `search_bar_click`,
- label: "",
- })
- */
- }} onMouseOut={() => {
- setMouseHoverIndex(-1)
- }} onClick={() => {
- if (isCloud) {
- ReactGA.event({
- category: "app_grid_view",
- action: `app_${parsedname}_${data.id}_click`,
- label: "",
- })
- }
+ const handleTabChange = (event, newTab) => {
+ setCurrTab(newTab);
+ const newQueryParam = newTab === 0 ? 'all_apps' : newTab === 1 ? 'org_apps' : 'my_apps';
+ const queryParams = new URLSearchParams(location.search);
+ queryParams.set('tab', newQueryParam);
+ queryParams.delete('q');
+ window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
+ };
- //const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
- console.log(searchClient)
- aa('init', {
- appId: searchClient.appId,
- apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
- })
- const timestamp = new Date().getTime()
- aa('sendEvents', [
- {
- eventType: 'click',
- eventName: 'Product Clicked',
- index: 'appsearch',
- objectIDs: [data.objectID],
- timestamp: timestamp,
- queryID: data.__queryID,
- positions: [data.__position],
- userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
- }
- ])
- }}>
-
- 
-
-
- {index === mouseHoverIndex || showName === true ?
- parsedname
- :
- null
- }
- {data.generated ?
-
- {data.invalid ?
-
- :
-
-
- }
-
-
-
-
- )
- })}
-
- )
- }
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [isLoading, setIsLoading] = useState(true)
- const CustomSearchBox = connectSearchBox(SearchBox)
- const CustomHits = connectHits(Hits)
- //const CustomHits = connectHitInsights(aa)(Hits)
- const selectButtonStyle = {
- minWidth: 150,
- maxWidth: 150,
- minHeight: 50,
- }
+ // Component to fetch all public app from the algolia.
+ const Hits = ({
+ hits,
+ insights,
+ setIsAnyAppActivated,
+ searchQuery
+ }) => {
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
+ var counted = 0;
+ const [hoverEffect, setHoverEffect] = useState(-1);
- return (
- Clear All }} {...rest} disabled={!hasFilters} />;
+ });
+
+ //Component to Filter all apps base on category
+ const FilterAllAppsByCategory = () => {
+ const [isCategoreListExpanded, setIsCategoreListExpanded] = useState(true);
+
+ const toggleRefinementList = () => {
+ setIsCategoreListExpanded((prevState) => !prevState);
+ };
+
+ const categoryButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ width: "100%",
+ height: 30,
+ flexDirection: "row",
+ textTransform: 'none',
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+ }
+
+ return (
+
+ );
+ };
+
+ const CustomSearchBox = connectSearchBox(SearchBox);
+ const CustomHits = connectHits(Hits);
+
+ const DisplayAllAppsTab = () => {
+ const [selectedCategoryForUsersAndOgsApps, setselectedCategoryForUsersAndOgsApps] = useState([]);
+ const [selectedTagsForUserAndOrgApps, setSelectedTagsForUserAndOrgApps] = useState([]);
+ const [selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith] = useState([]);
+
+ return (
+
- {/*
-
- )
-}
+ //check user login and get user info.
+ const [allActivatedAppIds, setAllActivatedAppIds] = useState(null);
+ const [userdata, setUserdata] = useState([]);
+
+ useEffect(() => {
+ var baseurl = globalUrl;
+ fetch(baseurl + "/api/v1/getinfo", {
+ credentials: "include",
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(response => response.json())
+ .then(responseJson => {
+ if (responseJson.success) {
+ setUserdata(responseJson);
+ setAllActivatedAppIds(responseJson.active_apps)
+ setIsLoggedIn(true);
+ } else {
+ setIsLoggedIn(false);
+ }
+ setIsLoading(false)
+ })
+ .catch(error => {
+ console.log("Failed login check: ", error);
+ });
+ }, [currTab]);
+
+ //Function for activation and deactivation of app
+ const handleActivateButton = (event, data, type) => {
+
+ //use prevent default so it will stop redirection to the app page
+ event.preventDefault();
+ if (!isLoggedIn) {
+ toast.error("Please log in to your account to activate the app.")
+ return;
+ }
+ if (type === "activate") {
+ toast.success(`The ${normalizedString(data.name)} app is activating. Please wait...`);
+ }
+ if (type === "deactivate") {
+ toast.success(`The ${normalizedString(data.name)} app is deactivating. Please wait...`);
+ }
+
+ const baseURL = globalUrl;
+ const url = `${baseURL}/api/v1/apps/${data.objectID}/${type}`;
+
+ fetch(url, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ },
+ credentials: "include",
+ })
+ .then((response) => response.json())
+ .then((responseJson) => {
+ if (responseJson.success === false) {
+ toast.error(responseJson.reason);
+ } else {
+ toast.success(`App ${type}d Successfully!`);
+ if (type === 'activate') {
+ setAllActivatedAppIds(prev => [...prev, data.objectID]);
+ setIsAnyAppActivated(true);
+ }
+ if (type === 'deactivate') {
+ const updatedIds = allActivatedAppIds.filter(id => id !== data.objectID);
+ setAllActivatedAppIds(updatedIds);
+ }
+ }
+ })
+ .catch(error => {
+ console.log("app error: ", error.toString());
+ });
+ }
+
+ let workflowDelay = 0;
+ const isHeader = true;
+ const paperStyle = {
+ color: "rgba(241, 241, 241, 1)",
+ padding: isHeader ? null : 15,
+ cursor: "pointer",
+ maxWidth: 339,
+ maxHeight: 96,
+ borderRadius: 8,
+ transition: 'background-color 0.3s ease',
+ };
+
+ const [showNoAppFound, setShowNoAppFound] = useState(false);
+
+ //show some delay to show the "App Not Found." so it doesn't not show while changing tab.
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setShowNoAppFound(true);
+ }, 1000);
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+
-
-
- */}
-
-
-
-
- {showSuggestion === true ?
-
- Search by
-
-
- ![Algolia logo]({"/images/logo-algolia-nebula-blue-full.svg"})
-
-
-
-
-
-
-
- Can't find what you're looking for?
-
- {formMessage}
-
- : null
- }
+ const normalizedString = (name) => {
+ if (typeof name === 'string') {
+ return name.replace(/_/g, ' ');
+ } else {
+ return name;
+ }
+ };
-
-
- setFormMail(e.target.value)}
- />
- setMessage(e.target.value)}
- />
-
-
-
-
-
-
+ {!isLoading ? (
+
+ )}
+
+ );
+ };
+
+ var workflowDelay = -50;
+
+ const CustomClearRefinements = connectStateResults(({ searchResults, ...rest }) => {
+ const hasFilters = searchResults && searchResults.nbHits !== searchResults.nbSortedHits;
+ return
+ {hits.length === 0 && searchQuery.length >= 0 && showNoAppFound ? (
+ No App Found
+ ) : (
+
+
+ )}
+
+ ) : (
+
+ {hits.map((data, index) => {
+ const appUrl =
+ isCloud
+ ? `/apps/${data.objectID}?queryID=${data.__queryID}`
+ : `https://shuffler.io/apps/${data.objectID}?queryID=${data.__queryID}`;
+
+ return (
+
+
+
+ {
+ setMouseHoverIndex(index);
+ }}
+ onMouseLeave={() => {
+ setMouseHoverIndex(-1);
+ }}
+ >
+
+
+
+
+
+ );
+ })
+ }
+
+
+
+
+
+
+ );
+ };
+
+ //Component to filter all apps base on Action label
+ const FilterByActionLabel = () => {
+
+ const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false);
+
+ const toogleActionLabel = () => {
+ setIsActionLabelExpanded((prevState) => !prevState);
+ };
+
+ const actionLabelButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ fontWeight: 400
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+
+ //component to filter all apps base on the created with like 'App Editor' or 'Python'
+ const FilterByCreatedWith = () => {
+ const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false);
+
+ const toogleCreatedWith = () => {
+ setIsCreatedWithExpanded((prevState) => !prevState);
+ };
+
+ const transformRefinementListItems = items =>
+ items.map(item => ({
+ ...item,
+ label: item.label === 'true' ? 'App Editor' : 'Python',
+ }));
+
+ const createdWithButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ fontWeight: 400
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ );
+ };
+
+ const FilterCreatedBy = () => {
+ const [isCreatedByExpanded, setIscreatedByExpanded] = useState(false);
+ useState(false);
+
+ const toogleCreatedBy = () => {
+ setIscreatedByExpanded((prevState) => !prevState);
+ };
+
+ const createdByButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ whiteSpace: "nowrap",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ opacity: '0.5'
+ }
+
+ return (
+
+
+
+
+
+ {isCreatedByExpanded && (
+ <>
+ {/* */}
+ */}
+
+
+ )}
+
+ );
+ };
+
+ const FilterForAllApps = () => {
+ return (
+
+
+ Filter By
+
+
+ );
+ };
+
+
+
+ const boxStyle = {
+ color: "white",
+ flex: "1",
+ marginLeft: isHeader ? null : 10,
+ marginRight: isHeader ? null : 10,
+ paddingLeft: isHeader ? null : 30,
+ paddingRight: isHeader ? null : 30,
+ paddingBottom: isHeader ? null : 30,
+ display: "flex",
+ flexDirection: "column",
+ overflowX: "visible",
+ backgroundColor: "rgba(33, 33, 33, 1)",
+ borderRadius: 16,
+ marginTop: 24,
+ width: 741,
+ height: 741,
+ };
+
+
+ //Component to display all apps.
+ const AllApps = ({ setIsAnyAppActivated }) => {
+ var [searchQuery, setSearchQuery] = useState("");
+
+ return (
+
+
+ );
+ };
+
+ //Search box for the orgs and users apps
+ const SearchBoxForOrgAndUserApp = ({ searchQuery, setSearchQuery }) => {
+
+ return (
+
+ )
+ }
+
+
+ const [userApps, setUserApps] = useState([]);
+ const [orgApps, setOrgApps] = useState([]);
+
+ useEffect(() => {
+ if (currTab === 2) {
+ const baseUrl = globalUrl;
+ const userAppsUrl = `${baseUrl}/api/v1/users/me/apps`;
+ fetch(userAppsUrl, {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setUserApps(data);
+ setIsLoading(false);
+ })
+ .catch((err) => {
+ console.error("Error fetching user apps:", err);
+ });
+ } else if (currTab === 1) {
+ const baseUrl = globalUrl;
+ const appsUrl = `${baseUrl}/api/v1/apps`;
+ fetch(appsUrl, {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ setOrgApps(data);
+ setIsLoading(false)
+ })
+ .catch((err) => {
+ console.error("Error fetching apps:", err);
+ });
+ }
+ }, [currTab]);
+ //Component to display category List for User and Orgs app
+ const FilterUsersAndOrgsAppByCategory = ({ selectedCategoryForUsersAndOgsApps, setselectedCategoryForUsersAndOgsApps }) => {
+
+ const [isCategoreListExpanded, setIsCategoryListExpanded] = useState(true);
+
+ const toogleCategoryList = () => {
+ setIsCategoryListExpanded((prevState) => !prevState);
+ };
+
+ const [appsToFilter, setAppsToFilter] = useState([]);
+ useEffect(() => {
+ if (currTab === 1) {
+ setAppsToFilter(orgApps)
+ }
+ if (currTab === 2) {
+ setAppsToFilter(userApps)
+ }
+ })
+
+ //Display top 9 category from the database
+ const findTopCategories = () => {
+ const categoryCountMap = {};
+
+ // Check if userAndOrgsApp is an array before iterating over it and Find top 10 Category from the apps
+ if (Array.isArray(appsToFilter)) {
+ appsToFilter.forEach((app) => {
+ const categories = app.categories;
+
+ if (categories && categories.length > 0) {
+ categories.forEach((category) => {
+ categoryCountMap[category] = (categoryCountMap[category] || 0) + 1;
+ });
+ }
+ });
+
+ const categoryArray = Object.keys(categoryCountMap).map((category) => ({
+ category,
+ count: categoryCountMap[category],
+ }));
+
+ categoryArray.sort((a, b) => b.count - a.count);
+
+ const topCategories = categoryArray.slice(0, 7);
+
+ return topCategories;
+ }
+ };
+
+ const topCategories = findTopCategories();
+
+ const handleCheckboxChange = (category) => {
+ if (selectedCategoryForUsersAndOgsApps.includes(category)) {
+ setselectedCategoryForUsersAndOgsApps(selectedCategoryForUsersAndOgsApps.filter((item) => item !== category));
+ } else {
+ setselectedCategoryForUsersAndOgsApps([...selectedCategoryForUsersAndOgsApps, category]);
+ }
+ };
+
+ const handleClearFilter = () => {
+ setselectedCategoryForUsersAndOgsApps([]);
+ };
+
+ const categorysButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ width: "100%",
+ height: 30,
+ flexDirection: "row",
+ textTransform: 'none',
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
+ marginBottom: isCategoreListExpanded && 10
+ }
+ return (
+
+
+
+ );
+ };
+
+ const FilterUsersAndOrgsAppByActionLabel = ({ selectedTagsForUserAndOrgApps, setSelectedTagsForUserAndOrgApps }) => {
+
+ const [isActionLabelExpanded, setIsActionLabelExpanded] = useState(false);
+ const toggleActionLabel = () => {
+ setIsActionLabelExpanded((prevState) => !prevState);
+ };
+ const [appsToFilter, setAppsToFilter] = useState([]);
+ useEffect(() => {
+ if (currTab === 1) {
+ setAppsToFilter(orgApps)
+ }
+ if (currTab === 2) {
+ setAppsToFilter(userApps)
+ }
+ })
+
+ //Find top 9 tags from the database
+ const findTopTags = () => {
+ const tagCountMap = {};
+
+ if (Array.isArray(appsToFilter)) {
+ appsToFilter.forEach((app) => {
+ const tags = app.tags;
+ if (tags && tags.length > 0) {
+ tags.forEach((tag) => {
+ tagCountMap[tag] = (tagCountMap[tag] || 0) + 1;
+ });
+ }
+ });
+ }
+
+ const tagArray = Object.keys(tagCountMap).map((tag) => ({
+ tag,
+ count: tagCountMap[tag],
+ }));
+
+ tagArray.sort((a, b) => b.count - a.count);
+
+ const topTags = tagArray.slice(0, 8);
+
+ return topTags;
+ };
+
+
+ const topTags = findTopTags();
+
+ const handleCheckboxChange = (index) => {
+ const category = topTags[index].tag;
+ const updatedCheckboxStates = [...selectedTagsForUserAndOrgApps];
+
+ if (updatedCheckboxStates.includes(category)) {
+ setSelectedTagsForUserAndOrgApps(updatedCheckboxStates.filter((item) => item !== category));
+ } else {
+ setSelectedTagsForUserAndOrgApps([...updatedCheckboxStates, category]);
+ }
+ };
+ const handleClearFilter = () => {
+ setSelectedTagsForUserAndOrgApps([]);
+ };
+
+ const actionLabelButtonStyling = {
+ cursor: 'pointer',
+ color: 'white',
+ border: 'none',
+ backgroundColor: 'transparent',
+ fontSize: 16,
+ display: 'flex',
+ width: '100%',
+ height: 30,
+ flexDirection: 'row',
+ textTransform: 'none',
+ fontFamily: 'var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)',
+ marginBottom: isActionLabelExpanded && 15
+ };
+
+ return (
+
+ {!isLoading && (
+
+
+ )}
+
+
+ {topCategories.map((data, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+ };
+
+
+
+
+ const FilterUsersAndOrgsAppByCreatedWith = ({ selectedOptionOfCreatedWith, setSelectedOptionOfCreatedWith }) => {
+
+ const [isCreatedWithExpanded, setIsCreatedWithExpanded] = useState(false);
+
+ const toogleCreatedWith = () => {
+ setIsCreatedWithExpanded((prevState) => !prevState);
+ };
+
+ const AppCreatedWithOptions = ['App Editor', 'Python']
+
+ const handleCheckboxChange = (index) => {
+ const category = AppCreatedWithOptions[index];
+ const updatedCheckboxStates = [...selectedOptionOfCreatedWith];
+ if (updatedCheckboxStates.includes(category)) {
+ setSelectedOptionOfCreatedWith(updatedCheckboxStates.filter((item) => item !== category));
+ } else {
+ setSelectedOptionOfCreatedWith([...updatedCheckboxStates, category]);
+ }
+ };
+
+
+ const handleClearFilter = () => {
+ setSelectedOptionOfCreatedWith([]);
+ };
+
+ const createdWithButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ marginBottom: isCreatedWithExpanded && 16,
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+ }
+
+ return (
+
+ {topTags && topTags.length > 0 && topTags.map((data, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+ };
+
+ const FilterUsersAndOrgsAppCreatedBy = () => {
+
+ const [isCreatedByExpanded, setIscreatedByExpanded] = useState(false);
+ useState(false);
+
+ const toogleCreatedBy = () => {
+ setIscreatedByExpanded((prevState) => !prevState);
+ };
+
+ const [isButtonDisable, setIsButtonDisable] = useState(true)
+
+ const createdByButtonStyling = {
+ cursor: "pointer",
+ color: "white",
+ border: "none",
+ backgroundColor: isButtonDisable ? '#3c3c3c. ' : "transparent",
+ fontSize: 16,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ whiteSpace: "nowrap",
+ width: "100%",
+ height: 30,
+ textTransform: 'none',
+ opacity: '0.5'
+ }
+
+ return (
+
+ {AppCreatedWithOptions.map((data, index) => (
+
+
+ ))}
+
+
+
+
+
+
+ {isCreatedByExpanded && (
+ <>
+
+ );
+ };
+
+ const FilterForUserAndOrgApps = ({ setselectedCategoryForUsersAndOgsApps, setSelectedTagsForUserAndOrgApps, setSelectedOptionOfCreatedWith, selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith }) => {
+
+ return (
+
+ {isLoggedIn === true && (
+
+ )
+ }
+
+ useEffect(() => {
+ if (currTab === 1 || currTab === 2) {
+ setIsLoading(true);
+ }
+ }, [currTab])
+
+ //Component to fetch all apps created by user and Org
+ const UserAndOrgApps = ({ selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith, setselectedCategoryForUsersAndOgsApps, setSelectedTagsForUserAndOrgApps, setSelectedOptionOfCreatedWith }) => {
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const [appsToShow, setAppsToShow] = useState([]);
+ useEffect(() => {
+ if (currTab === 1) {
+ setAppsToShow(orgApps)
+ }
+ if (currTab === 2) {
+ setAppsToShow(userApps)
+ }
+ }, [currTab])
+
+ useEffect(() => {
+ setselectedCategoryForUsersAndOgsApps([]);
+ setSelectedTagsForUserAndOrgApps([]);
+ setSelectedOptionOfCreatedWith([]);
+ }, [currTab])
+
+ //Search app base on app name, category and tag
+ const filteredUserAppdata = Array.isArray(appsToShow) ? appsToShow.filter((app) => {
+ const matchesSearchQuery = (
+ searchQuery === "" ||
+ app.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ (app.tags && app.tags.some(tag =>
+ tag.toLowerCase().includes(searchQuery.toLowerCase())
+ )) ||
+ (app.categories && app.categories.some((category) =>
+ category.toLowerCase().includes(searchQuery.toLowerCase())
+ ))
+ );
+
+ const matchesSelectedCategories = (
+ selectedCategoryForUsersAndOgsApps.length === 0 ||
+ (app.categories && app.categories.some(category =>
+ selectedCategoryForUsersAndOgsApps.includes(category)
+ ))
+ );
+ const matchesSelectedTags = (
+ selectedTagsForUserAndOrgApps.length === 0 ||
+ (app.tags && selectedTagsForUserAndOrgApps.some(tag =>
+ app.tags.includes(tag)
+ ))
+ );
+
+ const matchesSelectedOption = (
+ selectedOptionOfCreatedWith.length === 0 ||
+ selectedOptionOfCreatedWith.includes('App Editor') && app.generated === true ||
+ selectedOptionOfCreatedWith.includes('Python') && app.generated === false
+ );
+
+ return matchesSearchQuery && matchesSelectedCategories && matchesSelectedTags && matchesSelectedOption;
+ }) : [];
+
+
+ const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
+ var counted = 0;
+ const [showNoAppFound, setShowNoAppFound] = useState(false);
+
+ //show some delay to show the "App Not Found." so it doesn't not show while changing tab.
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setShowNoAppFound(true);
+ }, 1000);
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+
+
+ Filter By
+
+
+ )}
+
+ {isLoading ? (
+
+ ) : (
+
+ );
+ };
+
+
+ const AppTab = ({ selectedCategoryForUsersAndOgsApps, selectedTagsForUserAndOrgApps, selectedOptionOfCreatedWith, setselectedCategoryForUsersAndOgsApps, setSelectedTagsForUserAndOrgApps, setSelectedOptionOfCreatedWith }) => {
+ const [isAnyAppActivated, setIsAnyAppActivated] = useState(false);
+
+ return (
+
+ {isLoggedIn ? (
+ Please login to your account first to view {`${currTab === 1 ? "Organization" : "My"}`} Apps.
+ Or signup to create a new account.
+ )}
+
+ )}
+
+ No App Found
+ ) : (
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+ {filteredUserAppdata.map((data, index) => {
+ const isMouseOverOnCloudIcon = false;
+ const xs = 12;
+ const rowHandler = 12;
+ const searchClient = {};
+ const userdata = {};
+
+ const paperStyle = {
+ backgroundColor: mouseHoverIndex === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
+ color: "rgba(241, 241, 241, 1)",
+ padding: isHeader ? null : 15,
+ cursor: "pointer",
+ position: "relative",
+ width: 339,
+ height: 96,
+ borderRadius: 8,
+ };
+
+ var parsedname = "";
+ for (var key = 0; key < data.name.length; key++) {
+ var character = data.name.charAt(key);
+ if (character === character.toUpperCase()) {
+ if (
+ data.name.charAt(key + 1) !== undefined &&
+ data.name.charAt(key + 1) ===
+ data.name.charAt(key + 1).toUpperCase()
+ ) {
+ } else {
+ parsedname += " ";
+ }
+ }
+ parsedname += character;
+ }
+
+ parsedname = (
+ parsedname.charAt(0).toUpperCase() + parsedname.substring(1)
+ ).replaceAll("_", " ");
+
+ const normalizedString = (name) => {
+ if (typeof name === 'string') {
+ return name.replace(/_/g, ' ');
+ } else {
+ return name;
+ }
+ };
+
+ const appUrl =
+ isCloud === true
+ ? `/apps/${data.id}`
+ : `https://shuffler.io/apps/${data.id}`;
+
+ return (
+
+
+
+ {
+ setMouseHoverIndex(index);
+ }}
+ onMouseOut={() => {
+ setMouseHoverIndex(-1);
+ }}
+ >
+
+ 
+
+
+
+
+
+
+ );
+ })
+ }
+
+
+
+
+ {normalizedString(data.name)}
+
+
+ {data.categories !== null
+ ? normalizedString(data.categories).join(", ")
+ : "NA"}
+
+
+ {data.tags &&
+ data.tags.map((tag, tagIndex) => (
+
+ {normalizedString(tag)}
+ {tagIndex < data.tags.length - 1 ? ", " : ""}
+
+ ))}
+
+ {/* )} */}
+ + Or signup to create a new account.
+
+
+
+ {isAnyAppActivated &&
+ sx={{
+ color: currTab === 1 ? "#F86743" : "inherit",
+ border: 'none',
+ height: 44,
+ fontSize: 16,
+ flex: 1,
+ textTransform: 'none',
+ fontWeight: 400,
+ paddingBottom: 3,
+ fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)",
+ }}
+ >
+
+
+
+
+ );
+ };
+
+ return (
+
+ {currTab === 0 ? (
+
+
+
+ );
+};
export default AppGrid;
diff --git a/frontend/src/components/AppSearchButtons.jsx b/frontend/src/components/AppSearchButtons.jsx
index 553b7e41..262843ad 100644
--- a/frontend/src/components/AppSearchButtons.jsx
+++ b/frontend/src/components/AppSearchButtons.jsx
@@ -37,7 +37,7 @@ import {
} from '@mui/material';
const AppSearchButtons = (props) => {
- const { userdata, globalUrl, appFramework, moreButton, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, } = props
+ const { userdata, globalUrl, appFramework, moreButton, finishedApps, appType, totalApps, index, onNodeSelect, setDiscoveryData, appName, AppImage, setDefaultSearch, discoveryData, checkLogin, setMissing, getAppFramework, } = props
const ref = useRef()
let navigate = useNavigate();
@@ -48,8 +48,6 @@ const AppSearchButtons = (props) => {
useEffect(() => {
if (newSelectedApp !== undefined && setMissing != undefined) {
- console.log("AppSearchButtons: setMissing is defined!")
-
const submitAppFramework = {
"description": newSelectedApp.description,
"id": newSelectedApp.objectID,
@@ -60,11 +58,17 @@ const AppSearchButtons = (props) => {
setFrameworkItem(submitAppFramework)
setMissing(newSelectedApp)
+
+ if (getAppFramework !== undefined) {
+ setTimeout(() => {
+ getAppFramework()
+ }, 1000)
+ }
}
}, [newSelectedApp])
if (appType === undefined) {
- console.log("Apptype is required in AppSearchButtons")
+ //console.log("Apptype is required in AppSearchButtons")
return null;
}
diff --git a/frontend/src/components/Billing.jsx b/frontend/src/components/Billing.jsx
index 4152ce2a..e52bdce7 100644
--- a/frontend/src/components/Billing.jsx
+++ b/frontend/src/components/Billing.jsx
@@ -21,6 +21,7 @@ import {
TextField,
InputAdornment,
IconButton,
+ Chip,
Checkbox,
Tooltip,
} from "@mui/material";
@@ -39,9 +40,10 @@ import {
//import { useAlert
import { typecost, typecost_single, } from "../views/HandlePaymentNew.jsx";
import BillingStats from "../components/BillingStats.jsx";
+import { handlePayasyougo } from "../views/HandlePaymentNew.jsx"
const Billing = (props) => {
- const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
+ const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, clickedFromOrgTab } = props;
//const alert = useAlert();
let navigate = useNavigate();
@@ -118,10 +120,11 @@ const Billing = (props) => {
minHeight: 280,
maxWidth: 400,
width: "100%",
- backgroundColor: theme.palette.surfaceColor,
- borderRadius: theme.palette.borderRadius,
+ backgroundColor: theme.palette.platformColor,
+ borderRadius: theme.palette.borderRadius*2,
border: "1px solid rgba(255,255,255,0.3)",
marginRight: 10,
+ marginTop: 15,
}
const isCloud =
@@ -271,6 +274,7 @@ const Billing = (props) => {
const [signatureOpen, setSignatureOpen] = React.useState(false);
const [tosChecked, setTosChecked] = React.useState(subscription.eula_signed)
+ const [hovered, setHovered] = React.useState(false)
var top_text = "Base Cloud Access"
if (subscription.limit === undefined && subscription.level === undefined || subscription.level === null || subscription.level === 0) {
@@ -319,8 +323,16 @@ const Billing = (props) => {
newPaperstyle.border = "1px solid #f85a3e"
}
+ if (hovered) {
+ newPaperstyle.backgroundColor = theme.palette.surfaceColor
+ }
+
return (
-
+
+
+
+ Can't find what you're looking for?
+
+
+ {formMessage}
+
+
+ ) : null}
+
+ setFormMail(e.target.value)}
+ />
+ setMessage(e.target.value)}
+ />
+
+
+
+ {top_text === "Base Cloud Access" && userdata.has_card_available === true ?
+ {
+ console.log("Clicked chip")
+ }}
+ variant="outlined"
+ color="primary"
+ />
+ : null}
{top_text}
- {isCloud && highlight === true ?
+
+ {top_text === "Base Cloud Access" && userdata.has_card_available === false ?
+ 
+ : null}
+ {isCloud && highlight === true && top_text !== "Base Cloud Access" ?
{
: null}
- {(highlight === true && (subscription.name === "Pay as you go" && subscription.limit <= 10000) || subscription.name === "Open Source") ?
+ {isCloud && (highlight === true && (subscription.name === "Pay as you go" && subscription.limit <= 10000) || subscription.name === "Open Source") ?
+ : null}
+ {isCloud && highlight === true && top_text !== "Base Cloud Access" ?
+
{addDealModal}
-
- Billing
-
+ {clickedFromOrgTab?
+
+ Billing & Licensing
+ }
+ {clickedFromOrgTab?
+ {isCloud ?
+ "Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
+ :
+ "Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
+ }:
{isCloud ?
- "We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
+ "Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
:
- "Shuffle is an Open Source automation platform, and no license is required to use it. You may however activate Cloud Sync, get our Scale license, get help with Kubernetes, or talk to Shuffle's Support team to get automation help."
+ "Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
}
-
+ }
{userdata.support === true ?
-
Billing & Licensing
: +
+
For sales: Create
New Cloud Contract
@@ -912,8 +1015,16 @@ const Billing = (props) => {
:
null
}
+
+
+ {isChildOrg ?
+
+ Billing is handled by your parent organisation. Reach out to support@shuffler.io if you have questions about this.
+
+ : null}
+
- {isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null ?
+ {isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null ? isChildOrg ? null :
{
/>
: null}
+
{isCloud &&
selectedOrganization.subscriptions !== undefined &&
selectedOrganization.subscriptions !== null &&
- selectedOrganization.subscriptions.length > 0 ?
-
+ selectedOrganization.subscriptions.length > 0 &&
+ !isChildOrg ?
selectedOrganization.subscriptions
.reverse()
.map((sub, index) => {
@@ -1036,7 +1148,7 @@ const Billing = (props) => {
- {isCloud &&
+ {/*isCloud &&
selectedOrganization.partner_info !== undefined &&
selectedOrganization.partner_info.reseller === true ? (
@@ -1220,17 +1332,18 @@ const Billing = (props) => {
/>
- ) : null}
-
+ ) : null*/}
+
- Shuffle Utilization
+ Utilization & Stats
{
const AppStats = (defaultprops) => {
- const { globalUrl, selectedOrganization, userdata, isCloud, inputWorkflows, } = defaultprops;
+ const { globalUrl, selectedOrganization, userdata, isCloud, inputWorkflows,clickedFromOrgTab } = defaultprops;
const [keys, setKeys] = useState([])
const [searches, setSearches] = useState([]);
@@ -113,8 +113,6 @@ const AppStats = (defaultprops) => {
return
}
- console.log("START TIME", starttime, endtime)
-
var url = `${globalUrl}/api/v1/workflows/${workflow.id}/executions/count`
if (starttime !== "") {
@@ -178,8 +176,6 @@ const AppStats = (defaultprops) => {
const allData = Promise.all(promises);
allData.then((data) => {
- console.log("IN ALL DATA")
-
var total = 0
for (var i = 0; i < data.length; i++) {
if (data[i].runcount !== undefined) {
@@ -640,13 +636,13 @@ const AppStats = (defaultprops) => {
const data = (
-
+
All shown statistics are gathered from Your Organization Statistics
- This is a feature to help give you more insight into Shuffle, and to understand your utilization of the Shuffle platform. The billing tracker is in Beta, and is always calculated manually before being invoiced.
+ >Your Organisation Statistics.
+ It exists to give you more insight into your workflows, and to understand your utilization of the Shuffle platform. The billing tracker is in Beta, and is always calculated manually before being invoiced.
@@ -707,7 +703,7 @@ const AppStats = (defaultprops) => {
textAlign: "center",
padding: 40,
margin: 5,
- marginLeft: 90,
+ marginLeft: clickedFromOrgTab? null:90,
backgroundColor: theme.palette.platformColor,
border: "1px solid rgba(255,255,255,0.3)",
maxWidth: 300,
diff --git a/frontend/src/components/Branding.jsx b/frontend/src/components/Branding.jsx
index 9dd40791..48466476 100644
--- a/frontend/src/components/Branding.jsx
+++ b/frontend/src/components/Branding.jsx
@@ -15,7 +15,7 @@ import {
//import { useAlert
const Branding = (props) => {
- const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
+ const { globalUrl, userdata, serverside, billingInfo,clickedFromOrgTab, stripeKey, selectedOrganization, handleGetOrg, } = props;
//const alert = useAlert();
const [publishingInfo, setPublishingInfo] = useState("");
const [publishRequirements, setPublishRequirements] = useState([])
@@ -103,8 +103,8 @@ const Branding = (props) => {
}
return (
-
-
+
+
+
Branding
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 89cde359..434b604a 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -1,9 +1,10 @@
import React, { useState, useEffect } from "react";
import theme from "../theme.jsx";
-import { toast } from 'react-toastify';
-import ReactJson from "react-json-view";
-
+import { toast } from 'react-toastify';
+import ReactJson from "react-json-view";
+
import {
+ Typography,
Tooltip,
Divider,
TextField,
@@ -21,6 +22,8 @@ import {
} from "@mui/material";
import {
+ Link as LinkIcon,
+ AutoFixHigh as AutoFixHighIcon,
Edit as EditIcon,
FileCopy as FileCopyIcon,
SelectAll as SelectAllIcon,
@@ -43,7 +46,7 @@ import {
Visibility as VisibilityIcon,
VisibilityOff as VisibilityOffIcon,
} from "@mui/icons-material";
-import { validateJson, } from "../views/Workflows.jsx";
+import { validateJson, } from "../views/Workflows.jsx";
const scrollStyle1 = {
height: 100,
@@ -61,9 +64,9 @@ const scrollStyle2 = {
overflow: "scroll",
}
-
+
const CacheView = (props) => {
- const { globalUrl, userdata, serverside, orgId } = props;
+ const { globalUrl, userdata, serverside, orgId, isSelectedDataStore } = props;
const [orgCache, setOrgCache] = React.useState("");
const [listCache, setListCache] = React.useState([]);
const [addCache, setAddCache] = React.useState("");
@@ -76,10 +79,9 @@ const CacheView = (props) => {
const [dataValue, setDataValue] = React.useState({});
const [editCache, setEditCache] = React.useState(false);
const [show, setShow] = useState({});
-
+
useEffect(() => {
listOrgCache(orgId);
- console.log("orgid", orgId);
}, []);
const listOrgCache = (orgId) => {
@@ -91,84 +93,47 @@ const CacheView = (props) => {
},
credentials: "include",
})
- .then((response) => {
- if (response.status !== 200) {
- console.log("Status not 200 for apps :O!");
- return;
- }
+ .then((response) => {
+ if (response.status !== 200) {
+ console.log("Status not 200 for list cache :O!");
+ return;
+ }
- return response.json();
- })
- .then((responseJson) => {
- if (responseJson.success === true) {
- setListCache(responseJson.keys);
- }
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.success === true) {
+ setListCache(responseJson.keys);
+ }
- if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") {
- setCacheCursor(responseJson.cursor);
- }
- })
- .catch((error) => {
- toast(error.toString());
- });
+ if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") {
+ setCacheCursor(responseJson.cursor);
+ }
+ })
+ .catch((error) => {
+ toast(error.toString());
+ });
};
- // const getCacheList = (orgId) => {
- // fetch(`${globalUrl}/api/v1/orgs/${orgId}/get_cache`, {
- // method: "GET",
- // headers: {
- // "Content-Type": "application/json",
- // Accept: "application/json",
- // },
- // credentials: "include",
- // })
- // .then((response) => {
- // if (response.status !== 200) {
- // console.log("Status not 200 for WORKFLOW EXECUTION :O!");
- // }
-
-
- // return response.json();
- // })
- // .then((responseJson) => {
- // if (responseJson.success !== false) {
- // console.log("Found cache: ", responseJson)
- // setListCache(responseJson)
- // } else {
- // console.log("Couldn't find the creator profile (rerun?): ", responseJson)
- // // If the current user is any of the Shuffle Creators
- // // AND the workflow doesn't have an owner: allow editing.
- // // else: Allow suggestions?
- // //console.log("User: ", userdata)
- // //if (rerun !== true) {
- // // getUserProfile(userdata.id, true)
- // //}
- // }
- // })
- // .catch((error) => {
- // console.log("Get userprofile error: ", error);
- // })
- // }
-
const deleteCache = (orgId, key) => {
toast("Attempting to delete Cache");
-
+
// method: "DELETE",
- const method = "POST"
- //const url = `${globalUrl}/api/v1/orgs/${orgId}/cache/${key}`
- const url = `${globalUrl}/api/v1/orgs/${orgId}/delete_cache`
- const parsed = {
- "org_id": orgId,
- "key": key,
- }
-
+ const method = "POST"
+ //const url = `${globalUrl}/api/v1/orgs/${orgId}/cache/${key}`
+ const url = `${globalUrl}/api/v1/orgs/${orgId}/delete_cache`
+ const parsed = {
+ "org_id": orgId,
+ "key": key,
+ }
+
fetch(url, {
- method: method,
+ method: method,
headers: {
Accept: "application/json",
},
- body: JSON.stringify(parsed),
+ body: JSON.stringify(parsed),
credentials: "include",
})
.then((response) => {
@@ -189,8 +154,6 @@ const CacheView = (props) => {
const editOrgCache = (orgId) => {
const cache = { key: dataValue.key , value: value };
setCacheInput([cache]);
- console.log("cache:", cache)
- console.log("cache input: ", cacheInput)
fetch(globalUrl + `/api/v1/orgs/${orgId}/set_cache`, {
@@ -255,6 +218,20 @@ const CacheView = (props) => {
});
};
+ const isValidJson = validateJson(value)
+ const autoFixJson = (inputvalue) => {
+ console.log("inputvalue: ", inputvalue)
+ try {
+ var parsedjson = JSON.parse(inputvalue)
+
+ // setValue() with the parsed json as string
+ setValue(JSON.stringify(parsedjson, null, 2))
+ } catch (e) {
+ console.log("Error parsing JSON: ", e)
+ //return JSON.stringify(inputvalue);
+ }
+ }
+
const modalView = (
// console.log("key:", dataValue.key),
//console.log("value:",dataValue.value),
@@ -301,33 +278,54 @@ const CacheView = (props) => {
onChange={(e) => setKey(e.target.value)}
/>
-
- Value
+
+
+
+ Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
+
+
+ {
+ autoFixJson(value)
+ }}
+ >
+
+
+
setValue(e.target.value)}
/>
Branding
+ setValue(e.target.value)}
/>
+
+ Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
+
+
+ {
+ autoFixJson(value)
+ }}
+ >
+
+
+