From 6e9144b068feccbcd7c417c8f1b42257072011a9 Mon Sep 17 00:00:00 2001 From: Hardikkumar Nai <80053762+hardiknai-techm@users.noreply.github.com> Date: Wed, 19 May 2021 08:27:31 +0530 Subject: [PATCH] Remove generic right pane component (#790) Co-authored-by: Steve Faulkner --- .../CodeOfConduct.test.tsx} | 10 +- .../CodeOfConduct.tsx} | 8 +- .../CodeOfConduct.test.tsx.snap} | 2 +- .../CodeOfConductComponent.tsx | 123 - .../GalleryViewerComponent.tsx | 4 +- src/Explorer/Explorer.tsx | 8 +- .../NewVertexComponent/NewVertexComponent.tsx | 1 + .../CopyNotebookPane/CopyNotebookPane.tsx | 17 +- .../DeleteCollectionConfirmationPane.test.tsx | 8 +- .../DeleteCollectionConfirmationPane.tsx | 19 +- ...teCollectionConfirmationPane.test.tsx.snap | 4364 ++---- .../DeleteDatabaseConfirmationPanel.test.tsx | 4 +- .../Panes/DeleteDatabaseConfirmationPanel.tsx | 62 +- .../ExecuteSprocParamsPane.tsx | 35 +- .../ExecuteSprocParamsPane.test.tsx.snap | 12386 +++++++--------- .../GenericRightPaneComponent.tsx | 126 - .../Panes/LoadQueryPane/LoadQueryPane.tsx | 36 +- .../__snapshots__/LoadQueryPane.test.tsx.snap | 8 +- .../NewVertexPanel/NewVertexPanel.test.tsx | 6 +- .../Panes/NewVertexPanel/NewVertexPanel.tsx | 32 +- .../NewVertexPanel.test.tsx.snap | 12 +- .../Panes/PanelInfoErrorComponent.tsx | 1 + .../PublishNotebookPane.tsx | 20 +- .../Panes/SaveQueryPane/SaveQueryPane.tsx | 43 +- .../__snapshots__/SaveQueryPane.test.tsx.snap | 8 +- .../Panes/StringInputPane/StringInputPane.tsx | 19 +- .../StringInputPane.test.tsx.snap | 4798 +++--- ...est.tsx => TableQuerySelectPanel.test.tsx} | 2 +- .../{index.tsx => TableQuerySelectPanel.tsx} | 31 +- .../TableQuerySelectPanel.test.tsx.snap | 3007 ++++ .../__snapshots__/index.test.tsx.snap | 4205 ------ .../Panes/UploadFilePane/UploadFilePane.tsx | 4 +- .../Panes/UploadItemsPane/UploadItemsPane.tsx | 4 +- ...eteDatabaseConfirmationPanel.test.tsx.snap | 3210 ++-- test/cassandra/container.spec.ts | 2 +- test/graph/container.spec.ts | 2 +- test/mongo/container.spec.ts | 4 +- test/mongo/container32.spec.ts | 2 +- test/sql/container.spec.ts | 2 +- test/tables/container.spec.ts | 2 +- 40 files changed, 13754 insertions(+), 18883 deletions(-) rename src/Explorer/Controls/NotebookGallery/{CodeOfConductComponent/index.test.tsx => CodeOfConduct/CodeOfConduct.test.tsx} (71%) rename src/Explorer/Controls/NotebookGallery/{CodeOfConductComponent/index.tsx => CodeOfConduct/CodeOfConduct.tsx} (92%) rename src/Explorer/Controls/NotebookGallery/{CodeOfConductComponent/__snapshots__/index.test.tsx.snap => CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap} (96%) delete mode 100644 src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx delete mode 100644 src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx rename src/Explorer/Panes/Tables/TableQuerySelectPanel/{index.test.tsx => TableQuerySelectPanel.test.tsx} (95%) rename src/Explorer/Panes/Tables/TableQuerySelectPanel/{index.tsx => TableQuerySelectPanel.tsx} (91%) create mode 100644 src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap delete mode 100644 src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/index.test.tsx.snap diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx similarity index 71% rename from src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx rename to src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx index 79a6880a3..e99c0c8c2 100644 --- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.test.tsx +++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx @@ -1,12 +1,12 @@ jest.mock("../../../../Juno/JunoClient"); import { shallow } from "enzyme"; import React from "react"; -import { CodeOfConductComponent, CodeOfConductComponentProps } from "."; import { HttpStatusCodes } from "../../../../Common/Constants"; import { JunoClient } from "../../../../Juno/JunoClient"; +import { CodeOfConduct, CodeOfConductProps } from "./CodeOfConduct"; -describe("CodeOfConductComponent", () => { - let codeOfConductProps: CodeOfConductComponentProps; +describe("CodeOfConduct", () => { + let codeOfConductProps: CodeOfConductProps; beforeEach(() => { const junoClient = new JunoClient(); @@ -21,12 +21,12 @@ describe("CodeOfConductComponent", () => { }); it("renders", () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toMatchSnapshot(); }); it("onAcceptedCodeOfConductCalled", async () => { - const wrapper = shallow(); + const wrapper = shallow(); wrapper.find(".genericPaneSubmitBtn").first().simulate("click"); await Promise.resolve(); expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled(); diff --git a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx similarity index 92% rename from src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx rename to src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx index 6d1d78fb2..2bfee23dc 100644 --- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent/index.tsx +++ b/src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.tsx @@ -6,15 +6,15 @@ import { JunoClient } from "../../../../Juno/JunoClient"; import { Action } from "../../../../Shared/Telemetry/TelemetryConstants"; import { trace, traceFailure, traceStart, traceSuccess } from "../../../../Shared/Telemetry/TelemetryProcessor"; -export interface CodeOfConductComponentProps { +export interface CodeOfConductProps { junoClient: JunoClient; onAcceptCodeOfConduct: (result: boolean) => void; } -export const CodeOfConductComponent: FunctionComponent = ({ +export const CodeOfConduct: FunctionComponent = ({ junoClient, onAcceptCodeOfConduct, -}: CodeOfConductComponentProps) => { +}: CodeOfConductProps) => { const descriptionPara1 = "Azure Cosmos DB Notebook Gallery - Code of Conduct"; const descriptionPara2 = "The notebook public gallery contains notebook samples shared by users of Azure Cosmos DB."; const descriptionPara3 = "In order to view and publish your samples to the gallery, you must accept the "; @@ -47,7 +47,7 @@ export const CodeOfConductComponent: FunctionComponent void; -} - -interface CodeOfConductComponentState { - readCodeOfConduct: boolean; -} - -export class CodeOfConductComponent extends React.Component { - 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 { - 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 ( - - - {this.descriptionPara1} - - - - {this.descriptionPara2} - - - - - {this.descriptionPara3} - - {this.link1.label} - - - - - - - - - - await this.acceptCodeOfConduct()} - tabIndex={0} - className="genericPaneSubmitBtn" - text="Continue" - disabled={!this.state.readCodeOfConduct} - /> - - - ); - } -} diff --git a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx index f1733a141..e26ef58e0 100644 --- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx +++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx @@ -30,7 +30,7 @@ import * as GalleryUtils from "../../../Utils/GalleryUtils"; import Explorer from "../../Explorer"; import { Dialog, DialogProps } from "../Dialog"; import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent"; -import { CodeOfConductComponent } from "./CodeOfConductComponent"; +import { CodeOfConduct } from "./CodeOfConduct/CodeOfConduct"; import "./GalleryViewerComponent.less"; import { InfoComponent } from "./InfoComponent/InfoComponent"; @@ -372,7 +372,7 @@ export class GalleryViewerComponent extends React.Component
- { this.setState({ isCodeOfConductAccepted: result }); diff --git a/src/Explorer/Explorer.tsx b/src/Explorer/Explorer.tsx index a8d9fa7d7..ba8f563c4 100644 --- a/src/Explorer/Explorer.tsx +++ b/src/Explorer/Explorer.tsx @@ -67,7 +67,7 @@ import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksP import { StringInputPane } from "./Panes/StringInputPane/StringInputPane"; import { AddTableEntityPanel } from "./Panes/Tables/AddTableEntityPanel"; import { EditTableEntityPanel } from "./Panes/Tables/EditTableEntityPanel"; -import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel"; +import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel"; import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane"; import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane"; import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel"; @@ -1379,7 +1379,7 @@ export default class Explorer { this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again."); } else { this.openSidePanel( - "", + "Rename Notebook", { @@ -1410,7 +1410,7 @@ export default class Explorer { } this.openSidePanel( - "", + "Create new directory", { @@ -1902,7 +1902,7 @@ export default class Explorer { "Delete " + getDatabaseName(), this.expandConsole()} closePanel={this.closeSidePanel} selectedDatabase={this.findSelectedDatabase()} /> diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx index d3011155a..fce3d43e7 100644 --- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx +++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx @@ -132,6 +132,7 @@ export const NewVertexComponent: FunctionComponent = ( onChange={(event: React.ChangeEvent) => { onLabelChange(event); }} + autoFocus />
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx index 41b52a189..8026401b6 100644 --- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx +++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx @@ -9,10 +9,7 @@ import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUti import Explorer from "../../Explorer"; import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem"; import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter"; -import { - GenericRightPaneComponent, - GenericRightPaneProps, -} from "../GenericRightPaneComponent/GenericRightPaneComponent"; +import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm"; import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent"; interface Location { @@ -42,7 +39,6 @@ export const CopyNotebookPane: FunctionComponent = ({ }: CopyNotebookPanelProps) => { const [isExecuting, setIsExecuting] = useState(); const [formError, setFormError] = useState(""); - const [formErrorDetail, setFormErrorDetail] = useState(""); const [pinnedRepos, setPinnedRepos] = useState(); const [selectedLocation, setSelectedLocation] = useState(); @@ -92,7 +88,6 @@ export const CopyNotebookPane: FunctionComponent = ({ } catch (error) { const errorMessage = getErrorMessage(error); setFormError(`Failed to copy ${name} to ${destination}`); - setFormErrorDetail(`${errorMessage}`); handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError); } finally { clearMessage && clearMessage(); @@ -130,14 +125,10 @@ export const CopyNotebookPane: FunctionComponent = ({ setSelectedLocation(option?.data); }; - const genericPaneProps: GenericRightPaneProps = { + const props: RightPaneFormProps = { formError, - formErrorDetail, - id: "copynotebookpane", isExecuting: isExecuting, - title: "Copy notebook", submitButtonText: "OK", - onClose: closePanel, onSubmit: () => submit(), expandConsole: () => container.expandConsole(), }; @@ -149,8 +140,8 @@ export const CopyNotebookPane: FunctionComponent = ({ }; return ( - + - + ); }; diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx index 619650451..c75f998e3 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx @@ -130,8 +130,8 @@ describe("Delete Collection Confirmation Pane", () => { .hostNodes() .simulate("change", { target: { value: selectedCollectionId } }); - expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true); - wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click"); + expect(wrapper.exists("#sidePanelOkButton")).toBe(true); + wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit"); expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId); wrapper.unmount(); @@ -151,8 +151,8 @@ describe("Delete Collection Confirmation Pane", () => { .hostNodes() .simulate("change", { target: { value: feedbackText } }); - expect(wrapper.exists(".genericPaneSubmitBtn")).toBe(true); - wrapper.find(".genericPaneSubmitBtn").hostNodes().simulate("click"); + expect(wrapper.exists("#sidePanelOkButton")).toBe(true); + wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit"); expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId); const deleteFeedback = new DeleteFeedback( diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx index 1fdc2488b..5fe8c76f5 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx @@ -12,10 +12,7 @@ import { userContext } from "../../../UserContext"; import { getCollectionName } from "../../../Utils/APITypeUtils"; import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils"; import Explorer from "../../Explorer"; -import { - GenericRightPaneComponent, - GenericRightPaneProps, -} from "../GenericRightPaneComponent/GenericRightPaneComponent"; +import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm"; export interface DeleteCollectionConfirmationPaneProps { explorer: Explorer; closePanel: () => void; @@ -35,7 +32,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent => { + const onSubmit = async (): Promise => { const collection = explorer.findSelectedCollection(); if (!collection || inputCollectionName !== collection.id()) { const errorMessage = "Input " + collectionName + " name does not match the selected " + collectionName; @@ -100,19 +97,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent explorer.expandConsole(), }; return ( - +
@@ -150,6 +143,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent
- + ); }; diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap index 2cf3a5962..0157faed6 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap @@ -15,70 +15,62 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect } } > - -
-
- Delete container + * - + + Confirm by typing the + container + id + + + - - *": Object { - "left": 0, - "position": "relative", - "top": 0, - }, - }, - "textAlign": "center", - "textDecoration": "none", - "userSelect": "none", - }, - Object { - "backgroundColor": "transparent", - "border": "none", - "color": "#0078d4", - "height": "32px", - "padding": "0 4px", - "width": "32px", - }, - ], - "rootChecked": Object { - "backgroundColor": "#edebe9", - "color": "#005a9e", - }, - "rootCheckedHovered": Object { - "backgroundColor": "#e1dfdd", - "color": "#005a9e", - }, - "rootDisabled": Array [ - Object { - "outline": "transparent", - "position": "relative", - "selectors": Object { - ".ms-Fabric--isFocusVisible &:focus:after": Object { - "border": "1px solid transparent", - "bottom": 2, - "content": "\\"\\"", - "left": 2, - "outline": "1px solid #605e5c", - "position": "absolute", - "right": 2, - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "bottom": -2, - "left": -2, - "outlineColor": "ButtonText", - "right": -2, - "top": -2, - }, - }, - "top": 2, - "zIndex": 1, - }, - "::-moz-focus-inner": Object { - "border": "0", - }, - }, - }, - Object { - "backgroundColor": "#f3f2f1", - "borderColor": "#f3f2f1", - "color": "#a19f9d", - "cursor": "default", - "selectors": Object { - ":focus": Object { - "outline": 0, - }, - ":hover": Object { - "outline": 0, - }, - }, - }, - Object { - "color": "#c8c6c4", - }, - ], - "rootExpanded": Object { - "backgroundColor": "#edebe9", - "color": "#005a9e", - }, - "rootHasMenu": Object { - "width": "auto", - }, - "rootHovered": Object { - "backgroundColor": "#f3f2f1", - "color": "#106ebe", - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "borderColor": "Highlight", - "color": "Highlight", - }, - }, - }, - "rootPressed": Object { - "backgroundColor": "#edebe9", - "color": "#005a9e", - }, - "screenReaderText": Object { - "border": 0, - "height": 1, - "margin": -1, - "overflow": "hidden", - "padding": 0, - "position": "absolute", - "width": 1, - }, - "splitButtonContainer": Array [ - 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", - }, - }, - }, - Object { - "display": "inline-flex", - "selectors": Object { - ".ms-Button--default": Object { - "borderBottomRightRadius": "0", - "borderRight": "none", - "borderTopRightRadius": "0", - }, - ".ms-Button--primary": Object { - "border": "none", - "borderBottomRightRadius": "0", - "borderTopRightRadius": "0", - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "MsHighContrastAdjust": "none", - "backgroundColor": "Window", - "border": "1px solid WindowText", - "borderRightWidth": "0", - "color": "WindowText", - "forcedColorAdjust": "none", - }, - }, - }, - ".ms-Button--primary + .ms-Button": Object { - "border": "none", - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "border": "1px solid WindowText", - "borderLeftWidth": "0", - }, - }, - }, - }, - }, - ], - "splitButtonContainerChecked": Object { - "selectors": Object { - ".ms-Button--primary": Object { - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "MsHighContrastAdjust": "none", - "backgroundColor": "WindowText", - "color": "Window", - "forcedColorAdjust": "none", - }, - }, - }, - }, - }, - "splitButtonContainerCheckedHovered": Object { - "selectors": Object { - ".ms-Button--primary": Object { - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "MsHighContrastAdjust": "none", - "backgroundColor": "WindowText", - "color": "Window", - "forcedColorAdjust": "none", - }, - }, - }, - }, - }, - "splitButtonContainerDisabled": Object { - "border": "none", - "outline": "none", - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "MsHighContrastAdjust": "none", - "backgroundColor": "Window", - "borderColor": "GrayText", - "color": "GrayText", - "forcedColorAdjust": "none", - }, - }, - }, - "splitButtonContainerFocused": Object { - "outline": "none!important", - }, - "splitButtonContainerHovered": Object { - "selectors": Object { - ".ms-Button--primary": Object { - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "Highlight", - "color": "Window", - }, - }, - }, - ".ms-Button.is-disabled": Object { - "color": "#a19f9d", - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "Window", - "borderColor": "GrayText", - "color": "GrayText", - }, - }, - }, - }, - }, - "splitButtonDivider": Object { - "bottom": 8, - "position": "absolute", - "right": 31, - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "WindowText", - }, - }, - "top": 8, - "width": 1, - }, - "splitButtonDividerDisabled": Object { - "bottom": 8, - "position": "absolute", - "right": 31, - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "GrayText", - }, - }, - "top": 8, - "width": 1, - }, - "splitButtonFlexContainer": Object { - "alignItems": "center", - "display": "flex", - "flexWrap": "nowrap", - "height": "100%", - "justifyContent": "center", - }, - "splitButtonMenuButton": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - ".ms-Button-menuIcon": Object { - "color": "WindowText", - }, - }, - "border": "1px solid #8a8886", - "borderBottomRightRadius": "2px", - "borderLeft": "none", - "borderRadius": 0, - "borderTopRightRadius": "2px", - "boxSizing": "border-box", - "cursor": "pointer", - "display": "inline-block", - "height": "auto", - "marginBottom": 0, - "marginLeft": -1, - "marginRight": 0, - "marginTop": 0, - "outline": "transparent", - "padding": 6, - "textAlign": "center", - "textDecoration": "none", - "userSelect": "none", - "verticalAlign": "top", - "width": 32, - }, - "splitButtonMenuButtonDisabled": Object { - "border": "none", - "pointerEvents": "none", - "selectors": Object { - ".ms-Button--primary": Object { - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "Window", - "borderColor": "GrayText", - "color": "GrayText", - }, - }, - }, - ".ms-Button-menuIcon": Object { - "selectors": Object { - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "color": "GrayText", - }, - }, - }, - ":hover": Object { - "cursor": "default", - }, - "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { - "backgroundColor": "Window", - "border": "1px solid GrayText", - "color": "GrayText", - }, - }, - }, - "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, - }, - } - } - tabIndex={0} - theme={ - Object { - "disableGlobalClassNames": false, - "effects": Object { - "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)", - "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)", - "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)", - "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)", - "roundedCorner2": "2px", - "roundedCorner4": "4px", - "roundedCorner6": "6px", - }, - "fonts": Object { - "large": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "18px", - "fontWeight": 400, - }, - "medium": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "14px", - "fontWeight": 400, - }, - "mediumPlus": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "16px", - "fontWeight": 400, - }, - "mega": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "68px", - "fontWeight": 600, - }, - "small": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "12px", - "fontWeight": 400, - }, - "smallPlus": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "12px", - "fontWeight": 400, - }, - "superLarge": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "42px", - "fontWeight": 600, - }, - "tiny": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "10px", - "fontWeight": 400, - }, - "xLarge": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "20px", - "fontWeight": 600, - }, - "xLargePlus": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "24px", - "fontWeight": 600, - }, - "xSmall": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "10px", - "fontWeight": 400, - }, - "xxLarge": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "28px", - "fontWeight": 600, - }, - "xxLargePlus": Object { - "MozOsxFontSmoothing": "grayscale", - "WebkitFontSmoothing": "antialiased", - "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", - "fontSize": "32px", - "fontWeight": 600, - }, - }, - "isInverted": false, - "palette": Object { - "accent": "#0078d4", - "black": "#000000", - "blackTranslucent40": "rgba(0,0,0,.4)", - "blue": "#0078d4", - "blueDark": "#002050", - "blueLight": "#00bcf2", - "blueMid": "#00188f", - "green": "#107c10", - "greenDark": "#004b1c", - "greenLight": "#bad80a", - "magenta": "#b4009e", - "magentaDark": "#5c005c", - "magentaLight": "#e3008c", - "neutralDark": "#201f1e", - "neutralLight": "#edebe9", - "neutralLighter": "#f3f2f1", - "neutralLighterAlt": "#faf9f8", - "neutralPrimary": "#323130", - "neutralPrimaryAlt": "#3b3a39", - "neutralQuaternary": "#d2d0ce", - "neutralQuaternaryAlt": "#e1dfdd", - "neutralSecondary": "#605e5c", - "neutralSecondaryAlt": "#8a8886", - "neutralTertiary": "#a19f9d", - "neutralTertiaryAlt": "#c8c6c4", - "orange": "#d83b01", - "orangeLight": "#ea4300", - "orangeLighter": "#ff8c00", - "purple": "#5c2d91", - "purpleDark": "#32145a", - "purpleLight": "#b4a0ff", - "red": "#e81123", - "redDark": "#a4262c", - "teal": "#008272", - "tealDark": "#004b50", - "tealLight": "#00b294", - "themeDark": "#005a9e", - "themeDarkAlt": "#106ebe", - "themeDarker": "#004578", - "themeLight": "#c7e0f4", - "themeLighter": "#deecf9", - "themeLighterAlt": "#eff6fc", - "themePrimary": "#0078d4", - "themeSecondary": "#2b88d8", - "themeTertiary": "#71afe5", - "white": "#ffffff", - "whiteTranslucent40": "rgba(255,255,255,.4)", - "yellow": "#ffb900", - "yellowDark": "#d29200", - "yellowLight": "#fff100", - }, - "rtl": undefined, - "semanticColors": Object { - "accentButtonBackground": "#0078d4", - "accentButtonText": "#ffffff", - "actionLink": "#323130", - "actionLinkHovered": "#201f1e", - "blockingBackground": "#FDE7E9", - "blockingIcon": "#FDE7E9", - "bodyBackground": "#ffffff", - "bodyBackgroundChecked": "#edebe9", - "bodyBackgroundHovered": "#f3f2f1", - "bodyDivider": "#edebe9", - "bodyFrameBackground": "#ffffff", - "bodyFrameDivider": "#edebe9", - "bodyStandoutBackground": "#faf9f8", - "bodySubtext": "#605e5c", - "bodyText": "#323130", - "bodyTextChecked": "#000000", - "buttonBackground": "#ffffff", - "buttonBackgroundChecked": "#c8c6c4", - "buttonBackgroundCheckedHovered": "#edebe9", - "buttonBackgroundDisabled": "#f3f2f1", - "buttonBackgroundHovered": "#f3f2f1", - "buttonBackgroundPressed": "#edebe9", - "buttonBorder": "#8a8886", - "buttonBorderDisabled": "#f3f2f1", - "buttonText": "#323130", - "buttonTextChecked": "#201f1e", - "buttonTextCheckedHovered": "#000000", - "buttonTextDisabled": "#a19f9d", - "buttonTextHovered": "#201f1e", - "buttonTextPressed": "#201f1e", - "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)", - "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)", - "cardStandoutBackground": "#ffffff", - "defaultStateBackground": "#faf9f8", - "disabledBackground": "#f3f2f1", - "disabledBodySubtext": "#c8c6c4", - "disabledBodyText": "#a19f9d", - "disabledBorder": "#c8c6c4", - "disabledSubtext": "#d2d0ce", - "disabledText": "#a19f9d", - "errorBackground": "#FDE7E9", - "errorIcon": "#A80000", - "errorText": "#a4262c", - "focusBorder": "#605e5c", - "infoBackground": "#f3f2f1", - "infoIcon": "#605e5c", - "inputBackground": "#ffffff", - "inputBackgroundChecked": "#0078d4", - "inputBackgroundCheckedHovered": "#005a9e", - "inputBorder": "#605e5c", - "inputBorderHovered": "#323130", - "inputFocusBorderAlt": "#0078d4", - "inputForegroundChecked": "#ffffff", - "inputIcon": "#0078d4", - "inputIconDisabled": "#a19f9d", - "inputIconHovered": "#005a9e", - "inputPlaceholderBackgroundChecked": "#deecf9", - "inputPlaceholderText": "#605e5c", - "inputText": "#323130", - "inputTextHovered": "#201f1e", - "link": "#0078d4", - "linkHovered": "#004578", - "listBackground": "#ffffff", - "listHeaderBackgroundHovered": "#f3f2f1", - "listHeaderBackgroundPressed": "#edebe9", - "listItemBackgroundChecked": "#edebe9", - "listItemBackgroundCheckedHovered": "#e1dfdd", - "listItemBackgroundHovered": "#f3f2f1", - "listText": "#323130", - "listTextColor": "#323130", - "menuBackground": "#ffffff", - "menuDivider": "#c8c6c4", - "menuHeader": "#0078d4", - "menuIcon": "#0078d4", - "menuItemBackgroundChecked": "#edebe9", - "menuItemBackgroundHovered": "#f3f2f1", - "menuItemBackgroundPressed": "#edebe9", - "menuItemText": "#323130", - "menuItemTextHovered": "#201f1e", - "messageLink": "#005A9E", - "messageLinkHovered": "#004578", - "messageText": "#323130", - "primaryButtonBackground": "#0078d4", - "primaryButtonBackgroundDisabled": "#f3f2f1", - "primaryButtonBackgroundHovered": "#106ebe", - "primaryButtonBackgroundPressed": "#005a9e", - "primaryButtonBorder": "transparent", - "primaryButtonText": "#ffffff", - "primaryButtonTextDisabled": "#d2d0ce", - "primaryButtonTextHovered": "#ffffff", - "primaryButtonTextPressed": "#ffffff", - "severeWarningBackground": "#FED9CC", - "severeWarningIcon": "#D83B01", - "smallInputBorder": "#605e5c", - "successBackground": "#DFF6DD", - "successIcon": "#107C10", - "successText": "#107C10", - "variantBorder": "#edebe9", - "variantBorderHovered": "#a19f9d", - "warningBackground": "#FFF4CE", - "warningHighlight": "#ffb900", - "warningIcon": "#797775", - "warningText": "#323130", - }, - "spacing": Object { - "l1": "20px", - "l2": "32px", - "m": "16px", - "s1": "8px", - "s2": "4px", - }, - } - } - title="Close pane" - variantClassName="ms-Button--icon" +
- - - - - + +
+
+
+ +
-
-
+ -
- - * - - - - Confirm by typing the - container - id - - - - -
-
-
- -
-
-
- - -
-
- - - Help us improve Azure Cosmos DB! - - - - - What is the reason why you are deleting this - container - ? - - - - -
-
-
-