diff --git a/.github/workflows/cypress-appbuilder.yml b/.github/workflows/cypress-appbuilder.yml index b7d1177183..2cbff90ea9 100644 --- a/.github/workflows/cypress-appbuilder.yml +++ b/.github/workflows/cypress-appbuilder.yml @@ -144,7 +144,7 @@ jobs: run: docker buildx use mybuilder - name: Build docker image - run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypress + run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypressplaform - name: Set up environment variables run: | diff --git a/.github/workflows/cypress-marketplace.yml b/.github/workflows/cypress-marketplace.yml index 79c3ad776b..b2c138ff6c 100644 --- a/.github/workflows/cypress-marketplace.yml +++ b/.github/workflows/cypress-marketplace.yml @@ -38,7 +38,7 @@ jobs: run: docker buildx use mybuilder - name: Build docker image - run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypress + run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypressplaform - name: Set up environment variables run: | @@ -131,7 +131,7 @@ jobs: run: docker buildx use mybuilder - name: Build docker image - run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypress + run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypressplaform - name: Set up environment variables run: | diff --git a/.github/workflows/cypress-platform.yml b/.github/workflows/cypress-platform.yml index df001669df..6eda6f4962 100644 --- a/.github/workflows/cypress-platform.yml +++ b/.github/workflows/cypress-platform.yml @@ -148,7 +148,7 @@ jobs: run: docker buildx use mybuilder - name: Build docker image - run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypress + run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile . -t tooljet/tj-osv:cypressplaform - name: Set up environment variables run: | diff --git a/.github/workflows/docs-pr-app.yml b/.github/workflows/docs-pr-app.yml new file mode 100644 index 0000000000..69ef9a9306 --- /dev/null +++ b/.github/workflows/docs-pr-app.yml @@ -0,0 +1,222 @@ +name: Render PR deploy +on: + pull_request_target: + types: [labeled, unlabeled, closed] +env: + PR_NUMBER: ${{ github.event.number }} + BRANCH_NAME: ${{ github.head_ref || github.ref_name }} + +permissions: + pull-requests: write + issues: write + +jobs: + create-review-docs-app: + if: ${{ github.event.action == 'labeled' && github.event.label.name == 'create-review-docs-app' }} + runs-on: ubuntu-latest + + steps: + - name: Create deployment + id: create-deployment + run: | + export RESPONSE=$(curl --request POST \ + --url https://api.render.com/v1/services \ + --header 'accept: application/json' \ + --header 'content-type: application/json' \ + --header 'Authorization: Bearer ${{ secrets.RENDER_API_KEY }}' \ + --data ' + { + "type": "static_site", + "autoDeploy": "yes", + "branch": "${{ env.BRANCH_NAME }}", + "name": "ToolJet PR #${{ env.PR_NUMBER }}", + "ownerId": "tea-caeo4bj19n072h3dddc0", + "repo": "${{ github.event.pull_request.head.repo.git_url }}", + "rootDir": "docs", + "envVars": [ + { + "key": "NODE_ENV", + "value": "production" + }, + { + "key": "NODE_VERSION", + "value": "16.18.1" + }, + { + "key": "NPM_VERSION", + "value": "8.19.2" + }, + { + "key": "GA_MID", + "value": "dummy" + } + ], + "serviceDetails": { + "pullRequestPreviewsEnabled": "no", + "buildCommand": "npm i && npm run build", + "publishPath": "build/", + "url": "https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com" + } + }') + + echo "response: $RESPONSE" + export SERVICE_ID=$(echo $RESPONSE | jq -r '.service.id') + echo "SERVICE_ID=$SERVICE_ID" >> $GITHUB_ENV + + - name: Comment deployment URL + uses: actions/github-script@v5 + with: + github-token: ${{secrets.GITHUB_TOKEN}} + script: | + github.rest.issues.createComment({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + body: 'Deployment: https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com \n Dashboard: https://dashboard.render.com/static/${{ env.SERVICE_ID }}' + }) + + - uses: actions/github-script@v6 + with: + script: | + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'create-review-docs-app' + }) + } catch (e) { + console.log(e) + } + + await github.rest.issues.addLabels({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + labels: ['active-review-docs-app'] + }) + + destroy-review-docs-app: + if: ${{ (github.event.action == 'labeled' && github.event.label.name == 'destroy-review-docs-app') || github.event.action == 'closed' }} + runs-on: ubuntu-latest + + steps: + - name: Delete service + run: | + export SERVICE_ID=$(curl --request GET \ + --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \ + jq -r '.[0].service.id') + + curl --request DELETE \ + --url https://api.render.com/v1/services/$SERVICE_ID \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' + + - uses: actions/github-script@v6 + with: + script: | + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'destroy-review-docs-app' + }) + } catch (e) { + console.log(e) + } + + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'suspend-review-docs-app' + }) + } catch (e) { + console.log(e) + } + + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'active-review-docs-app' + }) + } catch (e) { + console.log(e) + } + + suspend-review-docs-app: + if: ${{ github.event.action == 'labeled' && github.event.label.name == 'suspend-review-docs-app' }} + runs-on: ubuntu-latest + + steps: + - name: Suspend service + run: | + export SERVICE_ID=$(curl --request GET \ + --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \ + jq -r '.[0].service.id') + + curl --request POST \ + --url https://api.render.com/v1/services/$SERVICE_ID/suspend \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' + + - uses: actions/github-script@v6 + with: + script: | + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'active-review-docs-app' + }) + } catch (e) { + console.log(e) + } + + resume-review-docs-app: + if: ${{ github.event.action == 'unlabeled' && github.event.label.name == 'suspend-review-docs-app' }} + runs-on: ubuntu-latest + + steps: + - name: Resume service + run: | + export SERVICE_ID=$(curl --request GET \ + --url 'https://api.render.com/v1/services?name=ToolJet%20PR%20%23${{ env.PR_NUMBER }}&limit=1' \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' | \ + jq -r '.[0].service.id') + + curl --request POST \ + --url https://api.render.com/v1/services/$SERVICE_ID/resume \ + --header 'accept: application/json' \ + --header 'authorization: Bearer ${{ secrets.RENDER_API_KEY }}' + + - uses: actions/github-script@v6 + with: + script: | + await github.rest.issues.addLabels({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + labels: ['active-review-docs-app'] + }) + + try { + await github.rest.issues.removeLabel({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.repo, + name: 'suspend-review-docs-app' + }) + } catch (e) { + console.log(e) + } diff --git a/.github/workflows/stale-docs-pr-render-deploys.yml b/.github/workflows/stale-docs-pr-render-deploys.yml new file mode 100644 index 0000000000..a8cb4f2a7b --- /dev/null +++ b/.github/workflows/stale-docs-pr-render-deploys.yml @@ -0,0 +1,45 @@ +name: Label for stale Docs PR render deploys +on: + workflow_dispatch: + schedule: + - cron: "0 0 * * *" + +permissions: + issues: write + +jobs: + label-stale-deploys: + runs-on: ubuntu-latest + permissions: + pull-requests: write + steps: + - uses: akshaysasidrn/stale-label-fetch@v1.1 + id: stale-label + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + stale-label: "active-review-docs-app" + stale-time: "86400" + type: "pull_request" + - name: Get stale numbers + run: echo "Matched PR numbers - ${{ steps.stale-label.outputs.stale-numbers }}" + - name: Add suspend label + uses: actions/github-script@v6 + env: + STALE_NUMBERS: ${{ steps.stale-label.outputs.stale-numbers }} + with: + github-token: ${{ secrets.TJ_BOT_PAT }} + script: | + if (!process.env.STALE_NUMBERS) return + + const prNumbers = process.env.STALE_NUMBERS.split(",") + + console.log(`Adding suspend labels for: ${prNumbers}`) + + for (const prNumber of prNumbers) { + github.rest.issues.addLabels({ + issue_number: prNumber, + owner: context.repo.owner, + repo: context.repo.repo, + labels: ['suspend-review-docs-app'] + }) + } diff --git a/.version b/.version index 4e2200b98e..f48f82fa2c 100644 --- a/.version +++ b/.version @@ -1 +1 @@ -2.20.1 +2.22.0 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 786388589d..d5e9f4f00f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -17,10 +17,9 @@ We use GitHub to host code, to track issues and feature requests, as well as acc ## First-time contributors We've tagged some issues to make it easy to get started :smile: -[Good first issues](https://github.com/ToolJet/ToolJet/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) -Looking for ReactJS issues? Check out our [Frontend issues](https://github.com/ToolJet/ToolJet/issues?q=is%3Aissue+is%3Aopen+label%3Afrontend) +[Good first issues](https://github.com/ToolJet/ToolJet/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) -Add a comment on the issue and wait for the issue to be assigned before you start working on it. This helps to avoid multiple people working on similar issues. +If you're interested in working on an issue, make sure it has either a `good-first-issue` or `up-for-grabs` label added. Add a comment on the issue and wait for the issue to be assigned before you start working on it. This helps to avoid multiple people working on similar issues. ## We Use [GitHub Flow](https://docs.github.com/en/get-started/quickstart/github-flow), So All Code Changes Happen Through Pull Requests Pull requests are the best way to propose changes to the codebase (we use [Git-Flow](https://nvie.com/posts/a-successful-git-branching-model/)). We actively welcome your pull requests: diff --git a/cypress-tests/cypress-workspace.config.js b/cypress-tests/cypress-workspace.config.js index 4d5ce1ec0e..f52473973f 100644 --- a/cypress-tests/cypress-workspace.config.js +++ b/cypress-tests/cypress-workspace.config.js @@ -83,7 +83,7 @@ module.exports = defineConfig({ "cypress/e2e/editor/app-version/version.cy.js" ], numTestsKeptInMemory: 1, - redirectionLimit: 7, + redirectionLimit: 15, experimentalRunAllSpecs: true, experimentalMemoryManagement: true, video: false, diff --git a/cypress-tests/cypress.config.js b/cypress-tests/cypress.config.js index 2321dc3cd4..fbe68ac201 100644 --- a/cypress-tests/cypress.config.js +++ b/cypress-tests/cypress.config.js @@ -79,8 +79,8 @@ module.exports = defineConfig({ baseUrl: "http://localhost:8082", specPattern: "cypress/e2e/**/*.cy.js", downloadsFolder: "cypress/downloads", - numTestsKeptInMemory: 10, - redirectionLimit: 5, + numTestsKeptInMemory: 0, + redirectionLimit: 7, experimentalRunAllSpecs: true, trashAssetsBeforeRuns: true, experimentalMemoryManagement: true, diff --git a/cypress-tests/cypress/commands/apiCommands.js b/cypress-tests/cypress/commands/apiCommands.js index d92f378b1e..8d88670dc8 100644 --- a/cypress-tests/cypress/commands/apiCommands.js +++ b/cypress-tests/cypress/commands/apiCommands.js @@ -1,6 +1,10 @@ Cypress.Commands.add( "apiLogin", - (userEmail = "dev@tooljet.io", userPassword = "password", workspaceId = '') => { + ( + userEmail = "dev@tooljet.io", + userPassword = "password", + workspaceId = "" + ) => { cy.request({ url: `http://localhost:3000/api/authenticate/${workspaceId}`, method: "POST", @@ -138,4 +142,24 @@ Cypress.Commands.add( // ] // ); - +Cypress.Commands.add("apiCreateWorkspace", (workspaceName, workspaceSlug) => { + cy.getCookie("tj_auth_token").then((cookie) => { + cy.request( + { + method: "POST", + url: "http://localhost:3000/api/organizations", + headers: { + "Tj-Workspace-Id": Cypress.env("workspaceId"), + Cookie: `tj_auth_token=${cookie.value}`, + }, + body: { + name: workspaceName, + slug: workspaceSlug, + }, + }, + { log: false } + ).then((response) => { + expect(response.status).to.equal(201); + }); + }); +}); diff --git a/cypress-tests/cypress/commands/commands.js b/cypress-tests/cypress/commands/commands.js index 53ca1b7375..016af0bf06 100644 --- a/cypress-tests/cypress/commands/commands.js +++ b/cypress-tests/cypress/commands/commands.js @@ -56,6 +56,8 @@ Cypress.Commands.add("createApp", (appName) => { cy.get("body").then(($title) => { cy.get(getAppButtonSelector($title)).click(); + cy.clearAndType('[data-cy="app-name-input"]', appName); + cy.get('[data-cy="+ Create app"]').click(); }); cy.waitForAppLoad(); cy.skipEditorPopover(); diff --git a/cypress-tests/cypress/constants/selectors/common.js b/cypress-tests/cypress/constants/selectors/common.js index e20cfb998d..a61fd9ab5b 100644 --- a/cypress-tests/cypress/constants/selectors/common.js +++ b/cypress-tests/cypress/constants/selectors/common.js @@ -327,10 +327,10 @@ export const commonWidgetSelector = { modalHeader: '[data-cy="modal-header"]', makePublicAppToggleLabel: '[data-cy="make-public-app-label"]', shareableAppLink: '[data-cy="shareable-app-link-label"]', - copyAppLinkButton: '[data-cy="copy-app-link-button"]', // iframeLinkLabel: '[data-cy="iframe-link-label"]', // ifameLinkCopyButton: '[data-cy="iframe-link-copy-button"]', }, + copyAppLinkButton: '.input-group > :nth-child(3)', makePublicAppToggle: '[data-cy="make-public-app-toggle"]', appLink: '[data-cy="app-link"]', appNameSlugInput: '[data-cy="app-name-slug-input"]', diff --git a/cypress-tests/cypress/constants/texts/common.js b/cypress-tests/cypress/constants/texts/common.js index 22699a00f3..6b6c5db6cd 100644 --- a/cypress-tests/cypress/constants/texts/common.js +++ b/cypress-tests/cypress/constants/texts/common.js @@ -164,9 +164,8 @@ export const commonText = { shareModalElements: { modalHeader: "Share", - makePublicAppToggleLabel: "Make application public?", - shareableAppLink: "Get shareable link for this application", - copyAppLinkButton: "copy", + makePublicAppToggleLabel: "Make application public", + shareableAppLink: "Shareable app link", // iframeLinkLabel: "Get embeddable link for this application", // ifameLinkCopyButton: "copy", }, diff --git a/cypress-tests/cypress/constants/texts/dashboard.js b/cypress-tests/cypress/constants/texts/dashboard.js index 47131ff553..3e8f1ab913 100644 --- a/cypress-tests/cypress/constants/texts/dashboard.js +++ b/cypress-tests/cypress/constants/texts/dashboard.js @@ -37,7 +37,7 @@ export const dashboardText = { }, seeAllAppsTemplateButton: "See all templates", addToFolderTitle: "Add to folder", - appClonedToast: "App cloned successfully.", + appClonedToast: "App cloned successfully!", darkModeText: "Dark Mode", lightModeText: "Light Mode", dashboardAppsHeaderLabel: " All apps", diff --git a/cypress-tests/cypress/constants/texts/exportImport.js b/cypress-tests/cypress/constants/texts/exportImport.js index 530ed63552..b193a1a529 100644 --- a/cypress-tests/cypress/constants/texts/exportImport.js +++ b/cypress-tests/cypress/constants/texts/exportImport.js @@ -20,5 +20,5 @@ export const exportAppModalText = { export const importText = { importOption: "Import", couldNotImportAppToastMessage: `Could not import: SyntaxError: Unexpected token`, - appImportedToastMessage: "Imported successfully.", + appImportedToastMessage: "App imported successfully.", }; diff --git a/cypress-tests/cypress/e2e/editor/app-version/version.cy.js b/cypress-tests/cypress/e2e/editor/app-version/version.cy.js index a890da5760..b3ade9630e 100644 --- a/cypress-tests/cypress/e2e/editor/app-version/version.cy.js +++ b/cypress-tests/cypress/e2e/editor/app-version/version.cy.js @@ -42,9 +42,8 @@ describe("App Version Functionality", () => { }); it("Verify the elements of the version module", () => { - cy.createApp(); + cy.createApp(data.appName); cy.get(appVersionSelectors.appVersionLabel).should("be.visible"); - cy.renameApp(data.appName); cy.get(commonSelectors.appNameInput).verifyVisibleElement( "have.value", data.appName diff --git a/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js index 20ba9f4881..033365e6b1 100644 --- a/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/globalSetingsHappyPath.cy.js @@ -19,17 +19,16 @@ import { } from "Texts/common"; describe("Editor- Global Settings", () => { + const data = {}; beforeEach(() => { + data.appName = `${fake.companyName}-App`; cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(data.appName); cy.openApp(); }); it("should verify global settings", () => { - const data = {}; data.backgroundColor = fake.randomRgba; - data.appName = `${fake.companyName}-App`; - cy.renameApp(data.appName); cy.get("[data-cy='left-sidebar-settings-button']").click(); cy.get('[data-cy="label-global settings"]').verifyVisibleElement( diff --git a/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js b/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js index f821183964..a8dce694c5 100644 --- a/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js +++ b/cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js @@ -1,3 +1,4 @@ +import { fake } from "Fixtures/fake"; import { verifyMultipleComponentValuesFromInspector, verifyComponentValueFromInspector, @@ -15,7 +16,7 @@ import { multipageSelector } from "Selectors/multipage"; describe("Editor- Inspector", () => { beforeEach(() => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(`${fake.companyName}-App`); cy.openApp(); }); diff --git a/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js b/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js index 1e2c3f33a5..ccf9060476 100644 --- a/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js +++ b/cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js @@ -41,13 +41,12 @@ import { describe("Multipage", () => { beforeEach(() => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(`${fake.companyName}-App`); cy.openApp(); }); it("should verify the elements on multipage", () => { const data = {}; - data.appName = `${fake.companyName}-App`; data.widgetName = fake.widgetName; data.tooltipText = fake.randomSentence; data.minimumLength = randomNumber(1, 4); diff --git a/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js index 22b0a65aa5..dcbda8bd09 100644 --- a/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js @@ -64,7 +64,7 @@ import { deleteDownloadsFolder } from "Support/utils/common"; describe("RunJS", () => { beforeEach(() => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(`${fake.companyName}-App`); cy.openApp(); cy.viewport(1800, 1800); cy.dragAndDropWidget("Button"); diff --git a/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js index 6f2bef4624..20173913b3 100644 --- a/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/queries/runpyHappyPath.cy.js @@ -63,7 +63,7 @@ import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector"; describe("runpy", () => { beforeEach(() => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(`${fake.companyName}-App`); cy.openApp(); cy.viewport(1800, 1800); cy.dragAndDropWidget("Button"); @@ -214,7 +214,10 @@ actions.unsetPageVariable('pageVar')` cy.wait(200); cy.waitForAutoSave(); query("run"); - cy.get('[data-cy="sign-in-header"]').should("be.visible"); + + cy.get('[data-cy="sign-in-header"]', { timeout: 20000 }).should( + "be.visible" + ); }); it("should verify global and page data", () => { diff --git a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js index 10dd23461b..1fea385edf 100644 --- a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js @@ -56,7 +56,7 @@ import { resizeQueryPanel } from "Support/utils/dataSource"; describe("Table", () => { beforeEach(() => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(`${fake.companyName}-App`); cy.openApp(); deleteDownloadsFolder(); cy.viewport(1400, 2200); diff --git a/cypress-tests/cypress/e2e/exportImport/import.cy.js b/cypress-tests/cypress/e2e/exportImport/import.cy.js index 4659180cf7..d5763aeeb8 100644 --- a/cypress-tests/cypress/e2e/exportImport/import.cy.js +++ b/cypress-tests/cypress/e2e/exportImport/import.cy.js @@ -61,14 +61,16 @@ describe("App Import Functionality", () => { cy.get(importSelectors.importOptionInput).selectFile(appFile, { force: true, }); - cy.verifyToastMessage( - commonSelectors.toastMessage, - importText.appImportedToastMessage - ); + cy.get('[data-cy="import-app-title"]').should("be.visible"); + cy.get('[data-cy="Import app"]').click(); + cy.get(".go3958317564") + .should("be.visible") + .and("have.text", importText.appImportedToastMessage); + cy.get(".driver-close-btn").click(); cy.get(commonSelectors.appNameInput).verifyVisibleElement( "contain.value", - appData.name + appData.name.toLowerCase() ); cy.modifyCanvasSize(900, 600); cy.dragAndDropWidget(buttonText.defaultWidgetText); @@ -107,10 +109,12 @@ describe("App Import Functionality", () => { cy.get(importSelectors.importOptionInput).selectFile(exportedFilePath, { force: true, }); - cy.verifyToastMessage( - commonSelectors.toastMessage, - importText.appImportedToastMessage - ); + + cy.get('[data-cy="import-app-title"]').should("be.visible"); + cy.get('[data-cy="Import app"]').click(); + cy.get(".go3958317564") + .should("be.visible") + .and("have.text", importText.appImportedToastMessage); cy.get( `[data-cy="draggable-widget-${buttonText.defaultWidgetName}"]` ).should("be.visible"); @@ -119,7 +123,7 @@ describe("App Import Functionality", () => { cy.get(commonSelectors.appNameInput).verifyVisibleElement( "contain.value", - exportedAppData.app[0].definition.appV2.name + exportedAppData.app[0].definition.appV2.name.toLowerCase() ); cy.get( appVersionSelectors.currentVersionField((currentVersion = "v1")) @@ -178,10 +182,11 @@ describe("App Import Functionality", () => { force: true, } ); - cy.verifyToastMessage( - commonSelectors.toastMessage, - importText.appImportedToastMessage - ); + cy.get('[data-cy="import-app-title"]').should("be.visible"); + cy.get('[data-cy="Import app"]').click(); + cy.get(".go3958317564") + .should("be.visible") + .and("have.text", importText.appImportedToastMessage); cy.get(appVersionSelectors.appVersionMenuField).click(); cy.get(appVersionSelectors.appVersionContentList).should( "have.text", @@ -195,7 +200,7 @@ describe("App Import Functionality", () => { cy.get(commonSelectors.appNameInput).verifyVisibleElement( "contain.value", - exportedAppData.app[0].definition.appV2.name + exportedAppData.app[0].definition.appV2.name.toLowerCase() ); cy.get( appVersionSelectors.currentVersionField( diff --git a/cypress-tests/cypress/e2e/workspace/dashboard.cy.js b/cypress-tests/cypress/e2e/workspace/dashboard.cy.js index 3a9274b1a7..e7d5c84ffb 100644 --- a/cypress-tests/cypress/e2e/workspace/dashboard.cy.js +++ b/cypress-tests/cypress/e2e/workspace/dashboard.cy.js @@ -168,12 +168,10 @@ describe("dashboard", () => { it("Should verify app card elements and app card operations", () => { cy.apiLogin(); - cy.apiCreateApp(); + cy.apiCreateApp(data.appName); cy.openApp(); - cy.renameApp(data.appName); cy.dragAndDropWidget("Table", 250, 250); - cy.get(commonSelectors.editorPageLogo).click(); cy.wait(500); @@ -192,7 +190,6 @@ describe("dashboard", () => { expect($el.contents().last().text().trim()).to.eq("The Developer"); }); }); - cy.reloadAppForTheElement(data.appName); viewAppCardOptions(data.appName); cy.get( @@ -213,7 +210,6 @@ describe("dashboard", () => { modifyAndVerifyAppCardIcon(data.appName); createFolder(data.folderName); - cy.reloadAppForTheElement(data.appName); viewAppCardOptions(data.appName); cy.get( @@ -246,7 +242,7 @@ describe("dashboard", () => { cy.get(commonSelectors.appCard(data.appName)) .contains(data.appName) .should("be.visible"); - cy.reloadAppForTheElement(data.appName); + viewAppCardOptions(data.appName); cy.get(commonSelectors.appCardOptions(commonText.removeFromFolderOption)) @@ -256,7 +252,6 @@ describe("dashboard", () => { cancelModal(commonText.cancelButton); - cy.reloadAppForTheElement(data.appName); viewAppCardOptions(data.appName); cy.get( commonSelectors.appCardOptions(commonText.removeFromFolderOption) @@ -276,17 +271,13 @@ describe("dashboard", () => { deleteFolder(data.folderName); cy.get(commonSelectors.allApplicationsLink).click(); - cy.reloadAppForTheElement(data.appName); viewAppCardOptions(data.appName); cy.get(commonSelectors.appCardOptions(commonText.cloneAppOption)).click(); - cy.verifyToastMessage( - commonSelectors.toastMessage, - dashboardText.appClonedToast - ); - // cy.waitForAppLoad(); - cy.wait(2000); - cy.clearAndType(commonSelectors.appNameInput, data.cloneAppName); + cy.get('[data-cy="Clone app"]').click(); + cy.get('.go3958317564').should('be.visible').and('have.text', dashboardText.appClonedToast) + cy.wait(3000); + cy.renameApp(data.cloneAppName); cy.dragAndDropWidget("button", 25, 25); cy.get(commonSelectors.editorPageLogo).click(); cy.wait("@appLibrary"); @@ -341,12 +332,11 @@ describe("dashboard", () => { it("Should verify the app CRUD operation", () => { data.appName = `${fake.companyName}-App`; cy.appUILogin(); - cy.createApp(); - cy.renameApp(data.appName); + cy.createApp(data.appName); cy.dragAndDropWidget("Button", 450, 450); cy.get(commonSelectors.editorPageLogo).click(); - cy.reloadAppForTheElement(data.appName); + cy.get(commonSelectors.appCard(data.appName)).should( "contain.text", data.appName @@ -368,8 +358,7 @@ describe("dashboard", () => { it("Should verify the folder CRUD operation", () => { data.appName = `${fake.companyName}-App`; cy.appUILogin(); - cy.createApp(); - cy.renameApp(data.appName); + cy.createApp(data.appName); cy.dragAndDropWidget("Button", 100, 100); cy.get(commonSelectors.editorPageLogo).click(); @@ -431,7 +420,7 @@ describe("dashboard", () => { .should("be.visible") .and("have.text", "Edit folder"); - cy.get(commonSelectors.folderNameInput).should("be.visible") + cy.get(commonSelectors.folderNameInput).should("be.visible"); // verifyModal( // commonText.updateFolderTitle, diff --git a/cypress-tests/cypress/e2e/workspace/manageSSO.cy.js b/cypress-tests/cypress/e2e/workspace/manageSSO.cy.js index cf94e5a2a8..bf78dcf765 100644 --- a/cypress-tests/cypress/e2e/workspace/manageSSO.cy.js +++ b/cypress-tests/cypress/e2e/workspace/manageSSO.cy.js @@ -160,9 +160,11 @@ describe("Manage SSO for multi workspace", () => { if (envVar === "Community") { it("Should verify the workspace login page", () => { - data.workspaceName = fake.companyName; - - common.createWorkspace(data.workspaceName); + data.workspaceName = fake.companyName.toLowerCase(); + cy.apiLogin() + cy.apiCreateWorkspace(data.workspaceName, data.workspaceName) + cy.visit(data.workspaceName) + cy.wait(500) common.navigateToManageSSO(); SSO.visitWorkspaceLoginPage(); SSO.workspaceLoginPageElements(data.workspaceName); @@ -243,10 +245,11 @@ describe("Manage SSO for multi workspace", () => { cy.notVisible(commonSelectors.passwordInputField); cy.notVisible(commonSelectors.loginButton); - data.workspaceName = fake.companyName; - cy.appUILogin(); - common.createWorkspace(data.workspaceName); - cy.wait(300); + data.workspaceName = fake.companyName.toLowerCase(); + cy.apiLogin() + cy.apiCreateWorkspace(data.workspaceName, data.workspaceName) + cy.visit(data.workspaceName) + cy.wait(500) SSO.disableDefaultSSO(); cy.get(ssoSelector.passwordEnableToggle).uncheck(); cy.get(commonSelectors.buttonSelector("Yes")).click(); diff --git a/cypress-tests/cypress/e2e/workspace/shareApp.cy.js b/cypress-tests/cypress/e2e/workspace/shareApp.cy.js index ff6c9452ed..89ca36c237 100644 --- a/cypress-tests/cypress/e2e/workspace/shareApp.cy.js +++ b/cypress-tests/cypress/e2e/workspace/shareApp.cy.js @@ -13,119 +13,125 @@ describe("App share functionality", () => { data.email = fake.email.toLowerCase(); const slug = data.appName.toLowerCase().replace(/\s+/g, "-"); const firstUserEmail = data.email + const envVar = Cypress.env("environment"); beforeEach(() => { cy.appUILogin(); }); - - it("Verify private and public app share funtionality", () => { + before(() => { cy.apiLogin(); - cy.apiCreateApp(); - cy.openApp(); - cy.renameApp(data.appName); - cy.dragAndDropWidget("Table", 250, 250); + cy.apiCreateApp(data.appName); + cy.visit('/') + logout(); + }) - cy.get(commonWidgetSelector.shareAppButton).click(); + if (envVar === "Community") { + it("Verify private and public app share funtionality", () => { + cy.openApp(data.appName); + cy.dragAndDropWidget("Table", 250, 250); - for (const elements in commonWidgetSelector.shareModalElements) { - cy.get( - commonWidgetSelector.shareModalElements[elements] - ).verifyVisibleElement( + cy.get(commonWidgetSelector.shareAppButton).click(); + + for (const elements in commonWidgetSelector.shareModalElements) { + cy.get( + commonWidgetSelector.shareModalElements[elements] + ).verifyVisibleElement( + "have.text", + commonText.shareModalElements[elements] + ); + } + cy.get(commonWidgetSelector.copyAppLinkButton).should("be.visible"); + cy.get(commonWidgetSelector.makePublicAppToggle).should("be.visible"); + cy.get(commonWidgetSelector.appLink).should("be.visible"); + cy.get(commonWidgetSelector.appNameSlugInput).should("be.visible"); + // cy.get(commonWidgetSelector.iframeLink).should("be.visible"); + cy.get(commonWidgetSelector.modalCloseButton).should("be.visible"); + + cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${slug}`); + cy.get(commonWidgetSelector.modalCloseButton).click(); + cy.forceClickOnCanvas() + cy.dragAndDropWidget("Button", 50, 50); + cy.get(commonSelectors.editorPageLogo).click(); + + logout(); + cy.visit(`/applications/${slug}`); + + cy.get(commonSelectors.loginButton).should("be.visible"); + + cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io"); + cy.clearAndType(commonSelectors.passwordInputField, "password"); + cy.get(commonSelectors.loginButton).click(); + + cy.wait(500); + cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); + cy.get(commonSelectors.viewerPageLogo).click(); + + navigateToAppEditor(data.appName); + cy.get(commonWidgetSelector.shareAppButton).click(); + cy.get(commonWidgetSelector.makePublicAppToggle).check(); + cy.get(commonWidgetSelector.modalCloseButton).click(); + cy.get(commonSelectors.editorPageLogo).click(); + + logout(); + cy.visit(`/applications/${slug}`); + cy.wait(500); + cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); + }); + + it("Verify app private and public app visibility for the same workspace user", () => { + addNewUserMW(data.firstName, data.email); + + logout(); + cy.visit(`/applications/${slug}`); + cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); + + cy.appUILogin(); + navigateToAppEditor(data.appName); + cy.skipEditorPopover() + cy.get(commonWidgetSelector.shareAppButton).click(); + cy.get(commonWidgetSelector.makePublicAppToggle).uncheck(); + cy.get(commonWidgetSelector.modalCloseButton).click(); + cy.get(commonSelectors.editorPageLogo).click(); + + logout(); + cy.visit(`/applications/${slug}`); + + cy.login(data.email, "password"); + cy.get(commonSelectors.allApplicationLink).verifyVisibleElement( "have.text", - commonText.shareModalElements[elements] + commonText.allApplicationLink ); - } + }); - cy.get(commonWidgetSelector.makePublicAppToggle).should("be.visible"); - cy.get(commonWidgetSelector.appLink).should("be.visible"); - cy.get(commonWidgetSelector.appNameSlugInput).should("be.visible"); - // cy.get(commonWidgetSelector.iframeLink).should("be.visible"); - cy.get(commonWidgetSelector.modalCloseButton).should("be.visible"); + it("Verify app private and public app visibility for the same instance user", () => { + data.firstName = fake.firstName; + data.email = fake.email.toLowerCase(); - cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${slug}`); - cy.get(commonWidgetSelector.modalCloseButton).click(); - cy.forceClickOnCanvas() - cy.dragAndDropWidget("Button", 50, 50); - cy.get(commonSelectors.editorPageLogo).click(); + logout(); + userSignUp(data.firstName, data.email, "Test"); + cy.visit(`/applications/${slug}`); + cy.wait(1000); - logout(); - cy.visit(`/applications/${slug}`); + cy.clearAndType(commonSelectors.workEmailInputField, data.email); + cy.clearAndType(commonSelectors.passwordInputField, "password"); + cy.get(commonSelectors.signInButton).click(); + cy.wait(1000); - cy.get(commonSelectors.loginButton).should("be.visible"); + cy.visit("/"); + cy.wait(2000); + logout(); + cy.appUILogin(); - cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io"); - cy.clearAndType(commonSelectors.passwordInputField, "password"); - cy.get(commonSelectors.loginButton).click(); + navigateToAppEditor(data.appName); + cy.skipEditorPopover(); + cy.get(commonWidgetSelector.shareAppButton).click(); + cy.get(commonWidgetSelector.makePublicAppToggle).check(); + cy.get(commonWidgetSelector.modalCloseButton).click(); + cy.get(commonSelectors.editorPageLogo).click(); - cy.wait(500); - cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); - cy.get(commonSelectors.viewerPageLogo).click(); - - navigateToAppEditor(data.appName); - cy.get(commonWidgetSelector.shareAppButton).click(); - cy.get(commonWidgetSelector.makePublicAppToggle).check(); - cy.get(commonWidgetSelector.modalCloseButton).click(); - cy.get(commonSelectors.editorPageLogo).click(); - - logout(); - cy.visit(`/applications/${slug}`); - cy.wait(500); - cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); - }); - - it("Verify app private and public app visibility for the same workspace user", () => { - addNewUserMW(data.firstName, data.email); - - logout(); - cy.visit(`/applications/${slug}`); - cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); - - cy.appUILogin(); - navigateToAppEditor(data.appName); - cy.skipEditorPopover() - cy.get(commonWidgetSelector.shareAppButton).click(); - cy.get(commonWidgetSelector.makePublicAppToggle).uncheck(); - cy.get(commonWidgetSelector.modalCloseButton).click(); - cy.get(commonSelectors.editorPageLogo).click(); - - logout(); - cy.visit(`/applications/${slug}`); - - cy.login(data.email, "password"); - cy.get(commonSelectors.allApplicationLink).verifyVisibleElement( - "have.text", - commonText.allApplicationLink - ); - }); - - it("Verify app private and public app visibility for the same instance user", () => { - data.firstName = fake.firstName; - data.email = fake.email.toLowerCase(); - - logout(); - userSignUp(data.firstName, data.email, "Test"); - cy.visit(`/applications/${slug}`); - cy.wait(1000); - - cy.clearAndType(commonSelectors.workEmailInputField, data.email); - cy.clearAndType(commonSelectors.passwordInputField, "password"); - cy.get(commonSelectors.signInButton).click(); - cy.wait(1000); - - cy.visit("/"); - cy.wait(2000); - logout(); - cy.appUILogin(); - - navigateToAppEditor(data.appName); - cy.skipEditorPopover(); - cy.get(commonWidgetSelector.shareAppButton).click(); - cy.get(commonWidgetSelector.makePublicAppToggle).check(); - cy.get(commonWidgetSelector.modalCloseButton).click(); - cy.get(commonSelectors.editorPageLogo).click(); - - logout(); - cy.visit(`/applications/${slug}`); - cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); - cy.get(commonSelectors.viewerPageLogo).click(); - }); + logout(); + cy.visit(`/applications/${slug}`); + cy.get('[data-cy="draggable-widget-table1"]').should("be.visible"); + cy.get(commonSelectors.viewerPageLogo).click(); + }); + } }); \ No newline at end of file diff --git a/cypress-tests/cypress/e2e/workspace/userPermissions.cy.js b/cypress-tests/cypress/e2e/workspace/userPermissions.cy.js index b6ebcf5416..826d783b13 100644 --- a/cypress-tests/cypress/e2e/workspace/userPermissions.cy.js +++ b/cypress-tests/cypress/e2e/workspace/userPermissions.cy.js @@ -19,15 +19,12 @@ data.folderName = `${fake.companyName.toLowerCase()}-folder`; describe("User permissions", () => { before(() => { cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=").as("homePage"); - cy.appUILogin(); + cy.apiLogin(); + cy.apiCreateApp(data.appName); + cy.visit('/') permissions.reset(); cy.get(commonSelectors.homePageLogo).click(); cy.wait("@homePage"); - cy.createApp(); - cy.renameApp(data.appName); - cy.dragAndDropWidget("Table", 250, 250); - cy.get(commonSelectors.editorPageLogo).click(); - cy.reloadAppForTheElement(data.appName); permissions.addNewUserMW(data.firstName, data.email); common.logout(); }); @@ -41,11 +38,7 @@ describe("User permissions", () => { cy.login(data.email, usersText.password); cy.get("body").then(($title) => { if ($title.text().includes(dashboardText.emptyPageDescription)) { - cy.get(commonSelectors.dashboardAppCreateButton).click(); - cy.verifyToastMessage( - commonSelectors.toastMessage, - usersText.createAppPermissionToast - ); + cy.get(commonSelectors.dashboardAppCreateButton).should('be.disabled'); } else { cy.contains(dashboardText.createAppButton).should("not.exist"); } @@ -120,7 +113,21 @@ describe("User permissions", () => { }); it("Should verify the Create and Delete app permission", () => { + data.appName = `${fake.companyName}-App`; + cy.createApp(data.appName); + cy.get(commonSelectors.editorPageLogo).click(); + cy.wait(1000); common.navigateToManageGroups(); + cy.get(groupsSelector.appSearchBox).click(); + cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click(); + cy.get(groupsSelector.selectAddButton).click(); + cy.get("table").contains("td", data.appName); + cy.contains("td", data.appName) + .parent() + .within(() => { + cy.get("td input").first().should("be.checked"); + }); + cy.wait(500) cy.get(groupsSelector.permissionsLink).click(); cy.get(groupsSelector.appsCreateCheck).check(); cy.get(groupsSelector.permissionsLink).click(); @@ -141,11 +148,10 @@ describe("User permissions", () => { common.viewAppCardOptions(data.appName); cy.contains("Delete app").should("not.exist"); - cy.createApp(); - cy.renameApp(data.email); + cy.createApp(data.email); + cy.dragAndDropWidget("Table", 50, 50); cy.get(commonSelectors.editorPageLogo).click(); - cy.reloadAppForTheElement(data.email); common.viewAppCardOptions(data.email); cy.contains("Delete app").should("exist"); cy.get(commonSelectors.appCardOptions(commonText.deleteAppOption)).click(); diff --git a/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js b/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js index e5c4f3b26b..0d8258136b 100644 --- a/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js +++ b/cypress-tests/cypress/e2e/workspace/workspaceConstants.cy.js @@ -279,8 +279,7 @@ describe("Workspace constants", () => { cy.get(commonSelectors.homePageLogo).click(); cy.wait("@homePage"); - cy.createApp(); - cy.renameApp(data.appName); + cy.createApp(data.appName); selectQueryFromLandingPage("runjs", "JavaScript"); addInputOnQueryField("runjs", `return constants.${data.constantsName}`); diff --git a/cypress-tests/cypress/support/utils/common.js b/cypress-tests/cypress/support/utils/common.js index a39fc9fb3c..57d3e1b128 100644 --- a/cypress-tests/cypress/support/utils/common.js +++ b/cypress-tests/cypress/support/utils/common.js @@ -207,6 +207,8 @@ export const createWorkspace = (workspaceName) => { cy.get(commonSelectors.workspaceName).click(); cy.get(commonSelectors.addWorkspaceButton).click(); cy.clearAndType(commonSelectors.workspaceNameInput, workspaceName); + cy.clearAndType('[data-cy="workspace-slug-input-field"]', workspaceName); + cy.wait(1000) cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=").as("homePage"); cy.get(commonSelectors.createWorkspaceButton).click(); cy.wait("@homePage"); diff --git a/docs/docs/data-sources/appwrite.md b/docs/docs/data-sources/appwrite.md index dc11572625..c987afdd6b 100644 --- a/docs/docs/data-sources/appwrite.md +++ b/docs/docs/data-sources/appwrite.md @@ -1,11 +1,11 @@ --- id: appwrite -title: Appwrite Database +title: Appwrite --- -# Appwrite Database +# Appwrite -Now build applications on top of your Appwrite database. +ToolJet can connect to appwrite database to read/write data. ## Connection @@ -20,7 +20,7 @@ You'll find the Secret key and other credentials on your Appwrite's project sett You should also set the scope for access to a particular resource. Learn more about the **API keys and scopes** [here](https://appwrite.io/docs/keys). ::: -To connect Appwrite datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Appwrite from the list of available datasources, provide the credentials and click **Save**. It is recommended to check the connection by clicking on 'Test connection' button to verify if the service account can access Appwrite from the ToolJet server. +To establish a connection with the Appwrite data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
diff --git a/docs/docs/data-sources/bigquery.md b/docs/docs/data-sources/bigquery.md index e3e29b8d4c..2b6eb57145 100644 --- a/docs/docs/data-sources/bigquery.md +++ b/docs/docs/data-sources/bigquery.md @@ -9,15 +9,13 @@ ToolJet can connect to BigQuery databases to run BigQuery queries. ## Connection -Please refer [this](https://cloud.google.com/bigquery/docs/bigquery-web-ui) link to enable BigQuery API in Google Cloud Console. +To connect to BigQuery, you need to enable BigQuery API in your Google Cloud Console. You can follow the steps to enable BigQuery API from [this link](https://cloud.google.com/bigquery/docs/bigquery-web-ui). -Create **Service Account** and **key**, then get your configs downloaded as **JSON** +Next, you need to create a service account and generate a key for the same. You can follow the steps to create a service account from [this link](https://cloud.google.com/iam/docs/creating-managing-service-accounts). -To add a new BigQuery, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select BigQuery from the modal that pops up. +Now, copy and paste the data from the downloaded JSON file into the **Private key** field in the BigQuery data source form. -ToolJet requires the config json downloaded from your account to connect to BigQuery. Paste the json into the `Private key` field. - -**The json looks like**: +**The json file should look like this:** ```json { @@ -50,7 +48,6 @@ Click on `+` button of the query manager at the bottom panel of the editor and s BQ query -Click on the **run** button to run the query. NOTE: Query should be saved before running. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) @@ -157,4 +154,4 @@ NOTE: visit -https://github.com/googleapis/nodejs-bigquery/blob/main/samples/cre ::: ### Delete Table -- To delete a table. \ No newline at end of file +- To delete a table. diff --git a/docs/docs/data-sources/cosmosdb.md b/docs/docs/data-sources/cosmosdb.md index a924932750..9ffe9b3e6d 100644 --- a/docs/docs/data-sources/cosmosdb.md +++ b/docs/docs/data-sources/cosmosdb.md @@ -2,14 +2,14 @@ id: cosmosdb title: CosmosDB --- + # Cosmosdb -ToolJet can connect to CosmosDB databases to read and write data. - +ToolJet can connect to CosmosDB databases to read and write data. ## Connection -To add a new **[Azure Cosmos DB](https://docs.microsoft.com/en-us/javascript/api/overview/azure/cosmos-readme?view=azure-node-latest#key-concepts)**, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select CosmosDB from the modal that pops up. +To establish a connection with the CosmosDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Cosmos DB. @@ -28,8 +28,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
- -## Supported queries: +## Supported Queries: - [Listing databases](#listing-databases) - [Listing containers](#listing-containers) @@ -38,54 +37,54 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c - [Deleting an item](#deleting-an-item) - [Querying documents](#querying-documents) +### Listing Databases - - - -### Listing databases This query lists all the databases in a Cosmos DB. -### Listing containers +### Listing Containers + This query lists all the containers of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | +| Fields | Description | +| -------- | ------------------ | +| database | id of the database | + +### Inserting Item(s) -### Inserting item(s) This query inserts one or more items in a container of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | +| Fields | Description | +| --------- | ---------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | + +### Retrieving An Item -### Retrieving an item To read a single item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Deleting An Item -### Deleting an item To delete an item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Querying Documents -### Querying documents To query documents from a container of a database in a Cosmos DB using SQL-like syntax, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | +| Fields | Description | +| --------- | --------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | diff --git a/docs/docs/data-sources/couchdb.md b/docs/docs/data-sources/couchdb.md index 385ed788ad..d531ac0042 100644 --- a/docs/docs/data-sources/couchdb.md +++ b/docs/docs/data-sources/couchdb.md @@ -8,27 +8,24 @@ title: CouchDB ToolJet can connect to CouchDB databases to read and write data. CocuhDB uses basic auth for authentication , username and password for the database is required to create an CouchDB data source on ToolJet. For more info visit [CouchDB docs](https://docs.couchdb.org/en/stable/). -Couch auth +## Supported Queries: - -## Supported queries: - -- [Listing records](#listing-records) -- [Retrieving a record](#retrieving-a-record) -- [Creating a record](#creating-a-record) -- [Updating a record](#updating-a-record) -- [Deleting a record](#deleting-a-record) +- [Listing Records](#listing-records) +- [Retrieving a Record](#retrieving-a-record) +- [Creating a Record](#creating-a-record) +- [Updating a Record](#updating-a-record) +- [Deleting a Record](#deleting-a-record) - [Find](#find) -- [Retrieving a view](#retrieving-a-view) +- [Retrieving a View](#retrieving-a-view) :::info NOTE: Record ID is same as document ID("_id") . ::: -### Listing records +### Listing Records This query lists all the records in a database. -#### Optional parameters: +#### Optional Parameters: - **Include docs** - **Descending order** @@ -83,9 +80,9 @@ Example response from CouchDb: } ``` -### Retrieving a record +### Retrieving a Record -#### Required parameters: +#### Required Parameters: - **Record ID** @@ -108,7 +105,7 @@ Example response from CouchDb: The returned JSON is the JSON of the document, including the document ID and revision number: -### Creating a record +### Creating a Record Couch create view @@ -122,10 +119,6 @@ The returned JSON is the JSON of the document, including the document ID and rev Click on the `run` button to run the query. -:::info -NOTE: Query must be saved before running. -::: - Example response from CouchDb: ```json @@ -137,12 +130,12 @@ Example response from CouchDb: ``` -### Updating a record +### Updating a Record You can get the revision id value, by sending a GET request to get the document details. You get the document as JSON in the response. For each update to the document, the revision field "_rev" gets changed. -#### Required parameters: +#### Required Rarameters: - **Revision ID** - **Record ID** @@ -150,7 +143,7 @@ You get the document as JSON in the response. For each update to the document, t Couch update view -#### Example body: +#### Example Body: ```json [{"name":"tooljet"}] @@ -172,9 +165,9 @@ Example response from CouchDb: } ``` -### Deleting a record +### Deleting a Record -#### Required parameters: +#### Required Parameters: - **Revision ID** - **Record ID** @@ -200,7 +193,7 @@ Example response from CouchDb: Find documents using a declarative JSON querying syntax. -#### Required parameters: +#### Required Parameters: - **Selector** :::info @@ -212,7 +205,7 @@ selector syntax: https://pouchdb.com/guides/mango-queries.html Couch find -#### Example body: +#### Example Body: ```json { @@ -239,11 +232,11 @@ Example response from CouchDb: Couch find response -### Retrieving a view +### Retrieving a View Views are the primary tool used for querying and reporting on CouchDB documents. -#### Required parameters: +#### Required Parameters: - **View url** Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#what-is-a-view @@ -252,7 +245,7 @@ Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#wha Couch get view -#### Optional parameters: +#### Optional Parameters: - **Start key** - **End key** diff --git a/docs/docs/data-sources/dynamodb.md b/docs/docs/data-sources/dynamodb.md index abaacaa48c..127a917898 100644 --- a/docs/docs/data-sources/dynamodb.md +++ b/docs/docs/data-sources/dynamodb.md @@ -8,7 +8,7 @@ DynamoDB is a managed non-relational database service provided by Amazon. ToolJe ## Connection -To establish a connection with the DynamoDB global datasource, you can either click on the `+Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the DynamoDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
diff --git a/docs/docs/data-sources/elasticsearch.md b/docs/docs/data-sources/elasticsearch.md index 3f06fc7b3d..6c996df16e 100644 --- a/docs/docs/data-sources/elasticsearch.md +++ b/docs/docs/data-sources/elasticsearch.md @@ -9,7 +9,7 @@ ToolJet can connect to your Elasticsearch cluster to read and write data. ## Connection Please make sure the host/IP of the Elasticsearch cluster is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**. -To add a new Elasticsearch database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Elasticsearch from the modal that pops up. +To establish a connection with the ElasticSearch data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Elasticsearch cluster: - **Host** @@ -24,7 +24,7 @@ ToolJet requires the following to connect to your Elasticsearch cluster:
-Elastic search datasource is also providing an option for connecting services with ssl certificates. +Elastic search data source is also providing an option for connecting services with ssl certificates. - You can either use CA / Client certificates option. Elastic ssl diff --git a/docs/docs/data-sources/firestore.md b/docs/docs/data-sources/firestore.md index c0375c29c6..4b86322ea5 100644 --- a/docs/docs/data-sources/firestore.md +++ b/docs/docs/data-sources/firestore.md @@ -4,12 +4,14 @@ title: Cloud Firestore --- # Cloud Firestore +ToolJet can connect to Cloud Firestore databases to read and write data. ## Connection -ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. -To generate a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). +ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. Get your service account key as JSON from GCP console. For generating a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). -Once the key is downloaded, click on `+` button of data sources panel at the left-bottom corner of the app editor. Select Firestore from the modal that pops up. Paste the key in the field for GCP key. Click on **Test connection** button to verify if the service account can access Firestore from ToolJet server. Click on **Save** button to save the datasource. +Once you have the key, open it in a text editor and copy the contents. Paste the contents in the **Private key** field of the Firestore data source modal. + +Click on **Test connection** button to verify if the key is valid. Click on **Save** button to save the data source. firestore add ds @@ -160,4 +162,4 @@ The Firestore query result is in the form of object so we’ll need to transform ```js return data = Array(data) -``` \ No newline at end of file +``` diff --git a/docs/docs/data-sources/gcs.md b/docs/docs/data-sources/gcs.md index 6483a43408..03cad29535 100644 --- a/docs/docs/data-sources/gcs.md +++ b/docs/docs/data-sources/gcs.md @@ -9,19 +9,18 @@ ToolJet can connect to GCS buckets and perform various operation on them. ## Supported operations --**Read file** --**Upload file** --**List buckets** --**List files in a bucket** --**Signed url for download** --**Signed url for upload** +- **Read file** +- **Upload file** +- **List buckets** +- **List files in a bucket** +- **Signed url for download** +- **Signed url for upload** ## Connection -To add a new GCS source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select GCS from the modal that pops up. +To establish a connection with the Google Cloud Storage data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. -ToolJet requires the **json private key** of a service account to be able to connect to GCS. -You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. +To connect to GCS, you need to provide the JSON Private Key of a service account that has access to the bucket. You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. gcs connection diff --git a/docs/docs/data-sources/mailgun.md b/docs/docs/data-sources/mailgun.md index 6b4c71ca78..09907b82d1 100644 --- a/docs/docs/data-sources/mailgun.md +++ b/docs/docs/data-sources/mailgun.md @@ -15,7 +15,7 @@ The Mailgun API Datasource supports for interaction with the mail endpoint of th ## Connection -To add a new Mailgun API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Mailgun API from the modal that pops up. +To establish a connection with the MailGun data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. Enter your **Mailgun API key** in the "API key" field. @@ -58,7 +58,3 @@ For example: `admin@tooljet.io` **Send multiple individual emails to multiple recipients** - set Multiple recipients field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient. ::: - -:::note -NOTE: Query should be saved before running. -::: diff --git a/docs/docs/data-sources/minio.md b/docs/docs/data-sources/minio.md index 3f19ffc32d..0ac53fd17d 100644 --- a/docs/docs/data-sources/minio.md +++ b/docs/docs/data-sources/minio.md @@ -20,7 +20,7 @@ ToolJet can connect to minio and perform various operation on them. ## Connection -To add a new minio source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select Minio from the modal that pops up. +To establish a connection with the Minio data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your DynamoDB: @@ -44,7 +44,7 @@ Click on `+` button of the **query manager** at the bottom panel of the editor a miniIo query Click on the **run** button to run the query. -**NOTE**: Query should be saved before running. + :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) diff --git a/docs/docs/data-sources/mongodb.md b/docs/docs/data-sources/mongodb.md index 0ae21b519a..8a4dea7b16 100644 --- a/docs/docs/data-sources/mongodb.md +++ b/docs/docs/data-sources/mongodb.md @@ -11,7 +11,7 @@ ToolJet can connect to MongoDB to read and write data. Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add a new MongoDB, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select MongoDB from the modal that pops up. +To establish a connection with the MongoDB data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your MongoDB. @@ -32,15 +32,14 @@ Click on `+` button of the query manager at the bottom panel of the editor and s ToolJet - Mongo query - - -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) ::: ### Supported operations + - [List Collections](#list-collections) - [Find One](#find-one) - [Find Many](#find-many) @@ -59,51 +58,89 @@ Query results can be transformed using transformations. Read our transformations - [Delete One](#delete-one) - [Delete Many](#delete-many) - [Bulk Operations](#bulk-operations) + #### List Collections + Returns list of collections + #### Fine One + Return a document which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/findOne) + #### Fine Many + Return list of documents which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/find/) + #### Total Count + Returns an estimation of the number of documents in the collection based on collection metadata. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#estimateddocumentcount) + #### Count + Returns the number of documents based on the filter. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#countdocuments) + #### Distinct + Retrieve a list of distinct values for a field based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/distinct/) + #### Insert One + Insert a document. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertOne/) + #### Insert Many + Insert list of documents. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertMany/) + #### Update One + Update a document based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateOne/) + #### Update Many + Update many documents based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateMany/) + #### Replace One + Replace a document based on filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/replaceOne/) + #### Find One and Update + If your application requires the document after updating, use this instead of `Update One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate) + #### Find One and Replace + If your application requires the document after updating, use this instead of `Replace One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace) + #### Find One and Delete + If your application requires the document after deleting, use this instead of `Delete One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete) + #### Aggregate + Aggregation operations are expressions you can use to produce reduced and summarized results. [Reference](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/aggregation/) + #### Delete One + Delete a record based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteOne/) + #### Delete Many + Delete many records based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteMany/) + #### Bulk Operations + Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/) ### Dynamic Quries + ```javascript { amount: { $lt: '{{ components.textinput1.value }}' }} -// Dates +// Dates // supported: Extended JSON syntax { createdAt: { $date: '{{ new Date('01/10/2020') }}'} } // not supported: MongoDB classic syntax { createdAt: new Date('01/10/2020') } ``` + Reference on [mongodb extended JSON](https://docs.mongodb.com/manual/reference/mongodb-extended-json/) supported data types diff --git a/docs/docs/data-sources/mssql.md b/docs/docs/data-sources/mssql.md index a8aa169ce5..0f9fa32b2f 100644 --- a/docs/docs/data-sources/mssql.md +++ b/docs/docs/data-sources/mssql.md @@ -12,7 +12,7 @@ ToolJet can connect to MS SQL Server & Azure SQL databases to read and write dat Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add new MS SQL Server / Azure SQL database, click on the '+' button on data sources panel at the left-bottom corner of the app editor. Select `SQL Server` from the modal that pops up. +To establish a connection with the MS SQL Server data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your PostgreSQL database. @@ -32,7 +32,7 @@ Click on 'Test connection' button to verify if the credentials are correct and t ## Querying SQL Server / Azure SQL databases Click on '+' button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. ToolJet - Redis connection diff --git a/docs/docs/data-sources/mysql.md b/docs/docs/data-sources/mysql.md index 63af848971..c349d83171 100644 --- a/docs/docs/data-sources/mysql.md +++ b/docs/docs/data-sources/mysql.md @@ -7,11 +7,11 @@ ToolJet can connect to MySQL databases to read and write data. ## Connection -To establish a connection with the MySQL datasource, you can either click on the `+Add New` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the MySQL data source, you can either click on the `+Add New` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
-MySQL datasource +MySQL data source

@@ -20,31 +20,30 @@ To establish a connection with the MySQL datasource, you can either click on the Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP. ::: - **ToolJet requires the following to connect to your MySQL database:** -| Parameter | Description | -|:--- |:--- | -| Username | Username of the MySQL database | -| Password | Password of the MySQL database | -| Database name | Name of the MySQL database | +| Parameter | Description | +| :-------------- | :------------------------------------------------------------------------ | +| Username | Username of the MySQL database | +| Password | Password of the MySQL database | +| Database name | Name of the MySQL database | | Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. | If you are using **Hostname** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | -| Host/IP | Hostname or IP address of the MySQL database | -| Port | Port number of the MySQL database | -| SSL | Enable SSL connection to the MySQL database | +| Parameter | Description | +| :-------- | :------------------------------------------- | +| Host/IP | Hostname or IP address of the MySQL database | +| Port | Port number of the MySQL database | +| SSL | Enable SSL connection to the MySQL database | If you are using **Socket** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | +| Parameter | Description | +| :---------- | :---------------------- | | Socket path | Path of the socket file | -It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet. +It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
@@ -63,9 +62,10 @@ Once the MySQL data source is added, you can create queries to read and write da ### SQL mode -SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. +SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. **Example:** + ```sql SELECT * FROM users ``` @@ -80,7 +80,8 @@ SELECT * FROM users GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. Each object should contain the primary key column and the columns to be updated. -**Example:** +**Example:** + ```json {{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }} ``` @@ -93,4 +94,4 @@ GUI mode can be used to query MySQL database without writing queries. Select GUI :::tip Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations). -::: \ No newline at end of file +::: diff --git a/docs/docs/data-sources/notion.md b/docs/docs/data-sources/notion.md index 88000f3aa6..a224116642 100644 --- a/docs/docs/data-sources/notion.md +++ b/docs/docs/data-sources/notion.md @@ -2,11 +2,15 @@ id: notion title: Notion --- + # Notion ToolJet can connect to a Notion workspace to do operations on notion pages, databases and blocks. + ## Connection +To establish a connection with the Notion data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. + For integrating Notion with ToolJet we will need the API token. The API token can be generated from your Notion workspace settings. Read the official Notion docs for [Creating an internal integration with notion API](https://www.notion.so/help/create-integrations-with-the-notion-api).
@@ -18,37 +22,33 @@ For integrating Notion with ToolJet we will need the API token. The API token ca ## Querying Notion Notion API provides support for: + - **[Database](#database)** - **[Page](#page)** - **[Block](#blocks)** - **[User](#user)** - notion querying - :::tip Before querying Notion, you must share the database with your integration. Click the share button in your database view, find your integration name select it. - notion share - ::: ### Database On database resource you can perform the following operations: + - **[Retrieve a database](#1-retrieve-a-database)** - **[Query a database](#2-query-a-database)** - **[Create a database](#3-create-a-database)** - **[Update a database](#4-update-a-database)** - notion db - #### 1. Retrieve a database This operations retrieves a Database object using the ID specified. @@ -57,13 +57,12 @@ This operations retrieves a Database object using the ID specified. - **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. - notion db retreieve - #### 2. Query a database This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query. + ##### Required parameters: - **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. @@ -98,6 +97,7 @@ This operation creates a database as a subpage in the specified parent page, wit This operation updates an existing database as specified by the parameters. ##### Required parameters: + - **Database ID** ##### Optional parameters: @@ -112,24 +112,29 @@ This operation updates an existing database as specified by the parameters. ### Page On page resource you can perform the following operations: + - **[Retrieve a page](#1-retrieve-a-page)** - **[Create a page](#2-create-a-page)** - **[Update a page](#3-update-a-page)** - **[Retrieve a page property](#4-retrieve-a-page-property-item)** - **[Archive a page](#5-archive-delete-a-page)** - notion page - #### 1. Retrieve a page + This operation retrieves a **Page** object using the ID specified. + ##### Required parameters: + - **Page ID** #### 2. Create a page + This operation creates a new page in the specified database or as a child of an existing page. If the parent is a database, the property values of the new page in the properties parameter must conform to the parent database's property schema. If the parent is a page, the only valid property is title. + ##### Parameters: + - **Page ID** - **Properties** : Property values of this page - **Icon type** : Currently notion api accepts two icon options, emoji, external URL @@ -138,8 +143,11 @@ This operation creates a new page in the specified database or as a child of an - **Cover value** : Value of selected cover type #### 3. Update a page + This operation updates page property values for the specified page. Properties that are not set via the properties parameter will remain unchanged. + ##### Parameters: + - **Page ID** - **Parent type**: A database parent or page parent - **Properties** : Property values of this page @@ -150,77 +158,94 @@ This operation updates page property values for the specified page. Properties t - **Cover value** : Value of selected cover type #### 4. Retrieve a page property item + This operation retrieves a property_item object for a given page ID and property ID. Depending on the property type, the object returned will either be a value or a paginated list of property item values. See Property item objects for specifics. + ##### Parameters: + - **Page ID** - **Property ID** - **Limit** - **Start cursor** #### 5. Archive (delete) a page + ##### Required parameters: + - **Page ID** - **Archive**: Dropdown for archive and un archive the page ### Blocks + The following operations can be performed on the block resource: + - **[Retrieve a block](#1-retrieve-a-block)** - **[Append block children](#2-append-new-block-children)** - **[Retrieve block children](#3-retrieve-block-children)** - **[Update a block](#4-update-a-block)** - **[Delete a block](#5-delete-a-block)** - notion block - :::info To get the id for blocks, simply click on the menu icon for the block and click "Copy link". Afterwards, paste the link in the browser and it should look like this: `https://www.notion.so/Creating-Page-Sample-ee18b8779ae54f358b09221d6665ee15#7fcb3940a1264aadb2ad4ee9ffe11b0e` the string after **#** is the block id i.e. `7fcb3940a1264aadb2ad4ee9ffe11b0e`. ::: #### 1. Retrieve a block + This operation retrieves a **Block** object using the ID specified. ##### Required parameters: + - **Block ID** #### 2. Append new block children + This operation creates and appends new children blocks to the parent block_id specified. ##### Required parameters: + - **Block ID** - **Children**: Array of block objects #### 3. Retrieve block children + This operation retrieves a paginated array of child block objects contained in the block using the ID specified. ##### Required parameters: + - **Block ID** - **Limit** - **Start cursor** #### 4. Update a block + This operation updates the content for the specified block_id based on the block type. ##### Required parameters: + - **Block ID** - **Properties**: The block object type value with the properties to be updated - **Archive** #### 5. Delete a block + ##### Required parameters: + - **Block ID** ### User + The following operations can be performed on the user notion resource: #### 1. Retrieve a user from current workspace -This operation retrieves a User using the ID specified. +This operation retrieves a User using the ID specified. notion user ##### Required parameters: + - **User ID** #### 2. Retrieve list of users of a workspace @@ -228,6 +253,7 @@ This operation retrieves a User using the ID specified. This operation returns a paginated list of Users for the workspace. ##### Required parameters: + - **Limit** - **Start cursor** diff --git a/docs/docs/data-sources/s3.md b/docs/docs/data-sources/s3.md index db8f35c780..60488139a9 100644 --- a/docs/docs/data-sources/s3.md +++ b/docs/docs/data-sources/s3.md @@ -9,7 +9,7 @@ ToolJet can connect to Amazon S3 buckets and perform various operation on them. ## Connection -To add a new S3 source, go to the **Datasources manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **AWS S3** from the modal that pops up. +To add a new S3 source, go to the **Data sources manager** on the left sidebar of the app editor and click on `Add data source` button. Select **AWS S3** from the modal that pops up. ToolJet supports connecting to AWS S3 using **IAM credentials**, **AWS Instance Profile** or **AWS ARN Role**. @@ -155,5 +155,5 @@ The presigned URLs are useful if you want your user/customer to be able to uploa :::info -We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)**. +We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)**. ::: diff --git a/docs/docs/widgets/html.md b/docs/docs/widgets/html.md index 41908bef43..cc1e06c574 100644 --- a/docs/docs/widgets/html.md +++ b/docs/docs/widgets/html.md @@ -1,9 +1,9 @@ --- id: html -title: HTML +title: HTML Viewer --- -# HTML +# HTML Viewer HTML widget can be used to create your own HTML-CSS layout. diff --git a/docs/docs/widgets/rich-text-editor.md b/docs/docs/widgets/rich-text-editor.md index 7c5ba592d7..9d99fb99e3 100644 --- a/docs/docs/widgets/rich-text-editor.md +++ b/docs/docs/widgets/rich-text-editor.md @@ -1,8 +1,8 @@ --- id: rich-text-editor -title: Rich Text Editor +title: Text Editor --- -# Rich Text Editor +# Text Editor Rich Text Editor can be used to enter and edit the text in HTML format. It should be preferred for blog posts, forum posts or notes sections. The text is to be used as the label for the radio button. diff --git a/docs/versioned_docs/version-2.18.0/data-sources/appwrite.md b/docs/versioned_docs/version-2.18.0/data-sources/appwrite.md index dc11572625..a0562cc980 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/appwrite.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/appwrite.md @@ -1,11 +1,11 @@ --- id: appwrite -title: Appwrite Database +title: Appwrite --- -# Appwrite Database +# Appwrite -Now build applications on top of your Appwrite database. +ToolJet can connect to appwrite database to read/write data. ## Connection @@ -20,7 +20,7 @@ You'll find the Secret key and other credentials on your Appwrite's project sett You should also set the scope for access to a particular resource. Learn more about the **API keys and scopes** [here](https://appwrite.io/docs/keys). ::: -To connect Appwrite datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Appwrite from the list of available datasources, provide the credentials and click **Save**. It is recommended to check the connection by clicking on 'Test connection' button to verify if the service account can access Appwrite from the ToolJet server. +To establish a connection with the Appwrite data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
diff --git a/docs/versioned_docs/version-2.18.0/data-sources/bigquery.md b/docs/versioned_docs/version-2.18.0/data-sources/bigquery.md index e3e29b8d4c..2b6eb57145 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/bigquery.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/bigquery.md @@ -9,15 +9,13 @@ ToolJet can connect to BigQuery databases to run BigQuery queries. ## Connection -Please refer [this](https://cloud.google.com/bigquery/docs/bigquery-web-ui) link to enable BigQuery API in Google Cloud Console. +To connect to BigQuery, you need to enable BigQuery API in your Google Cloud Console. You can follow the steps to enable BigQuery API from [this link](https://cloud.google.com/bigquery/docs/bigquery-web-ui). -Create **Service Account** and **key**, then get your configs downloaded as **JSON** +Next, you need to create a service account and generate a key for the same. You can follow the steps to create a service account from [this link](https://cloud.google.com/iam/docs/creating-managing-service-accounts). -To add a new BigQuery, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select BigQuery from the modal that pops up. +Now, copy and paste the data from the downloaded JSON file into the **Private key** field in the BigQuery data source form. -ToolJet requires the config json downloaded from your account to connect to BigQuery. Paste the json into the `Private key` field. - -**The json looks like**: +**The json file should look like this:** ```json { @@ -50,7 +48,6 @@ Click on `+` button of the query manager at the bottom panel of the editor and s BQ query -Click on the **run** button to run the query. NOTE: Query should be saved before running. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) @@ -157,4 +154,4 @@ NOTE: visit -https://github.com/googleapis/nodejs-bigquery/blob/main/samples/cre ::: ### Delete Table -- To delete a table. \ No newline at end of file +- To delete a table. diff --git a/docs/versioned_docs/version-2.18.0/data-sources/cosmosdb.md b/docs/versioned_docs/version-2.18.0/data-sources/cosmosdb.md index a924932750..4b6d4f412f 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/cosmosdb.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/cosmosdb.md @@ -2,14 +2,14 @@ id: cosmosdb title: CosmosDB --- + # Cosmosdb -ToolJet can connect to CosmosDB databases to read and write data. - +ToolJet can connect to CosmosDB databases to read and write data. ## Connection -To add a new **[Azure Cosmos DB](https://docs.microsoft.com/en-us/javascript/api/overview/azure/cosmos-readme?view=azure-node-latest#key-concepts)**, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select CosmosDB from the modal that pops up. +To establish a connection with the CosmosDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Cosmos DB. @@ -28,8 +28,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
- -## Supported queries: +## Supported Queries: - [Listing databases](#listing-databases) - [Listing containers](#listing-containers) @@ -38,54 +37,54 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c - [Deleting an item](#deleting-an-item) - [Querying documents](#querying-documents) +### Listing Databases - - - -### Listing databases This query lists all the databases in a Cosmos DB. -### Listing containers +### Listing Containers + This query lists all the containers of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | +| Fields | Description | +| -------- | ------------------ | +| database | id of the database | + +### Inserting Item(s) -### Inserting item(s) This query inserts one or more items in a container of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | +| Fields | Description | +| --------- | ---------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | + +### Retrieving An item -### Retrieving an item To read a single item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Deleting An Item -### Deleting an item To delete an item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Querying Documents -### Querying documents To query documents from a container of a database in a Cosmos DB using SQL-like syntax, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | +| Fields | Description | +| --------- | --------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | diff --git a/docs/versioned_docs/version-2.18.0/data-sources/couchdb.md b/docs/versioned_docs/version-2.18.0/data-sources/couchdb.md index 385ed788ad..d4a6c70bd8 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/couchdb.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/couchdb.md @@ -8,27 +8,24 @@ title: CouchDB ToolJet can connect to CouchDB databases to read and write data. CocuhDB uses basic auth for authentication , username and password for the database is required to create an CouchDB data source on ToolJet. For more info visit [CouchDB docs](https://docs.couchdb.org/en/stable/). -Couch auth +## Supported Queries: - -## Supported queries: - -- [Listing records](#listing-records) -- [Retrieving a record](#retrieving-a-record) -- [Creating a record](#creating-a-record) -- [Updating a record](#updating-a-record) -- [Deleting a record](#deleting-a-record) +- [Listing Records](#listing-records) +- [Retrieving a Record](#retrieving-a-record) +- [Creating a Record](#creating-a-record) +- [Updating a Record](#updating-a-record) +- [Deleting a Record](#deleting-a-record) - [Find](#find) -- [Retrieving a view](#retrieving-a-view) +- [Retrieving a View](#retrieving-a-view) :::info NOTE: Record ID is same as document ID("_id") . ::: -### Listing records +### Listing Records This query lists all the records in a database. -#### Optional parameters: +#### Optional Parameters: - **Include docs** - **Descending order** @@ -83,9 +80,9 @@ Example response from CouchDb: } ``` -### Retrieving a record +### Retrieving a Record -#### Required parameters: +#### Required Parameters: - **Record ID** @@ -108,7 +105,7 @@ Example response from CouchDb: The returned JSON is the JSON of the document, including the document ID and revision number: -### Creating a record +### Creating a Record Couch create view @@ -122,10 +119,6 @@ The returned JSON is the JSON of the document, including the document ID and rev Click on the `run` button to run the query. -:::info -NOTE: Query must be saved before running. -::: - Example response from CouchDb: ```json @@ -137,12 +130,12 @@ Example response from CouchDb: ``` -### Updating a record +### Updating a Record You can get the revision id value, by sending a GET request to get the document details. You get the document as JSON in the response. For each update to the document, the revision field "_rev" gets changed. -#### Required parameters: +#### Required Parameters: - **Revision ID** - **Record ID** @@ -150,7 +143,7 @@ You get the document as JSON in the response. For each update to the document, t Couch update view -#### Example body: +#### Example Body: ```json [{"name":"tooljet"}] @@ -172,9 +165,9 @@ Example response from CouchDb: } ``` -### Deleting a record +### Deleting a Record -#### Required parameters: +#### Required Parameters: - **Revision ID** - **Record ID** @@ -200,7 +193,7 @@ Example response from CouchDb: Find documents using a declarative JSON querying syntax. -#### Required parameters: +#### Required Parameters: - **Selector** :::info @@ -212,7 +205,7 @@ selector syntax: https://pouchdb.com/guides/mango-queries.html Couch find -#### Example body: +#### Example Body: ```json { @@ -239,11 +232,11 @@ Example response from CouchDb: Couch find response -### Retrieving a view +### Retrieving a View Views are the primary tool used for querying and reporting on CouchDB documents. -#### Required parameters: +#### Required Parameters: - **View url** Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#what-is-a-view @@ -252,7 +245,7 @@ Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#wha Couch get view -#### Optional parameters: +#### Optional Parameters: - **Start key** - **End key** diff --git a/docs/versioned_docs/version-2.18.0/data-sources/dynamodb.md b/docs/versioned_docs/version-2.18.0/data-sources/dynamodb.md index abaacaa48c..127a917898 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/dynamodb.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/dynamodb.md @@ -8,7 +8,7 @@ DynamoDB is a managed non-relational database service provided by Amazon. ToolJe ## Connection -To establish a connection with the DynamoDB global datasource, you can either click on the `+Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the DynamoDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
diff --git a/docs/versioned_docs/version-2.18.0/data-sources/elasticsearch.md b/docs/versioned_docs/version-2.18.0/data-sources/elasticsearch.md index 3f06fc7b3d..6c996df16e 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/elasticsearch.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/elasticsearch.md @@ -9,7 +9,7 @@ ToolJet can connect to your Elasticsearch cluster to read and write data. ## Connection Please make sure the host/IP of the Elasticsearch cluster is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**. -To add a new Elasticsearch database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Elasticsearch from the modal that pops up. +To establish a connection with the ElasticSearch data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Elasticsearch cluster: - **Host** @@ -24,7 +24,7 @@ ToolJet requires the following to connect to your Elasticsearch cluster:
-Elastic search datasource is also providing an option for connecting services with ssl certificates. +Elastic search data source is also providing an option for connecting services with ssl certificates. - You can either use CA / Client certificates option. Elastic ssl diff --git a/docs/versioned_docs/version-2.18.0/data-sources/firestore.md b/docs/versioned_docs/version-2.18.0/data-sources/firestore.md index c0375c29c6..a498d8a75e 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/firestore.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/firestore.md @@ -4,13 +4,14 @@ title: Cloud Firestore --- # Cloud Firestore +ToolJet can connect to Cloud Firestore databases to read and write data. ## Connection -ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. -To generate a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). +ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. Get your service account key as JSON from GCP console. For generating a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). -Once the key is downloaded, click on `+` button of data sources panel at the left-bottom corner of the app editor. Select Firestore from the modal that pops up. Paste the key in the field for GCP key. Click on **Test connection** button to verify if the service account can access Firestore from ToolJet server. Click on **Save** button to save the datasource. +Once you have the key, open it in a text editor and copy the contents. Paste the contents in the **Private key** field of the Firestore data source modal. +Click on **Test connection** button to verify if the key is valid. Click on **Save** button to save the data source. firestore add ds @@ -160,4 +161,4 @@ The Firestore query result is in the form of object so we’ll need to transform ```js return data = Array(data) -``` \ No newline at end of file +``` diff --git a/docs/versioned_docs/version-2.18.0/data-sources/gcs.md b/docs/versioned_docs/version-2.18.0/data-sources/gcs.md index 6483a43408..03cad29535 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/gcs.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/gcs.md @@ -9,19 +9,18 @@ ToolJet can connect to GCS buckets and perform various operation on them. ## Supported operations --**Read file** --**Upload file** --**List buckets** --**List files in a bucket** --**Signed url for download** --**Signed url for upload** +- **Read file** +- **Upload file** +- **List buckets** +- **List files in a bucket** +- **Signed url for download** +- **Signed url for upload** ## Connection -To add a new GCS source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select GCS from the modal that pops up. +To establish a connection with the Google Cloud Storage data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. -ToolJet requires the **json private key** of a service account to be able to connect to GCS. -You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. +To connect to GCS, you need to provide the JSON Private Key of a service account that has access to the bucket. You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. gcs connection diff --git a/docs/versioned_docs/version-2.18.0/data-sources/mailgun.md b/docs/versioned_docs/version-2.18.0/data-sources/mailgun.md index 6b4c71ca78..09907b82d1 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/mailgun.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/mailgun.md @@ -15,7 +15,7 @@ The Mailgun API Datasource supports for interaction with the mail endpoint of th ## Connection -To add a new Mailgun API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Mailgun API from the modal that pops up. +To establish a connection with the MailGun data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. Enter your **Mailgun API key** in the "API key" field. @@ -58,7 +58,3 @@ For example: `admin@tooljet.io` **Send multiple individual emails to multiple recipients** - set Multiple recipients field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient. ::: - -:::note -NOTE: Query should be saved before running. -::: diff --git a/docs/versioned_docs/version-2.18.0/data-sources/minio.md b/docs/versioned_docs/version-2.18.0/data-sources/minio.md index 3f19ffc32d..0ac53fd17d 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/minio.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/minio.md @@ -20,7 +20,7 @@ ToolJet can connect to minio and perform various operation on them. ## Connection -To add a new minio source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select Minio from the modal that pops up. +To establish a connection with the Minio data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your DynamoDB: @@ -44,7 +44,7 @@ Click on `+` button of the **query manager** at the bottom panel of the editor a miniIo query Click on the **run** button to run the query. -**NOTE**: Query should be saved before running. + :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) diff --git a/docs/versioned_docs/version-2.18.0/data-sources/mongodb.md b/docs/versioned_docs/version-2.18.0/data-sources/mongodb.md index 0ae21b519a..8a4dea7b16 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/mongodb.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/mongodb.md @@ -11,7 +11,7 @@ ToolJet can connect to MongoDB to read and write data. Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add a new MongoDB, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select MongoDB from the modal that pops up. +To establish a connection with the MongoDB data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your MongoDB. @@ -32,15 +32,14 @@ Click on `+` button of the query manager at the bottom panel of the editor and s ToolJet - Mongo query - - -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) ::: ### Supported operations + - [List Collections](#list-collections) - [Find One](#find-one) - [Find Many](#find-many) @@ -59,51 +58,89 @@ Query results can be transformed using transformations. Read our transformations - [Delete One](#delete-one) - [Delete Many](#delete-many) - [Bulk Operations](#bulk-operations) + #### List Collections + Returns list of collections + #### Fine One + Return a document which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/findOne) + #### Fine Many + Return list of documents which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/find/) + #### Total Count + Returns an estimation of the number of documents in the collection based on collection metadata. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#estimateddocumentcount) + #### Count + Returns the number of documents based on the filter. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#countdocuments) + #### Distinct + Retrieve a list of distinct values for a field based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/distinct/) + #### Insert One + Insert a document. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertOne/) + #### Insert Many + Insert list of documents. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertMany/) + #### Update One + Update a document based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateOne/) + #### Update Many + Update many documents based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateMany/) + #### Replace One + Replace a document based on filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/replaceOne/) + #### Find One and Update + If your application requires the document after updating, use this instead of `Update One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate) + #### Find One and Replace + If your application requires the document after updating, use this instead of `Replace One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace) + #### Find One and Delete + If your application requires the document after deleting, use this instead of `Delete One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete) + #### Aggregate + Aggregation operations are expressions you can use to produce reduced and summarized results. [Reference](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/aggregation/) + #### Delete One + Delete a record based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteOne/) + #### Delete Many + Delete many records based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteMany/) + #### Bulk Operations + Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/) ### Dynamic Quries + ```javascript { amount: { $lt: '{{ components.textinput1.value }}' }} -// Dates +// Dates // supported: Extended JSON syntax { createdAt: { $date: '{{ new Date('01/10/2020') }}'} } // not supported: MongoDB classic syntax { createdAt: new Date('01/10/2020') } ``` + Reference on [mongodb extended JSON](https://docs.mongodb.com/manual/reference/mongodb-extended-json/) supported data types diff --git a/docs/versioned_docs/version-2.18.0/data-sources/mssql.md b/docs/versioned_docs/version-2.18.0/data-sources/mssql.md index a8aa169ce5..0f9fa32b2f 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/mssql.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/mssql.md @@ -12,7 +12,7 @@ ToolJet can connect to MS SQL Server & Azure SQL databases to read and write dat Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add new MS SQL Server / Azure SQL database, click on the '+' button on data sources panel at the left-bottom corner of the app editor. Select `SQL Server` from the modal that pops up. +To establish a connection with the MS SQL Server data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your PostgreSQL database. @@ -32,7 +32,7 @@ Click on 'Test connection' button to verify if the credentials are correct and t ## Querying SQL Server / Azure SQL databases Click on '+' button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. ToolJet - Redis connection diff --git a/docs/versioned_docs/version-2.18.0/data-sources/mysql.md b/docs/versioned_docs/version-2.18.0/data-sources/mysql.md index 63af848971..c349d83171 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/mysql.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/mysql.md @@ -7,11 +7,11 @@ ToolJet can connect to MySQL databases to read and write data. ## Connection -To establish a connection with the MySQL datasource, you can either click on the `+Add New` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the MySQL data source, you can either click on the `+Add New` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
-MySQL datasource +MySQL data source

@@ -20,31 +20,30 @@ To establish a connection with the MySQL datasource, you can either click on the Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP. ::: - **ToolJet requires the following to connect to your MySQL database:** -| Parameter | Description | -|:--- |:--- | -| Username | Username of the MySQL database | -| Password | Password of the MySQL database | -| Database name | Name of the MySQL database | +| Parameter | Description | +| :-------------- | :------------------------------------------------------------------------ | +| Username | Username of the MySQL database | +| Password | Password of the MySQL database | +| Database name | Name of the MySQL database | | Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. | If you are using **Hostname** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | -| Host/IP | Hostname or IP address of the MySQL database | -| Port | Port number of the MySQL database | -| SSL | Enable SSL connection to the MySQL database | +| Parameter | Description | +| :-------- | :------------------------------------------- | +| Host/IP | Hostname or IP address of the MySQL database | +| Port | Port number of the MySQL database | +| SSL | Enable SSL connection to the MySQL database | If you are using **Socket** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | +| Parameter | Description | +| :---------- | :---------------------- | | Socket path | Path of the socket file | -It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet. +It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
@@ -63,9 +62,10 @@ Once the MySQL data source is added, you can create queries to read and write da ### SQL mode -SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. +SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. **Example:** + ```sql SELECT * FROM users ``` @@ -80,7 +80,8 @@ SELECT * FROM users GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. Each object should contain the primary key column and the columns to be updated. -**Example:** +**Example:** + ```json {{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }} ``` @@ -93,4 +94,4 @@ GUI mode can be used to query MySQL database without writing queries. Select GUI :::tip Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations). -::: \ No newline at end of file +::: diff --git a/docs/versioned_docs/version-2.18.0/data-sources/notion.md b/docs/versioned_docs/version-2.18.0/data-sources/notion.md index 88000f3aa6..a224116642 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/notion.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/notion.md @@ -2,11 +2,15 @@ id: notion title: Notion --- + # Notion ToolJet can connect to a Notion workspace to do operations on notion pages, databases and blocks. + ## Connection +To establish a connection with the Notion data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. + For integrating Notion with ToolJet we will need the API token. The API token can be generated from your Notion workspace settings. Read the official Notion docs for [Creating an internal integration with notion API](https://www.notion.so/help/create-integrations-with-the-notion-api).
@@ -18,37 +22,33 @@ For integrating Notion with ToolJet we will need the API token. The API token ca ## Querying Notion Notion API provides support for: + - **[Database](#database)** - **[Page](#page)** - **[Block](#blocks)** - **[User](#user)** - notion querying - :::tip Before querying Notion, you must share the database with your integration. Click the share button in your database view, find your integration name select it. - notion share - ::: ### Database On database resource you can perform the following operations: + - **[Retrieve a database](#1-retrieve-a-database)** - **[Query a database](#2-query-a-database)** - **[Create a database](#3-create-a-database)** - **[Update a database](#4-update-a-database)** - notion db - #### 1. Retrieve a database This operations retrieves a Database object using the ID specified. @@ -57,13 +57,12 @@ This operations retrieves a Database object using the ID specified. - **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. - notion db retreieve - #### 2. Query a database This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query. + ##### Required parameters: - **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. @@ -98,6 +97,7 @@ This operation creates a database as a subpage in the specified parent page, wit This operation updates an existing database as specified by the parameters. ##### Required parameters: + - **Database ID** ##### Optional parameters: @@ -112,24 +112,29 @@ This operation updates an existing database as specified by the parameters. ### Page On page resource you can perform the following operations: + - **[Retrieve a page](#1-retrieve-a-page)** - **[Create a page](#2-create-a-page)** - **[Update a page](#3-update-a-page)** - **[Retrieve a page property](#4-retrieve-a-page-property-item)** - **[Archive a page](#5-archive-delete-a-page)** - notion page - #### 1. Retrieve a page + This operation retrieves a **Page** object using the ID specified. + ##### Required parameters: + - **Page ID** #### 2. Create a page + This operation creates a new page in the specified database or as a child of an existing page. If the parent is a database, the property values of the new page in the properties parameter must conform to the parent database's property schema. If the parent is a page, the only valid property is title. + ##### Parameters: + - **Page ID** - **Properties** : Property values of this page - **Icon type** : Currently notion api accepts two icon options, emoji, external URL @@ -138,8 +143,11 @@ This operation creates a new page in the specified database or as a child of an - **Cover value** : Value of selected cover type #### 3. Update a page + This operation updates page property values for the specified page. Properties that are not set via the properties parameter will remain unchanged. + ##### Parameters: + - **Page ID** - **Parent type**: A database parent or page parent - **Properties** : Property values of this page @@ -150,77 +158,94 @@ This operation updates page property values for the specified page. Properties t - **Cover value** : Value of selected cover type #### 4. Retrieve a page property item + This operation retrieves a property_item object for a given page ID and property ID. Depending on the property type, the object returned will either be a value or a paginated list of property item values. See Property item objects for specifics. + ##### Parameters: + - **Page ID** - **Property ID** - **Limit** - **Start cursor** #### 5. Archive (delete) a page + ##### Required parameters: + - **Page ID** - **Archive**: Dropdown for archive and un archive the page ### Blocks + The following operations can be performed on the block resource: + - **[Retrieve a block](#1-retrieve-a-block)** - **[Append block children](#2-append-new-block-children)** - **[Retrieve block children](#3-retrieve-block-children)** - **[Update a block](#4-update-a-block)** - **[Delete a block](#5-delete-a-block)** - notion block - :::info To get the id for blocks, simply click on the menu icon for the block and click "Copy link". Afterwards, paste the link in the browser and it should look like this: `https://www.notion.so/Creating-Page-Sample-ee18b8779ae54f358b09221d6665ee15#7fcb3940a1264aadb2ad4ee9ffe11b0e` the string after **#** is the block id i.e. `7fcb3940a1264aadb2ad4ee9ffe11b0e`. ::: #### 1. Retrieve a block + This operation retrieves a **Block** object using the ID specified. ##### Required parameters: + - **Block ID** #### 2. Append new block children + This operation creates and appends new children blocks to the parent block_id specified. ##### Required parameters: + - **Block ID** - **Children**: Array of block objects #### 3. Retrieve block children + This operation retrieves a paginated array of child block objects contained in the block using the ID specified. ##### Required parameters: + - **Block ID** - **Limit** - **Start cursor** #### 4. Update a block + This operation updates the content for the specified block_id based on the block type. ##### Required parameters: + - **Block ID** - **Properties**: The block object type value with the properties to be updated - **Archive** #### 5. Delete a block + ##### Required parameters: + - **Block ID** ### User + The following operations can be performed on the user notion resource: #### 1. Retrieve a user from current workspace -This operation retrieves a User using the ID specified. +This operation retrieves a User using the ID specified. notion user ##### Required parameters: + - **User ID** #### 2. Retrieve list of users of a workspace @@ -228,6 +253,7 @@ This operation retrieves a User using the ID specified. This operation returns a paginated list of Users for the workspace. ##### Required parameters: + - **Limit** - **Start cursor** diff --git a/docs/versioned_docs/version-2.18.0/data-sources/s3.md b/docs/versioned_docs/version-2.18.0/data-sources/s3.md index db8f35c780..60488139a9 100644 --- a/docs/versioned_docs/version-2.18.0/data-sources/s3.md +++ b/docs/versioned_docs/version-2.18.0/data-sources/s3.md @@ -9,7 +9,7 @@ ToolJet can connect to Amazon S3 buckets and perform various operation on them. ## Connection -To add a new S3 source, go to the **Datasources manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **AWS S3** from the modal that pops up. +To add a new S3 source, go to the **Data sources manager** on the left sidebar of the app editor and click on `Add data source` button. Select **AWS S3** from the modal that pops up. ToolJet supports connecting to AWS S3 using **IAM credentials**, **AWS Instance Profile** or **AWS ARN Role**. @@ -155,5 +155,5 @@ The presigned URLs are useful if you want your user/customer to be able to uploa :::info -We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)**. +We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)**. ::: diff --git a/docs/versioned_docs/version-2.18.0/widgets/html.md b/docs/versioned_docs/version-2.18.0/widgets/html.md index 41908bef43..cc1e06c574 100644 --- a/docs/versioned_docs/version-2.18.0/widgets/html.md +++ b/docs/versioned_docs/version-2.18.0/widgets/html.md @@ -1,9 +1,9 @@ --- id: html -title: HTML +title: HTML Viewer --- -# HTML +# HTML Viewer HTML widget can be used to create your own HTML-CSS layout. diff --git a/docs/versioned_docs/version-2.18.0/widgets/rich-text-editor.md b/docs/versioned_docs/version-2.18.0/widgets/rich-text-editor.md index 7c5ba592d7..9d99fb99e3 100644 --- a/docs/versioned_docs/version-2.18.0/widgets/rich-text-editor.md +++ b/docs/versioned_docs/version-2.18.0/widgets/rich-text-editor.md @@ -1,8 +1,8 @@ --- id: rich-text-editor -title: Rich Text Editor +title: Text Editor --- -# Rich Text Editor +# Text Editor Rich Text Editor can be used to enter and edit the text in HTML format. It should be preferred for blog posts, forum posts or notes sections. The text is to be used as the label for the radio button. diff --git a/docs/versioned_docs/version-2.19.0/data-sources/appwrite.md b/docs/versioned_docs/version-2.19.0/data-sources/appwrite.md index dc11572625..c987afdd6b 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/appwrite.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/appwrite.md @@ -1,11 +1,11 @@ --- id: appwrite -title: Appwrite Database +title: Appwrite --- -# Appwrite Database +# Appwrite -Now build applications on top of your Appwrite database. +ToolJet can connect to appwrite database to read/write data. ## Connection @@ -20,7 +20,7 @@ You'll find the Secret key and other credentials on your Appwrite's project sett You should also set the scope for access to a particular resource. Learn more about the **API keys and scopes** [here](https://appwrite.io/docs/keys). ::: -To connect Appwrite datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Appwrite from the list of available datasources, provide the credentials and click **Save**. It is recommended to check the connection by clicking on 'Test connection' button to verify if the service account can access Appwrite from the ToolJet server. +To establish a connection with the Appwrite data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
diff --git a/docs/versioned_docs/version-2.19.0/data-sources/bigquery.md b/docs/versioned_docs/version-2.19.0/data-sources/bigquery.md index e3e29b8d4c..2b6eb57145 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/bigquery.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/bigquery.md @@ -9,15 +9,13 @@ ToolJet can connect to BigQuery databases to run BigQuery queries. ## Connection -Please refer [this](https://cloud.google.com/bigquery/docs/bigquery-web-ui) link to enable BigQuery API in Google Cloud Console. +To connect to BigQuery, you need to enable BigQuery API in your Google Cloud Console. You can follow the steps to enable BigQuery API from [this link](https://cloud.google.com/bigquery/docs/bigquery-web-ui). -Create **Service Account** and **key**, then get your configs downloaded as **JSON** +Next, you need to create a service account and generate a key for the same. You can follow the steps to create a service account from [this link](https://cloud.google.com/iam/docs/creating-managing-service-accounts). -To add a new BigQuery, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select BigQuery from the modal that pops up. +Now, copy and paste the data from the downloaded JSON file into the **Private key** field in the BigQuery data source form. -ToolJet requires the config json downloaded from your account to connect to BigQuery. Paste the json into the `Private key` field. - -**The json looks like**: +**The json file should look like this:** ```json { @@ -50,7 +48,6 @@ Click on `+` button of the query manager at the bottom panel of the editor and s BQ query -Click on the **run** button to run the query. NOTE: Query should be saved before running. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) @@ -157,4 +154,4 @@ NOTE: visit -https://github.com/googleapis/nodejs-bigquery/blob/main/samples/cre ::: ### Delete Table -- To delete a table. \ No newline at end of file +- To delete a table. diff --git a/docs/versioned_docs/version-2.19.0/data-sources/cosmosdb.md b/docs/versioned_docs/version-2.19.0/data-sources/cosmosdb.md index a924932750..9ffe9b3e6d 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/cosmosdb.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/cosmosdb.md @@ -2,14 +2,14 @@ id: cosmosdb title: CosmosDB --- + # Cosmosdb -ToolJet can connect to CosmosDB databases to read and write data. - +ToolJet can connect to CosmosDB databases to read and write data. ## Connection -To add a new **[Azure Cosmos DB](https://docs.microsoft.com/en-us/javascript/api/overview/azure/cosmos-readme?view=azure-node-latest#key-concepts)**, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select CosmosDB from the modal that pops up. +To establish a connection with the CosmosDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Cosmos DB. @@ -28,8 +28,7 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c
- -## Supported queries: +## Supported Queries: - [Listing databases](#listing-databases) - [Listing containers](#listing-containers) @@ -38,54 +37,54 @@ You can find the endpoint and key in the **[Azure Portal](https://portal.azure.c - [Deleting an item](#deleting-an-item) - [Querying documents](#querying-documents) +### Listing Databases - - - -### Listing databases This query lists all the databases in a Cosmos DB. -### Listing containers +### Listing Containers + This query lists all the containers of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | +| Fields | Description | +| -------- | ------------------ | +| database | id of the database | + +### Inserting Item(s) -### Inserting item(s) This query inserts one or more items in a container of a database in a Cosmos DB. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | +| Fields | Description | +| --------- | ---------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| items | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` | + +### Retrieving An Item -### Retrieving an item To read a single item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Deleting An Item -### Deleting an item To delete an item from a container of a database in a Cosmos DB, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| item | id of the item | +| Fields | Description | +| --------- | ------------------- | +| database | id of the database | +| container | id of the container | +| item | id of the item | +### Querying Documents -### Querying documents To query documents from a container of a database in a Cosmos DB using SQL-like syntax, use the following query. -| Fields | description | -| ----------- | ----------- | -| database | id of the database | -| container | id of the container | -| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | +| Fields | Description | +| --------- | --------------------------------------------------------------------------------- | +| database | id of the database | +| container | id of the container | +| query | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` | diff --git a/docs/versioned_docs/version-2.19.0/data-sources/couchdb.md b/docs/versioned_docs/version-2.19.0/data-sources/couchdb.md index 385ed788ad..3d09e49231 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/couchdb.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/couchdb.md @@ -13,22 +13,22 @@ ToolJet can connect to CouchDB databases to read and write data. CocuhDB uses ba ## Supported queries: -- [Listing records](#listing-records) -- [Retrieving a record](#retrieving-a-record) -- [Creating a record](#creating-a-record) -- [Updating a record](#updating-a-record) -- [Deleting a record](#deleting-a-record) +- [Listing Records](#listing-records) +- [Retrieving a Record](#retrieving-a-record) +- [Creating a Record](#creating-a-record) +- [Updating a Record](#updating-a-record) +- [Deleting a Record](#deleting-a-record) - [Find](#find) -- [Retrieving a view](#retrieving-a-view) +- [Retrieving a View](#retrieving-a-view) :::info NOTE: Record ID is same as document ID("_id") . ::: -### Listing records +### Listing Records This query lists all the records in a database. -#### Optional parameters: +#### Optional Parameters: - **Include docs** - **Descending order** @@ -83,9 +83,9 @@ Example response from CouchDb: } ``` -### Retrieving a record +### Retrieving a Record -#### Required parameters: +#### Required Parameters: - **Record ID** @@ -108,7 +108,7 @@ Example response from CouchDb: The returned JSON is the JSON of the document, including the document ID and revision number: -### Creating a record +### Creating a Record Couch create view @@ -122,10 +122,6 @@ The returned JSON is the JSON of the document, including the document ID and rev Click on the `run` button to run the query. -:::info -NOTE: Query must be saved before running. -::: - Example response from CouchDb: ```json @@ -137,12 +133,12 @@ Example response from CouchDb: ``` -### Updating a record +### Updating a Record You can get the revision id value, by sending a GET request to get the document details. You get the document as JSON in the response. For each update to the document, the revision field "_rev" gets changed. -#### Required parameters: +#### Required Parameters: - **Revision ID** - **Record ID** @@ -150,7 +146,7 @@ You get the document as JSON in the response. For each update to the document, t Couch update view -#### Example body: +#### Example Body: ```json [{"name":"tooljet"}] @@ -172,9 +168,9 @@ Example response from CouchDb: } ``` -### Deleting a record +### Deleting a Record -#### Required parameters: +#### Required Parameters: - **Revision ID** - **Record ID** @@ -200,7 +196,7 @@ Example response from CouchDb: Find documents using a declarative JSON querying syntax. -#### Required parameters: +#### Required Parameters: - **Selector** :::info @@ -212,7 +208,7 @@ selector syntax: https://pouchdb.com/guides/mango-queries.html Couch find -#### Example body: +#### Example Body: ```json { @@ -239,11 +235,11 @@ Example response from CouchDb: Couch find response -### Retrieving a view +### Retrieving a View Views are the primary tool used for querying and reporting on CouchDB documents. -#### Required parameters: +#### Required Parameters: - **View url** Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#what-is-a-view @@ -252,7 +248,7 @@ Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#wha Couch get view -#### Optional parameters: +#### Optional Parameters: - **Start key** - **End key** diff --git a/docs/versioned_docs/version-2.19.0/data-sources/dynamodb.md b/docs/versioned_docs/version-2.19.0/data-sources/dynamodb.md index abaacaa48c..127a917898 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/dynamodb.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/dynamodb.md @@ -8,7 +8,7 @@ DynamoDB is a managed non-relational database service provided by Amazon. ToolJe ## Connection -To establish a connection with the DynamoDB global datasource, you can either click on the `+Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the DynamoDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
diff --git a/docs/versioned_docs/version-2.19.0/data-sources/elasticsearch.md b/docs/versioned_docs/version-2.19.0/data-sources/elasticsearch.md index 3f06fc7b3d..6c996df16e 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/elasticsearch.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/elasticsearch.md @@ -9,7 +9,7 @@ ToolJet can connect to your Elasticsearch cluster to read and write data. ## Connection Please make sure the host/IP of the Elasticsearch cluster is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**. -To add a new Elasticsearch database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Elasticsearch from the modal that pops up. +To establish a connection with the ElasticSearch data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. ToolJet requires the following to connect to your Elasticsearch cluster: - **Host** @@ -24,7 +24,7 @@ ToolJet requires the following to connect to your Elasticsearch cluster:
-Elastic search datasource is also providing an option for connecting services with ssl certificates. +Elastic search data source is also providing an option for connecting services with ssl certificates. - You can either use CA / Client certificates option. Elastic ssl diff --git a/docs/versioned_docs/version-2.19.0/data-sources/firestore.md b/docs/versioned_docs/version-2.19.0/data-sources/firestore.md index c0375c29c6..4b86322ea5 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/firestore.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/firestore.md @@ -4,12 +4,14 @@ title: Cloud Firestore --- # Cloud Firestore +ToolJet can connect to Cloud Firestore databases to read and write data. ## Connection -ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. -To generate a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). +ToolJet connects to your Cloud Firestore using JSON key of your GCP service account. Get your service account key as JSON from GCP console. For generating a new key, check out [Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console). -Once the key is downloaded, click on `+` button of data sources panel at the left-bottom corner of the app editor. Select Firestore from the modal that pops up. Paste the key in the field for GCP key. Click on **Test connection** button to verify if the service account can access Firestore from ToolJet server. Click on **Save** button to save the datasource. +Once you have the key, open it in a text editor and copy the contents. Paste the contents in the **Private key** field of the Firestore data source modal. + +Click on **Test connection** button to verify if the key is valid. Click on **Save** button to save the data source. firestore add ds @@ -160,4 +162,4 @@ The Firestore query result is in the form of object so we’ll need to transform ```js return data = Array(data) -``` \ No newline at end of file +``` diff --git a/docs/versioned_docs/version-2.19.0/data-sources/gcs.md b/docs/versioned_docs/version-2.19.0/data-sources/gcs.md index 6483a43408..03cad29535 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/gcs.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/gcs.md @@ -9,19 +9,18 @@ ToolJet can connect to GCS buckets and perform various operation on them. ## Supported operations --**Read file** --**Upload file** --**List buckets** --**List files in a bucket** --**Signed url for download** --**Signed url for upload** +- **Read file** +- **Upload file** +- **List buckets** +- **List files in a bucket** +- **Signed url for download** +- **Signed url for upload** ## Connection -To add a new GCS source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select GCS from the modal that pops up. +To establish a connection with the Google Cloud Storage data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard. -ToolJet requires the **json private key** of a service account to be able to connect to GCS. -You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. +To connect to GCS, you need to provide the JSON Private Key of a service account that has access to the bucket. You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started. gcs connection diff --git a/docs/versioned_docs/version-2.19.0/data-sources/mailgun.md b/docs/versioned_docs/version-2.19.0/data-sources/mailgun.md index 6b4c71ca78..09907b82d1 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/mailgun.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/mailgun.md @@ -15,7 +15,7 @@ The Mailgun API Datasource supports for interaction with the mail endpoint of th ## Connection -To add a new Mailgun API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Mailgun API from the modal that pops up. +To establish a connection with the MailGun data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. Enter your **Mailgun API key** in the "API key" field. @@ -58,7 +58,3 @@ For example: `admin@tooljet.io` **Send multiple individual emails to multiple recipients** - set Multiple recipients field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient. ::: - -:::note -NOTE: Query should be saved before running. -::: diff --git a/docs/versioned_docs/version-2.19.0/data-sources/minio.md b/docs/versioned_docs/version-2.19.0/data-sources/minio.md index 3f19ffc32d..0ac53fd17d 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/minio.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/minio.md @@ -20,7 +20,7 @@ ToolJet can connect to minio and perform various operation on them. ## Connection -To add a new minio source, click on the **Add or edit datasource** icon on the left sidebar of the app editor and click on `Add datasource` button. Select Minio from the modal that pops up. +To establish a connection with the Minio data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your DynamoDB: @@ -44,7 +44,7 @@ Click on `+` button of the **query manager** at the bottom panel of the editor a miniIo query Click on the **run** button to run the query. -**NOTE**: Query should be saved before running. + :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) diff --git a/docs/versioned_docs/version-2.19.0/data-sources/mongodb.md b/docs/versioned_docs/version-2.19.0/data-sources/mongodb.md index 0ae21b519a..8a4dea7b16 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/mongodb.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/mongodb.md @@ -11,7 +11,7 @@ ToolJet can connect to MongoDB to read and write data. Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add a new MongoDB, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select MongoDB from the modal that pops up. +To establish a connection with the MongoDB data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your MongoDB. @@ -32,15 +32,14 @@ Click on `+` button of the query manager at the bottom panel of the editor and s ToolJet - Mongo query - - -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. :::tip Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations) ::: ### Supported operations + - [List Collections](#list-collections) - [Find One](#find-one) - [Find Many](#find-many) @@ -59,51 +58,89 @@ Query results can be transformed using transformations. Read our transformations - [Delete One](#delete-one) - [Delete Many](#delete-many) - [Bulk Operations](#bulk-operations) + #### List Collections + Returns list of collections + #### Fine One + Return a document which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/findOne) + #### Fine Many + Return list of documents which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/find/) + #### Total Count + Returns an estimation of the number of documents in the collection based on collection metadata. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#estimateddocumentcount) + #### Count + Returns the number of documents based on the filter. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#countdocuments) + #### Distinct + Retrieve a list of distinct values for a field based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/distinct/) + #### Insert One + Insert a document. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertOne/) + #### Insert Many + Insert list of documents. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertMany/) + #### Update One + Update a document based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateOne/) + #### Update Many + Update many documents based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateMany/) + #### Replace One + Replace a document based on filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/replaceOne/) + #### Find One and Update + If your application requires the document after updating, use this instead of `Update One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate) + #### Find One and Replace + If your application requires the document after updating, use this instead of `Replace One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace) + #### Find One and Delete + If your application requires the document after deleting, use this instead of `Delete One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete) + #### Aggregate + Aggregation operations are expressions you can use to produce reduced and summarized results. [Reference](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/aggregation/) + #### Delete One + Delete a record based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteOne/) + #### Delete Many + Delete many records based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteMany/) + #### Bulk Operations + Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/) ### Dynamic Quries + ```javascript { amount: { $lt: '{{ components.textinput1.value }}' }} -// Dates +// Dates // supported: Extended JSON syntax { createdAt: { $date: '{{ new Date('01/10/2020') }}'} } // not supported: MongoDB classic syntax { createdAt: new Date('01/10/2020') } ``` + Reference on [mongodb extended JSON](https://docs.mongodb.com/manual/reference/mongodb-extended-json/) supported data types diff --git a/docs/versioned_docs/version-2.19.0/data-sources/mssql.md b/docs/versioned_docs/version-2.19.0/data-sources/mssql.md index a8aa169ce5..0f9fa32b2f 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/mssql.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/mssql.md @@ -12,7 +12,7 @@ ToolJet can connect to MS SQL Server & Azure SQL databases to read and write dat Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. -To add new MS SQL Server / Azure SQL database, click on the '+' button on data sources panel at the left-bottom corner of the app editor. Select `SQL Server` from the modal that pops up. +To establish a connection with the MS SQL Server data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. ToolJet requires the following to connect to your PostgreSQL database. @@ -32,7 +32,7 @@ Click on 'Test connection' button to verify if the credentials are correct and t ## Querying SQL Server / Azure SQL databases Click on '+' button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. -Click on the 'run' button to run the query. NOTE: Query should be saved before running. +Click on the 'run' button to run the query. ToolJet - Redis connection diff --git a/docs/versioned_docs/version-2.19.0/data-sources/mysql.md b/docs/versioned_docs/version-2.19.0/data-sources/mysql.md index 63af848971..c349d83171 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/mysql.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/mysql.md @@ -7,11 +7,11 @@ ToolJet can connect to MySQL databases to read and write data. ## Connection -To establish a connection with the MySQL datasource, you can either click on the `+Add New` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard. +To establish a connection with the MySQL data source, you can either click on the `+Add New` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
-MySQL datasource +MySQL data source

@@ -20,31 +20,30 @@ To establish a connection with the MySQL datasource, you can either click on the Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP. ::: - **ToolJet requires the following to connect to your MySQL database:** -| Parameter | Description | -|:--- |:--- | -| Username | Username of the MySQL database | -| Password | Password of the MySQL database | -| Database name | Name of the MySQL database | +| Parameter | Description | +| :-------------- | :------------------------------------------------------------------------ | +| Username | Username of the MySQL database | +| Password | Password of the MySQL database | +| Database name | Name of the MySQL database | | Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. | If you are using **Hostname** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | -| Host/IP | Hostname or IP address of the MySQL database | -| Port | Port number of the MySQL database | -| SSL | Enable SSL connection to the MySQL database | +| Parameter | Description | +| :-------- | :------------------------------------------- | +| Host/IP | Hostname or IP address of the MySQL database | +| Port | Port number of the MySQL database | +| SSL | Enable SSL connection to the MySQL database | If you are using **Socket** as the connection type, you will need to provide the following information: -| Parameter | Description | -|:--- |:--- | +| Parameter | Description | +| :---------- | :---------------------- | | Socket path | Path of the socket file | -It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet. +It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
@@ -63,9 +62,10 @@ Once the MySQL data source is added, you can create queries to read and write da ### SQL mode -SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. +SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. **Example:** + ```sql SELECT * FROM users ``` @@ -80,7 +80,8 @@ SELECT * FROM users GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. Each object should contain the primary key column and the columns to be updated. -**Example:** +**Example:** + ```json {{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }} ``` @@ -93,4 +94,4 @@ GUI mode can be used to query MySQL database without writing queries. Select GUI :::tip Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations). -::: \ No newline at end of file +::: diff --git a/docs/versioned_docs/version-2.19.0/data-sources/notion.md b/docs/versioned_docs/version-2.19.0/data-sources/notion.md index 88000f3aa6..a224116642 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/notion.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/notion.md @@ -2,11 +2,15 @@ id: notion title: Notion --- + # Notion ToolJet can connect to a Notion workspace to do operations on notion pages, databases and blocks. + ## Connection +To establish a connection with the Notion data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard. + For integrating Notion with ToolJet we will need the API token. The API token can be generated from your Notion workspace settings. Read the official Notion docs for [Creating an internal integration with notion API](https://www.notion.so/help/create-integrations-with-the-notion-api).
@@ -18,37 +22,33 @@ For integrating Notion with ToolJet we will need the API token. The API token ca ## Querying Notion Notion API provides support for: + - **[Database](#database)** - **[Page](#page)** - **[Block](#blocks)** - **[User](#user)** - notion querying - :::tip Before querying Notion, you must share the database with your integration. Click the share button in your database view, find your integration name select it. - notion share - ::: ### Database On database resource you can perform the following operations: + - **[Retrieve a database](#1-retrieve-a-database)** - **[Query a database](#2-query-a-database)** - **[Create a database](#3-create-a-database)** - **[Update a database](#4-update-a-database)** - notion db - #### 1. Retrieve a database This operations retrieves a Database object using the ID specified. @@ -57,13 +57,12 @@ This operations retrieves a Database object using the ID specified. - **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. - notion db retreieve - #### 2. Query a database This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query. + ##### Required parameters: - **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID. @@ -98,6 +97,7 @@ This operation creates a database as a subpage in the specified parent page, wit This operation updates an existing database as specified by the parameters. ##### Required parameters: + - **Database ID** ##### Optional parameters: @@ -112,24 +112,29 @@ This operation updates an existing database as specified by the parameters. ### Page On page resource you can perform the following operations: + - **[Retrieve a page](#1-retrieve-a-page)** - **[Create a page](#2-create-a-page)** - **[Update a page](#3-update-a-page)** - **[Retrieve a page property](#4-retrieve-a-page-property-item)** - **[Archive a page](#5-archive-delete-a-page)** - notion page - #### 1. Retrieve a page + This operation retrieves a **Page** object using the ID specified. + ##### Required parameters: + - **Page ID** #### 2. Create a page + This operation creates a new page in the specified database or as a child of an existing page. If the parent is a database, the property values of the new page in the properties parameter must conform to the parent database's property schema. If the parent is a page, the only valid property is title. + ##### Parameters: + - **Page ID** - **Properties** : Property values of this page - **Icon type** : Currently notion api accepts two icon options, emoji, external URL @@ -138,8 +143,11 @@ This operation creates a new page in the specified database or as a child of an - **Cover value** : Value of selected cover type #### 3. Update a page + This operation updates page property values for the specified page. Properties that are not set via the properties parameter will remain unchanged. + ##### Parameters: + - **Page ID** - **Parent type**: A database parent or page parent - **Properties** : Property values of this page @@ -150,77 +158,94 @@ This operation updates page property values for the specified page. Properties t - **Cover value** : Value of selected cover type #### 4. Retrieve a page property item + This operation retrieves a property_item object for a given page ID and property ID. Depending on the property type, the object returned will either be a value or a paginated list of property item values. See Property item objects for specifics. + ##### Parameters: + - **Page ID** - **Property ID** - **Limit** - **Start cursor** #### 5. Archive (delete) a page + ##### Required parameters: + - **Page ID** - **Archive**: Dropdown for archive and un archive the page ### Blocks + The following operations can be performed on the block resource: + - **[Retrieve a block](#1-retrieve-a-block)** - **[Append block children](#2-append-new-block-children)** - **[Retrieve block children](#3-retrieve-block-children)** - **[Update a block](#4-update-a-block)** - **[Delete a block](#5-delete-a-block)** - notion block - :::info To get the id for blocks, simply click on the menu icon for the block and click "Copy link". Afterwards, paste the link in the browser and it should look like this: `https://www.notion.so/Creating-Page-Sample-ee18b8779ae54f358b09221d6665ee15#7fcb3940a1264aadb2ad4ee9ffe11b0e` the string after **#** is the block id i.e. `7fcb3940a1264aadb2ad4ee9ffe11b0e`. ::: #### 1. Retrieve a block + This operation retrieves a **Block** object using the ID specified. ##### Required parameters: + - **Block ID** #### 2. Append new block children + This operation creates and appends new children blocks to the parent block_id specified. ##### Required parameters: + - **Block ID** - **Children**: Array of block objects #### 3. Retrieve block children + This operation retrieves a paginated array of child block objects contained in the block using the ID specified. ##### Required parameters: + - **Block ID** - **Limit** - **Start cursor** #### 4. Update a block + This operation updates the content for the specified block_id based on the block type. ##### Required parameters: + - **Block ID** - **Properties**: The block object type value with the properties to be updated - **Archive** #### 5. Delete a block + ##### Required parameters: + - **Block ID** ### User + The following operations can be performed on the user notion resource: #### 1. Retrieve a user from current workspace -This operation retrieves a User using the ID specified. +This operation retrieves a User using the ID specified. notion user ##### Required parameters: + - **User ID** #### 2. Retrieve list of users of a workspace @@ -228,6 +253,7 @@ This operation retrieves a User using the ID specified. This operation returns a paginated list of Users for the workspace. ##### Required parameters: + - **Limit** - **Start cursor** diff --git a/docs/versioned_docs/version-2.19.0/data-sources/s3.md b/docs/versioned_docs/version-2.19.0/data-sources/s3.md index ba1a029fb2..016630a1dd 100644 --- a/docs/versioned_docs/version-2.19.0/data-sources/s3.md +++ b/docs/versioned_docs/version-2.19.0/data-sources/s3.md @@ -9,7 +9,7 @@ ToolJet can connect to Amazon S3 buckets and perform various operation on them. ## Connection -To add a new S3 source, go to the **Datasources manager** on the left sidebar of the app editor and click on `Add datasource` button. Select **AWS S3** from the modal that pops up. +To add a new S3 source, go to the **Data sources manager** on the left sidebar of the app editor and click on `Add data source` button. Select **AWS S3** from the modal that pops up. ToolJet requires the following to connect to your AWS S3: @@ -133,5 +133,5 @@ The presigned URLs are useful if you want your user/customer to be able to uploa :::info -We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)**. +We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)**. ::: diff --git a/docs/versioned_docs/version-2.19.0/widgets/html.md b/docs/versioned_docs/version-2.19.0/widgets/html.md index 41908bef43..cc1e06c574 100644 --- a/docs/versioned_docs/version-2.19.0/widgets/html.md +++ b/docs/versioned_docs/version-2.19.0/widgets/html.md @@ -1,9 +1,9 @@ --- id: html -title: HTML +title: HTML Viewer --- -# HTML +# HTML Viewer HTML widget can be used to create your own HTML-CSS layout. diff --git a/docs/versioned_docs/version-2.19.0/widgets/rich-text-editor.md b/docs/versioned_docs/version-2.19.0/widgets/rich-text-editor.md index 7c5ba592d7..9d99fb99e3 100644 --- a/docs/versioned_docs/version-2.19.0/widgets/rich-text-editor.md +++ b/docs/versioned_docs/version-2.19.0/widgets/rich-text-editor.md @@ -1,8 +1,8 @@ --- id: rich-text-editor -title: Rich Text Editor +title: Text Editor --- -# Rich Text Editor +# Text Editor Rich Text Editor can be used to enter and edit the text in HTML format. It should be preferred for blog posts, forum posts or notes sections. The text is to be used as the label for the radio button. diff --git a/frontend/.version b/frontend/.version index 4e2200b98e..f48f82fa2c 100644 --- a/frontend/.version +++ b/frontend/.version @@ -1 +1 @@ -2.20.1 +2.22.0 diff --git a/frontend/assets/translations/en.json b/frontend/assets/translations/en.json index 5feaac4eb5..a8c46d9055 100644 --- a/frontend/assets/translations/en.json +++ b/frontend/assets/translations/en.json @@ -117,10 +117,10 @@ "preview": "Preview", "share": "Share", "shareModal": { - "makeApplicationPublic": "Make application public?", - "shareableLink": "Get shareable link for this application", + "makeApplicationPublic": "Make application public", + "shareableLink": "Shareable app link", "copy": "copy", - "embeddableLink": "Get embeddable link for this application", + "embeddableLink": "Embedded app link", "manageUsers": "Users" }, "appVersionManager": { @@ -234,7 +234,7 @@ "addNewWorkSpace": "Add new workspace", "loadOrganizations": "Load Organizations", "createWorkspace": "Create workspace", - "workspaceName": "workspace name", + "workspaceName": "Workspace name", "editWorkspace": "Edit workspace", "menus": { "addWorkspace": "Add workspace", @@ -737,19 +737,19 @@ }, "TextInput": { "displayName": "Text Input", - "description": "Text field for forms" + "description": "User text input field" }, "NumberInput": { "displayName": "Number Input", - "description": "Number field for forms" + "description": "Numeric input field" }, "PasswordInput": { "displayName": "Password Input", - "description": "Password input field for forms" + "description": "Secure text input" }, "Datepicker": { "displayName": "Date Picker", - "description": "Select a date and time" + "description": "Choose date and time" }, "Checkbox": { "displayName": "Checkbox", @@ -769,19 +769,19 @@ }, "DateRangePicker": { "displayName": "Range Picker", - "description": "Select a date range" + "description": "Choose date ranges" }, "Text": { "displayName": "Text", - "description": "Display markdown or HTML" + "description": "Display text or HTML" }, "Image": { "displayName": "Image", - "description": "Display an Image" + "description": "Show image files" }, "Container": { "displayName": "Container", - "description": "Wrapper for multiple components" + "description": "Group components" }, "Dropdown": { "displayName": "Dropdown", @@ -833,35 +833,35 @@ }, "Timer": { "displayName": "Timer", - "description": "timer" + "description": "Countdown or stopwatch" }, "Listview": { "displayName": "List View", - "description": "Wrapper for multiple components" + "description": "List multiple items" }, "Tags": { "displayName": "Tags", - "description": "Content can be shown as tags" + "description": "Display tag labels" }, "Pagination": { "displayName": "Pagination", - "description": "Pagination " + "description": "Navigate pages" }, "CircularProgressbar": { "displayName": "Circular Progressbar", - "description": "Show the progress using circular progressbar" + "description": "Show circular progress" }, "Spinner": { "displayName": "Spinner", - "description": "Spinner can be used to display loading status" + "description": "Indicate loading state" }, "Statistics": { "displayName": "Statistics", - "description": "Statistics can be used to display different statistical information" + "description": "Show key metrics" }, "RangeSlider": { "displayName": "Range Slider", - "description": "Can be used to show slider with a range" + "description": "Adjust value range" }, "Timeline": { "displayName": "Timeline", @@ -881,19 +881,19 @@ }, "CustomComponent": { "displayName": "Custom Component", - "description": "Add your custom react component" + "description": "Create React components" }, "ButtonGroup": { "displayName": "Button Group", - "description": "ButtonGroup" + "description": "Group of buttons" }, "PDF": { "displayName": "PDF", - "description": "Embed PDF file" + "description": "Embed PDF documents" }, "Steps": { "displayName": "Steps", - "description": "Steps" + "description": "Step-by-step navigation aid" }, "KanbanBoard": { "displayName": "Kanban Board", @@ -948,4 +948,4 @@ "tip": "Back to Home" } } -} \ No newline at end of file +} diff --git a/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx b/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx index 3bac30ab25..c6d3d75f61 100644 --- a/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx +++ b/frontend/ee/components/LoginPage/GitSSOLoginButton.jsx @@ -1,9 +1,10 @@ import React from 'react'; import { buildURLWithQuery } from '@/_helpers/utils'; -export default function GitSSOLoginButton({ configs, text }) { +export default function GitSSOLoginButton({ configs, text, setRedirectUrlToCookie }) { const gitLogin = (e) => { e.preventDefault(); + setRedirectUrlToCookie && setRedirectUrlToCookie(); window.location.href = buildURLWithQuery(`${configs.host_name || 'https://github.com'}/login/oauth/authorize`, { client_id: configs?.client_id, scope: 'user:email', diff --git a/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx b/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx index bd344ac31e..ff0cbe3fb1 100644 --- a/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx +++ b/frontend/ee/components/LoginPage/GoogleSSOLoginButton.jsx @@ -12,6 +12,7 @@ export default function GoogleSSOLoginButton(props) { }; const googleLogin = (e) => { e.preventDefault(); + props.setRedirectUrlToCookie && props.setRedirectUrlToCookie(); const { client_id } = props.configs; const authUrl = buildURLWithQuery('https://accounts.google.com/o/oauth2/auth', { redirect_uri: `${window.public_config?.TOOLJET_HOST}${window.public_config?.SUB_PATH ?? '/'}sso/google${ diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx index e72284077d..5958d6ea70 100644 --- a/frontend/src/App/App.jsx +++ b/frontend/src/App/App.jsx @@ -1,16 +1,8 @@ import React, { Suspense } from 'react'; // eslint-disable-next-line no-unused-vars -import config from 'config'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; - -import { - getWorkspaceIdFromURL, - appendWorkspaceId, - stripTrailingSlash, - getSubpath, - pathnameWithoutSubpath, -} from '@/_helpers/utils'; -import { authenticationService, tooljetService, organizationService } from '@/_services'; +import { authorizeWorkspace } from '@/_helpers/authorizeWorkspace'; +import { authenticationService, tooljetService } from '@/_services'; import { withRouter } from '@/_hoc/withRouter'; import { PrivateRoute, AdminRoute } from '@/_components'; import { HomePage } from '@/HomePage'; @@ -36,6 +28,7 @@ import { AppLoader } from '@/AppLoader'; import SetupScreenSelfHost from '../SuccessInfoScreen/SetupScreenSelfHost'; export const BreadCrumbContext = React.createContext({}); import 'react-tooltip/dist/react-tooltip.css'; +import { getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes'; const AppWrapper = (props) => { return ( @@ -69,59 +62,8 @@ class AppComponent extends React.Component { }); }; - isThisExistedRoute = () => { - const existedPaths = [ - 'forgot-password', - 'reset-password', - 'invitations', - 'organization-invitations', - 'setup', - 'confirm', - 'confirm-invite', - ]; - - const subpath = getSubpath(); - const subpathArray = subpath ? subpath.split('/').filter((path) => path != '') : []; - const pathnames = window.location.pathname.split('/')?.filter((path) => path != ''); - const checkPath = () => existedPaths.find((path) => pathnames[subpath ? subpathArray.length : 0] === path); - return pathnames?.length > 0 ? (checkPath() ? true : false) : false; - }; - componentDidMount() { - if (!this.isThisExistedRoute()) { - const workspaceId = getWorkspaceIdFromURL(); - if (workspaceId) { - this.authorizeUserAndHandleErrors(workspaceId); - } else { - const isApplicationsPath = window.location.pathname.includes('/applications/'); - const appId = isApplicationsPath ? pathnameWithoutSubpath(window.location.pathname).split('/')[2] : null; - authenticationService - .validateSession(appId) - .then(({ current_organization_id }) => { - //check if the page is not switch-workspace, if then redirect to the page - if (window.location.pathname !== `${getSubpath() ?? ''}/switch-workspace`) { - this.authorizeUserAndHandleErrors(current_organization_id); - } else { - this.updateCurrentSession({ - current_organization_id, - }); - } - }) - .catch(() => { - if (!this.isThisWorkspaceLoginPage(true) && !isApplicationsPath) { - this.updateCurrentSession({ - authentication_status: false, - }); - } else if (isApplicationsPath) { - this.updateCurrentSession({ - authentication_failed: true, - load_app: true, - }); - } - }); - } - } - + authorizeWorkspace(); this.fetchMetadata(); setInterval(this.fetchMetadata, 1000 * 60 * 60 * 1); } @@ -136,8 +78,8 @@ class AppComponent extends React.Component { componentDidUpdate(prevProps) { // Check if the current location is the dashboard (homepage) if ( - this.props.location.pathname === `/${getWorkspaceIdFromURL()}` && - prevProps.location.pathname !== `/${getWorkspaceIdFromURL()}` && + this.props.location.pathname === `/${getWorkspaceIdOrSlugFromURL()}` && + prevProps.location.pathname !== `/${getWorkspaceIdOrSlugFromURL()}` && this.checkPreviousRoute(prevProps.location.pathname) && prevProps.location.pathname !== `/:workspaceId` ) { @@ -146,93 +88,6 @@ class AppComponent extends React.Component { } } - isThisWorkspaceLoginPage = (justLoginPage = false) => { - const subpath = window?.public_config?.SUB_PATH ? stripTrailingSlash(window?.public_config?.SUB_PATH) : null; - const pathname = location.pathname.replace(subpath, ''); - const pathnames = pathname.split('/').filter((path) => path !== ''); - return (justLoginPage && pathnames[0] === 'login') || (pathnames.length === 2 && pathnames[0] === 'login'); - }; - - authorizeUserAndHandleErrors = (workspaceId) => { - const subpath = getSubpath(); - this.updateCurrentSession({ - current_organization_id: workspaceId, - }); - authenticationService - .authorize() - .then((data) => { - organizationService.getOrganizations().then((response) => { - const current_organization_name = response.organizations.find((org) => org.id === workspaceId)?.name; - // this will add the other details like permission and user previlliage details to the subject - this.updateCurrentSession({ - ...data, - current_organization_name, - organizations: response.organizations, - load_app: true, - }); - - // if user is trying to load the workspace login page, then redirect to the dashboard - if (this.isThisWorkspaceLoginPage()) - return (window.location = appendWorkspaceId(workspaceId, '/:workspaceId')); - }); - }) - .catch((error) => { - // if the auth token didn't contain workspace-id, try switch workspace fn - if (error && error?.data?.statusCode === 401) { - //get current session workspace id - authenticationService - .validateSession() - .then(({ current_organization_id }) => { - // change invalid or not authorized org id to previous one - this.updateCurrentSession({ - current_organization_id, - }); - - organizationService - .switchOrganization(workspaceId) - .then((data) => { - this.updateCurrentSession(data); - if (this.isThisWorkspaceLoginPage()) - return (window.location = appendWorkspaceId(workspaceId, '/:workspaceId')); - this.authorizeUserAndHandleErrors(workspaceId); - }) - .catch(() => { - organizationService.getOrganizations().then((response) => { - const current_organization_name = response.organizations.find( - (org) => org.id === current_organization_id - )?.name; - - this.updateCurrentSession({ - current_organization_name, - load_app: true, - }); - - if (!this.isThisWorkspaceLoginPage()) - return (window.location = `${subpath ?? ''}/login/${workspaceId}`); - }); - }); - }) - .catch(() => this.logout()); - } else if ((error && error?.data?.statusCode == 422) || error?.data?.statusCode == 404) { - window.location = subpath ? `${subpath}${'/switch-workspace'}` : '/switch-workspace'; - } else { - if (!this.isThisWorkspaceLoginPage() && !this.isThisWorkspaceLoginPage(true)) - this.updateCurrentSession({ - authentication_status: false, - }); - } - }); - }; - - updateCurrentSession = (newSession) => { - const currentSession = authenticationService.currentSessionValue; - authenticationService.updateCurrentSession({ ...currentSession, ...newSession }); - }; - - logout = () => { - authenticationService.logout(); - }; - switchDarkMode = (newMode) => { this.setState({ darkMode: newMode }); localStorage.setItem('darkMode', newMode); @@ -314,22 +169,13 @@ class AppComponent extends React.Component { /> } /> - - - - } - /> { - const params = useParams(); - const appId = params.id; +const AppLoaderComponent = React.memo((props) => { const [shouldLoadApp, setShouldLoadApp] = React.useState(false); - const { updateState } = useAppDataActions(); - // eslint-disable-next-line react-hooks/exhaustive-deps - useEffect(() => loadAppDetails(), []); + useEffect(() => { + props?.id && props?.slug && loadAppDetails(props?.id); - const loadAppDetails = () => { - appService - .fetchApp(appId, 'edit') - .then((data) => { - setShouldLoadApp(true); - updateState({ - app: data, - }); - }) - .catch((error) => { - handleError(error); + return () => { + setShouldLoadApp(false); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const loadAppDetails = (appId) => { + appService.fetchApp(appId, 'edit').then((data) => { + setShouldLoadApp(true); + updateState({ + app: data, + appId: data.id, }); - }; - - const switchOrganization = (orgId) => { - const path = `/apps/${appId}`; - const sub_path = window?.public_config?.SUB_PATH ? stripTrailingSlash(window?.public_config?.SUB_PATH) : ''; - organizationService.switchOrganization(orgId).then( - () => { - window.location.href = `${sub_path}/${orgId}${path}`; - }, - () => { - return (window.location.href = `${sub_path}/login/${orgId}?redirectTo=${path}`); - } - ); - }; - - const handleError = (error) => { - try { - if (error?.data) { - const statusCode = error.data?.statusCode; - if (statusCode === 403) { - const errorObj = safelyParseJSON(error.data?.message); - if ( - errorObj?.organizationId && - authenticationService.currentSessionValue.current_organization_id !== errorObj?.organizationId - ) { - switchOrganization(errorObj?.organizationId); - return; - } - redirectToDashboard(); - } else if (statusCode === 401) { - window.location = `${getSubpath() ?? ''}/login${ - !_.isEmpty(getWorkspaceId()) ? `/${getWorkspaceId()}` : '' - }?redirectTo=${this.props.location.pathname}`; - return; - } else if (statusCode === 404 || statusCode === 422) { - toast.error(error?.error ?? 'App not found'); - } - redirectToDashboard(); - } - } catch (err) { - redirectToDashboard(); - } + }); }; if (!shouldLoadApp) return <>; @@ -82,8 +34,8 @@ const AppLoaderComponent = (props) => { return config.ENABLE_MULTIPLAYER_EDITING ? ( ) : ( - + ); -}; +}); export const AppLoader = withTranslation()(AppLoaderComponent); diff --git a/frontend/src/Editor/Comment/CommentActions.jsx b/frontend/src/Editor/Comment/CommentActions.jsx index 836012b806..f63ee536a0 100644 --- a/frontend/src/Editor/Comment/CommentActions.jsx +++ b/frontend/src/Editor/Comment/CommentActions.jsx @@ -5,10 +5,11 @@ import { useSpring, animated } from 'react-spring'; import usePopover from '@/_hooks/use-popover'; import OptionsIcon from './icons/options.svg'; // import OptionsSelectedIcon from './icons/options-selected.svg'; -import useRouter from '@/_hooks/use-router'; import { commentsService } from '@/_services'; import { useTranslation } from 'react-i18next'; +import { useAppDataStore } from '@/_stores/appDataStore'; +import { shallow } from 'zustand/shallow'; const CommentActions = ({ socket, @@ -21,8 +22,13 @@ const CommentActions = ({ }) => { const [open, trigger, content, setOpen] = usePopover(false); const popoverFadeStyle = useSpring({ opacity: open ? 1 : 0 }); - const router = useRouter(); const { t } = useTranslation(); + const { appId } = useAppDataStore( + (state) => ({ + appId: state?.appId, + }), + shallow + ); const handleDelete = async () => { await commentsService.deleteComment(commentId); @@ -31,7 +37,7 @@ const CommentActions = ({ socket.send( JSON.stringify({ event: 'events', - data: { message: 'notifications', appId: router.query.id }, + data: { message: 'notifications', appId }, }) ); }; diff --git a/frontend/src/Editor/Comment/CommentHeader.jsx b/frontend/src/Editor/Comment/CommentHeader.jsx index 0232be8521..828c46d899 100644 --- a/frontend/src/Editor/Comment/CommentHeader.jsx +++ b/frontend/src/Editor/Comment/CommentHeader.jsx @@ -7,14 +7,12 @@ import { commentsService } from '@/_services'; import { pluralize } from '@/_helpers/utils'; import Spinner from '@/_ui/Spinner'; -import useRouter from '@/_hooks/use-router'; import UnResolvedIcon from './icons/unresolved.svg'; import ResolvedIcon from './icons/resolved.svg'; -const CommentHeader = ({ socket, count = 0, threadId, isResolved, isThreadOwner, fetchThreads, close }) => { +const CommentHeader = ({ socket, count = 0, threadId, isResolved, isThreadOwner, fetchThreads, close, appId }) => { const [spinning, setSpinning] = React.useState(false); - const router = useRouter(); const handleResolved = async () => { setSpinning(true); @@ -24,7 +22,7 @@ const CommentHeader = ({ socket, count = 0, threadId, isResolved, isThreadOwner, socket.send( JSON.stringify({ event: 'events', - data: { message: 'notifications', appId: router.query.id }, + data: { message: 'notifications', appId }, }) ); if (!isResolved) { @@ -41,7 +39,7 @@ const CommentHeader = ({ socket, count = 0, threadId, isResolved, isThreadOwner, socket.send( JSON.stringify({ event: 'events', - data: { message: 'notifications', appId: router.query.id }, + data: { message: 'notifications', appId }, }) ); }; diff --git a/frontend/src/Editor/Comment/index.jsx b/frontend/src/Editor/Comment/index.jsx index 7c126a3d54..f35912bc48 100644 --- a/frontend/src/Editor/Comment/index.jsx +++ b/frontend/src/Editor/Comment/index.jsx @@ -11,8 +11,20 @@ import { commentsService, organizationService, authenticationService } from '@/_ import useRouter from '@/_hooks/use-router'; import DOMPurify from 'dompurify'; import { capitalize } from 'lodash'; +import { getPathname } from '@/_helpers/routes'; -const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, appVersionsId, canvasWidth }) => { +const Comment = ({ + socket, + x, + y, + threadId, + user = {}, + isResolved, + fetchThreads, + appVersionsId, + canvasWidth, + appId, +}) => { const [loading, setLoading] = React.useState(true); const [editComment, setEditComment] = React.useState(''); const [editCommentId, setEditCommentId] = React.useState(''); @@ -60,7 +72,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, } else { // resetting the query param // react router updates the url with the set basename resulting invalid url unless replaced - router.history(window.location.pathname.replace(window.public_config?.SUB_PATH, '/')); + router.history(getPathname()); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); @@ -82,13 +94,13 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, socket.send( JSON.stringify({ event: 'events', - data: { message: threadId, appId: router.query.id }, + data: { message: threadId, appId }, }) ); socket.send( JSON.stringify({ event: 'events', - data: { message: 'notifications', appId: router.query.id }, + data: { message: 'notifications', appId }, }) ); fetchData(); @@ -100,7 +112,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, socket.send( JSON.stringify({ event: 'events', - data: { message: 'notifications', appId: router.query.id }, + data: { message: 'notifications', appId }, }) ); }; @@ -168,6 +180,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads, fetchThreads={fetchThreads} isThreadOwner={currentUser?.id === user.id} isResolved={isResolved} + appId={appId} /> { const router = useRouter(); @@ -35,7 +36,7 @@ const Content = ({ notifications, loading, darkMode }) => { onClick={() => { router.push({ // react router updates the url with the set basename resulting invalid url unless replaced - pathname: window.location.pathname.replace(window.public_config?.SUB_PATH, '/'), + pathname: getPathname(), search: `?threadId=${comment.thread.id}&commentId=${comment.id}`, }); }} diff --git a/frontend/src/Editor/CommentNotifications/index.jsx b/frontend/src/Editor/CommentNotifications/index.jsx index bc7364ce6a..f2eda8323e 100644 --- a/frontend/src/Editor/CommentNotifications/index.jsx +++ b/frontend/src/Editor/CommentNotifications/index.jsx @@ -3,9 +3,9 @@ import cx from 'classnames'; import React from 'react'; import { commentsService } from '@/_services'; import TabContent from './Content'; -import useRouter from '@/_hooks/use-router'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useEditorStore } from '@/_stores/editorStore'; +import { useAppDataStore } from '@/_stores/appDataStore'; import { shallow } from 'zustand/shallow'; const CommentNotifications = ({ socket, pageId }) => { @@ -22,24 +22,31 @@ const CommentNotifications = ({ socket, pageId }) => { }), shallow ); + const { appId } = useAppDataStore( + (state) => ({ + appId: state?.appId, + }), + shallow + ); const [notifications, setNotifications] = React.useState([]); const [loading, setLoading] = React.useState(false); const [key, setKey] = React.useState('active'); - const router = useRouter(); - async function fetchData(selectedKey) { - const isResolved = selectedKey === 'resolved'; - setLoading(true); - const { data } = await commentsService.getNotifications(router.query.id, isResolved, appVersionsId, pageId); - setLoading(false); - setNotifications(data); + if (appId) { + console.log('inside-CommentNotifications', appId); + const isResolved = selectedKey === 'resolved'; + setLoading(true); + const { data } = await commentsService.getNotifications(appId, isResolved, appVersionsId, pageId); + setLoading(false); + setNotifications(data); + } } React.useEffect(() => { fetchData(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [appId]); React.useEffect(() => { socket?.addEventListener('message', function (event) { diff --git a/frontend/src/Editor/Comments.jsx b/frontend/src/Editor/Comments.jsx index 55c6c02013..172d0b3a39 100644 --- a/frontend/src/Editor/Comments.jsx +++ b/frontend/src/Editor/Comments.jsx @@ -5,15 +5,20 @@ import { isEmpty } from 'lodash'; import Comment from './Comment'; import { commentsService } from '@/_services'; import { useAppVersionStore } from '@/_stores/appVersionStore'; -import useRouter from '@/_hooks/use-router'; +import { useAppDataStore } from '@/_stores/appDataStore'; const Comments = ({ newThread = {}, socket, canvasWidth, currentPageId }) => { const [threads, setThreads] = React.useState([]); - const router = useRouter(); const { appVersionsId } = useAppVersionStore((state) => ({ appVersionsId: state?.editingVersion?.id }), shallow); + const { appId } = useAppDataStore( + (state) => ({ + appId: state?.appId, + }), + shallow + ); async function fetchData() { - const { data } = await commentsService.getThreads(router.query.id, appVersionsId); + const { data } = await commentsService.getThreads(appId, appVersionsId); setThreads(data); } @@ -49,6 +54,7 @@ const Comments = ({ newThread = {}, socket, canvasWidth, currentPageId }) => { socket={socket} threadId={id} canvasWidth={canvasWidth} + appId={appId} {...thread} /> ); diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx index c0dae3311f..afddbb97f3 100644 --- a/frontend/src/Editor/Components/Table/Table.jsx +++ b/frontend/src/Editor/Components/Table/Table.jsx @@ -763,6 +763,8 @@ export function Table({ if (!serverSidePagination && clientSidePagination) { setPageSize(rowsPerPage || 10); } + } else { + setPageSize(rows?.length || 10); } }, [clientSidePagination, serverSidePagination, rows, rowsPerPage]); useEffect(() => { diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx index 285ad2ae78..1657779b08 100644 --- a/frontend/src/Editor/Container.jsx +++ b/frontend/src/Editor/Container.jsx @@ -7,7 +7,6 @@ import { DraggableBox } from './DraggableBox'; import update from 'immutability-helper'; import { componentTypes } from './WidgetManager/components'; import { resolveReferences } from '@/_helpers/utils'; -import useRouter from '@/_hooks/use-router'; import Comments from './Comments'; import { commentsService } from '@/_services'; import config from 'config'; @@ -18,6 +17,7 @@ import { addComponents, addNewWidgetToTheEditor } from '@/_helpers/appUtils'; import { useCurrentState } from '@/_stores/currentStateStore'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useEditorStore } from '@/_stores/editorStore'; +import { useAppInfo } from '@/_stores/appDataStore'; import { shallow } from 'zustand/shallow'; import _ from 'lodash'; // eslint-disable-next-line import/no-unresolved @@ -60,6 +60,18 @@ export const Container = ({ shallow ); + const { appId } = useAppInfo(); + + const currentState = useCurrentState(); + const { appVersionsId, enableReleasedVersionPopupState, isVersionReleased } = useAppVersionStore( + (state) => ({ + appVersionsId: state?.editingVersion?.id, + enableReleasedVersionPopupState: state.actions.enableReleasedVersionPopupState, + isVersionReleased: state.isVersionReleased, + }), + shallow + ); + const gridWidth = canvasWidth / NO_OF_GRIDS; const styles = { width: currentLayout === 'mobile' ? deviceWindowWidth : '100%', @@ -73,16 +85,6 @@ export const Container = ({ [JSON.stringify(appDefinition), currentPageId] ); - const currentState = useCurrentState(); - const { appVersionsId, enableReleasedVersionPopupState, isVersionReleased } = useAppVersionStore( - (state) => ({ - appVersionsId: state?.editingVersion?.id, - enableReleasedVersionPopupState: state.actions.enableReleasedVersionPopupState, - isVersionReleased: state.isVersionReleased, - }), - shallow - ); - const [boxes, setBoxes] = useState([]); const [isDragging, setIsDragging] = useState(false); const [isResizing, setIsResizing] = useState(false); @@ -91,7 +93,6 @@ export const Container = ({ const [isContainerFocused, setContainerFocus] = useState(false); const [canvasHeight, setCanvasHeight] = useState(null); - const router = useRouter(); const canvasRef = useRef(null); const focusedParentIdRef = useRef(undefined); useHotkeys('meta+z, control+z', () => handleUndo()); @@ -452,7 +453,7 @@ export const Container = ({ ]); const { data } = await commentsService.createThread({ - appId: router.query.id, + appId, x: x, y: e.nativeEvent.offsetY, appVersionsId, @@ -468,7 +469,7 @@ export const Container = ({ socket.send( JSON.stringify({ event: 'events', - data: { message: 'threads', appId: router.query.id }, + data: { message: 'threads', appId }, }) ); @@ -497,7 +498,7 @@ export const Container = ({ }, ]); const { data } = await commentsService.createThread({ - appId: router.query.id, + appId, x, y: y - 130, appVersionsId, @@ -513,7 +514,7 @@ export const Container = ({ socket.send( JSON.stringify({ event: 'events', - data: { message: 'threads', appId: router.query.id }, + data: { message: 'threads', appId }, }) ); diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx index ce8cb2333a..49e6f4a6f1 100644 --- a/frontend/src/Editor/Editor.jsx +++ b/frontend/src/Editor/Editor.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { - appService, + appsService, authenticationService, appVersionService, orgEnvironmentVariableService, @@ -8,8 +8,7 @@ import { } from '@/_services'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; -import { defaults, cloneDeep, isEqual, isEmpty, debounce, omit } from 'lodash'; -import { shallow } from 'zustand/shallow'; +import _, { defaults, cloneDeep, isEqual, isEmpty, debounce, omit } from 'lodash'; import { Container } from './Container'; import { EditorKeyHooks } from './EditorKeyHooks'; import { CustomDragLayer } from './CustomDragLayer'; @@ -60,6 +59,7 @@ import { useAppDataStore } from '@/_stores/appDataStore'; import { useCurrentStateStore, useCurrentState } from '@/_stores/currentStateStore'; import { resetAllStores } from '@/_stores/utils'; import { setCookie } from '@/_helpers/cookie'; +import { shallow } from 'zustand/shallow'; setAutoFreeze(false); enablePatches(); @@ -67,21 +67,16 @@ enablePatches(); class EditorComponent extends React.Component { constructor(props) { super(props); - resetAllStores(); - const appId = this.props.params.id; + resetAllStores(); + const appId = props.id; useAppDataStore.getState().actions.setAppId(appId); useEditorStore.getState().actions.setIsEditorActive(true); const { socket } = createWebsocketConnection(appId); - - this.renameQueryNameId = React.createRef(); - this.socket = socket; - + this.renameQueryNameId = React.createRef(); const defaultPageId = uuid(); - this.subscription = null; - this.defaultDefinition = { showViewerNavigation: true, homePageId: defaultPageId, @@ -199,7 +194,6 @@ class EditorComponent extends React.Component { threshold: 0, }, }); - const globals = { ...this.props.currentState.globals, theme: { name: this.props.darkMode ? 'dark' : 'light' }, @@ -341,7 +335,7 @@ class EditorComponent extends React.Component { const newState = !this.state.app.is_maintenance_on; // eslint-disable-next-line no-unused-vars - appService.setMaintenance(this.state.app.id, newState).then((data) => { + appsService.setMaintenance(this.state.app.id, newState).then((data) => { this.setState({ app: { ...this.state.app, @@ -358,7 +352,7 @@ class EditorComponent extends React.Component { }; fetchApps = (page) => { - appService.getAll(page).then((data) => + appsService.getAll(page).then((data) => this.setState({ apps: data.apps, }) @@ -366,7 +360,7 @@ class EditorComponent extends React.Component { }; fetchApp = (startingPageHandle) => { - const appId = this.props.params.id; + const appId = this.props.id; const callBack = async (data) => { let dataDefinition = defaults(data.definition, this.defaultDefinition); @@ -424,7 +418,7 @@ class EditorComponent extends React.Component { isLoading: true, }, () => { - appService.getApp(appId).then(callBack); + appsService.getApp(appId).then(callBack); } ); }; @@ -1399,7 +1393,11 @@ class EditorComponent extends React.Component { const queryParamsString = queryParams.map(([key, value]) => `${key}=${value}`).join('&'); - this.props.navigate(`/${getWorkspaceId()}/apps/${this.state.appId}/${handle}?${queryParamsString}`); + this.props.navigate(`/${getWorkspaceId()}/apps/${this.state.slug}/${handle}?${queryParamsString}`, { + state: { + isSwitchingPage: true, + }, + }); const { globals: existingGlobals } = this.props.currentState; @@ -1511,8 +1509,11 @@ class EditorComponent extends React.Component { const selectedComponents = this?.props?.selectedComponents; const currentState = this.props?.currentState; const editingVersion = this.props?.editingVersion; + const previewQuery = queryString.stringify({ version: editingVersion?.name }); const appVersionPreviewLink = editingVersion - ? `/applications/${app.id}/versions/${editingVersion.id}/${currentState.page.handle}` + ? `/applications/${slug || appId}/${currentState.page.handle}${ + !_.isEmpty(previewQuery) ? `?${previewQuery}` : '' + }` : ''; return (
@@ -1605,6 +1606,8 @@ class EditorComponent extends React.Component { updateOnSortingPages={this.updateOnSortingPages} apps={apps} setEditorMarginLeft={this.handleEditorMarginLeftChange} + slug={slug} + handleSlugChange={this.handleSlugChange} /> {!this.props.showComments && ( diff --git a/frontend/src/Editor/EditorFunc.jsx b/frontend/src/Editor/EditorFunc.jsx index 207fd770a8..d803960f1b 100644 --- a/frontend/src/Editor/EditorFunc.jsx +++ b/frontend/src/Editor/EditorFunc.jsx @@ -398,7 +398,7 @@ const EditorComponent = (props) => { threshold: 0, }, }); - updateState({ appId: props?.params?.id }); + getCanvasWidth(); initEditorWalkThrough(); }; @@ -908,7 +908,7 @@ const EditorComponent = (props) => { //! The computeComponentPropertyDiff function manages the calculation of differences in table columns by requiring complete column data. Without this complete data, the resulting JSON structure may be incorrect. const paramDiff = computeComponentPropertyDiff(appDefinitionDiff, appDefinition, appDiffOptions); const updateDiff = computeAppDiff(paramDiff, currentPageId, appDiffOptions, currentLayout); - + console.log('----arpit::: appid ==> ', { appId }); updateAppVersion(appId, editingVersion?.id, currentPageId, updateDiff, isUserSwitchedVersion) .then(() => { const _editingVersion = { diff --git a/frontend/src/Editor/Header/EditAppName.jsx b/frontend/src/Editor/Header/EditAppName.jsx index 35400201e9..d1514d60e7 100644 --- a/frontend/src/Editor/Header/EditAppName.jsx +++ b/frontend/src/Editor/Header/EditAppName.jsx @@ -1,57 +1,136 @@ -import React from 'react'; +import React, { useRef, useEffect, useState } from 'react'; import { ToolTip } from '@/_components'; -import { appService } from '@/_services'; -import { handleHttpErrorMessages, validateName } from '../../_helpers/utils'; +import { appsService } from '@/_services'; +import { handleHttpErrorMessages, validateName } from '@/_helpers/utils'; +import InfoOrErrorBox from './InfoOrErrorBox'; +import { toast } from 'react-hot-toast'; function EditAppName({ appId, appName = '', onNameChanged }) { const darkMode = localStorage.getItem('darkMode') === 'true'; - const [name, setName] = React.useState(appName); + const [name, setName] = useState(appName); + const [isValid, setIsValid] = useState(true); + const [isEditing, setIsEditing] = useState(false); + const [isError, setIsError] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); + const [warningText, setWarningText] = useState(''); - React.useEffect(() => { + const inputRef = useRef(null); + + useEffect(() => { setName(appName); }, [appName]); - const saveAppName = async (name) => { - const newName = name.trim(); - if (!validateName(name, 'App name').status) { - return; - } - if (newName === appName) { - //will set back name without starting and ending spaces - setName(newName); - return; - } - await appService - .saveApp(appId, { name: newName }) - .then(() => { - onNameChanged(newName); - }) - .catch((error) => { - handleHttpErrorMessages(error, 'app'); - }); + const clearError = () => { + setIsError(false); + setErrorMessage(''); }; + const setError = (message) => { + setIsError(true); + setErrorMessage(message); + }; + + const saveAppName = async (newName) => { + const trimmedName = newName.trim(); + if (validateName(trimmedName, 'App', false, true)?.errorMsg) { + setName(appName); + clearError(); + setIsEditing(false); + return; + } + + if (trimmedName === appName) { + setIsValid(true); + setIsEditing(false); + setName(appName); + return; + } + + try { + await appsService.saveApp(appId, { name: trimmedName }); + onNameChanged(trimmedName); + setIsValid(true); + setIsEditing(false); + toast.success('App name successfully updated!'); + } catch (error) { + if (error.statusCode === 409) { + setError('App name already exists'); + } else { + clearError(); + setName(appName); + setIsEditing(false); + handleHttpErrorMessages(error, 'app'); + } + } + }; + + const handleBlur = () => { + saveAppName(name); + }; + + const handleFocus = () => { + setIsValid(true); + setIsEditing(true); + }; + + const handleInput = (e) => { + const newValue = e.target.value; + setName(newValue); + if (newValue.length >= 50) { + setWarningText('Maximum length has been reached'); + } else { + setWarningText(''); + clearError(); + } + }; + + const borderColor = isError + ? 'var(--light-tomato-10, #DB4324)' // Apply error border color + : darkMode + ? 'var(--dark-border-color, #2D3748)' // Change this to the appropriate dark border color + : 'var(--light-border-color, #FFF0EE)'; + return ( - -
+
+ { + onChange={() => { //this was quick fix. replace this with actual tooltip props and state later if (document.getElementsByClassName('tooltip').length) { document.getElementsByClassName('tooltip')[0].style.display = 'none'; } - validateName(e.target.value, 'App name', true); - setName(e.target.value); }} - onBlur={(e) => saveAppName(e.target.value)} - className="form-control-plaintext form-control-plaintext-sm" + onInput={handleInput} + onBlur={handleBlur} + onFocus={handleFocus} + onClick={() => { + inputRef.current.select(); + setIsEditing(true); + }} + className={`form-control-plaintext form-control-plaintext-sm ${ + (!isError && !isEditing) || isValid ? '' : 'is-invalid' + } ${isError ? 'error' : ''}`} // Add the 'error' class when there's an error + style={{ border: `1px solid ${borderColor}` }} value={name} maxLength={50} data-cy="app-name-input" /> -
- + + = 50 ? 'Maximum length has been reached' : 'App name should be unique and max 50 characters') + } + isWarning={warningText || name.length >= 50} + isError={isError} + darkMode={darkMode} + additionalClassName={isError ? 'error' : ''} + /> +
); } diff --git a/frontend/src/Editor/Header/GlobalSettings.jsx b/frontend/src/Editor/Header/GlobalSettings.jsx index 10293394c5..a990655ee9 100644 --- a/frontend/src/Editor/Header/GlobalSettings.jsx +++ b/frontend/src/Editor/Header/GlobalSettings.jsx @@ -1,13 +1,15 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import cx from 'classnames'; import { SketchPicker } from 'react-color'; import { Confirm } from '../Viewer/Confirm'; import { HeaderSection } from '@/_ui/LeftSidebar'; import FxButton from '../CodeBuilder/Elements/FxButton'; import { CodeHinter } from '../CodeBuilder/CodeHinter'; -import { resolveReferences } from '@/_helpers/utils'; +import { resolveReferences, validateName, getWorkspaceId } from '@/_helpers/utils'; import { useTranslation } from 'react-i18next'; import _ from 'lodash'; +import { appsService } from '@/_services'; +import { replaceEditorURL, getHostURL } from '@/_helpers/routes'; import ExportAppModal from '../../HomePage/ExportAppModal'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; @@ -22,6 +24,8 @@ export const GlobalSettings = ({ isMaintenanceOn, backgroundFxQuery, realState, + handleSlugChange, + slug: oldSlug, }) => { const { t } = useTranslation(); const { hideHeader, canvasMaxWidth, canvasMaxWidthType, canvasBackgroundColor } = globalSettings; @@ -29,6 +33,10 @@ export const GlobalSettings = ({ const [forceCodeBox, setForceCodeBox] = useState(true); const [showConfirmation, setConfirmationShow] = useState(false); const [isExportingApp, setIsExportingApp] = React.useState(false); + /* Unique app slug states */ + const [slug, setSlug] = useState({ value: null, error: '' }); + const [slugProgress, setSlugProgress] = useState(false); + const [isSlugUpdated, setSlugUpdatedState] = useState(false); const { isVersionReleased } = useAppVersionStore( (state) => ({ isVersionReleased: state.isVersionReleased, @@ -46,6 +54,59 @@ export const GlobalSettings = ({ left: '0px', }; + useEffect(() => { + /* + Only will fail for existed apps before the app/workspace url revamp which has + special chars or spaces in their app slugs + */ + const existedSlugErrors = validateName(oldSlug, 'App slug', true, false, false, false); + setSlug({ value: oldSlug, error: existedSlugErrors.errorMsg }); + }, [oldSlug]); + + const handleInputChange = (value, field) => { + setSlug({ + value: slug?.value, + error: null, + }); + + const error = validateName(value, `App ${field}`, true, false, !(field === 'slug'), !(field === 'slug')); + + if (!_.isEmpty(value) && value !== oldSlug && _.isEmpty(error.errorMsg)) { + setSlugProgress(true); + appsService + .setSlug(app?.id, value) + .then(() => { + setSlug({ + value, + error: '', + }); + setSlugProgress(false); + handleSlugChange(value); + setSlugUpdatedState(true); + replaceEditorURL(value, realState?.page?.handle); + }) + .catch(({ error }) => { + setSlug({ + value, + error, + }); + setSlugProgress(false); + setSlugUpdatedState(false); + }); + } else { + setSlugProgress(false); + setSlugUpdatedState(false); + setSlug({ + value, + error: error?.errorMsg, + }); + } + }; + + const delayedSlugChange = _.debounce((value, field) => { + handleInputChange(value, field); + }, 500); + const outerStyles = { width: '142px', height: '32px', @@ -84,12 +145,72 @@ export const GlobalSettings = ({ darkMode={darkMode} /> )} -
+
-
+
+
+
+
+ + { + e.persist(); + delayedSlugChange(e.target.value, 'slug'); + }} + data-cy="app-slug-input-field" + defaultValue={oldSlug} + /> + {isSlugUpdated && ( +
+ + + +
+ )} + {slug?.error ? ( + + ) : isSlugUpdated ? ( + + ) : ( + + )} +
+
+
+
+ +
+ {!slugProgress ? ( + `${getHostURL()}/${getWorkspaceId()}/apps/${slug?.value || oldSlug || ''}` + ) : ( +
+ + {`Updating link`} +
+ )} +
+ +
+
+
+
+
diff --git a/frontend/src/Editor/Header/InfoOrErrorBox.jsx b/frontend/src/Editor/Header/InfoOrErrorBox.jsx new file mode 100644 index 0000000000..755e20630a --- /dev/null +++ b/frontend/src/Editor/Header/InfoOrErrorBox.jsx @@ -0,0 +1,38 @@ +import React from 'react'; + +function InfoOrErrorBox({ active, message, isError, isWarning, darkMode, additionalClassName }) { + const color = isError ? 'var(--light-tomato-10, #DB4324)' : isWarning ? '#ED5F00' : 'var(--slate-light-10, #7E868C)'; + const boxStyle = { + display: active ? 'flex' : 'none', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'flex-start', + gap: '2px', + width: '200px', + height: '32px', + borderRadius: '6px', + border: `1px solid ${darkMode ? 'var(--dark-border-color, #2D3748)' : 'var(--light-border-color, #FFF0EE)'}`, + background: darkMode ? 'var(--dark-bg-01, #1E293B)' : 'var(--base-white-00, #FFF)', + boxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)', + color: color, + zIndex: 10000, + position: 'absolute', + fontFamily: 'IBM Plex Sans', + fontSize: '10px', + fontStyle: 'normal', + fontWeight: 500, + lineHeight: '16px', + padding: '2px 8px', + ...(additionalClassName && { + ...additionalClassName.split(' ').reduce((acc, cls) => ({ ...acc, [cls]: true }), {}), + }), + }; + + return ( +
+ {message &&
{message}
} +
+ ); +} + +export default InfoOrErrorBox; diff --git a/frontend/src/Editor/Header/index.js b/frontend/src/Editor/Header/index.js index ebb70a27e0..794b009800 100644 --- a/frontend/src/Editor/Header/index.js +++ b/frontend/src/Editor/Header/index.js @@ -12,9 +12,11 @@ import config from 'config'; // eslint-disable-next-line import/no-unresolved import { useUpdatePresence } from '@y-presence/react'; import { useAppVersionStore } from '@/_stores/appVersionStore'; +import { useCurrentState } from '@/_stores/currentStateStore'; import { shallow } from 'zustand/shallow'; import { useAppDataActions, useAppInfo, useCurrentUser } from '@/_stores/appDataStore'; import SolidIcon from '@/_ui/Icon/SolidIcons'; +import { redirectToDashboard } from '@/_helpers/routes'; export default function EditorHeader({ M, @@ -34,11 +36,7 @@ export default function EditorHeader({ }) { const currentUser = useCurrentUser(); - const { updateState } = useAppDataActions(); const { isSaving, appId, appName, app, isPublic } = useAppInfo(); - const handleSlugChange = (newSlug) => { - updateState({ slug: newSlug }); - }; const { isVersionReleased, editingVersion } = useAppVersionStore( (state) => ({ @@ -47,6 +45,7 @@ export default function EditorHeader({ }), shallow ); + const currentState = useCurrentState(); const updatePresence = useUpdatePresence(); @@ -67,7 +66,7 @@ export default function EditorHeader({ const handleLogoClick = (e) => { e.preventDefault(); // Force a reload for clearing interval triggers - window.location.href = '/'; + redirectToDashboard(); }; return ( @@ -155,9 +154,9 @@ export default function EditorHeader({ app={app} appId={appId} slug={slug} - M={M} - handleSlugChange={handleSlugChange} darkMode={darkMode} + pageHandle={currentState?.page?.handle} + M={M} isPublic={isPublic ?? false} /> )} diff --git a/frontend/src/Editor/LeftSidebar/SidebarComment.jsx b/frontend/src/Editor/LeftSidebar/SidebarComment.jsx index 8fe411c1ca..9ce9fb6a01 100644 --- a/frontend/src/Editor/LeftSidebar/SidebarComment.jsx +++ b/frontend/src/Editor/LeftSidebar/SidebarComment.jsx @@ -2,9 +2,9 @@ import React, { forwardRef } from 'react'; import cx from 'classnames'; import { LeftSidebarItem } from './SidebarItem'; import { commentsService } from '@/_services'; -import useRouter from '@/_hooks/use-router'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { useEditorStore } from '@/_stores/editorStore'; +import { useAppDataStore } from '@/_stores/appDataStore'; import { shallow } from 'zustand/shallow'; export const LeftSidebarComment = forwardRef(({ selectedSidebarItem, currentPageId }, ref) => { @@ -20,18 +20,23 @@ export const LeftSidebarComment = forwardRef(({ selectedSidebarItem, currentPage }), shallow ); + const { appId } = useAppDataStore( + (state) => ({ + appId: state?.appId, + }), + shallow + ); const [isActive, toggleActive] = React.useState(false); const [notifications, setNotifications] = React.useState([]); - const router = useRouter(); React.useEffect(() => { - if (appVersionsId) { - commentsService.getNotifications(router.query.id, false, appVersionsId, currentPageId).then(({ data }) => { + if (appVersionsId && appId) { + commentsService.getNotifications(appId, false, appVersionsId, currentPageId).then(({ data }) => { setNotifications(data); }); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [appVersionsId, currentPageId]); + }, [appVersionsId, currentPageId, appId]); return ( 0} diff --git a/frontend/src/Editor/LeftSidebar/index.jsx b/frontend/src/Editor/LeftSidebar/index.jsx index cb75f9303b..3fae5b4f9c 100644 --- a/frontend/src/Editor/LeftSidebar/index.jsx +++ b/frontend/src/Editor/LeftSidebar/index.jsx @@ -140,7 +140,7 @@ export const LeftSidebar = forwardRef((props, ref) => { sideBarBtnRefs.current[page] = ref; }; useEffect(() => { - setRealState(currentState); + setRealState(currentState); //!ceck this // eslint-disable-next-line react-hooks/exhaustive-deps }, [currentState.components]); diff --git a/frontend/src/Editor/ManageAppUsers.jsx b/frontend/src/Editor/ManageAppUsers.jsx index 273802ad11..e3b1f8c116 100644 --- a/frontend/src/Editor/ManageAppUsers.jsx +++ b/frontend/src/Editor/ManageAppUsers.jsx @@ -1,16 +1,15 @@ import React from 'react'; -import { appService, authenticationService } from '@/_services'; +import { appService, appsService, authenticationService } from '@/_services'; import Modal from 'react-bootstrap/Modal'; import { toast } from 'react-hot-toast'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import Skeleton from 'react-loading-skeleton'; -import { debounce } from 'lodash'; -import Textarea from '@/_ui/Textarea'; +import _, { debounce } from 'lodash'; import { withTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; -import { getPrivateRoute } from '@/_helpers/routes'; +import { getPrivateRoute, replaceEditorURL, getHostURL } from '@/_helpers/routes'; +import { validateName } from '@/_helpers/utils'; import SolidIcon from '@/_ui/Icon/SolidIcons'; -import { getSubpath } from '@/_helpers/utils'; import { useAppDataStore } from '@/_stores/appDataStore'; class ManageAppUsersComponent extends React.Component { @@ -21,14 +20,32 @@ class ManageAppUsersComponent extends React.Component { this.state = { showModal: false, appId: null, - slugError: null, isLoading: true, isSlugVerificationInProgress: false, addingUser: false, newUser: {}, + newSlug: { + value: null, + error: '', + }, + isSlugUpdated: false, }; } + /* + Only will fail for existed apps before the app/workspace url revamp which has + special chars or spaces in their app slugs + */ + validateThePreExistingSlugs = () => { + const existedSlugErrors = validateName(this.props.slug, 'App slug', true, false, false, false); + this.setState({ + newSlug: { + value: this.props.slug, + error: existedSlugErrors.errorMsg, + }, + }); + }; + componentDidMount() { const appId = this.props.appId; this.fetchAppUsers(appId); @@ -36,7 +53,7 @@ class ManageAppUsersComponent extends React.Component { } fetchAppUsers = (appId) => { - appService + appsService .getAppUsers(appId) .then((data) => this.setState({ @@ -54,6 +71,12 @@ class ManageAppUsersComponent extends React.Component { hideModal = () => { this.setState({ showModal: false, + newSlug: { + value: this.props.slug, + error: '', + }, + isSlugVerificationInProgress: false, + isSlugUpdated: false, }); }; @@ -82,17 +105,15 @@ class ManageAppUsersComponent extends React.Component { this.setState({ ischangingVisibility: true, }); + useAppDataStore.getState().actions.updateState({ isPublic: newState }); + // eslint-disable-next-line no-unused-vars - appService + appsService .setVisibility(this.state.appId, newState) .then(() => { this.setState({ ischangingVisibility: false, - app: { - ...this.state.app, - is_public: newState, - }, }); if (newState) { @@ -101,7 +122,6 @@ class ManageAppUsersComponent extends React.Component { toast('Application visibility set to private'); } }) - .catch((error) => { this.setState({ ischangingVisibility: false, @@ -110,42 +130,82 @@ class ManageAppUsersComponent extends React.Component { }); }; - handleSetSlug = (event) => { - const newSlug = event.target.value || this.props.appId; - this.setState({ isSlugVerificationInProgress: true }); - - appService - .setSlug(this.state.appId, newSlug) - .then(() => { - this.setState({ - slugError: null, - isSlugVerificationInProgress: false, - }); - this.props.handleSlugChange(newSlug); - }) - .catch(({ error }) => { - this.setState({ - slugError: error, - isSlugVerificationInProgress: false, - }); - }); - }; - delayedSlugChange = debounce((e) => { - this.handleSetSlug(e); + this.handleInputChange(e.target.value, 'slug'); }, 500); - render() { - const { isLoading, slugError, isSlugVerificationInProgress, appId } = this.state; + handleSlugChange = (newSlug) => { + useAppDataStore.actions.updateState({ slug: newSlug }); + }; - const appLink = `${window.public_config?.TOOLJET_HOST}${getSubpath() ? getSubpath() : ''}/applications/`; + handleInputChange = (value, field) => { + this.setState({ + newSlug: { + value: this.state.newSlug?.value, + error: '', + isSlugUpdated: false, + }, + }); + + const error = validateName(value, `App ${field}`, true, false, !(field === 'slug'), !(field === 'slug')); + + if (!_.isEmpty(value) && value !== this.props.slug && _.isEmpty(error.errorMsg)) { + this.setState({ + isSlugVerificationInProgress: true, + }); + appsService + .setSlug(this.state.app.id, value) + .then(() => { + this.setState({ + newSlug: { + value: value, + error: '', + }, + isSlugVerificationInProgress: false, + isSlugUpdated: true, + }); + this.handleSlugChange(value); + replaceEditorURL(value, this.props.pageHandle); + }) + .catch(({ error }) => { + this.setState({ + newSlug: { + value, + error, + }, + isSlugVerificationInProgress: false, + isSlugUpdated: false, + }); + }); + } else { + this.setState({ + newSlug: { + value, + error: error?.errorMsg, + }, + isSlugVerificationInProgress: false, + isSlugUpdated: false, + }); + } + }; + + render() { + const { isLoading, isSlugVerificationInProgress, newSlug, isSlugUpdated, appId } = this.state; + + const appLink = `${getHostURL()}/applications/`; const shareableLink = appLink + (this.props.slug || appId); - const slugButtonClass = isSlugVerificationInProgress ? '' : slugError !== null ? 'is-invalid' : 'is-valid'; + const slugButtonClass = !_.isEmpty(newSlug.error) ? 'is-invalid' : 'is-valid'; const embeddableLink = ``; return ( -
- this.setState({ showModal: true })}> +
+ { + this.validateThePreExistingSlugs(); + this.setState({ showModal: true }); + }} + >
) : ( -
+
-
+
- - {this.props.t('editor.shareModal.makeApplicationPublic', 'Make application public?')} + + {this.props.t('editor.shareModal.makeApplicationPublic', 'Make application public')}
-
-