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

correct base on some suggestion

Browse Source
This commit is contained in:
hardiknai-techm
2021-05-07 12:51:53 +05:30
parent 0e0e6a2257
commit 8075072f76
24 changed files with 31698 additions and 2350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
less/documentDB.less
View File

@@ -1757,7 +1757,7 @@ input::-webkit-calendar-picker-indicator {
cursor: pointer;
}
.contextual-pane .paneMainContent {
.paneMainContent {
flex: 1;
padding-left: 34px;
padding-right: 34px;

30852
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
src/Common/Tooltip/InfoTooltip.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { IconButton, 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 />
</TooltipHost>
</span>
);
};

26
src/Common/Tooltip/Tooltip.tsx
View File

@@ -1,26 +0,0 @@
import { IButtonStyles, IconButton, ITooltipHostStyles, TooltipHost } from "@fluentui/react";
import { useId } from "@fluentui/react-hooks";
import * as React from "react";
const calloutProps = { gapSpace: 0 };
const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
export interface TooltipProps {
children: string;
}
const iconButtonStyles: Partial<IButtonStyles> = { root: { marginBottom: -3 } };
const iconProps = { iconName: "Info" };
export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
const tooltipId = useId("tooltip");
const iconButtonId: string = useId("iconButton");
return (
<span>
<TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
<IconButton id={iconButtonId} iconProps={iconProps} ariaLabel="Info" styles={iconButtonStyles} />
</TooltipHost>
</span>
);
};

4
src/Common/Upload/Upload.tsx
View File

