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

Make Data Explorer work on node v18 (#1654) 

* Upgrade packages to enable npm i with node 18

* Fix crypto and querystring issue

* Fix webpack errors during npm start

* Upgrade monaco editor. Fix alias in webconfig

* Remove deprecated file-loader. Upgrade webpack to latest.

* Fix format

* Upgrade webpack, eslint and typescript

* Update p-retry and fluentui packages

* Revert monaco package upgrade

* Fix notebook compile errors

* Fix lint errors

* Update jest snapshots

* Fix unit tests

* Update node version to 18

* Fix compile error

* Fix compile error

* Fix format

* Turn off warning overlay for webpack devServer

* Fix format

* Re-add monaco webpack plugin and upgrade monaco-editor

* Update package-lock.json

* Fix build issue

* Move MonacoWebpackPlugin to previous place in webpack.config.js

* update package-lock.json

* Fix package-lock.json

* Update package-lock.json

* Fix export ChoiceItem not found warning for self serve. Remove warning turn off in webpack config.

* Update checkout and setup actions in for ci tests

* Disable Gallery callout

* Fix disable gallery header

* Totally disable New gallery callout

* Upgrade all github actions to latest
This commit is contained in:
Laurent Nguyen 2023-12-13 18:24:40 +00:00 committed by GitHub
parent 59a50d72fe
commit 1bf4683894
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
67 changed files with 34884 additions and 19953 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -53,4 +53,9 @@ module.exports = {
}, },
], ],
}, },
settings: {
react: {
version: "detect",
},
},
}; };

80
.github/workflows/ci.yml vendored
View File

@ -14,11 +14,11 @@ jobs:
name: "Log Code Metrics" name: "Log Code Metrics"
if: github.ref == 'refs/heads/master' if: github.ref == 'refs/heads/master'
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: node utils/codeMetrics.js - run: node utils/codeMetrics.js
env: env:
@ -27,11 +27,11 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: "Compile TypeScript" name: "Compile TypeScript"
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm run compile - run: npm run compile
- run: npm run compile:strict - run: npm run compile:strict
@ -39,44 +39,44 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: "Check Format" name: "Check Format"
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm run format:check - run: npm run format:check
lint: lint:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: "Lint" name: "Lint"
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm run lint - run: npm run lint
unittest: unittest:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: "Unit Tests" name: "Unit Tests"
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm run test - run: npm run test
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
name: "Build" name: "Build"
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm run build:contracts - run: npm run build:contracts
- name: Restore Build Cache - name: Restore Build Cache
@ -86,10 +86,10 @@ jobs:
key: ${{ runner.os }}-build-cache key: ${{ runner.os }}-build-cache
- run: npm run pack:prod - run: npm run pack:prod
env: env:
NODE_OPTIONS: '--max-old-space-size=4096' NODE_OPTIONS: "--max-old-space-size=4096"
- run: cp -r ./Contracts ./dist/contracts - run: cp -r ./Contracts ./dist/contracts
- run: cp -r ./configs ./dist/configs - run: cp -r ./configs ./dist/configs
- uses: actions/upload-artifact@v2 - uses: actions/upload-artifact@v3
with: with:
name: dist name: dist
path: dist/ path: dist/
@ -107,11 +107,11 @@ jobs:
if: false if: false
runs-on: windows-latest runs-on: windows-latest
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- uses: southpolesteve/cosmos-emulator-github-action@v1 - uses: southpolesteve/cosmos-emulator-github-action@v1
- name: End to End Tests - name: End to End Tests
run: | run: |
@ -124,7 +124,7 @@ jobs:
DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator" DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
PLATFORM: "Emulator" PLATFORM: "Emulator"
NODE_TLS_REJECT_UNAUTHORIZED: 0 NODE_TLS_REJECT_UNAUTHORIZED: 0
- uses: actions/upload-artifact@v2 - uses: actions/upload-artifact@v3
if: failure() if: failure()
with: with:
name: screenshots name: screenshots
@ -149,11 +149,11 @@ jobs:
- ./test/sql/resourceToken.spec.ts - ./test/sql/resourceToken.spec.ts
- ./test/tables/container.spec.ts - ./test/tables/container.spec.ts
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v4
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v4
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: npm start & - run: npm start &
- run: npm run wait-for-server - run: npm run wait-for-server
@ -162,7 +162,7 @@ jobs:
# Run tests up to three times # Run tests up to three times
for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s) for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
shell: bash shell: bash
- uses: actions/upload-artifact@v2 - uses: actions/upload-artifact@v3
if: failure() if: failure()
with: with:
name: screenshots name: screenshots
@ -180,14 +180,14 @@ jobs:
with: with:
nuget-api-key: ${{ secrets.NUGET_API_KEY }} nuget-api-key: ${{ secrets.NUGET_API_KEY }}
- name: Download Dist Folder - name: Download Dist Folder
uses: actions/download-artifact@v2 uses: actions/download-artifact@v3
with: with:
name: dist name: dist
- run: cp ./configs/prod.json config.json - run: cp ./configs/prod.json config.json
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT" - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}" - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
- uses: actions/upload-artifact@v2 - uses: actions/upload-artifact@v3
name: packages name: packages
with: with:
path: "*.nupkg" path: "*.nupkg"
@ -204,7 +204,7 @@ jobs:
with: with:
nuget-api-key: ${{ secrets.NUGET_API_KEY }} nuget-api-key: ${{ secrets.NUGET_API_KEY }}
- name: Download Dist Folder - name: Download Dist Folder
uses: actions/download-artifact@v2 uses: actions/upload-artifact@v3
with: with:
name: dist name: dist
- run: cp ./configs/mpac.json config.json - run: cp ./configs/mpac.json config.json
@ -212,7 +212,7 @@ jobs:
- run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT" - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "jawelton@microsoft.com" -Password "$AZURE_DEVOPS_PAT"
- run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}" - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
- run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
- uses: actions/upload-artifact@v2 - uses: actions/upload-artifact@v3
name: packages name: packages
with: with:
path: "*.nupkg" path: "*.nupkg"

4
.github/workflows/cleanup.yml vendored
View File

@ -20,9 +20,9 @@ jobs:
NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }} NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
steps: steps:
- uses: actions/checkout@v2 - uses: actions/checkout@v2
- name: Use Node.js 14.x - name: Use Node.js 18.x
uses: actions/setup-node@v1 uses: actions/setup-node@v1
with: with:
node-version: 14.x node-version: 18.x
- run: npm ci - run: npm ci
- run: node utils/cleanupDBs.js - run: node utils/cleanupDBs.js

BIN
images/jquery.dataTables-images/sort_asc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 B

BIN
images/jquery.dataTables-images/sort_asc_disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
images/jquery.dataTables-images/sort_both.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 B

BIN
images/jquery.dataTables-images/sort_desc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 B

BIN
images/jquery.dataTables-images/sort_desc_disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

49522
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

66
package.json
View File

@ -12,12 +12,12 @@
"@azure/msal-browser": "2.14.2", "@azure/msal-browser": "2.14.2",
"@babel/plugin-proposal-class-properties": "7.12.1", "@babel/plugin-proposal-class-properties": "7.12.1",
"@babel/plugin-proposal-decorators": "7.12.12", "@babel/plugin-proposal-decorators": "7.12.12",
"@fluentui/react": "8.14.3", "@fluentui/react": "8.112.1",
"@fluentui/react-components": "9.32.1", "@fluentui/react-components": "9.34.0",
"@jupyterlab/services": "6.0.2", "@jupyterlab/services": "6.0.2",
"@jupyterlab/terminal": "3.0.3", "@jupyterlab/terminal": "3.0.3",
"@microsoft/applicationinsights-web": "2.6.1", "@microsoft/applicationinsights-web": "2.6.1",
"@nteract/commutable": "7.4.2", "@nteract/commutable": "7.5.1",
"@nteract/connected-components": "6.8.2", "@nteract/connected-components": "6.8.2",
"@nteract/core": "15.1.0", "@nteract/core": "15.1.0",
"@nteract/data-explorer": "8.0.3", "@nteract/data-explorer": "8.0.3",
@ -49,9 +49,9 @@
"applicationinsights": "1.8.0", "applicationinsights": "1.8.0",
"bootstrap": "3.4.1", "bootstrap": "3.4.1",
"canvas": "file:./canvas", "canvas": "file:./canvas",
"clean-webpack-plugin": "3.0.0", "clean-webpack-plugin": "4.0.0",
"clipboard-copy": "4.0.1", "clipboard-copy": "4.0.1",
"copy-webpack-plugin": "9.0.1", "copy-webpack-plugin": "11.0.0",
"crossroads": "0.12.2", "crossroads": "0.12.2",
"css-element-queries": "1.1.1", "css-element-queries": "1.1.1",
"d3": "6.1.1", "d3": "6.1.1",
@ -61,8 +61,8 @@
"dayjs": "1.8.19", "dayjs": "1.8.19",
"dom-to-image": "2.6.0", "dom-to-image": "2.6.0",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"eslint-plugin-jest": "23.13.2", "eslint-plugin-jest": "27.4.2",
"eslint-plugin-react": "7.20.0", "eslint-plugin-react": "7.33.2",
"hasher": "1.2.0", "hasher": "1.2.0",
"html2canvas": "1.0.0-rc.5", "html2canvas": "1.0.0-rc.5",
"i18next": "19.8.4", "i18next": "19.8.4",
@ -76,9 +76,9 @@
"jquery-ui-dist": "1.12.1", "jquery-ui-dist": "1.12.1",
"knockout": "3.5.1", "knockout": "3.5.1",
"mkdirp": "1.0.4", "mkdirp": "1.0.4",
"monaco-editor": "0.18.1", "monaco-editor": "0.44.0",
"ms": "2.1.3", "ms": "2.1.3",
"p-retry": "4.2.0", "p-retry": "4.6.2",
"plotly.js-cartesian-dist-min": "1.52.3", "plotly.js-cartesian-dist-min": "1.52.3",
"post-robot": "10.0.42", "post-robot": "10.0.42",
"q": "1.5.1", "q": "1.5.1",
@ -86,7 +86,7 @@
"react-animate-height": "2.0.8", "react-animate-height": "2.0.8",
"react-dnd": "14.0.2", "react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.0", "react-dnd-html5-backend": "14.0.0",
"react-dom": "16.13.1", "react-dom": "16.14.0",
"react-hotkeys": "2.0.0", "react-hotkeys": "2.0.0",
"react-i18next": "11.8.5", "react-i18next": "11.8.5",
"react-notification-system": "0.2.17", "react-notification-system": "0.2.17",
@ -94,14 +94,12 @@
"react-splitter-layout": "4.0.0", "react-splitter-layout": "4.0.0",
"react-string-format": "1.0.1", "react-string-format": "1.0.1",
"react-youtube": "9.0.1", "react-youtube": "9.0.1",
"redux": "4.0.4",
"reflect-metadata": "0.1.13", "reflect-metadata": "0.1.13",
"rx-jupyter": "5.5.12", "rx-jupyter": "5.5.12",
"rxjs": "6.6.3",
"sanitize-html": "2.3.3", "sanitize-html": "2.3.3",
"styled-components": "4.3.2", "styled-components": "5.0.1",
"swr": "0.4.0", "swr": "0.4.0",
"terser-webpack-plugin": "5.1.4", "terser-webpack-plugin": "5.3.9",
"underscore": "1.9.1", "underscore": "1.9.1",
"utility-types": "3.10.0", "utility-types": "3.10.0",
"zustand": "3.5.0" "zustand": "3.5.0"
@ -134,59 +132,59 @@
"@types/styled-components": "5.1.1", "@types/styled-components": "5.1.1",
"@types/underscore": "1.7.36", "@types/underscore": "1.7.36",
"@types/youtube-player": "5.5.6", "@types/youtube-player": "5.5.6",
"@typescript-eslint/eslint-plugin": "4.22.0", "@typescript-eslint/eslint-plugin": "6.7.4",
"@typescript-eslint/parser": "4.22.0", "@typescript-eslint/parser": "6.7.4",
"@webpack-cli/serve": "1.5.2", "@webpack-cli/serve": "2.0.5",
"babel-jest": "24.9.0", "babel-jest": "24.9.0",
"babel-loader": "8.1.0", "babel-loader": "8.1.0",
"buffer": "5.1.0", "buffer": "5.1.0",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.4.0",
"create-file-webpack": "1.0.2", "create-file-webpack": "1.0.2",
"css-loader": "1.0.0", "css-loader": "6.8.1",
"enzyme": "3.11.0", "enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.5", "enzyme-adapter-react-16": "1.15.5",
"enzyme-to-json": "3.6.1", "enzyme-to-json": "3.6.1",
"eslint": "7.8.1", "eslint": "8.50.0",
"eslint-cli": "1.1.1", "eslint-cli": "1.1.1",
"eslint-plugin-no-null": "1.0.2", "eslint-plugin-no-null": "1.0.2",
"eslint-plugin-prefer-arrow": "1.2.2", "eslint-plugin-prefer-arrow": "1.2.3",
"eslint-plugin-react-hooks": "4.2.0", "eslint-plugin-react-hooks": "4.6.0",
"expect-playwright": "0.3.3", "expect-playwright": "0.3.3",
"fast-glob": "3.2.5", "fast-glob": "3.2.5",
"file-loader": "2.0.0",
"fs-extra": "7.0.0", "fs-extra": "7.0.0",
"html-inline-css-webpack-plugin": "1.11.0", "html-inline-css-webpack-plugin": "1.11.2",
"html-loader": "0.5.5", "html-loader": "0.5.5",
"html-loader-jest": "0.2.1", "html-loader-jest": "0.2.1",
"html-webpack-plugin": "5.3.2", "html-webpack-plugin": "5.5.3",
"jest": "26.6.3", "jest": "26.6.3",
"jest-canvas-mock": "2.3.1", "jest-canvas-mock": "2.3.1",
"jest-playwright-preset": "1.5.1", "jest-playwright-preset": "1.5.1",
"jest-react-hooks-shallow": "1.5.1", "jest-react-hooks-shallow": "1.5.1",
"jest-trx-results-processor": "0.0.7", "jest-trx-results-processor": "0.0.7",
"less": "3.8.1", "less": "3.8.1",
"less-loader": "4.1.0", "less-loader": "11.1.3",
"less-vars-loader": "1.1.0", "less-vars-loader": "1.1.0",
"mini-css-extract-plugin": "2.1.0", "mini-css-extract-plugin": "2.1.0",
"monaco-editor-webpack-plugin": "1.7.0", "monaco-editor-webpack-plugin": "7.1.0",
"node-fetch": "2.6.1", "node-fetch": "2.6.1",
"playwright": "1.13.0", "playwright": "1.13.0",
"prettier": "3.0.3", "prettier": "3.0.3",
"process": "0.11.10", "process": "0.11.10",
"querystring-es3": "0.2.1",
"raw-loader": "0.5.1", "raw-loader": "0.5.1",
"react-dev-utils": "11.0.4", "react-dev-utils": "11.0.4",
"rimraf": "3.0.0", "rimraf": "3.0.0",
"sinon": "3.2.1", "sinon": "3.2.1",
"style-loader": "0.23.0", "style-loader": "0.23.0",
"ts-loader": "9.2.4", "ts-loader": "9.2.4",
"typedoc": "0.20.36", "typedoc": "0.21.5",
"typescript": "4.3.4", "typescript": "4.3.5",
"url-loader": "1.1.1", "url-loader": "4.1.1",
"wait-on": "4.0.2", "wait-on": "4.0.2",
"webpack": "5.47.0", "webpack": "5.88.2",
"webpack-bundle-analyzer": "4.4.2", "webpack-bundle-analyzer": "4.9.1",
"webpack-cli": "4.7.2", "webpack-cli": "5.1.4",
"webpack-dev-server": "3.11.2" "webpack-dev-server": "4.15.1"
}, },
"scripts": { "scripts": {
"start": "webpack serve --mode development", "start": "webpack serve --mode development",

8
src/Common/Logger.test.ts
View File

@ -1,7 +1,5 @@
jest.mock("./MessageHandler"); jest.mock("./MessageHandler");
import { LogEntryLevel } from "../Contracts/Diagnostics";
import * as Logger from "./Logger"; import * as Logger from "./Logger";
import { MessageTypes } from "../Contracts/ExplorerContracts";
import { sendMessage } from "./MessageHandler"; import { sendMessage } from "./MessageHandler";
describe("Logger", () => { describe("Logger", () => {
@ -11,16 +9,16 @@ describe("Logger", () => {
it("should log info messages", () => { it("should log info messages", () => {
Logger.logInfo("Test info", "DocDB"); Logger.logInfo("Test info", "DocDB");
expect(sendMessage).toBeCalled(); expect(sendMessage).toHaveBeenCalled();
}); });
it("should log error messages", () => { it("should log error messages", () => {
Logger.logError("Test error", "DocDB"); Logger.logError("Test error", "DocDB");
expect(sendMessage).toBeCalled(); expect(sendMessage).toHaveBeenCalled();
}); });
it("should log warnings", () => { it("should log warnings", () => {
Logger.logWarning("Test warning", "DocDB"); Logger.logWarning("Test warning", "DocDB");
expect(sendMessage).toBeCalled(); expect(sendMessage).toHaveBeenCalled();
}); });
}); });

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

@ -109,6 +109,7 @@ describe("iframe rendering when there is no data", () => {
theme: 4, theme: 4,
}, },
}, },
origin: "http://localhost",
}; };
const divElement = `<div id="${Heatmap.elementId}"></div>`; const divElement = `<div id="${Heatmap.elementId}"></div>`;
@ -129,6 +130,7 @@ describe("iframe rendering when there is no data", () => {
theme: 2, theme: 2,
}, },
}, },
origin: "http://localhost",
}; };
const divElement = `<div id="${Heatmap.elementId}"></div>`; const divElement = `<div id="${Heatmap.elementId}"></div>`;

