Fix move/copy success/failure workflow (#47)

app/client/src/actions/queryPaneActions.ts

@@ -18,12 +18,9 @@ export const initQueryPane = (
   };
 };
 
-export const changeQuery = (
+export const changeQuery = (id: string): ReduxAction<{ id: string }> => {
-  id: string,
-  pluginType: string,
-): ReduxAction<{ id: string; pluginType: string }> => {
   return {
     type: ReduxActionTypes.QUERY_PANE_CHANGE,
-    payload: { id, pluginType },
+    payload: { id },
   };
 };

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<Props, ApiHomeScreenState> {
       </React.Fragment>
     );
 
-    if (this.props.isCreatingApi) {
-      return (
-        <LoadingContainer>
-          <Spinner size={30} />
-        </LoadingContainer>
-      );
-    }
-
     return (
       <React.Fragment>
         <ApiHomePage

app/client/src/pages/Editor/APIEditor/index.tsx

@@ -21,12 +21,21 @@ import { getActionById, getCurrentPageName } from "selectors/editorSelectors";
 import { Plugin } from "api/PluginApi";
 import { RapidApiAction, RestAction, PaginationType } from "entities/Action";
 import { getApiName } from "selectors/formSelectors";
+import Spinner from "components/editorComponents/Spinner";
+import styled from "styled-components";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+
+const LoadingContainer = styled(CenteredWrapper)`
+  height: 50%;
+`;
 
 interface ReduxStateProps {
   actions: ActionDataState;
   isRunning: Record<string, boolean>;
   isDeleting: Record<string, boolean>;
   isCreating: boolean;
+  isMoving: boolean;
+  isCopying: boolean;
   apiName: string;
   currentApplication: UserApplication;
   currentPageName: string | undefined;
@@ -105,8 +114,17 @@ class ApiEditor extends React.Component<Props> {
       isRunning,
       isDeleting,
       isCreating,
+      isCopying,
+      isMoving,
       paginationType,
     } = this.props;
+    if (isCreating || isCopying || isMoving) {
+      return (
+        <LoadingContainer>
+          <Spinner size={30} />
+        </LoadingContainer>
+      );
+    }
 
     let formUiComponent: string | undefined;
     if (apiId) {
@@ -124,7 +142,6 @@ class ApiEditor extends React.Component<Props> {
         history={this.props.history}
         location={this.props.location}
         match={this.props.match}
-        isCreatingApi={isCreating}
       />
     );
 
@@ -184,7 +201,13 @@ class ApiEditor extends React.Component<Props> {
 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,
   };
 };
 

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;

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<QueryEditorRouteParams>;
@@ -78,6 +86,8 @@ class QueryEditor extends React.Component<Props> {
       executedQueryData,
       selectedPluginPackage,
       isCreating,
+      isMoving,
+      isCopying,
       runErrorMessage,
     } = this.props;
     const { applicationId, pageId } = this.props.match.params;
@@ -87,6 +97,14 @@ class QueryEditor extends React.Component<Props> {
         <EmptyStateContainer>{"Plugin is not installed"}</EmptyStateContainer>
       );
     }
+
+    if (isCreating || isCopying || isMoving) {
+      return (
+        <LoadingContainer>
+          <Spinner size={30} />
+        </LoadingContainer>
+      );
+    }
     const { isRunning, isDeleting } = queryPane;
 
     const validDataSources: Array<Datasource> = [];
@@ -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,
   };
 };
 

app/client/src/pages/Editor/QuerySidebar.tsx

@@ -62,7 +62,7 @@ interface ReduxStateProps {
 
 interface ReduxDispatchProps {
   createAction: (data: Partial<RestAction>) => 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<Props> {
   };
 
   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<Props> {
   };
 
   renderItem = (query: RestAction) => {
+    console.log({ query });
     return (
       <ActionItem>
         <StyledImage
-          src={getPluginImage(this.props.plugins, query.pluginId)}
+          src={getPluginImage(this.props.plugins, query.datasource.pluginId)}
           className="pluginImage"
           alt="Plugin Image"
         />
@@ -178,8 +179,8 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
 const mapDispatchToProps = (dispatch: Function): ReduxDispatchProps => ({
   createAction: (data: Partial<RestAction>) =>
     dispatch(createActionRequest(data)),
-  onQueryChange: (queryId: string, pluginType: string) => {
+  onQueryChange: (queryId: string) => {
-    dispatch(changeQuery(queryId, pluginType));
+    dispatch(changeQuery(queryId));
   },
   initQueryPane: (pluginType: string, urlId?: string) =>
     dispatch(initQueryPane(pluginType, urlId)),

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<string, boolean>;
   isSaving: Record<string, boolean>;
   isDeleting: Record<string, boolean>;
@@ -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 }>,

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<RestAction>) {
   try {
@@ -433,6 +438,20 @@ function* setActionPropertySaga(action: ReduxAction<SetActionPropertyPayload>) {
   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),
   ]);
 }

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<RestAction>) {
   }
 }
 
-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,

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(
+function* changeQuerySaga(actionPayload: ReduxAction<{ id: string }>) {
-  actionPayload: ReduxAction<{ id: string; pluginType: 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<RestAction>) {
   }
 }
 
-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