From 2e90243fc6878ba768180204d1b98ba520784246 Mon Sep 17 00:00:00 2001 From: Aman Agarwal Date: Mon, 13 Nov 2023 12:38:04 +0530 Subject: [PATCH] fix: schema accordions don't open on search, placeholder for search input (#28785) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This pr fixes: - Let schema table accordions be closed on searching table - Search placheholder changed to `Search for table` #### PR fixes following issue(s) Fixes #28750 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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 - [ ] JUnit - [ ] 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/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 --- .../ClientSide/BugTests/Bug28750_Spec.ts | 24 +++++++++++++++++++ .../cypress/support/Pages/DataSources.ts | 5 ++-- app/client/src/ce/constants/messages.ts | 2 +- .../DatasourceInfo/DatasourceStructure.tsx | 3 --- .../DatasourceStructureContainer.tsx | 8 ------- 5 files changed, 28 insertions(+), 14 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28750_Spec.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28750_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28750_Spec.ts new file mode 100644 index 0000000000..971849a204 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Bug28750_Spec.ts @@ -0,0 +1,24 @@ +import { agHelper, dataSources } from "../../../../support/Objects/ObjectsCore"; +import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags"; + +describe("Datasource structure schema preview data", () => { + before(() => { + featureFlagIntercept({ ab_gsheet_schema_enabled: true }); + dataSources.CreateMockDB("Users"); + }); + + it( + "excludeForAirgap", + "1. Verify if the schema table accordions is collapsed in case of search", + () => { + agHelper.TypeText( + dataSources._datasourceStructureSearchInput, + "public.us", + ); + agHelper.Sleep(1000); + agHelper.AssertElementAbsence( + `${dataSources._dsStructurePreviewMode} ${dataSources._datasourceSchemaColumn}`, + ); + }, + ); +}); diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts index 91bedefd81..94d9aa4fdd 100644 --- a/app/client/cypress/support/Pages/DataSources.ts +++ b/app/client/cypress/support/Pages/DataSources.ts @@ -256,7 +256,7 @@ export class DataSources { `//div[contains(@class, 'datasourceStructure-query-editor')]//div[contains(@class, 't--entity-name')][text()='${schemaName}']`; private _datasourceSchemaRefreshBtn = ".datasourceStructure-refresh"; private _datasourceStructureHeader = ".datasourceStructure-header"; - private _datasourceColumnSchemaInQueryEditor = ".t--datasource-column"; + _datasourceSchemaColumn = ".t--datasource-column"; _datasourceStructureSearchInput = ".datasourceStructure-search input"; _jsModeSortingControl = ".t--actionConfiguration\\.formData\\.sortBy\\.data"; public _queryEditorCollapsibleIcon = ".collapsible-icon"; @@ -299,6 +299,7 @@ export class DataSources { _gSheetQueryPlaceholder = ".CodeMirror-placeholder"; _dsNameInExplorer = (dsName: string) => `div.t--entity-name:contains('${dsName}')`; + _dsStructurePreviewMode = ".datasourceStructure-datasource-view-mode"; public AssertDSEditViewMode(mode: AppModes) { if (mode == "Edit") this.agHelper.AssertElementAbsence(this._editButton); @@ -1478,7 +1479,7 @@ export class DataSources { public VerifyColumnSchemaOnQueryEditor(schema: string, index = 0) { this.agHelper - .GetElement(this._datasourceColumnSchemaInQueryEditor) + .GetElement(this._datasourceSchemaColumn) .eq(index) .contains(schema); } diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 5208030444..5a075b4d37 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -753,7 +753,7 @@ export const EMPTY_ACTIVE_DATA_SOURCES = () => "No active datasources found."; export const SCHEMA_NOT_AVAILABLE = () => "Schema not available"; export const TABLE_NOT_FOUND = () => "Table not found."; export const DATASOURCE_STRUCTURE_INPUT_PLACEHOLDER_TEXT = () => - "Search for table or attribute"; + "Search for table"; export const SCHEMA_LABEL = () => "Schema"; export const STRUCTURE_NOT_FETCHED = () => "We could not fetch the schema of the database."; diff --git a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructure.tsx b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructure.tsx index 0e602acb21..d59a51f77c 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructure.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructure.tsx @@ -28,7 +28,6 @@ interface DatasourceStructureItemProps { datasourceId: string; context: DatasourceStructureContext; isDefaultOpen?: boolean; - forceExpand?: boolean; currentActionId: string; onEntityTableClick?: (table: string) => void; tableName?: string; @@ -150,7 +149,6 @@ const DatasourceStructureItem = memo((props: DatasourceStructureItemProps) => { collapseRef={collapseRef} contextMenu={templateMenu} entityId={`${props.datasourceId}-${dbStructure.name}-${props.context}`} - forceExpand={props.forceExpand} icon={datasourceTableIcon} isDefaultExpanded={props?.isDefaultOpen} name={dbStructure.name} @@ -177,7 +175,6 @@ type DatasourceStructureProps = Partial & { datasourceId: string; context: DatasourceStructureContext; isDefaultOpen?: boolean; - forceExpand?: boolean; currentActionId: string; }; diff --git a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx index 2c15e8d499..b13d25a8a2 100644 --- a/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx +++ b/app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx @@ -59,7 +59,6 @@ const Container = (props: Props) => { const [datasourceStructure, setDatasourceStructure] = useState< DatasourceStructureType | undefined >(props.datasourceStructure); - const [hasSearchedOccured, setHasSearchedOccured] = useState(false); const { isOpened: isWalkthroughOpened, popFeature } = useContext(WalkthroughContext) || {}; @@ -96,12 +95,6 @@ const Container = (props: Props) => { const handleOnChange = (value: string) => { if (!props.datasourceStructure?.tables?.length) return; - if (value.length > 0) { - !hasSearchedOccured && setHasSearchedOccured(true); - } else { - hasSearchedOccured && setHasSearchedOccured(false); - } - const filteredDastasourceStructure = props.datasourceStructure.tables.filter((table) => table.name.toLowerCase().includes(value.toLowerCase()), @@ -141,7 +134,6 @@ const Container = (props: Props) => { context={props.context} currentActionId={props.currentActionId || ""} datasourceId={props.datasourceId} - forceExpand={hasSearchedOccured} // If set, then it doesn't set the context menu to generate query from templates onEntityTableClick={props.onEntityTableClick} step={props.step + 1}