Merge branch 'feature/deploy-preview' into 'release'

Adding the nginx config for proxying deploy-previews on appsmith.com domain

This MR fixes changes the following: 
1. Cypress tests are now parallelized. Each run is recorded on `https://dashboard.cypress.io` and there are parallel threads spun up in the test phase via `.gitlab-ci.yml`. This cuts the test time down to 16 mins instead of 1 hour. On local systems, the parallelization is turned off.
2. Added nginx configuration for proxying API calls during deploy-previews. Will make reviewing features and code much easier. 
Now, there is no need of the `REACT_APP_BASE_URL` field in the `index.js` file. By default all deployments will initiate API calls via `https://<url>/api`. These calls will be proxied by Nginx in non-Netlify scenarios. For deploy previews, you can now visit: `https://<#MR>.appsmith.com` and it should load the code in that branch.
3. For Netlify deployments, made changes to the `netlify.toml` file to redirect the `/api` invocations to the appropriate endpoint. Also modified the build command in "Deploy Settings" in the Netlify console. Check that for details.
4. Now in order to run test cases locally, you will require Nginx & https to work. Check `start-https.sh` for details.
5. Added Docker tags to all master builds which allow us to revert back to previous images in production (if required)

See merge request theappsmith/internal-tools-client!521

app/client/.gitlab-ci.yml

@@ -8,6 +8,7 @@
   - |
     if [ "$CI_COMMIT_BRANCH" == "master" ]; then
       REACT_APP_ENVIRONMENT="PRODUCTION"
+      REACT_APP_BASE_URL="https://api.appsmith.com"
     elif [ "$CI_COMMIT_BRANCH" == "release" ]; then
       REACT_APP_ENVIRONMENT="STAGING"
       REACT_APP_BASE_URL="https://release-api.appsmith.com"
@@ -15,7 +16,9 @@
       REACT_APP_ENVIRONMENT="DEVELOPMENT"
       REACT_APP_BASE_URL="https://release-api.appsmith.com"
     fi
-image: cypress/base:10.16.3
+
+# This image contains Nginx & Cypress binaries
+image: appsmith/cypress-nginx
 
 variables:
   npm_config_cache: "$CI_PROJECT_DIR/.npm"
@@ -55,15 +58,30 @@ react-build-release:
     - release
     - merge_requests
 
-cypress-test-release:
+unit_test:
+  stage: test
+  script:
+    - *set_env_variables
+    - yarn run test:unit
+  only:
+    - release
+    - merge_requests
+
+# all jobs that actually run tests can use the same definition
+.test_job_template:
+  image: appsmith/cypress-nginx
   stage: test
   script:
     - *set_env_variables
-    - yarn global add serve
-    - serve -s build -p 3000 &
     # This is required in order to ensure that all the test cases pass
     - echo "127.0.0.1	dev.appsmith.com" >> /etc/hosts
-    - yarn test
+    - serve -s build -p 3000 &
+    - mkdir -p /var/www/appsmith /etc/certificate
+    - cp ./docker/nginx-linux.conf /etc/nginx/conf.d/app.conf
+    - cp $APPSMITH_SSL_CERTIFICATE /etc/certificate/dev.appsmith.com.pem
+    - cp $APPSMITH_SSL_KEY /etc/certificate/dev.appsmith.com-key.pem
+    - nginx
+    - yarn test:ci
   artifacts:
     when: always
     expire_in: 1 week
@@ -75,35 +93,29 @@ cypress-test-release:
     - release
     - merge_requests
 
