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

![image](https://user-images.githubusercontent.com/693092/95408825-3975a680-08d5-11eb-812b-80f922ab9fc8.png)

src/Utils/GalleryUtils.ts

@@ -8,6 +8,52 @@ import {
   GalleryViewerComponent
 } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer/Explorer";
+import { IChoiceGroupOption, IChoiceGroupProps } from "office-ui-fabric-react";
+import { TextFieldProps } from "../Explorer/Controls/DialogReactComponent/DialogComponent";
+
+const defaultSelectedAbuseCategory = "Other";
+const abuseCategories: IChoiceGroupOption[] = [
+  {
+    key: "ChildEndangermentExploitation",
+    text: "Child endangerment or exploitation"
+  },
+  {
+    key: "ContentInfringement",
+    text: "Content infringement"
+  },
+  {
+    key: "OffensiveContent",
+    text: "Offensive content"
+  },
+  {
+    key: "Terrorism",
+    text: "Terrorism"
+  },
+  {
+    key: "ThreatsCyberbullyingHarassment",
+    text: "Threats, cyber bullying or harassment"
+  },
+  {
+    key: "VirusSpywareMalware",
+    text: "Virus, spyware or malware"
+  },
+  {
+    key: "Fraud",
+    text: "Fraud"
+  },
+  {
+    key: "HateSpeech",
+    text: "Hate speech"
+  },
+  {
+    key: "ImminentHarmToPersonsOrProperty",
+    text: "Imminent harm to persons or property"
+  },
+  {
+    key: "Other",
+    text: "Other"
+  }
+];
 
 export enum NotebookViewerParams {
   NotebookUrl = "notebookUrl",
@@ -33,6 +79,78 @@ export interface GalleryViewerProps {
   searchText: string;
 }
 
+export interface DialogHost {
+  showOkCancelModalDialog(
+    title: string,
+    msg: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps
+  ): void;
+}
+
+export function reportAbuse(
+  junoClient: JunoClient,
+  data: IGalleryItem,
+  dialogHost: DialogHost,
+  onComplete: (success: boolean) => void
+): void {
+  const notebookId = data.id;
+  let abuseCategory = defaultSelectedAbuseCategory;
+  let additionalDetails: string;
+
+  dialogHost.showOkCancelModalDialog(
+    "Report Abuse",
+    undefined,
+    "Report Abuse",
+    async () => {
+      const clearSubmitReportNotification = NotificationConsoleUtils.logConsoleProgress(
+        `Submitting your report on ${data.name} violating code of conduct`
+      );
+
+      try {
+        const response = await junoClient.reportAbuse(notebookId, abuseCategory, additionalDetails);
+        if (!response.data) {
+          throw new Error(`Received HTTP ${response.status} when submitting report for ${data.name}`);
+        }
+
+        NotificationConsoleUtils.logConsoleInfo(
+          `Your report on ${data.name} has been submitted. Thank you for reporting the violation.`
+        );
+        onComplete(response.data);
+      } catch (error) {
+        const message = `Failed to submit report on ${data.name} violating code of conduct: ${error}`;
+        Logger.logError(message, "GalleryUtils/reportAbuse");
+        NotificationConsoleUtils.logConsoleInfo(message);
+      }
+
+      clearSubmitReportNotification();
+    },
+    "Cancel",
+    undefined,
+    {
+      label: "How does this content violate the code of conduct?",
+      options: abuseCategories,
+      defaultSelectedKey: defaultSelectedAbuseCategory,
+      onChange: (_event?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => {
+        abuseCategory = option?.key;
+      }
+    },
+    {
+      label: "You can also include additional relevant details on the offensive content",
+      multiline: true,
+      rows: 3,
+      autoAdjustHeight: false,
+      onChange: (_event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+        additionalDetails = newValue;
+      }
+    }
+  );
+}
+
 export function downloadItem(
   container: Explorer,
   junoClient: JunoClient,