chore: update FluentUI to v8

Composer/package.json

@@ -135,7 +135,6 @@
     "eslint": "7.0.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-formatter-github-actions": "^1.0.0",
-    "eslint-plugin-security": "^1.4.0",
     "eslint-plugin-emotion": "10.0.27",
     "eslint-plugin-format-message": "6.2.3",
     "eslint-plugin-import": "2.20.2",

Composer/packages/adaptive-flow/demo/src/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { render } from 'react-dom';
-import { Nav } from 'office-ui-fabric-react';
-import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
+import { Nav } from '@fluentui/react';
+import { initializeIcons } from '@fluentui/react/lib/Icons';
 
 import { EditorConfig } from '../../src/editors/editorConfig';
 

Composer/packages/adaptive-flow/package.json

@@ -28,14 +28,14 @@
     "@bfc/ui-shared": "*",
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
+    "@fluentui/react": "^8.57.1",
     "adaptive-expressions": "4.12.0-rc1",
     "botbuilder-lg": "4.14.0-dev.391a2ab",
     "create-react-class": "^15.6.3",
     "d3": "^5.9.1",
     "dagre": "^0.8.4",
     "dagre-d3": "^0.6.3",
     "lodash": "^4.17.19",
-    "office-ui-fabric-react": "7.71.0",
     "prop-types": "^15.7.2",
     "react-measure": "^2.3.0",
     "source-map-loader": "^0.2.4",

Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx

@@ -9,7 +9,7 @@ import isEqual from 'lodash/isEqual';
 import formatMessage from 'format-message';
 import { DialogFactory, MicrosoftIDialog, SchemaDefinitions } from '@bfc/shared';
 import { useShellApi, JSONSchema7, FlowUISchema, FlowWidget } from '@bfc/extension-client';
-import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
+import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
 
 import { NodeEventTypes } from '../adaptive-flow-renderer/constants/NodeEventTypes';
 import { AdaptiveDialog } from '../adaptive-flow-renderer/adaptive/AdaptiveDialog';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/components/FlowToolbar.tsx

@@ -5,14 +5,14 @@
 import { jsx, css } from '@emotion/core';
 import { useRef, useEffect, ReactNode } from 'react';
 import { ZoomInfo } from '@bfc/shared';
