feat: [Context Switching] Maintain datasource collapse state

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/MaintainContext&Focus_spec.js

@@ -156,4 +156,28 @@ describe("MaintainContext&Focus", function() {
     ee.SelectEntityByName("Appsmith");
     dataSources.AssertEditMode();
   });
+
+  it("9. Datasource collapse state has to be maintained", () => {
+    // Create datasource 1
+    dataSources.SaveDSFromDialog(false);
+    dataSources.NavigateToDSCreateNew();
+    dataSources.CreatePlugIn("PostgreSQL");
+    agHelper.RenameWithInPane("Postgres1", false);
+    // Expand section with index 1
+    dataSources.ExpandSection(1);
+    // Create and switch to datasource 2
+    dataSources.SaveDSFromDialog(true);
+    dataSources.NavigateToDSCreateNew();
+    dataSources.CreatePlugIn("MongoDB");
+    agHelper.RenameWithInPane("Mongo1", false);
+    // Validate if section with index 1 is collapsed
+    dataSources.AssertSectionCollapseState(1, false);
+    // Switch back to datasource 1
+    dataSources.SaveDSFromDialog(false);
+    dataSources.CreateNewQueryInDS("Postgres1");
+    ee.SelectEntityByName("Postgres1");
+    dataSources.EditDatasource();
+    // Validate if section with index 1 is expanded
+    dataSources.AssertSectionCollapseState(1, false);
+  });
 });

app/client/cypress/support/Objects/CommonLocators.ts

