+
+
+ *
+ {databaseIdLabel}
+ {databaseIdTooltipText}
+
+
+
- )}
-
-
-
- *
- {databaseIdLabel}
- {databaseIdTooltipText}
-
-
-
-
-
- setDatabaseCreateNewShared(!databaseCreateNewShared)}
- />{" "}
- {databaseLevelThroughputTooltipText}
-
- {databaseCreateNewShared && (
-
-
setThroughput(throughput)}
- setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
- onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}
- />
-
- {canRequestSupport() && (
-
-
- Contact support{" "}
-
- for more than {throughputDefaults.unlimitedmax?.toLocaleString()} RU/s.
-
- )}
-
- )}
+
+ setDatabaseCreateNewShared(!databaseCreateNewShared)}
+ />{" "}
+ {databaseLevelThroughputTooltipText}
+ {databaseCreateNewShared && (
+
+
setThroughput(throughput)}
+ setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
+ onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}
+ />
+
+ {canRequestSupport() && (
+
+
+ Contact support{" "}
+
+ for more than {throughputDefaults.unlimitedmax?.toLocaleString()} RU/s.
+
+ )}
+
+ )}
-
+
);
};
diff --git a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
index 7d63c29b6..bdc4f1526 100644
--- a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
+++ b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
@@ -4,112 +4,101 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
-
`;
diff --git a/src/Explorer/Panes/PanelInfoErrorComponent.tsx b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
index ac095fc16..2ae836f64 100644
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -22,11 +22,11 @@ export const PanelInfoErrorComponent: React.FunctionComponent
{
let icon: JSX.Element;
if (messageType === "error") {
- icon = ;
+ icon = ;
} else if (messageType === "warning") {
- icon = ;
+ icon = ;
} else if (messageType === "info") {
- icon = ;
+ icon = ;
}
return (
@@ -34,7 +34,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent
{icon}
-
+
{message}
{link && linkText && (
diff --git a/src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx b/src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
index 79bcf43d0..3b8f5c022 100644
--- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
+++ b/src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
@@ -3,20 +3,15 @@ import { mount, ReactWrapper } from "enzyme";
import React from "react";
import { RightPaneForm } from "./RightPaneForm";
-const onClose = jest.fn();
const onSubmit = jest.fn();
const expandConsole = jest.fn();
const props = {
- closePanel: (): void => undefined,
expandConsole,
formError: "",
formErrorDetail: "",
- id: "loadQueryPane",
isExecuting: false,
- title: "Load Query Pane",
submitButtonText: "Load",
- onClose,
onSubmit,
};
@@ -27,11 +22,7 @@ describe("Load Query Pane", () => {
wrapper = mount();
expect(wrapper).toMatchSnapshot();
});
- it("should call close method click cancel icon", () => {
- render();
- fireEvent.click(screen.getByTestId("closePaneBtn"));
- expect(onClose).toHaveBeenCalled();
- });
+
it("should call submit method enter in form", () => {
render();
fireEvent.click(screen.getByTestId("submit"));
@@ -44,7 +35,7 @@ describe("Load Query Pane", () => {
});
it("should render error in header", () => {
render();
- expect(screen.getByTestId("errorIcon")).toBeDefined();
- expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
+ expect(screen.getByLabelText("error")).toBeDefined();
+ expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
});
});
diff --git a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
index e6a271f58..774399b23 100644
--- a/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
+++ b/src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
@@ -1,6 +1,4 @@
-import { IconButton } from "@fluentui/react";
import React, { FunctionComponent, ReactNode } from "react";
-import { KeyCodes } from "../../../Common/Constants";
import { PanelFooterComponent } from "../PanelFooterComponent";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
import { PanelLoadingScreen } from "../PanelLoadingScreen";
@@ -9,12 +7,9 @@ export interface RightPaneFormProps {
expandConsole: () => void;
formError: string;
formErrorDetail: string;
- id: string;
isExecuting: boolean;
- onClose: () => void;
onSubmit: () => void;
submitButtonText: string;
- title: string;
isSubmitButtonHidden?: boolean;
children?: ReactNode;
}
@@ -23,51 +18,16 @@ export const RightPaneForm: FunctionComponent = ({
expandConsole,
formError,
formErrorDetail,
- id,
isExecuting,
- onClose,
onSubmit,
submitButtonText,
- title,
isSubmitButtonHidden = false,
children,
}: RightPaneFormProps) => {
- const getPanelHeight = (): number => {
- const notificationConsoleElement: HTMLElement = document.getElementById("explorerNotificationConsole");
- return window.innerHeight - $(notificationConsoleElement).height();
- };
-
- const panelHeight: number = getPanelHeight();
-
const handleOnSubmit = (event: React.FormEvent) => {
event.preventDefault();
onSubmit();
};
- const renderPanelHeader = (): JSX.Element => {
- return (
-
-
- {title}
-
-
-
- );
- };
-
- const onKeyDown = (event: React.KeyboardEvent): void => {
- if (event.keyCode === KeyCodes.Escape) {
- onClose();
- event.stopPropagation();
- }
- };
const panelInfoErrorProps: PanelInfoErrorProps = {
messageType: "error",
@@ -79,18 +39,12 @@ export const RightPaneForm: FunctionComponent = ({
return (
<>
-
-
-
- {renderPanelHeader()}
-
-
-
- {isExecuting &&
}
-
-
-
- Load Query Pane
-
-
-
- *": 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}
+ primary={true}
+ text="Load"
theme={
Object {
"disableGlobalClassNames": false,
@@ -1080,80 +593,14 @@ exports[`Load Query Pane should render Default properly 1`] = `
},
}
}
- title="Close pane"
- variantClassName="ms-Button--icon"
- >
-
-
-
-
-
-
-
-
-
-