From 1c0fed88c0f3db55e1f0385e89feac1e662acda4 Mon Sep 17 00:00:00 2001
From: Srinath Narayanan <srnara@microsoft.com>
Date: Fri, 5 Feb 2021 02:32:55 -0800
Subject: [PATCH] Changes to cards in notebook gallery (#422)

* added gallery changes

* addressed PR comments
---
 .../Cards/GalleryCardComponent.tsx            | 19 ++++++++---
 .../NotebookMetadataComponent.tsx             | 34 ++++++++++++-------
 .../Panes/PublishNotebookPaneComponent.tsx    |  6 ++--
 ...PublishNotebookPaneComponent.test.tsx.snap |  6 ++--
 4 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
index 893e1dee4..3ba3e8e88 100644
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -38,7 +38,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
     GalleryCardComponent.cardImageHeight / GalleryCardComponent.CARD_WIDTH;
-  private static readonly cardDescriptionMaxChars = 88;
+  private static readonly cardDescriptionMaxChars = 80;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
 
@@ -105,13 +105,14 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           </Text>
 
           <Text variant="small" styles={{ root: { height: 36 } }}>
-            {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)}
+            {this.renderTruncatedDescription()}
           </Text>
 
           <span>
-            {this.generateIconText("RedEye", this.props.data.views.toString())}
-            {this.generateIconText("Download", this.props.data.downloads.toString())}
-            {this.props.isFavorite !== undefined &&
+            {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.props.data.downloads !== undefined &&
+              this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.data.favorites !== undefined &&
               this.generateIconText("Heart", this.props.data.favorites.toString())}
           </span>
         </Card.Section>
@@ -148,6 +149,14 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     );
   }
 
+  private renderTruncatedDescription = (): string => {
+    let truncatedDescription = this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars);
+    if (this.props.data.description.length > GalleryCardComponent.cardDescriptionMaxChars) {
+      truncatedDescription = `${truncatedDescription} ...`;
+    }
+    return truncatedDescription;
+  };
+
   private generateIconText = (iconName: string, text: string): JSX.Element => {
     return (
       <Text
diff --git a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
index d175aa183..19962c554 100644
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -31,6 +31,26 @@ export interface NotebookMetadataComponentProps {
 }
 
 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
+  private renderFavouriteButton = (): JSX.Element => {
+    return (
+      <Text>
+        {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
+          </>
+        ) : (
+          <>
+            <Icon iconName="Heart" /> {this.props.data.favorites} likes
+          </>
+        )}
+      </Text>
+    );
+  };
+
   public render(): JSX.Element {
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
@@ -49,19 +69,7 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
             </Text>
           </Stack.Item>
 
-          <Stack.Item>
-            <Text>
-              {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>
-          </Stack.Item>
+          <Stack.Item>{this.renderFavouriteButton()}</Stack.Item>
 
           {this.props.downloadButtonText && (
             <Stack.Item>
diff --git a/src/Explorer/Panes/PublishNotebookPaneComponent.tsx b/src/Explorer/Panes/PublishNotebookPaneComponent.tsx
index 4d6278d27..559bf3b09 100644
--- a/src/Explorer/Panes/PublishNotebookPaneComponent.tsx
+++ b/src/Explorer/Panes/PublishNotebookPaneComponent.tsx
@@ -301,9 +301,9 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
                 thumbnailUrl: this.state.imageSrc,
                 created: this.props.notebookCreatedDate,
                 isSample: false,
-                downloads: 0,
-                favorites: 0,
-                views: 0,
+                downloads: undefined,
+                favorites: undefined,
+                views: undefined,
                 newCellId: undefined,
                 policyViolations: undefined,
                 pendingScanJobIds: undefined,
diff --git a/src/Explorer/Panes/__snapshots__/PublishNotebookPaneComponent.test.tsx.snap b/src/Explorer/Panes/__snapshots__/PublishNotebookPaneComponent.test.tsx.snap
index e9be0d964..4986c1ef9 100644
--- a/src/Explorer/Panes/__snapshots__/PublishNotebookPaneComponent.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/PublishNotebookPaneComponent.test.tsx.snap
@@ -89,8 +89,8 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
             "author": "CosmosDB",
             "created": "2020-07-17T00:00:00Z",
             "description": "",
-            "downloads": 0,
-            "favorites": 0,
+            "downloads": undefined,
+            "favorites": undefined,
             "gitSha": undefined,
             "id": undefined,
             "isSample": false,
@@ -102,7 +102,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
               "",
             ],
             "thumbnailUrl": undefined,
-            "views": 0,
+            "views": undefined,
           }
         }
         showDelete={false}