-# cypress-test-fix:
-#   stage: build
-#   script:
-#     - *set_env_variables
-#     - yarn install
-#     # show where the Cypress test runner binaries are cached
-#     - $(npm bin)/cypress cache path
-#     # show all installed versions of Cypress binary
-#     - $(npm bin)/cypress cache list
-#     - $(npm bin)/cypress verify
-#     - curl https://s3.ap-south-1.amazonaws.com/dev.public.appsmith/react-build/build1.tar.gz --output build.tar.gz
-#     - tar xvf build.tar.gz
-#     - yarn global add serve
-#     - serve -s build -p 3000 &
-#     # This is required in order to ensure that all the test cases pass
-#     - echo "127.0.0.1	dev.appsmith.com" >> /etc/hosts
-#     - yarn test
-#   artifacts:
-#     when: always
-#     expire_in: 1 week
-#     paths:
-#       - cypress/screenshots
-#       - cypress/videos
-#   only:
-#     # We don't test on master right now because of changing environment variables for REACT_APP_BASE_URL. Need to figure out a way to configure that.
-#     - fix/test-revert
+cypress-test-release-1:
+  extends: .test_job_template
 
+cypress-test-release-2:
+  extends: .test_job_template
+
+cypress-test-release-3:
+  extends: .test_job_template
+
+cypress-test-release-4:
+    extends: .test_job_template
+
+cypress-test-release-5:
+  extends: .test_job_template
+
+cypress-test-release-6:
+  extends: .test_job_template
+  
 docker-package-release:
   image: docker:dind
+  # This ensures that it runs on the dedicated runner
+  tags:
+    - appsmith
   services:
     - docker:dind
   stage: package
@@ -137,7 +149,9 @@ docker-package-prod:
   script:
     - *set_env_variables
     - docker build -t appsmith/appsmith-editor:latest .
+    - docker build -t appsmith/appsmith-editor:$CI_COMMIT_SHORT_SHA .
     - docker login -u $DOCKER_HUB_USERNAME -p $DOCKER_HUB_ACCESS_TOKEN
-    - docker push appsmith/appsmith-editor:latest
+    # If we don't add the tag to the `docker push` command, all the tags for this image will be pushed
+    - docker push appsmith/appsmith-editor
   only:
     - master

app/client/Dockerfile-cypress-test

@@ -0,0 +1,3 @@
+FROM cypress/browsers:node10.16.3-chrome80-ff73
+
+RUN apt-get update -y && apt-get install -y nginx && apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && yarn global add serve

app/client/README.md

@@ -10,6 +10,9 @@
 - `yarn start` Deploy locally
 
 
+> For more details on how to run this locally, please visit: [Notion Doc](https://www.notion.so/appsmith/How-to-run-the-code-e031545454874419b9f72cd51feb90ff)
+
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Available Scripts

app/client/cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl":"http://dev.appsmith.com:3000/",
+  "baseUrl": "https://dev.appsmith.com/",
   "defaultCommandTimeout": 20000,
   "requestTimeout": 21000,
   "pageLoadTimeout": 20000,

app/client/cypress/plugins/index.js

@@ -18,4 +18,12 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  on("before:browser:launch", (browser = {}, launchOptions) => {
+    if (browser.name === "chrome") {
+      launchOptions.args.push("--disable-dev-shm-usage");
+      return launchOptions;
+    }
+
+    return launchOptions;
+  });
 };

app/client/cypress/support/commands.js

@@ -397,35 +397,30 @@ Cypress.Commands.add("addDsl", dsl => {
 
     //Fetch the layout id
     cy.server();
-    cy.request(
-      "GET",
-      "https://release-api.appsmith.com/api/v1/pages/" + pageid,
-    ).then(response => {
-      const len = JSON.stringify(response.body);
-      cy.log(len);
-      layoutId = JSON.parse(len).data.layouts[0].id;
+    cy.request("GET", "https://dev.appsmith.com/api/v1/pages/" + pageid).then(
+      response => {
+        const len = JSON.stringify(response.body);
+        cy.log(len);
+        layoutId = JSON.parse(len).data.layouts[0].id;
 
-      // Dumpimg the DSL to the created page
+        // Dumpimg the DSL to the created page
 
-      cy.request(
-        "PUT",
-        "https://release-api.appsmith.com/api/v1/layouts/" +
-          layoutId +
-          "/pages/" +
-          pageid,
-        dsl,
-      ).then(response => {
-        expect(response.status).equal(200);
-        cy.reload();
-      });
-    });
+        cy.request(
+          "PUT",
+          "https://dev.appsmith.com/api/v1/layouts/" +
+            layoutId +
+            "/pages/" +
+            pageid,
+          dsl,
+        ).then(response => {
+          expect(response.status).equal(200);
+          cy.reload();
+        });
+      },
+    );
   });
 });
 