-import { IconButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
-import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
+import { IconButton, IButtonStyles } from '@fluentui/react/lib/Button';
+import { IIconProps } from '@fluentui/react/lib/Icon';
 import formatMessage from 'format-message';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
-import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { NeutralColors } from '@uifabric/fluent-theme';
-import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
-import { FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone';
+import { TooltipHost } from '@fluentui/react/lib/Tooltip';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import { NeutralColors } from '@fluentui/theme';
+import { FocusZone } from '@fluentui/react/lib/FocusZone';
+import { FocusZoneTabbableElements } from '@fluentui/react/lib/FocusZone';
 
 import { scrollNodeIntoView } from '../utils/scrollNodeIntoView';
 import { AttrNames } from '../constants/ElementAttributes';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/hooks/useSelectionEffect.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { useRef, useState, useEffect } from 'react';
-import { Selection } from 'office-ui-fabric-react/lib/MarqueeSelection';
+import { Selection } from '@fluentui/react/lib/MarqueeSelection';
 import { ShellApi } from '@bfc/shared';
 import isEqual from 'lodash/isEqual';
 

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/EdgeMenu/EdgeMenu.tsx

@@ -6,9 +6,10 @@ import { jsx } from '@emotion/core';
 import { useContext, useState } from 'react';
 import formatMessage from 'format-message';
 import { DefinitionSummary } from '@bfc/shared';
-import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip';
+import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { useMenuConfig } from '@bfc/extension-client';
 import { IconMenu } from '@bfc/ui-shared';
+import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
 
 // TODO: leak of visual-sdk domain (EdgeAddButtonSize)
 import { EdgeAddButtonSize } from '../../../adaptive-flow-renderer/constants/ElementSizes';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/EdgeMenu/createSchemaMenu.tsx

@@ -6,14 +6,14 @@ import { jsx, css } from '@emotion/core';
 import {
   IContextualMenuItem,
   ContextualMenuItemType,
-} from 'office-ui-fabric-react/lib/components/ContextualMenu/ContextualMenu.types';
-import { NeutralColors } from '@uifabric/fluent-theme';
+} from '@fluentui/react/lib/components/ContextualMenu/ContextualMenu.types';
+import { NeutralColors } from '@fluentui/theme';
 import { SDKKinds, DefinitionSummary, DisabledMenuActions } from '@bfc/shared';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
+import { FontIcon } from '@fluentui/react/lib/Icon';
 import formatMessage from 'format-message';
 import { MenuUISchema, MenuOptions } from '@bfc/extension-client';
 import set from 'lodash/set';
-import { ITooltipHostStyles, TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { ITooltipHostStyles, TooltipHost } from '@fluentui/react/lib/Tooltip';
 
 import { MenuEventTypes } from '../../constants/MenuTypes';
 

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeMenu.tsx

@@ -5,10 +5,10 @@
 import { jsx } from '@emotion/core';
 import { useContext } from 'react';
 import formatMessage from 'format-message';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
+import { TooltipHost } from '@fluentui/react/lib/Tooltip';
 import { IconMenu } from '@bfc/ui-shared';
-import { getFocusStyle, getTheme } from 'office-ui-fabric-react/lib/Styling';
-import { FluentTheme } from '@uifabric/fluent-theme';
+import { getFocusStyle, getTheme } from '@fluentui/react/lib/Styling';
+import { FluentTheme } from '@fluentui/theme';
 
 import { NodeEventTypes, EditorEventHandler } from '../../adaptive-flow-renderer/constants/NodeEventTypes';
 import { MenuTypes } from '../constants/MenuTypes';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/renderers/NodeWrapper.tsx

@@ -8,9 +8,9 @@ import { jsx, css } from '@emotion/core';
 import { useContext, useCallback, useEffect } from 'react';
 import { generateActionTitle, PromptTab } from '@bfc/shared';
 import { useShellApi } from '@bfc/extension-client';
-import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
-import { DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { TooltipHost } from '@fluentui/react/lib/Tooltip';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 import { AttrNames } from '../constants/ElementAttributes';
 import { NodeRendererContext } from '../contexts/NodeRendererContext';

Composer/packages/adaptive-flow/src/adaptive-flow-editor/utils/NodeIndexGetter.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { IObjectWithKey } from 'office-ui-fabric-react/lib/MarqueeSelection';
+import { IObjectWithKey } from '@fluentui/react/lib/MarqueeSelection';
 
 export class NodeIndexGenerator {
   private _id = 0;

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/IconBrick.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 import { IconBrickSize } from '../constants/ElementSizes';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/components/LoopIndicator.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 import { LoopIconSize } from '../constants/ElementSizes';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/CardComment.tsx

@@ -5,7 +5,7 @@
 import { jsx, css } from '@emotion/core';
 import React from 'react';
 import { TruncatedText } from '@bfc/ui-shared';
-import { NeutralColors } from '@uifabric/fluent-theme';
+import { NeutralColors } from '@fluentui/theme';
 
 type CardCommentProps = {
   comment?: string;

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionHeader/icon.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { Icon as FabricIcon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon as FabricIcon } from '@fluentui/react/lib/Icon';
 
 import { iconCss } from './iconStyles';
 

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/DialogRef.tsx

@@ -9,7 +9,7 @@ import { LinkBtn, FixedInfo } from '@bfc/ui-shared';
 import { useContext, useMemo } from 'react';
 import formatMessage from 'format-message';
 import { WidgetContainerProps, WidgetComponent } from '@bfc/extension-client';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { RendererContext } from '../contexts/RendererContext';

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/widgets/TriggerSummary/TriggerSummary.tsx

@@ -5,7 +5,7 @@
 
 import { conceptLabels, getFriendlyName } from '@bfc/shared';
 import { jsx } from '@emotion/core';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { Icon } from '@fluentui/react/lib/Icon';
 
 import {
   triggerContainerStyle,

Composer/packages/adaptive-form/package.json

@@ -18,19 +18,18 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@uifabric/fluent-theme": "^7.1.4",
-    "@uifabric/icons": "^7.3.0",
-    "@uifabric/styling": "^7.7.4",
+    "@fluentui/react": "^8.57.1",
+    "@fluentui/style-utilities": "^8.6.0",
+    "@fluentui/theme": "2.5.0",
     "format-message": "^6.2.3",
-    "office-ui-fabric-react": "7.71.0",
     "react": "16.13.1",
     "react-dom": "16.13.1"
   },
   "devDependencies": {
     "@botframework-composer/test-utils": "*",
+    "@fluentui/react": "^8.57.1",
     "@types/lodash": "^4.14.149",
-    "@types/react": "16.9.23",
-    "office-ui-fabric-react": "7.71.0"
+    "@types/react": "16.9.23"
   },
   "dependencies": {
     "@bfc/built-in-functions": "*",

Composer/packages/adaptive-form/src/components/AdaptiveForm.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { FormErrors, JSONSchema7, UIOptions } from '@bfc/extension-client';
 import ErrorBoundary from 'react-error-boundary';
 import formatMessage from 'format-message';
-import { FontSizes } from '@uifabric/fluent-theme';
+import { FontSizes } from '@fluentui/theme';
 
 import AdaptiveFormContext from '../AdaptiveFormContext';
 

Composer/packages/adaptive-form/src/components/AddButton.tsx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { ActionButton, IButtonStyles } from 'office-ui-fabric-react/lib/components/Button';
-import { FluentTheme } from '@uifabric/fluent-theme';
+import { ActionButton, IButtonStyles } from '@fluentui/react/lib/components/Button';
+import { FluentTheme } from '@fluentui/theme';
 import formatMessage from 'format-message';
 
 export const ButtonContainer = styled.div({

Composer/packages/adaptive-form/src/components/CollapseField.tsx

@@ -4,10 +4,10 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { Fragment, useState, useEffect, useLayoutEffect, useRef } from 'react';
-import { FontSizes, FontWeights } from 'office-ui-fabric-react/lib/Styling';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Label } from 'office-ui-fabric-react/lib/Label';
-import { NeutralColors } from '@uifabric/fluent-theme';
+import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
+import { IconButton } from '@fluentui/react/lib/Button';
+import { Label } from '@fluentui/react/lib/Label';
+import { NeutralColors } from '@fluentui/theme';
 import formatMessage from 'format-message';
 
 const styles = {

Composer/packages/adaptive-form/src/components/Comment.tsx

@@ -6,8 +6,8 @@ import { jsx, css } from '@emotion/core';
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import formatMessage from 'format-message';
 import { IconMenu } from '@bfc/ui-shared';
-import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { TextField, ITextField } from '@fluentui/react/lib/TextField';
+import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 
 import { ExpandableText } from './ExpandableText';
 

Composer/packages/adaptive-form/src/components/ErrorInfo.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import formatMessage from 'format-message';
 import { FallbackProps } from 'react-error-boundary';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
 
 const ErrorInfo: React.FC<FallbackProps> = ({ componentStack, error }) => (
   <div style={{ marginRight: '20px' }}>

Composer/packages/adaptive-form/src/components/ErrorMessage.tsx

@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 
 import React from 'react';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
-import { Link } from 'office-ui-fabric-react/lib/Link';
+import { MessageBar, MessageBarType } from '@fluentui/react/lib/MessageBar';
+import { Link } from '@fluentui/react/lib/Link';
 import formatMessage from 'format-message';
 
 interface ErrorMessageProps {

Composer/packages/adaptive-form/src/components/FieldLabel.tsx

@@ -3,12 +3,13 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useRef } from 'react';
-import { DirectionalHint, TooltipDelay } from 'office-ui-fabric-react/lib/Tooltip';
-import { Label } from 'office-ui-fabric-react/lib/Label';
+import { TooltipDelay } from '@fluentui/react/lib/Tooltip';
+import { Label } from '@fluentui/react/lib/Label';
 import formatMessage from 'format-message';
 import { useShellApi } from '@bfc/extension-client';
 import { HelpTooltip } from '@bfc/ui-shared';
-import { FontSizes } from 'office-ui-fabric-react/lib/Styling';
+import { FontSizes } from '@fluentui/react/lib/Styling';
+import { DirectionalHint } from '@fluentui/react/lib/common/DirectionalHint';
 
 import { useAdaptiveFormContext } from '../AdaptiveFormContext';
 

Composer/packages/adaptive-form/src/components/FormTitle.tsx

@@ -4,8 +4,8 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React, { useMemo, useRef } from 'react';
-import { FontWeights } from '@uifabric/styling';
-import { FontSizes } from '@uifabric/fluent-theme';
+import { FontWeights } from '@fluentui/style-utilities';
+import { FontSizes } from '@fluentui/theme';
 import formatMessage from 'format-message';
 import { UIOptions, JSONSchema7, useShellApi, useRecognizerConfig } from '@bfc/extension-client';
 import { css } from '@emotion/core';

Composer/packages/adaptive-form/src/components/Link.tsx

@@ -5,7 +5,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React from 'react';
-import { Link as FluentLink, ILinkProps } from 'office-ui-fabric-react/lib/Link';
+import { Link as FluentLink, ILinkProps } from '@fluentui/react/lib/Link';
 
 import { focusBorder } from './sharedStyles';
 

Composer/packages/adaptive-form/src/components/LoadingTimeout.tsx

@@ -6,7 +6,7 @@ import { jsx } from '@emotion/core';
 import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/core';
 import formatMessage from 'format-message';
-import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
+import { Spinner } from '@fluentui/react/lib/Spinner';
 
 const container = css`
   height: 100%;

Composer/packages/adaptive-form/src/components/__tests__/Comment.test.tsx

@@ -55,7 +55,7 @@ describe('<Comment />', () => {
 
   it('can delete a comment', async () => {
     const comment = faker.lorem.paragraph();
-    const { findByLabelText, findByPlaceholderText, findByText, queryByTestId } = render(
+    const { findByLabelText, findByPlaceholderText, queryByTestId, findByRole } = render(
       <Comment comment={comment} onChange={onChange} />
     );
 
@@ -68,7 +68,7 @@ describe('<Comment />', () => {
       userEvent.click(menu);
     });
 
-    const deleteBtn = await findByText('Delete');
+    const deleteBtn = await findByRole('menuitem', { name: 'Delete' });
     act(() => {
       userEvent.click(deleteBtn);
     });

Composer/packages/adaptive-form/src/components/expressions/ExpressionFieldToolbar.tsx

@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { DirectionalHint } from '@fluentui/react/lib/ContextualMenu';
 import React from 'react';
-import { Callout } from 'office-ui-fabric-react/lib/Callout';
+import { Callout } from '@fluentui/react/lib/Callout';
 import { FieldToolbar } from '@bfc/code-editor';
 import { useShellApi } from '@bfc/extension-client';
 

Composer/packages/adaptive-form/src/components/expressions/ExpressionSwitchWindow.tsx

@@ -3,10 +3,10 @@
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
+import { FontIcon } from '@fluentui/react/lib/Icon';
 import React from 'react';
 import formatMessage from 'format-message';
-import { FluentTheme, SharedColors } from '@uifabric/fluent-theme';
+import { FluentTheme, SharedColors } from '@fluentui/theme';
 
 const styles = {
   fieldTypeText: css`

Composer/packages/adaptive-form/src/components/expressions/utils/expressionsListMenuUtils.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ContextualMenuItemType, IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 
 type ExpressionGroupingType = {
   key: string;

Composer/packages/adaptive-form/src/components/fields/ArrayFieldItem.tsx

@@ -4,10 +4,10 @@
 import { jsx } from '@emotion/core';
 import React, { useEffect, useRef } from 'react';
 import { FieldProps } from '@bfc/extension-client';
-import { NeutralColors } from '@uifabric/fluent-theme';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { FontSizes } from '@uifabric/styling';
-import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { NeutralColors } from '@fluentui/theme';
+import { IconButton } from '@fluentui/react/lib/Button';
+import { FontSizes } from '@fluentui/style-utilities';
+import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 import formatMessage from 'format-message';
 
 import { SchemaField } from '../SchemaField';