From 613db73b15f9a6c5cd1c28fe15b9887a4c26f37c Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Fri, 21 Aug 2020 11:33:04 +0530 Subject: [PATCH] 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 --- .../src/pages/Editor/QueryEditor/Form.tsx | 30 +++++++++++---- .../src/pages/Editor/QueryEditor/index.tsx | 13 +++++-- app/client/src/sagas/ActionSagas.ts | 37 +++---------------- app/client/src/sagas/ApiPaneSagas.ts | 6 ++- 4 files changed, 42 insertions(+), 44 deletions(-) diff --git a/app/client/src/pages/Editor/QueryEditor/Form.tsx b/app/client/src/pages/Editor/QueryEditor/Form.tsx index ae2f5cb9be..1ef28060c3 100644 --- a/app/client/src/pages/Editor/QueryEditor/Form.tsx +++ b/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) => { let output: Record[] | 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) => { )} - {!_.isNil(editorConfig) ? ( - _.map(editorConfig, renderEachConfig) + {editorConfig && editorConfig.length > 0 ? ( + editorConfig.map(renderEachConfig) ) : ( - An unexpected error occurred + <> + An unexpected error occurred + window.location.reload()} + > + Refresh + + )}
= (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; }); }; diff --git a/app/client/src/pages/Editor/QueryEditor/index.tsx b/app/client/src/pages/Editor/QueryEditor/index.tsx index 79d041a0d1..bb33cd5e2a 100644 --- a/app/client/src/pages/Editor/QueryEditor/index.tsx +++ b/app/client/src/pages/Editor/QueryEditor/index.tsx @@ -53,7 +53,7 @@ type ReduxStateProps = { responses: any; isCreating: boolean; pluginImages: Record; - editorConfig: []; + editorConfig: any; loadingFormConfigs: boolean; isEditorInitialized: boolean; }; @@ -157,9 +157,16 @@ class QueryEditor extends React.Component { 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), diff --git a/app/client/src/sagas/ActionSagas.ts b/app/client/src/sagas/ActionSagas.ts index 0f7c0e6351..bca71683c3 100644 --- a/app/client/src/sagas/ActionSagas.ts +++ b/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) { 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) { 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), + ); } } diff --git a/app/client/src/sagas/ApiPaneSagas.ts b/app/client/src/sagas/ApiPaneSagas.ts index 5ee63e33a1..dfb8ae4599 100644 --- a/app/client/src/sagas/ApiPaneSagas.ts +++ b/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),