random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-27 04:41:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

address comment

Browse Source
This commit is contained in:
hardiknai-techm
2021-05-10 21:56:23 +05:30
parent a675124bdc
commit c50543c341
11 changed files with 209 additions and 33623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31048
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
src/Common/Tooltip/InfoTooltip.tsx
View File

@@ -1,17 +1,15 @@
import { IconButton, TooltipHost } from "@fluentui/react";
import { Icon, TooltipHost } from "@fluentui/react";
import * as React from "react";
export interface TooltipProps {
children: string;
}
const iconProps = { iconName: "Info" };
export const InfoTooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
return (
<span>
<TooltipHost content={children}>
<IconButton iconProps={iconProps} ariaLabel="Info" vertical-align />
<Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
</TooltipHost>
</span>
);

8
src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx
View File

@@ -22,15 +22,15 @@ describe("ThroughputInput Pane", () => {
it("test Autoscale Mode select", () => {
wrapper.setProps({ isAutoscaleSelected: true });
expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toBe(
expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toBe(
"Estimate your required RU/s with capacity calculator."
);
expect(wrapper.find('[data-testid="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
expect(wrapper.find('[aria-label="maxRUDescription"]').at(0).text()).toContain("Max RU/s");
});
it("test Manual Mode select", () => {
wrapper.setProps({ isAutoscaleSelected: false });
expect(wrapper.find('[data-testid="ruDescription"]').at(0).text()).toContain("Estimate your required RU/s with");
expect(wrapper.find('[data-testid="capacityLink"]').at(0).text()).toContain("capacity calculator");
expect(wrapper.find('[aria-label="ruDescription"]').at(0).text()).toContain("Estimate your required RU/s with");
expect(wrapper.find('[aria-label="capacityLink"]').at(0).text()).toContain("capacity calculator");
});
});

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

@@ -1,14 +1,4 @@
import {
Checkbox,
ChoiceGroup,
DirectionalHint,
IChoiceGroupOption,
Link,
Stack,
Text,
TextField,
TooltipHost,
} from "@fluentui/react";
import { Checkbox, DirectionalHint, Link, Stack, Text, TextField, TooltipHost } from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
@@ -90,8 +80,8 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
);
};
const handleOnChangeMode = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
if (option.key === "true") {
const handleOnChangeMode = (event: React.ChangeEvent<HTMLInputElement>, mode: string): void => {
if (mode === "Autoscale") {
setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
setIsAutoscale(true);
} else {
@@ -100,10 +90,6 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
}
};
const optionList: IChoiceGroupOption[] = [
{ key: "true", text: "Autoscale" },
{ key: "false", text: "Manual" },
];
return (
<div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal>
@@ -115,26 +101,41 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
</Stack>
<Stack horizontal verticalAlign="center">
<ChoiceGroup
selectedKey={"" + isAutoscaleSelected}
options={optionList}
onChange={handleOnChangeMode}
aria-label="mode"
<input
className="throughputInputRadioBtn"
aria-label="Autoscale mode"
checked={isAutoscaleSelected}
type="radio"
role="radio"
tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Autoscale")}
/>
<span className="throughputInputRadioBtnLabel">Autoscale</span>
<input
className="throughputInputRadioBtn"
aria-label="Manual mode"
checked={!isAutoscaleSelected}
type="radio"
role="radio"
tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Manual")}
/>
<span className="throughputInputRadioBtnLabel">Manual</span>
</Stack>
{isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text variant="small" data-testid="ruDescription">
<Text variant="small" aria-label="ruDescription">
Estimate your required RU/s with{" "}
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="ruDescription">
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
capacity calculator
</Link>
.
</Text>
<Stack horizontal>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} data-testid="maxRUDescription">
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
{isDatabase ? "Database" : getCollectionName()} Max RU/s
</Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@@ -168,9 +169,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{!isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text variant="small" data-testid="ruDescription">
<Text variant="small" aria-label="ruDescription">
Estimate your required RU/s with&nbsp;
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" data-testid="capacityLink">
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="capacityLink">
capacity calculator
</Link>
.

2654
src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

8
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
View File

@@ -134,7 +134,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
}, []);
const submit = () => {
const onSubmit = () => {
if (!_isValid()) {
return;
}
@@ -249,17 +249,17 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
[]
);
const genericPaneProps: RightPaneFormProps = {
const props: RightPaneFormProps = {
expandConsole: container.expandConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
isExecuting,
submitButtonText: "OK",
onSubmit: submit,
onSubmit,
};
return (
<RightPaneForm {...genericPaneProps}>
<RightPaneForm {...props}>
<div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
{showUpsellMessage && formErrors === "" && (
<PanelInfoErrorComponent

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

@@ -9,12 +9,6 @@ export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
buttonLabel,
}: PanelFooterProps): JSX.Element => (
<div className="panelFooter">
<PrimaryButton
type="submit"
id="sidePanelOkButton"
text={buttonLabel}
ariaLabel={buttonLabel}
data-testid="submit"
/>
<PrimaryButton type="submit" id="sidePanelOkButton" text={buttonLabel} ariaLabel={buttonLabel} />
</div>
);

6
src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
View File

@@ -15,7 +15,7 @@ const props = {
onSubmit,
};
describe("Load Query Pane", () => {
describe("Right Pane Form", () => {
let wrapper: ReactWrapper;
it("should render Default properly", () => {
@@ -24,12 +24,12 @@ describe("Load Query Pane", () => {
});
it("should call submit method enter in form", () => {
render(<RightPaneForm {...props} />);
fireEvent.click(screen.getByTestId("submit"));
fireEvent.click(screen.getByLabelText("Load"));
expect(onSubmit).toHaveBeenCalled();
});
it("should call submit method click on submit button", () => {
render(<RightPaneForm {...props} />);
fireEvent.click(screen.getByTestId("submit"));
fireEvent.click(screen.getByLabelText("Load"));
expect(onSubmit).toHaveBeenCalled();
});
it("should render error in header", () => {

15
src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
View File

@@ -1,30 +1,15 @@
<<<<<<< HEAD
import React, { FunctionComponent, ReactNode } from "react";
import { PanelFooterComponent } from "../PanelFooterComponent";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
import { PanelLoadingScreen } from "../PanelLoadingScreen";
=======
import { IconButton } from "@fluentui/react";
import React, { FunctionComponent, ReactNode } from "react";
import { KeyCodes } from "../../../Common/Constants";
>>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
export interface RightPaneFormProps {
expandConsole: () => void;
formError: string;
formErrorDetail: string;
<<<<<<< HEAD
isExecuting: boolean;
onSubmit: () => void;
submitButtonText: string;
=======
id: string;
isExecuting: boolean;
onClose: () => void;
onSubmit: () => void;
submitButtonText: string;
title: string;
>>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
isSubmitButtonHidden?: boolean;
children?: ReactNode;
}

8
src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Load Query Pane should render Default properly 1`] = `
exports[`Right Pane Form should render Default properly 1`] = `
<RightPaneForm
expandConsole={[MockFunction]}
formError=""
@@ -28,14 +28,12 @@ exports[`Load Query Pane should render Default properly 1`] = `
>
<CustomizedPrimaryButton
ariaLabel="Load"
data-testid="submit"
id="sidePanelOkButton"
text="Load"
type="submit"
>
<PrimaryButton
ariaLabel="Load"
data-testid="submit"
id="sidePanelOkButton"
text="Load"
theme={
@@ -315,7 +313,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
>
<CustomizedDefaultButton
ariaLabel="Load"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -597,7 +594,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
>
<DefaultButton
ariaLabel="Load"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -880,7 +876,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
<BaseButton
ariaLabel="Load"
baseClassName="ms-Button"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -1737,7 +1732,6 @@ exports[`Load Query Pane should render Default properly 1`] = `
aria-label="Load"
className="ms-Button ms-Button--primary root-53"
data-is-focusable={true}
data-testid="submit"
id="sidePanelOkButton"
onClick={[Function]}
onKeyDown={[Function]}

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

@@ -1288,7 +1288,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
<Stack
className="panelInfoErrorContainer"
horizontal={true}
verticalAlign="start"
verticalAlign="center"
>
<div
className="ms-Stack panelInfoErrorContainer css-202"
@@ -1296,14 +1296,12 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
<StyledIconBase
aria-label="warning"
className="panelWarningIcon"
data-testid="warningIcon"
iconName="WarningSolid"
key=".0:$.0"
>
<IconBase
aria-label="warning"
className="panelWarningIcon"
data-testid="warningIcon"
iconName="WarningSolid"
styles={[Function]}
theme={
@@ -1584,11 +1582,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
aria-label="warning"
className="panelWarningIcon root-204"
data-icon-name="WarningSolid"
<<<<<<< HEAD
role="img"
=======
data-testid="warningIcon"
>>>>>>> 487fbf207299bfd3b7d6404bf0307a8de29ac987
>
</i>
@@ -1601,13 +1595,11 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
<Text
aria-label="message"
className="panelWarningErrorMessage"
data-testid="panelmessage"
variant="small"
>
<span
aria-label="message"
className="panelWarningErrorMessage css-205"
data-testid="panelmessage"
>
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span>
@@ -2311,14 +2303,12 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<CustomizedPrimaryButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
text="OK"
type="submit"
>
<PrimaryButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
text="OK"
theme={
@@ -2598,7 +2588,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<CustomizedDefaultButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -2880,7 +2869,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<DefaultButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -3163,7 +3151,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
<BaseButton
ariaLabel="OK"
baseClassName="ms-Button"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@@ -4020,7 +4007,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
aria-label="OK"
className="ms-Button ms-Button--primary root-218"
data-is-focusable={true}
data-testid="submit"
id="sidePanelOkButton"
onClick={[Function]}
onKeyDown={[Function]}