random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-21 09:51:11 +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

2
src/Explorer/Panes/AddCollectionPanel.tsx
View File

@@ -12,7 +12,7 @@ import {
Stack,
Text,
TooltipHost,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import React from "react";
import * as Constants from "../../Common/Constants";
import { createCollection } from "../../Common/dataAccess/createCollection";

2
src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx
View File

@@ -1,4 +1,4 @@
import { IDropdownOption } from "office-ui-fabric-react";
import { IDropdownOption } from "@fluentui/react";
import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
import { HttpStatusCodes } from "../../../Common/Constants";
import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";

2
src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
View File

@@ -8,7 +8,7 @@ import {
SelectableOptionMenuItemType,
Stack,
Text,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import React, { FormEvent, FunctionComponent } from "react";
import { IPinnedRepo } from "../../../Juno/JunoClient";
import * as GitHubUtils from "../../../Utils/GitHubUtils";

2
src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
View File

@@ -1,4 +1,4 @@
import { Text, TextField } from "office-ui-fabric-react";
import { Text, TextField } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import { Areas } from "../../../Common/Constants";
import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";

97
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

@@ -523,7 +523,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -786,6 +785,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
},
},
},
"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",
},
},
},
"textContainer": Object {
"display": "block",
"flexGrow": 1,
@@ -1071,7 +1099,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<button
aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-172"
className="ms-Button ms-Button--icon closePaneBtn root-202"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -1084,18 +1112,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-173"
className="ms-Button-flexContainer flexContainer-203"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-175"
className="ms-Button-icon icon-205"
iconName="Cancel"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-180 ms-Button-icon icon-175"
className="ms-Icon root-37 css-210 ms-Button-icon icon-205"
data-icon-name="Cancel"
role="presentation"
style={
Object {
"fontFamily": "\\"FabricMDL2Icons\\"",
@@ -1163,7 +1190,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-181"
className="css-211"
>
Confirm by typing the
container
@@ -1185,7 +1212,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<TextFieldBase
autoFocus={true}
canRevealPassword={false}
deferredValidationTime={200}
id="confirmCollectionId"
onChange={[Function]}
@@ -1468,18 +1494,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField root-183"
className="ms-TextField root-213"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-184"
className="ms-TextField-fieldGroup fieldGroup-214"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-185"
className="ms-TextField-field field-215"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@@ -1502,7 +1528,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-194"
className="css-224"
>
Help us improve Azure Cosmos DB!
</span>
@@ -1512,7 +1538,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-194"
className="css-224"
>
What is the reason why you are deleting this
container
@@ -1534,7 +1560,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<TextFieldBase
canRevealPassword={false}
deferredValidationTime={200}
id="deleteCollectionFeedbackInput"
multiline={true}
@@ -1819,17 +1844,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField ms-TextField--multiline root-183"
className="ms-TextField ms-TextField--multiline root-213"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-195"
className="ms-TextField-fieldGroup fieldGroup-225"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-196"
className="ms-TextField-field field-226"
id="deleteCollectionFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@@ -2919,7 +2944,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -3266,6 +3290,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
},
},
},
"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": "#ffffff",
},
@@ -3563,7 +3616,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<button
aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-198"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-228"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -3581,14 +3634,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-173"
className="ms-Button-flexContainer flexContainer-203"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-174"
className="ms-Button-textContainer textContainer-204"
>
<span
className="ms-Button-label label-199"
className="ms-Button-label label-229"
id="id__9"
key="id__9"
>

4
src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import { Text, TextField } from "office-ui-fabric-react";
import { useBoolean } from "@fluentui/react-hooks";
import { Text, TextField } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import { Areas } from "../../Common/Constants";
import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";

4
src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
import { useBoolean } from "@fluentui/react-hooks";
import { IDropdownOption, IImageProps, Image, Stack, Text } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import AddPropertyIcon from "../../../../images/Add-property.svg";
import StoredProcedure from "../../Tree/StoredProcedure";

2
src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx
View File

@@ -7,7 +7,7 @@ import {
Label,
Stack,
TextField,
} from "office-ui-fabric-react";
} from "@fluentui/react";
import React, { FunctionComponent } from "react";
import AddPropertyIcon from "../../../../images/Add-property.svg";
import EntityCancelIcon from "../../../../images/Entity_cancel.svg";

1434
src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx
View File

@@ -1,4 +1,4 @@
import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
import { IconButton, PrimaryButton } from "@fluentui/react";
import React, { FunctionComponent, ReactNode } from "react";
import ErrorRedIcon from "../../../../images/error_red.svg";
import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";

