Add Report Abuse dialog for public gallery notebooks (#265)

![image](https://user-images.githubusercontent.com/693092/95408825-3975a680-08d5-11eb-812b-80f922ab9fc8.png)
2025-12-19 17:01:13 +00:00 · 2020-10-12 16:48:05 -07:00
parent daba1c4ed4
commit 3b64d75322
13 changed files with 317 additions and 105 deletions
--- a/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
+++ b/src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
@@ -3,7 +3,7 @@ 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 { FontIcon } from "office-ui-fabric-react";
+import { ChoiceGroup, FontIcon, IChoiceGroupProps } from "office-ui-fabric-react";

 export interface TextFieldProps extends ITextFieldProps {
  label: string;
@@ -24,6 +24,7 @@ export interface DialogProps {
  subText: string;
  isModal: boolean;
  visible: boolean;
+  choiceGroupProps?: IChoiceGroupProps;
  textFieldProps?: TextFieldProps;
  linkProps?: LinkProps;
  primaryButtonText: string;
@@ -65,6 +66,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
      minWidth: DIALOG_MIN_WIDTH,
      maxWidth: DIALOG_MAX_WIDTH
    };
+    const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
    const linkProps: LinkProps = this.props.linkProps;
    const primaryButtonProps: IButtonProps = {
@@ -82,6 +84,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {

    return (
      <Dialog {...dialogProps}>
+        {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
        {textFieldProps && <TextField {...textFieldProps} />}
        {linkProps && (
          <Link href={linkProps.linkUrl} target="_blank">
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -227,7 +227,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
          <Stack.Item styles={{ root: { minWidth: 200 } }}>
            <Dropdown options={this.sortingOptions} selectedKey={this.state.sortBy} onChange={this.onDropdownChange} />
          </Stack.Item>
-          {this.props.container?.isGalleryPublishEnabled() && (
+          {(!this.props.container || this.props.container.isGalleryPublishEnabled()) && (
            <Stack.Item>
              <InfoComponent />
            </Stack.Item>
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
@@ -3,10 +3,14 @@ import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fa
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";

-export class InfoComponent extends React.Component {
-  private getInfoPanel = (iconName: string, labelText: string, url: string): JSX.Element => {
+export interface InfoComponentProps {
+  onReportAbuseClick?: () => void;
+}
+
+export class InfoComponent extends React.Component<InfoComponentProps> {
+  private getInfoPanel = (iconName: string, labelText: string, url?: string, onClick?: () => void): JSX.Element => {
    return (
-      <Link href={url} target="_blank">
+      <Link href={url} target={url && "_blank"} onClick={onClick}>
        <div className="infoPanel">
          <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} />
          <Label className="infoLabel">{labelText}</Label>
@@ -25,6 +29,11 @@ export class InfoComponent extends React.Component {
        <Stack.Item>
          {this.getInfoPanel("KnowledgeArticle", "Microsoft Terms of Use", CodeOfConductEndpoints.termsOfUse)}
        </Stack.Item>
+        {this.props.onReportAbuseClick !== undefined && (
+          <Stack.Item>
+            {this.getInfoPanel("ReportHacked", "Report Abuse", undefined, () => this.props.onReportAbuseClick())}
+          </Stack.Item>
+        )}
      </Stack>
    );
  };
--- a/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
@@ -77,6 +77,9 @@ exports[`GalleryViewerComponent renders 1`] = `
              selectedKey={0}
            />
          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
        </Stack>
      </Stack>
    </PivotItem>
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.test.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.test.tsx
@@ -25,7 +25,8 @@ describe("NotebookMetadataComponent", () => {
      onTagClick: undefined,
      onDownloadClick: undefined,
      onFavoriteClick: undefined,
-      onUnfavoriteClick: undefined
+      onUnfavoriteClick: undefined,
+      onReportAbuseClick: undefined
    };

    const wrapper = shallow(<NotebookMetadataComponent {...props} />);
@@ -54,7 +55,8 @@ describe("NotebookMetadataComponent", () => {
      onTagClick: undefined,
      onDownloadClick: undefined,
      onFavoriteClick: undefined,
-      onUnfavoriteClick: undefined
+      onUnfavoriteClick: undefined,
+      onReportAbuseClick: undefined
    };

    const wrapper = shallow(<NotebookMetadataComponent {...props} />);
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -17,6 +17,7 @@ import { IGalleryItem } from "../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
+import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";

 export interface NotebookMetadataComponentProps {
  data: IGalleryItem;
@@ -26,6 +27,7 @@ export interface NotebookMetadataComponentProps {
  onFavoriteClick: () => void;
  onUnfavoriteClick: () => void;
  onDownloadClick: () => void;
+  onReportAbuseClick: () => void;
 }

 export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
@@ -41,24 +43,39 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
    return (
      <Stack tokens={{ childrenGap: 10 }}>
        <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 30 }}>
-          <Text variant="xxLarge" nowrap>
-            {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
-          </Text>
-          <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>
+            <Text variant="xxLarge" nowrap>
+              {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
+            </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>

          {this.props.downloadButtonText && (
-            <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+            <Stack.Item>
+              <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+            </Stack.Item>
          )}
+
+          <Stack.Item grow>
+            <></>
+          </Stack.Item>
+
+          <Stack.Item>
+            <InfoComponent onReportAbuseClick={this.props.onReportAbuseClick} />
+          </Stack.Item>
        </Stack>

        <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 10 }}>
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -3,11 +3,10 @@
 */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
+import { IChoiceGroupProps, Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 import * as Logger from "../../../Common/Logger";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
@@ -15,12 +14,13 @@ import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationCon
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
-import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
+import { DialogComponent, DialogProps, TextFieldProps } from "../DialogReactComponent/DialogComponent";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
 import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
+import { DialogHost } from "../../../Utils/GalleryUtils";

 export interface NotebookViewerComponentProps {
  container?: Explorer;
@@ -43,10 +43,8 @@ interface NotebookViewerComponentState {
  showProgressBar: boolean;
 }

-export class NotebookViewerComponent extends React.Component<
-  NotebookViewerComponentProps,
-  NotebookViewerComponentState
-> {
+export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
+  implements DialogHost {
  private clientManager: NotebookClientV2;
  private notebookComponentBootstrapper: NotebookComponentBootstrapper;

@@ -140,6 +138,7 @@ export class NotebookViewerComponent extends React.Component<
              onFavoriteClick={this.favoriteItem}
              onUnfavoriteClick={this.unfavoriteItem}
              onDownloadClick={this.downloadItem}
+              onReportAbuseClick={this.state.galleryItem.isSample ? undefined : this.reportAbuse}
            />
          </div>
        ) : (
@@ -179,6 +178,39 @@ export class NotebookViewerComponent extends React.Component<
    };
  }

+  // DialogHost
+  showOkCancelModalDialog(
+    title: string,
+    msg: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps
+  ): void {
+    this.setState({
+      dialogProps: {
+        isModal: true,
+        visible: true,
+        title,
+        subText: msg,
+        primaryButtonText: okLabel,
+        secondaryButtonText: cancelLabel,
+        onPrimaryButtonClick: () => {
+          this.setState({ dialogProps: undefined });
+          onOk && onOk();
+        },
+        onSecondaryButtonClick: () => {
+          this.setState({ dialogProps: undefined });
+          onCancel && onCancel();
+        },
+        choiceGroupProps,
+        textFieldProps
+      }
+    });
+  }
+
  private favoriteItem = async (): Promise<void> => {
    GalleryUtils.favoriteItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
      this.setState({ galleryItem: item, isFavorite: true })
@@ -196,4 +228,8 @@ export class NotebookViewerComponent extends React.Component<
      this.setState({ galleryItem: item })
    );
  };
+
+  private reportAbuse = (): void => {
+    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => {});
+  };
 }
--- a/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
@@ -17,26 +17,38 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
    }
    verticalAlign="center"
  >
-    <Text
-      nowrap={true}
-      variant="xxLarge"
-    >
-      name
-    </Text>
-    <Text>
-      <CustomizedIconButton
-        iconProps={
-          Object {
-            "iconName": "HeartFill",
+    <StackItem>
+      <Text
+        nowrap={true}
+        variant="xxLarge"
+      >
+        name
+      </Text>
+    </StackItem>
+    <StackItem>
+      <Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "HeartFill",
+            }
          }
-        }
+        />
+        0
+         likes
+      </Text>
+    </StackItem>
+    <StackItem>
+      <CustomizedPrimaryButton
+        text="Download"
      />
-      0
-       likes
-    </Text>
-    <CustomizedPrimaryButton
-      text="Download"
+    </StackItem>
+    <StackItem
+      grow={true}
    />
+    <StackItem>
+      <InfoComponent />
+    </StackItem>
  </Stack>
  <Stack
    horizontal={true}
@@ -117,26 +129,38 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
    }
    verticalAlign="center"
  >
-    <Text
-      nowrap={true}
-      variant="xxLarge"
-    >
-      name
-    </Text>
-    <Text>
-      <CustomizedIconButton
-        iconProps={
-          Object {
-            "iconName": "Heart",
+    <StackItem>
+      <Text
+        nowrap={true}
+        variant="xxLarge"
+      >
+        name
+      </Text>
+    </StackItem>
+    <StackItem>
+      <Text>
+        <CustomizedIconButton
+          iconProps={
+            Object {
+              "iconName": "Heart",
+            }
          }
-        }
+        />
+        0
+         likes
+      </Text>
+    </StackItem>
+    <StackItem>
+      <CustomizedPrimaryButton
+        text="Download"
      />
-      0
-       likes
-    </Text>
-    <CustomizedPrimaryButton
-      text="Download"
+    </StackItem>
+    <StackItem
+      grow={true}
    />
+    <StackItem>
+      <InfoComponent />
+    </StackItem>
  </Stack>
  <Stack
    horizontal={true}
--- a/src/Explorer/Explorer.ts
+++ b/src/Explorer/Explorer.ts
@@ -88,6 +88,7 @@ import TabsBase from "./Tabs/TabsBase";
 import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
 import { updateUserContext, userContext } from "../UserContext";
 import { stringToBlob } from "../Utils/BlobUtils";
+import { IChoiceGroupProps } from "office-ui-fabric-react";

 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -2385,42 +2386,16 @@ export default class Explorer {
  }

  public showOkCancelModalDialog(
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void
-  ): void {
-    this._dialogProps({
-      isModal: true,
-      visible: true,
-      title,
-      subText: msg,
-      primaryButtonText: okLabel,
-      secondaryButtonText: cancelLabel,
-      onPrimaryButtonClick: () => {
-        this._closeModalDialog();
-        onOk && onOk();
-      },
-      onSecondaryButtonClick: () => {
-        this._closeModalDialog();
-        onCancel && onCancel();
-      }
-    });
-  }
-
-  public showOkCancelTextFieldModalDialog(
    title: string,
    msg: string,
    okLabel: string,
    onOk: () => void,
    cancelLabel: string,
    onCancel: () => void,
-    textFieldProps: TextFieldProps,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps,
    isPrimaryButtonDisabled?: boolean
  ): void {
-    let textFieldValue: string = null;
    this._dialogProps({
      isModal: true,
      visible: true,
@@ -2436,8 +2411,9 @@ export default class Explorer {
        this._closeModalDialog();
        onCancel && onCancel();
      },
-      primaryButtonDisabled: isPrimaryButtonDisabled,
-      textFieldProps
+      choiceGroupProps,
+      textFieldProps,
+      primaryButtonDisabled: isPrimaryButtonDisabled
    });
  }

--- a/src/Explorer/Notebook/NotebookManager.ts
+++ b/src/Explorer/Notebook/NotebookManager.ts
@@ -166,7 +166,7 @@ export default class NotebookManager {
  private promptForCommitMsg = (title: string, primaryButtonLabel: string) => {
    return new Promise<string>((resolve, reject) => {
      let commitMsg = "Committed from Azure Cosmos DB Notebooks";
-      this.params.container.showOkCancelTextFieldModalDialog(
+      this.params.container.showOkCancelModalDialog(
        title || "Commit",
        undefined,
        primaryButtonLabel || "Commit",
@@ -181,6 +181,7 @@ export default class NotebookManager {
        },
        "Cancel",
        () => reject(new Error("Commit dialog canceled")),
+        undefined,
        {
          label: "Commit message",
          autoAdjustHeight: true,