From 277022969c81dbd637ffbfc5ad4aef7c3fa1e1e3 Mon Sep 17 00:00:00 2001 From: jawelton74 <103591340+jawelton74@users.noreply.github.com> Date: Fri, 24 Apr 2026 07:54:27 -0700 Subject: [PATCH 01/10] Remove shared throughput option from database and container creation dialogs (#2463) * Copilot assisted changes to remove shared throughput options in add database/container. * Add E2E tests verifying shared throughput option is removed from creation dialogs Add three new E2E tests to sharedThroughput.spec.ts: - New Database panel should not show shared throughput checkbox - New Container panel should not show shared throughput checkbox when creating new database - Dedicated throughput checkbox still appears for existing shared database (regression guard) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/Common/DatabaseUtility.ts | 3 - .../AddCollectionPanel/AddCollectionPanel.tsx | 182 ++++++------------ .../AddCollectionPanel.test.tsx.snap | 43 ----- .../AddDatabasePanel/AddDatabasePanel.tsx | 103 +--------- .../AddDatabasePanel.test.tsx.snap | 37 ---- .../CassandraAddCollectionPane.test.tsx | 2 +- .../CassandraAddCollectionPane.tsx | 63 +----- src/Localization/en/Resources.json | 8 +- .../scaleAndSettings/sharedThroughput.spec.ts | 90 +++++++++ 9 files changed, 165 insertions(+), 366 deletions(-) delete mode 100644 src/Common/DatabaseUtility.ts diff --git a/src/Common/DatabaseUtility.ts b/src/Common/DatabaseUtility.ts deleted file mode 100644 index c5b8538ff..000000000 --- a/src/Common/DatabaseUtility.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function getNewDatabaseSharedThroughputDefault(): boolean { - return false; -} diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx index d598a3eb0..bb8fd7f24 100644 --- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx @@ -17,7 +17,6 @@ import { } from "@fluentui/react"; import * as Constants from "Common/Constants"; import { createCollection } from "Common/dataAccess/createCollection"; -import { getNewDatabaseSharedThroughputDefault } from "Common/DatabaseUtility"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; import { configContext, Platform } from "ConfigContext"; import * as DataModels from "Contracts/DataModels"; @@ -77,7 +76,6 @@ export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = { export interface AddCollectionPanelState { createNewDatabase: boolean; newDatabaseId: string; - isSharedThroughputChecked: boolean; selectedDatabaseId: string; collectionId: string; enableIndexing: boolean; @@ -103,8 +101,6 @@ export interface AddCollectionPanelState { } export class AddCollectionPanel extends React.Component { - private newDatabaseThroughput: number; - private isNewDatabaseAutoscale: boolean; private collectionThroughput: number; private isCollectionAutoscale: boolean; private isCostAcknowledged: boolean; @@ -117,7 +113,6 @@ export class AddCollectionPanel extends React.Component - - {!isServerlessAccount() && ( - - , isChecked: boolean) => - this.setState({ isSharedThroughputChecked: isChecked }) - } - /> - - - - - )} - - {!isServerlessAccount() && this.state.isSharedThroughputChecked && ( - (this.newDatabaseThroughput = throughput)} - setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)} - setIsThroughputCapExceeded={(isThroughputCapExceeded: boolean) => - this.setState({ isThroughputCapExceeded }) - } - onCostAcknowledgeChange={(isAcknowledge: boolean) => (this.isCostAcknowledged = isAcknowledge)} - /> - )} )} {!this.state.createNewDatabase && ( @@ -515,59 +455,57 @@ export class AddCollectionPanel extends React.Component )} - {userContext.apiType === "Mongo" && - (!this.state.isSharedThroughputChecked || - this.props.explorer.isFixedCollectionWithSharedThroughputSupported()) && ( - - - *  - - {t(Keys.panes.addCollection.sharding)} - - - - - - - - + + *  + + {t(Keys.panes.addCollection.sharding)} + + + - {t(Keys.panes.addCollection.unshardedLabel)} - - - {t(Keys.panes.addCollection.sharded)} - + - )} + + + + {t(Keys.panes.addCollection.unshardedLabel)} + + + {t(Keys.panes.addCollection.sharded)} + + + )} {this.state.isSharded && ( @@ -1191,7 +1129,7 @@ export class AddCollectionPanel extends React.Component CollectionCreation.DefaultCollectionRUs100K && !this.isCostAcknowledged) { - const errorMessage = this.isNewDatabaseAutoscale + const errorMessage = this.isCollectionAutoscale ? t(Keys.panes.addCollection.acknowledgeSpendErrorMonthly) : t(Keys.panes.addCollection.acknowledgeSpendErrorDaily); this.setState({ errorMessage }); @@ -1379,9 +1315,7 @@ export class AddCollectionPanel extends React.Component - - - - - - = ({ buttonElement, }: AddDatabasePaneProps) => { const closeSidePanel = useSidePanel((state) => state.closeSidePanel); - let throughput: number; - let isAutoscaleSelected: boolean; - let isCostAcknowledged: boolean; const { subscriptionType } = userContext; const isCassandraAccount: boolean = userContext.apiType === "Cassandra"; const databaseLabel: string = isCassandraAccount ? "keyspace" : "database"; @@ -49,23 +41,15 @@ export const AddDatabasePanel: FunctionComponent = ({ const [databaseId, setDatabaseId] = useState(""); const databaseIdTooltipText = t(Keys.panes.addDatabase.databaseTooltip, { databaseLabel, collectionsLabel }); - const databaseLevelThroughputTooltipText = t(Keys.panes.addDatabase.shareThroughputTooltip, { - databaseLabel, - collectionsLabel, - }); - const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState( - getNewDatabaseSharedThroughputDefault(), - ); const [formErrors, setFormErrors] = useState(""); const [isExecuting, setIsExecuting] = useState(false); - const [isThroughputCapExceeded, setIsThroughputCapExceeded] = useState(false); const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier; const addDatabasePaneMessage = { database: { id: databaseId, - shared: databaseCreateNewShared, + shared: false, }, subscriptionType: SubscriptionType[subscriptionType], subscriptionQuotaId: userContext.quotaId, @@ -76,9 +60,7 @@ export const AddDatabasePanel: FunctionComponent = ({ const addDatabasePaneOpenMessage = { subscriptionType: SubscriptionType[subscriptionType], subscriptionQuotaId: userContext.quotaId, - defaultsCheck: { - throughput, - }, + defaultsCheck: {}, dataExplorerArea: Constants.Areas.ContextualPane, }; TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage); @@ -88,13 +70,8 @@ export const AddDatabasePanel: FunctionComponent = ({ }, []); const onSubmit = () => { - if (!_isValid()) { - return; - } - const addDatabasePaneStartMessage = { ...addDatabasePaneMessage, - throughput, }; const startKey: number = TelemetryProcessor.traceStart(Action.CreateDatabase, addDatabasePaneStartMessage); setFormErrors(""); @@ -102,69 +79,41 @@ export const AddDatabasePanel: FunctionComponent = ({ const createDatabaseParams: DataModels.CreateDatabaseParams = { databaseId: addDatabasePaneStartMessage.database.id, - databaseLevelThroughput: addDatabasePaneStartMessage.database.shared, + databaseLevelThroughput: false, }; - if (isAutoscaleSelected) { - createDatabaseParams.autoPilotMaxThroughput = addDatabasePaneStartMessage.throughput; - } else { - createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.throughput; - } createDatabase(createDatabaseParams).then( () => { - _onCreateDatabaseSuccess(throughput, startKey); + _onCreateDatabaseSuccess(startKey); }, (error: string) => { - _onCreateDatabaseFailure(error, throughput, startKey); + _onCreateDatabaseFailure(error, startKey); }, ); }; - const _onCreateDatabaseSuccess = (offerThroughput: number, startKey: number): void => { + const _onCreateDatabaseSuccess = (startKey: number): void => { setIsExecuting(false); closeSidePanel(); container.refreshAllDatabases(); const addDatabasePaneSuccessMessage = { ...addDatabasePaneMessage, - offerThroughput, }; TelemetryProcessor.traceSuccess(Action.CreateDatabase, addDatabasePaneSuccessMessage, startKey); }; - const _onCreateDatabaseFailure = (error: string, offerThroughput: number, startKey: number): void => { + const _onCreateDatabaseFailure = (error: string, startKey: number): void => { setIsExecuting(false); const errorMessage = getErrorMessage(error); setFormErrors(errorMessage); const addDatabasePaneFailedMessage = { ...addDatabasePaneMessage, - offerThroughput, error: errorMessage, errorStack: getErrorStack(error), }; TelemetryProcessor.traceFailure(Action.CreateDatabase, addDatabasePaneFailedMessage, startKey); }; - const _isValid = (): boolean => { - // TODO add feature flag that disables validation for customers with custom accounts - if (isAutoscaleSelected) { - if (!AutoPilotUtils.isValidAutoPilotThroughput(throughput)) { - setFormErrors(t(Keys.panes.addDatabase.greaterThanError, { minValue: AutoPilotUtils.autoPilotThroughput1K })); - return false; - } - } - - if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) { - setFormErrors( - isAutoscaleSelected - ? t(Keys.panes.addDatabase.acknowledgeSpendErrorMonthly) - : t(Keys.panes.addDatabase.acknowledgeSpendErrorDaily), - ); - return false; - } - - return true; - }; - const handleonChangeDBId = React.useCallback( (event: React.FormEvent, newValue?: string) => { setDatabaseId(newValue || ""); @@ -176,7 +125,6 @@ export const AddDatabasePanel: FunctionComponent = ({ formError: formErrors, isExecuting, submitButtonText: t(Keys.common.ok), - isSubmitButtonDisabled: isThroughputCapExceeded, onSubmit, }; @@ -224,42 +172,7 @@ export const AddDatabasePanel: FunctionComponent = ({ data-lpignore={true} data-1p-ignore={true} /> - - {!isServerlessAccount() && ( - - setDatabaseCreateNewShared(!databaseCreateNewShared)} - /> - {databaseLevelThroughputTooltipText} - - )} - - {!isServerlessAccount() && databaseCreateNewShared && ( - (throughput = newThroughput)} - setIsAutoscale={(isAutoscale: boolean) => (isAutoscaleSelected = isAutoscale)} - setIsThroughputCapExceeded={(isCapExceeded: boolean) => setIsThroughputCapExceeded(isCapExceeded)} - onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)} - /> - )} ); diff --git a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap index 6d53644ab..c9ab614a6 100644 --- a/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap +++ b/src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap @@ -4,7 +4,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = ` @@ -61,42 +60,6 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = ` type="text" value="" /> - - - - Provisioned throughput at the database level will be shared across all collections within the database. - - diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx index 67944d7ab..4391be995 100644 --- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx +++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.test.tsx @@ -15,7 +15,7 @@ describe("Cassandra add collection pane test", () => { it("should render default properly", () => { expect(screen.getByRole("radio", { name: "Create new keyspace", checked: true })).toBeDefined(); - expect(screen.getByRole("checkbox", { name: "Provision shared throughput", checked: false })).toBeDefined(); + expect(screen.queryByRole("checkbox", { name: "Provision shared throughput" })).toBeNull(); }); it("click on use existing", () => { diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx index 525373d64..dcbcdf379 100644 --- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx +++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx @@ -1,4 +1,4 @@ -import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } from "@fluentui/react"; +import { Dropdown, IDropdownOption, Link, Stack, Text, TextField } from "@fluentui/react"; import * as Constants from "Common/Constants"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; import { InfoTooltip } from "Common/Tooltip/InfoTooltip"; @@ -27,8 +27,6 @@ export const CassandraAddCollectionPane: FunctionComponent { - let newKeySpaceThroughput: number; - let isNewKeySpaceAutoscale: boolean; let tableThroughput: number; let isTableAutoscale: boolean; let isCostAcknowledged: boolean; @@ -52,7 +50,7 @@ export const CassandraAddCollectionPane: FunctionComponent { - const throughput = keyspaceCreateNew ? newKeySpaceThroughput : tableThroughput; + const throughput = tableThroughput; const keyspaceId = keyspaceCreateNew ? newKeyspaceId : existingKeyspaceId; if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) { - const errorMessage = - isNewKeySpaceAutoscale || isTableAutoscale - ? t(Keys.panes.addCollection.acknowledgeSpendErrorMonthly) - : t(Keys.panes.addCollection.acknowledgeSpendErrorDaily); + const errorMessage = isTableAutoscale + ? t(Keys.panes.addCollection.acknowledgeSpendErrorMonthly) + : t(Keys.panes.addCollection.acknowledgeSpendErrorDaily); setFormError(errorMessage); return; } setIsExecuting(true); - const autoPilotCommand = `cosmosdb_autoscale_max_throughput`; const createKeyspaceQueryPrefix = `CREATE KEYSPACE ${keyspaceId.trim()} WITH REPLICATION = { 'class' : 'SimpleStrategy', 'replication_factor' : 3 }`; - const createKeyspaceQuery: string = isKeyspaceShared - ? isNewKeySpaceAutoscale - ? `${createKeyspaceQueryPrefix} AND ${autoPilotCommand}=${newKeySpaceThroughput};` - : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${newKeySpaceThroughput};` - : `${createKeyspaceQueryPrefix};`; + const createKeyspaceQuery = `${createKeyspaceQueryPrefix};`; let tableQuery: string; + const autoPilotCommand = `cosmosdb_autoscale_max_throughput`; const createTableQueryPrefix = `CREATE TABLE ${keyspaceId}.${tableId.trim()} ${userTableQuery}`; if (tableThroughput) { @@ -177,7 +170,6 @@ export const CassandraAddCollectionPane: FunctionComponent { setKeyspaceCreateNew(true); - setIsKeyspaceShared(false); setExistingKeyspaceId(""); }} /> @@ -192,7 +184,6 @@ export const CassandraAddCollectionPane: FunctionComponent { setKeyspaceCreateNew(false); - setIsKeyspaceShared(false); }} /> {t(Keys.panes.addCollection.useExisting)} @@ -214,25 +205,6 @@ export const CassandraAddCollectionPane: FunctionComponent - - {!isServerlessAccount() && ( - - , isChecked: boolean) => setIsKeyspaceShared(isChecked)} - /> - - Provisioned throughput at the keyspace level will be shared across unlimited number of tables within - the keyspace - - - )} )} @@ -256,21 +228,6 @@ export const CassandraAddCollectionPane: FunctionComponent )} - - {!isServerlessAccount() && keyspaceCreateNew && isKeyspaceShared && ( - (newKeySpaceThroughput = throughput)} - setIsAutoscale={(isAutoscale: boolean) => (isNewKeySpaceAutoscale = isAutoscale)} - setIsThroughputCapExceeded={(isCapExceeded: boolean) => setIsThroughputCapExceeded(isCapExceeded)} - onCostAcknowledgeChange={(isAcknowledged: boolean) => (isCostAcknowledged = isAcknowledged)} - /> - )} @@ -328,7 +285,7 @@ export const CassandraAddCollectionPane: FunctionComponent{t(Keys.panes.cassandraAddCollection.provisionDedicatedThroughputTooltip)} )} - {!isServerlessAccount() && (!isKeyspaceShared || dedicateTableThroughput) && ( + {!isServerlessAccount() && (keyspaceCreateNew || !isKeyspaceShared || dedicateTableThroughput) && ( { + let explorer: DataExplorer = null!; + + test.beforeEach(async ({ page }) => { + explorer = await DataExplorer.open(page, TestAccount.SQL); + }); + + test("New Database panel should not show shared throughput checkbox", async () => { + // Open the "New Database" panel via the global command menu + const newDatabaseButton = await explorer.globalCommandButton("New Database"); + await newDatabaseButton.click(); + + const panel = explorer.panel("New Database"); + await panel.waitFor(); + + // Assert that no "Provision throughput" / "Provision shared throughput" checkbox is visible + const sharedThroughputCheckbox = panel.getByRole("checkbox", { + name: /Provision.*throughput|Share.*throughput/i, + }); + await expect(sharedThroughputCheckbox).not.toBeAttached(); + + // Close the panel without submitting + const closeButton = explorer.frame.getByLabel("Close New Database"); + await closeButton.click(); + await panel.waitFor({ state: "detached" }); + }); + + test("New Container panel should not show shared throughput checkbox when creating new database", async () => { + // Open the "New Container" panel + const newContainerButton = await explorer.globalCommandButton("New Container"); + await newContainerButton.click(); + + const panel = explorer.panel("New Container"); + await panel.waitFor(); + + // "Create new" database should be selected by default + const createNewRadio = panel.getByRole("radio", { name: /Create new/i }); + await expect(createNewRadio).toBeChecked(); + + // Assert that no "Share throughput across containers" checkbox is visible + const shareThroughputCheckbox = panel.getByRole("checkbox", { + name: /Share throughput/i, + }); + await expect(shareThroughputCheckbox).not.toBeAttached(); + + // Close the panel without submitting + const closeButton = explorer.frame.getByLabel("Close New Container"); + await closeButton.click(); + await panel.waitFor({ state: "detached" }); + }); + + test("Dedicated throughput checkbox still appears for existing shared database", async () => { + // Create a database with shared throughput via SDK + const dbContext = await createTestDB({ throughput: 400 }); + + try { + // Wait for the database to appear + await explorer.waitForNode(dbContext.database.id); + + // Open New Container panel + const newContainerButton = await explorer.globalCommandButton("New Container"); + await newContainerButton.click(); + + const panel = explorer.panel("New Container"); + await panel.waitFor(); + + // Select "Use existing" and pick the shared database + const useExistingRadio = panel.getByRole("radio", { name: /Use existing/i }); + await useExistingRadio.click(); + + const databaseDropdown = panel.getByRole("combobox", { name: "Choose an existing database" }); + await databaseDropdown.click(); + await explorer.frame.getByRole("option", { name: dbContext.database.id }).click(); + + // Assert that "Provision dedicated throughput" checkbox IS visible for a shared database + const dedicatedThroughputCheckbox = panel.getByRole("checkbox", { + name: /Provision dedicated throughput/i, + }); + await expect(dedicatedThroughputCheckbox).toBeVisible(); + + // Close the panel without submitting + const closeButton = explorer.frame.getByLabel("Close New Container"); + await closeButton.click(); + await panel.waitFor({ state: "detached" }); + } finally { + await dbContext.dispose(); + } + }); +}); + test.describe("Database with Shared Throughput", () => { let dbContext: TestDatabaseContext = null!; let explorer: DataExplorer = null!; From 5bf0970b5ecfc9c834e7cd35b0645945f3147f31 Mon Sep 17 00:00:00 2001 From: jawelton74 <103591340+jawelton74@users.noreply.github.com> Date: Tue, 28 Apr 2026 07:48:33 -0700 Subject: [PATCH 02/10] Improve delete confirmation dialogs with copyable resource ID and warning (#2464) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add copyable ID to delete confirmation dialogs When deleting databases or containers, the confirmation dialog now displays the resource ID in a read-only text field with a copy button, allowing users to copy-paste the ID into the confirmation input instead of typing it manually. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Fixed formatting. * revert non-en locale changes; add localization instruction Revert changes to non-English locale files — translations are managed by a separate localization process. Add a note to copilot instructions clarifying that only en/Resources.json should be modified. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: capitalize 'Id' in copyable resource ID labels Changed 'id:' to 'Id:' in the copyable ID labels for delete confirmation dialogs (both database and collection). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: capitalize collection name in copyable ID label Use getCollectionName() directly (returns 'Container', 'Collection', etc.) instead of the lowercased collectionName variable for the copyable ID label. The database panel already used getDatabaseName() which returns capitalized. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * feat: add warning message to delete container confirmation dialog Added the same warning banner that exists in the delete database dialog to the delete container dialog, informing users that the action cannot be undone and will permanently delete the resource and its children. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .github/copilot-instructions.md | 2 + package-lock.json | 1 + .../DeleteCollectionConfirmationPane.test.tsx | 3 + .../DeleteCollectionConfirmationPane.tsx | 35 +- ...teCollectionConfirmationPane.test.tsx.snap | 1871 ++++++++++++++++- .../DeleteDatabaseConfirmationPanel.test.tsx | 4 +- .../Panes/DeleteDatabaseConfirmationPanel.tsx | 22 +- ...eteDatabaseConfirmationPanel.test.tsx.snap | 1543 +++++++++++++- src/Localization/en/Resources.json | 3 + 9 files changed, 3460 insertions(+), 24 deletions(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 70d097a31..d3e99849e 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -109,6 +109,8 @@ const title = t("splashScreen.title.default"); ``` The `ResourceKey` type (derived from `Resources.json`) ensures compile-time safety — invalid keys will cause a type error. When adding new strings, add the English entry to `Resources.json` first, then reference it with `t()`. +**Important:** Only modify the English resource file (`src/Localization/en/Resources.json`). Do not modify non-English locale files (`src/Localization//Resources.json`) — translations are managed by a separate localization process. + ### Imports TypeScript `baseUrl` is set to `src/`, so imports from `src/` are written without a leading `./src/` prefix: diff --git a/package-lock.json b/package-lock.json index 4bc29029c..fb9352a55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15904,6 +15904,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx index 569017247..ed2e6f1ab 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx @@ -112,6 +112,9 @@ describe("Delete Collection Confirmation Pane", () => { const wrapper = mount( undefined} />); expect(wrapper).toMatchSnapshot(); + expect(wrapper.exists("#copyableCollectionId")).toBe(true); + expect(wrapper.find("#copyableCollectionId").hostNodes().prop("value")).toBe(selectedCollectionId); + expect(wrapper.exists("#confirmCollectionId")).toBe(true); wrapper .find("#confirmCollectionId") diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx index 3f3fae58d..0e7bd63c2 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx @@ -1,4 +1,4 @@ -import { Text, TextField } from "@fluentui/react"; +import { IconButton, Text, TextField } from "@fluentui/react"; import { Areas } from "Common/Constants"; import DeleteFeedback from "Common/DeleteFeedback"; import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils"; @@ -17,6 +17,7 @@ import React, { FunctionComponent, useState } from "react"; import { useDatabases } from "../../useDatabases"; import { useSelectedNode } from "../../useSelectedNode"; import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm"; +import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent"; const themedTextFieldStyles = { fieldGroup: { @@ -54,6 +55,10 @@ export const DeleteCollectionConfirmationPane: FunctionComponent => { const collection = useSelectedNode.getState().findSelectedCollection(); @@ -131,6 +136,14 @@ export const DeleteCollectionConfirmationPane: FunctionComponent + {!formError && }
+ + {copyableIdLabel} + + ( + navigator.clipboard.writeText(selectedCollectionId)} + styles={{ root: { height: "100%" } }} + /> + )} + ariaLabel={copyableIdLabel} + /> * {confirmContainer} diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap index f7f77d195..abf7e2091 100644 --- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap +++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap @@ -14,6 +14,336 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect className="panelFormWrapper" onSubmit={[Function]} > + + +
+ + + +  + + + + + + + Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources. + + + +
+ +
@@ -23,6 +353,1527 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
+ + + Container Id: + + + + +
+
+
+ +
+ + + + span": { + "left": 0, + "position": "relative", + "top": 0, + }, + "border": "1px solid #8a8886", + "borderRadius": "2px", + "boxSizing": "border-box", + "cursor": "pointer", + "display": "inline-block", + "padding": "0 16px", + "textAlign": "center", + "textDecoration": "none", + "userSelect": "none", + }, + { + "backgroundColor": "transparent", + "border": "none", + "color": "#0078d4", + "height": "32px", + "padding": "0 4px", + "width": "32px", + }, + { + "height": "100%", + }, + ], + "rootChecked": { + "backgroundColor": "#edebe9", + "color": "#005a9e", + }, + "rootCheckedHovered": { + "backgroundColor": "#e1dfdd", + "color": "#005a9e", + }, + "rootDisabled": [ + { + "outline": "transparent", + "position": "relative", + "selectors": { + ".ms-Fabric--isFocusVisible &:focus:after, :host(.ms-Fabric--isFocusVisible) &:focus:after": { + "border": "1px solid transparent", + "borderRadius": undefined, + "bottom": 2, + "content": """", + "left": 2, + "outline": "1px solid #605e5c", + "pointerEvents": undefined, + "position": "absolute", + "right": 2, + "selectors": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "bottom": -2, + "left": -2, + "outlineColor": "ButtonText", + "right": -2, + "top": -2, + }, + }, + "top": 2, + "zIndex": 1, + }, + "::-moz-focus-inner": { + "border": "0", + }, + }, + }, + { + ":focus": { + "outline": 0, + }, + ":hover": { + "outline": 0, + }, + "backgroundColor": "#f3f2f1", + "borderColor": "#f3f2f1", + "color": "#a19f9d", + "cursor": "default", + }, + { + "color": "#c8c6c4", + }, + ], + "rootExpanded": { + "backgroundColor": "#edebe9", + "color": "#005a9e", + }, + "rootHasMenu": { + "width": "auto", + }, + "rootHovered": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "borderColor": "Highlight", + "color": "Highlight", + }, + "backgroundColor": "#f3f2f1", + "color": "#106ebe", + }, + "rootPressed": { + "backgroundColor": "#edebe9", + "color": "#005a9e", + }, + "screenReaderText": { + "border": 0, + "height": 1, + "margin": -1, + "overflow": "hidden", + "padding": 0, + "position": "absolute", + "whiteSpace": "nowrap", + "width": 1, + }, + "splitButtonContainer": [ + { + "outline": "transparent", + "position": "relative", + "selectors": { + ".ms-Fabric--isFocusVisible &:focus:after, :host(.ms-Fabric--isFocusVisible) &:focus:after": { + "border": "1px solid #ffffff", + "borderRadius": undefined, + "bottom": 3, + "content": """", + "left": 3, + "outline": "1px solid #605e5c", + "pointerEvents": "none", + "position": "absolute", + "right": 3, + "selectors": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "border": "none", + "bottom": -2, + "left": -2, + "right": -2, + "top": -2, + }, + }, + "top": 3, + "zIndex": 1, + }, + "::-moz-focus-inner": { + "border": "0", + }, + }, + }, + { + ".ms-Button--default": { + "borderBottomRightRadius": "0", + "borderRight": "none", + "borderTopRightRadius": "0", + "flexGrow": "1", + }, + ".ms-Button--default + .ms-Button": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + ":hover": { + ".ms-Button-menuIcon": { + "MsHighContrastAdjust": "none", + "backgroundColor": "HighlightText", + "color": "Highlight", + "forcedColorAdjust": "none", + }, + "backgroundColor": "HighlightText", + "borderColor": "Highlight", + "color": "Highlight", + }, + "border": "1px solid WindowText", + "borderLeftWidth": "0", + }, + }, + ".ms-Button--default + .ms-Button[aria-expanded="true"]": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + ".ms-Button-menuIcon": { + "MsHighContrastAdjust": "none", + "backgroundColor": "HighlightText", + "color": "Highlight", + "forcedColorAdjust": "none", + }, + "backgroundColor": "HighlightText", + "borderColor": "Highlight", + "color": "Highlight", + }, + }, + ".ms-Button--primary": { + ":active": { + "border": "none", + }, + ":hover": { + "border": "none", + }, + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + ":active": { + "border": "1px solid Highlight", + }, + ":hover": { + "backgroundColor": "Highlight", + "border": "1px solid Highlight", + "borderRightWidth": "0", + "color": "HighlightText", + }, + "MsHighContrastAdjust": "none", + "backgroundColor": "Window", + "border": "1px solid WindowText", + "borderRightWidth": "0", + "color": "WindowText", + "forcedColorAdjust": "none", + }, + "border": "none", + "borderBottomRightRadius": "0", + "borderTopRightRadius": "0", + "flexGrow": "1", + }, + ".ms-Button--primary + .ms-Button": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + ":hover": { + ".ms-Button-menuIcon": { + "MsHighContrastAdjust": "none", + "color": "HighlightText", + "forcedColorAdjust": "none", + }, + "backgroundColor": "Highlight", + "borderColor": "Highlight", + "borderLeftWidth": "0", + "color": "HighlightText", + }, + "border": "1px solid WindowText", + "borderLeftWidth": "0", + }, + "border": "none", + }, + ".ms-Button--primary + .ms-Button[aria-expanded="true"]": { + ".ms-Button-menuIcon": { + "color": "HighlightText", + }, + "MsHighContrastAdjust": "none", + "backgroundColor": "Highlight", + "borderColor": "Highlight", + "color": "HighlightText", + "forcedColorAdjust": "none", + }, + ".ms-Button.is-disabled": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "Window", + "borderColor": "GrayText", + "color": "GrayText", + }, + }, + "display": "inline-flex", + }, + ], + "splitButtonContainerChecked": { + ".ms-Button--primary": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "MsHighContrastAdjust": "none", + "backgroundColor": "WindowText", + "color": "Window", + "forcedColorAdjust": "none", + }, + }, + }, + "splitButtonContainerCheckedHovered": { + ".ms-Button--primary": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "MsHighContrastAdjust": "none", + "backgroundColor": "WindowText", + "color": "Window", + "forcedColorAdjust": "none", + }, + }, + }, + "splitButtonContainerDisabled": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "MsHighContrastAdjust": "none", + "backgroundColor": "Window", + "borderColor": "GrayText", + "color": "GrayText", + "forcedColorAdjust": "none", + }, + "border": "none", + "outline": "none", + }, + "splitButtonContainerFocused": { + "outline": "none!important", + }, + "splitButtonContainerHovered": { + ".ms-Button--default.is-disabled": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "Window", + "borderColor": "GrayText", + "color": "GrayText", + }, + "backgroundColor": "#f3f2f1", + "color": "#a19f9d", + }, + ".ms-Button--primary.is-disabled": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "Window", + "borderColor": "GrayText", + "color": "GrayText", + }, + "backgroundColor": "#f3f2f1", + "color": "#d2d0ce", + }, + }, + "splitButtonDivider": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "WindowText", + }, + "bottom": 8, + "position": "absolute", + "right": 31, + "top": 8, + "width": 1, + }, + "splitButtonDividerDisabled": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "GrayText", + }, + "bottom": 8, + "position": "absolute", + "right": 31, + "top": 8, + "width": 1, + }, + "splitButtonFlexContainer": { + "alignItems": "center", + "display": "flex", + "flexWrap": "nowrap", + "height": "100%", + "justifyContent": "center", + }, + "splitButtonMenuButton": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + ".ms-Button-menuIcon": { + "color": "WindowText", + }, + }, + "border": "1px solid #8a8886", + "borderBottomRightRadius": "2px", + "borderLeft": "none", + "borderRadius": 0, + "borderTopRightRadius": "2px", + "boxSizing": "border-box", + "cursor": "pointer", + "display": "inline-block", + "height": "auto", + "marginBottom": 0, + "marginLeft": -1, + "marginRight": 0, + "marginTop": 0, + "outline": "transparent", + "padding": 6, + "textAlign": "center", + "textDecoration": "none", + "userSelect": "none", + "verticalAlign": "top", + "width": 32, + }, + "splitButtonMenuButtonDisabled": { + ".ms-Button--primary": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "Window", + "borderColor": "GrayText", + "color": "GrayText", + }, + }, + ".ms-Button-menuIcon": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "color": "GrayText", + }, + }, + ":hover": { + "cursor": "default", + }, + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "backgroundColor": "Window", + "border": "1px solid GrayText", + "color": "GrayText", + }, + "border": "none", + "pointerEvents": "none", + }, + "splitButtonMenuFocused": { + "outline": "transparent", + "position": "relative", + "selectors": { + ".ms-Fabric--isFocusVisible &:focus:after, :host(.ms-Fabric--isFocusVisible) &:focus:after": { + "border": "1px solid #ffffff", + "borderRadius": undefined, + "bottom": 3, + "content": """", + "left": 3, + "outline": "1px solid #605e5c", + "pointerEvents": undefined, + "position": "absolute", + "right": 3, + "selectors": { + "@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)": { + "border": "none", + "bottom": -2, + "left": -2, + "right": -2, + "top": -2, + }, + }, + "top": 3, + "zIndex": 1, + }, + "::-moz-focus-inner": { + "border": "0", + }, + }, + }, + "textContainer": { + "display": "block", + "flexGrow": 1, + }, + } + } + theme={ + { + "disableGlobalClassNames": false, + "effects": { + "elevation16": "0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)", + "elevation4": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)", + "elevation64": "0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18)", + "elevation8": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)", + "roundedCorner2": "2px", + "roundedCorner4": "4px", + "roundedCorner6": "6px", + }, + "fonts": { + "large": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "18px", + "fontWeight": 400, + }, + "medium": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "14px", + "fontWeight": 400, + }, + "mediumPlus": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "16px", + "fontWeight": 400, + }, + "mega": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "68px", + "fontWeight": 600, + }, + "small": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "12px", + "fontWeight": 400, + }, + "smallPlus": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "12px", + "fontWeight": 400, + }, + "superLarge": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "42px", + "fontWeight": 600, + }, + "tiny": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "10px", + "fontWeight": 400, + }, + "xLarge": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "20px", + "fontWeight": 600, + }, + "xLargePlus": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "24px", + "fontWeight": 600, + }, + "xSmall": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "10px", + "fontWeight": 400, + }, + "xxLarge": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "28px", + "fontWeight": 600, + }, + "xxLargePlus": { + "MozOsxFontSmoothing": "grayscale", + "WebkitFontSmoothing": "antialiased", + "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif", + "fontSize": "32px", + "fontWeight": 600, + }, + }, + "isInverted": false, + "palette": { + "accent": "#0078d4", + "black": "#000000", + "blackTranslucent40": "rgba(0,0,0,.4)", + "blue": "#0078d4", + "blueDark": "#002050", + "blueLight": "#00bcf2", + "blueMid": "#00188f", + "green": "#107c10", + "greenDark": "#004b1c", + "greenLight": "#bad80a", + "magenta": "#b4009e", + "magentaDark": "#5c005c", + "magentaLight": "#e3008c", + "neutralDark": "#201f1e", + "neutralLight": "#edebe9", + "neutralLighter": "#f3f2f1", + "neutralLighterAlt": "#faf9f8", + "neutralPrimary": "#323130", + "neutralPrimaryAlt": "#3b3a39", + "neutralQuaternary": "#d2d0ce", + "neutralQuaternaryAlt": "#e1dfdd", + "neutralSecondary": "#605e5c", + "neutralSecondaryAlt": "#8a8886", + "neutralTertiary": "#a19f9d", + "neutralTertiaryAlt": "#c8c6c4", + "orange": "#d83b01", + "orangeLight": "#ea4300", + "orangeLighter": "#ff8c00", + "purple": "#5c2d91", + "purpleDark": "#32145a", + "purpleLight": "#b4a0ff", + "red": "#e81123", + "redDark": "#a4262c", + "teal": "#008272", + "tealDark": "#004b50", + "tealLight": "#00b294", + "themeDark": "#005a9e", + "themeDarkAlt": "#106ebe", + "themeDarker": "#004578", + "themeLight": "#c7e0f4", + "themeLighter": "#deecf9", + "themeLighterAlt": "#eff6fc", + "themePrimary": "#0078d4", + "themeSecondary": "#2b88d8", + "themeTertiary": "#71afe5", + "white": "#ffffff", + "whiteTranslucent40": "rgba(255,255,255,.4)", + "yellow": "#ffb900", + "yellowDark": "#d29200", + "yellowLight": "#fff100", + }, + "rtl": undefined, + "semanticColors": { + "accentButtonBackground": "#0078d4", + "accentButtonText": "#ffffff", + "actionLink": "#323130", + "actionLinkHovered": "#201f1e", + "blockingBackground": "#FDE7E9", + "blockingIcon": "#FDE7E9", + "bodyBackground": "#ffffff", + "bodyBackgroundChecked": "#edebe9", + "bodyBackgroundHovered": "#f3f2f1", + "bodyDivider": "#edebe9", + "bodyFrameBackground": "#ffffff", + "bodyFrameDivider": "#edebe9", + "bodyStandoutBackground": "#faf9f8", + "bodySubtext": "#605e5c", + "bodyText": "#323130", + "bodyTextChecked": "#000000", + "buttonBackground": "#ffffff", + "buttonBackgroundChecked": "#c8c6c4", + "buttonBackgroundCheckedHovered": "#edebe9", + "buttonBackgroundDisabled": "#f3f2f1", + "buttonBackgroundHovered": "#f3f2f1", + "buttonBackgroundPressed": "#edebe9", + "buttonBorder": "#8a8886", + "buttonBorderDisabled": "#f3f2f1", + "buttonText": "#323130", + "buttonTextChecked": "#201f1e", + "buttonTextCheckedHovered": "#000000", + "buttonTextDisabled": "#a19f9d", + "buttonTextHovered": "#201f1e", + "buttonTextPressed": "#201f1e", + "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)", + "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)", + "cardStandoutBackground": "#ffffff", + "defaultStateBackground": "#faf9f8", + "disabledBackground": "#f3f2f1", + "disabledBodySubtext": "#c8c6c4", + "disabledBodyText": "#a19f9d", + "disabledBorder": "#c8c6c4", + "disabledSubtext": "#d2d0ce", + "disabledText": "#a19f9d", + "errorBackground": "#FDE7E9", + "errorIcon": "#A80000", + "errorText": "#a4262c", + "focusBorder": "#605e5c", + "infoBackground": "#f3f2f1", + "infoIcon": "#605e5c", + "inputBackground": "#ffffff", + "inputBackgroundChecked": "#0078d4", + "inputBackgroundCheckedHovered": "#005a9e", + "inputBorder": "#605e5c", + "inputBorderHovered": "#323130", + "inputFocusBorderAlt": "#0078d4", + "inputForegroundChecked": "#ffffff", + "inputIcon": "#0078d4", + "inputIconDisabled": "#a19f9d", + "inputIconHovered": "#005a9e", + "inputPlaceholderBackgroundChecked": "#deecf9", + "inputPlaceholderText": "#605e5c", + "inputText": "#323130", + "inputTextHovered": "#201f1e", + "link": "#0078d4", + "linkHovered": "#004578", + "listBackground": "#ffffff", + "listHeaderBackgroundHovered": "#f3f2f1", + "listHeaderBackgroundPressed": "#edebe9", + "listItemBackgroundChecked": "#edebe9", + "listItemBackgroundCheckedHovered": "#e1dfdd", + "listItemBackgroundHovered": "#f3f2f1", + "listText": "#323130", + "listTextColor": "#323130", + "menuBackground": "#ffffff", + "menuDivider": "#c8c6c4", + "menuHeader": "#0078d4", + "menuIcon": "#0078d4", + "menuItemBackgroundChecked": "#edebe9", + "menuItemBackgroundHovered": "#f3f2f1", + "menuItemBackgroundPressed": "#edebe9", + "menuItemText": "#323130", + "menuItemTextHovered": "#201f1e", + "messageLink": "#005A9E", + "messageLinkHovered": "#004578", + "messageText": "#323130", + "primaryButtonBackground": "#0078d4", + "primaryButtonBackgroundDisabled": "#f3f2f1", + "primaryButtonBackgroundHovered": "#106ebe", + "primaryButtonBackgroundPressed": "#005a9e", + "primaryButtonBorder": "transparent", + "primaryButtonText": "#ffffff", + "primaryButtonTextDisabled": "#d2d0ce", + "primaryButtonTextHovered": "#ffffff", + "primaryButtonTextPressed": "#ffffff", + "severeWarningBackground": "#FED9CC", + "severeWarningIcon": "#D83B01", + "smallInputBorder": "#605e5c", + "successBackground": "#DFF6DD", + "successIcon": "#107C10", + "successText": "#107C10", + "variantBorder": "#edebe9", + "variantBorderHovered": "#a19f9d", + "warningBackground": "#FFF4CE", + "warningHighlight": "#ffb900", + "warningIcon": "#797775", + "warningText": "#323130", + }, + "spacing": { + "l1": "20px", + "l2": "32px", + "m": "16px", + "s1": "8px", + "s2": "4px", + }, + } + } + title="Copy" + variantClassName="ms-Button--icon" + > + + + + + + +
+
+
+
+ + @@ -37,7 +1888,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect variant="small" >
+ + + + + +
+
+
+
+ + @@ -699,7 +2220,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = ` className="ms-TextField-wrapper" >