From 19e3e773450397f4f9037b2c39cf86c6b57f38c3 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Fri, 4 Oct 2019 15:52:47 +0530 Subject: [PATCH 1/6] Allow dragging from anywhere on the widget if it is active --- app/client/src/constants/DefaultTheme.tsx | 2 +- .../src/editorComponents/DraggableComponent.tsx | 12 ++++++++---- .../src/editorComponents/ResizableComponent.tsx | 14 +++++++------- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index 34b6872f51..d12a6a842e 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -26,7 +26,7 @@ export type Theme = { export const theme: Theme = { radii: [0, 4, 8, 10, 20, 50], fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64], - spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24], + spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 30], fontWeights: [0, 400, 500, 700], colors: { primary: Colors.GREEN, diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index 11892cfbfb..f299d01ac1 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -51,8 +51,9 @@ const deleteControlIcon = ControlIcons.DELETE_CONTROL({ type DraggableComponentProps = WidgetProps & ContainerProps; -export const ResizingContext: Context<{ +export const RnDContext: Context<{ setIsResizing?: Function; + isDragging?: boolean; }> = createContext({}); const DraggableComponent = (props: DraggableComponentProps) => { @@ -70,13 +71,16 @@ const DraggableComponent = (props: DraggableComponentProps) => { collect: (monitor: DragSourceMonitor) => ({ isDragging: monitor.isDragging(), }), + canDrag: () => { + return !isResizing && !!isFocused && isFocused === props.widgetId; + }, }); return ( - + { if (setFocus) { setFocus(props.widgetId); @@ -108,7 +112,7 @@ const DraggableComponent = (props: DraggableComponentProps) => { {props.children} - + ); }; diff --git a/app/client/src/editorComponents/ResizableComponent.tsx b/app/client/src/editorComponents/ResizableComponent.tsx index 1ceaab6679..dbb9ff6e70 100644 --- a/app/client/src/editorComponents/ResizableComponent.tsx +++ b/app/client/src/editorComponents/ResizableComponent.tsx @@ -4,7 +4,7 @@ import { Rnd } from "react-rnd"; import { XYCoord } from "react-dnd"; import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget"; import { ContainerProps, ParentBoundsContext } from "./ContainerComponent"; -import { ResizingContext } from "./DraggableComponent"; +import { RnDContext } from "./DraggableComponent"; import { WidgetFunctionsContext } from "../pages/Editor"; export type ResizableComponentProps = WidgetProps & ContainerProps; @@ -37,7 +37,7 @@ const ResizableContainer = styled(Rnd)` `; export const ResizableComponent = (props: ResizableComponentProps) => { - const { setIsResizing } = useContext(ResizingContext); + const { setIsResizing, isDragging } = useContext(RnDContext); const { boundingParent } = useContext(ParentBoundsContext); const { updateWidget } = useContext(WidgetFunctionsContext); let bounds = "body"; @@ -89,13 +89,13 @@ export const ResizableComponent = (props: ResizableComponentProps) => { resizeGrid={[props.parentColumnSpace, props.parentRowSpace]} bounds={bounds} enableResizing={{ - top: true, - right: true, - bottom: true, - left: true, + top: true && !isDragging, + right: true && !isDragging, + bottom: true && !isDragging, + left: true && !isDragging, topRight: false, topLeft: false, - bottomRight: true, + bottomRight: true && !isDragging, bottomLeft: false, }} > From eac9e3a2a28adb023f437fdaff7f342aa51287c7 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 12:21:02 +0530 Subject: [PATCH 2/6] add .idea to gitignore --- app/client/.gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/.gitignore b/app/client/.gitignore index 436ff4fe1b..0a4e9d9f84 100755 --- a/app/client/.gitignore +++ b/app/client/.gitignore @@ -26,3 +26,4 @@ yarn-error.log* /out /public/fonts/* /src/assets/icons/fonts/* +.idea From 122a4c543b76db1f3975fa1070a1dc25b6096b08 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 17:59:38 +0530 Subject: [PATCH 3/6] Toast messages for caught errors --- .../src/constants/ReduxActionConstants.tsx | 31 +++++++++++++++++++ app/client/src/constants/errors.ts | 15 +++++++++ .../src/editorComponents/ToastComponent.tsx | 8 +++++ app/client/src/sagas/ErrorSagas.tsx | 17 ++++++++-- app/client/src/sagas/PageSagas.tsx | 1 + 5 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 app/client/src/constants/errors.ts create mode 100644 app/client/src/editorComponents/ToastComponent.tsx diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index a40adcf4e7..1e72503a14 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -1,4 +1,6 @@ +import _ from "lodash"; import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget"; +import * as errorConstants from "./errors"; export const ReduxActionTypes: { [key: string]: string } = { REPORT_ERROR: "REPORT_ERROR", @@ -52,6 +54,35 @@ export const ReduxActionErrorTypes: { [key: string]: string } = { }; export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes]; +const apiErrorHandler = (error: object, fallbackMessage: string) => { + const apiError = _.get(error, "response.data.responseMeta.error"); + if (errorConstants.API_ERROR_CODES.indexOf(apiError.code) > -1) { + return apiError.message; + } + return fallbackMessage; +}; + +export const ActionErrorDisplayMap: { + [key: string]: (error: object) => string; +} = { + [ReduxActionErrorTypes.API_ERROR]: error => + apiErrorHandler(error, errorConstants.DEFAULT_ERROR_MESSAGE), + [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: error => + apiErrorHandler( + error, + errorConstants.DEFAULT_ACTION_ERROR("fetching the page"), + ), + [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: error => + apiErrorHandler( + error, + errorConstants.DEFAULT_ACTION_ERROR("saving the page"), + ), + [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => + errorConstants.DEFAULT_ERROR_MESSAGE, + [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => + errorConstants.DEFAULT_ERROR_MESSAGE, +}; + export interface ReduxAction { type: ReduxActionType | ReduxActionErrorType; payload: T; diff --git a/app/client/src/constants/errors.ts b/app/client/src/constants/errors.ts new file mode 100644 index 0000000000..eccd1a9a80 --- /dev/null +++ b/app/client/src/constants/errors.ts @@ -0,0 +1,15 @@ +export const DEFAULT_ERROR_MESSAGE = "There was an error"; +export const DEFAULT_ACTION_ERROR = (action: string) => + `Incurred an error when ${action}`; + +export const API_ERROR_CODES = [ + 1000, + 4000, + 4001, + 4002, + 4003, + 4004, + 4006, + 5000, + 5001, +]; diff --git a/app/client/src/editorComponents/ToastComponent.tsx b/app/client/src/editorComponents/ToastComponent.tsx new file mode 100644 index 0000000000..27f47d9d4e --- /dev/null +++ b/app/client/src/editorComponents/ToastComponent.tsx @@ -0,0 +1,8 @@ +import { Position, Toaster } from "@blueprintjs/core"; + +// To add a toast import this instance and call .show() +// https://blueprintjs.com/docs/#core/components/toast.example +export default Toaster.create({ + className: "toaster", + position: Position.BOTTOM_RIGHT, +}); diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index 754999101f..d868a64b69 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -2,8 +2,12 @@ import { ReduxActionTypes, ReduxActionErrorTypes, ReduxAction, + ActionErrorDisplayMap, } from "../constants/ReduxActionConstants"; +import AppToaster from "../editorComponents/ToastComponent"; +import { Intent } from "@blueprintjs/core"; + import { ApiResponse } from "../api/ApiResponses"; import { put, takeLatest } from "redux-saga/effects"; @@ -21,10 +25,19 @@ export function* validateResponse(response: ApiResponse) { } } -export function* errorSaga(errorAction: ReduxAction<{ error: any }>) { +export function* errorSaga( + errorAction: ReduxAction<{ error: { message: string } }>, +) { // Just a pass through for now. // Add procedures to customize errors here - console.log(errorAction.payload.error); + console.log({ error: errorAction }); + // Show a toast when the error occurs + const { + type, + payload: { error }, + } = errorAction; + const message = ActionErrorDisplayMap[type](error); + AppToaster.show({ message, intent: Intent.DANGER }); yield put({ type: ReduxActionTypes.REPORT_ERROR, payload: { diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index e63ef3918f..8e844e08d6 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -67,6 +67,7 @@ export function* fetchPageSaga( export function* savePageSaga(savePageAction: ReduxAction) { const savePageRequest = savePageAction.payload; + savePageRequest.pageId = "123443"; try { const savePageResponse: SavePageResponse = yield call( PageApi.savePage, From 866181b3409f1eef289ec57f5f8f1e6232f0c579 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:02:32 +0530 Subject: [PATCH 4/6] remove error creator --- app/client/src/sagas/PageSagas.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/src/sagas/PageSagas.tsx b/app/client/src/sagas/PageSagas.tsx index 8e844e08d6..e63ef3918f 100644 --- a/app/client/src/sagas/PageSagas.tsx +++ b/app/client/src/sagas/PageSagas.tsx @@ -67,7 +67,6 @@ export function* fetchPageSaga( export function* savePageSaga(savePageAction: ReduxAction) { const savePageRequest = savePageAction.payload; - savePageRequest.pageId = "123443"; try { const savePageResponse: SavePageResponse = yield call( PageApi.savePage, From db97974ed0a9f757b57d9caea44ab8784cbd9e8d Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:41:18 +0530 Subject: [PATCH 5/6] review changes --- .../src/constants/ReduxActionConstants.tsx | 31 ------------------- app/client/src/sagas/ErrorSagas.tsx | 29 ++++++++++++----- 2 files changed, 22 insertions(+), 38 deletions(-) diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 1e72503a14..a40adcf4e7 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -1,6 +1,4 @@ -import _ from "lodash"; import { WidgetProps, WidgetCardProps } from "../widgets/BaseWidget"; -import * as errorConstants from "./errors"; export const ReduxActionTypes: { [key: string]: string } = { REPORT_ERROR: "REPORT_ERROR", @@ -54,35 +52,6 @@ export const ReduxActionErrorTypes: { [key: string]: string } = { }; export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes]; -const apiErrorHandler = (error: object, fallbackMessage: string) => { - const apiError = _.get(error, "response.data.responseMeta.error"); - if (errorConstants.API_ERROR_CODES.indexOf(apiError.code) > -1) { - return apiError.message; - } - return fallbackMessage; -}; - -export const ActionErrorDisplayMap: { - [key: string]: (error: object) => string; -} = { - [ReduxActionErrorTypes.API_ERROR]: error => - apiErrorHandler(error, errorConstants.DEFAULT_ERROR_MESSAGE), - [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: error => - apiErrorHandler( - error, - errorConstants.DEFAULT_ACTION_ERROR("fetching the page"), - ), - [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: error => - apiErrorHandler( - error, - errorConstants.DEFAULT_ACTION_ERROR("saving the page"), - ), - [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => - errorConstants.DEFAULT_ERROR_MESSAGE, - [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => - errorConstants.DEFAULT_ERROR_MESSAGE, -}; - export interface ReduxAction { type: ReduxActionType | ReduxActionErrorType; payload: T; diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index d868a64b69..832f7b0706 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -1,13 +1,15 @@ +import _ from "lodash"; +import { Intent } from "@blueprintjs/core"; import { ReduxActionTypes, ReduxActionErrorTypes, ReduxAction, - ActionErrorDisplayMap, } from "../constants/ReduxActionConstants"; - import AppToaster from "../editorComponents/ToastComponent"; -import { Intent } from "@blueprintjs/core"; - +import { + DEFAULT_ERROR_MESSAGE, + DEFAULT_ACTION_ERROR, +} from "../constants/errors"; import { ApiResponse } from "../api/ApiResponses"; import { put, takeLatest } from "redux-saga/effects"; @@ -25,9 +27,22 @@ export function* validateResponse(response: ApiResponse) { } } -export function* errorSaga( - errorAction: ReduxAction<{ error: { message: string } }>, -) { +type IError = object | { message: string }; + +const ActionErrorDisplayMap: { + [key: string]: (error: IError) => string; +} = { + [ReduxActionErrorTypes.API_ERROR]: error => + _.get(error, "message", DEFAULT_ERROR_MESSAGE), + [ReduxActionErrorTypes.FETCH_PAGE_ERROR]: () => + DEFAULT_ACTION_ERROR("fetching the page"), + [ReduxActionErrorTypes.SAVE_PAGE_ERROR]: () => + DEFAULT_ACTION_ERROR("saving the page"), + [ReduxActionErrorTypes.FETCH_WIDGET_CARDS_ERROR]: () => DEFAULT_ERROR_MESSAGE, + [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => DEFAULT_ERROR_MESSAGE, +}; + +export function* errorSaga(errorAction: ReduxAction<{ error: IError }>) { // Just a pass through for now. // Add procedures to customize errors here console.log({ error: errorAction }); From 0179a6f3af04bfd0355973d509fedb997aa73b2a Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 7 Oct 2019 18:49:29 +0530 Subject: [PATCH 6/6] Few more changes --- app/client/src/constants/errors.ts | 12 ------------ app/client/src/editorComponents/ToastComponent.tsx | 1 - app/client/src/sagas/ErrorSagas.tsx | 8 +++++--- 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/app/client/src/constants/errors.ts b/app/client/src/constants/errors.ts index eccd1a9a80..e7b8e60938 100644 --- a/app/client/src/constants/errors.ts +++ b/app/client/src/constants/errors.ts @@ -1,15 +1,3 @@ export const DEFAULT_ERROR_MESSAGE = "There was an error"; export const DEFAULT_ACTION_ERROR = (action: string) => `Incurred an error when ${action}`; - -export const API_ERROR_CODES = [ - 1000, - 4000, - 4001, - 4002, - 4003, - 4004, - 4006, - 5000, - 5001, -]; diff --git a/app/client/src/editorComponents/ToastComponent.tsx b/app/client/src/editorComponents/ToastComponent.tsx index 27f47d9d4e..9376e93940 100644 --- a/app/client/src/editorComponents/ToastComponent.tsx +++ b/app/client/src/editorComponents/ToastComponent.tsx @@ -3,6 +3,5 @@ import { Position, Toaster } from "@blueprintjs/core"; // To add a toast import this instance and call .show() // https://blueprintjs.com/docs/#core/components/toast.example export default Toaster.create({ - className: "toaster", position: Position.BOTTOM_RIGHT, }); diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index 832f7b0706..4f66de37a6 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -27,10 +27,10 @@ export function* validateResponse(response: ApiResponse) { } } -type IError = object | { message: string }; +type ErrorPayloadType = object | { message: string }; const ActionErrorDisplayMap: { - [key: string]: (error: IError) => string; + [key: string]: (error: ErrorPayloadType) => string; } = { [ReduxActionErrorTypes.API_ERROR]: error => _.get(error, "message", DEFAULT_ERROR_MESSAGE), @@ -42,7 +42,9 @@ const ActionErrorDisplayMap: { [ReduxActionErrorTypes.WIDGET_OPERATION_ERROR]: () => DEFAULT_ERROR_MESSAGE, }; -export function* errorSaga(errorAction: ReduxAction<{ error: IError }>) { +export function* errorSaga( + errorAction: ReduxAction<{ error: ErrorPayloadType }>, +) { // Just a pass through for now. // Add procedures to customize errors here console.log({ error: errorAction });