From d09966f44a25ee82e7c82da1796fe2abd6600640 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 4 Dec 2024 13:02:30 +0530 Subject: [PATCH 01/13] fixing the switch UI for JS objects function popover & updating query response status bar styles --- .../packages/design-system/ads/src/Switch/Switch.styles.tsx | 1 + .../PluginActionResponse/components/QueryResponseTab/styles.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx b/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx index 96b9bee34147..2b0358ffeee2 100644 --- a/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx +++ b/app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx @@ -31,6 +31,7 @@ export const StyledSwitchLabel = styled(Text)<{ justify-content: space-between; min-width: 9rem; cursor: pointer; + word-break: break-all; ${({ isDisabled }) => isDisabled && diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts index a94fde58c5e1..06e75bc1d9e1 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts @@ -30,7 +30,7 @@ export const StatusBar = styled.div` display: flex; justify-content: space-between; height: ${TAB_BAR_HEIGHT}px; - padding: 8px; + padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--ads-v2-color-border); z-index: var(--ads-v2-z-index-1); `; From ff52c5fa7ec54823493f2b720520dc7c1ab80d42 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 4 Dec 2024 13:04:44 +0530 Subject: [PATCH 02/13] updating the schema tab to datasource tab --- .../PluginActionResponse/PluginActionResponse.tsx | 2 +- .../hooks/usePluginActionResponseTabs.tsx | 4 ++-- .../components/editorComponents/Debugger/DebuggerTabs.tsx | 2 +- .../src/components/editorComponents/Debugger/constants.ts | 2 +- app/client/src/pages/Editor/DataSourceEditor/Debugger.tsx | 2 +- .../src/pages/Editor/QueryEditor/QueryDebuggerTabs.tsx | 6 +++--- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx index 45244f48010c..20c0ac00ff99 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/PluginActionResponse.tsx @@ -60,7 +60,7 @@ function PluginActionResponse() { dispatch( setPluginActionEditorDebuggerState({ open: true, - selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB, + selectedTab: DEBUGGER_TAB_KEYS.DATASOURCE_TAB, }), ); } diff --git a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx index 35a87e5341a1..4e7570a47cac 100644 --- a/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx +++ b/app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx @@ -111,8 +111,8 @@ function usePluginActionResponseTabs() { if (showSchema) { tabs.push({ - key: DEBUGGER_TAB_KEYS.SCHEMA_TAB, - title: "Schema", + key: DEBUGGER_TAB_KEYS.DATASOURCE_TAB, + title: "Datasource", panelComponent: ( Date: Wed, 4 Dec 2024 13:05:51 +0530 Subject: [PATCH 03/13] adding background to query status bar in response pane to avoid text overlap on scroll --- .../PluginActionResponse/components/QueryResponseTab/styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts index 06e75bc1d9e1..81089d4679ba 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts @@ -33,6 +33,7 @@ export const StatusBar = styled.div` padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--ads-v2-color-border); z-index: var(--ads-v2-z-index-1); + background: var(--ads-v2-color-bg); `; export const StatusBarInfo = styled.div` From cb3688fd1258d911833f8eeda1cc517238419f15 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 4 Dec 2024 16:24:39 +0530 Subject: [PATCH 04/13] updating locators --- app/client/cypress/support/Pages/DataSources.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts index 58a3099f2b49..85ad360fb8fa 100644 --- a/app/client/cypress/support/Pages/DataSources.ts +++ b/app/client/cypress/support/Pages/DataSources.ts @@ -206,7 +206,7 @@ export class DataSources { ".t--datasource-name:contains('" + dsName + "')"; _mandatoryMark = "//span[text()='*']"; _deleteDSHostPort = ".t--delete-field"; - _dsTabSchema = "[data-testid='t--tab-SCHEMA_TAB']"; + _dsTabSchema = "[data-testid='t--tab-DATASOURCE_TAB']"; private _pageSelectionMenu = "[data-testid='t--page-selection']"; private _pageSelectMenuItem = ".ads-v2-menu__menu-item"; @@ -1891,7 +1891,9 @@ export class DataSources { cy.intercept("GET", "/api/v1/datasources/*/structure?ignoreCache=*").as( `getDatasourceStructureUpdated_${ds_entity_name}`, ); - cy.get("[data-testid=t--tab-SCHEMA_TAB]").first().click({ force: true }); + cy.get("[data-testid=t--tab-DATASOURCE_TAB]") + .first() + .click({ force: true }); this.RefreshDatasourceSchema(); this.assertHelper .WaitForNetworkCall(`@getDatasourceStructureUpdated_${ds_entity_name}`) From 0baa8afee2ce200928ea3acb45fadbe0634b5dc2 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 6 Dec 2024 11:58:02 +0530 Subject: [PATCH 05/13] removing the edit datasource button for saved APIs next to the URL --- .../CommonEditorForm/components/EmbeddedDatasourcePathField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 87615cbf7f2f..55511f3b9710 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 @@ -593,7 +593,7 @@ class EmbeddedDatasourcePathComponent extends React.Component< )} - {displayValue && ( + {displayValue && shouldSave && ( Date: Fri, 6 Dec 2024 13:00:58 +0530 Subject: [PATCH 06/13] adding the datasource selector and datasource tab for APIs --- .../ads/src/Icon/Icon.provider.tsx | 5 ++ .../icons/ads/datasource-config.svg | 10 ++++ .../ApiDatasourceSelector.tsx | 13 +++++ .../PluginDatasourceSelector.tsx} | 31 ++++++----- .../QueryDatasourceSelector.tsx | 13 +++++ .../Schema/DatasourceSelector/index.tsx | 27 ++++++++++ .../components/Schema/Schema.tsx | 20 +++++-- .../components/Schema/SchemaTables.tsx | 52 +++++++++++++++++-- .../hooks/usePluginActionResponseTabs.tsx | 14 +++++ app/client/src/ce/constants/messages.ts | 1 + 10 files changed, 163 insertions(+), 23 deletions(-) create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-config.svg create mode 100644 app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/ApiDatasourceSelector.tsx rename app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/{DatasourceSelector.tsx => DatasourceSelector/PluginDatasourceSelector.tsx} (86%) create mode 100644 app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/QueryDatasourceSelector.tsx create mode 100644 app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/index.tsx diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx index 5a5ff05eb1e0..bf7406c6ee75 100644 --- a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx +++ b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx @@ -1033,6 +1033,10 @@ const DashboardLineIcon = importSvg( async () => import("../__assets__/icons/ads/dashboard-line.svg"), ); +const DatasourceConfigIcon = importSvg( + async () => import("../__assets__/icons/ads/datasource-config.svg"), +); + // v3 icons const JsSquareV3Icon = importSvg( async () => import("../__assets__/icons/ads/js-square-v3-icon.svg"), @@ -1173,6 +1177,7 @@ const ICON_LOOKUP = { "cut-control": CutIcon, "dashboard-line": DashboardLineIcon, "database-2-line": Database2Line, + "datasource-config": DatasourceConfigIcon, "datasource-v3": DatasourceV3Icon, "datasources-2": Datasources2, "decrease-control": DecreaseIcon, diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-config.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-config.svg new file mode 100644 index 000000000000..76ccdbee17a0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/datasource-config.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/ApiDatasourceSelector.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/ApiDatasourceSelector.tsx new file mode 100644 index 000000000000..35f70ffffae1 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/ApiDatasourceSelector.tsx @@ -0,0 +1,13 @@ +import { API_EDITOR_FORM_NAME } from "ee/constants/forms"; +import { type Action } from "entities/Action"; +import { reduxForm } from "redux-form"; +import { + PluginDatasourceSelector, + type CustomProps, +} from "./PluginDatasourceSelector"; + +export default reduxForm({ + form: API_EDITOR_FORM_NAME, + destroyOnUnmount: false, + enableReinitialize: true, +})(PluginDatasourceSelector); diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/PluginDatasourceSelector.tsx similarity index 86% rename from app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector.tsx rename to app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/PluginDatasourceSelector.tsx index 75e2c0cd81bf..869a4220fe66 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/PluginDatasourceSelector.tsx @@ -20,16 +20,18 @@ import type { AppState } from "ee/reducers"; import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors"; import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks"; import { INTEGRATION_TABS } from "constants/routes"; -import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms"; +import { + API_EDITOR_FORM_NAME, + QUERY_EDITOR_FORM_NAME, +} from "ee/constants/forms"; import MenuField from "components/editorComponents/form/fields/MenuField"; import type { InjectedFormProps } from "redux-form"; -import { reduxForm } from "redux-form"; -import type { Action } from "entities/Action"; -import { CurrentDataSourceLink } from "./CurrentDataSourceLink"; -import { CurrentDataSource } from "./CurrentDataSource"; +import { PluginType, type Action } from "entities/Action"; +import { CurrentDataSourceLink } from "../CurrentDataSourceLink"; +import { CurrentDataSource } from "../CurrentDataSource"; import { useCreateDatasource } from "ee/PluginActionEditor/hooks/useCreateDatasource"; -interface CustomProps { +export interface CustomProps { datasourceId: string; datasourceName: string; } @@ -44,7 +46,10 @@ interface DATASOURCES_OPTIONS_TYPE { onSelect?: (value: string) => void; } -const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => { +export const PluginDatasourceSelector = ({ + datasourceId, + datasourceName, +}: Props) => { const activeActionBaseId = useActiveActionBaseId(); const currentActionConfig = useSelector((state) => activeActionBaseId @@ -118,7 +123,11 @@ const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => { @@ -130,9 +139,3 @@ const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => { ); }; - -export default reduxForm({ - form: QUERY_EDITOR_FORM_NAME, - destroyOnUnmount: false, - enableReinitialize: true, -})(DatasourceSelector); diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/QueryDatasourceSelector.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/QueryDatasourceSelector.tsx new file mode 100644 index 000000000000..ab41909283c0 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/QueryDatasourceSelector.tsx @@ -0,0 +1,13 @@ +import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms"; +import { type Action } from "entities/Action"; +import { reduxForm } from "redux-form"; +import { + PluginDatasourceSelector, + type CustomProps, +} from "./PluginDatasourceSelector"; + +export default reduxForm({ + form: QUERY_EDITOR_FORM_NAME, + destroyOnUnmount: false, + enableReinitialize: true, +})(PluginDatasourceSelector); diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/index.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/index.tsx new file mode 100644 index 000000000000..68f7fecd2497 --- /dev/null +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/index.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import { UIComponentTypes } from "api/PluginApi"; +import { usePluginActionContext } from "PluginActionEditor/PluginActionContext"; +import ApiDatasourceSelector from "./ApiDatasourceSelector"; +import QueryDatasourceSelector from "./QueryDatasourceSelector"; + +const API_FORM_COMPONENTS = [ + UIComponentTypes.ApiEditorForm, + UIComponentTypes.GraphQLEditorForm, +]; + +export interface DatasourceProps { + datasourceId: string; + datasourceName: string; +} + +const DatasourceSelector = (props: DatasourceProps) => { + const { plugin } = usePluginActionContext(); + + return API_FORM_COMPONENTS.includes(plugin.uiComponent) ? ( + + ) : ( + + ); +}; + +export default DatasourceSelector; diff --git a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/Schema.tsx b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/Schema.tsx index eb293dc12bad..8140e2eb5d42 100644 --- a/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/Schema.tsx +++ b/app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/Schema.tsx @@ -1,4 +1,4 @@ -import { Flex } from "@appsmith/ads"; +import { Button, Flex, Tooltip } from "@appsmith/ads"; import React, { useEffect, useState } from "react"; import { DatasourceStructureContext } from "entities/Datasource"; import { useDispatch, useSelector } from "react-redux"; @@ -21,9 +21,11 @@ import { DatasourceEditEntryPoints } from "constants/Datasource"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { isEmpty, omit } from "lodash"; import { getQueryParams } from "utils/URLUtils"; -import { getCurrentPageId } from "selectors/editorSelectors"; import { TableColumns } from "./TableColumns"; import { BOTTOMBAR_HEIGHT } from "./constants"; +import { createMessage, EDIT_DS_CONFIG } from "ee/constants/messages"; +import { useEditorType } from "ee/hooks"; +import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks"; interface Props { datasourceId: string; @@ -44,7 +46,8 @@ const Schema = (props: Props) => { getPluginIdFromDatasourceId(state, props.datasourceId), ); - const currentPageId = useSelector(getCurrentPageId); + const editorType = useEditorType(location.pathname); + const { parentEntityId } = useParentEntityInfo(editorType); const [selectedTable, setSelectedTable] = useState(); @@ -107,7 +110,7 @@ const Schema = (props: Props) => { }); const url = datasourcesEditorIdURL({ - basePageId: currentPageId, + baseParentEntityId: parentEntityId, datasourceId: props.datasourceId, params: { ...omit(getQueryParams(), "viewMode"), viewMode: false }, generateEditorPath: true, @@ -143,6 +146,15 @@ const Schema = (props: Props) => { datasourceId={props.datasourceId} datasourceName={props.datasourceName} /> + +