Upgrade frontend to Fluent UI v8

front/package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@fluentui/react": "^7.155.2",
+    "@fluentui/react": "^8.0.0",
+    "@fluentui/react-cards": "^0.200.0",
+    "@fluentui/react-hooks": "^8.0.0",
     "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -12,7 +14,6 @@
     "@types/node": "^14.14.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@uifabric/react-cards": "^0.115.2",
     "axios": "^0.21.1",
     "leaflet": "^1.7.1",
     "react": "^17.0.1",

front/src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import 'office-ui-fabric-react/dist/css/fabric.css';
+import '@fluentui/react/dist/css/fabric.css';
 import Map from './components/map/MinecraftMap';
 import React, { useState } from "react";
 import { initializeIcons, IStackStyles, Stack } from '@fluentui/react';

front/src/components/DeleteButton.tsx

@@ -1,8 +1,8 @@
-import { IIconProps, ActionButton } from 'office-ui-fabric-react';
+import { IIconProps, ActionButton } from '@fluentui/react';
 import * as React from 'react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
-import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { useId, useBoolean } from '@uifabric/react-hooks';
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
+import { PrimaryButton, DefaultButton } from '@fluentui/react/lib/Button';
+import { useId, useBoolean } from '@fluentui/react-hooks';
 
 interface IDeleteButtonProps
 {

front/src/components/EditButton.tsx

@@ -1,4 +1,4 @@
-import { IIconProps, ActionButton } from 'office-ui-fabric-react';
+import { IIconProps, ActionButton } from '@fluentui/react';
 
 interface IEditButtonProps
 {

front/src/components/Location/AddLocation.tsx

@@ -1,8 +1,8 @@
-import { PrimaryButton, TextField, Stack, IStackItemStyles, Separator, IStackTokens } from 'office-ui-fabric-react';
+import { PrimaryButton, TextField, Stack, IStackItemStyles, Separator, IStackTokens } from '@fluentui/react';
 import React, { useEffect, useState } from "react";
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { CoordinateControl } from "./CoordinateControl";
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { Panel } from '@fluentui/react/lib/Panel';
 import { Categories } from "./Categories";
 import { useLocations } from '../../contexts/LocationsContext';
 

front/src/components/Location/Categories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import { useLocationTypes } from "../../contexts/LocationTypesContext";
 
 interface ICategoriesProps

front/src/components/Location/CoordinateControl.tsx

@@ -1,4 +1,4 @@
-import { IStackTokens, TextField, Stack } from 'office-ui-fabric-react';
+import { IStackTokens, TextField, Stack } from '@fluentui/react';
 import { useState } from 'react';
 
 interface ICoordinatesProps {

front/src/components/Location/EditLocation.tsx

@@ -1,8 +1,8 @@
-import { PrimaryButton, TextField, Stack, IStackItemStyles, Separator, IStackTokens } from 'office-ui-fabric-react';
+import { PrimaryButton, TextField, Stack, IStackItemStyles, Separator, IStackTokens } from '@fluentui/react';
 import React, { useState } from "react";
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
 import { CoordinateControl } from "./CoordinateControl";
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { Panel } from '@fluentui/react/lib/Panel';
 import { Categories } from "./Categories";
 import { LocationModel, CoordinateModel } from "../../api/client";
 import { useLocations } from "../../contexts/LocationsContext";

front/src/components/LocationList/CoordinateLabel.tsx

@@ -1,4 +1,4 @@
-import { Text } from 'office-ui-fabric-react';
+import { Text } from '@fluentui/react';
 import { CoordinateModel } from "../../api/client";
 
 interface ICoordinateLabelProps {

front/src/components/LocationList/LocationFilter.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-import { Stack, IStackTokens, IStackItemStyles, Text, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { Checkbox } from '@fluentui/react/lib/Checkbox';
+import { Stack, IStackTokens, IStackItemStyles, Text, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { Categories } from "../Location/Categories";
 import Guid from "../../api/guid";
 

front/src/components/LocationList/LocationListItem.tsx

@@ -1,10 +1,10 @@
-import { Text, Stack, IStackTokens } from 'office-ui-fabric-react';
-import { useBoolean } from '@uifabric/react-hooks';
-import { Card, ICardTokens, ICardStyles, ICardItemStyles, ICardItemTokens, ICardSectionStyles } from '@uifabric/react-cards';
+import { Text, Stack, IStackTokens } from '@fluentui/react';
+import { useBoolean } from '@fluentui/react-hooks';
+import { Card, ICardTokens, ICardStyles, ICardItemStyles, ICardItemTokens, ICardSectionStyles } from '@fluentui/react-cards';
 import { DeleteButton } from "../DeleteButton";
 import { EditButton } from "../EditButton";
 import { CoordinateLabel } from "./CoordinateLabel";
-import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
+import { Customizer } from '@fluentui/react/lib/Utilities';
 import { EditLocation } from "../Location/EditLocation";
 import { LocationModel } from "../../api/client";
 import { OptionsDisplay } from "./OptionsDisplay";

front/src/components/LocationList/LocationsList.tsx

@@ -1,4 +1,4 @@
-import { Stack, IStackTokens, IStackItemStyles, Text, IStackStyles } from 'office-ui-fabric-react';
+import { Stack, IStackTokens, IStackItemStyles, Text, IStackStyles } from '@fluentui/react';
 import { ListItem } from "./LocationListItem";
 import { LocationModel } from "../../api/client";
 import { LocationsFilter } from "./LocationFilter";

front/src/components/LocationList/OptionsDisplay.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { LocationModel } from "../../api/client";
-import { Stack } from 'office-ui-fabric-react';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
-import { mergeStyles, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { Stack } from '@fluentui/react';
+import { FontIcon } from '@fluentui/react/lib/Icon';
+import { mergeStyles, mergeStyleSets } from '@fluentui/react/lib/Styling';
 
 interface IOptionsDisplayProps
 {

front/src/components/MenuBar.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
-import { useBoolean } from '@uifabric/react-hooks';
-import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
-import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
+import { useBoolean } from '@fluentui/react-hooks';
+import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
+import { Customizer } from '@fluentui/react/lib/Utilities';
 import { AddLocation } from "../components/Location/AddLocation";
 import { ZoomToCoordinate } from '../components/ZoomToCoordinate';
 import { RealmSelectorPanel } from './Realm/RealmSelectorPanel';
 import { CoordinateModel } from "../api/client";
-import { Text, Stack } from 'office-ui-fabric-react';
-import { Image } from 'office-ui-fabric-react/lib/Image'; 
+import { Text, Stack } from '@fluentui/react';
+import { Image } from '@fluentui/react/lib/Image';
 import gridImage from "../images/samplegrid.png";
-import { useId } from '@uifabric/react-hooks';
+import { useId } from '@fluentui/react-hooks';
 import {
   getTheme,
   mergeStyleSets,
   FontWeights,
   Modal,
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import { useRealms } from "../contexts/RealmsContext";
 
 interface IMenuBarProps 

front/src/components/Realm/RealmSelectorPanel.tsx

@@ -1,12 +1,12 @@
-import { Stack, Text } from 'office-ui-fabric-react';
+import { Stack, Text } from '@fluentui/react';
 import React from "react";
 import { Realms } from './Realms';
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
+import { Panel } from '@fluentui/react/lib/Panel';
 import { useRealms } from '../../contexts/RealmsContext';
 import {
     getTheme,
     mergeStyleSets
-  } from 'office-ui-fabric-react';
+  } from '@fluentui/react';
 
 interface IRealmSelectorPanel {
     dismissPanel: (() => void);

front/src/components/Realm/Realms.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
+import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
 import { useRealms } from "../../contexts/RealmsContext";
 
 interface IRealmsProps

front/src/components/ZoomToCoordinate.tsx

@@ -1,8 +1,8 @@
 import { CoordinateModel } from "../api/client";
-import { IStackItemStyles } from 'office-ui-fabric-react';
+import { IStackItemStyles } from '@fluentui/react';
 import React, { useEffect, useState } from "react";
-import { Panel } from 'office-ui-fabric-react/lib/Panel';
-import { PrimaryButton, Stack } from 'office-ui-fabric-react';
+import { Panel } from '@fluentui/react/lib/Panel';
+import { PrimaryButton, Stack } from '@fluentui/react';
 import { CoordinateControl } from "./Location/CoordinateControl";
 
 interface IZoomToCoordinate 

front/src/components/map/LocationTypeMarker.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { Marker, Popup } from 'react-leaflet';
-import { useBoolean } from '@uifabric/react-hooks';
-import { Text, Separator, Stack } from 'office-ui-fabric-react';
-import { mergeStyles, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
-import { Customizer } from 'office-ui-fabric-react/lib/Utilities';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
+import { useBoolean } from '@fluentui/react-hooks';
+import { Text, Separator, Stack } from '@fluentui/react';
+import { mergeStyles, mergeStyleSets } from '@fluentui/react/lib/Styling';
+import { Customizer } from '@fluentui/react/lib/Utilities';
+import { FontIcon } from '@fluentui/react/lib/Icon';
 import { EditButton } from "../EditButton";
 import L from "leaflet";
 import { useLocationTypes } from "../../contexts/LocationTypesContext";