From 0b86b503aaa4dc9724025b8ff535cf5fd54b4cd3 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Tue, 7 Jul 2020 13:37:37 +0530 Subject: [PATCH] Fix move/copy success/failure workflow (#47) --- app/client/src/actions/queryPaneActions.ts | 7 ++--- .../pages/Editor/APIEditor/ApiHomeScreen.tsx | 9 ------ .../src/pages/Editor/APIEditor/index.tsx | 29 +++++++++++++++++-- .../src/pages/Editor/QueryEditor/helpers.ts | 4 +-- .../src/pages/Editor/QueryEditor/index.tsx | 24 +++++++++++++-- app/client/src/pages/Editor/QuerySidebar.tsx | 11 +++---- .../src/reducers/uiReducers/apiPaneReducer.ts | 28 ++++++++++++++++++ app/client/src/sagas/ActionSagas.ts | 23 +++++++++++++++ app/client/src/sagas/ApiPaneSagas.ts | 21 -------------- app/client/src/sagas/QueryPaneSagas.ts | 26 ++--------------- 10 files changed, 113 insertions(+), 69 deletions(-) diff --git a/app/client/src/actions/queryPaneActions.ts b/app/client/src/actions/queryPaneActions.ts index 7b15630ccc..fc44741975 100644 --- a/app/client/src/actions/queryPaneActions.ts +++ b/app/client/src/actions/queryPaneActions.ts @@ -18,12 +18,9 @@ export const initQueryPane = ( }; }; -export const changeQuery = ( - id: string, - pluginType: string, -): ReduxAction<{ id: string; pluginType: string }> => { +export const changeQuery = (id: string): ReduxAction<{ id: string }> => { return { type: ReduxActionTypes.QUERY_PANE_CHANGE, - payload: { id, pluginType }, + payload: { id }, }; }; diff --git a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx index a8d84c866a..8fba14ee9a 100644 --- a/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx +++ b/app/client/src/pages/Editor/APIEditor/ApiHomeScreen.tsx @@ -370,7 +370,6 @@ type ApiHomeScreenProps = { push: (data: string) => void; }; isFetchingProviders: boolean; - isCreatingApi: boolean; providersTotal: number; isSwitchingCategory: boolean; createNewApiAction: (pageId: string) => void; @@ -659,14 +658,6 @@ class ApiHomeScreen extends React.Component { ); - if (this.props.isCreatingApi) { - return ( - - - - ); - } - return ( ; isDeleting: Record; isCreating: boolean; + isMoving: boolean; + isCopying: boolean; apiName: string; currentApplication: UserApplication; currentPageName: string | undefined; @@ -105,8 +114,17 @@ class ApiEditor extends React.Component { isRunning, isDeleting, isCreating, + isCopying, + isMoving, paginationType, } = this.props; + if (isCreating || isCopying || isMoving) { + return ( + + + + ); + } let formUiComponent: string | undefined; if (apiId) { @@ -124,7 +142,6 @@ class ApiEditor extends React.Component { history={this.props.history} location={this.props.location} match={this.props.match} - isCreatingApi={isCreating} /> ); @@ -184,7 +201,13 @@ class ApiEditor extends React.Component { const mapStateToProps = (state: AppState, props: any): ReduxStateProps => { const apiAction = getActionById(state, props); const apiName = getApiName(state, props.match.params.apiId); - const { isDeleting, isRunning, isCreating } = state.ui.apiPane; + const { + isDeleting, + isRunning, + isCreating, + isMoving, + isCopying, + } = state.ui.apiPane; return { actions: state.entities.actions, currentApplication: getCurrentApplication(state), @@ -198,6 +221,8 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => { isRunning, isDeleting, isCreating, + isMoving, + isCopying, }; }; diff --git a/app/client/src/pages/Editor/QueryEditor/helpers.ts b/app/client/src/pages/Editor/QueryEditor/helpers.ts index 5c2b7780a1..f2841cad56 100644 --- a/app/client/src/pages/Editor/QueryEditor/helpers.ts +++ b/app/client/src/pages/Editor/QueryEditor/helpers.ts @@ -7,9 +7,9 @@ import ImageAlt from "assets/images/placeholder-image.svg"; import Postgres from "assets/images/Postgress.png"; import MongoDB from "assets/images/MongoDB.png"; -export const getPluginImage = (plugins: Plugin[], pluginId: string) => { +export const getPluginImage = (plugins: Plugin[], pluginId?: string) => { const plugin = plugins.find(plugin => plugin.id === pluginId); - + console.log({ plugins, pluginId, plugin }); switch (plugin?.packageName) { case PLUGIN_PACKAGE_MONGO: return MongoDB; diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx index 38f9f8ab21..aa28a7a5b1 100644 --- a/app/client/src/pages/Editor/QueryEditor/index.tsx +++ b/app/client/src/pages/Editor/QueryEditor/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import { RouteComponentProps } from "react-router"; import { connect } from "react-redux"; -import { getFormValues, getFormInitialValues, change } from "redux-form"; +import { getFormValues, change } from "redux-form"; import _ from "lodash"; import styled from "styled-components"; import { QueryEditorRouteParams } from "constants/routes"; @@ -25,6 +25,8 @@ import { } from "constants/QueryEditorConstants"; import { QueryAction } from "entities/Action"; import { getPluginImage } from "pages/Editor/QueryEditor/helpers"; +import Spinner from "components/editorComponents/Spinner"; +import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper"; const EmptyStateContainer = styled.div` display: flex; @@ -32,6 +34,10 @@ const EmptyStateContainer = styled.div` font-size: 20px; `; +const LoadingContainer = styled(CenteredWrapper)` + height: 50%; +`; + type ReduxDispatchProps = { runAction: (actionId: string) => void; deleteAction: (id: string, name: string) => void; @@ -48,6 +54,8 @@ type ReduxStateProps = { executedQueryData: any; selectedPluginPackage: string | undefined; isCreating: boolean; + isMoving: boolean; + isCopying: boolean; }; type StateAndRouteProps = RouteComponentProps; @@ -78,6 +86,8 @@ class QueryEditor extends React.Component { executedQueryData, selectedPluginPackage, isCreating, + isMoving, + isCopying, runErrorMessage, } = this.props; const { applicationId, pageId } = this.props.match.params; @@ -87,6 +97,14 @@ class QueryEditor extends React.Component { {"Plugin is not installed"} ); } + + if (isCreating || isCopying || isMoving) { + return ( + + + + ); + } const { isRunning, isDeleting } = queryPane; const validDataSources: Array = []; @@ -153,7 +171,9 @@ const mapStateToProps = (state: AppState): ReduxStateProps => { queryPane: state.ui.queryPane, formData, selectedPluginPackage, - isCreating: state.ui.queryPane.isCreating, + isCreating: state.ui.apiPane.isCreating, + isMoving: state.ui.apiPane.isMoving, + isCopying: state.ui.apiPane.isCopying, }; }; diff --git a/app/client/src/pages/Editor/QuerySidebar.tsx b/app/client/src/pages/Editor/QuerySidebar.tsx index 5636c0a10a..9f1e785517 100644 --- a/app/client/src/pages/Editor/QuerySidebar.tsx +++ b/app/client/src/pages/Editor/QuerySidebar.tsx @@ -62,7 +62,7 @@ interface ReduxStateProps { interface ReduxDispatchProps { createAction: (data: Partial) => void; - onQueryChange: (id: string, pluginType: string) => void; + onQueryChange: (id: string) => void; initQueryPane: (pluginType: string, urlId?: string) => void; moveAction: ( id: string, @@ -96,7 +96,7 @@ class QuerySidebar extends React.Component { }; handleQueryChange = (queryId: string) => { - this.props.onQueryChange(queryId, QUERY_CONSTANT); + this.props.onQueryChange(queryId); }; handleMove = (itemId: string, destinationPageId: string) => { @@ -128,10 +128,11 @@ class QuerySidebar extends React.Component { }; renderItem = (query: RestAction) => { + console.log({ query }); return ( @@ -178,8 +179,8 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({ const mapDispatchToProps = (dispatch: Function): ReduxDispatchProps => ({ createAction: (data: Partial) => dispatch(createActionRequest(data)), - onQueryChange: (queryId: string, pluginType: string) => { - dispatch(changeQuery(queryId, pluginType)); + onQueryChange: (queryId: string) => { + dispatch(changeQuery(queryId)); }, initQueryPane: (pluginType: string, urlId?: string) => dispatch(initQueryPane(pluginType, urlId)), diff --git a/app/client/src/reducers/uiReducers/apiPaneReducer.ts b/app/client/src/reducers/uiReducers/apiPaneReducer.ts index 942a038256..15818268f7 100644 --- a/app/client/src/reducers/uiReducers/apiPaneReducer.ts +++ b/app/client/src/reducers/uiReducers/apiPaneReducer.ts @@ -11,6 +11,8 @@ const initialState: ApiPaneReduxState = { lastUsed: "", isCreating: false, isFetching: false, + isMoving: false, + isCopying: false, isRunning: {}, isSaving: {}, isDeleting: {}, @@ -26,6 +28,8 @@ export interface ApiPaneReduxState { lastUsed: string; isCreating: boolean; isFetching: boolean; + isMoving: boolean; + isCopying: boolean; isRunning: Record; isSaving: Record; isDeleting: Record; @@ -175,6 +179,30 @@ const apiPaneReducer = createReducer(initialState, { [action.payload.id]: false, }, }), + [ReduxActionTypes.MOVE_ACTION_INIT]: (state: ApiPaneReduxState) => ({ + ...state, + isMoving: true, + }), + [ReduxActionTypes.MOVE_ACTION_SUCCESS]: (state: ApiPaneReduxState) => ({ + ...state, + isMoving: false, + }), + [ReduxActionErrorTypes.MOVE_ACTION_ERROR]: (state: ApiPaneReduxState) => ({ + ...state, + isMoving: false, + }), + [ReduxActionTypes.COPY_ACTION_INIT]: (state: ApiPaneReduxState) => ({ + ...state, + isCopying: true, + }), + [ReduxActionTypes.COPY_ACTION_SUCCESS]: (state: ApiPaneReduxState) => ({ + ...state, + isCopying: false, + }), + [ReduxActionErrorTypes.COPY_ACTION_ERROR]: (state: ApiPaneReduxState) => ({ + ...state, + isCopying: false, + }), [ReduxActionTypes.API_PANE_CHANGE_API]: ( state: ApiPaneReduxState, action: ReduxAction<{ id: string }>, diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts index 93bc464751..66ed871509 100644 --- a/app/client/src/sagas/ActionSagas.ts +++ b/app/client/src/sagas/ActionSagas.ts @@ -56,6 +56,11 @@ import { import { PLUGIN_TYPE_API } from "constants/ApiEditorConstants"; import history from "utils/history"; import { API_EDITOR_URL, QUERIES_EDITOR_URL } from "constants/routes"; +import { getFormData } from "selectors/formSelectors"; +import { API_EDITOR_FORM_NAME, QUERY_EDITOR_FORM_NAME } from "constants/forms"; +import { initialize } from "redux-form"; +import { changeApi } from "actions/apiPaneActions"; +import { changeQuery } from "actions/queryPaneActions"; export function* createActionSaga(actionPayload: ReduxAction) { try { @@ -433,6 +438,20 @@ function* setActionPropertySaga(action: ReduxAction) { yield put(updateAction({ id: actionId })); } +function* handleMoveOrCopySaga(actionPayload: ReduxAction<{ id: string }>) { + const { id } = actionPayload.payload; + const action = yield select(getAction, id); + const isApi = action.pluginType === PLUGIN_TYPE_API; + const isQuery = action.pluginType === QUERY_CONSTANT; + + if (isApi) { + yield put(changeApi(id)); + } + if (isQuery) { + yield put(changeQuery(id)); + } +} + export function* watchActionSagas() { yield all([ takeEvery(ReduxActionTypes.SET_ACTION_PROPERTY, setActionPropertySaga), @@ -447,5 +466,9 @@ export function* watchActionSagas() { ReduxActionTypes.FETCH_ACTIONS_FOR_PAGE_INIT, fetchActionsForPageSaga, ), + takeEvery(ReduxActionTypes.MOVE_ACTION_SUCCESS, handleMoveOrCopySaga), + takeEvery(ReduxActionTypes.COPY_ACTION_SUCCESS, handleMoveOrCopySaga), + takeEvery(ReduxActionErrorTypes.MOVE_ACTION_ERROR, handleMoveOrCopySaga), + takeEvery(ReduxActionErrorTypes.COPY_ACTION_ERROR, handleMoveOrCopySaga), ]); } diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index 5372deb5ee..f320f3e881 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/app/client/src/sagas/ApiPaneSagas.ts @@ -22,7 +22,6 @@ import { import history from "utils/history"; import { API_EDITOR_ID_URL, - API_EDITOR_URL, getProviderTemplatesURL, QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID, DATA_SOURCES_EDITOR_URL, @@ -351,24 +350,6 @@ function* handleActionCreatedSaga(actionPayload: ReduxAction) { } } -function* handleMoveOrCopySaga(actionPayload: ReduxAction<{ id: string }>) { - const { id } = actionPayload.payload; - const action = yield select(getAction, id); - const pluginType = action?.pluginType ?? ""; - - if (pluginType === "API") { - const { values }: { values: RestAction } = yield select( - getFormData, - API_EDITOR_FORM_NAME, - ); - if (values.id === id) { - yield put(initialize(API_EDITOR_FORM_NAME, _.omit(action, "name"))); - } else { - yield put(changeApi(id)); - } - } -} - function* handleCreateNewApiActionSaga( action: ReduxAction<{ pageId: string }>, ) { @@ -459,8 +440,6 @@ export default function* root() { takeEvery(ReduxActionTypes.INIT_API_PANE, initApiPaneSaga), takeEvery(ReduxActionTypes.API_PANE_CHANGE_API, changeApiSaga), takeEvery(ReduxActionTypes.CREATE_ACTION_SUCCESS, handleActionCreatedSaga), - takeEvery(ReduxActionTypes.MOVE_ACTION_SUCCESS, handleMoveOrCopySaga), - takeEvery(ReduxActionTypes.COPY_ACTION_SUCCESS, handleMoveOrCopySaga), takeEvery(ReduxActionTypes.SAVE_API_NAME, handleApiNameChangeSaga), takeEvery( ReduxActionErrorTypes.SAVE_API_NAME_ERROR, diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index 3eba08103f..869c58de19 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -7,7 +7,7 @@ import { ReduxFormActionTypes, } from "constants/ReduxActionConstants"; import { getFormData } from "selectors/formSelectors"; -import { API_EDITOR_FORM_NAME, QUERY_EDITOR_FORM_NAME } from "constants/forms"; +import { QUERY_EDITOR_FORM_NAME } from "constants/forms"; import history from "utils/history"; import { QUERIES_EDITOR_URL, @@ -58,12 +58,10 @@ function* initQueryPaneSaga( if (isCreating) return; - yield put(changeQuery(id, QUERY_CONSTANT)); + yield put(changeQuery(id)); } -function* changeQuerySaga( - actionPayload: ReduxAction<{ id: string; pluginType: string }>, -) { +function* changeQuerySaga(actionPayload: ReduxAction<{ id: string }>) { const { id } = actionPayload.payload; // Typescript says Element does not have blur function but it does; document.activeElement && @@ -121,27 +119,9 @@ function* handleQueryCreatedSaga(actionPayload: ReduxAction) { } } -function* handleMoveOrCopySaga(actionPayload: ReduxAction<{ id: string }>) { - const { id } = actionPayload.payload; - const action = yield select(getAction, id); - const pluginType = action?.pluginType ?? ""; - - if (pluginType === "DB") { - const { values }: { values: RestAction } = yield select( - getFormData, - QUERY_EDITOR_FORM_NAME, - ); - if (values.id === id) { - yield put(initialize(QUERY_EDITOR_FORM_NAME, action)); - } - } -} - export default function* root() { yield all([ takeEvery(ReduxActionTypes.CREATE_ACTION_SUCCESS, handleQueryCreatedSaga), - takeEvery(ReduxActionTypes.MOVE_ACTION_SUCCESS, handleMoveOrCopySaga), - takeEvery(ReduxActionTypes.COPY_ACTION_SUCCESS, handleMoveOrCopySaga), takeEvery(ReduxActionTypes.QUERY_PANE_CHANGE, changeQuerySaga), takeEvery(ReduxActionTypes.INIT_QUERY_PANE, initQueryPaneSaga), // Intercepting the redux-form change actionType