Add Gsheets support for generate CRUD page

app/client/cypress/support/commands.js

@@ -936,7 +936,6 @@ Cypress.Commands.add("CreationOfUniqueAPIcheck", (apiname) => {
     .type(apiname, { force: true, delay: 500 })
     .should("have.value", apiname);
   cy.get(".error-message").should(($x) => {
-    console.log($x);
     expect($x).contain(apiname.concat(" is already being used."));
   });
   cy.get(apiwidget.apiTxt).blur();
@@ -1022,14 +1021,12 @@ Cypress.Commands.add("CreateApiAndValidateUniqueEntityName", (apiname) => {
     .type(apiname, { force: true })
     .should("have.value", apiname);
   cy.get(".t--nameOfApi .error-message").should(($x) => {
-    console.log($x);
     expect($x).contain(apiname.concat(" is already being used."));
   });
 });
 
 Cypress.Commands.add("validateMessage", (value) => {
   cy.get(".bp3-popover-content").should(($x) => {
-    console.log($x);
     expect($x).contain(value.concat(" is already being used."));
   });
 });

app/client/src/actions/datasourceActions.ts

@@ -208,7 +208,7 @@ export type executeDatasourceQuerySuccessPayload<T> = {
     isExecutionSuccess: boolean;
   };
 };
-type errorPayload = unknown;
+type errorPayload = string;
 
 export type executeDatasourceQueryReduxAction<T> = ReduxActionWithCallbacks<
   executeDatasourceQueryRequest,

app/client/src/actions/pageActions.tsx

@@ -353,6 +353,7 @@ export const generateTemplateToUpdatePage = ({
   datasourceId,
   mode,
   pageId,
+  pluginSpecificParams,
   searchColumn,
   tableName,
 }: GenerateTemplatePageRequest): ReduxActionWithExtraParams<GenerateTemplatePageRequest> => {
@@ -365,6 +366,7 @@ export const generateTemplateToUpdatePage = ({
       applicationId,
       columns,
       searchColumn,
+      pluginSpecificParams,
     },
     extraParams: {
       mode,

app/client/src/api/PageApi.tsx

@@ -122,6 +122,7 @@ export interface GenerateTemplatePageRequest {
   columns?: string[];
   searchColumn?: string;
   mode?: string;
+  pluginSpecificParams?: Record<any, any>;
 }
 
 export type GenerateTemplatePageRequestResponse = ApiResponse & {

app/client/src/components/ads/Dropdown.tsx

@@ -81,9 +81,8 @@ export interface RenderDropdownOptionType {
   optionClickHandler?: (dropdownOption: DropdownOption) => void;
 }
 
-export const DropdownContainer = styled.div<{ width: string; height: string }>`
+export const DropdownContainer = styled.div<{ width: string }>`
   width: ${(props) => props.width};
-  height: ${(props) => props.height};
   position: relative;
 `;
 
@@ -113,6 +112,7 @@ const Selected = styled.div<{
   height: string;
   bgColor?: string;
   hasError?: boolean;
+  isLoading?: boolean;
 }>`
   padding: ${(props) => props.theme.spaces[2]}px
     ${(props) => props.theme.spaces[3]}px;
@@ -132,7 +132,8 @@ const Selected = styled.div<{
   justify-content: space-between;
   width: 100%;
   height: ${(props) => props.height};
-  cursor: pointer;
+  cursor: ${(props) =>
+    props.disabled || props.isLoading ? "not-allowed" : "pointer"};
   ${(props) =>
     props.isOpen
       ? `border: 1px solid ${
@@ -310,7 +311,7 @@ const SelectedIcon = styled(Icon)`
 const ErrorMsg = styled.span`
   ${(props) => getTypographyByKey(props, "p3")};
   color: ${Colors.POMEGRANATE2};
-  margin-top: 8px;
+  margin-top: ${(props) => props.theme.spaces[3]}px;
 `;
 
 const ErrorLabel = styled.span`
@@ -321,7 +322,7 @@ const ErrorLabel = styled.span`
 const HelperText = styled.span`
   ${(props) => getTypographyByKey(props, "p3")};
   color: ${Colors.GRAY};
-  margin-top: 8px;
+  margin-top: ${(props) => props.theme.spaces[3]}px;
 `;
 
 function DefaultDropDownValueNode({
@@ -491,12 +492,20 @@ export default function Dropdown(props: DropdownProps) {
   const disabled = props.disabled || isLoading || !!errorMsg;
   const downIconColor = errorMsg ? Colors.POMEGRANATE2 : Colors.DARK_GRAY;
 
+  const dropdownHeight = props.height ? props.height : "38px";
+
+  const onClickHandler = () => {
+    if (!props.disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
   const dropdownTrigger = props.dropdownTriggerIcon ? (
     <DropdownTriggerWrapper
       disabled={props.disabled}
-      height={props.height || "38px"}
+      height={dropdownHeight}
       isOpen={isOpen}
-      onClick={() => setIsOpen(!isOpen)}
+      onClick={onClickHandler}
     >
       {props.dropdownTriggerIcon}
     </DropdownTriggerWrapper>
@@ -507,9 +516,10 @@ export default function Dropdown(props: DropdownProps) {
         className={props.className}
         disabled={props.disabled}
         hasError={!!errorMsg}
-        height={props.height || "38px"}
+        height={dropdownHeight}
+        isLoading={isLoading}
         isOpen={isOpen}
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={onClickHandler}
       >
         <SelectedValueNode
           errorMsg={errorMsg}
@@ -540,15 +550,14 @@ export default function Dropdown(props: DropdownProps) {
     <DropdownContainer
       className={props.containerClassName}
       data-cy={props.cypressSelector}
-      height={props.height || "38px"}
       tabIndex={0}
       width={props.width || "260px"}
     >
       <Popover
         boundary="scrollParent"
         isOpen={isOpen && !disabled}
         minimal
-        onInteraction={(state) => setIsOpen(state)}
+        onInteraction={(state) => !disabled && setIsOpen(state)}
         popoverClassName={props.className}
         position={Position.BOTTOM_LEFT}
       >

app/client/src/components/ads/TextInput.tsx

@@ -41,6 +41,7 @@ export type TextInputProps = CommonComponentProps & {
   placeholder?: string;
   fill?: boolean;
   defaultValue?: string;
+  value?: string;
   validator?: (value: string) => { isValid: boolean; message: string };
   onChange?: (value: string) => void;
   readOnly?: boolean;