random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade Fluent UI v8 (#688)

Browse Source 
Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
This commit is contained in:
Hardikkumar Nai
2021-05-06 04:56:03 +05:30
committed by GitHub
parent bd47e5ed49
commit 23223cfb23
126 changed files with 5586 additions and 5870 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
View File

@@ -1,9 +1,8 @@
import { DefaultButton, IButtonStyles, IContextualMenuItem, IContextualMenuProps } from "@fluentui/react";
import * as React from "react";
import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
import { IContextualMenuItem, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
import * as Logger from "../../../Common/Logger";
import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
import * as Logger from "../../../Common/Logger";
import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
export interface ArcadiaMenuPickerProps {
selectText?: string;

2
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
View File

@@ -1,4 +1,4 @@
import { Icon, Label, Stack } from "office-ui-fabric-react";
import { Icon, Label, Stack } from "@fluentui/react";
import * as React from "react";
import { accordionStackTokens } from "../Settings/SettingsRenderUtils";

16
src/Explorer/Controls/Dialog.tsx
View File

@@ -1,14 +1,20 @@
import {
ChoiceGroup,
DefaultButton,
Dialog as FluentDialog,
DialogFooter,
DialogType,
FontIcon,
IButtonProps,
IChoiceGroupProps,
IDialogProps,
IProgressIndicatorProps,
ITextFieldProps,
Link,
PrimaryButton,
ProgressIndicator,
} from "office-ui-fabric-react";
import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button";
import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
import { Link } from "office-ui-fabric-react/lib/Link";
import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
TextField,
} from "@fluentui/react";
import React, { FunctionComponent } from "react";
export interface TextFieldProps extends ITextFieldProps {

4
src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
View File

@@ -2,9 +2,9 @@
* React component for Switch Directory
*/
import _ from "underscore";
import { Dropdown, IDropdownOption, IDropdownProps } from "@fluentui/react";
import * as React from "react";
import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
import _ from "underscore";
import { Tenant } from "../../../Contracts/DataModels";
export interface DefaultDirectoryDropdownProps {

18
src/Explorer/Controls/Directory/DirectoryListComponent.tsx
View File

@@ -1,11 +1,15 @@
import _ from "underscore";
import {
DefaultButton,
IButtonProps,
ITextFieldProps,
List,
ScrollablePane,
Sticky,
StickyPositionType,
TextField,
} from "@fluentui/react";
import * as React from "react";
import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
import { List } from "office-ui-fabric-react/lib/List";
import { ScrollablePane } from "office-ui-fabric-react/lib/ScrollablePane";
import { Sticky, StickyPositionType } from "office-ui-fabric-react/lib/Sticky";
import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
import _ from "underscore";
import { Tenant } from "../../../Contracts/DataModels";
export interface DirectoryListProps {

8
src/Explorer/Controls/Directory/__snapshots__/DefaultDirectoryDropdownComponent.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`test render renders with directories and default 1`] = `
<StyledWithResponsiveMode
<Dropdown
className="defaultDirectoryDropdown"
defaultSelectedKey="asdfghjklzxcvbnm9876543210"
label="Set your default directory"
@@ -26,7 +26,7 @@ exports[`test render renders with directories and default 1`] = `
`;
exports[`test render renders with directories and last visit default 1`] = `
<StyledWithResponsiveMode
<Dropdown
className="defaultDirectoryDropdown"
defaultSelectedKey="lastVisited"
label="Set your default directory"
@@ -51,7 +51,7 @@ exports[`test render renders with directories and last visit default 1`] = `
`;
exports[`test render renders with directories but no default 1`] = `
<StyledWithResponsiveMode
<Dropdown
className="defaultDirectoryDropdown"
defaultSelectedKey="lastVisited"
label="Set your default directory"
@@ -76,7 +76,7 @@ exports[`test render renders with directories but no default 1`] = `
`;
exports[`test render renders with no directories 1`] = `
<StyledWithResponsiveMode
<Dropdown
className="defaultDirectoryDropdown"
defaultSelectedKey="lastVisited"
label="Set your default directory"

51
src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
View File

@@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
}
>
<div
className="ms-ScrollablePane root-72"
className="ms-ScrollablePane root-53"
data-is-scrollable="true"
>
<div
className="stickyAbove-74"
className="stickyAbove-55"
style={
Object {
"height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
}
/>
<div
className="ms-ScrollablePane--contentContainer contentContainer-73"
className="ms-ScrollablePane--contentContainer contentContainer-54"
data-is-scrollable={true}
>
<Sticky
@@ -408,7 +408,6 @@ exports[`test render renders with filters 1`] = `
>
<TextFieldBase
ariaLabel="Directory filter text box"
canRevealPassword={false}
className="directoryListFilterTextBox"
deferredValidationTime={200}
onChange={[Function]}
@@ -691,18 +690,18 @@ exports[`test render renders with filters 1`] = `
validateOnLoad={true}
>
<div
className="ms-TextField directoryListFilterTextBox root-78"
className="ms-TextField directoryListFilterTextBox root-59"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-79"
className="ms-TextField-fieldGroup fieldGroup-60"
>
<input
aria-invalid={false}
aria-label="Directory filter text box"
className="ms-TextField-field field-80"
className="ms-TextField-field field-61"
id="TextField0"
onBlur={[Function]}
onChange={[Function]}
@@ -1266,7 +1265,6 @@ exports[`test render renders with filters 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -1611,6 +1609,35 @@ exports[`test render renders with filters 1`] = `
},
},
},
"splitButtonMenuFocused": Object {
"outline": "transparent",
"position": "relative",
"selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff",
"bottom": 3,
"content": "\\"\\"",
"left": 3,
"outline": "1px solid #605e5c",
"position": "absolute",
"right": 3,
"selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
"border": "none",
"bottom": -2,
"left": -2,
"right": -2,
"top": -2,
},
},
"top": 3,
"zIndex": 1,
},
"::-moz-focus-inner": Object {
"border": "0",
},
},
},
"splitButtonMenuIcon": Object {
"color": "#323130",
},
@@ -1900,7 +1927,7 @@ exports[`test render renders with filters 1`] = `
>
<button
aria-disabled={true}
className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
className="ms-Button ms-Button--default is-disabled directoryListButton root-70"
data-is-focusable={false}
disabled={true}
onClick={[Function]}
@@ -1912,7 +1939,7 @@ exports[`test render renders with filters 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-90"
className="ms-Button-flexContainer flexContainer-71"
data-automationid="splitbuttonprimary"
>
<div
@@ -1943,7 +1970,7 @@ exports[`test render renders with filters 1`] = `
</List>
</div>
<div
className="stickyBelow-75"
className="stickyBelow-56"
style={
Object {
"bottom": "0px",
@@ -1954,7 +1981,7 @@ exports[`test render renders with filters 1`] = `
}
>
<div
className="stickyBelowItems-76"
className="stickyBelowItems-57"
/>
</div>
</div>

