From 0c1a1d8ee4ed207fc2624069e20748214cf0f01c Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 25 Dec 2024 14:09:07 +0300 Subject: [PATCH] fix: query tab scrollbar padding gap fix (#38317) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Remove scrollbar gap in request config. Fixes [#38135](https://github.com/appsmithorg/appsmith/issues/38135) ## Automation /ok-to-test tags="@tag.IDE" ### :mag: Cypress test results > [!IMPORTANT] > 🟣 🟣 🟣 Your tests are running. > Tests running at: > Commit: 85399dbbd44aef19ce3da06a8d6f190eed210de5 > Workflow: `PR Automation test suite` > Tags: `@tag.IDE` > Spec: `` >
Wed, 25 Dec 2024 08:14:00 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../PluginActionForm/PluginActionForm.tsx | 2 +- .../CommonEditorForm/CommonEditorForm.tsx | 138 +++++++++++++----- .../CommonEditorForm/RequestTabs.tsx | 3 + .../EmbeddedDatasourcePathField.tsx | 6 +- .../components/CommonEditorForm/styles.ts | 19 +++ .../components/UQIEditor/UQIEditorForm.tsx | 1 - 6 files changed, 127 insertions(+), 42 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx index e5be9eb367..f69ad96399 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx @@ -12,7 +12,7 @@ const PluginActionForm = () => { const { plugin } = usePluginActionContext(); return ( - + {plugin.uiComponent === UIComponentTypes.ApiEditorForm && ( )} diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx index 83478f013a..8ed8e1ca34 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/CommonEditorForm.tsx @@ -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,39 +43,89 @@ const CommonEditorForm = (props: Props) => { datasourceParams, } = useGetFormActionValues(); + const [currentTab, setCurrentTab] = useSelectedFormTab(); + const headersCount = getHeadersCount( + actionHeaders, + datasourceHeaders, + autoGeneratedHeaders, + ); + const paramsCount = getParamsCount(actionParams, datasourceHeaders); + return ( - - - - - + + + + + + {Object.values(API_EDITOR_TABS) + .filter((tab) => { + return tab !== API_EDITOR_TABS.SETTINGS; + }) + .map((tab) => ( + + {createMessage(API_EDITOR_TAB_TITLES[tab])} + + ))} + + + + + + + + + + + + + {bodyUIComponent} + + + {paginationUiComponent} + + + + + ); }; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx index 62b22a18b6..3c1018cfc1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/RequestTabs.tsx @@ -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[]; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx index 55511f3b97..89d6ada7e9 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx @@ -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; } diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts index a60145281e..477027266d 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts @@ -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; +`; diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx index 69b7a4d0ed..c8fb86c43a 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx @@ -23,7 +23,6 @@ const UQIEditorForm = () => { alignItems="center" data-testid="t--uqi-editor-form" flexDirection="column" - overflowY="scroll" w="100%" >