diff --git a/frontend/src/HomePage/ExportAppModal.jsx b/frontend/src/HomePage/ExportAppModal.jsx index d523f1d04b..7a3566c511 100644 --- a/frontend/src/HomePage/ExportAppModal.jsx +++ b/frontend/src/HomePage/ExportAppModal.jsx @@ -6,231 +6,257 @@ import { toast } from 'react-hot-toast'; import { ButtonSolid } from '@/_components/AppButton'; export default function ExportAppModal({ title, show, closeModal, customClassName, app, darkMode }) { - const currentVersion = app?.editing_version; - const [versions, setVersions] = useState(undefined); - const [tables, setTables] = useState(undefined); - const [versionId, setVersionId] = useState(currentVersion?.id); - const [exportTjDb, setExportTjDb] = useState(true); + const currentVersion = app?.editing_version; + const [versions, setVersions] = useState(undefined); + const [tables, setTables] = useState(undefined); + const [allTables, setAllTables] = useState(undefined); + const [versionId, setVersionId] = useState(currentVersion?.id); + const [exportTjDb, setExportTjDb] = useState(true); - useEffect(() => { - async function fetchAppVersions() { - try { - const fetchVersions = await appsService.getVersions(app.id); - const { versions } = fetchVersions; - setVersions(versions); - } catch (error) { - toast.error('Could not fetch the versions.', { - position: 'top-center', - }); - closeModal(); - } - } - async function fetchAppTables() { - try { - const fetchTables = await appsService.getTables(app.id); - const { tables } = fetchTables; - setTables(tables); - } catch (error) { - toast.error('Could not fetch the tables.', { - position: 'top-center', - }); - closeModal(); - } - } - fetchAppVersions(); - fetchAppTables(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const exportApp = (app, versionId, exportTjDb, tables) => { - const appOpts = { - app: [ - { - id: app.id, - ...(versionId && { search_params: { version_id: versionId } }), - }, - ], - }; - const requestBody = { - ...appOpts, - ...(exportTjDb && { tooljet_database: tables }), - organization_id: app.organization_id ?? app.organizationId, - }; - - appsService - .exportResource(requestBody) - .then((data) => { - const appName = app.name.replace(/\s+/g, '-').toLowerCase(); - const fileName = `${appName}-export-${new Date().getTime()}`; - // simulate link click download - const json = JSON.stringify(data, null, 2); - const blob = new Blob([json], { type: 'application/json' }); - const href = URL.createObjectURL(blob); - const link = document.createElement('a'); - link.href = href; - link.download = fileName + '.json'; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - closeModal(); - }) - .catch((error) => { - toast.error(`Could not export app: ${error.data.message}`, { - position: 'top-center', - }); - closeModal(); - }); - }; - - return ( - closeModal(false)} - contentClassName={`home-modal-component home-version-modal-component ${ - customClassName ? ` ${customClassName}` : '' - } ${darkMode && 'dark-theme'}`} - show={show} - backdrop={true} - keyboard={true} - enforceFocus={false} - animation={false} - onEscapeKeyDown={() => closeModal()} - centered - data-cy={'modal-component'} - > - - - {title} - - - - {Array.isArray(versions) ? ( - <> - -
-
- - Current Version - - -
- {versions.length >= 2 ? ( -
- - Other Versions - - {versions.map((version) => { - if (version.id !== currentVersion?.id) { - return ( - - ); + useEffect(() => { + async function fetchAppVersions() { + try { + const fetchVersions = await appsService.getVersions(app.id); + const { versions } = fetchVersions; + setVersions(versions); + } catch (error) { + toast.error('Could not fetch the versions.', { + position: 'top-center', + }); + closeModal(); + } + } + async function fetchAppTables() { + try { + const fetchTables = await appsService.getTables(app.id); // this is used to get all tables + const { tables } = fetchTables; + const tbl = await appsService.getAppByVersion(app.id, versionId) // this is used to get particular App by version + const { dataQueries } = tbl + const extractedIdData = []; + dataQueries.forEach(item => { + if (item.kind === "tooljetdb") { + const joinOptions = item.options?.join_table?.joins ?? []; + (joinOptions || []).forEach((join) => { + const { table, conditions } = join; + if (table) extractedIdData.push(table); + conditions?.conditionsList?.forEach((condition) => { + const { leftField, rightField } = condition; + if (leftField?.table) { + extractedIdData.push(leftField?.table); + } + if (rightField?.table) { + extractedIdData.push(rightField?.table); + } + }); + }); } - })} -
- ) : ( -
- No other versions found -
- )} -
- -
- setExportTjDb(!exportTjDb)} /> -

Export ToolJet table schema

-
- - exportApp(app, null, exportTjDb, tables)} - > - Export All - - exportApp(app, versionId, exportTjDb, tables)} - > - Export selected version - - - - ) : ( - - )} - - ); + }); + const uniqueSet = new Set(extractedIdData); + const selectedVersiontable = Array.from(uniqueSet).map((item) => ({ table_id: item })); + setTables(selectedVersiontable) + setAllTables(tables) + } catch (error) { + toast.error('Could not fetch the tables.', { + position: 'top-center', + }); + closeModal(); + } + } + fetchAppVersions(); + fetchAppTables(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [versionId]); + + const exportApp = (app, versionId, exportTjDb, exportTables) => { + const appOpts = { + app: [ + { + id: app.id, + ...(versionId && { search_params: { version_id: versionId } }), + }, + ], + }; + + const requestBody = { + ...appOpts, + ...(exportTjDb && { tooljet_database: exportTables }), + organization_id: app.organization_id, + }; + + appsService + .exportResource(requestBody) + .then((data) => { + const appName = app.name.replace(/\s+/g, '-').toLowerCase(); + const fileName = `${appName}-export-${new Date().getTime()}`; + // simulate link click download + const json = JSON.stringify(data, null, 2); + const blob = new Blob([json], { type: 'application/json' }); + const href = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.href = href; + link.download = fileName + '.json'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + closeModal(); + }) + .catch((error) => { + toast.error(`Could not export app: ${error.data.message}`, { + position: 'top-center', + }); + closeModal(); + }); + }; + + return ( + closeModal(false)} + contentClassName={`home-modal-component home-version-modal-component ${customClassName ? ` ${customClassName}` : '' + } ${darkMode && 'dark-theme'}`} + show={show} + backdrop={true} + keyboard={true} + enforceFocus={false} + animation={false} + onEscapeKeyDown={() => closeModal()} + centered + data-cy={'modal-component'} + > + + + {title} + + + + {Array.isArray(versions) ? ( + <> + +
+
+ + Current Version + + +
+ {versions.length >= 2 ? ( +
+ + Other Versions + + {versions.map((version) => { + if (version.id !== currentVersion?.id) { + return ( + + ); + } + })} +
+ ) : ( +
+ No other versions found +
+ )} +
+ +
+ setExportTjDb(!exportTjDb)} /> +

Export ToolJet table schema

+
+ + exportApp(app, null, exportTjDb, allTables)} + > + Export All + + exportApp(app, versionId, exportTjDb, tables)} + > + Export selected version + + + + ) : ( + + )} + + ); } function InputRadioField({ - versionId, - versionName, - versionCreatedAt, - checked = undefined, - key = undefined, - setVersionId, - className, + versionId, + versionName, + versionCreatedAt, + checked = undefined, + key = undefined, + setVersionId, + className, }) { - return ( - - setVersionId(target.value)} - style={{ marginLeft: '1rem' }} - className="cursor-pointer" - /> - - - ); + return ( + + setVersionId(target.value)} + style={{ marginLeft: '1rem' }} + className="cursor-pointer" + /> + + + ); } function Loader() { - return ( - -
-
Loading versions ...
-
-
- - ); + return ( + +
+
Loading versions ...
+
+
+ + ); }