Updates to standalone gallery (#91)

* Add hyperlink icon for links in DialogComponent

* Use a Cosmos DB image for sample Persona

* Fix tests

* Update standalone gallery behavior to match DE gallery

* Use /gallery endpoint for gallery

* Update Gallery Card style to remove buttons in standalone mode

* Address comments

* Add text banner

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -16,11 +16,12 @@ import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
+import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 
 export interface NotebookMetadataComponentProps {
   data: IGalleryItem;
   isFavorite: boolean;
-  downloadButtonText: string;
+  downloadButtonText?: string;
   onTagClick: (tag: string) => void;
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
@@ -54,11 +55,18 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
               </>
             )}
           </Text>
-          <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+
+          {this.props.downloadButtonText && (
+            <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+          )}
         </Stack>
 
         <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 10 }}>
-          <Persona text={this.props.data.author} size={PersonaSize.size32} />
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            size={PersonaSize.size32}
+          />
           <Text>{dateString}</Text>
           <Text>
             <Icon iconName="RedEye" /> {this.props.data.views}

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -39,8 +39,10 @@ interface NotebookViewerComponentState {
   showProgressBar: boolean;
 }
 
-export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
-  implements GalleryUtils.DialogEnabledComponent {
+export class NotebookViewerComponent extends React.Component<
+  NotebookViewerComponentProps,
+  NotebookViewerComponentState
+> {
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 
@@ -73,10 +75,6 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
     this.loadNotebookContent();
   }
 
-  setDialogProps = (dialogProps: DialogProps): void => {
-    this.setState({ dialogProps });
-  };
-
   private async loadNotebookContent(): Promise<void> {
     try {
       const response = await fetch(this.props.notebookUrl);
@@ -121,9 +119,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
             <NotebookMetadataComponent
               data={this.state.galleryItem}
               isFavorite={this.state.isFavorite}
-              downloadButtonText={
-                this.props.container ? "Download to my notebooks" : "Edit/Run in Cosmos DB data explorer"
-              }
+              downloadButtonText={this.props.container && "Download to my notebooks"}
               onTagClick={this.props.onTagClick}
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}
@@ -179,7 +175,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
   };
 
   private downloadItem = async (): Promise<void> => {
-    GalleryUtils.downloadItem(this, this.props.container, this.props.junoClient, this.state.galleryItem, item =>
+    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
       this.setState({ galleryItem: item })
     );
   };

src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap

@@ -48,6 +48,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
     verticalAlign="center"
   >
     <StyledPersonaBase
+      imageUrl={false}
       size={11}
       text="author"
     />
@@ -147,6 +148,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
     verticalAlign="center"
   >
     <StyledPersonaBase
+      imageUrl={false}
       size={11}
       text="author"
     />