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 <parthvigoswami@Parthvis-MacBook-Pro.local> Co-authored-by: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com> Co-authored-by: Preet Sidhu <preetsidhu.bits@gmail.com> Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com> Co-authored-by: Vijetha-Kaja <vijetha@appsmith.com> Co-authored-by: Apple <nandan@thinkify.io> Co-authored-by: Arsalan Yaldram <arsalanyaldram0211@outlook.com> Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: Ankita Kinger <ankita@appsmith.com> Co-authored-by: Aman Agarwal <aman@appsmith.com> 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 <ayushpahwa96@gmail.com> Co-authored-by: Rohit Agarwal <rohit_agarwal@live.in>
This commit is contained in:
Tanvi Bhakta
GitHub
parent
34b7d93a7c
commit
4fca7da51d
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 <ShareModal />;
|
||||
}
|
||||
|
||||
// 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 (
|
||||
<div className="flex flex-col gap-6">
|
||||
{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)}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ function ActionNameEditor(props: ActionNameEditorProps) {
|
|||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{currentPlugin && (
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ const HelpSection = styled.div`
|
|||
`;
|
||||
|
||||
const ResponseBodyContainer = styled.div`
|
||||
overflow-y: auto;
|
||||
overflow-y: clip;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -109,6 +109,9 @@ const Wrapper = styled.div<{ collapsed: boolean }>`
|
|||
text-decoration-line: underline;
|
||||
flex-shrink: 0;
|
||||
width: max-content;
|
||||
> span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
>
|
||||
<StyledDocsSearchModal data-testid="t--global-search-modal">
|
||||
<StyledDocsSearchModal
|
||||
className={`${className}`}
|
||||
data-testid="t--global-search-modal"
|
||||
>
|
||||
<ModalBody className={`${className}`}>{children}</ModalBody>
|
||||
</StyledDocsSearchModal>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -70,15 +70,18 @@ function ToggleComponentToJsonHandler(props: HandlerProps) {
|
|||
return (
|
||||
<Tooltip
|
||||
content={!!configPropertyPathJsonValue && JS_TOGGLE_DISABLED_MESSAGE}
|
||||
isDisabled={!configPropertyPathJsonValue}
|
||||
>
|
||||
<StyledToggleButton
|
||||
data-testid={`t--${props.configProperty}-JS`}
|
||||
icon="js-toggle-v2"
|
||||
isDisabled={!!configPropertyPathJsonValue}
|
||||
isSelected={viewType === ViewTypes.JSON}
|
||||
onClick={handleViewTypeSwitch}
|
||||
size="sm"
|
||||
/>
|
||||
<span>
|
||||
<StyledToggleButton
|
||||
data-testid={`t--${props.configProperty}-JS`}
|
||||
icon="js-toggle-v2"
|
||||
isDisabled={!!configPropertyPathJsonValue}
|
||||
isSelected={viewType === ViewTypes.JSON}
|
||||
onClick={handleViewTypeSwitch}
|
||||
size="sm"
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ function ForkApplicationModal(props: ForkApplicationModalProps) {
|
|||
<>
|
||||
<Select
|
||||
dropdownMatchSelectWidth
|
||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||
onSelect={(_, dropdownOption) =>
|
||||
// ignoring this because rc-select label and value types are not compatible
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
|
|
|
|||
|
|
@ -137,7 +137,12 @@ const CardWrapper = styled.div`
|
|||
|
||||
const StatusbarWrapper = styled.div`
|
||||
width: 252px;
|
||||
height: 199px;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.cs-icon {
|
||||
margin: auto;
|
||||
border-radius: var(--ads-v2-border-radius-circle);
|
||||
|
|
@ -255,7 +260,10 @@ function ImportApplicationModal(props: ImportApplicationModalProps) {
|
|||
<Modal onOpenChange={handleModalClose} open={isModalOpen}>
|
||||
<ModalContent
|
||||
className={"t--import-application-modal"}
|
||||
style={{ width: "fit-content" }}
|
||||
style={{
|
||||
width: importingApplication ? "40vw" : "fit-content",
|
||||
minWidth: "30vw",
|
||||
}}
|
||||
>
|
||||
<ModalHeader>
|
||||
{createMessage(IMPORT_APPLICATION_MODAL_TITLE)}
|
||||
|
|
|
|||
|
|
@ -307,7 +307,7 @@ function PaginationTypeBasedWrapper({
|
|||
name={separateKeyPath}
|
||||
onChange={onSeparateKeyChange}
|
||||
>
|
||||
<Text> {separateKeyLabel} </Text>
|
||||
{separateKeyLabel}
|
||||
</Checkbox>
|
||||
</CheckboxFieldWrapper>
|
||||
)}
|
||||
|
|
@ -379,11 +379,11 @@ function Pagination(props: PaginationProps) {
|
|||
value: PaginationType.NONE,
|
||||
},
|
||||
{
|
||||
label: "Paginate via Limit and Offset",
|
||||
label: "Paginate via limit and offset",
|
||||
value: PaginationType.PAGE_NO,
|
||||
},
|
||||
{
|
||||
label: "Paginate via Cursor based",
|
||||
label: "Paginate via cursor based",
|
||||
value: PaginationType.CURSOR,
|
||||
},
|
||||
]}
|
||||
|
|
@ -425,11 +425,11 @@ function Pagination(props: PaginationProps) {
|
|||
label: props.limitBased?.limit?.name,
|
||||
value: props.limitBased?.limit?.name,
|
||||
}}
|
||||
valueLabel="Limit Value"
|
||||
valueLabel="Limit value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${LIMITBASED_PREFIX}.${PaginationSubComponent.Limit}.value`}
|
||||
valuePlaceholder="{{Table1.pageSize}}"
|
||||
valueTooltip="Override the value of the limit variable selected i.e. the no of rows returned"
|
||||
variableLabel="Limit Variable"
|
||||
variableLabel="Limit variable"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the limit variable from the query"
|
||||
/>
|
||||
|
|
@ -461,11 +461,11 @@ function Pagination(props: PaginationProps) {
|
|||
label: props.limitBased?.offset?.name,
|
||||
value: props.limitBased?.offset?.name,
|
||||
}}
|
||||
valueLabel="Offset Value"
|
||||
valueLabel="Offset value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${LIMITBASED_PREFIX}.${PaginationSubComponent.Offset}.value`}
|
||||
valuePlaceholder="{{Table1.pageNo * Table1.pageSize}}"
|
||||
valueTooltip="Override the value of the offset variable selected ie the no of rows omitted from the beginning"
|
||||
variableLabel="Offset Variable"
|
||||
variableLabel="Offset variable"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the offset variable from the query"
|
||||
/>
|
||||
|
|
@ -487,9 +487,9 @@ function Pagination(props: PaginationProps) {
|
|||
</Text>
|
||||
<PaginationSection>
|
||||
<SubHeading kind="body-m" renderAs={"p"}>
|
||||
Configure Previous Page
|
||||
Configure previous page
|
||||
</SubHeading>
|
||||
{/* Previous Limit Value */}
|
||||
{/* Previous Limit value */}
|
||||
<PaginationTypeBasedWrapper
|
||||
actionName={props.actionName}
|
||||
className="t--apiFormPaginationPrevLimit"
|
||||
|
|
@ -518,11 +518,11 @@ function Pagination(props: PaginationProps) {
|
|||
label: paginationPrev?.limit?.name,
|
||||
value: paginationPrev?.limit?.name,
|
||||
}}
|
||||
valueLabel="Limit Variable Value"
|
||||
valueLabel="Limit variable value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_PREVIOUS_PREFIX}.${PaginationSubComponent.Limit}.value`}
|
||||
valuePlaceholder="{{Table1.pageSize}}"
|
||||
valueTooltip="Override the value for the previous no of rows to be fetched"
|
||||
variableLabel="Limit Variable Name"
|
||||
variableLabel="Limit variable name"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the variable from the query that holds the last/previous limit value"
|
||||
/>
|
||||
|
|
@ -554,11 +554,11 @@ function Pagination(props: PaginationProps) {
|
|||
label: paginationPrev?.cursor?.name,
|
||||
value: paginationPrev?.cursor?.name,
|
||||
}}
|
||||
valueLabel="Start Cursor Value"
|
||||
valueLabel="Start cursor value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_PREVIOUS_PREFIX}.${PaginationSubComponent.Cursor}.value`}
|
||||
valuePlaceholder="{{Api1.data.previousCursor}}"
|
||||
valueTooltip="Binding the widget action to the previous page activity"
|
||||
variableLabel="Start Cursor Variable"
|
||||
variableLabel="Start cursor variable"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the variable which holds the before cursor"
|
||||
/>
|
||||
|
|
@ -567,7 +567,7 @@ function Pagination(props: PaginationProps) {
|
|||
<SubHeading kind="body-m" renderAs={"p"}>
|
||||
Configure Next Page
|
||||
</SubHeading>
|
||||
{/* Next Limit Value */}
|
||||
{/* Next Limit value */}
|
||||
<PaginationTypeBasedWrapper
|
||||
actionName={props.actionName}
|
||||
className="t--apiFormPaginationNextLimit"
|
||||
|
|
@ -606,11 +606,11 @@ function Pagination(props: PaginationProps) {
|
|||
separateKeyLabel="Enable separate value for first limit variable"
|
||||
separateKeyPath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Limit}.isSeparate`}
|
||||
separateValueFlag={!!paginationNext?.limit?.isSeparate}
|
||||
valueLabel="Limit Variable Value"
|
||||
valueLabel="Limit variable value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Limit}.value`}
|
||||
valuePlaceholder="{{Table1.pageSize}}"
|
||||
valueTooltip="Override the value for the next no of rows to be fetched"
|
||||
variableLabel="Limit Variable Name"
|
||||
variableLabel="Limit variable name"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the variable from the query that holds the first/next limit value"
|
||||
/>
|
||||
|
|
@ -642,11 +642,11 @@ function Pagination(props: PaginationProps) {
|
|||
label: paginationNext?.cursor?.name,
|
||||
value: paginationNext?.cursor?.name,
|
||||
}}
|
||||
valueLabel="End Cursor Value"
|
||||
valueLabel="End cursor value"
|
||||
valuePath={`${PAGINATION_PREFIX}.${CURSORBASED_PREFIX}.${CURSOR_NEXT_PREFIX}.${PaginationSubComponent.Cursor}.value`}
|
||||
valuePlaceholder="{{Api1.data.nextCursor}}"
|
||||
valueTooltip="Binding the widget action to the next page activity"
|
||||
variableLabel="End Cursor Variable"
|
||||
variableLabel="End cursor variable"
|
||||
variableOptions={variableOptions}
|
||||
variableTooltip="Select the variable which holds the after cursor"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import "codemirror-graphql/mode";
|
|||
import QueryWrapper from "./QueryWrapperWithCSS";
|
||||
import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
|
||||
import {
|
||||
CodeEditorBorder,
|
||||
EditorModes,
|
||||
EditorSize,
|
||||
TabBehaviour,
|
||||
|
|
@ -56,6 +57,8 @@ function QueryEditor(props: QueryProps) {
|
|||
</Text>
|
||||
</QueryHeader>
|
||||
<Field
|
||||
border={CodeEditorBorder.NONE}
|
||||
borderLess
|
||||
component={LazyCodeEditor}
|
||||
evaluatedPopUpLabel="Query"
|
||||
{...props}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import {
|
|||
TabBehaviour,
|
||||
} from "components/editorComponents/CodeEditor/EditorConfig";
|
||||
import styled from "styled-components";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { Text, TextType } from "design-system-old";
|
||||
import DynamicTextField from "components/editorComponents/form/fields/DynamicTextField";
|
||||
import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
|
||||
|
|
@ -55,12 +54,13 @@ function VariableEditor(props: VariableProps) {
|
|||
return (
|
||||
<VariableWrapper className="t--graphql-variable-editor">
|
||||
<VariableHeader>
|
||||
<Text color={Colors.GRAY_700} type={TextType.H6}>
|
||||
<Text color={"var(--ads-v2-color-fg)"} type={TextType.H6}>
|
||||
Query variables
|
||||
</Text>
|
||||
</VariableHeader>
|
||||
<DynamicTextField
|
||||
border={CodeEditorBorder.ALL_SIDE}
|
||||
border={CodeEditorBorder.NONE}
|
||||
borderLess
|
||||
dataTreePath={`${props.actionName}.config.pluginSpecifiedTemplates[1].value`}
|
||||
evaluatedPopUpLabel={"Query variables"}
|
||||
expected={EXPECTED_VARIABLE}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
import React, { useState } from "react";
|
||||
import { Icon, IconSize } from "design-system-old";
|
||||
import FormTitle from "./FormTitle";
|
||||
import NewActionButton from "./NewActionButton";
|
||||
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
|
||||
import { Position } from "@blueprintjs/core";
|
||||
import { Colors } from "constants/Colors";
|
||||
import type { Datasource } from "entities/Datasource";
|
||||
import {
|
||||
CONFIRM_CONTEXT_DELETING,
|
||||
CONFIRM_CONTEXT_DELETE,
|
||||
CONTEXT_DELETE,
|
||||
} from "ce/constants/messages";
|
||||
import { createMessage } from "design-system-old/build/constants/messages";
|
||||
createMessage,
|
||||
} from "@appsmith/constants/messages";
|
||||
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { deleteDatasource } from "actions/datasourceActions";
|
||||
import { debounce } from "lodash";
|
||||
import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
|
||||
import { MenuComponent, RedMenuItem } from "components/utils/formComponents";
|
||||
import { MenuWrapper, StyledMenu } from "components/utils/formComponents";
|
||||
import styled from "styled-components";
|
||||
import { Button } from "design-system";
|
||||
import { Button, MenuContent, MenuItem, MenuTrigger } from "design-system";
|
||||
import { EDIT } from "ce/constants/messages";
|
||||
import { DatasourceEditEntryPoints } from "constants/Datasource";
|
||||
|
||||
export const ActionWrapper = styled.div`
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const FormTitleContainer = styled.div`
|
||||
|
|
@ -45,16 +43,6 @@ export const Header = styled.div`
|
|||
margin: 0 var(--ads-v2-spaces-7);
|
||||
`;
|
||||
|
||||
export const EditDatasourceButton = styled(Button)`
|
||||
padding: 10px 20px;
|
||||
&&&& {
|
||||
height: 36px;
|
||||
max-width: 160px;
|
||||
border: 1px solid ${Colors.HIT_GRAY};
|
||||
width: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export const PluginImageWrapper = styled.div`
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
|
|
@ -123,24 +111,27 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
|
|||
|
||||
const renderMenuOptions = () => {
|
||||
return [
|
||||
<RedMenuItem
|
||||
className="t--datasource-option-delete"
|
||||
icon="delete"
|
||||
isLoading={isDeleting}
|
||||
<MenuItem
|
||||
className="t--datasource-option-delete error-menuitem"
|
||||
disabled={isDeleting}
|
||||
key={"delete-datasource-button"}
|
||||
onSelect={() => {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
onSelect={(e: Event) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!isDeleting) {
|
||||
confirmDelete ? deleteAction() : setConfirmDelete(true);
|
||||
}
|
||||
}}
|
||||
text={
|
||||
isDeleting
|
||||
? createMessage(CONFIRM_CONTEXT_DELETING)
|
||||
: confirmDelete
|
||||
? createMessage(CONFIRM_CONTEXT_DELETE)
|
||||
: createMessage(CONTEXT_DELETE)
|
||||
}
|
||||
/>,
|
||||
startIcon="delete-bin-line"
|
||||
>
|
||||
{isDeleting
|
||||
? createMessage(CONFIRM_CONTEXT_DELETING)
|
||||
: confirmDelete
|
||||
? createMessage(CONFIRM_CONTEXT_DELETE)
|
||||
: createMessage(CONTEXT_DELETE)}
|
||||
</MenuItem>,
|
||||
];
|
||||
};
|
||||
|
||||
|
|
@ -156,22 +147,29 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
|
|||
{viewMode && (
|
||||
<ActionWrapper>
|
||||
{canDeleteDatasource && (
|
||||
<MenuComponent
|
||||
menuItemWrapperWidth="160px"
|
||||
onClose={onCloseMenu}
|
||||
position={Position.LEFT}
|
||||
target={
|
||||
<Icon
|
||||
fillColor={Colors.GRAY2}
|
||||
name="context-menu"
|
||||
size={IconSize.XXXL}
|
||||
/>
|
||||
}
|
||||
<MenuWrapper
|
||||
className="t--datasource-menu-option"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{renderMenuOptions()}
|
||||
</MenuComponent>
|
||||
<StyledMenu onOpenChange={onCloseMenu}>
|
||||
<MenuTrigger>
|
||||
<Button
|
||||
data-testid="t--context-menu-trigger"
|
||||
isIconButton
|
||||
kind="tertiary"
|
||||
size="md"
|
||||
startIcon="context-menu"
|
||||
/>
|
||||
</MenuTrigger>
|
||||
<MenuContent style={{ zIndex: 100 }} width="200px">
|
||||
{renderMenuOptions()}
|
||||
</MenuContent>
|
||||
</StyledMenu>
|
||||
</MenuWrapper>
|
||||
)}
|
||||
<EditDatasourceButton
|
||||
<Button
|
||||
className="t--edit-datasource"
|
||||
kind="secondary"
|
||||
onClick={() => {
|
||||
|
|
@ -182,9 +180,10 @@ export const DSFormHeader = (props: DSFormHeaderProps) => {
|
|||
entryPoint: DatasourceEditEntryPoints.DATASOURCE_FORM_EDIT,
|
||||
});
|
||||
}}
|
||||
size="md"
|
||||
>
|
||||
{createMessage(EDIT)}
|
||||
</EditDatasourceButton>
|
||||
</Button>
|
||||
<NewActionButton
|
||||
datasource={datasource as Datasource}
|
||||
disabled={!canCreateDatasourceActions || !isPluginAuthorized}
|
||||
|
|
|
|||
|
|
@ -542,7 +542,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
|
|||
datasource,
|
||||
datasourceButtonConfiguration,
|
||||
datasourceId,
|
||||
deleteTempDSFromDraft,
|
||||
formData,
|
||||
history,
|
||||
isDeleting,
|
||||
|
|
@ -628,7 +627,6 @@ class DatasourceEditorRouter extends React.Component<Props, State> {
|
|||
<DatasourceAuth
|
||||
datasource={datasource as Datasource}
|
||||
datasourceButtonConfiguration={datasourceButtonConfiguration}
|
||||
deleteTempDSFromDraft={deleteTempDSFromDraft}
|
||||
formData={formData}
|
||||
getSanitizedFormData={memoize(this.getSanitizedData)}
|
||||
isFormDirty={this.props.isFormDirty}
|
||||
|
|
|
|||
|
|
@ -150,9 +150,11 @@ const AppsmithLink = styled((props) => {
|
|||
return <Link {...props} />;
|
||||
})`
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
img {
|
||||
min-width: 24px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -352,7 +354,7 @@ export function EditorHeader(props: EditorHeaderProps) {
|
|||
{pinned && (
|
||||
<Icon
|
||||
className="absolute transition-opacity opacity-0 group-hover:opacity-100"
|
||||
name="double-arrow-left"
|
||||
name="menu-fold"
|
||||
onClick={onPin}
|
||||
size="md"
|
||||
/>
|
||||
|
|
@ -360,7 +362,7 @@ export function EditorHeader(props: EditorHeaderProps) {
|
|||
{!pinned && (
|
||||
<Icon
|
||||
className="absolute transition-opacity opacity-0 group-hover:opacity-100"
|
||||
name="double-arrow-right"
|
||||
name="menu-unfold"
|
||||
onClick={onPin}
|
||||
size="md"
|
||||
/>
|
||||
|
|
@ -423,7 +425,7 @@ export function EditorHeader(props: EditorHeaderProps) {
|
|||
>
|
||||
<HelpBar />
|
||||
</HeaderSection>
|
||||
<HeaderSection className="gap-x-2">
|
||||
<HeaderSection className="gap-x-1">
|
||||
<Boxed
|
||||
alternative={<EndTour />}
|
||||
step={GUIDED_TOUR_STEPS.BUTTON_ONSUCCESS_BINDING}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ const EntityInfoContainer = styled.div`
|
|||
max-height: ${BindingContainerMaxHeight}px;
|
||||
overflow-y: hidden;
|
||||
border-radius: var(--ads-v2-border-radius);
|
||||
border: 1px solid var(--ads-v2-color-border-muted);
|
||||
box-shadow: var(--ads-v2-shadow-popovers);
|
||||
`;
|
||||
|
||||
const selectEntityInfo = (state: AppState) => state.ui.explorer.entityInfo;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export const datasourceIcon = (
|
|||
/>
|
||||
);
|
||||
|
||||
export const datasourceTableIcon = <Icon name="layout-left-2-line" size="md" />;
|
||||
export const datasourceTableIcon = <Icon name="layout-5-line" size="md" />;
|
||||
|
||||
export const primaryKeyIcon = <Icon name="key-2-line" size="md" />;
|
||||
|
||||
|
|
@ -294,7 +294,7 @@ export function JsFileIconV2(
|
|||
noBorder={noBorder}
|
||||
width={width + "px"}
|
||||
>
|
||||
<EntityIcon.textIcon fontSize={height * 3.05}>JS</EntityIcon.textIcon>
|
||||
<Icon name="js-yellow" size="md" />
|
||||
</EntityIcon>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export const ExplorerJSCollectionEntity = memo(
|
|||
className="t--jsaction"
|
||||
contextMenu={contextMenu}
|
||||
entityId={jsAction.id}
|
||||
icon={JsFileIconV2()}
|
||||
icon={JsFileIconV2(16, 16)}
|
||||
key={jsAction.id}
|
||||
name={jsAction.name}
|
||||
searchKeyword={props.searchKeyword}
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ const OptionWrapper = styled.div`
|
|||
`;
|
||||
// Constants
|
||||
|
||||
const datasourceIcon = "layout-left-2-line";
|
||||
const datasourceIcon = "layout-5-line";
|
||||
const columnIcon = "layout-column-line";
|
||||
|
||||
const GENERATE_PAGE_MODE = {
|
||||
|
|
|
|||
|
|
@ -13,13 +13,7 @@ import type { AppState } from "@appsmith/reducers";
|
|||
import history from "utils/history";
|
||||
import RenderDatasourceInformation from "pages/Editor/DataSourceEditor/DatasourceSection";
|
||||
import { getQueryParams } from "utils/URLUtils";
|
||||
import {
|
||||
Button,
|
||||
Menu,
|
||||
MenuContent,
|
||||
MenuItem,
|
||||
MenuTrigger,
|
||||
} from "design-system";
|
||||
import { Button, MenuContent, MenuItem, MenuTrigger } from "design-system";
|
||||
import { deleteDatasource } from "actions/datasourceActions";
|
||||
import { getGenerateCRUDEnabledPluginMap } from "selectors/entitiesSelector";
|
||||
import type { GenerateCRUDEnabledPluginMap, Plugin } from "api/PluginApi";
|
||||
|
|
@ -49,7 +43,7 @@ import {
|
|||
hasManageDatasourcePermission,
|
||||
} from "@appsmith/utils/permissionHelpers";
|
||||
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
|
||||
import { MenuWrapper } from "components/utils/formComponents";
|
||||
import { MenuWrapper, StyledMenu } from "components/utils/formComponents";
|
||||
import { DatasourceEditEntryPoints } from "constants/Datasource";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
|
|
@ -73,10 +67,6 @@ const DatasourceCardMainBody = styled.div`
|
|||
width: 100%;
|
||||
`;
|
||||
|
||||
const StyledMenu = styled(Menu)`
|
||||
flex: 0;
|
||||
`;
|
||||
|
||||
const DatasourceImage = styled.img`
|
||||
height: 34px;
|
||||
width: auto;
|
||||
|
|
|
|||
|
|
@ -14,12 +14,12 @@ import type { EventLocation } from "utils/AnalyticsUtil";
|
|||
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||||
import { CURL } from "constants/AppsmithActionConstants/ActionConstants";
|
||||
import { PluginPackageName, PluginType } from "entities/Action";
|
||||
import { Spinner } from "@blueprintjs/core";
|
||||
import { getQueryParams } from "utils/URLUtils";
|
||||
import { getGenerateCRUDEnabledPluginMap } from "selectors/entitiesSelector";
|
||||
import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil";
|
||||
import { curlImportPageURL } from "RouteBuilder";
|
||||
import { getAssetUrl } from "@appsmith/utils/airgapHelpers";
|
||||
import { Spinner } from "design-system";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -83,9 +83,16 @@ export function JSFunctionRun({
|
|||
{options.map((option) => (
|
||||
<Option key={option.value}>
|
||||
<OptionWrapper>
|
||||
<OptionLabelWrapper>
|
||||
<OptionLabel renderAs="p">{option.label}</OptionLabel>
|
||||
</OptionLabelWrapper>
|
||||
<Tooltip
|
||||
content={option.label}
|
||||
// Here, 18 is the maximum charecter length because the width of this menu does not change
|
||||
isDisabled={(option.label?.length || 0) < 18}
|
||||
placement="right"
|
||||
>
|
||||
<OptionLabelWrapper>
|
||||
<OptionLabel renderAs="p">{option.label}</OptionLabel>
|
||||
</OptionLabelWrapper>
|
||||
</Tooltip>
|
||||
{option.hasCustomBadge && <Tag isClosable={false}>{"Async"}</Tag>}
|
||||
</OptionWrapper>
|
||||
</Option>
|
||||
|
|
@ -93,18 +100,21 @@ export function JSFunctionRun({
|
|||
</Select>
|
||||
<Tooltip
|
||||
content={createMessage(NO_JS_FUNCTION_TO_RUN, jsCollection.name)}
|
||||
isDisabled={!showTooltip}
|
||||
placement="topRight"
|
||||
visible={showTooltip}
|
||||
>
|
||||
<Button
|
||||
className={testLocators.runJSAction}
|
||||
isDisabled={disabled}
|
||||
isLoading={isLoading}
|
||||
onClick={onButtonClick}
|
||||
size="md"
|
||||
>
|
||||
{RUN_BUTTON_DEFAULTS.CTA_TEXT}
|
||||
</Button>
|
||||
{/* this span exists to make the disabled button visible to the tooltip */}
|
||||
<span>
|
||||
<Button
|
||||
className={testLocators.runJSAction}
|
||||
isDisabled={disabled}
|
||||
isLoading={isLoading}
|
||||
onClick={onButtonClick}
|
||||
size="md"
|
||||
>
|
||||
{RUN_BUTTON_DEFAULTS.CTA_TEXT}
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</DropdownWithCTAWrapper>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ export function JSObjectNameEditor(props: JSObjectNameEditorProps) {
|
|||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{currentPlugin && (
|
||||
|
|
|
|||
|
|
@ -765,16 +765,20 @@ const PropertyControl = memo((props: Props) => {
|
|||
content={JS_TOGGLE_DISABLED_MESSAGE}
|
||||
isDisabled={!isToggleDisabled}
|
||||
>
|
||||
<ToggleButton
|
||||
className={classNames("t--js-toggle", {
|
||||
"is-active": isDynamic,
|
||||
})}
|
||||
icon="js-toggle-v2"
|
||||
isDisabled={isToggleDisabled}
|
||||
isSelected={isDynamic}
|
||||
onClick={() => toggleDynamicProperty(propertyName, isDynamic)}
|
||||
size="sm"
|
||||
/>
|
||||
<span>
|
||||
<ToggleButton
|
||||
className={classNames("t--js-toggle", {
|
||||
"is-active": isDynamic,
|
||||
})}
|
||||
icon="js-toggle-v2"
|
||||
isDisabled={isToggleDisabled}
|
||||
isSelected={isDynamic}
|
||||
onClick={() =>
|
||||
toggleDynamicProperty(propertyName, isDynamic)
|
||||
}
|
||||
size="sm"
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
{isPropertyDeviatedFromTheme && (
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -427,9 +427,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
|
|||
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<Props, State> {
|
|||
datasource={datasource}
|
||||
description={authErrorMessage}
|
||||
pageId={pageId}
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{!_.isNil(sections)
|
||||
|
|
@ -459,6 +453,7 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
|
|||
actionType="authorize"
|
||||
datasource={datasource}
|
||||
description={authErrorMessage}
|
||||
isInViewMode
|
||||
pageId={pageId}
|
||||
/>
|
||||
) : null}
|
||||
|
|
@ -479,7 +474,6 @@ class DatasourceSaaSEditor extends JSONtoForm<Props, State> {
|
|||
<DatasourceAuth
|
||||
datasource={datasource}
|
||||
datasourceButtonConfiguration={datasourceButtonConfiguration}
|
||||
deleteTempDSFromDraft={deleteTempDSFromDraft}
|
||||
formData={formData}
|
||||
getSanitizedFormData={_.memoize(this.getSanitizedData)}
|
||||
isInsideReconnectModal={isInsideReconnectModal}
|
||||
|
|
|
|||
|
|
@ -331,6 +331,7 @@ function Deploy() {
|
|||
placeholder={"Your commit message here"}
|
||||
ref={commitInputRef}
|
||||
renderAs="textarea"
|
||||
size="md"
|
||||
type="text"
|
||||
value={commitMessageDisplay}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
|
|
|
|||
|
|
@ -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)`
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {
|
|||
return (
|
||||
<StyledFieldCheckboxGroup>
|
||||
<Text
|
||||
className="admin-settings-form-group-label pt-4 pb-2"
|
||||
className="admin-settings-form-group-label pt-2 pb-2"
|
||||
color="var(--ads-v2-color-fg)"
|
||||
data-testid="admin-settings-form-group-label"
|
||||
kind="heading-xs"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ type FieldHelperProps = {
|
|||
};
|
||||
|
||||
export const StyledFormGroup = styled.div`
|
||||
width: 30rem;
|
||||
width: 40rem;
|
||||
margin-bottom: ${(props) => props.theme.spaces[7]}px;
|
||||
&.t--admin-settings-dropdown {
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -57,9 +57,10 @@ function ForkTemplate({
|
|||
<Modal onOpenChange={closeModal} open={showForkModal}>
|
||||
<ModalContent style={{ width: "640px" }}>
|
||||
<ModalHeader>{createMessage(CHOOSE_WHERE_TO_FORK)}</ModalHeader>
|
||||
<ModalBody>
|
||||
<ModalBody style={{ overflow: "unset", paddingBottom: "4px" }}>
|
||||
<Select
|
||||
dropdownMatchSelectWidth
|
||||
getPopupContainer={(triggerNode) => triggerNode.parentNode}
|
||||
// TODO: (Albin) Fix this
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
//@ts-ignore
|
||||
|
|
|
|||
|
|
@ -19,9 +19,11 @@ import {
|
|||
createMessage,
|
||||
} from "@appsmith/constants/messages";
|
||||
|
||||
const StyledAuthMessage = styled.div`
|
||||
const StyledAuthMessage = styled.div<{ isInViewMode: boolean }>`
|
||||
width: fit-content;
|
||||
margin-bottom: var(--ads-v2-spaces-4);
|
||||
${(props) =>
|
||||
!props.isInViewMode &&
|
||||
`margin-top: var(--ads-v2-spaces-5);margin-bottom: var(--ads-v2-spaces-4);`}
|
||||
`;
|
||||
|
||||
type AuthMessageProps = {
|
||||
|
|
@ -32,6 +34,7 @@ type AuthMessageProps = {
|
|||
pageId?: string;
|
||||
style?: any;
|
||||
calloutType?: CalloutKind;
|
||||
isInViewMode?: boolean;
|
||||
};
|
||||
|
||||
export default function AuthMessage(props: AuthMessageProps) {
|
||||
|
|
@ -42,6 +45,7 @@ export default function AuthMessage(props: AuthMessageProps) {
|
|||
description,
|
||||
pageId,
|
||||
style = {},
|
||||
isInViewMode = false,
|
||||
} = props;
|
||||
const dispatch = useDispatch();
|
||||
const pluginType = useSelector((state: AppState) =>
|
||||
|
|
@ -65,7 +69,7 @@ export default function AuthMessage(props: AuthMessageProps) {
|
|||
};
|
||||
|
||||
return (
|
||||
<StyledAuthMessage style={style}>
|
||||
<StyledAuthMessage isInViewMode={isInViewMode} style={style}>
|
||||
<Callout
|
||||
kind={calloutType}
|
||||
links={
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
} from "actions/datasourceActions";
|
||||
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||||
import { getCurrentApplicationId } from "selectors/editorSelectors";
|
||||
import { useParams, useLocation } from "react-router";
|
||||
import { useParams, useLocation, useHistory } from "react-router";
|
||||
import type { ExplorerURLParams } from "@appsmith/pages/Editor/Explorer/helpers";
|
||||
import type { Datasource } from "entities/Datasource";
|
||||
import { AuthType, AuthenticationStatus } from "entities/Datasource";
|
||||
|
|
@ -30,15 +30,16 @@ import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
|
|||
import { TEMP_DATASOURCE_ID } from "constants/Datasource";
|
||||
|
||||
import { hasManageDatasourcePermission } from "@appsmith/utils/permissionHelpers";
|
||||
import { SHOW_FILE_PICKER_KEY } from "constants/routes";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { INTEGRATION_TABS, SHOW_FILE_PICKER_KEY } from "constants/routes";
|
||||
import { integrationEditorURL } from "RouteBuilder";
|
||||
import { getQueryParams } from "utils/URLUtils";
|
||||
import type { AppsmithLocationState } from "utils/history";
|
||||
import type { PluginType } from "entities/Action";
|
||||
|
||||
interface Props {
|
||||
datasource: Datasource;
|
||||
formData: Datasource | ApiDatasourceForm;
|
||||
getSanitizedFormData: () => Datasource;
|
||||
deleteTempDSFromDraft: () => void;
|
||||
isInvalid: boolean;
|
||||
pageId?: string;
|
||||
viewMode?: boolean;
|
||||
|
|
@ -97,10 +98,11 @@ const SaveButtonContainer = styled.div<{
|
|||
justify-content: flex-end;
|
||||
gap: 9px;
|
||||
padding-right: 20px;
|
||||
flex: 1 1 10%;
|
||||
border-top: ${(props) =>
|
||||
props.isInsideReconnectModal ? "none" : `1px solid ${Colors.ALTO}`};
|
||||
props.isInsideReconnectModal ? "none" : "1px solid"};
|
||||
border-color: var(--ads-v2-color-border);
|
||||
align-items: center;
|
||||
height: 68px;
|
||||
`;
|
||||
|
||||
const StyledAuthMessage = styled.div`
|
||||
|
|
@ -118,7 +120,6 @@ function DatasourceAuth({
|
|||
DatasourceButtonTypeEnum.CANCEL,
|
||||
DatasourceButtonTypeEnum.SAVE,
|
||||
],
|
||||
deleteTempDSFromDraft,
|
||||
formData,
|
||||
getSanitizedFormData,
|
||||
isInvalid,
|
||||
|
|
@ -154,6 +155,7 @@ function DatasourceAuth({
|
|||
const dispatch = useDispatch();
|
||||
const location = useLocation();
|
||||
const { pageId: pageIdQuery } = useParams<ExplorerURLParams>();
|
||||
const history = useHistory<AppsmithLocationState>();
|
||||
|
||||
const pageId = (pageIdQuery || pageIdProp) as string;
|
||||
|
||||
|
|
@ -307,8 +309,14 @@ function DatasourceAuth({
|
|||
key={buttonType}
|
||||
kind="tertiary"
|
||||
onClick={() => {
|
||||
if (createMode) deleteTempDSFromDraft();
|
||||
else dispatch(setDatasourceViewMode(true));
|
||||
if (createMode) {
|
||||
const URL = integrationEditorURL({
|
||||
pageId,
|
||||
selectedTab: INTEGRATION_TABS.NEW,
|
||||
params: getQueryParams(),
|
||||
});
|
||||
history.push(URL);
|
||||
} else dispatch(setDatasourceViewMode(true));
|
||||
}}
|
||||
size="md"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const AutoLayoutCanvasResizer = styled.div`
|
|||
width: 2px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: #d9d9d9;
|
||||
background: var(--ads-v2-color-border);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: 2px;
|
||||
|
|
@ -31,11 +31,11 @@ const AutoLayoutCanvasResizer = styled.div`
|
|||
transition: background 300ms ease;
|
||||
.canvas-resizer-icon {
|
||||
border-left: 2px solid;
|
||||
border-color: #d7d7d7;
|
||||
border-color: var(--ads-v2-color-border);
|
||||
transition: border 300ms ease;
|
||||
margin-left: 2px;
|
||||
& > svg {
|
||||
fill: #d7d7d7;
|
||||
fill: var(--ads-v2-color-border);
|
||||
transition: fill 300ms ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9582,8 +9582,8 @@ __metadata:
|
|||
cypress-xpath: ^1.6.0
|
||||
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"
|
||||
diff: ^5.0.0
|
||||
dotenv: ^8.1.0
|
||||
downloadjs: ^1.4.7
|
||||
|
|
@ -13641,9 +13641,9 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"design-system-old@npm:@appsmithorg/design-system-old@1.1.7":
|
||||
version: 1.1.7
|
||||
resolution: "@appsmithorg/design-system-old@npm:1.1.7"
|
||||
"design-system-old@npm:@appsmithorg/design-system-old@1.1.8":
|
||||
version: 1.1.8
|
||||
resolution: "@appsmithorg/design-system-old@npm:1.1.8"
|
||||
dependencies:
|
||||
emoji-mart: 3.0.1
|
||||
peerDependencies:
|
||||
|
|
@ -13663,13 +13663,13 @@ __metadata:
|
|||
remixicon-react: ^1.0.0
|
||||
styled-components: 5.3.6
|
||||
tinycolor2: ^1.4.2
|
||||
checksum: ea573987195099e6834a4d32384bd9527d72aa8fbff73286dc498511af2aacf0e24a9356f2925a873d977cae19deb2df63510c3e83e8a4c7146f0f6f5686c15c
|
||||
checksum: 962a596585337ad08db8141a3ad37bf8e7c0819bdea20bcc4fecc63135c454d67a09261af99d323a0adaec6834128bda1e37f4d18b3607acd95d042fc78319ce
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"design-system@npm:@appsmithorg/design-system@2.1.9":
|
||||
version: 2.1.9
|
||||
resolution: "@appsmithorg/design-system@npm:2.1.9"
|
||||
"design-system@npm:@appsmithorg/design-system@2.1.10":
|
||||
version: 2.1.10
|
||||
resolution: "@appsmithorg/design-system@npm:2.1.10"
|
||||
dependencies:
|
||||
"@radix-ui/react-dialog": ^1.0.2
|
||||
"@radix-ui/react-dropdown-menu": ^2.0.4
|
||||
|
|
@ -13694,7 +13694,7 @@ __metadata:
|
|||
react-dom: ^17.0.2
|
||||
react-router-dom: ^5.0.0
|
||||
styled-components: ^5.3.6
|
||||
checksum: 8d7b92d70ea3c36ccb0beea90e5dbed8cbd9e5d66d501a3e81899d060853cfb8864ea9208c8dfd1d764528b2d0ab20b6e4101ccd051458c4c0edab236cbef1c9
|
||||
checksum: 3482df69c7e21de7aaa2423fc94a4574cb27aa245ea73da24af1c7237e5b98e89dc8db19336fb3a192c84f936c9e9ce7aba40cc415e88e49832f7a3641e21489
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user