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 fix/icons-placement-issues

Browse Source
This commit is contained in:
vicky_primathon.in 2020-06-03 15:22:01 +05:30
commit d537fbcebd
28 changed files with 670 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/cypress/fixtures/testdata.json
View File

@ -17,6 +17,7 @@
"responsetext2": "qui est esse",
"baseUrl3": "https://reqres.in",
"methods2": "api/users/2",
"invalidPath": "api/users/a",
"responsetext3": "Josh M Krantz",
"postUrl": "https://reqres.in",
"deleteUrl": "",

61
app/client/cypress/fixtures/viewdsl.json
View File

@ -148,39 +148,34 @@
"chartType": "BAR_CHART",
"chartName": "App Sign Up",
"allowHorizontalScroll": false,
"chartData": [
"singleChartData": [
{
"seriesName": "",
"data": [
{
"x": "Mon",
"y": 10000
},
{
"x": "Tue",
"y": 12000
},
{
"x": "Wed",
"y": 32000
},
{
"x": "Thu",
"y": 28000
},
{
"x": "Fri",
"y": 14000
},
{
"x": "Sat",
"y": 19000
},
{
"x": "Sun",
"y": 36000
}
]
"x": "Mon",
"y": 10000
},
{
"x": "Tue",
"y": 12000
},
{
"x": "Wed",
"y": 32000
},
{
"x": "Thu",
"y": 28000
},
{
"x": "Fri",
"y": 14000
},
{
"x": "Sat",
"y": 19000
},
{
"x": "Sun",
"y": 36000
}
],
"xAxisName": "Last Week",
@ -265,4 +260,4 @@
]
},
"layoutOnLoadActions": []
}
}

2
app/client/cypress/integration/Smoke_TestSuite/ApiPaneTests/API_Edit_spec.js
View File

@ -23,7 +23,7 @@ describe("API Panel Test Functionality", function() {
cy.ClearSearch();
cy.SearchAPIandClick("SecondAPI");
//invalid api end point check
cy.EditSourceDetail(testdata.baseUrl3, testdata.methods2);
cy.EditSourceDetail(testdata.baseUrl3, testdata.invalidPath);
cy.ResponseStatusCheck("404 NOT_FOUND");
cy.DeleteAPI();
});

4
app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Input_spec.js
View File

