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

Merge branch 'master' into users/languy/save-documentstab-prefs

Browse Source
This commit is contained in:
Laurent Nguyen
2024-08-07 09:27:13 +02:00
parent 7a179ff34a 806a0657df
commit c141e2612b
175 changed files with 23451 additions and 26061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Explorer/ContextMenuButtonFactory.tsx
View File

@@ -100,6 +100,16 @@ export const createCollectionContextMenuButton = (
});
}
if (useNotebook.getState().isShellEnabled && userContext.apiType === "Cassandra") {
items.push({
iconSrc: HostedTerminalIcon,
onClick: () => {
container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
},
label: "Open Cassandra Shell",
});
}
if (
configContext.platform !== Platform.Fabric &&
(userContext.apiType === "SQL" || userContext.apiType === "Gremlin")

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

@@ -11,7 +11,7 @@ exports[`CollapsibleSectionComponent renders 1`] = `
role="button"
tabIndex={0}
tokens={
Object {
{
"childrenGap": 10,
}
}

31
src/Explorer/Controls/Editor/EditorReact.tsx
View File

@@ -24,13 +24,19 @@ export interface EditorReactProps {
monacoContainerStyles?: React.CSSProperties;
className?: string;
spinnerClassName?: string;
enableWordWrapContextMenuItem?: boolean; // Enable/Disable "Word Wrap" context menu item
onWordWrapChanged?: (wordWrap: "on" | "off") => void; // Called when word wrap is changed
}
export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
private static readonly VIEWING_OPTIONS_GROUP_ID = "viewingoptions"; // Group ID for the context menu group
private rootNode: HTMLElement;
private editor: monaco.editor.IStandaloneCodeEditor;
private selectionListener: monaco.IDisposable;
private monacoEditorOptionsWordWrap: monaco.editor.EditorOption;
public constructor(props: EditorReactProps) {
super(props);
this.state = {
@@ -113,6 +119,23 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
},
);
}
if (this.props.enableWordWrapContextMenuItem) {
editor.addAction({
// An unique identifier of the contributed action.
id: "wordwrap",
label: "Toggle Word Wrap",
contextMenuGroupId: EditorReact.VIEWING_OPTIONS_GROUP_ID,
contextMenuOrder: 1,
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convenience
run: (ed) => {
const newOption = ed.getOption(this.monacoEditorOptionsWordWrap) === "on" ? "off" : "on";
ed.updateOptions({ wordWrap: newOption });
this.props.onWordWrapChanged(newOption);
},
});
}
}
/**
@@ -136,9 +159,13 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
};
this.rootNode.innerHTML = "";
const monaco = await loadMonaco();
const lazymonaco = await loadMonaco();
// We can only get this constant after loading monaco lazily
this.monacoEditorOptionsWordWrap = lazymonaco.editor.EditorOption.wordWrap;
try {
createCallback(monaco?.editor?.create(this.rootNode, options));
createCallback(lazymonaco?.editor?.create(this.rootNode, options));
} catch (error) {
// This could happen if the parent node suddenly disappears during create()
console.error("Unable to create EditorReact", error);

58
src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap
View File

@@ -18,7 +18,7 @@ exports[`Feature panel renders all flags 1`] = `
<Stack
className="options"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -27,7 +27,7 @@ exports[`Feature panel renders all flags 1`] = `
horizontal={true}
horizontalAlign="space-between"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -52,7 +52,7 @@ exports[`Feature panel renders all flags 1`] = `
horizontal={true}
horizontalAlign="start"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -61,16 +61,16 @@ exports[`Feature panel renders all flags 1`] = `
label="Base Url"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "https://localhost:1234/explorer.html",
"text": "localhost:1234",
},
Object {
{
"key": "https://cosmos.azure.com/explorer.html",
"text": "cosmos.azure.com",
},
Object {
{
"key": "https://portal.azure.com",
"text": "portal",
},
@@ -78,8 +78,8 @@ exports[`Feature panel renders all flags 1`] = `
}
selectedKey="https://localhost:1234/explorer.html"
styles={
Object {
"dropdown": Object {
{
"dropdown": {
"width": 200,
},
}
@@ -89,20 +89,20 @@ exports[`Feature panel renders all flags 1`] = `
label="Platform"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "Hosted",
"text": "Hosted",
},
Object {
{
"key": "Portal",
"text": "Portal",
},
Object {
{
"key": "Emulator",
"text": "Emulator",
},
Object {
{
"key": "",
"text": "None",
},
@@ -110,8 +110,8 @@ exports[`Feature panel renders all flags 1`] = `
}
selectedKey="Hosted"
styles={
Object {
"dropdown": Object {
{
"dropdown": {
"width": 200,
},
}
@@ -208,7 +208,7 @@ exports[`Feature panel renders all flags 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -222,8 +222,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder="https://notebookserver"
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -235,8 +235,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder=""
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -248,8 +248,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder=""
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -265,8 +265,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder=""
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -279,8 +279,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder="https://localhost:1234/explorer.html"
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -292,8 +292,8 @@ exports[`Feature panel renders all flags 1`] = `
onChange={[Function]}
placeholder=""
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}

72
src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap
View File

@@ -4,8 +4,8 @@ exports[`GalleryCardComponent renders 1`] = `
<StyledDocumentCardBase
aria-label="name"
styles={
Object {
"root": Object {
{
"root": {
"display": "inline-block",
"marginRight": 20,
"width": 256,
@@ -16,8 +16,8 @@ exports[`GalleryCardComponent renders 1`] = `
<StyledDocumentCardActivityBase
activity="Invalid Date"
people={
Array [
Object {
[
{
"name": "author",
"profileImageSrc": false,
},
@@ -26,8 +26,8 @@ exports[`GalleryCardComponent renders 1`] = `
/>
<StyledDocumentCardPreviewBase
previewImages={
Array [
Object {
[
{
"height": 144,
"imageFit": 2,
"previewImageSrc": "thumbnailUrl",
@@ -40,8 +40,8 @@ exports[`GalleryCardComponent renders 1`] = `
<Text
nowrap={true}
styles={
Object {
"root": Object {
{
"root": {
"height": 18,
"padding": "2px 16px",
},
@@ -69,15 +69,15 @@ exports[`GalleryCardComponent renders 1`] = `
/>
<span
style={
Object {
{
"padding": "8px 16px",
}
}
>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "#605E5C",
"paddingRight": 8,
},
@@ -88,8 +88,8 @@ exports[`GalleryCardComponent renders 1`] = `
<Icon
iconName="RedEye"
styles={
Object {
"root": Object {
{
"root": {
"verticalAlign": "middle",
},
}
@@ -100,8 +100,8 @@ exports[`GalleryCardComponent renders 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "#605E5C",
"paddingRight": 8,
},
@@ -112,8 +112,8 @@ exports[`GalleryCardComponent renders 1`] = `
<Icon
iconName="Download"
styles={
Object {
"root": Object {
{
"root": {
"verticalAlign": "middle",
},
}
@@ -124,8 +124,8 @@ exports[`GalleryCardComponent renders 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "#605E5C",
"paddingRight": 8,
},
@@ -136,8 +136,8 @@ exports[`GalleryCardComponent renders 1`] = `
<Icon
iconName="Heart"
styles={
Object {
"root": Object {
{
"root": {
"verticalAlign": "middle",
},
}
@@ -151,8 +151,8 @@ exports[`GalleryCardComponent renders 1`] = `
<StyledDocumentCardDetailsBase>
<Separator
styles={
Object {
"root": Object {
{
"root": {
"height": 1,
"padding": 0,
},
@@ -161,22 +161,22 @@ exports[`GalleryCardComponent renders 1`] = `
/>
<span
style={
Object {
{
"padding": "0px 16px",
}
}
>
<StyledTooltipHostBase
calloutProps={
Object {
{
"gapSpace": 0,
}
}
content="Favorite"
id="TooltipHost-IconButton-Heart"
styles={
Object {
"root": Object {
{
"root": {
"display": "inline-block",
"float": "left",
},
@@ -186,7 +186,7 @@ exports[`GalleryCardComponent renders 1`] = `
<CustomizedIconButton
ariaLabel="Favorite"
iconProps={
Object {
{
"iconName": "Heart",
}
}
@@ -196,15 +196,15 @@ exports[`GalleryCardComponent renders 1`] = `
</StyledTooltipHostBase>
<StyledTooltipHostBase
calloutProps={
Object {
{
"gapSpace": 0,
}
}
content="Download"
id="TooltipHost-IconButton-Download"
styles={
Object {
"root": Object {
{
"root": {
"display": "inline-block",
"float": "left",
},
@@ -214,7 +214,7 @@ exports[`GalleryCardComponent renders 1`] = `
<CustomizedIconButton
ariaLabel="Download"
iconProps={
Object {
{
"iconName": "Download",
}
}
@@ -224,15 +224,15 @@ exports[`GalleryCardComponent renders 1`] = `
</StyledTooltipHostBase>
<StyledTooltipHostBase
calloutProps={
Object {
{
"gapSpace": 0,
}
}
content="Remove"
id="TooltipHost-IconButton-Delete"
styles={
Object {
"root": Object {
{
"root": {
"display": "inline-block",
"float": "right",
},
@@ -242,7 +242,7 @@ exports[`GalleryCardComponent renders 1`] = `
<CustomizedIconButton
ariaLabel="Remove"
iconProps={
Object {
{
"iconName": "Delete",
}
}

10
src/Explorer/Controls/NotebookGallery/CodeOfConduct/__snapshots__/CodeOfConduct.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`CodeOfConduct renders 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -11,7 +11,7 @@ exports[`CodeOfConduct renders 1`] = `
<StackItem>
<Text
style={
Object {
{
"fontSize": "20px",
"fontWeight": 500,
}
@@ -41,12 +41,12 @@ exports[`CodeOfConduct renders 1`] = `
label="I have read and accept the code of conduct."
onChange={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"margin": 0,
"padding": "2 0 2 0",
},
"text": Object {
"text": {
"fontSize": 12,
},
}

6
src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`InfoComponent renders 1`] = `
<StyledHoverCardBase
instantOpenOnClick={true}
plainCardProps={
Object {
{
"onRenderPlainCard": [Function],
}
}
@@ -18,8 +18,8 @@ exports[`InfoComponent renders 1`] = `
className="infoIconMain"
iconName="Help"
styles={
Object {
"root": Object {
{
"root": {
"verticalAlign": "middle",
},
}

20
src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
View File

@@ -13,14 +13,14 @@ exports[`GalleryViewerComponent renders 1`] = `
itemKey="OfficialSamples"
key="OfficialSamples"
style={
Object {
{
"marginTop": 20,
}
}
>
<Stack
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -28,7 +28,7 @@ exports[`GalleryViewerComponent renders 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 20,
"padding": 10,
}
@@ -50,8 +50,8 @@ exports[`GalleryViewerComponent renders 1`] = `
</StackItem>
<StackItem
styles={
Object {
"root": Object {
{
"root": {
"minWidth": 200,
},
}
@@ -60,20 +60,20 @@ exports[`GalleryViewerComponent renders 1`] = `
<Dropdown
onChange={[Function]}
options={
Array [
Object {
[
{
"key": 0,
"text": "Most viewed",
},
Object {
{
"key": 1,
"text": "Most downloaded",
},
Object {
{
"key": 3,
"text": "Most recent",
},
Object {
{
"key": 2,
"text": "Most favorited",
},

24
src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`NotebookMetadataComponent renders liked notebook 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -11,7 +11,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 30,
}
}
@@ -29,7 +29,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
<Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "HeartFill",
}
}
@@ -53,7 +53,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -96,8 +96,8 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"fontWeight": 600,
},
}
@@ -115,7 +115,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -123,7 +123,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 30,
}
}
@@ -141,7 +141,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
<Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Heart",
}
}
@@ -165,7 +165,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -208,8 +208,8 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"fontWeight": 600,
},
}

4
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
View File

@@ -6,8 +6,8 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},

24
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/AddMongoIndexComponent.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`AddMongoIndexComponent renders 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 5,
}
}
@@ -11,7 +11,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -21,8 +21,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
componentRef={[Function]}
onChange={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"paddingLeft": 10,
"width": 210,
},
@@ -34,12 +34,12 @@ exports[`AddMongoIndexComponent renders 1`] = `
ariaLabel="Index Type 1"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "Single",
"text": "Single Field",
},
Object {
{
"key": "Wildcard",
"text": "Wildcard",
},
@@ -48,8 +48,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
placeholder="Select an index type"
selectedKey="Single"
styles={
Object {
"dropdown": Object {
{
"dropdown": {
"paddingleft": 10,
"width": 202,
},
@@ -60,7 +60,7 @@ exports[`AddMongoIndexComponent renders 1`] = `
ariaLabel="Undo Button 1"
disabled={false}
iconProps={
Object {
{
"iconName": "Undo",
}
}
@@ -70,8 +70,8 @@ exports[`AddMongoIndexComponent renders 1`] = `
<StyledMessageBar
messageBarType={1}
styles={
Object {
"root": Object {
{
"root": {
"marginLeft": 10,
},
}

46
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap
View File

@@ -9,7 +9,7 @@ exports[`MongoIndexingPolicyComponent error shown for collection with compound i
exports[`MongoIndexingPolicyComponent renders 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -29,14 +29,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
</Text>
<Stack
styles={
Object {
"root": Object {
{
"root": {
"width": 600,
},
}
}
tokens={
Object {
{
"childrenGap": 5,
}
}
@@ -47,8 +47,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
>
<StyledWithViewportComponent
columns={
Array [
Object {
[
{
"fieldName": "definition",
"isResizable": true,
"key": "definition",
@@ -56,7 +56,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
"minWidth": 100,
"name": "Definition",
},
Object {
{
"fieldName": "type",
"isResizable": true,
"key": "type",
@@ -64,7 +64,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
"minWidth": 100,
"name": "Type",
},
Object {
{
"fieldName": "actionButton",
"isResizable": true,
"key": "actionButton",
@@ -75,15 +75,15 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
]
}
disableSelectionZone={true}
items={Array []}
items={[]}
layoutMode={1}
onRenderRow={[Function]}
selectionMode={0}
styles={
Object {
"root": Object {
"selectors": Object {
".ms-FocusZone": Object {
{
"root": {
"selectors": {
".ms-FocusZone": {
"paddingTop": 0,
},
},
@@ -93,14 +93,14 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
/>
<Stack
styles={
Object {
"root": Object {
{
"root": {
"width": 600,
},
}
}
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -117,11 +117,11 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
</Stack>
<Separator
styles={
Object {
"root": Array [
Object {
"selectors": Object {
"::before": Object {
{
"root": [
{
"selectors": {
"::before": {
"background": undefined,
},
},
@@ -132,8 +132,8 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
/>
<Stack
styles={
Object {
"root": Object {
{
"root": {
"width": 600,
},
}

4
src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
View File

@@ -47,7 +47,7 @@ describe("ScaleComponent", () => {
expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(targetThroughput);
expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(`${targetThroughput}`);
const newCollection = { ...collection };
const maxThroughput = 5000;
@@ -66,7 +66,7 @@ describe("ScaleComponent", () => {
wrapper = shallow(<ScaleComponent {...newProps} />);
expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(`${maxThroughput}`);
});
it("autoScale disabled", () => {

362
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

4
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap
View File

@@ -3,14 +3,14 @@
exports[`ComputedPropertiesComponent renders 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 5,
}
}
>
<Text
style={
Object {
{
"marginBottom": "10px",
"marginLeft": "30px",
}

60
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ConflictResolutionComponent.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`ConflictResolutionComponent Path text field displayed 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -12,12 +12,12 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
label="Mode"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "LastWriterWins",
"text": "Last Write Wins (default)",
},
Object {
{
"key": "Custom",
"text": "Merge Procedure (custom)",
},
@@ -25,19 +25,19 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
}
selectedKey="LastWriterWins"
styles={
Object {
"flexContainer": Array [
Object {
{
"flexContainer": [
{
"columnGap": "default",
"display": "default",
"selectors": Object {
".ms-ChoiceField-field.is-checked::after": Object {
"selectors": {
".ms-ChoiceField-field.is-checked::after": {
"borderColor": undefined,
},
".ms-ChoiceField-field.is-checked::before": Object {
".ms-ChoiceField-field.is-checked::before": {
"borderColor": undefined,
},
".ms-ChoiceField-wrapper label": Object {
".ms-ChoiceField-wrapper label": {
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
@@ -55,12 +55,12 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
onChange={[Function]}
onRenderLabel={[Function]}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
},
@@ -77,7 +77,7 @@ exports[`ConflictResolutionComponent Path text field displayed 1`] = `
exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -86,12 +86,12 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
label="Mode"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "LastWriterWins",
"text": "Last Write Wins (default)",
},
Object {
{
"key": "Custom",
"text": "Merge Procedure (custom)",
},
@@ -99,19 +99,19 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
}
selectedKey="Custom"
styles={
Object {
"flexContainer": Array [
Object {
{
"flexContainer": [
{
"columnGap": "default",
"display": "default",
"selectors": Object {
".ms-ChoiceField-field.is-checked::after": Object {
"selectors": {
".ms-ChoiceField-field.is-checked::after": {
"borderColor": "",
},
".ms-ChoiceField-field.is-checked::before": Object {
".ms-ChoiceField-field.is-checked::before": {
"borderColor": "",
},
".ms-ChoiceField-wrapper label": Object {
".ms-ChoiceField-wrapper label": {
"fontFamily": undefined,
"fontSize": 14,
"padding": "2px 5px",
@@ -129,12 +129,12 @@ exports[`ConflictResolutionComponent Sproc text field displayed 1`] = `
onChange={[Function]}
onRenderLabel={[Function]}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"selectors": {
":disabled": {
"backgroundColor": undefined,
"borderColor": undefined,
},

2
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`IndexingPolicyComponent renders 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 5,
}
}

8
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`ScaleComponent renders with correct initial notification 1`] = `
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -14,8 +14,8 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
<Text
id="throughputApplyLongDelayMessage"
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -30,7 +30,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
</StyledMessageBar>
<Stack
tokens={
Object {
{
"childrenGap": 20,
}
}

528
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

14
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 6,
}
}
@@ -13,7 +13,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
>
<Text
style={
Object {
{
"fontWeight": 600,
}
}
@@ -22,7 +22,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
</Text>
<StyledTooltipHostBase
calloutProps={
Object {
{
"gapSpace": 0,
}
}
@@ -33,8 +33,8 @@ exports[`ToolTipLabelComponent renders 1`] = `
}
directionalHint={12}
styles={
Object {
"root": Object {
{
"root": {
"display": "inline-block",
"float": "right",
},
@@ -45,8 +45,8 @@ exports[`ToolTipLabelComponent renders 1`] = `
ariaLabel="Info"
iconName="Info"
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": -3,
},
}

68
src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap
View File

@@ -16,14 +16,14 @@ exports[`SettingsComponent renders 1`] = `
itemKey="ScaleTab"
key="ScaleTab"
style={
Object {
{
"marginTop": 20,
}
}
>
<ScaleComponent
collection={
Object {
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
@@ -36,7 +36,7 @@ exports[`SettingsComponent renders 1`] = `
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
@@ -60,16 +60,16 @@ exports[`SettingsComponent renders 1`] = `
"id": [Function],
"indexingPolicy": [Function],
"offer": [Function],
"partitionKey": Object {
"partitionKey": {
"kind": "hash",
"paths": Array [],
"paths": [],
"version": 2,
},
"partitionKeyProperties": Array [
"partitionKeyProperties": [
"partitionKey",
],
"readSettings": [Function],
"uniqueKeyPolicy": Object {},
"uniqueKeyPolicy": {},
"usageSizeInKB": [Function],
}
}
@@ -90,7 +90,7 @@ exports[`SettingsComponent renders 1`] = `
itemKey="SubSettingsTab"
key="SubSettingsTab"
style={
Object {
{
"marginTop": 20,
}
}
@@ -100,7 +100,7 @@ exports[`SettingsComponent renders 1`] = `
changeFeedPolicyBaseline="Off"
changeFeedPolicyVisible={false}
collection={
Object {
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
@@ -113,7 +113,7 @@ exports[`SettingsComponent renders 1`] = `
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
@@ -137,16 +137,16 @@ exports[`SettingsComponent renders 1`] = `
"id": [Function],
"indexingPolicy": [Function],
"offer": [Function],
"partitionKey": Object {
"partitionKey": {
"kind": "hash",
"paths": Array [],
"paths": [],
"version": 2,
},
"partitionKeyProperties": Array [
"partitionKeyProperties": [
"partitionKey",
],
"readSettings": [Function],
"uniqueKeyPolicy": Object {},
"uniqueKeyPolicy": {},
"usageSizeInKB": [Function],
}
}
@@ -174,25 +174,25 @@ exports[`SettingsComponent renders 1`] = `
itemKey="IndexingPolicyTab"
key="IndexingPolicyTab"
style={
Object {
{
"marginTop": 20,
}
}
>
<IndexingPolicyComponent
indexingPolicyContent={
Object {
{
"automatic": true,
"excludedPaths": Array [],
"includedPaths": Array [],
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
}
}
indexingPolicyContentBaseline={
Object {
{
"automatic": true,
"excludedPaths": Array [],
"includedPaths": Array [],
"excludedPaths": [],
"includedPaths": [],
"indexingMode": "consistent",
}
}
@@ -210,14 +210,14 @@ exports[`SettingsComponent renders 1`] = `
itemKey="PartitionKeyTab"
key="PartitionKeyTab"
style={
Object {
{
"marginTop": 20,
}
}
>
<PartitionKeyComponent
collection={
Object {
{
"analyticalStorageTtl": [Function],
"changeFeedPolicy": [Function],
"computedProperties": [Function],
@@ -230,7 +230,7 @@ exports[`SettingsComponent renders 1`] = `
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
@@ -254,16 +254,16 @@ exports[`SettingsComponent renders 1`] = `
"id": [Function],
"indexingPolicy": [Function],
"offer": [Function],
"partitionKey": Object {
"partitionKey": {
"kind": "hash",
"paths": Array [],
"paths": [],
"version": 2,
},
"partitionKeyProperties": Array [
"partitionKeyProperties": [
"partitionKey",
],
"readSettings": [Function],
"uniqueKeyPolicy": Object {},
"uniqueKeyPolicy": {},
"usageSizeInKB": [Function],
}
}
@@ -276,7 +276,7 @@ exports[`SettingsComponent renders 1`] = `
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
@@ -301,23 +301,23 @@ exports[`SettingsComponent renders 1`] = `
itemKey="ComputedPropertiesTab"
key="ComputedPropertiesTab"
style={
Object {
{
"marginTop": 20,
}
}
>
<ComputedPropertiesComponent
computedPropertiesContent={
Array [
Object {
[
{
"name": "queryName",
"query": "query",
},
]
}
computedPropertiesContentBaseline={
Array [
Object {
[
{
"name": "queryName",
"query": "query",
},

62
src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`SettingsUtils functions render 1`] = `
<Stack>
<Text
style={
Object {
{
"fontWeight": 600,
}
}
@@ -14,7 +14,7 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
style={
Object {
{
"fontWeight": 600,
"marginTop": 15,
}
@@ -25,7 +25,7 @@ exports[`SettingsUtils functions render 1`] = `
<Stack
id="throughputSpendElement"
style={
Object {
{
"marginTop": 5,
}
}
@@ -49,7 +49,7 @@ exports[`SettingsUtils functions render 1`] = `
</Stack>
<Text
style={
Object {
{
"marginTop": 15,
}
}
@@ -63,8 +63,8 @@ exports[`SettingsUtils functions render 1`] = `
<Text
id="manualToAutoscaleDisclaimerElement"
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -81,8 +81,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -102,8 +102,8 @@ exports[`SettingsUtils functions render 1`] = `
<Text
id="updateThroughputDelayedApplyWarningMessage"
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -114,8 +114,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -134,8 +134,8 @@ exports[`SettingsUtils functions render 1`] = `
<Text
id="throughputApplyShortDelayMessage"
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -150,8 +150,8 @@ exports[`SettingsUtils functions render 1`] = `
<Text
id="throughputApplyLongDelayMessage"
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -165,8 +165,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -179,8 +179,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -191,8 +191,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -211,8 +211,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -247,15 +247,15 @@ exports[`SettingsUtils functions render 1`] = `
<Stack
horizontal={true}
tokens={
Object {
{
"childrenGap": 5,
}
}
>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -270,8 +270,8 @@ exports[`SettingsUtils functions render 1`] = `
</Stack>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},
@@ -287,8 +287,8 @@ exports[`SettingsUtils functions render 1`] = `
</Text>
<Text
styles={
Object {
"root": Object {
{
"root": {
"color": "windowtext",
"fontSize": 14,
},

3
src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
View File

@@ -14,7 +14,6 @@ import {
TextField,
Toggle,
} from "@fluentui/react";
import { TFunction } from "i18next";
import * as React from "react";
import {
ChoiceItem,
@@ -100,7 +99,7 @@ export interface SmartUiComponentProps {
onInputChange: (input: AnyDisplay, newValue: InputType) => void;
onError: (hasError: boolean) => void;
disabled: boolean;
getTranslation: TFunction;
getTranslation: (messageKey: string, namespace?: string) => string;
}
interface SmartUiComponentState {

104
src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -16,7 +16,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -28,7 +28,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
aria-labelledby="description-label"
id="description-text-display"
style={
Object {
{
"whiteSpace": "pre-line",
}
}
@@ -53,7 +53,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -70,14 +70,14 @@ exports[`SmartUiComponent disable all inputs 1`] = `
</StyledLabelBase>
<Stack
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
}
tokens={
Object {
{
"childrenGap": 2,
}
}
@@ -107,7 +107,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -133,11 +133,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
"valueLabel": Object {
"valueLabel": {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
@@ -157,7 +157,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -178,7 +178,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -199,8 +199,8 @@ exports[`SmartUiComponent disable all inputs 1`] = `
id="containerId-textField-input"
onChange={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
@@ -219,7 +219,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -243,8 +243,8 @@ exports[`SmartUiComponent disable all inputs 1`] = `
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
@@ -261,7 +261,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -282,16 +282,16 @@ exports[`SmartUiComponent disable all inputs 1`] = `
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "db1",
"text": "Database 1",
},
Object {
{
"key": "db2",
"text": "Database 2",
},
Object {
{
"key": "db3",
"text": "Database 3",
},
@@ -299,13 +299,13 @@ exports[`SmartUiComponent disable all inputs 1`] = `
}
selectedKey="db2"
styles={
Object {
"dropdown": Object {
{
"dropdown": {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"root": {
"width": 400,
},
}
@@ -323,7 +323,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -335,7 +335,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -347,7 +347,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
aria-labelledby="description-label"
id="description-text-display"
style={
Object {
{
"whiteSpace": "pre-line",
}
}
@@ -372,7 +372,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -389,14 +389,14 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
</StyledLabelBase>
<Stack
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
}
tokens={
Object {
{
"childrenGap": 2,
}
}
@@ -425,7 +425,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -450,11 +450,11 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
onChange={[Function]}
step={10}
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
"valueLabel": Object {
"valueLabel": {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
@@ -474,7 +474,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -495,7 +495,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -515,8 +515,8 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
id="containerId-textField-input"
onChange={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
@@ -535,7 +535,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -558,8 +558,8 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
onChange={[Function]}
onText="Enabled"
styles={
Object {
"root": Object {
{
"root": {
"width": 400,
},
}
@@ -576,7 +576,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
<Stack
className="widgetRendererContainer"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -596,16 +596,16 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
id="database-dropdown-input"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "db1",
"text": "Database 1",
},
Object {
{
"key": "db2",
"text": "Database 2",
},
Object {
{
"key": "db3",
"text": "Database 3",
},
@@ -613,13 +613,13 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
}
selectedKey="db2"
styles={
Object {
"dropdown": Object {
{
"dropdown": {
"color": "#393939",
"fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
"fontSize": 12,
},
"root": Object {
"root": {
"width": 400,
},
}

4
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
View File

@@ -20,6 +20,10 @@
outline-offset: 2px;
}
.outlineNone{
outline: none !important;
}
.copyQuery:focus::after,
.deleteQuery:focus::after {
outline: none !important;

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

@@ -223,7 +223,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Text variant="small" aria-label="capacity calculator of azure cosmos db">
Estimate your required RU/s with{" "}
<Link
className="underlinedLink"
className="underlinedLink outlineNone"
target="_blank"
href="https://cosmos.azure.com/capacitycalculator/"
aria-label="capacity calculator of azure cosmos db"

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

@@ -30,7 +30,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="Throughput header"
key=".0:$.$.1"
style={
Object {
{
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -41,7 +41,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="Throughput header"
className="css-110"
style={
Object {
{
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -62,9 +62,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
delay={1}
styles={[Function]}
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -73,92 +73,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -167,7 +167,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -220,7 +220,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -325,7 +325,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",
@@ -357,9 +357,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
styles={[Function]}
tabIndex={0}
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -368,92 +368,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -462,7 +462,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -515,7 +515,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -620,7 +620,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",
@@ -645,7 +645,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
hidden={true}
id="tooltip0"
style={
Object {
{
"border": 0,
"height": 1,
"margin": -1,
@@ -733,20 +733,20 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
<StyledLinkBase
aria-label="capacity calculator of azure cosmos db"
className="underlinedLink"
className="underlinedLink outlineNone"
href="https://cosmos.azure.com/capacitycalculator/"
target="_blank"
>
<LinkBase
aria-label="capacity calculator of azure cosmos db"
className="underlinedLink"
className="underlinedLink outlineNone"
href="https://cosmos.azure.com/capacitycalculator/"
styles={[Function]}
target="_blank"
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -755,92 +755,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -849,7 +849,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -902,7 +902,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -1007,7 +1007,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",
@@ -1019,7 +1019,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
<a
aria-label="capacity calculator of azure cosmos db"
className="ms-Link underlinedLink root-117"
className="ms-Link underlinedLink outlineNone root-117"
href="https://cosmos.azure.com/capacitycalculator/"
onClick={[Function]}
target="_blank"
@@ -1042,7 +1042,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="maxRUDescription"
key=".0:$.$.0"
style={
Object {
{
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1053,7 +1053,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
aria-label="maxRUDescription"
className="css-110"
style={
Object {
{
"fontWeight": 600,
"lineHeight": "20px",
}
@@ -1075,9 +1075,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
delay={1}
styles={[Function]}
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1086,92 +1086,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1180,7 +1180,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1233,7 +1233,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -1338,7 +1338,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",
@@ -1370,9 +1370,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
styles={[Function]}
tabIndex={0}
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1381,92 +1381,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1475,7 +1475,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1528,7 +1528,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -1633,7 +1633,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",
@@ -1658,7 +1658,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
hidden={true}
id="tooltip1"
style={
Object {
{
"border": 0,
"height": 1,
"margin": -1,
@@ -1690,11 +1690,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
required={true}
step={1000}
styles={
Object {
"field": Object {
{
"field": {
"fontSize": 12,
},
"fieldGroup": Object {
"fieldGroup": {
"height": 27,
"width": 300,
},
@@ -1716,9 +1716,9 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
step={1000}
styles={[Function]}
theme={
Object {
{
"disableGlobalClassNames": false,
"effects": Object {
"effects": {
"elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)",
"elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
"elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)",
@@ -1727,92 +1727,92 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"roundedCorner4": "4px",
"roundedCorner6": "6px",
},
"fonts": Object {
"large": Object {
"fonts": {
"large": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "18px",
"fontWeight": 400,
},
"medium": Object {
"medium": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "14px",
"fontWeight": 400,
},
"mediumPlus": Object {
"mediumPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "16px",
"fontWeight": 400,
},
"mega": Object {
"mega": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "68px",
"fontWeight": 600,
},
"small": Object {
"small": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"smallPlus": Object {
"smallPlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "12px",
"fontWeight": 400,
},
"superLarge": Object {
"superLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "42px",
"fontWeight": 600,
},
"tiny": Object {
"tiny": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xLarge": Object {
"xLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "20px",
"fontWeight": 600,
},
"xLargePlus": Object {
"xLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "24px",
"fontWeight": 600,
},
"xSmall": Object {
"xSmall": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "10px",
"fontWeight": 400,
},
"xxLarge": Object {
"xxLarge": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
"fontSize": "28px",
"fontWeight": 600,
},
"xxLargePlus": Object {
"xxLargePlus": {
"MozOsxFontSmoothing": "grayscale",
"WebkitFontSmoothing": "antialiased",
"fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
@@ -1821,7 +1821,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
},
},
"isInverted": false,
"palette": Object {
"palette": {
"accent": "#0078d4",
"black": "#000000",
"blackTranslucent40": "rgba(0,0,0,.4)",
@@ -1874,7 +1874,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"yellowLight": "#fff100",
},
"rtl": undefined,
"semanticColors": Object {
"semanticColors": {
"accentButtonBackground": "#0078d4",
"accentButtonText": "#ffffff",
"actionLink": "#323130",
@@ -1979,7 +1979,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
"warningIcon": "#797775",
"warningText": "#323130",
},
"spacing": Object {
"spacing": {
"l1": "20px",
"l2": "32px",
"m": "16px",

65
src/Explorer/Controls/TreeComponent/Styles.ts Normal file
View File

@@ -0,0 +1,65 @@
import { makeStyles, shorthands, treeItemLevelToken } from "@fluentui/react-components";
import { cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
export type TreeStyleName = keyof ReturnType<typeof useTreeStyles>;
const treeIconWidth = "--cosmos-Tree--iconWidth" as const;
const leafNodeSpacing = "--cosmos-Tree--leafNodeSpacing" as const;
const actionButtonBackground = "--cosmos-Tree--actionButtonBackground" as const;
export const useTreeStyles = makeStyles({
treeContainer: {
height: "100%",
...shorthands.overflow("auto"),
},
tree: {
width: "fit-content",
minWidth: "100%",
rowGap: "0px",
paddingTop: "0px",
[treeIconWidth]: "20px",
[leafNodeSpacing]: "24px",
},
nodeIcon: {
width: `var(${treeIconWidth})`,
height: `var(${treeIconWidth})`,
},
treeItem: {},
nodeLabel: {},
treeItemLayout: {
fontSize: tokens.fontSizeBase300,
height: tokens.layoutRowHeight,
...cosmosShorthands.borderBottom(),
paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`,
// Some sneaky CSS variables stuff to change the background color of the action button on hover.
[actionButtonBackground]: tokens.colorNeutralBackground1,
"&:hover": {
[actionButtonBackground]: tokens.colorNeutralBackground1Hover,
},
},
actionsButtonContainer: {
position: "sticky",
right: 0,
},
actionsButton: {
backgroundColor: `var(${actionButtonBackground})`,
},
treeItemLayoutNoIcon: {
// Pad the text out by the level, the width of the icon, AND the usual spacing between the icon and the level.
// It would be nice to see if we can use Grid layout or something here, but that would require overriding a lot of the existing Tree component behavior.
paddingLeft: `calc((var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL}) + var(${leafNodeSpacing}))`,
},
selectedItem: {
backgroundColor: tokens.colorNeutralBackground1Selected,
},
databaseNode: {
fontWeight: tokens.fontWeightSemibold,
},
collectionNode: {
fontWeight: tokens.fontWeightSemibold,
},
loadMoreNode: {
color: tokens.colorBrandForegroundLink,
},
});

30
src/Explorer/Controls/TreeComponent/TreeNodeComponent.test.tsx
View File

@@ -1,4 +1,4 @@
import { TreeItem, TreeItemLayout, tokens } from "@fluentui/react-components";
import { TreeItem, TreeItemLayout } from "@fluentui/react-components";
import PromiseSource from "Utils/PromiseSource";
import { mount, shallow } from "enzyme";
import React from "react";
@@ -9,7 +9,7 @@ function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): Tree
const node: TreeNode = {
id,
label: `${id}Label`,
className: `${id}Class`,
className: "nodeIcon",
iconSrc: `${id}Icon`,
onClick: jest.fn().mockName(`${id}Click`),
...additionalProps,
@@ -20,7 +20,7 @@ function generateTestNode(id: string, additionalProps?: Partial<TreeNode>): Tree
describe("TreeNodeComponent", () => {
it("renders a single node", () => {
const node = generateTestNode("root");
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
// The "click" handler is actually attached to onOpenChange, with a type of "Click".
@@ -45,7 +45,7 @@ describe("TreeNodeComponent", () => {
},
],
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -54,7 +54,7 @@ describe("TreeNodeComponent", () => {
const node = generateTestNode("root", {
onExpanded: () => loading.promise,
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
act(() => {
component
@@ -72,10 +72,7 @@ describe("TreeNodeComponent", () => {
const node = generateTestNode("root", {
isSelected: () => true,
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
tokens.colorNeutralBackground1Selected,
);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -89,10 +86,7 @@ describe("TreeNodeComponent", () => {
generateTestNode("child2"),
],
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
expect(component.find(TreeItemLayout).props().style?.backgroundColor).toStrictEqual(
tokens.colorNeutralBackground1Selected,
);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -111,7 +105,7 @@ describe("TreeNodeComponent", () => {
generateTestNode("child2"),
],
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component.find(TreeItemLayout).props().style?.backgroundColor).toBeUndefined();
expect(component).toMatchSnapshot();
});
@@ -120,7 +114,7 @@ describe("TreeNodeComponent", () => {
const node = generateTestNode("root", {
iconSrc: "the-icon.svg",
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -134,7 +128,7 @@ describe("TreeNodeComponent", () => {
generateTestNode("child2"),
],
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -148,7 +142,7 @@ describe("TreeNodeComponent", () => {
generateTestNode("child2"),
],
});
const component = shallow(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = shallow(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
expect(component).toMatchSnapshot();
});
@@ -175,7 +169,7 @@ describe("TreeNodeComponent", () => {
}),
],
});
const component = mount(<TreeNodeComponent node={node} treeNodeId={node.id} />);
const component = mount(<TreeNodeComponent openItems={[]} node={node} treeNodeId={node.id} />);
// Find and expand the child3Expanding node
const expandingChild = component.find(TreeItem).filterWhere((n) => n.props().value === "root/child3ExpandingLabel");

91
src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx
View File

@@ -11,11 +11,13 @@ import {
Tree,
TreeItem,
TreeItemLayout,
TreeItemValue,
TreeOpenChangeData,
TreeOpenChangeEvent,
mergeClasses,
} from "@fluentui/react-components";
import { MoreHorizontal20Regular } from "@fluentui/react-icons";
import { tokens } from "@fluentui/react-theme";
import { ChevronDown20Regular, ChevronRight20Regular, MoreHorizontal20Regular } from "@fluentui/react-icons";
import { TreeStyleName, useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
import * as React from "react";
import { useCallback } from "react";
@@ -32,15 +34,14 @@ export interface TreeNode {
id?: string;
children?: TreeNode[];
contextMenu?: TreeNodeMenuItem[];
iconSrc?: string;
iconSrc?: string | JSX.Element;
isExpanded?: boolean;
className?: string;
className?: TreeStyleName;
isAlphaSorted?: boolean;
// data?: any; // Piece of data corresponding to this node
timestamp?: number;
isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
isLoading?: boolean;
isScrollable?: boolean;
isSelected?: () => boolean;
onClick?: () => void; // Only if a leaf, other click will expand/collapse
onExpanded?: () => Promise<void>;
@@ -52,6 +53,7 @@ export interface TreeNodeComponentProps {
node: TreeNode;
className?: string;
treeNodeId: string;
openItems: TreeItemValue[];
}
/** Function that returns true if any descendant (at any depth) of this node is selected. */
@@ -66,13 +68,13 @@ function isAnyDescendantSelected(node: TreeNode): boolean {
);
}
const getTreeIcon = (iconSrc: string): JSX.Element => <img src={iconSrc} alt="" style={{ width: 16, height: 16 }} />;
export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
node,
treeNodeId,
openItems,
}: TreeNodeComponentProps): JSX.Element => {
const [isLoading, setIsLoading] = React.useState<boolean>(false);
const treeStyles = useTreeStyles();
const getSortedChildren = (treeNode: TreeNode): TreeNode[] => {
if (!treeNode || !treeNode.children) {
@@ -145,45 +147,72 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
</MenuItem>
));
// We use the expandIcon slot to hold the node icon too.
// We only show a node icon for leaf nodes, even if a branch node has an iconSrc.
const expandIcon = isLoading ? (
<Spinner size="extra-tiny" />
) : !isBranch ? (
typeof node.iconSrc === "string" ? (
<img src={node.iconSrc} className={treeStyles.nodeIcon} alt="" />
) : (
node.iconSrc
)
) : openItems.includes(treeNodeId) ? (
<ChevronDown20Regular />
) : (
<ChevronRight20Regular />
);
const treeItem = (
<TreeItem
data-test={`TreeNodeContainer:${treeNodeId}`}
value={treeNodeId}
itemType={isBranch ? "branch" : "leaf"}
onOpenChange={onOpenChange}
className={treeStyles.treeItem}
>
<TreeItemLayout
className={node.className}
className={mergeClasses(
treeStyles.treeItemLayout,
expandIcon ? undefined : treeStyles.treeItemLayoutNoIcon,
shouldShowAsSelected && treeStyles.selectedItem,
node.className && treeStyles[node.className],
)}
data-test={`TreeNode:${treeNodeId}`}
actions={
contextMenuItems.length > 0 && (
<Menu onOpenChange={onMenuOpenChange}>
<MenuTrigger disableButtonEnhancement>
<Button
aria-label="More options"
data-test="TreeNode/ContextMenuTrigger"
appearance="subtle"
icon={<MoreHorizontal20Regular />}
/>
</MenuTrigger>
<MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
<MenuList>{contextMenuItems}</MenuList>
</MenuPopover>
</Menu>
)
contextMenuItems.length > 0 && {
className: treeStyles.actionsButtonContainer,
children: (
<Menu onOpenChange={onMenuOpenChange}>
<MenuTrigger disableButtonEnhancement>
<Button
aria-label="More options"
className={mergeClasses(treeStyles.actionsButton, shouldShowAsSelected && treeStyles.selectedItem)}
data-test="TreeNode/ContextMenuTrigger"
appearance="subtle"
icon={<MoreHorizontal20Regular />}
/>
</MenuTrigger>
<MenuPopover data-test={`TreeNode/ContextMenu:${treeNodeId}`}>
<MenuList>{contextMenuItems}</MenuList>
</MenuPopover>
</Menu>
),
}
}
expandIcon={isLoading ? <Spinner size="extra-tiny" /> : undefined}
iconBefore={node.iconSrc && getTreeIcon(node.iconSrc)}
style={{
backgroundColor: shouldShowAsSelected ? tokens.colorNeutralBackground1Selected : undefined,
}}
expandIcon={expandIcon}
>
{node.label}
<span className={treeStyles.nodeLabel}>{node.label}</span>
</TreeItemLayout>
{!node.isLoading && node.children?.length > 0 && (
<Tree style={{ overflow: node.isScrollable ? "auto" : undefined }}>
<Tree className={treeStyles.tree}>
{getSortedChildren(node).map((childNode: TreeNode) => (
<TreeNodeComponent key={childNode.label} node={childNode} treeNodeId={`${treeNodeId}/${childNode.label}`} />
<TreeNodeComponent
openItems={openItems}
key={childNode.label}
node={childNode}
treeNodeId={`${treeNodeId}/${childNode.label}`}
/>
))}
</Tree>
)}

134
src/Explorer/Controls/TreeComponent/__snapshots__/LegacyTreeComponent.test.tsx.snap
View File

@@ -8,20 +8,20 @@ exports[`LegacyTreeComponent renders a simple tree 1`] = `
<LegacyTreeNodeComponent
generation={0}
node={
Object {
"children": Array [
Object {
"children": Array [
Object {
{
"children": [
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
"label": "Bchild1",
},
Object {
{
"label": "2child2",
},
],
@@ -45,7 +45,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
className="treeNodeHeader "
data-test="Tree/TreeNode/Header:label"
style={
Object {
{
"paddingLeft": 9,
}
}
@@ -56,7 +56,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
className="expandCollapseIcon"
onKeyPress={[Function]}
role="button"
src={Object {}}
src={{}}
tabIndex={0}
/>
<span
@@ -78,7 +78,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -96,7 +96,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
duration={200}
easing="ease"
height={0}
style={Object {}}
style={{}}
>
<div
className="nodeChildren"
@@ -107,12 +107,12 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
generation={3}
key="Bchild1-3-undefined"
node={
Object {
"children": Array [
Object {
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
@@ -125,7 +125,7 @@ exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
generation={3}
key="2child2-3-undefined"
node={
Object {
{
"label": "2child2",
}
}
@@ -149,7 +149,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
className="treeNodeHeader "
data-test="Tree/TreeNode/Header:label"
style={
Object {
{
"paddingLeft": 23,
}
}
@@ -160,7 +160,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
className="expandCollapseIcon"
onKeyPress={[Function]}
role="button"
src={Object {}}
src={{}}
tabIndex={0}
/>
<span
@@ -177,10 +177,10 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
ariaLabel="More options"
className="treeMenuEllipsis"
menuIconProps={
Object {
{
"iconName": "More",
"styles": Object {
"root": Object {
"styles": {
"root": {
"fontSize": "18px",
"fontWeight": "bold",
},
@@ -188,13 +188,13 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
}
}
menuProps={
Object {
{
"contextualMenuItemAs": [Function],
"coverTarget": true,
"directionalHint": 3,
"isBeakVisible": false,
"items": Array [
Object {
"items": [
{
"className": undefined,
"disabled": true,
"key": "menuLabel",
@@ -209,8 +209,8 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
}
name="More"
styles={
Object {
"rootFocused": Object {
{
"rootFocused": {
"outline": "1px dashed undefined",
},
}
@@ -231,7 +231,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -249,7 +249,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
duration={200}
easing="ease"
height="auto"
style={Object {}}
style={{}}
>
<div
className="nodeChildren"
@@ -260,7 +260,7 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
generation={13}
key="2child2-13-undefined"
node={
Object {
{
"label": "2child2",
}
}
@@ -270,12 +270,12 @@ exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expande
generation={13}
key="Bchild1-13-undefined"
node={
Object {
"children": Array [
Object {
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
@@ -301,7 +301,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
className="treeNodeHeader "
data-test="Tree/TreeNode/Header:label"
style={
Object {
{
"paddingLeft": 9,
}
}
@@ -312,7 +312,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
className="expandCollapseIcon"
onKeyPress={[Function]}
role="button"
src={Object {}}
src={{}}
tabIndex={0}
/>
<span
@@ -334,7 +334,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -352,7 +352,7 @@ exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
duration={200}
easing="ease"
height="auto"
style={Object {}}
style={{}}
>
<div
className="nodeChildren"
@@ -376,7 +376,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
className="treeNodeHeader "
data-test="Tree/TreeNode/Header:label"
style={
Object {
{
"paddingLeft": 23,
}
}
@@ -387,7 +387,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
className="expandCollapseIcon"
onKeyPress={[Function]}
role="button"
src={Object {}}
src={{}}
tabIndex={0}
/>
<span
@@ -404,10 +404,10 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
ariaLabel="More options"
className="treeMenuEllipsis"
menuIconProps={
Object {
{
"iconName": "More",
"styles": Object {
"root": Object {
"styles": {
"root": {
"fontSize": "18px",
"fontWeight": "bold",
},
@@ -415,20 +415,20 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
}
}
menuProps={
Object {
{
"contextualMenuItemAs": [Function],
"coverTarget": true,
"directionalHint": 3,
"isBeakVisible": false,
"items": Array [],
"items": [],
"onMenuDismissed": [Function],
"onMenuOpened": [Function],
}
}
name="More"
styles={
Object {
"rootFocused": Object {
{
"rootFocused": {
"outline": "1px dashed undefined",
},
}
@@ -449,7 +449,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -467,7 +467,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
duration={200}
easing="ease"
height="auto"
style={Object {}}
style={{}}
>
<div
className="nodeChildren"
@@ -478,12 +478,12 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
generation={13}
key="bchild-13-undefined"
node={
Object {
"children": Array [
Object {
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
@@ -496,12 +496,12 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
generation={13}
key="dchild-13-undefined"
node={
Object {
"children": Array [
Object {
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
@@ -514,7 +514,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
generation={13}
key="aChild-13-undefined"
node={
Object {
{
"label": "aChild",
}
}
@@ -524,7 +524,7 @@ exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and p
generation={13}
key="cchild-13-undefined"
node={
Object {
{
"label": "cchild",
}
}
@@ -547,7 +547,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
className="treeNodeHeader "
data-test="Tree/TreeNode/Header:label"
style={
Object {
{
"paddingLeft": 9,
}
}
@@ -558,7 +558,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
className="expandCollapseIcon"
onKeyPress={[Function]}
role="button"
src={Object {}}
src={{}}
tabIndex={0}
/>
<span
@@ -580,7 +580,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -598,7 +598,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
duration={200}
easing="ease"
height="auto"
style={Object {}}
style={{}}
>
<div
className="nodeChildren"
@@ -609,12 +609,12 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
generation={3}
key="Bchild1-3-undefined"
node={
Object {
"children": Array [
Object {
{
"children": [
{
"label": "ZgrandChild11",
},
Object {
{
"label": "AgrandChild12",
},
],
@@ -627,7 +627,7 @@ exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
generation={3}
key="2child2-3-undefined"
node={
Object {
{
"label": "2child2",
}
}

1325
src/Explorer/Controls/TreeComponent/__snapshots__/TreeNodeComponent.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

53
src/Explorer/Explorer.tsx
View File

@@ -7,11 +7,13 @@ import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCop
import { IGalleryItem } from "Juno/JunoClient";
import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import * as ko from "knockout";
import React from "react";
import _ from "underscore";
import * as msal from "@azure/msal-browser";
import shallow from "zustand/shallow";
import { AuthType } from "../AuthType";
import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
@@ -30,14 +32,13 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
import * as ExplorerSettings from "../Shared/ExplorerSettings";
import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
import { isAccountNewerThanThresholdInMs, updateUserContext, userContext } from "../UserContext";
import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
import { stringToBlob } from "../Utils/BlobUtils";
import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
import { useSidePanel } from "../hooks/useSidePanel";
import { useTabs } from "../hooks/useTabs";
import "./ComponentRegisterer";
@@ -66,6 +67,8 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
import StoredProcedure from "./Tree/StoredProcedure";
import { useDatabases } from "./useDatabases";
import { useSelectedNode } from "./useSelectedNode";
import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
BindingHandlersRegisterer.registerBindingHandlers();
@@ -251,8 +254,44 @@ export default class Explorer {
};
useDialog.getState().openDialog(addSynapseLinkDialogProps);
TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
}
// TODO: return result
public async openLoginForEntraIDPopUp(): Promise<void> {
if (userContext.databaseAccount.properties?.documentEndpoint) {
const hrefEndpoint = new URL(userContext.databaseAccount.properties.documentEndpoint).href.replace(
/\/$/,
"/.default",
);
const msalInstance = await getMsalInstance();
try {
const response = await msalInstance.loginPopup({
redirectUri: configContext.msalRedirectURI,
scopes: [],
});
localStorage.setItem("cachedTenantId", response.tenantId);
const cachedAccount = msalInstance.getAllAccounts()?.[0];
msalInstance.setActiveAccount(cachedAccount);
const aadToken = await acquireTokenWithMsal(msalInstance, {
forceRefresh: true,
scopes: [hrefEndpoint],
authority: `${configContext.AAD_ENDPOINT}${localStorage.getItem("cachedTenantId")}`,
});
updateUserContext({ aadToken: aadToken });
useDataPlaneRbac.setState({ aadTokenUpdated: true });
} catch (error) {
if (error instanceof msal.AuthError && error.errorCode === msal.BrowserAuthErrorMessage.popUpWindowError.code) {
logConsoleError(
"We were unable to establish authorization for this account, due to pop-ups being disabled in the browser.\nPlease enable pop-ups for this site and try again",
);
} else {
const errorJson = JSON.stringify(error);
logConsoleError(
`Failed to perform authorization for this account, due to the following error: \n${errorJson}`,
);
}
}
}
}
public openNPSSurveyDialog(): void {
@@ -354,16 +393,16 @@ export default class Explorer {
return true;
};
public onRefreshResourcesClick = (): void => {
public onRefreshResourcesClick = async (): Promise<void> => {
if (configContext.platform === Platform.Fabric) {
scheduleRefreshDatabaseResourceToken(true).then(() => this.refreshAllDatabases());
return;
}
userContext.authType === AuthType.ResourceToken
await (userContext.authType === AuthType.ResourceToken
? this.refreshDatabaseForResourceToken()
: this.refreshAllDatabases();
this.refreshNotebookList();
: this.refreshAllDatabases());
await this.refreshNotebookList();
};
// Facade

6
src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
View File

@@ -737,17 +737,17 @@ export class D3ForceGraph implements GraphRenderer {
.on("dblclick", function (this: Element, _: MouseEvent, d: D3Node) {
// https://stackoverflow.com/a/41945742 ('this' implicitly has type 'any' because it does not have a type annotation)
// this is the <g> element
self.onNodeClicked(this.parentNode, d);
self.onNodeClicked(this.parentNode as BaseType, d);
})
.on("click", function (this: Element, _: MouseEvent, d: D3Node) {
// this is the <g> element
self.onNodeClicked(this.parentNode, d);
self.onNodeClicked(this.parentNode as BaseType, d);
})
.on("keypress", function (this: Element, event: KeyboardEvent, d: D3Node) {
if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
event.stopPropagation();
// this is the <g> element
self.onNodeClicked(this.parentNode, d);
self.onNodeClicked(this.parentNode as BaseType, d);
}
});
var nodeSize = this.igraphConfig.nodeSize;

6
src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
View File

@@ -1,4 +1,4 @@
import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
import { GraphData, GremlinEdge, GremlinVertex } from "./GraphData";
describe("Graph Data", () => {
it("should set only one node as root", () => {
@@ -54,12 +54,12 @@ describe("Graph Data", () => {
// in edge
graphData.removeEdge("e1", false);
expect(graphData.edges.length).toBe(1);
expect(graphData).not.toContain(jasmine.objectContaining({ id: "e1" }));
expect(graphData).not.toContainEqual({ id: "e1" });
// out edge
graphData.removeEdge("e2", false);
expect(graphData.edges.length).toBe(0);
expect(graphData).not.toContain(jasmine.objectContaining({ id: "e2" }));
expect(graphData).not.toContainEqual({ id: "e2" });
});
it("should get string node property", () => {

2
src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
View File

@@ -342,7 +342,7 @@ describe("GraphExplorer", () => {
});
describe("Load Graph button", () => {
beforeEach(async (done) => {
beforeEach((done) => {
const backendResponses: BackendResponses = {};
backendResponses["g.V()"] = backendResponses["g.V('1')"] = {
response: [{ id: "1", type: "vertex" }],

4
src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
View File

@@ -162,7 +162,7 @@ export const addRootChildToGraph = (
* @param value
*/
export const escapeDoubleQuotes = (value: string): string => {
return value === undefined ? value : value.replace(/"/g, '\\"');
return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
};
/**
@@ -186,5 +186,5 @@ export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string =>
* @param value
*/
export const escapeSingleQuotes = (value: string): string => {
return value === undefined ? value : value.replace(/'/g, "\\'");
return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
};

12
src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap
View File

@@ -128,7 +128,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
>
<img
alt="Delete"
src={Object {}}
src={{}}
/>
</AccessibleElement>
</td>
@@ -185,7 +185,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
>
<img
alt="Delete"
src={Object {}}
src={{}}
/>
</AccessibleElement>
</td>
@@ -203,7 +203,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
>
<img
alt="Add"
src={Object {}}
src={{}}
/>
Add Property
</AccessibleElement>
@@ -317,7 +317,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
>
<img
alt="Delete"
src={Object {}}
src={{}}
/>
</AccessibleElement>
</td>
@@ -379,7 +379,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
>
<img
alt="Delete"
src={Object {}}
src={{}}
/>
</AccessibleElement>
</td>
@@ -397,7 +397,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
>
<img
alt="Add"
src={Object {}}
src={{}}
/>
Add Property
</AccessibleElement>

125
src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
View File

@@ -1,15 +1,13 @@
import { KeyboardAction } from "KeyboardShortcuts";
import { ReactTabKind, useTabs } from "hooks/useTabs";
import * as React from "react";
import AddCollectionIcon from "../../../../images/AddCollection.svg";
import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
import { useEffect, useState } from "react";
import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
import AddTriggerIcon from "../../../../images/AddTrigger.svg";
import AddUdfIcon from "../../../../images/AddUdf.svg";
import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
import EntraIDIcon from "../../../../images/EntraID.svg";
import FeedbackIcon from "../../../../images/Feedback-Command.svg";
import HomeIcon from "../../../../images/Home_16.svg";
import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
import OpenInTabIcon from "../../../../images/open-in-tab.svg";
@@ -20,17 +18,15 @@ import * as Constants from "../../../Common/Constants";
import { Platform, configContext } from "../../../ConfigContext";
import * as ViewModels from "../../../Contracts/ViewModels";
import { userContext } from "../../../UserContext";
import { getCollectionName, getDatabaseName } from "../../../Utils/APITypeUtils";
import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
import { useSidePanel } from "../../../hooks/useSidePanel";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import Explorer from "../../Explorer";
import { useNotebook } from "../../Notebook/useNotebook";
import { OpenFullScreen } from "../../OpenFullScreen";
import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
import { useDatabases } from "../../useDatabases";
import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
@@ -53,26 +49,31 @@ export function createStaticCommandBarButtons(
}
};
if (configContext.platform !== Platform.Fabric) {
const homeBtn = createHomeButton();
buttons.push(homeBtn);
const newCollectionBtn = createNewCollectionGroup(container);
newCollectionBtn.keyboardAction = KeyboardAction.NEW_COLLECTION; // Just for the root button, not the child version we create below.
buttons.push(newCollectionBtn);
if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
const addSynapseLink = createOpenSynapseLinkDialogButton(container);
if (addSynapseLink) {
addDivider();
buttons.push(addSynapseLink);
}
if (
configContext.platform !== Platform.Fabric &&
userContext.apiType !== "Tables" &&
userContext.apiType !== "Cassandra"
) {
const addSynapseLink = createOpenSynapseLinkDialogButton(container);
if (addSynapseLink) {
addDivider();
buttons.push(addSynapseLink);
}
}
if (userContext.apiType !== "Tables") {
newCollectionBtn.children = [createNewCollectionGroup(container)];
const newDatabaseBtn = createNewDatabase(container);
newCollectionBtn.children.push(newDatabaseBtn);
if (userContext.apiType === "SQL") {
const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
useEffect(() => {
const buttonProps = createLoginForEntraIDButton(container);
setLoginButtonProps(buttonProps);
}, [dataPlaneRbacEnabled, aadTokenUpdated, container]);
if (loginButtonProps) {
addDivider();
buttons.push(loginButtonProps);
}
}
@@ -143,6 +144,25 @@ export function createContextCommandBarButtons(
buttons.push(newMongoShellBtn);
}
if (
useNotebook.getState().isShellEnabled &&
!selectedNodeState.isDatabaseNodeOrNoneSelected() &&
userContext.apiType === "Cassandra"
) {
const label: string = "Open Cassandra Shell";
const newCassandraShellButton: CommandButtonComponentProps = {
iconSrc: HostedTerminalIcon,
iconAlt: label,
onCommandClick: () => {
container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
},
commandButtonLabel: label,
ariaLabel: label,
hasPopup: true,
};
buttons.push(newCassandraShellButton);
}
return buttons;
}
@@ -223,31 +243,6 @@ function areScriptsSupported(): boolean {
);
}
function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
const label = `New ${getCollectionName()}`;
return {
iconSrc: AddCollectionIcon,
iconAlt: label,
onCommandClick: () => container.onNewCollectionClicked(),
commandButtonLabel: label,
ariaLabel: label,
hasPopup: true,
id: "createNewContainerCommandButton",
};
}
function createHomeButton(): CommandButtonComponentProps {
const label = "Home";
return {
iconSrc: HomeIcon,
iconAlt: label,
onCommandClick: () => useTabs.getState().openAndActivateReactTab(ReactTabKind.Home),
commandButtonLabel: label,
hasPopup: false,
ariaLabel: label,
};
}
function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
if (configContext.platform === Platform.Emulator) {
return undefined;
@@ -275,22 +270,28 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
};
}
function createNewDatabase(container: Explorer): CommandButtonComponentProps {
const label = "New " + getDatabaseName();
function createLoginForEntraIDButton(container: Explorer): CommandButtonComponentProps {
if (configContext.platform !== Platform.Portal) {
return undefined;
}
const handleCommandClick = async () => {
await container.openLoginForEntraIDPopUp();
useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
};
if (!userContext.dataPlaneRbacEnabled || userContext.aadToken) {
return undefined;
}
const label = "Login for Entra ID RBAC";
return {
iconSrc: AddDatabaseIcon,
iconSrc: EntraIDIcon,
iconAlt: label,
keyboardAction: KeyboardAction.NEW_DATABASE,
onCommandClick: async () => {
const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
if (throughputCap && throughputCap !== -1) {
await useDatabases.getState().loadAllOffers();
}
useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />);
},
onCommandClick: handleCommandClick,
commandButtonLabel: label,
ariaLabel: label,
hasPopup: true,
ariaLabel: label,
};
}

50
src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
View File

@@ -22,7 +22,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
>
<img
alt="in progress items"
src={Object {}}
src={{}}
/>
<span
className="numInProgress"
@@ -35,7 +35,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
>
<img
alt="error items"
src={Object {}}
src={{}}
/>
<span
className="numErroredItems"
@@ -48,7 +48,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
>
<img
alt="info items"
src={Object {}}
src={{}}
/>
<span
className="numInfoItems"
@@ -86,7 +86,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -105,7 +105,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
easing="ease"
height={0}
onAnimationEnd={[Function]}
style={Object {}}
style={{}}
>
<div
className="notificationConsoleContents"
@@ -117,20 +117,20 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
label="Filter:"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "All",
"text": "All",
},
Object {
{
"key": "In Progress",
"text": "In progress",
},
Object {
{
"key": "Info",
"text": "Info",
},
Object {
{
"key": "Error",
"text": "Error",
},
@@ -147,7 +147,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
onKeyDown={[Function]}
role="button"
style={
Object {
{
"border": "1px solid black",
"borderRadius": "2px",
}
@@ -156,7 +156,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
>
<img
alt="clear notifications image"
src={Object {}}
src={{}}
/>
Clear Notifications
</span>
@@ -191,7 +191,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
>
<img
alt="in progress items"
src={Object {}}
src={{}}
/>
<span
className="numInProgress"
@@ -204,7 +204,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
>
<img
alt="error items"
src={Object {}}
src={{}}
/>
<span
className="numErroredItems"
@@ -217,7 +217,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
>
<img
alt="info items"
src={Object {}}
src={{}}
/>
<span
className="numInfoItems"
@@ -257,7 +257,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
<AnimateHeight
animateOpacity={false}
animationStateClasses={
Object {
{
"animating": "rah-animating",
"animatingDown": "rah-animating--down",
"animatingToHeightAuto": "rah-animating--to-height-auto",
@@ -276,7 +276,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
easing="ease"
height={0}
onAnimationEnd={[Function]}
style={Object {}}
style={{}}
>
<div
className="notificationConsoleContents"
@@ -288,20 +288,20 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
label="Filter:"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "All",
"text": "All",
},
Object {
{
"key": "In Progress",
"text": "In progress",
},
Object {
{
"key": "Info",
"text": "Info",
},
Object {
{
"key": "Error",
"text": "Error",
},
@@ -318,7 +318,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
onKeyDown={[Function]}
role="button"
style={
Object {
{
"border": "1px solid black",
"borderRadius": "2px",
}
@@ -327,7 +327,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
>
<img
alt="clear notifications image"
src={Object {}}
src={{}}
/>
Clear Notifications
</span>
@@ -342,7 +342,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
<img
alt="info"
className="infoIcon"
src={Object {}}
src={{}}
/>
<span
className="date"

14
src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
View File

@@ -2,22 +2,13 @@
import { Link } from "@fluentui/react";
import { CellId, CellType, ImmutableNotebook } from "@nteract/commutable";
// Vendor modules
import {
actions,
AppState,
ContentRef,
DocumentRecordProps,
KernelRef,
NotebookContentRecord,
selectors,
} from "@nteract/core";
import { actions, AppState, ContentRef, KernelRef, NotebookContentRecord, selectors } from "@nteract/core";
import "@nteract/styles/editor-overrides.css";
import "@nteract/styles/global-variables.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/lib/codemirror.css";
import { Notebook } from "Common/Constants";
import { useDialog } from "Explorer/Controls/Dialog";
import * as Immutable from "immutable";
import * as React from "react";
import { Provider } from "react-redux";
import "react-table/react-table.css";
@@ -315,7 +306,8 @@ export class NotebookComponentBootstrapper {
return false;
}
return selectors.notebook.isDirty(content.model as Immutable.RecordOf<DocumentRecordProps>);
// TODO Fix this typing here
return selectors.notebook.isDirty(content.model as never);
}
public isNotebookUntrusted(): boolean {

3
src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
View File

@@ -111,7 +111,8 @@ const makeMapStateToProps = (_initialState: AppState, initialProps: InitialProps
} else if (kernel?.kernelSpecName) {
kernelSpecDisplayName = kernel.kernelSpecName;
} else if (content && content.type === "notebook") {
kernelSpecDisplayName = selectors.notebook.displayName(content.model) || " ";
// TODO Fix typing here
kernelSpecDisplayName = selectors.notebook.displayName(content.model as never) || " ";
}
return {

10
src/Explorer/Notebook/NotebookRenderer/__snapshots__/PromptContent.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`PromptContent renders for busy status 1`] = `
<div
className="greyStopButton"
style={
Object {
{
"left": 0,
"maxHeight": "100%",
"position": "sticky",
@@ -18,12 +18,12 @@ exports[`PromptContent renders for busy status 1`] = `
ariaLabel="Stop cell execution"
className="runCellButton"
iconProps={
Object {
{
"iconName": "CircleStopSolid",
}
}
style={
Object {
{
"position": "absolute",
}
}
@@ -32,7 +32,7 @@ exports[`PromptContent renders for busy status 1`] = `
<StyledSpinnerBase
size={3}
style={
Object {
{
"paddingTop": 5,
"position": "absolute",
"width": "100%",
@@ -50,7 +50,7 @@ exports[`PromptContent renders when hovered 1`] = `
ariaLabel="Run cell"
className="runCellButton"
iconProps={
Object {
{
"iconName": "MSNVideosSolid",
}
}

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

@@ -576,9 +576,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
</TooltipHost>
</Stack>
<Text variant="small" aria-label="pkDescription">
{this.getPartitionKeySubtext()}
</Text>
<Text variant="small">{this.getPartitionKeySubtext()}</Text>
<input
type="text"

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

@@ -212,6 +212,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
onChange={handleonChangeDBId}
autoFocus
styles={getTextFieldStyles()}
// We've seen password managers prompt to autofill this field, which is not desired.
data-lpignore={true}
data-1p-ignore={true}
/>
{!isServerlessAccount() && (

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

@@ -35,27 +35,29 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
aria-required="true"
autoComplete="off"
autoFocus={true}
data-1p-ignore={true}
data-lpignore={true}
id="database-id"
onChange={[Function]}
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
pattern="[^/?#\\\\]*[^/?# \\\\]"
placeholder="Type a new database id"
size={40}
styles={
Object {
"field": Object {
{
"field": {
"fontSize": 12,
"selectors": Object {
"::placeholder": Object {
"selectors": {
"::placeholder": {
"fontSize": 12,
},
},
},
"root": Object {
"root": {
"width": 300,
},
}
}
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
title="May not end with space nor contain characters '\\' '/' '#' '?'"
type="text"
value=""
/>
@@ -67,16 +69,16 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
label="Provision throughput"
onChange={[Function]}
styles={
Object {
"checkbox": Object {
{
"checkbox": {
"height": 12,
"width": 12,
},
"label": Object {
"label": {
"alignItems": "center",
"padding": 0,
},
"text": Object {
"text": {
"fontSize": 12,
},
}

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

@@ -4,8 +4,8 @@ exports[`Browse queries panel Should render Default properly 1`] = `
<BrowseQueriesPane
closePanel={[Function]}
explorer={
Object {
"queriesClient": Object {
{
"queriesClient": {
"getQueries": [Function],
},
}
@@ -21,7 +21,7 @@ exports[`Browse queries panel Should render Default properly 1`] = `
containerVisible={true}
onQuerySelect={[Function]}
queriesClient={
Object {
{
"getQueries": [Function],
}
}
@@ -41,7 +41,7 @@ exports[`Browse queries panel Should render Default properly 1`] = `
alt="Save query helper banner"
src=""
style={
Object {
{
"border": "1px solid undefined",
"height": "150px",
"marginTop": "20px",

2
src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
View File

@@ -264,7 +264,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
</TooltipHost>
</Stack>
<Text variant="small" aria-label="pkDescription">
<Text variant="small">
{getPartitionKeySubtext(userContext.features.partitionKeyDefault, userContext.apiType)}
</Text>

2419
src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

3101
src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

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

@@ -7,7 +7,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
<div
className="panelMainContent"
style={
Object {
{
"display": "flex",
"flexDirection": "column",
}
@@ -15,7 +15,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
>
<GitHubReposComponent
addRepoProps={
Object {
{
"container": Explorer {
"_isInitializingNotebooks": false,
"isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -24,7 +24,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,
@@ -46,7 +46,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
}
}
authorizeAccessProps={
Object {
{
"authorizeAccess": [Function],
"scope": "public_repo",
}
@@ -54,18 +54,18 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
onCancelClick={[Function]}
onOkClick={[Function]}
reposListProps={
Object {
"branchesProps": Object {},
{
"branchesProps": {},
"pinRepo": [Function],
"pinnedReposProps": Object {
"repos": Array [],
"pinnedReposProps": {
"repos": [],
},
"unpinRepo": [Function],
"unpinnedReposProps": Object {
"unpinnedReposProps": {
"hasMore": true,
"isLoading": true,
"loadMore": [Function],
"repos": Array [],
"repos": [],
},
}
}

6
src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap
View File

@@ -22,8 +22,8 @@ exports[`Load Query Pane should render Default properly 1`] = `
label="Select a query document"
readOnly={true}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"width": 300,
},
}
@@ -39,7 +39,7 @@ exports[`Load Query Pane should render Default properly 1`] = `
className="fileIcon"
height={20}
imageFit={4}
src={Object {}}
src={{}}
width={20}
/>
<input

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

@@ -7,7 +7,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
<Stack
className="panelMainContent"
tokens={
Object {
{
"childrenGap": 20,
}
}
@@ -55,12 +55,12 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
label="Cover image"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "Custom Image",
"text": "Custom Image",
},
Object {
{
"key": "URL",
"text": "URL",
},
@@ -85,7 +85,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
<StackItem>
<GalleryCardComponent
data={
Object {
{
"author": "CosmosDB",
"created": "2020-07-17T00:00:00Z",
"description": "sample description",
@@ -98,7 +98,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
"newCellId": undefined,
"pendingScanJobIds": undefined,
"policyViolations": undefined,
"tags": Array [
"tags": [
"tag1",
" tag2",
],

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

File diff suppressed because it is too large Load Diff

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

@@ -2,7 +2,7 @@
exports[`Save Query Pane should render Default properly 1`] = `
<RightPaneForm
footerStyle={Object {}}
footerStyle={{}}
formError=""
isExecuting={false}
onSubmit={[Function]}
@@ -11,7 +11,7 @@ exports[`Save Query Pane should render Default properly 1`] = `
<div
className="panelFormWrapper"
style={
Object {
{
"flexGrow": 1,
}
}

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

@@ -4,14 +4,18 @@ import {
IChoiceGroupOption,
ISpinButtonStyles,
IToggleStyles,
Icon,
MessageBar,
MessageBarType,
Position,
SpinButton,
Toggle,
TooltipHost,
} from "@fluentui/react";
import * as Constants from "Common/Constants";
import { SplitterDirection } from "Common/Splitter";
import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
import { configContext } from "ConfigContext";
import { Platform, configContext } from "ConfigContext";
import { useDatabases } from "Explorer/useDatabases";
import {
DefaultRUThreshold,
@@ -22,14 +26,33 @@ import {
ruThresholdEnabled as isRUThresholdEnabled,
} from "Shared/StorageUtility";
import * as StringUtility from "Shared/StringUtility";
import { userContext } from "UserContext";
import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
import { updateUserContext, userContext } from "UserContext";
import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
import { useQueryCopilot } from "hooks/useQueryCopilot";
import { useSidePanel } from "hooks/useSidePanel";
import React, { FunctionComponent, useState } from "react";
import Explorer from "../../Explorer";
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
import { AuthType } from "AuthType";
import create, { UseStore } from "zustand";
import { getReadOnlyKeys, listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
export interface DataPlaneRbacState {
dataPlaneRbacEnabled: boolean;
aadTokenUpdated: boolean;
getState?: () => DataPlaneRbacState;
setDataPlaneRbacEnabled: (dataPlaneRbacEnabled: boolean) => void;
setAadDataPlaneUpdated: (aadTokenUpdated: boolean) => void;
}
type DataPlaneRbacStore = UseStore<Partial<DataPlaneRbacState>>;
export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
dataPlaneRbacEnabled: false,
}));
export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
explorer,
@@ -44,6 +67,14 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
? Constants.Queries.UnlimitedPageOption
: Constants.Queries.CustomPageOption,
);
const [enableDataPlaneRBACOption, setEnableDataPlaneRBACOption] = useState<string>(
LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)
? LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled)
: Constants.RBACOptions.setAutomaticRBACOption,
);
const [showDataPlaneRBACWarning, setShowDataPlaneRBACWarning] = useState<boolean>(false);
const [ruThresholdEnabled, setRUThresholdEnabled] = useState<boolean>(isRUThresholdEnabled());
const [ruThreshold, setRUThreshold] = useState<number>(getRUThreshold());
const [queryTimeoutEnabled, setQueryTimeoutEnabled] = useState<boolean>(
@@ -119,7 +150,49 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
StorageKey.ActualItemPerPage,
isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage,
);
LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
if (
enableDataPlaneRBACOption === Constants.RBACOptions.setTrueRBACOption ||
(enableDataPlaneRBACOption === Constants.RBACOptions.setAutomaticRBACOption &&
userContext.databaseAccount.properties.disableLocalAuth)
) {
updateUserContext({
dataPlaneRbacEnabled: true,
hasDataPlaneRbacSettingChanged: true,
});
useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
} else {
updateUserContext({
dataPlaneRbacEnabled: false,
hasDataPlaneRbacSettingChanged: true,
});
const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
if (!userContext.features.enableAadDataPlane && !userContext.masterKey) {
let keys;
try {
keys = await listKeys(subscriptionId, resourceGroup, account.name);
updateUserContext({
masterKey: keys.primaryMasterKey,
});
} catch (error) {
// if listKeys fail because of permissions issue, then make call to get ReadOnlyKeys
if (error.code === "AuthorizationFailed") {
keys = await getReadOnlyKeys(subscriptionId, resourceGroup, account.name);
updateUserContext({
masterKey: keys.primaryReadonlyMasterKey,
});
} else {
logConsoleError(`Error occurred fetching keys for the account." ${error.message}`);
throw error;
}
}
useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
}
}
LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
@@ -207,6 +280,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
{ key: Constants.PriorityLevel.High, text: "High" },
];
const dataPlaneRBACOptionsList: IChoiceGroupOption[] = [
{ key: Constants.RBACOptions.setAutomaticRBACOption, text: "Automatic" },
{ key: Constants.RBACOptions.setTrueRBACOption, text: "True" },
{ key: Constants.RBACOptions.setFalseRBACOption, text: "False" },
];
const defaultQueryResultsViewOptionList: IChoiceGroupOption[] = [
{ key: SplitterDirection.Vertical, text: "Vertical" },
{ key: SplitterDirection.Horizontal, text: "Horizontal" },
@@ -223,6 +302,20 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
setPageOption(option.key);
};
const handleOnDataPlaneRBACOptionChange = (
ev: React.FormEvent<HTMLInputElement>,
option: IChoiceGroupOption,
): void => {
setEnableDataPlaneRBACOption(option.key);
const shouldShowWarning =
(option.key === Constants.RBACOptions.setTrueRBACOption ||
(option.key === Constants.RBACOptions.setAutomaticRBACOption &&
userContext.databaseAccount.properties.disableLocalAuth === true)) &&
!useDataPlaneRbac.getState().aadTokenUpdated;
setShowDataPlaneRBACWarning(shouldShowWarning);
};
const handleOnRUThresholdToggleChange = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
setRUThresholdEnabled(checked);
};
@@ -383,6 +476,55 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
</div>
</div>
)}
{userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && (
<>
<div className="settingsSection">
<div className="settingsSectionPart">
<fieldset>
<legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
Enable Entra ID RBAC
</legend>
<TooltipHost
content={
<>
Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
ID RBAC.
<a
href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
target="_blank"
rel="noopener noreferrer"
>
{" "}
Learn more{" "}
</a>
</>
}
>
<Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
</TooltipHost>
{showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
<MessageBar
messageBarType={MessageBarType.warning}
isMultiline={true}
onDismiss={() => setShowDataPlaneRBACWarning(false)}
dismissButtonAriaLabel="Close"
>
Please click on &quot;Login for Entra ID RBAC&quot; button prior to performing Entra ID RBAC
operations
</MessageBar>
)}
<ChoiceGroup
ariaLabelledBy="enableDataPlaneRBACOptions"
options={dataPlaneRBACOptionsList}
styles={choiceButtonStyles}
selectedKey={enableDataPlaneRBACOption}
onChange={handleOnDataPlaneRBACOptionChange}
/>
</fieldset>
</div>
</div>
</>
)}
{userContext.apiType === "SQL" && (
<>
<div className="settingsSection">

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

@@ -30,12 +30,12 @@ exports[`Settings Pane should render Default properly 1`] = `
ariaLabelledBy="pageOptions"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "custom",
"text": "Custom",
},
Object {
{
"key": "unlimited",
"text": "Unlimited",
},
@@ -43,24 +43,24 @@ exports[`Settings Pane should render Default properly 1`] = `
}
selectedKey="custom"
styles={
Object {
"flexContainer": Array [
Object {
"selectors": Object {
".ms-ChoiceField": Object {
{
"flexContainer": [
{
"selectors": {
".ms-ChoiceField": {
"marginTop": 0,
},
".ms-ChoiceField-wrapper label": Object {
".ms-ChoiceField-wrapper label": {
"fontSize": 12,
"paddingTop": 0,
},
".ms-ChoiceFieldGroup root-133": Object {
".ms-ChoiceFieldGroup root-133": {
"clear": "both",
},
},
},
],
"root": Object {
"root": {
"clear": "both",
},
}
@@ -120,17 +120,17 @@ exports[`Settings Pane should render Default properly 1`] = `
label="Enable RU threshold"
onChange={[Function]}
styles={
Object {
"container": Object {},
"label": Object {
{
"container": {},
"label": {
"display": "block",
"fontSize": 12,
"fontWeight": 400,
},
"pill": Object {},
"root": Object {},
"text": Object {},
"thumb": Object {},
"pill": {},
"root": {},
"text": {},
"thumb": {},
}
}
/>
@@ -146,19 +146,19 @@ exports[`Settings Pane should render Default properly 1`] = `
onChange={[Function]}
step={1000}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
/>
@@ -188,17 +188,17 @@ exports[`Settings Pane should render Default properly 1`] = `
label="Enable query timeout"
onChange={[Function]}
styles={
Object {
"container": Object {},
"label": Object {
{
"container": {},
"label": {
"display": "block",
"fontSize": 12,
"fontWeight": 400,
},
"pill": Object {},
"root": Object {},
"text": Object {},
"thumb": Object {},
"pill": {},
"root": {},
"text": {},
"thumb": {},
}
}
/>
@@ -227,12 +227,12 @@ exports[`Settings Pane should render Default properly 1`] = `
ariaLabelledBy="defaultQueryResultsView"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "vertical",
"text": "Vertical",
},
Object {
{
"key": "horizontal",
"text": "Horizontal",
},
@@ -240,24 +240,24 @@ exports[`Settings Pane should render Default properly 1`] = `
}
selectedKey="vertical"
styles={
Object {
"flexContainer": Array [
Object {
"selectors": Object {
".ms-ChoiceField": Object {
{
"flexContainer": [
{
"selectors": {
".ms-ChoiceField": {
"marginTop": 0,
},
".ms-ChoiceField-wrapper label": Object {
".ms-ChoiceField-wrapper label": {
"fontSize": 12,
"paddingTop": 0,
},
".ms-ChoiceFieldGroup root-133": Object {
".ms-ChoiceFieldGroup root-133": {
"clear": "both",
},
},
},
],
"root": Object {
"root": {
"clear": "both",
},
}
@@ -302,19 +302,19 @@ exports[`Settings Pane should render Default properly 1`] = `
onValidate={[Function]}
step={1}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="9"
@@ -341,19 +341,19 @@ exports[`Settings Pane should render Default properly 1`] = `
onValidate={[Function]}
step={1000}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="0"
@@ -380,19 +380,19 @@ exports[`Settings Pane should render Default properly 1`] = `
onValidate={[Function]}
step={1}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="30"
@@ -419,8 +419,8 @@ exports[`Settings Pane should render Default properly 1`] = `
className="padding"
onChange={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"padding": 0,
},
}
@@ -448,8 +448,8 @@ exports[`Settings Pane should render Default properly 1`] = `
className="padding"
onChange={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"padding": 0,
},
}
@@ -549,19 +549,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
onValidate={[Function]}
step={1}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="9"
@@ -588,19 +588,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
onValidate={[Function]}
step={1000}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="0"
@@ -627,19 +627,19 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
onValidate={[Function]}
step={1}
styles={
Object {
"arrowButtonsContainer": Object {},
"icon": Object {},
"input": Object {},
"label": Object {
{
"arrowButtonsContainer": {},
"icon": {},
"input": {},
"label": {
"fontSize": 12,
"fontWeight": 400,
},
"labelWrapper": Object {},
"root": Object {
"labelWrapper": {},
"root": {
"paddingBottom": 10,
},
"spinButtonWrapper": Object {},
"spinButtonWrapper": {},
}
}
value="30"
@@ -666,8 +666,8 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
className="padding"
onChange={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"padding": 0,
},
}
@@ -693,12 +693,12 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
aria-label="Graph Auto-visualization"
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "false",
"text": "Graph",
},
Object {
{
"key": "true",
"text": "JSON",
},

2457
src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2533
src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2431
src/Explorer/Panes/Tables/__snapshots__/AddTableEntityPanel.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2433
src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx
View File

@@ -1,4 +1,4 @@
import "@testing-library/jest-dom/extend-expect";
import "@testing-library/jest-dom";
import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
import React from "react";

45
src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
View File

@@ -93,12 +93,12 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
id="newDatabaseId"
name="newDatabaseId"
onChange={[Function]}
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
pattern="[^/?#\\\\]*[^/?# \\\\]"
placeholder="Type a new database id"
required={true}
size={40}
tabIndex={0}
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
title="May not end with space nor contain characters '\\' '/' '#' '?'"
type="text"
value=""
/>
@@ -110,16 +110,16 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
label="Share throughput across containers"
onChange={[Function]}
styles={
Object {
"checkbox": Object {
{
"checkbox": {
"height": 12,
"width": 12,
},
"label": Object {
"label": {
"alignItems": "center",
"padding": 0,
},
"text": Object {
"text": {
"fontSize": 12,
},
}
@@ -186,11 +186,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
id="collectionId"
name="collectionId"
onChange={[Function]}
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
pattern="[^/?#\\\\]*[^/?# \\\\]"
placeholder="e.g., Container1"
required={true}
size={40}
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
title="May not end with space nor contain characters '\\' '/' '#' '?'"
type="text"
value=""
/>
@@ -223,7 +223,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
</StyledTooltipHostBase>
</Stack>
<Text
aria-label="pkDescription"
variant="small"
/>
<input
@@ -248,11 +247,11 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
hidden={false}
onClick={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"fontSize": 12,
},
"root": Object {
"root": {
"height": 30,
"padding": 0,
"width": 200,
@@ -288,17 +287,17 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
</Stack>
<CustomizedActionButton
iconProps={
Object {
{
"iconName": "Add",
}
}
onClick={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"fontSize": 12,
},
"root": Object {
"root": {
"padding": 0,
},
}
@@ -411,14 +410,14 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"height": 27,
"width": 80,
}
}
styles={
Object {
"label": Object {
{
"label": {
"fontSize": 12,
},
}
@@ -444,18 +443,18 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
onChange={[Function]}
styles={
Object {
"checkbox": Object {
{
"checkbox": {
"height": 12,
"width": 12,
},
"label": Object {
"label": {
"alignItems": "center",
"padding": 0,
"whiteSpace": "break-spaces",
"wordWrap": "break-word",
},
"text": Object {
"text": {
"fontSize": 12,
},
}

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

File diff suppressed because it is too large Load Diff

24
src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap
View File

@@ -12,23 +12,23 @@ exports[`PaneContainerComponent test should be resize if notification console is
isOpen={true}
onDismiss={[Function]}
style={
Object {
{
"height": "516px",
}
}
styles={
Object {
"commands": Object {
{
"commands": {
"marginTop": 8,
"paddingTop": 0,
},
"content": Object {
"content": {
"padding": 0,
},
"header": Object {
"header": {
"padding": "0 0 8px 34px",
},
"navigation": Object {
"navigation": {
"borderBottom": "1px solid #cccccc",
},
}
@@ -53,23 +53,23 @@ exports[`PaneContainerComponent test should render with panel content and header
isOpen={true}
onDismiss={[Function]}
style={
Object {
{
"height": "736px",
}
}
styles={
Object {
"commands": Object {
{
"commands": {
"marginTop": 8,
"paddingTop": 0,
},
"content": Object {
"content": {
"padding": 0,
},
"header": Object {
"header": {
"padding": "0 0 8px 34px",
},
"navigation": Object {
"navigation": {
"borderBottom": "1px solid #cccccc",
},
}

202
src/Explorer/QueryCopilot/Modal/__snapshots__/QueryCopilotFeedbackModal.test.tsx.snap
View File

@@ -4,8 +4,8 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
<Modal
isOpen={true}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -17,7 +17,7 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -28,7 +28,7 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -39,7 +39,7 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -48,7 +48,7 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -64,8 +64,8 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -79,13 +79,13 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -93,7 +93,7 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -116,8 +116,8 @@ exports[`Query Copilot Feedback Modal snapshot test shoud render and match snaps
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -141,8 +141,8 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -154,7 +154,7 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -165,7 +165,7 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -176,7 +176,7 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -185,7 +185,7 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -201,8 +201,8 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -216,13 +216,13 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -230,7 +230,7 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -253,8 +253,8 @@ exports[`Query Copilot Feedback Modal snapshot test should cancel submission 1`]
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -278,8 +278,8 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -291,7 +291,7 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -302,7 +302,7 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -313,7 +313,7 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -322,7 +322,7 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -338,8 +338,8 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -353,13 +353,13 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -367,7 +367,7 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -390,8 +390,8 @@ exports[`Query Copilot Feedback Modal snapshot test should close on cancel click
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -415,8 +415,8 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -428,7 +428,7 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -439,7 +439,7 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -450,7 +450,7 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -459,7 +459,7 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -475,8 +475,8 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -490,13 +490,13 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -504,7 +504,7 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -527,8 +527,8 @@ exports[`Query Copilot Feedback Modal snapshot test should get user unput 1`] =
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -552,8 +552,8 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -565,7 +565,7 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -576,7 +576,7 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -587,7 +587,7 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -596,7 +596,7 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -612,8 +612,8 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -627,13 +627,13 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -641,7 +641,7 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -664,8 +664,8 @@ exports[`Query Copilot Feedback Modal snapshot test should not render dont show
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -689,8 +689,8 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
<Modal
isOpen={true}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -702,7 +702,7 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -713,7 +713,7 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -724,7 +724,7 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -733,7 +733,7 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -749,8 +749,8 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -764,13 +764,13 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -778,7 +778,7 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -800,11 +800,11 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
label="Don't show me this next time"
onChange={[Function]}
styles={
Object {
"label": Object {
{
"label": {
"paddingLeft": 0,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -816,8 +816,8 @@ exports[`Query Copilot Feedback Modal snapshot test should render dont show agai
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}
@@ -841,8 +841,8 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 8,
"maxWidth": 600,
},
@@ -854,7 +854,7 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
>
<Stack
style={
Object {
{
"padding": 24,
}
}
@@ -865,7 +865,7 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
>
<Text
style={
Object {
{
"fontSize": 20,
"fontWeight": 600,
"marginBottom": 20,
@@ -876,7 +876,7 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -885,7 +885,7 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
</Stack>
<Text
style={
Object {
{
"fontSize": 14,
"marginBottom": 14,
}
@@ -901,8 +901,8 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
required={true}
rows={3}
styles={
Object {
"root": Object {
{
"root": {
"marginBottom": 14,
},
}
@@ -916,13 +916,13 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
readOnly={true}
rows={3}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"backgroundColor": "#F3F2F1",
"borderColor": "#D1D1D1",
"borderRadius": 4,
},
"root": Object {
"root": {
"marginBottom": 14,
},
}
@@ -930,7 +930,7 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
/>
<Text
style={
Object {
{
"fontSize": 12,
"marginBottom": 14,
}
@@ -953,8 +953,8 @@ exports[`Query Copilot Feedback Modal snapshot test should submit submission 1`]
>
<CustomizedPrimaryButton
styles={
Object {
"root": Object {
{
"root": {
"marginRight": 8,
},
}

14
src/Explorer/QueryCopilot/Modal/__snapshots__/WelcomeModal.test.tsx.snap
View File

@@ -7,8 +7,8 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
isOpen={true}
onDismiss={[Function]}
styles={
Object {
"main": Object {
{
"main": {
"borderRadius": 10,
"maxHeight": 600,
"overflow": "hidden",
@@ -29,7 +29,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
>
<StackItem>
<Image
src={Object {}}
src={{}}
/>
</StackItem>
</Stack>
@@ -45,7 +45,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
ariaLabel="Exit"
className="exitIcon"
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -61,7 +61,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
<StackItem
align="center"
style={
Object {
{
"textAlign": "center",
}
}
@@ -85,7 +85,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
className="imageTextPadding"
>
<Image
src={Object {}}
src={{}}
/>
</StackItem>
<StackItem
@@ -122,7 +122,7 @@ exports[`Query Copilot Welcome Modal snapshot test should render when isOpen is
className="imageTextPadding"
>
<Image
src={Object {}}
src={{}}
/>
</StackItem>
<StackItem

22
src/Explorer/QueryCopilot/Popup/__snapshots__/CopyPopup.test.tsx.snap
View File

@@ -6,7 +6,7 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
<Stack
role="status"
style={
Object {
{
"background": "#FFFFFF",
"boxShadow": "0 2px 6px rgba(0, 0, 0, 0.16)",
"gap": 5,
@@ -22,7 +22,7 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
<Stack
horizontal={true}
style={
Object {
{
"display": "flex",
"justifyContent": "space-between",
"padding": "5px, 2px, 0px, 0px",
@@ -33,7 +33,7 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
<Stack
horizontal={true}
style={
Object {
{
"display": "flex",
"gap": 10,
}
@@ -41,9 +41,9 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 15,
"width": 15,
}
@@ -57,19 +57,19 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
</Stack>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
onClick={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"backgroundColor": "transparent",
"border": "none",
"padding": 0,
"selectors": Object {
"&:focus": Object {
"selectors": {
"&:focus": {
"outline": "none",
},
},
@@ -80,7 +80,7 @@ exports[`Copy Popup snapshot test should render when showCopyPopup is true 1`] =
</Stack>
<Text
style={
Object {
{
"marginTop": -10,
}
}

32
src/Explorer/QueryCopilot/Popup/__snapshots__/DeletePopup.test.tsx.snap
View File

@@ -4,8 +4,8 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
<Modal
isOpen={false}
styles={
Object {
"main": Object {
{
"main": {
"minHeight": "122px",
"minWidth": "880px",
},
@@ -14,7 +14,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
>
<Stack
style={
Object {
{
"height": "auto",
"padding": "16px 24px",
}
@@ -22,7 +22,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
>
<Text
style={
Object {
{
"fontSize": "18px",
"height": 24,
}
@@ -34,7 +34,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
</Text>
<Text
style={
Object {
{
"marginBottom": 20,
"marginTop": 10,
}
@@ -46,7 +46,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
horizontal={true}
horizontalAlign="start"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -54,7 +54,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
<CustomizedPrimaryButton
onClick={[Function]}
style={
Object {
{
"height": 24,
"padding": "0px 20px",
}
@@ -65,7 +65,7 @@ exports[`Delete Popup snapshot test should not render when showDeletePopup is fa
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"height": 24,
"padding": "0px 20px",
}
@@ -82,8 +82,8 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
<Modal
isOpen={true}
styles={
Object {
"main": Object {
{
"main": {
"minHeight": "122px",
"minWidth": "880px",
},
@@ -92,7 +92,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
>
<Stack
style={
Object {
{
"height": "auto",
"padding": "16px 24px",
}
@@ -100,7 +100,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
>
<Text
style={
Object {
{
"fontSize": "18px",
"height": 24,
}
@@ -112,7 +112,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
</Text>
<Text
style={
Object {
{
"marginBottom": 20,
"marginTop": 10,
}
@@ -124,7 +124,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
horizontal={true}
horizontalAlign="start"
tokens={
Object {
{
"childrenGap": 10,
}
}
@@ -132,7 +132,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
<CustomizedPrimaryButton
onClick={[Function]}
style={
Object {
{
"height": 24,
"padding": "0px 20px",
}
@@ -143,7 +143,7 @@ exports[`Delete Popup snapshot test should render when showDeletePopup is true 1
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"height": 24,
"padding": "0px 20px",
}

7
src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx
View File

@@ -504,7 +504,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
{!showFeedbackBar && (
<Text style={{ fontSize: 12 }}>
AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
<Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
<Link
href="https://aka.ms/cdb-copilot-preview-terms"
target="_blank"
style={{ color: "#0072D4" }}
className="underlinedLink"
>
Read preview terms
</Link>
{showErrorMessageBar && (

172
src/Explorer/QueryCopilot/Shared/SamplePrompts/__snapshots__/SamplePrompts.test.tsx.snap
View File

@@ -8,7 +8,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-modal="true"
role="dialog"
style={
Object {
{
"maxHeight": "calc(100vh - 120px)",
"overflowY": "auto",
"padding": "16px 24px",
@@ -19,7 +19,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"display": "flex",
"justifyContent": "space-between",
}
@@ -27,7 +27,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 24,
"fontWeight": 600,
}
@@ -37,22 +37,22 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
onClick={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"backgroundColor": "transparent",
"border": "none",
"padding": 0,
"selectors": Object {
"&:focus": Object {
"selectors": {
"&:focus": {
"outline": "none",
},
"&:hover": Object {
"&:hover": {
"backgroundColor": "transparent",
"color": "#000",
},
@@ -64,7 +64,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Text
style={
Object {
{
"fontSize": 13,
"fontWeight": 400,
"marginTop": 10,
@@ -76,7 +76,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -87,9 +87,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -97,7 +97,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -110,7 +110,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -118,7 +118,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -127,7 +127,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -139,7 +139,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -149,7 +149,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -158,7 +158,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -170,7 +170,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -180,7 +180,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -191,9 +191,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -201,7 +201,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -214,7 +214,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -222,7 +222,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -231,7 +231,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -243,7 +243,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -253,7 +253,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -262,7 +262,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -274,7 +274,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -284,7 +284,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -295,9 +295,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -305,7 +305,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -318,7 +318,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -326,7 +326,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -335,7 +335,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -347,7 +347,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -357,7 +357,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -366,7 +366,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -378,7 +378,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -398,7 +398,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-modal="true"
role="dialog"
style={
Object {
{
"maxHeight": "calc(100vh - 120px)",
"overflowY": "auto",
"padding": "16px 24px",
@@ -409,7 +409,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"display": "flex",
"justifyContent": "space-between",
}
@@ -417,7 +417,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 24,
"fontWeight": 600,
}
@@ -427,22 +427,22 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
onClick={[Function]}
styles={
Object {
"root": Object {
{
"root": {
"backgroundColor": "transparent",
"border": "none",
"padding": 0,
"selectors": Object {
"&:focus": Object {
"selectors": {
"&:focus": {
"outline": "none",
},
"&:hover": Object {
"&:hover": {
"backgroundColor": "transparent",
"color": "#000",
},
@@ -454,7 +454,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Text
style={
Object {
{
"fontSize": 13,
"fontWeight": 400,
"marginTop": 10,
@@ -466,7 +466,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -477,9 +477,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -487,7 +487,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -500,7 +500,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -508,7 +508,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -517,7 +517,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -529,7 +529,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -539,7 +539,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -548,7 +548,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -560,7 +560,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -570,7 +570,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -581,9 +581,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -591,7 +591,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -604,7 +604,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -612,7 +612,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -621,7 +621,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -633,7 +633,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -643,7 +643,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -652,7 +652,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -664,7 +664,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -674,7 +674,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
</Stack>
<Stack
style={
Object {
{
"display": "flex",
"marginTop": 30,
}
@@ -685,9 +685,9 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"height": 25,
"width": 25,
}
@@ -695,7 +695,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -708,7 +708,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<Stack
horizontal={true}
style={
Object {
{
"gap": 35,
}
}
@@ -716,7 +716,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -725,7 +725,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -737,7 +737,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}
@@ -747,7 +747,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
<CustomizedDefaultButton
onClick={[Function]}
style={
Object {
{
"background": "#F6F6F7",
"height": 135,
"width": 352,
@@ -756,7 +756,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
>
<Text
style={
Object {
{
"fontSize": 13,
"height": 80,
}
@@ -768,7 +768,7 @@ exports[`Sample Prompts snapshot test should render properly if isSamplePromptsO
aria-label="Forward"
iconName="Forward"
style={
Object {
{
"left": "92.61%",
"position": "absolute",
}

4
src/Explorer/QueryCopilot/V2/Bubbles/Explanation/Button/__snapshots__/ExplanationButton.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`Explanation Button should render explanation bubble with generated comments 1`] = `
<Stack
style={
Object {
{
"alignItems": "center",
"display": "flex",
"margin": "5px",
@@ -14,7 +14,7 @@ exports[`Explanation Button should render explanation bubble with generated comm
<Text
onClick={[Function]}
style={
Object {
{
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",

6
src/Explorer/QueryCopilot/V2/Bubbles/Explanation/__snapshots__/ExplanationBubble.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`Explanation Bubble snapshot tests should render 1`] = `
<Stack
horizontalAlign="start"
style={
Object {
{
"backgroundColor": "white",
"borderRadius": "8px",
"margin": "5px 10px",
@@ -12,7 +12,7 @@ exports[`Explanation Bubble snapshot tests should render 1`] = `
}
}
tokens={
Object {
{
"childrenGap": 8,
"padding": 8,
}
@@ -25,7 +25,7 @@ exports[`Explanation Bubble snapshot tests should render 1`] = `
<FeedbackButtons />
<Text
style={
Object {
{
"fontSize": "10px",
"fontWeight": 400,
"lineHeight": "14px",

6
src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Copy/__snapshots__/CopyButton.test.tsx.snap
View File

@@ -4,9 +4,9 @@ exports[`Copy button snapshot tests should render and click copy 1`] = `
<CustomizedIconButton
ariaLabel="Copy"
iconProps={
Object {
"imageProps": Object {
"src": Object {},
{
"imageProps": {
"src": {},
},
}
}

192
src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Feedback/__snapshots__/FeedbackButtons.test.tsx.snap
View File

@@ -6,11 +6,11 @@ exports[`Feedback buttons snapshot tests should click dislike and show popup 1`]
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -22,11 +22,11 @@ exports[`Feedback buttons snapshot tests should click dislike and show popup 1`]
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -46,11 +46,11 @@ exports[`Feedback buttons snapshot tests should click like and dismiss callout 1
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -62,11 +62,11 @@ exports[`Feedback buttons snapshot tests should click like and dismiss callout 1
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -89,17 +89,17 @@ exports[`Feedback buttons snapshot tests should click like and show callout 1`]
onDismiss={[Function]}
role="dialog"
style={
Object {
{
"borderRadius": "4px",
"padding": "5px 12px 5px 12px",
}
}
styles={
Object {
"beakCurtain": Object {
{
"beakCurtain": {
"borderRadius": "4px",
},
"root": Object {
"root": {
"borderRadius": "4px",
},
}
@@ -121,11 +121,11 @@ exports[`Feedback buttons snapshot tests should click like and show callout 1`]
</Callout>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -137,11 +137,11 @@ exports[`Feedback buttons snapshot tests should click like and show callout 1`]
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -161,11 +161,11 @@ exports[`Feedback buttons snapshot tests should click like and submit feedback 1
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -177,11 +177,11 @@ exports[`Feedback buttons snapshot tests should click like and submit feedback 1
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -201,11 +201,11 @@ exports[`Feedback buttons snapshot tests should dobule click on dislike 1`] = `
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -217,11 +217,11 @@ exports[`Feedback buttons snapshot tests should dobule click on dislike 1`] = `
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -241,11 +241,11 @@ exports[`Feedback buttons snapshot tests should dobule click on like 1`] = `
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -257,11 +257,11 @@ exports[`Feedback buttons snapshot tests should dobule click on like 1`] = `
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -281,11 +281,11 @@ exports[`Feedback buttons snapshot tests should hover over dislike 1`] = `
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -297,11 +297,11 @@ exports[`Feedback buttons snapshot tests should hover over dislike 1`] = `
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeHover",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -321,11 +321,11 @@ exports[`Feedback buttons snapshot tests should hover over dislike and click 1`]
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -337,11 +337,11 @@ exports[`Feedback buttons snapshot tests should hover over dislike and click 1`]
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -361,11 +361,11 @@ exports[`Feedback buttons snapshot tests should hover over like 1`] = `
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeHover",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -377,11 +377,11 @@ exports[`Feedback buttons snapshot tests should hover over like 1`] = `
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -404,17 +404,17 @@ exports[`Feedback buttons snapshot tests should hover over like and click 1`] =
onDismiss={[Function]}
role="dialog"
style={
Object {
{
"borderRadius": "4px",
"padding": "5px 12px 5px 12px",
}
}
styles={
Object {
"beakCurtain": Object {
{
"beakCurtain": {
"borderRadius": "4px",
},
"root": Object {
"root": {
"borderRadius": "4px",
},
}
@@ -436,11 +436,11 @@ exports[`Feedback buttons snapshot tests should hover over like and click 1`] =
</Callout>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -452,11 +452,11 @@ exports[`Feedback buttons snapshot tests should hover over like and click 1`] =
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -476,11 +476,11 @@ exports[`Feedback buttons snapshot tests should hover over pressed dislike and l
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -492,11 +492,11 @@ exports[`Feedback buttons snapshot tests should hover over pressed dislike and l
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -519,17 +519,17 @@ exports[`Feedback buttons snapshot tests should hover over pressed like and leav
onDismiss={[Function]}
role="dialog"
style={
Object {
{
"borderRadius": "4px",
"padding": "5px 12px 5px 12px",
}
}
styles={
Object {
"beakCurtain": Object {
{
"beakCurtain": {
"borderRadius": "4px",
},
"root": Object {
"root": {
"borderRadius": "4px",
},
}
@@ -551,11 +551,11 @@ exports[`Feedback buttons snapshot tests should hover over pressed like and leav
</Callout>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikePressed",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -567,11 +567,11 @@ exports[`Feedback buttons snapshot tests should hover over pressed like and leav
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -591,11 +591,11 @@ exports[`Feedback buttons snapshot tests should hover over rest dislike and leav
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -607,11 +607,11 @@ exports[`Feedback buttons snapshot tests should hover over rest dislike and leav
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},
@@ -631,11 +631,11 @@ exports[`Feedback buttons snapshot tests should hover over rest like and leave 1
>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
},
}
@@ -647,11 +647,11 @@ exports[`Feedback buttons snapshot tests should hover over rest like and leave 1
/>
<CustomizedIconButton
iconProps={
Object {
"imageProps": Object {
{
"imageProps": {
"src": "LikeRest",
},
"style": Object {
"style": {
"minHeight": "18px",
"transform": "rotate(180deg)",
},

8
src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/Insert/__snapshots__/InsertButton.test.tsx.snap
View File

@@ -3,15 +3,15 @@
exports[`Insert button snapshot tests should click and update state 1`] = `
<CustomizedActionButton
iconProps={
Object {
"imageProps": Object {
"src": Object {},
{
"imageProps": {
"src": {},
},
}
}
onClick={[Function]}
style={
Object {
{
"borderColor": "#D1D1D1",
"borderRadius": "4px",
"borderWidth": "1px",

48
src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/More/__snapshots__/MoreButton.test.tsx.snap
View File

@@ -3,60 +3,60 @@
exports[`More button snapshot tests should render 1`] = `
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "More",
}
}
menuIconProps={
Object {
{
"hidden": true,
}
}
menuProps={
Object {
"calloutProps": Object {
"styles": Object {
"calloutMain": Object {
{
"calloutProps": {
"styles": {
"calloutMain": {
"borderRadius": "4px",
},
"root": Object {
"root": {
"borderRadius": "4px",
},
},
},
"directionalHint": 2,
"items": Array [
Object {
"iconProps": Object {
"imageProps": Object {
"src": Object {},
"items": [
{
"iconProps": {
"imageProps": {
"src": {},
},
},
"key": "regenerate",
"text": "Regenerate code",
},
Object {
"iconProps": Object {
"imageProps": Object {
"src": Object {},
{
"iconProps": {
"imageProps": {
"src": {},
},
},
"key": "explain",
"text": "Explain code",
},
Object {
"iconProps": Object {
"imageProps": Object {
"src": Object {},
{
"iconProps": {
"imageProps": {
"src": {},
},
},
"key": "optimize",
"text": "Optimize",
},
Object {
"iconProps": Object {
"imageProps": Object {
"src": Object {},
{
"iconProps": {
"imageProps": {
"src": {},
},
},
"key": "simplify",

2
src/Explorer/QueryCopilot/V2/Bubbles/Output/Buttons/__snapshots__/OutputBubbleButtons.test.tsx.snap
View File

@@ -6,7 +6,7 @@ exports[`Output Bubble Buttons snapshot tests should render 1`] = `
>
<StackItem
style={
Object {
{
"paddingTop": "5px",
}
}

16
src/Explorer/QueryCopilot/V2/Bubbles/Output/__snapshots__/OutputBubble.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
<Stack
id="outputBubble"
style={
Object {
{
"alignItems": "center",
"backgroundColor": "white",
"borderRadius": "8px",
@@ -14,7 +14,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
}
}
tokens={
Object {
{
"childrenGap": 8,
"padding": 8,
}
@@ -22,7 +22,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
>
<StackItem
style={
Object {
{
"alignSelf": "flex-start",
"paddingLeft": "2px",
}
@@ -32,7 +32,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
</StackItem>
<StackItem
style={
Object {
{
"alignSelf": "stretch",
"flexGrow": 4,
}
@@ -47,12 +47,12 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
lineNumbers="on"
lineNumbersMinChars={2}
minimap={
Object {
{
"enabled": false,
}
}
monacoContainerStyles={
Object {
{
"borderRadius": "4px",
"height": "NaNpx",
}
@@ -63,7 +63,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
</StackItem>
<StackItem
style={
Object {
{
"alignSelf": "flex-start",
}
}
@@ -75,7 +75,7 @@ exports[`Output Bubble snapshot tests should render and update height 1`] = `
<StackItem>
<Text
style={
Object {
{
"fontSize": "10px",
"fontWeight": 400,
"lineHeight": "14px",

32
src/Explorer/QueryCopilot/V2/Bubbles/Retriveing/__snapshots__/RetrievingBubble.test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
<Stack
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"backgroundColor": "#FAFAFA",
"borderRadius": "8px",
@@ -18,7 +18,7 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
>
<Text
style={
Object {
{
"backgroundColor": "white",
"borderRadius": "8px",
"fontWeight": "bold",
@@ -34,7 +34,7 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
</Text>
<div
style={
Object {
{
"backgroundColor": "#E6E6E6",
"borderRadius": "4px",
"height": "4px",
@@ -45,7 +45,7 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
>
<div
style={
Object {
{
"animation": "loadingAnimation 2s linear infinite",
"backgroundColor": "#0078D4",
"height": "100%",
@@ -57,7 +57,7 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
<Stack
horizontalAlign="center"
style={
Object {
{
"alignItems": "center",
"gap": "8px",
"marginTop": "8px",
@@ -69,13 +69,13 @@ exports[`RetrievingBubble should render properly when isGeneratingExplanation is
onClick={[Function]}
onRenderIcon={[Function]}
style={
Object {
{
"color": "#424242",
}
}
styles={
Object {
"root": Object {
{
"root": {
"background": "none",
"border": "none",
"color": "#424242",
@@ -96,7 +96,7 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
<Stack
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"backgroundColor": "#FAFAFA",
"borderRadius": "8px",
@@ -109,7 +109,7 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
>
<Text
style={
Object {
{
"backgroundColor": "white",
"borderRadius": "8px",
"fontWeight": "bold",
@@ -125,7 +125,7 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
</Text>
<div
style={
Object {
{
"backgroundColor": "#E6E6E6",
"borderRadius": "4px",
"height": "4px",
@@ -136,7 +136,7 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
>
<div
style={
Object {
{
"animation": "loadingAnimation 2s linear infinite",
"backgroundColor": "#0078D4",
"height": "100%",
@@ -148,7 +148,7 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
<Stack
horizontalAlign="center"
style={
Object {
{
"alignItems": "center",
"gap": "8px",
"marginTop": "8px",
@@ -160,13 +160,13 @@ exports[`RetrievingBubble should render properly when isGeneratingQuery is true
onClick={[Function]}
onRenderIcon={[Function]}
style={
Object {
{
"color": "#424242",
}
}
styles={
Object {
"root": Object {
{
"root": {
"background": "none",
"border": "none",
"color": "#424242",

12
src/Explorer/QueryCopilot/V2/Bubbles/Sample/__snapshots__/SampleBubble.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`Sample Bubble snapshot test should render 1`] = `
<Stack
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"display": "flex",
"margin": "10px",
@@ -17,7 +17,7 @@ exports[`Sample Bubble snapshot test should render 1`] = `
key="0"
onClick={[Function]}
style={
Object {
{
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",
@@ -33,7 +33,7 @@ exports[`Sample Bubble snapshot test should render 1`] = `
key="1"
onClick={[Function]}
style={
Object {
{
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",
@@ -52,7 +52,7 @@ exports[`Sample Bubble snapshot test should render and be clicked 1`] = `
<Stack
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"display": "flex",
"margin": "10px",
@@ -65,7 +65,7 @@ exports[`Sample Bubble snapshot test should render and be clicked 1`] = `
key="0"
onClick={[Function]}
style={
Object {
{
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",
@@ -81,7 +81,7 @@ exports[`Sample Bubble snapshot test should render and be clicked 1`] = `
key="1"
onClick={[Function]}
style={
Object {
{
"border": "1.5px solid #B0BEFF",
"borderRadius": "4px",
"cursor": "pointer",

2
src/Explorer/QueryCopilot/V2/Bubbles/Welcome/WelcomeBubble.test.tsx
View File

@@ -3,7 +3,7 @@ import React from "react";
import { WelcomeBubble } from "./WelcomeBubble";
const mockedDate = new Date(2023, 7, 15);
jest.spyOn(global, "Date").mockImplementation(() => mockedDate as unknown as string);
jest.spyOn(global, "Date").mockImplementation(() => mockedDate);
describe("Welcome Bubble snapshot test", () => {
it("should render", () => {

34
src/Explorer/QueryCopilot/V2/Bubbles/Welcome/__snapshots__/WelcomeBubble.test.tsx.snap
View File

@@ -5,12 +5,12 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
<Stack
horizontalAlign="center"
style={
Object {
{
"color": "#707070",
}
}
tokens={
Object {
{
"childrenGap": 8,
"padding": 8,
}
@@ -22,14 +22,14 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
</Stack>
<Stack
style={
Object {
{
"backgroundColor": "white",
"borderRadius": "8px",
"margin": "5px 10px",
}
}
tokens={
Object {
{
"childrenGap": 12,
"padding": 16,
}
@@ -42,7 +42,7 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
</Text>
<Stack
tokens={
Object {
{
"childrenGap": 8,
}
}
@@ -50,19 +50,19 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
<Stack
horizontal={true}
style={
Object {
{
"marginLeft": "15px",
}
}
tokens={
Object {
{
"childrenGap": 8,
}
}
>
<Text
style={
Object {
{
"fontSize": "16px",
"lineHeight": "16px",
"verticalAlign": "middle",
@@ -73,7 +73,7 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
</Text>
<Text
style={
Object {
{
"verticalAlign": "middle",
}
}
@@ -84,19 +84,19 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
<Stack
horizontal={true}
style={
Object {
{
"marginLeft": "15px",
}
}
tokens={
Object {
{
"childrenGap": 8,
}
}
>
<Text
style={
Object {
{
"fontSize": "16px",
"lineHeight": "16px",
"verticalAlign": "middle",
@@ -107,7 +107,7 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
</Text>
<Text
style={
Object {
{
"verticalAlign": "middle",
}
}
@@ -118,19 +118,19 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
<Stack
horizontal={true}
style={
Object {
{
"marginLeft": "15px",
}
}
tokens={
Object {
{
"childrenGap": 8,
}
}
>
<Text
style={
Object {
{
"fontSize": "16px",
"lineHeight": "16px",
"verticalAlign": "middle",
@@ -141,7 +141,7 @@ exports[`Welcome Bubble snapshot test should render 1`] = `
</Text>
<Text
style={
Object {
{
"verticalAlign": "middle",
}
}

144
src/Explorer/QueryCopilot/V2/Footer/__snapshots__/Footer.test.tsx.snap
View File

@@ -5,7 +5,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -19,18 +19,18 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -40,7 +40,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -56,11 +56,11 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -76,7 +76,7 @@ exports[`Footer snapshot test should not pass if no text 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}
@@ -90,7 +90,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -104,18 +104,18 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -125,7 +125,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -141,11 +141,11 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -161,7 +161,7 @@ exports[`Footer snapshot test should not pass text with non enter key 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}
@@ -175,7 +175,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -189,18 +189,18 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -210,7 +210,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -226,11 +226,11 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -246,7 +246,7 @@ exports[`Footer snapshot test should open sample prompts on button click 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}
@@ -260,7 +260,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -274,18 +274,18 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -295,7 +295,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -311,11 +311,11 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -331,7 +331,7 @@ exports[`Footer snapshot test should pass text with enter key 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}
@@ -345,7 +345,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -359,18 +359,18 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -380,7 +380,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -396,11 +396,11 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -416,7 +416,7 @@ exports[`Footer snapshot test should pass text with icon button 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}
@@ -430,7 +430,7 @@ exports[`Footer snapshot test should update user input 1`] = `
horizontal={true}
horizontalAlign="end"
style={
Object {
{
"alignItems": "center",
"background": "white",
"borderRadius": "20px",
@@ -444,18 +444,18 @@ exports[`Footer snapshot test should update user input 1`] = `
<Stack>
<Image
onClick={[Function]}
src={Object {}}
src={{}}
styles={
Object {
"label": Object {
{
"label": {
"fontWeight": 400,
"paddingLeft": 8,
"textAlign": "left",
},
"root": Object {
"root": {
"border": "5px",
"selectors": Object {
":hover": Object {
"selectors": {
":hover": {
"outline": "1px dashed #605e5c",
},
},
@@ -465,7 +465,7 @@ exports[`Footer snapshot test should update user input 1`] = `
/>
<SamplePrompts
sampleProps={
Object {
{
"isSamplePromptsOpen": false,
"setIsSamplePromptsOpen": [Function],
"setTextBox": [Function],
@@ -481,11 +481,11 @@ exports[`Footer snapshot test should update user input 1`] = `
placeholder="Write your own prompt or ask a question"
resizable={false}
styles={
Object {
"fieldGroup": Object {
{
"fieldGroup": {
"border": "none",
},
"root": Object {
"root": {
"border": "none",
"borderRadius": "20px",
"height": "80px",
@@ -501,7 +501,7 @@ exports[`Footer snapshot test should update user input 1`] = `
<CustomizedIconButton
disabled={null}
iconProps={
Object {
{
"iconName": "Send",
}
}

12
src/Explorer/QueryCopilot/V2/Header/__snapshots__/Header.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`Header snapshot test should close on button click 1`] = `
<Stack
horizontal={true}
style={
Object {
{
"display": "flex",
"justifyContent": "space-between",
"margin": "15px 0px 0px 0px",
@@ -18,11 +18,11 @@ exports[`Header snapshot test should close on button click 1`] = `
verticalAlign="center"
>
<Image
src={Object {}}
src={{}}
/>
<Text
style={
Object {
{
"fontWeight": "bold",
"marginLeft": "5px",
}
@@ -32,7 +32,7 @@ exports[`Header snapshot test should close on button click 1`] = `
</Text>
<Text
style={
Object {
{
"background": "#f0f0f0",
"borderRadius": "8px",
"fontSize": "10px",
@@ -47,13 +47,13 @@ exports[`Header snapshot test should close on button click 1`] = `
<CustomizedIconButton
ariaLabel="Exit"
iconProps={
Object {
{
"iconName": "Cancel",
}
}
onClick={[Function]}
style={
Object {
{
"color": "#424242",
"verticalAlign": "middle",
}

8
src/Explorer/QueryCopilot/V2/Sidebar/__snapshots__/QueryCopilotSidebar.test.tsx.snap
View File

@@ -3,7 +3,7 @@
exports[`Query Copilot Sidebar snapshot test should render and not set copilot used flag 1`] = `
<Stack
style={
Object {
{
"backgroundColor": "#FAFAFA",
"height": "100%",
"width": "100%",
@@ -18,7 +18,7 @@ exports[`Query Copilot Sidebar snapshot test should render and not set copilot u
exports[`Query Copilot Sidebar snapshot test should render and set copilot used flag 1`] = `
<Stack
style={
Object {
{
"backgroundColor": "#FAFAFA",
"height": "100%",
"width": "100%",
@@ -33,7 +33,7 @@ exports[`Query Copilot Sidebar snapshot test should render and set copilot used
exports[`Query Copilot Sidebar snapshot test should render samples without messages 1`] = `
<Stack
style={
Object {
{
"backgroundColor": "#FAFAFA",
"height": "100%",
"width": "100%",
@@ -48,7 +48,7 @@ exports[`Query Copilot Sidebar snapshot test should render samples without messa
exports[`Query Copilot Sidebar snapshot test should render with chat messages 1`] = `
<Stack
style={
Object {
{
"backgroundColor": "#FAFAFA",
"height": "100%",
"width": "100%",

40
src/Explorer/QueryCopilot/__snapshots__/CopilotCarousel.test.tsx.snap
View File

@@ -4,8 +4,8 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
<Modal
isOpen={true}
styles={
Object {
"main": Object {
{
"main": {
"width": 880,
},
}
@@ -13,7 +13,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
>
<Stack
style={
Object {
{
"padding": 16,
}
}
@@ -29,7 +29,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<CustomizedIconButton
iconProps={
Object {
{
"iconName": "Cancel",
}
}
@@ -38,14 +38,14 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Stack>
<Stack
style={
Object {
{
"marginTop": 8,
}
}
>
<Text
style={
Object {
{
"fontSize": 13,
}
}
@@ -54,7 +54,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
@@ -65,7 +65,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 13,
"marginTop": 8,
}
@@ -74,16 +74,16 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
To generate queries , just describe the query you want and copilot will generate the query for you.Watch this video to learn more about how to use copilot.
</Text>
<Image
src={Object {}}
src={{}}
style={
Object {
{
"margin": "16px auto",
}
}
/>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
}
@@ -93,7 +93,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 13,
"marginTop": 8,
}
@@ -112,7 +112,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
@@ -123,7 +123,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 13,
"marginTop": 8,
}
@@ -140,7 +140,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 14,
"fontWeight": 600,
"marginTop": 16,
@@ -151,7 +151,7 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Text>
<Text
style={
Object {
{
"fontSize": 13,
"marginTop": 8,
}
@@ -169,12 +169,12 @@ exports[`Query Copilot Carousel snapshot test should render when isOpen is true
</Stack>
<Separator
styles={
Object {
"root": Object {
{
"root": {
"height": 1,
"padding": "16px 0",
"selectors": Object {
"::before": Object {
"selectors": {
"::before": {
"background": undefined,
},
},

36
src/Explorer/QueryCopilot/__snapshots__/PromptCard.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
<Stack
horizontal={true}
style={
Object {
{
"border": "1px solid #F3F2F1",
"boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
"boxSizing": "border-box",
@@ -23,7 +23,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
<div>
<Text
style={
Object {
{
"background": "#F8FFF0",
"color": "#00A2AD",
"fontSize": 13,
@@ -35,7 +35,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
</div>
<Text
style={
Object {
{
"fontSize": 13,
"marginLeft": 16,
}
@@ -46,7 +46,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
</Stack>
<Text
style={
Object {
{
"fontSize": 10,
"marginTop": 16,
}
@@ -57,7 +57,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
</StackItem>
<StackItem
style={
Object {
{
"marginLeft": 16,
}
}
@@ -65,8 +65,8 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
<StyledChoiceGroup
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "selected",
"text": "",
},
@@ -74,8 +74,8 @@ exports[`Prompt card snapshot test should render properly if isSelected is false
}
selectedKey=""
styles={
Object {
"flexContainer": Object {
{
"flexContainer": {
"width": 36,
},
}
@@ -89,7 +89,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
<Stack
horizontal={true}
style={
Object {
{
"border": "1px solid #F3F2F1",
"boxShadow": "0px 1.6px 3.6px rgba(0, 0, 0, 0.132), 0px 0.3px 0.9px rgba(0, 0, 0, 0.108)",
"boxSizing": "border-box",
@@ -108,7 +108,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
<div>
<Text
style={
Object {
{
"background": "#F8FFF0",
"color": "#00A2AD",
"fontSize": 13,
@@ -120,7 +120,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
</div>
<Text
style={
Object {
{
"fontSize": 13,
"marginLeft": 16,
}
@@ -131,7 +131,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
</Stack>
<Text
style={
Object {
{
"fontSize": 10,
"marginTop": 16,
}
@@ -142,7 +142,7 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
</StackItem>
<StackItem
style={
Object {
{
"marginLeft": 16,
}
}
@@ -150,8 +150,8 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
<StyledChoiceGroup
onChange={[Function]}
options={
Array [
Object {
[
{
"key": "selected",
"text": "",
},
@@ -159,8 +159,8 @@ exports[`Prompt card snapshot test should render properly if isSelected is true
}
selectedKey="selected"
styles={
Object {
"flexContainer": Object {
{
"flexContainer": {
"width": 36,
},
}

6
src/Explorer/QueryCopilot/__snapshots__/QueryCopilotTab.test.tsx.snap
View File

@@ -4,14 +4,14 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
<Stack
className="tab-pane"
style={
Object {
{
"width": "100%",
}
}
>
<div
style={
Object {
{
"height": "100%",
"overflowY": "auto",
}
@@ -29,7 +29,7 @@ exports[`Query copilot tab snapshot test should render with initial input 1`] =
"onRefreshResourcesClick": [Function],
"phoenixClient": PhoenixClient {
"armResourceId": undefined,
"retryOptions": Object {
"retryOptions": {
"maxTimeout": 5000,
"minTimeout": 5000,
"retries": 3,

312
src/Explorer/Sidebar.tsx Normal file
View File

@@ -0,0 +1,312 @@
import {
Button,
Menu,
MenuButtonProps,
MenuItem,
MenuList,
MenuPopover,
MenuTrigger,
SplitButton,
makeStyles,
mergeClasses,
shorthands,
} from "@fluentui/react-components";
import { Add16Regular, ArrowSync12Regular, ChevronLeft12Regular, ChevronRight12Regular } from "@fluentui/react-icons";
import { Platform, configContext } from "ConfigContext";
import Explorer from "Explorer/Explorer";
import { AddDatabasePanel } from "Explorer/Panes/AddDatabasePanel/AddDatabasePanel";
import { Tabs } from "Explorer/Tabs/Tabs";
import { CosmosFluentProvider, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
import { ResourceTree } from "Explorer/Tree/ResourceTree";
import { useDatabases } from "Explorer/useDatabases";
import { KeyboardAction, KeyboardActionGroup, KeyboardActionHandler, useKeyboardActionGroup } from "KeyboardShortcuts";
import { userContext } from "UserContext";
import { getCollectionName, getDatabaseName } from "Utils/APITypeUtils";
import { Allotment, AllotmentHandle } from "allotment";
import { useSidePanel } from "hooks/useSidePanel";
import { debounce } from "lodash";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
const useSidebarStyles = makeStyles({
sidebar: {
height: "100%",
},
sidebarContainer: {
height: "100%",
backgroundColor: tokens.colorNeutralBackground1,
},
expandedContent: {
display: "grid",
height: "100%",
gridTemplateRows: `calc(${tokens.layoutRowHeight} * 2) 1fr`,
},
floatingControlsContainer: {
position: "relative",
zIndex: 1000,
width: "100%",
},
floatingControls: {
display: "flex",
flexDirection: "row",
position: "absolute",
right: 0,
},
floatingControlButton: {
...shorthands.border("none"),
backgroundColor: "transparent",
},
globalCommandsContainer: {
display: "grid",
alignItems: "center",
justifyItems: "center",
width: "100%",
...cosmosShorthands.borderBottom(),
},
loadingProgressBar: {
// Float above the content
position: "absolute",
width: "100%",
height: "2px",
zIndex: 2000,
backgroundColor: tokens.colorCompoundBrandBackground,
animationIterationCount: "infinite",
animationDuration: "3s",
animationName: {
"0%": {
opacity: ".2", // matches indeterminate bar width
},
"50%": {
opacity: "1",
},
"100%": {
opacity: ".2",
},
},
},
});
interface GlobalCommandsProps {
explorer: Explorer;
}
interface GlobalCommand {
id: string;
label: string;
icon: JSX.Element;
onClick: () => void;
keyboardAction?: KeyboardAction;
}
const GlobalCommands: React.FC<GlobalCommandsProps> = ({ explorer }) => {
const styles = useSidebarStyles();
const actions = useMemo<GlobalCommand[]>(() => {
if (
configContext.platform === Platform.Fabric ||
userContext.apiType === "Postgres" ||
userContext.apiType === "VCoreMongo"
) {
// No Global Commands for these API types.
// In fact, no sidebar for Postgres or VCoreMongo at all, but just in case, we check here anyway.
return [];
}
const actions: GlobalCommand[] = [
{
id: "new_collection",
label: `New ${getCollectionName()}`,
icon: <Add16Regular />,
onClick: () => explorer.onNewCollectionClicked(),
keyboardAction: KeyboardAction.NEW_COLLECTION,
},
];
if (userContext.apiType !== "Tables") {
actions.push({
id: "new_database",
label: `New ${getDatabaseName()}`,
icon: <Add16Regular />,
onClick: async () => {
const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
if (throughputCap && throughputCap !== -1) {
await useDatabases.getState().loadAllOffers();
}
useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={explorer} />);
},
keyboardAction: KeyboardAction.NEW_DATABASE,
});
}
return actions;
}, [explorer]);
const primaryAction = useMemo(() => (actions.length > 0 ? actions[0] : undefined), [actions]);
const onPrimaryActionClick = useCallback(() => primaryAction?.onClick(), [primaryAction]);
const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.GLOBAL_COMMANDS);
useEffect(() => {
setKeyboardActions(
actions.reduce(
(acc, action) => {
if (action.keyboardAction) {
acc[action.keyboardAction] = action.onClick;
}
return acc;
},
{} as Record<KeyboardAction, KeyboardActionHandler>,
),
);
}, [actions, setKeyboardActions]);
if (!primaryAction) {
return null;
}
return (
<div className={styles.globalCommandsContainer} data-test="GlobalCommands">
{actions.length === 1 ? (
<Button icon={primaryAction.icon} onClick={onPrimaryActionClick}>
{primaryAction.label}
</Button>
) : (
<Menu positioning="below-end">
<MenuTrigger disableButtonEnhancement>
{(triggerProps: MenuButtonProps) => (
<SplitButton
menuButton={{ ...triggerProps, "aria-label": "More commands" }}
primaryActionButton={{ onClick: onPrimaryActionClick }}
icon={primaryAction.icon}
>
{primaryAction.label}
</SplitButton>
)}
</MenuTrigger>
<MenuPopover>
<MenuList>
{actions.map((action) => (
<MenuItem key={action.id} icon={action.icon} onClick={action.onClick}>
{action.label}
</MenuItem>
))}
</MenuList>
</MenuPopover>
</Menu>
)}
</div>
);
};
interface SidebarProps {
explorer: Explorer;
}
const CollapseThreshold = 50;
export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
const styles = useSidebarStyles();
const [expanded, setExpanded] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [expandedSize, setExpandedSize] = React.useState(300);
const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
const allotment = useRef<AllotmentHandle>(null);
const expand = useCallback(() => {
if (!expanded) {
allotment.current.resize([expandedSize, Infinity]);
setExpanded(true);
}
}, [expanded, expandedSize, setExpanded]);
const collapse = useCallback(() => {
if (expanded) {
allotment.current.resize([24, Infinity]);
setExpanded(false);
}
}, [expanded, setExpanded]);
const onChange = debounce((sizes: number[]) => {
if (expanded && sizes[0] <= CollapseThreshold) {
collapse();
} else if (!expanded && sizes[0] > CollapseThreshold) {
expand();
}
}, 10);
const onDragEnd = useCallback(
(sizes: number[]) => {
if (expanded) {
// Remember the last size we had when expanded
setExpandedSize(sizes[0]);
} else {
allotment.current.resize([24, Infinity]);
}
},
[expanded, setExpandedSize],
);
const onRefreshClick = useCallback(async () => {
setLoading(true);
await explorer.onRefreshResourcesClick();
setLoading(false);
}, [setLoading]);
return (
<Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
{/* Collections Tree - Start */}
{hasSidebar && (
// When collapsed, we force the pane to 24 pixels wide and make it non-resizable.
<Allotment.Pane minSize={24} preferredSize={300}>
<CosmosFluentProvider className={mergeClasses(styles.sidebar)}>
<div className={styles.sidebarContainer}>
{loading && (
// The Fluent UI progress bar has some issues in reduced-motion environments so we use a simple CSS animation here.
// https://github.com/microsoft/fluentui/issues/29076
<div className={styles.loadingProgressBar} title="Refreshing tree..." />
)}
{expanded ? (
<>
<div className={styles.floatingControlsContainer}>
<div className={styles.floatingControls}>
<button
type="button"
className={styles.floatingControlButton}
disabled={loading}
title="Refresh"
onClick={onRefreshClick}
>
<ArrowSync12Regular />
</button>
<button
type="button"
className={styles.floatingControlButton}
title="Collapse sidebar"
onClick={() => collapse()}
>
<ChevronLeft12Regular />
</button>
</div>
</div>
<div className={styles.expandedContent}>
<GlobalCommands explorer={explorer} />
<ResourceTree explorer={explorer} />
</div>
</>
) : (
<button
type="button"
className={styles.floatingControlButton}
title="Expand sidebar"
onClick={() => expand()}
>
<ChevronRight12Regular />
</button>
)}
</div>
</CosmosFluentProvider>
</Allotment.Pane>
)}
<Allotment.Pane minSize={800}>
<Tabs explorer={explorer} />
</Allotment.Pane>
</Allotment>
);
};

6
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@@ -355,15 +355,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
) : (
<div className="moreStuffContainer">
<div className="moreStuffColumn commonTasks">
<div className="title">Recents</div>
<h2 className="title">Recents</h2>
{this.getRecentItems()}
</div>
<div className="moreStuffColumn">
<div className="title">Top 3 things you need to know</div>
<h2 className="title">Top 3 things you need to know</h2>
{this.top3Items()}
</div>
<div className="moreStuffColumn tipsContainer">
<div className="title">Learning Resources</div>
<h2 className="title">Learning Resources</h2>
{this.getLearningResourceItems()}
</div>
</div>

22
src/Explorer/Tables/TableDataClient.ts
View File

@@ -363,18 +363,24 @@ export class CassandraAPIDataClient extends TableDataClient {
entitiesToDelete: Entities.ITableEntity[],
): Promise<any> {
const query = `DELETE FROM ${collection.databaseId}.${collection.id()} WHERE `;
const partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
const partitionKeys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys;
await Promise.all(
entitiesToDelete.map(async (currEntityToDelete: Entities.ITableEntity) => {
const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting row ${currEntityToDelete.RowKey._}`);
const partitionKeyValue = currEntityToDelete[partitionKeyProperty];
const currQuery =
query +
(this.isStringType(partitionKeyValue.$)
? `${partitionKeyProperty} = '${partitionKeyValue._}'`
: `${partitionKeyProperty} = ${partitionKeyValue._}`);
let currQuery = query;
for (let partitionKeyIndex = 0; partitionKeyIndex < partitionKeys.length; partitionKeyIndex++) {
const partitionKey: CassandraTableKey = partitionKeys[partitionKeyIndex];
const partitionKeyValue: Entities.ITableEntityAttribute = currEntityToDelete[partitionKey.property];
currQuery =
currQuery +
(this.isStringType(partitionKeyValue.$)
? `${partitionKey.property} = '${partitionKeyValue._}'`
: `${partitionKey.property} = ${partitionKeyValue._}`);
if (partitionKeyIndex < partitionKeys.length - 1) {
currQuery = `${currQuery} AND `;
}
}
try {
await this.queryDocuments(collection, currQuery);
NotificationConsoleUtils.logConsoleInfo(`Successfully deleted row ${currEntityToDelete.RowKey._}`);

6
src/Explorer/Tabs/ConflictsTab.html
View File

@@ -21,7 +21,7 @@
<td class="refreshColHeader">
<img
class="refreshcol"
src="/refresh-cosmos.svg"
src="../../../images/refresh-cosmos.svg"
data-bind="click: refreshDocumentsGrid"
alt="Refresh documents"
/>
@@ -53,7 +53,7 @@
>
<img
class="refreshcol"
src="/refresh-cosmos.svg"
src="../../../images/refresh-cosmos.svg"
data-bind="click: refreshDocumentsGrid"
alt="Refresh documents"
/>
@@ -110,7 +110,7 @@
<div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
</div>
<div class="documentWaterMark" data-bind="visible: shouldShowWatermark">
<p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
<p><img src="../../../images/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
<p class="documentWaterMarkText">View and resolve conflicts</p>
</div>
<!-- Editor - Start -->

2
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx
View File

@@ -340,7 +340,7 @@ describe("Documents tab (noSql API)", () => {
isPreferredApiMongoDB: false,
documentIds: [],
collection: undefined,
partitionKey: undefined,
partitionKey: { kind: "Hash", paths: ["/foo"], version: 2 },
onLoadStartKey: 0,
tabTitle: "",
onExecutionErrorChange: (isExecutionError: boolean): void => {

390
src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx
View File

@@ -1,12 +1,15 @@
import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
import { Button, FluentProvider, Input, TableRowId } from "@fluentui/react-components";
import { Dismiss16Filled } from "@fluentui/react-icons";
import Split from "@uiw/react-split";
import { Button, Input, TableRowId, makeStyles, shorthands } from "@fluentui/react-components";
import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
import MongoUtility from "Common/MongoUtility";
import { StyleConstants } from "Common/StyleConstants";
import { createDocument } from "Common/dataAccess/createDocument";
import { deleteDocuments as deleteNoSqlDocuments } from "Common/dataAccess/deleteDocument";
import {
deleteDocument as deleteNoSqlDocument,
deleteDocuments as deleteNoSqlDocuments,
} from "Common/dataAccess/deleteDocument";
import { queryDocuments } from "Common/dataAccess/queryDocuments";
import { readDocument } from "Common/dataAccess/readDocument";
import { updateDocument } from "Common/dataAccess/updateDocument";
@@ -21,10 +24,9 @@ import { usePrevious } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
import {
DocumentsTabPrefs,
readDocumentsTabPrefs,
saveDocumentsTabPrefs,
saveDocumentsTabPrefsDebounced,
saveDocumentsTabPrefsDebounced
} from "Explorer/Tabs/DocumentsTabV2/documentsTabPrefs";
import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
import { CosmosFluentProvider, LayoutConstants, cosmosShorthands, tokens } from "Explorer/Theme/ThemeUtil";
import { useSelectedNode } from "Explorer/useSelectedNode";
import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
import { QueryConstants } from "Shared/Constants";
@@ -32,9 +34,9 @@ import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
import { Action } from "Shared/Telemetry/TelemetryConstants";
import { userContext } from "UserContext";
import { logConsoleError } from "Utils/NotificationConsoleUtils";
import { Allotment } from "allotment";
import React, { KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { format } from "react-string-format";
import { CSSProperties } from "styled-components";
import DeleteDocumentIcon from "../../../../images/DeleteDocument.svg";
import NewDocumentIcon from "../../../../images/NewDocument.svg";
import UploadIcon from "../../../../images/Upload_16x16.svg";
@@ -54,6 +56,61 @@ import ObjectId from "../../Tree/ObjectId";
import TabsBase from "../TabsBase";
import { ColumnDefinition, DocumentsTableComponent, DocumentsTableComponentItem } from "./DocumentsTableComponent";
const loadMoreHeight = LayoutConstants.rowHeight;
export const useDocumentsTabStyles = makeStyles({
container: {
height: "100%",
},
filterRow: {
minHeight: tokens.layoutRowHeight,
fontSize: tokens.fontSizeBase200,
display: "flex",
columnGap: tokens.spacingHorizontalS,
paddingLeft: tokens.spacingHorizontalS,
paddingRight: tokens.spacingHorizontalL,
alignItems: "center",
...cosmosShorthands.borderBottom(),
},
filterInput: {
flexGrow: 1,
},
appliedFilter: {
flexGrow: 1,
},
tableContainer: {
marginRight: tokens.spacingHorizontalXXXL,
},
tableRow: {
height: tokens.layoutRowHeight,
},
tableCell: {
...cosmosShorthands.borderLeft(),
},
loadMore: {
...cosmosShorthands.borderTop(),
display: "grid",
alignItems: "center",
justifyItems: "center",
width: "100%",
height: `${loadMoreHeight}px`,
textAlign: "center",
":focus": {
...shorthands.outline("1px", "dotted"),
},
},
floatingControlsContainer: {
position: "relative",
},
floatingControls: {
position: "absolute",
top: "6px",
right: 0,
float: "right",
backgroundColor: "white",
zIndex: 1,
},
});
export class DocumentsTabV2 extends TabsBase {
public partitionKey: DataModels.PartitionKey;
private documentIds: DocumentId[];
@@ -95,9 +152,8 @@ export class DocumentsTabV2 extends TabsBase {
// Use this value to initialize the very time the component is rendered
const RESET_INDEX = -1;
const filterButtonStyle: CSSProperties = {
marginLeft: 8,
};
// Auto-select first row. Define as constant to show where first row is selected
export const INITIAL_SELECTED_ROW_INDEX = 0;
// From TabsBase.renderObjectForEditor()
let renderObjectForEditor = (
@@ -471,6 +527,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
const [documentIds, setDocumentIds] = useState<ExtendedDocumentId[]>([]);
const [isExecuting, setIsExecuting] = useState<boolean>(false);
const filterInput = useRef<HTMLInputElement>(null);
const styles = useDocumentsTabStyles();
// Query
const [documentsIterator, setDocumentsIterator] = useState<{
@@ -525,8 +582,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
currentClickedRowIndex > documentIds.length - 1
) {
// reset clicked row or the current clicked row is out of bounds
currentClickedRowIndex = 0;
setSelectedRows(new Set([0]));
currentClickedRowIndex = INITIAL_SELECTED_ROW_INDEX;
setSelectedRows(new Set([INITIAL_SELECTED_ROW_INDEX]));
onDocumentClicked(currentClickedRowIndex, documentIds);
}
}
@@ -869,7 +926,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
}, [initialDocumentContent, selectedDocumentContentBaseline, setSelectedDocumentContent]);
/**
* Implementation using bulk delete
* Implementation using bulk delete NoSQL API
*/
let _deleteDocuments = useCallback(
async (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
@@ -879,7 +936,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
tabTitle,
});
setIsExecuting(true);
return deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
// TODO: Once JS SDK Bug fix for bulk deleting legacy containers (whose systemKey==1) is released:
// Remove the check for systemKey, remove call to deleteNoSqlDocument(). deleteNoSqlDocuments() should always be called.
return (
partitionKey.systemKey
? deleteNoSqlDocument(_collection, toDeleteDocumentIds[0]).then(() => [toDeleteDocumentIds[0]])
: deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
)
.then(
(deletedIds) => {
TelemetryProcessor.traceSuccess(
@@ -950,8 +1014,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
? `the selected ${selectedRows.size} items`
: "the selected item"
: isPlural
? `the selected ${selectedRows.size} documents`
: "the selected document";
? `the selected ${selectedRows.size} documents`
: "the selected document";
const msg = `Are you sure you want to delete ${documentName}?`;
useDialog
@@ -1186,6 +1250,16 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
documentsIterator, // loadNextPage: disabled as it will trigger a circular dependency and infinite loop
]);
const onRefreshKeyInput: KeyboardEventHandler<HTMLButtonElement> = (event) => {
if (event.key === " " || event.key === "Enter") {
const focusElement = event.target as HTMLElement;
refreshDocumentsGrid(false);
focusElement && focusElement.focus();
event.stopPropagation();
event.preventDefault();
}
};
const onLoadMoreKeyInput: KeyboardEventHandler<HTMLAnchorElement> = (event) => {
if (event.key === " " || event.key === "Enter") {
const focusElement = event.target as HTMLElement;
@@ -1364,12 +1438,12 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
if (!tableContainerRef.current) {
return undefined;
}
const resizeObserver = new ResizeObserver(() =>
const resizeObserver = new ResizeObserver(() => {
setTableContainerSizePx({
height: tableContainerRef.current.offsetHeight,
height: tableContainerRef.current.offsetHeight - loadMoreHeight,
width: tableContainerRef.current.offsetWidth,
}),
);
});
});
resizeObserver.observe(tableContainerRef.current);
return () => resizeObserver.disconnect(); // clean up
}, []);
@@ -1789,143 +1863,142 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
}, [prevSelectedColumnIds, refreshDocumentsGrid, selectedColumnIds]);
return (
<FluentProvider theme={getPlatformTheme(configContext.platform)} style={{ height: "100%" }}>
<div className="tab-pane active documentsTab" role="tabpanel" style={{ display: "flex" }}>
<CosmosFluentProvider className={styles.container}>
<div className="tab-pane active" role="tabpanel" style={{ display: "flex" }}>
{isFilterCreated && (
<div className="filterdivs">
<>
{!isFilterExpanded && !isPreferredApiMongoDB && (
<div className="filterDocCollapsed">
<span className="selectQuery">SELECT * FROM c</span>
<span className="appliedQuery">{appliedFilter}</span>
<Button appearance="primary" onClick={onShowFilterClick} style={filterButtonStyle}>
<div className={styles.filterRow}>
<span>SELECT * FROM c</span>
<span className={styles.appliedFilter}>{appliedFilter}</span>
<Button appearance="primary" size="small" onClick={onShowFilterClick}>
Edit Filter
</Button>
</div>
)}
{!isFilterExpanded && isPreferredApiMongoDB && (
<div className="filterDocCollapsed">
{appliedFilter.length > 0 && <span className="selectQuery">Filter :</span>}
<div className={styles.filterRow}>
{appliedFilter.length > 0 && <span>Filter :</span>}
{!(appliedFilter.length > 0) && <span className="noFilterApplied">No filter applied</span>}
<span className="appliedQuery">{appliedFilter}</span>
<Button style={filterButtonStyle} appearance="primary" onClick={onShowFilterClick}>
<span className={styles.appliedFilter}>{appliedFilter}</span>
<Button appearance="primary" size="small" onClick={onShowFilterClick}>
Edit Filter
</Button>
</div>
)}
{isFilterExpanded && (
<div className="filterDocExpanded">
<div>
<div className="editFilterContainer">
{!isPreferredApiMongoDB && <span className="filterspan"> SELECT * FROM c </span>}
<Input
id="filterInput"
ref={filterInput}
type="text"
list="filtersList"
className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
style={{ width: "100%" }}
title="Type a query predicate or choose one from the list."
placeholder={
isPreferredApiMongoDB
? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
: "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
}
value={filterContent}
autoFocus={true}
onKeyDown={onFilterKeyDown}
onChange={(e) => setFilterContent(e.target.value)}
onBlur={() => setIsFilterFocused(false)}
/>
<div className={styles.filterRow}>
{!isPreferredApiMongoDB && <span> SELECT * FROM c </span>}
<Input
id="filterInput"
ref={filterInput}
type="text"
size="small"
list="filtersList"
className={styles.filterInput}
title="Type a query predicate or choose one from the list."
placeholder={
isPreferredApiMongoDB
? "Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents."
: "Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents."
}
value={filterContent}
autoFocus={true}
onKeyDown={onFilterKeyDown}
onChange={(e) => setFilterContent(e.target.value)}
onBlur={() => setIsFilterFocused(false)}
/>
<datalist id="filtersList">
{lastFilterContents.map((filter) => (
<option key={filter} value={filter} />
))}
</datalist>
<datalist id="filtersList">
{lastFilterContents.map((filter) => (
<option key={filter} value={filter} />
))}
</datalist>
<span className="filterbuttonpad">
<Button
appearance="primary"
style={filterButtonStyle}
onClick={() => refreshDocumentsGrid(true)}
disabled={!applyFilterButton.enabled}
aria-label="Apply filter"
tabIndex={0}
>
Apply Filter
</Button>
</span>
<span className="filterbuttonpad">
{!isPreferredApiMongoDB && isExecuting && (
<Button
style={filterButtonStyle}
appearance="primary"
aria-label="Cancel Query"
onClick={() => queryAbortController.abort()}
tabIndex={0}
>
Cancel Query
</Button>
)}
</span>
<Button
appearance="primary"
size="small"
onClick={() => refreshDocumentsGrid(true)}
disabled={!applyFilterButton.enabled}
aria-label="Apply filter"
tabIndex={0}
>
Apply Filter
</Button>
{!isPreferredApiMongoDB && isExecuting && (
<Button
appearance="primary"
size="small"
aria-label="Cancel Query"
onClick={() => queryAbortController.abort()}
tabIndex={0}
>
Cancel Query
</Button>
)}
<Button
aria-label="close filter"
tabIndex={0}
onClick={onHideFilterClick}
onKeyDown={onCloseButtonKeyDown}
appearance="transparent"
size="small"
icon={<Dismiss16Filled />}
/>
</div>
)}
</>
)}
{/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden", height: "100%" }}>
<Allotment>
<Allotment.Pane preferredSize="35%" minSize={175}>
<div style={{ height: "100%", width: "100%", overflow: "hidden" }} ref={tableContainerRef}>
<div className={styles.floatingControlsContainer}>
<div className={styles.floatingControls}>
<Button
aria-label="close filter"
tabIndex={0}
onClick={onHideFilterClick}
onKeyDown={onCloseButtonKeyDown}
appearance="transparent"
icon={<Dismiss16Filled />}
aria-label="Refresh"
size="small"
icon={<ArrowClockwise16Filled />}
style={{
color: StyleConstants.AccentMedium,
}}
onClick={() => refreshDocumentsGrid(false)}
onKeyDown={onRefreshKeyInput}
/>
</div>
</div>
<div className={styles.tableContainer}>
<div
style={
{
height: "100%",
width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
} /* Fix to make table not resize beyond parent's width */
}
>
<DocumentsTableComponent
onRefreshTable={() => refreshDocumentsGrid(false)}
items={tableItems}
onItemClicked={(index) => onDocumentClicked(index, documentIds)}
onSelectedRowsChange={onSelectedRowsChange}
selectedRows={selectedRows}
size={tableContainerSizePx}
selectedColumnIds={selectedColumnIds}
columnDefinitions={columnDefinitions}
isSelectionDisabled={
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
}
onColumnResize={onTableColumnResize}
onColumnSelectionChange={onColumnSelectionChange}
/>
</div>
</div>
</div>
)}
</div>
)}
{/* <Split> doesn't like to be a flex child */}
<div style={{ overflow: "hidden", height: "100%" }}>
<Split
onDragEnd={(preSize: number) => {
prefs.leftPaneWidthPercent = Math.min(100, Math.max(0, Math.round(100 * preSize) / 100));
saveDocumentsTabPrefs(prefs);
setPrefs({ ...prefs });
}}
>
<div
style={{
minWidth: 60,
width: `${prefs.leftPaneWidthPercent}%`,
overflow: "hidden",
position: "relative",
}}
ref={tableContainerRef}
>
<div
style={
{
height: "100%",
width: `calc(100% + ${calculateOffset(selectedColumnIds.length)}px)`,
} /* Fix to make table not resize beyond parent's width */
}
>
<DocumentsTableComponent
onRefreshTable={() => refreshDocumentsGrid(false)}
items={tableItems}
onItemClicked={(index) => onDocumentClicked(index, documentIds)}
onSelectedRowsChange={onSelectedRowsChange}
selectedRows={selectedRows}
size={tableContainerSizePx}
selectedColumnIds={selectedColumnIds}
columnDefinitions={columnDefinitions}
isSelectionDisabled={
configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
}
onColumnResize={onTableColumnResize}
onColumnSelectionChange={onColumnSelectionChange}
/>
{tableItems.length > 0 && (
<a
className="loadMore"
className={styles.loadMore}
role="button"
tabIndex={0}
onClick={() => loadNextPage(documentsIterator.iterator, false)}
@@ -1935,26 +2008,29 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
</a>
)}
</div>
</div>
<div style={{ minWidth: 60, width: `${100 - prefs.leftPaneWidthPercent}%` }}>
{isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
<EditorReact
language={"json"}
content={selectedDocumentContent}
isReadOnly={false}
ariaLabel={"Document editor"}
lineNumbers={"on"}
theme={"_theme"}
onContentChanged={_onEditorContentChange}
/>
)}
{selectedRows.size > 1 && (
<span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
)}
</div>
</Split>
</div>
</div>
</FluentProvider>
</Allotment.Pane>
<Allotment.Pane preferredSize="65%" minSize={300}>
<div style={{ height: "100%", width: "100%" }}>
{isTabActive && selectedDocumentContent && selectedRows.size <= 1 && (
<EditorReact
language={"json"}
content={selectedDocumentContent}
isReadOnly={false}
ariaLabel={"Document editor"}
lineNumbers={"on"}
theme={"_theme"}
onContentChanged={_onEditorContentChange}
enableWordWrapContextMenuItem={true}
/>
)}
{selectedRows.size > 1 && (
<span style={{ margin: 10 }}>Number of selected documents: {selectedRows.size}</span>
)}
</div>
</Allotment.Pane>
</Allotment>
</div >
</div >
</CosmosFluentProvider >
);
};

55
src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx
View File

@@ -37,7 +37,9 @@ import {
} from "@fluentui/react-icons";
import { NormalizedEventKey } from "Common/Constants";
import { TableColumnSelectionPane } from "Explorer/Panes/TableColumnSelectionPane/TableColumnSelectionPane";
import { INITIAL_SELECTED_ROW_INDEX, useDocumentsTabStyles } from "Explorer/Tabs/DocumentsTabV2/DocumentsTabV2";
import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
import { LayoutConstants } from "Explorer/Theme/ThemeUtil";
import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
import { useSidePanel } from "hooks/useSidePanel";
import React, { useCallback, useMemo } from "react";
@@ -95,6 +97,8 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
onColumnResize: _onColumnResize,
onColumnSelectionChange,
}: IDocumentsTableComponentProps) => {
const styles = useDocumentsTabStyles();
const initialSizingOptions: TableColumnSizingOptions = {};
columnDefinitions.forEach((column) => {
initialSizingOptions[column.id] = {
@@ -220,7 +224,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
[columnDefinitions, onColumnSelectionChange, selectedColumnIds],
);
const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(undefined);
const [selectionStartIndex, setSelectionStartIndex] = React.useState<number>(INITIAL_SELECTED_ROW_INDEX);
const onTableCellClicked = useCallback(
(e: React.MouseEvent, index: number) => {
if (isSelectionDisabled) {
@@ -264,7 +268,12 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
return (
<TableRow
aria-rowindex={index + 2}
style={{ ...style, cursor: "pointer", userSelect: "none" }}
className={styles.tableRow}
style={{
...style,
cursor: "pointer",
userSelect: "none",
}}
key={item.id}
aria-selected={selected}
appearance={appearance}
@@ -283,7 +292,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
{columns.map((column) => (
<TableCell
key={column.columnId}
className="documentsTableCell"
className={styles.tableCell}
// When clicking on a cell with shift/ctrl key, onKeyDown is called instead of onClick.
onClick={(e: React.MouseEvent<Element, MouseEvent>) => onTableCellClicked(e, index)}
onKeyPress={(e: React.KeyboardEvent<Element>) => onIdClicked(e, index)}
@@ -366,7 +375,7 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
role: "grid",
...columnSizing.getTableProps(),
...keyboardNavAttr,
size: "extra-small",
size: "small",
ref: tableRef,
...style,
};
@@ -393,9 +402,9 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
};
return (
<Table className="documentsTable" noNativeElements sortable {...tableProps}>
<TableHeader className="documentsTableHeader">
<TableRow style={{ width: size ? size.width - 15 : "100%" }}>
<Table noNativeElements sortable {...tableProps}>
<TableHeader>
<TableRow className={styles.tableRow} style={{ width: size ? size.width - 15 : "100%" }}>
{!isSelectionDisabled && (
<TableSelectionCell
key="selectcell"
@@ -405,23 +414,25 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
checkboxIndicator={{ "aria-label": "Select all rows " }}
/>
)}
{columns.map((column) => (
<TableHeaderCell
className="documentsTableCell"
key={column.columnId}
{...columnSizing.getTableHeaderCellProps(column.columnId)}
{...headerSortProps(column.columnId)}
>
{column.renderHeaderCell()}
</TableHeaderCell>
))}
</TableRow>
</TableHeader>
{
columns.map((column) => (
<TableHeaderCell
className={styles.tableCell}
key={column.columnId}
{...columnSizing.getTableHeaderCellProps(column.columnId)}
{...headerSortProps(column.columnId)}
>
{column.renderHeaderCell()}
</TableHeaderCell>
))
}
</TableRow >
</TableHeader >
<TableBody>
<List
height={size !== undefined ? size.height - 32 /* table header */ - 21 /* load more */ : 0}
height={size !== undefined ? size.height - LayoutConstants.rowHeight /* table header */ : 0}
itemCount={items.length}
itemSize={30}
itemSize={LayoutConstants.rowHeight}
width={size ? size.width : 0}
itemData={rows}
style={{ overflowY: "scroll" }}
@@ -429,6 +440,6 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
{RenderRow}
</List>
</TableBody>
</Table>
</Table >
);
};

608
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap
View File

@@ -1,562 +1,116 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
<FluentProvider
style={
Object {
"height": "100%",
}
}
theme={
Object {
"borderRadiusCircular": "10000px",
"borderRadiusLarge": "6px",
"borderRadiusMedium": "4px",
"borderRadiusNone": "0",
"borderRadiusSmall": "2px",
"borderRadiusXLarge": "8px",
"colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)",
"colorBrandBackground": "#117865",
"colorBrandBackground2": "#e3f7ef",
"colorBrandBackground2Hover": "#c0ecdd",
"colorBrandBackground2Pressed": "#78d3b9",
"colorBrandBackgroundHover": "#0c695a",
"colorBrandBackgroundInverted": "#ffffff",
"colorBrandBackgroundInvertedHover": "#e3f7ef",
"colorBrandBackgroundInvertedPressed": "#9ee0cb",
"colorBrandBackgroundInvertedSelected": "#c0ecdd",
"colorBrandBackgroundPressed": "#033f38",
"colorBrandBackgroundSelected": "#0a5c50",
"colorBrandBackgroundStatic": "#117865",
"colorBrandForeground1": "#117865",
"colorBrandForeground2": "#0c695a",
"colorBrandForeground2Hover": "#0a5c50",
"colorBrandForeground2Pressed": "#01322E",
"colorBrandForegroundInverted": "#2aaC94",
"colorBrandForegroundInvertedHover": "#3abb9f",
"colorBrandForegroundInvertedPressed": "#2aaC94",
"colorBrandForegroundLink": "#0c695a",
"colorBrandForegroundLinkHover": "#0a5c50",
"colorBrandForegroundLinkPressed": "#033f38",
"colorBrandForegroundLinkSelected": "#0c695a",
"colorBrandForegroundOnLight": "#117865",
"colorBrandForegroundOnLightHover": "#0c695a",
"colorBrandForegroundOnLightPressed": "#054d43",
"colorBrandForegroundOnLightSelected": "#0a5c50",
"colorBrandShadowAmbient": "rgba(0,0,0,0.30)",
"colorBrandShadowKey": "rgba(0,0,0,0.25)",
"colorBrandStroke1": "#117865",
"colorBrandStroke2": "#9ee0cb",
"colorBrandStroke2Contrast": "#9ee0cb",
"colorBrandStroke2Hover": "#52c7aa",
"colorBrandStroke2Pressed": "#117865",
"colorCompoundBrandBackground": "#117865",
"colorCompoundBrandBackgroundHover": "#0c695a",
"colorCompoundBrandBackgroundPressed": "#0a5c50",
"colorCompoundBrandForeground1": "#117865",
"colorCompoundBrandForeground1Hover": "#0c695a",
"colorCompoundBrandForeground1Pressed": "#0a5c50",
"colorCompoundBrandStroke": "#117865",
"colorCompoundBrandStrokeHover": "#0c695a",
"colorCompoundBrandStrokePressed": "#0a5c50",
"colorNeutralBackground1": "#ffffff",
"colorNeutralBackground1Hover": "#f5f5f5",
"colorNeutralBackground1Pressed": "#e0e0e0",
"colorNeutralBackground1Selected": "#ebebeb",
"colorNeutralBackground2": "#fafafa",
"colorNeutralBackground2Hover": "#f0f0f0",
"colorNeutralBackground2Pressed": "#dbdbdb",
"colorNeutralBackground2Selected": "#e6e6e6",
"colorNeutralBackground3": "#f5f5f5",
"colorNeutralBackground3Hover": "#ebebeb",
"colorNeutralBackground3Pressed": "#d6d6d6",
"colorNeutralBackground3Selected": "#e0e0e0",
"colorNeutralBackground4": "#f0f0f0",
"colorNeutralBackground4Hover": "#fafafa",
"colorNeutralBackground4Pressed": "#f5f5f5",
"colorNeutralBackground4Selected": "#ffffff",
"colorNeutralBackground5": "#ebebeb",
"colorNeutralBackground5Hover": "#f5f5f5",
"colorNeutralBackground5Pressed": "#f0f0f0",
"colorNeutralBackground5Selected": "#fafafa",
"colorNeutralBackground6": "#e6e6e6",
"colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)",
"colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)",
"colorNeutralBackgroundDisabled": "#f0f0f0",
"colorNeutralBackgroundInverted": "#292929",
"colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)",
"colorNeutralBackgroundStatic": "#333333",
"colorNeutralForeground1": "#242424",
"colorNeutralForeground1Hover": "#242424",
"colorNeutralForeground1Pressed": "#242424",
"colorNeutralForeground1Selected": "#242424",
"colorNeutralForeground1Static": "#242424",
"colorNeutralForeground2": "#424242",
"colorNeutralForeground2BrandHover": "#117865",
"colorNeutralForeground2BrandPressed": "#0c695a",
"colorNeutralForeground2BrandSelected": "#117865",
"colorNeutralForeground2Hover": "#242424",
"colorNeutralForeground2Link": "#424242",
"colorNeutralForeground2LinkHover": "#242424",
"colorNeutralForeground2LinkPressed": "#242424",
"colorNeutralForeground2LinkSelected": "#242424",
"colorNeutralForeground2Pressed": "#242424",
"colorNeutralForeground2Selected": "#242424",
"colorNeutralForeground3": "#616161",
"colorNeutralForeground3BrandHover": "#117865",
"colorNeutralForeground3BrandPressed": "#0c695a",
"colorNeutralForeground3BrandSelected": "#117865",
"colorNeutralForeground3Hover": "#424242",
"colorNeutralForeground3Pressed": "#424242",
"colorNeutralForeground3Selected": "#424242",
"colorNeutralForeground4": "#707070",
"colorNeutralForegroundDisabled": "#bdbdbd",
"colorNeutralForegroundInverted": "#ffffff",
"colorNeutralForegroundInverted2": "#ffffff",
"colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)",
"colorNeutralForegroundInvertedHover": "#ffffff",
"colorNeutralForegroundInvertedLink": "#ffffff",
"colorNeutralForegroundInvertedLinkHover": "#ffffff",
"colorNeutralForegroundInvertedLinkPressed": "#ffffff",
"colorNeutralForegroundInvertedLinkSelected": "#ffffff",
"colorNeutralForegroundInvertedPressed": "#ffffff",
"colorNeutralForegroundInvertedSelected": "#ffffff",
"colorNeutralForegroundOnBrand": "#ffffff",
"colorNeutralForegroundStaticInverted": "#ffffff",
"colorNeutralShadowAmbient": "rgba(0,0,0,0.12)",
"colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)",
"colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)",
"colorNeutralShadowKey": "rgba(0,0,0,0.14)",
"colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)",
"colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)",
"colorNeutralStencil1": "#e6e6e6",
"colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)",
"colorNeutralStencil2": "#fafafa",
"colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)",
"colorNeutralStroke1": "#d1d1d1",
"colorNeutralStroke1Hover": "#c7c7c7",
"colorNeutralStroke1Pressed": "#b3b3b3",
"colorNeutralStroke1Selected": "#bdbdbd",
"colorNeutralStroke2": "#e0e0e0",
"colorNeutralStroke3": "#f0f0f0",
"colorNeutralStrokeAccessible": "#616161",
"colorNeutralStrokeAccessibleHover": "#575757",
"colorNeutralStrokeAccessiblePressed": "#4d4d4d",
"colorNeutralStrokeAccessibleSelected": "#117865",
"colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)",
"colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)",
"colorNeutralStrokeDisabled": "#e0e0e0",
"colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)",
"colorNeutralStrokeOnBrand": "#ffffff",
"colorNeutralStrokeOnBrand2": "#ffffff",
"colorNeutralStrokeOnBrand2Hover": "#ffffff",
"colorNeutralStrokeOnBrand2Pressed": "#ffffff",
"colorNeutralStrokeOnBrand2Selected": "#ffffff",
"colorNeutralStrokeSubtle": "#e0e0e0",
"colorPaletteAnchorBackground2": "#bcc3c7",
"colorPaletteAnchorBorderActive": "#394146",
"colorPaletteAnchorForeground2": "#202427",
"colorPaletteBeigeBackground2": "#d7d4d4",
"colorPaletteBeigeBorderActive": "#7a7574",
"colorPaletteBeigeForeground2": "#444241",
"colorPaletteBerryBackground1": "#fdf5fc",
"colorPaletteBerryBackground2": "#edbbe7",
"colorPaletteBerryBackground3": "#c239b3",
"colorPaletteBerryBorder1": "#edbbe7",
"colorPaletteBerryBorder2": "#c239b3",
"colorPaletteBerryBorderActive": "#c239b3",
"colorPaletteBerryForeground1": "#af33a1",
"colorPaletteBerryForeground2": "#6d2064",
"colorPaletteBerryForeground3": "#c239b3",
"colorPaletteBlueBackground2": "#a9d3f2",
"colorPaletteBlueBorderActive": "#0078d4",
"colorPaletteBlueForeground2": "#004377",
"colorPaletteBrassBackground2": "#e0cea2",
"colorPaletteBrassBorderActive": "#986f0b",
"colorPaletteBrassForeground2": "#553e06",
"colorPaletteBrownBackground2": "#ddc3b0",
"colorPaletteBrownBorderActive": "#8e562e",
"colorPaletteBrownForeground2": "#50301a",
"colorPaletteCornflowerBackground2": "#c8d1fa",
"colorPaletteCornflowerBorderActive": "#4f6bed",
"colorPaletteCornflowerForeground2": "#2c3c85",
"colorPaletteCranberryBackground2": "#eeacb2",
"colorPaletteCranberryBorderActive": "#c50f1f",
"colorPaletteCranberryForeground2": "#6e0811",
"colorPaletteDarkGreenBackground2": "#9ad29a",
"colorPaletteDarkGreenBorderActive": "#0b6a0b",
"colorPaletteDarkGreenForeground2": "#063b06",
"colorPaletteDarkOrangeBackground1": "#fdf6f3",
"colorPaletteDarkOrangeBackground2": "#f4bfab",
"colorPaletteDarkOrangeBackground3": "#da3b01",
"colorPaletteDarkOrangeBorder1": "#f4bfab",
"colorPaletteDarkOrangeBorder2": "#da3b01",
"colorPaletteDarkOrangeBorderActive": "#da3b01",
"colorPaletteDarkOrangeForeground1": "#c43501",
"colorPaletteDarkOrangeForeground2": "#7a2101",
"colorPaletteDarkOrangeForeground3": "#da3b01",
"colorPaletteDarkRedBackground2": "#d69ca5",
"colorPaletteDarkRedBorderActive": "#750b1c",
"colorPaletteDarkRedForeground2": "#420610",
"colorPaletteForestBackground2": "#bdd99b",
"colorPaletteForestBorderActive": "#498205",
"colorPaletteForestForeground2": "#294903",
"colorPaletteGoldBackground2": "#ecdfa5",
"colorPaletteGoldBorderActive": "#c19c00",
"colorPaletteGoldForeground2": "#6c5700",
"colorPaletteGrapeBackground2": "#d9a7e0",
"colorPaletteGrapeBorderActive": "#881798",
"colorPaletteGrapeForeground2": "#4c0d55",
"colorPaletteGreenBackground1": "#f1faf1",
"colorPaletteGreenBackground2": "#9fd89f",
"colorPaletteGreenBackground3": "#107c10",
"colorPaletteGreenBorder1": "#9fd89f",
"colorPaletteGreenBorder2": "#107c10",
"colorPaletteGreenBorderActive": "#107c10",
"colorPaletteGreenForeground1": "#0e700e",
"colorPaletteGreenForeground2": "#094509",
"colorPaletteGreenForeground3": "#107c10",
"colorPaletteGreenForegroundInverted": "#359b35",
"colorPaletteLavenderBackground2": "#d2ccf8",
"colorPaletteLavenderBorderActive": "#7160e8",
"colorPaletteLavenderForeground2": "#3f3682",
"colorPaletteLightGreenBackground1": "#f2fbf2",
"colorPaletteLightGreenBackground2": "#a7e3a5",
"colorPaletteLightGreenBackground3": "#13a10e",
"colorPaletteLightGreenBorder1": "#a7e3a5",
"colorPaletteLightGreenBorder2": "#13a10e",
"colorPaletteLightGreenBorderActive": "#13a10e",
"colorPaletteLightGreenForeground1": "#11910d",
"colorPaletteLightGreenForeground2": "#0b5a08",
"colorPaletteLightGreenForeground3": "#13a10e",
"colorPaletteLightTealBackground2": "#a6e9ed",
"colorPaletteLightTealBorderActive": "#00b7c3",
"colorPaletteLightTealForeground2": "#00666d",
"colorPaletteLilacBackground2": "#e6bfed",
"colorPaletteLilacBorderActive": "#b146c2",
"colorPaletteLilacForeground2": "#63276d",
"colorPaletteMagentaBackground2": "#eca5d1",
"colorPaletteMagentaBorderActive": "#bf0077",
"colorPaletteMagentaForeground2": "#6b0043",
"colorPaletteMarigoldBackground1": "#fefbf4",
"colorPaletteMarigoldBackground2": "#f9e2ae",
"colorPaletteMarigoldBackground3": "#eaa300",
"colorPaletteMarigoldBorder1": "#f9e2ae",
"colorPaletteMarigoldBorder2": "#eaa300",
"colorPaletteMarigoldBorderActive": "#eaa300",
"colorPaletteMarigoldForeground1": "#d39300",
"colorPaletteMarigoldForeground2": "#835b00",
"colorPaletteMarigoldForeground3": "#eaa300",
"colorPaletteMinkBackground2": "#cecccb",
"colorPaletteMinkBorderActive": "#5d5a58",
"colorPaletteMinkForeground2": "#343231",
"colorPaletteNavyBackground2": "#a3b2e8",
"colorPaletteNavyBorderActive": "#0027b4",
"colorPaletteNavyForeground2": "#001665",
"colorPalettePeachBackground2": "#ffddb3",
"colorPalettePeachBorderActive": "#ff8c00",
"colorPalettePeachForeground2": "#8f4e00",
"colorPalettePinkBackground2": "#f7c0e3",
"colorPalettePinkBorderActive": "#e43ba6",
"colorPalettePinkForeground2": "#80215d",
"colorPalettePlatinumBackground2": "#cdd6d8",
"colorPalettePlatinumBorderActive": "#69797e",
"colorPalettePlatinumForeground2": "#3b4447",
"colorPalettePlumBackground2": "#d696c0",
"colorPalettePlumBorderActive": "#77004d",
"colorPalettePlumForeground2": "#43002b",
"colorPalettePumpkinBackground2": "#efc4ad",
"colorPalettePumpkinBorderActive": "#ca5010",
"colorPalettePumpkinForeground2": "#712d09",
"colorPalettePurpleBackground2": "#c6b1de",
"colorPalettePurpleBorderActive": "#5c2e91",
"colorPalettePurpleForeground2": "#341a51",
"colorPaletteRedBackground1": "#fdf6f6",
"colorPaletteRedBackground2": "#f1bbbc",
"colorPaletteRedBackground3": "#d13438",
"colorPaletteRedBorder1": "#f1bbbc",
"colorPaletteRedBorder2": "#d13438",
"colorPaletteRedBorderActive": "#d13438",
"colorPaletteRedForeground1": "#bc2f32",
"colorPaletteRedForeground2": "#751d1f",
"colorPaletteRedForeground3": "#d13438",
"colorPaletteRedForegroundInverted": "#dc5e62",
"colorPaletteRoyalBlueBackground2": "#9abfdc",
"colorPaletteRoyalBlueBorderActive": "#004e8c",
"colorPaletteRoyalBlueForeground2": "#002c4e",
"colorPaletteSeafoamBackground2": "#a8f0cd",
"colorPaletteSeafoamBorderActive": "#00cc6a",
"colorPaletteSeafoamForeground2": "#00723b",
"colorPaletteSteelBackground2": "#94c8d4",
"colorPaletteSteelBorderActive": "#005b70",
"colorPaletteSteelForeground2": "#00333f",
"colorPaletteTealBackground2": "#9bd9db",
"colorPaletteTealBorderActive": "#038387",
"colorPaletteTealForeground2": "#02494c",
"colorPaletteYellowBackground1": "#fffef5",
"colorPaletteYellowBackground2": "#fef7b2",
"colorPaletteYellowBackground3": "#fde300",
"colorPaletteYellowBorder1": "#fef7b2",
"colorPaletteYellowBorder2": "#fde300",
"colorPaletteYellowBorderActive": "#fde300",
"colorPaletteYellowForeground1": "#817400",
"colorPaletteYellowForeground2": "#817400",
"colorPaletteYellowForeground3": "#fde300",
"colorPaletteYellowForegroundInverted": "#fef7b2",
"colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)",
"colorStatusDangerBackground1": "#fdf3f4",
"colorStatusDangerBackground2": "#eeacb2",
"colorStatusDangerBackground3": "#c50f1f",
"colorStatusDangerBorder1": "#eeacb2",
"colorStatusDangerBorder2": "#c50f1f",
"colorStatusDangerBorderActive": "#c50f1f",
"colorStatusDangerForeground1": "#b10e1c",
"colorStatusDangerForeground2": "#6e0811",
"colorStatusDangerForeground3": "#c50f1f",
"colorStatusDangerForegroundInverted": "#dc626d",
"colorStatusSuccessBackground1": "#f1faf1",
"colorStatusSuccessBackground2": "#9fd89f",
"colorStatusSuccessBackground3": "#107c10",
"colorStatusSuccessBorder1": "#9fd89f",
"colorStatusSuccessBorder2": "#107c10",
"colorStatusSuccessBorderActive": "#107c10",
"colorStatusSuccessForeground1": "#0e700e",
"colorStatusSuccessForeground2": "#094509",
"colorStatusSuccessForeground3": "#107c10",
"colorStatusSuccessForegroundInverted": "#54b054",
"colorStatusWarningBackground1": "#fff9f5",
"colorStatusWarningBackground2": "#fdcfb4",
"colorStatusWarningBackground3": "#f7630c",
"colorStatusWarningBorder1": "#fdcfb4",
"colorStatusWarningBorder2": "#bc4b09",
"colorStatusWarningBorderActive": "#f7630c",
"colorStatusWarningForeground1": "#bc4b09",
"colorStatusWarningForeground2": "#8a3707",
"colorStatusWarningForeground3": "#bc4b09",
"colorStatusWarningForegroundInverted": "#faa06b",
"colorStrokeFocus1": "#ffffff",
"colorStrokeFocus2": "#000000",
"colorSubtleBackground": "transparent",
"colorSubtleBackgroundHover": "#f5f5f5",
"colorSubtleBackgroundInverted": "transparent",
"colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)",
"colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)",
"colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)",
"colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)",
"colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)",
"colorSubtleBackgroundLightAlphaSelected": "transparent",
"colorSubtleBackgroundPressed": "#e0e0e0",
"colorSubtleBackgroundSelected": "#ebebeb",
"colorTransparentBackground": "transparent",
"colorTransparentBackgroundHover": "transparent",
"colorTransparentBackgroundPressed": "transparent",
"colorTransparentBackgroundSelected": "transparent",
"colorTransparentStroke": "transparent",
"colorTransparentStrokeDisabled": "transparent",
"colorTransparentStrokeInteractive": "transparent",
"curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)",
"curveAccelerateMid": "cubic-bezier(1,0,1,1)",
"curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)",
"curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)",
"curveDecelerateMid": "cubic-bezier(0,0,0,1)",
"curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)",
"curveEasyEase": "cubic-bezier(0.33,0,0.67,1)",
"curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)",
"curveLinear": "cubic-bezier(0,0,1,1)",
"durationFast": "150ms",
"durationFaster": "100ms",
"durationGentle": "250ms",
"durationNormal": "200ms",
"durationSlow": "300ms",
"durationSlower": "400ms",
"durationUltraFast": "50ms",
"durationUltraSlow": "500ms",
"fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
"fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace",
"fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif",
"fontSizeBase100": "10px",
"fontSizeBase200": "12px",
"fontSizeBase300": "14px",
"fontSizeBase400": "16px",
"fontSizeBase500": "20px",
"fontSizeBase600": "24px",
"fontSizeHero1000": "68px",
"fontSizeHero700": "28px",
"fontSizeHero800": "32px",
"fontSizeHero900": "40px",
"fontWeightBold": 700,
"fontWeightMedium": 500,
"fontWeightRegular": 400,
"fontWeightSemibold": 600,
"lineHeightBase100": "14px",
"lineHeightBase200": "16px",
"lineHeightBase300": "20px",
"lineHeightBase400": "22px",
"lineHeightBase500": "28px",
"lineHeightBase600": "32px",
"lineHeightHero1000": "92px",
"lineHeightHero700": "36px",
"lineHeightHero800": "40px",
"lineHeightHero900": "52px",
"shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)",
"shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)",
"shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)",
"shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)",
"shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)",
"shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)",
"shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)",
"shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)",
"shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)",
"shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)",
"shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)",
"shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)",
"spacingHorizontalL": "16px",
"spacingHorizontalM": "12px",
"spacingHorizontalMNudge": "10px",
"spacingHorizontalNone": "0",
"spacingHorizontalS": "8px",
"spacingHorizontalSNudge": "6px",
"spacingHorizontalXL": "20px",
"spacingHorizontalXS": "4px",
"spacingHorizontalXXL": "24px",
"spacingHorizontalXXS": "2px",
"spacingHorizontalXXXL": "32px",
"spacingVerticalL": "16px",
"spacingVerticalM": "12px",
"spacingVerticalMNudge": "10px",
"spacingVerticalNone": "0",
"spacingVerticalS": "8px",
"spacingVerticalSNudge": "6px",
"spacingVerticalXL": "20px",
"spacingVerticalXS": "4px",
"spacingVerticalXXL": "24px",
"spacingVerticalXXS": "2px",
"spacingVerticalXXXL": "32px",
"strokeWidthThick": "2px",
"strokeWidthThicker": "3px",
"strokeWidthThickest": "4px",
"strokeWidthThin": "1px",
}
}
<CosmosFluentProvider
className="___1wp8swp_0000000 f1l02sjl"
>
<div
className="tab-pane active documentsTab"
className="tab-pane active"
role="tabpanel"
style={
Object {
{
"display": "flex",
}
}
>
<div
className="filterdivs"
className="___11ktxfv_0000000 f1o614cb fy9rknc f22iagw fsnqrgy f1f5gg8d fjodcmx f122n59 f1f09k3d fg706s2 frpde29"
>
<div
className="filterDocCollapsed"
<span>
SELECT * FROM c
</span>
<span
className="___r7kt3y0_0000000 fqerorx"
/>
<Button
appearance="primary"
onClick={[Function]}
size="small"
>
<span
className="selectQuery"
>
SELECT * FROM c
</span>
<span
className="appliedQuery"
/>
<Button
appearance="primary"
onClick={[Function]}
style={
Object {
"marginLeft": 8,
}
}
>
Edit Filter
</Button>
</div>
Edit Filter
</Button>
</div>
<div
style={
Object {
{
"height": "100%",
"overflow": "hidden",
}
}
>
<Split
mode="horizontal"
onDragEnd={[Function]}
prefixCls="w-split"
visiable={true}
>
<div
style={
Object {
"minWidth": 60,
"overflow": "hidden",
"position": "relative",
"width": "50%",
}
}
<Allotment>
<Allotment.Pane
minSize={175}
preferredSize="35%"
>
<Button
appearance="transparent"
aria-label="Refresh"
icon={<ArrowClockwise16Filled />}
onClick={[Function]}
onKeyDown={[Function]}
size="small"
style={
Object {
"backgroundColor": "white",
"color": undefined,
"float": "right",
"position": "absolute",
"right": 0,
"top": 6,
"zIndex": 1,
}
}
/>
<div
style={
Object {
{
"height": "100%",
"width": "calc(100% - 50px)",
"overflow": "hidden",
"width": "100%",
}
}
>
<DocumentsTableComponent
columnsDefinition={
Array [
Object {
"id": "id",
"label": "id",
},
]
}
isSelectionDisabled={true}
items={Array []}
onItemClicked={[Function]}
onSelectedRowsChange={[Function]}
selectedRows={
Set {
0,
<div
className="___77lcry0_0000000 f10pi13n"
>
<div
className="___1rwkz4r_0000000 f1euv43f f1l8gmrm f1e31b4d f150nix6 fy6ml6n f19g0ac"
>
<Button
appearance="transparent"
aria-label="Refresh"
icon={<ArrowClockwise16Filled />}
onClick={[Function]}
onKeyDown={[Function]}
size="small"
style={
{
"color": undefined,
}
}
/>
</div>
</div>
<div
className="___9o87uj0_0000000 ffefeo0"
>
<DocumentsTableComponent
columnHeaders={
{
"idHeader": "id",
"partitionKeyHeaders": [],
}
}
}
/>
isSelectionDisabled={true}
items={[]}
onItemClicked={[Function]}
onSelectedRowsChange={[Function]}
selectedRows={
Set {
0,
}
}
/>
</div>
</div>
</div>
<div
style={
Object {
"minWidth": 60,
"width": "50%",
</Allotment.Pane>
<Allotment.Pane
minSize={300}
preferredSize="65%"
>
<div
style={
{
"height": "100%",
"width": "100%",
}
}
}
/>
</Split>
/>
</Allotment.Pane>
</Allotment>
</div>
</div>
</FluentProvider>
</CosmosFluentProvider>
`;

642
src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

2
src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx
View File

@@ -132,7 +132,7 @@ export default class MongoShellTabComponent extends Component<
data: {
resourceId: resourceId,
accountName: accountName,
mongoEndpoint: mongoEndpoint,
mongoEndpoint: this._useMongoProxyEndpoint ? documentEndpoint : mongoEndpoint,
authorization: authorization,
databaseId: databaseId,
collectionId: collectionId,

24
src/Explorer/Tabs/QueryTablesTab.html
View File

@@ -9,7 +9,7 @@
<!-- Tables Query Tab Errors - Start-->
<div class="error-bar">
<div class="error-message" aria-label="Error Message" data-bind="visible: hasQueryError">
<span><img class="entity-error-Img" src="/error_red.svg" /></span>
<span><img class="entity-error-Img" src="../../../images/error_red.svg" /></span>
<span class="error-text" role="alert" data-bind="text: queryErrorMessage"></span>
</div>
</div>
@@ -45,7 +45,7 @@
type="button"
data-bind="enable: canGroupClauses, attr:{title: groupSelectedClauses}, click: groupClauses"
>
<img class="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
<img class="and-or-svg" src="../../../images/And-Or.svg" alt="Group selected clauses" />
</button>
</th>
<th class="clause-table-cell header-background">
@@ -81,7 +81,7 @@
<img
class="addclauseProperty-Img"
style="margin-bottom: 5px"
src="/Add-property.svg"
src="../../../images/Add-property.svg"
alt="Add new Clause"
/>
<span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
@@ -103,12 +103,16 @@
>
<!-- ko template: { ifnot: isExpanded} -->
<div class="themed-images" type="text/html" id="ExpandChevronRight" data-bind="hasFocus: focusExpandIcon">
<img class="imgiconwidth expand-triangle expand-triangle-right" src="/Triangle-right.svg" alt="toggle" />
<img
class="imgiconwidth expand-triangle expand-triangle-right"
src="../../../images/Triangle-right.svg"
alt="toggle"
/>
</div>
<!-- /ko -->
<!-- ko template: { if: isExpanded} -->
<div class="themed-images" type="text/html" id="ExpandChevronDown">
<img class="imgiconwidth expand-triangle" src="/Triangle-down.svg" alt="toggle" />
<img class="imgiconwidth expand-triangle" src="../../../images/Triangle-down.svg" alt="toggle" />
</div>
<!-- /ko -->
<span>Advanced Options</span>
@@ -127,7 +131,7 @@
<div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
<img
class="advanced-options-icon"
src="/QueryBuilder/StatusWarning_16x.png"
src="../../../images/QueryBuilder/StatusWarning_16x.png"
alt="Warning"
role="presentation"
/>
@@ -137,7 +141,7 @@
<div class="select">
<span> Select fields for query: </span>
<div data-bind="visible: isSelected">
<img class="advanced-options-icon" src="/QueryBuilder/QueryInformation_16x.png" />
<img class="advanced-options-icon" src="../../../images/QueryBuilder/QueryInformation_16x.png" />
<span class="select-options-text" data-bind="text: selectMessage" />
</div>
<a
@@ -179,14 +183,14 @@
data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
>
<span class="entity-Add-Cancel" role="button">
<img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
<img class="querybuilder-addpropertyImg" src="../../../images/Add-property.svg" alt="Add clause" />
</span>
</button>
<button
data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
>
<span class="entity-Add-Cancel" role="button">
<img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
<img class="querybuilder-cancelImg" src="../../../images/Entity_cancel.svg" alt="Delete clause" />
</span>
</button>
</td>
@@ -271,7 +275,7 @@
>
<!-- ko template: {if: gi.canUngroup} -->
<button type="button" data-bind="click: ungroupClauses, attr: {title: ungroupClausesLabel}">
<img src="/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses" />
<img src="../../../images/QueryBuilder/UngroupClause_16x.png" alt="Ungroup clauses" />
</button>
<!-- /ko -->
</td>

Some files were not shown because too many files have changed in this diff Show More