random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Batch of small fixes for RightPaneForm and AddDatabasePane components (#780)

This commit is contained in:
victor-meng 2021-05-12 17:12:03 -07:00 committed by GitHub
parent 2f6dbd83f3
commit 14e58e5519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 44 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,4 +19,14 @@ describe("ThroughputInput Pane", () => {
it("should render Default properly", () => {
expect(wrapper).toMatchSnapshot();
});
it("should switch mode properly", () => {
wrapper.find('[aria-label="Manual mode"]').simulate("change");
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe(
"Container throughput (400 - unlimited RU/s)"
);
wrapper.find('[aria-label="Autoscale mode"]').simulate("change");
expect(wrapper.find('[aria-label="Throughput header"]').at(0).text()).toBe("Container throughput (autoscale)");
});
});

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

@ -101,7 +101,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal>
<span className="mandatoryStar">*&nbsp;</span>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
{getThroughputLabelText()}
</Text>
<InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>

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

@ -25,6 +25,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
* 
</span>
<Text
aria-label="Throughput header"
key=".0:$.1"
style={
Object {
@ -35,6 +36,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
variant="small"
>
<span
aria-label="Throughput header"
className="css-54"
style={
Object {

2
src/Explorer/Explorer.tsx
View File

@ -1988,7 +1988,7 @@ export default class Explorer {
"Add " + getDatabaseName(),
<AddDatabasePanel
explorer={this}
openNotificationConsole={this.expandConsole}
openNotificationConsole={() => this.expandConsole()}
closePanel={this.closeSidePanel}
/>
);

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

@ -48,7 +48,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(
subscriptionType !== SubscriptionType.EA && !isServerlessAccount()
);
const [formErrorsDetails, setFormErrorsDetails] = useState<string>();
const [formErrors, setFormErrors] = useState<string>("");
const [isExecuting, setIsExecuting] = useState<boolean>(false);
@ -128,7 +127,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
setIsExecuting(false);
const errorMessage = getErrorMessage(error);
setFormErrors(errorMessage);
setFormErrorsDetails(errorMessage);
const addDatabasePaneFailedMessage = {
...addDatabasePaneMessage,
offerThroughput,
@ -167,7 +165,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
const props: RightPaneFormProps = {
expandConsole: openNotificationConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
isExecuting,
submitButtonText: "OK",
onSubmit,

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

@ -8,7 +8,6 @@ export interface PanelInfoErrorProps {
link?: string;
linkText?: string;
openNotificationConsole?: () => void;
formError?: boolean;
}
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
@ -18,7 +17,6 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
link,
linkText,
openNotificationConsole,
formError = true,
}: PanelInfoErrorProps): JSX.Element => {
let icon: JSX.Element;
if (messageType === "error") {
@ -30,25 +28,23 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
}
return (
formError && (
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
{icon}
<span className="panelWarningErrorDetailsLinkContainer">
<Text className="panelWarningErrorMessage" variant="small" aria-label="message">
{message}
{link && linkText && (
<Link target="_blank" href={link}>
{linkText}
</Link>
)}
</Text>
{showErrorDetails && (
<a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
More details
</a>
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
{icon}
<span className="panelWarningErrorDetailsLinkContainer">
<Text className="panelWarningErrorMessage" variant="small" aria-label="message">
{message}
{link && linkText && (
<Link target="_blank" href={link}>
{linkText}
</Link>
)}
</span>
</Stack>
)
</Text>
{showErrorDetails && (
<a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
More details
</a>
)}
</span>
</Stack>
);
};

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

@ -9,7 +9,6 @@ const expandConsole = jest.fn();
const props = {
expandConsole,
formError: "",
formErrorDetail: "",
isExecuting: false,
submitButtonText: "Load",
onSubmit,

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

@ -1,12 +1,11 @@
import React, { FunctionComponent, ReactNode } from "react";
import { PanelFooterComponent } from "../PanelFooterComponent";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
import { PanelLoadingScreen } from "../PanelLoadingScreen";
export interface RightPaneFormProps {
expandConsole: () => void;
formError: string;
formErrorDetail: string;
isExecuting: boolean;
onSubmit: () => void;
submitButtonText: string;
@ -17,7 +16,6 @@ export interface RightPaneFormProps {
export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
expandConsole,
formError,
formErrorDetail,
isExecuting,
onSubmit,
submitButtonText,
@ -29,18 +27,17 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
onSubmit();
};
const panelInfoErrorProps: PanelInfoErrorProps = {
messageType: "error",
message: formError,
formError: formError !== "",
showErrorDetails: formErrorDetail !== "",
openNotificationConsole: expandConsole,
};
return (
<>
<PanelInfoErrorComponent {...panelInfoErrorProps} />
<form className="panelFormWrapper" onSubmit={handleOnSubmit}>
{formError && (
<PanelInfoErrorComponent
messageType="error"
message={formError}
showErrorDetails={true}
openNotificationConsole={expandConsole}
/>
)}
{children}
{!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
</form>

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

@ -4,18 +4,10 @@ exports[`Right Pane Form should render Default properly 1`] = `
<RightPaneForm
expandConsole={[MockFunction]}
formError=""
formErrorDetail=""
isExecuting={false}
onSubmit={[MockFunction]}
submitButtonText="Load"
>
<PanelInfoErrorComponent
formError={false}
message=""
messageType="error"
openNotificationConsole={[MockFunction]}
showErrorDetails={false}
/>
<form
className="panelFormWrapper"
onSubmit={[Function]}

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

@ -18,7 +18,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
expandConsole,
closePanel,
}: SettingsPaneProps) => {
const [formErrors, setFormErrors] = useState<string>("");
const [isExecuting, setIsExecuting] = useState<boolean>(false);
const [pageOption, setPageOption] = useState<string>(
LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
@ -50,7 +49,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
setFormErrors("");
setIsExecuting(true);
LocalStorageUtility.setEntryNumber(
@ -104,8 +102,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
const genericPaneProps: RightPaneFormProps = {
expandConsole,
formError: formErrors,
formErrorDetail: "",
formError: "",
isExecuting,
submitButtonText: "Apply",
onSubmit: () => handlerOnSubmit(undefined),

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

@ -4,7 +4,6 @@ exports[`Settings Pane should render Default properly 1`] = `
<RightPaneForm
expandConsole={[Function]}
formError=""
formErrorDetail=""
isExecuting={false}
onSubmit={[Function]}
submitButtonText="Apply"
@ -152,7 +151,6 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
<RightPaneForm
expandConsole={[Function]}
formError=""
formErrorDetail=""
isExecuting={false}
onSubmit={[Function]}
submitButtonText="Apply"

7
src/Explorer/Panes/UploadFilePane/UploadFilePane.tsx
View File

@ -22,15 +22,12 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
const [files, setFiles] = useState<FileList>();
const [formErrors, setFormErrors] = useState<string>("");
const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
const [isExecuting, setIsExecuting] = useState<boolean>(false);
const submit = () => {
setFormErrors("");
setFormErrorsDetails("");
if (!files || files.length === 0) {
setFormErrors("No file specified");
setFormErrorsDetails("No file specified. Please input a file.");
setFormErrors("No file specified. Please input a file.");
logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
return;
}
@ -49,7 +46,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
},
(error: string) => {
setFormErrors(errorMessage);
setFormErrorsDetails(`${errorMessage}: ${error}`);
logConsoleError(`${errorMessage} ${file.name}: ${error}`);
}
)
@ -85,7 +81,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
const genericPaneProps: RightPaneFormProps = {
expandConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
isExecuting: isExecuting,
submitButtonText: "Upload",
onSubmit: submit,

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

@ -15,15 +15,14 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
const [files, setFiles] = useState<FileList>();
const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
const [formError, setFormError] = useState<string>("");
const [formErrorDetail, setFormErrorDetail] = useState<string>("");
const [isExecuting, setIsExecuting] = useState<boolean>();
const onSubmit = () => {
setFormError("");
if (!files || files.length === 0) {
setFormError("No files specified");
setFormErrorDetail("No files were specified. Please input at least one file.");
setFormError("No files were specified. Please input at least one file.");
logConsoleError("Could not upload items -- No files were specified. Please input at least one file.");
return;
}
const selectedCollection = explorer.findSelectedCollection();
@ -40,7 +39,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
(error: Error) => {
const errorMessage = getErrorMessage(error);
setFormError(errorMessage);
setFormErrorDetail(errorMessage);
}
)
.finally(() => {
@ -55,7 +53,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explo
const genericPaneProps: RightPaneFormProps = {
expandConsole: () => explorer.expandConsole(),
formError,
formErrorDetail,
isExecuting: isExecuting,
submitButtonText: "Upload",
onSubmit,

1
src/Explorer/Panes/UploadItemsPane/__snapshots__/UploadItemsPane.test.tsx.snap
View File

@ -4,7 +4,6 @@ exports[`Upload Items Pane should render Default properly 1`] = `
<RightPaneForm
expandConsole={[Function]}
formError=""
formErrorDetail=""
onSubmit={[Function]}
submitButtonText="Upload"
>