(
DEFAULT_DROPDOWN_OPTION,
);
@@ -173,12 +230,23 @@ function GeneratePageForm() {
DEFAULT_DROPDOWN_OPTION,
);
+ const {
+ bucketList,
+ failedFetchingBucketList,
+ fetchBucketList,
+ isFetchingBucketList,
+ } = useS3BucketList();
+
const onSelectDataSource = useCallback(
(
datasource: string | undefined,
dataSourceObj: DropdownOption | undefined,
) => {
- if (datasource && dataSourceObj) {
+ if (
+ datasource &&
+ dataSourceObj &&
+ selectedDatasource.id !== dataSourceObj.id
+ ) {
const pluginId: string = dataSourceObj.data.pluginId;
const pluginPackageName: string = generateCRUDSupportedPlugin[pluginId];
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_DATASOURCE", {
@@ -189,8 +257,20 @@ function GeneratePageForm() {
setSelectedTableColumnOptions([]);
selectTable(DEFAULT_DROPDOWN_OPTION);
selectColumn(DEFAULT_DROPDOWN_OPTION);
+ setSelectedDatasourceIsInvalid(false);
if (dataSourceObj.id) {
- dispatch(fetchDatasourceStructure(dataSourceObj.id, true));
+ switch (pluginPackageName) {
+ case PLUGIN_PACKAGE_NAME.S3:
+ fetchBucketList({ selectedDatasource: dataSourceObj });
+ break;
+ case PLUGIN_PACKAGE_NAME.GOOGLE_SHEETS:
+ break;
+ default: {
+ if (dataSourceObj.id) {
+ dispatch(fetchDatasourceStructure(dataSourceObj.id, true));
+ }
+ }
+ }
}
}
},
@@ -202,6 +282,9 @@ function GeneratePageForm() {
selectTable,
selectColumn,
dispatch,
+ setSelectedDatasourceIsInvalid,
+ selectedDatasource,
+ generateCRUDSupportedPlugin,
],
);
@@ -211,35 +294,47 @@ function GeneratePageForm() {
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_TABLE");
selectTable(TableObj);
selectColumn(DEFAULT_DROPDOWN_OPTION);
- const { data } = TableObj;
- const columnIcon: IconName = "column";
- if (data.columns && Array.isArray(data.columns)) {
- const newSelectedTableColumnOptions: DropdownOption[] = [];
- data.columns.map((column) => {
- if (
- column.type &&
- ALLOWED_SEARCH_DATATYPE.includes(column.type.toLowerCase())
- ) {
- newSelectedTableColumnOptions.push({
- id: column.name,
- label: column.name,
- value: column.name,
- subText: column.type,
- icon: columnIcon,
- iconSize: IconSize.LARGE,
- iconColor: Colors.GOLD,
+ if (!isGoogleSheetPlugin && !isS3Plugin) {
+ const { data } = TableObj;
+
+ if (Array.isArray(data.columns)) {
+ if (data.columns.length === 0) setIsSelectedTableEmpty(true);
+ else {
+ if (isSelectedTableEmpty) setIsSelectedTableEmpty(false);
+ const newSelectedTableColumnOptions: DropdownOption[] = [];
+ data.columns.map((column) => {
+ if (
+ column.type &&
+ ALLOWED_SEARCH_DATATYPE.includes(column.type.toLowerCase())
+ ) {
+ newSelectedTableColumnOptions.push({
+ id: column.name,
+ label: column.name,
+ value: column.name,
+ subText: column.type,
+ icon: columnIcon,
+ iconSize: IconSize.LARGE,
+ iconColor: Colors.GOLD,
+ });
+ }
});
+ setSelectedTableColumnOptions(newSelectedTableColumnOptions);
}
- });
- if (newSelectedTableColumnOptions) {
- setSelectedTableColumnOptions(newSelectedTableColumnOptions);
+ } else {
+ setSelectedTableColumnOptions([]);
}
- } else {
- setSelectedTableColumnOptions([]);
}
}
},
- [selectTable, setSelectedTableColumnOptions, selectColumn],
+ [
+ isSelectedTableEmpty,
+ selectTable,
+ setSelectedTableColumnOptions,
+ selectColumn,
+ setIsSelectedTableEmpty,
+ isGoogleSheetPlugin,
+ isS3Plugin,
+ ],
);
const onSelectColumn = useCallback(
@@ -257,17 +352,39 @@ function GeneratePageForm() {
generateCRUDSupportedPlugin,
});
+ const spreadSheetsProps = useSpreadSheets({
+ setSelectedDatasourceTableOptions,
+ setSelectedDatasourceIsInvalid,
+ });
+
+ const sheetsListProps = useSheetsList();
+
+ const sheetColumnsHeaderProps = useSheetColumnHeaders();
+
+ useEffect(() => {
+ if (isS3Plugin && bucketList && bucketList.length) {
+ const tables = bucketList.map((bucketName) => ({
+ id: bucketName,
+ label: bucketName,
+ value: bucketName,
+ icon: datasourceIcon,
+ iconSize: IconSize.LARGE,
+ iconColor: Colors.BURNING_ORANGE,
+ }));
+ setSelectedDatasourceTableOptions(tables);
+ }
+ }, [bucketList, isS3Plugin, setSelectedDatasourceTableOptions]);
+
useEffect(() => {
if (
selectedDatasource.id &&
selectedDatasource.value &&
!isFetchingDatasourceStructure
) {
- // On finished fetching datasource structure
+ // when finished fetching datasource structure
const selectedDatasourceStructure =
datasourcesStructure[selectedDatasource.id] || {};
- const datasourceIcon: IconName = "tables";
const hasError = selectedDatasourceStructure?.error;
if (hasError) {
@@ -315,7 +432,12 @@ function GeneratePageForm() {
}
}
}
- }, [dataSourceOptions, datasourceIdToBeSelected, onSelectDataSource]);
+ }, [
+ dataSourceOptions,
+ datasourceIdToBeSelected,
+ onSelectDataSource,
+ setDatasourceIdToBeSelected,
+ ]);
useEffect(() => {
if (querySearch) {
@@ -336,7 +458,7 @@ function GeneratePageForm() {
history.replace(redirectURL);
}
}
- }, [querySearch]);
+ }, [querySearch, setDatasourceIdToBeSelected]);
const routeToCreateNewDatasource = () => {
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_CREATE_NEW_DATASOURCE");
@@ -349,22 +471,39 @@ function GeneratePageForm() {
);
};
- const handleFormSubmit = () => {
+ const generatePageAction = (data: GeneratePagePayload) => {
+ let extraParams = {};
+ if (data.pluginSpecificParams) {
+ extraParams = {
+ pluginSpecificParams: data.pluginSpecificParams,
+ };
+ }
+
+ const payload = {
+ applicationId: currentApplicationId || "",
+ pageId:
+ currentMode.current === GENERATE_PAGE_MODE.NEW
+ ? ""
+ : currentPageId || "",
+ columns: data.columns || [],
+ searchColumn: data.searchColumn,
+ tableName: data.tableName,
+ datasourceId: selectedDatasource.id || "",
+ mode: currentMode.current,
+ ...extraParams,
+ };
+
AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT");
- dispatch(
- generateTemplateToUpdatePage({
- applicationId: currentApplicationId || "",
- pageId:
- currentMode.current === GENERATE_PAGE_MODE.NEW
- ? ""
- : currentPageId || "",
- columns: [],
- searchColumn: selectedColumn.value,
- tableName: selectedTable.value || "",
- datasourceId: selectedDatasource.id || "",
- mode: currentMode.current,
- }),
- );
+ dispatch(generateTemplateToUpdatePage(payload));
+ };
+
+ const handleFormSubmit = () => {
+ const payload = {
+ columns: [],
+ searchColumn: selectedColumn.value,
+ tableName: selectedTable.value || "",
+ };
+ generatePageAction(payload);
};
const goToEditDatasource = () => {
@@ -380,13 +519,9 @@ function GeneratePageForm() {
history.push(redirectURL);
};
- const showSubmitButton = selectedTable.value;
- const submitButtonDisable = !selectedTable.value;
// if the datasource has basic information to connect to db it is considered as a valid structure hence isValid true.
const isValidDatasourceConfig = selectedDatasource.data?.isValid;
- const selectedDatasourcePluginId: string = selectedDatasource.data?.pluginId;
- const selectedDatasourcePluginPackageName: string =
- generateCRUDSupportedPlugin[selectedDatasourcePluginId];
+
const pluginField: {
TABLE: string;
COLUMN: string;
@@ -395,21 +530,50 @@ function GeneratePageForm() {
PluginFormInputFieldMap[selectedDatasourcePluginPackageName]
? PluginFormInputFieldMap[selectedDatasourcePluginPackageName]
: PluginFormInputFieldMap.DEFAULT;
- const tableLabel = pluginField.TABLE;
- const columnLabel = pluginField.COLUMN;
let tableDropdownErrorMsg = "";
- if (!isFetchingDatasourceStructure) {
+
+ const fetchingDatasourceConfigs =
+ isFetchingDatasourceStructure ||
+ (isFetchingBucketList && isS3Plugin) ||
+ ((isFetchingSheetPluginForm || spreadSheetsProps.isFetchingSpreadsheets) &&
+ isGoogleSheetPlugin);
+
+ const fetchingDatasourceConfigError =
+ selectedDatasourceIsInvalid ||
+ !isValidDatasourceConfig ||
+ (failedFetchingBucketList && isS3Plugin);
+
+ if (!fetchingDatasourceConfigs) {
if (datasourceTableOptions.length === 0) {
- tableDropdownErrorMsg = `Couldn't find any ${tableLabel}, Please select another datasource`;
+ tableDropdownErrorMsg = `Couldn't find any ${pluginField.TABLE}, Please select another datasource`;
}
- if (selectedDatasourceIsInvalid || !isValidDatasourceConfig) {
+ if (fetchingDatasourceConfigError) {
tableDropdownErrorMsg = `Failed fetching datasource structure, Please check your datasource configuration`;
}
+ if (isSelectedTableEmpty) {
+ tableDropdownErrorMsg = `Couldn't find any columns, Please select table with columns.`;
+ }
}
- const isGoogleSheetPlugin =
- selectedDatasourcePluginPackageName === PLUGIN_PACKAGE_NAME.GOOGLE_SHEETS;
+ const showEditDatasourceBtn =
+ !isFetchingDatasourceStructure &&
+ (selectedDatasourceIsInvalid || !isValidDatasourceConfig) &&
+ !!selectedDatasource.value;
+
+ const showSearchableColumn =
+ !!selectedTable.value &&
+ PLUGIN_PACKAGE_NAME.S3 !== selectedDatasourcePluginPackageName;
+
+ const showSubmitButton =
+ selectedTable.value &&
+ !showEditDatasourceBtn &&
+ !fetchingDatasourceConfigs &&
+ !fetchingDatasourceConfigError &&
+ !!selectedDatasource.value;
+
+ const submitButtonDisable =
+ !selectedTable.value || !showSubmitButton || isSelectedTableEmpty;
return (
@@ -419,7 +583,7 @@ function GeneratePageForm() {
-
+
)}
selected={selectedDatasource}
@@ -443,50 +608,68 @@ function GeneratePageForm() {
width={DROPDOWN_DIMENSION.WIDTH}
/>
+ {selectedDatasource.value ? (
+
+
+
+
+ ) : null}
+ {showEditDatasourceBtn && (
+
+ )}
{!isGoogleSheetPlugin ? (
<>
- {selectedDatasource.value ? (
-
-
-
-
- ) : null}
- {!isFetchingDatasourceStructure &&
- (selectedDatasourceIsInvalid || !isValidDatasourceConfig) &&
- selectedDatasource.value && (
-
- )}
- {selectedTable.value ? (
-
-
+ {showSearchableColumn && (
+
+
+ Select a searchable {pluginField.COLUMN} from
+ {selectedTable.label}
+
+
+
+
+
+
+
+
- ) : null}
+ )}
+
) : (
void;
+ disabled: boolean;
+ isLoading: boolean;
+ }) => (
+
+ )}
selectedDatasource={selectedDatasource}
- selectedTable={selectedTable}
- selectedTableColumnOptions={selectedTableColumnOptions}
- setSelectedDatasourceTableOptions={
- setSelectedDatasourceTableOptions
- }
- tableDropdownErrorMsg={tableDropdownErrorMsg}
- tableLabel={tableLabel}
+ selectedSpreadsheet={selectedTable}
+ sheetColumnsHeaderProps={sheetColumnsHeaderProps}
+ sheetsListProps={sheetsListProps}
+ spreadSheetsProps={spreadSheetsProps}
/>
)}
-
- {showSubmitButton ? (
-
- ) : null}
);
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx
new file mode 100644
index 000000000000..408bcdf2491d
--- /dev/null
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx
@@ -0,0 +1,375 @@
+import React, { useState, useEffect, ReactElement, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { getEditorConfig } from "selectors/entitiesSelector";
+import { AppState } from "reducers/index";
+import Dropdown, { DropdownOption } from "components/ads/Dropdown";
+import { fetchPluginFormConfig } from "actions/pluginActions";
+import { DROPDOWN_DIMENSION, DEFAULT_DROPDOWN_OPTION } from "../constants";
+import { SelectWrapper, Label, Bold } from "./styles";
+import TextInput from "components/ads/TextInput";
+import { GeneratePagePayload } from "./types";
+import { getSheetUrl } from "./hooks";
+import Tooltip from "components/ads/Tooltip";
+import styled from "styled-components";
+import {
+ UseSheetListReturn,
+ UseSpreadSheetsReturn,
+ UseSheetColumnHeadersReturn,
+} from "./hooks";
+import Icon, { IconSize } from "components/ads/Icon";
+import { Colors } from "constants/Colors";
+import { getTypographyByKey } from "constants/DefaultTheme";
+import { debounce } from "lodash";
+import Text, { TextType, FontWeight } from "components/ads/Text";
+
+type Props = {
+ googleSheetPluginId: string;
+ selectedDatasource: DropdownOption;
+ selectedSpreadsheet: DropdownOption;
+ generatePageAction: (payload: GeneratePagePayload) => void;
+ renderSubmitButton: ({
+ disabled,
+ isLoading,
+ onSubmit,
+ }: {
+ onSubmit: () => void;
+ disabled: boolean;
+ isLoading: boolean;
+ }) => ReactElement;
+ sheetsListProps: UseSheetListReturn;
+ spreadSheetsProps: UseSpreadSheetsReturn;
+ sheetColumnsHeaderProps: UseSheetColumnHeadersReturn;
+};
+
+// styles
+
+const RoundBg = styled.div`
+ width: 16px;
+ height: 16px;
+ border-radius: 16px;
+ background-color: ${Colors.GRAY};
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+const Row = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+`;
+
+const ColumnName = styled.span`
+ ${(props) => `${getTypographyByKey(props, "p3")}`};
+ color: ${Colors.GRAY};
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+
+const ColumnInfoWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 0px 8px;
+ margin-bottom: 10px;
+ width: ${DROPDOWN_DIMENSION.WIDTH};
+ overflow: hidden;
+ flex-wrap: wrap;
+`;
+
+const ColumnNameWrapper = styled.div`
+ display: flex;
+`;
+
+const TooltipWrapper = styled.div`
+ margin-top: 2px;
+`;
+
+const RowHeading = styled.p`
+ ${(props) => `${getTypographyByKey(props, "p1")}`};
+ margin-right: 10px;
+`;
+
+// As TextInput with dataType as number allows `e` as input, hence adding a number validator
+// to check for only whole numbers.
+export function isNumberValidator(value: string) {
+ const isValid = (/^\d+$/.test(value) && Number(value) > 0) || value === "";
+ return {
+ isValid: isValid,
+ message: !isValid ? "Only numeric value allowed" : "",
+ };
+}
+
+// constants
+
+const MAX_COLUMNS_VISIBLE = 3;
+
+// ---------- GoogleSheetForm Component -------
+
+function GoogleSheetForm(props: Props) {
+ const {
+ generatePageAction,
+ googleSheetPluginId,
+ renderSubmitButton,
+ selectedDatasource,
+ selectedSpreadsheet,
+ sheetColumnsHeaderProps,
+ sheetsListProps,
+ spreadSheetsProps,
+ } = props;
+
+ const { fetchSheetsList, isFetchingSheetsList, sheetsList } = sheetsListProps;
+ const { fetchAllSpreadsheets } = spreadSheetsProps;
+ const {
+ columnHeaderList,
+ fetchColumnHeaderList,
+ isFetchingColumnHeaderList,
+ } = sheetColumnsHeaderProps;
+
+ const [tableHeaderIndex, setTableHeaderIndex] = useState("1");
+ const [selectedSheet, setSelectedSheet] = useState(
+ DEFAULT_DROPDOWN_OPTION,
+ );
+ const dispatch = useDispatch();
+
+ const googleSheetEditorConfig = useSelector((state: AppState) =>
+ getEditorConfig(state, googleSheetPluginId),
+ );
+
+ const [sheetQueryRequest, setSheetQueryRequest] = useState<
+ Record
+ >({});
+
+ useEffect(() => {
+ // Check if google sheet editor config is fetched.
+ // if not, fetch it.
+
+ if (!googleSheetEditorConfig) {
+ dispatch(
+ fetchPluginFormConfig({
+ pluginId: selectedDatasource.data?.pluginId,
+ }),
+ );
+ }
+ }, [googleSheetEditorConfig]);
+
+ useEffect(() => {
+ if (googleSheetEditorConfig && googleSheetEditorConfig[0]) {
+ const requestObject: Record = {};
+ const configs = googleSheetEditorConfig[0]?.children;
+ if (Array.isArray(configs)) {
+ for (let index = 0; index < configs.length; index += 2) {
+ const keyConfig = configs[index];
+ const valueConfig = configs[index + 1];
+ if (keyConfig && valueConfig) {
+ const key = keyConfig?.initialValue;
+ const value = valueConfig?.initialValue || "";
+ if (key) requestObject[key] = value;
+ }
+ }
+ }
+ setSheetQueryRequest(requestObject);
+ }
+ }, [googleSheetEditorConfig]);
+
+ useEffect(() => {
+ // On change of datasource selection
+ // if googleSheetEditorConfig if fetched then get all spreadsheets
+ if (
+ selectedDatasource.value &&
+ selectedDatasource.id &&
+ googleSheetEditorConfig
+ ) {
+ fetchAllSpreadsheets({
+ selectedDatasourceId: selectedDatasource.id,
+ requestObject: sheetQueryRequest,
+ });
+ }
+ }, [selectedDatasource.value, googleSheetEditorConfig, dispatch]);
+
+ // When user selects a spreadsheet
+ // Fetch all sheets inside that spreadsheet
+ useEffect(() => {
+ if (
+ selectedDatasource.value &&
+ selectedDatasource.id &&
+ selectedSpreadsheet.value &&
+ selectedSpreadsheet.id
+ ) {
+ setSelectedSheet(DEFAULT_DROPDOWN_OPTION);
+ fetchSheetsList({
+ requestObject: sheetQueryRequest,
+ selectedDatasourceId: selectedDatasource.id,
+ selectedSpreadsheetId: selectedSpreadsheet.id,
+ });
+ }
+ }, [
+ selectedSpreadsheet.id,
+ selectedSpreadsheet.value,
+ selectedDatasource.id,
+ selectedDatasource.value,
+ dispatch,
+ fetchSheetsList,
+ ]);
+
+ const onSelectSheetOption = (
+ sheetValue: string | undefined,
+ sheetObj: DropdownOption | undefined,
+ ) => {
+ if (sheetValue && sheetObj) {
+ setSelectedSheet(sheetObj);
+ if (selectedDatasource.id && selectedSpreadsheet.id) {
+ fetchColumnHeaderList({
+ selectedDatasourceId: selectedDatasource.id,
+ selectedSpreadsheetId: selectedSpreadsheet.id,
+ sheetName: sheetValue,
+ tableHeaderIndex,
+ requestObject: sheetQueryRequest,
+ });
+ }
+ }
+ };
+
+ const onSubmit = () => {
+ if (selectedSpreadsheet.id) {
+ const columns: string[] = [];
+ columnHeaderList.forEach(({ value }) => {
+ if (value) columns.push(value);
+ });
+ const payload = {
+ columns,
+ searchColumn: "",
+ tableName: selectedSheet.value || "",
+ pluginSpecificParams: {
+ sheetUrl: getSheetUrl(selectedSpreadsheet.id),
+ tableHeaderIndex,
+ sheetName: selectedSheet.value,
+ },
+ };
+ generatePageAction(payload);
+ }
+ };
+
+ const debouncedFetchColumns = useCallback(
+ debounce((value: string) => {
+ if (
+ selectedDatasource.id &&
+ selectedSpreadsheet.id &&
+ selectedSheet.value
+ ) {
+ fetchColumnHeaderList({
+ selectedDatasourceId: selectedDatasource.id,
+ selectedSpreadsheetId: selectedSpreadsheet.id,
+ sheetName: selectedSheet.value,
+ tableHeaderIndex: value,
+ requestObject: sheetQueryRequest,
+ });
+ }
+ }, 200),
+ [selectedSheet, selectedDatasource, selectedSheet],
+ );
+
+ const tableHeaderIndexChangeHandler = (value: string) => {
+ if (isNumberValidator(value).isValid) {
+ setTableHeaderIndex(value);
+ debouncedFetchColumns(value);
+ }
+ };
+
+ return (
+ <>
+ {selectedSpreadsheet.value ? (
+
+
+
+
+ ) : null}
+
+ {selectedSheet.value ? (
+ <>
+
+
+ Table Header Index
+
+
+
+
+
+
+
+
+
+
+
+ {columnHeaderList.length ? (
+ <>
+
+ Column Headers fetched : {" "}
+
+ {columnHeaderList
+ .slice(0, MAX_COLUMNS_VISIBLE)
+ .map((column, index) => (
+
+ {column.label}
+ {columnHeaderList.length - 1 === index ? null : (
+ ,
+ )}
+
+ ))}
+ {columnHeaderList.length > MAX_COLUMNS_VISIBLE ? (
+
+ and +{columnHeaderList.length - MAX_COLUMNS_VISIBLE} more.
+
+ ) : (
+ ""
+ )}
+
+ ) : (
+ No columns found
+ )}
+
+
+ ) : null}
+
+ {selectedSheet.value
+ ? renderSubmitButton({
+ onSubmit,
+ disabled: !columnHeaderList.length || isFetchingColumnHeaderList,
+ isLoading: isFetchingColumnHeaderList,
+ })
+ : null}
+
+ );
+}
+
+export default GoogleSheetForm;
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts
index 0c52d6030069..e18293f467d6 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts
@@ -1,8 +1,15 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
import { DropdownOptions } from "../constants";
import { Datasource } from "entities/Datasource";
import { GenerateCRUDEnabledPluginMap } from "api/PluginApi";
import { CONNECT_NEW_DATASOURCE_OPTION_ID } from "../DataSourceOption";
+import {
+ executeDatasourceQuery,
+ executeDatasourceQuerySuccessPayload,
+} from "actions/datasourceActions";
+import { DropdownOption } from "components/ads/Dropdown";
+import { useDispatch } from "react-redux";
+import { isObject } from "lodash";
export const FAKE_DATASOURCE_OPTION = {
CONNECT_NEW_DATASOURCE_OPTION: {
@@ -59,3 +66,470 @@ export const useDatasourceOptions = ({
}, [datasources, setDataSourceOptions, generateCRUDSupportedPlugin]);
return dataSourceOptions;
};
+
+const GOOGLE_SHEET_METHODS = {
+ GET_ALL_SPREADSHEETS: "LIST", // Get all the spreadsheets
+ GET_ALL_SHEETS: "INFO", // fetch all the sub-sheets
+ GET_ALL_COLUMNS: "GET", // Get column names
+};
+
+const demoRequest: Record = {
+ method: "",
+ sheetUrl: "",
+ range: "",
+ spreadsheetName: "",
+ tableHeaderIndex: "1",
+ queryFormat: "ROWS",
+ rowLimit: "",
+ sheetName: "",
+ rowOffset: "",
+ rowObject: "",
+ rowObjects: "",
+ rowIndex: "",
+ deleteFormat: "SHEET",
+};
+
+type FetchAllSpreadSheets = {
+ selectedDatasourceId: string;
+ requestObject?: Record;
+};
+
+export type UseSpreadSheetsReturn = {
+ fetchAllSpreadsheets: ({
+ requestObject,
+ selectedDatasourceId,
+ }: FetchAllSpreadSheets) => void;
+ isFetchingSpreadsheets: boolean;
+ failedFetchingSpreadsheets: boolean;
+};
+
+export const useSpreadSheets = ({
+ setSelectedDatasourceIsInvalid,
+ setSelectedDatasourceTableOptions,
+}: {
+ setSelectedDatasourceIsInvalid: (isInvalid: boolean) => void;
+ setSelectedDatasourceTableOptions: (tableOptions: DropdownOptions) => void;
+}): UseSpreadSheetsReturn => {
+ const dispatch = useDispatch();
+
+ // const [spreadsheetsList, setSpreadsheets] = useState([]);
+
+ const [isFetchingSpreadsheets, setIsFetchingSpreadsheets] = useState(
+ false,
+ );
+ const [failedFetchingSpreadsheets, setFailedFetchingSpreadsheets] = useState<
+ boolean
+ >(false);
+
+ // TODO :- Create loading state and set Loading state false on success or error
+ const onFetchAllSpreadsheetFailure = useCallback(() => {
+ setIsFetchingSpreadsheets(false);
+ setFailedFetchingSpreadsheets(true);
+ }, [setIsFetchingSpreadsheets]);
+
+ const onFetchAllSpreadsheetSuccess = useCallback(
+ (
+ payload: executeDatasourceQuerySuccessPayload<
+ Array<{ id: string; name: string }>
+ >,
+ ) => {
+ setIsFetchingSpreadsheets(false);
+
+ const tableOptions: DropdownOptions = [];
+ if (payload.data && payload.data.body) {
+ const spreadSheets = payload.data.body;
+
+ if (Array.isArray(spreadSheets)) {
+ spreadSheets.map(({ id, name }) => {
+ tableOptions.push({
+ id,
+ label: name,
+ value: name,
+ });
+ setSelectedDatasourceTableOptions(tableOptions);
+ });
+ } else {
+ // to handle error like "401 Unauthorized"
+ setSelectedDatasourceIsInvalid(true);
+ }
+ }
+ },
+ [
+ setSelectedDatasourceIsInvalid,
+ setSelectedDatasourceTableOptions,
+ setIsFetchingSpreadsheets,
+ ],
+ );
+
+ const fetchAllSpreadsheets = useCallback(
+ ({ requestObject, selectedDatasourceId }: FetchAllSpreadSheets) => {
+ setIsFetchingSpreadsheets(true);
+ setFailedFetchingSpreadsheets(false);
+
+ let requestData = { ...demoRequest };
+ if (isObject(requestObject) && Object.keys(requestObject).length) {
+ requestData = { ...requestObject };
+ }
+ requestData.method = GOOGLE_SHEET_METHODS.GET_ALL_SPREADSHEETS;
+ const formattedRequestData = Object.entries(
+ requestData,
+ ).map(([dataKey, dataValue]) => ({ key: dataKey, value: dataValue }));
+ dispatch(
+ executeDatasourceQuery({
+ payload: {
+ datasourceId: selectedDatasourceId,
+ data: formattedRequestData,
+ },
+ onSuccessCallback: onFetchAllSpreadsheetSuccess,
+ onErrorCallback: onFetchAllSpreadsheetFailure,
+ }),
+ );
+ },
+ [
+ onFetchAllSpreadsheetSuccess,
+ onFetchAllSpreadsheetFailure,
+ setIsFetchingSpreadsheets,
+ setFailedFetchingSpreadsheets,
+ ],
+ );
+
+ return {
+ fetchAllSpreadsheets,
+ // spreadsheetsList,
+ isFetchingSpreadsheets,
+ failedFetchingSpreadsheets,
+ };
+};
+
+// Types
+
+export interface GridProperties {
+ rowCount: number;
+ columnCount: number;
+}
+
+export interface Sheet {
+ sheetId: number;
+ title: string;
+ index: number;
+ sheetType: string;
+ gridProperties: GridProperties;
+}
+
+export type Sheets = Sheet[];
+
+export const getSheetUrl = (sheetId: string): string =>
+ `https://docs.google.com/spreadsheets/d/${sheetId}/edit#gid=0`;
+
+export type FetchSheetsList = {
+ selectedDatasourceId: string;
+ selectedSpreadsheetId: string;
+ requestObject?: Record;
+};
+
+export type UseSheetListReturn = {
+ sheetsList: DropdownOption[];
+ isFetchingSheetsList: boolean;
+ failedFetchingSheetsList: boolean;
+ fetchSheetsList: ({
+ requestObject,
+ selectedDatasourceId,
+ selectedSpreadsheetId,
+ }: FetchSheetsList) => void;
+};
+
+export const useSheetsList = (): UseSheetListReturn => {
+ const dispatch = useDispatch();
+
+ const [sheetsList, setSheetsList] = useState([]);
+
+ const [isFetchingSheetsList, setIsFetchingSheetsList] = useState(
+ false,
+ );
+ const [failedFetchingSheetsList, setFailedFetchingSheetsList] = useState<
+ boolean
+ >(false);
+
+ const onFetchAllSheetFailure = useCallback(() => {
+ setIsFetchingSheetsList(false);
+ setFailedFetchingSheetsList(true);
+ }, [setIsFetchingSheetsList]);
+
+ const onFetchAllSheetSuccess = useCallback(
+ (
+ payload: executeDatasourceQuerySuccessPayload<{
+ sheets: Sheets;
+ name: string;
+ id: string;
+ }>,
+ ) => {
+ setIsFetchingSheetsList(false);
+ const sheetOptions: DropdownOptions = [];
+
+ if (payload.data && payload.data.body) {
+ const responseBody = payload.data.body;
+ if (isObject(responseBody)) {
+ const { sheets = [] } = responseBody;
+ if (Array.isArray(sheets)) {
+ sheets.map(({ title }) => {
+ sheetOptions.push({
+ id: title,
+ label: title,
+ value: title,
+ });
+ setSheetsList(sheetOptions);
+ });
+ } else {
+ // to handle error like "401 Unauthorized"
+ }
+ }
+ }
+ },
+ [setSheetsList, setIsFetchingSheetsList],
+ );
+
+ const fetchSheetsList = useCallback(
+ ({
+ requestObject,
+ selectedDatasourceId,
+ selectedSpreadsheetId,
+ }: FetchSheetsList) => {
+ setSheetsList([]);
+ setIsFetchingSheetsList(true);
+ setFailedFetchingSheetsList(false);
+
+ let requestData = { ...demoRequest };
+ if (isObject(requestObject) && Object.keys(requestObject).length) {
+ requestData = { ...requestObject };
+ }
+ requestData.method = GOOGLE_SHEET_METHODS.GET_ALL_SHEETS;
+ requestData.sheetUrl = getSheetUrl(selectedSpreadsheetId);
+ const formattedRequestData = Object.entries(
+ requestData,
+ ).map(([dataKey, dataValue]) => ({ key: dataKey, value: dataValue }));
+ dispatch(
+ executeDatasourceQuery({
+ payload: {
+ datasourceId: selectedDatasourceId,
+ data: formattedRequestData,
+ },
+ onSuccessCallback: onFetchAllSheetSuccess,
+ onErrorCallback: onFetchAllSheetFailure,
+ }),
+ );
+ },
+ [
+ setSheetsList,
+ onFetchAllSheetSuccess,
+ onFetchAllSheetFailure,
+ setIsFetchingSheetsList,
+ setFailedFetchingSheetsList,
+ ],
+ );
+
+ return {
+ sheetsList,
+ isFetchingSheetsList,
+ failedFetchingSheetsList,
+ fetchSheetsList,
+ };
+};
+
+export type FetchColumnHeaderListParams = {
+ selectedDatasourceId: string;
+ selectedSpreadsheetId: string;
+ sheetName: string;
+ tableHeaderIndex: string;
+ requestObject?: Record;
+};
+
+export type UseSheetColumnHeadersReturn = {
+ columnHeaderList: DropdownOption[];
+ isFetchingColumnHeaderList: boolean;
+ errorFetchingColumnHeaderList: string;
+ fetchColumnHeaderList: ({
+ selectedDatasourceId,
+ selectedSpreadsheetId,
+ sheetName,
+ tableHeaderIndex,
+ }: FetchColumnHeaderListParams) => void;
+};
+
+export const useSheetColumnHeaders = () => {
+ const dispatch = useDispatch();
+
+ const [columnHeaderList, setColumnHeaderList] = useState(
+ [],
+ );
+
+ const [isFetchingColumnHeaderList, setIsFetchingColumnHeaderList] = useState<
+ boolean
+ >(false);
+ const [
+ errorFetchingColumnHeaderList,
+ setErrorFetchingColumnHeaderList,
+ ] = useState("");
+
+ const onFetchColumnHeadersFailure = useCallback(
+ (error: string) => {
+ setIsFetchingColumnHeaderList(false);
+ setErrorFetchingColumnHeaderList(error);
+ },
+ [setErrorFetchingColumnHeaderList, setIsFetchingColumnHeaderList],
+ );
+
+ const onFetchColumnHeadersSuccess = useCallback(
+ (
+ payload: executeDatasourceQuerySuccessPayload[]>,
+ ) => {
+ setIsFetchingColumnHeaderList(false);
+ const columnHeaders: DropdownOptions = [];
+
+ if (payload.data && payload.data.body) {
+ const responseBody = payload.data.body;
+ if (Array.isArray(responseBody) && responseBody.length) {
+ const headersObject = responseBody[0];
+ delete headersObject.rowIndex;
+ const headers = Object.keys(headersObject);
+ if (Array.isArray(headers) && headers.length) {
+ headers.map((header, index) => {
+ columnHeaders.push({
+ id: `${header}_${index}`,
+ label: header,
+ value: header,
+ });
+ });
+ setColumnHeaderList(columnHeaders);
+ }
+ } else {
+ let error = "Failed fetching Column headers";
+ if (typeof responseBody === "string") {
+ error = responseBody;
+ }
+ setColumnHeaderList([]);
+ setErrorFetchingColumnHeaderList(error);
+ }
+ }
+ },
+ [
+ setColumnHeaderList,
+ setIsFetchingColumnHeaderList,
+ setErrorFetchingColumnHeaderList,
+ ],
+ );
+
+ const fetchColumnHeaderList = useCallback(
+ (params: FetchColumnHeaderListParams) => {
+ setIsFetchingColumnHeaderList(true);
+ setErrorFetchingColumnHeaderList("");
+
+ let requestData = { ...demoRequest };
+ if (
+ isObject(params.requestObject) &&
+ Object.keys(params.requestObject).length
+ ) {
+ requestData = { ...params.requestObject };
+ }
+ requestData.method = GOOGLE_SHEET_METHODS.GET_ALL_COLUMNS;
+ requestData.sheetUrl = getSheetUrl(params.selectedSpreadsheetId);
+ requestData.tableHeaderIndex = params.tableHeaderIndex;
+ requestData.rowLimit = "1";
+ requestData.rowOffset = "0";
+ requestData.sheetName = params.sheetName;
+
+ const formattedRequestData = Object.entries(
+ requestData,
+ ).map(([dataKey, dataValue]) => ({ key: dataKey, value: dataValue }));
+ dispatch(
+ executeDatasourceQuery({
+ payload: {
+ datasourceId: params.selectedDatasourceId,
+ data: formattedRequestData,
+ },
+ onSuccessCallback: onFetchColumnHeadersSuccess,
+ onErrorCallback: onFetchColumnHeadersFailure,
+ }),
+ );
+ },
+ [
+ onFetchColumnHeadersSuccess,
+ onFetchColumnHeadersFailure,
+ setIsFetchingColumnHeaderList,
+ setErrorFetchingColumnHeaderList,
+ ],
+ );
+
+ return {
+ columnHeaderList,
+ isFetchingColumnHeaderList,
+ errorFetchingColumnHeaderList,
+ fetchColumnHeaderList,
+ };
+};
+
+const payload = [
+ {
+ value: "LIST_BUCKETS",
+ },
+];
+
+export const useS3BucketList = () => {
+ const dispatch = useDispatch();
+
+ const [bucketList, setBucketList] = useState>([]);
+ const [isFetchingBucketList, setIsFetchingBucketList] = useState(
+ false,
+ );
+ const [failedFetchingBucketList, setFailedFetchingBucketList] = useState<
+ boolean
+ >(false);
+ const onFetchBucketSuccess = useCallback(
+ (
+ payload: executeDatasourceQuerySuccessPayload<{
+ bucketList: Array;
+ }>,
+ ) => {
+ setIsFetchingBucketList(false);
+ if (payload.data && payload.data.body) {
+ const payloadBody = payload.data.body;
+ if (Array.isArray(payloadBody.bucketList)) {
+ const { bucketList: list = [] } = payloadBody;
+ setBucketList(list);
+ }
+ }
+ },
+ [setBucketList, setIsFetchingBucketList],
+ );
+
+ const onFetchBucketFailure = useCallback(() => {
+ setIsFetchingBucketList(false);
+ setFailedFetchingBucketList(true);
+ }, [setIsFetchingBucketList]);
+
+ const fetchBucketList = useCallback(
+ ({ selectedDatasource }: { selectedDatasource: DropdownOption }) => {
+ if (selectedDatasource.id) {
+ setIsFetchingBucketList(true);
+ setFailedFetchingBucketList(false);
+ dispatch(
+ executeDatasourceQuery({
+ payload: {
+ datasourceId: selectedDatasource.id,
+ data: payload,
+ },
+ onSuccessCallback: onFetchBucketSuccess,
+ onErrorCallback: onFetchBucketFailure,
+ }),
+ );
+ }
+ },
+ [onFetchBucketSuccess, onFetchBucketFailure, setIsFetchingBucketList],
+ );
+
+ return {
+ bucketList,
+ isFetchingBucketList,
+ failedFetchingBucketList,
+ fetchBucketList,
+ };
+};
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts
new file mode 100644
index 000000000000..0cf64ae120b1
--- /dev/null
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { getTypographyByKey } from "constants/DefaultTheme";
+
+export const SelectWrapper = styled.div<{ width: string }>`
+ display: inline-block;
+ margin: 10px;
+ max-width: ${(props) => props.width};
+ width: 100%;
+`;
+
+export const Label = styled.p`
+ flex: 1;
+ ${(props) => `${getTypographyByKey(props, "p1")}`}
+`;
+
+export const Bold = styled.span`
+ font-weight: 500;
+`;
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts
new file mode 100644
index 000000000000..a57f200be93e
--- /dev/null
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts
@@ -0,0 +1,6 @@
+export type GeneratePagePayload = {
+ tableName: string;
+ columns?: string[];
+ searchColumn?: string;
+ pluginSpecificParams?: Record;
+};
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GoogleSheetForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GoogleSheetForm.tsx
deleted file mode 100644
index ba2088260cfe..000000000000
--- a/app/client/src/pages/Editor/GeneratePage/components/GoogleSheetForm.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import React, { useEffect } from "react";
-import styled from "styled-components";
-import Dropdown from "components/ads/Dropdown";
-import { getTypographyByKey } from "constants/DefaultTheme";
-import { useSelector, useDispatch } from "react-redux";
-import {
- getEditorConfig,
- getIsFetchingSinglePluginForm,
-} from "selectors/entitiesSelector";
-import { AppState } from "reducers/index";
-import { DropdownOption } from "components/ads/Dropdown";
-import { fetchPluginFormConfig } from "actions/pluginActions";
-import {
- executeDatasourceQuery,
- executeDatasourceQuerySuccessPayload,
-} from "../../../../actions/datasourceActions";
-import { DropdownOptions, DatasourceTableDropdownOption } from "./constants";
-import log from "loglevel";
-
-// const GOOGLE_SHEET_METHODS = {
-// GET_ALL_SPREADSHEETS: "LIST", // Get all the spreadsheets
-// GET_ALL_SHEETS: "INFO", // fetch all the sub-sheets
-// GET_ALL_COLUMNS: "GET", // Get column names
-// };
-
-const DEMO_LIST_DATA = [
- {
- key: "method",
- value: "LIST",
- },
- {
- key: "sheetUrl",
- },
- {
- key: "range",
- value: "",
- },
- {
- key: "spreadsheetName",
- value: "",
- },
- {
- key: "tableHeaderIndex",
- value: "1",
- },
- {
- key: "queryFormat",
- value: "ROWS",
- },
- {
- key: "rowLimit",
- value: "",
- },
- {
- key: "sheetName",
- value: "",
- },
- {
- key: "rowOffset",
- value: "",
- },
- {
- key: "rowObject",
- },
- {
- key: "rowObjects",
- },
- {
- key: "rowIndex",
- value: "",
- },
- {
- key: "deleteFormat",
- value: "SHEET",
- },
-];
-
-const DROPDOWN_DIMENSION = {
- HEIGHT: "36px",
- WIDTH: "404px",
-};
-// ---------- Styles ----------
-
-const SelectWrapper = styled.div`
- margin: 10px;
-`;
-
-const Label = styled.p`
- ${(props) => `${getTypographyByKey(props, "p1")}`}
-`;
-
-const Bold = styled.span`
- font-weight: 500;
-`;
-
-// Types
-
-type Props = {
- columnLabel: string;
- datasourceTableOptions: DropdownOptions;
- googleSheetPluginId: string;
- isFetchingDatasourceStructure: boolean;
- onSelectColumn: (
- table: string | undefined,
- ColumnObj: DropdownOption | undefined,
- ) => void;
- onSelectTable: (
- table: string | undefined,
- TableObj: DatasourceTableDropdownOption,
- ) => void;
- selectedColumn: DropdownOption;
- selectedDatasource: DropdownOption;
- selectedTable: DropdownOption;
- selectedTableColumnOptions: DropdownOptions;
- tableDropdownErrorMsg: string;
- tableLabel: string;
- setSelectedDatasourceTableOptions: React.Dispatch<
- React.SetStateAction
- >;
-};
-
-// ---------- GoogleSheetForm Component -------
-
-function GoogleSheetForm(props: Props) {
- const {
- columnLabel,
- datasourceTableOptions,
- googleSheetPluginId,
- isFetchingDatasourceStructure,
- onSelectColumn,
- onSelectTable,
- selectedColumn,
- selectedDatasource,
- selectedTable,
- selectedTableColumnOptions,
- setSelectedDatasourceTableOptions,
- tableDropdownErrorMsg,
- tableLabel,
- } = props;
-
- const dispatch = useDispatch();
-
- const googleSheetEditorConfig = useSelector((state: AppState) =>
- getEditorConfig(state, googleSheetPluginId),
- );
-
- const isFetchingSheetPluginForm = useSelector((state: AppState) =>
- getIsFetchingSinglePluginForm(state, googleSheetPluginId),
- );
-
- // TODO :- Create loading state and set Loading state false on success or error
- const onFetchAllSpreadsheetFailure = (error: any) => {
- log.error(error);
- };
-
- const onFetchAllSpreadsheetSuccess = (
- payload: executeDatasourceQuerySuccessPayload,
- ) => {
- const tableOptions: DropdownOptions = [];
- if (payload.data && payload.data.body) {
- const spreadSheets = payload.data.body;
- spreadSheets.map(({ id, name }) => {
- tableOptions.push({
- id,
- label: name,
- value: id,
- });
- setSelectedDatasourceTableOptions(tableOptions);
- });
- }
- };
-
- useEffect(() => {
- // On change of datasource selection
- // Check if google sheet editor config is fetched.
- // if NO, Check if new selected datasource is google sheet.
- // if YES => fetch google sheet editor config.
- // if YES, Get all spreadsheets
-
- if (!googleSheetEditorConfig) {
- dispatch(
- fetchPluginFormConfig({
- pluginId: selectedDatasource.data?.pluginId,
- }),
- );
- } else {
- // Get all the spreadsheets
- if (selectedDatasource.id) {
- dispatch(
- executeDatasourceQuery({
- payload: {
- datasourceId: selectedDatasource.id,
- data: DEMO_LIST_DATA,
- },
- onSuccessCallback: onFetchAllSpreadsheetSuccess,
- onErrorCallback: onFetchAllSpreadsheetFailure,
- }),
- );
- }
- }
- }, [selectedDatasource.value, googleSheetEditorConfig, dispatch]);
-
- return (
- <>
- {selectedDatasource.value ? (
-
-
-
-
- ) : null}
-
- {selectedTable.value ? (
-
-
-
-
- ) : null}
-
- );
-}
-
-export default GoogleSheetForm;
diff --git a/app/client/src/pages/Editor/GeneratePage/components/constants.ts b/app/client/src/pages/Editor/GeneratePage/components/constants.ts
index 970c19df3ffc..8a37641ee8eb 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/constants.ts
+++ b/app/client/src/pages/Editor/GeneratePage/components/constants.ts
@@ -39,3 +39,25 @@ export const PluginFormInputFieldMap: Record<
COLUMN: "column",
},
};
+
+export const DROPDOWN_DIMENSION = {
+ HEIGHT: "36px",
+ WIDTH: "404px",
+};
+
+export const DEFAULT_DROPDOWN_OPTION = {
+ id: "- Select -",
+ label: "- Select -",
+ value: "",
+ onSelect: () => null,
+ data: {},
+};
+
+export const ALLOWED_SEARCH_DATATYPE = [
+ "text",
+ "string",
+ "char",
+ "varchar",
+ "character",
+ "text string",
+];
diff --git a/app/client/src/pages/Editor/GeneratePage/index.tsx b/app/client/src/pages/Editor/GeneratePage/index.tsx
index 321904843e10..0cdf18e69084 100644
--- a/app/client/src/pages/Editor/GeneratePage/index.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/index.tsx
@@ -9,8 +9,8 @@ import Text, { TextType } from "components/ads/Text";
const Container = styled.div`
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
+ overflow-y: auto;
+ height: 100%;
`;
const HeadingContainer = styled.div`
@@ -35,6 +35,7 @@ const SubHeading = styled.p`
${(props) => getTypographyByKey(props, "p1")};
margin: 20px 0px;
color: ${Colors.BLACK};
+ text-align: center;
`;
const Back = styled.span`
diff --git a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx
index fa0e188805cd..efd6c6af996e 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx
@@ -20,7 +20,8 @@ import {
} from "test/testCommon";
import { MockCanvas } from "test/testMockedWidgets";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
-describe("Select all hotkey", () => {
+import { generateReactKey } from "utils/generators";
+describe("Canvas Hot Keys", () => {
const mockGetIsFetchingPage = jest.spyOn(utilities, "getIsFetchingPage");
const spyGetCanvasWidgetDsl = jest.spyOn(utilities, "getCanvasWidgetDsl");
@@ -50,65 +51,51 @@ describe("Select all hotkey", () => {
}));
});
- it("Cmd + A - select all widgets on canvas", async () => {
- const children: any = buildChildren([
- { type: "TABS_WIDGET" },
- { type: "SWITCH_WIDGET" },
- ]);
- const dsl: any = widgetCanvasFactory.build({
- children,
- });
- spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
- mockGetIsFetchingPage.mockImplementation(() => false);
+ describe("Select all hotkey", () => {
+ it("Cmd + A - select all widgets on canvas", async () => {
+ const children: any = buildChildren([
+ { type: "TABS_WIDGET", parentId: MAIN_CONTAINER_WIDGET_ID },
+ { type: "SWITCH_WIDGET", parentId: MAIN_CONTAINER_WIDGET_ID },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children,
+ });
+ spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
+ mockGetIsFetchingPage.mockImplementation(() => false);
- const component = render(
-
-
-
-
-
-
- ,
- { initialState: store.getState(), sagasToRun: sagasToRunForTests },
- );
- let propPane = component.queryByTestId("t--propertypane");
- expect(propPane).toBeNull();
- const canvasWidgets = component.queryAllByTestId("test-widget");
- expect(canvasWidgets.length).toBe(2);
- if (canvasWidgets[1].firstChild) {
- fireEvent.mouseOver(canvasWidgets[1].firstChild);
- fireEvent.click(canvasWidgets[1].firstChild);
- }
- propPane = component.queryByTestId("t--propertypane");
- expect(propPane).not.toBeNull();
+ const component = render(
+
+
+
+
+
+
+ ,
+ { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+ );
+ let propPane = component.queryByTestId("t--propertypane");
+ expect(propPane).toBeNull();
+ const canvasWidgets = component.queryAllByTestId("test-widget");
+ expect(canvasWidgets.length).toBe(2);
+ act(() => {
+ if (canvasWidgets[0].firstChild) {
+ fireEvent.mouseOver(canvasWidgets[0].firstChild);
+ fireEvent.click(canvasWidgets[0].firstChild);
+ }
+ });
+ const tabsWidgetName: any = component.container.querySelector(
+ `span.t--widget-name`,
+ );
+ fireEvent.click(tabsWidgetName);
+ propPane = component.queryByTestId("t--propertypane");
+ expect(propPane).not.toBeNull();
- const artBoard: any = component.queryByTestId("t--canvas-artboard");
- // deselect all other widgets
- fireEvent.click(artBoard);
+ const artBoard: any = component.queryByTestId("t--canvas-artboard");
+ // deselect all other widgets
+ fireEvent.click(artBoard);
- dispatchTestKeyboardEventWithCode(
- component.container,
- "keydown",
- "A",
- 65,
- false,
- true,
- );
- let selectedWidgets = component.queryAllByTestId("t--selected");
- expect(selectedWidgets.length).toBe(2);
- dispatchTestKeyboardEventWithCode(
- component.container,
- "keydown",
- "escape",
- 27,
- false,
- false,
- );
- selectedWidgets = component.queryAllByTestId("t--selected");
- expect(selectedWidgets.length).toBe(0);
- act(() => {
dispatchTestKeyboardEventWithCode(
component.container,
"keydown",
@@ -117,33 +104,246 @@ describe("Select all hotkey", () => {
false,
true,
);
+ let selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(2);
+ dispatchTestKeyboardEventWithCode(
+ component.container,
+ "keydown",
+ "escape",
+ 27,
+ false,
+ false,
+ );
+ selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(0);
+ act(() => {
+ dispatchTestKeyboardEventWithCode(
+ component.container,
+ "keydown",
+ "A",
+ 65,
+ false,
+ true,
+ );
+ });
+
+ selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(2);
+ act(() => {
+ dispatchTestKeyboardEventWithCode(
+ component.container,
+ "keydown",
+ "C",
+ 67,
+ false,
+ true,
+ );
+ });
+ act(() => {
+ dispatchTestKeyboardEventWithCode(
+ component.container,
+ "keydown",
+ "V",
+ 86,
+ false,
+ true,
+ );
+ });
+ selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(2);
});
+ it("Cmd + A - select all widgets inside last selected container", async () => {
+ const containerId = generateReactKey();
+ const canvasId = generateReactKey();
+ const children: any = buildChildren([
+ { type: "CHECKBOX_WIDGET", parentId: canvasId },
+ { type: "SWITCH_WIDGET", parentId: canvasId },
+ { type: "BUTTON_WIDGET", parentId: canvasId },
+ ]);
+ const canvasWidget = buildChildren([
+ {
+ type: "CANVAS_WIDGET",
+ parentId: containerId,
+ children,
+ widgetId: canvasId,
+ },
+ ]);
+ const containerChildren: any = buildChildren([
+ {
+ type: "CONTAINER_WIDGET",
+ children: canvasWidget,
+ widgetId: containerId,
+ parentId: "0",
+ },
+ { type: "CHART_WIDGET", parentId: "0" },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children: containerChildren,
+ });
+ spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
+ mockGetIsFetchingPage.mockImplementation(() => false);
+
+ const component = render(
+
+
+
+
+
+
+ ,
+ { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+ );
+ const propPane = component.queryByTestId("t--propertypane");
+ expect(propPane).toBeNull();
+ const canvasWidgets = component.queryAllByTestId("test-widget");
+ expect(canvasWidgets.length).toBe(5);
+ if (canvasWidgets[0].firstChild) {
+ fireEvent.mouseOver(canvasWidgets[0].firstChild);
+ fireEvent.click(canvasWidgets[0].firstChild);
+ }
- selectedWidgets = component.queryAllByTestId("t--selected");
- expect(selectedWidgets.length).toBe(2);
- act(() => {
dispatchTestKeyboardEventWithCode(
component.container,
"keydown",
- "C",
- 67,
+ "A",
+ 65,
false,
true,
);
+ const selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(children.length);
});
- act(() => {
+ it("Cmd + A - select all widgets inside a form", async () => {
+ const children: any = buildChildren([
+ { type: "FORM_WIDGET", parentId: MAIN_CONTAINER_WIDGET_ID },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children,
+ });
+ spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
+ mockGetIsFetchingPage.mockImplementation(() => false);
+
+ const component = render(
+
+
+
+
+
+
+ ,
+ { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+ );
+ const propPane = component.queryByTestId("t--propertypane");
+ expect(propPane).toBeNull();
+ const canvasWidgets = component.queryAllByTestId("test-widget");
+ expect(canvasWidgets.length).toBe(4);
+ if (canvasWidgets[0].firstChild) {
+ fireEvent.mouseOver(canvasWidgets[0].firstChild);
+ fireEvent.click(canvasWidgets[0].firstChild);
+ }
+
dispatchTestKeyboardEventWithCode(
component.container,
"keydown",
- "V",
- 86,
+ "A",
+ 65,
false,
true,
);
+ const selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(3);
+ });
+ it("Cmd + A - select all widgets inside a list", async () => {
+ const listId = generateReactKey();
+ const containerId = generateReactKey();
+ const canvasId = generateReactKey();
+ const listCanvasId = generateReactKey();
+ const children: any = buildChildren([
+ { type: "CHECKBOX_WIDGET", parentId: canvasId },
+ { type: "SWITCH_WIDGET", parentId: canvasId },
+ { type: "BUTTON_WIDGET", parentId: canvasId },
+ ]);
+ const canvasWidget = buildChildren([
+ {
+ type: "CANVAS_WIDGET",
+ parentId: containerId,
+ children,
+ widgetId: canvasId,
+ bottomRow: 20,
+ },
+ ]);
+ const containerChildren: any = buildChildren([
+ {
+ type: "CONTAINER_WIDGET",
+ children: canvasWidget,
+ widgetId: containerId,
+ parentId: listCanvasId,
+ dropDisabled: true,
+ bottomRow: 4,
+ },
+ ]);
+ const listCanvasChildren: any = buildChildren([
+ {
+ type: "CANVAS_WIDGET",
+ children: containerChildren,
+ widgetId: listCanvasId,
+ dropDisabled: true,
+ parentId: listId,
+ bottomRow: 20,
+ },
+ ]);
+ const listChildren: any = buildChildren([
+ {
+ type: "LIST_WIDGET",
+ children: listCanvasChildren,
+ widgetId: listId,
+ parentId: "0",
+ },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children: listChildren,
+ });
+ spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
+ mockGetIsFetchingPage.mockImplementation(() => false);
+
+ const component = render(
+
+
+
+
+
+
+ ,
+ { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+ );
+ const propPane = component.queryByTestId("t--propertypane");
+ expect(propPane).toBeNull();
+ const canvasWidgets = component.queryAllByTestId("test-widget");
+
+ if (canvasWidgets[0].firstChild) {
+ fireEvent.mouseOver(canvasWidgets[0].firstChild);
+ fireEvent.click(canvasWidgets[0].firstChild);
+ }
+
+ dispatchTestKeyboardEventWithCode(
+ component.container,
+ "keydown",
+ "A",
+ 65,
+ false,
+ true,
+ );
+ const selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(3);
});
- selectedWidgets = component.queryAllByTestId("t--selected");
- expect(selectedWidgets.length).toBe(2);
});
+
afterAll(() => jest.resetModules());
});
@@ -156,6 +356,7 @@ describe("Cut/Copy/Paste hotkey", () => {
bottomRow: 30,
leftColumn: 5,
rightColumn: 30,
+ parentId: MAIN_CONTAINER_WIDGET_ID,
},
{
type: "SWITCH_WIDGET",
@@ -163,6 +364,7 @@ describe("Cut/Copy/Paste hotkey", () => {
bottomRow: 10,
leftColumn: 40,
rightColumn: 48,
+ parentId: MAIN_CONTAINER_WIDGET_ID,
},
]);
const dsl: any = widgetCanvasFactory.build({
diff --git a/app/client/src/pages/Editor/GlobalHotKeys.tsx b/app/client/src/pages/Editor/GlobalHotKeys.tsx
index 3eda33486f5e..cd00de7dfb0e 100644
--- a/app/client/src/pages/Editor/GlobalHotKeys.tsx
+++ b/app/client/src/pages/Editor/GlobalHotKeys.tsx
@@ -9,6 +9,7 @@ import {
copyWidget,
cutWidget,
deleteSelectedWidget,
+ groupWidgets,
pasteWidget,
} from "actions/widgetActions";
import {
@@ -36,11 +37,18 @@ import {
SEARCH_CATEGORY_ID,
} from "components/editorComponents/GlobalSearch/utils";
+import { getAppMode } from "selectors/applicationSelectors";
+import { APP_MODE } from "entities/App";
+
+import { commentModeSelector } from "selectors/commentsSelectors";
+import getFeatureFlags from "utils/featureFlags";
+
type Props = {
copySelectedWidget: () => void;
pasteCopiedWidget: () => void;
deleteSelectedWidget: () => void;
cutSelectedWidget: () => void;
+ groupSelectedWidget: () => void;
toggleShowGlobalSearchModal: (category: SearchCategory) => void;
resetSnipingMode: () => void;
openDebugger: () => void;
@@ -54,6 +62,8 @@ type Props = {
selectedWidgets: string[];
isDebuggerOpen: boolean;
children: React.ReactNode;
+ appMode?: APP_MODE;
+ isCommentMode: boolean;
};
@HotkeysTarget
@@ -202,6 +212,13 @@ class GlobalHotKeys extends React.Component {
group="Canvas"
label="Deselect all Widget"
onKeyDown={(e: any) => {
+ if (this.props.isCommentMode && getFeatureFlags().COMMENT) {
+ AnalyticsUtil.logEvent("COMMENTS_TOGGLE_MODE", {
+ mode: this.props.appMode,
+ source: "HOTKEY",
+ combo: "esc",
+ });
+ }
setCommentModeInUrl(false);
this.props.resetSnipingMode();
this.props.deselectAllWidgets();
@@ -215,6 +232,12 @@ class GlobalHotKeys extends React.Component {
global
label="Edit Mode"
onKeyDown={(e: any) => {
+ if (getFeatureFlags().COMMENT && this.props.isCommentMode)
+ AnalyticsUtil.logEvent("COMMENTS_TOGGLE_MODE", {
+ mode: this.props.appMode,
+ source: "HOTKEY",
+ combo: "v",
+ });
setCommentModeInUrl(false);
this.props.resetSnipingMode();
e.preventDefault();
@@ -224,7 +247,15 @@ class GlobalHotKeys extends React.Component {
combo="c"
global
label="Comment Mode"
- onKeyDown={() => setCommentModeInUrl(true)}
+ onKeyDown={() => {
+ if (getFeatureFlags().COMMENT && !this.props.isCommentMode)
+ AnalyticsUtil.logEvent("COMMENTS_TOGGLE_MODE", {
+ mode: "COMMENT",
+ source: "HOTKEY",
+ combo: "c",
+ });
+ setCommentModeInUrl(true);
+ }}
/>
{
preventDefault
stopPropagation
/>
+ {
+ if (this.stopPropagationIfWidgetSelected(e)) {
+ this.props.groupSelectedWidget();
+ }
+ }}
+ />
);
}
@@ -248,6 +290,8 @@ const mapStateToProps = (state: AppState) => ({
selectedWidget: getSelectedWidget(state),
selectedWidgets: getSelectedWidgets(state),
isDebuggerOpen: state.ui.debugger.isOpen,
+ appMode: getAppMode(state),
+ isCommentMode: commentModeSelector(state),
});
const mapDispatchToProps = (dispatch: any) => {
@@ -256,6 +300,7 @@ const mapDispatchToProps = (dispatch: any) => {
pasteCopiedWidget: () => dispatch(pasteWidget()),
deleteSelectedWidget: () => dispatch(deleteSelectedWidget(true)),
cutSelectedWidget: () => dispatch(cutWidget()),
+ groupSelectedWidget: () => dispatch(groupWidgets()),
toggleShowGlobalSearchModal: (category: SearchCategory) =>
dispatch(toggleShowGlobalSearchModal(category)),
resetSnipingMode: () => dispatch(resetSnipingModeAction()),
diff --git a/app/client/src/pages/Editor/MainContainer.test.tsx b/app/client/src/pages/Editor/MainContainer.test.tsx
index 256547890034..21ad67a8d522 100644
--- a/app/client/src/pages/Editor/MainContainer.test.tsx
+++ b/app/client/src/pages/Editor/MainContainer.test.tsx
@@ -5,7 +5,6 @@ import {
} from "test/factories/WidgetFactoryUtils";
import { act, render, fireEvent } from "test/testUtils";
import GlobalHotKeys from "./GlobalHotKeys";
-import MainContainer from "./MainContainer";
import { MemoryRouter } from "react-router-dom";
import * as utilities from "selectors/editorSelectors";
import store from "store";
@@ -15,18 +14,14 @@ import {
MockApplication,
mockGetCanvasWidgetDsl,
syntheticTestMouseEvent,
- useMockDsl,
} from "test/testCommon";
import lodash from "lodash";
import { getAbsolutePixels } from "utils/helpers";
+import { UpdatedMainContainer } from "test/testMockedWidgets";
describe("Drag and Drop widgets into Main container", () => {
const mockGetIsFetchingPage = jest.spyOn(utilities, "getIsFetchingPage");
const spyGetCanvasWidgetDsl = jest.spyOn(utilities, "getCanvasWidgetDsl");
- function UpdatedMainContainer({ dsl }: any) {
- useMockDsl(dsl);
- return ;
- }
// These need to be at the top to avoid imports not being mocked. ideally should be in setup.ts but will override for all other tests
beforeAll(() => {
const mockGenerator = function*() {
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
index 86123937806e..a976be81cee9 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyPaneConnections.tsx
@@ -20,7 +20,7 @@ import {
doesEntityHaveErrors,
getDependenciesFromInverseDependencies,
} from "components/editorComponents/Debugger/helpers";
-import { getDebuggerErrors } from "selectors/debuggerSelectors";
+import { getFilteredErrors } from "selectors/debuggerSelectors";
import { ENTITY_TYPE, Log } from "entities/AppsmithConsole";
import { DebugButton } from "components/editorComponents/Debugger/DebugCTA";
import { showDebugger } from "actions/debuggerActions";
@@ -315,7 +315,7 @@ TriggerNode.displayName = "TriggerNode";
function PropertyPaneConnections(props: PropertyPaneConnectionsProps) {
const dependencies = useDependencyList(props.widgetName);
const { navigateToEntity } = useEntityLink();
- const debuggerErrors = useSelector(getDebuggerErrors);
+ const debuggerErrors = useSelector(getFilteredErrors);
const errorIncomingConnections = useMemo(() => {
return doConnectionsHaveErrors(
diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
index 2b3754597bf1..ce67bf637a61 100644
--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@@ -28,7 +28,7 @@ import { Variant } from "components/ads/common";
import Text, { TextType } from "components/ads/Text";
import styled from "constants/DefaultTheme";
import { TabComponent } from "components/ads/Tabs";
-import AdsIcon from "components/ads/Icon";
+import AdsIcon, { IconSize } from "components/ads/Icon";
import { Classes } from "components/ads/common";
import FormRow from "components/editorComponents/FormRow";
import EditorButton from "components/editorComponents/Button";
@@ -50,6 +50,8 @@ import {
createMessage,
DEBUGGER_ERRORS,
DEBUGGER_LOGS,
+ DOCUMENTATION,
+ DOCUMENTATION_TOOLTIP,
INSPECT_ENTITY,
} from "constants/messages";
import { useParams } from "react-router";
@@ -61,6 +63,8 @@ import { thinScrollbar } from "constants/DefaultTheme";
import ActionRightPane from "components/editorComponents/ActionRightPane";
import { SuggestedWidget } from "api/ActionAPI";
import { getActionTabsInitialIndex } from "selectors/editorSelectors";
+import { UIComponentTypes } from "../../../api/PluginApi";
+import TooltipComponent from "../../../components/ads/Tooltip";
const QueryFormContainer = styled.form`
display: flex;
@@ -144,6 +148,16 @@ const DocumentationLink = styled.a`
position: absolute;
right: 23px;
top: -6px;
+ color: black;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ span {
+ display: flex;
+ }
+ &:hover {
+ color: black;
+ }
`;
const SecondaryWrapper = styled.div`
@@ -302,13 +316,6 @@ const NoDataSourceContainer = styled.div`
}
`;
-const StyledOpenDocsIcon = styled(Icon)`
- svg {
- width: 12px;
- height: 18px;
- }
-`;
-
const TabContainerView = styled.div`
flex: 1;
overflow: auto;
@@ -359,6 +366,7 @@ type QueryFormProps = {
isRunning: boolean;
dataSources: Datasource[];
DATASOURCES_OPTIONS: any;
+ uiComponent: UIComponentTypes;
executedQueryData?: {
body: any;
isExecutionSuccess?: boolean;
@@ -380,6 +388,7 @@ type ReduxProps = {
responseType: string | undefined;
pluginId: string;
documentationLink: string | undefined;
+ formEvaluationState: Record;
};
export type EditorJSONtoFormProps = QueryFormProps & ReduxProps;
@@ -403,6 +412,7 @@ export function EditorJSONtoForm(props: Props) {
responseType,
runErrorMessage,
settingConfig,
+ uiComponent,
} = props;
let error = runErrorMessage;
let output: Record[] | null = null;
@@ -499,6 +509,73 @@ export function EditorJSONtoForm(props: Props) {
}
};
+ // Added function to handle the render of the configs
+ const renderConfig = (editorConfig: any) => {
+ // Selectively rendering form based on uiComponent prop
+ return uiComponent === UIComponentTypes.UQIDbEditorForm
+ ? editorConfig.map(renderEachConfigV2(formName))
+ : editorConfig.map(renderEachConfig(formName));
+ };
+
+ // V2 call to make rendering more flexible, used for UQI forms
+ const renderEachConfigV2 = (formName: string) => (section: any): any => {
+ return section.children.map(
+ (formControlOrSection: ControlProps, idx: number) => {
+ if (
+ !!formControlOrSection &&
+ props.hasOwnProperty("formEvaluationState") &&
+ !!props.formEvaluationState
+ ) {
+ let allowToRender = true;
+ if (
+ formControlOrSection.hasOwnProperty("configProperty") &&
+ props.formEvaluationState.hasOwnProperty(
+ formControlOrSection.configProperty,
+ )
+ ) {
+ allowToRender =
+ props?.formEvaluationState[formControlOrSection.configProperty]
+ .visible;
+ } else if (
+ formControlOrSection.hasOwnProperty("serverLabel") &&
+ !!formControlOrSection.serverLabel &&
+ props.formEvaluationState.hasOwnProperty(
+ formControlOrSection.serverLabel,
+ )
+ ) {
+ allowToRender =
+ props?.formEvaluationState[formControlOrSection.serverLabel]
+ .visible;
+ }
+
+ if (!allowToRender) return null;
+ }
+
+ // If component is type section, render it's children
+ if (
+ formControlOrSection.hasOwnProperty("controlType") &&
+ formControlOrSection.controlType === "SECTION" &&
+ formControlOrSection.hasOwnProperty("children")
+ ) {
+ return renderEachConfigV2(formName)(formControlOrSection);
+ }
+ try {
+ const { configProperty } = formControlOrSection;
+ return (
+
+
+
+ );
+ } catch (e) {
+ log.error(e);
+ }
+
+ return null;
+ },
+ );
+ };
+
+ // Recursive call to render forms pre UQI
const renderEachConfig = (formName: string) => (section: any): any => {
return section.children.map(
(formControlOrSection: ControlProps, idx: number) => {
@@ -681,8 +758,21 @@ export function EditorJSONtoForm(props: Props) {
className="t--datasource-documentation-link"
onClick={(e: React.MouseEvent) => handleDocumentationClick(e)}
>
- {"Documentation "}
-
+
+
+
+
+ {createMessage(DOCUMENTATION)}
+
+
)}
{editorConfig && editorConfig.length > 0 ? (
- editorConfig.map(renderEachConfig(formName))
+ renderConfig(editorConfig)
) : (
<>
diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx
index b3ae639728a0..d73e2820d56f 100644
--- a/app/client/src/pages/Editor/QueryEditor/Form.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/Form.tsx
@@ -10,6 +10,7 @@ import {
import { EditorJSONtoForm, EditorJSONtoFormProps } from "./EditorJSONtoForm";
import { getFormValues } from "redux-form";
import { QueryAction } from "entities/Action";
+import { getFormEvaluationState } from "selectors/formSelectors";
const valueSelector = formValueSelector(QUERY_EDITOR_FORM_NAME);
const mapStateToProps = (state: AppState) => {
@@ -21,6 +22,14 @@ const mapStateToProps = (state: AppState) => {
const documentationLinks = getPluginDocumentationLinks(state);
const formData = getFormValues(QUERY_EDITOR_FORM_NAME)(state) as QueryAction;
+ // State to manage the evaluations for the form
+ let formEvaluationState = {};
+
+ // Fetching evaluations state only once the formData is populated
+ if (!!formData) {
+ formEvaluationState = getFormEvaluationState(state)[formData.id];
+ }
+
return {
actionName,
pluginId,
@@ -29,6 +38,7 @@ const mapStateToProps = (state: AppState) => {
documentationLink: documentationLinks[pluginId],
formName: QUERY_EDITOR_FORM_NAME,
formData: formData,
+ formEvaluationState,
};
};
diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx
index 3b67e73dcb95..f26c6e35cb5c 100644
--- a/app/client/src/pages/Editor/QueryEditor/index.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/index.tsx
@@ -14,7 +14,7 @@ import { deleteAction, runActionInit } from "actions/actionActions";
import { AppState } from "reducers";
import { getIsEditorInitialized } from "selectors/editorSelectors";
import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
-import { Plugin } from "api/PluginApi";
+import { Plugin, UIComponentTypes } from "api/PluginApi";
import { Datasource } from "entities/Datasource";
import {
getPluginIdsOfPackageNames,
@@ -25,7 +25,7 @@ import {
getActionResponses,
} from "selectors/entitiesSelector";
import { PLUGIN_PACKAGE_DBS } from "constants/QueryEditorConstants";
-import { QueryAction } from "entities/Action";
+import { QueryAction, QueryActionConfig } from "entities/Action";
import Spinner from "components/editorComponents/Spinner";
import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
import { changeQuery } from "actions/queryPaneActions";
@@ -33,6 +33,12 @@ import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
import AnalyticsUtil from "utils/AnalyticsUtil";
+import {
+ initFormEvaluations,
+ startFormEvaluations,
+} from "actions/evaluationActions";
+import { getUIComponent } from "selectors/formSelectors";
+import { diff } from "deep-diff";
const EmptyStateContainer = styled.div`
display: flex;
@@ -48,6 +54,12 @@ type ReduxDispatchProps = {
runAction: (actionId: string) => void;
deleteAction: (id: string, name: string) => void;
changeQueryPage: (queryId: string) => void;
+ runFormEvaluation: (formId: string, formData: QueryActionConfig) => void;
+ initFormEvaluation: (
+ editorConfig: any,
+ settingConfig: any,
+ formId: string,
+ ) => void;
};
type ReduxStateProps = {
@@ -64,6 +76,7 @@ type ReduxStateProps = {
editorConfig: any;
settingConfig: any;
isEditorInitialized: boolean;
+ uiComponent: UIComponentTypes;
};
type StateAndRouteProps = RouteComponentProps;
@@ -71,8 +84,18 @@ type StateAndRouteProps = RouteComponentProps;
type Props = StateAndRouteProps & ReduxDispatchProps & ReduxStateProps;
class QueryEditor extends React.Component {
+ constructor(props: Props) {
+ super(props);
+ this.props.initFormEvaluation(
+ this.props.editorConfig,
+ this.props.settingConfig,
+ this.props.match.params.queryId,
+ );
+ }
+
componentDidMount() {
this.props.changeQueryPage(this.props.match.params.queryId);
+
PerformanceTracker.stopTracking(PerformanceTransactionName.OPEN_ACTION, {
actionType: "QUERY",
});
@@ -105,6 +128,24 @@ class QueryEditor extends React.Component {
if (prevProps.match.params.queryId !== this.props.match.params.queryId) {
this.props.changeQueryPage(this.props.match.params.queryId);
}
+ // If statement to debounce and track changes in the formData to update evaluations
+ if (
+ this.props.uiComponent === UIComponentTypes.UQIDbEditorForm &&
+ !!this.props.formData &&
+ (!prevProps.formData ||
+ (this.props.formData.hasOwnProperty("actionConfiguration") &&
+ !!prevProps.formData &&
+ prevProps.formData.hasOwnProperty("actionConfiguration") &&
+ !!diff(
+ prevProps.formData.actionConfiguration,
+ this.props.formData.actionConfiguration,
+ )))
+ ) {
+ this.props.runFormEvaluation(
+ this.props.formData.id,
+ this.props.formData.actionConfiguration,
+ );
+ }
}
render() {
@@ -123,6 +164,7 @@ class QueryEditor extends React.Component {
responses,
runErrorMessage,
settingConfig,
+ uiComponent,
} = this.props;
const { applicationId, pageId } = this.props.match.params;
@@ -165,6 +207,7 @@ class QueryEditor extends React.Component {
onRunClick={this.handleRunClick}
runErrorMessage={runErrorMessage[queryId]}
settingConfig={settingConfig}
+ uiComponent={uiComponent}
/>
);
}
@@ -196,9 +239,13 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
settingConfig = settingConfigs[pluginId];
}
+ const allPlugins = getPlugins(state);
+ let uiComponent = UIComponentTypes.DbEditorForm;
+ if (!!pluginId) uiComponent = getUIComponent(pluginId, allPlugins);
+
return {
pluginImages: getPluginImages(state),
- plugins: getPlugins(state),
+ plugins: allPlugins,
runErrorMessage,
pluginIds: getPluginIdsOfPackageNames(state, PLUGIN_PACKAGE_DBS),
dataSources: getDBDatasources(state),
@@ -210,6 +257,7 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
settingConfig,
isCreating: state.ui.apiPane.isCreating,
isEditorInitialized: getIsEditorInitialized(state),
+ uiComponent,
};
};
@@ -220,6 +268,16 @@ const mapDispatchToProps = (dispatch: any): ReduxDispatchProps => ({
changeQueryPage: (queryId: string) => {
dispatch(changeQuery(queryId));
},
+ runFormEvaluation: (formId: string, formData: QueryActionConfig) => {
+ dispatch(startFormEvaluations(formId, formData));
+ },
+ initFormEvaluation: (
+ editorConfig: any,
+ settingsConfig: any,
+ formId: string,
+ ) => {
+ dispatch(initFormEvaluations(editorConfig, settingsConfig, formId));
+ },
});
export default connect(mapStateToProps, mapDispatchToProps)(QueryEditor);
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
index eabd3b0751a6..e5967e905a49 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceCard.tsx
@@ -145,9 +145,8 @@ function DatasourceCard(props: DatasourceCardProps) {
text="Edit Datasource"
/>
props.onCreate(datasource)}
text="New API"
diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
index 5827a23a8be0..ae2069d69878 100644
--- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx
@@ -74,6 +74,12 @@ type DatasourceSaaSEditorProps = StateProps &
type Props = DatasourceSaaSEditorProps &
InjectedFormProps;
+enum AuthenticationStatus {
+ NONE = "NONE",
+ IN_PROGRESS = "IN_PROGRESS",
+ SUCCESS = "SUCCESS",
+}
+
const StyledButton = styled(Button)`
&&&& {
width: 180px;
@@ -91,6 +97,15 @@ const EditDatasourceButton = styled(AdsButton)`
}
`;
+const StyledAuthMessage = styled.div`
+ color: ${(props) => props.theme.colors.error};
+ margin-top: 15px;
+ &:after {
+ content: " *";
+ color: inherit;
+ }
+`;
+
class DatasourceSaaSEditor extends JSONtoForm {
componentDidMount() {
super.componentDidMount();
@@ -131,6 +146,7 @@ class DatasourceSaaSEditor extends JSONtoForm {
renderDataSourceConfigForm = (sections: any) => {
const {
+ datasource,
deleteDatasource,
isDeleting,
isSaving,
@@ -141,6 +157,10 @@ class DatasourceSaaSEditor extends JSONtoForm {
const params: string = location.search;
const viewMode = new URLSearchParams(params).get("viewMode");
+ const isAuthorized =
+ datasource?.datasourceConfiguration.authentication
+ ?.authenticationStatus === AuthenticationStatus.SUCCESS;
+
return (
);
diff --git a/app/client/src/pages/Editor/ToggleModeButton.tsx b/app/client/src/pages/Editor/ToggleModeButton.tsx
index e3b3ccf9f382..59584da15a42 100644
--- a/app/client/src/pages/Editor/ToggleModeButton.tsx
+++ b/app/client/src/pages/Editor/ToggleModeButton.tsx
@@ -47,6 +47,7 @@ import {
commentsTourStepsEditModeTypes,
commentsTourStepsPublishedModeTypes,
} from "comments/tour/commentsTourSteps";
+import AnalyticsUtil from "utils/AnalyticsUtil";
const getShowCommentsButtonToolTip = () => {
const flag = localStorage.getItem("ShowCommentsButtonToolTip");
@@ -147,6 +148,7 @@ const useUpdateCommentMode = async (currentUser?: User) => {
}
if (updatedIsCommentMode && !isCommentsIntroSeen) {
+ AnalyticsUtil.logEvent("COMMENTS_ONBOARDING_MODAL_TRIGGERED");
dispatch(showCommentsIntroCarousel());
setCommentModeInUrl(false);
} else {
@@ -369,6 +371,10 @@ function ToggleCommentModeButton({
const mode = useSelector((state: AppState) => state.entities.app.mode);
const handleSetCommentModeButton = useCallback(() => {
+ AnalyticsUtil.logEvent("COMMENTS_TOGGLE_MODE", {
+ mode: "COMMENT",
+ source: "CLICK",
+ });
setCommentModeInUrl(true);
proceedToNextTourStep();
setShowCommentButtonDiscoveryTooltipInState(false);
@@ -387,7 +393,13 @@ function ToggleCommentModeButton({
setCommentModeInUrl(false)}
+ onClick={() => {
+ AnalyticsUtil.logEvent("COMMENTS_TOGGLE_MODE", {
+ mode,
+ source: "CLICK",
+ });
+ setCommentModeInUrl(false);
+ }}
showSelectedMode={showSelectedMode}
type="fill"
>
diff --git a/app/client/src/pages/Editor/WidgetsEditor.tsx b/app/client/src/pages/Editor/WidgetsEditor.tsx
index cfb0cd6d34f9..5b86f0d97a39 100644
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@@ -14,7 +14,7 @@ import { Spinner } from "@blueprintjs/core";
import AnalyticsUtil from "utils/AnalyticsUtil";
import * as log from "loglevel";
import { getCanvasClassName } from "utils/generators";
-import { flashElementById } from "utils/helpers";
+import { flashElementsById } from "utils/helpers";
import { useParams } from "react-router";
import { fetchPage } from "actions/pageActions";
import PerformanceTracker, {
@@ -26,6 +26,7 @@ import { useDynamicAppLayout } from "utils/hooks/useDynamicAppLayout";
import Debugger from "components/editorComponents/Debugger";
import { closePropertyPane, closeTableFilterPane } from "actions/widgetActions";
import { useWidgetSelection } from "utils/hooks/useWidgetSelection";
+import { setCanvasSelectionFromEditor } from "actions/canvasSelectionActions";
import CrudInfoModal from "./GeneratePage/components/CrudInfoModal";
const EditorWrapper = styled.div`
@@ -92,7 +93,7 @@ function WidgetsEditor() {
useEffect(() => {
if (!isFetchingPage && window.location.hash.length > 0) {
const widgetIdFromURLHash = window.location.hash.substr(1);
- flashElementById(widgetIdFromURLHash);
+ flashElementsById(widgetIdFromURLHash);
if (document.getElementById(widgetIdFromURLHash))
selectWidget(widgetIdFromURLHash);
}
@@ -103,6 +104,7 @@ function WidgetsEditor() {
deselectAll && deselectAll();
dispatch(closePropertyPane());
dispatch(closeTableFilterPane());
+ dispatch(setCanvasSelectionFromEditor(false));
}, [focusWidget, deselectAll]);
const pageLoading = (
@@ -118,12 +120,26 @@ function WidgetsEditor() {
if (!isFetchingPage && widgets) {
node = ;
}
+ const onDragStart = (e: any) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const startPoints = {
+ x: e.clientX,
+ y: e.clientY,
+ };
+ dispatch(setCanvasSelectionFromEditor(true, startPoints));
+ };
log.debug("Canvas rendered");
PerformanceTracker.stopTracking();
return (
-
+
{node}
diff --git a/app/client/src/pages/Editor/WidgetsMultiSelectBox.tsx b/app/client/src/pages/Editor/WidgetsMultiSelectBox.tsx
index d939f868a816..ac3932ded37f 100644
--- a/app/client/src/pages/Editor/WidgetsMultiSelectBox.tsx
+++ b/app/client/src/pages/Editor/WidgetsMultiSelectBox.tsx
@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from "react-redux";
import {
copyWidget,
cutWidget,
+ groupWidgets,
deleteSelectedWidget,
} from "actions/widgetActions";
import { isMac } from "utils/helpers";
@@ -127,6 +128,7 @@ export const PopoverModifiers: IPopoverSharedProps["modifiers"] = {
const CopyIcon = ControlIcons.COPY2_CONTROL;
const DeleteIcon = FormIcons.DELETE_ICON;
const CutIcon = ControlIcons.CUT_CONTROL;
+const GroupIcon = ControlIcons.GROUP_CONTROL;
/**
* helper text that comes in popover on hover of actions in context menu
@@ -148,6 +150,11 @@ const deleteHelpText = (
Click or Del
);
+const groupHelpText = (
+ <>
+ Click or {modText()} + G to group
+
+);
interface OffsetBox {
top: number;
@@ -299,6 +306,20 @@ function WidgetsMultiSelectBox(props: {
dispatch(deleteSelectedWidget(true));
};
+ /**
+ * group widgets into container
+ *
+ * @param e
+ */
+ const onGroupWidgets = (
+ e: React.MouseEvent,
+ ) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ dispatch(groupWidgets());
+ };
+
if (!shouldRender) return false;
return (
@@ -371,6 +392,21 @@ function WidgetsMultiSelectBox(props: {
+ {/* group widgets */}
+
+
+
+
+
diff --git a/app/client/src/pages/Editor/gitSync/Deploy/Commit.tsx b/app/client/src/pages/Editor/gitSync/Deploy/Commit.tsx
new file mode 100644
index 000000000000..e3a5e0c204ea
--- /dev/null
+++ b/app/client/src/pages/Editor/gitSync/Deploy/Commit.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { Title, Caption } from "../components/StyledComponents";
+import {
+ DEPLOY_YOUR_APPLICATION,
+ COMMIT,
+ PUSH,
+ createMessage,
+} from "constants/messages";
+import styled from "styled-components";
+
+import NumberedStep from "components/ads/NumberedStep";
+import OptionSelector from "../components/OptionSelector";
+import { noop } from "lodash";
+import TextInput from "components/ads/TextInput";
+import Button, { Size } from "components/ads/Button";
+
+const Section = styled.div`
+ display: flex;
+ margin-bottom: ${(props) => props.theme.spaces[11]}px;
+`;
+
+const Row = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+const NumberedStepContainer = styled.div`
+ padding-top: ${(props) => `${props.theme.spaces[3] + 1}px`};
+ padding-right: ${(props) => `${props.theme.spaces[11]}px`};
+`;
+
+const Gutter = styled.div`
+ height: ${(props) => props.theme.spaces[3]}px;
+`;
+
+// mock data
+const options = [
+ { label: "Master", value: "master" },
+ { label: "Feature/new-feature", value: "Feature/new-feature" },
+];
+
+export default function Commit() {
+ return (
+ <>
+ {createMessage(DEPLOY_YOUR_APPLICATION)}
+
+
+
+
+
+
+ {createMessage(COMMIT)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {createMessage(PUSH)}
+
+
+
+
+
+
+ );
+}
diff --git a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
index 5bd008c5bfd8..f62b3158fd40 100644
--- a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx
@@ -9,6 +9,7 @@ import Menu from "./Menu";
import { MENU_ITEM, MENU_ITEMS } from "./constants";
import GitConnection from "./GitConnection";
import Deploy from "./Deploy/Deploy";
+import Merge from "./Merge";
import Icon from "components/ads/Icon";
import { Colors } from "constants/Colors";
import { Classes } from "./constants";
@@ -56,7 +57,7 @@ function NoopComponent() {
const ComponentsByTab = {
[MENU_ITEM.GIT_CONNECTION]: GitConnection,
[MENU_ITEM.DEPLOY]: Deploy,
- [MENU_ITEM.MERGE]: NoopComponent,
+ [MENU_ITEM.MERGE]: Merge,
[MENU_ITEM.SHARE_APPLICATION]: NoopComponent,
[MENU_ITEM.SETTINGS]: NoopComponent,
};
diff --git a/app/client/src/pages/Editor/gitSync/Merge.tsx b/app/client/src/pages/Editor/gitSync/Merge.tsx
new file mode 100644
index 000000000000..24b1c1b19bb1
--- /dev/null
+++ b/app/client/src/pages/Editor/gitSync/Merge.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Title, Caption, Space } from "./components/StyledComponents";
+import Dropdown from "components/ads/Dropdown";
+
+import {
+ createMessage,
+ MERGE_CHANGES,
+ SELECT_BRANCH_TO_MERGE,
+} from "constants/messages";
+import { ReactComponent as MergeIcon } from "assets/icons/ads/git-merge.svg";
+import { ReactComponent as LeftArrow } from "assets/icons/ads/arrow-left-1.svg";
+
+import styled from "styled-components";
+import * as log from "loglevel";
+import Button, { Size } from "components/ads/Button";
+
+const Row = styled.div`
+ display: flex;
+ align-items: center;
+`;
+
+// mock data
+const options = [
+ { label: "Master", value: "master" },
+ {
+ label: "Feature/new",
+ value: "Feature/new",
+ },
+];
+
+export default function Merge() {
+ return (
+ <>
+ {createMessage(MERGE_CHANGES)}
+ {createMessage(SELECT_BRANCH_TO_MERGE)}
+
+
+
+
+ {
+ log.debug("selected");
+ }}
+ options={options}
+ selected={{ label: "Master", value: "master" }}
+ showLabelOnly
+ width={"220px"}
+ />
+
+
+
+ {
+ log.debug("selected");
+ }}
+ options={options}
+ selected={{
+ label: "Feature/new-feature",
+ value: "Feature/new-feature",
+ }}
+ showLabelOnly
+ width={"220px"}
+ />
+
+
+
+
+ );
+}
diff --git a/app/client/src/pages/Editor/gitSync/components/StyledComponents.tsx b/app/client/src/pages/Editor/gitSync/components/StyledComponents.tsx
index 1fd7d209aef8..b9acb2faa428 100644
--- a/app/client/src/pages/Editor/gitSync/components/StyledComponents.tsx
+++ b/app/client/src/pages/Editor/gitSync/components/StyledComponents.tsx
@@ -9,6 +9,10 @@ export const Subtitle = styled.p`
${(props) => getTypographyByKey(props, "p3")};
`;
+export const Caption = styled.span`
+ ${(props) => getTypographyByKey(props, "h6")};
+`;
+
export const Space = styled.div<{ size: number; horizontal?: boolean }>`
margin: ${(props) =>
props.horizontal
diff --git a/app/client/src/pages/common/CanvasSelectionArena.test.tsx b/app/client/src/pages/common/CanvasSelectionArena.test.tsx
index 9bc3a61934a5..accae7526ce4 100644
--- a/app/client/src/pages/common/CanvasSelectionArena.test.tsx
+++ b/app/client/src/pages/common/CanvasSelectionArena.test.tsx
@@ -1,12 +1,24 @@
-import { fireEvent, render } from "test/testUtils";
+import { act, fireEvent, render } from "test/testUtils";
import Canvas from "pages/Editor/Canvas";
import React from "react";
import {
buildChildren,
widgetCanvasFactory,
} from "test/factories/WidgetFactoryUtils";
-import { MockPageDSL, syntheticTestMouseEvent } from "test/testCommon";
+import {
+ MockApplication,
+ mockGetCanvasWidgetDsl,
+ MockPageDSL,
+ syntheticTestMouseEvent,
+} from "test/testCommon";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
+import { generateReactKey } from "utils/generators";
+import store from "store";
+import { sagasToRunForTests } from "test/sagas";
+import GlobalHotKeys from "pages/Editor/GlobalHotKeys";
+import { UpdatedMainContainer } from "test/testMockedWidgets";
+import { MemoryRouter } from "react-router-dom";
+import * as utilities from "selectors/editorSelectors";
describe("Canvas selection test cases", () => {
it("Should select using canvas draw", () => {
@@ -124,4 +136,245 @@ describe("Canvas selection test cases", () => {
const selectedWidgets = component.queryAllByTestId("t--selected");
expect(selectedWidgets.length).toBe(2);
});
+
+ it("Should allow draw to select using cmd + draw in Container component", () => {
+ const containerId = generateReactKey();
+ const canvasId = generateReactKey();
+ const children: any = buildChildren([
+ { type: "CHECKBOX_WIDGET", parentId: canvasId },
+ { type: "SWITCH_WIDGET", parentId: canvasId },
+ { type: "BUTTON_WIDGET", parentId: canvasId },
+ ]);
+ const canvasWidget = buildChildren([
+ {
+ type: "CANVAS_WIDGET",
+ parentId: containerId,
+ children,
+ widgetId: canvasId,
+ },
+ ]);
+ const containerChildren: any = buildChildren([
+ {
+ type: "CONTAINER_WIDGET",
+ children: canvasWidget,
+ widgetId: containerId,
+ parentId: "0",
+ },
+ { type: "CHART_WIDGET", parentId: "0" },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children: containerChildren,
+ });
+
+ const component = render(
+
+
+ ,
+ );
+ let selectionCanvas: any = component.queryByTestId(`canvas-${canvasId}`);
+ expect(selectionCanvas.style.zIndex).toBe("");
+ fireEvent.mouseDown(selectionCanvas);
+ // should not allow draw when cmd/ctrl is not pressed
+ selectionCanvas = component.queryByTestId(`canvas-${canvasId}`);
+ expect(selectionCanvas.style.zIndex).toBe("");
+ fireEvent.mouseDown(selectionCanvas, {
+ metaKey: true,
+ });
+
+ selectionCanvas = component.queryByTestId(`canvas-${canvasId}`);
+
+ expect(selectionCanvas.style.zIndex).toBe("2");
+ fireEvent.mouseUp(selectionCanvas);
+ selectionCanvas = component.queryByTestId(`canvas-${canvasId}`);
+
+ expect(selectionCanvas.style.zIndex).toBe("");
+ });
+
+ it("Should select all elements inside a CONTAINER using draw on canvas from top to bottom", () => {
+ const containerId = generateReactKey();
+ const canvasId = generateReactKey();
+ const children: any = buildChildren([
+ {
+ type: "CHECKBOX_WIDGET",
+ parentColumnSpace: 10,
+ parentRowSpace: 10,
+ parentId: canvasId,
+ },
+ {
+ type: "BUTTON_WIDGET",
+ parentColumnSpace: 10,
+ parentRowSpace: 10,
+ parentId: canvasId,
+ },
+ ]);
+ const canvasWidget = buildChildren([
+ {
+ type: "CANVAS_WIDGET",
+ parentId: containerId,
+ bottomRow: 20,
+ rightColumn: 20,
+ children,
+ widgetId: canvasId,
+ },
+ ]);
+ const containerChildren: any = buildChildren([
+ {
+ type: "CONTAINER_WIDGET",
+ children: canvasWidget,
+ widgetId: containerId,
+ parentColumnSpace: 10,
+ parentRowSpace: 10,
+ bottomRow: 20,
+ rightColumn: 20,
+ parentId: "0",
+ },
+ { type: "CHART_WIDGET", parentId: "0" },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children: containerChildren,
+ });
+ const component = render(
+
+
+ ,
+ );
+ const selectionCanvas: any = component.queryByTestId(`canvas-${canvasId}`);
+ fireEvent(
+ selectionCanvas,
+ syntheticTestMouseEvent(
+ new MouseEvent("mousedown", {
+ metaKey: true,
+ bubbles: true,
+ cancelable: true,
+ }),
+ {
+ offsetX: 10,
+ offsetY: 10,
+ },
+ ),
+ );
+ fireEvent(
+ selectionCanvas,
+ syntheticTestMouseEvent(
+ new MouseEvent("mousemove", {
+ metaKey: true,
+ bubbles: true,
+ cancelable: true,
+ }),
+ {
+ offsetX: 800,
+ offsetY: 800,
+ },
+ ),
+ );
+
+ fireEvent(
+ selectionCanvas,
+ syntheticTestMouseEvent(
+ new MouseEvent("mouseup", {
+ metaKey: true,
+ bubbles: true,
+ cancelable: true,
+ }),
+ {
+ offsetX: 800,
+ offsetY: 800,
+ },
+ ),
+ );
+ const selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(children.length);
+ });
+
+ it("Draw to select from outside of canvas(editor) ", () => {
+ const mockGetIsFetchingPage = jest.spyOn(utilities, "getIsFetchingPage");
+ const spyGetCanvasWidgetDsl = jest.spyOn(utilities, "getCanvasWidgetDsl");
+ const children: any = buildChildren([
+ {
+ type: "TABS_WIDGET",
+ topRow: 1,
+ bottomRow: 3,
+ leftColumn: 1,
+ rightColumn: 3,
+ },
+ {
+ type: "SWITCH_WIDGET",
+ topRow: 1,
+ bottomRow: 2,
+ leftColumn: 5,
+ rightColumn: 13,
+ },
+ ]);
+ const dsl: any = widgetCanvasFactory.build({
+ children,
+ });
+ spyGetCanvasWidgetDsl.mockImplementation(mockGetCanvasWidgetDsl);
+ mockGetIsFetchingPage.mockImplementation(() => false);
+
+ const component = render(
+
+
+
+
+
+
+ ,
+ { initialState: store.getState(), sagasToRun: sagasToRunForTests },
+ );
+ const widgetEditor: any = component.queryByTestId("widgets-editor");
+ let selectionCanvas: any = component.queryByTestId(
+ `canvas-${MAIN_CONTAINER_WIDGET_ID}`,
+ );
+ expect(selectionCanvas.style.zIndex).toBe("");
+ act(() => {
+ fireEvent.dragStart(widgetEditor);
+ });
+
+ selectionCanvas = component.queryByTestId(
+ `canvas-${MAIN_CONTAINER_WIDGET_ID}`,
+ );
+
+ expect(selectionCanvas.style.zIndex).toBe("2");
+ fireEvent.mouseEnter(selectionCanvas);
+ fireEvent.mouseUp(selectionCanvas);
+ selectionCanvas = component.queryByTestId(
+ `canvas-${MAIN_CONTAINER_WIDGET_ID}`,
+ );
+
+ expect(selectionCanvas.style.zIndex).toBe("");
+ act(() => {
+ fireEvent.dragStart(widgetEditor);
+ });
+ fireEvent(
+ selectionCanvas,
+ syntheticTestMouseEvent(
+ new MouseEvent("mousemove", {
+ bubbles: true,
+ cancelable: true,
+ }),
+ {
+ offsetX: dsl.rightColumn * 4,
+ offsetY: dsl.bottomRow * 4,
+ },
+ ),
+ );
+
+ fireEvent(
+ selectionCanvas,
+ syntheticTestMouseEvent(
+ new MouseEvent("mouseup", {
+ bubbles: true,
+ cancelable: true,
+ }),
+ {
+ offsetX: dsl.rightColumn * 4,
+ offsetY: dsl.bottomRow * 4,
+ },
+ ),
+ );
+ const selectedWidgets = component.queryAllByTestId("t--selected");
+ expect(selectedWidgets.length).toBe(2);
+ });
});
diff --git a/app/client/src/pages/common/CanvasSelectionArena.tsx b/app/client/src/pages/common/CanvasSelectionArena.tsx
index 7fa600026377..ba5779ade1d6 100644
--- a/app/client/src/pages/common/CanvasSelectionArena.tsx
+++ b/app/client/src/pages/common/CanvasSelectionArena.tsx
@@ -3,7 +3,7 @@ import {
setCanvasSelectionStateAction,
} from "actions/canvasSelectionActions";
import { throttle } from "lodash";
-import React, { useEffect, useCallback } from "react";
+import React, { useEffect, useCallback, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppState } from "reducers";
import { APP_MODE } from "entities/App";
@@ -17,6 +17,8 @@ import styled from "styled-components";
import { getNearestParentCanvas } from "utils/generators";
import { useCanvasDragToScroll } from "utils/hooks/useCanvasDragToScroll";
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
+import { XYCord } from "utils/hooks/useCanvasDragging";
+import { theme } from "constants/DefaultTheme";
const StyledSelectionCanvas = styled.canvas`
position: absolute;
@@ -66,6 +68,9 @@ export function CanvasSelectionArena({
const isDragging = useSelector(
(state: AppState) => state.ui.widgetDragResize.isDragging,
);
+ const isResizing = useSelector(
+ (state: AppState) => state.ui.widgetDragResize.isResizing,
+ );
const mainContainer = useSelector((state: AppState) =>
getWidget(state, widgetId),
);
@@ -98,7 +103,7 @@ export function CanvasSelectionArena({
trailing: true,
},
),
- [widgetId],
+ [widgetId, snapColumnSpace, snapRowSpace],
);
const isDraggingForSelection = useSelector((state: AppState) => {
return state.ui.canvasSelection.isDraggingForSelection;
@@ -106,6 +111,38 @@ export function CanvasSelectionArena({
const isCurrentWidgetDrawing = useSelector((state: AppState) => {
return state.ui.canvasSelection.widgetId === widgetId;
});
+ const outOfCanvasStartPositions = useSelector((state: AppState) => {
+ return state.ui.canvasSelection.outOfCanvasStartPositions;
+ });
+ const defaultDrawOnObj = {
+ canDraw: false,
+ startPoints: undefined,
+ };
+ const drawOnEnterObj = useRef<{
+ canDraw: boolean;
+ startPoints?: XYCord;
+ }>(defaultDrawOnObj);
+
+ // start main container selection from widget editor
+ useEffect(() => {
+ const canDrawOnEnter =
+ isDraggingForSelection &&
+ isCurrentWidgetDrawing &&
+ !!outOfCanvasStartPositions;
+
+ drawOnEnterObj.current = {
+ canDraw: canDrawOnEnter,
+ startPoints: canDrawOnEnter ? outOfCanvasStartPositions : undefined,
+ };
+ if (canvasRef.current && canDrawOnEnter) {
+ canvasRef.current.style.zIndex = "2";
+ }
+ }, [
+ isDraggingForSelection,
+ isCurrentWidgetDrawing,
+ outOfCanvasStartPositions,
+ ]);
+
useCanvasDragToScroll(
canvasRef,
isCurrentWidgetDrawing,
@@ -119,12 +156,12 @@ export function CanvasSelectionArena({
// as of today (Pixels rendered by canvas) ∝ (Application height) so as height increases will run into to dead renders.
// https://on690.codesandbox.io/ to check the number of pixels limit supported for a canvas
// const { devicePixelRatio: scale = 1 } = window;
+
const scale = 1;
const scrollParent: Element | null = getNearestParentCanvas(
canvasRef.current,
);
const scrollObj: any = {};
-
let canvasCtx: any = canvasRef.current.getContext("2d");
const initRectangle = (): SelectedArenaDimensions => ({
top: 0,
@@ -136,26 +173,6 @@ export function CanvasSelectionArena({
let isMultiSelect = false;
let isDragging = false;
- const init = () => {
- if (canvasRef.current) {
- const { height, width } = canvasRef.current.getBoundingClientRect();
- if (height && width) {
- canvasRef.current.width = width * scale;
- canvasRef.current.height =
- (snapRows * snapRowSpace + (widgetId === "0" ? 200 : 0)) * scale;
- }
- canvasCtx = canvasRef.current.getContext("2d");
- canvasCtx.scale(scale, scale);
- canvasRef.current.addEventListener("click", onClick, false);
- canvasRef.current.addEventListener("mousedown", onMouseDown, false);
- canvasRef.current.addEventListener("mouseup", onMouseUp, false);
- canvasRef.current.addEventListener("mousemove", onMouseMove, false);
- canvasRef.current.addEventListener("mouseleave", onMouseLeave, false);
- canvasRef.current.addEventListener("mouseenter", onMouseEnter, false);
- scrollParent?.addEventListener("scroll", onScroll, false);
- }
- };
-
const getSelectionDimensions = () => {
return {
top:
@@ -212,13 +229,24 @@ export function CanvasSelectionArena({
};
const onMouseLeave = () => {
- document.body.addEventListener("mouseup", onMouseUp, false);
- document.body.addEventListener("click", onClick, false);
+ if (widgetId === MAIN_CONTAINER_WIDGET_ID) {
+ document.body.addEventListener("mouseup", onMouseUp, false);
+ document.body.addEventListener("click", onClick, false);
+ }
};
- const onMouseEnter = () => {
- document.body.removeEventListener("mouseup", onMouseUp);
- document.body.removeEventListener("click", onClick);
+ const onMouseEnter = (e: any) => {
+ if (
+ canvasRef.current &&
+ !isDragging &&
+ drawOnEnterObj?.current.canDraw
+ ) {
+ firstRender(e, true);
+ drawOnEnterObj.current = defaultDrawOnObj;
+ } else if (widgetId === MAIN_CONTAINER_WIDGET_ID) {
+ document.body.removeEventListener("mouseup", onMouseUp);
+ document.body.removeEventListener("click", onClick);
+ }
};
const onClick = (e: any) => {
@@ -235,22 +263,73 @@ export function CanvasSelectionArena({
}
};
- const onMouseDown = (e: any) => {
- if (
- canvasRef.current &&
- (!isDraggableParent || e.ctrlKey || e.metaKey)
- ) {
+ const startPositionsForOutCanvasSelection = () => {
+ const startPoints = drawOnEnterObj.current.startPoints;
+ const startPositions = {
+ top: 0,
+ left: 0,
+ };
+ if (canvasRef.current && startPoints) {
+ const {
+ height,
+ left,
+ top,
+ width,
+ } = canvasRef.current.getBoundingClientRect();
+ const outOfMaxBounds = {
+ x: startPoints.x < left + width,
+ y: startPoints.y < top + height,
+ };
+ const outOfMinBounds = {
+ x: startPoints.x > left,
+ y: startPoints.y > top,
+ };
+ const xInRange = outOfMaxBounds.x && outOfMinBounds.x;
+ const yInRange = outOfMaxBounds.y && outOfMinBounds.y;
+ const bufferFromBoundary = 2;
+ startPositions.left = xInRange
+ ? startPoints.x - left
+ : outOfMinBounds.x
+ ? width - bufferFromBoundary
+ : bufferFromBoundary;
+ startPositions.top = yInRange
+ ? startPoints.y - top
+ : outOfMinBounds.y
+ ? height - bufferFromBoundary
+ : bufferFromBoundary;
+ }
+ return startPositions;
+ };
+
+ const firstRender = (e: any, fromOuterCanvas = false) => {
+ if (canvasRef.current && !isDragging) {
isMultiSelect = e.ctrlKey || e.metaKey || e.shiftKey;
- selectionRectangle.left = e.offsetX - canvasRef.current.offsetLeft;
- selectionRectangle.top = e.offsetY - canvasRef.current.offsetTop;
+ if (fromOuterCanvas) {
+ const { left, top } = startPositionsForOutCanvasSelection();
+ selectionRectangle.left = left;
+ selectionRectangle.top = top;
+ } else {
+ selectionRectangle.left = e.offsetX - canvasRef.current.offsetLeft;
+ selectionRectangle.top = e.offsetY - canvasRef.current.offsetTop;
+ }
selectionRectangle.width = 0;
selectionRectangle.height = 0;
+
isDragging = true;
- dispatch(setCanvasSelectionStateAction(true, widgetId));
// bring the canvas to the top layer
canvasRef.current.style.zIndex = "2";
}
};
+
+ const onMouseDown = (e: any) => {
+ if (
+ canvasRef.current &&
+ (!isDraggableParent || e.ctrlKey || e.metaKey)
+ ) {
+ dispatch(setCanvasSelectionStateAction(true, widgetId));
+ firstRender(e);
+ }
+ };
const onMouseUp = () => {
if (isDragging && canvasRef.current) {
isDragging = false;
@@ -306,10 +385,17 @@ export function CanvasSelectionArena({
});
}
};
- if (appMode === APP_MODE.EDIT) {
- init();
- }
- return () => {
+
+ const addEventListeners = () => {
+ canvasRef.current?.addEventListener("click", onClick, false);
+ canvasRef.current?.addEventListener("mousedown", onMouseDown, false);
+ canvasRef.current?.addEventListener("mouseup", onMouseUp, false);
+ canvasRef.current?.addEventListener("mousemove", onMouseMove, false);
+ canvasRef.current?.addEventListener("mouseleave", onMouseLeave, false);
+ canvasRef.current?.addEventListener("mouseenter", onMouseEnter, false);
+ scrollParent?.addEventListener("scroll", onScroll, false);
+ };
+ const removeEventListeners = () => {
canvasRef.current?.removeEventListener("mousedown", onMouseDown);
canvasRef.current?.removeEventListener("mouseup", onMouseUp);
canvasRef.current?.removeEventListener("mousemove", onMouseMove);
@@ -317,10 +403,42 @@ export function CanvasSelectionArena({
canvasRef.current?.removeEventListener("mouseenter", onMouseEnter);
canvasRef.current?.removeEventListener("click", onClick);
};
+ const init = () => {
+ if (canvasRef.current) {
+ const { height, width } = canvasRef.current.getBoundingClientRect();
+ if (height && width) {
+ canvasRef.current.width = width * scale;
+ canvasRef.current.height =
+ (snapRows * snapRowSpace +
+ (widgetId === MAIN_CONTAINER_WIDGET_ID
+ ? theme.canvasBottomPadding
+ : 0)) *
+ scale;
+ }
+ canvasCtx = canvasRef.current.getContext("2d");
+ canvasCtx.scale(scale, scale);
+ removeEventListeners();
+ addEventListeners();
+ }
+ };
+ if (appMode === APP_MODE.EDIT) {
+ init();
+ }
+ return () => {
+ removeEventListeners();
+ };
}
- }, [appLayout, currentPageId, mainContainer, isDragging, snapRows]);
+ }, [
+ appLayout,
+ currentPageId,
+ mainContainer,
+ isDragging,
+ snapRows,
+ snapColumnSpace,
+ snapRowSpace,
+ ]);
- return appMode === APP_MODE.EDIT && !isDragging ? (
+ return appMode === APP_MODE.EDIT && !(isDragging || isResizing) ? (
=
+ | (WidgetProps & {
+ children?: string[];
+ })
+ | orType;
const canvasWidgetsReducer = createImmerReducer(initialState, {
[ReduxActionTypes.INIT_CANVAS_LAYOUT]: (
diff --git a/app/client/src/reducers/entityReducers/datasourceReducer.ts b/app/client/src/reducers/entityReducers/datasourceReducer.ts
index 02b4272b0db9..95eec94f2d6c 100644
--- a/app/client/src/reducers/entityReducers/datasourceReducer.ts
+++ b/app/client/src/reducers/entityReducers/datasourceReducer.ts
@@ -20,6 +20,7 @@ export interface DatasourceDataState {
structure: Record;
isFetchingMockDataSource: false;
mockDatasourceList: any[];
+ executingDatasourceQuery: boolean;
}
const initialState: DatasourceDataState = {
@@ -32,6 +33,7 @@ const initialState: DatasourceDataState = {
structure: {},
isFetchingMockDataSource: false,
mockDatasourceList: [],
+ executingDatasourceQuery: false,
};
const datasourceReducer = createReducer(initialState, {
@@ -97,6 +99,16 @@ const datasourceReducer = createReducer(initialState, {
) => {
return { ...state, isRefreshingStructure: true };
},
+ [ReduxActionTypes.EXECUTE_DATASOURCE_QUERY_INIT]: (
+ state: DatasourceDataState,
+ ) => {
+ return { ...state, executingDatasourceQuery: true };
+ },
+ [ReduxActionTypes.EXECUTE_DATASOURCE_QUERY_SUCCESS]: (
+ state: DatasourceDataState,
+ ) => {
+ return { ...state, executingDatasourceQuery: false };
+ },
[ReduxActionTypes.FETCH_DATASOURCE_STRUCTURE_INIT]: (
state: DatasourceDataState,
) => {
@@ -279,6 +291,14 @@ const datasourceReducer = createReducer(initialState, {
isRefreshingStructure: false,
};
},
+ [ReduxActionErrorTypes.EXECUTE_DATASOURCE_QUERY_ERROR]: (
+ state: DatasourceDataState,
+ ) => {
+ return {
+ ...state,
+ executingDatasourceQuery: false,
+ };
+ },
});
export default datasourceReducer;
diff --git a/app/client/src/reducers/entityReducers/pageListReducer.tsx b/app/client/src/reducers/entityReducers/pageListReducer.tsx
index 3e6111a973a8..56cb03e15b84 100644
--- a/app/client/src/reducers/entityReducers/pageListReducer.tsx
+++ b/app/client/src/reducers/entityReducers/pageListReducer.tsx
@@ -7,6 +7,7 @@ import {
ReduxActionErrorTypes,
} from "constants/ReduxActionConstants";
import { createReducer } from "utils/AppsmithUtils";
+import { GenerateCRUDSuccess } from "actions/pageActions";
const initialState: PageListReduxState = {
pages: [],
@@ -114,27 +115,24 @@ export const pageListReducer = createReducer(initialState, {
},
[ReduxActionTypes.GENERATE_TEMPLATE_PAGE_SUCCESS]: (
state: PageListReduxState,
- action: ReduxAction<{
- pageName: string;
- pageId: string;
- layoutId: string;
- isDefault: boolean;
- isNewPage: boolean;
- }>,
+ action: ReduxAction,
) => {
const _state = state;
if (action.payload.isNewPage) {
_state.pages = state.pages.map((page) => ({ ...page, latest: false }));
const newPage = {
- pageName: action.payload.pageName,
- pageId: action.payload.pageId,
- layoutId: action.payload.layoutId,
- isDefault: action.payload.isDefault,
+ pageName: action.payload.page.name,
+ pageId: action.payload.page.id,
+ layoutId: action.payload.page.layouts[0].id,
+ isDefault: !!action.payload.page.isDefault,
};
_state.pages.push({ ...newPage, latest: true });
}
- return { ..._state, isGeneratingTemplatePage: false };
+ return {
+ ..._state,
+ isGeneratingTemplatePage: false,
+ };
},
[ReduxActionErrorTypes.GENERATE_TEMPLATE_PAGE_ERROR]: (
state: PageListReduxState,
diff --git a/app/client/src/reducers/entityReducers/pluginsReducer.ts b/app/client/src/reducers/entityReducers/pluginsReducer.ts
index dbbacabd47a9..724e106762a5 100644
--- a/app/client/src/reducers/entityReducers/pluginsReducer.ts
+++ b/app/client/src/reducers/entityReducers/pluginsReducer.ts
@@ -10,15 +10,19 @@ import {
PluginFormsPayload,
GetPluginFormConfigRequest,
} from "actions/pluginActions";
-import { DependencyMap } from "utils/DynamicBindingUtils";
+import {
+ FormEditorConfigs,
+ FormSettingsConfigs,
+ FormDependencyConfigs,
+} from "utils/DynamicBindingUtils";
export interface PluginDataState {
list: Plugin[];
loading: boolean;
formConfigs: Record;
- editorConfigs: Record;
- settingConfigs: Record;
- dependencies: Record;
+ editorConfigs: FormEditorConfigs;
+ settingConfigs: FormSettingsConfigs;
+ dependencies: FormDependencyConfigs;
fetchingSinglePluginForm: Record;
}
diff --git a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
index dbe9bff5d8b3..5359f2d6655d 100644
--- a/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
+++ b/app/client/src/reducers/entityReducers/widgetConfigReducer.tsx
@@ -15,6 +15,8 @@ import { DropdownWidgetProps } from "widgets/DropdownWidget";
import { CheckboxWidgetProps } from "widgets/CheckboxWidget";
import { RadioGroupWidgetProps } from "widgets/RadioGroupWidget";
import { FilePickerWidgetProps } from "widgets/FilepickerWidget";
+import { FilePickerWidgetV2Props } from "widgets/FilepickerWidgetV2";
+
import {
TabsWidgetProps,
TabContainerWidgetProps,
@@ -76,6 +78,7 @@ export interface WidgetConfigReducerState {
SWITCH_WIDGET: Partial & WidgetConfigProps;
RADIO_GROUP_WIDGET: Partial & WidgetConfigProps;
FILE_PICKER_WIDGET: Partial & WidgetConfigProps;
+ FILE_PICKER_WIDGET_V2: Partial & WidgetConfigProps;
TABS_WIDGET: Partial> &
WidgetConfigProps;
TABS_MIGRATOR_WIDGET: Partial> &
diff --git a/app/client/src/reducers/evaluationReducers/formEvaluationReducer.ts b/app/client/src/reducers/evaluationReducers/formEvaluationReducer.ts
new file mode 100644
index 000000000000..40f4f58631d5
--- /dev/null
+++ b/app/client/src/reducers/evaluationReducers/formEvaluationReducer.ts
@@ -0,0 +1,16 @@
+import { createReducer } from "utils/AppsmithUtils";
+import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+
+export type FormEvaluationState = Record;
+
+const initialState: FormEvaluationState = {};
+
+const formEvaluation = createReducer(initialState, {
+ [ReduxActionTypes.SET_FORM_EVALUATION]: (
+ state: FormEvaluationState,
+ action: ReduxAction>,
+ ): FormEvaluationState => action.payload,
+ [ReduxActionTypes.FETCH_PAGE_INIT]: () => initialState,
+});
+
+export default formEvaluation;
diff --git a/app/client/src/reducers/evaluationReducers/index.ts b/app/client/src/reducers/evaluationReducers/index.ts
index 524186dcb089..a5ee4861fecb 100644
--- a/app/client/src/reducers/evaluationReducers/index.ts
+++ b/app/client/src/reducers/evaluationReducers/index.ts
@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
import evaluatedTreeReducer from "./treeReducer";
import evaluationDependencyReducer from "./dependencyReducer";
import loadingEntitiesReducer from "./loadingEntitiesReducer";
+import formEvaluationReducer from "./formEvaluationReducer";
export default combineReducers({
tree: evaluatedTreeReducer,
dependencies: evaluationDependencyReducer,
loadingEntities: loadingEntitiesReducer,
+ formEvaluation: formEvaluationReducer,
});
diff --git a/app/client/src/reducers/evaluationReducers/treeReducer.ts b/app/client/src/reducers/evaluationReducers/treeReducer.ts
index 8a92a99719dc..88be9e94a68a 100644
--- a/app/client/src/reducers/evaluationReducers/treeReducer.ts
+++ b/app/client/src/reducers/evaluationReducers/treeReducer.ts
@@ -18,7 +18,7 @@ const evaluatedTreeReducer = createImmerReducer(initialState, {
}>,
) => {
const { dataTree, updates } = action.payload;
- if (Object.keys(dataTree).length) {
+ if (updates.length === 0) {
return dataTree;
}
for (const update of updates) {
diff --git a/app/client/src/reducers/index.tsx b/app/client/src/reducers/index.tsx
index 365ca32e2748..73a0a0f690a2 100644
--- a/app/client/src/reducers/index.tsx
+++ b/app/client/src/reducers/index.tsx
@@ -52,6 +52,7 @@ import { ActionTabsReduxState } from "./uiReducers/actionTabsReducer";
import { GitSyncReducerState } from "./uiReducers/gitSyncReducer";
import { AppCollabReducerState } from "./uiReducers/appCollabReducer";
import { CrudInfoModalReduxState } from "./uiReducers/crudInfoModalReducer";
+import { FormEvaluationState } from "./evaluationReducers/formEvaluationReducer";
const appReducer = combineReducers({
entities: entityReducer,
@@ -117,5 +118,6 @@ export interface AppState {
tree: EvaluatedTreeState;
dependencies: EvaluationDependencyState;
loadingEntities: LoadingEntitiesState;
+ formEvaluation: FormEvaluationState;
};
}
diff --git a/app/client/src/reducers/uiReducers/canvasSelectionReducer.ts b/app/client/src/reducers/uiReducers/canvasSelectionReducer.ts
index ff1f6cd652af..862e6c6d2170 100644
--- a/app/client/src/reducers/uiReducers/canvasSelectionReducer.ts
+++ b/app/client/src/reducers/uiReducers/canvasSelectionReducer.ts
@@ -1,8 +1,12 @@
import { createImmerReducer } from "utils/AppsmithUtils";
import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
+import { XYCord } from "utils/hooks/useCanvasDragging";
const initialState: CanvasSelectionState = {
isDraggingForSelection: false,
+ widgetId: "",
+ outOfCanvasStartPositions: undefined,
};
export const canvasSelectionReducer = createImmerReducer(initialState, {
@@ -15,12 +19,30 @@ export const canvasSelectionReducer = createImmerReducer(initialState, {
},
[ReduxActionTypes.STOP_CANVAS_SELECTION]: (state: CanvasSelectionState) => {
state.isDraggingForSelection = false;
+ state.widgetId = "";
+ state.outOfCanvasStartPositions = undefined;
+ },
+ [ReduxActionTypes.START_CANVAS_SELECTION_FROM_EDITOR]: (
+ state: CanvasSelectionState,
+ action: ReduxAction<{ startPoints?: XYCord }>,
+ ) => {
+ state.isDraggingForSelection = true;
+ state.widgetId = MAIN_CONTAINER_WIDGET_ID;
+ state.outOfCanvasStartPositions = action.payload.startPoints;
+ },
+ [ReduxActionTypes.STOP_CANVAS_SELECTION_FROM_EDITOR]: (
+ state: CanvasSelectionState,
+ ) => {
+ state.isDraggingForSelection = false;
+ state.widgetId = "";
+ state.outOfCanvasStartPositions = undefined;
},
});
export type CanvasSelectionState = {
isDraggingForSelection: boolean;
widgetId?: string;
+ outOfCanvasStartPositions?: XYCord;
};
export default canvasSelectionReducer;
diff --git a/app/client/src/reducers/uiReducers/crudInfoModalReducer.ts b/app/client/src/reducers/uiReducers/crudInfoModalReducer.ts
index e460553cc909..e006481f4338 100644
--- a/app/client/src/reducers/uiReducers/crudInfoModalReducer.ts
+++ b/app/client/src/reducers/uiReducers/crudInfoModalReducer.ts
@@ -1,21 +1,33 @@
import { createReducer } from "utils/AppsmithUtils";
import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+import { SetCrudInfoModalOpenPayload } from "actions/crudInfoModalActions";
const initialState: CrudInfoModalReduxState = {
crudInfoModalOpen: false,
+ generateCRUDSuccessInfo: null,
};
const crudInfoModalReducer = createReducer(initialState, {
[ReduxActionTypes.SET_CRUD_INFO_MODAL_OPEN]: (
state: CrudInfoModalReduxState,
- action: ReduxAction,
+ action: ReduxAction,
) => {
- return { ...state, crudInfoModalOpen: action.payload };
+ return {
+ ...state,
+ crudInfoModalOpen: action.payload.open,
+ generateCRUDSuccessInfo: action.payload.generateCRUDSuccessInfo,
+ };
},
});
+export type GenerateCRUDSuccessInfoData = {
+ successImageUrl: string;
+ successMessage: string;
+};
+
export interface CrudInfoModalReduxState {
crudInfoModalOpen: boolean;
+ generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null;
}
export default crudInfoModalReducer;
diff --git a/app/client/src/reducers/uiReducers/debuggerReducer.ts b/app/client/src/reducers/uiReducers/debuggerReducer.ts
index 451f7c30a5f5..605d1537c9b5 100644
--- a/app/client/src/reducers/uiReducers/debuggerReducer.ts
+++ b/app/client/src/reducers/uiReducers/debuggerReducer.ts
@@ -1,14 +1,14 @@
import { createReducer } from "utils/AppsmithUtils";
-import { Log, Severity } from "entities/AppsmithConsole";
+import { Log } from "entities/AppsmithConsole";
import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
import { omit, isUndefined } from "lodash";
const initialState: DebuggerReduxState = {
logs: [],
- errorCount: 0,
isOpen: false,
errors: {},
expandId: "",
+ hideErrors: true,
};
const debuggerReducer = createReducer(initialState, {
@@ -16,19 +16,15 @@ const debuggerReducer = createReducer(initialState, {
state: DebuggerReduxState,
action: ReduxAction,
) => {
- const isError = action.payload.severity === Severity.ERROR;
-
return {
...state,
logs: [...state.logs, action.payload],
- errorCount: isError ? state.errorCount + 1 : state.errorCount,
};
},
[ReduxActionTypes.CLEAR_DEBUGGER_LOGS]: (state: DebuggerReduxState) => {
return {
...state,
logs: [],
- errorCount: 0,
};
},
[ReduxActionTypes.SHOW_DEBUGGER]: (
@@ -64,6 +60,15 @@ const debuggerReducer = createReducer(initialState, {
errors: omit(state.errors, action.payload),
};
},
+ [ReduxActionTypes.HIDE_DEBUGGER_ERRORS]: (
+ state: DebuggerReduxState,
+ action: ReduxAction,
+ ) => {
+ return {
+ ...state,
+ hideErrors: action.payload,
+ };
+ },
[ReduxActionTypes.INIT_CANVAS_LAYOUT]: () => {
return {
...initialState,
@@ -73,10 +78,10 @@ const debuggerReducer = createReducer(initialState, {
export interface DebuggerReduxState {
logs: Log[];
- errorCount: number;
isOpen: boolean;
errors: Record;
expandId: string;
+ hideErrors: boolean;
}
export default debuggerReducer;
diff --git a/app/client/src/sagas/ActionExecutionSagas.ts b/app/client/src/sagas/ActionExecutionSagas.ts
index 850bdc117479..e937532e79ad 100644
--- a/app/client/src/sagas/ActionExecutionSagas.ts
+++ b/app/client/src/sagas/ActionExecutionSagas.ts
@@ -52,7 +52,6 @@ import { SAAS_EDITOR_API_ID_URL } from "pages/Editor/SaaSEditor/constants";
import {
executeApiActionRequest,
executeApiActionSuccess,
- executePageLoadActionsComplete,
showRunActionConfirmModal,
updateAction,
} from "actions/actionActions";
@@ -72,7 +71,7 @@ import {
isActionSaving,
} from "selectors/entitiesSelector";
import { AppState } from "reducers";
-import { mapToPropList } from "utils/AppsmithUtils";
+import { isBlobUrl, mapToPropList, parseBlobUrl } from "utils/AppsmithUtils";
import { validateResponse } from "sagas/ErrorSagas";
import { TypeOptions } from "react-toastify";
import { DEFAULT_EXECUTE_ACTION_TIMEOUT_MS } from "constants/ApiConstants";
@@ -119,6 +118,8 @@ import { ENTITY_TYPE, PLATFORM_ERROR } from "entities/AppsmithConsole";
import LOG_TYPE from "entities/AppsmithConsole/logtype";
import { matchPath } from "react-router";
import { setDataUrl } from "./PageSagas";
+import { hideDebuggerErrors } from "actions/debuggerActions";
+import FileDataTypes from "widgets/FileDataTypes";
enum ActionResponseDataTypes {
BINARY = "BINARY",
@@ -481,11 +482,16 @@ export function* evaluateActionParams(
// Convert to object and transform non string values
const actionParams: Record = {};
- bindings.forEach((key, i) => {
+ for (let i = 0; i < bindings.length; i++) {
+ const key = bindings[i];
let value = values[i];
if (typeof value === "object") value = JSON.stringify(value);
+ if (isBlobUrl(value)) {
+ value = yield call(readBlob, value);
+ }
+
actionParams[key] = value;
- });
+ }
return mapToPropList(actionParams);
}
@@ -581,6 +587,7 @@ export function* executeActionSaga(
message: isString(payload.body)
? payload.body
: JSON.stringify(payload.body, null, 2),
+ subType: response.data.errorType,
},
],
});
@@ -925,6 +932,7 @@ function* runActionSaga(
? JSON.stringify(payload.body)
: payload.body,
type: PLATFORM_ERROR.PLUGIN_EXECUTION,
+ subType: response.data.errorType,
},
],
state: response.data?.request ?? null,
@@ -1041,6 +1049,7 @@ function* executePageLoadAction(pageAction: PageAction) {
{
message: JSON.stringify(body),
type: PLATFORM_ERROR.PLUGIN_EXECUTION,
+ subType: response.data.errorType,
},
],
});
@@ -1113,7 +1122,9 @@ function* executePageLoadActionsSaga() {
PerformanceTransactionName.EXECUTE_PAGE_LOAD_ACTIONS,
);
- yield put(executePageLoadActionsComplete());
+ // We show errors in the debugger once onPageLoad actions
+ // are executed
+ yield put(hideDebuggerErrors(false));
} catch (e) {
log.error(e);
@@ -1139,3 +1150,28 @@ export function* watchActionExecutionSagas() {
),
]);
}
+
+/**
+ *
+ * @param blobUrl string A blob url with type added a query param
+ * @returns promise that resolves to file content
+ */
+function* readBlob(blobUrl: string): any {
+ const [url, fileType] = parseBlobUrl(blobUrl);
+ const file = yield fetch(url).then((r) => r.blob());
+
+ const data = yield new Promise((resolve) => {
+ const reader = new FileReader();
+ if (fileType === FileDataTypes.Base64) {
+ reader.readAsDataURL(file);
+ } else if (fileType === FileDataTypes.Binary) {
+ reader.readAsBinaryString(file);
+ } else {
+ reader.readAsText(file);
+ }
+ reader.onloadend = () => {
+ resolve(reader.result);
+ };
+ });
+ return data;
+}
diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts
index 36d460f7bd93..803f2b30d0d7 100644
--- a/app/client/src/sagas/ApiPaneSagas.ts
+++ b/app/client/src/sagas/ApiPaneSagas.ts
@@ -185,7 +185,10 @@ function* handleUpdateBodyContentType(
change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", headers),
);
- if (displayFormatObject.value === POST_BODY_FORMATS[1]) {
+ if (
+ displayFormatObject.value === POST_BODY_FORMATS[1] ||
+ displayFormatObject.value === POST_BODY_FORMATS[2]
+ ) {
if (!bodyFormData || bodyFormData.length === 0) {
yield put(
change(
diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts
index 7fb4d8e4251e..5cd94d78a300 100644
--- a/app/client/src/sagas/DatasourcesSagas.ts
+++ b/app/client/src/sagas/DatasourcesSagas.ts
@@ -902,7 +902,7 @@ function* refreshDatasourceStructure(action: ReduxAction<{ id: string }>) {
}
function* executeDatasourceQuerySaga(
- action: executeDatasourceQueryReduxAction,
+ action: executeDatasourceQueryReduxAction,
) {
try {
const response: GenericApiResponse = yield DatasourcesApi.executeDatasourceQuery(
diff --git a/app/client/src/sagas/DebuggerSagas.ts b/app/client/src/sagas/DebuggerSagas.ts
index 5cc352b4860c..67a2c5a87be7 100644
--- a/app/client/src/sagas/DebuggerSagas.ts
+++ b/app/client/src/sagas/DebuggerSagas.ts
@@ -180,6 +180,7 @@ function* debuggerLogSaga(action: ReduxAction) {
yield call(logDependentEntityProperties, payload);
return;
case LOG_TYPE.EVAL_ERROR:
+ case LOG_TYPE.EVAL_WARNING:
case LOG_TYPE.WIDGET_PROPERTY_VALIDATION_ERROR:
if (payload.source && payload.source.propertyPath) {
if (payload.text) {
@@ -266,6 +267,7 @@ function* logDebuggerErrorAnalyticsSaga(
pageId: currentPageId,
errorMessage: payload.errorMessage,
errorType: payload.errorType,
+ errorSubType: payload.errorSubType,
});
}
} catch (e) {
@@ -277,10 +279,10 @@ function* addDebuggerErrorLogSaga(action: ReduxAction) {
const payload = action.payload;
const errors: Record = yield select(getDebuggerErrors);
- yield put(debuggerLogInit(payload));
-
if (!payload.source || !payload.id) return;
+ yield put(debuggerLogInit(payload));
+
const analyticsPayload = {
entityName: payload.source.name,
entityType: payload.source.type,
@@ -312,6 +314,7 @@ function* addDebuggerErrorLogSaga(action: ReduxAction) {
eventName: "DEBUGGER_NEW_ERROR_MESSAGE",
errorMessage: errorMessage.message,
errorType: errorMessage.type,
+ errorSubType: errorMessage.subType,
},
}),
),
@@ -338,6 +341,7 @@ function* addDebuggerErrorLogSaga(action: ReduxAction) {
eventName: "DEBUGGER_NEW_ERROR_MESSAGE",
errorMessage: updatedErrorMessage.message,
errorType: updatedErrorMessage.type,
+ errorSubType: updatedErrorMessage.subType,
},
});
}
@@ -361,6 +365,7 @@ function* addDebuggerErrorLogSaga(action: ReduxAction) {
eventName: "DEBUGGER_RESOLVED_ERROR_MESSAGE",
errorMessage: existingErrorMessage.message,
errorType: existingErrorMessage.type,
+ errorSubType: existingErrorMessage.subType,
},
});
}
@@ -405,6 +410,7 @@ function* deleteDebuggerErrorLogSaga(
eventName: "DEBUGGER_RESOLVED_ERROR_MESSAGE",
errorMessage: errorMessage.message,
errorType: errorMessage.type,
+ errorSubType: errorMessage.subType,
},
});
}),
diff --git a/app/client/src/sagas/EvaluationsSaga.ts b/app/client/src/sagas/EvaluationsSaga.ts
index 7cd96d80f5ce..5024eb0a0d0e 100644
--- a/app/client/src/sagas/EvaluationsSaga.ts
+++ b/app/client/src/sagas/EvaluationsSaga.ts
@@ -43,6 +43,7 @@ import {
} from "./PostEvaluationSagas";
import { getAppMode } from "selectors/applicationSelectors";
import { APP_MODE } from "entities/App";
+import { diff } from "deep-diff";
let widgetTypeConfigMap: WidgetTypeConfigMap;
@@ -71,7 +72,6 @@ function* evaluateTreeSaga(
evaluationOrder,
logs,
unEvalUpdates,
- updates,
} = workerResponse;
PerformanceTracker.stopAsyncTracking(
PerformanceTransactionName.DATA_TREE_EVALUATION,
@@ -79,6 +79,10 @@ function* evaluateTreeSaga(
PerformanceTracker.startAsyncTracking(
PerformanceTransactionName.SET_EVALUATED_TREE,
);
+ const oldDataTree = yield select(getDataTree);
+
+ const updates = diff(oldDataTree, dataTree) || [];
+
yield put(setEvaluatedTree(dataTree, updates));
PerformanceTracker.stopAsyncTracking(
PerformanceTransactionName.SET_EVALUATED_TREE,
diff --git a/app/client/src/sagas/FormEvaluationSaga.ts b/app/client/src/sagas/FormEvaluationSaga.ts
new file mode 100644
index 000000000000..232f07838a6d
--- /dev/null
+++ b/app/client/src/sagas/FormEvaluationSaga.ts
@@ -0,0 +1,144 @@
+import { call, fork, put, select, take } from "redux-saga/effects";
+import { ReduxActionTypes } from "../constants/ReduxActionConstants";
+import log from "loglevel";
+import * as Sentry from "@sentry/react";
+import { getFormEvaluationState } from "../selectors/formSelectors";
+import { FormEvaluationState } from "../reducers/evaluationReducers/formEvaluationReducer";
+
+// All the topics this saga refers to
+const FORM_EVALUATION_REDUX_ACTIONS = [
+ ReduxActionTypes.INIT_FORM_EVALUATION,
+ ReduxActionTypes.RUN_FORM_EVALUATION,
+];
+
+export enum ConditionType {
+ HIDE = "hide", // When set, the component will be shown until condition is true
+ SHOW = "show", // When set, the component will be hidden until condition is true
+}
+
+// Object to hold the initial eval object
+let finalEvalObj: { [x: string]: { visible: boolean; conditionals: any } };
+
+// Recursive function to generate the evaluation state for form config
+const generateInitialEvalState = (formConfig: any) => {
+ const visible = false;
+
+ // Any element is only added to the eval state if they have a conditional statement present, if not they are allowed to be rendered
+ if (formConfig.hasOwnProperty("conditionals")) {
+ let key = "unkowns";
+
+ // A unique key is used to refer the object in the eval state, can be configProperty or serverLabel
+ if (formConfig.hasOwnProperty("configProperty")) {
+ key = formConfig.configProperty;
+ } else if (formConfig.hasOwnProperty("serverLabel")) {
+ key = formConfig.serverLabel;
+ }
+
+ // Conditionals are stored in the eval state itself for quick access
+ finalEvalObj[key] = {
+ visible,
+ conditionals: formConfig.conditionals,
+ };
+ }
+
+ if (formConfig.children)
+ formConfig.children.forEach((config: any) =>
+ generateInitialEvalState(config),
+ );
+};
+
+// Generator function to run the eval for the whole form when data changes
+function* evaluate(
+ actionConfiguration: any,
+ currentEvalState: FormEvaluationState,
+) {
+ Object.keys(currentEvalState).forEach((key: string) => {
+ try {
+ if (currentEvalState[key].hasOwnProperty("conditionals")) {
+ const conditionBlock = currentEvalState[key].conditionals;
+ Object.keys(conditionBlock).forEach((conditionType) => {
+ const output = eval(conditionBlock[conditionType]);
+ if (conditionType === ConditionType.HIDE) {
+ currentEvalState[key].visible = !output;
+ } else if (conditionType === ConditionType.SHOW) {
+ currentEvalState[key].visible = output;
+ }
+ });
+ }
+ } catch (e) {
+ log.error(e);
+ Sentry.captureException(e);
+ }
+ });
+ return currentEvalState;
+}
+
+function* getFormEvaluation(formId: string, actionConfiguration: any): any {
+ const currentEvalState: any = yield select(getFormEvaluationState);
+
+ if (currentEvalState.hasOwnProperty(formId)) {
+ return {
+ [formId]: yield call(
+ evaluate,
+ actionConfiguration,
+ currentEvalState[formId],
+ ),
+ };
+ } else {
+ return currentEvalState;
+ }
+}
+
+// Filter function to assign a function to the Action dispatched
+function* setFormEvaluationSaga(type: string, payload: any) {
+ if (type === ReduxActionTypes.INIT_FORM_EVALUATION) {
+ finalEvalObj = {};
+ payload.editorConfig.forEach((config: any) => {
+ generateInitialEvalState(config);
+ });
+ payload.settingConfig.forEach((config: any) => {
+ generateInitialEvalState(config);
+ });
+ yield put({
+ type: ReduxActionTypes.SET_FORM_EVALUATION,
+ payload: {
+ [payload.formId]: finalEvalObj,
+ },
+ });
+ return;
+ } else {
+ const { actionConfiguration, formId } = payload;
+ if (!actionConfiguration.formData) {
+ yield;
+ } else {
+ const formEvaluation = yield call(
+ getFormEvaluation,
+ formId,
+ actionConfiguration,
+ );
+ yield put({
+ type: ReduxActionTypes.SET_FORM_EVALUATION,
+ payload: formEvaluation,
+ });
+ }
+ }
+}
+
+function* formEvaluationChangeListenerSaga() {
+ while (true) {
+ const action = yield take(FORM_EVALUATION_REDUX_ACTIONS);
+ yield fork(setFormEvaluationSaga, action.type, action.payload);
+ }
+}
+
+export default function* formEvaluationChangeListener() {
+ yield take(ReduxActionTypes.START_EVALUATION);
+ while (true) {
+ try {
+ yield call(formEvaluationChangeListenerSaga);
+ } catch (e) {
+ log.error(e);
+ Sentry.captureException(e);
+ }
+ }
+}
diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx
index 6b680ad7347f..d06a53e77791 100644
--- a/app/client/src/sagas/PageSagas.tsx
+++ b/app/client/src/sagas/PageSagas.tsx
@@ -67,7 +67,7 @@ import {
import { getDataTree } from "selectors/dataTreeSelectors";
import { IncorrectBindingError, validateResponse } from "./ErrorSagas";
import { executePageLoadActions } from "actions/widgetActions";
-import { ApiResponse } from "api/ApiResponses";
+import { ApiResponse, GenericApiResponse } from "api/ApiResponses";
import {
getCurrentApplicationId,
getCurrentLayoutId,
@@ -101,7 +101,7 @@ import {
generateTemplateSuccess,
} from "../actions/pageActions";
import { getAppMode } from "selectors/applicationSelectors";
-import { setCrudInfoModalOpen } from "actions/crudInfoModalActions";
+import { setCrudInfoModalData } from "actions/crudInfoModalActions";
import { selectMultipleWidgetsAction } from "actions/widgetSelectionActions";
const getWidgetName = (state: AppState, widgetId: string) =>
@@ -898,26 +898,29 @@ export function* generateTemplatePageSaga(
try {
const request: GenerateTemplatePageRequest = action.payload;
// if pageId is available in request, it will just update that page else it will generate new page.
- const response: ApiResponse = yield call(
- PageApi.generateTemplatePage,
- request,
- );
+ const response: GenericApiResponse<{
+ page: any;
+ successImageUrl: string;
+ successMessage: string;
+ }> = yield call(PageApi.generateTemplatePage, request);
const isValidResponse: boolean = yield validateResponse(response);
if (isValidResponse) {
- const pageId = response.data.id;
+ const pageId = response.data.page.id;
const applicationId =
- response.data.applicationId || request.applicationId;
+ response.data.page.applicationId || request.applicationId;
yield handleFetchedPage({
- fetchPageResponse: response,
+ fetchPageResponse: {
+ data: response.data.page,
+ responseMeta: response.responseMeta,
+ },
pageId,
});
+
// TODO : Add this to onSuccess (Redux Action)
yield put(
generateTemplateSuccess({
- pageId: response.data.id,
- pageName: response.data.name,
- layoutId: response.data.layouts[0].id,
+ page: response.data.page,
isNewPage: !request.pageId, // if pageId if not defined, that means a new page is generated.
}),
);
@@ -931,7 +934,15 @@ export function* generateTemplatePageSaga(
variant: Variant.success,
});
- yield put(setCrudInfoModalOpen(true));
+ yield put(
+ setCrudInfoModalData({
+ open: true,
+ generateCRUDSuccessInfo: {
+ successImageUrl: response.data.successImageUrl,
+ successMessage: response.data.successMessage,
+ },
+ }),
+ );
}
} catch (error) {
yield put(generateTemplateError());
diff --git a/app/client/src/sagas/PluginSagas.ts b/app/client/src/sagas/PluginSagas.ts
index 6ae97a17cb02..03ec7bd33846 100644
--- a/app/client/src/sagas/PluginSagas.ts
+++ b/app/client/src/sagas/PluginSagas.ts
@@ -28,7 +28,11 @@ import { GenericApiResponse } from "api/ApiResponses";
import PluginApi from "api/PluginApi";
import log from "loglevel";
import { PluginType } from "entities/Action";
-import { DependencyMap } from "utils/DynamicBindingUtils";
+import {
+ FormEditorConfigs,
+ FormSettingsConfigs,
+ FormDependencyConfigs,
+} from "utils/DynamicBindingUtils";
function* fetchPluginsSaga() {
try {
@@ -78,9 +82,9 @@ function* fetchPluginFormConfigsSaga() {
}
const formConfigs: Record = {};
- const editorConfigs: Record = {};
- const settingConfigs: Record = {};
- const dependencies: Record = {};
+ const editorConfigs: FormEditorConfigs = {};
+ const settingConfigs: FormSettingsConfigs = {};
+ const dependencies: FormDependencyConfigs = {};
Array.from(pluginIdFormsToFetch).forEach((pluginId, index) => {
const plugin = plugins.find((plugin) => plugin.id === pluginId);
diff --git a/app/client/src/sagas/PostEvaluationSagas.ts b/app/client/src/sagas/PostEvaluationSagas.ts
index 846a9c720dc1..e0ce4f5fc00b 100644
--- a/app/client/src/sagas/PostEvaluationSagas.ts
+++ b/app/client/src/sagas/PostEvaluationSagas.ts
@@ -1,4 +1,4 @@
-import { ENTITY_TYPE, Log } from "entities/AppsmithConsole";
+import { ENTITY_TYPE, Log, Severity } from "entities/AppsmithConsole";
import { DataTree } from "entities/DataTree/dataTreeFactory";
import {
DataTreeDiff,
@@ -39,8 +39,17 @@ import { getAppMode } from "selectors/applicationSelectors";
import { APP_MODE } from "entities/App";
import { dataTreeTypeDefCreator } from "utils/autocomplete/dataTreeTypeDefCreator";
import TernServer from "utils/autocomplete/TernServer";
+import getFeatureFlags from "utils/featureFlags";
const getDebuggerErrors = (state: AppState) => state.ui.debugger.errors;
+/**
+ * Errors in this array will not be shown in the debugger.
+ * We do this to avoid same error showing multiple times.
+ *
+ * Errors ignored:
+ * W117: `x` is undefined
+ */
+const errorCodesToIgnoreInDebugger = ["W117"];
function logLatestEvalPropertyErrors(
currentDebuggerErrors: Record,
@@ -60,70 +69,102 @@ function logLatestEvalPropertyErrors(
if (propertyPath in entity.logBlackList) {
continue;
}
- const allEvalErrors: EvaluationError[] = get(
+ let allEvalErrors: EvaluationError[] = get(
entity,
getEvalErrorPath(evaluatedPath, false),
[],
);
+ // If linting flag is not own, filter out all lint errors
+ if (!getFeatureFlags().LINTING) {
+ allEvalErrors = allEvalErrors.filter(
+ (err) => err.errorType !== PropertyEvaluationErrorType.LINT,
+ );
+ }
const evaluatedValue = get(
entity,
getEvalValuePath(evaluatedPath, false),
);
- const evalErrors = allEvalErrors.filter(
- (error) => error.errorType !== PropertyEvaluationErrorType.LINT,
- );
+ const evalErrors: EvaluationError[] = [];
+ const evalWarnings: EvaluationError[] = [];
+
+ for (const err of allEvalErrors) {
+ if (
+ err.severity === Severity.WARNING &&
+ !errorCodesToIgnoreInDebugger.includes(err.code || "")
+ ) {
+ evalWarnings.push(err);
+ }
+ if (err.severity === Severity.ERROR) {
+ evalErrors.push(err);
+ }
+ }
+
const idField = isWidget(entity) ? entity.widgetId : entity.actionId;
const nameField = isWidget(entity) ? entity.widgetName : entity.name;
const entityType = isWidget(entity)
? ENTITY_TYPE.WIDGET
: ENTITY_TYPE.ACTION;
- const debuggerKey = idField + "-" + propertyPath;
- // if dataTree has error but debugger does not -> add
- // if debugger has error and data tree has error -> update error
- // if debugger has error but data tree does not -> remove
- // if debugger or data tree does not have an error -> no change
+ const debuggerKeys = [
+ {
+ key: `${idField}-${propertyPath}`,
+ errors: evalErrors,
+ },
+ {
+ key: `${idField}-${propertyPath}-warning`,
+ errors: evalWarnings,
+ isWarning: true,
+ },
+ ];
- if (evalErrors.length) {
- // TODO Rank and set the most critical error
- // const error = evalErrors[0];
- // Reformatting eval errors here to a format usable by the debugger
- const errorMessages = evalErrors.map((e) => {
- // Error format required for the debugger
- const formattedError = {
- message: e.errorMessage,
- type: e.errorType,
- };
+ for (const { errors, isWarning, key: debuggerKey } of debuggerKeys) {
+ // if dataTree has error but debugger does not -> add
+ // if debugger has error and data tree has error -> update error
+ // if debugger has error but data tree does not -> remove
+ // if debugger or data tree does not have an error -> no change
- return formattedError;
- });
+ if (errors.length) {
+ // TODO Rank and set the most critical error
+ // const error = evalErrors[0];
+ // Reformatting eval errors here to a format usable by the debugger
+ const errorMessages = errors.map((e) => {
+ // Error format required for the debugger
+ return {
+ message: e.errorMessage,
+ type: e.errorType,
+ };
+ });
- const analyticsData = isWidget(entity)
- ? {
- widgetType: entity.type,
- }
- : {};
+ const analyticsData = isWidget(entity)
+ ? {
+ widgetType: entity.type,
+ }
+ : {};
- // Add or update
- AppsmithConsole.addError({
- id: debuggerKey,
- logType: LOG_TYPE.EVAL_ERROR,
- // Unless the intention is to change the message shown in the debugger please do not
- // change the text shown here
- text: createMessage(VALUE_IS_INVALID, propertyPath),
- messages: errorMessages,
- source: {
- id: idField,
- name: nameField,
- type: entityType,
- propertyPath: propertyPath,
- },
- state: {
- [propertyPath]: evaluatedValue,
- },
- analytics: analyticsData,
- });
- } else if (debuggerKey in updatedDebuggerErrors) {
- AppsmithConsole.deleteError(debuggerKey);
+ // Add or update
+ AppsmithConsole.addError(
+ {
+ id: debuggerKey,
+ logType: isWarning ? LOG_TYPE.EVAL_WARNING : LOG_TYPE.EVAL_ERROR,
+ // Unless the intention is to change the message shown in the debugger please do not
+ // change the text shown here
+ text: createMessage(VALUE_IS_INVALID, propertyPath),
+ messages: errorMessages,
+ source: {
+ id: idField,
+ name: nameField,
+ type: entityType,
+ propertyPath: propertyPath,
+ },
+ state: {
+ [propertyPath]: evaluatedValue,
+ },
+ analytics: analyticsData,
+ },
+ isWarning ? Severity.WARNING : Severity.ERROR,
+ );
+ } else if (debuggerKey in updatedDebuggerErrors) {
+ AppsmithConsole.deleteError(debuggerKey);
+ }
}
}
}
diff --git a/app/client/src/sagas/SelectionCanvasSagas.ts b/app/client/src/sagas/SelectionCanvasSagas.ts
index 0c85ce236eeb..9ce550b138e0 100644
--- a/app/client/src/sagas/SelectionCanvasSagas.ts
+++ b/app/client/src/sagas/SelectionCanvasSagas.ts
@@ -1,6 +1,7 @@
import { selectMultipleWidgetsAction } from "actions/widgetSelectionActions";
import { OccupiedSpace } from "constants/editorConstants";
import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
+import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
import { isEqual } from "lodash";
import { SelectedArenaDimensions } from "pages/common/CanvasSelectionArena";
import { all, cancel, put, select, take, takeLatest } from "redux-saga/effects";
@@ -102,10 +103,8 @@ function* startCanvasSelectionSaga(
actionPayload: ReduxAction<{ widgetId: string }>,
) {
const lastSelectedWidgets: string[] = yield select(getSelectedWidgets);
- const mainContainer: WidgetProps = yield select(
- getWidget,
- actionPayload.payload.widgetId,
- );
+ const widgetId = actionPayload.payload.widgetId || MAIN_CONTAINER_WIDGET_ID;
+ const mainContainer: WidgetProps = yield select(getWidget, widgetId);
const lastSelectedWidgetsWithoutParent = lastSelectedWidgets.filter(
(each) => each !== mainContainer.parentId,
);
@@ -133,5 +132,9 @@ export default function* selectionCanvasSagas() {
ReduxActionTypes.START_CANVAS_SELECTION,
startCanvasSelectionSaga,
),
+ takeLatest(
+ ReduxActionTypes.START_CANVAS_SELECTION_FROM_EDITOR,
+ startCanvasSelectionSaga,
+ ),
]);
}
diff --git a/app/client/src/sagas/WebsocketSagas/WebsocketSagas.ts b/app/client/src/sagas/WebsocketSagas/WebsocketSagas.ts
index 0d2a863b742e..cefcad7f9b03 100644
--- a/app/client/src/sagas/WebsocketSagas/WebsocketSagas.ts
+++ b/app/client/src/sagas/WebsocketSagas/WebsocketSagas.ts
@@ -1,6 +1,14 @@
import { io } from "socket.io-client";
import { eventChannel } from "redux-saga";
-import { fork, take, call, cancel, put, delay } from "redux-saga/effects";
+import {
+ fork,
+ take,
+ call,
+ cancel,
+ put,
+ delay,
+ select,
+} from "redux-saga/effects";
import {
ReduxActionTypes,
ReduxSagaChannels,
@@ -17,6 +25,8 @@ import {
} from "actions/websocketActions";
import handleSocketEvent from "./handleSocketEvent";
+import { isMultiplayerEnabledForUser } from "selectors/appCollabSelectors";
+import { areCommentsEnabledForUserAndApp } from "selectors/commentsSelectors";
function connect() {
const socket = io();
@@ -85,6 +95,10 @@ function* handleIO(socket: any) {
function* flow() {
while (true) {
+ yield take([
+ ReduxActionTypes.FETCH_FEATURE_FLAGS_SUCCESS,
+ ReduxActionTypes.RETRY_WEBSOCKET_CONNECTION, // for manually triggering reconnection
+ ]);
try {
/**
* Incase the socket is disconnected due to network latencies
@@ -93,13 +107,17 @@ function* flow() {
* We only need to retry incase the socket connection isn't made
* in the first attempt itself
*/
- const socket = yield call(connect);
- const task = yield fork(handleIO, socket);
- yield put(setIsWebsocketConnected(true));
- yield take([ReduxActionTypes.LOGOUT_USER_INIT]);
- yield take();
- yield cancel(task);
- socket.disconnect();
+ const commentsEnabled = yield select(areCommentsEnabledForUserAndApp);
+ const multiplayerEnabled = yield select(isMultiplayerEnabledForUser);
+ if (commentsEnabled || multiplayerEnabled) {
+ const socket = yield call(connect);
+ const task = yield fork(handleIO, socket);
+ yield put(setIsWebsocketConnected(true));
+ yield take([ReduxActionTypes.LOGOUT_USER_INIT]);
+ yield take();
+ yield cancel(task);
+ socket.disconnect();
+ }
} catch (e) {
// this has to be non blocking
yield fork(function*() {
diff --git a/app/client/src/sagas/WebsocketSagas/handleSocketEvent.ts b/app/client/src/sagas/WebsocketSagas/handleSocketEvent.ts
index 5c744d351db0..efab21cd26e1 100644
--- a/app/client/src/sagas/WebsocketSagas/handleSocketEvent.ts
+++ b/app/client/src/sagas/WebsocketSagas/handleSocketEvent.ts
@@ -32,7 +32,7 @@ export default function* handleSocketEvent(event: any) {
const { thread } = event.payload[0];
const isForCurrentApplication =
- thread?.applicationId === currentApplication.id;
+ thread?.applicationId === currentApplication?.id;
const isCreatedByMe = thread?.authorUsername === currentUser.username;
if (!isCreatedByMe && isForCurrentApplication)
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
index fbdc10f348db..8d91d47b46f7 100644
--- a/app/client/src/sagas/WidgetOperationSagas.tsx
+++ b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -16,12 +16,7 @@ import {
CanvasWidgetsReduxState,
FlattenedWidgetProps,
} from "reducers/entityReducers/canvasWidgetsReducer";
-import {
- getFocusedWidget,
- getSelectedWidget,
- getWidget,
- getWidgets,
-} from "./selectors";
+import { getSelectedWidget, getWidget, getWidgets } from "./selectors";
import { generateWidgetProps } from "utils/WidgetPropsUtils";
import {
all,
@@ -64,7 +59,6 @@ import {
MAIN_CONTAINER_WIDGET_ID,
RenderModes,
WIDGET_DELETE_UNDO_TIMEOUT,
- WidgetType,
WidgetTypes,
} from "constants/WidgetConstants";
import WidgetConfigResponse from "mockResponses/WidgetConfigResponse";
@@ -76,7 +70,7 @@ import {
saveDeletedWidgets,
} from "utils/storage";
import { generateReactKey } from "utils/generators";
-import { flashElementById } from "utils/helpers";
+import { flashElementsById } from "utils/helpers";
import AnalyticsUtil from "utils/AnalyticsUtil";
import log from "loglevel";
import { navigateToCanvas } from "pages/Editor/Explorer/Widgets/utils";
@@ -122,12 +116,21 @@ import AppsmithConsole from "utils/AppsmithConsole";
import { ENTITY_TYPE } from "entities/AppsmithConsole";
import LOG_TYPE from "entities/AppsmithConsole/logtype";
import {
- checkIfPastingIntoListWidget,
+ CopiedWidgetGroup,
doesTriggerPathsContainPropertyPath,
getParentBottomRowAfterAddingWidget,
getParentWidgetIdForPasting,
getWidgetChildren,
+ groupWidgetsIntoContainer,
handleSpecificCasesWhilePasting,
+ getSelectedWidgetWhenPasting,
+ createSelectedWidgetsAsCopiedWidgets,
+ filterOutSelectedWidgets,
+ isSelectedWidgetsColliding,
+ getBoundaryWidgetsFromCopiedGroups,
+ getAllWidgetsInTree,
+ createWidgetCopy,
+ getNextWidgetName,
} from "./WidgetOperationUtils";
import { getSelectedWidgets } from "selectors/ui";
import { getParentWithEnhancementFn } from "./WidgetEnhancementHelpers";
@@ -423,22 +426,6 @@ export function* addChildrenSaga(
}
}
-const getAllWidgetsInTree = (
- widgetId: string,
- canvasWidgets: CanvasWidgetsReduxState,
-) => {
- const widget = canvasWidgets[widgetId];
- const widgetList = widget ? [widget] : [];
- if (widget && widget.children) {
- widget.children
- .filter(Boolean)
- .forEach((childWidgetId: string) =>
- widgetList.push(...getAllWidgetsInTree(childWidgetId, canvasWidgets)),
- );
- }
- return widgetList;
-};
-
/**
* Note: Mutates finalWidgets[parentId].bottomRow for CANVAS_WIDGET
* @param finalWidgets
@@ -460,9 +447,11 @@ const resizeCanvasToLowestWidget = (
GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
);
const childIds = finalWidgets[parentId].children || [];
+
// find lowest row
childIds.forEach((cId) => {
const child = finalWidgets[cId];
+
if (child.bottomRow > lowestBottomRow) {
lowestBottomRow = child.bottomRow;
}
@@ -857,9 +846,7 @@ export function* undoDeleteSaga(action: ReduxAction<{ widgetId: string }>) {
resizeCanvasToLowestWidget(finalWidgets, parentId);
}
yield put(updateAndSaveLayout(finalWidgets));
- deletedWidgetIds.forEach((widgetId) => {
- setTimeout(() => flashElementById(widgetId), 100);
- });
+ flashElementsById(deletedWidgetIds, 100);
yield put(selectMultipleWidgetsInitAction(deletedWidgetIds));
if (deletedWidgetIds.length === 1) {
yield put(forceOpenPropertyPane(action.payload.widgetId));
@@ -1303,18 +1290,6 @@ function* updateCanvasSize(
}
}
-function* createWidgetCopy(widget: FlattenedWidgetProps) {
- const allWidgets: { [widgetId: string]: FlattenedWidgetProps } = yield select(
- getWidgets,
- );
- const widgetsToStore = getAllWidgetsInTree(widget.widgetId, allWidgets);
- return {
- widgetId: widget.widgetId,
- list: widgetsToStore,
- parentId: widget.parentId,
- };
-}
-
function* createSelectedWidgetsCopy(selectedWidgets: FlattenedWidgetProps[]) {
if (!selectedWidgets || !selectedWidgets.length) return;
const widgetListsToStore: {
@@ -1322,6 +1297,7 @@ function* createSelectedWidgetsCopy(selectedWidgets: FlattenedWidgetProps[]) {
parentId: string;
list: FlattenedWidgetProps[];
}[] = yield all(selectedWidgets.map((each) => call(createWidgetCopy, each)));
+
return yield saveCopiedWidgets(JSON.stringify(widgetListsToStore));
}
@@ -1384,30 +1360,51 @@ function* copyWidgetSaga(action: ReduxAction<{ isShortcut: boolean }>) {
}
}
+/**
+ * We take the bottom most widget in the canvas, then calculate the top,left,right,bottom
+ * co-ordinates for the new widget, such that it can be placed at the bottom of the canvas.
+ *
+ * @param widget
+ * @param parentId
+ * @param canvasWidgets
+ * @param parentBottomRow
+ * @param persistColumnPosition
+ * @returns
+ */
export function calculateNewWidgetPosition(
widget: WidgetProps,
parentId: string,
canvasWidgets: { [widgetId: string]: FlattenedWidgetProps },
parentBottomRow?: number,
- persistColumnPosition = false,
-) {
- // Note: This is a very simple algorithm.
- // We take the bottom most widget in the canvas, then calculate the top,left,right,bottom
- // co-ordinates for the new widget, such that it can be placed at the bottom of the canvas.
+ shouldPersistColumnPosition = false,
+ isThereACollision = false,
+ shouldGroup = false,
+): {
+ topRow: number;
+ bottomRow: number;
+ leftColumn: number;
+ rightColumn: number;
+} {
const nextAvailableRow = parentBottomRow
? parentBottomRow
: nextAvailableRowInContainer(parentId, canvasWidgets);
return {
- leftColumn: persistColumnPosition ? widget.leftColumn : 0,
- rightColumn: persistColumnPosition
+ leftColumn: shouldPersistColumnPosition ? widget.leftColumn : 0,
+ rightColumn: shouldPersistColumnPosition
? widget.rightColumn
: widget.rightColumn - widget.leftColumn,
- topRow: parentBottomRow
- ? nextAvailableRow + widget.topRow
- : nextAvailableRow,
- bottomRow: parentBottomRow
- ? nextAvailableRow + widget.bottomRow
- : nextAvailableRow + (widget.bottomRow - widget.topRow),
+ topRow:
+ !isThereACollision && shouldGroup
+ ? widget.topRow
+ : parentBottomRow
+ ? nextAvailableRow + widget.topRow
+ : nextAvailableRow,
+ bottomRow:
+ !isThereACollision && shouldGroup
+ ? widget.bottomRow
+ : parentBottomRow
+ ? nextAvailableRow + widget.bottomRow
+ : nextAvailableRow + (widget.bottomRow - widget.topRow),
};
}
@@ -1416,300 +1413,286 @@ function* getEntityNames() {
return Object.keys(evalTree);
}
-export function getNextWidgetName(
- widgets: CanvasWidgetsReduxState,
- type: WidgetType,
- evalTree: DataTree,
- options?: Record,
-) {
- // Compute the new widget's name
- const defaultConfig: any = WidgetConfigResponse.config[type];
- const widgetNames = Object.keys(widgets).map((w) => widgets[w].widgetName);
- const entityNames = Object.keys(evalTree);
- let prefix = defaultConfig.widgetName;
- if (options && options.prefix) {
- prefix = `${options.prefix}${
- widgetNames.indexOf(options.prefix as string) > -1 ? "Copy" : ""
- }`;
- }
-
- return getNextEntityName(
- prefix,
- [...widgetNames, ...entityNames],
- options?.startWithoutIndex as boolean,
- );
-}
-
/**
* this saga create a new widget from the copied one to store
*/
-function* pasteWidgetSaga() {
- const copiedWidgetGroups: {
- widgetId: string;
- parentId: string;
- list: WidgetProps[];
- }[] = yield getCopiedWidgets();
+function* pasteWidgetSaga(action: ReduxAction<{ groupWidgets: boolean }>) {
+ let copiedWidgetGroups: CopiedWidgetGroup[] = yield getCopiedWidgets();
+ const shouldGroup: boolean = action.payload.groupWidgets;
- if (!Array.isArray(copiedWidgetGroups)) {
- return;
- // to avoid invoking old copied widgets
- }
- const stateWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
- let selectedWidget: FlattenedWidgetProps | undefined = yield select(
- getSelectedWidget,
- );
- const focusedWidget: FlattenedWidgetProps | undefined = yield select(
- getFocusedWidget,
- );
+ const newlyCreatedWidgetIds: string[] = [];
+ const evalTree: DataTree = yield select(getDataTree);
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ let widgets: CanvasWidgetsReduxState = canvasWidgets;
+ const selectedWidget: FlattenedWidgetProps = yield getSelectedWidgetWhenPasting();
- selectedWidget = yield checkIfPastingIntoListWidget(
- stateWidgets,
- selectedWidget || focusedWidget,
- copiedWidgetGroups,
+ const pastingIntoWidgetId: string = yield getParentWidgetIdForPasting(
+ canvasWidgets,
+ selectedWidget,
);
- selectedWidget = yield checkIfPastingIntoListWidget(
- stateWidgets,
- selectedWidget,
+ let isThereACollision: boolean = yield isSelectedWidgetsColliding(
+ widgets,
copiedWidgetGroups,
+ pastingIntoWidgetId,
);
- const pastingIntoWidgetId: string = yield getParentWidgetIdForPasting(
- { ...stateWidgets },
- selectedWidget,
- );
+ // if this is true, selected widgets will be grouped in container
+ if (shouldGroup) {
+ copiedWidgetGroups = yield createSelectedWidgetsAsCopiedWidgets();
+ widgets = yield filterOutSelectedWidgets(
+ copiedWidgetGroups[0].parentId,
+ copiedWidgetGroups,
+ );
+ isThereACollision = yield isSelectedWidgetsColliding(
+ widgets,
+ copiedWidgetGroups,
+ pastingIntoWidgetId,
+ );
- let widgets = { ...stateWidgets };
- const newlyCreatedWidgetIds: string[] = [];
- const sortedWidgetList = copiedWidgetGroups.sort(
- (a, b) => a.list[0].topRow - b.list[0].topRow,
+ copiedWidgetGroups = yield groupWidgetsIntoContainer(
+ copiedWidgetGroups,
+ pastingIntoWidgetId,
+ );
+ }
+
+ // to avoid invoking old copied widgets
+ if (!Array.isArray(copiedWidgetGroups)) return;
+
+ const { topMostWidget } = getBoundaryWidgetsFromCopiedGroups(
+ copiedWidgetGroups,
);
- const copiedGroupTopRow = sortedWidgetList[0].list[0].topRow;
const nextAvailableRow: number = nextAvailableRowInContainer(
pastingIntoWidgetId,
widgets,
);
+
yield all(
copiedWidgetGroups.map((copiedWidgets) =>
call(function*() {
// Don't try to paste if there is no copied widget
if (!copiedWidgets) return;
- const copiedWidgetId = copiedWidgets.widgetId;
- const unUpdatedCopyOfWidget = copiedWidgets.list.find(
- (widget) => widget.widgetId === copiedWidgetId,
- );
- if (unUpdatedCopyOfWidget) {
- const copiedWidget = {
- ...unUpdatedCopyOfWidget,
- topRow: unUpdatedCopyOfWidget.topRow - copiedGroupTopRow,
- bottomRow: unUpdatedCopyOfWidget.bottomRow - copiedGroupTopRow,
- };
+ const copiedWidgetId = copiedWidgets.widgetId;
+ const unUpdatedCopyOfWidget = copiedWidgets.list[0];
+ const newTopRow = shouldGroup
+ ? isThereACollision
+ ? topMostWidget.topRow
+ : 0
+ : topMostWidget.topRow;
+
+ const copiedWidget = {
+ ...unUpdatedCopyOfWidget,
+ topRow: unUpdatedCopyOfWidget.topRow - newTopRow,
+ bottomRow: unUpdatedCopyOfWidget.bottomRow - newTopRow,
+ };
- // Log the paste event
+ // Log the paste or group event.
+ if (shouldGroup) {
+ AnalyticsUtil.logEvent("WIDGET_GROUP", {
+ widgetName: copiedWidget.widgetName,
+ widgetType: copiedWidget.type,
+ });
+ } else {
AnalyticsUtil.logEvent("WIDGET_PASTE", {
widgetName: copiedWidget.widgetName,
widgetType: copiedWidget.type,
});
+ }
- // Compute the new widget's positional properties
- const {
- bottomRow,
- leftColumn,
- rightColumn,
- topRow,
- } = yield calculateNewWidgetPosition(
- copiedWidget,
- pastingIntoWidgetId,
- widgets,
- nextAvailableRow,
- true,
- );
- // goToNextAvailableRow = true,
- // persistColumnPosition = false,
-
- const evalTree: DataTree = yield select(getDataTree);
-
- // Get a flat list of all the widgets to be updated
- const widgetList = copiedWidgets.list;
- const widgetIdMap: Record = {};
- const widgetNameMap: Record = {};
- const newWidgetList: FlattenedWidgetProps[] = [];
- let newWidgetId: string = copiedWidget.widgetId;
- // Generate new widgetIds for the flat list of all the widgets to be updated
- widgetList.forEach((widget) => {
- // Create a copy of the widget properties
- const newWidget = cloneDeep(widget);
- newWidget.widgetId = generateReactKey();
- // Add the new widget id so that it maps the previous widget id
- widgetIdMap[widget.widgetId] = newWidget.widgetId;
-
- // Add the new widget to the list
- newWidgetList.push(newWidget);
- });
+ // Compute the new widget's positional properties
+ const newWidgetPosition = calculateNewWidgetPosition(
+ copiedWidget,
+ pastingIntoWidgetId,
+ widgets,
+ nextAvailableRow,
+ true,
+ isThereACollision,
+ shouldGroup,
+ );
- // For each of the new widgets generated
- for (let i = 0; i < newWidgetList.length; i++) {
- const widget = newWidgetList[i];
- const oldWidgetName = widget.widgetName;
- // Generate a new unique widget name
- const newWidgetName = getNextWidgetName(
- widgets,
- widget.type,
- evalTree,
- {
- prefix: oldWidgetName,
- startWithoutIndex: true,
- },
- );
- // Update the children widgetIds if it has children
- if (widget.children && widget.children.length > 0) {
- widget.children.forEach(
- (childWidgetId: string, index: number) => {
- if (widget.children) {
- widget.children[index] = widgetIdMap[childWidgetId];
- }
- },
- );
- }
+ // Get a flat list of all the widgets to be updated
+ const widgetList = copiedWidgets.list;
+ const widgetIdMap: Record = {};
+ const widgetNameMap: Record = {};
+ const newWidgetList: FlattenedWidgetProps[] = [];
+ let newWidgetId: string = copiedWidget.widgetId;
+ // Generate new widgetIds for the flat list of all the widgets to be updated
+
+ widgetList.forEach((widget) => {
+ // Create a copy of the widget properties
+ const newWidget = cloneDeep(widget);
+ newWidget.widgetId = generateReactKey();
+ // Add the new widget id so that it maps the previous widget id
+ widgetIdMap[widget.widgetId] = newWidget.widgetId;
+
+ // Add the new widget to the list
+ newWidgetList.push(newWidget);
+ });
- // Update the tabs for the tabs widget.
- if (widget.tabsObj && widget.type === WidgetTypes.TABS_WIDGET) {
- try {
- const tabs = Object.values(widget.tabsObj);
- if (Array.isArray(tabs)) {
- widget.tabsObj = tabs.reduce((obj: any, tab) => {
- tab.widgetId = widgetIdMap[tab.widgetId];
- obj[tab.id] = tab;
- return obj;
- }, {});
- }
- } catch (error) {
- log.debug("Error updating tabs", error);
+ // For each of the new widgets generated
+ for (let i = 0; i < newWidgetList.length; i++) {
+ const widget = newWidgetList[i];
+ const oldWidgetName = widget.widgetName;
+ let newWidgetName = oldWidgetName;
+
+ if (!shouldGroup) {
+ newWidgetName = getNextWidgetName(widgets, widget.type, evalTree, {
+ prefix: oldWidgetName,
+ startWithoutIndex: true,
+ });
+ }
+
+ // Update the children widgetIds if it has children
+ if (widget.children && widget.children.length > 0) {
+ widget.children.forEach((childWidgetId: string, index: number) => {
+ if (widget.children) {
+ widget.children[index] = widgetIdMap[childWidgetId];
+ }
+ });
+ }
+
+ // Update the tabs for the tabs widget.
+ if (widget.tabsObj && widget.type === WidgetTypes.TABS_WIDGET) {
+ try {
+ const tabs = Object.values(widget.tabsObj);
+ if (Array.isArray(tabs)) {
+ widget.tabsObj = tabs.reduce((obj: any, tab) => {
+ tab.widgetId = widgetIdMap[tab.widgetId];
+ obj[tab.id] = tab;
+ return obj;
+ }, {});
}
+ } catch (error) {
+ log.debug("Error updating tabs", error);
}
+ }
- // Update the table widget column properties
- if (widget.type === WidgetTypes.TABLE_WIDGET) {
- try {
- // If the primaryColumns of the table exist
- if (widget.primaryColumns) {
- // For each column
- for (const [columnId, column] of Object.entries(
- widget.primaryColumns,
+ // Update the table widget column properties
+ if (widget.type === WidgetTypes.TABLE_WIDGET) {
+ try {
+ // If the primaryColumns of the table exist
+ if (widget.primaryColumns) {
+ // For each column
+ for (const [columnId, column] of Object.entries(
+ widget.primaryColumns,
+ )) {
+ // For each property in the column
+ for (const [key, value] of Object.entries(
+ column as ColumnProperties,
)) {
- // For each property in the column
- for (const [key, value] of Object.entries(
- column as ColumnProperties,
- )) {
- // Replace reference of previous widget with the new widgetName
- // This handles binding scenarios like `{{Table2.tableData.map((currentRow) => (currentRow.id))}}`
- widget.primaryColumns[columnId][key] = isString(value)
- ? value.replace(
- `${oldWidgetName}.`,
- `${newWidgetName}.`,
- )
- : value;
- }
+ // Replace reference of previous widget with the new widgetName
+ // This handles binding scenarios like `{{Table2.tableData.map((currentRow) => (currentRow.id))}}`
+ widget.primaryColumns[columnId][key] = isString(value)
+ ? value.replace(`${oldWidgetName}.`, `${newWidgetName}.`)
+ : value;
}
}
- // Use the new widget name we used to replace the column properties above.
- widget.widgetName = newWidgetName;
- } catch (error) {
- log.debug("Error updating table widget properties", error);
}
+ // Use the new widget name we used to replace the column properties above.
+ widget.widgetName = newWidgetName;
+ } catch (error) {
+ log.debug("Error updating table widget properties", error);
}
+ }
- // If it is the copied widget, update position properties
- if (widget.widgetId === widgetIdMap[copiedWidget.widgetId]) {
- newWidgetId = widget.widgetId;
- widget.leftColumn = leftColumn;
- widget.topRow = topRow;
- widget.bottomRow = bottomRow;
- widget.rightColumn = rightColumn;
- widget.parentId = pastingIntoWidgetId;
- // Also, update the parent widget in the canvas widgets
- // to include this new copied widget's id in the parent's children
- let parentChildren = [widget.widgetId];
- const widgetChildren = widgets[pastingIntoWidgetId].children;
- if (widgetChildren && Array.isArray(widgetChildren)) {
- // Add the new child to existing children
- parentChildren = parentChildren.concat(widgetChildren);
- }
- const parentBottomRow = getParentBottomRowAfterAddingWidget(
- widgets[pastingIntoWidgetId],
- widget,
- );
+ // If it is the copied widget, update position properties
+ if (widget.widgetId === widgetIdMap[copiedWidget.widgetId]) {
+ const {
+ bottomRow,
+ leftColumn,
+ rightColumn,
+ topRow,
+ } = newWidgetPosition;
+ newWidgetId = widget.widgetId;
+ widget.leftColumn = leftColumn;
+ widget.topRow = topRow;
+ widget.bottomRow = bottomRow;
+ widget.rightColumn = rightColumn;
+ widget.parentId = pastingIntoWidgetId;
+ // Also, update the parent widget in the canvas widgets
+ // to include this new copied widget's id in the parent's children
+ let parentChildren = [widget.widgetId];
+ const widgetChildren = widgets[pastingIntoWidgetId].children;
+ if (widgetChildren && Array.isArray(widgetChildren)) {
+ // Add the new child to existing children
+ parentChildren = parentChildren.concat(widgetChildren);
+ }
+ const parentBottomRow = getParentBottomRowAfterAddingWidget(
+ widgets[pastingIntoWidgetId],
+ widget,
+ );
- widgets = {
- ...widgets,
- [pastingIntoWidgetId]: {
- ...widgets[pastingIntoWidgetId],
- bottomRow: parentBottomRow,
- children: parentChildren,
- },
- };
- // If the copied widget's boundaries exceed the parent's
- // Make the parent scrollable
+ widgets = {
+ ...widgets,
+ [pastingIntoWidgetId]: {
+ ...widgets[pastingIntoWidgetId],
+ bottomRow: parentBottomRow,
+ children: parentChildren,
+ },
+ };
+ // If the copied widget's boundaries exceed the parent's
+ // Make the parent scrollable
+ if (
+ widgets[pastingIntoWidgetId].bottomRow *
+ widgets[widget.parentId].parentRowSpace <=
+ widget.bottomRow * widget.parentRowSpace
+ ) {
+ const parentOfPastingWidget =
+ widgets[pastingIntoWidgetId].parentId;
if (
- widgets[pastingIntoWidgetId].bottomRow *
- widgets[widget.parentId].parentRowSpace <=
- widget.bottomRow * widget.parentRowSpace
+ parentOfPastingWidget &&
+ widget.parentId !== MAIN_CONTAINER_WIDGET_ID
) {
- const parentOfPastingWidget =
- widgets[pastingIntoWidgetId].parentId;
- if (
- parentOfPastingWidget &&
- widget.parentId !== MAIN_CONTAINER_WIDGET_ID
- ) {
- const parent = widgets[parentOfPastingWidget];
- widgets[parentOfPastingWidget] = {
- ...parent,
- shouldScrollContents: true,
- };
- }
+ const parent = widgets[parentOfPastingWidget];
+ widgets[parentOfPastingWidget] = {
+ ...parent,
+ shouldScrollContents: true,
+ };
}
- } else {
- // For all other widgets in the list
- // (These widgets will be descendants of the copied widget)
- // This means, that their parents will also be newly copied widgets
- // Update widget's parent widget ids with the new parent widget ids
- const newParentId = newWidgetList.find((newWidget) =>
- widget.parentId
- ? newWidget.widgetId === widgetIdMap[widget.parentId]
- : false,
- )?.widgetId;
- if (newParentId) widget.parentId = newParentId;
}
+ } else {
+ // For all other widgets in the list
+ // (These widgets will be descendants of the copied widget)
+ // This means, that their parents will also be newly copied widgets
+ // Update widget's parent widget ids with the new parent widget ids
+ const newParentId = newWidgetList.find((newWidget) =>
+ widget.parentId
+ ? newWidget.widgetId === widgetIdMap[widget.parentId]
+ : false,
+ )?.widgetId;
+ if (newParentId) widget.parentId = newParentId;
+ }
+ // Generate a new unique widget name
+ if (!shouldGroup) {
widget.widgetName = newWidgetName;
- widgetNameMap[oldWidgetName] = widget.widgetName;
- // Add the new widget to the canvas widgets
- widgets[widget.widgetId] = widget;
}
- newlyCreatedWidgetIds.push(widgetIdMap[copiedWidgetId]);
- // 1. updating template in the copied widget and deleting old template associations
- // 2. updating dynamicBindingPathList in the copied grid widget
- for (let i = 0; i < newWidgetList.length; i++) {
- const widget = newWidgetList[i];
- widgets = handleSpecificCasesWhilePasting(
- widget,
- widgets,
- widgetNameMap,
- newWidgetList,
- );
- }
+ widgetNameMap[oldWidgetName] = widget.widgetName;
+ // Add the new widget to the canvas widgets
+ widgets[widget.widgetId] = widget;
+ }
+ newlyCreatedWidgetIds.push(widgetIdMap[copiedWidgetId]);
+ // 1. updating template in the copied widget and deleting old template associations
+ // 2. updating dynamicBindingPathList in the copied grid widget
+ for (let i = 0; i < newWidgetList.length; i++) {
+ const widget = newWidgetList[i];
+
+ widgets = handleSpecificCasesWhilePasting(
+ widget,
+ widgets,
+ widgetNameMap,
+ newWidgetList,
+ );
}
}),
),
);
- // save the new DSL
+
yield put(updateAndSaveLayout(widgets));
- newlyCreatedWidgetIds.forEach((newWidgetId) => {
- setTimeout(() => flashElementById(newWidgetId), 100);
- });
- // hydrating enhancements map after save layout so that enhancement map
- // for newly copied widget is hydrated
+
+ flashElementsById(newlyCreatedWidgetIds, 100);
+
yield put(selectMultipleWidgetsInitAction(newlyCreatedWidgetIds));
}
@@ -1825,6 +1808,29 @@ function* addSuggestedWidget(action: ReduxAction>) {
}
}
+/**
+ * saga to group selected widgets into a new container
+ *
+ * @param action
+ */
+export function* groupWidgetsSaga() {
+ const selectedWidgetIDs: string[] = yield select(getSelectedWidgets);
+ const isMultipleWidgetsSelected = selectedWidgetIDs.length > 1;
+
+ if (isMultipleWidgetsSelected) {
+ try {
+ yield put({
+ type: ReduxActionTypes.PASTE_COPIED_WIDGET_INIT,
+ payload: {
+ groupWidgets: true,
+ },
+ });
+ } catch (error) {
+ log.error(error);
+ }
+ }
+}
+
export default function* widgetOperationSagas() {
yield fork(widgetSelectionSagas);
yield all([
@@ -1868,5 +1874,6 @@ export default function* widgetOperationSagas() {
takeEvery(ReduxActionTypes.UNDO_DELETE_WIDGET, undoDeleteSaga),
takeEvery(ReduxActionTypes.CUT_SELECTED_WIDGET, cutWidgetSaga),
takeEvery(WidgetReduxActionTypes.WIDGET_ADD_CHILDREN, addChildrenSaga),
+ takeEvery(ReduxActionTypes.GROUP_WIDGETS_INIT, groupWidgetsSaga),
]);
}
diff --git a/app/client/src/sagas/WidgetOperationUtils.ts b/app/client/src/sagas/WidgetOperationUtils.ts
index bb2dfa7713ed..2d061f766e06 100644
--- a/app/client/src/sagas/WidgetOperationUtils.ts
+++ b/app/client/src/sagas/WidgetOperationUtils.ts
@@ -1,20 +1,41 @@
+import {
+ getFocusedWidget,
+ getSelectedWidget,
+ getWidgetMetaProps,
+ getWidgets,
+} from "./selectors";
+import _, { isString } from "lodash";
import {
GridDefaults,
MAIN_CONTAINER_WIDGET_ID,
+ RenderModes,
+ WidgetType,
WidgetTypes,
} from "constants/WidgetConstants";
-import { cloneDeep, get, isString, filter, set } from "lodash";
+import { all, call } from "redux-saga/effects";
+import { DataTree } from "entities/DataTree/dataTreeFactory";
+import { select } from "redux-saga/effects";
+import { getCopiedWidgets } from "utils/storage";
+import { WidgetProps } from "widgets/BaseWidget";
+import { getSelectedWidgets } from "selectors/ui";
+import { generateReactKey } from "utils/generators";
import {
CanvasWidgetsReduxState,
FlattenedWidgetProps,
} from "reducers/entityReducers/canvasWidgetsReducer";
-import { select } from "redux-saga/effects";
+import { getDataTree } from "selectors/dataTreeSelectors";
import {
- combineDynamicBindings,
getDynamicBindings,
+ combineDynamicBindings,
} from "utils/DynamicBindingUtils";
-import { WidgetProps } from "widgets/BaseWidget";
-import { getWidgetMetaProps } from "./selectors";
+import WidgetConfigResponse from "mockResponses/WidgetConfigResponse";
+import { getNextEntityName } from "utils/AppsmithUtils";
+
+export interface CopiedWidgetGroup {
+ widgetId: string;
+ parentId: string;
+ list: WidgetProps[];
+}
/**
* checks if triggerpaths contains property path passed
@@ -59,14 +80,14 @@ export const handleIfParentIsListWidgetWhilePasting = (
widget: FlattenedWidgetProps,
widgets: { [widgetId: string]: FlattenedWidgetProps },
): { [widgetId: string]: FlattenedWidgetProps } => {
- let root = get(widgets, `${widget.parentId}`);
+ let root = _.get(widgets, `${widget.parentId}`);
while (root && root.parentId && root.widgetId !== MAIN_CONTAINER_WIDGET_ID) {
if (root.type === WidgetTypes.LIST_WIDGET) {
const listWidget = root;
- const currentWidget = cloneDeep(widget);
- let template = get(listWidget, "template", {});
- const dynamicBindingPathList: any[] = get(
+ const currentWidget = _.cloneDeep(widget);
+ let template = _.get(listWidget, "template", {});
+ const dynamicBindingPathList: any[] = _.get(
listWidget,
"dynamicBindingPathList",
[],
@@ -180,7 +201,7 @@ export const handleSpecificCasesWhilePasting = (
(key) => widgetNameMap[key] === widget.widgetName,
);
// get all the button, icon widgets
- const copiedBtnIcnWidgets = filter(
+ const copiedBtnIcnWidgets = _.filter(
newWidgetList,
(copyWidget) =>
copyWidget.type === "BUTTON_WIDGET" ||
@@ -193,7 +214,7 @@ export const handleSpecificCasesWhilePasting = (
oldWidgetName,
widget.widgetName,
);
- set(widgets[copyWidget.widgetId], "onClick", newOnClick);
+ _.set(widgets[copyWidget.widgetId], "onClick", newOnClick);
}
});
}
@@ -208,7 +229,7 @@ export function getWidgetChildren(
widgetId: string,
): any {
const childrenIds: string[] = [];
- const widget = get(canvasWidgets, widgetId);
+ const widget = _.get(canvasWidgets, widgetId);
// When a form widget tries to resetChildrenMetaProperties
// But one or more of its container like children
// have just been deleted, widget can be undefined
@@ -327,11 +348,420 @@ export const checkIfPastingIntoListWidget = function(
}
}
- return get(canvasWidgets, firstChildId);
+ return _.get(canvasWidgets, firstChildId);
}
return selectedWidget;
};
+/**
+ * get top, left, right, bottom most widgets from copied groups when pasting
+ *
+ * @param copiedWidgetGroups
+ * @returns
+ */
+export const getBoundaryWidgetsFromCopiedGroups = function(
+ copiedWidgetGroups: CopiedWidgetGroup[],
+) {
+ const topMostWidget = copiedWidgetGroups.sort(
+ (a, b) => a.list[0].topRow - b.list[0].topRow,
+ )[0].list[0];
+ const leftMostWidget = copiedWidgetGroups.sort(
+ (a, b) => a.list[0].leftColumn - b.list[0].leftColumn,
+ )[0].list[0];
+ const rightMostWidget = copiedWidgetGroups.sort(
+ (a, b) => b.list[0].rightColumn - a.list[0].rightColumn,
+ )[0].list[0];
+ const bottomMostWidget = copiedWidgetGroups.sort(
+ (a, b) => b.list[0].bottomRow - a.list[0].bottomRow,
+ )[0].list[0];
+
+ return {
+ topMostWidget,
+ leftMostWidget,
+ rightMostWidget,
+ bottomMostWidget,
+ };
+};
+
+/**
+ * -------------------------------------------------------------------------------
+ * OPERATION = PASTING
+ * -------------------------------------------------------------------------------
+ *
+ * following are the functions are that used in pasting operation
+ */
+
+/**
+ * selects the selectedWidget.
+ * In case of LIST_WIDGET, it selects the list widget instead of selecting the
+ * container inside the list widget
+ *
+ * @param canvasWidgets
+ * @param copiedWidgetGroups
+ * @returns
+ */
+export const getSelectedWidgetWhenPasting = function*() {
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const copiedWidgetGroups: CopiedWidgetGroup[] = yield getCopiedWidgets();
+
+ let selectedWidget: FlattenedWidgetProps | undefined = yield select(
+ getSelectedWidget,
+ );
+
+ const focusedWidget: FlattenedWidgetProps | undefined = yield select(
+ getFocusedWidget,
+ );
+
+ selectedWidget = checkIfPastingIntoListWidget(
+ canvasWidgets,
+ selectedWidget || focusedWidget,
+ copiedWidgetGroups,
+ );
+
+ return selectedWidget;
+};
+
+/**
+ * group copied widgets into a container
+ *
+ * @param copiedWidgetGroups
+ * @param pastingIntoWidgetId
+ * @returns
+ */
+export const groupWidgetsIntoContainer = function*(
+ copiedWidgetGroups: CopiedWidgetGroup[],
+ pastingIntoWidgetId: string,
+) {
+ const containerWidgetId = generateReactKey();
+ const evalTree: DataTree = yield select(getDataTree);
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const newContainerName = getNextWidgetName(
+ canvasWidgets,
+ WidgetTypes.CONTAINER_WIDGET,
+ evalTree,
+ );
+ const newCanvasName = getNextWidgetName(
+ canvasWidgets,
+ WidgetTypes.CANVAS_WIDGET,
+ evalTree,
+ );
+ const {
+ bottomMostWidget,
+ leftMostWidget,
+ rightMostWidget,
+ topMostWidget,
+ } = getBoundaryWidgetsFromCopiedGroups(copiedWidgetGroups);
+
+ const copiedWidgets = copiedWidgetGroups.map((copiedWidgetGroup) =>
+ copiedWidgetGroup.list.find(
+ (w) => w.widgetId === copiedWidgetGroup.widgetId,
+ ),
+ );
+ const parentColumnSpace =
+ copiedWidgetGroups[0].list[0].parentColumnSpace || 1;
+
+ const boundary = {
+ top: _.minBy(copiedWidgets, (copiedWidget) => copiedWidget?.topRow),
+ left: _.minBy(copiedWidgets, (copiedWidget) => copiedWidget?.leftColumn),
+ bottom: _.maxBy(copiedWidgets, (copiedWidget) => copiedWidget?.bottomRow),
+ right: _.maxBy(copiedWidgets, (copiedWidget) => copiedWidget?.rightColumn),
+ };
+
+ const widthPerColumn =
+ ((rightMostWidget.rightColumn - leftMostWidget.leftColumn) *
+ parentColumnSpace) /
+ GridDefaults.DEFAULT_GRID_COLUMNS;
+ const heightOfCanvas =
+ (bottomMostWidget.bottomRow - topMostWidget.topRow) * parentColumnSpace;
+ const widthOfCanvas =
+ (rightMostWidget.rightColumn - leftMostWidget.leftColumn) *
+ parentColumnSpace;
+
+ const newCanvasWidget: FlattenedWidgetProps = {
+ ..._.omit(
+ _.get(
+ WidgetConfigResponse.config[WidgetTypes.CONTAINER_WIDGET],
+ "blueprint.view[0]",
+ ),
+ ["position"],
+ ),
+ ..._.get(
+ WidgetConfigResponse.config[WidgetTypes.CONTAINER_WIDGET],
+ "blueprint.view[0].props",
+ ),
+ bottomRow: heightOfCanvas,
+ isLoading: false,
+ isVisible: true,
+ leftColumn: 0,
+ minHeight: heightOfCanvas,
+ parentColumnSpace: 1,
+ parentId: pastingIntoWidgetId,
+ parentRowSpace: 1,
+ rightColumn: widthOfCanvas,
+ topRow: 0,
+ renderMode: RenderModes.CANVAS,
+ version: 1,
+ widgetId: generateReactKey(),
+ widgetName: newCanvasName,
+ };
+ const newContainerWidget: FlattenedWidgetProps = {
+ ..._.omit(WidgetConfigResponse.config[WidgetTypes.CONTAINER_WIDGET], [
+ "rows",
+ "columns",
+ "blueprint",
+ ]),
+ parentId: pastingIntoWidgetId,
+ widgetName: newContainerName,
+ type: WidgetTypes.CONTAINER_WIDGET,
+ widgetId: containerWidgetId,
+ leftColumn: boundary.left?.leftColumn || 0,
+ topRow: boundary.top?.topRow || 0,
+ bottomRow: (boundary.bottom?.bottomRow || 0) + 2,
+ rightColumn: boundary.right?.rightColumn || 0,
+ tabId: "",
+ children: [newCanvasWidget.widgetId],
+ renderMode: RenderModes.CANVAS,
+ version: 1,
+ isLoading: false,
+ isVisible: true,
+ parentRowSpace: GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+ parentColumnSpace: widthPerColumn,
+ };
+ newCanvasWidget.parentId = newContainerWidget.widgetId;
+ const percentageIncrease = parentColumnSpace / widthPerColumn;
+
+ const list = copiedWidgetGroups.map((copiedWidgetGroup) => {
+ return [
+ ...copiedWidgetGroup.list.map((listItem) => {
+ if (listItem.widgetId === copiedWidgetGroup.widgetId) {
+ newCanvasWidget.children = _.get(newCanvasWidget, "children", []);
+ newCanvasWidget.children = [
+ ...newCanvasWidget.children,
+ listItem.widgetId,
+ ];
+
+ return {
+ ...listItem,
+ leftColumn:
+ (listItem.leftColumn - leftMostWidget.leftColumn) *
+ percentageIncrease,
+ rightColumn:
+ (listItem.rightColumn - leftMostWidget.leftColumn) *
+ percentageIncrease,
+ topRow: listItem.topRow - topMostWidget.topRow,
+ bottomRow: listItem.bottomRow - topMostWidget.topRow,
+ parentId: newCanvasWidget.widgetId,
+ parentRowSpace: GridDefaults.DEFAULT_GRID_ROW_HEIGHT,
+ parentColumnSpace: widthPerColumn,
+ };
+ }
+
+ return listItem;
+ }),
+ ];
+ });
+
+ const flatList = _.flattenDeep(list);
+
+ return [
+ {
+ list: [newContainerWidget, newCanvasWidget, ...flatList],
+ widgetId: newContainerWidget.widgetId,
+ parentId: pastingIntoWidgetId,
+ },
+ ];
+};
+
+/**
+ * create copiedWidgets objects from selected widgets
+ *
+ * @returns
+ */
+export const createSelectedWidgetsAsCopiedWidgets = function*() {
+ const canvasWidgets: {
+ [widgetId: string]: FlattenedWidgetProps;
+ } = yield select(getWidgets);
+ const selectedWidgetIDs: string[] = yield select(getSelectedWidgets);
+ const selectedWidgets = selectedWidgetIDs.map((each) => canvasWidgets[each]);
+
+ if (!selectedWidgets || !selectedWidgets.length) return;
+
+ const widgetListsToStore: {
+ widgetId: string;
+ parentId: string;
+ list: FlattenedWidgetProps[];
+ }[] = yield all(selectedWidgets.map((each) => call(createWidgetCopy, each)));
+
+ return widgetListsToStore;
+};
+
+/**
+ * return canvasWidgets without selectedWidgets and remove the selected widgets
+ * ids in the children of parent widget
+ *
+ * @return
+ */
+export const filterOutSelectedWidgets = function*(
+ parentId: string,
+ copiedWidgetGroups: CopiedWidgetGroup[],
+) {
+ const canvasWidgets: CanvasWidgetsReduxState = yield _.cloneDeep(
+ select(getWidgets),
+ );
+
+ const selectedWidgetIDs: string[] = _.flattenDeep(
+ copiedWidgetGroups.map((copiedWidgetGroup) => {
+ return copiedWidgetGroup.list.map((widget) => widget.widgetId);
+ }),
+ );
+
+ const filteredWidgets: CanvasWidgetsReduxState = _.omit(
+ canvasWidgets,
+ selectedWidgetIDs,
+ );
+
+ return {
+ ...filteredWidgets,
+ [parentId]: {
+ ...filteredWidgets[parentId],
+ // removing the selected widgets ids in the children of parent widget
+ children: _.get(filteredWidgets[parentId], "children", []).filter(
+ (widgetId) => {
+ return !selectedWidgetIDs.includes(widgetId);
+ },
+ ),
+ },
+ };
+};
+
+/**
+ * checks if selected widgets are colliding with other widgets or not
+ *
+ * @param widgets
+ * @param copiedWidgetGroups
+ * @returns
+ */
+export const isSelectedWidgetsColliding = function*(
+ widgets: CanvasWidgetsReduxState,
+ copiedWidgetGroups: CopiedWidgetGroup[],
+ pastingIntoWidgetId: string,
+) {
+ if (!Array.isArray(copiedWidgetGroups)) return false;
+
+ const {
+ bottomMostWidget,
+ leftMostWidget,
+ rightMostWidget,
+ topMostWidget,
+ } = getBoundaryWidgetsFromCopiedGroups(copiedWidgetGroups);
+
+ const widgetsWithSameParent = _.omitBy(widgets, (widget) => {
+ return widget.parentId !== pastingIntoWidgetId;
+ });
+
+ const widgetsArray = Object.values(widgetsWithSameParent).filter(
+ (widget) =>
+ widget.parentId === pastingIntoWidgetId &&
+ widget.type !== WidgetTypes.MODAL_WIDGET,
+ );
+
+ let isColliding = false;
+
+ for (let i = 0; i < widgetsArray.length; i++) {
+ const widget = widgetsArray[i];
+
+ if (
+ widget.bottomRow + 2 < topMostWidget.topRow ||
+ widget.topRow > bottomMostWidget.bottomRow
+ ) {
+ isColliding = false;
+ } else if (
+ widget.rightColumn < leftMostWidget.leftColumn ||
+ widget.leftColumn > rightMostWidget.rightColumn
+ ) {
+ isColliding = false;
+ } else {
+ return true;
+ }
+ }
+
+ return isColliding;
+};
+
+/**
+ * get next widget name to be used
+ *
+ * @param widgets
+ * @param type
+ * @param evalTree
+ * @param options
+ * @returns
+ */
+export function getNextWidgetName(
+ widgets: CanvasWidgetsReduxState,
+ type: WidgetType,
+ evalTree: DataTree,
+ options?: Record,
+) {
+ // Compute the new widget's name
+ const defaultConfig: any = WidgetConfigResponse.config[type];
+ const widgetNames = Object.keys(widgets).map((w) => widgets[w].widgetName);
+ const entityNames = Object.keys(evalTree);
+ let prefix = defaultConfig.widgetName;
+ if (options && options.prefix) {
+ prefix = `${options.prefix}${
+ widgetNames.indexOf(options.prefix as string) > -1 ? "Copy" : ""
+ }`;
+ }
+
+ return getNextEntityName(
+ prefix,
+ [...widgetNames, ...entityNames],
+ options?.startWithoutIndex as boolean,
+ );
+}
+
+/**
+ * creates widget copied groups
+ *
+ * @param widget
+ * @returns
+ */
+export function* createWidgetCopy(widget: FlattenedWidgetProps) {
+ const allWidgets: { [widgetId: string]: FlattenedWidgetProps } = yield select(
+ getWidgets,
+ );
+ const widgetsToStore = getAllWidgetsInTree(widget.widgetId, allWidgets);
+ return {
+ widgetId: widget.widgetId,
+ list: widgetsToStore,
+ parentId: widget.parentId,
+ };
+}
+
+/**
+ * get all widgets in tree
+ *
+ * @param widgetId
+ * @param canvasWidgets
+ * @returns
+ */
+export const getAllWidgetsInTree = (
+ widgetId: string,
+ canvasWidgets: CanvasWidgetsReduxState,
+) => {
+ const widget = canvasWidgets[widgetId];
+ const widgetList = [widget];
+ if (widget && widget.children) {
+ widget.children
+ .filter(Boolean)
+ .forEach((childWidgetId: string) =>
+ widgetList.push(...getAllWidgetsInTree(childWidgetId, canvasWidgets)),
+ );
+ }
+ return widgetList;
+};
+
export const getParentBottomRowAfterAddingWidget = (
stateParent: FlattenedWidgetProps,
newWidget: FlattenedWidgetProps,
diff --git a/app/client/src/sagas/WidgetSelectionSagas.ts b/app/client/src/sagas/WidgetSelectionSagas.ts
index 4f910b4729a1..89a56b570b28 100644
--- a/app/client/src/sagas/WidgetSelectionSagas.ts
+++ b/app/client/src/sagas/WidgetSelectionSagas.ts
@@ -1,7 +1,19 @@
-import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
-import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
-import { all, fork, put, select, takeLatest } from "redux-saga/effects";
-import { getWidgetImmediateChildren, getWidgets } from "./selectors";
+import {
+ ReduxAction,
+ ReduxActionErrorTypes,
+ ReduxActionTypes,
+} from "constants/ReduxActionConstants";
+import {
+ DroppableWidgets,
+ WidgetTypes,
+ MAIN_CONTAINER_WIDGET_ID,
+} from "constants/WidgetConstants";
+import { all, call, fork, put, select, takeLatest } from "redux-saga/effects";
+import {
+ getWidgetImmediateChildren,
+ getWidgetMetaProps,
+ getWidgets,
+} from "./selectors";
import log from "loglevel";
import {
deselectMultipleWidgetsAction,
@@ -14,7 +26,11 @@ import { Toaster } from "components/ads/Toast";
import { createMessage, SELECT_ALL_WIDGETS_MSG } from "constants/messages";
import { Variant } from "components/ads/common";
import { getSelectedWidget, getSelectedWidgets } from "selectors/ui";
-import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
+import {
+ CanvasWidgetsReduxState,
+ FlattenedWidgetProps,
+} from "reducers/entityReducers/canvasWidgetsReducer";
+import { getWidgetChildren } from "./WidgetOperationUtils";
import { AppState } from "reducers";
// The following is computed to be used in the entity explorer
@@ -24,7 +40,7 @@ function* selectedWidgetAncestrySaga(
action: ReduxAction<{ widgetId: string; isMultiSelect: boolean }>,
) {
try {
- const canvasWidgets = yield select(getWidgets);
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
const widgetIdsExpandList = [];
const { isMultiSelect, widgetId: selectedWidget } = action.payload;
@@ -35,7 +51,7 @@ function* selectedWidgetAncestrySaga(
// If there is a parentId for the selectedWidget
if (widgetId) {
// Keep including the parent until we reach the main container
- while (widgetId !== MAIN_CONTAINER_WIDGET_ID) {
+ while (widgetId && widgetId !== MAIN_CONTAINER_WIDGET_ID) {
widgetIdsExpandList.push(widgetId);
if (canvasWidgets[widgetId] && canvasWidgets[widgetId].parentId)
widgetId = canvasWidgets[widgetId].parentId;
@@ -61,20 +77,122 @@ function* selectedWidgetAncestrySaga(
}
}
-function* selectAllWidgetsInCanvasSaga(
- action: ReduxAction<{ canvasId: string }>,
-) {
- const { canvasId } = action.payload;
- const allWidgetsOnCanvas: string[] = yield select(
- getWidgetImmediateChildren,
- canvasId,
- );
- if (allWidgetsOnCanvas && allWidgetsOnCanvas.length) {
- yield put(selectMultipleWidgetsAction(allWidgetsOnCanvas));
- Toaster.show({
- text: createMessage(SELECT_ALL_WIDGETS_MSG),
- variant: Variant.info,
- duration: 3000,
+function* getDroppingCanvasOfWidget(widgetLastSelected: FlattenedWidgetProps) {
+ if (DroppableWidgets.includes(widgetLastSelected.type)) {
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const childWidgets: string[] = yield select(
+ getWidgetImmediateChildren,
+ widgetLastSelected.widgetId,
+ );
+ const firstCanvas = childWidgets.find((each) => {
+ const widget = canvasWidgets[each];
+ return widget.type === WidgetTypes.CANVAS_WIDGET;
+ });
+ if (widgetLastSelected.type === WidgetTypes.TABS_WIDGET) {
+ const tabMetaProps: Record = yield select(
+ getWidgetMetaProps,
+ widgetLastSelected.widgetId,
+ );
+ return tabMetaProps.selectedTabWidgetId;
+ }
+ if (firstCanvas) {
+ return firstCanvas;
+ }
+ }
+ return widgetLastSelected.parentId;
+}
+
+function* getLastSelectedCanvas() {
+ const lastSelectedWidget: string = yield select(getSelectedWidget);
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const widgetLastSelected =
+ lastSelectedWidget && canvasWidgets[lastSelectedWidget];
+ if (widgetLastSelected) {
+ const canvasToSelect: string = yield call(
+ getDroppingCanvasOfWidget,
+ widgetLastSelected,
+ );
+ return canvasToSelect ? canvasToSelect : MAIN_CONTAINER_WIDGET_ID;
+ }
+ return MAIN_CONTAINER_WIDGET_ID;
+}
+
+// used for List widget cases
+const isChildOfDropDisabledCanvas = (
+ canvasWidgets: CanvasWidgetsReduxState,
+ widgetId: string,
+) => {
+ const widget = canvasWidgets[widgetId];
+ const parentId = widget.parentId || MAIN_CONTAINER_WIDGET_ID;
+ const parent = canvasWidgets[parentId];
+ return !!parent?.dropDisabled;
+};
+
+function* getAllSelectableChildren() {
+ const lastSelectedWidget: string = yield select(getSelectedWidget);
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const widgetLastSelected = canvasWidgets[lastSelectedWidget];
+ const canvasId: string = yield call(getLastSelectedCanvas);
+ let allChildren: string[] = [];
+ const selectGrandChildren: boolean = lastSelectedWidget
+ ? widgetLastSelected.type === WidgetTypes.LIST_WIDGET
+ : false;
+ if (selectGrandChildren) {
+ allChildren = yield call(
+ getWidgetChildren,
+ canvasWidgets,
+ lastSelectedWidget,
+ );
+ } else {
+ allChildren = yield select(getWidgetImmediateChildren, canvasId);
+ }
+ if (allChildren && allChildren.length) {
+ const selectableChildren = allChildren.filter((each) => {
+ const isCanvasWidget =
+ each &&
+ canvasWidgets[each] &&
+ canvasWidgets[each].type === WidgetTypes.CANVAS_WIDGET;
+ const isImmovableWidget = isChildOfDropDisabledCanvas(
+ canvasWidgets,
+ each,
+ );
+ return !(isCanvasWidget || isImmovableWidget);
+ });
+ return selectableChildren;
+ }
+ return [];
+}
+
+function* selectAllWidgetsInCanvasSaga() {
+ try {
+ const canvasWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const allSelectableChildren: string[] = yield call(
+ getAllSelectableChildren,
+ );
+ if (allSelectableChildren && allSelectableChildren.length) {
+ yield put(selectMultipleWidgetsAction(allSelectableChildren));
+ const isAnyModalSelected = allSelectableChildren.some((each) => {
+ return (
+ each &&
+ canvasWidgets[each] &&
+ canvasWidgets[each].type === WidgetTypes.MODAL_WIDGET
+ );
+ });
+ if (isAnyModalSelected) {
+ Toaster.show({
+ text: createMessage(SELECT_ALL_WIDGETS_MSG),
+ variant: Variant.info,
+ duration: 3000,
+ });
+ }
+ }
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.WIDGET_SELECTION_ERROR,
+ payload: {
+ action: ReduxActionTypes.SELECT_ALL_WIDGETS_IN_CANVAS_INIT,
+ error,
+ },
});
}
}
@@ -82,79 +200,119 @@ function* selectAllWidgetsInCanvasSaga(
function* deselectNonSiblingsOfWidgetSaga(
action: ReduxAction<{ widgetId: string; isMultiSelect: boolean }>,
) {
- const { isMultiSelect, widgetId } = action.payload;
- if (isMultiSelect) {
- const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
- const parentId: any = allWidgets[widgetId].parentId;
- const childWidgets: string[] = yield select(
- getWidgetImmediateChildren,
- parentId,
- );
- const currentSelectedWidgets: string[] = yield select(getSelectedWidgets);
+ try {
+ const { isMultiSelect, widgetId } = action.payload;
+ if (isMultiSelect) {
+ const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const parentId: any = allWidgets[widgetId].parentId;
+ const childWidgets: string[] = yield select(
+ getWidgetImmediateChildren,
+ parentId,
+ );
+ const currentSelectedWidgets: string[] = yield select(getSelectedWidgets);
- const nonSiblings = currentSelectedWidgets.filter(
- (each) => !childWidgets.includes(each),
- );
- if (nonSiblings && nonSiblings.length) {
- yield put(
- deselectMultipleWidgetsAction(
- nonSiblings.filter((each) => each !== widgetId),
- ),
+ const nonSiblings = currentSelectedWidgets.filter(
+ (each) => !childWidgets.includes(each),
);
+ if (nonSiblings && nonSiblings.length) {
+ yield put(
+ deselectMultipleWidgetsAction(
+ nonSiblings.filter((each) => each !== widgetId),
+ ),
+ );
+ }
}
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.WIDGET_SELECTION_ERROR,
+ payload: {
+ action: ReduxActionTypes.SELECT_WIDGET_INIT,
+ error,
+ },
+ });
}
}
function* selectWidgetSaga(
action: ReduxAction<{ widgetId: string; isMultiSelect: boolean }>,
) {
- const { isMultiSelect, widgetId } = action.payload;
- yield put(selectWidgetAction(widgetId, isMultiSelect));
+ try {
+ const { isMultiSelect, widgetId } = action.payload;
+ yield put(selectWidgetAction(widgetId, isMultiSelect));
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.WIDGET_SELECTION_ERROR,
+ payload: {
+ action: ReduxActionTypes.SELECT_WIDGET_INIT,
+ error,
+ },
+ });
+ }
}
function* shiftSelectWidgetsSaga(
action: ReduxAction<{ widgetId: string; siblingWidgets: string[] }>,
) {
- const { siblingWidgets, widgetId } = action.payload;
- const selectedWidgets: string[] = yield select(getSelectedWidgets);
- const lastSelectedWidget: string = yield select(getSelectedWidget);
- const lastSelectedWidgetIndex = siblingWidgets.indexOf(lastSelectedWidget);
- const isWidgetSelected = selectedWidgets.includes(widgetId);
- if (!isWidgetSelected && lastSelectedWidgetIndex > -1) {
- const selectedWidgetIndex = siblingWidgets.indexOf(widgetId);
- const start =
- lastSelectedWidgetIndex < selectedWidgetIndex
- ? lastSelectedWidgetIndex
- : selectedWidgetIndex;
- const end =
- lastSelectedWidgetIndex < selectedWidgetIndex
- ? selectedWidgetIndex
- : lastSelectedWidgetIndex;
- const unSelectedSiblings = siblingWidgets.slice(start + 1, end);
- if (unSelectedSiblings && unSelectedSiblings.length) {
- yield put(silentAddSelectionsAction(unSelectedSiblings));
+ try {
+ const { siblingWidgets, widgetId } = action.payload;
+ const selectedWidgets: string[] = yield select(getSelectedWidgets);
+ const lastSelectedWidget: string = yield select(getSelectedWidget);
+ const lastSelectedWidgetIndex = siblingWidgets.indexOf(lastSelectedWidget);
+ const isWidgetSelected = selectedWidgets.includes(widgetId);
+ if (!isWidgetSelected && lastSelectedWidgetIndex > -1) {
+ const selectedWidgetIndex = siblingWidgets.indexOf(widgetId);
+ const start =
+ lastSelectedWidgetIndex < selectedWidgetIndex
+ ? lastSelectedWidgetIndex
+ : selectedWidgetIndex;
+ const end =
+ lastSelectedWidgetIndex < selectedWidgetIndex
+ ? selectedWidgetIndex
+ : lastSelectedWidgetIndex;
+ const unSelectedSiblings = siblingWidgets.slice(start + 1, end);
+ if (unSelectedSiblings && unSelectedSiblings.length) {
+ yield put(silentAddSelectionsAction(unSelectedSiblings));
+ }
}
+ yield put(selectWidgetInitAction(widgetId, true));
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.WIDGET_SELECTION_ERROR,
+ payload: {
+ action: ReduxActionTypes.SHIFT_SELECT_WIDGET_INIT,
+ error,
+ },
+ });
}
- yield put(selectWidgetInitAction(widgetId, true));
}
function* selectMultipleWidgetsSaga(
action: ReduxAction<{ widgetIds: string[] }>,
) {
- const { widgetIds } = action.payload;
- if (!widgetIds || !widgetIds.length) {
- return;
- }
- const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
- const parentToMatch = allWidgets[widgetIds[0]].parentId;
- const doesNotMatchParent = widgetIds.some((each) => {
- return allWidgets[each].parentId !== parentToMatch;
- });
- if (doesNotMatchParent) {
- return;
- } else {
- yield put(selectWidgetAction());
- yield put(selectMultipleWidgetsAction(widgetIds));
+ try {
+ const { widgetIds } = action.payload;
+ if (!widgetIds || !widgetIds.length) {
+ return;
+ }
+ const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets);
+ const parentToMatch = allWidgets[widgetIds[0]].parentId;
+ const doesNotMatchParent = widgetIds.some((each) => {
+ return allWidgets[each].parentId !== parentToMatch;
+ });
+ if (doesNotMatchParent) {
+ return;
+ } else {
+ yield put(selectWidgetAction());
+ yield put(selectMultipleWidgetsAction(widgetIds));
+ }
+ } catch (error) {
+ yield put({
+ type: ReduxActionErrorTypes.WIDGET_SELECTION_ERROR,
+ payload: {
+ action: ReduxActionTypes.SELECT_MULTIPLE_WIDGETS_INIT,
+ error,
+ },
+ });
}
}
diff --git a/app/client/src/sagas/index.tsx b/app/client/src/sagas/index.tsx
index 600f4848f7e2..fe1ab8aef422 100644
--- a/app/client/src/sagas/index.tsx
+++ b/app/client/src/sagas/index.tsx
@@ -37,6 +37,7 @@ import draggingCanvasSagas from "./DraggingCanvasSagas";
import log from "loglevel";
import * as sentry from "@sentry/react";
+import formEvaluationChangeListener from "./FormEvaluationSaga";
const sagas = [
initSagas,
pageSagas,
@@ -62,6 +63,7 @@ const sagas = [
evaluationsSaga,
onboardingSagas,
actionExecutionChangeListeners,
+ formEvaluationChangeListener,
utilSagas,
globalSearchSagas,
recentEntitiesSagas,
diff --git a/app/client/src/selectors/appCollabSelectors.tsx b/app/client/src/selectors/appCollabSelectors.tsx
index 17d074aff5db..159d9374bdfd 100644
--- a/app/client/src/selectors/appCollabSelectors.tsx
+++ b/app/client/src/selectors/appCollabSelectors.tsx
@@ -2,6 +2,7 @@ import { createSelector } from "reselect";
import { AppState } from "reducers";
import { AppCollabReducerState } from "reducers/uiReducers/appCollabReducer";
import { getCurrentUser } from "./usersSelectors";
+import getFeatureFlags from "../utils/featureFlags";
export const getAppCollabState = (state: AppState) => state.ui.appCollab;
@@ -11,3 +12,5 @@ export const getRealtimeAppEditors = createSelector(
(appCollab: AppCollabReducerState, currentUser) =>
appCollab.editors.filter((el) => el.email !== currentUser?.email),
);
+
+export const isMultiplayerEnabledForUser = () => getFeatureFlags().MULTIPLAYER;
diff --git a/app/client/src/selectors/crudInfoModalSelectors.ts b/app/client/src/selectors/crudInfoModalSelectors.ts
index c2667b981273..8a89449fa1ec 100644
--- a/app/client/src/selectors/crudInfoModalSelectors.ts
+++ b/app/client/src/selectors/crudInfoModalSelectors.ts
@@ -1,4 +1,24 @@
import { AppState } from "reducers";
+import { createSelector } from "reselect";
+import {
+ CrudInfoModalReduxState,
+ GenerateCRUDSuccessInfoData,
+} from "reducers/uiReducers/crudInfoModalReducer";
-export const getCrudInfoModalOpen = (state: AppState): boolean =>
- state.ui.crudInfoModal.crudInfoModalOpen;
+export type CrudInfoModalData = {
+ crudInfoModalOpen: boolean;
+ generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null;
+};
+
+const getCrudInfoModalState = (state: AppState): CrudInfoModalReduxState =>
+ state.ui.crudInfoModal;
+
+export const getCrudInfoModalData = createSelector(
+ getCrudInfoModalState,
+ (crudInfoModal) => {
+ return {
+ crudInfoModalOpen: crudInfoModal.crudInfoModalOpen,
+ generateCRUDSuccessInfo: crudInfoModal.generateCRUDSuccessInfo,
+ };
+ },
+);
diff --git a/app/client/src/selectors/dataTreeSelectors.ts b/app/client/src/selectors/dataTreeSelectors.ts
index 6ad8a33ddcf9..a997d82a4305 100644
--- a/app/client/src/selectors/dataTreeSelectors.ts
+++ b/app/client/src/selectors/dataTreeSelectors.ts
@@ -53,7 +53,8 @@ export const getLoadingEntities = (state: AppState) =>
*
* @param state
*/
-export const getDataTree = (state: AppState) => state.evaluations.tree;
+export const getDataTree = (state: AppState): DataTree =>
+ state.evaluations.tree;
// For autocomplete. Use actions cached responses if
// there isn't a response already
diff --git a/app/client/src/selectors/debuggerSelectors.tsx b/app/client/src/selectors/debuggerSelectors.tsx
index a0e005e8afe4..4e115f703602 100644
--- a/app/client/src/selectors/debuggerSelectors.tsx
+++ b/app/client/src/selectors/debuggerSelectors.tsx
@@ -1,3 +1,13 @@
import { AppState } from "reducers";
-
+import { createSelector } from "reselect";
export const getDebuggerErrors = (state: AppState) => state.ui.debugger.errors;
+export const hideErrors = (state: AppState) => state.ui.debugger.hideErrors;
+export const getFilteredErrors = createSelector(
+ getDebuggerErrors,
+ hideErrors,
+ (errors, hideErrors) => {
+ if (hideErrors) return {};
+
+ return errors;
+ },
+);
diff --git a/app/client/src/selectors/editorSelectors.tsx b/app/client/src/selectors/editorSelectors.tsx
index b48de358df6a..9bcb641a88c6 100644
--- a/app/client/src/selectors/editorSelectors.tsx
+++ b/app/client/src/selectors/editorSelectors.tsx
@@ -19,11 +19,18 @@ import { OccupiedSpace } from "constants/editorConstants";
import { getDataTree, getLoadingEntities } from "selectors/dataTreeSelectors";
import _ from "lodash";
import { ContainerWidgetProps } from "widgets/ContainerWidget";
-import { DataTreeWidget, ENTITY_TYPE } from "entities/DataTree/dataTreeFactory";
+import {
+ DataTree,
+ DataTreeWidget,
+ ENTITY_TYPE,
+} from "entities/DataTree/dataTreeFactory";
import { getActions } from "selectors/entitiesSelector";
import { getCanvasWidgets } from "./entitiesSelector";
-import { WidgetTypes } from "../constants/WidgetConstants";
+import {
+ MAIN_CONTAINER_WIDGET_ID,
+ WidgetTypes,
+} from "../constants/WidgetConstants";
const getWidgetConfigs = (state: AppState) => state.entities.widgetConfig;
const getWidgetSideBar = (state: AppState) => state.ui.widgetSidebar;
@@ -142,6 +149,17 @@ export const getWidgetCards = createSelector(
},
);
+const getMainContainer = (
+ canvasWidgets: CanvasWidgetsReduxState,
+ evaluatedDataTree: DataTree,
+) => {
+ const canvasWidget = canvasWidgets[MAIN_CONTAINER_WIDGET_ID];
+ const evaluatedWidget = _.find(evaluatedDataTree, {
+ widgetId: MAIN_CONTAINER_WIDGET_ID,
+ }) as DataTreeWidget;
+ return createCanvasWidget(canvasWidget, evaluatedWidget);
+};
+
export const getCanvasWidgetDsl = createSelector(
getCanvasWidgets,
getDataTree,
@@ -151,21 +169,31 @@ export const getCanvasWidgetDsl = createSelector(
evaluatedDataTree,
loadingEntities,
): ContainerWidgetProps => {
- const widgets: Record = {};
- Object.keys(canvasWidgets).forEach((widgetKey) => {
- const canvasWidget = canvasWidgets[widgetKey];
- const evaluatedWidget = _.find(evaluatedDataTree, {
- widgetId: widgetKey,
- }) as DataTreeWidget;
- if (evaluatedWidget) {
- widgets[widgetKey] = createCanvasWidget(canvasWidget, evaluatedWidget);
- } else {
- widgets[widgetKey] = createLoadingWidget(canvasWidget);
- }
- widgets[widgetKey].isLoading = loadingEntities.has(
- canvasWidget.widgetName,
- );
- });
+ const widgets: Record = {
+ [MAIN_CONTAINER_WIDGET_ID]: getMainContainer(
+ canvasWidgets,
+ evaluatedDataTree,
+ ),
+ };
+ Object.keys(canvasWidgets)
+ .filter((each) => each !== MAIN_CONTAINER_WIDGET_ID)
+ .forEach((widgetKey) => {
+ const canvasWidget = canvasWidgets[widgetKey];
+ const evaluatedWidget = _.find(evaluatedDataTree, {
+ widgetId: widgetKey,
+ }) as DataTreeWidget;
+ if (evaluatedWidget) {
+ widgets[widgetKey] = createCanvasWidget(
+ canvasWidget,
+ evaluatedWidget,
+ );
+ } else {
+ widgets[widgetKey] = createLoadingWidget(canvasWidget);
+ }
+ widgets[widgetKey].isLoading = loadingEntities.has(
+ canvasWidget.widgetName,
+ );
+ });
return CanvasWidgetsNormalizer.denormalize("0", {
canvasWidgets: widgets,
diff --git a/app/client/src/selectors/entitiesSelector.ts b/app/client/src/selectors/entitiesSelector.ts
index c2563f5780ae..0bad43e3e15c 100644
--- a/app/client/src/selectors/entitiesSelector.ts
+++ b/app/client/src/selectors/entitiesSelector.ts
@@ -17,8 +17,6 @@ import { CanvasWidgetsReduxState } from "../reducers/entityReducers/canvasWidget
import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
import { AppStoreState } from "reducers/entityReducers/appReducer";
import { GenerateCRUDEnabledPluginMap } from "../api/PluginApi";
-import { PLUGIN_PACKAGE_NAME } from "../pages/Editor/GeneratePage/components/constants";
-
import { APP_MODE } from "entities/App";
export const getEntities = (state: AppState): AppState["entities"] =>
@@ -124,6 +122,10 @@ export const getIsFetchingSinglePluginForm = (
return !!state.entities.plugins.fetchingSinglePluginForm[pluginId];
};
+export const getIsExecutingDatasourceQuery = (state: AppState): boolean => {
+ return state.entities.datasources.executingDatasourceQuery;
+};
+
export const getEditorConfig = (state: AppState, pluginId: string): any[] => {
return state.entities.plugins.editorConfigs[pluginId];
};
@@ -252,13 +254,8 @@ export const getGenerateCRUDEnabledPluginMap = createSelector(
getPlugins,
(plugins) => {
const pluginIdGenerateCRUDPageEnabled: GenerateCRUDEnabledPluginMap = {};
- // Disable google sheet plugin
plugins.map((plugin) => {
- if (
- plugin.generateCRUDPageComponent &&
- plugin.packageName !== PLUGIN_PACKAGE_NAME.GOOGLE_SHEETS &&
- plugin.packageName !== PLUGIN_PACKAGE_NAME.S3
- ) {
+ if (plugin.generateCRUDPageComponent) {
pluginIdGenerateCRUDPageEnabled[plugin.id] = plugin.packageName;
}
});
diff --git a/app/client/src/selectors/formSelectors.ts b/app/client/src/selectors/formSelectors.ts
index f443df9bbb4b..6a6dce9aaa03 100644
--- a/app/client/src/selectors/formSelectors.ts
+++ b/app/client/src/selectors/formSelectors.ts
@@ -1,6 +1,8 @@
import { getFormValues, isValid, getFormInitialValues } from "redux-form";
import { AppState } from "reducers";
import { ActionData } from "reducers/entityReducers/actionsReducer";
+import { UIComponentTypes } from "../api/PluginApi";
+import { Plugin } from "api/PluginApi";
type GetFormData = (
state: AppState,
@@ -19,3 +21,23 @@ export const getApiName = (state: AppState, id: string) => {
(action: ActionData) => action.config.id === id,
)?.config.name;
};
+
+export const getFormEvaluationState = (state: AppState) =>
+ state.evaluations.formEvaluation;
+
+// Selector to get UIComponent type from the redux state
+export const getUIComponent = (pluginId: string, allPlugins: Plugin[]) => {
+ let uiComponent = UIComponentTypes.DbEditorForm;
+
+ if (!!pluginId) {
+ // Adding uiComponent field to switch form type to UQI or allow for backward compatibility
+ const plugin = allPlugins.find((plugin: Plugin) =>
+ !!pluginId ? plugin.id === pluginId : false,
+ );
+ // Defaults to old value, new value can be DBEditorForm or UQIDBEditorForm
+ if (plugin) {
+ uiComponent = plugin.uiComponent;
+ }
+ }
+ return uiComponent;
+};
diff --git a/app/client/src/selectors/onboardingSelectors.tsx b/app/client/src/selectors/onboardingSelectors.tsx
index c170209a4c03..8b45231c9cc6 100644
--- a/app/client/src/selectors/onboardingSelectors.tsx
+++ b/app/client/src/selectors/onboardingSelectors.tsx
@@ -5,3 +5,6 @@ export const getIsOnboardingHelperVisible = (state: AppState) => {
const isCommentModeInUrl = urlSearchParams.get("isCommentMode");
return state.ui.onBoarding.showHelper && !isCommentModeInUrl;
};
+
+export const showWelcomeScreen = (state: AppState) =>
+ state.ui.onBoarding.showOnboardingLoader;
diff --git a/app/client/src/selectors/propertyPaneSelectors.tsx b/app/client/src/selectors/propertyPaneSelectors.tsx
index e4f4f9c6fdb2..187498b99bd8 100644
--- a/app/client/src/selectors/propertyPaneSelectors.tsx
+++ b/app/client/src/selectors/propertyPaneSelectors.tsx
@@ -11,6 +11,7 @@ import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsRe
import { getSelectedWidget, getSelectedWidgets } from "./ui";
import { EVALUATION_PATH } from "utils/DynamicBindingUtils";
import { DataTreeEntity } from "entities/DataTree/dataTreeFactory";
+import { generateClassName } from "utils/generators";
export type WidgetProperties = WidgetProps & {
[EVALUATION_PATH]?: DataTreeEntity;
@@ -163,6 +164,9 @@ export const getIsPropertyPaneVisible = createSelector(
lastSelectedWidget,
widgets,
) => {
+ const el = document.getElementsByClassName(
+ generateClassName(pane.widgetId),
+ )[0];
const isWidgetSelected = pane.widgetId
? lastSelectedWidget === pane.widgetId || widgets.includes(pane.widgetId)
: false;
@@ -172,6 +176,7 @@ export const getIsPropertyPaneVisible = createSelector(
!multipleWidgetsSelected &&
!isResizingorDragging &&
pane.isVisible &&
+ el &&
pane.widgetId
);
},
diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
index 518a3857f39e..408b80a22cca 100644
--- a/app/client/src/utils/AnalyticsUtil.tsx
+++ b/app/client/src/utils/AnalyticsUtil.tsx
@@ -156,8 +156,16 @@ export type EventName =
| "CONNECT_DATA_CLICK"
| "RESPONSE_TAB_RUN_ACTION_CLICK"
| "ASSOCIATED_ENTITY_DROPDOWN_CLICK"
+ | "PAGES_LIST_LOAD"
+ | "WIDGET_GROUP"
| "CLOSE_GEN_PAGE_INFO_MODAL"
- | "PAGES_LIST_LOAD";
+ | "PAGES_LIST_LOAD"
+ | "COMMENTS_TOGGLE_MODE"
+ | "COMMENTS_ONBOARDING_SKIP_BUTTON_CLICK"
+ | "COMMENTS_ONBOARDING_STEP_CHANGE"
+ | "COMMENTS_ONBOARDING_SUBMIT_BUTTON_CLICK"
+ | "COMMENTS_ONBOARDING_MODAL_DISMISSED"
+ | "COMMENTS_ONBOARDING_MODAL_TRIGGERED";
function getApplicationId(location: Location) {
const pathSplit = location.pathname.split("/");
diff --git a/app/client/src/utils/AppsmithConsole.ts b/app/client/src/utils/AppsmithConsole.ts
index 5fb5d1b339d7..bf9ff65265ca 100644
--- a/app/client/src/utils/AppsmithConsole.ts
+++ b/app/client/src/utils/AppsmithConsole.ts
@@ -48,11 +48,11 @@ function error(ev: LogActionPayload) {
}
// This is used to add an error to the errors tab
-function addError(payload: LogActionPayload) {
+function addError(payload: LogActionPayload, severity = Severity.ERROR) {
dispatchAction(
addErrorLogInit({
...payload,
- severity: Severity.ERROR,
+ severity: severity,
timestamp: getTimeStamp(),
}),
);
diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx
index 6e9090a6b7c9..410e17084f3c 100644
--- a/app/client/src/utils/AppsmithUtils.tsx
+++ b/app/client/src/utils/AppsmithUtils.tsx
@@ -302,3 +302,35 @@ export const retryPromise = (
export const getRandomPaletteColor = (colorPalette: string[]) => {
return colorPalette[Math.floor(Math.random() * colorPalette.length)];
};
+
+export const isBlobUrl = (url: string) => {
+ return typeof url === "string" && url.startsWith("blob:");
+};
+
+/**
+ *
+ * @param data string file data
+ * @param type string file type
+ * @returns string containing blob id and type
+ */
+export const createBlobUrl = (data: string, type: string) => {
+ let url = URL.createObjectURL(data);
+ url = url.replace(
+ `${window.location.protocol}//${window.location.hostname}/`,
+ "",
+ );
+
+ return `${url}?type=${type}`;
+};
+
+/**
+ *
+ * @param blobId string blob id along with type.
+ * @returns [string,string] [blobUrl, type]
+ */
+export const parseBlobUrl = (blobId: string) => {
+ const url = `blob:${window.location.protocol}//${
+ window.location.hostname
+ }/${blobId.substring(5)}`;
+ return url.split("?type=");
+};
diff --git a/app/client/src/utils/DynamicBindingUtils.ts b/app/client/src/utils/DynamicBindingUtils.ts
index b0585db4d952..26620e42f46b 100644
--- a/app/client/src/utils/DynamicBindingUtils.ts
+++ b/app/client/src/utils/DynamicBindingUtils.ts
@@ -12,6 +12,9 @@ import { getEntityNameAndPropertyPath } from "workers/evaluationUtils";
import forge from "node-forge";
export type DependencyMap = Record>;
+export type FormEditorConfigs = Record;
+export type FormSettingsConfigs = Record
