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

Merge branch 'feature/acl' into fix/invite-users

Browse Source
This commit is contained in:
Tejaaswini 2020-06-05 18:58:21 +05:30
commit 7c3d18b7f6
111 changed files with 3979 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/cypress.json
View File

@ -10,5 +10,7 @@
"overwrite": false,
"html": true,
"json": false
}
},
"viewportHeight": 900,
"viewportWidth": 1400
}

186
app/client/cypress/fixtures/ChartTextDsl.json Normal file
View File

@ -0,0 +1,186 @@
{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 1224,
"snapColumns": 16,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 1292,
"containerStyle": "none",
"snapRows": 33,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"dynamicBindings": {},
"version": 4,
"minHeight": 1292,
"parentColumnSpace": 1,
"leftColumn": 0,
"children": [
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container1",
"type": "CONTAINER_WIDGET",
"containerStyle": "card",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 75.25,
"parentRowSpace": 38,
"dynamicBindings": {},
"leftColumn": 0,
"rightColumn": 8,
"topRow": 0,
"bottomRow": 9,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [
{
"backgroundColor": "transparent",
"widgetName": "kydabisaxj",
"type": "CANVAS_WIDGET",
"containerStyle": "none",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 602,
"topRow": 0,
"bottomRow": 342,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [
{
"isVisible": true,
"widgetName": "Chart1",
"chartType": "LINE_CHART",
"chartName": "Sales on working days",
"allowHorizontalScroll": false,
"chartData": "[{\"seriesName\":\"\",\"data\":\"\"}]",
"xAxisName": "Last Week",
"yAxisName": "Total Order Revenue $",
"type": "CHART_WIDGET",
"isLoading": false,
"parentColumnSpace": 34.6875,
"parentRowSpace": 38,
"leftColumn": 5,
"rightColumn": 11,
"topRow": 0,
"bottomRow": 8,
"parentId": "56c5odk5ic",
"widgetId": "64jukpgbzh",
"dynamicBindings": {}
}
],
"widgetId": "56c5odk5ic",
"detachFromLayout": true,
"canExtend": false
}
],
"widgetId": "kzlk5ductp"
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container3",
"type": "CONTAINER_WIDGET",
"containerStyle": "card",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 75.25,
"parentRowSpace": 38,
"dynamicBindings": {},
"leftColumn": 0,
"rightColumn": 16,
"topRow": 9,
"bottomRow": 23,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [
{
"backgroundColor": "transparent",
"widgetName": "za6o0unktq",
"type": "CANVAS_WIDGET",
"containerStyle": "none",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 1204,
"topRow": 0,
"bottomRow": 532,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [
{
"isVisible": true,
"text": "Label",
"textStyle": "LABEL",
"textAlign": "LEFT",
"widgetName": "Text1",
"type": "TEXT_WIDGET",
"isLoading": false,
"parentColumnSpace": 71.75,
"parentRowSpace": 38,
"leftColumn": 3,
"rightColumn": 7,
"topRow": 2,
"bottomRow": 3,
"parentId": "d2i9xsy2fk",
"widgetId": "u210slvpsz",
"dynamicBindings": {}
}
],
"widgetId": "d2i9xsy2fk",
"detachFromLayout": true,
"canExtend": false
}
],
"widgetId": "t2a7se9pxe"
},
{
"backgroundColor": "#FFFFFF",
"widgetName": "Container4",
"type": "CONTAINER_WIDGET",
"containerStyle": "card",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 75.25,
"parentRowSpace": 38,
"dynamicBindings": {},
"leftColumn": 8,
"rightColumn": 16,
"topRow": 0,
"bottomRow": 9,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [
{
"backgroundColor": "transparent",
"widgetName": "cli9vgw4yj",
"type": "CANVAS_WIDGET",
"containerStyle": "none",
"isVisible": true,
"isLoading": false,
"parentColumnSpace": 1,
"parentRowSpace": 1,
"leftColumn": 0,
"rightColumn": 602,
"topRow": 0,
"bottomRow": 342,
"snapColumns": 16,
"orientation": "VERTICAL",
"children": [],
"widgetId": "qzniae78ab",
"detachFromLayout": true,
"canExtend": false
}
],
"widgetId": "gtsbf2q08n"
}
]
},
"layoutOnLoadActions": []
}

17
app/client/cypress/fixtures/example.json
View File

@ -152,5 +152,20 @@
"productName": "Avocado Panini",
"orderAmount": 7.99
}
]
],
"chartInputValidate": [
{
"x": "Test1",
"y": 5400
},
{
"x": "Test2",
"y": 10000
},
{
"x": "Test3",
"y": 1000
}
],
"Chartval":["Test1", "Test2", "Test3"]
}

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();
});

1
app/client/cypress/integration/Smoke_TestSuite/ApiPaneTests/API_Search_spec.js
View File

