Added support for acknowledging code of conduct for using public Notebook Gallery (#117)

* minro code edits * Added support for acknowledging code of conduct - Added CodeOfConduct component that shows links and a checkbox that must be acknwledged before seeing the public galley - Added verbose message for notebook publish error (when another notebook with the same name exists in the gallery) - Added a feature flag for enabling code of conduct acknowledgement * Added Info Component * minor edit * fixed failign tests * publish tab displayed only when code of conduct accepted * added code of conduct fetch during publish * fixed bug * added test and addressed PR comments * changed line endings * added comment * addressed PR comments
2025-12-31 06:41:35 +00:00 · 2020-08-11 00:37:05 -07:00
parent 3051961093
commit 7a3e54d43e
20 changed files with 633 additions and 114 deletions
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
@@ -0,0 +1,112 @@
+import * as React from "react";
+import { JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import * as Logger from "../../../Common/Logger";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { Stack, Text, Checkbox, PrimaryButton, Link } from "office-ui-fabric-react";
+
+export interface CodeOfConductComponentProps {
+  junoClient: JunoClient;
+  onAcceptCodeOfConduct: (result: boolean) => void;
+}
+
+interface CodeOfConductComponentState {
+  readCodeOfConduct: boolean;
+}
+
+export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private descriptionPara1: string;
+  private descriptionPara2: string;
+  private descriptionPara3: string;
+  private link1: { label: string; url: string };
+  private link2: { label: string; url: string };
+
+  constructor(props: CodeOfConductComponentProps) {
+    super(props);
+
+    this.state = {
+      readCodeOfConduct: false
+    };
+
+    this.descriptionPara1 = "Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement";
+    this.descriptionPara2 =
+      "Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.";
+    this.descriptionPara3 = "In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the ";
+    this.link1 = { label: "code of conduct", url: CodeOfConductEndpoints.codeOfConduct };
+    this.link2 = { label: "privacy statement", url: CodeOfConductEndpoints.privacyStatement };
+  }
+
+  private async acceptCodeOfConduct(): Promise<void> {
+    try {
+      const response = await this.props.junoClient.acceptCodeOfConduct();
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
+      }
+
+      this.props.onAcceptCodeOfConduct(response.data);
+    } catch (error) {
+      const message = `Failed to accept code of conduct: ${error}`;
+      Logger.logError(message, "CodeOfConductComponent/acceptCodeOfConduct");
+      logConsoleError(message);
+    }
+  }
+
+  private onChangeCheckbox = (): void => {
+    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
+  };
+
+  public render(): JSX.Element {
+    return (
+      <Stack tokens={{ childrenGap: 20 }}>
+        <Stack.Item>
+          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>{this.descriptionPara2}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>
+            {this.descriptionPara3}
+            <Link href={this.link1.url} target="_blank">
+              {this.link1.label}
+            </Link>
+            {" and "}
+            <Link href={this.link2.url} target="_blank">
+              {this.link2.label}
+            </Link>
+          </Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Checkbox
+            styles={{
+              label: {
+                margin: 0,
+                padding: "2 0 2 0"
+              },
+              text: {
+                fontSize: 12
+              }
+            }}
+            label="I have read and accepted the code of conduct and privacy statement"
+            onChange={this.onChangeCheckbox}
+          />
+        </Stack.Item>
+
+        <Stack.Item>
+          <PrimaryButton
+            ariaLabel="Continue"
+            title="Continue"
+            onClick={async () => await this.acceptCodeOfConduct()}
+            tabIndex={0}
+            className="genericPaneSubmitBtn"
+            text="Continue"
+            disabled={!this.state.readCodeOfConduct}
+          />
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}