mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 09:20:16 +00:00
correct base on some suggestion
This commit is contained in:
hardiknai-techm
@@ -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
30852
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
src/Common/Tooltip/InfoTooltip.tsx
Normal file
18
src/Common/Tooltip/InfoTooltip.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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]}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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,96 +253,90 @@ 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
|
||||
message={upsellMessage}
|
||||
messageType="info"
|
||||
showErrorDetails={false}
|
||||
openNotificationConsole={openNotificationConsole}
|
||||
link={upsellAnchorUrl}
|
||||
linkText={upsellAnchorText}
|
||||
<div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
|
||||
{showUpsellMessage && formErrors === "" && (
|
||||
<PanelInfoErrorComponent
|
||||
message={upsellMessage}
|
||||
messageType="info"
|
||||
showErrorDetails={false}
|
||||
openNotificationConsole={openNotificationConsole}
|
||||
link={upsellAnchorUrl}
|
||||
linkText={upsellAnchorText}
|
||||
/>
|
||||
)}
|
||||
<div className="paneMainContent">
|
||||
<div>
|
||||
<p>
|
||||
<span className="mandatoryStar">*</span>
|
||||
<Text variant="small">{databaseIdLabel}</Text>
|
||||
<InfoTooltip>{databaseIdTooltipText}</InfoTooltip>
|
||||
</p>
|
||||
|
||||
<TextField
|
||||
id="database-id"
|
||||
type="text"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
size={40}
|
||||
aria-label={databaseIdLabel}
|
||||
placeholder={databaseIdPlaceHolder}
|
||||
value={databaseId}
|
||||
onChange={handleonChangeDBId}
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="paneMainContent">
|
||||
<div>
|
||||
<p>
|
||||
<span className="mandatoryStar">*</span>
|
||||
<Text variant="small">{databaseIdLabel}</Text>
|
||||
<Tooltip>{databaseIdTooltipText}</Tooltip>
|
||||
</p>
|
||||
|
||||
<TextField
|
||||
id="database-id"
|
||||
type="text"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
size={40}
|
||||
aria-label={databaseIdLabel}
|
||||
placeholder={databaseIdPlaceHolder}
|
||||
value={databaseId}
|
||||
onChange={handleonChangeDBId}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<div
|
||||
className="databaseProvision"
|
||||
aria-label="New database provision support"
|
||||
style={{ display: "block ruby" }}
|
||||
>
|
||||
<Checkbox
|
||||
title="Provision shared throughput"
|
||||
styles={{
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
label="Provision throughput"
|
||||
checked={databaseCreateNewShared}
|
||||
onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
|
||||
/>{" "}
|
||||
<Tooltip>{databaseLevelThroughputTooltipText}</Tooltip>
|
||||
</div>
|
||||
{databaseCreateNewShared && (
|
||||
<div>
|
||||
<ThroughputInput
|
||||
showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container?.isFirstResourceCreated()}
|
||||
isDatabase={true}
|
||||
isSharded={databaseCreateNewShared}
|
||||
isAutoscaleSelected={isAutoPilotSelected}
|
||||
throughput={throughput}
|
||||
setThroughputValue={(throughput: number) => setThroughput(throughput)}
|
||||
setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
|
||||
onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}
|
||||
/>
|
||||
|
||||
{canRequestSupport() && (
|
||||
<p>
|
||||
<a href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request">
|
||||
Contact support{" "}
|
||||
</a>
|
||||
for more than <span>{throughputDefaults.unlimitedmax?.toLocaleString()} </span> RU/s.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="databaseProvision"
|
||||
aria-label="New database provision support"
|
||||
style={{ display: "block ruby" }}
|
||||
>
|
||||
<Checkbox
|
||||
title="Provision shared throughput"
|
||||
styles={{
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
label="Provision throughput"
|
||||
checked={databaseCreateNewShared}
|
||||
onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
|
||||
/>{" "}
|
||||
<InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
|
||||
</div>
|
||||
{databaseCreateNewShared && (
|
||||
<div>
|
||||
<ThroughputInput
|
||||
showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container?.isFirstResourceCreated()}
|
||||
isDatabase={true}
|
||||
isSharded={databaseCreateNewShared}
|
||||
isAutoscaleSelected={isAutoPilotSelected}
|
||||
throughput={throughput}
|
||||
setThroughputValue={(throughput: number) => setThroughput(throughput)}
|
||||
setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
|
||||
onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}
|
||||
/>
|
||||
|
||||
{canRequestSupport() && (
|
||||
<p>
|
||||
<a href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request">
|
||||
Contact support{" "}
|
||||
</a>
|
||||
for more than <span>{throughputDefaults.unlimitedmax?.toLocaleString()} </span> RU/s.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</RightPaneForm>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,112 +4,101 @@ 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"
|
||||
className="paneContentContainer"
|
||||
role="dialog"
|
||||
>
|
||||
<PanelInfoErrorComponent
|
||||
link="https://aka.ms/azure-cosmos-db-pricing"
|
||||
linkText="More details"
|
||||
message="Start at $24/mo per database, multiple containers included"
|
||||
messageType="info"
|
||||
openNotificationConsole={[Function]}
|
||||
showErrorDetails={false}
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="databaseTitle"
|
||||
className="paneContentContainer"
|
||||
role="dialog"
|
||||
className="paneMainContent"
|
||||
>
|
||||
<PanelInfoErrorComponent
|
||||
link="https://aka.ms/azure-cosmos-db-pricing"
|
||||
linkText="More details"
|
||||
message="Start at $24/mo per database, multiple containers included"
|
||||
messageType="info"
|
||||
openNotificationConsole={[Function]}
|
||||
showErrorDetails={false}
|
||||
/>
|
||||
<div
|
||||
className="paneMainContent"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
<span
|
||||
className="mandatoryStar"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<Text
|
||||
variant="small"
|
||||
>
|
||||
Database id
|
||||
</Text>
|
||||
<Tooltip>
|
||||
A database is a logical container of one or more collections
|
||||
</Tooltip>
|
||||
</p>
|
||||
<StyledTextFieldBase
|
||||
aria-label="Database id"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
autoFocus={true}
|
||||
id="database-id"
|
||||
<div>
|
||||
<p>
|
||||
<span
|
||||
className="mandatoryStar"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<Text
|
||||
variant="small"
|
||||
>
|
||||
Database id
|
||||
</Text>
|
||||
<InfoTooltip>
|
||||
A database is a logical container of one or more collections
|
||||
</InfoTooltip>
|
||||
</p>
|
||||
<StyledTextFieldBase
|
||||
aria-label="Database id"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
autoFocus={true}
|
||||
id="database-id"
|
||||
onChange={[Function]}
|
||||
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
|
||||
placeholder="Type a new database id"
|
||||
size={40}
|
||||
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
aria-label="New database provision support"
|
||||
className="databaseProvision"
|
||||
style={
|
||||
Object {
|
||||
"display": "block ruby",
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={true}
|
||||
label="Provision throughput"
|
||||
onChange={[Function]}
|
||||
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
|
||||
placeholder="Type a new database id"
|
||||
size={40}
|
||||
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
aria-label="New database provision support"
|
||||
className="databaseProvision"
|
||||
style={
|
||||
styles={
|
||||
Object {
|
||||
"display": "block ruby",
|
||||
"checkbox": Object {
|
||||
"height": 12,
|
||||
"width": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"alignItems": "center",
|
||||
"padding": 0,
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={true}
|
||||
label="Provision throughput"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"checkbox": Object {
|
||||
"height": 12,
|
||||
"width": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"alignItems": "center",
|
||||
"padding": 0,
|
||||
},
|
||||
}
|
||||
}
|
||||
title="Provision shared throughput"
|
||||
/>
|
||||
|
||||
<Tooltip>
|
||||
Provisioned throughput at the database level will be shared across all collections within the database.
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<ThroughputInput
|
||||
isAutoscaleSelected={false}
|
||||
isDatabase={true}
|
||||
isSharded={true}
|
||||
onCostAcknowledgeChange={[Function]}
|
||||
setIsAutoscale={[Function]}
|
||||
setThroughputValue={[Function]}
|
||||
throughput={400}
|
||||
/>
|
||||
</div>
|
||||
title="Provision shared throughput"
|
||||
/>
|
||||
|
||||
<InfoTooltip>
|
||||
Provisioned throughput at the database level will be shared across all collections within the database.
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<div>
|
||||
<ThroughputInput
|
||||
isAutoscaleSelected={false}
|
||||
isDatabase={true}
|
||||
isSharded={true}
|
||||
onCostAcknowledgeChange={[Function]}
|
||||
setIsAutoscale={[Function]}
|
||||
setThroughputValue={[Function]}
|
||||
throughput={400}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</RightPaneForm>
|
||||
`;
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
<PanelInfoErrorComponent {...panelInfoErrorProps} />
|
||||
<form className="panelFormWrapper" onSubmit={handleOnSubmit}>
|
||||
{children}
|
||||
{!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
|
||||
</form>
|
||||
{isExecuting && <PanelLoadingScreen />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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:
|
||||
<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
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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")');
|
||||
|
||||
Reference in New Issue
Block a user