Revert "Migrate Collapse/Open Resource Tree to React (#733)" (#792)

This reverts commit d7c62ac7f1.

less/documentDB.less

@@ -2099,7 +2099,7 @@ a:link {
   display: flex;
   flex: 1 1 auto;
   overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: auto;
   height: 100%;
 }
 
@@ -3085,7 +3085,3 @@ settings-pane {
     padding-left: @SmallSpace;
   }
 }
-.hiddenMain {
-  visibility: hidden;
-  height: 0px;
-}

less/tree.less

@@ -3,7 +3,6 @@
 
 .resourceTree {
     height: 100%;
-    width: 20%;
     flex: 0 0 auto;
     .main {
         height: 100%;

src/Common/CollapsedResourceTree.tsx

@@ -1,35 +0,0 @@
-import React, { FunctionComponent } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-
-export interface CollapsedResourceTreeProps {
-  toggleLeftPaneExpanded: () => void;
-  isLeftPaneExpanded: boolean;
-}
-
-export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
-  toggleLeftPaneExpanded,
-  isLeftPaneExpanded,
-}: CollapsedResourceTreeProps): JSX.Element => {
-  return (
-    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
-      <div className="main-nav nav">
-        <ul className="nav">
-          <li
-            className="resourceTreeCollapse"
-            id="collapseToggleLeftPaneButton"
-            role="button"
-            tabIndex={0}
-            aria-label="Expand Tree"
-          >
-            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
-              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
-            </span>
-            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
-              <span data-bind="text: collectionTitle" />
-            </span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
-};

src/Common/ResourceTree.tsx

@@ -1,59 +0,0 @@
-import React, { FunctionComponent } from "react";
-import arrowLeftImg from "../../images/imgarrowlefticon.svg";
-import refreshImg from "../../images/refresh-cosmos.svg";
-import { AuthType } from "../AuthType";
-import { userContext } from "../UserContext";
-
-export interface ResourceTreeProps {
-  toggleLeftPaneExpanded: () => void;
-  isLeftPaneExpanded: boolean;
-}
-
-export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
-  toggleLeftPaneExpanded,
-  isLeftPaneExpanded,
-}: ResourceTreeProps): JSX.Element => {
-  return (
-    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
-      {/* Collections Window - - Start */}
-      <div id="mainslide" className="flexContainer">
-        {/* Collections Window Title/Command Bar - Start */}
-        <div className="collectiontitle">
-          <div className="coltitle">
-            <span className="titlepadcol" data-bind="text: collectionTitle" />
-            <div className="float-right">
-              <span
-                className="padimgcolrefresh"
-                data-test="refreshTree"
-                role="button"
-                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
-                tabIndex={0}
-                aria-label="Refresh tree"
-                title="Refresh tree"
-              >
-                <img className="refreshcol" src={refreshImg} alt="Refresh tree" />
-              </span>
-              <span
-                className="padimgcolrefresh1"
-                id="expandToggleLeftPaneButton"
-                role="button"
-                onClick={toggleLeftPaneExpanded}
-                tabIndex={0}
-                aria-label="Collapse Tree"
-                title="Collapse Tree"
-              >
-                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
-              </span>
-            </div>
-          </div>
-        </div>
-        {userContext.authType === AuthType.ResourceToken ? (
-          <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
-        ) : (
-          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
-        )}
-      </div>
-      {/*  Collections Window - End */}
-    </div>
-  );
-};

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -879,6 +879,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isAutoscaleDefaultEnabled": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isHostedDataExplorerEnabled": [Function],
+                "isLeftPaneExpanded": [Function],
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
@@ -945,6 +946,7 @@ exports[`SettingsComponent renders 1`] = `
                   "activeTab": [Function],
                   "openedTabs": [Function],
                 },
+                "toggleLeftPaneExpandedKeyPress": [Function],
               },
               "databaseId": "test",
               "defaultTtl": [Function],
@@ -1817,6 +1819,7 @@ exports[`SettingsComponent renders 1`] = `
               "isAutoscaleDefaultEnabled": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isHostedDataExplorerEnabled": [Function],
+              "isLeftPaneExpanded": [Function],
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
@@ -1883,6 +1886,7 @@ exports[`SettingsComponent renders 1`] = `
                 "activeTab": [Function],
                 "openedTabs": [Function],
               },
+              "toggleLeftPaneExpandedKeyPress": [Function],
             }
           }
           isAutoPilotSelected={false}
@@ -2768,6 +2772,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isAutoscaleDefaultEnabled": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isHostedDataExplorerEnabled": [Function],
+                "isLeftPaneExpanded": [Function],
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
@@ -2834,6 +2839,7 @@ exports[`SettingsComponent renders 1`] = `
                   "activeTab": [Function],
                   "openedTabs": [Function],
                 },
+                "toggleLeftPaneExpandedKeyPress": [Function],
               },
               "databaseId": "test",
               "defaultTtl": [Function],
