Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'feature/lightning-menu' of gitlab.com:theappsmith/internal-tools-client into feature/widget-actions-menu

Browse Source
This commit is contained in:
vicky_primathon.in 2020-05-28 15:42:40 +05:30
commit da4ed9d470
7 changed files with 77 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/client/src/actions/apiPaneActions.ts
View File

@ -48,6 +48,11 @@ export const createNewApiAction = (
payload: { pageId },
});
export const createNewQueryAction = (pageId: string): ReduxAction<{}> => ({
type: ReduxActionTypes.CREATE_NEW_QUERY_ACTION,
payload: { pageId },
});
export const setExtraFormData = (
apiId: string,
extraformData: {},

22
app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
View File

@ -23,9 +23,6 @@ import { Theme } from "constants/DefaultTheme";
import AnalyticsUtil from "utils/AnalyticsUtil";
import TernServer from "utils/autocomplete/TernServer";
import KeyboardShortcuts from "constants/KeyboardShortcuts";
import { createNewApiAction } from "actions/apiPaneActions";
import { RestAction } from "api/ActionAPI";
import { createActionRequest } from "actions/actionActions";
const LightningMenu = lazy(() =>
import("components/editorComponents/LightningMenu"),
);
@ -288,10 +285,6 @@ const AUTOCOMPLETE_CLOSE_KEY_CODES = ["Enter", "Tab", "Escape"];
interface ReduxStateProps {
dynamicData: DataTree;
}
interface ReduxDispatchProps {
createNewApiAction: (pageId: string) => void;
createAction: (data: Partial<RestAction>) => void;
}
export type DynamicAutocompleteInputProps = {
placeholder?: string;
@ -315,7 +308,6 @@ export type DynamicAutocompleteInputProps = {
};
type Props = ReduxStateProps &
ReduxDispatchProps &
DynamicAutocompleteInputProps & {
input: Partial<WrappedFieldInputProps>;
};
@ -592,8 +584,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
<LightningMenu
skin={this.props.theme === "DARK" ? "dark" : "light"}
updatePropertyValue={this.updatePropertyValue}
createNewApiAction={this.props.createNewApiAction}
createAction={this.props.createAction}
/>
</Suspense>
)}
@ -655,14 +645,4 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
dynamicData: getDataTreeForAutocomplete(state),
});
const mapDispatchToProps = (dispatch: Function): ReduxDispatchProps => ({
createNewApiAction: (pageId: string) => dispatch(createNewApiAction(pageId)),
createAction: (data: Partial<RestAction>) => {
dispatch(createActionRequest(data));
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(DynamicAutocompleteInput);
export default connect(mapStateToProps)(DynamicAutocompleteInput);

73
app/client/src/components/editorComponents/LightningMenu/helpers.tsx
View File

@ -6,15 +6,10 @@ import CustomizedDropdown, {
CustomizedDropdownOption,
} from "pages/common/CustomizedDropdown";
import Button from "components/editorComponents/Button";
import { getNextEntityName } from "utils/AppsmithUtils";
import { ActionData } from "reducers/entityReducers/actionsReducer";
import { Datasource } from "api/DatasourcesApi";
import history from "utils/history";
import {
QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID,
DATA_SOURCES_EDITOR_URL,
} from "constants/routes";
createNewApiAction,
createNewQueryAction,
} from "actions/apiPaneActions";
import {
LIGHTNING_MENU_DATA_API,
LIGHTNING_MENU_DATA_QUERY,
@ -30,7 +25,7 @@ export const getApiOptions = (
skin: string,
apis: RestAction[],
pageId: string,
createNewApiAction: (pageId: string) => void,
dispatch: Function,
updatePropertyValue: (value: string, cursor?: number) => void,
) => ({
sections: [
@ -48,7 +43,7 @@ export const getApiOptions = (
/>
),
onSelect: () => {
createNewApiAction(pageId);
dispatch(createNewApiAction(pageId));
},
},
],
@ -74,11 +69,7 @@ export const getQueryOptions = (
skin: string,
queries: RestAction[],
pageId: string,
applicationId: string,
actions: ActionData[],
pluginIds: string[],
dataSources: Datasource[],
createAction: (data: Partial<RestAction>) => void,
dispatch: Function,
updatePropertyValue: (value: string, cursor?: number) => void,
) => ({
sections: [
@ -96,36 +87,7 @@ export const getQueryOptions = (
/>
),
onSelect: () => {
const pageApiNames = actions
.filter(a => a.config.pageId === pageId)
.map(a => a.config.name);
const validDataSources: Array<Datasource> = [];
dataSources.forEach(dataSource => {
if (pluginIds?.includes(dataSource.pluginId)) {
validDataSources.push(dataSource);
}
});
if (validDataSources.length) {
const newQueryName = getNextEntityName("Query", pageApiNames);
const dataSourceId = validDataSources[0].id;
createAction({
name: newQueryName,
pageId,
datasource: {
id: dataSourceId,
},
actionConfiguration: {},
});
history.push(
QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID(
applicationId,
pageId,
pageId,
),
);
} else {
history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
}
dispatch(createNewQueryAction(pageId));
},
},
],
@ -177,12 +139,7 @@ export const getLightningMenuOptions = (
queries: RestAction[],
widgets: WidgetProps[],
pageId: string,
applicationId: string,
actions: ActionData[],
pluginIds: string[],
dataSources: Datasource[],
createNewApiAction: (pageId: string) => void,
createAction: (data: Partial<RestAction>) => void,
dispatch: Function,
skin: string,
updatePropertyValue: (value: string, cursor?: number) => void,
) => {
@ -198,13 +155,7 @@ export const getLightningMenuOptions = (
{
content: (
<CustomizedDropdown
{...getApiOptions(
skin,
apis,
pageId,
createNewApiAction,
updatePropertyValue,
)}
{...getApiOptions(skin, apis, pageId, dispatch, updatePropertyValue)}
/>
),
disabled: false,
@ -217,11 +168,7 @@ export const getLightningMenuOptions = (
skin,
queries,
pageId,
applicationId,
actions,
pluginIds,
dataSources,
createAction,
dispatch,
updatePropertyValue,
)}
/>

37
app/client/src/components/editorComponents/LightningMenu/hooks.ts
View File

@ -1,8 +1,7 @@
import { useSelector, useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { AppState } from "reducers";
import { WidgetProps } from "widgets/BaseWidget";
import { RestAction } from "api/ActionAPI";
import { PLUGIN_PACKAGE_DBS } from "constants/QueryEditorConstants";
export const useWidgets = () => {
return useSelector((state: AppState) => {
@ -39,37 +38,3 @@ export const usePageId = () => {
});
return pageId || "";
};
export const useApplicationId = () => {
const applicationId = useSelector((state: AppState) => {
return state.entities.pageList.applicationId;
});
return applicationId || "";
};
export const useAllActions = () => {
const actions = useSelector((state: AppState) => {
const currentPageId = state.entities.pageList.currentPageId;
return state.entities.actions.filter(
action => action.config.pageId === currentPageId,
);
});
return actions;
};
export const useDataSources = () => {
const datasources = useSelector((state: AppState) => {
return state.entities.datasources.list;
});
return datasources;
};
export const usePluginIdsOfPackageNames = () => {
const plugins = useSelector((state: AppState) => {
return state.entities.plugins.list.filter(plugin =>
PLUGIN_PACKAGE_DBS.includes(plugin.packageName),
);
});
const pluginIds = plugins.map(plugin => plugin.id);
return pluginIds;
};

42
app/client/src/components/editorComponents/LightningMenu/index.tsx
View File

@ -1,6 +1,5 @@
import React from "react";
import { Tooltip } from "@blueprintjs/core";
import CustomizedDropdown, {
CustomizedDropdownProps,
} from "pages/common/CustomizedDropdown";
@ -12,19 +11,10 @@ import { ControlIcons } from "icons/ControlIcons";
import { LIGHTNING_MENU_DATA_TOOLTIP } from "constants/messages";
import { getLightningMenuOptions } from "./helpers";
import {
useActions,
useWidgets,
usePageId,
useAllActions,
useDataSources,
useApplicationId,
usePluginIdsOfPackageNames,
} from "./hooks";
import { ActionData } from "reducers/entityReducers/actionsReducer";
import { Datasource } from "api/DatasourcesApi";
import { useActions, useWidgets, usePageId } from "./hooks";
import { Theme } from "constants/DefaultTheme";
import { withTheme } from "styled-components";
import { useDispatch } from "react-redux";
const LightningIcon = ControlIcons.LIGHTNING_CONTROL;
const lightningMenuOptions = (
@ -33,12 +23,7 @@ const lightningMenuOptions = (
queries: RestAction[],
widgets: WidgetProps[],
pageId: string,
applicationId: string,
actions: ActionData[],
pluginIds: string[],
dataSources: Datasource[],
createNewApiAction: (pageId: string) => void,
createAction: (data: Partial<RestAction>) => void,
dispatch: Function,
updatePropertyValue: (value: string, cursor?: number) => void,
trigger: React.ReactNode,
): CustomizedDropdownProps => {
@ -47,12 +32,7 @@ const lightningMenuOptions = (
queries,
widgets,
pageId,
applicationId,
actions,
pluginIds,
dataSources,
createNewApiAction,
createAction,
dispatch,
skin,
updatePropertyValue,
);
@ -78,8 +58,6 @@ const lightningMenuOptions = (
type LightningMenuProps = {
onSelect?: (value: string) => void;
updatePropertyValue: (value: string, cursor?: number) => void;
createNewApiAction: (pageId: string) => void;
createAction: (data: Partial<RestAction>) => void;
skin: string;
theme: Theme;
};
@ -88,10 +66,7 @@ export const LightningMenu = (props: LightningMenuProps) => {
const widgets = useWidgets();
const { apis, queries } = useActions();
const pageId = usePageId();
const actions = useAllActions();
const dataSources = useDataSources();
const applicationId = useApplicationId();
const pluginIds = usePluginIdsOfPackageNames();
const dispatch = useDispatch();
const lightningMenuTrigger = (
<LightningIcon
width={props.theme.lightningMenu.iconSize}
@ -108,12 +83,7 @@ export const LightningMenu = (props: LightningMenuProps) => {
queries,
widgets,
pageId,
applicationId,
actions,
pluginIds,
dataSources,
props.createNewApiAction,
props.createAction,
dispatch,
props.updatePropertyValue,
lightningMenuTrigger,
)}

1
app/client/src/constants/ReduxActionConstants.tsx
View File

@ -205,6 +205,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
EXECUTE_BATCH: "EXECUTE_BATCH",
FETCH_ALL_PUBLISHED_PAGES: "FETCH_ALL_PUBLISHED_PAGES",
CREATE_NEW_API_ACTION: "CREATE_NEW_API_ACTION",
CREATE_NEW_QUERY_ACTION: "CREATE_NEW_QUERY_ACTION",
SET_CURRENT_CATEGORY: "SET_CURRENT_CATEGORY",
SET_LAST_USED_EDITOR_PAGE: "SET_LAST_USED_EDITOR_PAGE",
SET_LAST_SELECTED_PAGE_PAGE: "SET_LAST_SELECTED_PAGE_PAGE",

55
app/client/src/sagas/ApiPaneSagas.ts
View File

@ -23,12 +23,15 @@ import {
API_EDITOR_ID_URL,
API_EDITOR_URL,
getProviderTemplatesURL,
QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID,
DATA_SOURCES_EDITOR_URL,
} from "constants/routes";
import {
getCurrentApplicationId,
getCurrentPageId,
getIsEditorInitialized,
getLastSelectedPage,
getDataSources,
} from "selectors/editorSelectors";
import { initialize, autofill, change } from "redux-form";
import { getAction } from "./ActionSagas";
@ -41,11 +44,14 @@ import {
UNIQUE_NAME_ERROR,
VALID_FUNCTION_NAME_ERROR,
} from "constants/messages";
import { createNewApiName } from "utils/AppsmithUtils";
import { createNewApiName, getNextEntityName } from "utils/AppsmithUtils";
import { getPluginIdOfPackageName } from "sagas/selectors";
import { getActions } from "selectors/entitiesSelector";
import { getActions, getPlugins } from "selectors/entitiesSelector";
import { ActionData } from "reducers/entityReducers/actionsReducer";
import { createActionRequest } from "actions/actionActions";
import { Datasource } from "api/DatasourcesApi";
import { Plugin } from "api/PluginApi";
import { PLUGIN_PACKAGE_DBS } from "constants/QueryEditorConstants";
const getApiDraft = (state: AppState, id: string) => {
const drafts = state.ui.apiPane.drafts;
@ -484,6 +490,47 @@ function* handleCreateNewApiActionSaga(
}
}
function* handleCreateNewQueryActionSaga(
action: ReduxAction<{ pageId: string }>,
) {
const { pageId } = action.payload;
const applicationId = yield select(getCurrentApplicationId);
const actions = yield select(getActions);
const dataSources = yield select(getDataSources);
const plugins = yield select(getPlugins);
const pluginIds = plugins
.filter((plugin: Plugin) => PLUGIN_PACKAGE_DBS.includes(plugin.packageName))
.map((plugin: Plugin) => plugin.id);
const validDataSources: Array<Datasource> = [];
dataSources.forEach((dataSource: Datasource) => {
if (pluginIds?.includes(dataSource.pluginId)) {
validDataSources.push(dataSource);
}
});
if (validDataSources.length) {
const pageApiNames = actions
.filter((a: ActionData) => a.config.pageId === pageId)
.map((a: ActionData) => a.config.name);
const newQueryName = getNextEntityName("Query", pageApiNames);
const dataSourceId = validDataSources[0].id;
yield put(
createActionRequest({
name: newQueryName,
pageId,
datasource: {
id: dataSourceId,
},
actionConfiguration: {},
}),
);
history.push(
QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID(applicationId, pageId, pageId),
);
} else {
history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
}
}
export default function* root() {
yield all([
takeEvery(ReduxActionTypes.INIT_API_PANE, initApiPaneSaga),
@ -497,6 +544,10 @@ export default function* root() {
ReduxActionTypes.CREATE_NEW_API_ACTION,
handleCreateNewApiActionSaga,
),
takeEvery(
ReduxActionTypes.CREATE_NEW_QUERY_ACTION,
handleCreateNewQueryActionSaga,
),
// Intercepting the redux-form change actionType
takeEvery(ReduxFormActionTypes.VALUE_CHANGE, formValueChangeSaga),
takeEvery(ReduxFormActionTypes.ARRAY_REMOVE, formValueChangeSaga),