@@ -1,4 +1,5 @@
 export class CommonLocators {
+  _chevronUp = ".bp3-icon-chevron-up";
   _loading = "#loading";
   _spinner = ".bp3-spinner";
   _runBtnSpinner = ".cs-spinner";

app/client/cypress/support/Pages/DataSources.ts

@@ -17,6 +17,7 @@ export class DataSources {
   private _addNewDataSource = ".t--entity-add-btn.datasources";
   private _createNewPlgin = (pluginName: string) =>
     ".t--plugin-name:contains('" + pluginName + "')";
+  private _collapseContainer = ".t--collapse-section-container";
   private _host = "input[name='datasourceConfiguration.endpoints[0].host']";
   private _port = "input[name='datasourceConfiguration.endpoints[0].port']";
   _databaseName =
@@ -225,6 +226,40 @@ export class DataSources {
     this.agHelper.GetNClick(this._editButton);
   }
 
+  public ExpandSection(index: number) {
+    cy.get(this._collapseContainer)
+      .eq(index)
+      .click();
+    cy.get(this._collapseContainer)
+      .eq(index)
+      .find(this.locator._chevronUp)
+      .should("be.visible");
+  }
+
+  public ExpandSectionByName(locator: string) {
+    // Click on collapse section only if it collapsed, if it is expanded
+    // we ignore
+    cy.get(`${locator} span`)
+      .invoke("attr", "icon")
+      .then((iconName) => {
+        if (iconName === "chevron-down") {
+          cy.get(locator).click();
+        }
+      });
+  }
+
+  public AssertSectionCollapseState(index: number, collapsed = false) {
+    cy.get(this._collapseContainer)
+      .eq(index)
+      .within(() => {
+        if (collapsed) {
+          cy.get(this.locator._chevronUp).should("not.exist");
+        } else {
+          cy.get(this.locator._chevronUp).should("exist");
+        }
+      });
+  }
+
   public NavigateToDSCreateNew() {
     this.agHelper.GetNClick(this._addNewDataSource);
     // cy.get(this._dsCreateNewTab)
@@ -258,7 +293,7 @@ export class DataSources {
     cy.get(this._databaseName)
       .clear()
       .type(databaseName);
-    cy.get(this._sectionAuthentication).click();
+    this.ExpandSectionByName(this._sectionAuthentication);
     cy.get(this._username).type(
       username == "" ? datasourceFormData["postgres-username"] : username,
     );
@@ -273,7 +308,7 @@ export class DataSources {
       : datasourceFormData["mongo-host"];
     cy.get(this._host).type(hostAddress);
     cy.get(this._port).type(datasourceFormData["mongo-port"].toString());
-    cy.get(this._sectionAuthentication).click();
+    this.ExpandSectionByName(this._sectionAuthentication);
     cy.get(this._databaseName)
       .clear()
       .type(datasourceFormData["mongo-databaseName"]);
@@ -291,7 +326,7 @@ export class DataSources {
     cy.get(this._databaseName)
       .clear()
       .type(databaseName);
-    cy.get(this._sectionAuthentication).click();
+    this.ExpandSectionByName(this._sectionAuthentication);
     cy.get(this._username).type(datasourceFormData["mysql-username"]);
     cy.get(this._password).type(datasourceFormData["mysql-password"]);
   }
@@ -700,7 +735,7 @@ export class DataSources {
 
   //Update with new password in the datasource conf page
   public updatePassword(newPassword: string) {
-    cy.get(this._sectionAuthentication).click();
+    this.ExpandSectionByName(this._sectionAuthentication);
     cy.get(this._password).type(newPassword);
   }
 

app/client/cypress/support/dataSourceCommands.js

@@ -3,12 +3,14 @@
 
 require("cy-verify-downloads").addCustomCommand();
 require("cypress-file-upload");
+import { ObjectsRegistry } from "../support/Objects/Registry";
 const pages = require("../locators/Pages.json");
 const datasourceEditor = require("../locators/DatasourcesEditor.json");
 const datasourceFormData = require("../fixtures/datasources.json");
 const explorer = require("../locators/explorerlocators.json");
 const apiWidgetslocator = require("../locators/apiWidgetslocator.json");
 const apiEditorLocators = require("../locators/ApiEditor");
+const dataSources = ObjectsRegistry.DataSources;
 
 const backgroundColorBlack = "rgb(0, 0, 0)";
 const backgroundColorGray1 = "rgb(250, 250, 250)";
@@ -116,7 +118,7 @@ Cypress.Commands.add(
     //cy.get(datasourceEditor["selConnectionType"]).click();
     //cy.contains(datasourceFormData["connection-type"]).click();
     //cy.get(datasourceEditor["defaultDatabaseName"]).type(databaseName);//is optional hence removing
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor["databaseName"])
       .clear()
       .type(datasourceFormData["mongo-databaseName"]);
@@ -148,7 +150,7 @@ Cypress.Commands.add(
     cy.get(datasourceEditor.databaseName)
       .clear()
       .type(databaseName);
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor.username).type(
       datasourceFormData["postgres-username"],
     );
@@ -194,8 +196,7 @@ Cypress.Commands.add(
     cy.get(datasourceEditor.databaseName)
       .clear()
       .type(databaseName);
-
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor.username).type(
       datasourceFormData["mysql-username"],
     );
@@ -220,8 +221,7 @@ Cypress.Commands.add(
     cy.get(datasourceEditor.databaseName)
       .clear()
       .type(databaseName);
-
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor.username).type(
       datasourceFormData["mssql-username"],
     );
@@ -247,7 +247,7 @@ Cypress.Commands.add(
       .clear()
       .type(databaseName);
 
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor.username).type(
       datasourceFormData["arango-username"],
     );
@@ -272,8 +272,7 @@ Cypress.Commands.add(
     cy.get(datasourceEditor.databaseName)
       .clear()
       .type(databaseName);
-
-    cy.get(datasourceEditor.sectionAuthentication).click();
+    dataSources.ExpandSectionByName(datasourceEditor.sectionAuthentication);
     cy.get(datasourceEditor.username).type(
       datasourceFormData["redshift-username"],
     );

app/client/src/actions/datasourceActions.ts

@@ -184,6 +184,22 @@ export const setDatasourceViewMode = (payload: boolean) => {
   };
 };
 
+export const setAllDatasourceCollapsible = (payload: {
+  [key: string]: boolean;
+}) => {
+  return {
+    type: ReduxActionTypes.SET_ALL_DATASOURCE_COLLAPSIBLE_STATE,
+    payload,
+  };
+};
+
+export const setDatasourceCollapsible = (key: string, isOpen: boolean) => {
+  return {
+    type: ReduxActionTypes.SET_DATASOURCE_COLLAPSIBLE_STATE,
+    payload: { key, isOpen },
+  };
+};
+
 export const fetchDatasources = (payload?: { workspaceId?: string }) => {
   return {
     type: ReduxActionTypes.FETCH_DATASOURCES_INIT,

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -217,6 +217,8 @@ export const ReduxActionTypes = {
   UPDATE_ACTION_SUCCESS: "UPDATE_ACTION_SUCCESS",
   DELETE_ACTION_INIT: "DELETE_ACTION_INIT",
   SET_DATASOURCE_EDITOR_MODE: "SET_DATASOURCE_EDITOR_MODE",
+  SET_DATASOURCE_COLLAPSIBLE_STATE: "SET_DATASOURCE_COLLAPSIBLE_STATE",
+  SET_ALL_DATASOURCE_COLLAPSIBLE_STATE: "SET_ALL_DATASOURCE_COLLAPSIBLE_STATE",
   DELETE_ACTION_SUCCESS: "DELETE_ACTION_SUCCESS",
   SHOW_ACTION_MODAL: "SHOW_ACTION_MODAL",
   CANCEL_ACTION_MODAL: "CANCEL_ACTION_MODAL",

app/client/src/navigation/FocusElements.ts

@@ -19,7 +19,11 @@ import {
   getSelectedPropertyTabIndex,
 } from "selectors/editorContextSelectors";
 import { setFocusableCodeEditorField } from "actions/editorContextActions";
-import { getSelectedWidgets, isDatasourceInViewMode } from "selectors/ui";
+import {
+  getAllDatasourceCollapsibleState,
+  getSelectedWidgets,
+  isDatasourceInViewMode,
+} from "selectors/ui";
 import { selectMultipleWidgetsInitAction } from "actions/widgetSelectionActions";
 
 import { FocusEntity } from "navigation/FocusEntity";
@@ -50,7 +54,10 @@ import {
   setSelectedPropertyTabIndex,
 } from "actions/propertyPaneActions";
 import { setCanvasDebuggerSelectedTab } from "actions/debuggerActions";
-import { setDatasourceViewMode } from "actions/datasourceActions";
+import {
+  setAllDatasourceCollapsible,
+  setDatasourceViewMode,
+} from "actions/datasourceActions";
 import { PluginPackageName } from "entities/Action";
 import { getFocusablePropertyPaneField } from "selectors/propertyPaneSelectors";
 
@@ -59,6 +66,7 @@ export enum FocusElement {
   ApiPaneResponseTabs = "ApiPaneResponseTabs",
   ApiPaneResponseHeight = "ApiPaneResponseHeight",
   DatasourceViewMode = "DatasourceViewMode",
+  DatasourceAccordions = "DatasourceAccordions",
   ApiRightPaneTabs = "ApiRightPaneTabs",
   QueryPaneConfigTabs = "QueryPaneConfigTabs",
   QueryPaneResponseTabs = "QueryPaneResponseTabs",
@@ -111,6 +119,11 @@ export const FocusElementsConfig: Record<FocusEntity, Config[]> = {
       setter: setDatasourceViewMode,
       defaultValue: true,
     },
+    {
+      name: FocusElement.DatasourceAccordions,
+      selector: getAllDatasourceCollapsibleState,
+      setter: setAllDatasourceCollapsible,
+    },
   ],
   [FocusEntity.JS_OBJECT]: [
     {

app/client/src/pages/Editor/DataSourceEditor/Collapsible.tsx

@@ -1,7 +1,12 @@
-import React from "react";
+import React, { useCallback, useEffect } from "react";
 import { Collapse, Icon } from "@blueprintjs/core";
 import styled from "styled-components";
 import { Icon as AdsIcon, IconName, IconSize } from "design-system";
+import { useDispatch, useSelector } from "react-redux";
+import { AppState } from "@appsmith/reducers";
+import { getDatasourceCollapsibleState } from "selectors/ui";
+import { setDatasourceCollapsible } from "actions/datasourceActions";
+import isUndefined from "lodash/isUndefined";
 
 const SectionLabel = styled.div`
   font-weight: 500;
@@ -32,10 +37,6 @@ const TopBorder = styled.div`
   margin-bottom: 24px;
 `;
 
-interface ComponentState {
-  isOpen: boolean;
-}
-
 interface ComponentProps {
   children: any;
   title: string;
@@ -49,51 +50,55 @@ interface ComponentProps {
 
 type Props = ComponentProps;
 
-class Collapsible extends React.Component<Props, ComponentState> {
-  constructor(props: Props) {
-    super(props);
+function Collapsible(props: Props) {
+  const { children, defaultIsOpen, headerIcon, title } = props;
+  const dispatch = useDispatch();
+  const isOpen = useSelector((state: AppState) =>
+    getDatasourceCollapsibleState(state, title),
+  );
 
-    this.state = {
-      isOpen: props.defaultIsOpen || false,
-    };
-  }
+  const setIsOpen = useCallback((open) => {
+    dispatch(setDatasourceCollapsible(title, open));
+  }, []);
 
-  render() {
-    const { children, headerIcon, title } = this.props;
-    const { isOpen } = this.state;
+  useEffect(() => {
+    // We set the default value only when there is no state stored yet for the same
+    if (defaultIsOpen && isUndefined(isOpen)) {
+      setIsOpen(defaultIsOpen);
+    }
+  }, [defaultIsOpen, isOpen]);
 
-    return (
-      <>
-        <TopBorder className="t--collapse-top-border" />
-        <SectionContainer
-          className="t--collapse-section-container"
-          data-cy={`section-${title}`}
-          data-replay-id={`section-${title}`}
-          onClick={() => this.setState({ isOpen: !this.state.isOpen })}
-        >
-          <SectionLabel>
-            {title}
-            {headerIcon && (
-              <AdsIcon
-                fillColor={headerIcon.color}
-                name={headerIcon.name}
-                size={IconSize.MEDIUM}
-              />
-            )}
-          </SectionLabel>
-          <Icon
-            icon={isOpen ? "chevron-up" : "chevron-down"}
-            iconSize={16}
-            style={{ color: "#2E3D49" }}
-          />
-        </SectionContainer>
+  return (
+    <>
+      <TopBorder className="t--collapse-top-border" />
+      <SectionContainer
+        className="t--collapse-section-container"
+        data-cy={`section-${title}`}
+        data-replay-id={`section-${title}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <SectionLabel>
+          {title}
+          {headerIcon && (
+            <AdsIcon
+              fillColor={headerIcon.color}
+              name={headerIcon.name}
+              size={IconSize.MEDIUM}
+            />
+          )}
+        </SectionLabel>
+        <Icon
+          icon={isOpen ? "chevron-up" : "chevron-down"}
+          iconSize={16}
+          style={{ color: "#2E3D49" }}
+        />
+      </SectionContainer>
 
-        <Collapse isOpen={this.state.isOpen} keepChildrenMounted>
-          {children}
-        </Collapse>
-      </>
-    );
-  }
+      <Collapse isOpen={isOpen} keepChildrenMounted>
+        {children}
+      </Collapse>
+    </>
+  );
 }
 
 export default Collapsible;

app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx

@@ -245,7 +245,7 @@ export class JSONtoForm<
     return (
       <Collapsible
         defaultIsOpen={index === 0}
-        key={index}
+        key={section.sectionName}
         title={section.sectionName}
       >
         {this.renderEachConfig(section)}