4
src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric-react";
import { useBoolean } from "@fluentui/react-hooks";
import { IImageProps, Image, ImageFit, Stack, TextField } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import folderIcon from "../../../../images/folder_16x16.svg";
import { logError } from "../../../Common/Logger";

2
src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
View File

@@ -39,7 +39,7 @@ exports[`Load Query Pane should render Default properly 1`] = `
className="customFileUpload"
htmlFor="importQueryInputId"
>
<StyledImageBase
<Image
alt="upload files"
className="fileIcon"
height={20}

2
src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx
View File

@@ -1,4 +1,4 @@
import { useBoolean } from "@uifabric/react-hooks";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useState } from "react";
import * as ViewModels from "../../../Contracts/ViewModels";
import Explorer from "../../Explorer";

2
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@@ -1,4 +1,4 @@
import { IPanelProps, IRenderFunction, Panel, PanelType } from "office-ui-fabric-react";
import { IPanelProps, IRenderFunction, Panel, PanelType } from "@fluentui/react";
import * as React from "react";
export interface PanelContainerProps {

2
src/Explorer/Panes/PanelFooterComponent.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { PrimaryButton } from "office-ui-fabric-react";
import { PrimaryButton } from "@fluentui/react";
export interface PanelFooterProps {
buttonLabel: string;

2
src/Explorer/Panes/PanelInfoErrorComponent.tsx
View File

@@ -1,4 +1,4 @@
import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
import { Icon, Link, Stack, Text } from "@fluentui/react";
import React from "react";
export interface PanelInfoErrorProps {

2
src/Explorer/Panes/PublishNotebookPane/PublishNotebookPaneComponent.tsx
View File

@@ -1,6 +1,6 @@
import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "@fluentui/react";
import { ImmutableNotebook } from "@nteract/commutable";
import Html2Canvas from "html2canvas";
import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "office-ui-fabric-react";
import React, { FunctionComponent, useState } from "react";
import { GalleryCardComponent } from "../../Controls/NotebookGallery/Cards/GalleryCardComponent";
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";

2
src/Explorer/Panes/PublishNotebookPane/__snapshots__/PublishNotebookPane.test.tsx.snap
View File

@@ -50,7 +50,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
/>
</StackItem>
<StackItem>
<StyledWithResponsiveMode
<Dropdown
ariaLabel="Cover image"
defaultSelectedKey="Custom Image"
label="Cover image"

4
src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import { Text, TextField } from "office-ui-fabric-react";
import { useBoolean } from "@fluentui/react-hooks";
import { Text, TextField } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import { Areas, SavedQueries } from "../../../Common/Constants";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

3
src/Explorer/Panes/SettingsPane/SettingsPane.tsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "office-ui-fabric-react";
import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
import React, { FunctionComponent, MouseEvent, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { Tooltip } from "../../../Common/Tooltip/Tooltip";
@@ -187,7 +187,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
label: { padding: 0 },
}}
className="padding"
tabIndex={0}
ariaLabel="Enable cross partition query"
checked={crossPartitionQueryEnabled}
onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}

37
src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
View File

@@ -29,7 +29,7 @@ exports[`Settings Pane should render Default properly 1`] = `
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
</Tooltip>
</div>
<StyledChoiceGroupBase
<StyledChoiceGroup
onChange={[Function]}
options={
Array [
@@ -60,25 +60,11 @@ exports[`Settings Pane should render Default properly 1`] = `
Enter the number of query results that should be shown per page.
</Tooltip>
</div>
<CustomizedSpinButton
<StyledSpinButton
ariaLabel="Custom query items per page"
className="textfontclr"
decrementButtonAriaLabel="Decrease value by 1"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={false}
incrementButtonAriaLabel="Increase value by 1"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={2}
max={100}
min={1}
onDecrement={[Function]}
onIncrement={[Function]}
@@ -115,7 +101,6 @@ exports[`Settings Pane should render Default properly 1`] = `
},
}
}
tabIndex={0}
/>
</div>
</div>
@@ -133,24 +118,10 @@ exports[`Settings Pane should render Default properly 1`] = `
Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
</Tooltip>
</div>
<CustomizedSpinButton
<StyledSpinButton
ariaLabel="Max degree of parallelism"
className="textfontclr"
decrementButtonIcon={
Object {
"iconName": "ChevronDownSmall",
}
}
disabled={false}
id="max-degree"
incrementButtonIcon={
Object {
"iconName": "ChevronUpSmall",
}
}
label=""
labelPosition={2}
max={100}
min={-1}
onDecrement={[Function]}
onIncrement={[Function]}
@@ -209,7 +180,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
</Tooltip>
</div>
<StyledChoiceGroupBase
<StyledChoiceGroup
aria-label="Graph Auto-visualization"
onChange={[Function]}
options={

2
src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.test.tsx
View File

@@ -1,5 +1,5 @@
import { PrimaryButton } from "@fluentui/react";
import { mount } from "enzyme";
import { PrimaryButton } from "office-ui-fabric-react";
import React from "react";
import Explorer from "../../Explorer";
import { SetupNoteBooksPanel } from "./SetupNotebooksPanel";

4
src/Explorer/Panes/SetupNotebooksPanel/SetupNotebooksPanel.tsx
View File

@@ -1,5 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import { PrimaryButton } from "office-ui-fabric-react";
import { PrimaryButton } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, KeyboardEvent, useState } from "react";
import { Areas, NormalizedEventKey } from "../../../Common/Constants";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

38
src/Explorer/Panes/SetupNotebooksPanel/__snapshots__/SetupNotebooksPanel.test.tsx.snap
View File

@@ -1062,7 +1062,6 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -1409,6 +1408,35 @@ exports[`Setup Notebooks Panel should render Default properly 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": "#ffffff",
},
@@ -1704,7 +1732,7 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
>
<button
aria-label="Complete setup"
className="ms-Button ms-Button--primary btncreatecoll1 btnSetupQueries root-72"
className="ms-Button ms-Button--primary btncreatecoll1 btnSetupQueries root-53"
data-is-focusable={true}
id="completeSetupBtn"
onClick={[Function]}
@@ -1716,14 +1744,14 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-73"
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-74"
className="ms-Button-textContainer textContainer-55"
>
<span
className="ms-Button-label label-76"
className="ms-Button-label label-57"
id="id__0"
key="id__0"
>

