Upgrade Fluent UI v8 (#688)

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

src/SelfServe/SelfServe.tsx

@@ -1,5 +1,4 @@
-import { Spinner, SpinnerSize } from "office-ui-fabric-react";
-import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import { initializeIcons, Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { withTranslation } from "react-i18next";

src/SelfServe/SelfServeComponent.tsx

@@ -9,7 +9,7 @@ import {
   SpinnerSize,
   Stack,
   Text,
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 import promiseRetry, { AbortError } from "p-retry";
 import React from "react";
 import { WithTranslation } from "react-i18next";

src/SelfServe/SelfServeStyles.tsx

@@ -1,4 +1,4 @@
-import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "office-ui-fabric-react";
+import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "@fluentui/react";
 import { StyleConstants } from "../Common/Constants";
 
 export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };

src/SelfServe/__snapshots__/SelfServeComponent.test.tsx.snap

@@ -83,13 +83,13 @@ exports[`SelfServeComponent message bar and spinner snapshots 1`] = `
         }
       />
     </StackItem>
-    <StyledMessageBarBase
+    <StyledMessageBar
       messageBarType={0}
     >
       <Text>
         refresh performed successfully
       </Text>
-    </StyledMessageBarBase>
+    </StyledMessageBar>
     <SmartUiComponent
       currentValues={
         Map {
@@ -821,13 +821,13 @@ exports[`SelfServeComponent message bar and spinner snapshots 3`] = `
 `;
 
 exports[`SelfServeComponent message bar and spinner snapshots 4`] = `
-<StyledMessageBarBase
+<StyledMessageBar
   messageBarType={1}
 >
   <Text>
     sample error message
   </Text>
-</StyledMessageBarBase>
+</StyledMessageBar>
 `;
 
 exports[`SelfServeComponent should render and honor save, discard, refresh actions 1`] = `