@@ -2,7 +2,7 @@ import { Image, Stack, TextField } from "@fluentui/react";
import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
import FolderIcon from "../../../images/folder_16x16.svg";
import * as Constants from "../Constants";
import { Tooltip } from "../Tooltip/Tooltip";
import { InfoTooltip } from "../Tooltip/InfoTooltip";
interface UploadProps {
label: string;
@@ -51,7 +51,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
return (
<div>
<span className="renewUploadItemsHeader">{label}</span>
<Tooltip>{tooltip}</Tooltip>
{tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
<Stack horizontal>
<TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
<input

4
src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
View File

@@ -1,6 +1,6 @@
import { Text } from "@fluentui/react";
import React, { FunctionComponent } from "react";
import { Tooltip } from "../../../../Common/Tooltip/Tooltip";
import { InfoTooltip } from "../../../../Common/Tooltip/InfoTooltip";
import * as SharedConstants from "../../../../Shared/Constants";
import { userContext } from "../../../../UserContext";
import {
@@ -46,7 +46,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
? getAutoscalePricePerRu(serverId, multiplier) * multiplier
: getPricePerRu(serverId) * multiplier;
const iconWithEstimatedCostDisclaimer: JSX.Element = <Tooltip>PricingUtils.estimatedCostDisclaimer</Tooltip>;
const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
if (isAutoscale) {
return (

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

@@ -11,7 +11,7 @@ import {
} from "@fluentui/react";
import React, { FunctionComponent, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { Tooltip } from "../../../Common/Tooltip/Tooltip";
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
import * as SharedConstants from "../../../Shared/Constants";
import { userContext } from "../../../UserContext";
import { getCollectionName } from "../../../Utils/APITypeUtils";
@@ -111,7 +111,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
{getThroughputLabelText()}
</Text>
<Tooltip>{PricingUtils.getRuToolTipText()}</Tooltip>
<InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
</Stack>
<Stack horizontal verticalAlign="center">
@@ -137,7 +137,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} data-testid="maxRUDescription">
{isDatabase ? "Database" : getCollectionName()} Max RU/s
</Text>
<Tooltip>{getAutoScaleTooltip()}</Tooltip>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
</Stack>
<TextField

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

@@ -46,35 +46,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
Container throughput (autoscale)
</span>
</Text>
<Tooltip
<InfoTooltip
key=".0:$.2"
>
<span>
<StyledTooltipHostBase
calloutProps={
Object {
"gapSpace": 0,
}
}
content="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
id="tooltip0"
styles={
Object {
"root": Object {
"display": "inline-block",
},
}
}
>
<TooltipHostBase
calloutProps={
Object {
"gapSpace": 0,
}
}
content="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
delay={1}
id="tooltip0"
styles={[Function]}
theme={
Object {
@@ -351,7 +332,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<div
className="ms-TooltipHost root-37"
className="ms-TooltipHost root-55"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
@@ -365,14 +346,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton1"
styles={
Object {
"root": Object {
"marginBottom": -3,
},
}
}
vertical-align={true}
>
<IconButton
ariaLabel="Info"
@@ -381,14 +355,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton1"
styles={
Object {
"root": Object {
"marginBottom": -3,
},
}
}
theme={
Object {
"disableGlobalClassNames": false,
@@ -662,6 +628,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
}
}
vertical-align={true}
>
<BaseButton
ariaLabel="Info"
@@ -671,7 +638,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton1"
onRenderDescription={[Function]}
onRenderText={[Function]}
split={false}
@@ -787,9 +753,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"padding": "0 4px",
"width": "32px",
},
Object {
"marginBottom": -3,
},
],
"rootChecked": Object {
"backgroundColor": "#edebe9",
@@ -1405,12 +1368,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
}
variantClassName="ms-Button--icon"
vertical-align={true}
>
<button
aria-label="Info"
className="ms-Button ms-Button--icon root-55"
className="ms-Button ms-Button--icon root-56"
data-is-focusable={true}
id="iconButton1"
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
@@ -1420,16 +1383,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-56"
className="ms-Button-flexContainer flexContainer-57"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-58"
className="ms-Button-icon icon-59"
iconName="Info"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-63 ms-Button-icon icon-58"
className="ms-Icon root-37 css-64 ms-Button-icon icon-59"
data-icon-name="Info"
style={
Object {
@@ -1450,7 +1413,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</TooltipHostBase>
</StyledTooltipHostBase>
</span>
</Tooltip>
</InfoTooltip>
</div>
</Stack>
<Stack
@@ -1458,7 +1421,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
verticalAlign="center"
>
<div
className="ms-Stack css-64"
className="ms-Stack css-65"
>
<StyledChoiceGroup
aria-label="mode"
@@ -1771,7 +1734,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
<div
aria-label="mode"
className="ms-ChoiceFieldGroup root-65"
className="ms-ChoiceFieldGroup root-66"
>
<div
role="radiogroup"
@@ -1782,11 +1745,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<StyledChoiceGroupOption
checked={true}
focused={false}
id="ChoiceGroup6-true"
id="ChoiceGroup4-true"
itemKey="true"
key="true"
labelId="ChoiceGroupLabel7-true"
name="ChoiceGroup6"
labelId="ChoiceGroupLabel5-true"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -1795,10 +1758,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<ChoiceGroupOption
checked={true}
focused={false}
id="ChoiceGroup6-true"
id="ChoiceGroup4-true"
itemKey="true"
labelId="ChoiceGroupLabel7-true"
name="ChoiceGroup6"
labelId="ChoiceGroupLabel5-true"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -2079,28 +2042,28 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<div
className="ms-ChoiceField root-66"
className="ms-ChoiceField root-67"
>
<div
className="ms-ChoiceField-wrapper"
>
<input
checked={true}
className="ms-ChoiceField-input input-67"
id="ChoiceGroup6-true"
name="ChoiceGroup6"
className="ms-ChoiceField-input input-68"
id="ChoiceGroup4-true"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="radio"
/>
<label
className="ms-ChoiceField-field is-checked field-68"
htmlFor="ChoiceGroup6-true"
className="ms-ChoiceField-field is-checked field-69"
htmlFor="ChoiceGroup4-true"
>
<span
className="ms-ChoiceFieldLabel"
id="ChoiceGroupLabel7-true"
id="ChoiceGroupLabel5-true"
>
Autoscale
</span>
@@ -2112,11 +2075,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<StyledChoiceGroupOption
checked={false}
focused={false}
id="ChoiceGroup6-false"
id="ChoiceGroup4-false"
itemKey="false"
key="false"
labelId="ChoiceGroupLabel7-false"
name="ChoiceGroup6"
labelId="ChoiceGroupLabel5-false"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -2125,10 +2088,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<ChoiceGroupOption
checked={false}
focused={false}
id="ChoiceGroup6-false"
id="ChoiceGroup4-false"
itemKey="false"
labelId="ChoiceGroupLabel7-false"
name="ChoiceGroup6"
labelId="ChoiceGroupLabel5-false"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
@@ -2409,28 +2372,28 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<div
className="ms-ChoiceField root-66"
className="ms-ChoiceField root-67"
>
<div
className="ms-ChoiceField-wrapper"
>
<input
checked={false}
className="ms-ChoiceField-input input-67"
id="ChoiceGroup6-false"
name="ChoiceGroup6"
className="ms-ChoiceField-input input-68"
id="ChoiceGroup4-false"
name="ChoiceGroup4"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
type="radio"
/>
<label
className="ms-ChoiceField-field field-73"
htmlFor="ChoiceGroup6-false"
className="ms-ChoiceField-field field-74"
htmlFor="ChoiceGroup4-false"
>
<span
className="ms-ChoiceFieldLabel"
id="ChoiceGroupLabel7-false"
id="ChoiceGroupLabel5-false"
>
Manual
</span>
@@ -2450,7 +2413,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="throughputInputSpacing"
>
<div
className="ms-Stack throughputInputSpacing css-76"
className="ms-Stack throughputInputSpacing css-77"
>
<Text
data-testid="ruDescription"
@@ -2748,7 +2711,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<a
className="ms-Link root-77"
className="ms-Link root-78"
data-testid="ruDescription"
href="https://cosmos.azure.com/capacitycalculator/"
onClick={[Function]}
@@ -2793,35 +2756,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
Max RU/s
</span>
</Text>
<Tooltip
<InfoTooltip
key=".0:$.1"
>
<span>
<StyledTooltipHostBase
calloutProps={
Object {
"gapSpace": 0,
}
}
content="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
id="tooltip8"
styles={
Object {
"root": Object {
"display": "inline-block",
},
}
}
>
<TooltipHostBase
calloutProps={
Object {
"gapSpace": 0,
}
}
content="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
delay={1}
id="tooltip8"
styles={[Function]}
theme={
Object {
@@ -3098,7 +3042,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
>
<div
className="ms-TooltipHost root-37"
className="ms-TooltipHost root-55"
onBlurCapture={[Function]}
onFocusCapture={[Function]}
onKeyDown={[Function]}
@@ -3112,14 +3056,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton9"
styles={
Object {
"root": Object {
"marginBottom": -3,
},
}
}
vertical-align={true}
>
<IconButton
ariaLabel="Info"
@@ -3128,14 +3065,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton9"
styles={
Object {
"root": Object {
"marginBottom": -3,
},
}
}
theme={
Object {
"disableGlobalClassNames": false,
@@ -3409,6 +3338,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
}
}
vertical-align={true}
>
<BaseButton
ariaLabel="Info"
@@ -3418,7 +3348,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"iconName": "Info",
}
}
id="iconButton9"
onRenderDescription={[Function]}
onRenderText={[Function]}
split={false}
@@ -3534,9 +3463,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"padding": "0 4px",
"width": "32px",
},
Object {
"marginBottom": -3,
},
],
"rootChecked": Object {
"backgroundColor": "#edebe9",
@@ -4152,12 +4078,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
}
}
variantClassName="ms-Button--icon"
vertical-align={true}
>
<button
aria-label="Info"
className="ms-Button ms-Button--icon root-55"
className="ms-Button ms-Button--icon root-56"
data-is-focusable={true}
id="iconButton9"
onClick={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
@@ -4167,16 +4093,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-56"
className="ms-Button-flexContainer flexContainer-57"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-58"
className="ms-Button-icon icon-59"
iconName="Info"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-63 ms-Button-icon icon-58"
className="ms-Icon root-37 css-64 ms-Button-icon icon-59"
data-icon-name="Info"
style={
Object {
@@ -4197,7 +4123,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</TooltipHostBase>
</StyledTooltipHostBase>
</span>
</Tooltip>
</InfoTooltip>
</div>
</Stack>
<StyledTextFieldBase
@@ -4510,18 +4436,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
value="4000"
>
<div
className="ms-TextField is-required root-79"
className="ms-TextField is-required root-80"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-80"
className="ms-TextField-fieldGroup fieldGroup-81"
>
<input
aria-invalid={false}
className="ms-TextField-field field-81"
id="TextField14"
className="ms-TextField-field field-82"
id="TextField10"
min={4000}
onBlur={[Function]}
onChange={[Function]}

12
src/Explorer/Explorer.tsx
View File

@@ -32,7 +32,7 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
import { updateUserContext, userContext } from "../UserContext";
import { getCollectionName } from "../Utils/APITypeUtils";
import { getCollectionName, getDatabaseName, getUploadName } from "../Utils/APITypeUtils";
import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
import { stringToBlob } from "../Utils/BlobUtils";
import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
@@ -1996,7 +1996,7 @@ export default class Explorer {
public openDeleteDatabaseConfirmationPane(): void {
this.openSidePanel(
"Delete Database",
"Delete " + getDatabaseName(),
<DeleteDatabaseConfirmationPanel
explorer={this}
openNotificationConsole={this.expandConsole}
@@ -2007,12 +2007,12 @@ export default class Explorer {
}
public openUploadItemsPanePane(): void {
this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
this.openSidePanel("Upload " + getUploadName(), <UploadItemsPane explorer={this} />);
}
public openSettingPane(): void {
this.openSidePanel(
"Settings",
"Setting",
<SettingsPane expandConsole={() => this.expandConsole()} closePanel={this.closeSidePanel} />
);
}
@@ -2046,7 +2046,7 @@ export default class Explorer {
document.getElementById("linkAddDatabase").focus();
} else {
this.openSidePanel(
"Add Database",
"Add " + getDatabaseName(),
<AddDatabasePanel
explorer={this}
openNotificationConsole={this.expandConsole}
@@ -2071,7 +2071,7 @@ export default class Explorer {
public openUploadFilePanel(parent?: NotebookContentItem): void {
parent = parent || this.resourceTree.myNotebooksContentRoot;
this.openSidePanel(
"Upload File",
"Upload file to notebook server",
<UploadFilePane
expandConsole={() => this.expandConsole()}
closePanel={this.closeSidePanel}

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

@@ -3,7 +3,7 @@ import React, { FunctionComponent, useEffect, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { createDatabase } from "../../../Common/dataAccess/createDatabase";
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
import { Tooltip } from "../../../Common/Tooltip/Tooltip";
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
import { configContext, Platform } from "../../../ConfigContext";
import * as DataModels from "../../../Contracts/DataModels";
import { SubscriptionType } from "../../../Contracts/SubscriptionType";
@@ -102,7 +102,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
return true;
};
const title: string = container?.addDatabaseText() || "New Database";
const [isExecuting, setIsExecuting] = useState<boolean>(false);
useEffect(() => {
@@ -254,17 +253,13 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
expandConsole: container.expandConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
id: "add-database-inputs",
isExecuting,
title,
submitButtonText: "OK",
onClose: closePanel,
onSubmit: submit,
};
return (
<RightPaneForm {...genericPaneProps}>
<form style={{ height: "100%" }}>
<div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
{showUpsellMessage && formErrors === "" && (
<PanelInfoErrorComponent
@@ -276,13 +271,12 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
linkText={upsellAnchorText}
/>
)}
<div className="paneMainContent">
<div>
<p>
<span className="mandatoryStar">*</span>
<Text variant="small">{databaseIdLabel}</Text>
<Tooltip>{databaseIdTooltipText}</Tooltip>
<InfoTooltip>{databaseIdTooltipText}</InfoTooltip>
</p>
<TextField
@@ -315,7 +309,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
checked={databaseCreateNewShared}
onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
/>{" "}
<Tooltip>{databaseLevelThroughputTooltipText}</Tooltip>
<InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
</div>
{databaseCreateNewShared && (
<div>
@@ -343,7 +337,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
</div>
</div>
</div>
</form>
</RightPaneForm>
);
};

19
src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap
View File

@@ -4,19 +4,9 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
<RightPaneForm
expandConsole={[Function]}
formError=""
id="add-database-inputs"
isExecuting={false}
onClose={[Function]}
onSubmit={[Function]}
submitButtonText="OK"
title="New Database"
>
<form
style={
Object {
"height": "100%",
}
}
>
<div
aria-labelledby="databaseTitle"
@@ -46,9 +36,9 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
>
Database id
</Text>
<Tooltip>
<InfoTooltip>
A database is a logical container of one or more collections
</Tooltip>
</InfoTooltip>
</p>
<StyledTextFieldBase
aria-label="Database id"
@@ -92,9 +82,9 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
title="Provision shared throughput"
/>
<Tooltip>
<InfoTooltip>
Provisioned throughput at the database level will be shared across all collections within the database.
</Tooltip>
</InfoTooltip>
</div>
<div>
<ThroughputInput
@@ -110,6 +100,5 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
</div>
</div>
</div>
</form>
</RightPaneForm>
`;

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

@@ -22,11 +22,11 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
}: PanelInfoErrorProps): JSX.Element => {
let icon: JSX.Element;
if (messageType === "error") {
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" data-testid="errorIcon" />;
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" aria-label="error" />;
} else if (messageType === "warning") {
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" data-testid="warningIcon" />;
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" aria-label="warning" />;
} else if (messageType === "info") {
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" data-testid="InfoIcon" />;
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" aria-label="Infomation" />;
}
return (
@@ -34,7 +34,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
{icon}
<span className="panelWarningErrorDetailsLinkContainer">
<Text className="panelWarningErrorMessage" variant="small" data-testid="panelmessage">
<Text className="panelWarningErrorMessage" variant="small" aria-label="message">
{message}
{link && linkText && (
<Link target="_blank" href={link}>

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

@@ -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(<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"));
@@ -44,7 +35,7 @@ describe("Load Query Pane", () => {
});
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");
expect(screen.getByLabelText("error")).toBeDefined();
expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
});
});

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

@@ -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<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",
@@ -79,18 +39,12 @@ export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
return (
<>
<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>
</>
);
};

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

File diff suppressed because it is too large Load Diff

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

@@ -1,7 +1,7 @@
import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
import React, { FunctionComponent, MouseEvent, useState } from "react";
import * as Constants from "../../../Common/Constants";
import { Tooltip } from "../../../Common/Tooltip/Tooltip";
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
import { configContext } from "../../../ConfigContext";
import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
import * as StringUtility from "../../../Shared/StringUtility";
@@ -106,11 +106,8 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
expandConsole,
formError: formErrors,
formErrorDetail: "",
id: "settingspane",
isExecuting,
title: "Setting",
submitButtonText: "Apply",
onClose: () => closePanel(),
onSubmit: () => handlerOnSubmit(undefined),
};
const pageOptionList: IChoiceGroupOption[] = [
@@ -134,10 +131,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
<div className="settingsSectionPart pageOptionsPart">
<div className="settingsSectionLabel">
Page options
<Tooltip>
<InfoTooltip>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
query results per page.
</Tooltip>
</InfoTooltip>
</div>
<ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
</div>
@@ -146,7 +143,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
<div className="tabcontent">
<div className="settingsSectionLabel">
Query results per page
<Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
<InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
</div>
<SpinButton
@@ -173,10 +170,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
<div className="settingsSectionPart">
<div className="settingsSectionLabel">
Enable cross-partition query
<Tooltip>
<InfoTooltip>
Send more than one request while executing a query. More than one request is necessary if the query is
not scoped to single partition key value.
</Tooltip>
</InfoTooltip>
</div>
<Checkbox
@@ -196,11 +193,11 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
<div className="settingsSectionPart">
<div className="settingsSectionLabel">
Max degree of parallelism
<Tooltip>
<InfoTooltip>
Gets or sets the number of concurrent operations run client side during parallel query execution. A
positive property value limits the number of concurrent operations to the set value. If it is set to
less than 0, the system automatically decides the number of concurrent operations to run.
</Tooltip>
</InfoTooltip>
</div>
<SpinButton
@@ -224,10 +221,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
<div className="settingsSectionPart">
<div className="settingsSectionLabel">
Display Gremlin query results as:&nbsp;
<Tooltip>
<InfoTooltip>
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
JSON.
</Tooltip>
</InfoTooltip>
</div>
<ChoiceGroup

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

@@ -5,12 +5,9 @@ exports[`Settings Pane should render Default properly 1`] = `
expandConsole={[Function]}
formError=""
formErrorDetail=""
id="settingspane"
isExecuting={false}
onClose={[Function]}
onSubmit={[Function]}
submitButtonText="Apply"
title="Setting"
>
<div
className="paneMainContent"
@@ -25,9 +22,9 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSectionLabel"
>
Page options
<Tooltip>
<InfoTooltip>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
</Tooltip>
</InfoTooltip>
</div>
<StyledChoiceGroup
onChange={[Function]}
@@ -56,9 +53,9 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSectionLabel"
>
Query results per page
<Tooltip>
<InfoTooltip>
Enter the number of query results that should be shown per page.
</Tooltip>
</InfoTooltip>
</div>
<StyledSpinButton
ariaLabel="Custom query items per page"
@@ -85,9 +82,9 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSectionLabel"
>
Enable cross-partition query
<Tooltip>
<InfoTooltip>
Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value.
</Tooltip>
</InfoTooltip>
</div>
<StyledCheckboxBase
ariaLabel="Enable cross partition query"
@@ -114,9 +111,9 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSectionLabel"
>
Max degree of parallelism
<Tooltip>
<InfoTooltip>
Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
</Tooltip>
</InfoTooltip>
</div>
<StyledSpinButton
ariaLabel="Max degree of parallelism"
@@ -156,12 +153,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
expandConsole={[Function]}
formError=""
formErrorDetail=""
id="settingspane"
isExecuting={false}
onClose={[Function]}
onSubmit={[Function]}
submitButtonText="Apply"
title="Setting"
>
<div
className="paneMainContent"
@@ -176,9 +170,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
className="settingsSectionLabel"
>
Display Gremlin query results as: 
<Tooltip>
<InfoTooltip>
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
</Tooltip>
</InfoTooltip>
</div>
<StyledChoiceGroup
aria-label="Graph Auto-visualization"

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

@@ -15,9 +15,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
closePanel,
uploadFile,
}: UploadFilePanelProps) => {
const title = "Upload file to notebook server";
const submitButtonLabel = "Upload";
const selectFileInputLabel = "Select file to upload";
const extensions: string = undefined; //ex. ".ipynb"
const errorMessage = "Could not upload file";
const inProgressMessage = "Uploading file to notebook server";
@@ -39,11 +36,8 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
}
const file: File = files.item(0);
// const id: string = logConsoleProgress(
// `${inProgressMessage}: ${file.name}`
// );
logConsoleProgress(`${inProgressMessage}: ${file.name}`);
const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
setIsExecuting(true);
@@ -61,7 +55,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
)
.finally(() => {
setIsExecuting(false);
// clearInProgressMessageWithId(id);
clearMessage();
});
};
@@ -92,18 +86,15 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
expandConsole,
formError: formErrors,
formErrorDetail: formErrorsDetails,
id: "uploadFilePane",
isExecuting: isExecuting,
title,
submitButtonText: submitButtonLabel,
onClose: closePanel,
submitButtonText: "Upload",
onSubmit: submit,
};
return (
<RightPaneForm {...genericPaneProps}>
<div className="paneMainContent">
<Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
<Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
</div>
</RightPaneForm>
);

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

@@ -2,7 +2,6 @@ import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@flu
import React, { ChangeEvent, FunctionComponent, useState } from "react";
import { Upload } from "../../../Common/Upload/Upload";
import { UploadDetailsRecord } from "../../../Contracts/ViewModels";
import { userContext } from "../../../UserContext";
import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
import Explorer from "../../Explorer";
import { getErrorMessage } from "../../Tables/Utilities";
@@ -10,23 +9,9 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
export interface UploadItemsPaneProps {
explorer: Explorer;
closePanel: () => void;
}
const getTitle = (): string => {
if (userContext.apiType === "Cassandra" || userContext.apiType === "Tables") {
return "Upload Tables";
} else if (userContext.apiType === "Gremlin") {
return "Upload Graph";
} else {
return "Upload Items";
}
};
export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
explorer,
closePanel,
}: UploadItemsPaneProps) => {
export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explorer }: UploadItemsPaneProps) => {
const [files, setFiles] = useState<FileList>();
const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
const [formError, setFormError] = useState<string>("");
@@ -71,11 +56,8 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
expandConsole: () => explorer.expandConsole(),
formError,
formErrorDetail,
id: "uploaditemspane",
isExecuting: isExecuting,
title: getTitle(),
submitButtonText: "Upload",
onClose: closePanel,
onSubmit,
};

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

@@ -5,11 +5,8 @@ exports[`Upload Items Pane should render Default properly 1`] = `
expandConsole={[Function]}
formError=""
formErrorDetail=""
id="uploaditemspane"
onClose={[Function]}
onSubmit={[Function]}
submitButtonText="Upload"
title="Upload Items"
>
<div
className="paneMainContent"
@@ -20,7 +17,9 @@ exports[`Upload Items Pane should render Default properly 1`] = `
multiple={true}
onUpload={[Function]}
tabIndex={0}
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."
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>
</RightPaneForm>

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

@@ -1292,14 +1292,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
className="ms-Stack panelInfoErrorContainer css-202"
>
<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={
@@ -1577,10 +1577,10 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
}
>
<i
aria-hidden={true}
aria-label="warning"
className="panelWarningIcon root-204"
data-icon-name="WarningSolid"
data-testid="warningIcon"
role="img"
>
</i>
@@ -1591,13 +1591,13 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
key=".0:$.1"
>
<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>

27
src/Utils/APITypeUtils.ts
View File

@@ -28,3 +28,30 @@ export const getCollectionName = (isPlural?: boolean): string => {
return collectionName;
};
export const getDatabaseName = (): string => {
const { apiType } = userContext;
switch (apiType) {
case "SQL":
case "Mongo":
case "Gremlin":
case "Tables":
return "Database";
case "Cassandra":
return "Keyspace";
default:
throw new Error(`Unknown API type: ${apiType}`);
}
};
export const getUploadName = (): string => {
switch (userContext.apiType) {
case "Cassandra":
case "Tables":
return "Tables";
case "Gremlin":
return "Graph";
default:
return "Items";
}
};

2
test/mongo/container.spec.ts
View File

@@ -23,7 +23,7 @@ test("Mongo CRUD", async () => {
await safeClick(explorer, `.nodeItem >> text=${databaseId}`);
await safeClick(explorer, `.nodeItem >> text=${containerId}`);
// Create indexing policy
await safeClick(explorer, ".nodeItem >> text=Settings");
await safeClick(explorer, ".nodeItem >> text=Setting");
await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
await explorer.click('[aria-label="Index Field Name 0"]');
await explorer.fill('[aria-label="Index Field Name 0"]', "foo");

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")');