Merge pull request #459 from appsmithorg/release

Release
appsmithorg · Aug 28, 2020 · 2b8764e · 2b8764e
2 parents de161d9 + 8a0805d
commit 2b8764e
Show file tree

Hide file tree

Showing 37 changed files with 594 additions and 142 deletions.
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ApiFlow/CurlImportFlow_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ApiFlow/CurlImportFlow_spec.js
@@ -6,9 +6,7 @@ describe("Test curl import flow", function() {
     localStorage.setItem("ApiPaneV2", "ApiPaneV2");
     cy.NavigateToApiEditor();
     cy.get(ApiEditor.curlImage).click({ force: true });
-    cy.get("textarea").type(
-      "curl -X GET http://app.appsmith.com/scrap/api?slugifiedName=Freshdesk&ownerName=volodimir.kudriachenko",
-    );
+    cy.get("textarea").type("curl -X GET https://mock-api.appsmith.com/users");
     cy.importCurl();
     cy.get("@curlImport").then(response => {
       cy.expect(response.response.body.responseMeta.success).to.eq(true);

diff --git a/app/client/package.json b/app/client/package.json
@@ -16,8 +16,9 @@
     "@craco/craco": "^5.6.1",
     "@manaflair/redux-batch": "^1.0.0",
     "@optimizely/optimizely-sdk": "^4.0.0",
-    "@sentry/browser": "^5.6.3",
-    "@sentry/webpack-plugin": "^1.10.0",
+    "@sentry/react": "^5.22.0",
+    "@sentry/tracing": "^5.22.0",
+    "@sentry/webpack-plugin": "^1.12.1",
     "@types/chance": "^1.0.7",
     "@types/lodash": "^4.14.120",
     "@types/moment-timezone": "^0.5.10",
@@ -55,6 +56,7 @@
     "fusioncharts": "^3.15.0-sr.1",
     "history": "^4.10.1",
     "husky": "^3.0.5",
+    "immer": "^7.0.8",
     "instantsearch.css": "^7.4.2",
     "instantsearch.js": "^4.4.1",
     "interweave": "^12.1.1",

diff --git a/app/client/src/actions/actionActions.ts b/app/client/src/actions/actionActions.ts
@@ -67,6 +67,38 @@ export const runAction = (id: string, paginationField?: PaginationField) => {
   };
 };
 
+export const runActionInit = (
+  id: string,
+  paginationField?: PaginationField,
+) => {
+  return {
+    type: ReduxActionTypes.RUN_ACTION_INIT,
+    payload: {
+      id,
+      paginationField,
+    },
+  };
+};
+
+export const showRunActionConfirmModal = (show: boolean) => {
+  return {
+    type: ReduxActionTypes.SHOW_RUN_ACTION_CONFIRM_MODAL,
+    payload: show,
+  };
+};
+
+export const cancelRunActionConfirmModal = () => {
+  return {
+    type: ReduxActionTypes.CANCEL_RUN_ACTION_CONFIRM_MODAL,
+  };
+};
+
+export const acceptRunActionConfirmModal = () => {
+  return {
+    type: ReduxActionTypes.ACCEPT_RUN_ACTION_CONFIRM_MODAL,
+  };
+};
+
 export const updateAction = (payload: { id: string }) => {
   return batchAction({
     type: ReduxActionTypes.UPDATE_ACTION_INIT,
@@ -196,6 +228,13 @@ export const updateActionProperty = (
   });
 };
 
+export const setActionsToExecuteOnPageLoad = (actions: string[]) => {
+  return {
+    type: ReduxActionTypes.SET_ACTION_TO_EXECUTE_ON_PAGELOAD,
+    payload: actions,
+  };
+};
+
 export default {
   createAction: createActionRequest,
   fetchActions,

diff --git a/app/client/src/api/ActionAPI.tsx b/app/client/src/api/ActionAPI.tsx
@@ -182,6 +182,12 @@ class ActionAPI extends API {
   static executeQuery(executeAction: any): AxiosPromise<ActionApiResponse> {
     return API.post(ActionAPI.url + "/execute", executeAction);
   }
+
+  static toggleActionExecuteOnLoad(actionId: string, shouldExecute: boolean) {
+    return API.put(ActionAPI.url + `/executeOnLoad/${actionId}`, undefined, {
+      flag: shouldExecute.toString(),
+    });
+  }
 }
 
 export default ActionAPI;
diff --git a/app/client/src/api/PageApi.tsx b/app/client/src/api/PageApi.tsx
@@ -45,7 +45,11 @@ export type FetchPublishedPageResponse = ApiResponse & {
 };
 
 export interface SavePageResponse extends ApiResponse {
-  pageId: string;
+  data: {
+    id: string;
+    layoutOnLoadActions: PageAction[][];
+    dsl: Partial<ContainerWidgetProps<any>>;
+  };
 }
 
 export interface CreatePageRequest {

diff --git a/app/client/src/components/designSystems/appsmith/ChartComponent.tsx b/app/client/src/components/designSystems/appsmith/ChartComponent.tsx
@@ -231,10 +231,20 @@ class ChartComponent extends React.Component<ChartComponentProps> {
   componentDidMount() {
     this.createGraph();
     FusionCharts.ready(() => {
-      this.chartInstance.render();
+      /* Component could be unmounted before FusionCharts is ready, 
+      this check ensure we don't render on unmounted component */
+      if (this.chartInstance) {
+        this.chartInstance.render();
+      }
     });
   }
 
+  componentWillUnmount() {
+    if (this.chartInstance) {
+      this.chartInstance = null;
+    }
+  }
+
   componentDidUpdate(prevProps: ChartComponentProps) {
     if (!_.isEqual(prevProps, this.props)) {
       const chartType = this.getChartType();

diff --git a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
@@ -291,7 +291,7 @@ export const TableHeaderWrapper = styled.div<{
   .show-page-items {
     display: ${props => (props.width < 700 ? "none" : "flex")};
   }
-  overflow-x: scroll;
+  overflow-x: auto;
   overflow-y: hidden;
   height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
   min-height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
@@ -325,7 +325,7 @@ export const TableIconWrapper = styled.div<{
   box-shadow: ${props =>
     props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"};
   width: 48px;
-  height: 45px;
+  height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/app/client/src/components/designSystems/appsmith/TableUtilities.tsx b/app/client/src/components/designSystems/appsmith/TableUtilities.tsx
@@ -718,7 +718,12 @@ export function sortTableFunction(
     )?.metaProperties?.type || ColumnTypes.TEXT;
   return tableData.sort(
     (a: { [key: string]: any }, b: { [key: string]: any }) => {
-      if (a[sortedColumn] !== undefined && b[sortedColumn] !== undefined) {
+      if (
+        a[sortedColumn] !== undefined &&
+        a[sortedColumn] !== null &&
+        b[sortedColumn] !== undefined &&
+        b[sortedColumn] !== null
+      ) {
         switch (columnType) {
           case ColumnTypes.CURRENCY:
           case ColumnTypes.NUMBER:

diff --git a/app/client/src/components/editorComponents/ErrorBoundry.tsx b/app/client/src/components/editorComponents/ErrorBoundry.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import styled from "styled-components";
-import * as Sentry from "@sentry/browser";
+import * as Sentry from "@sentry/react";
 
 type Props = { isValid: boolean; children: ReactNode };
 type State = { hasError: boolean };

diff --git a/app/client/src/components/formControls/DynamicTextFieldControl.tsx b/app/client/src/components/formControls/DynamicTextFieldControl.tsx
@@ -24,7 +24,7 @@ import {
 const Wrapper = styled.div`
   .dynamic-text-field {
     border-radius: 4px;
-    border: 1px solid #d0d7dd;
+    border: none;
     font-size: 14px;
     height: calc(100vh / 4);
   }

diff --git a/app/client/src/components/formControls/SwitchControl.tsx b/app/client/src/components/formControls/SwitchControl.tsx
@@ -21,21 +21,30 @@ const SwitchWrapped = styled.div`
   }
 `;
 
+const Info = styled.div`
+  font-size: 12px;
+  opacity: 0.7;
+  margin-top: 8px;
+`;
+
 export class SwitchField extends React.Component<Props> {
   render() {
-    const { label, isRequired, input } = this.props;
+    const { label, isRequired, input, info } = this.props;
 
     return (
-      <SwitchWrapped>
-        <StyledFormLabel>
-          {label} {isRequired && "*"}
-        </StyledFormLabel>
-        <StyledSwitch
-          checked={input.value}
-          onChange={value => input.onChange(value)}
-          large
-        />
-      </SwitchWrapped>
+      <div>
+        <SwitchWrapped>
+          <StyledFormLabel>
+            {label} {isRequired && "*"}
+          </StyledFormLabel>
+          <StyledSwitch
+            checked={input.value}
+            onChange={value => input.onChange(value)}
+            large
+          />
+        </SwitchWrapped>
+        {info && <Info>{info}</Info>}
+      </div>
     );
   }
 }
@@ -56,6 +65,8 @@ class SwitchControl extends BaseControl<SwitchControlProps> {
   }
 }
 
-export type SwitchControlProps = ControlProps;
+export interface SwitchControlProps extends ControlProps {
+  info?: string;
+}
 
 export default SwitchControl;
diff --git a/app/client/src/configs/index.ts b/app/client/src/configs/index.ts
@@ -1,9 +1,13 @@
 import { AppsmithUIConfigs, FeatureFlagConfig } from "./types";
+import { Integrations } from "@sentry/tracing";
+
 type INJECTED_CONFIGS = {
   sentry: {
     dsn: string;
     release: string;
     environment: string;
+    integrations: any[];
+    tracesSampleRate: number;
   };
   smartLook: {
     id: string;
@@ -48,7 +52,11 @@ const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
     sentry: {
       dsn: process.env.REACT_APP_SENTRY_DSN || "",
       release: process.env.REACT_APP_SENTRY_RELEASE || "",
-      environment: capitalizeText(process.env.NODE_ENV),
+      environment:
+        process.env.REACT_APP_SENTRY_ENVIRONMENT ||
+        capitalizeText(process.env.NODE_ENV),
+      integrations: [new Integrations.BrowserTracing()],
+      tracesSampleRate: 1.0,
     },
     smartLook: {
       id: process.env.REACT_APP_SMART_LOOK_ID || "",

diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
@@ -754,8 +754,8 @@ export const scrollbarLight = css<{ backgroundColor?: Color }>`
 
   scrollbar-width: thin;
   &::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 4px;
+    height: 4px;
   }
   &::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px

diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
@@ -27,6 +27,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET",
   LOAD_API_RESPONSE: "LOAD_API_RESPONSE",
   LOAD_QUERY_RESPONSE: "LOAD_QUERY_RESPONSE",
+  RUN_ACTION_INIT: "RUN_ACTION_INIT",
   RUN_ACTION_REQUEST: "RUN_ACTION_REQUEST",
   RUN_ACTION_SUCCESS: "RUN_ACTION_SUCCESS",
   INIT_API_PANE: "INIT_API_PANE",
@@ -59,6 +60,9 @@ export const ReduxActionTypes: { [key: string]: string } = {
   UPDATE_ACTION_SUCCESS: "UPDATE_ACTION_SUCCESS",
   DELETE_ACTION_INIT: "DELETE_ACTION_INIT",
   DELETE_ACTION_SUCCESS: "DELETE_ACTION_SUCCESS",
+  SHOW_RUN_ACTION_CONFIRM_MODAL: "SHOW_RUN_ACTION_CONFIRM_MODAL",
+  CANCEL_RUN_ACTION_CONFIRM_MODAL: "CANCEL_RUN_ACTION_CONFIRM_MODAL",
+  ACCEPT_RUN_ACTION_CONFIRM_MODAL: "ACCEPT_RUN_ACTION_CONFIRM_MODAL",
   CREATE_QUERY_INIT: "CREATE_QUERY_INIT",
   FETCH_DATASOURCES_INIT: "FETCH_DATASOURCES_INIT",
   FETCH_DATASOURCES_SUCCESS: "FETCH_DATASOURCES_SUCCESS",
@@ -254,6 +258,10 @@ export const ReduxActionTypes: { [key: string]: string } = {
   TOGGLE_PROPERTY_PANE_WIDGET_NAME_EDIT:
     "TOGGLE_PROPERTY_PANE_WIDGET_NAME_EDIT",
   UPDATE_APP_STORE: "UPDATE_APP_STORE",
+  SET_ACTION_TO_EXECUTE_ON_PAGELOAD: "SET_ACTION_TO_EXECUTE_ON_PAGELOAD",
+  TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS:
+    "TOGGLE_ACTION_EXECUTE_ON_LOAD_SUCCESS",
+  TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT: "TOGGLE_ACTION_EXECUTE_ON_LOAD_INIT",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];
@@ -344,6 +352,7 @@ export const ReduxActionErrorTypes: { [key: string]: string } = {
   SAVE_API_NAME_ERROR: "SAVE_API_NAME_ERROR",
   POPULATE_PAGEDSLS_ERROR: "POPULATE_PAGEDSLS_ERROR",
   FETCH_PAGE_DSL_ERROR: "FETCH_PAGE_DSL_ERROR",
+  TOGGLE_ACTION_EXECUTE_ON_LOAD_ERROR: "TOGGLE_ACTION_EXECUTE_ON_LOAD_ERROR",
 };
 
 export const ReduxFormActionTypes: { [key: string]: string } = {

diff --git a/app/client/src/mockResponses/ActionSettings.tsx b/app/client/src/mockResponses/ActionSettings.tsx
@@ -0,0 +1,41 @@
+export const queryActionSettingsConfig = [
+  {
+    sectionName: "",
+    id: 1,
+    children: [
+      {
+        label: "Run query on Page load",
+        configProperty: "executeOnLoad",
+        controlType: "SWITCH",
+        info: "Will refresh data everytime page is reloaded",
+      },
+      // {
+      //   label: "Request confirmation before running query",
+      //   configProperty: "requestConfirmation",
+      //   controlType: "SWITCH",
+      //   info: "Ask confirmation from the user everytime before refreshing data",
+      // },
+    ],
+  },
+];
+
+export const apiActionSettingsConfig = [
+  {
+    sectionName: "",
+    id: 1,
+    children: [
+      {
+        label: "Run api on Page load",
+        configProperty: "executeOnLoad",
+        controlType: "SWITCH",
+        info: "Will refresh data everytime page is reloaded",
+      },
+      // {
+      //   label: "Request confirmation before running api",
+      //   configProperty: "requestConfirmation",
+      //   controlType: "SWITCH",
+      //   info: "Ask confirmation from the user everytime before refreshing data",
+      // },
+    ],
+  },
+];
diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -25,6 +25,8 @@ import EmbeddedDatasourcePathField from "components/editorComponents/form/fields
 import { AppState } from "reducers";
 import { getApiName } from "selectors/formSelectors";
 import ActionNameEditor from "components/editorComponents/ActionNameEditor";
+import ActionSettings from "pages/Editor/ActionSettings";
+import { apiActionSettingsConfig } from "mockResponses/ActionSettings";
 
 const Form = styled.form`
   display: flex;
@@ -111,6 +113,13 @@ const RequestParamsWrapper = styled.div`
   padding-right: 10px;
 `;
 
+const SettingsWrapper = styled.div`
+  padding-left: 15px;
+  ${FormLabel} {
+    padding: 0px;
+  }
+`;
+
 const HeadersSection = styled.div`
   margin-bottom: 32px;
 `;
@@ -256,6 +265,17 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
                   />
                 ),
               },
+              {
+                key: "settings",
+                title: "Settings",
+                panelComponent: (
+                  <SettingsWrapper>
+                    <ActionSettings
+                      actionSettingsConfig={apiActionSettingsConfig}
+                    />
+                  </SettingsWrapper>
+                ),
+              },
             ]}
           />
         </TabbedViewContainer>