@ -3,7 +3,6 @@ const testdata = require("../../../fixtures/testdata.json");
describe("API Panel Test Functionality ", function() {
it("Test Search API fetaure", function() {
cy.log("Login Successful");
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.NavigateToAPI_Panel();
cy.log("Navigation to API Panel screen successful");
cy.CreateAPI("FirstAPI");

1
app/client/cypress/integration/Smoke_TestSuite/ApiPaneTests/API_all_sidebar_actions_spec.js
View File

@ -3,7 +3,6 @@ const testdata = require("../../../fixtures/testdata.json");
describe("API Panel Test Functionality ", function() {
it("Test API copy/Move/delete feature", function() {
cy.log("Login Successful");
cy.viewport("macbook-15"); //To avoid screen Resize issues
cy.NavigateToAPI_Panel();
cy.log("Navigation to API Panel screen successful");
cy.CreateAPI("FirstAPI");

71
app/client/cypress/integration/Smoke_TestSuite/Binding/ChartText.js Normal file
View File

@ -0,0 +1,71 @@
const commonlocators = require("../../../locators/commonlocators.json");
const viewWidgetsPage = require("../../../locators/ViewWidgets.json");
const publish = require("../../../locators/publishWidgetspage.json");
const dsl = require("../../../fixtures/ChartTextDsl.json");
describe("Text-Chart Binding Functionality", function() {
before(() => {
cy.addDsl(dsl);
});
it("Text-Chart Binding Functionality View", function() {
cy.openPropertyPane("textwidget");
cy.testJsontext("text", JSON.stringify(this.data.chartInputValidate));
cy.get(commonlocators.TextInside).should(
"have.text",
JSON.stringify(this.data.chartInputValidate),
);
cy.closePropertyPane();
cy.openPropertyPane("chartwidget");
cy.get(viewWidgetsPage.chartType)
.find(commonlocators.dropdownbuttonclick)
.click({ force: true })
.get(commonlocators.dropdownmenu)
.children()
.contains("Column Chart")
.click();
cy.get(viewWidgetsPage.chartType)
.find(commonlocators.menuSelection)
.should("have.text", "Column Chart");
cy.testJsontext("chartdata", "{{Text1.text}}");
cy.closePropertyPane();
const labels = [
this.data.Chartval[0],
this.data.Chartval[1],
this.data.Chartval[2],
];
[0, 1, 2].forEach(k => {
cy.get(viewWidgetsPage.rectangleChart)
.eq(k)
.trigger("mousemove", { force: true });
cy.get(viewWidgetsPage.Chartlabel)
.eq(k)
.should("have.text", labels[k]);
});
cy.PublishtheApp();
});
it("Text-Chart Binding Functionality Publish", function() {
cy.get(publish.chartCanvasVal).should("be.visible");
cy.get(publish.chartWidget).should("have.css", "opacity", "1");
const labels = [
this.data.Chartval[0],
this.data.Chartval[1],
this.data.Chartval[2],
];
[0, 1, 2].forEach(k => {
cy.get(publish.rectChart)
.eq(k)
.trigger("mousemove", { force: true });
cy.get(publish.chartLab)
.eq(k)
.should("have.text", labels[k]);
});
cy.get(commonlocators.TextInside).should(
"have.text",
JSON.stringify(this.data.chartInputValidate),
);
});
});
afterEach(() => {
// put your clean up code if any
});

74
app/client/cypress/integration/Smoke_TestSuite/Binding/TextTable.js
View File

@ -6,13 +6,85 @@ describe("Text-Table Binding Functionality", function() {
before(() => {
cy.addDsl(dsl);
});
it("Text-Table Binding Functionality For Username", function() {
it("Text-Table Binding Functionality For Id", function() {
cy.openPropertyPane("tablewidget");
/**
* @param(Index) Provide index value to select the row.
*/
cy.isSelectRow(1);
cy.openPropertyPane("textwidget");
cy.testJsontext("text", "{{Table1.selectedRow.id}}");
/**
* @param{Row Index} Provide the row index
* @param(Column Index) Provide column index
*/
cy.readTabledata("1", "0").then(tabData => {
const tabValue = tabData;
cy.get(commonlocators.TextInside).should("have.text", tabValue);
cy.PublishtheApp();
cy.isSelectRow(1);
cy.readTabledataPublish("1", "0").then(tabDataP => {
const tabValueP = tabDataP;
cy.get(commonlocators.TextInside).should("have.text", tabValueP);
});
});
});
it("Text-Table Binding Functionality For Email", function() {
cy.get(publish.backToEditor)
.first()
.click();
cy.isSelectRow(2);
cy.openPropertyPane("textwidget");
cy.testJsontext("text", "{{Table1.selectedRow.email}}");
/**
* @param{Row Index} Provide the row index
* @param(Column Index) Provide column index
*/
cy.readTabledata("2", "1").then(tabData => {
const tabValue = tabData;
cy.get(commonlocators.TextInside).should("have.text", tabValue);
cy.PublishtheApp();
cy.isSelectRow(2);
cy.readTabledataPublish("2", "1").then(tabDataP => {
const tabValueP = tabDataP;
cy.get(commonlocators.TextInside).should("have.text", tabValueP);
});
});
});
it("Text-Table Binding Functionality For Total Length", function() {
cy.get(publish.backToEditor)
.first()
.click();
cy.pageNo();
cy.openPropertyPane("textwidget");
cy.testJsontext("text", "{{Table1.pageSize}}");
cy.get(commonlocators.TableRow)
.find(".tr")
.then(listing => {
const listingCount = listing.length.toString();
cy.get(commonlocators.TextInside).should("have.text", listingCount);
cy.PublishtheApp();
cy.pageNo();
cy.get(publish.tableLength)
.find(".tr")
.then(listing => {
const listingCountP = listing.length.toString();
cy.get(commonlocators.TextInside).should(
"have.text",
listingCountP,
);
});
});
});
it("Text-Table Binding Functionality For Username", function() {
cy.get(publish.backToEditor)
.first()
.click();
/**
* @param(Index) Provide index value to select the row.
*/
cy.isSelectRow(1);
cy.openPropertyPane("textwidget");
cy.testJsontext("text", JSON.stringify(this.data.textfun));
/**
* @param{Row Index} Provide the row index

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)

68
app/client/cypress/integration/Smoke_TestSuite/CommonWidgets/Table_spec.js
View File

@ -19,16 +19,16 @@ describe("Table Widget Functionality", function() {
cy.widgetText("Table1", widgetsPage.tableWidget, commonlocators.tableInner);
cy.testJsontext("tabledata", JSON.stringify(this.data.TableInput));
cy.wait("@updateLayout");
cy.ExportVerify(commonlocators.pdfSupport, "PDF Export");
cy.ExportVerify(commonlocators.ExcelSupport, "Excel Export");
cy.ExportVerify(commonlocators.csvSupport, "CSV Export");
// cy.ExportVerify(commonlocators.pdfSupport, "PDF Export");
// cy.ExportVerify(commonlocators.ExcelSupport, "Excel Export");
// cy.ExportVerify(commonlocators.csvSupport, "CSV Export");
cy.get(widgetsPage.ColumnAction).click({ force: true });
cy.readTabledata("1", "5").then(tabData => {
const tabValue = tabData;
expect(tabValue).to.be.equal("Action");
cy.log("the value is" + tabValue);
});
cy.pageNo(2).should("be.visible");
// cy.readTabledata("1", "5").then(tabData => {
// const tabValue = tabData;
// expect(tabValue).to.be.equal("Action");
// cy.log("the value is" + tabValue);
// });
cy.pageNo();
cy.openPropertyPane("tablewidget");
cy.get(widgetsPage.tableOnRowSelected)
.get(commonlocators.dropdownSelectButton)
@ -56,31 +56,33 @@ describe("Table Widget Functionality", function() {
});
});
it("Table Widget Functionality To Verify The PageNo", function() {
cy.pageNo(2).should("be.visible");
cy.get(publish.backToEditor).click();
});
it("Table Widget Functionality To Verify The Extension Support", function() {
cy.openPropertyPane("tablewidget");
cy.togglebar(commonlocators.pdfSupport);
cy.PublishtheApp();
cy.get(publish.tableWidget + " " + "button").should(
"contain",
"PDF Export",
);
cy.get(publish.backToEditor).click();
cy.openPropertyPane("tablewidget");
cy.togglebarDisable(commonlocators.pdfSupport);
cy.togglebar(commonlocators.ExcelSupport);
cy.PublishtheApp();
cy.get(publish.tableWidget + " " + "button").should(
"not.contain",
"PDF Export",
);
cy.get(publish.tableWidget + " " + "button").should(
"contain",
"Excel Export",
);
cy.pageNo();
cy.get(publish.backToEditor)
.first()
.click();
});
// it("Table Widget Functionality To Verify The Extension Support", function() {
// cy.openPropertyPane("tablewidget");
// cy.togglebar(commonlocators.pdfSupport);
// cy.PublishtheApp();
// cy.get(publish.tableWidget + " " + "button").should(
// "contain",
// "PDF Export",
// );
// cy.get(publish.backToEditor).click();
// cy.openPropertyPane("tablewidget");
// cy.togglebarDisable(commonlocators.pdfSupport);
// cy.togglebar(commonlocators.ExcelSupport);
// cy.PublishtheApp();
// cy.get(publish.tableWidget + " " + "button").should(
// "not.contain",
// "PDF Export",
// );
// cy.get(publish.tableWidget + " " + "button").should(
// "contain",
// "Excel Export",
// );
// });
});
Cypress.on("test:after:run", attributes => {
/* eslint-disable no-console */

19
app/client/cypress/integration/Smoke_TestSuite/DynamicInput/autocomplete_spec.js
View File

@ -1,6 +1,7 @@
const dsl = require("../../../fixtures/commondsl.json");
const pages = require("../../../locators/Pages.json");
const dynamicInputLocators = require("../../../locators/DynamicInput.json");
const apiwidget = require("../../../locators/apiWidgetslocator.json");
describe("Dynamic input autocomplete", () => {
beforeEach(() => {
@ -52,4 +53,22 @@ describe("Dynamic input autocomplete", () => {
});
});
});
it("opens current value popup", () => {
// Test on widgets pane
cy.get(pages.widgetsEditor).click();
cy.openPropertyPane("buttonwidget");
cy.get(dynamicInputLocators.input)
.first()
.focus();
cy.assertEvaluatedValuePopup("string");
// Test on api pane
cy.NavigateToAPI_Panel();
cy.get(apiwidget.createapi).click({ force: true });
cy.wait("@createNewApi");
cy.xpath(apiwidget.headerValue)
.first()
.focus();
cy.assertEvaluatedValuePopup("string");
});
});

1
app/client/cypress/integration/Smoke_TestSuite/UnitTest/CreateDeleteApp_spec.js
View File

@ -2,7 +2,6 @@ describe("Create and Delete App Functionality", function() {
it("Delete App Functionality", function() {
cy.log("appname: " + localStorage.getItem("AppName"));
const appname = localStorage.getItem("AppName");
cy.openPropertyPane("textwidget");
cy.DeleteApp(appname);
cy.wait("@deleteApplication");
cy.get("@deleteApplication").should("have.property", "status", 200);

92
app/client/cypress/integration/Smoke_TestSuite/ViewWidgets/Map_spec.js
View File

@ -1,13 +1,17 @@
const commonlocators = require("../../../locators/commonlocators.json");
const viewWidgetsPage = require("../../../locators/ViewWidgets.json");
const dsl = require("../../../fixtures/Mapdsl.json");
const publishPage = require("../../../locators/publishWidgetspage.json");
describe("Map Widget Functionality", function() {
beforeEach(() => {
before(() => {
cy.addDsl(dsl);
});
it("Map Widget Functionality", function() {
this.beforeEach(() => {
cy.openPropertyPane("mapwidget");
});
it("Map Widget Functionality", function() {
/**
* @param{Text} Random Text
* @param{MapWidget}Mouseover
@ -35,18 +39,88 @@ describe("Map Widget Functionality", function() {
cy.get(viewWidgetsPage.zoomLevel)
.eq(1)
.click({ force: true });
cy.get(viewWidgetsPage.mapSearch).should("be.visible");
cy.get(viewWidgetsPage.mapSearch)
.invoke("attr", "placeholder")
.should("contain", "Enter location to search");
cy.get(viewWidgetsPage.mapSearch)
.click({ force: true })
.clear()
.type(this.data.location2)
.type("{enter}");
});
afterEach(() => {
// put your clean up code if any
it("Map-Enable Location,Map search and Create Marker Property Validation", function() {
/**
* Enable the Search Location checkbox and Validate the same in editor mode
*/
cy.CheckWidgetProperties(commonlocators.enableSearchLocCheckbox);
cy.get(viewWidgetsPage.mapSearch).should("be.visible");
cy.get(viewWidgetsPage.mapSearch)
.invoke("attr", "placeholder")
.should("contain", "Enter location to search");
/**
* Enable the Pick Location checkbox and Validate the same in editor mode
*/
cy.CheckWidgetProperties(commonlocators.enablePickLocCheckbox);
cy.get(viewWidgetsPage.pickMyLocation).should("exist");
/**
* Enable the Createnew Marker checkbox and Validate the same in editor mode
*/
cy.CheckWidgetProperties(commonlocators.enableCreateMarkerCheckbox);
/**
* Validation will be added when create marker fun is working fine
*/
cy.PublishtheApp();
/**
* Publish mode Validation
*/
cy.get(publishPage.mapSearch).should("be.visible");
cy.get(publishPage.mapSearch)
.invoke("attr", "placeholder")
.should("contain", "Enter location to search");
cy.get(publishPage.pickMyLocation).should("exist");
cy.get(publishPage.backToEditor).click();
});
it("Map-Disable Location, Mapsearch and Create Marker Property Validation", function() {
/**
* Disable the Search Location checkbox and Validate the same in editor mode
*/
cy.UncheckWidgetProperties(commonlocators.enableSearchLocCheckbox);
cy.get(viewWidgetsPage.mapSearch).should("not.be.visible");
/**
* Disable the Pick Location checkbox and Validate the same in editor mode
*/
cy.UncheckWidgetProperties(commonlocators.enablePickLocCheckbox);
cy.get(viewWidgetsPage.pickMyLocation).should("not.exist");
/**
* Disable the Createnew Marker checkbox and Validate the same in editor mode
*/
cy.UncheckWidgetProperties(commonlocators.enableCreateMarkerCheckbox);
/**
* Validation will be added when create marker fun is working fine
*/
cy.PublishtheApp();
/**
* Publish mode Validation
*/
cy.get(publishPage.mapSearch).should("not.be.visible");
cy.get(publishPage.pickMyLocation).should("not.exist");
cy.get(publishPage.backToEditor).click();
});
it("Map-Check Visible field Validation", function() {
//Check the disableed checkbox and Validate
cy.CheckWidgetProperties(commonlocators.visibleCheckbox);
cy.PublishtheApp();
cy.get(publishPage.mapWidget).should("be.visible");
cy.get(publishPage.backToEditor).click();
});
it("Map-Unckeck Visible field Validation", function() {
//Uncheck the disabled checkbox and validate
cy.UncheckWidgetProperties(commonlocators.visibleCheckbox);
cy.PublishtheApp();
cy.get(publishPage.mapWidget).should("not.be.visible");
});
});

3
app/client/cypress/locators/DynamicInput.json
View File

@ -1,4 +1,5 @@
{
"input": ".CodeMirror textarea",
"hints": "ul.CodeMirror-hints"
"hints": "ul.CodeMirror-hints",
"evaluatedValue": ".t--CodeEditor-evaluatedValue"
}

3
app/client/cypress/locators/ViewWidgets.json
View File

@ -27,5 +27,6 @@
"createMarker": ".t--property-control-createnewmarker [type='checkbox']",
"zoomLevel": ".t--property-control-zoomlevel svg",
"defaultImage": ".t--property-control-defaultimage .CodeMirror-code",
"Chartlabel": ".t--draggable-chartwidget g:nth-child(5) text"
"Chartlabel": ".t--draggable-chartwidget g:nth-child(5) text",
"pickMyLocation": ".t--draggable-mapwidget div[title='Pick My Location']"
}

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

@ -6,7 +6,7 @@
"popover": ".bp3-popover-target >div>svg",
"moveTo": ".single-select >div:contains('Move to')",
"copyTo": ".single-select >div:contains('Copy to')",
"home": ".single-select >div:contains('Home')",
"home": ".single-select >div:contains('Page1')",
"delete": ".single-select >div:contains('Delete')",
"path": ".t--path >div textarea",
"editResourceUrl": ".t--dataSourceField input",
@ -33,4 +33,4 @@
"panigationPrevUrl": ".t--apiFormPaginationPrev div>textarea",
"TestNextUrl": ".t--apiFormPaginationNextTest",
"TestPreUrl": ".t--apiFormPaginationPrevTest"
}
}

9
app/client/cypress/locators/commonlocators.json
View File

@ -33,7 +33,7 @@
"editWidgetName": ".bp3-editable-text",
"dropDownIcon": ".t--property-control-textstyle span.bp3-icon-chevron-down",
"onDateSelectedField": ".t--property-control-ondateselected",
"TableRow": ".t--draggable-tablewidget .e-gridcontent.e-lib.e-droppable",
"TableRow": ".t--draggable-tablewidget .tbody",
"Disablejs": ".t--property-control-disabled",
"requiredjs": ".t--property-control-required",
"horizontalScroll": ".t--property-control-allowhorizontalscroll input",
@ -45,5 +45,8 @@
"disabledBtn": " button[disabled='disabled']",
"inputField": " .bp3-input",
"csvSupport": ".t--property-control-csvexport input",
"backToEditor": ".bp3-icon.bp3-icon-chevron-left + span.bp3-button-text"
}
"backToEditor": ".t--back-to-editor",
"enableSearchLocCheckbox": ".t--property-control-enablesearchlocation input",
"enablePickLocCheckbox": ".t--property-control-enablepicklocation input",
"enableCreateMarkerCheckbox": ".t--property-control-createnewmarker input"
}

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

@ -3,7 +3,7 @@
"textWidget": ".t--widget-textwidget",
"richTextEditorWidget": ".t--widget-richtexteditorwidget",
"datepickerWidget": ".t--widget-datepickerwidget",
"backToEditor": ".bp3-icon.bp3-icon-chevron-left + span.bp3-button-text",
"backToEditor": ".t--back-to-editor",
"inputWidget": ".t--widget-inputwidget",
"checkboxWidget": ".t--widget-checkboxwidget",
"radioWidget": ".t--widget-radiogroupwidget",
@ -12,7 +12,14 @@
"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",
"tableLength": ".t--widget-tablewidget .e-gridcontent.e-lib.e-droppable"
"chartCanvasVal": ".t--widget-chartwidget g[class*='-canvas'] rect ",
"mapWidget": ".t--widget-mapwidget",
"tableLength": ".t--widget-tablewidget .tbody",
"mapSearch": ".t--widget-mapwidget input",
"pickMyLocation": ".t--widget-mapwidget div[title='Pick My Location']",
"rectChart":".t--widget-chartwidget g rect",
"chartLab":".t--widget-chartwidget g:nth-child(5) text"
}

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

@ -11,6 +11,7 @@ const LayoutPage = require("../locators/Layout.json");
const formWidgetsPage = require("../locators/FormWidgets.json");
const ApiEditor = require("../locators/ApiEditor.json");
const apiwidget = require("../locators/apiWidgetslocator.json");
const dynamicInputLocators = require("../locators/DynamicInput.json");
let pageidcopy = " ";
Cypress.Commands.add("CreateApp", appname => {
@ -184,7 +185,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 });
});
@ -210,16 +212,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();
});
@ -947,6 +950,10 @@ Cypress.Commands.add("openPropertyPane", widgetType => {
.click();
});
Cypress.Commands.add("closePropertyPane", () => {
cy.get(commonlocators.editPropCrossButton).click();
});
Cypress.Commands.add("createApi", (url, parameters) => {
cy.get("@createNewApi").then(response => {
cy.get(ApiEditor.ApiNameField).should("be.visible");
@ -961,7 +968,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 });
@ -972,16 +979,13 @@ Cypress.Commands.add("createApi", (url, parameters) => {
Cypress.Commands.add("isSelectRow", index => {
cy.get(
'.e-gridcontent.e-lib.e-droppable td[index="' +
index +
'"][aria-colindex="' +
index +
'"]',
'.tbody .td[data-rowindex="' + index + '"][data-colindex="' + 0 + '"]',
).click({ force: true });
});
Cypress.Commands.add("readTabledata", (rowNum, colNum) => {
const selector = `.t--draggable-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`;
// const selector = `.t--draggable-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`;
const selector = `.t--draggable-tablewidget .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}] div`;
const tabVal = cy.get(selector).invoke("text");
return tabVal;
});
@ -1002,10 +1006,9 @@ Cypress.Commands.add("setDate", (date, dateFormate) => {
});
Cypress.Commands.add("pageNo", index => {
cy.get(".e-pagercontainer a")
.eq(index)
.click({ force: true })
.should("be.visible");
cy.get(".page-item")
.first()
.click({ force: true });
});
Cypress.Commands.add("pageNoValidate", index => {
@ -1106,7 +1109,18 @@ Cypress.Commands.add("ExportVerify", (togglecss, name) => {
});
Cypress.Commands.add("readTabledataPublish", (rowNum, colNum) => {
const selector = `.t--widget-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`;
// const selector = `.t--widget-tablewidget .e-gridcontent.e-lib.e-droppable td[index=${rowNum}][aria-colindex=${colNum}]`;
const selector = `.t--widget-tablewidget .tbody .td[data-rowindex=${rowNum}][data-colindex=${colNum}] div`;
const tabVal = cy.get(selector).invoke("text");
return tabVal;
});
Cypress.Commands.add("assertEvaluatedValuePopup", expectedType => {
cy.get(dynamicInputLocators.evaluatedValue)
.should("be.visible")
.children("p")
.should("contain.text", "Expected type:")
.should("contain.text", "Current Value:")
.siblings("pre")
.should("have.text", expectedType);
});

1
app/client/cypress/support/index.js
View File

@ -22,7 +22,6 @@ let appId;
import "./commands";
before(function() {
console.log("**** Got Cypress base URL as: ", process.env.CYPRESS_BASE_URL);
cy.viewport("macbook-15");
cy.startServerAndRoutes();
cy.LogintoApp(loginData.username, loginData.password);
// cy.SearchApp(inputData.appname)

8
app/client/docker/nginx-linux.conf
View File

@ -18,6 +18,10 @@ server {
proxy_pass http://localhost:3000;
}
location /f {
proxy_pass https://cdn.optimizely.com/;
}
location /api {
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
@ -58,6 +62,10 @@ server {
location / {
proxy_pass http://localhost:3000;
}
location /f {
proxy_pass https://cdn.optimizely.com/;
}
location /api {
proxy_set_header X-Forwarded-Proto $scheme;

8
app/client/docker/nginx-mac.conf
View File

@ -16,6 +16,10 @@ server {
proxy_pass http://host.docker.internal:3000;
}
location /f {
proxy_pass https://cdn.optimizely.com/;
}
location /api {
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
@ -56,6 +60,10 @@ server {
location / {
proxy_pass http://host.docker.internal:3000;
}
location /f {
proxy_pass https://cdn.optimizely.com/;
}
location /api {
proxy_set_header X-Forwarded-Proto $scheme;

6
app/client/netlify.toml
View File

@ -60,6 +60,12 @@
force = true
headers = { X-Forwarded-Host = "APP_HOST_PLACEHOLDER", X-Forwarded-Proto = "https" }
[[redirects]]
from = "/f/*"
to = "https://cdn.optimizely.com/:splat"
status = 200
force = true
# This must be the last redirect in the chain because it's a catch-all
[[redirects]]
from = "/*"

2
app/client/package.json
View File

@ -32,6 +32,7 @@
"@types/react-instantsearch-dom": "^6.3.0",
"@types/react-redux": "^7.0.1",
"@types/react-router-dom": "^5.1.2",
"@types/react-table": "^7.0.13",
"@types/styled-components": "^4.1.8",
"@types/tinycolor2": "^1.4.2",
"@uppy/core": "^1.8.2",
@ -90,6 +91,7 @@
"react-scripts": "^3.3.0",
"react-select": "^3.0.8",
"react-spring": "^8.0.27",
"react-table": "^7.0.0",
"react-tabs": "^3.0.0",
"react-toastify": "^5.5.0",
"react-transition-group": "^4.3.0",

7
app/client/src/actions/actionActions.ts
View File

@ -1,18 +1,19 @@
import { RestAction, PaginationField, ActionResponse } from "api/ActionAPI";
import { PaginationField, ActionResponse } from "api/ActionAPI";
import {
ReduxActionTypes,
ReduxAction,
ReduxActionErrorTypes,
} from "constants/ReduxActionConstants";
import { Action, RestAction } from "entities/Action";
export const createActionRequest = (payload: Partial<RestAction>) => {
export const createActionRequest = (payload: Partial<Action>) => {
return {
type: ReduxActionTypes.CREATE_ACTION_INIT,
payload,
};
};
export const createActionSuccess = (payload: RestAction) => {
export const createActionSuccess = (payload: Action) => {
return {
type: ReduxActionTypes.CREATE_ACTION_SUCCESS,
payload,

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

@ -48,6 +48,16 @@ export const createNewApiAction = (
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,

2
app/client/src/actions/queryPaneActions.ts
View File

@ -1,5 +1,5 @@
import { ReduxActionTypes, ReduxAction } from "constants/ReduxActionConstants";
import { RestAction } from "api/ActionAPI";
import { RestAction } from "entities/Action";
export const createQueryRequest = (payload: Partial<RestAction>) => {
return {

69
app/client/src/api/ActionAPI.tsx
View File

@ -1,12 +1,11 @@
import API, { HttpMethod } from "./Api";
import API from "./Api";
import { ApiResponse, GenericApiResponse, ResponseMeta } from "./ApiResponses";
import {
APIRequest,
DEFAULT_EXECUTE_ACTION_TIMEOUT_MS,
} from "constants/ApiConstants";
import { AxiosPromise } from "axios";
import { Datasource } from "./DatasourcesApi";
import { PaginationType } from "pages/Editor/APIEditor/Pagination";
import { RestAction } from "entities/Action";
export interface CreateActionRequest<T> extends APIRequest {
datasourceId: string;
@ -19,21 +18,9 @@ export interface UpdateActionRequest<T> extends CreateActionRequest<T> {
actionId: string;
}
export interface APIConfig {
datasourceId: string;
pageId: string;
name: string;
requestHeaders: Record<string, string>;
httpMethod: HttpMethod;
path: string;
body: JSON;
queryParams: Record<string, string>;
actionId: string;
}
export interface Property {
key: string;
value: string;
value?: string;
}
export interface BodyFormData {
@ -45,17 +32,6 @@ export interface BodyFormData {
type: string;
}
export interface APIConfigRequest {
headers: Property[];
httpMethod: string;
path: string;
body: JSON | string | Record<string, any> | null;
queryParameters: Property[];
paginationType: PaginationType;
bodyFormData: BodyFormData[];
timeoutInMillisecond: number;
}
export interface QueryConfig {
queryString: string;
}
@ -65,45 +41,6 @@ export interface ActionCreateUpdateResponse extends ApiResponse {
jsonPathKeys: Record<string, string>;
}
export interface RestAction {
id: string;
name: string;
datasource:
| Pick<Datasource, "id">
| Omit<Datasource, "id">
| Partial<Datasource>;
pluginType?: string;
pageId: string;
actionConfiguration: Partial<APIConfigRequest>;
jsonPathKeys: string[];
cacheResponse?: string;
pluginId: string;
}
export interface RapidApiAction {
id: string;
name: string;
datasource: Pick<Datasource, "id"> | Omit<Datasource, "id">;
pluginType: string;
pageId: string;
actionConfiguration: Partial<APIConfigRequest>;
jsonPathKeys: string[];
cacheResponse?: string;
templateId: string;
proverId: string;
provider: ProviderInfo;
pluginId: string;
documentation: { text: string };
}
export interface ProviderInfo {
name: string;
imageUrl: string;
url: string;
description: string;
credentialSteps: string;
}
export type PaginationField = "PREV" | "NEXT";
export interface ExecuteActionRequest extends APIRequest {

15
app/client/src/api/PageApi.tsx
View File

@ -63,12 +63,15 @@ export interface CreatePageResponse extends ApiResponse {
}
export interface FetchPageListResponse extends ApiResponse {
data: Array<{
id: string;
name: string;
isDefault: boolean;
layouts: Array<PageLayout>;
}>;
data: {
pages: Array<{
id: string;
name: string;
isDefault: boolean;
layouts: Array<PageLayout>;
}>;
organizationId: string;
};
}
export interface DeletePageRequest {

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}

483
app/client/src/components/designSystems/appsmith/ReactTableComponent.tsx Normal file
View File

@ -0,0 +1,483 @@
import React from "react";
import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
import Table from "./Table";
import { RenderMode, RenderModes } from "constants/WidgetConstants";
import _ from "lodash";
import { getMenuOptions, renderActions, renderCell } from "./TableUtilities";
interface ReactTableComponentState {
trigger: number;
columnIndex: number;
pageSize: number;
action: string;
columnName: string;
}
export interface ReactTableColumnProps {
Header: string;
accessor: string;
width: number;
minWidth: number;
draggable: boolean;
isHidden?: boolean;
Cell: (props: any) => JSX.Element;
}
export interface ColumnMenuOptionProps {
content: string | JSX.Element;
closeOnClick?: boolean;
isSelected?: boolean;
columnAccessor?: string;
id?: string;
category?: boolean;
options?: ColumnMenuSubOptionProps[];
onClick?: (isSelected: boolean) => void;
}
export interface ColumnMenuSubOptionProps {
content: string;
isSelected: boolean;
closeOnClick: boolean;
onClick: () => void;
}
interface ReactTableComponentProps {
widgetId: string;
isDisabled?: boolean;
isVisible?: boolean;
renderMode: RenderMode;
width: number;
height: number;
pageSize: number;
tableData: object[];
columnOrder?: string[];
disableDrag: (disable: boolean) => void;
onRowClick: (rowData: object, rowIndex: number) => void;
onCommandClick: (dynamicTrigger: string) => void;
updatePageNo: Function;
updateHiddenColumns: Function;
resetSelectedRowIndex: Function;
nextPageClick: Function;
prevPageClick: Function;
pageNo: number;
serverSidePaginationEnabled: boolean;
columnActions?: ColumnAction[];
selectedRowIndex: number;
hiddenColumns?: string[];
columnNameMap?: { [key: string]: string };
columnTypeMap?: {
[key: string]: {
type: string;
format: string;
};
};
columnSizeMap?: { [key: string]: number };
updateColumnType: Function;
updateColumnName: Function;
handleResizeColumn: Function;
handleReorderColumn: Function;
}
export class ReactTableComponent extends React.Component<
ReactTableComponentProps,
ReactTableComponentState
> {
private dragged = -1;
constructor(props: ReactTableComponentProps) {
super(props);
this.state = {
trigger: 0,
columnIndex: -1,
action: "",
columnName: "",
pageSize: props.pageSize,
};
}
componentDidMount() {
this.mountEvents();
}
componentDidUpdate(prevProps: ReactTableComponentProps) {
if (this.props.pageSize !== prevProps.pageSize) {
this.setState({ pageSize: this.props.pageSize });
}
this.mountEvents();
}
mountEvents() {
const headers = Array.prototype.slice.call(
document.querySelectorAll(
`#table${this.props.widgetId} .draggable-header`,
),
);
const columns = this.getTableColumns();
headers.forEach((header, i) => {
header.setAttribute("draggable", true);
header.ondragstart = (e: React.DragEvent<HTMLDivElement>) => {
header.style =
"background: #efefef; border-radius: 4px; z-index: 100; width: 100%; text-overflow: none; overflow: none;";
e.stopPropagation();
this.dragged = i;
};
header.ondrag = (e: React.DragEvent<HTMLDivElement>) => {
e.stopPropagation();
};
header.ondragend = (e: React.DragEvent<HTMLDivElement>) => {
header.style = "";
e.stopPropagation();
setTimeout(() => (this.dragged = -1), 1000);
};
// the dropped header
header.ondragover = (e: React.DragEvent<HTMLDivElement>) => {
if (i !== this.dragged && this.dragged !== -1) {
if (this.dragged > i) {
header.parentElement.className = "th header-reorder highlight-left";
} else if (this.dragged < i) {
header.parentElement.className =
"th header-reorder highlight-right";
}
}
e.preventDefault();
};
header.ondragenter = (e: React.DragEvent<HTMLDivElement>) => {
if (i !== this.dragged && this.dragged !== -1) {
if (this.dragged > i) {
header.parentElement.className = "th header-reorder highlight-left";
} else if (this.dragged < i) {
header.parentElement.className =
"th header-reorder highlight-right";
}
}
e.preventDefault();
};
header.ondragleave = (e: React.DragEvent<HTMLDivElement>) => {
header.parentElement.className = "th header-reorder";
e.preventDefault();
};
header.ondrop = (e: React.DragEvent<HTMLDivElement>) => {
header.style = "";
header.parentElement.className = "th header-reorder";
if (i !== this.dragged && this.dragged !== -1) {
e.preventDefault();
let columnOrder = this.props.columnOrder;
if (columnOrder === undefined) {
columnOrder = this.props.tableData.length
? Object.keys(this.props.tableData[0])
: [];
}
const draggedColumn = columns[this.dragged].accessor;
columnOrder.splice(this.dragged, 1);
columnOrder.splice(i, 0, draggedColumn);
this.props.handleReorderColumn(columnOrder);
this.setState({ trigger: Math.random() });
} else {
this.dragged = -1;
}
};
});
}
getTableColumns = () => {
const tableData: object[] = this.props.tableData;
let columns: ReactTableColumnProps[] = [];
const hiddenColumns: ReactTableColumnProps[] = [];
if (tableData.length) {
const row = tableData[0];
for (const i in row) {
const columnName: string =
this.props.columnNameMap && this.props.columnNameMap[i]
? this.props.columnNameMap[i]
: i;
const columnType: { type: string; format?: string } =
this.props.columnTypeMap && this.props.columnTypeMap[i]
? this.props.columnTypeMap[i]
: { type: "text" };
const columnSize: number =
this.props.columnSizeMap && this.props.columnSizeMap[i]
? this.props.columnSizeMap[i]
: 150;
const isHidden =
!!this.props.hiddenColumns && this.props.hiddenColumns.includes(i);
const columnData = {
Header: columnName,
accessor: i,
width: columnSize,
minWidth: 60,
draggable: true,
isHidden: false,
Cell: (props: any) => {
return renderCell(
props.cell.value,
columnType.type,
isHidden,
columnType.format,
);
},
};
if (isHidden) {
columnData.isHidden = true;
hiddenColumns.push(columnData);
} else {
columns.push(columnData);
}
}
columns = this.reorderColumns(columns);
if (this.props.columnActions?.length) {
columns.push({
Header: "Actions",
accessor: "actions",
width: 150,
minWidth: 60,
draggable: true,
Cell: () => {
return renderActions({
columnActions: this.props.columnActions,
onCommandClick: this.props.onCommandClick,
});
},
});
}
if (
hiddenColumns.length &&
this.props.renderMode === RenderModes.CANVAS
) {
columns = columns.concat(hiddenColumns);
}
}
return columns;
};
reorderColumns = (columns: ReactTableColumnProps[]) => {
const columnOrder = this.props.columnOrder || [];
const reorderedColumns = [];
const reorderedFlagMap: { [key: string]: boolean } = {};
for (let index = 0; index < columns.length; index++) {
const accessor = columnOrder[index];
if (accessor) {
const column = columns.filter((col: ReactTableColumnProps) => {
return col.accessor === accessor;
});
if (column.length && !reorderedFlagMap[column[0].accessor]) {
reorderedColumns.push(column[0]);
reorderedFlagMap[column[0].accessor] = true;
} else if (!reorderedFlagMap[columns[index].accessor]) {
reorderedColumns.push(columns[index]);
reorderedFlagMap[columns[index].accessor] = true;
}
} else if (!reorderedFlagMap[columns[index].accessor]) {
reorderedColumns.push(columns[index]);
reorderedFlagMap[columns[index].accessor] = true;
}
}
if (reorderedColumns.length < columns.length) {
for (let index = 0; index < columns.length; index++) {
if (!reorderedFlagMap[columns[index].accessor]) {
reorderedColumns.push(columns[index]);
reorderedFlagMap[columns[index].accessor] = true;
}
}
}
return reorderedColumns;
};
showMenu = (columnIndex: number) => {
this.setState({ columnIndex: columnIndex, action: "" });
};
getColumnMenu = () => {
const { columnIndex } = this.state;
let columnType = "";
let columnId = "";
let format = "";
if (columnIndex !== -1) {
const columns = this.getTableColumns();
const column = columns[columnIndex];
columnId = column.accessor;
columnType =
this.props.columnTypeMap && this.props.columnTypeMap[columnId]
? this.props.columnTypeMap[columnId].type
: "";
format =
this.props.columnTypeMap && this.props.columnTypeMap[columnId]
? this.props.columnTypeMap[columnId].format
: "";
}
const isColumnHidden = !!(
this.props.hiddenColumns && this.props.hiddenColumns.includes(columnId)
);
const columnMenuOptions: ColumnMenuOptionProps[] = getMenuOptions({
columnAccessor: columnId,
isColumnHidden,
columnType,
format,
hideColumn: this.hideColumn,
updateColumnType: this.updateColumnType,
handleUpdateCurrencySymbol: this.handleUpdateCurrencySymbol,
handleDateFormatUpdate: this.handleDateFormatUpdate,
updateAction: (action: string) => this.setState({ action: action }),
});
return columnMenuOptions;
};
hideColumn = (isColumnHidden: boolean) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
let hiddenColumns = this.props.hiddenColumns || [];
if (!isColumnHidden) {
hiddenColumns.push(column.accessor);
const columnOrder = this.props.columnOrder || [];
if (columnOrder.includes(column.accessor)) {
columnOrder.splice(columnOrder.indexOf(column.accessor), 1);
this.props.handleReorderColumn(columnOrder);
}
} else {
hiddenColumns = hiddenColumns.filter(item => {
return item !== column.accessor;
});
}
this.props.updateHiddenColumns(hiddenColumns);
this.setState({ columnIndex: -1 });
};
updateColumnType = (columnType: string) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {
type: columnType,
format: "",
};
this.props.updateColumnType(columnTypeMap);
this.setState({ action: "", columnIndex: -1 });
};
onColumnNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ columnName: event.target.value });
};
onKeyPress = (key: string) => {
if (key === "Enter") {
this.handleColumnNameUpdate();
}
};
handleColumnNameUpdate = () => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const columnName = this.state.columnName;
const column = columns[columnIndex];
const columnNameMap = this.props.columnNameMap || {};
columnNameMap[column.accessor] = columnName;
this.props.updateColumnName(columnNameMap);
this.setState({
columnIndex: -1,
columnName: "",
action: "",
});
};
handleUpdateCurrencySymbol = (currencySymbol: string) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {
type: "currency",
format: currencySymbol,
};
this.props.updateColumnType(columnTypeMap);
this.setState({
columnIndex: -1,
action: "",
});
};
handleDateFormatUpdate = (dateFormat: string) => {
const columns = this.getTableColumns();
const columnIndex = this.state.columnIndex;
const column = columns[columnIndex];
const columnTypeMap = this.props.columnTypeMap || {};
columnTypeMap[column.accessor] = {
type: "date",
format: dateFormat,
};
this.props.updateColumnType(columnTypeMap);
this.setState({
columnIndex: -1,
action: "",
});
};
handleResizeColumn = (columnIndex: number, columnWidth: string) => {
const columns = this.getTableColumns();
const column = columns[columnIndex];
const columnSizeMap = this.props.columnSizeMap || {};
const width = Number(columnWidth.split("px")[0]);
columnSizeMap[column.accessor] = width;
this.props.handleResizeColumn(columnSizeMap);
};
selectTableRow = (
row: { original: object; index: number },
isSelected: boolean,
) => {
if (!isSelected) {
this.props.onRowClick(row.original, row.index);
} else {
this.props.resetSelectedRowIndex();
}
};
render() {
const columns = this.getTableColumns();
return (
<Table
width={this.props.width}
height={this.props.height}
pageSize={this.state.pageSize || 1}
widgetId={this.props.widgetId}
columns={columns}
data={this.props.tableData}
showMenu={this.showMenu}
displayColumnActions={this.props.renderMode === RenderModes.CANVAS}
columnNameMap={this.props.columnNameMap}
columnMenuOptions={this.getColumnMenu()}
columnIndex={this.state.columnIndex}
columnAction={this.state.action}
onColumnNameChange={this.onColumnNameChange}
handleColumnNameUpdate={this.handleColumnNameUpdate}
handleResizeColumn={_.debounce(this.handleResizeColumn, 300)}
selectTableRow={this.selectTableRow}
pageNo={this.props.pageNo - 1}
updatePageNo={this.props.updatePageNo}
nextPageClick={() => {
this.props.nextPageClick();
}}
prevPageClick={() => {
this.props.prevPageClick();
}}
onKeyPress={this.onKeyPress}
serverSidePaginationEnabled={this.props.serverSidePaginationEnabled}
selectedRowIndex={this.props.selectedRowIndex}
disableDrag={() => {
this.props.disableDrag(true);
}}
enableDrag={() => {
this.props.disableDrag(false);
}}
/>
);
}
}
export default ReactTableComponent;

274
app/client/src/components/designSystems/appsmith/Table.tsx Normal file
View File

@ -0,0 +1,274 @@
import React from "react";
import {
useTable,
usePagination,
useFlexLayout,
useResizeColumns,
useRowSelect,
} from "react-table";
import { Icon, InputGroup } from "@blueprintjs/core";
import {
TableWrapper,
PaginationWrapper,
PaginationItemWrapper,
} from "./TableStyledWrappers";
import {
ReactTableColumnProps,
ColumnMenuOptionProps,
} from "./ReactTableComponent";
import { TableColumnMenuPopup } from "./TableColumnMenu";
interface TableProps {
width: number;
height: number;
pageSize: number;
widgetId: string;
columns: ReactTableColumnProps[];
data: object[];
showMenu: (columnIndex: number) => void;
displayColumnActions: boolean;
columnNameMap?: { [key: string]: string };
columnMenuOptions: ColumnMenuOptionProps[];
columnIndex: number;
columnAction: string;
onColumnNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
handleColumnNameUpdate: () => void;
handleResizeColumn: Function;
selectTableRow: (
row: { original: object; index: number },
isSelected: boolean,
) => void;
pageNo: number;
updatePageNo: Function;
nextPageClick: () => void;
prevPageClick: () => void;
onKeyPress: (key: string) => void;
serverSidePaginationEnabled: boolean;
selectedRowIndex: number;
disableDrag: () => void;
enableDrag: () => void;
}
export const Table = (props: TableProps) => {
const { data, columns } = props;
const defaultColumn = React.useMemo(
() => ({
minWidth: 30,
width: 150,
maxWidth: 400,
}),
[],
);
const pageCount = Math.ceil(data.length / props.pageSize);
const currentPageIndex = props.pageNo < pageCount ? props.pageNo : 0;
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
pageOptions,
} = useTable(
{
columns,
data,
defaultColumn,
initialState: {
pageIndex: currentPageIndex,
pageSize: props.pageSize,
},
manualPagination: true,
pageCount,
},
useFlexLayout,
useResizeColumns,
usePagination,
useRowSelect,
);
let startIndex = currentPageIndex * props.pageSize;
let endIndex = startIndex + props.pageSize;
if (props.serverSidePaginationEnabled) {
startIndex = 0;
endIndex = data.length;
}
const subPage = page.slice(startIndex, endIndex);
const selectedRowIndex = props.selectedRowIndex;
return (
<TableWrapper
width={props.width}
height={props.height}
id={`table${props.widgetId}`}
>
<div className="tableWrap">
<div {...getTableProps()} className="table">
<div onMouseOver={props.disableDrag} onMouseLeave={props.enableDrag}>
{headerGroups.map((headerGroup: any, index: number) => (
<div
key={index}
{...headerGroup.getHeaderGroupProps()}
className="tr"
>
{headerGroup.headers.map((column: any, columnIndex: number) => {
if (column.isResizing) {
props.handleResizeColumn(
columnIndex,
column.getHeaderProps().style.width,
);
}
return (
<div
key={columnIndex}
{...column.getHeaderProps()}
className="th header-reorder"
>
{props.columnIndex === columnIndex &&
props.columnAction === "rename_column" && (
<InputGroup
placeholder="Enter Column Name"
onChange={props.onColumnNameChange}
onKeyPress={event => props.onKeyPress(event.key)}
type="text"
defaultValue={
props.columnNameMap &&
props.columnNameMap[column.id]
? props.columnNameMap[column.id]
: column.id
}
className="input-group"
onBlur={() => props.handleColumnNameUpdate()}
/>
)}
{(props.columnIndex !== columnIndex ||
(props.columnIndex === columnIndex &&
"rename_column" !== props.columnAction)) && (
<div
className={
!column.isHidden
? "draggable-header"
: "hidden-header"
}
>
{column.render("Header")}
</div>
)}
{props.displayColumnActions && (
<div className="column-menu">
<TableColumnMenuPopup
showMenu={props.showMenu}
columnMenuOptions={props.columnMenuOptions}
columnIndex={columnIndex}
/>
</div>
)}
<div
{...column.getResizerProps()}
className={`resizer ${
column.isResizing ? "isResizing" : ""
}`}
/>
</div>
);
})}
</div>
))}
</div>
<div {...getTableBodyProps()} className="tbody">
{subPage.map((row, index) => {
prepareRow(row);
return (
<div
key={index}
{...row.getRowProps()}
className={
"tr" +
`${row.index === selectedRowIndex ? " selected-row" : ""}`
}
onClick={() => {
row.toggleRowSelected();
props.selectTableRow(row, row.index === selectedRowIndex);
}}
>
{row.cells.map((cell, cellIndex) => {
return (
<div
key={cellIndex}
{...cell.getCellProps()}
className="td"
data-rowindex={index}
data-colindex={cellIndex}
>
{cell.render("Cell")}
</div>
);
})}
</div>
);
})}
</div>
</div>
</div>
{props.serverSidePaginationEnabled && (
<PaginationWrapper>
<PaginationItemWrapper
disabled={false}
onClick={() => {
props.prevPageClick();
}}
>
<Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
</PaginationItemWrapper>
<PaginationItemWrapper selected className="page-item">
{props.pageNo + 1}
</PaginationItemWrapper>
<PaginationItemWrapper
disabled={false}
onClick={() => {
props.nextPageClick();
}}
>
<Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
</PaginationItemWrapper>
</PaginationWrapper>
)}
{!props.serverSidePaginationEnabled && (
<PaginationWrapper>
<PaginationItemWrapper
disabled={currentPageIndex === 0}
onClick={() => {
const pageNo = currentPageIndex > 0 ? currentPageIndex - 1 : 0;
props.updatePageNo(pageNo + 1);
}}
>
<Icon icon="chevron-left" iconSize={16} color="#A1ACB3" />
</PaginationItemWrapper>
{pageOptions.map((pageNumber: number, index: number) => {
return (
<PaginationItemWrapper
key={index}
selected={pageNumber === currentPageIndex}
onClick={() => {
props.updatePageNo(pageNumber + 1);
}}
className="page-item"
>
{index + 1}
</PaginationItemWrapper>
);
})}
<PaginationItemWrapper
disabled={currentPageIndex === pageCount - 1}
onClick={() => {
const pageNo =
currentPageIndex < pageCount - 1 ? currentPageIndex + 1 : 0;
props.updatePageNo(pageNo + 1);
}}
>
<Icon icon="chevron-right" iconSize={16} color="#A1ACB3" />
</PaginationItemWrapper>
</PaginationWrapper>
)}
</TableWrapper>
);
};
export default Table;

96
app/client/src/components/designSystems/appsmith/TableColumnMenu.tsx Normal file
View File

@ -0,0 +1,96 @@
import React from "react";
import {
Popover,
Classes,
PopoverInteractionKind,
Icon,
Position,
} from "@blueprintjs/core";
import {
DropDownWrapper,
OptionWrapper,
IconOptionWrapper,
} from "./TableStyledWrappers";
import {
ColumnMenuSubOptionProps,
ColumnMenuOptionProps,
} from "./ReactTableComponent";
interface TableColumnMenuPopup {
showMenu: (index: number) => void;
columnIndex: number;
columnMenuOptions: ColumnMenuOptionProps[];
}
export const TableColumnMenuPopup = (props: TableColumnMenuPopup) => {
return (
<Popover
minimal
usePortal
enforceFocus={false}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM}
>
<Icon
icon="more"
iconSize={12}
color="#A1ACB3"
onClick={e => {
props.showMenu(props.columnIndex);
}}
/>
<DropDownWrapper>
{props.columnMenuOptions.map(
(option: ColumnMenuOptionProps, index: number) => (
<OptionWrapper
key={index}
onClick={() => {
if (option.onClick) {
option.onClick(!!option.isSelected);
}
}}
className={
option.closeOnClick
? Classes.POPOVER_DISMISS
: option.category
? "non-selectable"
: ""
}
selected={!!option.isSelected}
>
{!option.options && <div>{option.content}</div>}
{option.options && (
<Popover
minimal
usePortal
enforceFocus={false}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_RIGHT}
className="column-type"
>
<IconOptionWrapper>{option.content}</IconOptionWrapper>
<DropDownWrapper>
{option.options.map(
(item: ColumnMenuSubOptionProps, itemIndex: number) => (
<OptionWrapper
key={itemIndex}
onClick={item.onClick}
className={
item.closeOnClick ? Classes.POPOVER_DISMISS : ""
}
selected={!!item.isSelected}
>
{item.content}
</OptionWrapper>
),
)}
</DropDownWrapper>
</Popover>
)}
</OptionWrapper>
),
)}
</DropDownWrapper>
</Popover>
);
};

254
app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx Normal file
View File

@ -0,0 +1,254 @@
import styled from "styled-components";
import { Colors } from "constants/Colors";
export const TableWrapper = styled.div<{ width: number; height: number }>`
width: ${props => props.width - 5}px;
height: ${props => props.height - 5}px;
background: white;
border: 1px solid ${Colors.GEYSER_LIGHT};
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-direction: column;
.tableWrap {
display: block;
overflow-x: auto;
overflow-y: hidden;
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
}
.table {
border-spacing: 0;
color: ${Colors.BLUE_BAYOUX};
position: relative;
.thead {
overflow-y: auto;
overflow-x: hidden;
}
.tbody {
overflow: scroll;
height: ${props => props.height - 5 - 102}px;
}
.tr {
:last-child {
.td {
border-bottom: 0;
}
}
:nth-child(even) {
background: ${Colors.ATHENS_GRAY_DARKER};
}
&.selected-row {
background: ${Colors.ATHENS_GRAY};
}
&:hover {
background: ${Colors.ATHENS_GRAY};
}
}
.th,
.td {
margin: 0;
padding: 9px 10px;
border-bottom: 1px solid ${Colors.GEYSER_LIGHT};
border-right: 1px solid ${Colors.GEYSER_LIGHT};
position: relative;
:last-child {
border-right: 0;
}
.resizer {
display: inline-block;
width: 10px;
height: 100%;
position: absolute;
right: 0;
top: 0;
transform: translateX(50%);
z-index: 1;
${"" /* prevents from scrolling while dragging on touch devices */}
touch-action:none;
&.isResizing {
cursor: isResizing;
}
}
}
.th {
padding: 0 10px 0 0;
height: 52px;
line-height: 52px;
background: ${Colors.ATHENS_GRAY_DARKER};
}
.td {
height: 52px;
line-height: 52px;
padding: 0 10px;
}
}
.draggable-header,
.hidden-header {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
color: ${Colors.OXFORD_BLUE};
font-weight: 500;
padding-left: 10px;
}
.draggable-header {
cursor: pointer;
&.reorder-line {
width: 1px;
height: 100%;
}
}
.hidden-header {
opacity: 0.6;
}
.column-menu {
cursor: pointer;
height: 52px;
line-height: 52px;
}
.th {
display: flex;
justify-content: space-between;
&.highlight-left {
border-left: 2px solid ${Colors.GREEN};
}
&.highlight-right {
border-right: 2px solid ${Colors.GREEN};
}
}
.input-group {
height: 52px;
line-height: 52px;
padding: 0 5px;
}
`;
export const DropDownWrapper = styled.div`
display: flex;
flex-direction: column;
background: white;
z-index: 1;
padding: 10px;
border-radius: 4px;
border: 1px solid ${Colors.ATHENS_GRAY};
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
`;
export const OptionWrapper = styled.div<{ selected: boolean }>`
display: flex;
width: 100%;
justify-content: space-between;
height: 32px;
box-sizing: border-box;
padding: 8px;
color: ${props => (props.selected ? Colors.WHITE : Colors.OXFORD_BLUE)};
font-size: 14px;
min-width: 200px;
cursor: pointer;
border-radius: 4px;
margin: 3px 0;
background: ${props => (props.selected ? Colors.GREEN : Colors.WHITE)};
&:hover {
background: ${props => (props.selected ? Colors.GREEN : Colors.POLAR)};
}
.column-type {
width: 100%;
}
&.non-selectable {
color: ${Colors.GRAY};
pointer-events: none;
}
`;
export const IconOptionWrapper = styled.div`
display: flex;
justify-content: space-between;
width: 100%;
cursor: pointer;
`;
export const PaginationWrapper = styled.div`
box-sizing: border-box;
padding: 10px;
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
`;
export const PaginationItemWrapper = styled.div<{
disabled?: boolean;
selected?: boolean;
}>`
background: ${props => (props.disabled ? Colors.ATHENS_GRAY : Colors.WHITE)};
border: 1px solid
${props => (props.selected ? Colors.GREEN : Colors.GEYSER_LIGHT)};
box-sizing: border-box;
border-radius: 4px;
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 8px;
pointer-events: ${props => props.disabled && "none"};
cursor: pointer;
&:hover {
border-color: ${Colors.GREEN};
}
`;
export const MenuColumnWrapper = styled.div<{ selected: boolean }>`
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
background: ${props => props.selected && Colors.GREEN};
position: relative;
.title {
color: ${props => (props.selected ? Colors.WHITE : Colors.OXFORD_BLUE)};
margin-left: 10px;
}
.sub-menu {
position: absolute;
right: 0;
}
`;
export const ActionWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin: 10px 5px 0 0;
cursor: pointer;
padding: 5px;
height: 32px;
color: ${Colors.WHITE};
background: ${Colors.GREEN};
border-radius: 4px;
letter-spacing: -0.03em;
font-weight: bold;
`;
export const CellWrapper = styled.div<{ isHidden: boolean }>`
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
opacity: ${props => (props.isHidden ? "0.6" : "1")};
.image-cell {
width: 40px;
height: 32px;
margin: 0 5px 0 0;
border-radius: 4px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
video {
border-radius: 4px;
}
`;

384
app/client/src/components/designSystems/appsmith/TableUtilities.tsx Normal file
View File

@ -0,0 +1,384 @@
import React from "react";
import { Icon } from "@blueprintjs/core";
import moment from "moment-timezone";
import {
MenuColumnWrapper,
CellWrapper,
ActionWrapper,
} from "./TableStyledWrappers";
import { ColumnAction } from "components/propertyControls/ColumnActionSelectorControl";
import { ColumnMenuOptionProps } from "./ReactTableComponent";
interface MenuOptionProps {
columnAccessor?: string;
isColumnHidden: boolean;
columnType: string;
format?: string;
hideColumn: (isColumnHidden: boolean) => void;
updateAction: (action: string) => void;
updateColumnType: (columnType: string) => void;
handleUpdateCurrencySymbol: (currencySymbol: string) => void;
handleDateFormatUpdate: (dateFormat: string) => void;
}
export const getMenuOptions = (props: MenuOptionProps) => {
const basicOptions: ColumnMenuOptionProps[] = [
{
content: "Rename a Column",
closeOnClick: true,
id: "rename_column",
onClick: () => {
props.updateAction("rename_column");
},
},
{
content: props.isColumnHidden ? "Show Column" : "Hide Column",
closeOnClick: true,
id: "hide_column",
onClick: () => {
props.hideColumn(props.isColumnHidden);
},
},
];
if (props.columnAccessor && props.columnAccessor === "actions") {
return basicOptions;
}
const columnMenuOptions: ColumnMenuOptionProps[] = [
...basicOptions,
{
content: "Select a Data Type",
id: "change_column_type",
category: true,
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "image"}>
<Icon
icon="media"
iconSize={12}
color={props.columnType === "image" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Image</div>
</MenuColumnWrapper>
),
closeOnClick: true,
isSelected: props.columnType === "image",
onClick: (isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
} else {
props.updateColumnType("image");
}
},
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "video"}>
<Icon
icon="video"
iconSize={12}
color={props.columnType === "video" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Video</div>
</MenuColumnWrapper>
),
isSelected: props.columnType === "video",
closeOnClick: true,
onClick: (isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
} else {
props.updateColumnType("video");
}
},
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "text"}>
<Icon
icon="label"
iconSize={12}
color={props.columnType === "text" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Text</div>
</MenuColumnWrapper>
),
closeOnClick: true,
isSelected: props.columnType === "text",
onClick: (isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
} else {
props.updateColumnType("text");
}
},
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "currency"}>
<Icon
icon="dollar"
iconSize={12}
color={props.columnType === "currency" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Currency</div>
<Icon
className="sub-menu"
icon="chevron-right"
iconSize={16}
color={props.columnType === "currency" ? "#ffffff" : "#2E3D49"}
/>
</MenuColumnWrapper>
),
closeOnClick: false,
isSelected: props.columnType === "currency",
options: [
{
content: "USD - $",
isSelected: props.format === "$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("$");
},
},
{
content: "INR - ₹",
isSelected: props.format === "₹",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("₹");
},
},
{
content: "GBP - £",
isSelected: props.format === "£",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("£");
},
},
{
content: "AUD - A$",
isSelected: props.format === "A$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("A$");
},
},
{
content: "EUR - €",
isSelected: props.format === "€",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("€");
},
},
{
content: "SGD - S$",
isSelected: props.format === "S$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("S$");
},
},
{
content: "CAD - C$",
isSelected: props.format === "C$",
closeOnClick: true,
onClick: () => {
props.handleUpdateCurrencySymbol("C$");
},
},
],
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "date"}>
<Icon
icon="calendar"
iconSize={12}
color={props.columnType === "date" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Date</div>
<Icon
className="sub-menu"
icon="chevron-right"
iconSize={16}
color={props.columnType === "date" ? "#ffffff" : "#2E3D49"}
/>
</MenuColumnWrapper>
),
closeOnClick: false,
isSelected: props.columnType === "date",
options: [
{
content: "MM-DD-YY",
isSelected: props.format === "MM-DD-YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("MM-DD-YY");
},
},
{
content: "DD-MM-YY",
isSelected: props.format === "DD-MM-YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("DD-MM-YY");
},
},
{
content: "DD/MM/YY",
isSelected: props.format === "DD/MM/YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("DD/MM/YY");
},
},
{
content: "MM/DD/YY",
isSelected: props.format === "MM/DD/YY",
closeOnClick: true,
onClick: () => {
props.handleDateFormatUpdate("MM/DD/YY");
},
},
],
},
{
content: (
<MenuColumnWrapper selected={props.columnType === "time"}>
<Icon
icon="time"
iconSize={12}
color={props.columnType === "time" ? "#ffffff" : "#2E3D49"}
/>
<div className="title">Time</div>
</MenuColumnWrapper>
),
closeOnClick: true,
isSelected: props.columnType === "time",
onClick: (isSelected: boolean) => {
if (isSelected) {
props.updateColumnType("");
} else {
props.updateColumnType("time");
}
},
},
];
return columnMenuOptions;
};
export const renderCell = (
value: any,
columnType: string,
isHidden: boolean,
format?: string,
) => {
if (!value) {
return <div></div>;
}
switch (columnType) {
case "image":
return (
<CellWrapper isHidden={isHidden}>
{value
.toString()
.split(",")
.map((item: string, index: number) => {
if (item.match(/\.(jpeg|jpg|gif|png)$/)) {
return (
<div
key={index}
className="image-cell"
style={{ backgroundImage: `url("${item}")` }}
/>
);
} else {
return <div>Invalid Image</div>;
}
})}
</CellWrapper>
);
case "video":
return (
<CellWrapper isHidden={isHidden}>
<video width="56" height="32" autoPlay={false}>
<source src={`${value}`} type="video/mp4" />
</video>
</CellWrapper>
);
case "currency":
if (!isNaN(value)) {
return (
<CellWrapper isHidden={isHidden}>{`${format}${value}`}</CellWrapper>
);
} else {
return <CellWrapper isHidden={isHidden}>Invalid Value</CellWrapper>;
}
case "date":
let isValidDate = true;
if (isNaN(value)) {
const dateTime = Date.parse(value);
if (isNaN(dateTime)) {
isValidDate = false;
}
}
if (isValidDate) {
return (
<CellWrapper isHidden={isHidden}>
{moment(value).format(format)}
</CellWrapper>
);
} else {
return <CellWrapper isHidden={isHidden}>Invalid Date</CellWrapper>;
}
case "time":
let isValidTime = true;
if (isNaN(value)) {
const time = Date.parse(value);
if (isNaN(time)) {
isValidTime = false;
}
}
if (isValidTime) {
return (
<CellWrapper isHidden={isHidden}>
{moment(value).format("HH:mm")}
</CellWrapper>
);
} else {
return <CellWrapper isHidden={isHidden}>Invalid Time</CellWrapper>;
}
case "text":
return <CellWrapper isHidden={isHidden}>{value}</CellWrapper>;
default:
return <CellWrapper isHidden={isHidden}>{value}</CellWrapper>;
}
};
interface RenderActionProps {
columnActions?: ColumnAction[];
onCommandClick: (dynamicTrigger: string) => void;
}
export const renderActions = (props: RenderActionProps) => {
if (!props.columnActions) return <CellWrapper isHidden={false}></CellWrapper>;
return (
<CellWrapper isHidden={false}>
{props.columnActions.map((action: ColumnAction, index: number) => {
return (
<ActionWrapper
key={index}
onClick={() => {
props.onCommandClick(action.dynamicTrigger);
}}
>
{action.label}
</ActionWrapper>
);
})}
</CellWrapper>
);
};

6
app/client/src/components/designSystems/appsmith/help/HelpModal.tsx
View File

@ -1,6 +1,5 @@
import React, { useContext } from "react";
import DocumentationSearch from "components/designSystems/appsmith/help/DocumentationSearch";
import Button from "components/editorComponents/Button";
import { useSelector } from "store";
import { useDispatch } from "react-redux";
@ -13,8 +12,7 @@ import {
setHelpModalVisibility,
} from "actions/helpActions";
import styled from "styled-components";
import { IntentColors, theme } from "constants/DefaultTheme";
import { Position } from "@blueprintjs/core";
import { theme } from "constants/DefaultTheme";
import ModalComponent from "components/designSystems/blueprint/ModalComponent";
import { LayersContext } from "constants/Layers";
import { HelpIcons } from "icons/HelpIcons";
@ -87,7 +85,7 @@ export function HelpModal() {
dispatch(setHelpModalVisibility(!helpModalOpen));
}}
>
<HelpIcon></HelpIcon>
<HelpIcon />
</HelpButton>
</>
);

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

@ -9,11 +9,11 @@ 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";
import { Colors } from "constants/Colors";
import _ from "lodash";
import FormActionButton from "./form/FormActionButton";
const ResponseWrapper = styled.div`
@ -53,7 +53,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 +109,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;
}
@ -135,7 +134,7 @@ const ApiResponseView = (props: Props) => {
onClick={() => {
setSelectedIndex(3);
}}
></FormActionButton>
/>
)}
</FailedMessageContainer>
<CodeEditor
@ -165,9 +164,9 @@ const ApiResponseView = (props: Props) => {
panelComponent: (
<CodeEditor
input={{
value: response.requestBody
value: _.isObject(response.requestBody)
? JSON.stringify(response.requestBody, null, 2)
: "",
: response.requestBody || "",
}}
height={700}
/>
@ -217,7 +216,7 @@ const ApiResponseView = (props: Props) => {
const mapStateToProps = (state: AppState): ReduxStateProps => {
return {
responses: getActionResponses(state),
apiPane: state.ui.apiPane,
isRunning: state.ui.apiPane.isRunning,
};
};

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

@ -13,11 +13,11 @@ import "codemirror/addon/mode/multiplex";
import "codemirror/addon/tern/tern.css";
import { getDataTreeForAutocomplete } from "selectors/dataTreeSelectors";
import { AUTOCOMPLETE_MATCH_REGEX } from "constants/BindingsConstants";
import ErrorTooltip from "components/editorComponents/ErrorTooltip";
import HelperTooltip from "components/editorComponents/HelperTooltip";
import EvaluatedValuePopup from "components/editorComponents/EvaluatedValuePopup";
import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
import _ from "lodash";
import { parseDynamicString } from "utils/DynamicBindingUtils";
import { getDynamicStringSegments } from "utils/DynamicBindingUtils";
import { DataTree } from "entities/DataTree/dataTreeFactory";
import { Theme } from "constants/DefaultTheme";
import AnalyticsUtil from "utils/AnalyticsUtil";
@ -63,7 +63,7 @@ CodeMirror.defineMode("js-js", function(config) {
const getBorderStyle = (
props: { theme: Theme } & {
editorTheme?: THEME;
editorTheme?: EditorTheme;
hasError: boolean;
singleLine: boolean;
isFocused: boolean;
@ -78,7 +78,7 @@ const getBorderStyle = (
return "transparent";
};
const HintStyles = createGlobalStyle`
const HintStyles = createGlobalStyle<{ editorTheme: EditorTheme }>`
.CodeMirror-hints {
position: absolute;
z-index: 20;
@ -91,8 +91,11 @@ const HintStyles = createGlobalStyle`
max-height: 20em;
width: 200px;
overflow-y: auto;
background: #FFFFFF;
border: 1px solid #EBEFF2;
background: ${props =>
props.editorTheme === "DARK" ? "#090A0F" : "#ffffff"};
border: 1px solid;
border-color: ${props =>
props.editorTheme === "DARK" ? "#535B62" : "#EBEFF2"}
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
border-radius: 4px;
}
@ -102,7 +105,7 @@ const HintStyles = createGlobalStyle`
padding: 3px;
margin: 0;
white-space: pre;
color: #2E3D49;
color: ${props => (props.editorTheme === "DARK" ? "#F4F4F4" : "#1E242B")};
cursor: pointer;
display: flex;
align-items: center;
@ -110,7 +113,10 @@ const HintStyles = createGlobalStyle`
}
li.CodeMirror-hint-active {
background: #E9FAF3;
background: ${props =>
props.editorTheme === "DARK"
? "rgba(244,244,244,0.1)"
: "rgba(128,136,141,0.1)"};
border-radius: 4px;
}
.CodeMirror-Tern-completion {
@ -121,10 +127,30 @@ const HintStyles = createGlobalStyle`
bottom: 7px !important;
line-height: 15px !important;
}
.CodeMirror-Tern-tooltip {
z-index: 20 !important;
}
.CodeMirror-Tern-hint-doc {
background-color: ${props =>
props.editorTheme === "DARK" ? "#23292e" : "#fff"} !important;
color: ${props =>
props.editorTheme === "DARK" ? "#F4F4F4" : "#1E242B"} !important;
max-height: 150px;
width: 250px;
padding: 12px !important;
border: 1px solid #DEDEDE !important;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12) !important;
}
`;
const Wrapper = styled.div<{
editorTheme?: THEME;
const Wrapper = styled.div`
position: relative;
flex: 1;
height: 100%;
`;
const EditorWrapper = styled.div<{
editorTheme?: EditorTheme;
hasError: boolean;
singleLine: boolean;
isFocused: boolean;
@ -245,12 +271,12 @@ const IconContainer = styled.div`
}
`;
const THEMES = {
const THEMES: Record<string, EditorTheme> = {
LIGHT: "LIGHT",
DARK: "DARK",
};
type THEME = "LIGHT" | "DARK";
export type EditorTheme = "LIGHT" | "DARK";
const AUTOCOMPLETE_CLOSE_KEY_CODES = ["Enter", "Tab", "Escape"];
@ -264,7 +290,7 @@ export type DynamicAutocompleteInputProps = {
rightIcon?: Function;
description?: string;
height?: number;
theme?: THEME;
theme?: EditorTheme;
meta?: Partial<WrappedFieldMetaProps>;
showLineNumbers?: boolean;
allowTabIndent?: boolean;
@ -276,6 +302,8 @@ export type DynamicAutocompleteInputProps = {
link?: string;
baseMode?: string | object;
setMaxHeight?: boolean;
dataTreePath?: string;
expected?: string;
};
type Props = ReduxStateProps &
@ -316,7 +344,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
mode: this.props.mode || { name: "javascript", globalVars: true },
viewportMargin: 10,
tabSize: 2,
indentWithTabs: true,
indentWithTabs: !!this.props.allowTabIndent,
lineWrapping: !this.props.singleLine,
extraKeys,
autoCloseBrackets: true,
@ -324,6 +352,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
});
this.editor.on("change", _.debounce(this.handleChange, 300));
this.editor.on("change", this.handleAutocompleteVisibility);
this.editor.on("keyup", this.handleAutocompleteHide);
this.editor.on("focus", this.handleEditorFocus);
this.editor.on("blur", this.handleEditorBlur);
@ -409,7 +438,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
globalScope: this.props.dynamicData,
});
}
this.editor.on("cursorActivity", this.handleAutocompleteVisibility);
}
handleEditorFocus = () => {
@ -447,20 +475,30 @@ class DynamicAutocompleteInput extends Component<Props, State> {
let cursorBetweenBinding = false;
const cursor = this.editor.getCursor();
const value = this.editor.getValue();
let cursorIndex = cursor.ch;
if (cursor.line > 0) {
for (let lineIndex = 0; lineIndex < cursor.line; lineIndex++) {
const line = this.editor.getLine(lineIndex);
// Add line length + 1 for new line character
cursorIndex = cursorIndex + line.length + 1;
}
}
const stringSegments = getDynamicStringSegments(value);
// count of chars processed
let cumulativeCharCount = 0;
parseDynamicString(value).forEach(segment => {
stringSegments.forEach((segment: string) => {
const start = cumulativeCharCount;
const dynamicStart = segment.indexOf("{{");
const dynamicDoesStart = dynamicStart > -1;
const dynamicEnd = segment.indexOf("}}");
const dynamicDoesEnd = dynamicEnd > -1;
const dynamicStartIndex = dynamicStart + start + 1;
const dynamicEndIndex = dynamicEnd + start + 1;
const dynamicStartIndex = dynamicStart + start + 2;
const dynamicEndIndex = dynamicEnd + start;
if (
dynamicDoesStart &&
cursor.ch > dynamicStartIndex &&
((dynamicDoesEnd && cursor.ch < dynamicEndIndex) ||
(!dynamicDoesEnd && cursor.ch > dynamicStartIndex))
cursorIndex >= dynamicStartIndex &&
((dynamicDoesEnd && cursorIndex <= dynamicEndIndex) ||
(!dynamicDoesEnd && cursorIndex >= dynamicStartIndex))
) {
cursorBetweenBinding = true;
}
@ -523,63 +561,75 @@ class DynamicAutocompleteInput extends Component<Props, State> {
disabled,
className,
setMaxHeight,
dataTreePath,
dynamicData,
expected,
} = this.props;
const hasError = !!(meta && meta.error);
let showError = false;
if (this.editor) {
showError =
hasError && this.state.isFocused && !this.state.autoCompleteVisible;
let evaluatedValue: any = "undefined";
if (dataTreePath) {
evaluatedValue = _.get(dynamicData, dataTreePath);
}
const showEvaluatedValue =
this.state.isFocused && "dataTreePath" in this.props;
return (
<ErrorTooltip message={meta ? meta.error : ""} isOpen={showError}>
<Wrapper
editorTheme={theme}
<Wrapper>
<EvaluatedValuePopup
theme={theme || THEMES.LIGHT}
isOpen={showEvaluatedValue}
evaluatedValue={evaluatedValue}
expected={expected}
hasError={hasError}
singleLine={singleLine}
isFocused={this.state.isFocused}
disabled={disabled}
className={className}
setMaxHeight={setMaxHeight}
>
<HintStyles />
<IconContainer>
{this.props.leftIcon && <this.props.leftIcon />}
</IconContainer>
<EditorWrapper
editorTheme={theme}
hasError={hasError}
singleLine={singleLine}
isFocused={this.state.isFocused}
disabled={disabled}
className={className}
setMaxHeight={setMaxHeight}
>
<HintStyles editorTheme={theme || THEMES.LIGHT} />
<IconContainer>
{this.props.leftIcon && <this.props.leftIcon />}
</IconContainer>
{this.props.leftImage && (
<img
src={this.props.leftImage}
alt="img"
className="leftImageStyles"
/>
)}
{this.props.leftImage && (
<img
src={this.props.leftImage}
alt="img"
className="leftImageStyles"
/>
)}
<textarea
ref={this.textArea}
{..._.omit(this.props.input, ["onChange", "value"])}
defaultValue={input.value}
placeholder={this.props.placeholder}
/>
{this.props.link && (
<React.Fragment>
<a
href={this.props.link}
target="_blank"
className="linkStyles"
rel="noopener noreferrer"
>
API documentation
</a>
</React.Fragment>
)}
{this.props.rightIcon && (
<HelperTooltip
description={this.props.description}
rightIcon={this.props.rightIcon}
<textarea
ref={this.textArea}
{..._.omit(this.props.input, ["onChange", "value"])}
defaultValue={input.value}
placeholder={this.props.placeholder}
/>
)}
</Wrapper>
</ErrorTooltip>
{this.props.link && (
<React.Fragment>
<a
href={this.props.link}
target="_blank"
className="linkStyles"
rel="noopener noreferrer"
>
API documentation
</a>
</React.Fragment>
)}
{this.props.rightIcon && (
<HelperTooltip
description={this.props.description}
rightIcon={this.props.rightIcon}
/>
)}
</EditorWrapper>
</EvaluatedValuePopup>
</Wrapper>
);
}
}

200
app/client/src/components/editorComponents/EvaluatedValuePopup.tsx Normal file
View File

@ -0,0 +1,200 @@
import React, { useRef } from "react";
import styled from "styled-components";
import _ from "lodash";
import Popper from "pages/Editor/Popper";
import ReactJson from "react-json-view";
import { EditorTheme } from "components/editorComponents/DynamicAutocompleteInput";
import { theme } from "constants/DefaultTheme";
import { Placement } from "popper.js";
const Wrapper = styled.div`
position: relative;
flex: 1;
height: 100%;
`;
type ThemeConfig = {
backgroundColor: string;
textColor: string;
editorColor: string;
editorBackground: string;
};
type PopupTheme = Record<EditorTheme, ThemeConfig>;
const THEMES: PopupTheme = {
LIGHT: {
backgroundColor: "#fff",
textColor: "#1E242B",
editorBackground: "#F4F4F4",
editorColor: "#1E242B",
},
DARK: {
backgroundColor: "#23292e",
textColor: "#F4F4F4",
editorBackground: "#090a0f",
editorColor: "#F4F4F4",
},
};
const ContentWrapper = styled.div<{ colorTheme: EditorTheme }>`
width: ${props => props.theme.evaluatedValuePopup.width}px;
max-height: ${props => props.theme.evaluatedValuePopup.height}px;
overflow-y: auto;
background-color: ${props => THEMES[props.colorTheme].backgroundColor};
color: ${props => THEMES[props.colorTheme].textColor};
padding: 15px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
.react-json-view {
.icon-container {
display: none !important;
}
}
`;
const CurrentValueWrapper = styled.div`
max-height: 150px;
overflow-y: auto;
`;
const CodeWrapper = styled.pre<{ colorTheme: EditorTheme }>`
padding: 10px;
background-color: ${props => THEMES[props.colorTheme].editorBackground};
color: ${props => THEMES[props.colorTheme].editorColor};
overflow: scroll;
`;
const TypeText = styled.pre<{ colorTheme: EditorTheme }>`
padding: 5px;
background-color: ${props => THEMES[props.colorTheme].editorBackground};
color: ${props => THEMES[props.colorTheme].editorColor};
overflow: scroll;
`;
const ErrorText = styled.p`
margin: 10px 0;
padding: 5px;
border-radius: 2px;
background-color: rgba(235, 87, 87, 0.2);
color: ${props => props.theme.colors.error};
`;
interface Props {
theme: EditorTheme;
isOpen: boolean;
hasError: boolean;
expected?: string;
evaluatedValue?: any;
children: JSX.Element;
}
interface PopoverContentProps {
hasError: boolean;
expected?: string;
evaluatedValue: any;
theme: EditorTheme;
}
const CurrentValueViewer = (props: {
theme: EditorTheme;
evaluatedValue: any;
}) => {
let content = (
<CodeWrapper colorTheme={props.theme}>{"undefined"}</CodeWrapper>
);
if (props.evaluatedValue !== undefined) {
if (
_.isObject(props.evaluatedValue) ||
Array.isArray(props.evaluatedValue)
) {
const reactJsonProps = {
theme: props.theme === "DARK" ? "monokai" : "rjv-default",
name: null,
enableClipboard: false,
displayObjectSize: false,
displayDataTypes: false,
style: {
fontSize: "14px",
},
collapsed: 2,
collapseStringsAfterLength: 20,
};
content = <ReactJson src={props.evaluatedValue} {...reactJsonProps} />;
} else {
content = (
<CodeWrapper colorTheme={props.theme}>
{props.evaluatedValue.toString()}
</CodeWrapper>
);
}
}
return (
<React.Fragment>
<p>Current Value:</p>
<CurrentValueWrapper>{content}</CurrentValueWrapper>
</React.Fragment>
);
};
const PopoverContent = (props: PopoverContentProps) => {
return (
<ContentWrapper
colorTheme={props.theme}
className="t--CodeEditor-evaluatedValue"
>
{props.hasError && (
<ErrorText>{`This value does not evaluate to type "${props.expected}"`}</ErrorText>
)}
{props.expected && (
<React.Fragment>
<p>Expected type:</p>
<TypeText colorTheme={props.theme}>{props.expected}</TypeText>
</React.Fragment>
)}
<CurrentValueViewer
theme={props.theme}
evaluatedValue={props.evaluatedValue}
/>
</ContentWrapper>
);
};
const EvaluatedValuePopup = (props: Props) => {
const wrapperRef = useRef<HTMLDivElement>(null);
let placement: Placement = "left-start";
if (wrapperRef.current) {
const boundingRect = wrapperRef.current.getBoundingClientRect();
if (boundingRect.left < theme.evaluatedValuePopup.width) {
placement = "right-start";
}
}
return (
<Wrapper ref={wrapperRef}>
{props.isOpen && (
<Popper
targetNode={wrapperRef.current || undefined}
isOpen
zIndex={15}
placement={placement}
modifiers={{
offset: {
enabled: true,
offset: "0, 15",
},
}}
>
<PopoverContent
expected={props.expected}
evaluatedValue={props.evaluatedValue}
hasError={props.hasError}
theme={props.theme}
/>
</Popper>
)}
{props.children}
</Wrapper>
);
};
export default EvaluatedValuePopup;

2
app/client/src/components/editorComponents/actioncreator/ActionCreator.tsx
View File

@ -196,7 +196,7 @@ const views = {
}
}}
isValid={props.isValid}
validationMessage={props.validationMessage}
errorMessage={props.validationMessage}
/>
</ControlWrapper>
);

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);

19
app/client/src/components/editorComponents/form/fields/JSONEditorField.tsx
View File

@ -1,19 +0,0 @@
import React from "react";
import { Field } from "redux-form";
import DynamicAutocompleteInput, {
DynamicAutocompleteInputProps,
} from "components/editorComponents/DynamicAutocompleteInput";
type Props = { name: string } & DynamicAutocompleteInputProps;
const JSONEditorField = (props: Props) => {
return (
<Field
name={props.name}
component={DynamicAutocompleteInput}
singleLine={false}
/>
);
};
export default JSONEditorField;

9
app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
View File

@ -6,6 +6,7 @@ import { FormIcons } from "icons/FormIcons";
import DynamicTextField from "./DynamicTextField";
import FormRow from "components/editorComponents/FormRow";
import FormLabel from "components/editorComponents/FormLabel";
import FIELD_VALUES from "constants/FieldExpectedValue";
const FormRowWithLabel = styled(FormRow)`
flex-wrap: wrap;
@ -26,7 +27,6 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
}
}
}, [props.fields, props.pushFields]);
return (
<React.Fragment>
{typeof props.fields.getAll() === "object" && (
@ -42,6 +42,8 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
placeholder="Key"
singleLine
setMaxHeight
dataTreePath={`${props.dataTreePath}[${index}].key`}
expected={FIELD_VALUES.API_ACTION.params}
/>
{!props.actionConfig && (
<DynamicTextField
@ -50,6 +52,8 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
placeholder="Value"
singleLine
setMaxHeight
dataTreePath={`${props.dataTreePath}[${index}].value`}
expected={FIELD_VALUES.API_ACTION.params}
/>
)}
@ -58,7 +62,9 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
<DynamicTextField
className={`t--${field}.value.${index}`}
name={`${field}.value`}
dataTreePath={`${props.dataTreePath}[${index}].value`}
setMaxHeight
expected={FIELD_VALUES.API_ACTION.params}
placeholder={
props.placeholder
? props.placeholder
@ -123,6 +129,7 @@ type Props = {
type?: string;
placeholder?: string;
pushFields?: boolean;
dataTreePath?: string;
};
const KeyValueFieldArray = (props: Props) => {

2
app/client/src/components/formControls/KeyValueArrayControl.tsx
View File

@ -33,7 +33,7 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
props.fields.push({ [keyName[1]]: "", [valueName[1]]: "" });
}
}
}, [props.fields]);
}, [props.fields, keyName, valueName]);
useEffect(() => {
if (typeof props.fields.getAll() === "string") {

2
app/client/src/components/propertyControls/ActionSelectorControl.tsx
View File

@ -15,7 +15,7 @@ class ActionSelectorControl extends BaseControl<ControlProps> {
<ActionCreator
value={propertyValue}
isValid={this.props.isValid}
validationMessage={this.props.validationMessage}
validationMessage={this.props.errorMessage}
onValueChange={this.handleValueUpdate}
/>
);

3
app/client/src/components/propertyControls/BaseControl.tsx
View File

@ -33,7 +33,10 @@ export interface ControlData {
controlType: ControlType;
propertyValue?: any;
isValid: boolean;
errorMessage?: string;
expected: string;
validationMessage?: string;
dataTreePath: string;
}
export interface ControlFunctions {

15
app/client/src/components/propertyControls/ChartDataControl.tsx
View File

@ -70,18 +70,11 @@ type RenderComponentProps = {
validationMessage: string;
deleteOption: Function;
updateOption: Function;
dataTreePath: string;
};
function DataControlComponent(props: RenderComponentProps) {
const {
deleteOption,
updateOption,
item,
index,
length,
isValid,
validationMessage,
} = props;
const { deleteOption, updateOption, item, index, length, isValid } = props;
return (
<StyledOptionControlWrapper orientation={"VERTICAL"}>
<StyledOptionControlWrapper orientation={"HORIZONTAL"}>
@ -117,8 +110,9 @@ function DataControlComponent(props: RenderComponentProps) {
updateOption(index, "data", value);
},
}}
dataTreePath={`${props.dataTreePath}`}
meta={{
error: isValid ? "" : validationMessage,
error: isValid ? "" : "There is an error",
touched: true,
}}
theme={"DARK"}
@ -190,6 +184,7 @@ class ChartDataControl extends BaseControl<ControlProps> {
updateOption={this.updateOption}
isValid={validations[index].isValid}
validationMessage={validations[index].validationMessage}
dataTreePath={`${this.props.dataTreePath}`}
/>
);
})}

12
app/client/src/components/propertyControls/CodeEditorControl.tsx
View File

@ -4,13 +4,21 @@ import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocom
import { EventOrValueHandler } from "redux-form";
class CodeEditorControl extends BaseControl<ControlProps> {
render() {
const { validationMessage, propertyValue, isValid } = this.props;
const {
errorMessage,
expected,
propertyValue,
isValid,
dataTreePath,
} = this.props;
return (
<DynamicAutocompleteInput
theme={"DARK"}
input={{ value: propertyValue, onChange: this.onChange }}
dataTreePath={dataTreePath}
expected={expected}
meta={{
error: isValid ? "" : validationMessage,
error: isValid ? "" : errorMessage,
touched: true,
}}
singleLine={false}

26
app/client/src/components/propertyControls/InputTextControl.tsx
View File

@ -9,10 +9,20 @@ export function InputText(props: {
value: string;
onChange: (event: React.ChangeEvent<HTMLTextAreaElement> | string) => void;
isValid: boolean;
validationMessage?: string;
errorMessage?: string;
expected?: string;
placeholder?: string;
dataTreePath?: string;
}) {
const { validationMessage, value, isValid, onChange, placeholder } = props;
const {
errorMessage,
expected,
value,
isValid,
onChange,
placeholder,
dataTreePath,
} = props;
return (
<StyledDynamicInput>
<DynamicAutocompleteInput
@ -20,8 +30,10 @@ export function InputText(props: {
value: value,
onChange: onChange,
}}
expected={expected}
dataTreePath={dataTreePath}
meta={{
error: isValid ? "" : validationMessage,
error: isValid ? "" : errorMessage,
touched: true,
}}
theme={"DARK"}
@ -35,11 +47,13 @@ export function InputText(props: {
class InputTextControl extends BaseControl<InputControlProps> {
render() {
const {
validationMessage,
errorMessage,
expected,
propertyValue,
isValid,
label,
placeholderText,
dataTreePath,
} = this.props;
return (
<InputText
@ -47,8 +61,10 @@ class InputTextControl extends BaseControl<InputControlProps> {
value={propertyValue}
onChange={this.onTextChange}
isValid={isValid}
validationMessage={validationMessage}
errorMessage={errorMessage}
expected={expected}
placeholder={placeholderText}
dataTreePath={dataTreePath}
/>
);
}

3
app/client/src/constants/ApiConstants.tsx
View File

@ -2,7 +2,8 @@ export type ContentType =
| "application/json"
| "application/x-www-form-urlencoded";
export const REQUEST_TIMEOUT_MS = 10000;
export const REQUEST_TIMEOUT_MS = 20000;
export const DEFAULT_ACTION_TIMEOUT = 10000;
export const DEFAULT_EXECUTE_ACTION_TIMEOUT_MS = 15000;
export const DEFAULT_TEST_DATA_SOURCE_TIMEOUT_MS = 30000;

4
app/client/src/constants/ApiEditorConstants.ts
View File

@ -1,4 +1,5 @@
import { RestAction } from "api/ActionAPI";
import { RestAction } from "entities/Action";
import { DEFAULT_ACTION_TIMEOUT } from "constants/ApiConstants";
export const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
@ -11,6 +12,7 @@ export const REST_PLUGIN_PACKAGE_NAME = "restapi-plugin";
export const DEFAULT_API_ACTION: Partial<RestAction> = {
actionConfiguration: {
timeoutInMillisecond: DEFAULT_ACTION_TIMEOUT,
httpMethod: HTTP_METHODS[0],
headers: [
{ key: "", value: "" },

2
app/client/src/constants/Colors.tsx
View File

@ -45,6 +45,8 @@ export const Colors: Record<string, string> = {
BLUE_CHARCOAL: "#23292E",
TROUT: "#4C565E",
JAFFA_DARK: "#EF7541",
GRAY: "#828282",
ATHENS_GRAY_DARKER: "#F8F9FA",
};
export type Color = typeof Colors[keyof typeof Colors];

8
app/client/src/constants/DefaultTheme.tsx
View File

@ -243,6 +243,10 @@ export type Theme = {
lineHeights: Array<number>;
fonts: Array<FontFamily>;
borders: ThemeBorder[];
evaluatedValuePopup: {
width: number;
height: number;
};
propertyPane: PropertyPaneTheme;
headerHeight: string;
sidebarWidth: string;
@ -312,6 +316,10 @@ export const theme: Theme = {
height: 600,
dividerColor: Colors.MAKO,
},
evaluatedValuePopup: {
width: 300,
height: 400,
},
drawerWidth: "80%",
colors: {
primary: Colors.GREEN,

146
app/client/src/constants/FieldExpectedValue.ts Normal file
View File

@ -0,0 +1,146 @@
import { WidgetType } from "constants/WidgetConstants";
const FIELD_VALUES: Record<
WidgetType | "API_ACTION",
Record<string, string>
> = {
API_ACTION: {
body: "JSON",
params: "string",
headers: "string",
path: "string",
},
CANVAS_WIDGET: {},
ICON_WIDGET: {},
CONTAINER_WIDGET: {
backgroundColor: "string",
isVisible: "boolean",
},
DATE_PICKER_WIDGET: {
defaultDate: "Date",
isRequired: "boolean",
isVisible: "boolean",
isDisabled: "boolean",
onDateSelected: "undefined",
},
TABLE_WIDGET: {
tableData: "Array<Object>",
serverSidePaginationEnabled: "boolean",
isVisible: "boolean",
exportPDF: "boolean",
exportExcel: "boolean",
exportCsv: "boolean",
onRowSelected: "undefined",
onPageChange: "undefined",
},
IMAGE_WIDGET: {
image: "string",
defaultImage: "string",
isVisible: "boolean",
},
RADIO_GROUP_WIDGET: {
options: "Array<{ label: string, value: string }>",
defaultOptionValue: "string",
isRequired: "boolean",
isVisible: "boolean",
onSelectionChange: "undefined",
},
TABS_WIDGET: {
tabs: "Array<{ label: string, id: string }>",
selectedTab: "string",
isVisible: "boolean",
},
CHART_WIDGET: {
chartName: "string",
chartType: "LINE_CHART | BAR_CHART | PIE_CHART | COLUMN_CHART | AREA_CHART",
singleChartData: "Array<{ x: string, y: number }>",
xAxisName: "string",
yAxisName: "string",
isVisible: "boolean",
},
MODAL_WIDGET: {
canOutsideClickClose: "boolean",
size: "MODAL_LARGE | MODAL_SMALL",
},
INPUT_WIDGET: {
inputType: "string",
placeholderText: "string",
defaultText: "string",
regex: "string",
errorMessage: "string",
isRequired: "boolean",
isVisible: "boolean",
isDisabled: "boolean",
onTextChanged: "undefined",
},
DROP_DOWN_WIDGET: {
label: "string",
selectionType: "SINGLE_SELECT | MULTI_SELECT",
options: "Array<{ label: string, value: string }>",
defaultOptionValue: "string",
isRequired: "boolean",
isVisible: "boolean",
onOptionChange: "boolean",
},
FORM_BUTTON_WIDGET: {
text: "string",
buttonStyle: "PRIMARY_BUTTON | SECONDARY_BUTTON | DANGER_BUTTON",
disabledWhenInvalid: "boolean",
resetFormOnClick: "boolean",
isVisible: "boolean",
onClick: "boolean",
},
MAP_WIDGET: {
defaultMarkers: "Array<{ lat: number, long: number }>",
enableSearch: "boolean",
enablePickLocation: "boolean",
enableCreateMarker: "boolean",
isVisible: "boolean",
onMarkerClick: "undefined",
onCreateMarker: "undefined",
},
BUTTON_WIDGET: {
text: "string",
buttonStyle: "PRIMARY_BUTTON | SECONDARY_BUTTON | DANGER_BUTTON",
isVisible: "boolean",
onClick: "boolean",
},
RICH_TEXT_EDITOR_WIDGET: {
defaultText: "string",
isVisible: "boolean",
isDisabled: "boolean",
onTextChange: "undefined",
},
FILE_PICKER_WIDGET: {
label: "string",
maxNumFiles: "number",
maxFileSize: "number",
allowedFileTypes: "Array<string>",
isRequired: "boolean",
isVisible: "boolean",
uploadedFileUrls: "string",
onFilesSelected: "undefined",
},
CHECKBOX_WIDGET: {
label: "string",
defaultCheckedState: "boolean",
isRequired: "boolean",
isDisabled: "boolean",
isVisible: "boolean",
onCheckChange: "undefined",
},
FORM_WIDGET: {
backgroundColor: "string",
isVisible: "boolean",
},
TEXT_WIDGET: {
text: "string",
textAlign: "LEFT | CENTER | RIGHT",
textStyle: "HEADING | LABEL | BODY",
shouldScroll: "boolean",
isVisible: "boolean",
},
};
export default FIELD_VALUES;

5
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",
@ -127,6 +131,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
FETCH_ORGS_SUCCESS: "FETCH_ORGS_SUCCES",
FETCH_ORGS_INIT: "FETCH_ORGS_INIT",
SAVE_ORG_INIT: "SAVE_ORG_INIT",
SET_CURRENT_ORG_ID: "SET_CURRENT_ORG_ID",
STORE_DATASOURCE_REFS: "STORE_DATASOURCE_REFS",
UPDATE_DATASOURCE_REFS: "UPDATE_DATASOURCE_REFS",
FETCH_USER_INIT: "FETCH_USER_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",

91
app/client/src/entities/Action/index.ts Normal file
View File

@ -0,0 +1,91 @@
import { Datasource } from "api/DatasourcesApi";
export enum PluginType {
API = "API",
DB = "DB",
}
export enum PaginationType {
NONE = "NONE",
PAGE_NO = "PAGE_NO",
URL = "URL",
}
export interface ActionConfig {
timeoutInMillisecond: number;
paginationType?: PaginationType;
}
export interface ActionProvider {
name: string;
imageUrl: string;
url: string;
description: string;
credentialSteps: string;
}
export interface Property {
key: string;
value: string;
}
export interface BodyFormData {
editable: boolean;
mandatory: boolean;
description: string;
key: string;
value?: string;
type: string;
}
export interface ApiActionConfig extends ActionConfig {
headers: Property[];
httpMethod: string;
path?: string;
body?: JSON | string | Record<string, any> | null;
queryParameters?: Property[];
bodyFormData?: BodyFormData[];
}
export interface QueryActionConfig extends ActionConfig {
queryString: string;
}
export interface Action {
id: string;
name: string;
datasource: Partial<Datasource>;
organizationId: string;
pageId: string;
collectionId?: string;
actionConfiguration: Partial<ActionConfig>;
pluginId: string;
pluginType: PluginType;
executeOnLoad: boolean;
dynamicBindingPathList: Property[];
isValid: boolean;
invalids: string[];
jsonPathKeys: string[];
cacheResponse: string;
templateId?: string;
providerId?: string;
provider?: ActionProvider;
documentation?: { text: string };
}
export interface RestAction extends Action {
actionConfiguration: Partial<ApiActionConfig>;
}
export interface RapidApiAction extends Action {
actionConfiguration: Partial<ApiActionConfig>;
templateId: string;
proverId: string;
provider: ActionProvider;
pluginId: string;
documentation: { text: string };
}
export interface QueryAction extends Action {
actionConfiguration: Partial<QueryActionConfig>;
}

24
app/client/src/entities/DataTree/dataTreeFactory.ts
View File

@ -8,6 +8,8 @@ import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsRe
import { MetaState } from "reducers/entityReducers/metaReducer";
import { PageListPayload } from "constants/ReduxActionConstants";
import WidgetFactory from "utils/WidgetFactory";
import { ActionDraftsState } from "reducers/entityReducers/actionDraftsReducer";
import { Property } from "entities/Action";
export type ActionDescription<T> = {
type: string;
@ -32,6 +34,7 @@ export type RunActionPayload = {
export interface DataTreeAction extends Omit<ActionData, "data"> {
data: ActionResponse["body"];
run: ActionDispatcher<RunActionPayload, [string, string]>;
dynamicBindingPathList: Property[];
ENTITY_TYPE: ENTITY_TYPE.ACTION;
}
@ -63,6 +66,7 @@ export type DataTree = {
type DataTreeSeed = {
actions: ActionDataState;
actionDrafts: ActionDraftsState;
widgets: CanvasWidgetsReduxState;
widgetsMeta: MetaState;
pageList: PageListPayload;
@ -72,6 +76,7 @@ type DataTreeSeed = {
export class DataTreeFactory {
static create({
actions,
actionDrafts,
widgets,
widgetsMeta,
pageList,
@ -84,8 +89,23 @@ export class DataTreeFactory {
"closeModal",
];
actions.forEach(a => {
dataTree[a.config.name] = {
const config =
a.config.id in actionDrafts ? actionDrafts[a.config.id] : a.config;
let dynamicBindingPathList: Property[] = [];
// update paths
if (
config.dynamicBindingPathList &&
config.dynamicBindingPathList.length
) {
dynamicBindingPathList = config.dynamicBindingPathList.map(d => ({
...d,
key: `config.${d.key}`,
}));
}
dataTree[config.name] = {
...a,
config: config,
dynamicBindingPathList,
data: a.data ? a.data.body : {},
run: function(onSuccess: string, onError: string) {
return {
@ -99,7 +119,7 @@ export class DataTreeFactory {
},
ENTITY_TYPE: ENTITY_TYPE.ACTION,
};
dataTree.actionPaths && dataTree.actionPaths.push(`${a.config.name}.run`);
dataTree.actionPaths && dataTree.actionPaths.push(`${config.name}.run`);
});
Object.keys(widgets).forEach(w => {
const widget = widgets[w];

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",

1
app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
View File

@ -20,6 +20,7 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => {
<HeaderWrapper>
{props.url && (
<Button
className="t--back-to-editor"
href={props.url}
intent="primary"
icon="chevron-left"

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

@ -9,29 +9,27 @@ 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 { 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 Pagination from "./Pagination";
import { PaginationType, RestAction } from "entities/Action";
import { Icon } from "@blueprintjs/core";
import { HelpMap, HelpBaseURL } from "constants/HelpConstants";
import CollapsibleHelp from "components/designSystems/appsmith/help/CollapsibleHelp";
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 +57,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 +69,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 +96,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 +122,16 @@ interface APIFormProps {
isDeleting: boolean;
paginationType: PaginationType;
appName: string;
actionConfiguration?: any;
httpMethodFromForm: string;
actionConfigurationBody: object | string;
actionConfigurationHeaders?: any;
contentType: {
key: string;
value: string;
};
actionName: string;
apiId: string;
location: {
pathname: string;
};
dispatch: any;
datasourceFieldText: string;
}
type Props = APIFormProps & InjectedFormProps<RestAction, APIFormProps>;
@ -153,15 +147,14 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
isDeleting,
isRunning,
isSaving,
actionConfiguration,
actionConfigurationHeaders,
actionConfigurationBody,
httpMethodFromForm,
actionName,
location,
dispatch,
apiId,
} = props;
const allowPostBody =
httpMethodFromForm && httpMethodFromForm !== HTTP_METHODS[0];
useEffect(() => {
dispatch({
type: ReduxActionTypes.SET_LAST_USED_EDITOR_PAGE,
@ -170,6 +163,8 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
},
});
});
const allowPostBody =
httpMethodFromForm && httpMethodFromForm !== HTTP_METHODS[0];
return (
<Form onSubmit={handleSubmit}>
@ -219,20 +214,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"
leftIcon={FormIcons.SLASH_ICON}
normalize={value => value.trim()}
singleLine
setMaxHeight
/>
</FormRow>
</MainConfiguration>
<SecondaryWrapper>
@ -252,23 +240,23 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
rel="noopener noreferrer"
>
{" Learn How "}
<StyledOpenDocsIcon icon="document-open"></StyledOpenDocsIcon>
<StyledOpenDocsIcon icon="document-open" />
</a>
</CollapsibleHelp>
<HeadersSection>
<KeyValueFieldArray
name="actionConfiguration.headers"
label="Headers"
actionConfig={
actionConfiguration && actionConfigurationHeaders
}
actionConfig={actionConfigurationHeaders}
placeholder="Value"
dataTreePath={`${actionName}.config.actionConfiguration.headers`}
pushFields
/>
</HeadersSection>
<KeyValueFieldArray
name="actionConfiguration.queryParameters"
label="Params"
dataTreePath={`${actionName}.config.actionConfiguration.queryParameters`}
pushFields
/>
{allowPostBody && (
@ -276,6 +264,7 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
actionConfigurationHeaders={actionConfigurationHeaders}
actionConfiguration={actionConfigurationBody}
change={props.change}
dataTreePath={`${actionName}.config.actionConfiguration.body`}
/>
)}
</RequestParamsWrapper>
@ -305,24 +294,19 @@ 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 actionName = selector(state, "name");
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 {
actionName,
apiId,
httpMethodFromForm,
actionConfiguration,
actionConfigurationBody,
contentType,
actionConfigurationHeaders,
};
})(

8
app/client/src/pages/Editor/APIEditor/Pagination.tsx
View File

@ -6,6 +6,8 @@ import DropdownField from "components/editorComponents/form/fields/DropdownField
import FormRow from "components/editorComponents/FormRow";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import CalloutComponent from "components/designSystems/blueprint/CalloutComponent";
import { PaginationType } from "entities/Action";
interface PaginationProps {
onTestClick: Function;
paginationType: PaginationType;
@ -15,12 +17,6 @@ const PaginationFieldWrapper = styled.div`
margin-bottom: 5px;
`;
export enum PaginationType {
"NONE" = "NONE",
"PAGE_NO" = "PAGE_NO",
"URL" = "URL",
}
const ExampleApi = styled.p`
color: #ef7b63;
font-family: monospace;

15
app/client/src/pages/Editor/APIEditor/PostBodyData.tsx
View File

@ -14,6 +14,7 @@ import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValue
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import { AppState } from "reducers";
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import FIELD_VALUES from "constants/FieldExpectedValue";
const DropDownContainer = styled.div`
width: 300px;
@ -45,6 +46,7 @@ interface PostDataProps {
onDisplayFormatChange: Function;
apiId: string;
setDisplayFormat: Function;
dataTreePath: string;
}
type Props = PostDataProps;
@ -56,6 +58,7 @@ const PostBodyData = (props: Props) => {
displayFormat,
setDisplayFormat,
apiId,
dataTreePath,
} = props;
return (
<PostbodyContainer>
@ -110,14 +113,13 @@ const PostBodyData = (props: Props) => {
<React.Fragment>
<JSONEditorFieldWrapper className={"t--apiFormPostBody"}>
<DynamicTextField
expected={FIELD_VALUES.API_ACTION.body}
name="actionConfiguration.body[0]"
height={300}
showLineNumbers
allowTabIndent
singleLine={false}
placeholder={
'Please enter this POST request\'s JSON body.\n\n\nDid you know?\n\tIn Appsmith, we can use a widget\'s or API\'s property dynamically, using {{ }} templates.\n\n\tFor example: If we have an input widget named Input1 in which the user would provide their name \n\tand this post body structure should be { "name": "<text from Input1>" } \n\tWe can access it in this post body using { "name": "{{Input1.text}}" }'
}
dataTreePath={`${dataTreePath}[0]`}
/>
</JSONEditorFieldWrapper>
</React.Fragment>
@ -125,7 +127,11 @@ const PostBodyData = (props: Props) => {
{displayFormat?.value === POST_BODY_FORMAT_OPTIONS[1].value && (
<React.Fragment>
<KeyValueFieldArray name="actionConfiguration.body[1]" label="" />
<KeyValueFieldArray
name="actionConfiguration.body[1]"
dataTreePath={`${dataTreePath}[1]`}
label=""
/>
</React.Fragment>
)}
@ -137,6 +143,7 @@ const PostBodyData = (props: Props) => {
height={300}
allowTabIndent
singleLine={false}
dataTreePath={`${dataTreePath}[2]`}
/>
</JSONEditorFieldWrapper>
</React.Fragment>

10
app/client/src/pages/Editor/APIEditor/RapidApiEditorForm.tsx
View File

@ -11,12 +11,7 @@ import styled from "styled-components";
import FormLabel from "components/editorComponents/FormLabel";
import FormRow from "components/editorComponents/FormRow";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import {
RestAction,
PaginationField,
BodyFormData,
Property,
} from "api/ActionAPI";
import { PaginationField, BodyFormData, Property } from "api/ActionAPI";
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
@ -26,7 +21,8 @@ import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScre
import CredentialsTooltip from "components/editorComponents/form/CredentialsTooltip";
import { FormIcons } from "icons/FormIcons";
import { BaseTabbedView } from "components/designSystems/appsmith/TabbedView";
import Pagination, { PaginationType } from "./Pagination";
import Pagination from "./Pagination";
import { PaginationType, RestAction } from "entities/Action";
const Form = styled.form`
display: flex;

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

@ -9,7 +9,7 @@ import {
deleteAction,
updateAction,
} from "actions/actionActions";
import { PaginationField, RapidApiAction, RestAction } from "api/ActionAPI";
import { PaginationField } from "api/ActionAPI";
import { AppState } from "reducers";
import { RouteComponentProps } from "react-router";
import { API_EDITOR_FORM_NAME } from "constants/forms";
@ -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";
@ -26,6 +25,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
import { getActionById, getCurrentPageName } from "selectors/editorSelectors";
import { Plugin } from "api/PluginApi";
import styled from "styled-components";
import { RapidApiAction, RestAction, PaginationType } from "entities/Action";
import FeatureFlag from "utils/featureFlags";
import { FeatureFlagsEnum } from "configs/types";
@ -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,
};
};

2
app/client/src/pages/Editor/ApiSidebar.tsx
View File

@ -19,11 +19,11 @@ import {
createNewApiAction,
initApiPane,
} from "actions/apiPaneActions";
import { RestAction } from "api/ActionAPI";
import EditorSidebar from "pages/Editor/EditorSidebar";
import { getNextEntityName } from "utils/AppsmithUtils";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { Page } from "constants/ReduxActionConstants";
import { RestAction } from "entities/Action";
import { FeatureFlagsEnum } from "configs/types";
import FeatureFlag from "utils/featureFlags";

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,
};
};

50
app/client/src/pages/Editor/Popper.tsx
View File

@ -1,47 +1,20 @@
import React, { useRef, useEffect } from "react";
import styled from "styled-components";
import { createPortal } from "react-dom";
import PopperJS from "popper.js";
import PaneWrapper from "pages/common/PaneWrapper";
import { getColorWithOpacity } from "constants/DefaultTheme";
import PopperJS, { Placement, PopperOptions } from "popper.js";
type PopperProps = {
zIndex: number;
isOpen: boolean;
targetNode?: Element;
children: JSX.Element;
placement: Placement;
modifiers?: Partial<PopperOptions["modifiers"]>;
};
const PopperWrapper = styled(PaneWrapper)`
const PopperWrapper = styled.div<{ zIndex: number }>`
z-index: ${props => props.zIndex};
position: absolute;
z-index: 3;
max-height: ${props => props.theme.propertyPane.height}px;
width: ${props => props.theme.propertyPane.width}px;
margin: ${props => props.theme.spaces[2]}px;
box-shadow: 0px 0px 10px ${props => props.theme.colors.paneCard};
border: ${props => props.theme.spaces[5]}px solid
${props => props.theme.colors.paneBG};
border-right: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 ${props => props.theme.spaces[5]}px 0 0;
text-transform: none;
scrollbar-color: ${props => props.theme.colors.paneCard}
${props => props.theme.colors.paneBG};
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px
${props => getColorWithOpacity(props.theme.colors.paneBG, 0.3)};
}
&::-webkit-scrollbar-thumb {
background-color: ${props => props.theme.colors.paneCard};
outline: 1px solid ${props => props.theme.paneText};
border-radius: ${props => props.theme.radii[1]}px;
}
`;
/* eslint-disable react/display-name */
@ -64,7 +37,7 @@ export default (props: PopperProps) => {
props.targetNode,
(contentRef.current as unknown) as Element,
{
placement: "right-start",
placement: props.placement,
modifiers: {
flip: {
behavior: ["right", "left", "bottom", "top"],
@ -79,6 +52,7 @@ export default (props: PopperProps) => {
enabled: true,
boundariesElement: "viewport",
},
...props.modifiers,
},
},
);
@ -87,9 +61,11 @@ export default (props: PopperProps) => {
_popper.destroy();
};
}
}, [props.targetNode, props.isOpen]);
}, [props.targetNode, props.isOpen, props.modifiers, props.placement]);
return createPortal(
<PopperWrapper ref={contentRef}>{props.children}</PopperWrapper>,
<PopperWrapper ref={contentRef} zIndex={props.zIndex}>
{props.children}
</PopperWrapper>,
document.body,
);
};

20
app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
View File

@ -10,6 +10,7 @@ import PropertyControlFactory from "utils/PropertyControlFactory";
import { WidgetProps } from "widgets/BaseWidget";
import { PropertyControlPropsType } from "components/propertyControls";
import { Tooltip, Position } from "@blueprintjs/core";
import FIELD_EXPECTED_VALUE from "constants/FieldExpectedValue";
type Props = {
widgetProperties: WidgetProps;
@ -63,7 +64,7 @@ function UnderlinedLabel({
}
: {}
}
></span>
/>
</div>
</Tooltip>
);
@ -98,8 +99,16 @@ const PropertyControl = (props: Props) => {
const { propertyName, label } = propertyConfig;
if (widgetProperties) {
const propertyValue = widgetProperties[propertyName];
const validation = getPropertyValidation(propertyName);
const config = { ...propertyConfig, ...validation, propertyValue };
const dataTreePath = `${widgetProperties.widgetName}.evaluatedValues.${propertyName}`;
const { isValid, validationMessage } = getPropertyValidation(propertyName);
const config = {
...propertyConfig,
isValid,
propertyValue,
validationMessage,
dataTreePath,
expected: FIELD_EXPECTED_VALUE[widgetProperties.type][propertyName],
};
const isDynamic: boolean = _.get(
widgetProperties,
["dynamicProperties", propertyName],
@ -122,10 +131,7 @@ const PropertyControl = (props: Props) => {
}
>
<ControlPropertyLabelContainer>
<UnderlinedLabel
tooltip={propertyConfig.helpText}
label={label}
></UnderlinedLabel>
<UnderlinedLabel tooltip={propertyConfig.helpText} label={label} />
{isConvertible && (
<JSToggleButton

41
app/client/src/pages/Editor/PropertyPane/index.tsx
View File

@ -22,12 +22,13 @@ import { generateClassName } from "utils/generators";
import { RenderModes } from "constants/WidgetConstants";
import { ReduxActionTypes } from "constants/ReduxActionConstants";
import { CloseButton } from "components/designSystems/blueprint/CloseButton";
import { theme } from "constants/DefaultTheme";
import { getColorWithOpacity, theme } from "constants/DefaultTheme";
import { WidgetProps } from "widgets/BaseWidget";
import PropertyPaneTitle from "pages/Editor/PropertyPaneTitle";
import PropertyControl from "pages/Editor/PropertyPane/PropertyControl";
import AnalyticsUtil from "utils/AnalyticsUtil";
import * as log from "loglevel";
import PaneWrapper from "pages/common/PaneWrapper";
import { BindingText } from "pages/Editor/APIEditor/Form";
const PropertySectionLabel = styled.div`
@ -40,9 +41,38 @@ const PropertySectionLabel = styled.div`
align-items: center;
`;
const PropertyPaneWrapper = styled.div`
const PropertyPaneWrapper = styled(PaneWrapper)`
position: relative;
width: 100%;
max-height: ${props => props.theme.propertyPane.height}px;
width: ${props => props.theme.propertyPane.width}px;
margin: ${props => props.theme.spaces[2]}px;
box-shadow: 0px 0px 10px ${props => props.theme.colors.paneCard};
border: ${props => props.theme.spaces[5]}px solid
${props => props.theme.colors.paneBG};
border-right: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 ${props => props.theme.spaces[5]}px 0 0;
text-transform: none;
scrollbar-color: ${props => props.theme.colors.paneCard}
${props => props.theme.colors.paneBG};
scrollbar-width: thin;
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px
${props => getColorWithOpacity(props.theme.colors.paneBG, 0.3)};
}
&::-webkit-scrollbar-thumb {
background-color: ${props => props.theme.colors.paneCard};
outline: 1px solid ${props => props.theme.paneText};
border-radius: ${props => props.theme.radii[1]}px;
}
`;
const StyledToolTip = styled(Tooltip)`
@ -66,7 +96,12 @@ class PropertyPane extends Component<
generateClassName(this.props.widgetId),
)[0];
return (
<Popper isOpen={true} targetNode={el}>
<Popper
isOpen={true}
targetNode={el}
zIndex={3}
placement="right-start"
>
{content}
</Popper>
);

2
app/client/src/pages/Editor/QueryEditor/Form.tsx
View File

@ -25,12 +25,12 @@ import TextField from "components/editorComponents/form/fields/TextField";
import DropdownField from "components/editorComponents/form/fields/DropdownField";
import { BaseButton } from "components/designSystems/blueprint/ButtonComponent";
import { Datasource } from "api/DatasourcesApi";
import { RestAction } from "api/ActionAPI";
import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
import { PLUGIN_PACKAGE_POSTGRES } from "constants/QueryEditorConstants";
import "@syncfusion/ej2-react-grids/styles/material.css";
import { Colors } from "constants/Colors";
import JSONViewer from "./JSONViewer";
import { RestAction } from "entities/Action";
const QueryFormContainer = styled.div`
font-size: 20px;

8
app/client/src/pages/Editor/QueryEditor/QueryHomeScreen.tsx
View File

@ -14,7 +14,6 @@ import {
} from "selectors/entitiesSelector";
import { ActionDataState } from "reducers/entityReducers/actionsReducer";
import { Datasource } from "api/DatasourcesApi";
import { RestAction } from "api/ActionAPI";
import history from "utils/history";
import { createActionRequest } from "actions/actionActions";
import {
@ -29,6 +28,7 @@ import {
DATA_SOURCES_EDITOR_URL,
} from "constants/routes";
import AnalyticsUtil from "utils/AnalyticsUtil";
import { QueryAction } from "entities/Action";
const QueryHomePage = styled.div`
font-size: 20px;
@ -116,7 +116,7 @@ type QueryHomeScreenProps = {
dataSources: Datasource[];
applicationId: string;
pageId: string;
createAction: (data: Partial<RestAction>) => void;
createAction: (data: Partial<QueryAction>) => void;
actions: ActionDataState;
pluginIds: Array<string> | undefined;
isCreating: boolean;
@ -240,7 +240,7 @@ class QueryHomeScreen extends React.Component<QueryHomeScreenProps> {
src={this.getImageSrc(dataSource)}
className="dataSourceImage"
alt="Datasource"
></img>
/>
<p
className="textBtn t--datasource-name"
@ -268,7 +268,7 @@ const mapStateToProps = (state: AppState) => ({
});
const mapDispatchToProps = (dispatch: any) => ({
createAction: (data: Partial<RestAction>) => {
createAction: (data: Partial<QueryAction>) => {
dispatch(createActionRequest(data));
},
});

2
app/client/src/pages/Editor/QueryEditor/index.tsx
View File

@ -18,7 +18,6 @@ import { AppState } from "reducers";
import { getDataSources } from "selectors/editorSelectors";
import { QUERY_EDITOR_FORM_NAME } from "constants/forms";
import { Datasource } from "api/DatasourcesApi";
import { RestAction } from "api/ActionAPI";
import { QueryPaneReduxState } from "reducers/uiReducers/queryPaneReducer";
import {
getPluginIdsOfPackageNames,
@ -27,6 +26,7 @@ import {
import { PLUGIN_PACKAGE_DBS } from "constants/QueryEditorConstants";
import { getCurrentApplication } from "selectors/applicationSelectors";
import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
import { RestAction } from "entities/Action";
const EmptyStateContainer = styled.div`
display: flex;

2
app/client/src/pages/Editor/QuerySidebar.tsx
View File

@ -15,12 +15,12 @@ import {
copyActionRequest,
} from "actions/actionActions";
import { deleteQuery } from "actions/queryPaneActions";
import { RestAction } from "api/ActionAPI";
import { changeQuery, initQueryPane } from "actions/queryPaneActions";
import { getQueryActions } from "selectors/entitiesSelector";
import { getNextEntityName } from "utils/AppsmithUtils";
import { getDataSources } from "selectors/editorSelectors";
import { QUERY_EDITOR_URL_WITH_SELECTED_PAGE_ID } from "constants/routes";
import { RestAction } from "entities/Action";
const ActionItem = styled.div`
flex: 1;

4
app/client/src/pages/common/CustomizedDropdown/index.tsx
View File

@ -46,7 +46,7 @@ export type CustomizedDropdownProps = {
openOnHover?: boolean;
};
const getIcon = (icon?: string, intent?: Intent) => {
export const getIcon = (icon?: string, intent?: Intent) => {
if (icon) {
if (MenuIcons[icon]) {
return MenuIcons[icon]({
@ -68,7 +68,7 @@ const getIcon = (icon?: string, intent?: Intent) => {
}
};
const getContentSection = (section: CustomizedDropdownOptionSection) => {
export const getContentSection = (section: CustomizedDropdownOptionSection) => {
return (
<React.Fragment>
{section.options &&

25
app/client/src/reducers/entityReducers/actionDraftsReducer.ts Normal file
View File

@ -0,0 +1,25 @@
import { createReducer } from "utils/AppsmithUtils";
import { ReduxAction, ReduxActionTypes } from "constants/ReduxActionConstants";
import { Action, RestAction } from "entities/Action";
import _ from "lodash";
import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
export type ActionDraftsState = Record<string, Action>;
const initialState: ActionDraftsState = {};
const actionDraftsReducer = createReducer(initialState, {
[ReduxActionTypes.UPDATE_API_DRAFT]: (
state: ApiPaneReduxState,
action: ReduxAction<{ id: string; draft: Partial<RestAction> }>,
) => ({
...state,
[action.payload.id]: action.payload.draft,
}),
[ReduxActionTypes.DELETE_API_DRAFT]: (
state: ApiPaneReduxState,
action: ReduxAction<{ id: string }>,
) => _.omit(state, action.payload.id),
});
export default actionDraftsReducer;

3
app/client/src/reducers/entityReducers/actionsReducer.tsx
View File

@ -4,9 +4,10 @@ import {
ReduxAction,
ReduxActionErrorTypes,
} from "constants/ReduxActionConstants";
import { ActionResponse, RapidApiAction, RestAction } from "api/ActionAPI";
import { ActionResponse } from "api/ActionAPI";
import { ExecuteErrorPayload } from "constants/ActionConstants";
import _ from "lodash";
import { RapidApiAction, RestAction } from "entities/Action";
export interface ActionData {
isLoading: boolean;
config: RestAction | RapidApiAction;

2
app/client/src/reducers/entityReducers/index.tsx
View File

@ -9,12 +9,14 @@ import pageListReducer from "./pageListReducer";
import jsExecutionsReducer from "./jsExecutionsReducer";
import pluginsReducer from "reducers/entityReducers/pluginsReducer";
import metaReducer from "./metaReducer";
import actionDraftsReducer from "reducers/entityReducers/actionDraftsReducer";
const entityReducer = combineReducers({
canvasWidgets: canvasWidgetsReducer,
queryData: queryDataReducer,
widgetConfig: widgetConfigReducer,
actions: actionsReducer,
actionDrafts: actionDraftsReducer,
propertyConfig: propertyPaneConfigReducer,
datasources: datasourceReducer,
pageList: pageListReducer,

2
app/client/src/reducers/index.tsx
View File

@ -27,6 +27,7 @@ import { ImportedCollectionsReduxState } from "reducers/uiReducers/importedColle
import { ProvidersReduxState } from "reducers/uiReducers/providerReducer";
import { MetaState } from "./entityReducers/metaReducer";
import { ImportReduxState } from "reducers/uiReducers/importReducer";
import { ActionDraftsState } from "reducers/entityReducers/actionDraftsReducer";
import { HelpReduxState } from "./uiReducers/helpReducer";
const appReducer = combineReducers({
@ -61,6 +62,7 @@ export interface AppState {
canvasWidgets: CanvasWidgetsReduxState;
queryData: QueryDataState;
actions: ActionDataState;
actionDrafts: ActionDraftsState;
propertyConfig: PropertyPaneConfigState;
widgetConfig: WidgetConfigReducerState;
datasources: DatasourceDataState;

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

@ -4,8 +4,8 @@ import {
ReduxActionErrorTypes,
ReduxAction,
} from "constants/ReduxActionConstants";
import { RestAction } from "api/ActionAPI";
import _ from "lodash";
import { RestAction } from "entities/Action";
const initialState: ApiPaneReduxState = {
lastUsed: "",
@ -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;

10
app/client/src/reducers/uiReducers/orgReducer.ts
View File

@ -13,6 +13,7 @@ const initialState: OrgReduxState = {
isFetchAllUsers: false,
isDeletingOrgUser: false,
},
currentOrgId: "",
orgUsers: [],
orgRoles: [],
};
@ -39,6 +40,7 @@ const orgReducer = createReducer(initialState, {
isFetchAllUsers: true,
},
}),
[ReduxActionTypes.FETCH_ORG_ROLES_SUCCESS]: (
state: OrgReduxState,
action: ReduxAction<OrgRole[]>,
@ -113,6 +115,13 @@ const orgReducer = createReducer(initialState, {
[ReduxActionTypes.DELETE_ORG_USER_ERROR]: (state: OrgReduxState) => {
return { ...state, isDeletingOrgUser: false };
},
[ReduxActionTypes.SET_CURRENT_ORG_ID]: (
state: OrgReduxState,
action: ReduxAction<{ orgId: string }>,
) => ({
...state,
currentOrgId: action.payload.orgId,
}),
[ReduxActionTypes.FETCH_ORGS_SUCCESS]: (
state: OrgReduxState,
@ -134,6 +143,7 @@ export interface OrgReduxState {
};
orgUsers: OrgUser[];
orgRoles: any;
currentOrgId: string;
}
export default orgReducer;

2
app/client/src/reducers/uiReducers/queryPaneReducer.ts
View File

@ -4,8 +4,8 @@ import {
ReduxActionErrorTypes,
ReduxAction,
} from "constants/ReduxActionConstants";
import { RestAction } from "api/ActionAPI";
import _ from "lodash";
import { RestAction } from "entities/Action";
const initialState: QueryPaneReduxState = {
isFetching: false,

2
app/client/src/sagas/ActionSagas.ts
View File

@ -24,7 +24,6 @@ import ActionAPI, {
ExecuteActionRequest,
PaginationField,
Property,
RestAction,
} from "api/ActionAPI";
import { AppState } from "reducers";
import _ from "lodash";
@ -74,6 +73,7 @@ import { ToastType } from "react-toastify";
import AnalyticsUtil from "utils/AnalyticsUtil";
import * as log from "loglevel";
import { QUERY_CONSTANT } from "constants/QueryEditorConstants";
import { RestAction } from "entities/Action";
export const getAction = (
state: AppState,

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

@ -33,8 +33,8 @@ import {
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 { Property } from "api/ActionAPI";
import { changeApi, setDatasourceFieldText } from "actions/apiPaneActions";
import {
API_PATH_START_WITH_SLASH_ERROR,
FIELD_REQUIRED_ERROR,
@ -46,6 +46,8 @@ import { getPluginIdOfPackageName } from "sagas/selectors";
import { getActions } from "selectors/entitiesSelector";
import { ActionData } from "reducers/entityReducers/actionsReducer";
import { createActionRequest } from "actions/actionActions";
import { RestAction } from "entities/Action";
import { isDynamicValue } from "utils/DynamicBindingUtils";
const getApiDraft = (state: AppState, id: string) => {
const drafts = state.ui.apiPane.drafts;
@ -147,6 +149,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}`,
),
);
}
}
}
}
@ -191,13 +215,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 &&
@ -286,29 +303,23 @@ function* validateInputSaga(
payload,
meta: { field },
} = actionPayload;
if (field === "dynamicBindingPathList") return;
const actions: RestAction[] = yield select(getActionConfigs);
const sameNames = actions.filter(
(action: RestAction) => action.name === payload && action.id,
);
if (field === "name") {
const sameNames = actions.filter(
(action: RestAction) => action.name === payload && action.id,
);
if (!_.trim(payload)) {
_.set(errors, field, FIELD_REQUIRED_ERROR);
} else if (payload.indexOf(" ") !== -1) {
_.set(errors, field, VALID_FUNCTION_NAME_ERROR);
} else if (sameNames.length > 0) {
// TODO Check this
_.set(errors, field, UNIQUE_NAME_ERROR);
} else {
_.unset(errors, field);
}
}
if (field === "actionConfiguration.path") {
if (payload && payload.startsWith("/")) {
_.set(errors, field, API_PATH_START_WITH_SLASH_ERROR);
} else {
_.unset(errors, field);
}
}
yield put({
type: ReduxFormActionTypes.UPDATE_FIELD_ERROR,
meta: {
@ -391,12 +402,37 @@ function* updateFormFields(
}
}
function* updateDynamicBindingsSaga(
actionPayload: ReduxActionWithMeta<string, { field: string }>,
) {
const field = actionPayload.meta.field;
if (field === "dynamicBindingPathList") return;
const value = actionPayload.payload;
const { values } = yield select(getFormData, API_EDITOR_FORM_NAME);
if (!values.id) return;
const isDynamic = isDynamicValue(value);
let dynamicBindings: Property[] = values.dynamicBindingPathList || [];
const fieldExists = _.some(dynamicBindings, { key: field });
if (!isDynamic && fieldExists) {
dynamicBindings = dynamicBindings.filter(d => d.key !== field);
}
if (isDynamic && !fieldExists) {
dynamicBindings.push({ key: field });
}
yield put(
change(API_EDITOR_FORM_NAME, "dynamicBindingPathList", dynamicBindings),
);
}
function* formValueChangeSaga(
actionPayload: ReduxActionWithMeta<string, { field: string; form: string }>,
) {
const { form } = actionPayload.meta;
if (form !== API_EDITOR_FORM_NAME) return;
yield all([
call(updateDynamicBindingsSaga, actionPayload),
call(validateInputSaga, actionPayload),
call(updateDraftsSaga),
call(syncApiParamsSaga, actionPayload),

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({

85
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,8 @@ 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";
import { getCurrentOrgId } from "selectors/organizationSelectors";
function* fetchDatasourcesSaga() {
try {
@ -60,8 +67,12 @@ function* createDatasourceSaga(
actionPayload: ReduxAction<CreateDatasourceConfig>,
) {
try {
const organizationId = yield select(getCurrentOrgId);
const response: GenericApiResponse<Datasource> = yield DatasourcesApi.createDatasource(
actionPayload.payload,
{
...actionPayload.payload,
organizationId,
},
);
const isValidResponse = yield validateResponse(response);
if (isValidResponse) {
@ -73,9 +84,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({
@ -156,6 +165,7 @@ function* updateDatasourceSaga(actionPayload: ReduxAction<Datasource>) {
}
function* testDatasourceSaga(actionPayload: ReduxAction<Datasource>) {
const organizationId = yield select(getCurrentOrgId);
const { initialValues, values } = yield select(
getFormData,
DATASOURCE_DB_FORM,
@ -168,7 +178,10 @@ function* testDatasourceSaga(actionPayload: ReduxAction<Datasource>) {
try {
const response: GenericApiResponse<Datasource> = yield DatasourcesApi.testDatasource(
payload,
{
...payload,
organizationId,
},
);
const isValidResponse = yield validateResponse(response);
if (isValidResponse) {
@ -203,6 +216,7 @@ function* createDatasourceFromFormSaga(
) {
try {
let formConfig;
const organizationId = yield select(getCurrentOrgId);
const initialValues = {};
const parseConfig = (section: any): any => {
return _.map(section.children, (subSection: any) => {
@ -247,7 +261,10 @@ function* createDatasourceFromFormSaga(
};
const response: GenericApiResponse<Datasource> = yield DatasourcesApi.createDatasource(
payload,
{
...payload,
organizationId,
},
);
const isValidResponse = yield validateResponse(response);
if (isValidResponse) {
@ -344,6 +361,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 +420,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),
]);

10
app/client/src/sagas/PageSagas.tsx
View File

@ -75,7 +75,8 @@ export function* fetchPageListSaga(
);
const isValidResponse = yield validateResponse(response);
if (isValidResponse) {
const pages: PageListPayload = response.data.map(page => ({
const orgId = response.data.organizationId;
const pages: PageListPayload = response.data.pages.map(page => ({
pageName: page.name,
pageId: page.id,
isDefault: page.isDefault,
@ -87,6 +88,13 @@ export function* fetchPageListSaga(
applicationId,
},
});
yield put({
type: ReduxActionTypes.SET_CURRENT_ORG_ID,
payload: {
orgId,
},
});
return;
}
} catch (error) {

2
app/client/src/sagas/PluginSagas.ts
View File

@ -19,7 +19,7 @@ function* fetchPluginsSaga() {
}
} catch (error) {
yield put({
type: ReduxActionTypes.FETCH_PLUGINS_ERROR,
type: ReduxActionErrorTypes.FETCH_PLUGINS_ERROR,
payload: { error },
});
}

2
app/client/src/sagas/QueryPaneSagas.ts
View File

@ -30,7 +30,6 @@ import { initialize } from "redux-form";
import { getAction, getActionParams, getActionTimeout } from "./ActionSagas";
import { AppState } from "reducers";
import ActionAPI, {
RestAction,
PaginationField,
ExecuteActionRequest,
ActionApiResponse,
@ -45,6 +44,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
import { GenericApiResponse } from "api/ApiResponses";
import { validateResponse } from "./ErrorSagas";
import { getQueryName } from "selectors/entitiesSelector";
import { RestAction } from "entities/Action";
const getQueryDraft = (state: AppState, id: string) => {
const drafts = state.ui.apiPane.drafts;

11
app/client/src/selectors/dataTreeSelectors.ts
View File

@ -1,8 +1,7 @@
import { createSelector } from "reselect";
import { getActionsForCurrentPage } from "./entitiesSelector";
import { getActionDrafts, getActionsForCurrentPage } from "./entitiesSelector";
import { ActionDataState } from "reducers/entityReducers/actionsReducer";
import { getEvaluatedDataTree } from "utils/DynamicBindingUtils";
import { extraLibraries } from "jsExecution/JSExecutionManagerSingleton";
import { DataTree, DataTreeFactory } from "entities/DataTree/dataTreeFactory";
import { getWidgets, getWidgetsMeta } from "sagas/selectors";
import * as log from "loglevel";
@ -40,13 +39,15 @@ import { getPageList } from "./appViewSelectors";
//
export const getUnevaluatedDataTree = createSelector(
getActionsForCurrentPage,
getActionDrafts,
getWidgets,
getWidgetsMeta,
getPageList,
(actions, widgets, widgetsMeta, pageListPayload) => {
(actions, actionDrafts, widgets, widgetsMeta, pageListPayload) => {
const pageList = pageListPayload || [];
return DataTreeFactory.create({
actions,
actionDrafts,
widgets,
widgetsMeta,
pageList,
@ -82,8 +83,6 @@ export const getDataTreeForAutocomplete = createSelector(
}
});
}
const libs: Record<string, any> = {};
extraLibraries.forEach(config => (libs[config.accessor] = config.lib));
return { ...tree, ...cachedResponses, ...libs };
return tree;
},
);

19
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,14 @@ export const getActionsForCurrentPage = createSelector(
},
);
export const getActionResponses = (
state: AppState,
): Record<string, ActionResponse | undefined> => {
export const getActionDrafts = (state: AppState) => state.entities.actionDrafts;
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;
};
});

2
app/client/src/selectors/formSelectors.ts
View File

@ -1,6 +1,6 @@
import { getFormValues, isValid, getFormInitialValues } from "redux-form";
import { AppState } from "reducers";
import { RestAction } from "api/ActionAPI";
import { RestAction } from "entities/Action";
type GetFormData = (
state: AppState,

2
app/client/src/selectors/organizationSelectors.tsx
View File

@ -5,6 +5,8 @@ import { OrgRole, Org } from "constants/orgConstants";
export const getRolesFromState = (state: AppState) => {
return state.ui.orgs.roles;
};
export const getCurrentOrgId = (state: AppState) => state.ui.orgs.currentOrgId;
export const getOrgs = (state: AppState) => state.ui.orgs.list;
export const getAllUsers = (state: AppState) => state.ui.orgs.orgUsers;
export const getAllRoles = (state: AppState) => state.ui.orgs.orgRoles;

12
app/client/src/selectors/propertyPaneSelectors.tsx
View File

@ -47,15 +47,15 @@ export const getWidgetPropsForPropertyPane = createSelector(
const evaluatedWidget = _.find(evaluatedTree, {
widgetId: widget.widgetId,
}) as DataTreeWidget;
const widgetProperties = {
...widget,
};
if (evaluatedWidget.invalidProps) {
const { invalidProps, validationMessages } = evaluatedWidget;
return {
...widget,
invalidProps,
validationMessages,
};
widgetProperties.invalidProps = invalidProps;
widgetProperties.validationMessages = validationMessages;
}
return widget;
return widgetProperties;
},
);

Some files were not shown because too many files have changed in this diff Show More