Add s3 support for generate CRUD

app/client/src/actions/datasourceActions.ts

@@ -199,20 +199,20 @@ export const getOAuthAccessToken = (datasourceId: string) => {
   };
 };
 
-export type executeDatasourceQuerySuccessPayload = {
+export type executeDatasourceQuerySuccessPayload<T> = {
   responseMeta: ResponseMeta;
   data: {
-    body: Array<{ id: string; name: string }>;
+    body: T;
     headers: Record<string, string[]>;
     statusCode: string;
     isExecutionSuccess: boolean;
   };
 };
 type errorPayload = unknown;
 
-export type executeDatasourceQueryReduxAction = ReduxActionWithCallbacks<
+export type executeDatasourceQueryReduxAction<T> = ReduxActionWithCallbacks<
   executeDatasourceQueryRequest,
-  executeDatasourceQuerySuccessPayload,
+  executeDatasourceQuerySuccessPayload<T>,
   errorPayload
 >;
 
@@ -222,9 +222,11 @@ export const executeDatasourceQuery = ({
   payload,
 }: {
   onErrorCallback?: (payload: errorPayload) => void;
-  onSuccessCallback?: (payload: executeDatasourceQuerySuccessPayload) => void;
+  onSuccessCallback?: (
+    payload: executeDatasourceQuerySuccessPayload<any>,
+  ) => void;
   payload: executeDatasourceQueryRequest;
-}): executeDatasourceQueryReduxAction => {
+}): executeDatasourceQueryReduxAction<any> => {
   return {
     type: ReduxActionTypes.EXECUTE_DATASOURCE_QUERY_INIT,
     payload,

app/client/src/api/DatasourcesApi.ts

@@ -25,7 +25,7 @@ export interface EmbeddedRestDatasourceRequest {
   pluginId: string;
 }
 
-type executeQueryData = Array<{ key: string; value?: string }>;
+type executeQueryData = Array<{ key?: string; value?: string }>;
 
 export interface executeDatasourceQueryRequest {
   datasourceId: string;

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

@@ -64,6 +64,7 @@ export type DropdownProps = CommonComponentProps &
     renderOption?: RenderOption;
     isLoading?: boolean;
     errorMsg?: string; // If errorMsg is defined, we show dropDown's error state with the message.
+    helperText?: string;
   };
 export interface DefaultDropDownValueNodeProps {
   selected: DropdownOption;
@@ -307,14 +308,20 @@ const SelectedIcon = styled(Icon)`
 const ErrorMsg = styled.span`
   ${(props) => getTypographyByKey(props, "p3")};
   color: ${Colors.POMEGRANATE2};
-  margin: 6px 0px 10px;
+  margin-top: 8px;
 `;
 
 const ErrorLabel = styled.span`
   ${(props) => getTypographyByKey(props, "p1")};
   color: ${Colors.POMEGRANATE2};
 `;
 
+const HelperText = styled.span`
+  ${(props) => getTypographyByKey(props, "p3")};
+  color: ${Colors.GRAY};
+  margin-top: 8px;
+`;
+
 function DefaultDropDownValueNode({
   errorMsg,
   renderNode,
@@ -450,12 +457,20 @@ export default function Dropdown(props: DropdownProps) {
     SelectedValueNode = DefaultDropDownValueNode,
     renderOption,
     errorMsg = "",
+    helperText = "",
   } = { ...props };
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selected, setSelected] = useState<DropdownOption>(props.selected);
 
+  const closeIfOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    }
+  };
+
   useEffect(() => {
     setSelected(props.selected);
+    closeIfOpen();
   }, [props.selected]);
 
   const optionClickHandler = useCallback(
@@ -469,7 +484,7 @@ export default function Dropdown(props: DropdownProps) {
   );
 
   const disabled = props.disabled || isLoading || !!errorMsg;
-  const downIconColor = errorMsg ? Colors.POMEGRANATE2 : "";
+  const downIconColor = errorMsg ? Colors.POMEGRANATE2 : Colors.DARK_GRAY;
 
   const dropdownTrigger = props.dropdownTriggerIcon ? (
     <DropdownTriggerWrapper
@@ -511,6 +526,9 @@ export default function Dropdown(props: DropdownProps) {
         )}
       </Selected>
       {errorMsg && <ErrorMsg>{errorMsg}</ErrorMsg>}
+      {helperText && !isOpen && !errorMsg && (
+        <HelperText>{helperText}</HelperText>
+      )}
     </DropdownSelect>
   );
   return (