fix: query tab scrollbar padding gap fix (#38317)
## Description Remove scrollbar gap in request config. Fixes [#38135](https://github.com/appsmithorg/appsmith/issues/38135) ## Automation /ok-to-test tags="@tag.IDE" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > 🟣 🟣 🟣 Your tests are running. > Tests running at: <https://github.com/appsmithorg/appsmith/actions/runs/12491071853> > Commit: 85399dbbd44aef19ce3da06a8d6f190eed210de5 > Workflow: `PR Automation test suite` > Tags: `@tag.IDE` > Spec: `` > <hr>Wed, 25 Dec 2024 08:14:00 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a tabbed interface in the `CommonEditorForm` for better content organization. - Enhanced usability of the `PluginActionForm` with scrollable content areas. - **Bug Fixes** - Adjusted tooltip positioning to improve visibility in the `EmbeddedDatasourcePathField`. - **Style** - Added new styled components for tabs and headers to enhance layout and design. - **Chores** - Deprecated the `RequestTabs` component in preparation for its removal. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Alex
GitHub
parent
f078ec0b32
commit
0c1a1d8ee4
|
|
@ -12,7 +12,7 @@ const PluginActionForm = () => {
|
|||
const { plugin } = usePluginActionContext();
|
||||
|
||||
return (
|
||||
<Flex flex="1" overflow="hidden" p="spaces-4" w="100%">
|
||||
<Flex flex="1" overflow="auto" p="spaces-4" w="100%">
|
||||
{plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
|
||||
<APIEditorForm />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
import React from "react";
|
||||
import { Tab, TabsList } from "@appsmith/ads";
|
||||
import { type Action } from "entities/Action";
|
||||
import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
|
||||
import { InfoFields } from "./InfoFields";
|
||||
import { RequestTabs } from "./RequestTabs";
|
||||
import { HintMessages } from "./HintMessages";
|
||||
import { Flex } from "@appsmith/ads";
|
||||
import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
|
||||
import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
|
||||
|
||||
import useGetFormActionValues from "./hooks/useGetFormActionValues";
|
||||
import { DatasourceConfig } from "./components/DatasourceConfig";
|
||||
import { HintMessages } from "./HintMessages";
|
||||
import { InfoFields } from "./InfoFields";
|
||||
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
|
||||
import ApiAuthentication from "./components/ApiAuthentication";
|
||||
import { useSelectedFormTab } from "./hooks/useSelectedFormTab";
|
||||
import { getHeadersCount, getParamsCount } from "./utils";
|
||||
import * as Styled from "./styles";
|
||||
|
||||
interface Props {
|
||||
httpMethodOptions: { value: string }[];
|
||||
|
|
@ -18,7 +26,13 @@ interface Props {
|
|||
}
|
||||
|
||||
const CommonEditorForm = (props: Props) => {
|
||||
const { action } = props;
|
||||
const {
|
||||
action,
|
||||
bodyUIComponent,
|
||||
formName,
|
||||
isChangePermitted,
|
||||
paginationUiComponent,
|
||||
} = props;
|
||||
const hintMessages = action.messages || [];
|
||||
const theme = EditorTheme.LIGHT;
|
||||
const {
|
||||
|
|
@ -29,15 +43,17 @@ const CommonEditorForm = (props: Props) => {
|
|||
datasourceParams,
|
||||
} = useGetFormActionValues();
|
||||
|
||||
const [currentTab, setCurrentTab] = useSelectedFormTab();
|
||||
const headersCount = getHeadersCount(
|
||||
actionHeaders,
|
||||
datasourceHeaders,
|
||||
autoGeneratedHeaders,
|
||||
);
|
||||
const paramsCount = getParamsCount(actionParams, datasourceHeaders);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
data-testid={props.dataTestId}
|
||||
flex="1"
|
||||
flexDirection="column"
|
||||
gap="spaces-3"
|
||||
overflow="hidden"
|
||||
w="100%"
|
||||
>
|
||||
<Styled.Tabs onValueChange={setCurrentTab} value={currentTab}>
|
||||
<Styled.FormHeader>
|
||||
<InfoFields
|
||||
actionName={action.name}
|
||||
changePermitted={props.isChangePermitted}
|
||||
|
|
@ -47,21 +63,69 @@ const CommonEditorForm = (props: Props) => {
|
|||
theme={theme}
|
||||
/>
|
||||
<HintMessages hintMessages={hintMessages} />
|
||||
<RequestTabs
|
||||
actionConfigurationHeaders={actionHeaders}
|
||||
actionConfigurationParams={actionParams}
|
||||
actionName={action.name}
|
||||
<TabsList>
|
||||
{Object.values(API_EDITOR_TABS)
|
||||
.filter((tab) => {
|
||||
return tab !== API_EDITOR_TABS.SETTINGS;
|
||||
})
|
||||
.map((tab) => (
|
||||
<Tab
|
||||
data-testid={`t--api-editor-${tab}`}
|
||||
key={tab}
|
||||
notificationCount={
|
||||
tab == "HEADERS"
|
||||
? headersCount
|
||||
: tab == "PARAMS"
|
||||
? paramsCount
|
||||
: undefined
|
||||
}
|
||||
value={tab}
|
||||
>
|
||||
{createMessage(API_EDITOR_TAB_TITLES[tab])}
|
||||
</Tab>
|
||||
))}
|
||||
</TabsList>
|
||||
</Styled.FormHeader>
|
||||
|
||||
<Styled.TabPanel value={API_EDITOR_TABS.HEADERS}>
|
||||
<DatasourceConfig
|
||||
attributeName="header"
|
||||
autogeneratedHeaders={autoGeneratedHeaders}
|
||||
bodyUIComponent={props.bodyUIComponent}
|
||||
datasourceHeaders={datasourceHeaders}
|
||||
datasourceParams={datasourceParams}
|
||||
formName={props.formName}
|
||||
paginationUiComponent={props.paginationUiComponent}
|
||||
pushFields={props.isChangePermitted}
|
||||
showSettings={false}
|
||||
data={datasourceHeaders}
|
||||
/>
|
||||
<KeyValueFieldArray
|
||||
actionConfig={actionHeaders}
|
||||
dataTreePath={`${action.name}.config.headers`}
|
||||
hideHeader
|
||||
label="Headers"
|
||||
name="actionConfiguration.headers"
|
||||
placeholder="Value"
|
||||
pushFields={isChangePermitted}
|
||||
theme={theme}
|
||||
/>
|
||||
</Flex>
|
||||
</Styled.TabPanel>
|
||||
<Styled.TabPanel value={API_EDITOR_TABS.PARAMS}>
|
||||
<DatasourceConfig attributeName={"param"} data={datasourceParams} />
|
||||
<KeyValueFieldArray
|
||||
actionConfig={actionParams}
|
||||
dataTreePath={`${action.name}.config.queryParameters`}
|
||||
hideHeader
|
||||
label="Params"
|
||||
name="actionConfiguration.queryParameters"
|
||||
pushFields={isChangePermitted}
|
||||
theme={theme}
|
||||
/>
|
||||
</Styled.TabPanel>
|
||||
<Styled.TabPanel className="h-full" value={API_EDITOR_TABS.BODY}>
|
||||
{bodyUIComponent}
|
||||
</Styled.TabPanel>
|
||||
<Styled.TabPanel value={API_EDITOR_TABS.PAGINATION}>
|
||||
{paginationUiComponent}
|
||||
</Styled.TabPanel>
|
||||
<Styled.TabPanel value={API_EDITOR_TABS.AUTHENTICATION}>
|
||||
<ApiAuthentication formName={formName} />
|
||||
</Styled.TabPanel>
|
||||
</Styled.Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ const StyledTabPanel = styled(TabPanel)`
|
|||
overflow: auto;
|
||||
`;
|
||||
|
||||
/**
|
||||
* @deprecated This component will be deleted along with APIEditor/CommonEditorForm.
|
||||
*/
|
||||
export function RequestTabs(props: {
|
||||
autogeneratedHeaders: AutoGeneratedHeader[] | undefined;
|
||||
datasourceHeaders: Property[];
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ const StyledTooltip = styled.span<{ width?: number }>`
|
|||
position: absolute;
|
||||
z-index: 100000;
|
||||
max-width: 300px;
|
||||
bottom: 125%;
|
||||
top: 125%;
|
||||
left: calc(-10px + ${(props) => (props.width ? props.width / 2 : 0)}px);
|
||||
margin-left: -60px;
|
||||
|
||||
|
|
@ -165,14 +165,14 @@ const StyledTooltip = styled.span<{ width?: number }>`
|
|||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: var(--ads-v2-color-bg-emphasis-max) transparent transparent
|
||||
border-color: transparent transparent var(--ads-v2-color-bg-emphasis-max)
|
||||
transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import styled from "styled-components";
|
||||
import { Tabs as AdsTabs, TabPanel as AdsTabPanel } from "@appsmith/ads";
|
||||
|
||||
export const RequestMethodSelectContainer = styled.div`
|
||||
width: 100px;
|
||||
|
|
@ -10,3 +11,21 @@ export const RequestMethodSelectContainer = styled.div`
|
|||
export const DatasourcePathFieldContainer = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const FormHeader = styled.div`
|
||||
position: sticky;
|
||||
top: calc(-1 * var(--ads-v2-spaces-4));
|
||||
padding-top: var(--ads-v2-spaces-4);
|
||||
margin-top: calc(-1 * var(--ads-v2-spaces-4));
|
||||
z-index: var(--ads-v2-z-index-21);
|
||||
background-color: var(--ads-color-background);
|
||||
height: 100px;
|
||||
`;
|
||||
|
||||
export const Tabs = styled(AdsTabs)`
|
||||
height: max-content;
|
||||
`;
|
||||
|
||||
export const TabPanel = styled(AdsTabPanel)`
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ const UQIEditorForm = () => {
|
|||
alignItems="center"
|
||||
data-testid="t--uqi-editor-form"
|
||||
flexDirection="column"
|
||||
overflowY="scroll"
|
||||
w="100%"
|
||||
>
|
||||
<FormRender
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user