1
src/Explorer/Controls/Accordion/AccordionComponent.tsx
View File

@ -27,6 +27,7 @@ export interface AccordionItemComponentProps {
isExpanded?: boolean; isExpanded?: boolean;
containerStyles?: React.CSSProperties; containerStyles?: React.CSSProperties;
styles?: React.CSSProperties; styles?: React.CSSProperties;
children: JSX.Element;
} }
interface AccordionItemComponentState { interface AccordionItemComponentState {

1
src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx
View File

@ -16,6 +16,7 @@ export interface CollapsiblePanelProps {
isCollapsed: boolean; isCollapsed: boolean;
onCollapsedChanged: (newValue: boolean) => void; onCollapsedChanged: (newValue: boolean) => void;
collapseToLeft?: boolean; collapseToLeft?: boolean;
children: JSX.Element | JSX.Element[];
} }
export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> { export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {

1
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
View File

@ -7,6 +7,7 @@ describe("CollapsibleSectionComponent", () => {
const props: CollapsibleSectionProps = { const props: CollapsibleSectionProps = {
title: "Sample title", title: "Sample title",
isExpandedByDefault: true, isExpandedByDefault: true,
children: <></>,
}; };
const wrapper = shallow(<CollapsibleSectionComponent {...props} />); const wrapper = shallow(<CollapsibleSectionComponent {...props} />);

1
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
View File

@ -7,6 +7,7 @@ export interface CollapsibleSectionProps {
title: string; title: string;
isExpandedByDefault: boolean; isExpandedByDefault: boolean;
onExpand?: () => void; onExpand?: () => void;
children: JSX.Element;
} }
export interface CollapsibleSectionState { export interface CollapsibleSectionState {

2
src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
View File

@ -99,7 +99,7 @@ export class DiffEditorViewModel {
) { ) {
this.editorContainer = document.getElementById(this.getEditorId()); this.editorContainer = document.getElementById(this.getEditorId());
this.editorContainer.innerHTML = ""; this.editorContainer.innerHTML = "";
const options: monaco.editor.IDiffEditorConstructionOptions = { const options: monaco.editor.IStandaloneDiffEditorConstructionOptions = {
lineNumbers: this.params.lineNumbers || "off", lineNumbers: this.params.lineNumbers || "off",
fontSize: 12, fontSize: 12,
ariaLabel: this.params.ariaLabel, ariaLabel: this.params.ariaLabel,

6
src/Explorer/Controls/Editor/EditorComponent.ts
View File

@ -52,7 +52,11 @@ class EditorViewModel extends JsonEditorViewModel {
if (EditorViewModel.providerRegistered.indexOf("sql") < 0) { if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service"); const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
const monaco = await loadMonaco(); const monaco = await loadMonaco();
monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider()); monaco.languages.registerCompletionItemProvider(
"sql",
// TODO cosmos-language-service could be outdated
new SqlCompletionItemProvider() as unknown as monaco.languages.CompletionItemProvider,
);
EditorViewModel.providerRegistered.push("sql"); EditorViewModel.providerRegistered.push("sql");
} }
} }

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

@ -93,7 +93,7 @@ export class EditorReact extends React.Component<EditorReactProps, EditorReactSt
* Create the monaco editor and attach to DOM * Create the monaco editor and attach to DOM
*/ */
private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) { private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
const options: monaco.editor.IEditorConstructionOptions = { const options: monaco.editor.IStandaloneEditorConstructionOptions = {
language: this.props.language, language: this.props.language,
value: this.props.content, value: this.props.content,
readOnly: this.props.isReadOnly, readOnly: this.props.isReadOnly,

2
src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
View File

@ -90,7 +90,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) { protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
this.registerCompletionItemProvider(); this.registerCompletionItemProvider();
this.editorContainer = document.getElementById(this.getEditorId()); this.editorContainer = document.getElementById(this.getEditorId());
const options: monaco.editor.IEditorConstructionOptions = { const options: monaco.editor.IStandaloneEditorConstructionOptions = {
value: content, value: content,
language: this.getEditorLanguage(), language: this.getEditorLanguage(),
readOnly: this.params.isReadOnly, readOnly: this.params.isReadOnly,

2
src/Explorer/Controls/NotebookGallery/CodeOfConduct/CodeOfConduct.test.tsx
View File

@ -29,6 +29,6 @@ describe("CodeOfConduct", () => {
const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />); const wrapper = shallow(<CodeOfConduct {...codeOfConductProps} />);
wrapper.find(".genericPaneSubmitBtn").first().simulate("click"); wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
await Promise.resolve(); await Promise.resolve();
expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled(); expect(codeOfConductProps.onAcceptCodeOfConduct).toHaveBeenCalled();
}); });
}); });

6
src/Explorer/Controls/Settings/SettingsComponent.test.tsx
View File

@ -9,7 +9,7 @@ import { updateUserContext } from "../../../UserContext";
import Explorer from "../../Explorer"; import Explorer from "../../Explorer";
import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2"; import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent"; import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
import { isDirty, TtlType } from "./SettingsUtils"; import { TtlType, isDirty } from "./SettingsUtils";
import { collection } from "./TestUtils"; import { collection } from "./TestUtils";
jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({ jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
getIndexTransformationProgress: jest.fn().mockReturnValue(undefined), getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
@ -190,8 +190,8 @@ describe("SettingsComponent", () => {
id: "id", id: "id",
}; };
await settingsComponentInstance.onSaveClick(); await settingsComponentInstance.onSaveClick();
expect(updateCollection).toBeCalled(); expect(updateCollection).toHaveBeenCalled();
expect(updateOffer).toBeCalled(); expect(updateOffer).toHaveBeenCalled();
}); });
it("revert resets state values", async () => { it("revert resets state values", async () => {

6
src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx
View File

@ -1,8 +1,8 @@
import { shallow } from "enzyme"; import { shallow } from "enzyme";
import React from "react"; import React from "react";
import { renderToString } from "react-dom/server";
import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils"; import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent"; import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
import { renderToString } from "react-dom/server";
describe("MongoIndexingPolicyComponent", () => { describe("MongoIndexingPolicyComponent", () => {
const baseProps: MongoIndexingPolicyComponentProps = { const baseProps: MongoIndexingPolicyComponentProps = {
@ -84,7 +84,7 @@ describe("MongoIndexingPolicyComponent", () => {
]; ];
test.each(cases)( test.each(cases)(
"", "mongo indexing policy saveable and discardable",
( (
notification: MongoNotificationMessage, notification: MongoNotificationMessage,
indexToDropIsPresent: boolean, indexToDropIsPresent: boolean,
@ -111,8 +111,10 @@ describe("MongoIndexingPolicyComponent", () => {
); );
if (mongoWarningNotificationMessage) { if (mongoWarningNotificationMessage) {
const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()); const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
// eslint-disable-next-line jest/no-conditional-expect
expect(elementAsString).toContain(mongoWarningNotificationMessage); expect(elementAsString).toContain(mongoWarningNotificationMessage);
} else { } else {
// eslint-disable-next-line jest/no-conditional-expect
expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined(); expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
} }
}, },

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

@ -18,17 +18,17 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
horizontal={true} horizontal={true}
> >
<div <div
className="ms-Stack css-53" className="ms-Stack css-109"
> >
<span <span
className="mandatoryStar" className="mandatoryStar"
key=".0:$.0" key=".0:$.$.0"
> >
*  * 
</span> </span>
<Text <Text
aria-label="Throughput header" aria-label="Throughput header"
key=".0:$.1" key=".0:$.$.1"
style={ style={
Object { Object {
"fontWeight": 600, "fontWeight": 600,
@ -39,7 +39,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
> >
<span <span
aria-label="Throughput header" aria-label="Throughput header"
className="css-54" className="css-110"
style={ style={
Object { Object {
"fontWeight": 600, "fontWeight": 600,
@ -51,7 +51,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</span> </span>
</Text> </Text>
<InfoTooltip <InfoTooltip
key=".0:$.2" key=".0:$.$.2"
> >
<span> <span>
<StyledTooltipHostBase <StyledTooltipHostBase
@ -336,12 +336,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
} }
> >
<div <div
className="ms-TooltipHost root-55" className="ms-TooltipHost root-111"
onBlurCapture={[Function]} onBlurCapture={[Function]}
onFocusCapture={[Function]} onFocusCapture={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
role="none"
> >
<StyledIconBase <StyledIconBase
ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage." ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
@ -631,7 +632,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
> >
<i <i
aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage." aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
className="panelInfoIcon root-57" className="panelInfoIcon root-114"
data-icon-name="Info" data-icon-name="Info"
role="img" role="img"
tabIndex={0} tabIndex={0}
@ -640,6 +641,24 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</i> </i>
</IconBase> </IconBase>
</StyledIconBase> </StyledIconBase>
<div
hidden={true}
id="tooltip0"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage.
</div>
</div> </div>
</TooltipHostBase> </TooltipHostBase>
</StyledTooltipHostBase> </StyledTooltipHostBase>
@ -652,10 +671,10 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
verticalAlign="center" verticalAlign="center"
> >
<div <div
className="ms-Stack css-58" className="ms-Stack css-115"
> >
<div <div
key=".0:$.0" key=".0:$.$.0"
role="radiogroup" role="radiogroup"
> >
<input <input
@ -699,16 +718,16 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
className="throughputInputSpacing" className="throughputInputSpacing"
> >
<div <div
className="ms-Stack throughputInputSpacing css-59" className="ms-Stack throughputInputSpacing css-116"
> >
<Text <Text
aria-label="capacity calculator of azure cosmos db" aria-label="capacity calculator of azure cosmos db"
key=".0:$.0" key=".0:$.$.0"
variant="small" variant="small"
> >
<span <span
aria-label="capacity calculator of azure cosmos db" aria-label="capacity calculator of azure cosmos db"
className="css-54" className="css-110"
> >
Estimate your required RU/s with Estimate your required RU/s with
@ -998,7 +1017,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
> >
<a <a
aria-label="capacity calculator of azure cosmos db" aria-label="capacity calculator of azure cosmos db"
className="ms-Link root-60" className="ms-Link root-117"
href="https://cosmos.azure.com/capacitycalculator/" href="https://cosmos.azure.com/capacitycalculator/"
onClick={[Function]} onClick={[Function]}
target="_blank" target="_blank"
@ -1012,14 +1031,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</Text> </Text>
<Stack <Stack
horizontal={true} horizontal={true}
key=".0:$.1" key=".0:$.$.1"
> >
<div <div
className="ms-Stack css-53" className="ms-Stack css-109"
> >
<Text <Text
aria-label="maxRUDescription" aria-label="maxRUDescription"
key=".0:$.0" key=".0:$.$.0"
style={ style={
Object { Object {
"fontWeight": 600, "fontWeight": 600,
@ -1030,7 +1049,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
> >
<span <span
aria-label="maxRUDescription" aria-label="maxRUDescription"
className="css-54" className="css-110"
style={ style={
Object { Object {
"fontWeight": 600, "fontWeight": 600,
@ -1043,7 +1062,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</span> </span>
</Text> </Text>
<InfoTooltip <InfoTooltip
key=".0:$.1" key=".0:$.$.1"
> >
<span> <span>
<StyledTooltipHostBase <StyledTooltipHostBase
@ -1328,12 +1347,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
} }
> >
<div <div
className="ms-TooltipHost root-55" className="ms-TooltipHost root-111"
onBlurCapture={[Function]} onBlurCapture={[Function]}
onFocusCapture={[Function]} onFocusCapture={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
role="none"
> >
<StyledIconBase <StyledIconBase
ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage." ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
@ -1623,7 +1643,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
> >
<i <i
aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage." aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
className="panelInfoIcon root-57" className="panelInfoIcon root-114"
data-icon-name="Info" data-icon-name="Info"
role="img" role="img"
tabIndex={0} tabIndex={0}
@ -1632,6 +1652,24 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</i> </i>
</IconBase> </IconBase>
</StyledIconBase> </StyledIconBase>
<div
hidden={true}
id="tooltip1"
style={
Object {
"border": 0,
"height": 1,
"margin": -1,
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"whiteSpace": "nowrap",
"width": 1,
}
}
>
Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage.
</div>
</div> </div>
</TooltipHostBase> </TooltipHostBase>
</StyledTooltipHostBase> </StyledTooltipHostBase>
@ -1643,7 +1681,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
ariaLabel="Container max RU/s" ariaLabel="Container max RU/s"
errorMessage="" errorMessage=""
id="autoscaleRUValueField" id="autoscaleRUValueField"
key=".0:$.2" key=".0:$.$.2"
max="9007199254740991" max="9007199254740991"
min={1000} min={1000}
onChange={[Function]} onChange={[Function]}
@ -1953,18 +1991,18 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
value="4000" value="4000"
> >
<div <div
className="ms-TextField is-required root-62" className="ms-TextField is-required root-119"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-63" className="ms-TextField-fieldGroup fieldGroup-120"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-label="Container max RU/s" aria-label="Container max RU/s"
className="ms-TextField-field field-64" className="ms-TextField-field field-121"
id="autoscaleRUValueField" id="autoscaleRUValueField"
max="9007199254740991" max="9007199254740991"
min={1000} min={1000}
@ -1983,11 +2021,11 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
</TextFieldBase> </TextFieldBase>
</StyledTextFieldBase> </StyledTextFieldBase>
<Text <Text
key=".0:$.3" key=".0:$.$.3"
variant="small" variant="small"
> >
<span <span
className="css-54" className="css-110"
> >
Your Your
container container

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

@ -367,7 +367,7 @@ describe("GraphExplorer", () => {
}); });
it("should submit g.V() as docdb query with proper parameters", () => { it("should submit g.V() as docdb query with proper parameters", () => {
expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, { expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
enableCrossPartitionQuery: true, enableCrossPartitionQuery: true,
}); });
@ -404,7 +404,7 @@ describe("GraphExplorer", () => {
}); });
it("should submit g.V() as docdb query with proper parameters", () => { it("should submit g.V() as docdb query with proper parameters", () => {
expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, { expect(queryDocuments).toHaveBeenCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
enableCrossPartitionQuery: true, enableCrossPartitionQuery: true,
}); });

2
src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.test.tsx
View File

@ -43,7 +43,7 @@ describe("Graph Style Component", () => {
expect(asFragment).toMatchSnapshot(); expect(asFragment).toMatchSnapshot();
}); });
it("should render node properties dropdown list ", () => { it("should render node properties dropdown list", () => {
const dropDownList = screen.getByText("Show vertex (node) as"); const dropDownList = screen.getByText("Show vertex (node) as");
expect(dropDownList).toBeDefined(); expect(dropDownList).toBeDefined();
}); });

2
src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
View File

@ -35,7 +35,7 @@ describe("CommandBarUtil tests", () => {
// Click gets called // Click gets called
converted.onClick(); converted.onClick();
expect(btn.onCommandClick).toBeCalled(); expect(btn.onCommandClick).toHaveBeenCalled();
}); });
it("should convert NavbarButtonConfig to split button", () => { it("should convert NavbarButtonConfig to split button", () => {

24
src/Explorer/Notebook/NotebookComponent/epics.test.ts
View File

@ -1,14 +1,14 @@
import { makeNotebookRecord } from "@nteract/commutable";
import { actions, state } from "@nteract/core";
import * as Immutable from "immutable"; import * as Immutable from "immutable";
import { StateObservable } from "redux-observable"; import { StateObservable } from "redux-observable";
import { Subject, of } from "rxjs"; import { Subject, of } from "rxjs";
import { toArray } from "rxjs/operators"; import { toArray } from "rxjs/operators";
import { makeNotebookRecord } from "@nteract/commutable";
import { actions, state, epics } from "@nteract/core";
import * as sinon from "sinon"; import * as sinon from "sinon";
import { CdbAppState, makeCdbRecord } from "./types";
import { launchWebSocketKernelEpic } from "./epics";
import { NotebookUtil } from "../NotebookUtil"; import { NotebookUtil } from "../NotebookUtil";
import { launchWebSocketKernelEpic } from "./epics";
import { CdbAppState, makeCdbRecord } from "./types";
import { sessions } from "rx-jupyter"; import { sessions } from "rx-jupyter";
@ -117,7 +117,7 @@ describe("launchWebSocketKernelEpic", () => {
const kernelRef = "fake"; const kernelRef = "fake";
it("launches remote kernels", async () => { it("launches remote kernels", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const cwd = "/"; const cwd = "/";
const kernelId = "123"; const kernelId = "123";
@ -183,7 +183,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches any kernel with no kernelspecs in the state", async () => { it("launches any kernel with no kernelspecs in the state", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const cwd = "/"; const cwd = "/";
const kernelId = "123"; const kernelId = "123";
@ -236,7 +236,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches no kernel if no kernel is specified and state has no kernelspecs", async () => { it("launches no kernel if no kernel is specified and state has no kernelspecs", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const cwd = "/"; const cwd = "/";
const kernelId = "123"; const kernelId = "123";
@ -289,7 +289,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("emits an error if backend returns an error", async () => { it("emits an error if backend returns an error", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const cwd = "/"; const cwd = "/";
const action$ = of( const action$ = of(
@ -388,7 +388,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches supported kernel in kernelspecs", async () => { it("launches supported kernel in kernelspecs", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const action$ = of( const action$ = of(
actions.launchKernelByName({ actions.launchKernelByName({
@ -409,7 +409,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches undefined kernel uses default kernel from kernelspecs", async () => { it("launches undefined kernel uses default kernel from kernelspecs", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const action$ = of( const action$ = of(
actions.launchKernelByName({ actions.launchKernelByName({
@ -431,7 +431,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches unsupported kernel uses default kernel from kernelspecs", async () => { it("launches unsupported kernel uses default kernel from kernelspecs", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const action$ = of( const action$ = of(
actions.launchKernelByName({ actions.launchKernelByName({
@ -453,7 +453,7 @@ describe("launchWebSocketKernelEpic", () => {
}); });
it("launches unsupported kernel uses kernelspecs with similar name", async () => { it("launches unsupported kernel uses kernelspecs with similar name", async () => {
const state$ = new StateObservable(new Subject<CdbAppState>(), initialState); const state$ = new StateObservable(new Subject<CdbAppState>() as any, initialState);
const action$ = of( const action$ = of(
actions.launchKernelByName({ actions.launchKernelByName({

70
src/Explorer/Notebook/NotebookComponent/epics.ts
View File

@ -69,8 +69,8 @@ const addInitialCodeCellEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{} | actions.CreateCellBelow> => { ): Observable<{} | actions.CreateCellBelow> => {
return action$.pipe( return action$.pipe(
ofType(actions.FETCH_CONTENT_FULFILLED), ofType(actions.FETCH_CONTENT_FULFILLED) as any,
mergeMap((action) => { mergeMap((action: any) => {
const state = state$.value; const state = state$.value;
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
const model = selectors.model(state, { contentRef }); const model = selectors.model(state, { contentRef });
@ -116,7 +116,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
*/ */
export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => { export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => {
return action$.pipe( return action$.pipe(
ofType(actions.LAUNCH_KERNEL_SUCCESSFUL), ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
switchMap((action: actions.NewKernelAction) => { switchMap((action: actions.NewKernelAction) => {
const { const {
payload: { payload: {
@ -271,9 +271,9 @@ export const launchWebSocketKernelEpic = (
state$: StateObservable<CdbAppState>, state$: StateObservable<CdbAppState>,
) => { ) => {
return action$.pipe( return action$.pipe(
ofType(actions.LAUNCH_KERNEL_BY_NAME), ofType(actions.LAUNCH_KERNEL_BY_NAME) as any,
// Only accept jupyter servers for the host with this epic // Only accept jupyter servers for the host with this epic
filter(() => selectors.isCurrentHostJupyter(state$.value)), filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
switchMap((action: actions.LaunchKernelByNameAction) => { switchMap((action: actions.LaunchKernelByNameAction) => {
const state = state$.value; const state = state$.value;
const host = selectors.currentHost(state); const host = selectors.currentHost(state);
@ -382,7 +382,7 @@ export const restartWebSocketKernelEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
) => ) =>
action$.pipe( action$.pipe(
ofType(actions.RESTART_KERNEL), ofType(actions.RESTART_KERNEL) as any,
concatMap((action: actions.RestartKernel) => { concatMap((action: actions.RestartKernel) => {
const state = state$.value; const state = state$.value;
@ -449,7 +449,7 @@ export const restartWebSocketKernelEpic = (
}); });
const awaitKernelReady = action$.pipe( const awaitKernelReady = action$.pipe(
ofType(actions.LAUNCH_KERNEL_SUCCESSFUL), ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
filter((action: actions.NewKernelAction | actions.RestartKernel) => action.payload.kernelRef === newKernelRef), filter((action: actions.NewKernelAction | actions.RestartKernel) => action.payload.kernelRef === newKernelRef),
take(1), take(1),
timeout(60000), // If kernel doesn't come up within this interval we will abort follow-on actions. timeout(60000), // If kernel doesn't come up within this interval we will abort follow-on actions.
@ -492,9 +492,9 @@ const changeWebSocketKernelEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
) => { ) => {
return action$.pipe( return action$.pipe(
ofType(actions.CHANGE_KERNEL_BY_NAME), ofType(actions.CHANGE_KERNEL_BY_NAME) as any,
// Only accept jupyter servers for the host with this epic // Only accept jupyter servers for the host with this epic
filter(() => selectors.isCurrentHostJupyter(state$.value)), filter(() => selectors.isCurrentHostJupyter(state$.value as never)),
switchMap((action: actions.ChangeKernelByName) => { switchMap((action: actions.ChangeKernelByName) => {
const { const {
payload: { contentRef, oldKernelRef, kernelSpecName }, payload: { contentRef, oldKernelRef, kernelSpecName },
@ -574,8 +574,8 @@ const focusInitialCodeCellEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{} | actions.FocusCell> => { ): Observable<{} | actions.FocusCell> => {
return action$.pipe( return action$.pipe(
ofType(actions.CREATE_CELL_APPEND), ofType(actions.CREATE_CELL_APPEND) as any,
mergeMap((action) => { mergeMap((action: any) => {
const state = state$.value; const state = state$.value;
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
const model = selectors.model(state, { contentRef }); const model = selectors.model(state, { contentRef });
@ -616,8 +616,8 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
actions.SAVE_FULFILLED, actions.SAVE_FULFILLED,
actions.SAVE_FAILED, actions.SAVE_FAILED,
actions.FETCH_CONTENT_FAILED, actions.FETCH_CONTENT_FAILED,
), ) as any,
mergeMap((action) => { mergeMap((action: any) => {
switch (action.type) { switch (action.type) {
case actions.RESTART_KERNEL_SUCCESSFUL: { case actions.RESTART_KERNEL_SUCCESSFUL: {
const title = "Kernel restart"; const title = "Kernel restart";
@ -662,8 +662,8 @@ const handleKernelConnectionLostEpic = (
state$: StateObservable<CdbAppState>, state$: StateObservable<CdbAppState>,
): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => { ): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => {
return action$.pipe( return action$.pipe(
ofType(actions.UPDATE_DISPLAY_FAILED), ofType(actions.UPDATE_DISPLAY_FAILED) as any,
mergeMap((action) => { mergeMap((action: any) => {
const state = state$.value; const state = state$.value;
const msg = "Notebook was disconnected from kernel"; const msg = "Notebook was disconnected from kernel";
@ -721,8 +721,8 @@ export const cleanKernelOnConnectionLostEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<actions.KillKernelSuccessful> => { ): Observable<actions.KillKernelSuccessful> => {
return action$.pipe( return action$.pipe(
ofType(actions.UPDATE_DISPLAY_FAILED), ofType(actions.UPDATE_DISPLAY_FAILED) as any,
switchMap((action) => { switchMap((action: any) => {
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
const kernelRef = selectors.kernelRefByContentRef(state$.value, { contentRef }); const kernelRef = selectors.kernelRefByContentRef(state$.value, { contentRef });
return of( return of(
@ -744,8 +744,8 @@ const executeFocusedCellAndFocusNextEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{} | actions.FocusNextCellEditor> => { ): Observable<{} | actions.FocusNextCellEditor> => {
return action$.pipe( return action$.pipe(
ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT), ofType(CdbActions.EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT) as any,
mergeMap((action) => { mergeMap((action: any) => {
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
return concat( return concat(
of(actions.executeFocusedCell({ contentRef })), of(actions.executeFocusedCell({ contentRef })),
@ -765,8 +765,8 @@ const closeUnsupportedMimetypesEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{}> => { ): Observable<{}> => {
return action$.pipe( return action$.pipe(
ofType(actions.FETCH_CONTENT_FULFILLED), ofType(actions.FETCH_CONTENT_FULFILLED) as any,
mergeMap((action) => { mergeMap((action: any) => {
const mimetype = action.payload.model.mimetype; const mimetype = action.payload.model.mimetype;
if (!TextFile.handles(mimetype)) { if (!TextFile.handles(mimetype)) {
const filepath = action.payload.filepath; const filepath = action.payload.filepath;
@ -796,8 +796,8 @@ const closeContentFailedToFetchEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{}> => { ): Observable<{}> => {
return action$.pipe( return action$.pipe(
ofType(actions.FETCH_CONTENT_FAILED), ofType(actions.FETCH_CONTENT_FAILED) as any,
mergeMap((action) => { mergeMap((action: any) => {
const filepath = action.payload.filepath; const filepath = action.payload.filepath;
// Close tab and show error message // Close tab and show error message
useTabs useTabs
@ -818,7 +818,7 @@ const traceNotebookTelemetryEpic = (
state$: StateObservable<CdbAppState>, state$: StateObservable<CdbAppState>,
): Observable<{}> => { ): Observable<{}> => {
return action$.pipe( return action$.pipe(
ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY), ofType(cdbActions.TRACE_NOTEBOOK_TELEMETRY) as any,
mergeMap((action: cdbActions.TraceNotebookTelemetryAction) => { mergeMap((action: cdbActions.TraceNotebookTelemetryAction) => {
const state = state$.value; const state = state$.value;
@ -844,7 +844,7 @@ const traceNotebookInfoEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<{} | cdbActions.TraceNotebookTelemetryAction> => { ): Observable<{} | cdbActions.TraceNotebookTelemetryAction> => {
return action$.pipe( return action$.pipe(
ofType(actions.FETCH_CONTENT_FULFILLED), ofType(actions.FETCH_CONTENT_FULFILLED) as any,
mergeMap((action: { payload: any }) => { mergeMap((action: { payload: any }) => {
const state = state$.value; const state = state$.value;
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
@ -897,7 +897,7 @@ const traceNotebookKernelEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<cdbActions.TraceNotebookTelemetryAction> => { ): Observable<cdbActions.TraceNotebookTelemetryAction> => {
return action$.pipe( return action$.pipe(
ofType(actions.LAUNCH_KERNEL_SUCCESSFUL), ofType(actions.LAUNCH_KERNEL_SUCCESSFUL) as any,
mergeMap((action: { payload: any; type: string }) => { mergeMap((action: { payload: any; type: string }) => {
return of( return of(
cdbActions.traceNotebookTelemetry({ cdbActions.traceNotebookTelemetry({
@ -917,8 +917,8 @@ const resetCellStatusOnExecuteCanceledEpic = (
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<actions.UpdateCellStatus> => { ): Observable<actions.UpdateCellStatus> => {
return action$.pipe( return action$.pipe(
ofType(actions.EXECUTE_CANCELED), ofType(actions.EXECUTE_CANCELED) as any,
mergeMap((action) => { mergeMap((action: any) => {
const contentRef = action.payload.contentRef; const contentRef = action.payload.contentRef;
const model = state$.value.core.entities.contents.byRef.get(contentRef).model; const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
let busyCellIds: string[] = []; let busyCellIds: string[] = [];
@ -960,8 +960,8 @@ export function autoSaveCurrentContentEpic(
state$: StateObservable<AppState>, state$: StateObservable<AppState>,
): Observable<actions.Save> { ): Observable<actions.Save> {
return state$.pipe( return state$.pipe(
map((state) => autoSaveInterval(state)), map((state) => autoSaveInterval(state)) as any,
switchMap((time) => interval(time)), switchMap((time) => interval(time as number)) as any,
mergeMap(() => { mergeMap(() => {
const state = state$.value; const state = state$.value;
return from( return from(
@ -976,7 +976,7 @@ export function autoSaveCurrentContentEpic(
) )
.keys(), .keys(),
); );
}), }) as any,
filter((contentRef: ContentRef) => { filter((contentRef: ContentRef) => {
const model = selectors.model(state$.value, { contentRef }); const model = selectors.model(state$.value, { contentRef });
const content = selectors.content(state$.value, { contentRef }); const content = selectors.content(state$.value, { contentRef });
@ -985,12 +985,12 @@ export function autoSaveCurrentContentEpic(
model.type === "notebook" && model.type === "notebook" &&
NotebookUtil.getContentProviderType(content.filepath) !== NotebookContentProviderType.JupyterContentProviderType NotebookUtil.getContentProviderType(content.filepath) !== NotebookContentProviderType.JupyterContentProviderType
) { ) {
return selectors.notebook.isDirty(model); return selectors.notebook.isDirty(model as never);
} }
return false; return false;
}), }) as any,
map((contentRef: ContentRef) => actions.save({ contentRef })), map((contentRef: ContentRef) => actions.save({ contentRef })) as any,
); ) as any;
} }
export const allEpics = [ export const allEpics = [

10
src/Explorer/Notebook/NotebookComponent/store.ts
View File

@ -34,11 +34,11 @@ export default function configureStore(
const protect = (epic: Epic) => { const protect = (epic: Epic) => {
return (action$: Observable<any>, state$: any, dependencies: any) => return (action$: Observable<any>, state$: any, dependencies: any) =>
epic(action$, state$, dependencies).pipe( epic(action$ as any, state$, dependencies).pipe(
catchError((error, caught) => { catchError((error, caught) => {
traceFailure("Epic failure", error); traceFailure("Epic failure", error);
return caught; return caught;
}), }) as any,
); );
}; };
@ -52,7 +52,7 @@ export default function configureStore(
}; };
const protectEpics = (epics: Epic[]): Epic[] => { const protectEpics = (epics: Epic[]): Epic[] => {
return epics.map((epic) => protect(epic)); return epics.map((epic) => protect(epic)) as any;
}; };
const filteredCoreEpics = getCoreEpics(autoStartKernelOnNotebookOpen); const filteredCoreEpics = getCoreEpics(autoStartKernelOnNotebookOpen);
@ -64,7 +64,7 @@ export default function configureStore(
core: coreReducer as any, core: coreReducer as any,
cdb: cdbReducer, cdb: cdbReducer,
}, },
epics: protectEpics([...filteredCoreEpics, ...allEpics]), epics: protectEpics([...filteredCoreEpics, ...allEpics] as any),
epicDependencies: { contentProvider }, epicDependencies: { contentProvider },
epicMiddleware: customMiddlewares.concat(catchErrorMiddleware), epicMiddleware: customMiddlewares.concat(catchErrorMiddleware),
enhancer: composeEnhancers, enhancer: composeEnhancers,
@ -106,5 +106,5 @@ export const getCoreEpics = (autoStartKernelOnNotebookOpen: boolean): Epic[] =>
filteredCoreEpics.push(coreEpics.launchKernelWhenNotebookSetEpic); filteredCoreEpics.push(coreEpics.launchKernelWhenNotebookSetEpic);
} }
return filteredCoreEpics; return filteredCoreEpics as any;
}; };

2
src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx
View File

@ -23,7 +23,7 @@ describe("Cassandra add collection pane test", () => {
expect(screen.getByRole("combobox", { name: "Choose existing keyspace id" })).toBeDefined(); expect(screen.getByRole("combobox", { name: "Choose existing keyspace id" })).toBeDefined();
}); });
it("enter Keyspace name ", () => { it("enter Keyspace name", () => {
fireEvent.change(screen.getByRole("textbox", { name: "Keyspace id" }), { target: { value: "table1" } }); fireEvent.change(screen.getByRole("textbox", { name: "Keyspace id" }), { target: { value: "table1" } });
expect(screen.getByText("CREATE TABLE table1.")).toBeDefined(); expect(screen.getByText("CREATE TABLE table1.")).toBeDefined();
}); });

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

@ -32,7 +32,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small" variant="small"
> >
<span <span
className="css-53" className="css-109"
> >
Confirm by typing the Confirm by typing the
container container
@ -340,19 +340,19 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value="" value=""
> >
<div <div
className="ms-TextField is-required root-55" className="ms-TextField is-required root-111"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-56" className="ms-TextField-fieldGroup fieldGroup-112"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-label="Confirm by typing the container id" aria-label="Confirm by typing the container id"
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-57" className="ms-TextField-field field-113"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -1259,7 +1259,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1285,7 +1285,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1297,14 +1297,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1335,7 +1337,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -1362,7 +1364,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1387,14 +1389,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1428,7 +1432,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1445,7 +1449,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -1457,7 +1461,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1473,12 +1477,13 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1489,14 +1494,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1519,13 +1526,21 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -1538,7 +1553,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1551,7 +1566,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1565,7 +1580,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1579,7 +1594,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -1595,7 +1610,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1604,7 +1619,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1620,7 +1635,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -1632,7 +1647,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1645,7 +1660,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1667,18 +1682,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -1728,7 +1743,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1737,7 +1752,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1745,7 +1760,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -1767,14 +1782,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1796,7 +1813,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2086,7 +2103,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
> >
<button <button
aria-label="OK" aria-label="OK"
className="ms-Button ms-Button--primary root-66" className="ms-Button ms-Button--primary root-122"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2098,16 +2115,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-67" className="ms-Button-flexContainer flexContainer-123"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-68" className="ms-Button-textContainer textContainer-124"
> >
<span <span
className="ms-Button-label label-70" className="ms-Button-label label-126"
id="id__3" id="id__5"
key="id__3" key="id__5"
> >
OK OK
</span> </span>

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

@ -306,7 +306,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-53" className="ms-Label root-109"
> >
Partition key value Partition key value
</label> </label>
@ -316,11 +316,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true} horizontal={true}
> >
<div <div
className="ms-Stack css-54" className="ms-Stack css-110"
> >
<Dropdown <Dropdown
defaultSelectedKey="string" defaultSelectedKey="string"
key=".0:$.0" key=".0:$.$.0"
label="Key" label="Key"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -661,7 +661,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}, },
] ]
} }
responsiveMode={3} responsiveMode={0}
styles={[Function]} styles={[Function]}
tabIndex={0} tabIndex={0}
theme={ theme={
@ -1225,7 +1225,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label ms-Dropdown-label root-71" className="ms-Label ms-Dropdown-label root-129"
id="Dropdown0-label" id="Dropdown0-label"
> >
Key Key
@ -1236,7 +1236,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-labelledby="Dropdown0-label Dropdown0-option" aria-labelledby="Dropdown0-label Dropdown0-option"
className="ms-Dropdown dropdown-55" className="ms-Dropdown dropdown-111"
data-is-focusable={true} data-is-focusable={true}
data-ktp-target={true} data-ktp-target={true}
id="Dropdown0" id="Dropdown0"
@ -1251,25 +1251,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
tabIndex={0} tabIndex={0}
> >
<span <span
aria-atomic={true}
aria-invalid={false} aria-invalid={false}
aria-live="polite" className="ms-Dropdown-title title-156"
className="ms-Dropdown-title title-97"
id="Dropdown0-option" id="Dropdown0-option"
> >
String String
</span> </span>
<span <span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-57" className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
> >
<StyledIconBase <StyledIconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-58" className="ms-Dropdown-caretDown caretDown-114"
iconName="ChevronDown" iconName="ChevronDown"
> >
<IconBase <IconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-58" className="ms-Dropdown-caretDown caretDown-114"
iconName="ChevronDown" iconName="ChevronDown"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -1548,7 +1546,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-73" className="ms-Dropdown-caretDown caretDown-132"
data-icon-name="ChevronDown" data-icon-name="ChevronDown"
> >
@ -1563,7 +1561,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</Dropdown> </Dropdown>
<StyledTextFieldBase <StyledTextFieldBase
id="confirmCollectionId" id="confirmCollectionId"
key=".0:$.1" key=".0:$.$.1"
label="Value" label="Value"
onChange={[Function]} onChange={[Function]}
tabIndex={0} tabIndex={0}
@ -1852,7 +1850,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField root-75" className="ms-TextField root-134"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
@ -2141,7 +2139,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-53" className="ms-Label root-109"
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel3" id="TextFieldLabel3"
> >
@ -2150,12 +2148,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</LabelBase> </LabelBase>
</StyledLabelBase> </StyledLabelBase>
<div <div
className="ms-TextField-fieldGroup fieldGroup-76" className="ms-TextField-fieldGroup fieldGroup-135"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-labelledby="TextFieldLabel3" aria-labelledby="TextFieldLabel3"
className="ms-TextField-field field-77" className="ms-TextField-field field-136"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -2464,7 +2462,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-53" className="ms-Label root-109"
> >
Enter input parameters (if any) Enter input parameters (if any)
</label> </label>
@ -2474,11 +2472,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
horizontal={true} horizontal={true}
> >
<div <div
className="ms-Stack css-54" className="ms-Stack css-110"
> >
<Dropdown <Dropdown
defaultSelectedKey="string" defaultSelectedKey="string"
key=".0:$.0" key=".0:$.$.0"
label="Key" label="Key"
onChange={[Function]} onChange={[Function]}
options={ options={
@ -2819,7 +2817,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}, },
] ]
} }
responsiveMode={3} responsiveMode={0}
styles={[Function]} styles={[Function]}
tabIndex={0} tabIndex={0}
theme={ theme={
@ -3101,12 +3099,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<StyledLabelBase <StyledLabelBase
className="ms-Dropdown-label" className="ms-Dropdown-label"
id="Dropdown4-label" id="Dropdown6-label"
styles={[Function]} styles={[Function]}
> >
<LabelBase <LabelBase
className="ms-Dropdown-label" className="ms-Dropdown-label"
id="Dropdown4-label" id="Dropdown6-label"
styles={[Function]} styles={[Function]}
theme={ theme={
Object { Object {
@ -3383,8 +3381,8 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label ms-Dropdown-label root-71" className="ms-Label ms-Dropdown-label root-129"
id="Dropdown4-label" id="Dropdown6-label"
> >
Key Key
</label> </label>
@ -3393,11 +3391,11 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<div <div
aria-expanded="false" aria-expanded="false"
aria-haspopup="listbox" aria-haspopup="listbox"
aria-labelledby="Dropdown4-label Dropdown4-option" aria-labelledby="Dropdown6-label Dropdown6-option"
className="ms-Dropdown dropdown-55" className="ms-Dropdown dropdown-111"
data-is-focusable={true} data-is-focusable={true}
data-ktp-target={true} data-ktp-target={true}
id="Dropdown4" id="Dropdown6"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
onClick={[Function]} onClick={[Function]}
@ -3409,25 +3407,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
tabIndex={0} tabIndex={0}
> >
<span <span
aria-atomic={true}
aria-invalid={false} aria-invalid={false}
aria-live="polite" className="ms-Dropdown-title title-156"
className="ms-Dropdown-title title-97" id="Dropdown6-option"
id="Dropdown4-option"
> >
String String
</span> </span>
<span <span
className="ms-Dropdown-caretDownWrapper caretDownWrapper-57" className="ms-Dropdown-caretDownWrapper caretDownWrapper-113"
> >
<StyledIconBase <StyledIconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-58" className="ms-Dropdown-caretDown caretDown-114"
iconName="ChevronDown" iconName="ChevronDown"
> >
<IconBase <IconBase
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-58" className="ms-Dropdown-caretDown caretDown-114"
iconName="ChevronDown" iconName="ChevronDown"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -3706,7 +3702,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Dropdown-caretDown caretDown-73" className="ms-Dropdown-caretDown caretDown-132"
data-icon-name="ChevronDown" data-icon-name="ChevronDown"
> >
@ -3722,7 +3718,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<StyledTextFieldBase <StyledTextFieldBase
defaultValue="" defaultValue=""
id="confirmCollectionId" id="confirmCollectionId"
key=".0:$.1" key=".0:$.$.1"
label="Param" label="Param"
onChange={[Function]} onChange={[Function]}
tabIndex={0} tabIndex={0}
@ -4012,19 +4008,19 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField root-75" className="ms-TextField root-134"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<StyledLabelBase <StyledLabelBase
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel7" id="TextFieldLabel9"
styles={[Function]} styles={[Function]}
> >
<LabelBase <LabelBase
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel7" id="TextFieldLabel9"
styles={[Function]} styles={[Function]}
theme={ theme={
Object { Object {
@ -4301,21 +4297,21 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
} }
> >
<label <label
className="ms-Label root-53" className="ms-Label root-109"
htmlFor="confirmCollectionId" htmlFor="confirmCollectionId"
id="TextFieldLabel7" id="TextFieldLabel9"
> >
Param Param
</label> </label>
</LabelBase> </LabelBase>
</StyledLabelBase> </StyledLabelBase>
<div <div
className="ms-TextField-fieldGroup fieldGroup-76" className="ms-TextField-fieldGroup fieldGroup-135"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-labelledby="TextFieldLabel7" aria-labelledby="TextFieldLabel9"
className="ms-TextField-field field-77" className="ms-TextField-field field-136"
id="confirmCollectionId" id="confirmCollectionId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -4331,6 +4327,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</TextFieldBase> </TextFieldBase>
</StyledTextFieldBase> </StyledTextFieldBase>
<div <div
key=".0:$.$.2/.$.$.0"
tabIndex={0} tabIndex={0}
> >
<StyledImageBase <StyledImageBase
@ -4628,7 +4625,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image addRemoveIconLabel root-86" className="ms-Image addRemoveIconLabel root-145"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -4638,7 +4635,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Delete param" alt="Delete param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
id="deleteparam" id="deleteparam"
key="fabricImage[object Object]" key="fabricImage[object Object]"
onClick={[Function]} onClick={[Function]}
@ -4652,6 +4649,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</StyledImageBase> </StyledImageBase>
</div> </div>
<div <div
key=".0:$.$.2/.$.$.1"
tabIndex={0} tabIndex={0}
> >
<StyledImageBase <StyledImageBase
@ -4949,7 +4947,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image addRemoveIconLabel root-86" className="ms-Image addRemoveIconLabel root-145"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -4959,7 +4957,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Add param" alt="Add param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
id="addparam" id="addparam"
key="fabricImage[object Object]" key="fabricImage[object Object]"
onClick={[Function]} onClick={[Function]}
@ -4981,14 +4979,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
tabIndex={0} tabIndex={0}
> >
<div <div
className="ms-Stack css-54" className="ms-Stack css-110"
onClick={[Function]} onClick={[Function]}
tabIndex={0} tabIndex={0}
> >
<StyledImageBase <StyledImageBase
alt="Add param" alt="Add param"
height={30} height={30}
key=".0:$.0" key=".0:$.$.0"
src={Object {}} src={Object {}}
width={20} width={20}
> >
@ -5273,7 +5271,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
width={20} width={20}
> >
<div <div
className="ms-Image root-86" className="ms-Image root-145"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -5283,7 +5281,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<img <img
alt="Add param" alt="Add param"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-146"
key="fabricImage[object Object]" key="fabricImage[object Object]"
onError={[Function]} onError={[Function]}
onLoad={[Function]} onLoad={[Function]}
@ -5294,10 +5292,10 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</StyledImageBase> </StyledImageBase>
<Text <Text
className="addNewParamStyle" className="addNewParamStyle"
key=".0:$.1" key=".0:$.$.1"
> >
<span <span
className="addNewParamStyle css-88" className="addNewParamStyle css-147"
> >
Add New Param Add New Param
</span> </span>
@ -6194,7 +6192,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -6220,7 +6218,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -6232,14 +6230,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -6270,7 +6270,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -6297,7 +6297,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -6322,14 +6322,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -6363,7 +6365,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -6380,7 +6382,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -6392,7 +6394,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -6408,12 +6410,13 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -6424,14 +6427,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -6454,13 +6459,21 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -6473,7 +6486,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -6486,7 +6499,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -6500,7 +6513,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -6514,7 +6527,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -6530,7 +6543,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -6539,7 +6552,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -6555,7 +6568,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -6567,7 +6580,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -6580,7 +6593,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -6602,18 +6615,18 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -6663,7 +6676,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -6672,7 +6685,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -6680,7 +6693,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -6702,14 +6715,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -6731,7 +6746,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -7021,7 +7036,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
> >
<button <button
aria-label="Execute" aria-label="Execute"
className="ms-Button ms-Button--primary root-89" className="ms-Button ms-Button--primary root-148"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -7033,16 +7048,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-90" className="ms-Button-flexContainer flexContainer-149"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-91" className="ms-Button-textContainer textContainer-150"
> >
<span <span
className="ms-Button-label label-93" className="ms-Button-label label-152"
id="id__8" id="id__12"
key="id__8" key="id__12"
> >
Execute Execute
</span> </span>

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

@ -901,7 +901,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -927,7 +927,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -939,14 +939,16 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -977,7 +979,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -1004,7 +1006,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1029,14 +1031,16 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1070,7 +1074,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1087,7 +1091,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -1099,7 +1103,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1115,12 +1119,13 @@ exports[`Right Pane Form should render Default properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1131,14 +1136,16 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1161,13 +1168,21 @@ exports[`Right Pane Form should render Default properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -1180,7 +1195,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1193,7 +1208,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1207,7 +1222,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1221,7 +1236,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -1237,7 +1252,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1246,7 +1261,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1262,7 +1277,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -1274,7 +1289,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1287,7 +1302,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1309,18 +1324,18 @@ exports[`Right Pane Form should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -1370,7 +1385,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1379,7 +1394,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1387,7 +1402,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -1409,14 +1424,16 @@ exports[`Right Pane Form should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1438,7 +1455,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1728,7 +1745,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
> >
<button <button
aria-label="Load" aria-label="Load"
className="ms-Button ms-Button--primary root-53" className="ms-Button ms-Button--primary root-109"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -1740,14 +1757,14 @@ exports[`Right Pane Form should render Default properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-54" className="ms-Button-flexContainer flexContainer-110"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-55" className="ms-Button-textContainer textContainer-111"
> >
<span <span
className="ms-Button-label label-57" className="ms-Button-label label-113"
id="id__0" id="id__0"
key="id__0" key="id__0"
> >

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

@ -357,7 +357,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
value="" value=""
> >
<div <div
className="ms-TextField is-required root-54" className="ms-TextField is-required root-110"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
@ -648,7 +648,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
} }
> >
<label <label
className="ms-Label root-65" className="ms-Label root-121"
htmlFor="TextField0" htmlFor="TextField0"
id="TextFieldLabel2" id="TextFieldLabel2"
> >
@ -657,13 +657,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</LabelBase> </LabelBase>
</StyledLabelBase> </StyledLabelBase>
<div <div
className="ms-TextField-fieldGroup fieldGroup-55" className="ms-TextField-fieldGroup fieldGroup-111"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-labelledby="TextFieldLabel2" aria-labelledby="TextFieldLabel2"
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-56" className="ms-TextField-field field-112"
id="TextField0" id="TextField0"
name="collectionIdConfirmation" name="collectionIdConfirmation"
onBlur={[Function]} onBlur={[Function]}
@ -1569,7 +1569,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1595,7 +1595,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1607,14 +1607,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1645,7 +1647,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -1672,7 +1674,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1697,14 +1699,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1738,7 +1742,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1755,7 +1759,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -1767,7 +1771,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1783,12 +1787,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1799,14 +1804,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1829,13 +1836,21 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -1848,7 +1863,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1861,7 +1876,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1875,7 +1890,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1889,7 +1904,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -1905,7 +1920,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1914,7 +1929,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1930,7 +1945,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -1942,7 +1957,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1955,7 +1970,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1977,18 +1992,18 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -2038,7 +2053,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2047,7 +2062,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2055,7 +2070,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -2077,14 +2092,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2106,7 +2123,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2396,7 +2413,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
> >
<button <button
aria-label="Create" aria-label="Create"
className="ms-Button ms-Button--primary root-66" className="ms-Button ms-Button--primary root-122"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2408,16 +2425,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-67" className="ms-Button-flexContainer flexContainer-123"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-68" className="ms-Button-textContainer textContainer-124"
> >
<span <span
className="ms-Button-label label-70" className="ms-Button-label label-126"
id="id__3" id="id__5"
key="id__3" key="id__5"
> >
Create Create
</span> </span>

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

@ -28,7 +28,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
> >
<Text> <Text>
<span <span
className="css-53" className="css-109"
> >
Select the columns that you want to query. Select the columns that you want to query.
</span> </span>
@ -323,32 +323,30 @@ exports[`Table query select Panel should render Default properly 1`] = `
} }
> >
<div <div
className="ms-Checkbox is-checked is-enabled root-54" className="ms-Checkbox is-checked is-enabled root-110"
> >
<input <input
aria-checked="true"
aria-label="Available Columns"
checked={true} checked={true}
className="input-55" className="input-111"
data-ktp-execute-target={true} data-ktp-execute-target={true}
id="availableCheckbox" id="availableCheckbox"
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
/> />
<label <label
className="ms-Checkbox-label label-56" className="ms-Checkbox-label label-112"
htmlFor="availableCheckbox" htmlFor="availableCheckbox"
> >
<div <div
className="ms-Checkbox-checkbox checkbox-57" className="ms-Checkbox-checkbox checkbox-113"
data-ktp-target={true} data-ktp-target={true}
> >
<StyledIconBase <StyledIconBase
className="ms-Checkbox-checkmark checkmark-58" className="ms-Checkbox-checkmark checkmark-114"
iconName="CheckMark" iconName="CheckMark"
> >
<IconBase <IconBase
className="ms-Checkbox-checkmark checkmark-58" className="ms-Checkbox-checkmark checkmark-114"
iconName="CheckMark" iconName="CheckMark"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -627,7 +625,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Checkbox-checkmark checkmark-61" className="ms-Checkbox-checkmark checkmark-118"
data-icon-name="CheckMark" data-icon-name="CheckMark"
> >
@ -636,8 +634,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
</StyledIconBase> </StyledIconBase>
</div> </div>
<span <span
aria-hidden="true" className="ms-Checkbox-text text-115"
className="ms-Checkbox-text text-59"
> >
Available Columns Available Columns
</span> </span>
@ -933,14 +930,12 @@ exports[`Table query select Panel should render Default properly 1`] = `
} }
> >
<div <div
className="ms-Checkbox is-checked is-enabled root-54" className="ms-Checkbox is-checked is-enabled root-110"
> >
<input <input
aria-checked="true"
aria-disabled={false} aria-disabled={false}
aria-label=""
checked={true} checked={true}
className="input-55" className="input-111"
data-ktp-execute-target={true} data-ktp-execute-target={true}
disabled={false} disabled={false}
id="checkbox-0" id="checkbox-0"
@ -948,19 +943,19 @@ exports[`Table query select Panel should render Default properly 1`] = `
type="checkbox" type="checkbox"
/> />
<label <label
className="ms-Checkbox-label label-56" className="ms-Checkbox-label label-112"
htmlFor="checkbox-0" htmlFor="checkbox-0"
> >
<div <div
className="ms-Checkbox-checkbox checkbox-57" className="ms-Checkbox-checkbox checkbox-113"
data-ktp-target={true} data-ktp-target={true}
> >
<StyledIconBase <StyledIconBase
className="ms-Checkbox-checkmark checkmark-58" className="ms-Checkbox-checkmark checkmark-114"
iconName="CheckMark" iconName="CheckMark"
> >
<IconBase <IconBase
className="ms-Checkbox-checkmark checkmark-58" className="ms-Checkbox-checkmark checkmark-114"
iconName="CheckMark" iconName="CheckMark"
styles={[Function]} styles={[Function]}
theme={ theme={
@ -1239,7 +1234,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
> >
<i <i
aria-hidden={true} aria-hidden={true}
className="ms-Checkbox-checkmark checkmark-61" className="ms-Checkbox-checkmark checkmark-118"
data-icon-name="CheckMark" data-icon-name="CheckMark"
> >
@ -2143,7 +2138,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2169,7 +2164,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2181,14 +2176,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -2219,7 +2216,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -2246,7 +2243,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -2271,14 +2268,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -2312,7 +2311,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2329,7 +2328,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -2341,7 +2340,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -2357,12 +2356,13 @@ exports[`Table query select Panel should render Default properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -2373,14 +2373,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2403,13 +2405,21 @@ exports[`Table query select Panel should render Default properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -2422,7 +2432,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -2435,7 +2445,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -2449,7 +2459,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -2463,7 +2473,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -2479,7 +2489,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -2488,7 +2498,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2504,7 +2514,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -2516,7 +2526,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -2529,7 +2539,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -2551,18 +2561,18 @@ exports[`Table query select Panel should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -2612,7 +2622,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2621,7 +2631,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2629,7 +2639,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -2651,14 +2661,16 @@ exports[`Table query select Panel should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2680,7 +2692,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2970,7 +2982,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
> >
<button <button
aria-label="OK" aria-label="OK"
className="ms-Button ms-Button--primary root-68" className="ms-Button ms-Button--primary root-125"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2982,14 +2994,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-69" className="ms-Button-flexContainer flexContainer-126"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-70" className="ms-Button-textContainer textContainer-127"
> >
<span <span
className="ms-Button-label label-72" className="ms-Button-label label-129"
id="id__1" id="id__1"
key="id__1" key="id__1"
> >

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

@ -35,7 +35,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
> >
<div <div
aria-label="Add Property" aria-label="Add Property"
className="ms-Stack addButtonEntiy css-53" className="ms-Stack addButtonEntiy css-109"
onClick={[Function]} onClick={[Function]}
onKeyPress={[Function]} onKeyPress={[Function]}
tabIndex={0} tabIndex={0}
@ -43,7 +43,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
<StyledImageBase <StyledImageBase
alt="Add Property" alt="Add Property"
height={30} height={30}
key=".0:$.0" key=".0:$.$.0"
src={Object {}} src={Object {}}
width={16} width={16}
> >
@ -328,7 +328,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
width={16} width={16}
> >
<div <div
className="ms-Image root-54" className="ms-Image root-110"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -338,7 +338,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
> >
<img <img
alt="Add Property" alt="Add Property"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-111"
key="fabricImage[object Object]" key="fabricImage[object Object]"
onError={[Function]} onError={[Function]}
onLoad={[Function]} onLoad={[Function]}
@ -349,10 +349,10 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
</StyledImageBase> </StyledImageBase>
<Text <Text
className="addNewParamStyle" className="addNewParamStyle"
key=".0:$.1" key=".0:$.$.1"
> >
<span <span
className="addNewParamStyle css-56" className="addNewParamStyle css-112"
> >
Add Property Add Property
</span> </span>
@ -1249,7 +1249,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1275,7 +1275,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1287,14 +1287,16 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1325,7 +1327,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -1352,7 +1354,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1377,14 +1379,16 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1418,7 +1422,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1435,7 +1439,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -1447,7 +1451,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1463,12 +1467,13 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1479,14 +1484,16 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1509,13 +1516,21 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -1528,7 +1543,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1541,7 +1556,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1555,7 +1570,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1569,7 +1584,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -1585,7 +1600,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1594,7 +1609,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1610,7 +1625,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -1622,7 +1637,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1635,7 +1650,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1657,18 +1672,18 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -1718,7 +1733,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1727,7 +1742,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1735,7 +1750,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -1757,14 +1772,16 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1786,7 +1803,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2076,7 +2093,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
> >
<button <button
aria-label="Add Entity" aria-label="Add Entity"
className="ms-Button ms-Button--primary root-57" className="ms-Button ms-Button--primary root-113"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2088,14 +2105,14 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-58" className="ms-Button-flexContainer flexContainer-114"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-59" className="ms-Button-textContainer textContainer-115"
> >
<span <span
className="ms-Button-label label-61" className="ms-Button-label label-117"
id="id__0" id="id__0"
key="id__0" key="id__0"
> >

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

@ -32,13 +32,13 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
onClick={[Function]} onClick={[Function]}
> >
<div <div
className="ms-Stack addButtonEntiy css-53" className="ms-Stack addButtonEntiy css-109"
onClick={[Function]} onClick={[Function]}
> >
<StyledImageBase <StyledImageBase
alt="Add Entity" alt="Add Entity"
height={30} height={30}
key=".0:$.0" key=".0:$.$.0"
src={Object {}} src={Object {}}
width={16} width={16}
> >
@ -323,7 +323,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
width={16} width={16}
> >
<div <div
className="ms-Image root-54" className="ms-Image root-110"
style={ style={
Object { Object {
"height": 30, "height": 30,
@ -333,7 +333,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
> >
<img <img
alt="Add Entity" alt="Add Entity"
className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55" className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-111"
key="fabricImage[object Object]" key="fabricImage[object Object]"
onError={[Function]} onError={[Function]}
onLoad={[Function]} onLoad={[Function]}
@ -344,10 +344,10 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
</StyledImageBase> </StyledImageBase>
<Text <Text
className="addNewParamStyle" className="addNewParamStyle"
key=".0:$.1" key=".0:$.$.1"
> >
<span <span
className="addNewParamStyle css-56" className="addNewParamStyle css-112"
> >
Add Property Add Property
</span> </span>
@ -1255,7 +1255,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1281,7 +1281,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1293,14 +1293,16 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1331,7 +1333,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -1358,7 +1360,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1383,14 +1385,16 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -1424,7 +1428,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1441,7 +1445,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -1453,7 +1457,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -1469,12 +1473,13 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -1485,14 +1490,16 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1515,13 +1522,21 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -1534,7 +1549,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -1547,7 +1562,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1561,7 +1576,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -1575,7 +1590,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -1591,7 +1606,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -1600,7 +1615,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1616,7 +1631,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -1628,7 +1643,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -1641,7 +1656,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -1663,18 +1678,18 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -1724,7 +1739,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -1733,7 +1748,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1741,7 +1756,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -1763,14 +1778,16 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -1792,7 +1809,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2082,7 +2099,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
> >
<button <button
aria-label="Update" aria-label="Update"
className="ms-Button ms-Button--primary root-57" className="ms-Button ms-Button--primary root-113"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2094,14 +2111,14 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-58" className="ms-Button-flexContainer flexContainer-114"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-59" className="ms-Button-textContainer textContainer-115"
> >
<span <span
className="ms-Button-label label-61" className="ms-Button-label label-117"
id="id__0" id="id__0"
key="id__0" key="id__0"
> >

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

@ -25,13 +25,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
verticalAlign="center" verticalAlign="center"
> >
<div <div
className="ms-Stack panelInfoErrorContainer css-53" className="ms-Stack panelInfoErrorContainer css-109"
> >
<StyledIconBase <StyledIconBase
aria-label="warning" aria-label="warning"
className="panelWarningIcon" className="panelWarningIcon"
iconName="WarningSolid" iconName="WarningSolid"
key=".0:$.0" key=".0:$.$.0"
> >
<IconBase <IconBase
aria-label="warning" aria-label="warning"
@ -314,7 +314,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
> >
<i <i
aria-label="warning" aria-label="warning"
className="panelWarningIcon root-55" className="panelWarningIcon root-112"
data-icon-name="WarningSolid" data-icon-name="WarningSolid"
role="img" role="img"
> >
@ -325,7 +325,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
<span <span
aria-live="assertive" aria-live="assertive"
className="panelWarningErrorDetailsLinkContainer" className="panelWarningErrorDetailsLinkContainer"
key=".0:$.1" key=".0:$.$.1"
role="alert" role="alert"
> >
<Text <Text
@ -335,7 +335,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
> >
<span <span
aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources." aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
className="panelWarningErrorMessage css-56" className="panelWarningErrorMessage css-113"
> >
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources. Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span> </span>
@ -359,7 +359,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
variant="small" variant="small"
> >
<span <span
className="css-56" className="css-113"
> >
Confirm by typing the database id Confirm by typing the database id
</span> </span>
@ -663,19 +663,19 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField is-required root-58" className="ms-TextField is-required root-115"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-59" className="ms-TextField-fieldGroup fieldGroup-116"
> >
<input <input
aria-invalid={false} aria-invalid={false}
aria-label="Confirm by typing the database id" aria-label="Confirm by typing the database id"
autoFocus={true} autoFocus={true}
className="ms-TextField-field field-60" className="ms-TextField-field field-117"
id="confirmDatabaseId" id="confirmDatabaseId"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -699,7 +699,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
variant="small" variant="small"
> >
<span <span
className="css-69" className="css-126"
> >
Help us improve Azure Cosmos DB! Help us improve Azure Cosmos DB!
</span> </span>
@ -709,7 +709,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
variant="small" variant="small"
> >
<span <span
className="css-69" className="css-126"
> >
What is the reason why you are deleting this database? What is the reason why you are deleting this database?
</span> </span>
@ -1013,18 +1013,18 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
validateOnLoad={true} validateOnLoad={true}
> >
<div <div
className="ms-TextField ms-TextField--multiline root-58" className="ms-TextField ms-TextField--multiline root-115"
> >
<div <div
className="ms-TextField-wrapper" className="ms-TextField-wrapper"
> >
<div <div
className="ms-TextField-fieldGroup fieldGroup-70" className="ms-TextField-fieldGroup fieldGroup-127"
> >
<textarea <textarea
aria-invalid={false} aria-invalid={false}
aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?" aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
className="ms-TextField-field field-71" className="ms-TextField-field field-128"
id="deleteDatabaseFeedbackInput" id="deleteDatabaseFeedbackInput"
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]} onChange={[Function]}
@ -1929,7 +1929,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"iconDisabled": Object { "iconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1955,7 +1955,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"menuIconDisabled": Object { "menuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -1967,14 +1967,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -2005,7 +2007,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"display": "inline-block", "display": "inline-block",
"padding": "0 16px", "padding": "0 16px",
"selectors": Object { "selectors": Object {
":active > *": Object { ":active > span": Object {
"left": 0, "left": 0,
"position": "relative", "position": "relative",
"top": 0, "top": 0,
@ -2032,7 +2034,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -2057,14 +2059,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid transparent", "border": "1px solid transparent",
"borderRadius": undefined,
"bottom": 2, "bottom": 2,
"content": "\\"\\"", "content": "\\"\\"",
"left": 2, "left": 2,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 2, "right": 2,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
"outlineColor": "ButtonText", "outlineColor": "ButtonText",
@ -2098,7 +2102,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"backgroundColor": "#f3f2f1", "backgroundColor": "#f3f2f1",
"color": "#d2d0ce", "color": "#d2d0ce",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2115,7 +2119,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"border": "1px solid #106ebe", "border": "1px solid #106ebe",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"borderColor": "Highlight", "borderColor": "Highlight",
"color": "Window", "color": "Window",
@ -2127,7 +2131,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"border": "1px solid #005a9e", "border": "1px solid #005a9e",
"color": "#ffffff", "color": "#ffffff",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"borderColor": "WindowText", "borderColor": "WindowText",
@ -2143,12 +2147,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"overflow": "hidden", "overflow": "hidden",
"padding": 0, "padding": 0,
"position": "absolute", "position": "absolute",
"whiteSpace": "nowrap",
"width": 1, "width": 1,
}, },
"splitButtonContainer": Array [ "splitButtonContainer": Array [
Object { Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
}, },
}, },
@ -2159,14 +2164,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": "none",
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2189,13 +2196,21 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderRight": "none", "borderRight": "none",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
}, },
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"border": "none", "border": "none",
"borderBottomRightRadius": "0", "borderBottomRightRadius": "0",
"borderTopRightRadius": "0", "borderTopRightRadius": "0",
"flexGrow": "1",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { ":active": Object {
"border": "none",
},
":hover": Object {
"border": "none",
},
"@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid WindowText", "border": "1px solid WindowText",
@ -2208,7 +2223,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
".ms-Button--primary + .ms-Button": Object { ".ms-Button--primary + .ms-Button": Object {
"border": "none", "border": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "1px solid WindowText", "border": "1px solid WindowText",
"borderLeftWidth": "0", "borderLeftWidth": "0",
}, },
@ -2221,7 +2236,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -2235,7 +2250,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
"color": "Window", "color": "Window",
@ -2249,7 +2264,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"border": "none", "border": "none",
"outline": "none", "outline": "none",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"MsHighContrastAdjust": "none", "MsHighContrastAdjust": "none",
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
@ -2265,7 +2280,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Highlight", "backgroundColor": "Highlight",
"color": "Window", "color": "Window",
}, },
@ -2274,7 +2289,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
".ms-Button.is-disabled": Object { ".ms-Button.is-disabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2290,7 +2305,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
}, },
}, },
@ -2302,7 +2317,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "WindowText",
}, },
}, },
@ -2315,7 +2330,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"position": "absolute", "position": "absolute",
"right": 31, "right": 31,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "GrayText", "backgroundColor": "GrayText",
}, },
}, },
@ -2337,18 +2352,18 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
":hover": Object { ":hover": Object {
"backgroundColor": "#106ebe", "backgroundColor": "#106ebe",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "Highlight", "color": "Highlight",
}, },
}, },
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "WindowText", "backgroundColor": "Canvas",
}, },
}, },
}, },
Object { Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"color": "WindowText", "color": "WindowText",
}, },
@ -2398,7 +2413,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Button--primary": Object { ".ms-Button--primary": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"borderColor": "GrayText", "borderColor": "GrayText",
"color": "GrayText", "color": "GrayText",
@ -2407,7 +2422,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
}, },
".ms-Button-menuIcon": Object { ".ms-Button-menuIcon": Object {
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2415,7 +2430,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
":hover": Object { ":hover": Object {
"cursor": "default", "cursor": "default",
}, },
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"backgroundColor": "Window", "backgroundColor": "Window",
"border": "1px solid GrayText", "border": "1px solid GrayText",
"color": "GrayText", "color": "GrayText",
@ -2437,14 +2452,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"selectors": Object { "selectors": Object {
".ms-Fabric--isFocusVisible &:focus:after": Object { ".ms-Fabric--isFocusVisible &:focus:after": Object {
"border": "1px solid #ffffff", "border": "1px solid #ffffff",
"borderRadius": undefined,
"bottom": 3, "bottom": 3,
"content": "\\"\\"", "content": "\\"\\"",
"left": 3, "left": 3,
"outline": "1px solid #605e5c", "outline": "1px solid #605e5c",
"pointerEvents": undefined,
"position": "absolute", "position": "absolute",
"right": 3, "right": 3,
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"border": "none", "border": "none",
"bottom": -2, "bottom": -2,
"left": -2, "left": -2,
@ -2466,7 +2483,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
"splitButtonMenuIconDisabled": Object { "splitButtonMenuIconDisabled": Object {
"color": "#a19f9d", "color": "#a19f9d",
"selectors": Object { "selectors": Object {
"@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object { "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": Object {
"color": "GrayText", "color": "GrayText",
}, },
}, },
@ -2756,7 +2773,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
> >
<button <button
aria-label="OK" aria-label="OK"
className="ms-Button ms-Button--primary root-73" className="ms-Button ms-Button--primary root-130"
data-is-focusable={true} data-is-focusable={true}
id="sidePanelOkButton" id="sidePanelOkButton"
onClick={[Function]} onClick={[Function]}
@ -2768,16 +2785,16 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
type="submit" type="submit"
> >
<span <span
className="ms-Button-flexContainer flexContainer-74" className="ms-Button-flexContainer flexContainer-131"
data-automationid="splitbuttonprimary" data-automationid="splitbuttonprimary"
> >
<span <span
className="ms-Button-textContainer textContainer-75" className="ms-Button-textContainer textContainer-132"
> >
<span <span
className="ms-Button-label label-77" className="ms-Button-label label-134"
id="id__6" id="id__10"
key="id__6" key="id__10"
> >
OK OK
</span> </span>

2
src/Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal.test.tsx
View File

@ -99,7 +99,7 @@ describe("Query Copilot Feedback Modal snapshot test", () => {
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
it("should render dont show again button and check it ", () => { it("should render dont show again button and check it", () => {
mockUseCopilotStore.mockReturnValue({ mockUseCopilotStore.mockReturnValue({
...mockReturnValue, ...mockReturnValue,
showFeedbackModal: true, showFeedbackModal: true,

1
src/Explorer/QueryCopilot/Shared/QueryCopilotClient.test.ts
View File

@ -135,6 +135,7 @@ describe("Query Copilot Client", () => {
}, },
explorer: new Explorer(), explorer: new Explorer(),
}).catch((error) => { }).catch((error) => {
// eslint-disable-next-line jest/no-conditional-expect
expect(error.message).toEqual("Mock error"); expect(error.message).toEqual("Mock error");
}); });

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

@ -6,7 +6,7 @@ const mockedDate = new Date(2023, 7, 15);
jest.spyOn(global, "Date").mockImplementation(() => mockedDate as unknown as string); jest.spyOn(global, "Date").mockImplementation(() => mockedDate as unknown as string);
describe("Welcome Bubble snapshot test", () => { describe("Welcome Bubble snapshot test", () => {
it("should render ", () => { it("should render", () => {
const wrapper = shallow(<WelcomeBubble />); const wrapper = shallow(<WelcomeBubble />);
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });

2
src/Explorer/QueryCopilot/V2/Header/Header.test.tsx
View File

@ -5,7 +5,7 @@ import React from "react";
import { Header } from "./Header"; import { Header } from "./Header";
describe("Header snapshot test", () => { describe("Header snapshot test", () => {
it("should close on button click ", () => { it("should close on button click", () => {
const wrapper = shallow(<Header />); const wrapper = shallow(<Header />);
const iconButton = wrapper.find(IconButton).first(); const iconButton = wrapper.find(IconButton).first();

2
src/Explorer/QueryCopilot/V2/Modal/WelcomeSidebarModal.test.tsx
View File

@ -6,7 +6,7 @@ import React from "react";
import { WelcomeSidebarModal } from "./WelcomeSidebarModal"; import { WelcomeSidebarModal } from "./WelcomeSidebarModal";
describe("Welcome Sidebar Modal snapshot test", () => { describe("Welcome Sidebar Modal snapshot test", () => {
it("should close on button click ", () => { it("should close on button click", () => {
withHooks(() => { withHooks(() => {
const wrapper = shallow(<WelcomeSidebarModal />); const wrapper = shallow(<WelcomeSidebarModal />);
const spy = jest.spyOn(localStorage, "setItem"); const spy = jest.spyOn(localStorage, "setItem");

4
src/Explorer/QueryCopilot/V2/Sidebar/QueryCopilotSidebar.test.tsx
View File

@ -14,7 +14,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
useQueryCopilot.setState(initialState, true); useQueryCopilot.setState(initialState, true);
}); });
it("should render and set copilot used flag ", () => { it("should render and set copilot used flag", () => {
withHooks(() => { withHooks(() => {
useQueryCopilot.getState().setShowCopilotSidebar(true); useQueryCopilot.getState().setShowCopilotSidebar(true);
const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />); const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);
@ -24,7 +24,7 @@ describe("Query Copilot Sidebar snapshot test", () => {
}); });
}); });
it("should render and not set copilot used flag ", () => { it("should render and not set copilot used flag", () => {
withHooks(() => { withHooks(() => {
const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />); const wrapper = shallow(<QueryCopilotSidebar explorer={new Explorer()} />);

16
src/Explorer/Tabs/MongoShellTab/getMongoShellUrl.test.ts
View File

@ -47,11 +47,11 @@ describe("getMongoShellUrl", () => {
queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`; queryString = `resourceId=${userContext.databaseAccount.id}&accountName=${userContext.databaseAccount.name}&mongoEndpoint=${userContext.databaseAccount.properties.documentEndpoint}`;
}); });
it("should return /mongoshell/indexv2.html by default ", () => { it("should return /mongoshell/indexv2.html by default", () => {
expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`); expect(getMongoShellUrl()).toBe(`/mongoshell/indexv2.html?${queryString}`);
}); });
it("should return /mongoshell/indexv2.html when portalEnv==localhost ", () => { it("should return /mongoshell/indexv2.html when portalEnv==localhost", () => {
updateUserContext({ updateUserContext({
portalEnv: "localhost", portalEnv: "localhost",
}); });
@ -149,7 +149,7 @@ describe("getMongoShellUrl", () => {
expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`); expect(getMongoShellUrl()).toBe(`${endpoint}/content/mongoshell/debug/index.html?${queryString}`);
}); });
it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html ", () => { it("configContext.BACKEND_ENDPOINT === '' and configContext.platform === Platform.Hosted, should return /mongoshell/indexv2.html", () => {
resetConfigContext(); resetConfigContext();
updateConfigContext({ updateConfigContext({
platform: Platform.Hosted, platform: Platform.Hosted,
@ -172,7 +172,7 @@ describe("getMongoShellUrl", () => {
}); });
describe("getExtensionEndpoint", () => { describe("getExtensionEndpoint", () => {
it("when platform === Platform.Hosted, backendEndpoint is undefined ", () => { it("when platform === Platform.Hosted, backendEndpoint is undefined", () => {
expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe(""); expect(getExtensionEndpoint(Platform.Hosted, undefined)).toBe("");
}); });
@ -184,15 +184,15 @@ describe("getExtensionEndpoint", () => {
expect(getExtensionEndpoint(Platform.Hosted, null)).toBe(""); expect(getExtensionEndpoint(Platform.Hosted, null)).toBe("");
}); });
it("when platform === Platform.Hosted, backendEndpoint != '' ", () => { it("when platform === Platform.Hosted, backendEndpoint != ''", () => {
expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo"); expect(getExtensionEndpoint(Platform.Hosted, "foo")).toBe("foo");
}); });
it("when platform === Platform.Portal, backendEndpoint is udefined ", () => { it("when platform === Platform.Portal, backendEndpoint is udefined", () => {
expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe(""); expect(getExtensionEndpoint(Platform.Portal, undefined)).toBe("");
}); });
it("when platform === Platform.Portal, backendEndpoint === '' ", () => { it("when platform === Platform.Portal, backendEndpoint === ''", () => {
expect(getExtensionEndpoint(Platform.Portal, "")).toBe(""); expect(getExtensionEndpoint(Platform.Portal, "")).toBe("");
}); });
@ -200,7 +200,7 @@ describe("getExtensionEndpoint", () => {
expect(getExtensionEndpoint(Platform.Portal, null)).toBe(""); expect(getExtensionEndpoint(Platform.Portal, null)).toBe("");
}); });
it("when platform !== Platform.Portal, backendEndpoint != '' ", () => { it("when platform !== Platform.Portal, backendEndpoint != ''", () => {
expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo"); expect(getExtensionEndpoint(Platform.Portal, "foo")).toBe("foo");
}); });
}); });

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@ -290,7 +290,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
{ {
enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(), enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey(),
abortSignal: this.queryAbortController.signal, abortSignal: this.queryAbortController.signal,
} as FeedOptions, } as unknown as FeedOptions,
); );
} }

6
src/Explorer/Tree/Database.test.tsx
View File

@ -42,7 +42,7 @@ describe("Add Schema", () => {
database.addSchema(collection); database.addSchema(collection);
expect(database.junoClient.requestSchema).toBeCalledTimes(0); expect(database.junoClient.requestSchema).toHaveBeenCalledTimes(0);
}); });
it("should call requestSchema or getSchema if analyticalStorageTtl is not undefined", () => { it("should call requestSchema or getSchema if analyticalStorageTtl is not undefined", () => {
@ -66,7 +66,7 @@ describe("Add Schema", () => {
const checkForSchema: NodeJS.Timeout = database.addSchema(collection, interval); const checkForSchema: NodeJS.Timeout = database.addSchema(collection, interval);
jest.advanceTimersByTime(interval + 1000); jest.advanceTimersByTime(interval + 1000);
expect(database.junoClient.requestSchema).toBeCalledWith({ expect(database.junoClient.requestSchema).toHaveBeenCalledWith({
id: undefined, id: undefined,
subscriptionId: userContext.subscriptionId, subscriptionId: userContext.subscriptionId,
resourceGroup: userContext.resourceGroup, resourceGroup: userContext.resourceGroup,
@ -75,7 +75,7 @@ describe("Add Schema", () => {
status: "new", status: "new",
}); });
expect(checkForSchema).not.toBeNull(); expect(checkForSchema).not.toBeNull();
expect(database.junoClient.getSchema).toBeCalledWith( expect(database.junoClient.getSchema).toHaveBeenCalledWith(
userContext.subscriptionId, userContext.subscriptionId,
userContext.resourceGroup, userContext.resourceGroup,
userContext.databaseAccount.name, userContext.databaseAccount.name,

6
src/Explorer/Tree/ResourceTree.tsx
View File

@ -788,7 +788,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
</AccordionItemComponent> </AccordionItemComponent>
</AccordionComponent> </AccordionComponent>
{buildGalleryCallout()} {/* {buildGalleryCallout()} */}
</> </>
)} )}
{!isNotebookEnabled && isSampleDataEnabled && ( {!isNotebookEnabled && isSampleDataEnabled && (
@ -802,7 +802,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
</AccordionItemComponent> </AccordionItemComponent>
</AccordionComponent> </AccordionComponent>
{buildGalleryCallout()} {/* {buildGalleryCallout()} */}
</> </>
)} )}
{isNotebookEnabled && isSampleDataEnabled && ( {isNotebookEnabled && isSampleDataEnabled && (
@ -819,7 +819,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
</AccordionItemComponent> </AccordionItemComponent>
</AccordionComponent> </AccordionComponent>
{buildGalleryCallout()} {/* {buildGalleryCallout()} */}
</> </>
)} )}
</> </>

6
src/Explorer/Tree/ResourceTreeAdapter.test.ts
View File

@ -15,13 +15,13 @@ describe("useSelectedNode", () => {
useSelectedNode.getState().setSelectedNode(undefined); useSelectedNode.getState().setSelectedNode(undefined);
useTabs.setState({ activeTab: undefined }); useTabs.setState({ activeTab: undefined });
}); });
it("it should not select if no selected node", () => { it("should not select if no selected node", () => {
useTabs.setState({ activeTab: mockTab }); useTabs.setState({ activeTab: mockTab });
const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined); const isDataNodeSelected = useSelectedNode.getState().isDataNodeSelected("foo", "bar", undefined);
expect(isDataNodeSelected).toBeFalsy(); expect(isDataNodeSelected).toBeFalsy();
}); });
it("it should not select incorrect subnodekinds", () => { it("should not select incorrect subnodekinds", () => {
useTabs.setState({ activeTab: mockTab }); useTabs.setState({ activeTab: mockTab });
useSelectedNode.getState().setSelectedNode({ useSelectedNode.getState().setSelectedNode({
nodeKind: "nodeKind", nodeKind: "nodeKind",
@ -32,7 +32,7 @@ describe("useSelectedNode", () => {
expect(isDataNodeSelected).toBeFalsy(); expect(isDataNodeSelected).toBeFalsy();
}); });
it("it should not select if no active tab", () => { it("should not select if no active tab", () => {
useSelectedNode.getState().setSelectedNode({ useSelectedNode.getState().setSelectedNode({
nodeKind: "nodeKind", nodeKind: "nodeKind",
rid: "rid", rid: "rid",

12
src/Explorer/Tree/ResourceTreeAdapter.tsx
View File

@ -1,14 +1,14 @@
import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react"; import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
import { getItemName } from "Utils/APITypeUtils";
import * as ko from "knockout"; import * as ko from "knockout";
import * as React from "react"; import * as React from "react";
import { getItemName } from "Utils/APITypeUtils";
import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg"; import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
import DeleteIcon from "../../../images/delete.svg";
import GalleryIcon from "../../../images/GalleryIcon.svg"; import GalleryIcon from "../../../images/GalleryIcon.svg";
import FileIcon from "../../../images/notebook/file-cosmos.svg"; import DeleteIcon from "../../../images/delete.svg";
import CopyIcon from "../../../images/notebook/Notebook-copy.svg"; import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg"; import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
import NotebookIcon from "../../../images/notebook/Notebook-resource.svg"; import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
import FileIcon from "../../../images/notebook/file-cosmos.svg";
import PublishIcon from "../../../images/notebook/publish_content.svg"; import PublishIcon from "../../../images/notebook/publish_content.svg";
import RefreshIcon from "../../../images/refresh-cosmos.svg"; import RefreshIcon from "../../../images/refresh-cosmos.svg";
import CollectionIcon from "../../../images/tree-collection.svg"; import CollectionIcon from "../../../images/tree-collection.svg";
@ -17,8 +17,6 @@ import { Areas } from "../../Common/Constants";
import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility"; import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
import * as DataModels from "../../Contracts/DataModels"; import * as DataModels from "../../Contracts/DataModels";
import * as ViewModels from "../../Contracts/ViewModels"; import * as ViewModels from "../../Contracts/ViewModels";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import { IPinnedRepo } from "../../Juno/JunoClient"; import { IPinnedRepo } from "../../Juno/JunoClient";
import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility"; import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants"; import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
@ -26,6 +24,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
import { userContext } from "../../UserContext"; import { userContext } from "../../UserContext";
import { isServerlessAccount } from "../../Utils/CapabilityUtils"; import { isServerlessAccount } from "../../Utils/CapabilityUtils";
import * as GitHubUtils from "../../Utils/GitHubUtils"; import * as GitHubUtils from "../../Utils/GitHubUtils";
import { useSidePanel } from "../../hooks/useSidePanel";
import { useTabs } from "../../hooks/useTabs";
import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory"; import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent"; import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
import { useDialog } from "../Controls/Dialog"; import { useDialog } from "../Controls/Dialog";
@ -116,7 +116,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
</AccordionItemComponent> </AccordionItemComponent>
</AccordionComponent> </AccordionComponent>
{this.galleryContentRoot && this.buildGalleryCallout()} {/* {this.galleryContentRoot && this.buildGalleryCallout()} */}
</> </>
); );
} else { } else {

190
src/GitHub/GitHubContentProvider.test.ts
View File

@ -53,130 +53,152 @@ const sampleNotebookModel: IContent<"notebook"> = {
}; };
describe("GitHubContentProvider remove", () => { describe("GitHubContentProvider remove", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors on invalid path", async () => { it("errors on invalid path", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync"); jest.spyOn(GitHubClient.prototype, "getContentsAsync");
const response = await gitHubContentProvider.remove(undefined, "invalid path").toPromise(); const response = await gitHubContentProvider.remove(undefined, "invalid path").toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(GitHubContentProvider.SelfErrorCode); expect(response.status).toBe(GitHubContentProvider.SelfErrorCode);
expect(gitHubClient.getContentsAsync).not.toBeCalled(); expect(gitHubClient.getContentsAsync).not.toHaveBeenCalled();
}); });
it("errors on failed read", async () => { it("errors on failed read", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "getContentsAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise(); const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
}); });
it("errors on failed delete", async () => { it("errors on failed delete", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "deleteFileAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "deleteFileAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise(); const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(gitHubClient.deleteFileAsync).toBeCalled(); expect(gitHubClient.deleteFileAsync).toHaveBeenCalled();
}); });
it("removes notebook", async () => { it("removes notebook", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "deleteFileAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }), .spyOn(GitHubClient.prototype, "deleteFileAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }));
const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise(); const response = await gitHubContentProvider.remove(undefined, sampleGitHubUri).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(HttpStatusCodes.NoContent); expect(response.status).toBe(HttpStatusCodes.NoContent);
expect(gitHubClient.deleteFileAsync).toBeCalled(); expect(gitHubClient.deleteFileAsync).toHaveBeenCalled();
expect(response.response).toBeUndefined(); expect(response.response).toBeUndefined();
}); });
}); });
describe("GitHubContentProvider get", () => { describe("GitHubContentProvider get", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors on invalid path", async () => { it("errors on invalid path", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync"); jest.spyOn(GitHubClient.prototype, "getContentsAsync");
const response = await gitHubContentProvider.get(undefined, "invalid path", undefined).toPromise(); const response = await gitHubContentProvider.get(undefined, "invalid path", undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(GitHubContentProvider.SelfErrorCode); expect(response.status).toBe(GitHubContentProvider.SelfErrorCode);
expect(gitHubClient.getContentsAsync).not.toBeCalled(); expect(gitHubClient.getContentsAsync).not.toHaveBeenCalled();
}); });
it("errors on failed read", async () => { it("errors on failed read", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "getContentsAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.get(undefined, sampleGitHubUri, undefined).toPromise(); const response = await gitHubContentProvider.get(undefined, sampleGitHubUri, undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
}); });
it("reads notebook", async () => { it("reads notebook", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
const response = await gitHubContentProvider.get(undefined, sampleGitHubUri, {}).toPromise(); const response = await gitHubContentProvider.get(undefined, sampleGitHubUri, {}).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(response.response).toEqual(sampleNotebookModel); expect(response.response).toEqual(sampleNotebookModel);
}); });
}); });
describe("GitHubContentProvider update", () => { describe("GitHubContentProvider update", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors on invalid path", async () => { it("errors on invalid path", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync"); jest.spyOn(GitHubClient.prototype, "getContentsAsync");
const response = await gitHubContentProvider.update(undefined, "invalid path", undefined).toPromise(); const response = await gitHubContentProvider.update(undefined, "invalid path", undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(GitHubContentProvider.SelfErrorCode); expect(response.status).toBe(GitHubContentProvider.SelfErrorCode);
expect(gitHubClient.getContentsAsync).not.toBeCalled(); expect(gitHubClient.getContentsAsync).not.toHaveBeenCalled();
}); });
it("errors on failed read", async () => { it("errors on failed read", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "getContentsAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, undefined).toPromise(); const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
}); });
it("errors on failed rename", async () => { it("errors on failed rename", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "renameFileAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "renameFileAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(gitHubClient.renameFileAsync).toBeCalled(); expect(gitHubClient.renameFileAsync).toHaveBeenCalled();
}); });
it("updates notebook", async () => { it("updates notebook", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "renameFileAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }), .spyOn(GitHubClient.prototype, "renameFileAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }));
const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.update(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(gitHubClient.renameFileAsync).toBeCalled(); expect(gitHubClient.renameFileAsync).toHaveBeenCalled();
expect(response.response.type).toEqual(sampleNotebookModel.type); expect(response.response.type).toEqual(sampleNotebookModel.type);
expect(response.response.name).toEqual(sampleNotebookModel.name); expect(response.response.name).toEqual(sampleNotebookModel.name);
expect(response.response.path).toEqual(sampleNotebookModel.path); expect(response.response.path).toEqual(sampleNotebookModel.path);
@ -185,33 +207,39 @@ describe("GitHubContentProvider update", () => {
}); });
describe("GitHubContentProvider create", () => { describe("GitHubContentProvider create", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors on invalid path", async () => { it("errors on invalid path", async () => {
spyOn(GitHubClient.prototype, "createOrUpdateFileAsync"); jest.spyOn(GitHubClient.prototype, "createOrUpdateFileAsync");
const response = await gitHubContentProvider.create(undefined, "invalid path", sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.create(undefined, "invalid path", sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(GitHubContentProvider.SelfErrorCode); expect(response.status).toBe(GitHubContentProvider.SelfErrorCode);
expect(gitHubClient.createOrUpdateFileAsync).not.toBeCalled(); expect(gitHubClient.createOrUpdateFileAsync).not.toHaveBeenCalled();
}); });
it("errors on failed create", async () => { it("errors on failed create", async () => {
spyOn(GitHubClient.prototype, "createOrUpdateFileAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "createOrUpdateFileAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.create(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.create(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.createOrUpdateFileAsync).toBeCalled(); expect(gitHubClient.createOrUpdateFileAsync).toHaveBeenCalled();
}); });
it("creates notebook", async () => { it("creates notebook", async () => {
spyOn(GitHubClient.prototype, "createOrUpdateFileAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.Created, data: gitHubCommit }), .spyOn(GitHubClient.prototype, "createOrUpdateFileAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.Created, data: gitHubCommit }));
const response = await gitHubContentProvider.create(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.create(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(HttpStatusCodes.Created); expect(response.status).toBe(HttpStatusCodes.Created);
expect(gitHubClient.createOrUpdateFileAsync).toBeCalled(); expect(gitHubClient.createOrUpdateFileAsync).toHaveBeenCalled();
expect(response.response.type).toEqual(sampleNotebookModel.type); expect(response.response.type).toEqual(sampleNotebookModel.type);
expect(response.response.name).toBeDefined(); expect(response.response.name).toBeDefined();
expect(response.response.path).toBeDefined(); expect(response.response.path).toBeDefined();
@ -220,50 +248,58 @@ describe("GitHubContentProvider create", () => {
}); });
describe("GitHubContentProvider save", () => { describe("GitHubContentProvider save", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors on invalid path", async () => { it("errors on invalid path", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync"); jest.spyOn(GitHubClient.prototype, "getContentsAsync");
const response = await gitHubContentProvider.save(undefined, "invalid path", undefined).toPromise(); const response = await gitHubContentProvider.save(undefined, "invalid path", undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(GitHubContentProvider.SelfErrorCode); expect(response.status).toBe(GitHubContentProvider.SelfErrorCode);
expect(gitHubClient.getContentsAsync).not.toBeCalled(); expect(gitHubClient.getContentsAsync).not.toHaveBeenCalled();
}); });
it("errors on failed read", async () => { it("errors on failed read", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "getContentsAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, undefined).toPromise(); const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, undefined).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
}); });
it("errors on failed update", async () => { it("errors on failed update", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "createOrUpdateFileAsync").and.returnValue(Promise.resolve({ status: 888 })); jest
.spyOn(GitHubClient.prototype, "createOrUpdateFileAsync")
.mockReturnValue(Promise.resolve({ status: 888, data: undefined }));
const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(888); expect(response.status).toBe(888);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(gitHubClient.createOrUpdateFileAsync).toBeCalled(); expect(gitHubClient.createOrUpdateFileAsync).toHaveBeenCalled();
}); });
it("saves notebook", async () => { it("saves notebook", async () => {
spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }), .spyOn(GitHubClient.prototype, "getContentsAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile }));
spyOn(GitHubClient.prototype, "createOrUpdateFileAsync").and.returnValue( jest
Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }), .spyOn(GitHubClient.prototype, "createOrUpdateFileAsync")
); .mockReturnValue(Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit }));
const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, sampleNotebookModel).toPromise(); const response = await gitHubContentProvider.save(undefined, sampleGitHubUri, sampleNotebookModel).toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(gitHubClient.getContentsAsync).toBeCalled(); expect(gitHubClient.getContentsAsync).toHaveBeenCalled();
expect(gitHubClient.createOrUpdateFileAsync).toBeCalled(); expect(gitHubClient.createOrUpdateFileAsync).toHaveBeenCalled();
expect(response.response.type).toEqual(sampleNotebookModel.type); expect(response.response.type).toEqual(sampleNotebookModel.type);
expect(response.response.name).toEqual(sampleNotebookModel.name); expect(response.response.name).toEqual(sampleNotebookModel.name);
expect(response.response.path).toEqual(sampleNotebookModel.path); expect(response.response.path).toEqual(sampleNotebookModel.path);
@ -272,6 +308,10 @@ describe("GitHubContentProvider save", () => {
}); });
describe("GitHubContentProvider listCheckpoints", () => { describe("GitHubContentProvider listCheckpoints", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors for everything", async () => { it("errors for everything", async () => {
const response = await gitHubContentProvider.listCheckpoints().toPromise(); const response = await gitHubContentProvider.listCheckpoints().toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
@ -280,6 +320,10 @@ describe("GitHubContentProvider listCheckpoints", () => {
}); });
describe("GitHubContentProvider createCheckpoint", () => { describe("GitHubContentProvider createCheckpoint", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors for everything", async () => { it("errors for everything", async () => {
const response = await gitHubContentProvider.createCheckpoint().toPromise(); const response = await gitHubContentProvider.createCheckpoint().toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
@ -288,6 +332,10 @@ describe("GitHubContentProvider createCheckpoint", () => {
}); });
describe("GitHubContentProvider deleteCheckpoint", () => { describe("GitHubContentProvider deleteCheckpoint", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors for everything", async () => { it("errors for everything", async () => {
const response = await gitHubContentProvider.deleteCheckpoint().toPromise(); const response = await gitHubContentProvider.deleteCheckpoint().toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();
@ -296,6 +344,10 @@ describe("GitHubContentProvider deleteCheckpoint", () => {
}); });
describe("GitHubContentProvider restoreFromCheckpoint", () => { describe("GitHubContentProvider restoreFromCheckpoint", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it("errors for everything", async () => { it("errors for everything", async () => {
const response = await gitHubContentProvider.restoreFromCheckpoint().toPromise(); const response = await gitHubContentProvider.restoreFromCheckpoint().toPromise();
expect(response).toBeDefined(); expect(response).toBeDefined();

10
src/GitHub/GitHubOAuthService.test.ts
View File

@ -35,7 +35,7 @@ describe("GitHubOAuthService", () => {
junoClient.deleteAppAuthorization = deleteAppAuthorizationCallback; junoClient.deleteAppAuthorization = deleteAppAuthorizationCallback;
await gitHubOAuthService.logout(); await gitHubOAuthService.logout();
expect(deleteAppAuthorizationCallback).toBeCalled(); expect(deleteAppAuthorizationCallback).toHaveBeenCalled();
expect(gitHubOAuthService.getTokenObservable()()).toBeUndefined(); expect(gitHubOAuthService.getTokenObservable()()).toBeUndefined();
}); });
@ -52,13 +52,13 @@ describe("GitHubOAuthService", () => {
window.open = windowOpenCallback; window.open = windowOpenCallback;
await gitHubOAuthService.startOAuth("scope"); await gitHubOAuthService.startOAuth("scope");
expect(windowOpenCallback).toBeCalled(); expect(windowOpenCallback).toHaveBeenCalled();
const initialParams = new URLSearchParams(new URL(url).search); const initialParams = new URLSearchParams(new URL(url).search);
expect(initialParams.get("state")).toBeDefined(); expect(initialParams.get("state")).toBeDefined();
await gitHubOAuthService.startOAuth("another scope"); await gitHubOAuthService.startOAuth("another scope");
expect(windowOpenCallback).toBeCalled(); expect(windowOpenCallback).toHaveBeenCalled();
const newParams = new URLSearchParams(new URL(url).search); const newParams = new URLSearchParams(new URL(url).search);
expect(newParams.get("state")).toBeDefined(); expect(newParams.get("state")).toBeDefined();
@ -80,7 +80,7 @@ describe("GitHubOAuthService", () => {
await gitHubOAuthService.finishOAuth(params); await gitHubOAuthService.finishOAuth(params);
const updatedToken = gitHubOAuthService.getTokenObservable()(); const updatedToken = gitHubOAuthService.getTokenObservable()();
expect(getGitHubTokenCallback).toBeCalledWith("code"); expect(getGitHubTokenCallback).toHaveBeenCalledWith("code");
expect(initialToken).not.toEqual(updatedToken); expect(initialToken).not.toEqual(updatedToken);
}); });
@ -108,7 +108,7 @@ describe("GitHubOAuthService", () => {
}; };
await gitHubOAuthService.finishOAuth(params); await gitHubOAuthService.finishOAuth(params);
expect(getGitHubTokenCallback).toBeCalledWith("code"); expect(getGitHubTokenCallback).toHaveBeenCalledWith("code");
expect(gitHubOAuthService.getTokenObservable()().error).toBeDefined(); expect(gitHubOAuthService.getTokenObservable()().error).toBeDefined();
}); });

38
src/Juno/JunoClient.test.ts
View File

@ -57,7 +57,7 @@ describe("Pinned repos", () => {
const response = await junoClient.updatePinnedRepos(samplePinnedRepos); const response = await junoClient.updatePinnedRepos(samplePinnedRepos);
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(callback).toBeCalledWith(samplePinnedRepos); expect(callback).toHaveBeenCalledWith(samplePinnedRepos);
}); });
it("getPinnedRepos invokes pinned repos subscribers", async () => { it("getPinnedRepos invokes pinned repos subscribers", async () => {
@ -68,7 +68,7 @@ describe("Pinned repos", () => {
const response = await junoClient.getPinnedRepos("scope"); const response = await junoClient.getPinnedRepos("scope");
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(callback).toBeCalledWith(samplePinnedRepos); expect(callback).toHaveBeenCalledWith(samplePinnedRepos);
}); });
}); });
@ -94,7 +94,7 @@ describe("GitHub", () => {
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(response.data.access_token).toBeDefined(); expect(response.data.access_token).toBeDefined();
expect(window.fetch).toBeCalled(); expect(window.fetch).toHaveBeenCalled();
const fetchUrlParams = new URLSearchParams(new URL(fetchUrl).search); const fetchUrlParams = new URLSearchParams(new URL(fetchUrl).search);
let fetchUrlParamsCount = 0; let fetchUrlParamsCount = 0;
@ -119,7 +119,7 @@ describe("GitHub", () => {
const response = await junoClient.deleteAppAuthorization("token"); const response = await junoClient.deleteAppAuthorization("token");
expect(response.status).toBe(HttpStatusCodes.NoContent); expect(response.status).toBe(HttpStatusCodes.NoContent);
expect(window.fetch).toBeCalled(); expect(window.fetch).toHaveBeenCalled();
const fetchUrlParams = new URLSearchParams(new URL(fetchUrl).search); const fetchUrlParams = new URLSearchParams(new URL(fetchUrl).search);
let fetchUrlParamsCount = 0; let fetchUrlParamsCount = 0;
@ -161,7 +161,10 @@ describe("Gallery", () => {
const response = await junoClient.getSampleNotebooks(); const response = await junoClient.getSampleNotebooks();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/samples`, undefined); expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/samples`,
undefined,
);
}); });
it("getPublicNotebooks", async () => { it("getPublicNotebooks", async () => {
@ -173,7 +176,10 @@ describe("Gallery", () => {
const response = await junoClient.getPublicNotebooks(); const response = await junoClient.getPublicNotebooks();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/public`, undefined); expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/public`,
undefined,
);
}); });
it("getNotebook", async () => { it("getNotebook", async () => {
@ -186,7 +192,7 @@ describe("Gallery", () => {
const response = await junoClient.getNotebookInfo(id); const response = await junoClient.getNotebookInfo(id);
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}`); expect(window.fetch).toHaveBeenCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}`);
}); });
it("getNotebookContent", async () => { it("getNotebookContent", async () => {
@ -199,7 +205,7 @@ describe("Gallery", () => {
const response = await junoClient.getNotebookContent(id); const response = await junoClient.getNotebookContent(id);
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}/content`); expect(window.fetch).toHaveBeenCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}/content`);
}); });
it("increaseNotebookViews", async () => { it("increaseNotebookViews", async () => {
@ -211,7 +217,7 @@ describe("Gallery", () => {
const response = await junoClient.increaseNotebookViews(id); const response = await junoClient.increaseNotebookViews(id);
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}/views`, { expect(window.fetch).toHaveBeenCalledWith(`${JunoClient.getJunoEndpoint()}/api/notebooks/gallery/${id}/views`, {
method: "PATCH", method: "PATCH",
}); });
}); });
@ -227,7 +233,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/${id}/downloads`, }/gallery/${id}/downloads`,
@ -252,7 +258,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/${id}/favorite`, }/gallery/${id}/favorite`,
@ -277,7 +283,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/${id}/unfavorite`, }/gallery/${id}/unfavorite`,
@ -301,7 +307,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/favorites`, }/gallery/favorites`,
@ -324,7 +330,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/published`, }/gallery/published`,
@ -348,7 +354,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery/${id}`, }/gallery/${id}`,
@ -378,7 +384,7 @@ describe("Gallery", () => {
const authorizationHeader = getAuthorizationHeader(); const authorizationHeader = getAuthorizationHeader();
expect(response.status).toBe(HttpStatusCodes.OK); expect(response.status).toBe(HttpStatusCodes.OK);
expect(window.fetch).toBeCalledWith( expect(window.fetch).toHaveBeenCalledWith(
`${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${ `${JunoClient.getJunoEndpoint()}/api/notebooks/subscriptions/${sampleSubscriptionId}/databaseAccounts/${
sampleDatabaseAccount.name sampleDatabaseAccount.name
}/gallery`, }/gallery`,

4
src/SelfServe/Example/SelfServeExample.tsx
View File

@ -1,7 +1,6 @@
import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators"; import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
import { selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor"; import { selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
import { import {
ChoiceItem,
Description, Description,
DescriptionType, DescriptionType,
Info, Info,
@ -12,6 +11,9 @@ import {
SelfServeBaseClass, SelfServeBaseClass,
SmartUiInput, SmartUiInput,
} from "../SelfServeTypes"; } from "../SelfServeTypes";
import type { ChoiceItem } from "../SelfServeTypes";
import { import {
getMaxCollectionThroughput, getMaxCollectionThroughput,
getMaxDatabaseThroughput, getMaxDatabaseThroughput,

4
src/SelfServe/GraphAPICompute/GraphAPICompute.tsx
View File

@ -1,7 +1,6 @@
import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators"; import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
import { selfServeTrace } from "../SelfServeTelemetryProcessor"; import { selfServeTrace } from "../SelfServeTelemetryProcessor";
import { import {
ChoiceItem,
Description, Description,
DescriptionType, DescriptionType,
Info, Info,
@ -12,6 +11,9 @@ import {
SelfServeBaseClass, SelfServeBaseClass,
SmartUiInput, SmartUiInput,
} from "../SelfServeTypes"; } from "../SelfServeTypes";
import type { ChoiceItem } from "../SelfServeTypes";
import { BladeType, generateBladeLink } from "../SelfServeUtils"; import { BladeType, generateBladeLink } from "../SelfServeUtils";
import { import {
deleteComputeResource, deleteComputeResource,

4
src/SelfServe/MaterializedViewsBuilder/MaterializedViewsBuilder.tsx
View File

@ -6,7 +6,6 @@ import {
selfServeTraceSuccess, selfServeTraceSuccess,
} from "../SelfServeTelemetryProcessor"; } from "../SelfServeTelemetryProcessor";
import { import {
ChoiceItem,
Description, Description,
DescriptionType, DescriptionType,
Info, Info,
@ -17,6 +16,9 @@ import {
SelfServeBaseClass, SelfServeBaseClass,
SmartUiInput, SmartUiInput,
} from "../SelfServeTypes"; } from "../SelfServeTypes";
import type { ChoiceItem } from "../SelfServeTypes";
import { BladeType, generateBladeLink } from "../SelfServeUtils"; import { BladeType, generateBladeLink } from "../SelfServeUtils";
import { import {
deleteMaterializedViewsBuilderResource, deleteMaterializedViewsBuilderResource,

2
src/SelfServe/SelfServeUtils.tsx
View File

@ -54,6 +54,8 @@ export enum BladeType {
/** /**
* Keys blade of a Azure Cosmos DB for Apache Gremlin account. * Keys blade of a Azure Cosmos DB for Apache Gremlin account.
*/ */
// TODO This is a obviously a bug, but for now, let's ignore the eslint error
// eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
GremlinKeys = "keys", GremlinKeys = "keys",
/** /**
* Keys blade of a Azure Cosmos DB for Table account. * Keys blade of a Azure Cosmos DB for Table account.

4
src/SelfServe/SqlX/SqlX.tsx
View File

@ -7,7 +7,6 @@ import {
selfServeTraceSuccess, selfServeTraceSuccess,
} from "../SelfServeTelemetryProcessor"; } from "../SelfServeTelemetryProcessor";
import { import {
ChoiceItem,
Description, Description,
DescriptionType, DescriptionType,
Info, Info,
@ -18,6 +17,9 @@ import {
SelfServeBaseClass, SelfServeBaseClass,
SmartUiInput, SmartUiInput,
} from "../SelfServeTypes"; } from "../SelfServeTypes";
import type { ChoiceItem } from "../SelfServeTypes";
import { BladeType, generateBladeLink } from "../SelfServeUtils"; import { BladeType, generateBladeLink } from "../SelfServeUtils";
import { import {
deleteDedicatedGatewayResource, deleteDedicatedGatewayResource,

10
src/Utils/AuthorizationUtils.test.ts
View File

@ -1,7 +1,7 @@
import * as Constants from "../Common/Constants";
import * as AuthorizationUtils from "./AuthorizationUtils";
import { AuthType } from "../AuthType"; import { AuthType } from "../AuthType";
import * as Constants from "../Common/Constants";
import { updateUserContext } from "../UserContext"; import { updateUserContext } from "../UserContext";
import * as AuthorizationUtils from "./AuthorizationUtils";
jest.mock("../Explorer/Explorer"); jest.mock("../Explorer/Explorer");
describe("AuthorizationUtils", () => { describe("AuthorizationUtils", () => {
@ -29,11 +29,11 @@ describe("AuthorizationUtils", () => {
describe("decryptJWTToken()", () => { describe("decryptJWTToken()", () => {
it("should throw an error if token is undefined", () => { it("should throw an error if token is undefined", () => {
expect(() => AuthorizationUtils.decryptJWTToken(undefined)).toThrowError(); expect(() => AuthorizationUtils.decryptJWTToken(undefined)).toThrow();
}); });
it("should throw an error if token is empty", () => { it("should throw an error if token is empty", () => {
expect(() => AuthorizationUtils.decryptJWTToken("")).toThrowError(); expect(() => AuthorizationUtils.decryptJWTToken("")).toThrow();
}); });
it("should throw an error if token is malformed", () => { it("should throw an error if token is malformed", () => {
@ -41,7 +41,7 @@ describe("AuthorizationUtils", () => {
AuthorizationUtils.decryptJWTToken( AuthorizationUtils.decryptJWTToken(
"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6ImFQY3R3X29kdlJPb0VOZzNWb09sSWgydGlFcyIsImtpZCI6ImFQY3R3X29kdlJPb0VOZzNWb09sSWgydGlFcyJ9.", "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6ImFQY3R3X29kdlJPb0VOZzNWb09sSWgydGlFcyIsImtpZCI6ImFQY3R3X29kdlJPb0VOZzNWb09sSWgydGlFcyJ9.",
), ),
).toThrowError(); ).toThrow();
}); });
it("should return decrypted token payload", () => { it("should return decrypted token payload", () => {

8
src/Utils/GalleryUtils.test.ts
View File

@ -48,8 +48,8 @@ describe("GalleryUtils", () => {
await GalleryUtils.favoriteItem(container, junoClient, galleryItem, onComplete); await GalleryUtils.favoriteItem(container, junoClient, galleryItem, onComplete);
expect(junoClient.favoriteNotebook).toBeCalledWith(galleryItem.id); expect(junoClient.favoriteNotebook).toHaveBeenCalledWith(galleryItem.id);
expect(onComplete).toBeCalledWith(galleryItem); expect(onComplete).toHaveBeenCalledWith(galleryItem);
}); });
it("unfavoriteItem unfavorites item", async () => { it("unfavoriteItem unfavorites item", async () => {
@ -62,8 +62,8 @@ describe("GalleryUtils", () => {
await GalleryUtils.unfavoriteItem(container, junoClient, galleryItem, onComplete); await GalleryUtils.unfavoriteItem(container, junoClient, galleryItem, onComplete);
expect(junoClient.unfavoriteNotebook).toBeCalledWith(galleryItem.id); expect(junoClient.unfavoriteNotebook).toHaveBeenCalledWith(galleryItem.id);
expect(onComplete).toBeCalledWith(galleryItem); expect(onComplete).toHaveBeenCalledWith(galleryItem);
}); });
it("deleteItem shows dialog in data explorer", () => { it("deleteItem shows dialog in data explorer", () => {

32
webpack.config.js
View File

@ -43,17 +43,17 @@ const lessRule = {
const imagesRule = { const imagesRule = {
test: /\.(jpg|jpeg|png|gif|svg|pdf|ico)$/, test: /\.(jpg|jpeg|png|gif|svg|pdf|ico)$/,
loader: "file-loader", type: "asset/resource",
options: { generator: {
name: "images/[name].[ext]", // Add hash, because there are multiple versions of "delete.svg"
filename: "images/[name].[hash][ext]",
}, },
}; };
const fontRule = { const fontRule = {
test: /\.(woff|woff2|ttf|eot)$/, test: /\.(woff|woff2|ttf|eot)$/,
loader: "file-loader", generator: {
options: { filename: "[name][ext]",
name: "[name].[ext]",
}, },
}; };
@ -120,7 +120,9 @@ module.exports = function (_env = {}, argv = {}) {
fileName: "version.txt", fileName: "version.txt",
content: `${gitSha.trim()} ${new Date().toUTCString()}`, content: `${gitSha.trim()} ${new Date().toUTCString()}`,
}), }),
new CaseSensitivePathsPlugin(), // TODO Enable when @nteract once removed
// ./node_modules/@nteract/markdown/node_modules/@nteract/presentational-components/lib/index.js line 63 breaks this with physical file Icon.js referred to as icon.js
// new CaseSensitivePathsPlugin(),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: "[name].[contenthash].css", filename: "[name].[contenthash].css",
}), }),
@ -220,6 +222,7 @@ module.exports = function (_env = {}, argv = {}) {
filename: "[name].[chunkhash:6].js", filename: "[name].[chunkhash:6].js",
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
publicPath: "", publicPath: "",
hashFunction: "xxhash64",
}, },
devtool: mode === "development" ? "eval-source-map" : "source-map", devtool: mode === "development" ? "eval-source-map" : "source-map",
plugins, plugins,
@ -230,11 +233,17 @@ module.exports = function (_env = {}, argv = {}) {
modules: [path.resolve(__dirname, "src"), "node_modules"], modules: [path.resolve(__dirname, "src"), "node_modules"],
alias: { alias: {
process: "process/browser", process: "process/browser",
"/sort_both.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_both.png"),
"/sort_asc.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_asc.png"),
"/sort_desc.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_desc.png"),
"/sort_asc_disabled.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_asc_disabled.png"),
"/sort_desc_disabled.png": path.resolve(__dirname, "images/jquery.dataTables-images/sort_desc_disabled.png"),
}, },
fallback: { fallback: {
crypto: false, crypto: false,
fs: false, fs: false,
querystring: require.resolve("querystring-es3"),
}, },
extensions: [".tsx", ".ts", ".js"], extensions: [".tsx", ".ts", ".js"],
}, },
@ -258,13 +267,14 @@ module.exports = function (_env = {}, argv = {}) {
watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {}, watchOptions: isCI ? { poll: 24 * 60 * 60 * 1000 } : {},
devServer: { devServer: {
hot: false, hot: false,
disableHostCheck: true, // disableHostCheck is removed in webpack 5, use: allowedHosts: "all",
inline: !isCI, // disableHostCheck: true,
liveReload: !isCI, liveReload: !isCI,
https: true, server: {
type: "https",
},
host: "0.0.0.0", host: "0.0.0.0",
port: envVars.PORT, port: envVars.PORT,
stats: "minimal",
headers: { headers: {
"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true", "Access-Control-Allow-Credentials": "true",