Upgrade Fluent UI v8 (#688)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -1,4 +1,3 @@
-import { Card } from "@uifabric/react-cards";
 import {
   BaseButton,
   Button,
@@ -8,14 +7,14 @@ import {
   Image,
   ImageFit,
   Link,
-  LinkBase,
   Persona,
   Separator,
   Spinner,
   SpinnerSize,
   Text,
   TooltipHost,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
+import { Card } from "@uifabric/react-cards";
 import React, { FunctionComponent, useState } from "react";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -110,7 +109,7 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
 
   const handlerOnClick = (
     event:
-      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>
+      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | MouseEvent>
       | React.MouseEvent<
           HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
           MouseEvent

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`GalleryCardComponent renders 1`] = `
     />
   </CardItem>
   <CardItem>
-    <StyledImageBase
+    <Image
       alt="name cover image"
       height={144}
       imageFit={2}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -0,0 +1,123 @@
+import * as React from "react";
+import { JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import { Stack, Text, Checkbox, PrimaryButton, Link } from "@fluentui/react";
+import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
+import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+
+export interface CodeOfConductComponentProps {
+  junoClient: JunoClient;
+  onAcceptCodeOfConduct: (result: boolean) => void;
+}
+
+interface CodeOfConductComponentState {
+  readCodeOfConduct: boolean;
+}
+
+export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private viewCodeOfConductTraced: boolean;
+  private descriptionPara1: string;
+  private descriptionPara2: string;
+  private descriptionPara3: string;
+  private link1: { label: string; url: string };
+
+  constructor(props: CodeOfConductComponentProps) {
+    super(props);
+
+    this.state = {
+      readCodeOfConduct: false,
+    };
+
+    this.descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct";
+    this.descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB.";
+    this.descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the ";
+    this.link1 = { label: "code of conduct.", url: CodeOfConductEndpoints.codeOfConduct };
+  }
+
+  private async acceptCodeOfConduct(): Promise<void> {
+    const startKey = traceStart(Action.NotebooksGalleryAcceptCodeOfConduct);
+
+    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`);
+      }
+
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
+
+      this.props.onAcceptCodeOfConduct(response.data);
+    } catch (error) {
+      traceFailure(
+        Action.NotebooksGalleryAcceptCodeOfConduct,
+        {
+          error: getErrorMessage(error),
+          errorStack: getErrorStack(error),
+        },
+        startKey
+      );
+
+      handleError(error, "CodeOfConductComponent/acceptCodeOfConduct", "Failed to accept code of conduct");
+    }
+  }
+
+  private onChangeCheckbox = (): void => {
+    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
+  };
+
+  public render(): JSX.Element {
+    if (!this.viewCodeOfConductTraced) {
+      this.viewCodeOfConductTraced = true;
+      trace(Action.NotebooksGalleryViewCodeOfConduct);
+    }
+
+    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>
+          </Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Checkbox
+            styles={{
+              label: {
+                margin: 0,
+                padding: "2 0 2 0",
+              },
+              text: {
+                fontSize: 12,
+              },
+            }}
+            label="I have read and accept the code of conduct."
+            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>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Link, PrimaryButton, Stack, Text } from "office-ui-fabric-react";
+import { Checkbox, Link, PrimaryButton, Stack, Text } from "@fluentui/react";
 import React, { FunctionComponent, useEffect, useState } from "react";
 import { CodeOfConductEndpoints, HttpStatusCodes } from "../../../../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -19,7 +19,7 @@ import {
   SpinnerSize,
   Stack,
   Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import * as React from "react";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fabric-react";
+import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "@fluentui/react";
 import { CodeOfConductEndpoints } from "../../../../Common/Constants";
 import "./InfoComponent.less";
 

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`GalleryViewerComponent renders 1`] = `
 <div
   className="galleryContainer"
 >
-  <StyledPivotBase
+  <StyledPivot
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
@@ -41,7 +41,7 @@ exports[`GalleryViewerComponent renders 1`] = `
             <StackItem
               grow={true}
             >
-              <StyledSearchBoxBase
+              <StyledSearchBox
                 onChange={[Function]}
                 placeholder="Search"
               />
@@ -60,7 +60,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                 }
               }
             >
-              <StyledWithResponsiveMode
+              <Dropdown
                 onChange={[Function]}
                 options={
                   Array [
@@ -127,7 +127,7 @@ exports[`GalleryViewerComponent renders 1`] = `
           <StackItem
             grow={true}
           >
-            <StyledSearchBoxBase
+            <StyledSearchBox
               onChange={[Function]}
               placeholder="Search"
             />
@@ -146,7 +146,7 @@ exports[`GalleryViewerComponent renders 1`] = `
               }
             }
           >
-            <StyledWithResponsiveMode
+            <Dropdown
               onChange={[Function]}
               options={
                 Array [
@@ -182,6 +182,6 @@ exports[`GalleryViewerComponent renders 1`] = `
         </StackItem>
       </Stack>
     </PivotItem>
-  </StyledPivotBase>
+  </StyledPivot>
 </div>
 `;