Public gallery improvements (#409)

- [x] Don't show extension in name field for publish - [x] Open "Your published work" tab after publishing - [x] Continue showing dialog for Report Abuse status - [x] For showing COC in Public Gallery tab show backdrop of thumbnails - [x] Liked -> My Favorites & Your published work -> My published work
2025-12-20 01:11:25 +00:00 · 2021-01-29 22:34:38 +05:30
parent 59113d7bbf
commit 9278654479
13 changed files with 190 additions and 66 deletions
--- a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
+++ b/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
@@ -3,7 +3,13 @@ import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric
 import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
 import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import { Link } from "office-ui-fabric-react/lib/Link";
-import { ChoiceGroup, FontIcon, IChoiceGroupProps } from "office-ui-fabric-react";
+import {
+  ChoiceGroup,
+  FontIcon,
+  IChoiceGroupProps,
+  IProgressIndicatorProps,
+  ProgressIndicator,
+} from "office-ui-fabric-react";

 export interface TextFieldProps extends ITextFieldProps {
  label: string;
@@ -27,6 +33,7 @@ export interface DialogProps {
  choiceGroupProps?: IChoiceGroupProps;
  textFieldProps?: TextFieldProps;
  linkProps?: LinkProps;
+  progressIndicatorProps?: IProgressIndicatorProps;
  primaryButtonText: string;
  secondaryButtonText: string;
  onPrimaryButtonClick: () => void;
@@ -69,6 +76,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
    const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
    const linkProps: LinkProps = this.props.linkProps;
+    const progressIndicatorProps: IProgressIndicatorProps = this.props.progressIndicatorProps;
    const primaryButtonProps: IButtonProps = {
      text: this.props.primaryButtonText,
      disabled: this.props.primaryButtonDisabled || false,
@@ -91,6 +99,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
            {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
          </Link>
        )}
+        {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
        <DialogFooter>
          <PrimaryButton {...primaryButtonProps} />
          {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -127,7 +127,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
              {this.props.isFavorite !== undefined &&
                this.generateIconButtonWithTooltip(
                  this.props.isFavorite ? "HeartFill" : "Heart",
-                  this.props.isFavorite ? "Unlike" : "Like",
+                  this.props.isFavorite ? "Unfavorite" : "Favorite",
                  "left",
                  this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
                )}
--- a/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
@@ -185,7 +185,7 @@ exports[`GalleryCardComponent renders 1`] = `
            "gapSpace": 0,
          }
        }
-        content="Like"
+        content="Favorite"
        id="TooltipHost-IconButton-Heart"
        styles={
          Object {
@@ -197,14 +197,14 @@ exports[`GalleryCardComponent renders 1`] = `
        }
      >
        <CustomizedIconButton
-          ariaLabel="Like"
+          ariaLabel="Favorite"
          iconProps={
            Object {
              "iconName": "Heart",
            }
          }
          onClick={[Function]}
-          title="Like"
+          title="Favorite"
        />
      </StyledTooltipHostBase>
      <StyledTooltipHostBase
--- a/src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx
@@ -7,14 +7,20 @@ import {
 } from "./GalleryAndNotebookViewerComponent";

 export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
+  private key: string;
  public parameters: ko.Observable<number>;

  constructor(private props: GalleryAndNotebookViewerComponentProps) {
+    this.reset();
    this.parameters = ko.observable<number>(Date.now());
  }

  public renderComponent(): JSX.Element {
-    return <GalleryAndNotebookViewerComponent {...this.props} />;
+    return <GalleryAndNotebookViewerComponent key={this.key} {...this.props} />;
+  }
+
+  public reset(): void {
+    this.key = `GalleryAndNotebookViewerComponent-${Date.now()}`;
  }

  public triggerRender(): void {
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
@@ -7,3 +7,12 @@
  width: 100%;
  font-family: @DataExplorerFont;
 }
+
+.publicGalleryTabContainer {
+  position: relative;
+}
+
+.publicGalleryTabOverlayContent {
+  background: white;
+  padding: 20px;
+}
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -10,6 +10,7 @@ import {
  IRectangle,
  Label,
  List,
+  Overlay,
  Pivot,
  PivotItem,
  SearchBox,
@@ -74,14 +75,14 @@ interface GalleryTabInfo {
 export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps, GalleryViewerComponentState> {
  public static readonly OfficialSamplesTitle = "Official samples";
  public static readonly PublicGalleryTitle = "Public gallery";
-  public static readonly FavoritesTitle = "Liked";
-  public static readonly PublishedTitle = "Your published work";
+  public static readonly FavoritesTitle = "My favorites";
+  public static readonly PublishedTitle = "My published work";

  private static readonly rowsPerPage = 5;

  private static readonly mostViewedText = "Most viewed";
  private static readonly mostDownloadedText = "Most downloaded";
-  private static readonly mostFavoritedText = "Most liked";
+  private static readonly mostFavoritedText = "Most favorited";
  private static readonly mostRecentText = "Most recent";

  private readonly sortingOptions: IDropdownOption[];
@@ -222,8 +223,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
      content: this.isEmptyData(data)
        ? this.createEmptyTabContent(
            "ContactHeart",
-            "You have not liked anything",
-            "Like any notebook from Official Samples or Public gallery"
+            "You have not favorited anything",
+            "Favorite any notebook from Official samples or Public gallery"
          )
        : this.createSearchBarHeader(this.createCardsTabContent(data)),
    };
@@ -245,7 +246,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  private createPublishedNotebooksTabContent = (data: IGalleryItem[]): JSX.Element => {
    const { published, underReview, removed } = GalleryUtils.filterPublishedNotebooks(data);
    const content = (
-      <Stack tokens={{ childrenGap: 10 }}>
+      <Stack tokens={{ childrenGap: 20 }}>
        {published?.length > 0 &&
          this.createPublishedNotebooksSectionContent(
            undefined,
@@ -276,7 +277,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    content: JSX.Element
  ): JSX.Element => {
    return (
-      <Stack tokens={{ childrenGap: 5 }}>
+      <Stack tokens={{ childrenGap: 10 }}>
        {title && <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{title}</Text>}
        {description && <Text>{description}</Text>}
        {content}
@@ -285,15 +286,22 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  };

  private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
-    return acceptedCodeOfConduct === false ? (
-      <CodeOfConductComponent
-        junoClient={this.props.junoClient}
-        onAcceptCodeOfConduct={(result: boolean) => {
-          this.setState({ isCodeOfConductAccepted: result });
-        }}
-      />
-    ) : (
-      this.createSearchBarHeader(this.createCardsTabContent(data))
+    return (
+      <div className="publicGalleryTabContainer">
+        {this.createSearchBarHeader(this.createCardsTabContent(data))}
+        {acceptedCodeOfConduct === false && (
+          <Overlay isDarkThemed>
+            <div className="publicGalleryTabOverlayContent">
+              <CodeOfConductComponent
+                junoClient={this.props.junoClient}
+                onAcceptCodeOfConduct={(result: boolean) => {
+                  this.setState({ isCodeOfConductAccepted: result });
+                }}
+              />
+            </div>
+          </Overlay>
+        )}
+      </div>
    );
  }

--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -3,14 +3,11 @@
 */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { IChoiceGroupProps, Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
-import * as Logger from "../../../Common/Logger";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
@@ -21,7 +18,7 @@ import Explorer from "../../Explorer";
 import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
-import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { handleError } from "../../../Common/ErrorHandlingUtils";

 export interface NotebookViewerComponentProps {
  container?: Explorer;
@@ -178,6 +175,32 @@ export class NotebookViewerComponent
    };
  }

+  // DialogHost
+  showOkModalDialog(
+    title: string,
+    msg: string,
+    okLabel: string,
+    onOk: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps
+  ): void {
+    this.setState({
+      dialogProps: {
+        isModal: true,
+        visible: true,
+        title,
+        subText: msg,
+        primaryButtonText: okLabel,
+        onPrimaryButtonClick: () => {
+          this.setState({ dialogProps: undefined });
+          onOk && onOk();
+        },
+        secondaryButtonText: undefined,
+        onSecondaryButtonClick: undefined,
+        progressIndicatorProps,
+      },
+    });
+  }
+
  // DialogHost
  showOkCancelModalDialog(
    title: string,
@@ -186,8 +209,10 @@ export class NotebookViewerComponent
    onOk: () => void,
    cancelLabel: string,
    onCancel: () => void,
+    progressIndicatorProps?: IProgressIndicatorProps,
    choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
  ): void {
    this.setState({
      dialogProps: {
@@ -205,8 +230,10 @@ export class NotebookViewerComponent
          this.setState({ dialogProps: undefined });
          onCancel && onCancel();
        },
+        progressIndicatorProps,
        choiceGroupProps,
        textFieldProps,
+        primaryButtonDisabled,
      },
    });
  }