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

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.npmrc
View File

@ -1 +1,4 @@
save-exact=true
save-exact=true
# Ignore peer dependency conflicts
force=true # TODO: Remove this when we update to React 17 or higher!

7
canvas/README.md
View File

@ -1,7 +0,0 @@
# Why?
This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved

1
canvas/index.js
View File

@ -1 +0,0 @@
module.exports = {}

11
canvas/package.json
View File

@ -1,11 +0,0 @@
{
"name": "canvas",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

9
images/EntraID.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
<path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
<polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
<path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
<path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
<polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

12
jest.config.js
View File

@ -80,6 +80,7 @@ module.exports = {
"d3-quadtree": "<rootDir>/node_modules/d3-quadtree/dist/d3-quadtree.min.js",
"d3-scale-chromatic": "<rootDir>/node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js",
"d3-zoom": "<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js",
uuid: require.resolve("uuid"), // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@ -133,7 +134,7 @@ module.exports = {
snapshotSerializers: ["enzyme-to-json/serializer"],
// The test environment that will be used for testing
// testEnvironment: "jest-environment-jsdom",
testEnvironment: "jsdom",
modulePaths: ["node_modules", "<rootDir>/src"],
// Options that will be passed to the testEnvironment
@ -157,7 +158,7 @@ module.exports = {
// testResultsProcessor: "./trxProcessor.js",
// This option allows use of a custom test runner
// testRunner: "jasmine2",
testRunner: "jest-circus/runner",
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
// testURL: "http://localhost",
@ -167,9 +168,9 @@ module.exports = {
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html?$": "html-loader-jest",
"^.+\\.html?$": "jest-html-loader",
"^.+\\.[t|j]sx?$": "babel-jest",
"^.+\\.svg$": "<rootDir>/svgTransform.js",
"^.+\\.svg$": "<rootDir>/jest/svgTransform.js",
},
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
@ -186,4 +187,7 @@ module.exports = {
// Whether to use watchman for file crawling
// watchman: true,
// TODO: toMatchInlineSnapshot() does not work with prettier 3. Remove when fixed: https://github.com/jestjs/jest/issues/14305
prettierPath: null,
};

0
svgTransform.js → jest/svgTransform.js
View File

2
less/Common/Constants.less
View File

@ -168,7 +168,7 @@
@FabricBoxBorderRadius: 8px;
@FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
@FabricBoxMargin: 4px 3px 4px 3px;
@FabricBoxMargin: 4px 8px 4px 8px;
@FabricAccentMediumHigh: #0c695a;
@FabricAccentMedium: #117865;

35
less/documentDB.less
View File

@ -1906,7 +1906,7 @@ input::-webkit-calendar-picker-indicator::after {
}
.nav-tabs-margin {
padding-top: 8px;
padding-top: 5px;
background-color: #f2f2f2;
}
@ -2074,14 +2074,6 @@ a:link {
display: inline;
}
.resourceTreeAndTabs {
display: flex;
flex: 1 1 auto;
overflow-x: clip;
overflow-y: auto;
height: 100%;
}
.collectiontitle {
font-size: 14px;
text-transform: uppercase;
@ -2325,11 +2317,6 @@ td a:hover {
outline: 1px dotted;
}
#content.active .tabdocuments .scrollable {
height: 100%;
overflow-y: auto;
}
.table-fixed thead {
width: 97%;
padding-left: 18px;
@ -2365,10 +2352,9 @@ a:link {
.tabsManagerContainer {
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 300px;
display: grid;
grid-template-rows: 36px 36px 1fr;
min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
}
.tabs {
@ -2579,18 +2565,6 @@ a:link {
cursor: pointer;
}
.documentsTab {
.documentsTable {
.documentsTableCell {
border-left: 1px solid @BaseMedium;
height: 100%;
}
.documentsTableHeader {
border-bottom: 1px solid @BaseMedium;
}
}
}
.querydropdown {
border: 1px solid @BaseMedium;
font-style: normal;
@ -2636,6 +2610,7 @@ a:link {
}
.tabPanesContainer {
grid-row: span 2; // Fill the remaining space
display: flex;
height: 100%;
overflow: hidden;

2
less/documentDBFabric.less
View File

@ -38,7 +38,7 @@ a:focus {
}
.nav-tabs-margin {
padding-top: 8px;
padding-top: 5px;
background-color: #ffffff
}

13
less/resourceTree.less
View File

@ -3,19 +3,6 @@
.dataResourceTree {
margin-left: @MediumSpace;
overflow: auto;
.databaseHeader {
padding: 1px;
font-size: 14px;
}
.collectionHeader {
font-size: 12px;
}
.loadMoreHeader {
color: RGB(5, 99, 193);
}
}
.notebookResourceTree {

18679
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

48
package.json
View File

@ -12,14 +12,14 @@
"@azure/msal-browser": "2.14.2",
"@babel/plugin-proposal-class-properties": "7.12.1",
"@babel/plugin-proposal-decorators": "7.12.12",
"@fluentui/react": "8.112.1",
"@fluentui/react": "8.119.0",
"@fluentui/react-components": "9.54.2",
"@jupyterlab/services": "6.0.2",
"@jupyterlab/terminal": "3.0.3",
"@microsoft/applicationinsights-web": "2.6.1",
"@nteract/commutable": "7.5.1",
"@nteract/connected-components": "6.8.2",
"@nteract/core": "15.1.0",
"@nteract/core": "15.1.9",
"@nteract/data-explorer": "8.0.3",
"@nteract/directory-listing": "2.0.6",
"@nteract/dropdown-menu": "1.0.1",
@ -42,15 +42,15 @@
"@nteract/transform-vega": "7.0.6",
"@octokit/rest": "17.9.2",
"@phosphor/widgets": "1.9.3",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/jest-dom": "6.4.6",
"@types/lodash": "4.14.171",
"@types/mkdirp": "1.0.1",
"@types/node-fetch": "2.5.7",
"@uiw/react-split": "5.9.3",
"@xmldom/xmldom": "0.7.13",
"allotment": "1.20.2",
"applicationinsights": "1.8.0",
"bootstrap": "3.4.1",
"canvas": "file:./canvas",
"canvas": "2.11.2",
"clean-webpack-plugin": "4.0.0",
"clipboard-copy": "4.0.1",
"copy-webpack-plugin": "11.0.0",
@ -67,7 +67,7 @@
"eslint-plugin-react": "7.33.2",
"hasher": "1.2.0",
"html2canvas": "1.0.0-rc.5",
"i18next": "19.8.4",
"i18next": "23.11.5",
"i18next-browser-languagedetector": "6.0.1",
"i18next-http-backend": "1.0.23",
"iframe-resizer-react": "1.1.0",
@ -93,13 +93,13 @@
"react-dnd-html5-backend": "14.0.0",
"react-dom": "16.14.0",
"react-hotkeys": "2.0.0",
"react-i18next": "11.8.5",
"react-i18next": "14.1.2",
"react-notification-system": "0.2.17",
"react-redux": "7.1.3",
"react-splitter-layout": "4.0.0",
"react-string-format": "1.0.1",
"react-youtube": "9.0.1",
"react-window": "1.8.10",
"react-youtube": "9.0.1",
"reflect-metadata": "0.1.13",
"rx-jupyter": "5.5.12",
"sanitize-html": "2.3.3",
@ -113,10 +113,10 @@
"zustand": "3.5.0"
},
"devDependencies": {
"@babel/core": "7.9.0",
"@babel/preset-env": "7.9.0",
"@babel/preset-react": "7.9.4",
"@babel/preset-typescript": "7.9.0",
"@babel/core": "7.24.7",
"@babel/preset-env": "7.24.7",
"@babel/preset-react": "7.24.7",
"@babel/preset-typescript": "7.24.7",
"@playwright/test": "1.44.0",
"@testing-library/react": "11.2.3",
"@types/applicationinsights-js": "1.0.7",
@ -129,13 +129,13 @@
"@types/enzyme": "3.10.12",
"@types/enzyme-adapter-react-16": "1.0.9",
"@types/hasher": "0.0.31",
"@types/jest": "26.0.20",
"@types/jest": "29.5.12",
"@types/jquery": "3.5.29",
"@types/node": "12.11.1",
"@types/post-robot": "10.0.1",
"@types/q": "1.5.1",
"@types/react": "17.0.3",
"@types/react-dom": "17.0.3",
"@types/react": "17.0.44",
"@types/react-dom": "17.0.15",
"@types/react-notification-system": "0.2.39",
"@types/react-redux": "7.1.7",
"@types/react-splitter-layout": "3.0.1",
@ -148,7 +148,7 @@
"@typescript-eslint/eslint-plugin": "6.7.4",
"@typescript-eslint/parser": "6.7.4",
"@webpack-cli/serve": "2.0.5",
"babel-jest": "24.9.0",
"babel-jest": "29.7.0",
"babel-loader": "8.1.0",
"buffer": "5.1.0",
"case-sensitive-paths-webpack-plugin": "2.4.0",
@ -165,13 +165,15 @@
"fast-glob": "3.2.5",
"fs-extra": "7.0.0",
"html-inline-css-webpack-plugin": "1.11.2",
"html-loader": "0.5.5",
"html-loader-jest": "0.2.1",
"html-loader": "5.0.0",
"html-webpack-plugin": "5.5.3",
"jest": "26.6.3",
"jest-canvas-mock": "2.3.1",
"jest": "29.7.0",
"jest-canvas-mock": "2.5.2",
"jest-circus": "29.7.0",
"jest-html-loader": "1.0.0",
"jest-react-hooks-shallow": "1.5.1",
"jest-trx-results-processor": "0.0.7",
"jest-trx-results-processor": "3.0.2",
"jest-environment-jsdom": "29.7.0",
"less": "3.8.1",
"less-loader": "11.1.3",
"less-vars-loader": "1.1.0",
@ -187,8 +189,8 @@
"sinon": "3.2.1",
"style-loader": "0.23.0",
"ts-loader": "9.2.4",
"typedoc": "0.22.15",
"typescript": "4.3.5",
"typedoc": "0.26.2",
"typescript": "4.9.5",
"url-loader": "4.1.1",
"wait-on": "4.0.2",
"webpack": "5.88.2",

13
patches/@phosphor+virtualdom+1.2.0.patch Normal file
View File

@ -0,0 +1,13 @@
diff --git a/node_modules/@phosphor/virtualdom/lib/index.d.ts b/node_modules/@phosphor/virtualdom/lib/index.d.ts
index 95682b9..73e2daa 100644
--- a/node_modules/@phosphor/virtualdom/lib/index.d.ts
+++ b/node_modules/@phosphor/virtualdom/lib/index.d.ts
@@ -58,7 +58,7 @@ export declare type ElementEventMap = {
ondrop: DragEvent;
ondurationchange: Event;
onemptied: Event;
- onended: MediaStreamErrorEvent;
+ onended: ErrorEvent;
onerror: ErrorEvent;
onfocus: FocusEvent;
oninput: Event;

11
patches/@uiw+react-split+5.9.3.patch
View File

@ -1,11 +0,0 @@
diff --git a/node_modules/@uiw/react-split/cjs/index.d.ts b/node_modules/@uiw/react-split/cjs/index.d.ts
index 644bcc3..f794760 100644
--- a/node_modules/@uiw/react-split/cjs/index.d.ts
+++ b/node_modules/@uiw/react-split/cjs/index.d.ts
@@ -56,5 +56,5 @@ export default class Split extends React.Component<SplitProps, SplitState> {
onMouseDown(paneNumber: number, env: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
onDragging(env: Event): void;
onDragEnd(): void;
- render(): import("react/jsx-runtime").JSX.Element;
+ render(): JSX.Element;
}

41
playwright.config.ts
View File

@ -1,22 +1,22 @@
import { defineConfig, devices } from '@playwright/test';
import { defineConfig, devices } from "@playwright/test";
/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: 'test',
testDir: "test",
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 3 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: process.env.CI ? 'blob' : 'html',
reporter: process.env.CI ? "blob" : "html",
timeout: 10 * 60 * 1000,
use: {
actionTimeout: 5 * 60 * 1000,
trace: 'off',
video: 'off',
screenshot: 'on',
testIdAttribute: 'data-test',
trace: "off",
video: "off",
screenshot: "on",
testIdAttribute: "data-test",
contextOptions: {
ignoreHTTPSErrors: true,
},
@ -28,24 +28,31 @@ export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
name: "firefox",
use: { ...devices["Desktop Firefox"] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
name: "webkit",
use: { ...devices["Desktop Safari"] },
},
/* Test against branded browsers. */
{
name: "Google Chrome",
use: { ...devices["Desktop Chrome"], channel: "chrome" }, // or 'chrome-beta'
},
{
name: "Microsoft Edge",
use: { ...devices["Desktop Edge"], channel: "msedge" }, // or 'msedge-dev'
},
],
webServer: {
command: 'npm run start',
url: 'https://127.0.0.1:1234/_ready',
command: "npm run start",
url: "https://127.0.0.1:1234/_ready",
timeout: 120 * 1000,
ignoreHTTPSErrors: true,
reuseExistingServer: !process.env.CI,

55
src/Common/CollapsedResourceTree.tsx
View File

@ -1,55 +0,0 @@
import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
import arrowLeftImg from "../../images/imgarrowlefticon.svg";
import { getApiShortDisplayName } from "../Utils/APITypeUtils";
import { NormalizedEventKey } from "./Constants";
export interface CollapsedResourceTreeProps {
toggleLeftPaneExpanded: () => void;
isLeftPaneExpanded: boolean;
}
export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
toggleLeftPaneExpanded,
isLeftPaneExpanded,
}: CollapsedResourceTreeProps): JSX.Element => {
const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
useEffect(() => {
if (focusButton.current) {
focusButton.current.focus();
}
});
const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
toggleLeftPaneExpanded();
event.stopPropagation();
}
};
return (
<div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
<div className="main-nav nav">
<ul className="nav">
<li
className="resourceTreeCollapse"
id="collapseToggleLeftPaneButton"
role="button"
tabIndex={0}
aria-label={getApiShortDisplayName() + `Expand tree`}
onClick={toggleLeftPaneExpanded}
onKeyPress={onKeyPressToggleLeftPaneExpanded}
ref={focusButton}
>
<span className="leftarrowCollapsed">
<img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
</span>
<span className="collectionCollapsed">
<span>{getApiShortDisplayName()}</span>
</span>
</li>
</ul>
</div>
</div>
);
};

7
src/Common/Constants.ts
View File

@ -133,6 +133,7 @@ export enum MongoBackendEndpointType {
export class BackendApi {
public static readonly GenerateToken: string = "GenerateToken";
public static readonly PortalSettings: string = "PortalSettings";
public static readonly AccountRestrictions: string = "AccountRestrictions";
}
export class PortalBackendEndpoints {
@ -196,6 +197,12 @@ export class Queries {
public static readonly DefaultMaxWaitTimeInSeconds = 30;
}
export class RBACOptions {
public static setAutomaticRBACOption: string = "Automatic";
public static setTrueRBACOption: string = "True";
public static setFalseRBACOption: string = "False";
}
export class SavedQueries {
public static readonly CollectionName: string = "___Query";
public static readonly DatabaseName: string = "___Cosmos";

43
src/Common/CosmosClient.test.ts
View File

@ -1,47 +1,6 @@
import { ResourceType } from "@azure/cosmos";
import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
import { updateUserContext } from "../UserContext";
import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
describe("tokenProvider", () => {
const options = {
verb: "GET" as any,
path: "/",
resourceId: "",
resourceType: "dbs" as ResourceType,
headers: {},
getAuthorizationTokenUsingMasterKey: () => "",
};
beforeEach(() => {
updateConfigContext({
BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
});
window.fetch = jest.fn().mockImplementation(() => {
return {
json: () => "{}",
headers: new Map(),
};
});
});
afterEach(() => {
jest.restoreAllMocks();
});
it("calls the auth token service if no master key is set", async () => {
await tokenProvider(options);
expect((window.fetch as any).mock.calls.length).toBe(1);
});
it("does not call the auth service if a master key is set", async () => {
updateUserContext({
masterKey: "foo",
});
await tokenProvider(options);
expect((window.fetch as any).mock.calls.length).toBe(0);
});
});
import { endpoint, getTokenFromAuthService, requestPlugin } from "./CosmosClient";
describe("getTokenFromAuthService", () => {
beforeEach(() => {

32
src/Common/CosmosClient.ts
View File

@ -11,13 +11,25 @@ import { logConsoleError } from "../Utils/NotificationConsoleUtils";
import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
import { EmulatorMasterKey, HttpHeaders } from "./Constants";
import { getErrorMessage } from "./ErrorHandlingUtils";
import * as Logger from "../Common/Logger";
const _global = typeof self === "undefined" ? window : self;
export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
const { verb, resourceId, resourceType, headers } = requestInfo;
if (userContext.features.enableAadDataPlane && userContext.aadToken) {
const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
Logger.logInfo(
`AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,
"Explorer/tokenProvider",
);
if (!userContext.aadToken) {
logConsoleError(
`AAD token does not exist. Please click on "Login for Entra ID" button prior to performing Entra ID RBAC operations`,
);
return null;
}
const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
return authorizationToken;
@ -71,8 +83,15 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
}
if (userContext.masterKey) {
Logger.logInfo(`Master Key exists`, "Explorer/tokenProvider");
// TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
verb,
resourceId,
resourceType,
headers,
userContext.masterKey,
);
return decodeURIComponent(headers.authorization);
}
@ -137,8 +156,11 @@ enum SDKSupportedCapabilities {
let _client: Cosmos.CosmosClient;
export function client(): Cosmos.CosmosClient {
if (_client) return _client;
if (_client) {
if (!userContext.hasDataPlaneRbacSettingChanged) {
return _client;
}
}
let _defaultHeaders: Cosmos.CosmosHeaders = {};
_defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
@ -157,7 +179,7 @@ export function client(): Cosmos.CosmosClient {
const options: Cosmos.CosmosClientOptions = {
endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
key: userContext.masterKey,
key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
tokenProvider,
userAgentSuffix: "Azure Portal",
defaultHeaders: _defaultHeaders,

13
src/Common/MessageHandler.ts
View File

@ -1,6 +1,7 @@
import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
import Q from "q";
import * as _ from "underscore";
import * as Logger from "../Common/Logger";
import { MessageTypes } from "../Contracts/ExplorerContracts";
import { getDataExplorerWindow } from "../Utils/WindowUtils";
import * as Constants from "./Constants";
@ -96,10 +97,18 @@ const _sendMessage = (message: any): void => {
const portalChildWindow = getDataExplorerWindow(window) || window;
if (portalChildWindow === window) {
// Current window is a child of portal, send message to portal window
portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
if (portalChildWindow.document.referrer) {
portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer);
} else {
Logger.logError("Iframe failed to send message to portal", "MessageHandler");
}
} else {
// Current window is not a child of portal, send message to the child window instead (which is data explorer)
portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
if (portalChildWindow.location.origin) {
portalChildWindow.postMessage(message, portalChildWindow.location.origin);
} else {
Logger.logError("Iframe failed to send message to data explorer", "MessageHandler");
}
}
}
};

82
src/Common/ResourceTreeContainer.tsx
View File

@ -1,82 +0,0 @@
import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
import arrowLeftImg from "../../images/imgarrowlefticon.svg";
import refreshImg from "../../images/refresh-cosmos.svg";
import Explorer from "../Explorer/Explorer";
import { ResourceTree } from "../Explorer/Tree/ResourceTree";
import { userContext } from "../UserContext";
import { getApiShortDisplayName } from "../Utils/APITypeUtils";
import { NormalizedEventKey } from "./Constants";
export interface ResourceTreeContainerProps {
toggleLeftPaneExpanded: () => void;
isLeftPaneExpanded: boolean;
container: Explorer;
}
export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
toggleLeftPaneExpanded,
isLeftPaneExpanded,
container,
}: ResourceTreeContainerProps): JSX.Element => {
const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
useEffect(() => {
if (isLeftPaneExpanded) {
if (focusButton.current) {
focusButton.current.focus();
}
}
});
const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
toggleLeftPaneExpanded();
event.stopPropagation();
}
};
return (
<div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
{/* Collections Window - - Start */}
<div id="mainslide" className="flexContainer">
{/* Collections Window Title/Command Bar - Start */}
<div className="collectiontitle">
<div className="coltitle">
<span className="titlepadcol">{getApiShortDisplayName()}</span>
<div className="float-right">
<span
className="padimgcolrefresh"
data-test="refreshTree"
role="button"
data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
tabIndex={0}
aria-label={getApiShortDisplayName() + `Refresh tree`}
title="Refresh tree"
>
<img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
</span>
<span
className="padimgcolrefresh1"
id="expandToggleLeftPaneButton"
role="button"
onClick={toggleLeftPaneExpanded}
onKeyPress={onKeyPressToggleLeftPaneExpanded}
tabIndex={0}
aria-label={getApiShortDisplayName() + `Collapse Tree`}
title="Collapse Tree"
ref={focusButton}
>
<img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
</span>
</div>
</div>
</div>
{userContext.features.enableKoResourceTree ? (
<div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
) : (
<ResourceTree container={container} />
)}
</div>
{/* Collections Window - End */}
</div>
);
};

8
src/Common/__snapshots__/CosmosClient.test.ts.snap
View File

@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
Object {
{
"endpoint": "http://localhost/proxy",
"headers": Object {
"headers": {
"x-ms-proxy-target": "http://localhost",
},
"path": "/dbs/foo",
@ -11,9 +11,9 @@ Object {
`;
exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
Object {
{
"endpoint": "http://localhost/proxy",
"headers": Object {
"headers": {
"x-ms-proxy-target": "baz",
},
"path": "/dbs/foo",

6
src/Common/__snapshots__/IteratorUtilities.test.ts.snap
View File

@ -1,12 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`nextPage returns results for the next page 1`] = `
Object {
{
"activityId": "foo",
"documents": Array [],
"documents": [],
"firstItemIndex": 11,
"hasMoreResults": false,
"headers": Object {},
"headers": {},
"itemCount": 0,
"lastItemIndex": 10,
"requestCharge": 1,

4
src/Common/dataAccess/__snapshots__/queryDocuments.test.ts.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
Object {
{
"disableNonStreamingOrderByQuery": true,
"enableScanInQuery": true,
"forceQueryPlan": true,
@ -12,7 +12,7 @@ Object {
`;
exports[`getCommonQueryOptions reads from localStorage 1`] = `
Object {
{
"disableNonStreamingOrderByQuery": true,
"enableScanInQuery": true,
"forceQueryPlan": true,

1
src/Common/dataAccess/createCollection.ts
View File

@ -269,6 +269,7 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
indexingPolicy: params.indexingPolicy || undefined,
uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
analyticalStorageTtl: params.analyticalStorageTtl,
vectorEmbeddingPolicy: params.vectorEmbeddingPolicy,
} as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
const collectionOptions: RequestOptions = {};
const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

16
src/Common/dataAccess/createDatabase.ts
View File

@ -4,6 +4,7 @@ import * as DataModels from "../../Contracts/DataModels";
import { useDatabases } from "../../Explorer/useDatabases";
import { userContext } from "../../UserContext";
import { getDatabaseName } from "../../Utils/APITypeUtils";
import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
@ -15,7 +16,6 @@ import {
MongoDBDatabaseCreateUpdateParameters,
SqlDatabaseCreateUpdateParameters,
} from "../../Utils/arm/generatedClients/cosmos/types";
import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
import { client } from "../CosmosClient";
import { handleError } from "../ErrorHandlingUtils";
@ -152,8 +152,18 @@ async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): P
createBody.throughput = params.offerThroughput;
}
}
const response: DatabaseResponse = await client().databases.create(createBody);
let response: DatabaseResponse;
try {
response = await client().databases.create(createBody);
} catch (error) {
if (error.message.includes("Shared throughput database creation is not supported for serverless accounts")) {
createBody.maxThroughput = undefined;
createBody.throughput = undefined;
response = await client().databases.create(createBody);
} else {
throw error;
}
}
return response.resource;
}

3
src/Common/dataAccess/readCollection.ts
View File

@ -2,7 +2,6 @@ import { CosmosClient } from "@azure/cosmos";
import { sampleDataClient } from "Common/SampleDataClient";
import { userContext } from "UserContext";
import * as DataModels from "../../Contracts/DataModels";
import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
import { client } from "../CosmosClient";
import { handleError } from "../ErrorHandlingUtils";
@ -31,7 +30,6 @@ export async function readCollectionInternal(
collectionId: string,
): Promise<DataModels.Collection> {
let collection: DataModels.Collection;
const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
try {
const response = await cosmosClient.database(databaseId).container(collectionId).read();
collection = response.resource as DataModels.Collection;
@ -39,6 +37,5 @@ export async function readCollectionInternal(
handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
throw error;
}
clearMessage();
return collection;
}

16
src/ConfigContext.ts
View File

@ -109,14 +109,14 @@ let configContext: Readonly<ConfigContext> = {
PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
NEW_MONGO_APIS: [
"resourcelist",
"queryDocuments",
"createDocument",
"readDocument",
"updateDocument",
"deleteDocument",
"createCollectionWithProxy",
"legacyMongoShell",
// "resourcelist",
// "queryDocuments",
// "createDocument",
// "readDocument",
// "updateDocument",
// "deleteDocument",
// "createCollectionWithProxy",
// "legacyMongoShell",
],
MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,

3
src/Contracts/AzureResourceGraph.ts
View File

@ -1,7 +1,8 @@
export interface QueryRequestOptions {
$skipToken?: string;
$top?: number;
subscriptions: string[];
$allowPartialScopes: boolean;
subscriptions?: string[];
}
export interface QueryResponse {

12
src/Controls/Heatmap/Heatmap.test.ts
View File

@ -36,21 +36,21 @@ describe("The Heatmap Control", () => {
});
it("should call _getChartSettings when drawHeatmap is invoked", () => {
const _getChartSettings = spyOn<any>(heatmap, "_getChartSettings");
const _getChartSettings = jest.spyOn(heatmap, "_getChartSettings");
heatmap.drawHeatmap();
expect(_getChartSettings.calls.any()).toBe(true);
expect(_getChartSettings).toHaveBeenCalled();
});
it("should call _getLayoutSettings when drawHeatmap is invoked", () => {
const _getLayoutSettings = spyOn<any>(heatmap, "_getLayoutSettings");
const _getLayoutSettings = jest.spyOn(heatmap, "_getLayoutSettings");
heatmap.drawHeatmap();
expect(_getLayoutSettings.calls.any()).toBe(true);
expect(_getLayoutSettings).toHaveBeenCalled();
});
it("should call _getChartDisplaySettings when drawHeatmap is invoked", () => {
const _getChartDisplaySettings = spyOn<any>(heatmap, "_getChartDisplaySettings");
const _getChartDisplaySettings = jest.spyOn(heatmap, "_getChartDisplaySettings");
heatmap.drawHeatmap();
expect(_getChartDisplaySettings.calls.any()).toBe(true);
expect(_getChartDisplaySettings).toHaveBeenCalled();
});
it("drawHeatmap should render a Heatmap inside the div element", () => {

9
src/Controls/Heatmap/Heatmap.ts
View File

@ -96,7 +96,8 @@ export class Heatmap {
return output;
}
private _getChartSettings(): ChartSettings[] {
// public for testing purposes
public _getChartSettings(): ChartSettings[] {
return [
{
z: this._chartData.dataPoints,
@ -131,7 +132,8 @@ export class Heatmap {
];
}
private _getLayoutSettings(): LayoutSettings {
// public for testing purposes
public _getLayoutSettings(): LayoutSettings {
return {
margin: {
l: 40,
@ -177,7 +179,8 @@ export class Heatmap {
};
}
private _getChartDisplaySettings(): DisplaySettings {
// public for testing purposes
public _getChartDisplaySettings(): DisplaySettings {
return {
/* heatmap can be fully responsive however the min-height needed in that case is greater than the iframe portal height, hence explicit width + height have been set in _getLayoutSettings
responsive: true,*/

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,
}
}

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