update some of the packages to the latest. (#61)

* update some of the packages to the latest.

* remove some files from package

.gitignore

@@ -357,3 +357,5 @@ MigrationBackup/
 
 # Ionide (cross platform F# VS Code tools) working folder
 .ionide/
+
+.eslintcache

.vscodeignore

@@ -0,0 +1,3 @@
+**/*.ts
+src/**
+public/**

package.json

@@ -179,25 +179,25 @@
         "refreshVSToken": "vsts-npm-auth -config .npmrc"
     },
     "dependencies": {
-        "@types/keytar": "^4.4.2",
-        "@typescript-eslint/eslint-plugin": "^2.34.0",
-        "@typescript-eslint/parser": "^2.34.0",
+        "@fluentui/react": "^7.153.0",
+        "@uifabric/icons": "^7.5.17",
+        "@uifabric/react-hooks": "^7.13.9",
         "@vienna/react-dag-editor": "2.0.0-rc.38",
-        "azure-iothub": "^1.12.4",
+        "azure-iothub": "1.12.4",
         "dagre": "^0.8.5",
-        "eslint": "^6.8.0",
         "keytar": "^6.0.1",
         "lodash": "^4.17.20",
-        "office-ui-fabric-react": "^7.117.1",
         "react": "^16.13.1",
         "react-accessible-accordion": "^3.3.3",
         "react-accessible-tree": "^1.0.3",
         "react-dom": "^16.13.1",
-        "react-scripts": "^3.4.3",
-        "typescript": "^3.9.4",
-        "eslint-plugin-react-hooks": "^2.5.1"
+        "typescript": "^3.9.4"
     },
     "devDependencies": {
+        "@types/keytar": "^4.4.2",
+        "@typescript-eslint/eslint-plugin": "4.0.0",
+        "@typescript-eslint/parser": "^3.0.0",
+        "react-scripts": "^4.0.0",
         "@types/dagre": "^0.7.44",
         "@types/lodash": "^4.14.155",
         "@types/node": "^12.12.0",
@@ -205,6 +205,8 @@
         "@types/react-dom": "^16.9.8",
         "@types/uuid": "^8.0.0",
         "@types/vscode": "^1.38.0",
+        "eslint": "^7.11.0",
+        "eslint-plugin-react-hooks": "^4.0.8",
         "prettier": "^2.0.5"
     },
     "browserslist": {

src/Webview/Components/App.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
-import { ITheme, Spinner, SpinnerSize } from "office-ui-fabric-react";
-import { ThemeProvider } from "office-ui-fabric-react/lib/Foundation";
 import React, { useEffect } from "react";
+import { ITheme, Spinner, SpinnerSize } from "@fluentui/react";
+import { ThemeProvider } from "@fluentui/react/lib/Foundation";
 import { useBoolean } from "@uifabric/react-hooks";
 import { MediaGraphInstance } from "../../Common/Types/LVASDKTypes";
 import Graph from "../Models/GraphData";

src/Webview/Components/GraphInstance.tsx

@@ -1,10 +1,5 @@
-import {
-    ActionButton,
-    ITextField,
-    Stack,
-    TextField
-} from "office-ui-fabric-react";
 import * as React from "react";
+import { ActionButton, ITextField, Stack, TextField } from "@fluentui/react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
     CanvasMouseMode,

src/Webview/Components/GraphTopology.tsx

@@ -1,11 +1,11 @@
+import React from "react";
 import {
     ActionButton,
     ITextField,
     Stack,
     TextField,
     VerticalDivider
-} from "office-ui-fabric-react";
-import React from "react";
+} from "@fluentui/react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
     CanvasMouseMode,

src/Webview/Components/ItemPanel.tsx

@@ -1,8 +1,14 @@
 import "./ItemPanel.css";
-import { Text } from "office-ui-fabric-react";
 import * as React from "react";
-import { Accordion, AccordionItem, AccordionItemButton, AccordionItemHeading, AccordionItemPanel } from "react-accessible-accordion";
+import {
+    Accordion,
+    AccordionItem,
+    AccordionItemButton,
+    AccordionItemHeading,
+    AccordionItemPanel
+} from "react-accessible-accordion";
 import { v4 as uuid } from "uuid";
+import { Text } from "@fluentui/react";
 import { ICanvasNode, Item, usePropsAPI } from "@vienna/react-dag-editor";
 import Definitions from "../Definitions/Definitions";
 import Localizer from "../Localization/Localizer";

src/Webview/Components/NodeContainer.tsx

@@ -1,11 +1,11 @@
+import * as React from "react";
 import {
     FontIcon,
     FontWeights,
     mergeStyleSets,
     Stack,
     Text
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { usePropsAPI } from "@vienna/react-dag-editor";
 import { StatusIcon } from "./StatusIcon";
 

src/Webview/Components/NodePropertiesPanel.tsx

@@ -1,5 +1,5 @@
-import { Stack, TextField } from "office-ui-fabric-react";
 import * as React from "react";
+import { Stack, TextField } from "@fluentui/react";
 import { useBoolean } from "@uifabric/react-hooks";
 import { IPanelConfig, usePropsAPI } from "@vienna/react-dag-editor";
 import { MediaGraphParameterDeclaration } from "../../Common/Types/LVASDKTypes";

src/Webview/Components/ParameterEditor/ParameterEditor.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     DefaultButton,
     Dialog,
@@ -9,8 +10,7 @@ import {
     Pivot,
     PivotItem,
     Stack
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { useId } from "@uifabric/react-hooks";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";

src/Webview/Components/ParameterEditor/ParameterEditorAdvanced.tsx

@@ -1,3 +1,5 @@
+import { relative } from "path";
+import * as React from "react";
 import {
     CheckboxVisibility,
     DefaultButton,
@@ -11,9 +13,7 @@ import {
     Stack,
     Text,
     TextField
-} from "office-ui-fabric-react";
-import { relative } from "path";
-import * as React from "react";
+} from "@fluentui/react";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";
 import { ParameterEditorParameterList } from "./ParameterEditorParameterList";

src/Webview/Components/ParameterEditor/ParameterEditorChoice.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     CheckboxVisibility,
     ChoiceGroup,
@@ -8,8 +9,7 @@ import {
     ScrollablePane,
     Selection,
     SelectionMode
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";
 import { ParamCreateConfig } from "../ParameterSelector/ParameterSelector";

src/Webview/Components/ParameterEditor/ParameterEditorCreateForm.tsx

@@ -1,11 +1,6 @@
 import some from "lodash/some";
-import {
-    Dropdown,
-    IDropdownOption,
-    Stack,
-    TextField
-} from "office-ui-fabric-react";
 import * as React from "react";
+import { Dropdown, IDropdownOption, Stack, TextField } from "@fluentui/react";
 import {
     MediaGraphParameterDeclaration,
     MediaGraphParameterType

src/Webview/Components/ParameterEditor/ParameterEditorParameterList.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     Announced,
     CheckboxVisibility,
@@ -14,8 +15,7 @@ import {
     SelectionMode,
     Stack,
     TextField
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { useBoolean } from "@uifabric/react-hooks";
 import {
     MediaGraphParameterDeclaration,

src/Webview/Components/ParameterPanel.tsx

@@ -1,5 +1,5 @@
-import { mergeStyleSets, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
+import { getTheme, mergeStyleSets, Text, TextField } from "@fluentui/react";
 import Localizer from "../Localization/Localizer";
 import { GraphInstanceParameter } from "../Types/GraphTypes";
 

src/Webview/Components/ParameterSelector/EditableParameter.tsx

@@ -1,5 +1,5 @@
-import { FontIcon, IconButton, Stack, Text } from "office-ui-fabric-react";
 import React from "react";
+import { FontIcon, IconButton, Stack, Text } from "@fluentui/react";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";
 import { ParameterEditorCreateForm } from "../ParameterEditor/ParameterEditorCreateForm";

src/Webview/Components/ParameterSelector/ParameterSelector.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
     DefaultButton,
     IIconProps,
@@ -8,13 +9,8 @@ import {
     Separator,
     Stack,
     Text
-} from "office-ui-fabric-react";
-import {
-    Dialog,
-    DialogFooter,
-    DialogType
-} from "office-ui-fabric-react/lib/Dialog";
-import React from "react";
+} from "@fluentui/react";
+import { Dialog, DialogFooter, DialogType } from "@fluentui/react/lib/Dialog";
 import { useBoolean } from "@uifabric/react-hooks";
 import { IPropsAPI } from "@vienna/react-dag-editor";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";

src/Webview/Components/ParameterSelector/ParameterSelectorTrigger.tsx

@@ -1,5 +1,5 @@
-import { ActionButton } from "office-ui-fabric-react/lib/Button";
 import React, { useState } from "react";
+import { ActionButton } from "@fluentui/react";
 import { IPropsAPI } from "@vienna/react-dag-editor";
 import { MediaGraphParameterDeclaration } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";

src/Webview/Components/PropertyEditor/PropertyDescription.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     Callout,
     IButtonStyles,
@@ -6,8 +7,7 @@ import {
     IStackTokens,
     Label,
     Stack
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { useBoolean, useId } from "@uifabric/react-hooks";
 import Localizer from "../../Localization/Localizer";
 import { AdjustedIconButton } from "../ThemeAdjustedComponents/AdjustedIconButton";

src/Webview/Components/PropertyEditor/PropertyEditField.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     ChoiceGroup,
     Dropdown,
@@ -6,8 +7,7 @@ import {
     IDropdownOption,
     Text,
     TextField
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { useId } from "@uifabric/react-hooks";
 import Localizer from "../../Localization/Localizer";
 import { ParameterizeValueRequestFunction } from "../../Types/GraphTypes";

src/Webview/Components/PropertyEditor/PropertyNestedObject.tsx

@@ -1,5 +1,5 @@
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 import * as React from "react";
+import { Dropdown, IDropdownOption } from "@fluentui/react";
 import { useId } from "@uifabric/react-hooks";
 import Definitions from "../../Definitions/Definitions";
 import Localizer from "../../Localization/Localizer";

src/Webview/Components/SampleSelector/OverwriteConfirmation.tsx

@@ -1,10 +1,10 @@
+import * as React from "react";
 import {
     DefaultButton,
     Dialog,
     DialogFooter,
     DialogType
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import Localizer from "../../Localization/Localizer";
 import { AdjustedPrimaryButton } from "../ThemeAdjustedComponents/AdjustedPrimaryButton";
 

src/Webview/Components/SampleSelector/SampleSelector.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     DefaultButton,
     Dialog,
@@ -7,8 +8,7 @@ import {
     IDropdownOption,
     Spinner,
     SpinnerSize
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import { MediaGraphTopology } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";
 import { AdjustedPrimaryButton } from "../ThemeAdjustedComponents/AdjustedPrimaryButton";

src/Webview/Components/SampleSelector/SampleSelectorTrigger.tsx

@@ -1,5 +1,5 @@
-import { ActionButton } from "office-ui-fabric-react/lib/Button";
 import * as React from "react";
+import { ActionButton } from "@fluentui/react";
 import { MediaGraphTopology } from "../../../Common/Types/LVASDKTypes";
 import Localizer from "../../Localization/Localizer";
 import { SampleSelector } from "./SampleSelector";

src/Webview/Components/SampleSelector/sampleList.ts

@@ -1,4 +1,4 @@
-import { IDropdownOption } from "office-ui-fabric-react";
+import { IDropdownOption } from "@fluentui/react";
 
 export const sampleOptionsList: IDropdownOption[] = [
     {

src/Webview/Components/StatusIcon.tsx

@@ -1,5 +1,5 @@
-import { Icon, mergeStyles } from "office-ui-fabric-react";
 import * as React from "react";
+import { Icon, mergeStyles } from "@fluentui/react";
 import { ICanvasNode } from "@vienna/react-dag-editor";
 import { CanvasNodeData } from "../Types/GraphTypes";
 

src/Webview/Components/ThemeAdjustedComponents/AdjustedIconButton.tsx

@@ -1,5 +1,5 @@
-import { IButtonProps, IconButton, mergeStyles } from "office-ui-fabric-react";
 import * as React from "react";
+import { IButtonProps, IconButton, mergeStyles } from "@fluentui/react";
 
 export const AdjustedIconButton: React.FunctionComponent<IButtonProps> = (props) => {
     const styles = {

src/Webview/Components/ThemeAdjustedComponents/AdjustedPrimaryButton.tsx

@@ -1,10 +1,10 @@
+import * as React from "react";
 import {
     getTheme,
     IButtonProps,
     mergeStyles,
     PrimaryButton
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 
 export const AdjustedPrimaryButton: React.FunctionComponent<IButtonProps> = (props) => {
     const theme = getTheme();

src/Webview/Components/Toolbar.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import {
     ActionButton,
     DefaultButton,
@@ -5,8 +6,7 @@ import {
     mergeStyles,
     Stack,
     Text
-} from "office-ui-fabric-react";
-import * as React from "react";
+} from "@fluentui/react";
 import Localizer from "../Localization/Localizer";
 import { AdjustedPrimaryButton } from "./ThemeAdjustedComponents/AdjustedPrimaryButton";
 

src/Webview/Components/ValidationErrorPanel.tsx

@@ -1,10 +1,5 @@
-import {
-    Link,
-    MessageBar,
-    MessageBarType,
-    Stack
-} from "office-ui-fabric-react";
 import * as React from "react";
+import { Link, MessageBar, MessageBarType, Stack } from "@fluentui/react";
 import Localizer from "../Localization/Localizer";
 import { ValidationError, ValidationErrorType } from "../Types/GraphTypes";
 import { Badge } from "./Badge";

src/Webview/Utils/Helpers.ts

@@ -19,7 +19,7 @@ export default class Helpers {
         if (removeMediaGraph) {
             text = text.replace("MediaGraph", "");
         }
-        let sentenceCaseRegex = `(${customWords.join("|")}|[A-Z])`;
+        const sentenceCaseRegex = `(${customWords.join("|")}|[A-Z])`;
         text = text.replace(new RegExp(sentenceCaseRegex, "g"), " $1").trim();
         text = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
         customWords.forEach((word) => {

src/Webview/Utils/IconSetupHelpers.tsx

@@ -1,5 +1,5 @@
-import { registerIcons } from "office-ui-fabric-react";
 import React from "react";
+import { registerIcons } from "@fluentui/react";
 import { initializeIcons } from "@uifabric/icons";
 
 export default class IconSetupHelpers {

src/Webview/Utils/ThemeHelpers.ts

@@ -8,7 +8,7 @@ import {
     IThemeSlotRule,
     ThemeGenerator,
     themeRulesStandardCreator
-} from "office-ui-fabric-react";
+} from "@fluentui/react";
 
 export default class ThemeHelpers {
     static getAdaptedTheme(): ITheme {

tsconfig.json

@@ -15,7 +15,8 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "jsx": "react",
-        "noEmit": true
+        "noEmit": true,
+        "noFallthroughCasesInSwitch": true
     },
     "include": ["src/Webview"],
     "exclude": ["Common/Tools", "Extension"]