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
Azure · Jul 6, 2020 · 84ea379 · 84ea379
1 parent 27024ef
commit 84ea379
Show file tree

Hide file tree

Showing 29 changed files with 594 additions and 445 deletions.
diff --git a/images/CosmosDB-logo.svg b/images/CosmosDB-logo.svg
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -111,7 +111,6 @@ export class Features {
   public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableGallery = "enablegallery";
   public static readonly enableGalleryPublish = "enablegallerypublish";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";

diff --git a/src/Config.ts b/src/Config.ts
@@ -16,7 +16,6 @@ interface Config {
   ARM_API_VERSION: string;
   GRAPH_ENDPOINT: string;
   GRAPH_API_VERSION: string;
-  AZURESAMPLESCOSMOSDBPAT: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
@@ -44,8 +43,7 @@ let config: Config = {
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
-  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
-  AZURESAMPLESCOSMOSDBPAT: "99e38770e29b4a61d7c49f188780504efd35cc86" //[SuppressMessage("Microsoft.Security", "CS001:SecretInline", Justification="  // this PAT is a "no scopes" PAT with zero access to any projects, this is just used to get around the dev.github.com rate limit when accessing public samples repo.")]
+  JUNO_ENDPOINT: "https://tools.cosmos.azure.com"
 };
 
 // Injected for local develpment. These will be removed in the production bundle by webpack

diff --git a/src/Contracts/ViewModels.ts b/src/Contracts/ViewModels.ts
@@ -83,7 +83,6 @@ export interface Explorer {
   extensionEndpoint: ko.Observable<string>;
   armEndpoint: ko.Observable<string>;
   isFeatureEnabled: (feature: string) => boolean;
-  isGalleryEnabled: ko.Computed<boolean>;
   isGalleryPublishEnabled: ko.Computed<boolean>;
   isGitHubPaneEnabled: ko.Observable<boolean>;
   isPublishNotebookPaneEnabled: ko.Observable<boolean>;
@@ -230,7 +229,7 @@ export interface Explorer {
   openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean>; // True if it was opened, false otherwise
   resetNotebookWorkspace(): void;
   importAndOpen: (path: string) => Promise<boolean>;
-  importAndOpenFromGallery: (name: string, content: string) => Promise<boolean>;
+  importAndOpenContent: (name: string, content: string) => Promise<boolean>;
   publishNotebook: (name: string, content: string) => void;
   openNotebookTerminal: (kind: TerminalKind) => void;
   openGallery: (notebookUrl?: string, galleryItem?: IGalleryItem, isFavorite?: boolean) => void;

diff --git a/src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx b/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" },
     {

diff --git a/src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap b/src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap
@@ -157,27 +157,21 @@ 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>
       <Stack
         className="checkboxRow"
         horizontalAlign="space-between"
       >
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.enablefixedcollectionwithsharedthroughput"

diff --git a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx b/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,40 +94,43 @@ 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>
           <Separator styles={{ root: { padding: 0, height: 1 } }} />
         </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>
       </Card>
     );
   }
 
+  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)

diff --git a/src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap b/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>

diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/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()}`);
     }
   };
 

diff --git a/src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap b/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",

diff --git a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx b/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>

diff --git a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx b/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>
-Original file line number
+Diff line change
@@ Expand Up @@
               <></>
             )}
-            {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: true })}
+            {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, { hideInputs: false })}
             {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}
           </div>
@@ Expand Down @@