From 6c86253945768262d0d10098b954ff7d17c3b22a Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Fri, 31 Jan 2020 11:13:16 +0000
Subject: [PATCH] Fix components for widget update

---
 .../blueprint/DatePickerComponent.tsx         |  8 ++-
 .../blueprint/DropdownComponent.tsx           |  8 ++-
 .../blueprint/InputComponent.tsx              | 12 ++--
 .../blueprint/RadioGroupComponent.tsx         |  8 ++-
 .../syncfusion/TableComponent.tsx             | 67 +++++++++++--------
 app/client/src/sagas/ActionSagas.ts           | 10 ++-
 6 files changed, 75 insertions(+), 38 deletions(-)

diff --git a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
index 5ac4acfd4e..1b983e774f 100644
--- a/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
@@ -25,7 +25,13 @@ class DatePickerComponent extends React.Component<DatePickerComponentProps> {
     return (
       <StyledControlGroup fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+          <Label
+            className={
+              this.props.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
             {this.props.label}
           </Label>
         )}
diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
index 07f74d4193..a5fe106bf9 100644
--- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
@@ -74,7 +74,13 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
       <DropdownContainer>
         <StyledControlGroup fill>
           {this.props.label && (
-            <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+            <Label
+              className={
+                this.props.isLoading
+                  ? Classes.SKELETON
+                  : Classes.TEXT_OVERFLOW_ELLIPSIS
+              }
+            >
               {this.props.label}
             </Label>
           )}
diff --git a/app/client/src/components/designSystems/blueprint/InputComponent.tsx b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
index 1b0c63a563..efb31bbb6e 100644
--- a/app/client/src/components/designSystems/blueprint/InputComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/InputComponent.tsx
@@ -105,10 +105,14 @@ class InputComponent extends React.Component<
     return (
       <InputComponentWrapper fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
-            <span className={this.props.isLoading ? "bp3-skeleton" : ""}>
-              {this.props.label}
-            </span>
+          <Label
+            className={
+              this.props.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
+            {this.props.label}
           </Label>
         )}
 
diff --git a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
index e76594c507..4a195a1212 100644
--- a/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
+++ b/app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
@@ -31,7 +31,13 @@ class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
     return (
       <StyledControlGroup fill>
         {this.props.label && (
-          <Label className={Classes.TEXT_OVERFLOW_ELLIPSIS}>
+          <Label
+            className={
+              this.props.isLoading
+                ? Classes.SKELETON
+                : Classes.TEXT_OVERFLOW_ELLIPSIS
+            }
+          >
             {this.props.label}
           </Label>
         )}
diff --git a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
index a66fa583b8..9d3d791d19 100644
--- a/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
+++ b/app/client/src/components/designSystems/syncfusion/TableComponent.tsx
@@ -20,6 +20,7 @@ import React, { useRef, MutableRefObject, useEffect, memo } from "react";
 import styled from "constants/DefaultTheme";
 import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
 import { ActionPayload } from "constants/ActionConstants";
+import { Classes } from "@blueprintjs/core";
 
 export interface TableComponentProps {
   data: object[];
@@ -163,38 +164,48 @@ const TableComponent = memo(
     }
 
     return (
-      <StyledGridComponent
-        selectionSettings={settings}
-        dataSource={props.data}
-        rowSelected={rowSelected}
-        ref={grid}
-        width={"100%"}
-        height={"100%"}
-        allowPaging={true}
-        allowReordering={true}
-        allowResizing={true}
-        showColumnMenu={true}
-        columnDragStart={columnDragStart}
-        columnDrop={columnDrop}
-        commandClick={onCommandClick}
-        columnMenuOpen={columnMenuOpen}
-      >
-        <Inject services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]} />
-        <ColumnsDirective>
-          {props.columns.map(col => {
-            return (
-              <ColumnDirective key={col.field} field={col.field} width={200} />
-            );
-          })}
-          {commands.length > 0 && (
-            <ColumnDirective headerText="Actions" commands={commands} />
-          )}
-        </ColumnsDirective>
-      </StyledGridComponent>
+      <div className={props.isLoading ? Classes.SKELETON : ""}>
+        <StyledGridComponent
+          selectionSettings={settings}
+          dataSource={props.data}
+          rowSelected={rowSelected}
+          ref={grid}
+          width={"100%"}
+          height={"100%"}
+          allowPaging={true}
+          allowReordering={true}
+          allowResizing={true}
+          showColumnMenu={true}
+          columnDragStart={columnDragStart}
+          columnDrop={columnDrop}
+          commandClick={onCommandClick}
+          columnMenuOpen={columnMenuOpen}
+          // queryCellInfo={customizeCell}
+        >
+          <Inject
+            services={[Resize, Page, Reorder, ColumnMenu, CommandColumn]}
+          />
+          <ColumnsDirective>
+            {props.columns.map(col => {
+              return (
+                <ColumnDirective
+                  key={col.field}
+                  field={col.field}
+                  width={200}
+                />
+              );
+            })}
+            {commands.length > 0 && (
+              <ColumnDirective headerText="Actions" commands={commands} />
+            )}
+          </ColumnsDirective>
+        </StyledGridComponent>
+      </div>
     );
   },
   (prevProps, nextProps) => {
     const propsNotEqual =
+      nextProps.isLoading !== prevProps.isLoading ||
       JSON.stringify(nextProps.data) !== JSON.stringify(prevProps.data) ||
       nextProps.height !== prevProps.height ||
       JSON.stringify(nextProps.columnActions) !==
diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts
index 79b50f0273..48ec9c0c2e 100644
--- a/app/client/src/sagas/ActionSagas.ts
+++ b/app/client/src/sagas/ActionSagas.ts
@@ -11,6 +11,7 @@ import {
   put,
   takeEvery,
   takeLatest,
+  take,
 } from "redux-saga/effects";
 import {
   ActionPayload,
@@ -382,7 +383,6 @@ export function* runApiActionSaga(action: ReduxAction<string>) {
 
 function* executePageLoadActionsSaga(action: ReduxAction<PageAction[][]>) {
   const pageActions = action.payload;
-  const apiResponses = yield select(getActionResponses);
   const actionPayloads: ActionPayload[][] = pageActions.map(actionSet =>
     actionSet.map(action => ({
       actionId: action.id,
@@ -392,10 +392,14 @@ function* executePageLoadActionsSaga(action: ReduxAction<PageAction[][]>) {
     })),
   );
   for (const actionSet of actionPayloads) {
+    const apiResponses = yield select(getActionResponses);
     const filteredSet = actionSet.filter(
-      action => !(action.actionId in apiResponses),
+      action => !apiResponses[action.actionId],
     );
-    yield* executeReduxActionSaga(executeAction(filteredSet));
+    yield put(executeAction(filteredSet));
+    for (const {} of filteredSet) {
+      yield take(ReduxActionTypes.EXECUTE_ACTION_SUCCESS);
+    }
   }
 }