random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use @fluentui/react DocumentCard (#715)

Browse Source 
Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
This commit is contained in:
Hardikkumar Nai
2021-05-11 00:47:37 +05:30
committed by GitHub
parent 9d5c9d6296
commit a81b1a40a3
16 changed files with 265 additions and 914 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap
View File

@@ -1959,7 +1959,7 @@ exports[`test render renders with filters 1`] = `
</div>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

116
src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
View File

@@ -1,20 +1,23 @@
import {
BaseButton,
Button,
FontWeights,
DocumentCard,
DocumentCardActivity,
DocumentCardDetails,
DocumentCardPreview,
DocumentCardTitle,
Icon,
IconButton,
Image,
IDocumentCardPreviewProps,
IDocumentCardStyles,
ImageFit,
Link,
Persona,
Separator,
Spinner,
SpinnerSize,
Text,
TooltipHost,
} from "@fluentui/react";
import { Card } from "@uifabric/react-cards";
import React, { FunctionComponent, useState } from "react";
import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -48,7 +51,6 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
const CARD_WIDTH = 256;
const cardImageHeight = 144;
const cardDescriptionMaxChars = 80;
const cardItemGapBig = 10;
const cardItemGapSmall = 8;
const cardDeleteSpinnerHeight = 360;
const smallTextLineHeight = 18;
@@ -64,9 +66,9 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
const dateString = new Date(data.created).toLocaleString("default", options);
const cardTitle = FileSystemUtil.stripExtension(data.name, "ipynb");
const renderTruncatedDescription = (): string => {
let truncatedDescription = data.description.substr(0, cardDescriptionMaxChars);
if (data.description.length > cardDescriptionMaxChars) {
const renderTruncated = (text: string, totalLength: number): string => {
let truncatedDescription = text.substr(0, totalLength);
if (text.length > totalLength) {
truncatedDescription = `${truncatedDescription} ...`;
}
return truncatedDescription;
@@ -120,42 +122,35 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
event.preventDefault();
activate();
};
const DocumentCardActivityPeople = [{ name: data.author, profileImageSrc: data.isSample && CosmosDBLogo }];
const previewProps: IDocumentCardPreviewProps = {
previewImages: [
{
previewImageSrc: data.thumbnailUrl,
imageFit: ImageFit.cover,
width: CARD_WIDTH,
height: cardImageHeight,
},
],
};
const cardStyles: IDocumentCardStyles = {
root: { display: "inline-block", marginRight: 20, width: CARD_WIDTH },
};
return (
<Card
style={{ background: "white" }}
aria-label={cardTitle}
data-is-focusable="true"
tokens={{ width: CARD_WIDTH, childrenGap: 0 }}
onClick={(event) => handlerOnClick(event, onClick)}
>
<DocumentCard aria-label={cardTitle} styles={cardStyles} onClick={onClick}>
{isDeletingPublishedNotebook && (
<Card.Item tokens={{ padding: cardItemGapBig }}>
<Spinner
size={SpinnerSize.large}
label={`Deleting '${cardTitle}'`}
styles={{ root: { height: cardDeleteSpinnerHeight } }}
/>
</Card.Item>
<Spinner
size={SpinnerSize.large}
label={`Deleting '${cardTitle}'`}
styles={{ root: { height: cardDeleteSpinnerHeight } }}
/>
)}
{!isDeletingPublishedNotebook && (
<>
<Card.Item tokens={{ padding: cardItemGapBig }}>
<Persona imageUrl={data.isSample && CosmosDBLogo} text={data.author} secondaryText={dateString} />
</Card.Item>
<Card.Item>
<Image
src={data.thumbnailUrl}
width={CARD_WIDTH}
height={cardImageHeight}
imageFit={ImageFit.cover}
alt={`${cardTitle} cover image`}
/>
</Card.Item>
<Card.Section styles={{ root: { padding: cardItemGapBig } }}>
<Text variant="small" nowrap styles={{ root: { height: smallTextLineHeight } }}>
<DocumentCardActivity activity={dateString} people={DocumentCardActivityPeople} />
<DocumentCardPreview {...previewProps} />
<DocumentCardDetails>
<Text variant="small" nowrap styles={{ root: { height: smallTextLineHeight, padding: "2px 16px" } }}>
{data.tags ? (
data.tags.map((tag, index, array) => (
<span key={tag}>
@@ -167,43 +162,22 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
<br />
)}
</Text>
<Text
styles={{
root: {
fontWeight: FontWeights.semibold,
paddingTop: cardItemGapSmall,
paddingBottom: cardItemGapSmall,
},
}}
nowrap
>
{cardTitle}
</Text>
<Text variant="small" styles={{ root: { height: smallTextLineHeight * 2 } }}>
{renderTruncatedDescription()}
</Text>
<span>
<DocumentCardTitle title={renderTruncated(cardTitle, 20)} shouldTruncate />
<DocumentCardTitle
title={renderTruncated(data.description, cardDescriptionMaxChars)}
showAsSecondaryTitle
/>
<span style={{ padding: "8px 16px" }}>
{data.views !== undefined && generateIconText("RedEye", data.views.toString())}
{data.downloads !== undefined && generateIconText("Download", data.downloads.toString())}
{data.favorites !== undefined && generateIconText("Heart", data.favorites.toString())}
</span>
</Card.Section>
</DocumentCardDetails>
{cardButtonsVisible && (
<Card.Section
styles={{
root: {
marginLeft: cardItemGapBig,
marginRight: cardItemGapBig,
},
}}
>
<DocumentCardDetails>
<Separator styles={{ root: { padding: 0, height: 1 } }} />
<span>
<span style={{ padding: "0px 16px" }}>
{isFavorite !== undefined &&
generateIconButtonWithTooltip(
isFavorite ? "HeartFill" : "Heart",
@@ -222,10 +196,10 @@ export const GalleryCardComponent: FunctionComponent<GalleryCardComponentProps>
)
)}
</span>
</Card.Section>
</DocumentCardDetails>
)}
</>
)}
</Card>
</DocumentCard>
);
};

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

@@ -1,59 +1,49 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GalleryCardComponent renders 1`] = `
<Card
<StyledDocumentCardBase
aria-label="name"
data-is-focusable="true"
onClick={[Function]}
style={
styles={
Object {
"background": "white",
}
}
tokens={
Object {
"childrenGap": 0,
"width": 256,
"root": Object {
"display": "inline-block",
"marginRight": 20,
"width": 256,
},
}
}
>
<CardItem
tokens={
Object {
"padding": 10,
}
}
>
<StyledPersonaBase
imageUrl={false}
secondaryText="Invalid Date"
text="author"
/>
</CardItem>
<CardItem>
<Image
alt="name cover image"
height={144}
imageFit={2}
src="thumbnailUrl"
width={256}
/>
</CardItem>
<CardSection
styles={
Object {
"root": Object {
"padding": 10,
<StyledDocumentCardActivityBase
activity="Invalid Date"
people={
Array [
Object {
"name": "author",
"profileImageSrc": false,
},
}
]
}
>
/>
<StyledDocumentCardPreviewBase
previewImages={
Array [
Object {
"height": 144,
"imageFit": 2,
"previewImageSrc": "thumbnailUrl",
"width": 256,
},
]
}
/>
<StyledDocumentCardDetailsBase>
<Text
nowrap={true}
styles={
Object {
"root": Object {
"height": 18,
"padding": "2px 16px",
},
}
}
@@ -69,33 +59,21 @@ exports[`GalleryCardComponent renders 1`] = `
</StyledLinkBase>
</span>
</Text>
<Text
nowrap={true}
styles={
<StyledDocumentCardTitleBase
shouldTruncate={true}
title="name"
/>
<StyledDocumentCardTitleBase
showAsSecondaryTitle={true}
title="description"
/>
<span
style={
Object {
"root": Object {
"fontWeight": 600,
"paddingBottom": 8,
"paddingTop": 8,
},
"padding": "8px 16px",
}
}
>
name
</Text>
<Text
styles={
Object {
"root": Object {
"height": 36,
},
}
}
variant="small"
>
description
</Text>
<span>
<Text
styles={
Object {
@@ -169,17 +147,8 @@ exports[`GalleryCardComponent renders 1`] = `
0
</Text>
</span>
</CardSection>
<CardSection
styles={
Object {
"root": Object {
"marginLeft": 10,
"marginRight": 10,
},
}
}
>
</StyledDocumentCardDetailsBase>
<StyledDocumentCardDetailsBase>
<Separator
styles={
Object {
@@ -190,7 +159,13 @@ exports[`GalleryCardComponent renders 1`] = `
}
}
/>
<span>
<span
style={
Object {
"padding": "0px 16px",
}
}
>
<StyledTooltipHostBase
calloutProps={
Object {
@@ -276,6 +251,6 @@ exports[`GalleryCardComponent renders 1`] = `
/>
</StyledTooltipHostBase>
</span>
</CardSection>
</Card>
</StyledDocumentCardDetailsBase>
</StyledDocumentCardBase>
`;

7
src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
View File

@@ -34,7 +34,6 @@ import { CodeOfConductComponent } from "./CodeOfConductComponent";
import "./GalleryViewerComponent.less";
import { InfoComponent } from "./InfoComponent/InfoComponent";
const CARD_WIDTH = 256;
export interface GalleryViewerComponentProps {
container?: Explorer;
junoClient: JunoClient;
@@ -87,7 +86,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
public static readonly PublishedTitle = "My published work";
private static readonly rowsPerPage = 5;
private static readonly CARD_WIDTH = 256;
private static readonly mostViewedText = "Most viewed";
private static readonly mostDownloadedText = "Most downloaded";
private static readonly mostFavoritedText = "Most favorited";
@@ -644,7 +643,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
private getPageSpecification = (itemIndex?: number, visibleRect?: IRectangle): IPageSpecification => {
if (itemIndex === 0) {
this.columnCount = Math.floor(visibleRect.width / CARD_WIDTH) || this.columnCount;
this.columnCount = Math.floor(visibleRect.width / GalleryViewerComponent.CARD_WIDTH) || this.columnCount;
this.rowCount = GalleryViewerComponent.rowsPerPage;
}
@@ -672,7 +671,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
};
return (
<div style={{ float: "left", padding: 10 }}>
<div style={{ float: "left", padding: 5 }}>
<GalleryCardComponent {...props} />
</div>
);

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

@@ -252,7 +252,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
>
capacity calculator
<Component
<FontIcon
iconName="NavigateExternalInline"
/>
</StyledLinkBase>
@@ -526,7 +526,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
>
capacity calculator
<Component
<FontIcon
iconName="NavigateExternalInline"
/>
</StyledLinkBase>

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

@@ -1099,7 +1099,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<button
aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-202"
className="ms-Button ms-Button--icon closePaneBtn root-102"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -1112,16 +1112,16 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-203"
className="ms-Button-flexContainer flexContainer-103"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-205"
<FontIcon
className="ms-Button-icon icon-105"
iconName="Cancel"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-210 ms-Button-icon icon-205"
className="ms-Icon root-37 css-110 ms-Button-icon icon-105"
data-icon-name="Cancel"
style={
Object {
@@ -1131,10 +1131,10 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>
@@ -1190,7 +1190,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-211"
className="css-111"
>
Confirm by typing the
container
@@ -1494,18 +1494,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField root-213"
className="ms-TextField root-113"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-214"
className="ms-TextField-fieldGroup fieldGroup-114"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-215"
className="ms-TextField-field field-115"
id="confirmCollectionId"
onBlur={[Function]}
onChange={[Function]}
@@ -1528,7 +1528,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-224"
className="css-124"
>
Help us improve Azure Cosmos DB!
</span>
@@ -1538,7 +1538,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
variant="small"
>
<span
className="css-224"
className="css-124"
>
What is the reason why you are deleting this
container
@@ -1844,17 +1844,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
value=""
>
<div
className="ms-TextField ms-TextField--multiline root-213"
className="ms-TextField ms-TextField--multiline root-113"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-225"
className="ms-TextField-fieldGroup fieldGroup-125"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-226"
className="ms-TextField-field field-126"
id="deleteCollectionFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@@ -3616,7 +3616,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
>
<button
aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-228"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-128"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -3634,14 +3634,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-203"
className="ms-Button-flexContainer flexContainer-103"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-204"
className="ms-Button-textContainer textContainer-104"
>
<span
className="ms-Button-label label-229"
className="ms-Button-label label-129"
id="id__9"
key="id__9"
>
@@ -3650,7 +3650,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

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

@@ -1106,7 +1106,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<Component
<FontIcon
className="ms-Button-icon icon-56"
iconName="Cancel"
>
@@ -1122,10 +1122,10 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>
@@ -8213,7 +8213,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

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

@@ -1758,7 +1758,7 @@ exports[`Right Pane Form should render Default properly 1`] = `
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

2
src/Explorer/Panes/SetupNotebooksPanel/__snapshots__/SetupNotebooksPanel.test.tsx.snap
View File

@@ -1760,7 +1760,7 @@ exports[`Setup Notebooks Panel should render Default properly 1`] = `
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

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

@@ -2365,7 +2365,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<button
aria-label="Close pane"
className="ms-Button ms-Button--icon closePaneBtn root-153"
className="ms-Button ms-Button--icon closePaneBtn root-53"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -2378,16 +2378,16 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-154"
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<Component
className="ms-Button-icon icon-156"
<FontIcon
className="ms-Button-icon icon-56"
iconName="Cancel"
>
<i
aria-hidden={true}
className="ms-Icon root-37 css-161 ms-Button-icon icon-156"
className="ms-Icon root-37 css-61 ms-Button-icon icon-56"
data-icon-name="Cancel"
style={
Object {
@@ -2397,10 +2397,10 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>
@@ -2737,7 +2737,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
value=""
>
<div
className="ms-TextField is-required root-163"
className="ms-TextField is-required root-63"
>
<div
className="ms-TextField-wrapper"
@@ -3028,7 +3028,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
}
>
<label
className="ms-Label root-174"
className="ms-Label root-74"
htmlFor="TextField3"
id="TextFieldLabel5"
>
@@ -3037,13 +3037,13 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</LabelBase>
</StyledLabelBase>
<div
className="ms-TextField-fieldGroup fieldGroup-164"
className="ms-TextField-fieldGroup fieldGroup-64"
>
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel5"
autoFocus={true}
className="ms-TextField-field field-165"
className="ms-TextField-field field-65"
id="TextField3"
name="collectionIdConfirmation"
onBlur={[Function]}
@@ -4805,7 +4805,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
>
<button
aria-label="Submit"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-175"
className="ms-Button ms-Button--primary genericPaneSubmitBtn root-75"
data-is-focusable={true}
onClick={[Function]}
onKeyDown={[Function]}
@@ -4823,14 +4823,14 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
type="button"
>
<span
className="ms-Button-flexContainer flexContainer-154"
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-155"
className="ms-Button-textContainer textContainer-55"
>
<span
className="ms-Button-label label-176"
className="ms-Button-label label-76"
id="id__6"
key="id__6"
>
@@ -4839,7 +4839,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

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

@@ -1110,7 +1110,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
className="ms-Button-flexContainer flexContainer-54"
data-automationid="splitbuttonprimary"
>
<Component
<FontIcon
className="ms-Button-icon icon-56"
iconName="Cancel"
>
@@ -1126,10 +1126,10 @@ exports[`Table query select Panel should render Default properly 1`] = `
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>
@@ -4180,7 +4180,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>

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

@@ -2663,7 +2663,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
className="ms-Button-flexContainer flexContainer-73"
data-automationid="splitbuttonprimary"
>
<Component
<FontIcon
className="ms-Button-icon icon-75"
iconName="Cancel"
>
@@ -2679,10 +2679,10 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>

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

@@ -2664,7 +2664,7 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
className="ms-Button-flexContainer flexContainer-73"
data-automationid="splitbuttonprimary"
>
<Component
<FontIcon
className="ms-Button-icon icon-75"
iconName="Cancel"
>
@@ -2680,10 +2680,10 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
>
</i>
</Component>
</FontIcon>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</IconButton>
</CustomizedIconButton>

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

@@ -1291,7 +1291,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
verticalAlign="center"
>
<div
className="ms-Stack panelInfoErrorContainer css-202"
className="ms-Stack panelInfoErrorContainer css-102"
>
<StyledIconBase
aria-label="warning"
@@ -1580,7 +1580,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<i
aria-label="warning"
className="panelWarningIcon root-204"
className="panelWarningIcon root-104"
data-icon-name="WarningSolid"
role="img"
>
@@ -1599,7 +1599,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<span
aria-label="message"
className="panelWarningErrorMessage css-205"
className="panelWarningErrorMessage css-105"
>
Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
</span>
@@ -1623,7 +1623,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-205"
className="css-105"
>
Confirm by typing the database id
</span>
@@ -1923,18 +1923,18 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField root-207"
className="ms-TextField root-107"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-208"
className="ms-TextField-fieldGroup fieldGroup-108"
>
<input
aria-invalid={false}
autoFocus={true}
className="ms-TextField-field field-209"
className="ms-TextField-field field-109"
id="confirmDatabaseId"
onBlur={[Function]}
onChange={[Function]}
@@ -1957,7 +1957,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-226"
className="css-126"
>
Help us improve Azure Cosmos DB!
</span>
@@ -1967,7 +1967,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
variant="small"
>
<span
className="css-226"
className="css-126"
>
What is the reason why you are deleting this database?
</span>
@@ -2269,17 +2269,17 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
validateOnLoad={true}
>
<div
className="ms-TextField ms-TextField--multiline root-207"
className="ms-TextField ms-TextField--multiline root-107"
>
<div
className="ms-TextField-wrapper"
>
<div
className="ms-TextField-fieldGroup fieldGroup-227"
className="ms-TextField-fieldGroup fieldGroup-127"
>
<textarea
aria-invalid={false}
className="ms-TextField-field field-228"
className="ms-TextField-field field-128"
id="deleteDatabaseFeedbackInput"
onBlur={[Function]}
onChange={[Function]}
@@ -4005,7 +4005,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
>
<button
aria-label="OK"
className="ms-Button ms-Button--primary root-218"
className="ms-Button ms-Button--primary root-118"
data-is-focusable={true}
id="sidePanelOkButton"
onClick={[Function]}
@@ -4017,14 +4017,14 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
type="submit"
>
<span
className="ms-Button-flexContainer flexContainer-219"
className="ms-Button-flexContainer flexContainer-119"
data-automationid="splitbuttonprimary"
>
<span
className="ms-Button-textContainer textContainer-220"
className="ms-Button-textContainer textContainer-120"
>
<span
className="ms-Button-label label-222"
className="ms-Button-label label-122"
id="id__3"
key="id__3"
>
@@ -4033,7 +4033,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
</span>
</span>
</button>
<Component />
<FocusRects />
</BaseButton>
</DefaultButton>
</CustomizedDefaultButton>