15
src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx
View File

@@ -1,9 +1,14 @@
import {
Checkbox,
DefaultButton,
Dropdown,
IDropdownOption,
IDropdownStyles,
ITextFieldStyles,
Stack,
TextField,
} from "@fluentui/react";
import * as React from "react";
import { Stack } from "office-ui-fabric-react/lib/Stack";
import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
import { Checkbox } from "office-ui-fabric-react/lib/Checkbox";
import { TextField, ITextFieldStyles } from "office-ui-fabric-react/lib/TextField";
import { DefaultButton } from "office-ui-fabric-react";
import "./FeaturePanelComponent.less";
export const FeaturePanelComponent: React.FunctionComponent = () => {

2
src/Explorer/Controls/FeaturePanel/FeaturePanelLauncher.tsx
View File

@@ -1,6 +1,6 @@
import * as React from "react";
import { FeaturePanelComponent } from "./FeaturePanelComponent";
import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "office-ui-fabric-react";
import { getTheme, mergeStyleSets, FontWeights, Modal, IconButton, IIconProps } from "@fluentui/react";
import "./FeaturePanelLauncher.less";
// Modal wrapper

4
src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap
View File

@@ -57,7 +57,7 @@ exports[`Feature panel renders all flags 1`] = `
}
}
>
<StyledWithResponsiveMode
<Dropdown
label="Base Url"
onChange={[Function]}
options={
@@ -85,7 +85,7 @@ exports[`Feature panel renders all flags 1`] = `
}
}
/>
<StyledWithResponsiveMode
<Dropdown
label="Platform"
onChange={[Function]}
options={

2
src/Explorer/Controls/GitHub/AddRepoComponent.tsx
View File

@@ -1,4 +1,4 @@
import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
import * as React from "react";
import * as Constants from "../../../Common/Constants";
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";

8
src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx
View File

@@ -1,10 +1,4 @@
import {
ChoiceGroup,
IButtonProps,
IChoiceGroupProps,
PrimaryButton,
IChoiceGroupOption,
} from "office-ui-fabric-react";
import { ChoiceGroup, IButtonProps, IChoiceGroupProps, PrimaryButton, IChoiceGroupOption } from "@fluentui/react";
import * as React from "react";
import { ChildrenMargin } from "./GitHubStyleConstants";

2
src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
View File

@@ -1,4 +1,4 @@
import { DefaultButton, IButtonProps, Link, PrimaryButton } from "office-ui-fabric-react";
import { DefaultButton, IButtonProps, Link, PrimaryButton } from "@fluentui/react";
import * as React from "react";
import { IGitHubBranch, IGitHubRepo } from "../../../GitHub/GitHubClient";
import { AddRepoComponent, AddRepoComponentProps } from "./AddRepoComponent";

2
src/Explorer/Controls/GitHub/GitHubStyleConstants.ts
View File

@@ -4,7 +4,7 @@ import {
IDropdownStyleProps,
IDropdownStyles,
IStyleFunctionOrObject,
} from "office-ui-fabric-react";
} from "@fluentui/react";
export const ButtonsFooterStyle: React.CSSProperties = {
paddingTop: 14,

2
src/Explorer/Controls/GitHub/ReposListComponent.tsx
View File

@@ -16,7 +16,7 @@ import {
ResponsiveMode,
SelectionMode,
Text,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import * as React from "react";
import { IGitHubBranch, IGitHubPageInfo } from "../../../GitHub/GitHubClient";
import * as GitHubUtils from "../../../Utils/GitHubUtils";

2
src/Explorer/Controls/Header/GalleryHeaderComponent.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "office-ui-fabric-react";
import { Stack, Text, Separator, FontIcon, CommandButton, FontWeights, ITextProps } from "@fluentui/react";
export class GalleryHeaderComponent extends React.Component {
private static readonly azureText = "Microsoft Azure";

7
src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
View File

@@ -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

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

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

123
src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx Normal file
View File

@@ -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>
);
}
}