2
src/Explorer/Panes/StringInputPane/StringInputPane.tsx
View File

@@ -1,4 +1,4 @@
import { TextField } from "office-ui-fabric-react";
import { TextField } from "@fluentui/react";
import React, { FormEvent, FunctionComponent, useState } from "react";
import * as ViewModels from "../../../Contracts/ViewModels";
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";

86
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

@@ -1787,7 +1787,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -2050,6 +2049,35 @@ exports[`StringInput Pane should render Create new directory properly 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",
},
},
},
"textContainer": Object {
"display": "block",
"flexGrow": 1,
@@ -2335,7 +2363,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<button
aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-104"
className="ms-Button ms-Button--icon closePaneBtn root-153"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -2348,18 +2376,17 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-105"
className="ms-Button-flexContainer flexContainer-154"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-107"
className="ms-Button-icon icon-156"
iconName="Cancel"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-112 ms-Button-icon icon-107"
className="ms-Icon root-37 css-161 ms-Button-icon icon-156"
data-icon-name="Cancel"
role="presentation"
style={
Object {
"fontFamily": "\\"FabricMDL2Icons\\"",
@@ -2424,7 +2451,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
<TextFieldBase
aria-label="Enter new directory name"
autoFocus={true}
canRevealPassword={false}
deferredValidationTime={200}
label="Enter new directory name"
name="collectionIdConfirmation"
@@ -2709,7 +2735,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
value=""
>
<div
className="ms-TextField is-required root-114"
className="ms-TextField is-required root-163"
>
<div
className="ms-TextField-wrapper"
@@ -3000,7 +3026,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
}
>
<label
className="ms-Label root-125"
className="ms-Label root-174"
htmlFor="TextField3"
id="TextFieldLabel5"
>
@@ -3009,13 +3035,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</LabelBase>
</StyledLabelBase>
<div
className="ms-TextField-fieldGroup fieldGroup-115"
className="ms-TextField-fieldGroup fieldGroup-164"
>
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel5"
autoFocus={true}
className="ms-TextField-field field-116"
className="ms-TextField-field field-165"
id="TextField3"
name="collectionIdConfirmation"
onBlur={[Function]}
@@ -4105,7 +4131,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -4452,6 +4477,35 @@ exports[`StringInput Pane should render Create new directory properly 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": "#ffffff",
},
@@ -4749,7 +4803,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<button
aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-126"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-175"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -4767,14 +4821,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-105"
className="ms-Button-flexContainer flexContainer-154"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-106"
className="ms-Button-textContainer textContainer-155"
>
<span
className="ms-Button-label label-127"
className="ms-Button-label label-176"
id="id__6"
key="id__6"
>

13
src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
View File

