Move selectedNode to zustand (#903)

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.tsx

@@ -14,6 +14,7 @@ import {
 import Explorer from "../../Explorer";
 import { NewQueryTab } from "../../Tabs/QueryTab/QueryTab";
 import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 
 interface BrowseQueriesPaneProps {
   explorer: Explorer;
@@ -24,7 +25,7 @@ export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
 }: BrowseQueriesPaneProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const loadSavedQuery = (savedQuery: Query): void => {
-    const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
+    const selectedCollection: Collection = useSelectedNode.getState().findSelectedCollection();
     if (!selectedCollection) {
       // should never get into this state because this pane is only accessible through the query tab
       logError("No collection was selected", "BrowseQueriesPane.loadSavedQuery");

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -1,17 +1,18 @@
 jest.mock("../../../Common/dataAccess/deleteCollection");
 jest.mock("../../../Shared/Telemetry/TelemetryProcessor");
-import { mount, ReactWrapper, shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
 import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";
 import DeleteFeedback from "../../../Common/DeleteFeedback";
 import { ApiKind, DatabaseAccount } from "../../../Contracts/DataModels";
-import { Collection, Database, TreeNode } from "../../../Contracts/ViewModels";
+import { Collection, Database } from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
 
 describe("Delete Collection Confirmation Pane", () => {
@@ -54,47 +55,39 @@ describe("Delete Collection Confirmation Pane", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
       const fakeExplorer = new Explorer();
       fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
 
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        collectionName: "container",
-      };
-      const wrapper = shallow(<DeleteCollectionConfirmationPane {...props} />);
+      const wrapper = shallow(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
 
       const database = { id: ko.observable("testDB") } as Database;
       database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
+      database.nodeKind = "Database";
+      database.isDatabaseShared = ko.computed(() => false);
       useDatabases.getState().addDatabases([database]);
-      wrapper.setProps(props);
+      useSelectedNode.getState().setSelectedNode(database);
+      wrapper.setProps({ explorer: fakeExplorer });
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
 
-      props.explorer.isSelectedDatabaseShared = () => true;
-      wrapper.setProps(props);
+      database.isDatabaseShared = ko.computed(() => true);
+      wrapper.setProps({ explorer: fakeExplorer });
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
     });
   });
 
   describe("submit()", () => {
-    let wrapper: ReactWrapper;
     const selectedCollectionId = "testCol";
     const databaseId = "testDatabase";
     const fakeExplorer = {} as Explorer;
-    fakeExplorer.findSelectedCollection = () => {
-      return {
-        id: ko.observable<string>(selectedCollectionId),
-        databaseId,
-        rid: "test",
-      } as Collection;
-    };
-    fakeExplorer.selectedCollectionId = ko.computed<string>(() => selectedCollectionId);
-    fakeExplorer.selectedNode = ko.observable<TreeNode>();
     fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isSelectedDatabaseShared = () => false;
-    const database = { id: ko.observable("testDB") } as Database;
-    database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
-    useDatabases.getState().addDatabases([database]);
+    const database = { id: ko.observable(databaseId) } as Database;
+    const collection = {
+      id: ko.observable(selectedCollectionId),
+      nodeKind: "Collection",
+      database,
+      databaseId,
+    } as Collection;
+    database.collections = ko.observableArray<Collection>([collection]);
+    database.isDatabaseShared = ko.computed(() => false);
 
     beforeAll(() => {
       updateUserContext({
@@ -112,15 +105,17 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     beforeEach(() => {
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        collectionName: "container",
-      };
-      wrapper = mount(<DeleteCollectionConfirmationPane {...props} />);
+      useDatabases.getState().addDatabases([database]);
+      useSelectedNode.getState().setSelectedNode(collection);
+    });
+
+    afterEach(() => {
+      useDatabases.getState().clearDatabases();
+      useSelectedNode.getState().setSelectedNode(undefined);
     });
 
     it("should call delete collection", () => {
+      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper).toMatchSnapshot();
 
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
@@ -137,6 +132,7 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should record feedback", async () => {
+      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
       wrapper
         .find("#confirmCollectionId")

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -14,6 +14,7 @@ import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
 import { useDatabases } from "../../useDatabases";
+import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface DeleteCollectionConfirmationPaneProps {
@@ -24,19 +25,19 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   explorer,
 }: DeleteCollectionConfirmationPaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
-  const isLastCollection = useDatabases((state) => state.isLastCollection);
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
   const [inputCollectionName, setInputCollectionName] = useState<string>("");
   const [formError, setFormError] = useState<string>("");
   const [isExecuting, setIsExecuting] = useState(false);
 
-  const shouldRecordFeedback = (): boolean => {
-    return isLastCollection() && !explorer.isSelectedDatabaseShared();
-  };
+  const shouldRecordFeedback = (): boolean =>
+    useDatabases.getState().isLastCollection() &&
+    !useSelectedNode.getState().findSelectedDatabase()?.isDatabaseShared();
+
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
   const onSubmit = async (): Promise<void> => {
-    const collection = explorer.findSelectedCollection();
+    const collection = useSelectedNode.getState().findSelectedCollection();
     if (!collection || inputCollectionName !== collection.id()) {
       const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName;
       setFormError(errorMessage);
@@ -61,7 +62,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
       await deleteCollection(collection.databaseId, collection.id());
 
       setIsExecuting(false);
-      explorer.selectedNode(collection.database);
+      useSelectedNode.getState().setSelectedNode(collection.database);
       explorer.tabsManager?.closeTabsByComparator(
         (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
       );

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

@@ -2,15 +2,9 @@
 
 exports[`Delete Collection Confirmation Pane submit() should call delete collection 1`] = `
 <DeleteCollectionConfirmationPane
-  closePanel={[Function]}
-  collectionName="container"
   explorer={
     Object {
-      "findSelectedCollection": [Function],
-      "isSelectedDatabaseShared": [Function],
       "refreshAllDatabases": [Function],
-      "selectedCollectionId": [Function],
-      "selectedNode": [Function],
     }
   }
 >
@@ -372,355 +366,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </TextFieldBase>
             </StyledTextFieldBase>
           </div>
-          <div
-            className="deleteCollectionFeedback"
-          >
-            <Text
-              block={true}
-              variant="small"
-            >
-              <span
-                className="css-66"
-              >
-                Help us improve Azure Cosmos DB!
-              </span>
-            </Text>
-            <Text
-              block={true}
-              variant="small"
-            >
-              <span
-                className="css-66"
-              >
-                What is the reason why you are deleting this 
-                container
-                ?
-              </span>
-            </Text>
-            <StyledTextFieldBase
-              id="deleteCollectionFeedbackInput"
-              multiline={true}
-              onChange={[Function]}
-              rows={3}
-              styles={
-                Object {
-                  "fieldGroup": Object {
-                    "width": 300,
-                  },
-                }
-              }
-              value=""
-            >
-              <TextFieldBase
-                deferredValidationTime={200}
-                id="deleteCollectionFeedbackInput"
-                multiline={true}
-                onChange={[Function]}
-                resizable={true}
-                rows={3}
-                styles={[Function]}
-                theme={
-                  Object {
-                    "disableGlobalClassNames": false,
-                    "effects": Object {
-                      "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
-                      "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "roundedCorner2": "2px",
-                      "roundedCorner4": "4px",
-                      "roundedCorner6": "6px",
-                    },
-                    "fonts": Object {
-                      "large": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "18px",
-                        "fontWeight": 400,
-                      },
-                      "medium": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "14px",
-                        "fontWeight": 400,
-                      },
-                      "mediumPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "16px",
-                        "fontWeight": 400,
-                      },
-                      "mega": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "68px",
-                        "fontWeight": 600,
-                      },
-                      "small": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "smallPlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "12px",
-                        "fontWeight": 400,
-                      },
-                      "superLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "42px",
-                        "fontWeight": 600,
-                      },
-                      "tiny": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "20px",
-                        "fontWeight": 600,
-                      },
-                      "xLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "24px",
-                        "fontWeight": 600,
-                      },
-                      "xSmall": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "10px",
-                        "fontWeight": 400,
-                      },
-                      "xxLarge": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "28px",
-                        "fontWeight": 600,
-                      },
-                      "xxLargePlus": Object {
-                        "MozOsxFontSmoothing": "grayscale",
-                        "WebkitFontSmoothing": "antialiased",
-                        "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
-                        "fontSize": "32px",
-                        "fontWeight": 600,
-                      },
-                    },
-                    "isInverted": false,
-                    "palette": Object {
-                      "accent": "#0078d4",
-                      "black": "#000000",
-                      "blackTranslucent40": "rgba(0,0,0,.4)",
-                      "blue": "#0078d4",
-                      "blueDark": "#002050",
-                      "blueLight": "#00bcf2",
-                      "blueMid": "#00188f",
-                      "green": "#107c10",
-                      "greenDark": "#004b1c",
-                      "greenLight": "#bad80a",
-                      "magenta": "#b4009e",
-                      "magentaDark": "#5c005c",
-                      "magentaLight": "#e3008c",
-                      "neutralDark": "#201f1e",
-                      "neutralLight": "#edebe9",
-                      "neutralLighter": "#f3f2f1",
-                      "neutralLighterAlt": "#faf9f8",
-                      "neutralPrimary": "#323130",
-                      "neutralPrimaryAlt": "#3b3a39",
-                      "neutralQuaternary": "#d2d0ce",
-                      "neutralQuaternaryAlt": "#e1dfdd",
-                      "neutralSecondary": "#605e5c",
-                      "neutralSecondaryAlt": "#8a8886",
-                      "neutralTertiary": "#a19f9d",
-                      "neutralTertiaryAlt": "#c8c6c4",
-                      "orange": "#d83b01",
-                      "orangeLight": "#ea4300",
-                      "orangeLighter": "#ff8c00",
-                      "purple": "#5c2d91",
-                      "purpleDark": "#32145a",
-                      "purpleLight": "#b4a0ff",
-                      "red": "#e81123",
-                      "redDark": "#a4262c",
-                      "teal": "#008272",
-                      "tealDark": "#004b50",
-                      "tealLight": "#00b294",
-                      "themeDark": "#005a9e",
-                      "themeDarkAlt": "#106ebe",
-                      "themeDarker": "#004578",
-                      "themeLight": "#c7e0f4",
-                      "themeLighter": "#deecf9",
-                      "themeLighterAlt": "#eff6fc",
-                      "themePrimary": "#0078d4",
-                      "themeSecondary": "#2b88d8",
-                      "themeTertiary": "#71afe5",
-                      "white": "#ffffff",
-                      "whiteTranslucent40": "rgba(255,255,255,.4)",
-                      "yellow": "#ffb900",
-                      "yellowDark": "#d29200",
-                      "yellowLight": "#fff100",
-                    },
-                    "rtl": undefined,
-                    "semanticColors": Object {
-                      "accentButtonBackground": "#0078d4",
-                      "accentButtonText": "#ffffff",
-                      "actionLink": "#323130",
-                      "actionLinkHovered": "#201f1e",
-                      "blockingBackground": "#FDE7E9",
-                      "blockingIcon": "#FDE7E9",
-                      "bodyBackground": "#ffffff",
-                      "bodyBackgroundChecked": "#edebe9",
-                      "bodyBackgroundHovered": "#f3f2f1",
-                      "bodyDivider": "#edebe9",
-                      "bodyFrameBackground": "#ffffff",
-                      "bodyFrameDivider": "#edebe9",
-                      "bodyStandoutBackground": "#faf9f8",
-                      "bodySubtext": "#605e5c",
-                      "bodyText": "#323130",
-                      "bodyTextChecked": "#000000",
-                      "buttonBackground": "#ffffff",
-                      "buttonBackgroundChecked": "#c8c6c4",
-                      "buttonBackgroundCheckedHovered": "#edebe9",
-                      "buttonBackgroundDisabled": "#f3f2f1",
-                      "buttonBackgroundHovered": "#f3f2f1",
-                      "buttonBackgroundPressed": "#edebe9",
-                      "buttonBorder": "#8a8886",
-                      "buttonBorderDisabled": "#f3f2f1",
-                      "buttonText": "#323130",
-                      "buttonTextChecked": "#201f1e",
-                      "buttonTextCheckedHovered": "#000000",
-                      "buttonTextDisabled": "#a19f9d",
-                      "buttonTextHovered": "#201f1e",
-                      "buttonTextPressed": "#201f1e",
-                      "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
-                      "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
-                      "cardStandoutBackground": "#ffffff",
-                      "defaultStateBackground": "#faf9f8",
-                      "disabledBackground": "#f3f2f1",
-                      "disabledBodySubtext": "#c8c6c4",
-                      "disabledBodyText": "#a19f9d",
-                      "disabledBorder": "#c8c6c4",
-                      "disabledSubtext": "#d2d0ce",
-                      "disabledText": "#a19f9d",
-                      "errorBackground": "#FDE7E9",
-                      "errorIcon": "#A80000",
-                      "errorText": "#a4262c",
-                      "focusBorder": "#605e5c",
-                      "infoBackground": "#f3f2f1",
-                      "infoIcon": "#605e5c",
-                      "inputBackground": "#ffffff",
-                      "inputBackgroundChecked": "#0078d4",
-                      "inputBackgroundCheckedHovered": "#005a9e",
-                      "inputBorder": "#605e5c",
-                      "inputBorderHovered": "#323130",
-                      "inputFocusBorderAlt": "#0078d4",
-                      "inputForegroundChecked": "#ffffff",
-                      "inputIcon": "#0078d4",
-                      "inputIconDisabled": "#a19f9d",
-                      "inputIconHovered": "#005a9e",
-                      "inputPlaceholderBackgroundChecked": "#deecf9",
-                      "inputPlaceholderText": "#605e5c",
-                      "inputText": "#323130",
-                      "inputTextHovered": "#201f1e",
-                      "link": "#0078d4",
-                      "linkHovered": "#004578",
-                      "listBackground": "#ffffff",
-                      "listHeaderBackgroundHovered": "#f3f2f1",
-                      "listHeaderBackgroundPressed": "#edebe9",
-                      "listItemBackgroundChecked": "#edebe9",
-                      "listItemBackgroundCheckedHovered": "#e1dfdd",
-                      "listItemBackgroundHovered": "#f3f2f1",
-                      "listText": "#323130",
-                      "listTextColor": "#323130",
-                      "menuBackground": "#ffffff",
-                      "menuDivider": "#c8c6c4",
-                      "menuHeader": "#0078d4",
-                      "menuIcon": "#0078d4",
-                      "menuItemBackgroundChecked": "#edebe9",
-                      "menuItemBackgroundHovered": "#f3f2f1",
-                      "menuItemBackgroundPressed": "#edebe9",
-                      "menuItemText": "#323130",
-                      "menuItemTextHovered": "#201f1e",
-                      "messageLink": "#005A9E",
-                      "messageLinkHovered": "#004578",
-                      "messageText": "#323130",
-                      "primaryButtonBackground": "#0078d4",
-                      "primaryButtonBackgroundDisabled": "#f3f2f1",
-                      "primaryButtonBackgroundHovered": "#106ebe",
-                      "primaryButtonBackgroundPressed": "#005a9e",
-                      "primaryButtonBorder": "transparent",
-                      "primaryButtonText": "#ffffff",
-                      "primaryButtonTextDisabled": "#d2d0ce",
-                      "primaryButtonTextHovered": "#ffffff",
-                      "primaryButtonTextPressed": "#ffffff",
-                      "severeWarningBackground": "#FED9CC",
-                      "severeWarningIcon": "#D83B01",
-                      "smallInputBorder": "#605e5c",
-                      "successBackground": "#DFF6DD",
-                      "successIcon": "#107C10",
-                      "successText": "#107C10",
-                      "variantBorder": "#edebe9",
-                      "variantBorderHovered": "#a19f9d",
-                      "warningBackground": "#FFF4CE",
-                      "warningHighlight": "#ffb900",
-                      "warningIcon": "#797775",
-                      "warningText": "#323130",
-                    },
-                    "spacing": Object {
-                      "l1": "20px",
-                      "l2": "32px",
-                      "m": "16px",
-                      "s1": "8px",
-                      "s2": "4px",
-                    },
-                  }
-                }
-                validateOnLoad={true}
-                value=""
-              >
-                <div
-                  className="ms-TextField ms-TextField--multiline root-55"
-                >
-                  <div
-                    className="ms-TextField-wrapper"
-                  >
-                    <div
-                      className="ms-TextField-fieldGroup fieldGroup-67"
-                    >
-                      <textarea
-                        aria-invalid={false}
-                        className="ms-TextField-field field-68"
-                        id="deleteCollectionFeedbackInput"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        onInput={[Function]}
-                        rows={3}
-                        value=""
-                      />
-                    </div>
-                  </div>
-                </div>
-              </TextFieldBase>
-            </StyledTextFieldBase>
-          </div>
         </div>
       </div>
       <PanelFooterComponent
@@ -2433,7 +2078,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   >
                     <button
                       aria-label="OK"
-                      className="ms-Button ms-Button--primary root-70"
+                      className="ms-Button ms-Button--primary root-66"
                       data-is-focusable={true}
                       id="sidePanelOkButton"
                       onClick={[Function]}
@@ -2445,16 +2090,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       type="submit"
                     >
                       <span
-                        className="ms-Button-flexContainer flexContainer-71"
+                        className="ms-Button-flexContainer flexContainer-67"
                         data-automationid="splitbuttonprimary"
                       >
                         <span
-                          className="ms-Button-textContainer textContainer-72"
+                          className="ms-Button-textContainer textContainer-68"
                         >
                           <span
-                            className="ms-Button-label label-74"
-                            id="id__6"
-                            key="id__6"
+                            className="ms-Button-label label-70"
+                            id="id__3"
+                            key="id__3"
                           >
                             OK
                           </span>

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -1,6 +1,6 @@
 jest.mock("../../Common/dataAccess/deleteDatabase");
 jest.mock("../../Shared/Telemetry/TelemetryProcessor");
-import { mount, ReactWrapper, shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
@@ -13,121 +13,102 @@ import { updateUserContext } from "../../UserContext";
 import Explorer from "../Explorer";
 import { TabsManager } from "../Tabs/TabsManager";
 import { useDatabases } from "../useDatabases";
+import { useSelectedNode } from "../useSelectedNode";
 import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
 
 describe("Delete Database Confirmation Pane", () => {
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
-      const fakeExplorer = {} as Explorer;
-      fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
+  const selectedDatabaseId = "testDatabase";
+  let fakeExplorer: Explorer;
+  let database: Database;
 
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
-      database.id = ko.observable<string>("testDatabase");
-
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      const wrapper = shallow(<DeleteDatabaseConfirmationPanel {...props} />);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
-
-      useDatabases.getState().addDatabases([database]);
-
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
-      useDatabases.getState().clearDatabases();
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "testDatabaseAccountName",
+        properties: {
+          cassandraEndpoint: "testEndpoint",
+        },
+        id: "testDatabaseAccountId",
+      } as DatabaseAccount,
+      apiType: "SQL",
     });
+    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
+    (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
   });
 
-  describe("submit()", () => {
-    const selectedDatabaseId = "testDatabse";
-    const database = { id: ko.observable("testDatabase") } as Database;
+  beforeEach(() => {
+    fakeExplorer = {} as Explorer;
+    fakeExplorer.refreshAllDatabases = () => undefined;
+    fakeExplorer.tabsManager = new TabsManager();
+
+    database = {} as Database;
     database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
     database.id = ko.observable<string>(selectedDatabaseId);
-    const fakeExplorer = {} as Explorer;
-    fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isSelectedDatabaseShared = () => false;
-    fakeExplorer.tabsManager = new TabsManager();
-    fakeExplorer.selectedNode = ko.observable();
+    database.nodeKind = "Database";
 
-    let wrapper: ReactWrapper;
-    beforeAll(() => {
-      updateUserContext({
-        databaseAccount: {
-          name: "testDatabaseAccountName",
-          properties: {
-            cassandraEndpoint: "testEndpoint",
-          },
-          id: "testDatabaseAccountId",
-        } as DatabaseAccount,
-        apiType: "SQL",
-      });
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-      (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
-      useDatabases.getState().addDatabases([database]);
-    });
-
-    beforeEach(() => {
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      wrapper = mount(<DeleteDatabaseConfirmationPanel {...props} />);
-    });
-
-    afterAll(() => useDatabases.getState().clearDatabases());
-
-    it("Should call delete database", () => {
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("button")).toBe(true);
-      wrapper.find("button").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-      wrapper.unmount();
-    });
-
-    it("should record feedback", async () => {
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-
-      expect(wrapper.exists("#deleteDatabaseFeedbackInput")).toBe(true);
-      const feedbackText = "Test delete Database feedback text";
-      wrapper
-        .find("#deleteDatabaseFeedbackInput")
-        .hostNodes()
-        .simulate("change", { target: { value: feedbackText } });
-
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-
-      const deleteFeedback = new DeleteFeedback(
-        "testDatabaseAccountId",
-        "testDatabaseAccountName",
-        ApiKind.SQL,
-        feedbackText
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
-        message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-      });
-      wrapper.unmount();
+    useDatabases.getState().addDatabases([database]);
+    useSelectedNode.getState().setSelectedNode(database);
+  });
+
+  afterEach(() => {
+    useDatabases.getState().clearDatabases();
+    useSelectedNode.getState().setSelectedNode(undefined);
+  });
+
+  it("shouldRecordFeedback() should return true if last non empty database or is last database that has shared throughput", () => {
+    const wrapper = shallow(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
+
+    useDatabases.getState().addDatabases([database]);
+    wrapper.setProps({ explorer: fakeExplorer });
+    expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
+    useDatabases.getState().clearDatabases();
+  });
+
+  it("Should call delete database", () => {
+    const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
+
+    wrapper
+      .find("#confirmDatabaseId")
+      .hostNodes()
+      .simulate("change", { target: { value: selectedDatabaseId } });
+    expect(wrapper.exists("button")).toBe(true);
+    wrapper.find("button").hostNodes().simulate("submit");
+    expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
+    wrapper.unmount();
+  });
+
+  it("should record feedback", async () => {
+    const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
+    wrapper
+      .find("#confirmDatabaseId")
+      .hostNodes()
+      .simulate("change", { target: { value: selectedDatabaseId } });
+
+    expect(wrapper.exists("#deleteDatabaseFeedbackInput")).toBe(true);
+    const feedbackText = "Test delete Database feedback text";
+    wrapper
+      .find("#deleteDatabaseFeedbackInput")
+      .hostNodes()
+      .simulate("change", { target: { value: feedbackText } });
+
+    expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
+    wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+    expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
+
+    const deleteFeedback = new DeleteFeedback(
+      "testDatabaseAccountId",
+      "testDatabaseAccountName",
+      ApiKind.SQL,
+      feedbackText
+    );
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
+      message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
     });
+    wrapper.unmount();
   });
 });

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -14,17 +14,16 @@ import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
 import { useDatabases } from "../useDatabases";
+import { useSelectedNode } from "../useSelectedNode";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
 import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface DeleteDatabaseConfirmationPanelProps {
   explorer: Explorer;
-  selectedDatabase: Database;
 }
 
 export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
   explorer,
-  selectedDatabase,
 }: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const isLastNonEmptyDatabase = useDatabases((state) => state.isLastNonEmptyDatabase);
@@ -33,6 +32,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   const [formError, setFormError] = useState<string>("");
   const [databaseInput, setDatabaseInput] = useState<string>("");
   const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
+  const selectedDatabase: Database = useSelectedNode.getState().findSelectedDatabase();
 
   const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
@@ -54,7 +54,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
       closeSidePanel();
       explorer.refreshAllDatabases();
       explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
-      explorer.selectedNode(undefined);
+      useSelectedNode.getState().setSelectedNode(undefined);
       selectedDatabase
         .collections()
         .forEach((collection: Collection) =>

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

@@ -23,7 +23,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isFixedCollectionWithSharedThroughputSupported": [Function],
             "isNotebookEnabled": [Function],
             "isNotebooksEnabledForAccount": [Function],
-            "isResourceTokenCollectionNodeSelected": [Function],
             "isSchemaEnabled": [Function],
             "isShellEnabled": [Function],
             "isSynapseLinkUpdating": [Function],
@@ -48,8 +47,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "container": [Circular],
               "parameters": [Function],
             },
-            "selectedDatabaseId": [Function],
-            "selectedNode": [Function],
             "sparkClusterConnectionInfo": [Function],
             "tabsManager": TabsManager {
               "activeTab": [Function],

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.test.tsx

@@ -1,17 +1,10 @@
 import { shallow } from "enzyme";
 import React from "react";
-import Explorer from "../../Explorer";
 import { LoadQueryPane } from "./LoadQueryPane";
 
 describe("Load Query Pane", () => {
   it("should render Default properly", () => {
-    const fakeExplorer = {} as Explorer;
-    const props = {
-      explorer: fakeExplorer,
-      closePanel: (): void => undefined,
-    };
-
-    const wrapper = shallow(<LoadQueryPane {...props} />);
+    const wrapper = shallow(<LoadQueryPane />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -7,14 +7,10 @@ import { Collection } from "../../../Contracts/ViewModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { userContext } from "../../../UserContext";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
+import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
-interface LoadQueryPaneProps {
-  explorer: Explorer;
-}
-
-export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({ explorer }: LoadQueryPaneProps): JSX.Element => {
+export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
@@ -58,7 +54,7 @@ export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({ explorer
   };
 
   const loadQueryFromFile = async (file: File): Promise<void> => {
-    const selectedCollection: Collection = explorer?.findSelectedCollection();
+    const selectedCollection: Collection = useSelectedNode.getState().findSelectedCollection();
     const reader = new FileReader();
     let fileData: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -13,7 +13,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isFixedCollectionWithSharedThroughputSupported": [Function],
       "isNotebookEnabled": [Function],
       "isNotebooksEnabledForAccount": [Function],
-      "isResourceTokenCollectionNodeSelected": [Function],
       "isSchemaEnabled": [Function],
       "isShellEnabled": [Function],
       "isSynapseLinkUpdating": [Function],
@@ -38,8 +37,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "selectedDatabaseId": [Function],
-      "selectedNode": [Function],
       "sparkClusterConnectionInfo": [Function],
       "tabsManager": TabsManager {
         "activeTab": [Function],

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.test.tsx

@@ -1,13 +1,10 @@
 import { shallow } from "enzyme";
 import React from "react";
-import Explorer from "../../Explorer";
 import { UploadItemsPane } from "./UploadItemsPane";
-const props = {
-  explorer: new Explorer(),
-};
+
 describe("Upload Items Pane", () => {
   it("should render Default properly", () => {
-    const wrapper = shallow(<UploadItemsPane {...props} />);
+    const wrapper = shallow(<UploadItemsPane />);
     expect(wrapper).toMatchSnapshot();
   });
 });

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -3,15 +3,11 @@ import React, { ChangeEvent, FunctionComponent, useState } from "react";
 import { Upload } from "../../../Common/Upload/Upload";
 import { UploadDetailsRecord } from "../../../Contracts/ViewModels";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
 import { getErrorMessage } from "../../Tables/Utilities";
+import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
-export interface UploadItemsPaneProps {
-  explorer: Explorer;
-}
-
-export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explorer }: UploadItemsPaneProps) => {
+export const UploadItemsPane: FunctionComponent = () => {
   const [files, setFiles] = useState<FileList>();
   const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
   const [formError, setFormError] = useState<string>("");
@@ -25,7 +21,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
       return;
     }
 
-    const selectedCollection = explorer.findSelectedCollection();
+    const selectedCollection = useSelectedNode.getState().findSelectedCollection();
     setIsExecuting(true);
 
     selectedCollection

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

@@ -1,26 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Delete Database Confirmation Pane submit() Should call delete database 1`] = `
+exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
 <DeleteDatabaseConfirmationPanel
-  closePanel={[Function]}
   explorer={
     Object {
-      "isSelectedDatabaseShared": [Function],
       "refreshAllDatabases": [Function],
-      "selectedNode": [Function],
       "tabsManager": TabsManager {
         "activeTab": [Function],
         "openedTabs": [Function],
       },
     }
   }
-  openNotificationConsole={[Function]}
-  selectedDatabase={
-    Object {
-      "collections": [Function],
-      "id": [Function],
-    }
-  }
 >
   <RightPaneForm
     formError=""