From 97483c5c4bde76c0259a2e1eba7347503c66284e Mon Sep 17 00:00:00 2001 From: haojin111 Date: Sat, 12 Mar 2022 16:49:04 +0800 Subject: [PATCH 001/156] added scrollbar to repo limit error modal --- .../gitSync/RepoLimitExceededErrorModal.tsx | 87 +++++++++++-------- 1 file changed, 53 insertions(+), 34 deletions(-) diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx index 6e443713a6..7526082a3b 100644 --- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx +++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx @@ -12,7 +12,6 @@ import { } from "actions/gitSyncActions"; import Button, { Category, Size } from "components/ads/Button"; import styled, { useTheme } from "styled-components"; -import { MENU_HEIGHT } from "./constants"; import Text, { TextType } from "components/ads/Text"; import { Colors } from "constants/Colors"; import { @@ -56,7 +55,7 @@ const Container = styled.div` const BodyContainer = styled.div` display: flex; flex-direction: column; - height: calc(100% - ${MENU_HEIGHT}px); + height: calc(100% - 18px); `; const CloseBtnContainer = styled.div` @@ -82,6 +81,24 @@ const TextWrapper = styled.div` display: block; `; +const AppListContainer = styled.div` + height: 160px; + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; + + &::-webkit-scrollbar-thumb { + background-color: rgba(75, 72, 72, 0.5); + width: 4px; + border-radius: ${(props) => props.theme.radii[3]}px; + } + + &::-webkit-scrollbar { + width: 4px; + } + position: relative; +`; + function RepoLimitExceededErrorModal() { const isOpen = useSelector(getShowRepoLimitErrorModal); const dispatch = useDispatch(); @@ -236,38 +253,40 @@ function RepoLimitExceededErrorModal() { /> - {applications.map((application: ApplicationPayload) => { - const { gitApplicationMetadata } = application; - return ( - -
- - - {application.name} - - - - - {gitApplicationMetadata?.remoteUrl} - - -
- - openDisconnectGitModal(application.id, application.name) - } - text={createMessage(DISCONNECT_GIT)} - /> - - ); - })} + + {applications.map((application: ApplicationPayload) => { + const { gitApplicationMetadata } = application; + return ( + +
+ + + {application.name} + + + + + {gitApplicationMetadata?.remoteUrl} + + +
+ + openDisconnectGitModal(application.id, application.name) + } + text={createMessage(DISCONNECT_GIT)} + /> + + ); + })} + Date: Mon, 14 Mar 2022 12:14:07 +0800 Subject: [PATCH 002/156] added padding of git app list container --- .../src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx index 7526082a3b..794ba80691 100644 --- a/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx +++ b/app/client/src/pages/Editor/gitSync/RepoLimitExceededErrorModal.tsx @@ -86,6 +86,7 @@ const AppListContainer = styled.div` overflow-y: auto; overflow-x: hidden; scrollbar-width: none; + padding-right: 5px; &::-webkit-scrollbar-thumb { background-color: rgba(75, 72, 72, 0.5); From 1f45c67edf2bd8b29f43f62fed84231153e54ac4 Mon Sep 17 00:00:00 2001 From: Arsalan Date: Tue, 15 Mar 2022 12:19:30 +0530 Subject: [PATCH 003/156] fix: added iconAlign dependency to iconName prop --- app/client/src/widgets/ButtonWidget/widget/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/widgets/ButtonWidget/widget/index.tsx b/app/client/src/widgets/ButtonWidget/widget/index.tsx index bb9a62028f..29f13d278e 100644 --- a/app/client/src/widgets/ButtonWidget/widget/index.tsx +++ b/app/client/src/widgets/ButtonWidget/widget/index.tsx @@ -259,6 +259,7 @@ class ButtonWidget extends BaseWidget { } return propertiesToUpdate; }, + dependencies: ["iconAlign"], validation: { type: ValidationTypes.TEXT, }, From becd005c6aacc248daecb344705f91422f080e3a Mon Sep 17 00:00:00 2001 From: Arsalan Date: Tue, 15 Mar 2022 13:41:45 +0530 Subject: [PATCH 004/156] fix: Added Test case for icon alignment --- .../FormWidgets/Button_spec.js | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js index 2451cab9d3..83d7f4f526 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js @@ -8,6 +8,8 @@ const modalWidgetPage = require("../../../../locators/ModalWidget.json"); const datasource = require("../../../../locators/DatasourcesEditor.json"); const queryLocators = require("../../../../locators/QueryEditor.json"); +const iconAlignmentProperty = ".t--property-control-iconalignment"; + describe("Button Widget Functionality", function() { before(() => { cy.addDsl(dsl); @@ -17,6 +19,52 @@ describe("Button Widget Functionality", function() { cy.openPropertyPane("buttonwidget"); }); + it("Icon alignment should not change when changing the icon", () => { + // Add an icon + cy.get(".t--property-control-icon .bp3-icon-caret-down").click({ + force: true, + }); + + cy.get(".bp3-icon-add") + .first() + .click({ + force: true, + }); + + // Assert if the icon exists + cy.get(`${widgetsPage.buttonWidget} .bp3-icon-add`).should("exist"); + // Change icon alignment to right + cy.get(`${iconAlignmentProperty} .t--button-tab-right`) + .last() + .click({ + force: true, + }); + cy.wait(200); + // Assert if the icon appears on the right hand side of the button text + cy.get(widgetsPage.buttonWidget) + .contains("Submit") + .children("span") + .should("have.length", 2); + cy.get(`${widgetsPage.buttonWidget} span.bp3-button-text`) + .next() + .should("have.class", "bp3-icon-add"); + // Change the existing icon + cy.get(".t--property-control-icon .bp3-icon-caret-down").click({ + force: true, + }); + cy.get(".bp3-icon-airplane") + .first() + .click({ + force: true, + }); + // Assert if the icon changes + // Assert if the icon still exists on the right side of the text + cy.get(`${widgetsPage.buttonWidget} .bp3-icon-airplane`) + .should("exist") + .prev() + .should("have.text", "Submit"); + }); + it("Button-Color Validation", function() { // Change button color cy.changeButtonColor("rgb(255, 0, 0)"); From 2f862ac8db9a9c2a7c984858e5d3ac0b9eaf9937 Mon Sep 17 00:00:00 2001 From: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com> Date: Wed, 16 Mar 2022 15:25:56 +0100 Subject: [PATCH 005/156] fix: properly render html responses (#11853) * properly render html responses * My empty commit with a message * My empty commit with a message * Remove package, use custom function Co-authored-by: Adeoluwa Ayangade --- .../editorComponents/ApiResponseView.tsx | 17 +++++++++++++---- .../src/components/editorComponents/utils.ts | 11 +++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) create mode 100644 app/client/src/components/editorComponents/utils.ts diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index 5f6716d94c..267f8410bb 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -10,7 +10,7 @@ import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScre import ReadOnlyEditor from "components/editorComponents/ReadOnlyEditor"; import { getActionResponses } from "selectors/entitiesSelector"; import { Colors } from "constants/Colors"; -import _ from "lodash"; +import _, { isString } from "lodash"; import { CHECK_REQUEST_BODY, createMessage, @@ -36,6 +36,7 @@ import Button, { Size } from "components/ads/Button"; import EntityBottomTabs from "./EntityBottomTabs"; import { DEBUGGER_TAB_KEYS } from "./Debugger/helpers"; import { setCurrentTab } from "actions/debuggerActions"; +import { isHtml } from "./utils"; type TextStyleProps = { accent: "primary" | "secondary" | "error"; @@ -240,6 +241,7 @@ function ApiResponseView(props: Props) { const messages = response?.messages; let responseHeaders; + let responseBody; // if no headers are present in the response, use the default body text. if (response.headers) { @@ -248,6 +250,15 @@ function ApiResponseView(props: Props) { responseHeaders = {}; // if the response headers is empty show an empty object. } + if (response.body) { + // if the response is already a string and is of type html, do not stringify further but simply return the response string. + if (isString(response.body) && isHtml(response.body)) { + responseBody = response.body || ""; + } else { + responseBody = JSON.stringify(response.body, null, 2); + } + } + const tabs = [ { key: "body", @@ -298,9 +309,7 @@ function ApiResponseView(props: Props) { folding height={"100%"} input={{ - value: response.body - ? JSON.stringify(response.body, null, 2) - : "", + value: response.body ? (responseBody as string) : "", }} /> )} diff --git a/app/client/src/components/editorComponents/utils.ts b/app/client/src/components/editorComponents/utils.ts new file mode 100644 index 0000000000..72b72dd041 --- /dev/null +++ b/app/client/src/components/editorComponents/utils.ts @@ -0,0 +1,11 @@ +export const isHtml = (str: string) => { + const fragment = document.createRange().createContextualFragment(str); + + // remove all non text nodes from fragment + fragment + .querySelectorAll("*") + .forEach((el: any) => el.parentNode.removeChild(el)); + + // if there is textContent, then its not a pure HTML + return !(fragment.textContent || "").trim(); +}; From ba990684256bd76b3566f1db47b06de1eab02070 Mon Sep 17 00:00:00 2001 From: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com> Date: Wed, 16 Mar 2022 15:26:19 +0100 Subject: [PATCH 006/156] feat: Add action name to confirmation modal (#11807) * Add action name to confirmation modal * Fix cypress tests and button size --- .../ClientSideTests/ApiPaneTests/API_Edit_spec.js | 2 +- .../QueryPane/ConfirmRunAction_spec.js | 2 +- .../ServerSideTests/QueryPane/Postgres_Spec.js | 4 ++-- .../ServerSideTests/QueryPane/S3_spec.js | 4 ++-- app/client/src/ce/constants/messages.ts | 2 +- app/client/src/components/ads/DialogComponent.tsx | 5 ++++- .../src/pages/Editor/RequestConfirmationModal.tsx | 14 ++++++++------ 7 files changed, 19 insertions(+), 14 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js index 648dfe66be..867876a756 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ApiPaneTests/API_Edit_spec.js @@ -53,7 +53,7 @@ describe("API Panel Test Functionality", function() { cy.get(apiwidget.runQueryButton).click(); cy.get(".bp3-dialog") .find("button") - .contains("Cancel") + .contains("No") .click(); cy.get(apiwidget.runQueryButton) .children() diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/ConfirmRunAction_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/ConfirmRunAction_spec.js index 86f55695f4..0a634f6e11 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/ConfirmRunAction_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/ConfirmRunAction_spec.js @@ -29,7 +29,7 @@ describe("Confirm run action", function() { cy.onlyQueryRun(); cy.get(".bp3-dialog") .find("button") - .contains("Confirm") + .contains("Yes") .click(); cy.wait("@postExecute").should( "have.nested.property", diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Postgres_Spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Postgres_Spec.js index 861eb811bc..357ff8dcdd 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Postgres_Spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/Postgres_Spec.js @@ -244,7 +244,7 @@ describe("Validate CRUD queries for Postgres along with UI flow verifications", cy.NavigateToActiveTab(); cy.contains(".t--datasource-name", datasourceName).click(); cy.get(".t--delete-datasource").click(); - cy.clickButton("Confirm"); + cy.clickButton("Yes"); cy.wait("@deleteDatasource").should( "have.nested.property", @@ -291,7 +291,7 @@ describe("Validate CRUD queries for Postgres along with UI flow verifications", cy.NavigateToActiveTab(); cy.contains(".t--datasource-name", datasourceName).click({ force: true }); cy.get(".t--delete-datasource").click({ force: true }); - cy.clickButton("Confirm"); + cy.clickButton("Yes"); // cy.wait("@deleteDatasource").should( // "have.nested.property", diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_spec.js index 4f55be5068..ed4b063274 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_spec.js @@ -436,7 +436,7 @@ describe("Validate CRUD queries for Amazon S3 along with UI flow verifications", cy.NavigateToActiveTab(); cy.contains(".t--datasource-name", datasourceName).click(); cy.get(".t--delete-datasource").click(); - cy.clickButton("Confirm"); + cy.clickButton("Yes"); cy.wait("@deleteDatasource").should( "have.nested.property", "response.body.responseMeta.status", @@ -660,7 +660,7 @@ describe("Validate CRUD queries for Amazon S3 along with UI flow verifications", cy.NavigateToActiveTab(); cy.contains(".t--datasource-name", datasourceName).click({ force: true }); cy.get(".t--delete-datasource").click(); - cy.clickButton("Confirm"); + cy.clickButton("Yes"); // cy.wait("@deleteDatasource").should( // "have.nested.property", diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 5510f31064..2f139136d7 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -937,7 +937,7 @@ export const WELCOME_FORM_NON_SUPER_USER_ROLE = () => "Role"; export const WELCOME_FORM_NON_SUPER_USER_USE_CASE = () => "What are you planning to use Appsmith for?"; export const QUERY_CONFIRMATION_MODAL_MESSAGE = () => - "Are you sure you want to perform this action?"; + `Are you sure you want to run `; export const ENTITY_EXPLORER_TITLE = () => "NAVIGATION"; export const MULTI_SELECT_PROPERTY_PANE_MESSAGE = () => `Select a widget to see it's properties`; diff --git a/app/client/src/components/ads/DialogComponent.tsx b/app/client/src/components/ads/DialogComponent.tsx index 1066f02158..0b93852380 100644 --- a/app/client/src/components/ads/DialogComponent.tsx +++ b/app/client/src/components/ads/DialogComponent.tsx @@ -10,6 +10,7 @@ const StyledDialog = styled(Dialog)<{ maxHeight?: string; maxWidth?: string; showHeaderUnderline?: boolean; + noModalBodyMarginTop?: boolean; }>` && { border-radius: 0; @@ -78,7 +79,7 @@ const StyledDialog = styled(Dialog)<{ & .${Classes.DIALOG_BODY} { margin: 0; - margin-top: 24px; + margin-top: ${(props) => (props.noModalBodyMarginTop ? "0px" : "24px")}; overflow: auto; } @@ -120,6 +121,7 @@ type DialogComponentProps = { canEscapeKeyClose?: boolean; className?: string; maxWidth?: string; + noModalBodyMarginTop?: boolean; }; export function DialogComponent(props: DialogComponentProps) { @@ -170,6 +172,7 @@ export function DialogComponent(props: DialogComponentProps) { isOpen={isOpen} maxHeight={props.maxHeight} maxWidth={props.maxWidth} + noModalBodyMarginTop={props.noModalBodyMarginTop} onClose={onClose} onOpening={props.onOpening} setMaxWidth={props.setMaxWidth} diff --git a/app/client/src/pages/Editor/RequestConfirmationModal.tsx b/app/client/src/pages/Editor/RequestConfirmationModal.tsx index 51ff169b57..7126aaaa1b 100644 --- a/app/client/src/pages/Editor/RequestConfirmationModal.tsx +++ b/app/client/src/pages/Editor/RequestConfirmationModal.tsx @@ -85,12 +85,14 @@ class RequestConfirmationModal extends React.Component { isOpen={modalInfo?.modalOpen} key={index} maxHeight={"80vh"} + noModalBodyMarginTop onClose={() => this.handleClose(modalInfo)} - title="Confirm Action" + title="Confirmation Dialog" width={"580px"} > - {createMessage(QUERY_CONFIRMATION_MODAL_MESSAGE)} + {createMessage(QUERY_CONFIRMATION_MODAL_MESSAGE)}{" "} + {modalInfo.name} ?