@@ -1,14 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import {
IDropdownOption,
Image,
IPanelProps,
IRenderFunction,
Label,
Stack,
Text,
TextField,
} from "office-ui-fabric-react";
import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useEffect, useState } from "react";
import * as _ from "underscore";
import AddPropertyIcon from "../../../../images/Add-property.svg";

13
src/Explorer/Panes/Tables/EditTableEntityPanel.tsx
View File

@@ -1,14 +1,5 @@
import { useBoolean } from "@uifabric/react-hooks";
import {
IDropdownOption,
Image,
IPanelProps,
IRenderFunction,
Label,
Stack,
Text,
TextField,
} from "office-ui-fabric-react";
import { IDropdownOption, Image, IPanelProps, IRenderFunction, Label, Stack, Text, TextField } from "@fluentui/react";
import { useBoolean } from "@fluentui/react-hooks";
import React, { FunctionComponent, useEffect, useState } from "react";
import * as _ from "underscore";
import AddPropertyIcon from "../../../../images/Add-property.svg";

121
src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap
View File

@@ -518,7 +518,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -781,6 +780,35 @@ exports[`Table query select Panel should render Default properly 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",
},
},
},
"textContainer": Object {
"display": "block",
"flexGrow": 1,
@@ -1066,7 +1094,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<button
aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-72"
className="ms-Button ms-Button--icon closePaneBtn root-53"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -1079,18 +1107,17 @@ exports[`Table query select Panel should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-73"
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-75"
className="ms-Button-icon icon-56"
iconName="Cancel"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-80 ms-Button-icon icon-75"
className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
data-icon-name="Cancel"
role="presentation"
style={
Object {
"fontFamily": "\\"FabricMDL2Icons\\"",
@@ -1148,7 +1175,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<Text>
<span
className="css-81"
className="css-62"
>
Select the columns that you want to query.
</span>
@@ -1163,7 +1190,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
onChange={[Function]}
>
<CheckboxBase
boxSide="start"
checked={true}
id="availableCheckbox"
label="Available Columns"
@@ -1444,33 +1470,32 @@ exports[`Table query select Panel should render Default properly 1`] = `
}
>
<div
className="ms-Checkbox is-checked is-enabled root-82"
className="ms-Checkbox is-checked is-enabled root-63"
>
<Component />
<input
aria-checked="true"
aria-label="Available Columns"
checked={true}
className="input-83"
className="input-64"
data-ktp-execute-target={true}
id="availableCheckbox"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<label
className="ms-Checkbox-label label-84"
className="ms-Checkbox-label label-65"
htmlFor="availableCheckbox"
>
<div
className="ms-Checkbox-checkbox checkbox-85"
className="ms-Checkbox-checkbox checkbox-66"
data-ktp-target={true}
>
<StyledIconBase
className="ms-Checkbox-checkmark checkmark-86"
className="ms-Checkbox-checkmark checkmark-67"
iconName="CheckMark"
>
<IconBase
className="ms-Checkbox-checkmark checkmark-86"
className="ms-Checkbox-checkmark checkmark-67"
iconName="CheckMark"
styles={[Function]}
theme={
@@ -1749,7 +1774,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<i
aria-hidden={true}
className="ms-Checkbox-checkmark checkmark-88"
className="ms-Checkbox-checkmark checkmark-69"
data-icon-name="CheckMark"
>
@@ -1759,7 +1784,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
</div>
<span
aria-hidden="true"
className="ms-Checkbox-text text-87"
className="ms-Checkbox-text text-68"
>
Available Columns
</span>
@@ -1775,7 +1800,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
onChange={[Function]}
>
<CheckboxBase
boxSide="start"
checked={true}
disabled={false}
label=""
@@ -2056,35 +2080,34 @@ exports[`Table query select Panel should render Default properly 1`] = `
}
>
<div
className="ms-Checkbox is-checked is-enabled root-82"
className="ms-Checkbox is-checked is-enabled root-63"
>
<Component />
<input
aria-checked="true"
aria-disabled={false}
aria-label=""
checked={true}
className="input-83"
className="input-64"
data-ktp-execute-target={true}
disabled={false}
id="checkbox-3"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="checkbox"
/>
<label
className="ms-Checkbox-label label-84"
className="ms-Checkbox-label label-65"
htmlFor="checkbox-3"
>
<div
className="ms-Checkbox-checkbox checkbox-85"
className="ms-Checkbox-checkbox checkbox-66"
data-ktp-target={true}
>
<StyledIconBase
className="ms-Checkbox-checkmark checkmark-86"
className="ms-Checkbox-checkmark checkmark-67"
iconName="CheckMark"
>
<IconBase
className="ms-Checkbox-checkmark checkmark-86"
className="ms-Checkbox-checkmark checkmark-67"
iconName="CheckMark"
styles={[Function]}
theme={
@@ -2363,7 +2386,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<i
aria-hidden={true}
className="ms-Checkbox-checkmark checkmark-88"
className="ms-Checkbox-checkmark checkmark-69"
data-icon-name="CheckMark"
>
@@ -3451,7 +3474,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -3798,6 +3820,35 @@ exports[`Table query select Panel should render Default properly 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": "#ffffff",
},
@@ -4095,7 +4146,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
<button
aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-95"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-76"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -4113,14 +4164,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-73"
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-74"
className="ms-Button-textContainer textContainer-55"
>
<span
className="ms-Button-label label-96"
className="ms-Button-label label-77"
id="id__4"
key="id__4"
>

2
src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx
View File

@@ -1,4 +1,4 @@
import { Checkbox, Text } from "office-ui-fabric-react";
import { Checkbox, Text } from "@fluentui/react";
import React, { FunctionComponent, useEffect, useState } from "react";
import { userContext } from "../../../../UserContext";
import Explorer from "../../../Explorer";

2
src/Explorer/Panes/Tables/Validators/EntityTableHelper.tsx
View File

@@ -1,4 +1,4 @@
import { IImageProps, IStackProps } from "office-ui-fabric-react";
import { IImageProps, IStackProps } from "@fluentui/react";
import * as _ from "underscore";
import * as TableConstants from "../../../Tables/Constants";
import * as Entities from "../../../Tables/Entities";

4223
src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

4223
src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx
View File

@@ -1,4 +1,4 @@
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "office-ui-fabric-react";
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@fluentui/react";
import React, { ChangeEvent, FunctionComponent, useState } from "react";
import { Upload } from "../../../Common/Upload/Upload";
import { UploadDetailsRecord } from "../../../Contracts/ViewModels";

64
src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
View File

@@ -1289,7 +1289,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
verticalAlign="center"
>
<div
className="ms-Stack panelInfoErrorContainer css-172"
className="ms-Stack panelInfoErrorContainer css-202"
>
<StyledIconBase
className="panelWarningIcon"
@@ -1576,7 +1576,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<i
aria-hidden={true}
className="panelWarningIcon root-174"
className="panelWarningIcon root-204"
data-icon-name="WarningSolid"
>
@@ -1592,7 +1592,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="panelWarningErrorMessage css-175"
className="panelWarningErrorMessage css-205"
>
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
@@ -1617,7 +1617,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-175"
className="css-205"
>
Confirm by typing the database id
</span>
@@ -1636,7 +1636,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<TextFieldBase
autoFocus={true}
canRevealPassword={false}
deferredValidationTime={200}
id="confirmDatabaseId"
onChange={[Function]}
@@ -1918,18 +1917,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField root-177"
className="ms-TextField root-207"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-178"
className="ms-TextField-fieldGroup fieldGroup-208"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-179"
className="ms-TextField-field field-209"
id="confirmDatabaseId"
onBlur={[Function]}
onChange={[Function]}
@@ -1952,7 +1951,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-196"
className="css-226"
>
Help us improve Azure Cosmos DB!
</span>
@@ -1962,7 +1961,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-196"
className="css-226"
>
What is the reason why you are deleting this database?
</span>
@@ -1981,7 +1980,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
}
>
<TextFieldBase
canRevealPassword={false}
deferredValidationTime={200}
id="deleteDatabaseFeedbackInput"
multiline={true}
@@ -2265,17 +2263,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-177"
className="ms-TextField ms-TextField--multiline root-207"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-197"
className="ms-TextField-fieldGroup fieldGroup-227"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-198"
className="ms-TextField-field field-228"
id="deleteDatabaseFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@@ -3325,7 +3323,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
"borderColor": "#f3f2f1",
"color": "#a19f9d",
"cursor": "default",
"pointerEvents": "none",
"selectors": Object {
":focus": Object {
"outline": 0,
@@ -3672,6 +3669,35 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
},
},
},
"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": "#ffffff",
},
@@ -3967,7 +3993,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variantClassName="ms-Button--primary"
>
<button
className="ms-Button ms-Button--primary root-188"
className="ms-Button ms-Button--primary root-218"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@@ -3979,14 +4005,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-189"
className="ms-Button-flexContainer flexContainer-219"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-190"
className="ms-Button-textContainer textContainer-220"
>
<span
className="ms-Button-label label-192"
className="ms-Button-label label-222"
id="id__3"
key="id__3"
>