diff --git a/src/assets/svgs/swagger.svg b/src/assets/svgs/swagger.svg new file mode 100644 index 0000000..b82236f --- /dev/null +++ b/src/assets/svgs/swagger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx index 0514ce3..f3079f7 100644 --- a/src/components/Apps/AppsDevMode.tsx +++ b/src/components/Apps/AppsDevMode.tsx @@ -332,7 +332,7 @@ export const AppsDevMode = ({ mode, setMode, show , myName, goToHome, setDesktop isSelected={tab?.tabId === selectedTab?.tabId} app={tab} ref={iframeRefs.current[tab.tabId]} - isDevMode={true} + isDevMode={tab?.service ? false : true} /> ); })} diff --git a/src/components/Apps/AppsDevModeHome.tsx b/src/components/Apps/AppsDevModeHome.tsx index db1bab2..d9def9b 100644 --- a/src/components/Apps/AppsDevModeHome.tsx +++ b/src/components/Apps/AppsDevModeHome.tsx @@ -7,7 +7,7 @@ import { AppsContainer, AppsParent, } from "./Apps-styles"; -import {Buffer} from 'buffer' +import { Buffer } from "buffer"; import { Avatar, @@ -29,249 +29,239 @@ import { Spacer } from "../../common/Spacer"; import { useModal } from "../../common/useModal"; import { createEndpoint, isUsingLocal } from "../../background"; import { Label } from "../Group/AddGroup"; +import ShortUniqueId from "short-unique-id"; +import swaggerSVG from '../../assets/svgs/swagger.svg' +const uid = new ShortUniqueId({ length: 8 }); export const AppsDevModeHome = ({ setMode, myApp, myWebsite, availableQapps, - myName + myName, }) => { + const [domain, setDomain] = useState("127.0.0.1"); + const [port, setPort] = useState(""); + const [selectedPreviewFile, setSelectedPreviewFile] = useState(null); - const [domain, setDomain] = useState("127.0.0.1"); - const [port, setPort] = useState(""); - const [selectedPreviewFile, setSelectedPreviewFile] = useState(null); + const { isShow, onCancel, onOk, show, message } = useModal(); + const { + openSnackGlobal, + setOpenSnackGlobal, + infoSnackCustom, + setInfoSnackCustom, + } = useContext(MyContext); - const { isShow, onCancel, onOk, show, message } = useModal(); - const { - openSnackGlobal, - setOpenSnackGlobal, - infoSnackCustom, - setInfoSnackCustom, - } = useContext(MyContext); + const handleSelectFile = async (existingFilePath) => { + const filePath = existingFilePath || (await window.electron.selectFile()); + if (filePath) { + const content = await window.electron.readFile(filePath); + return { buffer: content, filePath }; + } else { + console.log("No file selected."); + } + }; + const handleSelectDirectry = async (existingDirectoryPath) => { + const { buffer, directoryPath } = + await window.electron.selectAndZipDirectory(existingDirectoryPath); + if (buffer) { + return { buffer, directoryPath }; + } else { + console.log("No file selected."); + } + }; - const handleSelectFile = async (existingFilePath) => { - const filePath = existingFilePath || await window.electron.selectFile(); - if (filePath) { - - const content = await window.electron.readFile(filePath); - return {buffer: content, filePath} - } else { - console.log('No file selected.'); - } - }; - const handleSelectDirectry = async (existingDirectoryPath) => { - const {buffer, directoryPath} = await window.electron.selectAndZipDirectory(existingDirectoryPath); - if (buffer) { - - - return {buffer, directoryPath} - } else { - console.log('No file selected.'); - } - }; + const addDevModeApp = async () => { + try { + const usingLocal = await isUsingLocal(); + if (!usingLocal) { + setOpenSnackGlobal(true); - const addDevModeApp = async () => { - try { - const usingLocal = await isUsingLocal(); - if (!usingLocal) { - setOpenSnackGlobal(true); - - setInfoSnackCustom({ - type: "error", - message: - "Please use your local node for dev mode! Logout and use Local node.", - }); - return; - } - const {portVal, domainVal} = await show({ - message: "", - publishFee: "", + setInfoSnackCustom({ + type: "error", + message: + "Please use your local node for dev mode! Logout and use Local node.", }); - const framework = domainVal + ":" + portVal; - const response = await fetch( - `${getBaseApiReact()}/developer/proxy/start`, - { - method: "POST", - headers: { - "Content-Type": "text/plain", - }, - body: framework, - } - ); - const responseData = await response.text(); - executeEvent("appsDevModeAddTab", { - data: { - url: "http://127.0.0.1:" + responseData, + return; + } + const { portVal, domainVal } = await show({ + message: "", + publishFee: "", + }); + const framework = domainVal + ":" + portVal; + const response = await fetch( + `${getBaseApiReact()}/developer/proxy/start`, + { + method: "POST", + headers: { + "Content-Type": "text/plain", }, + body: framework, + } + ); + const responseData = await response.text(); + executeEvent("appsDevModeAddTab", { + data: { + url: "http://127.0.0.1:" + responseData, + }, + }); + } catch (error) {} + }; + + const addPreviewApp = async (isRefresh, existingFilePath, tabId) => { + try { + const usingLocal = await isUsingLocal(); + if (!usingLocal) { + setOpenSnackGlobal(true); + + setInfoSnackCustom({ + type: "error", + message: + "Please use your local node for dev mode! Logout and use Local node.", }); - } catch (error) {} - }; + return; + } + if (!myName) { + setOpenSnackGlobal(true); - const addPreviewApp = async (isRefresh, existingFilePath, tabId) => { - try { - const usingLocal = await isUsingLocal(); - if (!usingLocal) { - setOpenSnackGlobal(true); + setInfoSnackCustom({ + type: "error", + message: "You need a name to use preview", + }); + return; + } - setInfoSnackCustom({ - type: "error", - message: - "Please use your local node for dev mode! Logout and use Local node.", - }); - return; - } - if (!myName) { - setOpenSnackGlobal(true); + const { buffer, filePath } = await handleSelectFile(existingFilePath); - setInfoSnackCustom({ - type: "error", - message: - "You need a name to use preview", - }); - return; - } + if (!buffer) { + setOpenSnackGlobal(true); - - const {buffer, filePath} = await handleSelectFile(existingFilePath) - - if (!buffer) { - setOpenSnackGlobal(true); + setInfoSnackCustom({ + type: "error", + message: "Please select a file", + }); + return; + } + const postBody = Buffer.from(buffer).toString("base64"); - setInfoSnackCustom({ - type: "error", - message: - "Please select a file", - }); - return; - } - const postBody = Buffer.from(buffer).toString('base64') - - const endpoint = await createEndpoint(`/arbitrary/APP/${myName}/zip?preview=true`) - const response = await fetch( - endpoint - , - { - method: "POST", - headers: { - "Content-Type": "text/plain", - }, - body: postBody, - } - ); - if(!response?.ok) throw new Error('Invalid zip') - const previewPath = await response.text(); - if(tabId){ + const endpoint = await createEndpoint( + `/arbitrary/APP/${myName}/zip?preview=true` + ); + const response = await fetch(endpoint, { + method: "POST", + headers: { + "Content-Type": "text/plain", + }, + body: postBody, + }); + if (!response?.ok) throw new Error("Invalid zip"); + const previewPath = await response.text(); + if (tabId) { executeEvent("appsDevModeUpdateTab", { data: { - url: "http://127.0.0.1:12391" + previewPath, + url: "http://127.0.0.1:12391" + previewPath, isPreview: true, filePath, - refreshFunc: (tabId)=> { - addPreviewApp(true, filePath, tabId) + refreshFunc: (tabId) => { + addPreviewApp(true, filePath, tabId); }, - tabId + tabId, }, }); - return + return; } - executeEvent("appsDevModeAddTab", { - data: { - url: "http://127.0.0.1:12391" + previewPath, - isPreview: true, - filePath, - refreshFunc: (tabId)=> { - addPreviewApp(true, filePath, tabId) - } + executeEvent("appsDevModeAddTab", { + data: { + url: "http://127.0.0.1:12391" + previewPath, + isPreview: true, + filePath, + refreshFunc: (tabId) => { + addPreviewApp(true, filePath, tabId); }, + }, + }); + } catch (error) { + console.error(error); + } + }; + + const addPreviewAppWithDirectory = async (isRefresh, existingDir, tabId) => { + try { + const usingLocal = await isUsingLocal(); + if (!usingLocal) { + setOpenSnackGlobal(true); + + setInfoSnackCustom({ + type: "error", + message: + "Please use your local node for dev mode! Logout and use Local node.", }); - } catch (error) { - console.error(error) + return; } - }; + if (!myName) { + setOpenSnackGlobal(true); - const addPreviewAppWithDirectory = async (isRefresh, existingDir, tabId) => { - try { - const usingLocal = await isUsingLocal(); - if (!usingLocal) { - setOpenSnackGlobal(true); + setInfoSnackCustom({ + type: "error", + message: "You need a name to use preview", + }); + return; + } - setInfoSnackCustom({ - type: "error", - message: - "Please use your local node for dev mode! Logout and use Local node.", - }); - return; - } - if (!myName) { - setOpenSnackGlobal(true); + const { buffer, directoryPath } = await handleSelectDirectry(existingDir); - setInfoSnackCustom({ - type: "error", - message: - "You need a name to use preview", - }); - return; - } + if (!buffer) { + setOpenSnackGlobal(true); - - const {buffer, directoryPath} = await handleSelectDirectry(existingDir) - - if (!buffer) { - setOpenSnackGlobal(true); + setInfoSnackCustom({ + type: "error", + message: "Please select a file", + }); + return; + } + const postBody = Buffer.from(buffer).toString("base64"); - setInfoSnackCustom({ - type: "error", - message: - "Please select a file", - }); - return; - } - const postBody = Buffer.from(buffer).toString('base64') - - const endpoint = await createEndpoint(`/arbitrary/APP/${myName}/zip?preview=true`) - const response = await fetch( - endpoint - , - { - method: "POST", - headers: { - "Content-Type": "text/plain", - }, - body: postBody, - } - ); - if(!response?.ok) throw new Error('Invalid zip') - const previewPath = await response.text(); - if(tabId){ + const endpoint = await createEndpoint( + `/arbitrary/APP/${myName}/zip?preview=true` + ); + const response = await fetch(endpoint, { + method: "POST", + headers: { + "Content-Type": "text/plain", + }, + body: postBody, + }); + if (!response?.ok) throw new Error("Invalid zip"); + const previewPath = await response.text(); + if (tabId) { executeEvent("appsDevModeUpdateTab", { data: { - url: "http://127.0.0.1:12391" + previewPath, + url: "http://127.0.0.1:12391" + previewPath, isPreview: true, directoryPath, - refreshFunc: (tabId)=> { - addPreviewAppWithDirectory(true, directoryPath, tabId) + refreshFunc: (tabId) => { + addPreviewAppWithDirectory(true, directoryPath, tabId); }, - tabId + tabId, }, }); - return + return; } - executeEvent("appsDevModeAddTab", { - data: { - url: "http://127.0.0.1:12391" + previewPath, - isPreview: true, - directoryPath, - refreshFunc: (tabId)=> { - addPreviewAppWithDirectory(true, directoryPath, tabId) - } + executeEvent("appsDevModeAddTab", { + data: { + url: "http://127.0.0.1:12391" + previewPath, + isPreview: true, + directoryPath, + refreshFunc: (tabId) => { + addPreviewAppWithDirectory(true, directoryPath, tabId); }, - }); - } catch (error) { - console.error(error) - } - }; - + }, + }); + } catch (error) { + console.error(error); + } + }; + return ( <> Directory + { + executeEvent("appsDevModeAddTab", { + data: { + service: "APP", + name: "Q-Sandbox", + tabId: uid.rnd(), + }, + }); + }} + > + + + + center-icon + + + Q-Sandbox + + + { + executeEvent("appsDevModeAddTab", { + data: { + url: "http://127.0.0.1:12391", + isPreview: false, + customIcon: swaggerSVG + }, + }); + }} + > + + + + center-icon + + + API + + {isShow && ( - { - if (e.key === 'Enter' && domain && port) { - onOk({ portVal: port, domainVal: domain }); - } - }} - > - - {"Add custom framework"} - - - - - setDomain(e.target.value)} - /> - - - - setPort(e.target.value)} - /> - - - - - - - - + { + if (e.key === "Enter" && domain && port) { + onOk({ portVal: port, domainVal: domain }); + } + }} + > + + {"Add custom framework"} + + + + + setDomain(e.target.value)} + /> + + + + setPort(e.target.value)} + /> + + + + + + + )} ); diff --git a/src/components/Apps/AppsDevModeTabComponent.tsx b/src/components/Apps/AppsDevModeTabComponent.tsx index eee87e2..46372a5 100644 --- a/src/components/Apps/AppsDevModeTabComponent.tsx +++ b/src/components/Apps/AppsDevModeTabComponent.tsx @@ -1,59 +1,67 @@ -import React from 'react' -import { TabParent } from './Apps-styles' +import React from "react"; +import { TabParent } from "./Apps-styles"; import NavCloseTab from "../../assets/svgs/NavCloseTab.svg"; -import { getBaseApiReact } from '../../App'; -import { Avatar, ButtonBase } from '@mui/material'; +import { getBaseApiReact } from "../../App"; +import { Avatar, ButtonBase } from "@mui/material"; import LogoSelected from "../../assets/svgs/LogoSelected.svg"; -import { executeEvent } from '../../utils/events'; +import { executeEvent } from "../../utils/events"; -export const AppsDevModeTabComponent = ({isSelected, app}) => { +export const AppsDevModeTabComponent = ({ isSelected, app }) => { return ( - { - if(isSelected){ - executeEvent('removeTabDevMode', { - data: app - }) - return - } - executeEvent('setSelectedTabDevMode', { + { + if (isSelected) { + executeEvent("removeTabDevMode", { data: app, - isDevMode: true - }) - }}> - + }); + return; + } + executeEvent("setSelectedTabDevMode", { + data: app, + isDevMode: true, + }); + }} + > + {isSelected && ( - - - - ) } - - center-icon - - + + )} + + center-icon + + - ) -} - + ); +};