Remove enableGallery feature flag (#68)

* Remove enableGallery feature flag

* Fix bugs

* Add tests to increase coverage

* Move favorites functionality behind feature.enableGalleryPublish flag

* Show code cells in NotebookViewer

* Use cosmos db logo as persona image for sample notebook gallery cards

* Update gallery card snapshot to fix test

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -48,7 +48,6 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     { key: "feature.dataexplorerexecutesproc", label: "Execute stored procedure", value: "true" },
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
-    { key: "feature.enablegallery", label: "Enable Notebook Gallery", value: "true" },
     { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
     { key: "feature.canexceedmaximumvalue", label: "Can exceed max value", value: "true" },
     {

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -157,14 +157,14 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enablegallery"
-          label="Enable Notebook Gallery"
+          key="feature.enablegallerypublish"
+          label="Enable Notebook Gallery Publishing"
           onChange={[Function]}
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enablegallerypublish"
-          label="Enable Notebook Gallery Publishing"
+          key="feature.canexceedmaximumvalue"
+          label="Can exceed max value"
           onChange={[Function]}
         />
       </Stack>
@@ -172,12 +172,6 @@ exports[`Feature panel renders all flags 1`] = `
         className="checkboxRow"
         horizontalAlign="space-between"
       >
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.enablefixedcollectionwithsharedthroughput"

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -17,6 +17,7 @@ import {
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
+import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;
@@ -55,7 +56,11 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     return (
       <Card aria-label="Notebook Card" tokens={GalleryCardComponent.cardTokens} onClick={this.props.onClick}>
         <Card.Item>
-          <Persona text={this.props.data.author} secondaryText={dateString} />
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            secondaryText={dateString}
+          />
         </Card.Item>
 
         <Card.Item fill>
@@ -89,15 +94,9 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
         </Card.Section>
 
         <Card.Section horizontal styles={{ root: { alignItems: "flex-end" } }}>
-          <Text variant="tiny" styles={{ root: { color: "#ccc" } }}>
-            <Icon iconName="RedEye" styles={{ root: { verticalAlign: "middle" } }} /> {this.props.data.views}
-          </Text>
-          <Text variant="tiny" styles={{ root: { color: "#ccc" } }}>
-            <Icon iconName="Download" styles={{ root: { verticalAlign: "middle" } }} /> {this.props.data.downloads}
-          </Text>
-          <Text variant="tiny" styles={{ root: { color: "#ccc" } }}>
-            <Icon iconName="Heart" styles={{ root: { verticalAlign: "middle" } }} /> {this.props.data.favorites}
-          </Text>
+          {this.generateIconText("RedEye", this.props.data.views.toString())}
+          {this.generateIconText("Download", this.props.data.downloads.toString())}
+          {this.props.isFavorite !== undefined && this.generateIconText("Heart", this.props.data.favorites.toString())}
         </Card.Section>
 
         <Card.Item>
@@ -105,17 +104,18 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
         </Card.Item>
 
         <Card.Section horizontal styles={{ root: { marginTop: 0 } }}>
-          {this.generateIconButtonWithTooltip(
-            this.props.isFavorite ? "HeartFill" : "Heart",
-            this.props.isFavorite ? "Unlike" : "Like",
-            this.props.isFavorite ? this.onUnfavoriteClick : this.onFavoriteClick
-          )}
+          {this.props.isFavorite !== undefined &&
+            this.generateIconButtonWithTooltip(
+              this.props.isFavorite ? "HeartFill" : "Heart",
+              this.props.isFavorite ? "Unlike" : "Like",
+              this.props.isFavorite ? this.onUnfavoriteClick : this.onFavoriteClick
+            )}
 
           {this.generateIconButtonWithTooltip("Download", "Download", this.onDownloadClick)}
 
           {this.props.showDelete && (
             <div style={{ width: "100%", textAlign: "right" }}>
-              {this.generateIconButtonWithTooltip("Delete", "Remove", this.props.onDeleteClick)}
+              {this.generateIconButtonWithTooltip("Delete", "Remove", this.onDeleteClick)}
             </div>
           )}
         </Card.Section>
@@ -123,6 +123,14 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     );
   }
 
+  private generateIconText = (iconName: string, text: string): JSX.Element => {
+    return (
+      <Text variant="tiny" styles={{ root: { color: "#ccc" } }}>
+        <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
+      </Text>
+    );
+  };
+
   /*
    * Fluent UI doesn't support tooltips on IconButtons out of the box. In the meantime the recommendation is
    * to do the following (from https://developer.microsoft.com/en-us/fluentui#/controls/web/button)

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`GalleryCardComponent renders 1`] = `
 >
   <CardItem>
     <StyledPersonaBase
+      imageUrl={false}
       secondaryText="Invalid Date"
       text="author"
     />
@@ -256,6 +257,7 @@ exports[`GalleryCardComponent renders 1`] = `
               "iconName": "Delete",
             }
           }
+          onClick={[Function]}
           title="Remove"
         />
       </StyledTooltipHostBase>

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -75,27 +75,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private static readonly mostViewedText = "Most viewed";
   private static readonly mostDownloadedText = "Most downloaded";
-  private static readonly mostFavoritedText = "Most favorited";
+  private static readonly mostFavoritedText = "Most liked";
   private static readonly mostRecentText = "Most recent";
 
-  private static readonly sortingOptions: IDropdownOption[] = [
-    {
-      key: SortBy.MostViewed,
-      text: GalleryViewerComponent.mostViewedText
-    },
-    {
-      key: SortBy.MostDownloaded,
-      text: GalleryViewerComponent.mostDownloadedText
-    },
-    {
-      key: SortBy.MostFavorited,
-      text: GalleryViewerComponent.mostFavoritedText
-    },
-    {
-      key: SortBy.MostRecent,
-      text: GalleryViewerComponent.mostRecentText
-    }
-  ];
+  private readonly sortingOptions: IDropdownOption[];
 
   private sampleNotebooks: IGalleryItem[];
   private publicNotebooks: IGalleryItem[];
@@ -118,8 +101,29 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       dialogProps: undefined
     };
 
+    this.sortingOptions = [
+      {
+        key: SortBy.MostViewed,
+        text: GalleryViewerComponent.mostViewedText
+      },
+      {
+        key: SortBy.MostDownloaded,
+        text: GalleryViewerComponent.mostDownloadedText
+      },
+      {
+        key: SortBy.MostRecent,
+        text: GalleryViewerComponent.mostRecentText
+      }
+    ];
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      this.sortingOptions.push({
+        key: SortBy.MostFavorited,
+        text: GalleryViewerComponent.mostFavoritedText
+      });
+    }
+
     this.loadTabContent(this.state.selectedTab, this.state.searchText, this.state.sortBy, false);
-    if (this.props.container) {
+    if (this.props.container?.isGalleryPublishEnabled()) {
       this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
     }
   }
@@ -131,16 +135,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   public render(): JSX.Element {
     const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
-    if (this.props.container) {
-      if (this.props.container.isGalleryPublishEnabled()) {
-        tabs.push(this.createTab(GalleryTab.PublicGallery, this.state.publicNotebooks));
-      }
-
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      tabs.push(this.createTab(GalleryTab.PublicGallery, this.state.publicNotebooks));
       tabs.push(this.createTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
-
-      if (this.props.container.isGalleryPublishEnabled()) {
-        tabs.push(this.createTab(GalleryTab.Published, this.state.publishedNotebooks));
-      }
+      tabs.push(this.createTab(GalleryTab.Published, this.state.publishedNotebooks));
     }
 
     const pivotProps: IPivotProps = {
@@ -189,11 +187,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
             <Label>Sort by</Label>
           </Stack.Item>
           <Stack.Item styles={{ root: { minWidth: 200 } }}>
-            <Dropdown
-              options={GalleryViewerComponent.sortingOptions}
-              selectedKey={this.state.sortBy}
-              onChange={this.onDropdownChange}
-            />
+            <Dropdown options={this.sortingOptions} selectedKey={this.state.sortBy} onChange={this.onDropdownChange} />
           </Stack.Item>
         </Stack>
 
@@ -405,7 +399,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   };
 
   private onRenderCell = (data?: IGalleryItem): JSX.Element => {
-    const isFavorite = this.favoriteNotebooks?.find(item => item.id === data.id) !== undefined;
+    let isFavorite: boolean;
+    if (this.props.container?.isGalleryPublishEnabled()) {
+      isFavorite = this.favoriteNotebooks?.find(item => item.id === data.id) !== undefined;
+    }
     const props: GalleryCardComponentProps = {
       data,
       isFavorite,
@@ -434,7 +431,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         [GalleryUtils.NotebookViewerParams.GalleryItemId]: data.id
       });
 
-      window.open(`/notebookViewer.html?${params.toString()}`);
+      const location = new URL("./notebookViewer.html", window.location.href).href;
+      window.open(`${location}?${params.toString()}`);
     }
   };
 

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -67,10 +67,6 @@ exports[`GalleryViewerComponent renders 1`] = `
                     "key": 1,
                     "text": "Most downloaded",
                   },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
                   Object {
                     "key": 3,
                     "text": "Most recent",

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -44,11 +44,15 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
             {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
           </Text>
           <Text>
-            <IconButton
-              iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
-              onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
-            />
-            {this.props.data.favorites} likes
+            {this.props.isFavorite !== undefined && (
+              <>
+                <IconButton
+                  iconProps={{ iconName: this.props.isFavorite ? "HeartFill" : "Heart" }}
+                  onClick={this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick}
+                />
+                {this.props.data.favorites} likes
+              </>
+            )}
           </Text>
           <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
         </Stack>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -129,7 +129,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
           <></>
         )}
 
-        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: true })}
+        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: false })}
 
         {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
       </div>