Fix: Action move & copy issues (#381)

* Fix: When copying a query, the app tries to open the API page with the queryID

* Fix: When moving a query, the query input box is empty

app/client/src/pages/Editor/QueryEditor/Form.tsx

@@ -6,7 +6,7 @@ import {
   Field,
 } from "redux-form";
 import styled, { createGlobalStyle } from "styled-components";
-import { Icon, Popover, Spinner } from "@blueprintjs/core";
+import { Icon, Popover, Spinner, Tag } from "@blueprintjs/core";
 import {
   components,
   MenuListComponentProps,
@@ -14,7 +14,7 @@ import {
   OptionTypeBase,
   SingleValueProps,
 } from "react-select";
-import _ from "lodash";
+import { isString } from "lodash";
 import history from "utils/history";
 import { DATA_SOURCES_EDITOR_URL } from "constants/routes";
 import Button from "components/editorComponents/Button";
@@ -155,6 +155,8 @@ const TooltipStyles = createGlobalStyle`
 const ErrorMessage = styled.p`
   font-size: 14px;
   color: ${Colors.RED};
+  display: inline-block;
+  margin-right: 10px;
 `;
 const CreateDatasource = styled.div`
   height: 44px;
@@ -230,7 +232,7 @@ type QueryFormProps = {
   location: {
     state: any;
   };
-  editorConfig: [];
+  editorConfig?: any;
   loadingFormConfigs: boolean;
 };
 
@@ -269,7 +271,7 @@ const QueryEditorForm: React.FC<Props> = (props: Props) => {
   let output: Record<string, any>[] | null = null;
 
   if (executedQueryData) {
-    if (_.isString(executedQueryData.body)) {
+    if (isString(executedQueryData.body)) {
       error = executedQueryData.body;
     } else {
       output = executedQueryData.body;
@@ -440,10 +442,21 @@ const QueryEditorForm: React.FC<Props> = (props: Props) => {
           )}
         </div>
 
-        {!_.isNil(editorConfig) ? (
-          _.map(editorConfig, renderEachConfig)
+        {editorConfig && editorConfig.length > 0 ? (
+          editorConfig.map(renderEachConfig)
         ) : (
-          <ErrorMessage>An unexpected error occurred</ErrorMessage>
+          <>
+            <ErrorMessage>An unexpected error occurred</ErrorMessage>
+            <Tag
+              round
+              intent="warning"
+              interactive
+              minimal
+              onClick={() => window.location.reload()}
+            >
+              Refresh
+            </Tag>
+          </>
         )}
         <div className="executeOnLoad">
           <Field
@@ -492,7 +505,7 @@ const QueryEditorForm: React.FC<Props> = (props: Props) => {
 };
 
 const renderEachConfig = (section: any): any => {
-  return _.map(section.children, (propertyControlOrSection: ControlProps) => {
+  return section.children.map((propertyControlOrSection: ControlProps) => {
     if ("children" in propertyControlOrSection) {
       return renderEachConfig(propertyControlOrSection);
     } else {
@@ -511,6 +524,7 @@ const renderEachConfig = (section: any): any => {
         console.log(e);
       }
     }
+    return null;
   });
 };
 

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

@@ -53,7 +53,7 @@ type ReduxStateProps = {
   responses: any;
   isCreating: boolean;
   pluginImages: Record<string, string>;
-  editorConfig: [];
+  editorConfig: any;
   loadingFormConfigs: boolean;
   isEditorInitialized: boolean;
 };
@@ -157,9 +157,16 @@ class QueryEditor extends React.Component<Props> {
 const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
   const { runErrorMessage } = state.ui.queryPane;
   const { plugins } = state.entities;
+
   const { editorConfigs, loadingFormConfigs } = plugins;
   const formData = getFormValues(QUERY_EDITOR_FORM_NAME)(state) as QueryAction;
   const queryAction = getAction(state, props.match.params.queryId);
+  let editorConfig: any;
+  const pluginId = queryAction?.datasource?.pluginId;
+
+  if (editorConfigs && pluginId) {
+    editorConfig = editorConfigs[pluginId];
+  }
 
   return {
     pluginImages: getPluginImages(state),
@@ -170,9 +177,7 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
     responses: getActionResponses(state),
     queryPane: state.ui.queryPane,
     formData,
-    editorConfig: queryAction?.pluginId
-      ? editorConfigs[queryAction.pluginId]
-      : [],
+    editorConfig,
     loadingFormConfigs,
     isCreating: state.ui.apiPane.isCreating,
     isEditorInitialized: getIsEditorInitialized(state),

app/client/src/sagas/ActionSagas.ts

@@ -60,8 +60,6 @@ import {
   QUERIES_EDITOR_ID_URL,
   API_EDITOR_ID_URL,
 } from "constants/routes";
-import { changeApi } from "actions/apiPaneActions";
-import { changeQuery } from "actions/queryPaneActions";
 
 export function* createActionSaga(actionPayload: ReduxAction<RestAction>) {
   try {
@@ -292,28 +290,6 @@ function* moveActionSaga(
       apiID: response.data.id,
     });
     yield put(moveActionSuccess(response.data));
-    const applicationId = yield select(getCurrentApplicationId);
-
-    const isApi = actionObject.pluginType === PLUGIN_TYPE_API;
-    const isQuery = actionObject.pluginType === QUERY_CONSTANT;
-
-    if (isQuery) {
-      history.push(
-        QUERIES_EDITOR_ID_URL(
-          applicationId,
-          response.data.pageId,
-          response.data.id,
-        ),
-      );
-    } else if (isApi) {
-      history.push(
-        API_EDITOR_ID_URL(
-          applicationId,
-          response.data.pageId,
-          response.data.id,
-        ),
-      );
-    }
   } catch (e) {
     AppToaster.show({
       message: `Error while moving action ${actionObject.name}`,
@@ -358,10 +334,6 @@ function* copyActionSaga(
       apiID: response.data.id,
     });
     yield put(copyActionSuccess(response.data));
-    const applicationId = yield select(getCurrentApplicationId);
-    history.push(
-      API_EDITOR_ID_URL(applicationId, response.data.pageId, response.data.id),
-    );
   } catch (e) {
     AppToaster.show({
       message: `Error while copying action ${actionObject.name}`,
@@ -490,15 +462,18 @@ function* setActionPropertySaga(action: ReduxAction<SetActionPropertyPayload>) {
 
 function* handleMoveOrCopySaga(actionPayload: ReduxAction<{ id: string }>) {
   const { id } = actionPayload.payload;
-  const action = yield select(getAction, id);
+  const action: Action = yield select(getAction, id);
   const isApi = action.pluginType === PLUGIN_TYPE_API;
   const isQuery = action.pluginType === QUERY_CONSTANT;
+  const applicationId = yield select(getCurrentApplicationId);
 
   if (isApi) {
-    yield put(changeApi(id));
+    history.push(API_EDITOR_ID_URL(applicationId, action.pageId, action.id));
   }
   if (isQuery) {
-    yield put(changeQuery(id));
+    history.push(
+      QUERIES_EDITOR_ID_URL(applicationId, action.pageId, action.id),
+    );
   }
 }
 

app/client/src/sagas/ApiPaneSagas.ts

@@ -135,7 +135,11 @@ function* initializeExtraFormDataSaga() {
     DEFAULT_API_ACTION.actionConfiguration?.headers,
   );
 
-  const queryParameters = get(values, "actionConfiguration.queryParameters");
+  const queryParameters = get(
+    values,
+    "actionConfiguration.queryParameters",
+    [],
+  );
   if (!extraformData[values.id]) {
     yield put(
       change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", headers),