@@ -3706,6 +3712,7 @@ exports[`SettingsComponent renders 1`] = `
               "isAutoscaleDefaultEnabled": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isHostedDataExplorerEnabled": [Function],
+              "isLeftPaneExpanded": [Function],
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
@@ -3772,6 +3779,7 @@ exports[`SettingsComponent renders 1`] = `
                 "activeTab": [Function],
                 "openedTabs": [Function],
               },
+              "toggleLeftPaneExpandedKeyPress": [Function],
             }
           }
           geospatialConfigType="Geometry"

src/Explorer/Explorer.tsx

@@ -131,6 +131,7 @@ export default class Explorer {
   public databases: ko.ObservableArray<ViewModels.Database>;
   public selectedDatabaseId: ko.Computed<string>;
   public selectedCollectionId: ko.Computed<string>;
+  public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
   private resourceTree: ResourceTreeAdapter;
 
@@ -222,7 +223,6 @@ export default class Explorer {
         });
       }
     });
-
     this.isNotebooksEnabledForAccount = ko.observable(false);
     this.isNotebooksEnabledForAccount.subscribe((isEnabledForAccount: boolean) => this.refreshCommandBarButtons());
     this.isSparkEnabledForAccount = ko.observable(false);
@@ -327,6 +327,7 @@ export default class Explorer {
       }
       return true;
     });
+    this.isLeftPaneExpanded = ko.observable<boolean>(true);
     this.selectedNode = ko.observable<ViewModels.TreeNode>();
     this.selectedNode.subscribe((nodeSelected: ViewModels.TreeNode) => {
       // Make sure switching tabs restores tabs display
@@ -645,8 +646,16 @@ export default class Explorer {
     this.setIsNotificationConsoleExpanded(true);
   }
 
-  public collapseConsole(): void {
+  public toggleLeftPaneExpanded() {
-    this.setIsNotificationConsoleExpanded(false);
+    this.isLeftPaneExpanded(!this.isLeftPaneExpanded());
+
+    if (this.isLeftPaneExpanded()) {
+      document.getElementById("expandToggleLeftPaneButton").focus();
+      this.splitter.expandLeft();
+    } else {
+      document.getElementById("collapseToggleLeftPaneButton").focus();
+      this.splitter.collapseLeft();
+    }
   }
 
   public refreshDatabaseForResourceToken(): Q.Promise<any> {
@@ -765,6 +774,14 @@ export default class Explorer {
     this.refreshNotebookList();
   };
 
+  public toggleLeftPaneExpandedKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.toggleLeftPaneExpanded();
+      return false;
+    }
+    return true;
+  };
+
   // Facade
   public provideFeedbackEmail = () => {
     window.open(Constants.Urls.feedbackEmail, "_blank");

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -868,6 +868,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isAutoscaleDefaultEnabled": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isHostedDataExplorerEnabled": [Function],
+            "isLeftPaneExpanded": [Function],
             "isMongoIndexingEnabled": [Function],
             "isNotebookEnabled": [Function],
             "isNotebooksEnabledForAccount": [Function],
@@ -934,6 +935,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "activeTab": [Function],
               "openedTabs": [Function],
             },
+            "toggleLeftPaneExpandedKeyPress": [Function],
           },
           "getRepo": [Function],
           "pinRepo": [Function],

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -858,6 +858,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isAutoscaleDefaultEnabled": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isHostedDataExplorerEnabled": [Function],
+      "isLeftPaneExpanded": [Function],
       "isMongoIndexingEnabled": [Function],
       "isNotebookEnabled": [Function],
       "isNotebooksEnabledForAccount": [Function],
@@ -924,6 +925,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "activeTab": [Function],
         "openedTabs": [Function],
       },
+      "toggleLeftPaneExpandedKeyPress": [Function],
     }
   }
   inProgressMessage="Creating directory "

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -858,6 +858,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "isHostedDataExplorerEnabled": [Function],
       "isLastCollection": [Function],
       "isLastNonEmptyDatabase": [Function],
+      "isLeftPaneExpanded": [Function],
       "isMongoIndexingEnabled": [Function],
       "isNotebookEnabled": [Function],
       "isNotebooksEnabledForAccount": [Function],
@@ -926,6 +927,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
         "activeTab": [Function],
         "openedTabs": [Function],
       },
+      "toggleLeftPaneExpandedKeyPress": [Function],
     }
   }
   openNotificationConsole={[Function]}

src/Main.tsx

@@ -14,6 +14,8 @@ import "../externals/jquery.typeahead.min.js";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import "../images/favicon.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
+import arrowLeftImg from "../images/imgarrowlefticon.svg";
+import refreshImg from "../images/refresh-cosmos.svg";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";
@@ -25,8 +27,7 @@ import "../less/TableStyles/EntityEditor.less";
 import "../less/TableStyles/fulldatatables.less";
 import "../less/TableStyles/queryBuilder.less";
 import "../less/tree.less";
