+
+
+
+ );
+});
+
+export default ApiExplorer;
+
+
+const ActionResponseAndRequest = memo(({ConfigurationTab, selectedAppData,actions, info, HandleApiExecution, userdata, filteredActions, setFilteredActions, serverurl, globalUrl, setSelectedActionIndex, ExampleBody, setExampleBody, selectedActionIndex}) => {
+ const [apiResponse, setApiResponse] = useState({});
+ const [isLoading, setIsLoading] = useState(false);
+ const loadAction = 10;
+ const loadedAction = useRef(null);
+
+ const loadMoreActions = useCallback(() => {
+ if (isLoading || filteredActions.length >= actions.length) return;
+
+ setIsLoading(true);
+
+ setFilteredActions((prevActions) => {
+ const newActions = actions.slice(prevActions.length, prevActions.length + loadAction);
+ setIsLoading(false);
+ return [...prevActions, ...newActions];
+ });
+ }, [isLoading, actions.length, filteredActions.length, loadAction]);
+
+ // Scroll position reference
+ const scrollPosition = useRef(0);
+
+ // Handle scroll event with debounce
+ const handleScroll = useCallback(() => {
+ const actionContainer = loadedAction.current;
+ if (
+ actionContainer &&
+ actionContainer.scrollTop + actionContainer.clientHeight >= actionContainer.scrollHeight - 10
+ ) {
+ loadMoreActions();
+ }
+ scrollPosition.current = actionContainer?.scrollTop || 0;
+ }, [loadMoreActions]);
+
+ // Add scroll event listener on mount and remove on unmount
+ useEffect(() => {
+ const actionContainer = loadedAction.current;
+ if (actionContainer) {
+ actionContainer.addEventListener("scroll", handleScroll);
+ }
+ return () => {
+ if (actionContainer) {
+ actionContainer.removeEventListener("scroll", handleScroll);
+ }
+ };
+ }, [handleScroll]);
+
+
+ // Restore scroll position when the component rerenders or new items are added
+ useEffect(() => {
+ const actionContainer = loadedAction.current;
+ if (actionContainer) {
+ actionContainer.scrollTop = scrollPosition.current;
+ }
+ }, [actions, filteredActions]);
+
+ useEffect(() => {
+ if (actions?.length > 0 && filteredActions?.length === 0) {
+ setFilteredActions(actions.slice(0, loadAction));
+ }
+ }, [actions?.length]);
+
+ return (
+
+
+
+
+ )})
+
+
+const ActionsList = memo(({
+ actions,
+ selectedActionIndex,
+ setSelectedActionIndex,
+ setExampleBody,
+ setFilteredActions,
+ filteredActions,
+ userdata,
+ info,
+ openapi,
+}) => {
+
+ const [searchQuery, setSearchQuery] = useState("");
+ const [visibleActions, setVisibleActions] = useState([]);
+
+
+ useEffect(() => {
+ if (visibleActions?.length === 0 && actions?.length > 0) {
+ setVisibleActions(actions)
+ }
+ }, [actions?.length])
+
+ const handleActionClick = (index, action) => {
+ const actionId = action.name.replace(/ /g, "-").replace(/_/g, "-");
+ setSelectedActionIndex(index);
+ setExampleBody(action.example_response);
+
+ const actionIndex = actions.findIndex((act) => {
+ const id = act.name.replace(/ /g, "-").replace(/_/g, "-");
+ return id === actionId;
+ });
+
+ if (actionIndex !== -1 && !filteredActions.some((act) => {
+ const id = act.name.replace(/ /g, "-").replace(/_/g, "-");
+ return id === actionId;
+ })) {
+ const newActionToLoad = [
+ ...filteredActions,
+ ...actions.slice(filteredActions.length, actionIndex + 1)
+ ];
+ setFilteredActions(newActionToLoad);
+ }
+
+ // Update URL hash and scroll to action
+ window.history.pushState(null, "", `#${actionId}`);
+ const actionElement = document.getElementById(actionId);
+ if (actionElement) {
+ actionElement.scrollIntoView({ behavior: "smooth", block: "start" });
+ }
+};
+
+ const handleSearch = (e) => {
+ const query = e.target.value;
+ setSearchQuery(query);
+ if (query.length === 0) {
+ setVisibleActions(actions);
+ } else {
+ setVisibleActions(
+ actions.filter((action) =>
+ action.name.toLowerCase().includes(searchQuery.toLowerCase())
+ )
+ );
+ }
+ };
+ return (
+
+ {filteredActions.map((action, index) => (
+
+
+
+
+ ))}
+
+
+
+ );
+});
+
+
+
+const Action = memo((
+ {
+ action,
+ index,
+ serverurl,
+ setApiResponse,
+ setExampleBody,
+ globalUrl,
+ info,
+ setSelectedActionIndex,
+ selectedActionIndex,
+ HandleApiExecution,
+ ConfigurationTab,
+ },
+ ) =>
+ {
+ const [RequestHeader, setRequestHeader] = useState([{ key: "Content-Type", value: "application/json" }]);
+ const [RequestBody, setRequestBody] = useState(action?.body);
+ const editorRef = useRef(null);
+ const [AceEditorHeight, setAceEditorHeight] = useState(275)
+ const [baseUrl, setBaseUrl] = useState(serverurl)
+ const [path, setPath] = useState(action?.url)
+ const inputRef = useRef(null);
+ const [shouldChageInputFocus, setShouldChangeInputFocus] = useState(true);
+ const [disableExecuteButton, setDisableExecuteButton] = useState(false);
+ const [showResponseLoader, setShowResponseLoader] = useState(false);
+ const [appAuthentication, setAppAuthentication] = useState([])
+ const parseHeaders = (headersString) => {
+ if (headersString?.length > 0) {
+ const headersArray = headersString.split("\n");
+ const parsedHeaders = headersArray
+ .map((header) => {
+ const [key, value] = header.split("="); // Split by '=' to get key-value pairs
+
+ // Only proceed if both key and value exist, and neither is undefined
+ if (key && value) {
+ return { key: key.trim(), value: value.trim() };
+ }
+ return null; // Return null if the header is invalid
+ })
+ .filter(Boolean); // Filter out any null values
+
+ setRequestHeader(parsedHeaders);
+ }
+ };
+
+ useEffect(() => {
+ if (action?.headers) {
+ parseHeaders(action.headers);
+ }
+ }, []);
+
+ const [RequestParams, setRequestParams] = useState([
+ {
+ key: "",
+ value: "",
+ },
+ ]);
+
+ const [curTab, setCurTab] = useState(0)
+ const [actionUrl, setActionUrl] = useState(action?.url)
+
+ const [selectedMethod, setSelectedMethod] = useState(action?.method)
+
+ const fix_url = (newUrl) => {
+ if (newUrl.includes("hhttp")) {
+ newUrl = newUrl.replace("hhttp", "http");
+ }
+
+ if (newUrl.includes("http:/") && !newUrl.includes("http://")) {
+ newUrl = newUrl.replace("http:/", "http://");
+ }
+ if (newUrl.includes("https:/") && !newUrl.includes("https://")) {
+ newUrl = newUrl.replace("https:/", "https://");
+ }
+ if (newUrl.includes("http:///")) {
+ newUrl = newUrl.replace("http:///", "http://");
+ }
+ if (newUrl.includes("https:///")) {
+ newUrl = newUrl.replace("https:///", "https://");
+ }
+ if (!newUrl.includes("http://") && !newUrl.includes("https://")) {
+ newUrl = `http://${newUrl}`;
+ }
+ return newUrl;
+ };
+
+ function isValidMethod(method) {
+ const validMethods = ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS", "HEAD"];
+ method = method.toUpperCase();
+
+ if (validMethods.includes(method)) {
+ return method;
+ } else {
+ throw new Error(`Invalid HTTP method: ${method}`);
+ }
+ }
+
+ function fixHeader(headers) {
+ if (Array.isArray(headers)) {
+ return headers.reduce((acc, header) => {
+ if (header.key.trim() !== "" || header.value.trim() !== "") {
+ acc[header.key.trim()] = header.value.trim();
+ }
+ return acc;
+ }, {});
+ }
+
+ const parsedHeaders = {};
+
+ if (typeof headers === 'string' && headers) {
+ const splitHeaders = headers.split("\n");
+
+ splitHeaders.forEach(header => {
+ let splitItem;
+ if (header.includes(":")) {
+ splitItem = ":";
+ } else if (header.includes("=")) {
+ splitItem = "=";
+ } else {
+ return;
+ }
+
+ const splitHeader = header.split(splitItem);
+ if (splitHeader.length >= 2) {
+ const key = splitHeader[0].trim();
+ const value = splitHeader.slice(1).join(splitItem).trim();
+ parsedHeaders[key] = value;
+ }
+ });
+ }
+
+ return parsedHeaders;
+ }
+
+ function fixParams(queries) {
+ if (Array.isArray(queries)) {
+ return queries
+ .filter(query => query.key.trim() !== "" || query.value.trim() !== "")
+ .map(query => ({ key: query.key.trim(), value: query.value.trim() }));
+ }
+
+ const parsedQueries = [];
+ if (typeof queries === 'string') {
+ if (!queries.trim()) return parsedQueries;
+ const cleanedQueries = queries.trim().replace(/\s+/g, " ");
+ const splittedQueries = cleanedQueries.split("&");
+ splittedQueries.forEach(query => {
+ if (!query.includes("=")) {
+ console.info("Skipping as there is no '=' in the query");
+ return;
+ }
+ const [key, value] = query.split("=");
+ if (!key.trim() || !value.trim()) {
+ console.info("Skipping because either key or value is not present in query");
+ return;
+ }
+ parsedQueries.push({ key: key.trim(), value: value.trim() });
+ });
+ }
+
+ return parsedQueries;
+ }
+
+ async function prepareResponse(response) {
+ try {
+ const parsedHeaders = {};
+ response.headers.forEach((value, key) => {
+ parsedHeaders[key] = value;
+ });
+
+ const cookies = {};
+ if (response.headers.has("set-cookie")) {
+ const cookieHeader = response.headers.get("set-cookie").split(";");
+ cookieHeader.forEach(cookie => {
+ const [key, value] = cookie.split("=");
+ if (key && value) {
+ cookies[key.trim()] = value.trim();
+ }
+ });
+ }
+
+ const textData = await response.text();
+
+ let parsedBody;
+ try {
+ parsedBody = JSON.parse(textData);
+ } catch (error) {
+ console.error("Error parsing JSON response:", error);
+ parsedBody = textData;
+ }
+
+ return {
+ success: true,
+ status: response.status,
+ url: response.url,
+ body: parsedBody,
+ headers: parsedHeaders,
+ cookies: cookies,
+ };
+ } catch (error) {
+ console.error("Error preparing response:", error);
+ return {
+ success: false,
+ status: response?.status,
+ error: error.message,
+ };
+ }
+ }
+
+ const handleRequestWithCustomAction = async (selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action) => {
+
+ if((HandleApiExecution !== undefined || HandleApiExecution !== null) && typeof HandleApiExecution === 'function'){
+
+ try {
+ if (baseUrl.length === 0) {
+ setBaseUrl(serverurl)
+ }
+ if (path.length === 0) {
+ setPath(action.url)
+ }
+
+ const apiResponse = await HandleApiExecution(
+ selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action, setCurTab,
+ )
+
+ const response = {
+ "action name" : action.name.replaceAll("_", " "),
+ ...apiResponse
+ };
+
+ if (typeof response.result === "string") {
+ try {
+ response.result = JSON.parse(response.result);
+ } catch (parseError) {
+ console.error("Error parsing result:", parseError);
+ toast.error("Error parsing response result.");
+ }
+ }
+
+ setDisableExecuteButton(false);
+ setApiResponse(response); // Set the response with the action name added
+ setShowResponseLoader(false);
+
+ return apiResponse;
+
+ } catch (error) {
+ console.error("Error during HandleApiExecution:", error);
+ toast.error(`Error: ${error.message}`);
+ return { error: error.message };
+ }
+ } else{
+
+ const newUrl = fix_url(baseUrl);
+ let validMethod;
+ try {
+ validMethod = isValidMethod(selectedMethod);
+ } catch (error) {
+ console.error(error);
+ toast.error(error.message);
+ return { error: error.message };
+ }
+ try {
+
+ if (path && !path.startsWith('/')) {
+ path = '/' + path;
+ }
+
+ const finalUrl = newUrl + path;
+ const newHeader = fixHeader(RequestHeader);
+ const newParams = fixParams(RequestParams);
+
+ if (typeof RequestBody === 'object') {
+ try {
+ RequestBody = JSON.stringify(RequestBody);
+ } catch (error) {
+ console.error(`Error: ${error}`);
+ toast.error("Invalid JSON format for request body: ", error);
+ return { error: "Invalid JSON format for request body" };
+ }
+ }
+ const queryString = new URLSearchParams(newParams.map(param => [param.key, param.value])).toString();
+ const fullUrl = queryString ? `${finalUrl}?${queryString}` : finalUrl;
+ const response = await fetch(fullUrl, {
+ method: validMethod,
+ headers: newHeader,
+ body: validMethod !== 'GET' ? RequestBody : undefined,
+ });
+
+ const preparedResponse = await prepareResponse(response);
+
+ setApiResponse(preparedResponse);
+
+ return preparedResponse;
+
+ } catch (error) {
+ console.error("Error:", error);
+ toast.error(`${error.message} Please ensure all fields are filled out correctly and try again.`);
+ return { error: error.message };
+ }
+ }
+ };
+
+ const addRequestParamsRow = () => {
+ setRequestParams((prevRows) => {
+ const updatedRows = [...RequestParams, { key: "", value: "" }];
+ return updatedRows;
+ });
+ };
+
+ const handleRequestParamsChange = (rowIndex, field, value) => {
+ setRequestParams(
+ RequestParams.map((row, index) => {
+ return {
+ ...row,
+ [field]: index === rowIndex ? value : row[field],
+ };
+ })
+ );
+ };
+
+ const addRow = () => {
+ setRequestHeader((prevRows) => {
+ const updatedRows = [...RequestHeader, { key: "", value: "" }];
+ return updatedRows;
+ });
+ };
+
+ const handleInputChange = (rowIndex, field, value) => {
+ setRequestHeader(
+ RequestHeader.map((row, i) => {
+ return {
+ ...row,
+ [field]: i === rowIndex ? value : row[field],
+ };
+ })
+ );
+ };
+ const handleChangeTab = (actionIndex, newValue) => {
+ setCurTab(newValue);
+ };
+
+ const shouldShowBodyTab = ![
+ "GET",
+ "CONNECT",
+ "OPTIONS",
+ "TRACE",
+ "HEAD",
+ ].includes(selectedMethod);
+
+ const extractParamsFromText = (text) => {
+ const params = [];
+ const queryString = text.split("?")[1];
+
+ if (queryString) {
+ const pairs = queryString.split("&");
+ pairs.forEach((pair) => {
+ const [key, value] = pair.split("=");
+ if (key && value) {
+ params.push({ key, value });
+ }
+ });
+ }
+
+ return params.length > 0 ? params : [{ key: "", value: "" }];
+ };
+
+ const actionRef = useRef(null);
+ const scrollTimeoutRef = useRef(null);
+ const [isUserInteracting, setIsUserInteracting] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ throttle((entries) => {
+ if (!isUserInteracting) return;
+ let nextSelectedActionIndex = null;
+
+ entries.forEach((entry) => {
+ if (entry.isIntersecting && selectedActionIndex !== index) {
+ nextSelectedActionIndex = index;
+ }
+ });
+
+ if (scrollTimeoutRef.current) {
+ clearTimeout(scrollTimeoutRef.current);
+ }
+
+ if (nextSelectedActionIndex !== null) {
+ scrollTimeoutRef.current = setTimeout(() => {
+ if (selectedActionIndex !== nextSelectedActionIndex) {
+ setSelectedActionIndex(nextSelectedActionIndex);
+ const actionId = action.name.replace(/ /g, "-").replace(/_/g, "-");
+ window.history.pushState(null, "", `#${actionId}`);
+ setExampleBody(action?.example_response);
+ document.getElementById(`action-list-${nextSelectedActionIndex}`).scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+ }, 300);
+ }
+ }, 200),
+ { threshold: 0.5 }
+ );
+
+ if (actionRef.current) {
+ observer.observe(actionRef.current);
+ }
+
+ return () => {
+ if (actionRef.current) {
+ observer.unobserve(actionRef.current);
+ }
+ if (scrollTimeoutRef.current) {
+ clearTimeout(scrollTimeoutRef.current);
+ }
+ };
+ }, [isUserInteracting]);
+
+ const handleAceEditorChange = (value) => {
+ setRequestBody(value);
+ if (editorRef.current) {
+ const editor = editorRef.current.editor;
+ const lineHeight = editor.renderer.lineHeight;
+ const minHeight = 100;
+ const maxHeight = 300;
+ const session = editor.getSession();
+ const screenLength = session.getScreenLength();
+ const contentHeight = screenLength * lineHeight;
+ const padding = 20;
+
+ // Calculate new height
+ let newHeight = Math.min(
+ Math.max(
+ minHeight,
+ contentHeight + padding
+ ),
+ maxHeight
+ );
+
+ if (newHeight !== AceEditorHeight) {
+ if (value.length < (editorRef.current._lastValue || '').length) {
+ if (contentHeight + padding < AceEditorHeight) {
+ setAceEditorHeight(newHeight);
+ }
+ } else {
+ if (contentHeight + padding > AceEditorHeight) {
+ setAceEditorHeight(newHeight);
+ }
+ }
+ }
+ editorRef.current._lastValue = value;
+ }
+ };
+
+ useEffect(() => {
+ if (editorRef.current) {
+ const editor = editorRef.current.editor;
+ editor.commands.addCommand({
+ name: "executeOnCtrlEnter",
+ bindKey: { win: "Ctrl-Enter", mac: "Command-Enter" },
+ exec: () => {
+ setShowResponseLoader(true);
+ setDisableExecuteButton(true);
+ handleRequestWithCustomAction(
+ selectedMethod,
+ baseUrl,
+ path,
+ RequestHeader,
+ RequestBody,
+ RequestParams,
+ info,
+ action
+ );
+ },
+ });
+ }
+ }, [editorRef.current]);
+
+
+ return (
+
+
+
+ {info?.title ? (
+
+ Api Explorer
+
+ )}
+
+
+ ![app logo]({openapi?.info["x-logo"]})
+
+ {info.title}
+
+
+ ) : (
+
+ {visibleActions.length > 0 ? (
+ visibleActions.map((action, actionIndex) => (
+
+ ))
+ ) : (
+
+
+ No actions found
+
+ )}
+ setIsUserInteracting(true)}
+ >
+
+ );
+})
+
+const ActionResponse = memo(({ apiResponse, ExampleBody, userdata }) => {
+ const [height, setHeight] = useState("14vh")
+ const [responseTabIndex, setResponseTabIndex] = useState(0)
+ const [oldResponse, setOldResponse] = useState(apiResponse)
+ const [highlight, setHighlight] = useState(false)
+
+ const MIN_HEIGHT = 50
+
+ useEffect(() => {
+ var apiResp = apiResponse
+ var oldResp = oldResponse
+ try {
+ apiResp = JSON.stringify(apiResponse)
+ } catch (error) {
+ //console.error("Error parsing JSON response:", error);
+ }
+
+ try {
+ oldResp = JSON.stringify(oldResponse)
+ } catch (error) {
+ //console.error("Error parsing JSON response:", error);
+ }
+
+ if (apiResp === oldResp) {
+ return
+ }
+
+ setOldResponse(apiResponse)
+
+ //console.log("CHANGES MADE: ", apiResponse, oldResponse)
+ //toast("CHANGES!")
+ //console.log("HEIGHT: ", height)
+
+ if (height === "14vh") {
+ setHeight("30vh")
+ } else {
+ // Check if height is less than 250px
+ var heightNum = 0
+ try {
+ heightNum = parseInt(height.slice(0, -2))
+ } catch (error) {
+ }
+
+ if (heightNum < 350) {
+ setHeight("350px")
+ }
+ }
+
+ setHighlight(true)
+ setTimeout(() => {
+ setHighlight(false)
+ }, 2000)
+ }, [apiResponse, ExampleBody])
+
+ const handleReactJsonClipboard = (copy) => {
+ const elementName = "copy_element_shuffle";
+ let copyText = document.getElementById(elementName);
+
+ if (copyText) {
+ if (copy.namespace && copy.name && copy.src) {
+ copy = copy.src;
+ }
+
+ const clipboard = navigator.clipboard;
+ if (!clipboard) {
+ toast("Can only copy over HTTPS (port 3443)");
+ return;
+ }
+
+ let stringified = JSON.stringify(copy);
+ if (stringified.startsWith('"') && stringified.endsWith('"')) {
+ stringified = stringified.slice(1, -1);
+ }
+
+ navigator.clipboard.writeText(stringified);
+ toast("Copied value to clipboard, NOT json path.");
+ } else {
+ console.log("Failed to copy from " + elementName + ": ", copyText);
+ }
+ };
+
+ const stopResizing = () => {
+ window.removeEventListener("mousemove", startResizing);
+ window.removeEventListener("mouseup", stopResizing);
+ };
+
+ const initResize = (e) => {
+ e.preventDefault();
+ window.addEventListener("mousemove", startResizing);
+ window.addEventListener("mouseup", stopResizing);
+ };
+
+ const startResizing = useCallback((e) => {
+ const newHeight = window.innerHeight - e.clientY;
+ if (newHeight >= MIN_HEIGHT) {
+ setHeight(`${newHeight}px`);
+ }
+ }, []);
+
+ const formData = (exampleBody) => {
+ try {
+ return exampleBody ? JSON.parse(exampleBody) : {};
+ } catch (error) {
+ console.error("Error parsing the example string:", error);
+ return {};
+ }
+ };
+
+ useEffect(() => {
+ const handleResize = () => {
+ const newHeight = window.innerHeight * 0.1;
+ setHeight(`${newHeight}px`);
+ };
+
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return (
+
+
+ {action.name}
+
+
+
+
+
+
+
+
+
+ {shouldShowBodyTab && (
+
+
+ )}
+
+
+
+
+
+
+
+ {(ConfigurationTab && ((shouldShowBodyTab && curTab === 3 ) || (!shouldShowBodyTab && curTab === 2)))? (
+
+
+
+
+ {
+ if (e.key === "Enter") {
+ if (actionUrl.length === 0) {
+ toast.error("URL cannot be empty");
+ return;
+ }else{
+ setShowResponseLoader(true);
+ setDisableExecuteButton(true)
+ handleRequestWithCustomAction(selectedMethod, baseUrl, path, RequestHeader, RequestBody, RequestParams, info, action);
+ }
+ }}
+ }
+ onClick={(e) => {
+ const clickPosition = e.target.selectionStart;
+ const baseUrlLength = baseUrl.length;
+ if (shouldChageInputFocus) {
+ e.target.setSelectionRange(baseUrlLength + clickPosition, baseUrlLength + clickPosition);
+ setShouldChangeInputFocus(false);
+ }
+ }}
+ onFocus={(e) => {
+ const validParams = RequestParams.filter(param => param.key.trim().length > 0 && param.value.trim().length > 0);
+ const fullUrl = validParams.length > 0 ? `${baseUrl}${path}?${validParams.map(param => `${param.key}=${param.value}`).join("&")}` : `${baseUrl}${path}`;
+ if (fullUrl.length === 0) {
+ setActionUrl(serverurl + action?.url);
+ }else{
+ setActionUrl(fullUrl);
+ }
+ if(!shouldChageInputFocus){
+ setShouldChangeInputFocus(true);
+ }
+ }}
+
+ onBlur={(e) => {
+ if(e.target.value.trim().length === 0) {
+ setActionUrl(path);
+ }else if(path.length === 0){
+ setActionUrl(action?.url);
+ }else if(baseUrl.length === 0){
+ setBaseUrl(serverurl)
+ setActionUrl(path)
+ }else{
+ const validParams = RequestParams.filter(param => param.key.trim().length > 0 && param.value.trim().length > 0);
+ const validPath = validParams?.length > 0 ? `${path}?${validParams.map(param => `${param.key}=${param.value}`).join("&")}` : path;
+ setActionUrl(validPath)
+ }
+ setShouldChangeInputFocus(false);
+ }}
+
+ onChange={(e) => {
+ const newUrl = e.target.value;
+ setActionUrl(newUrl);
+ const params = extractParamsFromText(newUrl);
+ setRequestParams(params);
+
+ if (newUrl.startsWith("http://") || newUrl.startsWith("https://")) {
+ try {
+ const url = new URL(newUrl);
+ setBaseUrl(url.origin);
+ const newPath = decodeURIComponent(url.pathname);;
+
+ setPath(newPath);
+ } catch (error) {
+ console.error("Invalid URL:", error);
+ }
+ }
+ }}
+ />
+
+
+
+ {showResponseLoader? (
+
+
+ handleChangeTab(index, newValue)
+ }
+ aria-label="basic tabs example"
+ >
+
+ Headers
+
+ {...a11yProps(0)}
+ />
+ {shouldShowBodyTab && (
+
+ Body
+
+ {...a11yProps(1)}
+ />
+ )}
+
+ Params
+
+ {...a11yProps(shouldShowBodyTab ? 2 : 1)}
+ />
+ {ConfigurationTab ? (
+
+ Configuration
+
+ {...a11yProps(shouldShowBodyTab ? 3 : 2)}
+ />
+ ) : null}
+
+
+
+
+
+
+ {action.name.replaceAll("_", " ")}
+
+
+ + {action.description + ? action.description + : ""} +
+
+ {highlight === true ?
+
+
+ setResponseTabIndex(newValue)}
+ >
+ Response}
+ {...a11yProps(0)}
+ />
+ Example Response}
+ disabled={ExampleBody === undefined || ExampleBody === null || ExampleBody === ""}
+ {...a11yProps(1)}
+ />
+ History}
+ disabled={true}
+ {...a11yProps(2)}
+ />
+
+
+
+
+
+
+
+
+
+
+ = 1920 ? "calc(100% - 630px)" : "calc(100% - 570px)"
+ : windowWidth >= 1920 ? "calc(100vw - 460px)": "calc(100% - 410px)"
+ : windowWidth >= 1920 ? "calc(100% - 370px)" : "calc(100% - 320px)",
+ backgroundColor: "#1a1a1a",
+ position: "fixed",
+ bottom: 0,
+ right: 0,
+ display: "flex",
+ flexDirection: "column",
+ borderTop: "1px solid #212121",
+ transition: "width 0.3s ease",
+ minHeight: "10%",
+ }}
+ >
+ {children}
+
+ );
+});
+
+const ApiResponseWrapper = memo(({ children, userdata }) => {
+ return (
+
+ {execution?.status === 'EXECUTING' ? (
+
+ Executing...
+
+ ) : (
+ execution?.results?.length === 1 ?
+ {
+ handleReactJsonClipboard(copy);
+ }}
+ collapsed={false}
+ displayDataTypes={false}
+ onSelect={(select) => {
+ var basename = "exec"
+ if (selectedAction !== undefined && selectedAction !== null && Object.keys(selectedAction).length !== 0) {
+ basename = selectedAction.label.toLowerCase().replaceAll(" ", "_")
+ }
+ HandleJsonCopy(validResult, select, basename)
+ }}
+ name={"JSON autocompletion"}
+ /> :
+ { }}
+ displayDataTypes={false}
+ name={"JSON autocompletion"}
+ />
+ )}
+
+
+
+
+ Multi-Factor Authentication Setup
+
+
+ Enter the code from your authenticator app below.
+
+ setCode(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === "Enter" && code !== null && code !== "" && code.length === 6) {
+ handleVerify2FA(mfaCode, code, true);
+ }
+ }}
+ />
+
+
+
+
+ );
+};
+
+const QRCodeSection = ({ secret2FA, image2FA }) => {
+ return (
+
+
+
+ {secret2FA && image2FA ? (
+
+ );
+};
+
+export default MFASetup;
diff --git a/frontend/src/views/ApiExplorerWrapper.jsx b/frontend/src/views/ApiExplorerWrapper.jsx
new file mode 100644
index 00000000..0b9143c4
--- /dev/null
+++ b/frontend/src/views/ApiExplorerWrapper.jsx
@@ -0,0 +1,1787 @@
+import React, { memo, useCallback } from "react";
+import { useState, useEffect, useContext, Suspense } from "react";
+import { useNavigate, Link, useLocation } from "react-router-dom";
+import { toast } from "react-toastify";
+import { Context } from "../context/ContextApi.jsx";
+import {
+ Box,
+ IconButton,
+ MenuItem,
+ Select,
+ Skeleton,
+ Stack,
+ Collapse,
+ ListItem,
+ Typography,
+ Tab,
+ Button,
+ Dialog,
+ Tooltip,
+ DialogContent,
+ DialogTitle,
+ DialogActions,
+ TextField,
+ Divider,
+} from "@mui/material";
+
+import { validateJson, } from "../views/Workflows.jsx";
+import { isMobile } from "react-device-detect"
+import theme from "../theme.jsx";
+import PaperComponent from "../components/PaperComponent.jsx";
+import { CodeHandler, Img, OuterLink, } from '../views/Docs.jsx'
+import { v4 as uuidv4} from "uuid";
+
+import {
+ ExpandLess as ExpandLessIcon,
+ ExpandMore as ExpandMoreIcon,
+ DragIndicator as DragIndicatorIcon,
+ Close as CloseIcon,
+ Edit as EditIcon,
+ LockOpen as LockOpenIcon,
+ Delete as DeleteIcon,
+ CheckCircle as CheckCircleIcon,
+} from "@mui/icons-material";
+
+import Markdown from "react-markdown";
+import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
+import algoliasearch from "algoliasearch/lite";
+import { green } from "../views/AngularWorkflow.jsx"
+
+const searchClient = algoliasearch(
+ "JNSS5CFDZZ",
+ "db08e40265e2941b9a7d8f644b6e5240"
+)
+
+// Lazy loading of ApiExplorer component to reduce initial load time
+const ApiExplorer = React.lazy(() => import("../components/ApiExplorer.jsx"));
+
+
+const ApiExplorerWrapper = (props) => {
+ const { globalUrl, serverside, userdata, isLoggedIn} = props;
+ const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io"
+ const location = useLocation();
+ const navigate = useNavigate();
+ const [openapi, setOpenapi] = useState({});
+ const [selectedAppData, setSelectedAppData] = useState({})
+ const [selectedAuthentication, setSelectedAuthentication] = useState({});
+ const [authenticationModalOpen, setAuthenticationModalOpen] = useState(false)
+ const [authenticationType, setAuthenticationType] = React.useState("");
+ const [appAuthentication, setAppAuthentication] = useState([]);
+ const [selectedMeta, setSelectedMeta] = useState(undefined);
+ const [selectedAction, setSelectedAction] = useState(
+ {
+ "app_name": selectedAppData.name,
+ "app_id": selectedAppData.id,
+ "app_version": selectedAppData.version,
+ "large_image": selectedAppData.large_image,
+ }
+ )
+ const [authHighlighted, setAuthHighlighted] = useState(false)
+ const [locations, setLocations] = React.useState([])
+ const [selectedLocation, setSelectedLocation] = React.useState("")
+
+ const appid = location.pathname.split("/")[2];
+ const base64_decode = (str) => {
+ return decodeURIComponent(
+ atob(str)
+ .split("")
+ .map(function (c) {
+ return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+ })
+ .join("")
+ );
+ };
+
+ useEffect(() => {
+ if (selectedAppData !== undefined && selectedAppData !== null && Object.getOwnPropertyNames(selectedAppData).length > 0) {
+ HandleAppAuthentication(selectedAppData?.name)
+ }
+ }, [selectedAppData, openapi])
+
+ useEffect(() => {
+ if (appid !== undefined && appid !== null && appid.length !== 0) {
+ getAppData(appid)
+ HandleGetLocations()
+ }
+
+ if (appAuthentication.length === 0 || selectedAuthentication.length === 0) {
+ HandleAppAuthentication()
+ }
+ }, [appid]);
+
+ function Heading(props) {
+ const element = React.createElement(
+ `h${props.level}`,
+ { style: { marginTop: 40 } },
+ props.children
+ );
+ return (
+
+
+ Scan the image below with the two-factor authentication app on your phone. If you can’t use a QR code, use the code {secret2FA} instead.
+
+ 
+
+ ) : (
+
+
+
+
+
+ What is app authentication?
+
+
+ These are required fields for authenticating with {selectedApp.name}
+
+ Label for you to remember
+ {
+ authenticationOption.label = event.target.value;
+ }}
+ />
+
+
+
+
+
+
+ );
+ };
+
+ const getAppDocs = (appname, location, version) => {
+ fetch(`${globalUrl}/api/v1/docs/${appname}?location=${location}&version=${version}`, {
+ headers: {
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status === 200) {
+ //toast("Successfully GOT app "+appId)
+ } else {
+ //toast("Failed getting app");
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (responseJson.success === true) {
+ if (responseJson.meta !== undefined && responseJson.meta !== null && Object.getOwnPropertyNames(responseJson.meta).length > 0) {
+ setSelectedMeta(responseJson.meta)
+ }
+
+ if (responseJson.reason !== undefined && responseJson.reason !== undefined && responseJson.reason.length > 0) {
+ if (!responseJson.reason.includes("404: Not Found") && responseJson.reason.length > 25) {
+ // Translate
+ Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
+
+
+ {
+ authenticationOption.fields[data.name] =
+ event.target.value;
+ }}
+ />
+ )}
+
+ );
+ })}
+
+
+ )});
+
+ return (
+
+
+
+ {locations !== undefined && locations !== null && locations.length > 0 ?
+
+ {isLoggedIn === true ?
+
+ :
+
+
+
+ }
+
+ {appAuthentication?.length > 0 ?
+
+
+
+ or use
+
+
+
+ : null}
+
+
+
+
+ Runtime location
+
+
+
+ : null}
+
+ {children}
+
+ )
+}
diff --git a/frontend/src/views/CodeWorkflow.jsx b/frontend/src/views/CodeWorkflow.jsx
new file mode 100644
index 00000000..6959fe7d
--- /dev/null
+++ b/frontend/src/views/CodeWorkflow.jsx
@@ -0,0 +1,466 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { Button, Box, Typography, Paper, Toolbar, Divider, CircularProgress } from '@mui/material';
+
+import {
+ PlayArrow as PlayArrowIcon,
+ Save as SaveIcon,
+ History as HistoryIcon
+} from '@mui/icons-material';
+
+import ExecutionPanel from '../components/ExecutionPanel.jsx';
+import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
+
+const CodeWorkflow = (defaultprops) => {
+ const { serverside, userdata, globalUrl, isLoaded, isLoggedIn, surfaceColor, inputColor, ...props } = defaultprops;
+
+ const [workflow, setWorkflow] = useState({});
+
+ const [showExecutions, setShowExecutions] = useState(false);
+ // In CodeWorkflow, add this state
+ const [panelHeight, setPanelHeight] = useState(400);
+ const [executions, setExecutions] = useState([]);
+ const [currentExecution, setCurrentExecution] = useState(null);
+ const [mainAction, setMainAction] = useState(null);
+ const editorRef = useRef(null);
+ const [apiKey, setApiKey] = useState("");
+
+ const [editorData, setEditorData] = React.useState({
+ "name": "",
+ "value": "",
+ "field_number": -1,
+ "actionlist": [],
+ "field_id": "",
+ })
+
+ const getSettings = async () => {
+ try {
+ const response = await fetch(`${globalUrl}/api/v1/getsettings`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ });
+
+ if (response.status !== 200) {
+ console.log("Status not 200 for getsettings :O!");
+ if (response.status >= 500) {
+ toast("Something went wrong while loading the settings. Please reload.")
+ }
+ return null;
+ }
+
+ const responseJson = await response.json();
+ setApiKey(responseJson.apikey);
+ console.log("API Key: ", responseJson.apikey);
+
+ return responseJson.apikey;
+ } catch (error) {
+ console.log("Get settings error: ", error.toString());
+ return null;
+ }
+ }
+ // Calculate editor height based on execution panel visibility
+ const getEditorHeight = () => {
+ return `calc(100vh - ${showExecutions ? `${panelHeight + 40}px` : '40px'})`;
+ };
+
+ let url = window.location.pathname;
+ const workflowId = url.split("/")[2];
+
+ const getWorkflow = async (workflow_id, sourcenode) => {
+ try {
+ const response = await fetch(`${globalUrl}/api/v1/workflows/${workflow_id}`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ });
+
+ if (response.status !== 200) {
+ console.log("Status not 200 for workflows :O!");
+ if (response.status >= 500) {
+ toast("Something went wrong while loading the workflow. Please reload.")
+ }
+ }
+
+ const responseJson = await response.json();
+ setWorkflow(responseJson);
+
+ for (let i = 0; i < responseJson.actions.length; i++) {
+ if (responseJson.actions[i].app_id === "3e320a20966d33c9b7e6790b2705f0bf") {
+ console.log("Setting code to: ", responseJson.actions[i].parameters[0].value);
+ setCode(responseJson.actions[i].parameters[0].value);
+ setMainAction(responseJson.actions[i]);
+
+ if (responseJson.actions[i].parameters[0].value.length === 0) {
+ // fetch API key of the user
+ const result = await getSettings();
+
+ console.log("accessible result: ", result);
+
+ // await setCode(`
+ // from shufflepy import Shuffle
+
+ // shuffle = Shuffle(
+ // "${result}",
+ // url='https://shuffler.io',
+ // )
+ // `
+ // );
+ }
+ break;
+ }
+ }
+ } catch (error) {
+ console.log("Get workflows error: ", error.toString());
+ }
+ };
+
+ useEffect(() => {
+ getWorkflow(workflowId);
+ }, []);
+
+ // In CodeWorkflow component, add this effect:
+ useEffect(() => {
+ if (workflow.id) {
+ // Check URL for execution_id parameter
+ const urlParams = new URLSearchParams(window.location.search);
+ const executionId = urlParams.get('execution_id');
+ if (executionId) {
+ setShowExecutions(true); // Show the panel if execution_id is present
+ }
+ }
+ }, [workflow]);
+
+ const [code, setCode] = useState("");
+ const [testResult, setTestResult] = useState("");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+
+ const saveLatestWorkflow = () => {
+ let newWorkflow = workflow;
+
+ console.log("Workflow actions: ", newWorkflow.actions);
+
+ // find the latest "Shuffle tools fork" node
+ for (let i = 0; i < newWorkflow.actions.length; i++) {
+ console.log("Actios: ", newWorkflow.actions[i]);
+ if (newWorkflow.actions[i].app_id === "3e320a20966d33c9b7e6790b2705f0bf") {
+ // update the code
+ console.log("Updating code: ", code);
+ newWorkflow.actions[i].parameters[0].value = code;
+ break;
+ }
+ }
+
+ fetch(`${globalUrl}/api/v1/workflows/${workflow.id}`, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ body: JSON.stringify(newWorkflow),
+ }).then((response) => {
+ if (response.status !== 200) {
+ console.log("Status not 200 for workflows :O!");
+ toast("Something went wrong while saving the workflow. Please try again.", { type: "error" });
+ } else if (response.status === 200) {
+ toast("Workflow saved successfully!");
+ }
+ });
+ };
+
+ const getParents = async () => {
+ return [
+ {
+ "label": "Execution Argument",
+ "type": "INTERNAL"
+ }
+ ]
+ }
+
+ const handleRunCode = async () => {
+ saveLatestWorkflow();
+ setLoading(true);
+ setError("");
+
+ let start_node = "";
+
+ for (let i = 0; i < workflow.actions.length; i++) {
+ if (workflow.actions[i].isStartNode) {
+ start_node = workflow.actions[i].id;
+ }
+ }
+
+ try {
+ const response = await fetch(`${globalUrl}/api/v1/workflows/${workflow.id}/execute`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ body: JSON.stringify({
+ "start": start_node,
+ "execution_arguments": "",
+ }),
+ });
+
+ if (response.ok) {
+ const responseJson = await response.json();
+ const newExecution = {
+ execution_id: responseJson.execution_id,
+ authorization: responseJson.authorization,
+ status: 'EXECUTING',
+ started_at: new Date().toISOString()
+ };
+ setShowExecutions(true);
+ setCurrentExecution(newExecution);
+ }
+
+ } catch (error) {
+ console.log("Error: ", error);
+ setError(error.toString());
+ } finally {
+ setLoading(false);
+ }
+ };
+
+
+ const handleSaveCode = async () => {
+ saveLatestWorkflow();
+ };
+
+ const handleEditorDidMount = (editor, monaco) => {
+ if (monaco.languages && monaco.languages.python) {
+ if (monaco.languages.python.pythonDefaults) {
+ monaco.languages.python.pythonDefaults.setCompilerOptions({
+ target: monaco.languages.typescript.ScriptTarget.ES2020,
+ allowNonTsExtensions: true
+ });
+ }
+ }
+
+ monaco.languages.setLanguageConfiguration('python', {
+ autoClosingPairs: [
+ { open: '{', close: '}' },
+ { open: '[', close: ']' },
+ { open: '(', close: ')' },
+ { open: '"', close: '"' },
+ { open: "'", close: "'" }
+ ],
+ surroundingPairs: [
+ { open: '{', close: '}' },
+ { open: '[', close: ']' },
+ { open: '(', close: ')' },
+ { open: '"', close: '"' },
+ { open: "'", close: "'" }
+ ]
+ });
+ };
+
+ const handleEditorChange = (value) => {
+ setCode(value);
+ };
+
+ return (
+ {error}
+ {JSON.stringify(testResult, null, 2)}
+