Enabled the ability to close the home tab (#1765)

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,3 +1,4 @@
+import { ReactTabKind, useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
@@ -8,6 +9,7 @@ import AddUdfIcon from "../../../../images/AddUdf.svg";
 import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
 import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
 import FeedbackIcon from "../../../../images/Feedback-Command.svg";
+import HomeIcon from "../../../../images/Home_16.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
 import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import GitHubIcon from "../../../../images/github.svg";
@@ -56,6 +58,9 @@ export function createStaticCommandBarButtons(
     }
   };
 
+  const homeBtn = createHomeButton();
+  buttons.push(homeBtn);
+
   if (configContext.platform !== Platform.Fabric) {
     const newCollectionBtn = createNewCollectionGroup(container);
     buttons.push(newCollectionBtn);
@@ -285,6 +290,18 @@ function createNewCollectionGroup(container: Explorer): CommandButtonComponentPr
   };
 }
 
+function createHomeButton(): CommandButtonComponentProps {
+  const label = "Home";
+  return {
+    iconSrc: HomeIcon,
+    iconAlt: label,
+    onCommandClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Home),
+    commandButtonLabel: label,
+    hasPopup: false,
+    ariaLabel: label,
+  };
+}
+
 function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
   if (configContext.platform === Platform.Emulator) {
     return undefined;

src/Explorer/Tabs/Tabs.tsx

@@ -182,11 +182,9 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
             )}
           </span>
           <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
-          {tabKind !== ReactTabKind.Home && (
-            <span className="tabIconSection">
-              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
-            </span>
-          )}
+          <span className="tabIconSection">
+            <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+          </span>
         </div>
       </span>
     </li>

src/hooks/useTabs.ts

@@ -105,7 +105,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       return true;
     });
     if (updatedTabs.length === 0 && configContext.platform !== Platform.Fabric) {
-      set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
+      set({ activeTab: undefined, activeReactTab: undefined });
     }
 
     if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
@@ -143,7 +143,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
       });
 
       if (get().openedTabs.length === 0 && configContext.platform !== Platform.Fabric) {
-        set({ activeTab: undefined, activeReactTab: ReactTabKind.Home });
+        set({ activeTab: undefined, activeReactTab: undefined });
       }
     }
   },