-Cypress.Commands.add("NavigateToDatasourceEditor", () => {
-  cy.get(datasourceEditor.datasourceEditorIcon).click({ force: true });
-});
-
 Cypress.Commands.add("getPluginFormsAndCreateDatasource", () => {
   cy.wait("@getPluginForm").should(
     "have.nested.property",
@@ -578,18 +573,6 @@ Cypress.Commands.add("runSaveDeleteQuery", () => {
   );
 });
 
-Cypress.Commands.add("getPluginFormsAndCreateDatasource", () => {
-  cy.wait("@getPluginForm").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    200,
-  );
-  cy.wait("@createDatasource").should(
-    "have.nested.property",
-    "response.body.responseMeta.status",
-    201,
-  );
-});
 Cypress.Commands.add("openPropertyPane", widgetType => {
   const selector = `.t--draggable-${widgetType}`;
   cy.get(selector)

app/client/cypress/support/index.js

@@ -21,6 +21,8 @@ let appId;
 // Import commands.js using ES2015 syntax:
 import "./commands";
 before(function() {
+  console.log("**** Got Cypress base URL as: ", process.env.CYPRESS_BASE_URL);
+
   cy.server();
   cy.route("GET", "/api/v1/applications").as("applications");
   cy.route("GET", "/api/v1/users/profile").as("getUser");
@@ -90,7 +92,7 @@ before(function() {
   });
 
   beforeEach(function() {
-    Cypress.Cookies.preserveOnce("session_id", "remember_token");
+    Cypress.Cookies.preserveOnce("SESSION");
   });
 
   after(function() {

app/client/cypress/test.sh

@@ -1 +1,32 @@
-$(npm bin)/cypress run CYPRESS_BASE_URL='http://dev.appsmith.com:3000/' --spec "cypress/integration/Smoke_TestSuite/*/*"
+#!/bin/bash
+
+# By default we assume that the target for the CI is local
+target=local
+
+while :; do
+    case $1 in
+        -e|--env)
+            if [ "$2" ]; then
+                target=$2
+                shift
+            else
+                die 'ERROR: "--env" requires a non-empty option argument. Allowed values local/ci'
+            fi
+            ;;
+        --env=?*)
+            target=${1#*=} # Delete everything up to "=" and assign the remainder.
+            ;;
+        *) # Default case: No more options, so break out of the loop.
+          break
+    esac
+    shift
+done
+
+echo "Got the target: $target" 
+if [ "$target" == "ci" ]; then
+    # On the CI server run the tests in parallel
+    # This requires the projectId and the record_key to be configured in your environment variables. By default this is defined on the CI server
+    $(npm bin)/cypress run --headless --browser chrome --record --parallel --group "Electrons on Gitlab CI" --spec "cypress/integration/Smoke_TestSuite/*/*"
+else
+    $(npm bin)/cypress run --headless --browser chrome --spec "cypress/integration/Smoke_TestSuite/*/*"
+fi

app/client/docker/nginx-linux.conf

@@ -6,22 +6,17 @@ server {
     gzip on;
     gzip_proxied any;
     proxy_ssl_server_name on;
-    # sub_filter_once off;
+
     location / {
-       #proxy_set_header Host $host;
-       #proxy_set_header X-Real-IP $remote_addr;
-    #    sub_filter ___BASE_URL___ http://$host;
        proxy_pass http://localhost:3000;
     }
 
     location /api {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
 
     location /oauth2 {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
@@ -40,22 +35,17 @@ server {
     gzip on;
 
     proxy_ssl_server_name on;    
-    # sub_filter_once off;
+
     location / {
-       #proxy_set_header Host $host;
-       #proxy_set_header X-Real-IP $remote_addr;
-    #    sub_filter ___BASE_URL___ http://$host;
        proxy_pass http://localhost:3000;
     }
 
     location /api {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
 
     location /oauth2 {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }

app/client/docker/nginx-mac.conf

@@ -6,22 +6,16 @@ server {
     gzip on;
     gzip_proxied any;
     proxy_ssl_server_name on;
-    # sub_filter_once off;
     location / {
-       #proxy_set_header Host $host;
-       #proxy_set_header X-Real-IP $remote_addr;
-    #    sub_filter ___BASE_URL___ http://$host;
        proxy_pass http://host.docker.internal:3000;
     }
 
     location /api {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
 
     location /oauth2 {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
@@ -40,22 +34,16 @@ server {
     gzip on;
 
     proxy_ssl_server_name on;    
-    # sub_filter_once off;
     location / {
-       #proxy_set_header Host $host;
-       #proxy_set_header X-Real-IP $remote_addr;
-    #    sub_filter ___BASE_URL___ http://$host;
        proxy_pass http://host.docker.internal:3000;
     }
 
     location /api {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }
 
     location /oauth2 {
-        # proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_pass https://release-api.appsmith.com;
     }

app/client/netlify.toml

@@ -27,3 +27,16 @@
   [context.b.environment]
     REACT_APP_ENVIRONMENT = "STAGING"
     REACT_APP_BASE_URL = "https://release-api.appsmith.com"
+
+[[redirects]]
+  from = "/api/*"
+  to = "API_PLACEHOLDER/api/:splat"
+  status = 200
+  force = true
+
+[[redirects]]
+  from = "/oauth2/*"
+  to = "API_PLACEHOLDER/oauth2/:splat"
+  status = 200
+  force = true
+    

app/client/package.json

@@ -107,13 +107,14 @@
     "build": "./build.sh",
     "build-local": "craco --max-old-space-size=4096 build --config craco.build.config.js",
     "build-staging": "REACT_APP_BASE_URL=https://release-api.appsmith.com REACT_APP_ENVIRONMENT=STAGING craco --max-old-space-size=4096 build --config craco.build.config.js",
-    "test": "npm run test-jest && cypress/test.sh",
+    "test": "CYPRESS_BASE_URL=https://dev.appsmith.com cypress/test.sh",
+    "test:ci": "CYPRESS_BASE_URL=https://dev.appsmith.com cypress/test.sh --env=ci",
     "eject": "react-scripts eject",
     "start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",
     "storybook": "start-storybook",
     "cytest": "REACT_APP_TESTING=TESTING REACT_APP_ENVIRONMENT=DEVELOPMENT craco start & ./node_modules/.bin/cypress open",
     "build-storybook": "build-storybook -c .storybook -o .storybook-out",
-    "test-jest": "./node_modules/jest/bin/jest.js -b --colors"
+    "test:unit": "$(npm bin)/jest -b --colors"
   },
   "resolution": {
     "jest": "24.8.0"

app/client/public/index.html

@@ -22,7 +22,6 @@
   <div id="loader" style="width: 30vw;"></div>
   <div id="root"></div>
   <script type="text/javascript">
-    window.BASE_URL = "___BASE_URL___";
     window.addEventListener("DOMContentLoaded", (event) => {
       document.getElementById("loader").style.width = "50vw";
     });

app/client/src/configs/index.ts

@@ -10,15 +10,7 @@ declare global {
 
 // TODO(Abhinav): See if this is called so many times, that we may need memoization.
 export const getAppsmithConfigs = (): AppsmithUIConfigs => {
-  const WINDOW_BASE_URL: string = window.BASE_URL;
-  const REACT_APP_BASE_URL: string | undefined = process.env.REACT_APP_BASE_URL;
-
-  const BASE_URL =
-    WINDOW_BASE_URL === "___BASE_URL___" ? REACT_APP_BASE_URL : WINDOW_BASE_URL;
-
-  if (!BASE_URL) {
-    throw Error("NO API Endpont defined - aborting");
-  }
+  const BASE_URL = "";
   switch (process.env.REACT_APP_ENVIRONMENT) {
     case "PRODUCTION":
       return prodConfig(BASE_URL);