-import { CollapsedResourceTree } from "./Common/CollapsedResourceTree";
+import { AuthType } from "./AuthType";
-import { ResourceTree } from "./Common/ResourceTree";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
@@ -53,6 +54,7 @@ import { useSidePanel } from "./hooks/useSidePanel";
 import { useTabs } from "./hooks/useTabs";
 import "./Libs/jquery";
 import "./Shared/appInsights";
+import { userContext } from "./UserContext";
 
 initializeIcons();
 
@@ -61,7 +63,6 @@ const App: React.FunctionComponent = () => {
   const [notificationConsoleData, setNotificationConsoleData] = useState(undefined);
   //TODO: Refactor so we don't need to pass the id to remove a console data
   const [inProgressConsoleDataIdToBeDeleted, setInProgressConsoleDataIdToBeDeleted] = useState("");
-  const [isLeftPaneExpanded, setIsLeftPaneExpanded] = useState<boolean>(true);
 
   const [dialogProps, setDialogProps] = useState<DialogProps>();
   const [showDialog, setShowDialog] = useState<boolean>(false);
@@ -91,15 +92,6 @@ const App: React.FunctionComponent = () => {
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform, explorerParams);
 
-  const toggleLeftPaneExpanded = () => {
-    setIsLeftPaneExpanded(!isLeftPaneExpanded);
-    if (isLeftPaneExpanded) {
-      document.getElementById("expandToggleLeftPaneButton").focus();
-    } else {
-      document.getElementById("collapseToggleLeftPaneButton").focus();
-    }
-  };
-
   if (!explorer) {
     return <LoadingExplorer />;
   }
@@ -115,13 +107,93 @@ const App: React.FunctionComponent = () => {
           <div id="resourcetree" data-test="resourceTreeId" className="resourceTree">
             <div className="collectionsTreeWithSplitter">
               {/* Collections Tree Expanded - Start */}
-              <ResourceTree toggleLeftPaneExpanded={toggleLeftPaneExpanded} isLeftPaneExpanded={isLeftPaneExpanded} />
+              <div
+                id="main"
+                className="main"
+                data-bind="
+                      visible: isLeftPaneExpanded()"
+              >
+                {/* Collections Window - - Start */}
+                <div id="mainslide" className="flexContainer">
+                  {/* Collections Window Title/Command Bar - Start */}
+                  <div className="collectiontitle">
+                    <div className="coltitle">
+                      <span className="titlepadcol" data-bind="text: collectionTitle" />
+                      <div className="float-right">
+                        <span
+                          className="padimgcolrefresh"
+                          data-test="refreshTree"
+                          role="button"
+                          data-bind="
+                                          click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
+                          tabIndex={0}
+                          aria-label="Refresh tree"
+                          title="Refresh tree"
+                        >
+                          <img className="refreshcol" src={refreshImg} data-bind="attr: { alt: refreshTreeTitle }" />
+                        </span>
+                        <span
+                          className="padimgcolrefresh1"
+                          id="expandToggleLeftPaneButton"
+                          role="button"
+                          data-bind="
+                                          click: toggleLeftPaneExpanded, event: { keypress: toggleLeftPaneExpandedKeyPress }"
+                          tabIndex={0}
+                          aria-label="Collapse Tree"
+                          title="Collapse Tree"
+                        >
+                          <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  {userContext.authType === AuthType.ResourceToken ? (
+                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
+                  ) : (
+                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+                  )}
+                </div>
+                {/*  Collections Window - End */}
+              </div>
               {/* Collections Tree Expanded - End */}
               {/* Collections Tree Collapsed - Start */}
-              <CollapsedResourceTree
+              <div
-                toggleLeftPaneExpanded={toggleLeftPaneExpanded}
+                id="mini"
-                isLeftPaneExpanded={isLeftPaneExpanded}
+                className="mini toggle-mini"
-              />
+                data-bind="visible: !isLeftPaneExpanded()
+                      attr: { style: { width: collapsedResourceTreeWidth }}"
+              >
+                <div className="main-nav nav">
+                  <ul className="nav">
+                    <li
+                      className="resourceTreeCollapse"
+                      id="collapseToggleLeftPaneButton"
+                      role="button"
+                      data-bind="event: { keypress: toggleLeftPaneExpandedKeyPress }"
+                      tabIndex={0}
+                      aria-label="Expand Tree"
+                    >
+                      <span
+                        className="leftarrowCollapsed"
+                        data-bind="
+                                      click: toggleLeftPaneExpanded"
+                      >
+                        <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+                      </span>
+                      <span
+                        className="collectionCollapsed"
+                        data-bind="
+                                      click: toggleLeftPaneExpanded"
+                      >
+                        <span
+                          data-bind="
+                                          text: collectionTitle"
+                        />
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
               {/* Collections Tree Collapsed - End */}
             </div>
             {/* Splitter - Start */}