Move tabs state out into React (#621)

This PR is just about moving the tabs array. I'm hoping to let it bake for a bit before merging the rest of the tabs in react work.

Preview here: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Fcosmos-explorer-preview.azurewebsites.net%2Fcommit%2Fda809beb82bb54dc82da18eda41caaf7b9b6597f%2Fexplorer.html#@microsoft.onmicrosoft.com/resource/subscriptions/b9c77f10-b438-4c32-9819-eef8a654e478/resourceGroups/stfaul/providers/Microsoft.DocumentDb/databaseAccounts/stfaul-sql/dataExplorer

src/hooks/useObservableState.ts

@@ -0,0 +1,16 @@
+import { isObservableArray, Observable, ObservableArray } from "knockout";
+import { useEffect, useState } from "react";
+
+export function useObservableState<T>(observable: Observable<T>): [T, (s: T) => void];
+export function useObservableState<T>(observable: ObservableArray<T>): [T[], (s: T[]) => void];
+export function useObservableState<T>(observable: ObservableArray<T> | Observable<T>): [T | T[], (s: T | T[]) => void] {
+  const [value, setValue] = useState(observable());
+
+  useEffect(() => {
+    isObservableArray(observable)
+      ? observable.subscribe((values) => setValue([...values]))
+      : observable.subscribe(setValue);
+  }, [observable]);
+
+  return [value, observable];
+}

src/hooks/useTabs.ts

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import TabsBase from "../Explorer/Tabs/TabsBase";
+import { TabsManager } from "../Explorer/Tabs/TabsManager";
+import { useObservableState } from "./useObservableState";
+
+export type UseTabs = {
+  tabs: readonly TabsBase[];
+  tabsManager: TabsManager;
+};
+
+export function useTabs(): UseTabs {
+  const [tabsManager] = useState(() => new TabsManager());
+  const [tabs] = useObservableState(tabsManager.openedTabs);
+
+  return { tabs, tabsManager };
+}