From 4fca7da51d468e44a9ee16bc13d418135890a2eb Mon Sep 17 00:00:00 2001 From: Tanvi Bhakta Date: Mon, 29 May 2023 11:10:41 +0530 Subject: [PATCH] fix: ads-v2 fixes (#23543) ## Description Notion Issues: 1. Issues with link component: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=4121a76714cb49f2ba76d20fbeab9766&pm=s 2. GraphQL code editor heading color: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=82bbeaa2749642268eada28fcf5ec6a6&pm=s 3. tooltip on long JS Object names: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=353552b086de45329390bd4dfae98ee4&pm=s 4. Multiple scroll bars on response tab: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=111515d90ec5447687b1b573d64bd6eb&pm=s 5. Save and delete buttons: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=1ac1fed293994b51b4c31bc44dd2d736&pm=s 6. Js Objects always on tooltip: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=59f3e5b452d24ab9aa05e9fdd169113f&pm=s 7. Error message alignment: https://www.notion.so/appsmith/f353d8c6bd664f79ad858a42010cdfc8?v=f04cde23f6424aeb9d5a6e389cd172bd&p=a6f2cc4e79994b77894c0293d50be3b9&pm=s 8. Max width of field on Admin settings page: https://www.notion.so/appsmith/Text-boxes-too-small-in-Auth-Pages-ef2d0fb97f8247848113f9a419e3da09?pvs=4 Other issues: 1. Added data testid for branch create spinner. 7. Fix: branch name button have a fixed width even if text length is small. #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Parthvi Goswami Co-authored-by: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Co-authored-by: Preet Sidhu Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: rahulramesha Co-authored-by: Aishwarya UR Co-authored-by: Vijetha-Kaja Co-authored-by: Apple Co-authored-by: Arsalan Yaldram Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Co-authored-by: Aswath K Co-authored-by: Ankita Kinger Co-authored-by: Aman Agarwal Co-authored-by: Sangeeth Sivan <74818788+berzerkeer@users.noreply.github.com> Co-authored-by: Saroj <43822041+sarojsarab@users.noreply.github.com> Co-authored-by: Aishwarya-U-R <91450662+Aishwarya-U-R@users.noreply.github.com> Co-authored-by: Parthvi <80334441+Parthvi12@users.noreply.github.com> Co-authored-by: Vijetha-Kaja <119562824+Vijetha-Kaja@users.noreply.github.com> Co-authored-by: Ayush Pahwa Co-authored-by: Rohit Agarwal --- .../cypress/support/Pages/DataSources.ts | 11 ++- app/client/package.json | 4 +- .../ce/pages/Applications/EmbedSnippetTab.tsx | 16 +++- .../ce/pages/Home/LeftPaneBottomSection.tsx | 1 - .../editorComponents/ActionNameEditor.tsx | 1 + .../editorComponents/ApiResponseView.tsx | 2 +- .../Debugger/ErrorLogs/ErrorLogItem.tsx | 3 + .../ErrorLogs/components/LogCollapseData.tsx | 1 + .../editorComponents/Debugger/LogItem.tsx | 4 +- .../GlobalSearch/SearchBox.tsx | 2 +- .../GlobalSearch/SearchModal.tsx | 14 ++- .../form/ToggleComponentToJson.tsx | 19 ++-- .../src/components/utils/formComponents.tsx | 23 +---- .../src/globalStyles/CodemirrorHintStyles.ts | 3 +- app/client/src/index.css | 6 +- .../Applications/ForkApplicationModal.tsx | 1 + .../Applications/ImportApplicationModal.tsx | 12 ++- .../Editor/APIEditor/GraphQL/Pagination.tsx | 36 ++++---- .../Editor/APIEditor/GraphQL/QueryEditor.tsx | 3 + .../APIEditor/GraphQL/VariableEditor.tsx | 6 +- .../Editor/DataSourceEditor/DSFormHeader.tsx | 89 +++++++++---------- .../pages/Editor/DataSourceEditor/index.tsx | 2 - app/client/src/pages/Editor/EditorHeader.tsx | 8 +- .../Explorer/Entity/EntityProperties.tsx | 2 + .../pages/Editor/Explorer/ExplorerIcons.tsx | 4 +- .../Explorer/JSActions/JSActionEntity.tsx | 2 +- .../GeneratePageForm/GeneratePageForm.tsx | 2 +- .../IntegrationEditor/DatasourceCard.tsx | 14 +-- .../pages/Editor/IntegrationEditor/NewApi.tsx | 2 +- .../pages/Editor/JSEditor/JSFunctionRun.tsx | 36 +++++--- .../Editor/JSEditor/JSObjectNameEditor.tsx | 1 + .../Editor/PropertyPane/PropertyControl.tsx | 24 ++--- .../Editor/QueryEditor/EditorJSONtoForm.tsx | 8 +- .../Editor/SaaSEditor/DatasourceForm.tsx | 8 +- .../src/pages/Editor/gitSync/Tabs/Deploy.tsx | 1 + .../pages/Settings/FormGroup/Accordion.tsx | 2 +- .../src/pages/Settings/FormGroup/Button.tsx | 2 +- .../src/pages/Settings/FormGroup/Checkbox.tsx | 2 +- .../src/pages/Settings/FormGroup/Common.tsx | 2 +- app/client/src/pages/Settings/components.tsx | 2 +- .../src/pages/Templates/ForkTemplate.tsx | 3 +- .../common/datasourceAuth/AuthMessage.tsx | 10 ++- .../src/pages/common/datasourceAuth/index.tsx | 26 ++++-- app/client/src/widgets/CanvasResizer.tsx | 6 +- app/client/yarn.lock | 20 ++--- 45 files changed, 245 insertions(+), 201 deletions(-) diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts index a0c9033e37..06d78dec1c 100644 --- a/app/client/cypress/support/Pages/DataSources.ts +++ b/app/client/cypress/support/Pages/DataSources.ts @@ -101,8 +101,7 @@ export class DataSources { _selectedRow = ".tr.selected-row"; _activeTab = "span:contains('Active')"; _selectedActiveTab = "li[aria-selected='true'] " + this._activeTab; - _contextMenuDatasource = "span[name='comment-context-menu']"; - _contextMenuDSReviewPage = "span[name='context-menu']"; + _contextMenuDSReviewPage = "[data-testid='t--context-menu-trigger']"; _contextMenuDelete = ".t--datasource-option-delete"; _datasourceCardGeneratePageBtn = ".t--generate-template"; _queryOption = (option: string) => @@ -1000,7 +999,7 @@ export class DataSources { }; }) { if (options.limit) { - // Select Limit Variable from dropdown + // Select Limit variable from dropdown cy.get(this._graphqlPagination._limitVariable).click({ force: true, }); @@ -1008,7 +1007,7 @@ export class DataSources { .contains(options.limit.variable) .click({ force: true }); - // Set the Limit Value as 1 + // Set the Limit value as 1 cy.get(this._graphqlPagination._limitValue) .first() .focus() @@ -1016,7 +1015,7 @@ export class DataSources { } if (options.offset) { - // Select Offset Variable from dropdown + // Select Offset vaiable from dropdown cy.get(this._graphqlPagination._offsetVariable).click({ force: true, }); @@ -1025,7 +1024,7 @@ export class DataSources { .contains(options.offset.variable) .click({ force: true }); - // Set the Limit Value as 1 + // Set the Limit value as 1 cy.get(this._graphqlPagination._offsetValue) .first() .focus() diff --git a/app/client/package.json b/app/client/package.json index c3d0679b9b..5e1fba4494 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -91,8 +91,8 @@ "cypress-log-to-output": "^1.1.2", "dayjs": "^1.10.6", "deep-diff": "^1.0.2", - "design-system": "npm:@appsmithorg/design-system@2.1.9", - "design-system-old": "npm:@appsmithorg/design-system-old@1.1.7", + "design-system": "npm:@appsmithorg/design-system@2.1.10", + "design-system-old": "npm:@appsmithorg/design-system-old@1.1.8", "downloadjs": "^1.4.7", "fast-deep-equal": "^3.1.3", "fast-xml-parser": "^3.17.5", diff --git a/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx b/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx index 9d441b92f9..00cb761602 100644 --- a/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx +++ b/app/client/src/ce/pages/Applications/EmbedSnippetTab.tsx @@ -12,6 +12,7 @@ import { getCurrentApplication } from "selectors/editorSelectors"; import PrivateEmbeddingContent from "pages/Applications/EmbedSnippet/PrivateEmbeddingContent"; import PropertyHelpLabel from "pages/Editor/PropertyPane/PropertyHelpLabel"; import { ADMIN_SETTINGS_PATH } from "constants/routes"; +import _ from "lodash"; export const StyledPropertyHelpLabel = styled(PropertyHelpLabel)` .bp3-popover-content > div { @@ -66,8 +67,21 @@ export function EmbedSnippetTab({ return ; } +// get only the part of the url after the domain name +export const to = (url: string) => { + const path = _.drop( + url + .toString() + .toLowerCase() + .replace(/([a-z])?:\/\//, "$1") + .split("/"), + ).join("/"); + return `/${path}`; +}; + function ShareModal() { const embedSnippet = useUpdateEmbedSnippet(); + return (
{embedSnippet.isSuperUser && ( @@ -124,7 +138,7 @@ function ShareModal() { data-testid="preview-embed" endIcon="share-box-line" target={"_blank"} - to={embedSnippet.appViewEndPoint} + to={to(embedSnippet.appViewEndPoint)} > {createMessage(IN_APP_EMBED_SETTING.previewEmbeddedApp)} diff --git a/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx b/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx index 22f81f8a9e..f293420668 100644 --- a/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx +++ b/app/client/src/ce/pages/Home/LeftPaneBottomSection.tsx @@ -44,7 +44,6 @@ export const LeftPaneVersionData = styled.div` justify-content: space-between; color: var(--ads-v2-color-fg-emphasis); font-size: 8px; - width: 92%; margin-top: ${(props) => props.theme.spaces[3]}px; `; diff --git a/app/client/src/components/editorComponents/ActionNameEditor.tsx b/app/client/src/components/editorComponents/ActionNameEditor.tsx index 7d9004903f..b59a2d5740 100644 --- a/app/client/src/components/editorComponents/ActionNameEditor.tsx +++ b/app/client/src/components/editorComponents/ActionNameEditor.tsx @@ -103,6 +103,7 @@ function ActionNameEditor(props: ActionNameEditorProps) {
{currentPlugin && ( diff --git a/app/client/src/components/editorComponents/ApiResponseView.tsx b/app/client/src/components/editorComponents/ApiResponseView.tsx index ac1b19d033..121a7d0509 100644 --- a/app/client/src/components/editorComponents/ApiResponseView.tsx +++ b/app/client/src/components/editorComponents/ApiResponseView.tsx @@ -173,7 +173,7 @@ const HelpSection = styled.div` `; const ResponseBodyContainer = styled.div` - overflow-y: auto; + overflow-y: clip; height: 100%; display: grid; `; diff --git a/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx b/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx index d89b3bbb6c..389d9f2389 100644 --- a/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx +++ b/app/client/src/components/editorComponents/Debugger/ErrorLogs/ErrorLogItem.tsx @@ -109,6 +109,9 @@ const Wrapper = styled.div<{ collapsed: boolean }>` text-decoration-line: underline; flex-shrink: 0; width: max-content; + > span { + font-size: 12px; + } } `; diff --git a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx index 5cd733c954..5e015b20e0 100644 --- a/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx +++ b/app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx @@ -38,6 +38,7 @@ const MessageWrapper = styled.div` `; export const JsonWrapper = styled.div` + word-break: break-all; svg { color: ${(props) => props.theme.colors.debugger.jsonIcon} !important; height: 12px !important; diff --git a/app/client/src/components/editorComponents/Debugger/LogItem.tsx b/app/client/src/components/editorComponents/Debugger/LogItem.tsx index 7d03eb34dc..dc979aa274 100644 --- a/app/client/src/components/editorComponents/Debugger/LogItem.tsx +++ b/app/client/src/components/editorComponents/Debugger/LogItem.tsx @@ -123,9 +123,11 @@ const Wrapper = styled.div<{ collapsed: boolean }>` margin-left: auto; ${getTypographyByKey("btnMedium")}; color: var(--ads-v2-color-fg-emphasis); - text-transform: uppercase; cursor: pointer; width: max-content; + > span { + font-size: 12px; + } } `; diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx index e001283b30..b8e9788568 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/SearchBox.tsx @@ -66,7 +66,7 @@ const CategoryDisplay = styled.div` margin-left: var(--ads-v2-spaces-3); transition: 0.2s all ease; &:hover { - fill: var(--ads-v2-color-bg-muted); + fill: var(--ads-v2-color-fg-muted); } } `; diff --git a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx index 593ff8cf22..e286b249af 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx +++ b/app/client/src/components/editorComponents/GlobalSearch/SearchModal.tsx @@ -4,6 +4,15 @@ import AnalyticsUtil from "utils/AnalyticsUtil"; import { ModalBody, ModalContent, Modal } from "design-system"; const StyledDocsSearchModal = styled(ModalContent)` + text-rendering: auto; + backface-visibility: hidden; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + width: 500px; + &.modal-documentation, + &.modal-snippet { + width: 785px; + } .modal-snippet, .modal-documentation { overflow: hidden; @@ -37,7 +46,10 @@ function DocsSearchModal({ }} open={modalOpen} > - + {children} diff --git a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx index e5269b94af..fdcdd7a190 100644 --- a/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx +++ b/app/client/src/components/editorComponents/form/ToggleComponentToJson.tsx @@ -70,15 +70,18 @@ function ToggleComponentToJsonHandler(props: HandlerProps) { return ( - + + + ); } diff --git a/app/client/src/components/utils/formComponents.tsx b/app/client/src/components/utils/formComponents.tsx index bbf299f22b..da11aba8aa 100644 --- a/app/client/src/components/utils/formComponents.tsx +++ b/app/client/src/components/utils/formComponents.tsx @@ -1,28 +1,11 @@ -import { Colors } from "constants/Colors"; -import { Menu, MenuItem } from "design-system-old"; +import { Menu } from "design-system"; import styled from "styled-components"; -export const MenuComponent = styled(Menu)` - flex: 0; - margin: auto; -`; - export const MenuWrapper = styled.div` display: flex; margin: 8px 0px; `; -export const RedMenuItem = styled(MenuItem)` - &&, - && .cs-text { - color: ${Colors.DANGER_SOLID}; - } - - &&, - &&:hover { - svg, - svg path { - fill: ${Colors.DANGER_SOLID}; - } - } +export const StyledMenu = styled(Menu)` + flex: 0; `; diff --git a/app/client/src/globalStyles/CodemirrorHintStyles.ts b/app/client/src/globalStyles/CodemirrorHintStyles.ts index 3005b01627..b1b7d38649 100644 --- a/app/client/src/globalStyles/CodemirrorHintStyles.ts +++ b/app/client/src/globalStyles/CodemirrorHintStyles.ts @@ -87,7 +87,6 @@ export const CodemirrorHintStyles = createGlobalStyle<{ display: flex; align-items: center; > div { - padding: 0 2px; img { height: 14px; width: 14px; @@ -97,7 +96,7 @@ export const CodemirrorHintStyles = createGlobalStyle<{ .shortcut { font-style: italic; font-size: 10px; - color: var(--ads-v2-color-fg-subtle); + color: var(--ads-v2-color-fg); } } diff --git a/app/client/src/index.css b/app/client/src/index.css index e5b81e37b6..69c8e53032 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -228,10 +228,12 @@ div.bp3-popover-arrow { .error-menuitem > .ads-v2-menu__menu-item-children { color: var(--ads-v2-color-fg-error) !important; } -.error-menuitem:hover { + +.error-menuitem:hover:not([data-disabled]), +.error-menuitem:focus-visible { background-color: var(--ads-v2-color-red-50) !important; } -.error-menuitem:active { +.error-menuitem:active:not([data-disabled]) { background-color: var(--ads-v2-color-red-100) !important; } .menuitem-nohover:hover { diff --git a/app/client/src/pages/Applications/ForkApplicationModal.tsx b/app/client/src/pages/Applications/ForkApplicationModal.tsx index 403e3e3a56..47e8d1a42b 100644 --- a/app/client/src/pages/Applications/ForkApplicationModal.tsx +++ b/app/client/src/pages/Applications/ForkApplicationModal.tsx @@ -144,6 +144,7 @@ function ForkApplicationModal(props: ForkApplicationModalProps) { <> - + {/* this span exists to make the disabled button visible to the tooltip */} + + + ); diff --git a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx index 36ee398c84..532c3ee254 100644 --- a/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx +++ b/app/client/src/pages/Editor/JSEditor/JSObjectNameEditor.tsx @@ -105,6 +105,7 @@ export function JSObjectNameEditor(props: JSObjectNameEditorProps) {
{currentPlugin && ( diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx index b90ca9c4aa..02370d901f 100644 --- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx +++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx @@ -765,16 +765,20 @@ const PropertyControl = memo((props: Props) => { content={JS_TOGGLE_DISABLED_MESSAGE} isDisabled={!isToggleDisabled} > - toggleDynamicProperty(propertyName, isDynamic)} - size="sm" - /> + + + toggleDynamicProperty(propertyName, isDynamic) + } + size="sm" + /> + )} {isPropertyDeviatedFromTheme && ( diff --git a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx index fa6114f91a..e438fe7f3a 100644 --- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx +++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx @@ -169,7 +169,6 @@ export const TabbedViewContainer = styled.div` `; const SettingsWrapper = styled.div` - /* padding: 16px 30px; */ ${thinScrollbar}; height: 100%; `; @@ -177,7 +176,7 @@ const SettingsWrapper = styled.div` const ResultsCount = styled.div` position: absolute; right: ${(props) => props.theme.spaces[17] + 1}px; - top: ${(props) => props.theme.spaces[2] + 1}px; + top: 9px; color: var(--ads-v2-color-fg); `; @@ -195,7 +194,7 @@ const SecondaryWrapper = styled.div` const HelpSection = styled.div``; const ResponseContentWrapper = styled.div<{ isError: boolean }>` - overflow-y: auto; + overflow-y: clip; display: grid; height: ${(props) => (props.isError ? "" : "100%")}; @@ -320,7 +319,8 @@ export const SegmentedControlContainer = styled.div` display: flex; flex-direction: column; gap: var(--ads-v2-spaces-4); - overflow: scroll; + overflow-y: clip; + overflow-x: scroll; `; type QueryFormProps = { diff --git a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx index b6ec42d02e..994835c712 100644 --- a/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx +++ b/app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx @@ -427,9 +427,6 @@ class DatasourceSaaSEditor extends JSONtoForm { datasource={datasource} description={googleSheetsInfoMessage} pageId={pageId} - style={{ - marginTop: "16px", - }} /> ) : null} {/* This adds error banner for google sheets datasource if the datasource is unauthorised */} @@ -441,9 +438,6 @@ class DatasourceSaaSEditor extends JSONtoForm { datasource={datasource} description={authErrorMessage} pageId={pageId} - style={{ - marginTop: "16px", - }} /> ) : null} {!_.isNil(sections) @@ -459,6 +453,7 @@ class DatasourceSaaSEditor extends JSONtoForm { actionType="authorize" datasource={datasource} description={authErrorMessage} + isInViewMode pageId={pageId} /> ) : null} @@ -479,7 +474,6 @@ class DatasourceSaaSEditor extends JSONtoForm { diff --git a/app/client/src/pages/Settings/FormGroup/Accordion.tsx b/app/client/src/pages/Settings/FormGroup/Accordion.tsx index fe9a6fddec..7da0e623d7 100644 --- a/app/client/src/pages/Settings/FormGroup/Accordion.tsx +++ b/app/client/src/pages/Settings/FormGroup/Accordion.tsx @@ -8,7 +8,7 @@ import { Icon, Text } from "design-system"; const AccordionWrapper = styled.div` margin-top: 40px; - max-width: 30rem; + max-width: 40rem; `; const AccordionHeader = styled(Text)` diff --git a/app/client/src/pages/Settings/FormGroup/Button.tsx b/app/client/src/pages/Settings/FormGroup/Button.tsx index 1c7f3722ef..e5c3dfbcd6 100644 --- a/app/client/src/pages/Settings/FormGroup/Button.tsx +++ b/app/client/src/pages/Settings/FormGroup/Button.tsx @@ -8,7 +8,7 @@ import type { SettingComponentProps } from "./Common"; const ButtonWrapper = styled.div` width: 357px; - margin-top: 3px; + margin-bottom: 8px; `; export const StyledButton = styled(Button)` diff --git a/app/client/src/pages/Settings/FormGroup/Checkbox.tsx b/app/client/src/pages/Settings/FormGroup/Checkbox.tsx index 2ccf0595d1..cf1869b07a 100644 --- a/app/client/src/pages/Settings/FormGroup/Checkbox.tsx +++ b/app/client/src/pages/Settings/FormGroup/Checkbox.tsx @@ -87,7 +87,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) { return ( props.theme.spaces[7]}px; &.t--admin-settings-dropdown { div { diff --git a/app/client/src/pages/Settings/components.tsx b/app/client/src/pages/Settings/components.tsx index a150994e18..d7205ada58 100644 --- a/app/client/src/pages/Settings/components.tsx +++ b/app/client/src/pages/Settings/components.tsx @@ -22,7 +22,7 @@ export const SettingsHeader = styled(Text)` export const SettingsSubHeader = styled(Text)``; export const SettingsFormWrapper = styled.div` - max-width: 30rem; + max-width: 40rem; .openid_tag { .${Classes.TAG_REMOVE} { display: none; diff --git a/app/client/src/pages/Templates/ForkTemplate.tsx b/app/client/src/pages/Templates/ForkTemplate.tsx index 0a0a4f42c1..334542efdc 100644 --- a/app/client/src/pages/Templates/ForkTemplate.tsx +++ b/app/client/src/pages/Templates/ForkTemplate.tsx @@ -57,9 +57,10 @@ function ForkTemplate({ {createMessage(CHOOSE_WHERE_TO_FORK)} - +