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

Remove genericRightPaneComponent and create RightPaneWrapper with form (#679) 

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
This commit is contained in:
Hardikkumar Nai 2021-05-10 05:52:44 +05:30 committed by GitHub
parent aa308b3e4d
commit 487fbf2072
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 3122 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
package-lock.json generated
View File

@ -6123,24 +6123,6 @@
"tslib": "^1.10.0"
}
},
"@types/react": {
"version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-dom": {
"version": "16.9.12",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
"integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
"requires": {
"@types/react": "^16"
}
},
"@uifabric/foundation": {
"version": "7.9.26",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
@ -6189,11 +6171,6 @@
"tslib": "^1.10.0"
}
},
"csstype": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
},
"office-ui-fabric-react": {
"version": "7.168.2",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.168.2.tgz",
@ -6237,24 +6214,6 @@
"tslib": "^1.10.0"
}
},
"@types/react": {
"version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-dom": {
"version": "16.9.12",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
"integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
"requires": {
"@types/react": "^16"
}
},
"@uifabric/styling": {
"version": "7.19.0",
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.19.0.tgz",
@ -6279,11 +6238,6 @@
"prop-types": "^15.7.2",
"tslib": "^1.10.0"
}
},
"csstype": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
}
}
},
@ -6426,24 +6380,6 @@
"tslib": "^1.10.0"
}
},
"@types/react": {
"version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-dom": {
"version": "16.9.12",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
"integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
"requires": {
"@types/react": "^16"
}
},
"@uifabric/foundation": {
"version": "7.9.26",
"resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.9.26.tgz",
@ -6492,11 +6428,6 @@
"tslib": "^1.10.0"
}
},
"csstype": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
},
"office-ui-fabric-react": {
"version": "7.168.2",
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.168.2.tgz",
@ -6540,24 +6471,6 @@
"tslib": "^1.10.0"
}
},
"@types/react": {
"version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
"@types/react-dom": {
"version": "16.9.12",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.12.tgz",
"integrity": "sha512-i7NPZZpPte3jtVOoW+eLB7G/jsX5OM6GqQnH+lC0nq0rqwlK0x8WcMEvYDgFWqWhWMlTltTimzdMax6wYfZssA==",
"requires": {
"@types/react": "^16"
}
},
"@uifabric/utilities": {
"version": "7.33.5",
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.33.5.tgz",
@ -6569,11 +6482,6 @@
"prop-types": "^15.7.2",
"tslib": "^1.10.0"
}
},
"csstype": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
}
}
},

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

@ -18,10 +18,6 @@ export interface GenericRightPaneProps {
children?: ReactNode;
}
export interface GenericRightPaneState {
panelHeight: number;
}
export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
expandConsole,
formError,

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

@ -1,14 +1,20 @@
import React from "react";
import { PrimaryButton } from "@fluentui/react";
import React from "react";
export interface PanelFooterProps {
buttonLabel: string;
}
export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
props: PanelFooterProps
): JSX.Element => (
export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
buttonLabel,
}: PanelFooterProps): JSX.Element => (
<div className="panelFooter">
<PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
<PrimaryButton
type="submit"
id="sidePanelOkButton"
text={buttonLabel}
ariaLabel={buttonLabel}
data-testid="submit"
/>
</div>
);

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