2
src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx
View File

@@ -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";

2
src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
View File

@@ -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";

2
src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx
View File

@@ -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";

12
src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
View File

@@ -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>
`;

12
src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
View File

@@ -1,17 +1,7 @@
/**
* Wrapper around Notebook metadata
*/
import {
FontWeights,
Icon,
IconButton,
Link,
Persona,
PersonaSize,
PrimaryButton,
Stack,
Text,
} from "office-ui-fabric-react";
import { FontWeights, Icon, IconButton, Link, Persona, PersonaSize, PrimaryButton, Stack, Text } from "@fluentui/react";
import * as React from "react";
import { IGalleryItem } from "../../../Juno/JunoClient";
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";

2
src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
View File

@@ -3,7 +3,7 @@
*/
import { Notebook } from "@nteract/commutable";
import { createContentRef } from "@nteract/core";
import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "office-ui-fabric-react";
import { IChoiceGroupProps, Icon, IProgressIndicatorProps, Link, ProgressIndicator } from "@fluentui/react";
import * as React from "react";
import { contents } from "rx-jupyter";
import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";

16
src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
View File

@@ -1,22 +1,24 @@
import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
import {
ContextualMenu,
DetailsList,
DetailsListLayoutMode,
DetailsRow,
FocusZone,
IButtonProps,
IColumn,
IconButton,
IContextualMenuProps,
IDetailsListProps,
IDetailsRowProps,
} from "office-ui-fabric-react/lib/DetailsList";
import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
import {
IObjectWithKey,
ISelectionZoneProps,
ITextField,
ITextFieldProps,
Selection,
SelectionMode,
SelectionZone,
} from "office-ui-fabric-react/lib/utilities/selection/index";
TextField,
} from "@fluentui/react";
import * as React from "react";
import * as _ from "underscore";
import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";

4
src/Explorer/Controls/RadioSwitchComponent/RadioSwitchComponent.tsx
View File

@@ -2,10 +2,10 @@
* Horizontal switch component
*/
import { Icon } from "@fluentui/react";
import * as React from "react";
import "./RadioSwitchComponent.less";
import { Icon } from "office-ui-fabric-react/lib/Icon";
import { NormalizedEventKey } from "../../../Common/Constants";
import "./RadioSwitchComponent.less";
export interface Choice {
key: string;

2
src/Explorer/Controls/Settings/SettingsComponent.tsx
View File

@@ -1,4 +1,4 @@
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
import * as React from "react";
import DiscardIcon from "../../../../images/discard.svg";
import SaveIcon from "../../../../images/save-cosmos.svg";

2
src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx
View File

@@ -1,6 +1,6 @@
import { shallow } from "enzyme";
import React from "react";
import { IColumn, Text } from "office-ui-fabric-react";
import { IColumn, Text } from "@fluentui/react";
import {
getAutoPilotV3SpendElement,
getEstimatedSpendingElement,

2
src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
View File

@@ -38,7 +38,7 @@ import {
IDetailsRowProps,
DetailsRow,
IDetailsColumnStyles,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import { isDirtyTypes, isDirty } from "./SettingsUtils";
export interface EstimatedSpendingDisplayProps {

2
src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
View File

@@ -9,7 +9,7 @@ import {
subComponentStackProps,
getChoiceGroupStyles,
} from "../SettingsRenderUtils";
import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "office-ui-fabric-react";
import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
import { isDirty } from "../SettingsUtils";

5
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
View File

@@ -1,7 +1,8 @@
import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
import * as monaco from "monaco-editor";
import * as React from "react";
import * as DataModels from "../../../../Contracts/DataModels";
import { loadMonaco, monaco } from "../../../LazyMonaco";
import { loadMonaco } from "../../../LazyMonaco";
import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
import { isDirty, isIndexTransforming } from "../SettingsUtils";
import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";

2
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { MessageBar, MessageBarType } from "office-ui-fabric-react";
import { MessageBar, MessageBarType } from "@fluentui/react";
import {
mongoIndexTransformationRefreshingMessage,
renderMongoIndexTransformationRefreshMessage,

4
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
View File

@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`IndexingPolicyRefreshComponent renders 1`] = `
<StyledMessageBarBase
<StyledMessageBar
messageBarType={5}
>
<Text
@@ -20,5 +20,5 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
Refresh to check the progress.
</StyledLinkBase>
</Text>
</StyledMessageBarBase>
</StyledMessageBar>
`;

2
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx
View File

@@ -8,7 +8,7 @@ import {
Dropdown,
IDropdownOption,
ITextField,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import {
addMongoIndexSubElementsTokens,
mongoErrorMessageStyles,

2
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
View File

@@ -12,7 +12,7 @@ import {
Spinner,
SpinnerSize,
Separator,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import {
addMongoIndexStackProps,
customDetailsListStyles,

6
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
View File

@@ -30,7 +30,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
}
value="sample_key"
/>
<StyledWithResponsiveMode
<Dropdown
ariaLabel="Index Type 1"
onChange={[Function]}
options={
@@ -67,7 +67,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
onClick={[Function]}
/>
</Stack>
<StyledMessageBarBase
<StyledMessageBar
messageBarType={1}
styles={
Object {
@@ -78,6 +78,6 @@ exports[`AddMongoIndexComponent renders 1`] = `
}
>
sample error
</StyledMessageBarBase>
</StyledMessageBar>
</Stack>
`;

2
src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
View File

@@ -1,4 +1,4 @@
import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
import * as React from "react";
import * as Constants from "../../../../Common/Constants";
import { configContext, Platform } from "../../../../ConfigContext";

11
src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
View File

@@ -1,13 +1,4 @@
import {
ChoiceGroup,
IChoiceGroupOption,
Label,
Link,
MessageBar,
Stack,
Text,
TextField,
} from "office-ui-fabric-react";
import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext";

2
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@@ -10,7 +10,7 @@ import {
Stack,
Text,
TextField,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import React from "react";
import * as DataModels from "../../../../../Contracts/DataModels";
import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";

14
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

@@ -8,7 +8,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
}
}
>
<StyledMessageBarBase
<StyledMessageBar
messageBarIconProps={
Object {
"className": "messageBarWarningIcon",
@@ -27,7 +27,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
>
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
</Text>
</StyledMessageBarBase>
</StyledMessageBar>
<Stack>
<StyledLabelBase
id="settingsV2RadioButtonLabelId"
@@ -49,7 +49,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
}
/>
</StyledLabelBase>
<StyledMessageBarBase
<StyledMessageBar
messageBarIconProps={
Object {
"className": "messageBarInfoIcon",
@@ -86,8 +86,8 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
Learn more
</a>
</Text>
</StyledMessageBarBase>
<StyledChoiceGroupBase
</StyledMessageBar>
<StyledChoiceGroup
ariaLabelledBy="settingsV2RadioButtonLabelId"
onChange={[Function]}
options={
@@ -196,7 +196,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
ariaLabelledBy="settingsV2RadioButtonLabelId"
onChange={[Function]}
options={
@@ -470,7 +470,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
ariaLabelledBy="settingsV2RadioButtonLabelId"
onChange={[Function]}
options={

2
src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "office-ui-fabric-react";
import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
export interface ToolTipLabelComponentProps {

4
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap
View File

@@ -8,7 +8,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
label="Mode"
onChange={[Function]}
options={
@@ -80,7 +80,7 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
label="Mode"
onChange={[Function]}
options={

4
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap
View File

@@ -8,7 +8,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
}
}
>
<StyledMessageBarBase
<StyledMessageBar
messageBarType={5}
>
<Text
@@ -26,7 +26,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
Database: test, Container: test
, Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
</Text>
</StyledMessageBarBase>
</StyledMessageBar>
<Stack
tokens={
Object {

36
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
View File

@@ -15,7 +15,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="timeToLive"
label="Time to Live"
onChange={[Function]}
@@ -85,7 +85,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
value="1000"
/>
</Stack>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="geoSpatialConfig"
label="Geospatial Configuration"
onChange={[Function]}
@@ -146,7 +146,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
aria-labelledby="settingsV2ChangeFeedLabelId"
id="changeFeedPolicy"
onChange={[Function]}
@@ -238,7 +238,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="timeToLive"
label="Time to Live"
onChange={[Function]}
@@ -308,7 +308,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
value="1000"
/>
</Stack>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="geoSpatialConfig"
label="Geospatial Configuration"
onChange={[Function]}
@@ -355,7 +355,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="analyticalStorageTimeToLive"
label="Analytical Storage Time to Live"
onChange={[Function]}
@@ -422,7 +422,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
aria-labelledby="settingsV2ChangeFeedLabelId"
id="changeFeedPolicy"
onChange={[Function]}
@@ -514,7 +514,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="timeToLive"
label="Time to Live"
onChange={[Function]}
@@ -584,7 +584,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
value="1000"
/>
</Stack>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="geoSpatialConfig"
label="Geospatial Configuration"
onChange={[Function]}
@@ -631,7 +631,7 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="analyticalStorageTimeToLive"
label="Analytical Storage Time to Live"
onChange={[Function]}
@@ -753,7 +753,7 @@ exports[`SubSettingsComponent renders 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="timeToLive"
label="Time to Live"
onChange={[Function]}
@@ -823,7 +823,7 @@ exports[`SubSettingsComponent renders 1`] = `
value="1000"
/>
</Stack>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="geoSpatialConfig"
label="Geospatial Configuration"
onChange={[Function]}
@@ -870,7 +870,7 @@ exports[`SubSettingsComponent renders 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="analyticalStorageTimeToLive"
label="Analytical Storage Time to Live"
onChange={[Function]}
@@ -962,7 +962,7 @@ exports[`SubSettingsComponent renders 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
aria-labelledby="settingsV2ChangeFeedLabelId"
id="changeFeedPolicy"
onChange={[Function]}
@@ -1054,7 +1054,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="timeToLive"
label="Time to Live"
onChange={[Function]}
@@ -1099,7 +1099,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
}
/>
</Stack>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="geoSpatialConfig"
label="Geospatial Configuration"
onChange={[Function]}
@@ -1146,7 +1146,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
}
}
>
<StyledChoiceGroupBase
<StyledChoiceGroup
id="analyticalStorageTimeToLive"
label="Analytical Storage Time to Live"
onChange={[Function]}
@@ -1238,7 +1238,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
}
/>
</StyledLabelBase>
<StyledChoiceGroupBase
<StyledChoiceGroup
aria-labelledby="settingsV2ChangeFeedLabelId"
id="changeFeedPolicy"
onChange={[Function]}

4
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@@ -7,7 +7,7 @@ exports[`SettingsComponent renders 1`] = `
<div
className="settingsV2TabsContainer"
>
<StyledPivotBase
<StyledPivot
onLinkClick={[Function]}
selectedKey="ScaleTab"
>
@@ -5178,7 +5178,7 @@ exports[`SettingsComponent renders 1`] = `
shouldDiscardIndexingPolicy={false}
/>
</PivotItem>
</StyledPivotBase>
</StyledPivot>
</div>
</div>
`;

4
src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
View File

@@ -338,7 +338,7 @@ exports[`SettingsUtils functions render 1`] = `
</StyledLinkBase>
are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo shell.
</Text>
<StyledMessageBarBase
<StyledMessageBar
messageBarType={1}
>
<Text>
@@ -350,7 +350,7 @@ exports[`SettingsUtils functions render 1`] = `
azure portal.
</StyledLinkBase>
</Text>
</StyledMessageBarBase>
</StyledMessageBar>
<Stack
horizontal={true}
tokens={

24
src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
View File

@@ -1,12 +1,20 @@
import {
Dropdown,
IDropdownOption,
IStackTokens,
Label,
Link,
MessageBar,
MessageBarType,
Position,
Slider,
SpinButton,
Stack,
Text,
TextField,
Toggle,
} from "@fluentui/react";
import { TFunction } from "i18next";
import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
import { Slider } from "office-ui-fabric-react/lib/Slider";
import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
import { Text } from "office-ui-fabric-react/lib/Text";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
import * as React from "react";
import {
ChoiceItem,

39
src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
View File

@@ -77,22 +77,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
}
}
>
<CustomizedSpinButton
<StyledSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={true}
id="throughput-spinner-input"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={0}
max={500}
min={400}
@@ -169,12 +158,12 @@ exports[`SmartUiComponent disable all inputs 1`] = `
}
>
<StackItem>
<StyledMessageBarBase
<StyledMessageBar
messageBarType={1}
>
Error:
label, truelabel and falselabel are required for boolean input 'throughput3'
</StyledMessageBarBase>
</StyledMessageBar>
</StackItem>
</Stack>
</div>
@@ -282,7 +271,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
<Dropdown
aria-labelledby="database-label"
disabled={true}
id="database-dropdown-input"
@@ -402,22 +391,10 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
}
}
>
<CustomizedSpinButton
<StyledSpinButton
aria-labelledby="throughput-label"
ariaLabel="Throughput (input)"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={false}
id="throughput-spinner-input"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={0}
max={500}
min={400}
@@ -493,12 +470,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
}
>
<StackItem>
<StyledMessageBarBase
<StyledMessageBar
messageBarType={1}
>
Error:
label, truelabel and falselabel are required for boolean input 'throughput3'
</StyledMessageBarBase>
</StyledMessageBar>
</StackItem>
</Stack>
</div>
@@ -604,7 +581,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
label="Database"
/>
</StyledLabelBase>
<StyledWithResponsiveMode
<Dropdown
aria-labelledby="database-label"
id="database-dropdown-input"
onChange={[Function]}

2
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
import React from "react";
import * as Constants from "../../../Common/Constants";
import * as SharedConstants from "../../../Shared/Constants";

16
src/Explorer/Controls/TreeComponent/TreeComponent.tsx
View File

@@ -5,21 +5,21 @@
* - context menu
*/
import * as React from "react";
import * as Constants from "../../../Common/Constants";
import AnimateHeight from "react-animate-height";
import { IconButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
import {
DirectionalHint,
IButtonStyles,
IconButton,
IContextualMenuItemProps,
IContextualMenuProps,
} from "office-ui-fabric-react/lib/ContextualMenu";
} from "@fluentui/react";
import * as React from "react";
import AnimateHeight from "react-animate-height";
import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
import TriangleDownIcon from "../../../../images/Triangle-down.svg";
import TriangleRightIcon from "../../../../images/Triangle-right.svg";
import LoadingIndicator_3Squares from "../../../../images/LoadingIndicator_3Squares.gif";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import * as Constants from "../../../Common/Constants";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
export interface TreeNodeMenuItem {
label: string;