Notebooks Gallery (#59)

* Initial commit

* Address PR comments

* Move notebook related stuff to NotebookManager and dynamically load it

* Add New gallery callout and other UI tweaks

* Update test snapshot

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -3,6 +3,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { CommandBarComponentButtonFactory } from "./CommandBarComponentButtonFactory";
 import { ExplorerStub } from "../../OpenActionsStubs";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import NotebookManager from "../../Notebook/NotebookManager";
 
 describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: ViewModels.Explorer;
@@ -19,6 +20,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isGalleryEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
     });
@@ -81,6 +83,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isGalleryEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
     });
@@ -161,6 +164,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isGalleryEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
     });
@@ -247,7 +251,9 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
       mockExplorer.isGalleryEnabled = ko.computed<boolean>(() => false);
-      mockExplorer.gitHubOAuthService = new GitHubOAuthService(undefined);
+      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.notebookManager = new NotebookManager();
+      mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
     });
 
     beforeEach(() => {
@@ -268,7 +274,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     it("Notebooks is enabled and GitHubOAuthService is logged in - manage github settings button should be visible", () => {
       mockExplorer.isNotebookEnabled = ko.observable(true);
-      mockExplorer.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
+      mockExplorer.notebookManager.gitHubOAuthService.isLoggedIn = jest.fn().mockReturnValue(true);
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const manageGitHubSettingsBtn = buttons.find(

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -26,7 +26,6 @@ import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg
 import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
 import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
 import LibraryManageIcon from "../../../../images/notebook/Spark-library-manage.svg";
-import GalleryIcon from "../../../../images/GalleryIcon.svg";
 import GitHubIcon from "../../../../images/github.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
 import { config, Platform } from "../../../Config";
@@ -64,7 +63,7 @@ export class CommandBarComponentButtonFactory {
       ];
       buttons.push(newNotebookButton);
 
-      if (container.gitHubOAuthService) {
+      if (container.notebookManager?.gitHubOAuthService) {
         buttons.push(CommandBarComponentButtonFactory.createManageGitHubAccountButton(container));
       }
     }
@@ -87,10 +86,6 @@ export class CommandBarComponentButtonFactory {
       buttons.push(CommandBarComponentButtonFactory.createOpenTerminalButton(container));
 
       buttons.push(CommandBarComponentButtonFactory.createNotebookWorkspaceResetButton(container));
-
-      if (container.isGalleryEnabled()) {
-        buttons.push(CommandBarComponentButtonFactory.createGalleryButton(container));
-      }
     }
 
     // TODO: Should be replaced with the create arcadia spark pool button
@@ -575,19 +570,6 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createGalleryButton(container: ViewModels.Explorer): ViewModels.NavbarButtonConfig {
-    const label = "View Gallery";
-    return {
-      iconSrc: GalleryIcon,
-      iconAlt: label,
-      onCommandClick: () => container.openGallery(),
-      commandButtonLabel: label,
-      hasPopup: false,
-      disabled: false,
-      ariaLabel: label
-    };
-  }
-
   private static createOpenMongoTerminalButton(container: ViewModels.Explorer): ViewModels.NavbarButtonConfig {
     const label = "Open Mongo Shell";
     const tooltip =
@@ -654,7 +636,7 @@ export class CommandBarComponentButtonFactory {
   }
 
   private static createManageGitHubAccountButton(container: ViewModels.Explorer): ViewModels.NavbarButtonConfig {
-    let connectedToGitHub: boolean = container.gitHubOAuthService.isLoggedIn();
+    let connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
     const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
     return {
       iconSrc: GitHubIcon,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -36,11 +36,12 @@ export class CommandBarUtil {
 
           const result: ICommandBarItemProps = {
             iconProps: {
-              iconType: IconType.image,
               style: {
-                width: StyleConstants.CommandBarIconWidth // 16
+                width: StyleConstants.CommandBarIconWidth, // 16
+                alignSelf: btn.iconName ? "baseline" : undefined
               },
-              imageProps: { src: btn.iconSrc, alt: btn.iconAlt }
+              imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
+              iconName: btn.iconName
             },
             onClick: btn.onCommandClick,
             key: `${btn.commandButtonLabel}${index}`,