@ -25,14 +25,14 @@ describe("Input Widget Functionality", function() {
cy.get(widgetsPage.innertext)
.click({ force: true })
.type(this.data.para);
cy.get(publish.inputWidget + " " + "input")
cy.get(widgetsPage.inputWidget + " " + "input")
.invoke("attr", "value")
.should("contain", this.data.para);
cy.openPropertyPane("inputwidget");
cy.get(widgetsPage.defaultInput)
.type(this.data.command)
.type(this.data.defaultdata);
cy.get(publish.inputWidget + " " + "input")
cy.get(widgetsPage.inputWidget + " " + "input")
.invoke("attr", "value")
.should("contain", this.data.defaultdata);
cy.get(widgetsPage.placeholder)

5
app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Chart_spec.js
View File

@ -6,6 +6,7 @@ const dsl = require("../../../fixtures/viewdsl.json");
describe("Chart Widget Functionality", function() {
before(() => {
cy.addDsl(dsl);
cy.viewport("macbook-15"); //To avoid screen Resize issues
});
it("Chart Widget Functionality", function() {
cy.openPropertyPane("chartwidget");
@ -65,6 +66,7 @@ describe("Chart Widget Functionality", function() {
cy.get(commonlocators.editPropCrossButton).click();
});
it("Chart Widget Functionality To Unchecked Visible Widget", function() {
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.openPropertyPane("chartwidget");
cy.togglebarDisable(commonlocators.visibleCheckbox);
cy.PublishtheApp();
@ -72,6 +74,7 @@ describe("Chart Widget Functionality", function() {
cy.get(publish.backToEditor).click();
});
it("Chart Widget Functionality To Check Visible Widget", function() {
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.openPropertyPane("chartwidget");
cy.togglebar(commonlocators.visibleCheckbox);
cy.PublishtheApp();
@ -79,6 +82,7 @@ describe("Chart Widget Functionality", function() {
cy.get(publish.backToEditor).click();
});
it("Chart Widget Functionality To Uncheck Horizontal Scroll Visible", function() {
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.openPropertyPane("chartwidget");
cy.togglebarDisable(commonlocators.horizontalScroll);
cy.PublishtheApp();
@ -86,6 +90,7 @@ describe("Chart Widget Functionality", function() {
cy.get(publish.backToEditor).click();
});
it("Chart Widget Functionality To Check Horizontal Scroll Visible", function() {
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.openPropertyPane("chartwidget");
cy.togglebar(commonlocators.horizontalScroll);
cy.PublishtheApp();

4
app/client/cypress/locators/publishWidgetspage.json
View File

@ -12,10 +12,10 @@
"dropdownWidget": ".t--widget-dropdownwidget",
"tabWidget": ".t--widget-tabswidget",
"chartWidget": ".t--widget-chartwidget",
"horizontalTab": ".t--widget-chartwidget g[class='raphael-group-104-axis-Line-group'] rect",
"horizontalTab": ".t--widget-chartwidget g[class*='-scrollContainer'] rect",
"tableWidget": ".t--widget-tablewidget",
"mapWidget": ".t--widget-mapwidget",
"tableLength": ".t--widget-tablewidget .e-gridcontent.e-lib.e-droppable",
"mapSearch": ".t--widget-mapwidget input",
"pickMyLocation": ".t--widget-mapwidget div[title='Pick My Location']"
}
}

14
app/client/cypress/support/commands.js
View File

@ -202,7 +202,8 @@ Cypress.Commands.add("enterDatasourceAndPath", (datasource, path) => {
cy.xpath(apiwidget.autoSuggest)
.first()
.click({ force: true });
cy.get(apiwidget.path)
cy.get(apiwidget.editResourceUrl)
.first()
.click({ force: true })
.type(path, { parseSpecialCharSequences: false });
});
@ -228,16 +229,17 @@ Cypress.Commands.add(
Cypress.Commands.add("EditSourceDetail", (baseUrl, v1method) => {
cy.get(apiwidget.editResourceUrl)
.first()
.clear()
.click({ force: true })
.type(baseUrl);
.clear()
.type(`{backspace}${baseUrl}`);
cy.xpath(apiwidget.autoSuggest)
.first()
.click({ force: true });
cy.get(ApiEditor.ApiRunBtn).scrollIntoView();
cy.get(apiwidget.path)
cy.get(apiwidget.editResourceUrl)
.first()
.focus()
.type("{selectall}{backspace}api/users/2")
.type(v1method)
.should("have.value", v1method);
cy.SaveAPI();
});
@ -905,7 +907,7 @@ Cypress.Commands.add("createApi", (url, parameters) => {
cy.contains(url).click({
force: true,
});
cy.get(".CodeMirror.CodeMirror-empty textarea")
cy.get(apiwidget.editResourceUrl)
.first()
.click({ force: true })
.type(parameters, { force: true });

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

@ -53,6 +53,16 @@ export const createNewQueryAction = (pageId: string): ReduxAction<{}> => ({
payload: { pageId },
});
export const setDatasourceFieldText = (
apiId: string,
value: string,
): ReduxAction<{ apiId: string; value: string }> => {
return {
type: ReduxActionTypes.SET_DATASOURCE_FIELD_TEXT,
payload: { apiId, value },
};
};
export const setExtraFormData = (
apiId: string,
extraformData: {},

6
app/client/src/actions/datasourceActions.ts
View File

@ -77,6 +77,12 @@ export const initDatasourcePane = (
};
};
export const storeAsDatasource = () => {
return {
type: ReduxActionTypes.STORE_AS_DATASOURCE_INIT,
};
};
export default {
createDatasource,
fetchDatasources,

3
app/client/src/assets/icons/menu/storage.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16H20V12H0V16ZM2 13H4V15H2V13ZM0 0V4H20V0H0ZM4 3H2V1H4V3ZM0 10H20V6H0V10ZM2 7H4V9H2V7Z" fill="#F4F4F4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

38
app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
View File

@ -1,7 +1,9 @@
import React from "react";
import Creatable from "react-select/creatable";
import Select, { InputActionMeta } from "react-select";
import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
import { theme } from "constants/DefaultTheme";
import { SelectComponents } from "react-select/src/components";
type DropdownProps = {
options: Array<{
@ -12,9 +14,12 @@ type DropdownProps = {
isLoading?: boolean;
input: WrappedFieldInputProps;
meta: WrappedFieldMetaProps;
components: SelectComponents<any>;
onCreateOption: (inputValue: string) => void;
formatCreateLabel?: (value: string) => React.ReactNode;
noOptionsMessage?: (obj: { inputValue: string }) => string;
inputValue?: string;
onInputChange: (value: string, actionMeta: InputActionMeta) => void;
};
const selectStyles = {
@ -22,7 +27,7 @@ const selectStyles = {
...provided,
color: "#a3b3bf",
}),
singleValue: (provided: any) => ({
multiValue: (provided: any) => ({
...provided,
backgroundColor: "rgba(104,113,239,0.1)",
border: "1px solid rgba(104, 113, 239, 0.5)",
@ -34,9 +39,15 @@ const selectStyles = {
display: "inline-block",
transform: "none",
}),
multiValueRemove: () => {
return {
display: "none",
};
},
container: (styles: any) => ({
...styles,
flex: 1,
zIndex: "5",
}),
control: (styles: any, state: any) => ({
...styles,
@ -69,23 +80,34 @@ class CreatableDropdown extends React.Component<DropdownProps> {
placeholder,
options,
isLoading,
onCreateOption,
input,
formatCreateLabel,
noOptionsMessage,
components,
inputValue,
onInputChange,
} = this.props;
const optionalProps: Partial<DropdownProps> = {};
if (formatCreateLabel) optionalProps.formatCreateLabel = formatCreateLabel;
if (noOptionsMessage) optionalProps.noOptionsMessage = noOptionsMessage;
if (components) optionalProps.components = components;
if (inputValue) optionalProps.inputValue = inputValue;
if (onInputChange) optionalProps.onInputChange = onInputChange;
return (
<Creatable
<Select
isMulti
placeholder={placeholder}
options={options}
styles={selectStyles}
isLoading={isLoading}
onCreateOption={onCreateOption}
{...input}
onChange={value => input.onChange(value)}
onChange={value => {
const formattedValue = value;
if (formattedValue && formattedValue.length > 1) {
formattedValue.shift();
}
input.onChange(formattedValue);
}}
onBlur={() => input.value}
isClearable
{...optionalProps}

8
app/client/src/components/editorComponents/ApiResponseView.tsx
View File

@ -9,7 +9,6 @@ import { AppState } from "reducers";
import { ActionResponse } from "api/ActionAPI";
import { formatBytes } from "utils/helpers";
import { APIEditorRouteParams } from "constants/routes";
import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
import CodeEditor from "components/editorComponents/CodeEditor";
import { getActionResponses } from "selectors/entitiesSelector";
@ -53,7 +52,7 @@ const TableWrapper = styled.div`
interface ReduxStateProps {
responses: Record<string, ActionResponse | undefined>;
apiPane: ApiPaneReduxState;
isRunning: Record<string, boolean>;
}
const ResponseHeadersView = (props: { data: Record<string, string[]> }) => {
@ -109,14 +108,13 @@ const ApiResponseView = (props: Props) => {
params: { apiId },
},
responses,
apiPane,
} = props;
let response: ActionResponse = EMPTY_RESPONSE;
let isRunning = false;
let hasFailed = false;
if (apiId && apiId in responses) {
response = responses[apiId] || EMPTY_RESPONSE;
isRunning = apiPane.isRunning[apiId];
isRunning = props.isRunning[apiId];
hasFailed = response.statusCode ? response.statusCode[0] !== "2" : false;
}
@ -217,7 +215,7 @@ const ApiResponseView = (props: Props) => {
const mapStateToProps = (state: AppState): ReduxStateProps => {
return {
responses: getActionResponses(state),
apiPane: state.ui.apiPane,
isRunning: state.ui.apiPane.isRunning,
};
};

261
app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
View File

@ -1,65 +1,266 @@
import React from "react";
import React, { useState, useEffect } from "react";
import CreatableDropdown from "components/designSystems/appsmith/CreatableDropdown";
import { connect } from "react-redux";
import { Field } from "redux-form";
import { Field, formValueSelector, change } from "redux-form";
import { AppState } from "reducers";
import { ReactComponent as StorageIcon } from "assets/icons/menu/storage.svg";
import { DatasourceDataState } from "reducers/entityReducers/datasourceReducer";
import { Plugin } from "api/PluginApi";
import { getDatasourcePlugins } from "selectors/entitiesSelector";
import _ from "lodash";
import { createDatasource } from "actions/datasourceActions";
import { createDatasource, storeAsDatasource } from "actions/datasourceActions";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { Datasource, CreateDatasourceConfig } from "api/DatasourcesApi";
import styled, { createGlobalStyle } from "styled-components";
import { MenuItem, Menu, Popover, Position } from "@blueprintjs/core";
import { IconWrapper } from "constants/IconConstants";
import { theme } from "constants/DefaultTheme";
import { ControlIcons } from "icons/ControlIcons";
import { API_EDITOR_FORM_NAME } from "constants/forms";
import { InputActionMeta } from "react-select";
import { setDatasourceFieldText } from "actions/apiPaneActions";
interface ReduxStateProps {
datasources: DatasourceDataState;
validDatasourcePlugins: Plugin[];
apiId: string;
value: Datasource;
}
interface ReduxActionProps {
createDatasource: (value: string) => void;
storeAsDatasource: () => void;
changeDatasource: (value: Datasource | CreateDatasourceConfig) => void;
changePath: (value: string) => void;
setDatasourceFieldText: (apiId: string, value: string) => void;
}
interface ComponentProps {
name: string;
pluginId: string;
appName: string;
datasourceFieldText: string;
}
const StyledMenuItem = styled(MenuItem)`
&&&&.bp3-menu-item {
align-items: center;
width: 202px;
justify-content: center;
}
`;
const StyledMenu = styled(Menu)`
&&&&.bp3-menu {
padding: 8px;
background: #ffffff;
border: 1px solid #ebeff2;
box-sizing: border-box;
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
border-radius: 4px;
}
`;
const TooltipStyles = createGlobalStyle`
.helper-tooltip{
.bp3-popover {
margin-right: 10px;
margin-top: 5px;
}
}
`;
const DatasourcesField = (
props: ReduxActionProps & ReduxStateProps & ComponentProps,
) => {
const options = props.datasources.list
.filter(r => r.pluginId === props.pluginId)
.filter(r =>
props.validDatasourcePlugins.some(plugin => plugin.id === r.pluginId),
)
.filter(r => r.datasourceConfiguration)
.filter(r => r.datasourceConfiguration.url)
.map(r => ({
label: r.datasourceConfiguration?.url.endsWith("/")
? r.datasourceConfiguration?.url.slice(0, -1)
: r.datasourceConfiguration.url,
value: r.id,
}));
const [inputValue, setValue] = useState(props.datasourceFieldText);
useEffect(() => {
setValue(props.datasourceFieldText);
}, [props.datasourceFieldText]);
const options = React.useMemo(() => {
return props.datasources.list
.filter(r => r.pluginId === props.pluginId)
.filter(r => {
return props.validDatasourcePlugins.some(
plugin => plugin.id === r.pluginId,
);
})
.filter(r => r.datasourceConfiguration)
.filter(r => r.datasourceConfiguration.url)
.map(r => ({
label: r.datasourceConfiguration?.url,
value: r.id,
}));
}, [props.datasources.list, props.validDatasourcePlugins, props.pluginId]);
const { storeAsDatasource } = props;
let isEmbeddedDatasource = true;
if (props.value && props.value.id) {
isEmbeddedDatasource = false;
} else if (props.value && props.value.datasourceConfiguration) {
isEmbeddedDatasource = true;
}
const DropdownIndicator = (props: any) => {
if (props.hasValue) return null;
const MenuContainer = (
<StyledMenu>
<StyledMenuItem
icon={
<IconWrapper
width={theme.fontSizes[4]}
height={theme.fontSizes[4]}
color={"#535B62"}
>
<StorageIcon />
</IconWrapper>
}
text="Store as datasource"
onClick={storeAsDatasource}
/>
</StyledMenu>
);
return (
<>
<TooltipStyles />
<Popover
content={MenuContainer}
position={Position.BOTTOM_LEFT}
usePortal
portalClassName="helper-tooltip"
>
<div
style={{
padding: "8px 13px 3px 13px",
}}
onMouseDown={e => {
e.stopPropagation();
}}
>
<ControlIcons.MORE_HORIZONTAL_CONTROL
width={theme.fontSizes[4]}
height={theme.fontSizes[4]}
color="#C4C4C4"
/>
</div>
</Popover>
</>
);
};
return (
<Field
name={props.name}
component={CreatableDropdown}
isLoading={props.datasources.loading}
options={options}
components={{
ClearIndicator: () => null,
IndicatorSeparator: () => null,
DropdownIndicator,
}}
placeholder="https://<base-url>.com"
onCreateOption={props.createDatasource}
format={(value: string) => _.find(options, { value }) || ""}
parse={(option: { value: string }) => (option ? option.value : null)}
formatCreateLabel={(value: string) => `Create data source "${value}"`}
noOptionsMessage={() => "No data sources created"}
onInputChange={(value: string, actionMeta: InputActionMeta) => {
const { action } = actionMeta;
if (action === "input-blur") {
props.setDatasourceFieldText(props.apiId, inputValue);
return value;
} else if (action === "set-value") {
setValue("");
return "";
} else if (action === "menu-close") {
return value;
}
setValue(value);
if (isEmbeddedDatasource) {
let datasourcePayload: Datasource | CreateDatasourceConfig;
let pathPayload: string;
try {
const url = new URL(value);
const path = url.pathname === "/" ? "" : url.pathname;
const params = url.search;
const baseUrl = url.origin;
datasourcePayload = {
name: baseUrl,
datasourceConfiguration: {
url: baseUrl,
},
pluginId: props.pluginId,
appName: props.appName,
};
pathPayload = path + params;
} catch (e) {
datasourcePayload = {
name: value,
datasourceConfiguration: {
url: value,
},
pluginId: props.pluginId,
appName: props.appName,
};
pathPayload = "";
}
const updateValues = _.debounce(() => {
props.changeDatasource(datasourcePayload);
props.changePath(pathPayload);
}, 50);
updateValues();
} else {
const updatePath = _.debounce(() => {
props.changePath(value);
}, 50);
updatePath();
}
}}
format={(value: Datasource) => {
if (!value || !value.datasourceConfiguration) return "";
if (!value.id) {
return "";
}
const option = _.find(options, { value: value.id });
return option ? [option] : "";
}}
parse={(option: { value: string }[]) => {
if (!option) return null;
if (option.length) {
const datasources = props.datasources.list;
return datasources.find(
datasource => datasource.id === option[0].value,
);
}
}}
inputValue={inputValue}
noOptionsMessage={() => null}
/>
);
};
const mapStateToProps = (state: AppState): ReduxStateProps => ({
datasources: state.entities.datasources,
validDatasourcePlugins: getDatasourcePlugins(state),
});
const mapStateToProps = (state: AppState): ReduxStateProps => {
const selector = formValueSelector(API_EDITOR_FORM_NAME);
const apiId = selector(state, "id");
const datasource = selector(state, "datasource");
return {
datasources: state.entities.datasources,
validDatasourcePlugins: getDatasourcePlugins(state),
apiId,
value: datasource,
};
};
const mapDispatchToProps = (
dispatch: any,
@ -88,6 +289,16 @@ const mapDispatchToProps = (
}),
);
},
storeAsDatasource: () => dispatch(storeAsDatasource()),
changeDatasource: value => {
dispatch(change(API_EDITOR_FORM_NAME, "datasource", value));
},
changePath: (value: string) => {
dispatch(change(API_EDITOR_FORM_NAME, "actionConfiguration.path", value));
},
setDatasourceFieldText: (apiId, value) => {
dispatch(setDatasourceFieldText(apiId, value));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(DatasourcesField);

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

@ -77,6 +77,10 @@ export const ReduxActionTypes: { [key: string]: string } = {
FETCH_PUBLISHED_PAGE_SUCCESS: "FETCH_PUBLISHED_PAGE_SUCCESS",
DELETE_DATASOURCE_INIT: "DELETE_DATASOURCE_INIT",
DELETE_DATASOURCE_SUCCESS: "DELETE_DATASOURCE_SUCCESS",
STORE_AS_DATASOURCE_INIT: "STORE_AS_DATASOURCE_INIT",
STORE_AS_DATASOURCE_UPDATE: "STORE_AS_DATASOURCE_UPDATE",
STORE_AS_DATASOURCE_COMPLETE: "STORE_AS_DATASOURCE_COMPLETE",
SET_DATASOURCE_FIELD_TEXT: "SET_DATASOURCE_FIELD_TEXT",
PUBLISH_APPLICATION_INIT: "PUBLISH_APPLICATION_INIT",
PUBLISH_APPLICATION_SUCCESS: "PUBLISH_APPLICATION_SUCCESS",
CREATE_PAGE_INIT: "CREATE_PAGE_INIT",

1
app/client/src/constants/WidgetValidation.ts
View File

@ -11,6 +11,7 @@ export const VALIDATION_TYPES = {
ARRAY: "ARRAY",
TABLE_DATA: "TABLE_DATA",
OPTIONS_DATA: "OPTIONS_DATA",
SINGLE_CHART_DATA: "SINGLE_CHART_DATA",
DATE: "DATE",
TABS_DATA: "TABS_DATA",
CHART_DATA: "CHART_DATA",

59
app/client/src/mockResponses/WidgetConfigResponse.tsx
View File

@ -312,39 +312,34 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
chartType: "LINE_CHART",
chartName: "Sales on working days",
allowHorizontalScroll: false,
chartData: [
singleChartData: [
{
seriesName: "",
data: [
{
x: "Mon",
y: 10000,
},
{
x: "Tue",
y: 12000,
},
{
x: "Wed",
y: 32000,
},
{
x: "Thu",
y: 28000,
},
{
x: "Fri",
y: 14000,
},
{
x: "Sat",
y: 19000,
},
{
x: "Sun",
y: 36000,
},
],
x: "Mon",
y: 10000,
},
{
x: "Tue",
y: 12000,
},
{
x: "Wed",
y: 32000,
},
{
x: "Thu",
y: 28000,
},
{
x: "Fri",
y: 14000,
},
{
x: "Sat",
y: 19000,
},
{
x: "Sun",
y: 36000,
},
],
xAxisName: "Last Week",

97
app/client/src/pages/Editor/APIEditor/Form.tsx
View File

@ -9,29 +9,26 @@ import {
import {
HTTP_METHOD_OPTIONS,
HTTP_METHODS,
CONTENT_TYPE,
} from "constants/ApiEditorConstants";
import styled from "styled-components";
import PostBodyData from "./PostBodyData";
import FormLabel from "components/editorComponents/FormLabel";
import FormRow from "components/editorComponents/FormRow";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import { RestAction, PaginationField } from "api/ActionAPI";
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import TextField from "components/editorComponents/form/fields/TextField";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import DropdownField from "components/editorComponents/form/fields/DropdownField";
import DatasourcesField from "components/editorComponents/form/fields/DatasourcesField";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import ApiResponseView from "components/editorComponents/ApiResponseView";
import { API_EDITOR_FORM_NAME } from "constants/forms";
import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
import { FormIcons } from "icons/FormIcons";
import { BaseTabbedView } from "components/designSystems/appsmith/TabbedView";
import Pagination, { PaginationType } from "./Pagination";
import { Icon } from "@blueprintjs/core";
import { HelpMap, HelpBaseURL } from "constants/HelpConstants";
import CollapsibleHelp from "components/designSystems/appsmith/help/CollapsibleHelp";
import { BaseTabbedView } from "components/designSystems/appsmith/TabbedView";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import PostBodyData from "./PostBodyData";
import ApiResponseView from "components/editorComponents/ApiResponseView";
const Form = styled.form`
display: flex;
@ -59,23 +56,6 @@ const MainConfiguration = styled.div`
padding-left: 17px;
`;
const SecondaryWrapper = styled.div`
display: flex;
height: 100%;
border-top: 1px solid #d0d7dd;
margin-top: 15px;
`;
const RequestParamsWrapper = styled.div`
flex: 4;
border-right: 1px solid #d0d7dd;
height: 100%;
overflow-y: auto;
padding-top: 6px;
padding-left: 17px;
padding-right: 10px;
`;
const ActionButtons = styled.div`
flex: 1;
`;
@ -88,13 +68,15 @@ const ActionButton = styled(BaseButton)`
}
`;
const HeadersSection = styled.div`
margin-bottom: 32px;
`;
const DatasourceWrapper = styled.div`
width: 100%;
max-width: 320px;
`;
const SecondaryWrapper = styled.div`
display: flex;
height: 100%;
border-top: 1px solid #d0d7dd;
margin-top: 15px;
`;
const TabbedViewContainer = styled.div`
@ -113,6 +95,19 @@ const StyledOpenDocsIcon = styled(Icon)`
height: 18px;
}
`;
const RequestParamsWrapper = styled.div`
flex: 4;
border-right: 1px solid #d0d7dd;
height: 100%;
overflow-y: auto;
padding-top: 6px;
padding-left: 17px;
padding-right: 10px;
`;
const HeadersSection = styled.div`
margin-bottom: 32px;
`;
interface APIFormProps {
pluginId: string;
@ -126,18 +121,15 @@ interface APIFormProps {
isDeleting: boolean;
paginationType: PaginationType;
appName: string;
actionConfiguration?: any;
httpMethodFromForm: string;
actionConfigurationBody: object | string;
actionConfigurationHeaders?: any;
contentType: {
key: string;
value: string;
};
apiId: string;
location: {
pathname: string;
};
dispatch: any;
datasourceFieldText: string;
}
type Props = APIFormProps & InjectedFormProps<RestAction, APIFormProps>;
@ -153,15 +145,13 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
isDeleting,
isRunning,
isSaving,
actionConfiguration,
actionConfigurationHeaders,
actionConfigurationBody,
httpMethodFromForm,
location,
dispatch,
apiId,
httpMethodFromForm,
} = props;
const allowPostBody =
httpMethodFromForm && httpMethodFromForm !== HTTP_METHODS[0];
useEffect(() => {
dispatch({
type: ReduxActionTypes.SET_LAST_USED_EDITOR_PAGE,
@ -170,6 +160,8 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
},
});
});
const allowPostBody =
httpMethodFromForm && httpMethodFromForm !== HTTP_METHODS[0];
return (
<Form onSubmit={handleSubmit}>
@ -219,21 +211,13 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
/>
<DatasourceWrapper className="t--dataSourceField">
<DatasourcesField
name="datasource.id"
key={apiId}
name="datasource"
pluginId={pluginId}
datasourceFieldText={props.datasourceFieldText}
appName={props.appName}
/>
</DatasourceWrapper>
<DynamicTextField
className="t--path"
placeholder="v1/method"
name="actionConfiguration.path"
showLightningMenu={false}
leftIcon={FormIcons.SLASH_ICON}
normalize={value => value.trim()}
singleLine
setMaxHeight
/>
</FormRow>
</MainConfiguration>
<SecondaryWrapper>
@ -260,9 +244,7 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
<KeyValueFieldArray
name="actionConfiguration.headers"
label="Headers"
actionConfig={
actionConfiguration && actionConfigurationHeaders
}
actionConfig={actionConfigurationHeaders}
placeholder="Value"
pushFields
/>
@ -306,24 +288,17 @@ const selector = formValueSelector(API_EDITOR_FORM_NAME);
export default connect(state => {
const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod");
const actionConfiguration = selector(state, "actionConfiguration");
const actionConfigurationBody = selector(state, "actionConfiguration.body");
const actionConfigurationHeaders = selector(
state,
"actionConfiguration.headers",
);
let contentType;
if (actionConfigurationHeaders) {
contentType = actionConfigurationHeaders.find(
(header: any) => header.key.toLowerCase() === CONTENT_TYPE,
);
}
const apiId = selector(state, "id");
return {
apiId,
httpMethodFromForm,
actionConfiguration,
actionConfigurationBody,
contentType,
actionConfigurationHeaders,
};
})(

74
app/client/src/pages/Editor/APIEditor/index.tsx
View File

@ -17,7 +17,6 @@ import {
ActionData,
ActionDataState,
} from "reducers/entityReducers/actionsReducer";
import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
import { REST_PLUGIN_PACKAGE_NAME } from "constants/ApiEditorConstants";
import _ from "lodash";
import { getCurrentApplication } from "selectors/applicationSelectors";
@ -28,6 +27,7 @@ import { Plugin } from "api/PluginApi";
import styled from "styled-components";
import FeatureFlag from "utils/featureFlags";
import { FeatureFlagsEnum } from "configs/types";
import { PaginationType } from "./Pagination";
const EmptyStateContainer = styled.div`
display: flex;
@ -39,15 +39,19 @@ const EmptyStateContainer = styled.div`
interface ReduxStateProps {
actions: ActionDataState;
apiPane: ApiPaneReduxState;
formData: RestAction;
isRunning: Record<string, boolean>;
isSaving: Record<string, boolean>;
isDeleting: Record<string, boolean>;
allowSave: boolean;
apiName: string;
currentApplication: UserApplication;
currentPageName: string | undefined;
pages: any;
plugins: Plugin[];
pluginId: any;
apiAction: RestAction | ActionData | RapidApiAction | undefined;
data: RestAction | ActionData | RapidApiAction | undefined;
paginationType: PaginationType;
datasourceFieldText: string;
}
interface ReduxActionProps {
submitForm: (name: string) => void;
@ -67,35 +71,42 @@ type Props = ReduxActionProps &
class ApiEditor extends React.Component<Props> {
handleSubmit = (values: RestAction) => {
const { formData } = this.props;
this.props.updateAction(formData);
this.props.updateAction(values);
};
handleSaveClick = () => {
const pageName = getPageName(this.props.pages, this.props.formData.pageId);
const pageName = getPageName(
this.props.pages,
this.props.match.params.pageId,
);
AnalyticsUtil.logEvent("SAVE_API_CLICK", {
apiName: this.props.formData.name,
apiName: this.props.apiName,
apiID: this.props.match.params.apiId,
pageName: pageName,
});
this.props.submitForm(API_EDITOR_FORM_NAME);
};
handleDeleteClick = () => {
const pageName = getPageName(this.props.pages, this.props.formData.pageId);
const pageName = getPageName(
this.props.pages,
this.props.match.params.pageId,
);
AnalyticsUtil.logEvent("DELETE_API_CLICK", {
apiName: this.props.formData.name,
apiName: this.props.apiName,
apiID: this.props.match.params.apiId,
pageName: pageName,
});
this.props.deleteAction(
this.props.match.params.apiId,
this.props.formData.name,
);
this.props.deleteAction(this.props.match.params.apiId, this.props.apiName);
};
handleRunClick = (paginationField?: PaginationField) => {
const pageName = getPageName(this.props.pages, this.props.formData.pageId);
const pageName = getPageName(
this.props.pages,
this.props.match.params.pageId,
);
AnalyticsUtil.logEvent("RUN_API_CLICK", {
apiName: this.props.formData.name,
apiName: this.props.apiName,
apiID: this.props.match.params.apiId,
pageName: pageName,
});
@ -130,13 +141,16 @@ class ApiEditor extends React.Component<Props> {
render() {
const {
apiPane,
match: {
params: { apiId },
},
plugins,
pluginId,
data,
isSaving,
isRunning,
isDeleting,
allowSave,
paginationType,
} = this.props;
let formUiComponent: string | undefined;
@ -148,8 +162,6 @@ class ApiEditor extends React.Component<Props> {
}
}
const { isSaving, isRunning, isDeleting, drafts } = apiPane;
const paginationType = _.get(data, "actionConfiguration.paginationType");
const apiHomeScreen = (
<ApiHomeScreen
applicationId={this.props.match.params.applicationId}
@ -177,7 +189,7 @@ class ApiEditor extends React.Component<Props> {
{formUiComponent === "ApiEditorForm" && (
<ApiEditorForm
pluginId={pluginId}
allowSave={apiId in drafts}
allowSave={allowSave}
paginationType={paginationType}
isSaving={isSaving[apiId]}
isRunning={isRunning[apiId]}
@ -186,6 +198,7 @@ class ApiEditor extends React.Component<Props> {
onSaveClick={this.handleSaveClick}
onDeleteClick={this.handleDeleteClick}
onRunClick={this.handleRunClick}
datasourceFieldText={this.props.datasourceFieldText}
appName={
this.props.currentApplication
? this.props.currentApplication.name
@ -197,7 +210,7 @@ class ApiEditor extends React.Component<Props> {
{formUiComponent === "RapidApiEditorForm" && (
<RapidApiEditorForm
allowSave={apiId in drafts}
allowSave={allowSave}
paginationType={paginationType}
isSaving={isSaving[apiId]}
isRunning={isRunning[apiId]}
@ -227,25 +240,34 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
const formData = getFormValues(API_EDITOR_FORM_NAME)(state) as RestAction;
const apiAction = getActionById(state, props);
const { drafts } = state.ui.apiPane;
const { drafts, isSaving, isDeleting, isRunning } = state.ui.apiPane;
let data: RestAction | ActionData | RapidApiAction | undefined;
let allowSave;
if (apiAction && apiAction.id in drafts) {
data = drafts[apiAction.id];
allowSave = true;
} else {
data = apiAction;
allowSave = false;
}
const datasourceFieldText =
state.ui.apiPane.datasourceFieldText[formData?.id ?? ""] || "";
return {
datasourceFieldText,
actions: state.entities.actions,
apiPane: state.ui.apiPane,
currentApplication: getCurrentApplication(state),
currentPageName: getCurrentPageName(state),
pages: state.entities.pageList.pages,
formData,
data,
apiName: formData?.name || "",
plugins: state.entities.plugins.list,
pluginId: _.get(data, "pluginId"),
paginationType: _.get(data, "actionConfiguration.paginationType"),
apiAction,
isSaving,
isRunning,
isDeleting,
allowSave,
};
};

3
app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
View File

@ -41,6 +41,7 @@ interface DatasourceDBEditorProps {
isTesting: boolean;
loadingFormConfigs: boolean;
formConfig: [];
isNewDatasource: boolean;
}
interface DatasourceDBEditorState {
@ -327,7 +328,7 @@ class DatasourceDBEditor extends React.Component<
<Field
name="name"
component={FormTitle}
focusOnMount={this.isNewDatasource()}
focusOnMount={this.props.isNewDatasource}
/>
</FormTitleContainer>
{!_.isNil(sections)

4
app/client/src/pages/Editor/DataSourceEditor/index.tsx
View File

@ -26,6 +26,7 @@ interface ReduxStateProps {
formConfig: [];
loadingFormConfigs: boolean;
isDeleting: boolean;
newDatasource: string;
}
type Props = ReduxStateProps &
@ -58,6 +59,7 @@ class DataSourceEditor extends React.Component<Props> {
formConfig,
isDeleting,
deleteDatasource,
newDatasource,
} = this.props;
return (
@ -69,6 +71,7 @@ class DataSourceEditor extends React.Component<Props> {
isSaving={isSaving}
isTesting={isTesting}
isDeleting={isDeleting}
isNewDatasource={newDatasource === datasourceId}
onSubmit={this.handleSubmit}
onSave={this.handleSave}
onTest={this.props.testDatasource}
@ -112,6 +115,7 @@ const mapStateToProps = (state: AppState): ReduxStateProps => {
isTesting: datasources.isTesting,
formConfig: formConfigs[datasourcePane.selectedPlugin] || [],
loadingFormConfigs,
newDatasource: datasourcePane.newDatasource,
};
};

15
app/client/src/reducers/uiReducers/apiPaneReducer.ts
View File

@ -18,6 +18,7 @@ const initialState: ApiPaneReduxState = {
lastUsedEditorPage: "",
lastSelectedPage: "",
extraformData: {},
datasourceFieldText: {},
};
export interface ApiPaneReduxState {
@ -29,6 +30,7 @@ export interface ApiPaneReduxState {
isDeleting: Record<string, boolean>;
currentCategory: string;
lastUsedEditorPage: string;
datasourceFieldText: Record<string, string>;
lastSelectedPage: string;
extraformData: Record<string, any>;
}
@ -201,6 +203,19 @@ const apiPaneReducer = createReducer(initialState, {
},
};
},
[ReduxActionTypes.SET_DATASOURCE_FIELD_TEXT]: (
state: ApiPaneReduxState,
action: ReduxAction<{ apiId: string; value: string }>,
) => {
const { apiId } = action.payload;
return {
...state,
datasourceFieldText: {
...state.datasourceFieldText,
[apiId]: action.payload.value,
},
};
},
});
export default apiPaneReducer;

46
app/client/src/reducers/uiReducers/datasourcePaneReducer.ts
View File

@ -8,12 +8,21 @@ const initialState: DatasourcePaneReduxState = {
selectedPlugin: "",
datasourceRefs: {},
drafts: {},
actionRouteInfo: {},
newDatasource: "",
};
export interface DatasourcePaneReduxState {
selectedPlugin: string;
datasourceRefs: {};
drafts: Record<string, Datasource>;
actionRouteInfo: Partial<{
apiId: string;
datasourceId: string;
pageId: string;
applicationId: string;
}>;
newDatasource: string;
}
const datasourcePaneReducer = createReducer(initialState, {
@ -64,6 +73,43 @@ const datasourcePaneReducer = createReducer(initialState, {
...state,
drafts: _.omit(state.drafts, action.payload.id),
}),
[ReduxActionTypes.STORE_AS_DATASOURCE_UPDATE]: (
state: DatasourcePaneReduxState,
action: ReduxAction<{
apiId: string;
datasourceId: string;
pageId: string;
applicationId: string;
}>,
) => {
return {
...state,
actionRouteInfo: action.payload,
};
},
[ReduxActionTypes.STORE_AS_DATASOURCE_COMPLETE]: (
state: DatasourcePaneReduxState,
) => ({
...state,
actionRouteInfo: {},
}),
[ReduxActionTypes.CREATE_DATASOURCE_SUCCESS]: (
state: DatasourcePaneReduxState,
action: ReduxAction<{ id: string }>,
) => {
return {
...state,
newDatasource: action.payload.id,
};
},
[ReduxActionTypes.UPDATE_DATASOURCE_SUCCESS]: (
state: DatasourcePaneReduxState,
) => {
return {
...state,
newDatasource: "",
};
},
});
export default datasourcePaneReducer;

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

@ -37,7 +37,7 @@ import { initialize, autofill, change } from "redux-form";
import { getAction } from "./ActionSagas";
import { AppState } from "reducers";
import { Property, RestAction } from "api/ActionAPI";
import { changeApi } from "actions/apiPaneActions";
import { changeApi, setDatasourceFieldText } from "actions/apiPaneActions";
import {
API_PATH_START_WITH_SLASH_ERROR,
FIELD_REQUIRED_ERROR,
@ -153,6 +153,28 @@ function* syncApiParamsSaga(
`${currentPath}${paramsString}`,
),
);
if (
actionPayload.type === ReduxFormActionTypes.VALUE_CHANGE ||
actionPayload.type === ReduxFormActionTypes.ARRAY_REMOVE
) {
if (values.datasource && values.datasource.id) {
yield put(
setDatasourceFieldText(values.id, `${currentPath}${paramsString}`),
);
} else if (
values.datasource &&
values.datasource.datasourceConfiguration
) {
yield put(
setDatasourceFieldText(
values.id,
values.datasource.datasourceConfiguration.url +
`${currentPath}${paramsString}`,
),
);
}
}
}
}
@ -197,13 +219,6 @@ function* changeApiSaga(actionPayload: ReduxAction<{ id: string }>) {
data = draft;
}
if (data.actionConfiguration.path) {
if (data.actionConfiguration.path.charAt(0) === "/")
data.actionConfiguration.path = data.actionConfiguration.path.substring(
1,
);
}
if (
data.actionConfiguration.httpMethod !== "GET" &&
!data.providerId &&

26
app/client/src/sagas/CurlImportSagas.ts
View File

@ -1,11 +1,9 @@
import { takeLatest, put, all, select } from "redux-saga/effects";
import { initialize } from "redux-form";
import { takeLatest, put, all, select, take } from "redux-saga/effects";
import {
ReduxActionTypes,
ReduxActionErrorTypes,
ReduxAction,
} from "constants/ReduxActionConstants";
import { API_EDITOR_FORM_NAME } from "constants/forms";
import { validateResponse } from "sagas/ErrorSagas";
import CurlImportApi, { CurlImportRequest } from "api/ImportApi";
import { ApiResponse } from "api/ApiResponses";
@ -13,14 +11,10 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
import { AppToaster } from "components/editorComponents/ToastComponent";
import { ToastType } from "react-toastify";
import { CURL_IMPORT_SUCCESS } from "constants/messages";
import { API_EDITOR_ID_URL } from "constants/routes";
import history from "utils/history";
import {
getCurrentApplicationId,
getCurrentPageId,
} from "selectors/editorSelectors";
import { getCurrentApplicationId } from "selectors/editorSelectors";
import { fetchActions } from "actions/actionActions";
import { CURL } from "constants/ApiConstants";
import { changeApi } from "actions/apiPaneActions";
export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
const { type, pageId, name } = action.payload;
@ -35,12 +29,16 @@ export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
const response: ApiResponse = yield CurlImportApi.curlImport(request);
const isValidResponse = yield validateResponse(response);
const applicationId = yield select(getCurrentApplicationId);
const currentPageId = yield select(getCurrentPageId);
if (isValidResponse) {
AnalyticsUtil.logEvent("IMPORT_API", {
importSource: CURL,
});
yield put(fetchActions(applicationId));
const data = { ...response.data };
yield take(ReduxActionTypes.FETCH_ACTIONS_SUCCESS);
AppToaster.show({
message: CURL_IMPORT_SUCCESS,
type: ToastType.SUCCESS,
@ -49,12 +47,8 @@ export function* curlImportSaga(action: ReduxAction<CurlImportRequest>) {
type: ReduxActionTypes.SUBMIT_CURL_FORM_SUCCESS,
payload: response.data,
});
yield put(fetchActions(applicationId));
const data = { ...response.data };
yield put(initialize(API_EDITOR_FORM_NAME, data));
history.push(
API_EDITOR_ID_URL(applicationId, currentPageId, response.data.id),
);
yield put(changeApi(data.id));
}
} catch (error) {
yield put({

66
app/client/src/sagas/DatasourcesSagas.ts
View File

@ -1,4 +1,4 @@
import { all, put, takeEvery, select, call } from "redux-saga/effects";
import { all, put, takeEvery, select, call, take } from "redux-saga/effects";
import { change, initialize, getFormValues } from "redux-form";
import _ from "lodash";
import {
@ -18,7 +18,11 @@ import {
getDatasource,
getDatasourceDraft,
} from "selectors/entitiesSelector";
import { selectPlugin } from "actions/datasourceActions";
import {
selectPlugin,
createDatasource,
changeDatasource,
} from "actions/datasourceActions";
import { fetchPluginForm } from "actions/pluginActions";
import { GenericApiResponse } from "api/ApiResponses";
import DatasourcesApi, {
@ -26,6 +30,7 @@ import DatasourcesApi, {
Datasource,
} from "api/DatasourcesApi";
import PluginApi, { DatasourceForm } from "api/PluginApi";
import {
DATA_SOURCES_EDITOR_ID_URL,
DATA_SOURCES_EDITOR_URL,
@ -37,6 +42,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
import { AppToaster } from "components/editorComponents/ToastComponent";
import { ToastType } from "react-toastify";
import { getFormData } from "selectors/formSelectors";
import { changeApi, setDatasourceFieldText } from "actions/apiPaneActions";
function* fetchDatasourcesSaga() {
try {
@ -73,9 +79,7 @@ function* createDatasourceSaga(
type: ReduxActionTypes.CREATE_DATASOURCE_SUCCESS,
payload: response.data,
});
yield put(
change(API_EDITOR_FORM_NAME, "datasource.id", response.data.id),
);
yield put(change(API_EDITOR_FORM_NAME, "datasource", response.data));
}
} catch (error) {
yield put({
@ -344,6 +348,53 @@ function* formValueChangeSaga(
yield all([call(updateDraftsSaga)]);
}
function* storeAsDatasourceSaga() {
const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
const applicationId = yield select(getCurrentApplicationId);
const pageId = yield select(getCurrentPageId);
const datasource = _.get(values, "datasource");
history.push(DATA_SOURCES_EDITOR_URL(applicationId, pageId));
yield put(createDatasource(datasource));
const createDatasourceSuccessAction = yield take(
ReduxActionTypes.CREATE_DATASOURCE_SUCCESS,
);
const createdDatasource = createDatasourceSuccessAction.payload;
yield put({
type: ReduxActionTypes.STORE_AS_DATASOURCE_UPDATE,
payload: {
pageId,
applicationId,
apiId: values.id,
datasourceId: createdDatasource.id,
},
});
yield put(changeDatasource(createdDatasource));
}
function* updateDatasourceSuccessSaga(action: ReduxAction<Datasource>) {
const state = yield select();
const actionRouteInfo = _.get(state, "ui.datasourcePane.actionRouteInfo");
const updatedDatasource = action.payload;
if (
actionRouteInfo &&
updatedDatasource.id === actionRouteInfo.datasourceId
) {
const { apiId } = actionRouteInfo;
yield put(setDatasourceFieldText(apiId, ""));
yield put(changeApi(apiId));
}
yield put({
type: ReduxActionTypes.STORE_AS_DATASOURCE_COMPLETE,
});
}
export function* watchDatasourcesSagas() {
yield all([
takeEvery(ReduxActionTypes.FETCH_DATASOURCES_INIT, fetchDatasourcesSaga),
@ -356,6 +407,11 @@ export function* watchDatasourcesSagas() {
takeEvery(ReduxActionTypes.TEST_DATASOURCE_INIT, testDatasourceSaga),
takeEvery(ReduxActionTypes.DELETE_DATASOURCE_INIT, deleteDatasourceSaga),
takeEvery(ReduxActionTypes.CHANGE_DATASOURCE, changeDatasourceSaga),
takeEvery(ReduxActionTypes.STORE_AS_DATASOURCE_INIT, storeAsDatasourceSaga),
takeEvery(
ReduxActionTypes.UPDATE_DATASOURCE_SUCCESS,
updateDatasourceSuccessSaga,
),
// Intercepting the redux-form change actionType
takeEvery(ReduxFormActionTypes.VALUE_CHANGE, formValueChangeSaga),
]);

17
app/client/src/selectors/entitiesSelector.ts
View File

@ -154,11 +154,9 @@ export const getQueryActions = (state: AppState): ActionDataState => {
const getCurrentPageId = (state: AppState) =>
state.entities.pageList.currentPageId;
export const getDatasourcePlugins = (state: AppState) => {
return state.entities.plugins.list.filter(
plugin => plugin?.allowUserDatasources ?? true,
);
};
export const getDatasourcePlugins = createSelector(getPlugins, plugins => {
return plugins.filter(plugin => plugin?.allowUserDatasources ?? true);
});
export const getActionsForCurrentPage = createSelector(
getCurrentPageId,
@ -169,13 +167,12 @@ export const getActionsForCurrentPage = createSelector(
},
);
export const getActionResponses = (
state: AppState,
): Record<string, ActionResponse | undefined> => {
export const getActionResponses = createSelector(getActions, actions => {
const responses: Record<string, ActionResponse | undefined> = {};
state.entities.actions.forEach(a => {
actions.forEach(a => {
responses[a.config.id] = a.data;
});
return responses;
};
});

39
app/client/src/utils/Validators.ts
View File

@ -316,6 +316,45 @@ export const VALIDATORS: Record<ValidationType, Validator> = {
}
return { isValid, parsed };
},
[VALIDATION_TYPES.SINGLE_CHART_DATA]: (value, props, dataTree) => {
const { isValid, parsed } = VALIDATORS[VALIDATION_TYPES.TABLE_DATA](
value,
props,
dataTree,
);
if (!isValid) {
return {
isValid: false,
parsed: [],
message: `${WIDGET_TYPE_VALIDATION_ERROR}: Chart Data`,
};
}
const isValidChartData = _.every(
parsed,
(chartPoint: { x: string; y: any }) => {
return (
_.isObject(chartPoint) &&
_.isString(chartPoint.x) &&
!_.isUndefined(chartPoint.y)
);
},
);
if (!isValidChartData) {
return {
isValid: false,
parsed: [],
message: `${WIDGET_TYPE_VALIDATION_ERROR}: Chart Data`,
};
}
return {
isValid: true,
parsed,
message: "",
};
},
[VALIDATION_TYPES.MARKERS]: (
value: any,
props: WidgetProps,

13
app/client/src/widgets/ChartWidget.tsx
View File

@ -20,10 +20,20 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
chartName: VALIDATION_TYPES.TEXT,
isVisible: VALIDATION_TYPES.BOOLEAN,
chartData: VALIDATION_TYPES.CHART_DATA,
singleChartData: VALIDATION_TYPES.SINGLE_CHART_DATA,
};
}
getPageView() {
let chartData: ChartData[] = this.props.chartData;
if (this.props.singleChartData) {
chartData = [
{
seriesName: this.props.chartName,
data: this.props.singleChartData,
},
];
}
return (
<Suspense fallback={<Skeleton />}>
<ChartComponent
@ -33,7 +43,7 @@ class ChartWidget extends BaseWidget<ChartWidgetProps, WidgetState> {
xAxisName={this.props.xAxisName}
yAxisName={this.props.yAxisName}
chartName={this.props.chartName}
chartData={this.props.chartData}
chartData={chartData}
widgetId={this.props.widgetId}
allowHorizontalScroll={this.props.allowHorizontalScroll}
/>
@ -67,6 +77,7 @@ export interface ChartData {
export interface ChartWidgetProps extends WidgetProps {
chartType: ChartType;
chartData: ChartData[];
singleChartData: ChartDataPoint[];
xAxisName: string;
yAxisName: string;
chartName: string;