@ -8,38 +8,47 @@ export interface PanelInfoErrorProps {
link?: string;
linkText?: string;
openNotificationConsole?: () => void;
formError?: boolean;
}
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
props: PanelInfoErrorProps
): JSX.Element => {
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
message,
messageType,
showErrorDetails,
link,
linkText,
openNotificationConsole,
formError = true,
}: PanelInfoErrorProps): JSX.Element => {
let icon: JSX.Element;
if (props.messageType === "error") {
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
} else if (props.messageType === "warning") {
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
} else if (props.messageType === "info") {
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
if (messageType === "error") {
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
} else if (messageType === "warning") {
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
} else if (messageType === "info") {
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
}
return (
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
formError && (
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
{icon}
<span className="panelWarningErrorDetailsLinkContainer">
<Text className="panelWarningErrorMessage" variant="small">
{props.message}{" "}
{props.link && props.linkText && (
<Link target="_blank" href={props.link}>
{props.linkText}
<Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
{message}
{link && linkText && (
<Link target="_blank" href={link}>
{linkText}
</Link>
)}
</Text>
{props.showErrorDetails && (
<a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
{showErrorDetails && (
<a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
More details
</a>
)}
</span>
</Stack>
)
);
};

50
src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx Normal file
View File

@ -0,0 +1,50 @@
import { fireEvent, render, screen } from "@testing-library/react";
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,
};
describe("Load Query Pane", () => {
let wrapper: ReactWrapper;
it("should render Default properly", () => {
wrapper = mount(<RightPaneForm {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("should call close method click cancel icon", () => {
render(<RightPaneForm {...props} />);
fireEvent.click(screen.getByTestId("closePaneBtn"));
expect(onClose).toHaveBeenCalled();
});
it("should call submit method enter in form", () => {
render(<RightPaneForm {...props} />);
fireEvent.click(screen.getByTestId("submit"));
expect(onSubmit).toHaveBeenCalled();
});
it("should call submit method click on submit button", () => {
render(<RightPaneForm {...props} />);
fireEvent.click(screen.getByTestId("submit"));
expect(onSubmit).toHaveBeenCalled();
});
it("should render error in header", () => {
render(<RightPaneForm {...props} formError="file already Exist" />);
expect(screen.getByTestId("errorIcon")).toBeDefined();
expect(screen.getByTestId("panelmessage").innerHTML).toEqual("file already Exist");
});
});

96
src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx Normal file
View File

@ -0,0 +1,96 @@
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";
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;
}
export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
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<HTMLFormElement>) => {
event.preventDefault();
onSubmit();
};
const renderPanelHeader = (): JSX.Element => {
return (
<div className="firstdivbg headerline">
<span id="databaseTitle" role="heading" aria-level={2}>
{title}
</span>
<IconButton
ariaLabel="Close pane"
title="Close pane"
data-testid="closePaneBtn"
onClick={onClose}
tabIndex={0}
className="closePaneBtn"
iconProps={{ iconName: "Cancel" }}
/>
</div>
);
};
const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
if (event.keyCode === KeyCodes.Escape) {
onClose();
event.stopPropagation();
}
};
const panelInfoErrorProps: PanelInfoErrorProps = {
messageType: "error",
message: formError,
formError: formError !== "",
showErrorDetails: formErrorDetail !== "",
openNotificationConsole: expandConsole,
};
return (
<div tabIndex={-1} onKeyDown={onKeyDown}>
<div className="contextual-pane-out" onClick={onClose}></div>
<div className="contextual-pane" id={id} style={{ height: panelHeight }} onKeyDown={onKeyDown}>
<div className="panelContentWrapper">
{renderPanelHeader()}
<PanelInfoErrorComponent {...panelInfoErrorProps} />
<form className="panelFormWrapper" onSubmit={handleOnSubmit}>
{children}
{!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
</form>
</div>
{isExecuting && <PanelLoadingScreen />}
</div>
</div>
);
};

2901
src/Explorer/Panes/RightPaneForm/__snapshots__/RightPaneForm.test.tsx.snap Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -2,10 +2,7 @@ import React, { ChangeEvent, FunctionComponent, useState } from "react";
import { Upload } from "../../../Common/Upload/Upload";
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
import {
GenericRightPaneComponent,
GenericRightPaneProps,
} from "../GenericRightPaneComponent/GenericRightPaneComponent";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
export interface UploadFilePanelProps {
expandConsole: () => void;
@ -91,7 +88,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
return uploadFile(file.name, fileContent);
};
const genericPaneProps: GenericRightPaneProps = {
const genericPaneProps: RightPaneFormProps = {
expandConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
@ -104,10 +101,10 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
};
return (
<GenericRightPaneComponent {...genericPaneProps}>
<RightPaneForm {...genericPaneProps}>
<div className="paneMainContent">
<Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
</div>
</GenericRightPaneComponent>
</RightPaneForm>
);
};

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

@ -6,10 +6,7 @@ import { userContext } from "../../../UserContext";
import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
import Explorer from "../../Explorer";
import { getErrorMessage } from "../../Tables/Utilities";
import {
GenericRightPaneComponent,
GenericRightPaneProps,
} from "../GenericRightPaneComponent/GenericRightPaneComponent";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
export interface UploadItemsPaneProps {
explorer: Explorer;
@ -70,7 +67,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
setFiles(event.target.files);
};
const genericPaneProps: GenericRightPaneProps = {
const genericPaneProps: RightPaneFormProps = {
expandConsole: () => explorer.expandConsole(),
formError,
formErrorDetail,
@ -113,7 +110,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
};
return (
<GenericRightPaneComponent {...genericPaneProps}>
<RightPaneForm {...genericPaneProps}>
<div className="paneMainContent">
<Upload
label="Select JSON Files"
@ -139,6 +136,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
</div>
)}
</div>
</GenericRightPaneComponent>
</RightPaneForm>
);
};

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

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Upload Items Pane should render Default properly 1`] = `
<GenericRightPaneComponent
<RightPaneForm
expandConsole={[Function]}
formError=""
formErrorDetail=""
@ -23,5 +23,5 @@ exports[`Upload Items Pane should render Default properly 1`] = `
tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
/>
</div>
</GenericRightPaneComponent>
</RightPaneForm>
`;

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

@ -1288,18 +1288,20 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
<Stack
className="panelInfoErrorContainer"
horizontal={true}
verticalAlign="center"
verticalAlign="start"
>
<div
className="ms-Stack panelInfoErrorContainer css-202"
>
<StyledIconBase
className="panelWarningIcon"
data-testid="warningIcon"
iconName="WarningSolid"
key=".0:$.0"
>
<IconBase
className="panelWarningIcon"
data-testid="warningIcon"
iconName="WarningSolid"
styles={[Function]}
theme={
@ -1580,6 +1582,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
aria-hidden={true}
className="panelWarningIcon root-204"
data-icon-name="WarningSolid"
data-testid="warningIcon"
>
</i>
@ -1591,13 +1594,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<Text
className="panelWarningErrorMessage"
data-testid="panelmessage"
variant="small"
>
<span
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>
</Text>
</span>
@ -2298,11 +2302,15 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
className="panelFooter"
>
<CustomizedPrimaryButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
text="OK"
type="submit"
>
<PrimaryButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
text="OK"
theme={
@ -2581,6 +2589,8 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<CustomizedDefaultButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@ -2861,6 +2871,8 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<DefaultButton
ariaLabel="OK"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@ -3141,7 +3153,9 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<BaseButton
ariaLabel="OK"
baseClassName="ms-Button"
data-testid="submit"
id="sidePanelOkButton"
onRenderDescription={[Function]}
primary={true}
@ -3995,8 +4009,10 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variantClassName="ms-Button--primary"
>
<button
aria-label="OK"
className="ms-Button ms-Button--primary root-218"
data-is-focusable={true}
data-testid="submit"
id="sidePanelOkButton"
onClick={[Function]}
onKeyDown={[Function]}

2
test/notebooks/upload.spec.ts
View File

@ -19,7 +19,7 @@ test("Notebooks", async () => {
await explorer.click('[data-test="My Notebooks"] [aria-label="More"]');
await explorer.click('button[role="menuitem"]:has-text("Upload File")');
await explorer.setInputFiles("#importFileInput", path.join(__dirname, fileToUpload));
await explorer.click('[aria-label="Submit"]');
await explorer.click('[aria-label="Upload"]');
await explorer.click(`[data-test="${fileToUpload}"] [aria-label="More"]`);
await explorer.click('button[role="menuitem"]:has-text("Delete")');
await explorer.click('button:has-text("Delete")');