mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-27 05:34:20 +00:00
pull master
This commit is contained in:
hardiknai-techm
@@ -1,602 +0,0 @@
|
||||
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
||||
<div class="contextual-pane-out" data-bind="setTemplateReady: true, click: cancel, clickBubble: false"></div>
|
||||
<div class="contextual-pane" data-bind="attr: { id: id }">
|
||||
<!-- Add collection form -- Start -->
|
||||
<div class="contextual-pane-in">
|
||||
<form data-bind="submit: submit" style="height: 100%">
|
||||
<div
|
||||
class="paneContentContainer"
|
||||
role="dialog"
|
||||
aria-labelledby="containerTitle"
|
||||
data-bind="template: { name: 'add-collection-inputs' }"
|
||||
></div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Add collection form -- End -->
|
||||
<!-- Loader - Start -->
|
||||
<div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
|
||||
<img class="dataExplorerLoader" src="/images/LoadingIndicator_3Squares.gif" />
|
||||
</div>
|
||||
<!-- Loader - End -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="add-collection-inputs">
|
||||
<!-- Add collection header - Start -->
|
||||
<div class="firstdivbg headerline">
|
||||
<span id="containerTitle" role="heading" aria-level="2" data-bind="text: title"></span>
|
||||
<div
|
||||
class="closeImg"
|
||||
id="closeBtnAddCollection"
|
||||
role="button"
|
||||
aria-label="Add collection close pane"
|
||||
data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
|
||||
tabindex="0"
|
||||
>
|
||||
<img src="/images/close-black.svg" title="Close" alt="Close" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add collection header - End -->
|
||||
|
||||
<!-- Add collection errors - Start -->
|
||||
<div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formErrors() && formErrors() !== ''">
|
||||
<div class="warningErrorContent">
|
||||
<span><img class="paneErrorIcon" src="/images/error_red.svg" alt="Error" /></span>
|
||||
<span class="warningErrorDetailsLinkContainer">
|
||||
<span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
|
||||
<a
|
||||
class="errorLink"
|
||||
role="link"
|
||||
data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '' , click: showErrorDetails, event: { keypress: onMoreDetailsKeyPress }"
|
||||
tabindex="0"
|
||||
>
|
||||
More details</a
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warningErrorContainer" aria-live="assertive" data-bind="visible: formWarnings() && formWarnings() !== ''">
|
||||
<div class="warningErrorContent">
|
||||
<span><img class="paneErrorIcon" src="/images/warning.svg" alt="Warning" /></span>
|
||||
<span class="warningErrorDetailsLinkContainer">
|
||||
<span class="formErrors" data-bind="text: formWarnings, attr: { title: formWarnings }"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add collection errors - End -->
|
||||
|
||||
<!-- upsell message - start -->
|
||||
<div
|
||||
class="infoBoxContainer"
|
||||
aria-live="assertive"
|
||||
data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()"
|
||||
>
|
||||
<div class="infoBoxContent">
|
||||
<span><img class="infoBoxIcon" src="/images/info_color.svg" alt="Promo" /></span>
|
||||
<span class="infoBoxDetails">
|
||||
<span class="infoBoxMessage" data-bind="text: upsellMessage, attr: { title: upsellMessage }"></span>
|
||||
<a
|
||||
class="underlinedLink"
|
||||
id="linkAddCollection"
|
||||
data-bind="text: upsellAnchorText, attr: { 'href': upsellAnchorUrl, 'aria-label': upsellMessageAriaLabel }"
|
||||
target="_blank"
|
||||
href=""
|
||||
tabindex="0"
|
||||
></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- upsell message - end -->
|
||||
|
||||
<!-- Add collection inputs - Start -->
|
||||
<div class="paneMainContent" data-bind="visible: !maxCollectionsReached()">
|
||||
<div data-bind="visible: !isPreferredApiTable()">
|
||||
<p>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel">Database id</span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext infoTooltipWidth"
|
||||
>A database is analogous to a namespace. It is the unit of management for a set of containers.</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="createNewDatabaseOrUseExisting">
|
||||
<input
|
||||
class="createNewDatabaseOrUseExistingRadio"
|
||||
aria-label="Create new database"
|
||||
name="databaseType"
|
||||
type="radio"
|
||||
role="radio"
|
||||
id="databaseCreateNew"
|
||||
data-test="addCollection-createNewDatabase"
|
||||
tabindex="0"
|
||||
data-bind="checked: databaseCreateNew, checkedValue: true, attr: { 'aria-checked': databaseCreateNew() ? 'true' : 'false' }"
|
||||
/>
|
||||
<span class="createNewDatabaseOrUseExistingSpace" for="databaseCreateNew">Create new</span>
|
||||
|
||||
<input
|
||||
class="createNewDatabaseOrUseExistingRadio"
|
||||
aria-label="Use existing database"
|
||||
name="databaseType"
|
||||
type="radio"
|
||||
role="radio"
|
||||
id="databaseUseExisting"
|
||||
data-test="addCollection-existingDatabase"
|
||||
tabindex="0"
|
||||
data-bind="checked: databaseCreateNew, checkedValue: false, attr: { 'aria-checked': !databaseCreateNew() ? 'true' : 'false' }"
|
||||
/>
|
||||
<span class="createNewDatabaseOrUseExistingSpace" for="databaseUseExisting">Use existing</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
name="newDatabaseId"
|
||||
id="databaseId"
|
||||
data-test="addCollection-newDatabaseId"
|
||||
aria-required="true"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
placeholder="Type a new database id"
|
||||
size="40"
|
||||
class="collid"
|
||||
data-bind="visible: databaseCreateNew, textInput: databaseId, hasFocus: firstFieldHasFocus"
|
||||
autofocus
|
||||
/>
|
||||
|
||||
<input
|
||||
name="existingDatabaseId"
|
||||
id="existingDatabaseId"
|
||||
data-test="addCollection-existingDatabaseId"
|
||||
aria-required="true"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
list="databasesList"
|
||||
placeholder="Choose an existing database"
|
||||
size="40"
|
||||
class="collid"
|
||||
data-bind="visible: !databaseCreateNew(), textInput: databaseId, hasFocus: firstFieldHasFocus"
|
||||
/>
|
||||
|
||||
<datalist id="databasesList" data-bind="foreach: databaseIds" data-bind="visible: databaseCreateNew">
|
||||
<option data-bind="value: $data"></option>
|
||||
</datalist>
|
||||
|
||||
<!-- Database provisioned throughput - Start -->
|
||||
<!-- ko if: canConfigureThroughput -->
|
||||
<div class="databaseProvision" aria-label="Provision database throughput" data-bind="visible: databaseCreateNew">
|
||||
<input
|
||||
tabindex="0"
|
||||
type="checkbox"
|
||||
data-test="addCollectionPane-databaseSharedThroughput"
|
||||
id="addCollection-databaseSharedThroughput"
|
||||
title="Provision database throughput"
|
||||
data-bind="checked: databaseCreateNewShared"
|
||||
/>
|
||||
<span class="databaseProvisionText" for="databaseSharedThroughput">Provision database throughput</span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext provisionDatabaseThroughput"
|
||||
>Provisioned throughput at the database level will be shared across all containers within the
|
||||
database.</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div data-bind="visible: databaseCreateNewShared() && databaseCreateNew()">
|
||||
<!-- 1 -->
|
||||
<throughput-input-autopilot-v3
|
||||
params="{
|
||||
testId: 'databaseThroughputValue',
|
||||
value: throughputDatabase,
|
||||
minimum: minThroughputRU,
|
||||
maximum: maxThroughputRU,
|
||||
isEnabled: databaseCreateNewShared() && databaseCreateNew(),
|
||||
label: sharedThroughputRangeText,
|
||||
ariaLabel: sharedThroughputRangeText,
|
||||
costsVisible: costsVisible,
|
||||
requestUnitsUsageCost: requestUnitsUsageCost,
|
||||
spendAckChecked: throughputSpendAck,
|
||||
spendAckId: 'throughputSpendAck',
|
||||
spendAckText: throughputSpendAckText,
|
||||
spendAckVisible: throughputSpendAckVisible,
|
||||
showAsMandatory: true,
|
||||
infoBubbleText: ruToolTipText,
|
||||
throughputAutoPilotRadioId: 'newContainer-databaseThroughput-autoPilotRadio',
|
||||
throughputProvisionedRadioId: 'newContainer-databaseThroughput-manualRadio',
|
||||
throughputModeRadioName: 'sharedThroughputModeRadio',
|
||||
isAutoPilotSelected: isSharedAutoPilotSelected,
|
||||
maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
</throughput-input-autopilot-v3>
|
||||
</div>
|
||||
<!-- /ko -->
|
||||
<!-- Database provisioned throughput - End -->
|
||||
</div>
|
||||
|
||||
<div class="seconddivpadding">
|
||||
<p>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel" data-bind="text: collectionIdTitle"></span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext infoTooltipWidth"
|
||||
>Unique identifier for the container and used for id-based routing through REST and all SDKs</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<input
|
||||
name="collectionId"
|
||||
id="containerId"
|
||||
data-test="addCollection-collectionId"
|
||||
type="text"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
placeholder="e.g., Container1"
|
||||
size="40"
|
||||
class="textfontclr collid"
|
||||
data-bind="value: collectionId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Indexing For Shared Throughput - start -->
|
||||
<div class="seconddivpadding" data-bind="visible: showIndexingOptionsForSharedThroughput() && !isMongo()">
|
||||
<div
|
||||
class="useIndexingForSharedThroughput createNewDatabaseOrUseExisting"
|
||||
aria-label="Indexing For Shared Throughput"
|
||||
>
|
||||
<p>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel">Indexing</span>
|
||||
</p>
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="useIndexingForSharedThroughputOn"
|
||||
name="useIndexingForSharedThroughput"
|
||||
value="on"
|
||||
class="createNewDatabaseOrUseExistingRadio"
|
||||
data-bind="checked: useIndexingForSharedThroughput, checkedValue: true"
|
||||
/>
|
||||
<span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOn">Automatic</span>
|
||||
<input
|
||||
type="radio"
|
||||
id="useIndexingForSharedThroughputOff"
|
||||
name="useIndexingForSharedThroughput"
|
||||
value="off"
|
||||
class="createNewDatabaseOrUseExistingRadio"
|
||||
data-bind="checked: useIndexingForSharedThroughput, checkedValue: false"
|
||||
/>
|
||||
<span class="createNewDatabaseOrUseExistingSpace" for="useIndexingForSharedThroughputOff">Off</span>
|
||||
</div>
|
||||
<p data-bind="visible: useIndexingForSharedThroughput">
|
||||
All properties in your documents will be indexed by default for flexible and efficient queries.
|
||||
<a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
|
||||
</p>
|
||||
<p data-bind="visible: useIndexingForSharedThroughput() === false">
|
||||
Indexing will be turned off. Recommended if you don't need to run queries or only have key value operations.
|
||||
<a class="errorLink" href="https://aka.ms/cosmos-indexing-policy" target="_blank">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Indexing For Shared Throughput - end -->
|
||||
|
||||
<p
|
||||
class="seconddivpadding"
|
||||
data-bind="visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
|
||||
>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel">Storage capacity</span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext infoTooltipWidth"
|
||||
>This is the maximum storage size of the container. Storage is billed per GB based on consumption.</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="tabs">
|
||||
<div
|
||||
tabindex="0"
|
||||
data-bind="event: { keydown: onStorageOptionsKeyDown }, visible: isMongo() && !databaseHasSharedOffer() || container.isFixedCollectionWithSharedThroughputSupported"
|
||||
aria-label="Storage capacity"
|
||||
>
|
||||
<!-- Fixed option button - Start -->
|
||||
<div class="tab">
|
||||
<input type="radio" id="tab1" name="storage" value="10" class="radio" data-bind="checked: storage" />
|
||||
<label for="tab1">Fixed (20 GB)</label>
|
||||
</div>
|
||||
<!-- Fixed option button - End -->
|
||||
|
||||
<!-- Unlimited option button - Start -->
|
||||
<div class="tab">
|
||||
<input type="radio" id="tab2" name="storage" value="100" class="radio" data-bind="checked: storage" />
|
||||
<label for="tab2">Unlimited</label>
|
||||
</div>
|
||||
<!-- Unlimited option button - End -->
|
||||
</div>
|
||||
<!-- Unlimited Button Content - Start -->
|
||||
<div class="tabcontent" data-bind="visible: isUnlimitedStorageSelected() || databaseHasSharedOffer()">
|
||||
<div data-bind="visible: partitionKeyVisible">
|
||||
<p>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel" data-bind="text: partitionKeyName"></span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext infoTooltipWidth"
|
||||
>The <span data-bind="text: partitionKeyName"></span> is used to automatically partition data among
|
||||
multiple servers for scalability. Choose a JSON property name that has a wide range of values and is
|
||||
likely to have evenly distributed access patterns.</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
id="addCollection-partitionKeyValue"
|
||||
data-test="addCollection-partitionKeyValue"
|
||||
aria-required="true"
|
||||
size="40"
|
||||
class="textfontclr collid"
|
||||
data-bind="textInput: partitionKey,
|
||||
attr: {
|
||||
placeholder: partitionKeyPlaceholder,
|
||||
required: partitionKeyVisible(),
|
||||
pattern: partitionKeyPattern,
|
||||
title: partitionKeyTitle
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<!-- large parition key - start -->
|
||||
<div class="largePartitionKey" aria-label="Large Partition Key" data-bind="visible: partitionKeyVisible">
|
||||
<input
|
||||
tabindex="0"
|
||||
type="checkbox"
|
||||
id="largePartitionKey"
|
||||
data-test="addCollection-largePartitionKey"
|
||||
title="Large Partition Key"
|
||||
data-bind="checked: largePartitionKey"
|
||||
/>
|
||||
<span for="largePartitionKey"
|
||||
>My <span data-bind="text: lowerCasePartitionKeyName"></span> is larger than 100 bytes</span
|
||||
>
|
||||
<p
|
||||
data-bind="visible: largePartitionKey"
|
||||
class="largePartitionKeyDescription"
|
||||
data-test="addCollection-largePartitionKeyDescription"
|
||||
>
|
||||
Old SDKs do not work with containers that support large
|
||||
<span data-bind="text: lowerCasePartitionKeyName"></span>s, ensure you are using the right SDK version.
|
||||
<a class="errorLink" href="https://aka.ms/cosmosdb/pkv2" target="_blank">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- large parition key - end -->
|
||||
|
||||
<!-- ko if: canConfigureThroughput -->
|
||||
<!-- Provision collection throughput checkbox - start -->
|
||||
<div class="pkPadding" data-bind="visible: databaseHasSharedOffer() && !databaseCreateNew()">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="collectionSharedThroughput"
|
||||
data-bind="checked: collectionWithThroughputInShared, attr: {title:collectionWithThroughputInSharedTitle}"
|
||||
/>
|
||||
<span for="collectionSharedThroughput" data-bind="text: collectionWithThroughputInSharedTitle"></span>
|
||||
<span class="leftAlignInfoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext sharedCollectionThroughputTooltipWidth"
|
||||
>You can optionally provision dedicated throughput for a container within a database that has throughput
|
||||
provisioned. This dedicated throughput amount will not be shared with other containers in the database and
|
||||
does not count towards the throughput you provisioned for the database. This throughput amount will be
|
||||
billed in addition to the throughput amount you provisioned at the database level.</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Provision collection throughput checkbox - end -->
|
||||
|
||||
<!-- Provision collection throughput spinner - start -->
|
||||
<div data-bind="visible: displayCollectionThroughput" data-test="addCollection-displayCollectionThroughput">
|
||||
<!-- 3 -->
|
||||
<throughput-input-autopilot-v3
|
||||
params="{
|
||||
testId: 'collectionThroughputValue',
|
||||
value: throughputMultiPartition,
|
||||
minimum: minThroughputRU,
|
||||
maximum: maxThroughputRU,
|
||||
isEnabled: displayCollectionThroughput,
|
||||
label: throughputRangeText,
|
||||
ariaLabel: throughputRangeText,
|
||||
costsVisible: costsVisible,
|
||||
requestUnitsUsageCost: dedicatedRequestUnitsUsageCost,
|
||||
spendAckChecked: throughputSpendAck,
|
||||
spendAckId: 'throughputSpendAckCollection',
|
||||
spendAckText: throughputSpendAckText,
|
||||
spendAckVisible: throughputSpendAckVisible,
|
||||
showAsMandatory: true,
|
||||
infoBubbleText: ruToolTipText,
|
||||
throughputAutoPilotRadioId: 'newContainer-containerThroughput-autoPilotRadio',
|
||||
throughputProvisionedRadioId: 'newContainer-containerThroughput-manualRadio',
|
||||
throughputModeRadioName: 'throughputModeRadioName',
|
||||
isAutoPilotSelected: isAutoPilotSelected,
|
||||
maxAutoPilotThroughputSet: autoPilotThroughput,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
</throughput-input-autopilot-v3>
|
||||
</div>
|
||||
<!-- Provision collection throughput spinner - end -->
|
||||
<!-- /ko -->
|
||||
<!-- Provision collection throughput - end -->
|
||||
|
||||
<!-- Custom indexes for mongo checkbox - start -->
|
||||
<div class="pkPadding" data-bind="visible: isEnableMongoCapabilityEnabled()">
|
||||
<p>
|
||||
<span class="addCollectionLabel">Indexing</span>
|
||||
</p>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="mongoWildcardIndex"
|
||||
title="mongoWildcardIndex"
|
||||
data-bind="checked: shouldCreateMongoWildcardIndex"
|
||||
/>
|
||||
<span>Create a Wildcard Index on all fields</span>
|
||||
<span class="infoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="tooltiptext mongoWildcardIndexTooltipWidth">
|
||||
By default, only the field _id is indexed. Creating a wildcard index on all fields will quickly optimize
|
||||
query performance and is recommended during development.
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Custom indexes for mongo checkbox - end -->
|
||||
|
||||
<!-- Enable analytical storage - start -->
|
||||
<div
|
||||
class="enableAnalyticalStorage pkPadding"
|
||||
aria-label="Enable Analytical Store"
|
||||
data-bind="visible: isSynapseLinkSupported"
|
||||
>
|
||||
<div>
|
||||
<span class="mandatoryStar">*</span>
|
||||
<span class="addCollectionLabel">Analytical store</span>
|
||||
<span
|
||||
class="infoTooltip"
|
||||
role="tooltip"
|
||||
tabindex="0"
|
||||
data-bind="event: { focus: function(data, event) { transferFocus('tooltip1', 'link1') } }"
|
||||
>
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span id="tooltip1" class="tooltiptext infoTooltipWidth" data-bind="event: { mouseout: onMouseOut }">
|
||||
Enable analytical store capability to perform near real-time analytics on your operational data, without
|
||||
impacting the performance of transactional workloads. Learn more
|
||||
<a
|
||||
id="link1"
|
||||
class="errorLink"
|
||||
href="https://aka.ms/analytical-store-overview"
|
||||
target="_blank"
|
||||
data-bind="event: { focusout: onFocusOut, keydown: onKeyDown.bind($data, 'largePartitionKey') }"
|
||||
>here</a
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="paragraph">
|
||||
<input
|
||||
class="enableAnalyticalStorageRadio"
|
||||
id="enableAnalyticalStorageRadioOn"
|
||||
name="analyticalStore"
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
disable: showEnableSynapseLink,
|
||||
checked: isAnalyticalStorageOn,
|
||||
checkedValue: true,
|
||||
attr: {
|
||||
'aria-checked': isAnalyticalStorageOn() ? 'true' : 'false'
|
||||
}"
|
||||
/>
|
||||
<label for="enableAnalyticalStorageRadioOn" class="enableAnalyticalStorageRadioLabel">
|
||||
<span data-bind="disable: showEnableSynapseLink"> On </span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="enableAnalyticalStorageRadio"
|
||||
id="enableAnalyticalStorageRadioOff"
|
||||
name="analyticalStore"
|
||||
type="radio"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
data-bind="
|
||||
disable: showEnableSynapseLink,
|
||||
checked: isAnalyticalStorageOn,
|
||||
checkedValue: false,
|
||||
attr: {
|
||||
'aria-checked': isAnalyticalStorageOn() ? 'false' : 'true'
|
||||
}"
|
||||
/>
|
||||
<label for="enableAnalyticalStorageRadioOff" class="enableAnalyticalStorageRadioLabel">
|
||||
<span data-bind="disable: showEnableSynapseLink"> Off </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="paragraph italic" data-bind="visible: ttl90DaysEnabled() && isAnalyticalStorageOn()">
|
||||
By default, Analytical Time-to-Live will be configured to retain 90 days of data in the analytical store.
|
||||
You can configure a custom retention policy in the 'Settings' tab.
|
||||
<span
|
||||
><a class="errorLink" href="https://aka.ms/cosmosdb-analytical-ttl" target="_blank">Learn more</a></span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="paragraph" data-bind="visible: showEnableSynapseLink">
|
||||
Azure Synapse Link is required for creating an analytical store container. Enable Synapse Link for this
|
||||
Cosmos DB account.
|
||||
<span><a class="errorLink" href="https://aka.ms/cosmosdb-synapselink" target="_blank">Learn more</a></span>
|
||||
</div>
|
||||
|
||||
<div class="paragraph" data-bind="visible: showEnableSynapseLink">
|
||||
<button
|
||||
class="button"
|
||||
type="button"
|
||||
data-bind="
|
||||
click: onEnableSynapseLinkButtonClicked,
|
||||
disable: isSynapseLinkUpdating,
|
||||
css: {
|
||||
enabled: !isSynapseLinkUpdating(),
|
||||
disabled: isSynapseLinkUpdating
|
||||
}
|
||||
"
|
||||
>
|
||||
Enable
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Enable analytical storage - end -->
|
||||
</div>
|
||||
<!-- Unlimited Button Content - End -->
|
||||
</div>
|
||||
<div class="uniqueIndexesContainer" data-bind="visible: uniqueKeysVisible">
|
||||
<p class="uniqueKeys">
|
||||
<span class="addCollectionLabel">Unique keys</span>
|
||||
<span class="uniqueInfoTooltip" role="tooltip" tabindex="0">
|
||||
<img class="infoImg" src="/images/info-bubble.svg" alt="More information" />
|
||||
<span class="uniqueTooltiptext infoTooltipWidth"
|
||||
>Unique keys provide developers with the ability to add a layer of data integrity to their database. By
|
||||
creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
|
||||
per partition key.</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<dynamic-list
|
||||
params="{ listItems: uniqueKeys, placeholder: uniqueKeysPlaceholder(), ariaLabel: 'Write a comma separated path list of unique keys', buttonText: 'Add unique key' }"
|
||||
>
|
||||
</dynamic-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paneFooter">
|
||||
<div class="leftpanel-okbut">
|
||||
<input
|
||||
name="createCollection"
|
||||
id="submitBtnAddCollection"
|
||||
data-test="addCollection-createCollection"
|
||||
type="submit"
|
||||
value="OK"
|
||||
class="btncreatecoll1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind="visible: maxCollectionsReached">
|
||||
<error-display params="{ errorMsg: maxCollectionsReachedMessage }"></error-display>
|
||||
</div>
|
||||
<!-- Add collection inputs - End -->
|
||||
</script>
|
||||
@@ -1,108 +0,0 @@
|
||||
import * as Constants from "../../Common/Constants";
|
||||
import { DatabaseAccount } from "../../Contracts/DataModels";
|
||||
import { updateUserContext } from "../../UserContext";
|
||||
import Explorer from "../Explorer";
|
||||
import AddCollectionPane from "./AddCollectionPane";
|
||||
|
||||
const mockDatabaseAccount: DatabaseAccount = {
|
||||
id: "mock",
|
||||
kind: "DocumentDB",
|
||||
location: "",
|
||||
name: "mock",
|
||||
properties: {
|
||||
documentEndpoint: "",
|
||||
cassandraEndpoint: "",
|
||||
gremlinEndpoint: "",
|
||||
tableEndpoint: "",
|
||||
enableFreeTier: false,
|
||||
},
|
||||
type: undefined,
|
||||
};
|
||||
|
||||
const mockFreeTierDatabaseAccount: DatabaseAccount = {
|
||||
id: "mock",
|
||||
kind: "DocumentDB",
|
||||
location: "",
|
||||
name: "mock",
|
||||
properties: {
|
||||
documentEndpoint: "",
|
||||
cassandraEndpoint: "",
|
||||
gremlinEndpoint: "",
|
||||
tableEndpoint: "",
|
||||
enableFreeTier: true,
|
||||
},
|
||||
type: undefined,
|
||||
};
|
||||
|
||||
describe("Add Collection Pane", () => {
|
||||
describe("isValid()", () => {
|
||||
it("should be true if graph API and partition key is not /id nor /label", () => {
|
||||
updateUserContext({
|
||||
databaseAccount: {
|
||||
properties: {
|
||||
capabilities: [{ name: "EnableGremlin" }],
|
||||
},
|
||||
} as DatabaseAccount,
|
||||
});
|
||||
const explorer = new Explorer();
|
||||
const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
|
||||
addCollectionPane.partitionKey("/blah");
|
||||
expect(addCollectionPane.isValid()).toBe(true);
|
||||
});
|
||||
|
||||
it("should be false if graph API and partition key is /id or /label", () => {
|
||||
updateUserContext({
|
||||
databaseAccount: {
|
||||
properties: {
|
||||
capabilities: [{ name: "EnableGremlin" }],
|
||||
},
|
||||
} as DatabaseAccount,
|
||||
});
|
||||
const explorer = new Explorer();
|
||||
const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
|
||||
addCollectionPane.partitionKey("/id");
|
||||
expect(addCollectionPane.isValid()).toBe(false);
|
||||
|
||||
addCollectionPane.partitionKey("/label");
|
||||
expect(addCollectionPane.isValid()).toBe(false);
|
||||
});
|
||||
|
||||
it("should be true for any non-graph API with /id or /label partition key", () => {
|
||||
updateUserContext({
|
||||
databaseAccount: {
|
||||
properties: {
|
||||
capabilities: [{ name: "EnableCassandra" }],
|
||||
},
|
||||
} as DatabaseAccount,
|
||||
});
|
||||
const explorer = new Explorer();
|
||||
const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
|
||||
|
||||
addCollectionPane.partitionKey("/id");
|
||||
expect(addCollectionPane.isValid()).toBe(true);
|
||||
|
||||
addCollectionPane.partitionKey("/label");
|
||||
expect(addCollectionPane.isValid()).toBe(true);
|
||||
});
|
||||
|
||||
it("should display free tier text in upsell messaging", () => {
|
||||
updateUserContext({ databaseAccount: mockFreeTierDatabaseAccount });
|
||||
const explorer = new Explorer();
|
||||
const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
|
||||
expect(addCollectionPane.isFreeTierAccount()).toBe(true);
|
||||
expect(addCollectionPane.upsellMessage()).toContain("With free tier");
|
||||
expect(addCollectionPane.upsellAnchorUrl()).toBe(Constants.Urls.freeTierInformation);
|
||||
expect(addCollectionPane.upsellAnchorText()).toBe("Learn more");
|
||||
});
|
||||
|
||||
it("should display standard texr in upsell messaging", () => {
|
||||
updateUserContext({ databaseAccount: mockDatabaseAccount });
|
||||
const explorer = new Explorer();
|
||||
const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
|
||||
expect(addCollectionPane.isFreeTierAccount()).toBe(false);
|
||||
expect(addCollectionPane.upsellMessage()).toContain("Start at");
|
||||
expect(addCollectionPane.upsellAnchorUrl()).toBe(Constants.Urls.cosmosPricing);
|
||||
expect(addCollectionPane.upsellAnchorText()).toBe("More details");
|
||||
});
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -213,6 +213,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
|
||||
}
|
||||
isDatabase={true}
|
||||
isAutoscaleSelected={this.isNewDatabaseAutoscale}
|
||||
throughput={this.newDatabaseThroughput}
|
||||
isSharded={this.state.isSharded}
|
||||
setThroughputValue={(throughput: number) => (this.newDatabaseThroughput = throughput)}
|
||||
setIsAutoscale={(isAutoscale: boolean) => (this.isNewDatabaseAutoscale = isAutoscale)}
|
||||
@@ -442,6 +444,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
|
||||
this.isFreeTierAccount() && !this.props.explorer.isFirstResourceCreated()
|
||||
}
|
||||
isDatabase={false}
|
||||
isAutoscaleSelected={this.isCollectionAutoscale}
|
||||
throughput={this.collectionThroughput}
|
||||
isSharded={this.state.isSharded}
|
||||
setThroughputValue={(throughput: number) => (this.collectionThroughput = throughput)}
|
||||
setIsAutoscale={(isAutoscale: boolean) => (this.isCollectionAutoscale = isAutoscale)}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
||||
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
||||
<div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
|
||||
<div class="contextual-pane" data-bind="attr: { id: id }">
|
||||
<!-- Add database form -- Start -->
|
||||
@@ -126,31 +126,31 @@
|
||||
<div data-bind="visible: databaseCreateNewShared">
|
||||
<throughput-input-autopilot-v3
|
||||
params="{
|
||||
step: 100,
|
||||
value: throughput,
|
||||
testId: 'sharedThroughputValue',
|
||||
minimum: minThroughputRU,
|
||||
maximum: maxThroughputRU,
|
||||
isEnabled: databaseCreateNewShared,
|
||||
label: throughputRangeText,
|
||||
ariaLabel: throughputRangeText,
|
||||
costsVisible: costsVisible,
|
||||
requestUnitsUsageCost: requestUnitsUsageCost,
|
||||
spendAckChecked: throughputSpendAck,
|
||||
spendAckId: 'throughputSpendAckDatabase',
|
||||
spendAckText: throughputSpendAckText,
|
||||
spendAckVisible: throughputSpendAckVisible,
|
||||
showAsMandatory: true,
|
||||
infoBubbleText: ruToolTipText,
|
||||
throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
|
||||
throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
|
||||
throughputModeRadioName: 'throughputModeRadioName',
|
||||
isAutoPilotSelected: isAutoPilotSelected,
|
||||
maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
step: 100,
|
||||
value: throughput,
|
||||
testId: 'sharedThroughputValue',
|
||||
minimum: minThroughputRU,
|
||||
maximum: maxThroughputRU,
|
||||
isEnabled: databaseCreateNewShared,
|
||||
label: throughputRangeText,
|
||||
ariaLabel: throughputRangeText,
|
||||
costsVisible: costsVisible,
|
||||
requestUnitsUsageCost: requestUnitsUsageCost,
|
||||
spendAckChecked: throughputSpendAck,
|
||||
spendAckId: 'throughputSpendAckDatabase',
|
||||
spendAckText: throughputSpendAckText,
|
||||
spendAckVisible: throughputSpendAckVisible,
|
||||
showAsMandatory: true,
|
||||
infoBubbleText: ruToolTipText,
|
||||
throughputAutoPilotRadioId: 'newDatabase-databaseThroughput-autoPilotRadio',
|
||||
throughputProvisionedRadioId: 'newDatabase-databaseThroughput-manualRadio',
|
||||
throughputModeRadioName: 'throughputModeRadioName',
|
||||
isAutoPilotSelected: isAutoPilotSelected,
|
||||
maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
|
||||
autoPilotUsageCost: autoPilotUsageCost,
|
||||
canExceedMaximumValue: canExceedMaximumValue,
|
||||
freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
|
||||
}"
|
||||
>
|
||||
</throughput-input-autopilot-v3>
|
||||
<p data-bind="visible: canRequestSupport">
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import Explorer from "../../Explorer";
|
||||
import { AddDatabasePanel } from "./AddDatabasePanel";
|
||||
|
||||
const props = {
|
||||
explorer: new Explorer(),
|
||||
closePanel: (): void => undefined,
|
||||
openNotificationConsole: (): void => undefined,
|
||||
};
|
||||
|
||||
describe("AddDatabasePane Pane", () => {
|
||||
it("should render Default properly", () => {
|
||||
const wrapper = shallow(<AddDatabasePanel {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
342
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
Normal file
342
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
Normal file
@@ -0,0 +1,342 @@
|
||||
import { Checkbox, Text, TextField } from "@fluentui/react";
|
||||
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||
import * as Constants from "../../../Common/Constants";
|
||||
import { createDatabase } from "../../../Common/dataAccess/createDatabase";
|
||||
import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
|
||||
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
|
||||
import { configContext, Platform } from "../../../ConfigContext";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import { SubscriptionType } from "../../../Contracts/SubscriptionType";
|
||||
import * as SharedConstants from "../../../Shared/Constants";
|
||||
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
|
||||
import * as PricingUtils from "../../../Utils/PricingUtils";
|
||||
import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
|
||||
import Explorer from "../../Explorer";
|
||||
import { PanelInfoErrorComponent } from "../PanelInfoErrorComponent";
|
||||
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
|
||||
|
||||
export interface AddDatabasePaneProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
openNotificationConsole: () => void;
|
||||
}
|
||||
|
||||
export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
|
||||
explorer: container,
|
||||
closePanel,
|
||||
openNotificationConsole,
|
||||
}: AddDatabasePaneProps) => {
|
||||
const { subscriptionType } = userContext;
|
||||
const getSharedThroughputDefault = !(subscriptionType === SubscriptionType.EA || container.isServerlessEnabled());
|
||||
const _isAutoPilotSelectedAndWhatTier = (): DataModels.AutoPilotCreationSettings => {
|
||||
if (isAutoPilotSelected && maxAutoPilotThroughputSet) {
|
||||
return {
|
||||
maxThroughput: maxAutoPilotThroughputSet * 1,
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
|
||||
const databaseLabel: string = isCassandraAccount ? "keyspace" : "database";
|
||||
const collectionsLabel: string = isCassandraAccount ? "tables" : "collections";
|
||||
const databaseIdLabel: string = isCassandraAccount ? "Keyspace id" : "Database id";
|
||||
const databaseIdPlaceHolder: string = isCassandraAccount ? "Type a new keyspace id" : "Type a new database id";
|
||||
|
||||
const [databaseId, setDatabaseId] = useState<string>("");
|
||||
const databaseIdTooltipText = `A ${
|
||||
isCassandraAccount ? "keyspace" : "database"
|
||||
} is a logical container of one or more ${isCassandraAccount ? "tables" : "collections"}`;
|
||||
|
||||
const databaseLevelThroughputTooltipText = `Provisioned throughput at the ${databaseLabel} level will be shared across all ${collectionsLabel} within the ${databaseLabel}.`;
|
||||
const [databaseCreateNewShared, setDatabaseCreateNewShared] = useState<boolean>(getSharedThroughputDefault);
|
||||
const [formErrorsDetails, setFormErrorsDetails] = useState<string>();
|
||||
const [formErrors, setFormErrors] = useState<string>("");
|
||||
|
||||
const [isAutoPilotSelected, setIsAutoPilotSelected] = useState<boolean>(container.isAutoscaleDefaultEnabled());
|
||||
|
||||
const throughputDefaults = container.collectionCreationDefaults.throughput;
|
||||
const [throughput, setThroughput] = useState<number>(
|
||||
isAutoPilotSelected ? AutoPilotUtils.minAutoPilotThroughput : throughputDefaults.shared
|
||||
);
|
||||
|
||||
const [throughputSpendAck, setThroughputSpendAck] = useState<boolean>(false);
|
||||
|
||||
const canRequestSupport = () => {
|
||||
if (
|
||||
configContext.platform !== Platform.Emulator &&
|
||||
!userContext.isTryCosmosDBSubscription &&
|
||||
configContext.platform !== Platform.Portal
|
||||
) {
|
||||
const offerThroughput: number = throughput;
|
||||
return offerThroughput <= 100000;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
const isFreeTierAccount: boolean = userContext.databaseAccount?.properties?.enableFreeTier;
|
||||
const upsellMessage: string = PricingUtils.getUpsellMessage(
|
||||
userContext.portalEnv,
|
||||
isFreeTierAccount,
|
||||
container.isFirstResourceCreated(),
|
||||
false
|
||||
);
|
||||
|
||||
const upsellAnchorUrl: string = isFreeTierAccount ? Constants.Urls.freeTierInformation : Constants.Urls.cosmosPricing;
|
||||
|
||||
const upsellAnchorText: string = isFreeTierAccount ? "Learn more" : "More details";
|
||||
const maxAutoPilotThroughputSet = AutoPilotUtils.minAutoPilotThroughput;
|
||||
|
||||
const canConfigureThroughput = !container.isServerlessEnabled();
|
||||
const showUpsellMessage = () => {
|
||||
if (container.isServerlessEnabled()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (isFreeTierAccount) {
|
||||
return databaseCreateNewShared;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
const [isExecuting, setIsExecuting] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDatabaseCreateNewShared(getSharedThroughputDefault);
|
||||
}, [subscriptionType]);
|
||||
|
||||
const addDatabasePaneMessage = {
|
||||
database: {
|
||||
id: databaseId,
|
||||
shared: databaseCreateNewShared,
|
||||
},
|
||||
subscriptionType: SubscriptionType[subscriptionType],
|
||||
subscriptionQuotaId: userContext.quotaId,
|
||||
defaultsCheck: {
|
||||
flight: userContext.addCollectionFlight,
|
||||
},
|
||||
dataExplorerArea: Constants.Areas.ContextualPane,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const addDatabasePaneOpenMessage = {
|
||||
subscriptionType: SubscriptionType[subscriptionType],
|
||||
subscriptionQuotaId: userContext.quotaId,
|
||||
defaultsCheck: {
|
||||
throughput: throughput,
|
||||
flight: userContext.addCollectionFlight,
|
||||
},
|
||||
dataExplorerArea: Constants.Areas.ContextualPane,
|
||||
};
|
||||
TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
|
||||
}, []);
|
||||
|
||||
const onSubmit = () => {
|
||||
if (!_isValid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const offerThroughput: number = _computeOfferThroughput();
|
||||
|
||||
const addDatabasePaneStartMessage = {
|
||||
...addDatabasePaneMessage,
|
||||
offerThroughput,
|
||||
};
|
||||
const startKey: number = TelemetryProcessor.traceStart(Action.CreateDatabase, addDatabasePaneStartMessage);
|
||||
setFormErrors("");
|
||||
setIsExecuting(true);
|
||||
|
||||
const createDatabaseParams: DataModels.CreateDatabaseParams = {
|
||||
databaseId: addDatabasePaneStartMessage.database.id,
|
||||
databaseLevelThroughput: addDatabasePaneStartMessage.database.shared,
|
||||
};
|
||||
if (isAutoPilotSelected) {
|
||||
createDatabaseParams.autoPilotMaxThroughput = addDatabasePaneStartMessage.offerThroughput;
|
||||
} else {
|
||||
createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.offerThroughput;
|
||||
}
|
||||
|
||||
createDatabase(createDatabaseParams).then(
|
||||
() => {
|
||||
_onCreateDatabaseSuccess(offerThroughput, startKey);
|
||||
},
|
||||
(error: string) => {
|
||||
_onCreateDatabaseFailure(error, offerThroughput, startKey);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const _onCreateDatabaseSuccess = (offerThroughput: number, startKey: number): void => {
|
||||
setIsExecuting(false);
|
||||
closePanel();
|
||||
container.refreshAllDatabases();
|
||||
const addDatabasePaneSuccessMessage = {
|
||||
...addDatabasePaneMessage,
|
||||
offerThroughput,
|
||||
};
|
||||
TelemetryProcessor.traceSuccess(Action.CreateDatabase, addDatabasePaneSuccessMessage, startKey);
|
||||
};
|
||||
|
||||
const _onCreateDatabaseFailure = (error: string, offerThroughput: number, startKey: number): void => {
|
||||
setIsExecuting(false);
|
||||
const errorMessage = getErrorMessage(error);
|
||||
setFormErrors(errorMessage);
|
||||
setFormErrorsDetails(errorMessage);
|
||||
const addDatabasePaneFailedMessage = {
|
||||
...addDatabasePaneMessage,
|
||||
offerThroughput,
|
||||
error: errorMessage,
|
||||
errorStack: getErrorStack(error),
|
||||
};
|
||||
TelemetryProcessor.traceFailure(Action.CreateDatabase, addDatabasePaneFailedMessage, startKey);
|
||||
};
|
||||
|
||||
const _getThroughput = (): number => {
|
||||
return isNaN(throughput) ? 0 : Number(throughput);
|
||||
};
|
||||
|
||||
const _computeOfferThroughput = (): number => {
|
||||
if (!canConfigureThroughput) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return _getThroughput();
|
||||
};
|
||||
|
||||
const _isValid = (): boolean => {
|
||||
// TODO add feature flag that disables validation for customers with custom accounts
|
||||
if (isAutoPilotSelected) {
|
||||
const autoPilot = _isAutoPilotSelectedAndWhatTier();
|
||||
if (
|
||||
!autoPilot ||
|
||||
!autoPilot.maxThroughput ||
|
||||
!AutoPilotUtils.isValidAutoPilotThroughput(autoPilot.maxThroughput)
|
||||
) {
|
||||
setFormErrors(
|
||||
`Please enter a value greater than ${AutoPilotUtils.minAutoPilotThroughput} for autopilot throughput`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const throughput = _getThroughput();
|
||||
|
||||
if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !throughputSpendAck) {
|
||||
setFormErrors(`Please acknowledge the estimated daily spend.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const autoscaleThroughput = maxAutoPilotThroughputSet * 1;
|
||||
|
||||
if (
|
||||
isAutoPilotSelected &&
|
||||
autoscaleThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K &&
|
||||
!throughputSpendAck
|
||||
) {
|
||||
setFormErrors(`Please acknowledge the estimated monthly spend.`);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleonChangeDBId = React.useCallback(
|
||||
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
|
||||
setDatabaseId(newValue || "");
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const props: RightPaneFormProps = {
|
||||
expandConsole: container.expandConsole,
|
||||
formError: formErrors,
|
||||
formErrorDetail: formErrorsDetails,
|
||||
isExecuting,
|
||||
submitButtonText: "OK",
|
||||
onSubmit,
|
||||
};
|
||||
|
||||
return (
|
||||
<RightPaneForm {...props}>
|
||||
<div className="paneContentContainer" role="dialog" aria-labelledby="databaseTitle">
|
||||
{showUpsellMessage && formErrors === "" && (
|
||||
<PanelInfoErrorComponent
|
||||
message={upsellMessage}
|
||||
messageType="info"
|
||||
showErrorDetails={false}
|
||||
openNotificationConsole={openNotificationConsole}
|
||||
link={upsellAnchorUrl}
|
||||
linkText={upsellAnchorText}
|
||||
/>
|
||||
)}
|
||||
<div className="paneMainContent">
|
||||
<div>
|
||||
<p>
|
||||
<span className="mandatoryStar">*</span>
|
||||
<Text variant="small">{databaseIdLabel}</Text>
|
||||
<InfoTooltip>{databaseIdTooltipText}</InfoTooltip>
|
||||
</p>
|
||||
|
||||
<TextField
|
||||
id="database-id"
|
||||
type="text"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
pattern="[^/?#\\]*[^/?# \\]"
|
||||
title="May not end with space nor contain characters '\' '/' '#' '?'"
|
||||
size={40}
|
||||
aria-label={databaseIdLabel}
|
||||
placeholder={databaseIdPlaceHolder}
|
||||
value={databaseId}
|
||||
onChange={handleonChangeDBId}
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<div
|
||||
className="databaseProvision"
|
||||
aria-label="New database provision support"
|
||||
style={{ display: "block ruby" }}
|
||||
>
|
||||
<Checkbox
|
||||
title="Provision shared throughput"
|
||||
styles={{
|
||||
checkbox: { width: 12, height: 12 },
|
||||
label: { padding: 0, alignItems: "center" },
|
||||
}}
|
||||
label="Provision throughput"
|
||||
checked={databaseCreateNewShared}
|
||||
onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
|
||||
/>{" "}
|
||||
<InfoTooltip>{databaseLevelThroughputTooltipText}</InfoTooltip>
|
||||
</div>
|
||||
{databaseCreateNewShared && (
|
||||
<div>
|
||||
<ThroughputInput
|
||||
showFreeTierExceedThroughputTooltip={isFreeTierAccount && !container?.isFirstResourceCreated()}
|
||||
isDatabase={true}
|
||||
isSharded={databaseCreateNewShared}
|
||||
isAutoscaleSelected={isAutoPilotSelected}
|
||||
throughput={throughput}
|
||||
setThroughputValue={(throughput: number) => setThroughput(throughput)}
|
||||
setIsAutoscale={(isAutoscale: boolean) => setIsAutoPilotSelected(isAutoscale)}
|
||||
onCostAcknowledgeChange={(isAcknowledged: boolean) => setThroughputSpendAck(isAcknowledged)}
|
||||
/>
|
||||
|
||||
{canRequestSupport() && (
|
||||
<p>
|
||||
<a href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20More%20Throughput%20Request">
|
||||
Contact support{" "}
|
||||
</a>
|
||||
for more than <span>{throughputDefaults.unlimitedmax?.toLocaleString()} </span> RU/s.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RightPaneForm>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,104 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AddDatabasePane Pane should render Default properly 1`] = `
|
||||
<RightPaneForm
|
||||
expandConsole={[Function]}
|
||||
formError=""
|
||||
isExecuting={false}
|
||||
onSubmit={[Function]}
|
||||
submitButtonText="OK"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="databaseTitle"
|
||||
className="paneContentContainer"
|
||||
role="dialog"
|
||||
>
|
||||
<PanelInfoErrorComponent
|
||||
link="https://aka.ms/azure-cosmos-db-pricing"
|
||||
linkText="More details"
|
||||
message="Start at $24/mo per database, multiple containers included"
|
||||
messageType="info"
|
||||
openNotificationConsole={[Function]}
|
||||
showErrorDetails={false}
|
||||
/>
|
||||
<div
|
||||
className="paneMainContent"
|
||||
>
|
||||
<div>
|
||||
<p>
|
||||
<span
|
||||
className="mandatoryStar"
|
||||
>
|
||||
*
|
||||
</span>
|
||||
<Text
|
||||
variant="small"
|
||||
>
|
||||
Database id
|
||||
</Text>
|
||||
<InfoTooltip>
|
||||
A database is a logical container of one or more collections
|
||||
</InfoTooltip>
|
||||
</p>
|
||||
<StyledTextFieldBase
|
||||
aria-label="Database id"
|
||||
aria-required="true"
|
||||
autoComplete="off"
|
||||
autoFocus={true}
|
||||
id="database-id"
|
||||
onChange={[Function]}
|
||||
pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"
|
||||
placeholder="Type a new database id"
|
||||
size={40}
|
||||
title="May not end with space nor contain characters '\\\\' '/' '#' '?'"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
aria-label="New database provision support"
|
||||
className="databaseProvision"
|
||||
style={
|
||||
Object {
|
||||
"display": "block ruby",
|
||||
}
|
||||
}
|
||||
>
|
||||
<StyledCheckboxBase
|
||||
checked={true}
|
||||
label="Provision throughput"
|
||||
onChange={[Function]}
|
||||
styles={
|
||||
Object {
|
||||
"checkbox": Object {
|
||||
"height": 12,
|
||||
"width": 12,
|
||||
},
|
||||
"label": Object {
|
||||
"alignItems": "center",
|
||||
"padding": 0,
|
||||
},
|
||||
}
|
||||
}
|
||||
title="Provision shared throughput"
|
||||
/>
|
||||
|
||||
<InfoTooltip>
|
||||
Provisioned throughput at the database level will be shared across all collections within the database.
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<div>
|
||||
<ThroughputInput
|
||||
isAutoscaleSelected={false}
|
||||
isDatabase={true}
|
||||
isSharded={true}
|
||||
onCostAcknowledgeChange={[Function]}
|
||||
setIsAutoscale={[Function]}
|
||||
setThroughputValue={[Function]}
|
||||
throughput={400}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</RightPaneForm>
|
||||
`;
|
||||
@@ -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"
|
||||
>
|
||||
<FontIcon
|
||||
className="ms-Button-icon icon-205"
|
||||
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 {
|
||||
@@ -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"
|
||||
>
|
||||
|
||||
@@ -18,10 +18,6 @@ export interface GenericRightPaneProps {
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export interface GenericRightPaneState {
|
||||
panelHeight: number;
|
||||
}
|
||||
|
||||
export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
|
||||
expandConsole,
|
||||
formError,
|
||||
|
||||
@@ -64,89 +64,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
GraphStylingPane {
|
||||
"container": [Circular],
|
||||
"firstFieldHasFocus": [Function],
|
||||
@@ -215,89 +132,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
|
||||
],
|
||||
"_refreshSparkEnabledStateForAccount": [Function],
|
||||
"_resetNotebookWorkspace": [Function],
|
||||
"addCollectionPane": AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"addCollectionText": [Function],
|
||||
"addDatabasePane": AddDatabasePane {
|
||||
"autoPilotUsageCost": [Function],
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import AddCollectionPaneTemplate from "./AddCollectionPane.html";
|
||||
import AddDatabasePaneTemplate from "./AddDatabasePane.html";
|
||||
import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
|
||||
import GraphStylingPaneTemplate from "./GraphStylingPane.html";
|
||||
@@ -18,15 +17,6 @@ export class AddDatabasePaneComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export class AddCollectionPaneComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: PaneComponent,
|
||||
template: AddCollectionPaneTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class GraphStylingPaneComponent {
|
||||
constructor() {
|
||||
return {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { shallow } from "enzyme";
|
||||
import React from "react";
|
||||
import { PanelContainerComponent, PanelContainerProps } from "./PanelContainerComponent";
|
||||
|
||||
describe("PaneContainerComponent test", () => {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from "react";
|
||||
import { PrimaryButton } from "@fluentui/react";
|
||||
import React from "react";
|
||||
|
||||
export interface PanelFooterProps {
|
||||
buttonLabel: string;
|
||||
}
|
||||
|
||||
export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
|
||||
props: PanelFooterProps
|
||||
): JSX.Element => (
|
||||
export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = ({
|
||||
buttonLabel,
|
||||
}: PanelFooterProps): JSX.Element => (
|
||||
<div className="panelFooter">
|
||||
<PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
|
||||
<PrimaryButton type="submit" id="sidePanelOkButton" text={buttonLabel} ariaLabel={buttonLabel} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -8,38 +8,47 @@ export interface PanelInfoErrorProps {
|
||||
link?: string;
|
||||
linkText?: string;
|
||||
openNotificationConsole?: () => void;
|
||||
formError?: boolean;
|
||||
}
|
||||
|
||||
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
|
||||
props: PanelInfoErrorProps
|
||||
): JSX.Element => {
|
||||
export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = ({
|
||||
message,
|
||||
messageType,
|
||||
showErrorDetails,
|
||||
link,
|
||||
linkText,
|
||||
openNotificationConsole,
|
||||
formError = true,
|
||||
}: PanelInfoErrorProps): JSX.Element => {
|
||||
let icon: JSX.Element;
|
||||
if (props.messageType === "error") {
|
||||
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
|
||||
} else if (props.messageType === "warning") {
|
||||
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
|
||||
} else if (props.messageType === "info") {
|
||||
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
|
||||
if (messageType === "error") {
|
||||
icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" aria-label="error" />;
|
||||
} else if (messageType === "warning") {
|
||||
icon = <Icon iconName="WarningSolid" className="panelWarningIcon" aria-label="warning" />;
|
||||
} else if (messageType === "info") {
|
||||
icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" aria-label="Infomation" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
|
||||
{icon}
|
||||
<span className="panelWarningErrorDetailsLinkContainer">
|
||||
<Text className="panelWarningErrorMessage" variant="small">
|
||||
{props.message}{" "}
|
||||
{props.link && props.linkText && (
|
||||
<Link target="_blank" href={props.link}>
|
||||
{props.linkText}
|
||||
</Link>
|
||||
formError && (
|
||||
<Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
|
||||
{icon}
|
||||
<span className="panelWarningErrorDetailsLinkContainer">
|
||||
<Text className="panelWarningErrorMessage" variant="small" aria-label="message">
|
||||
{message}
|
||||
{link && linkText && (
|
||||
<Link target="_blank" href={link}>
|
||||
{linkText}
|
||||
</Link>
|
||||
)}
|
||||
</Text>
|
||||
{showErrorDetails && (
|
||||
<a className="paneErrorLink" role="link" onClick={openNotificationConsole}>
|
||||
More details
|
||||
</a>
|
||||
)}
|
||||
</Text>
|
||||
{props.showErrorDetails && (
|
||||
<a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
|
||||
More details
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
</Stack>
|
||||
</span>
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,13 +12,14 @@ describe("PublishNotebookPaneComponent", () => {
|
||||
notebookAuthor: "CosmosDB",
|
||||
notebookCreatedDate: "2020-07-17T00:00:00Z",
|
||||
notebookObject: undefined,
|
||||
notebookParentDomElement: undefined,
|
||||
notebookContentRef: undefined,
|
||||
setNotebookName: undefined,
|
||||
setNotebookDescription: undefined,
|
||||
setNotebookTags: undefined,
|
||||
setImageSrc: undefined,
|
||||
onError: undefined,
|
||||
clearFormError: undefined,
|
||||
onTakeSnapshot: undefined,
|
||||
};
|
||||
|
||||
const wrapper = shallow(<PublishNotebookPaneComponent {...props} />);
|
||||
|
||||
@@ -2,6 +2,7 @@ import { ImmutableNotebook, toJS } from "@nteract/commutable";
|
||||
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||
import { HttpStatusCodes } from "../../../Common/Constants";
|
||||
import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
|
||||
import { useNotebookSnapshotStore } from "../../../hooks/useNotebookSnapshotStore";
|
||||
import { JunoClient } from "../../../Juno/JunoClient";
|
||||
import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
|
||||
import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
|
||||
@@ -10,6 +11,7 @@ import { CodeOfConductComponent } from "../../Controls/NotebookGallery/CodeOfCon
|
||||
import { GalleryTab } from "../../Controls/NotebookGallery/GalleryViewerComponent";
|
||||
import Explorer from "../../Explorer";
|
||||
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
|
||||
import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
|
||||
import {
|
||||
GenericRightPaneComponent,
|
||||
GenericRightPaneProps,
|
||||
@@ -24,7 +26,8 @@ export interface PublishNotebookPaneAProps {
|
||||
name: string;
|
||||
author: string;
|
||||
notebookContent: string | ImmutableNotebook;
|
||||
parentDomElement: HTMLElement;
|
||||
notebookContentRef: string;
|
||||
onTakeSnapshot: (request: SnapshotRequest) => void;
|
||||
}
|
||||
export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> = ({
|
||||
explorer: container,
|
||||
@@ -33,7 +36,8 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
|
||||
name,
|
||||
author,
|
||||
notebookContent,
|
||||
parentDomElement,
|
||||
notebookContentRef,
|
||||
onTakeSnapshot,
|
||||
}: PublishNotebookPaneAProps): JSX.Element => {
|
||||
const [isCodeOfConductAccepted, setIsCodeOfConductAccepted] = useState<boolean>(false);
|
||||
const [content, setContent] = useState<string>("");
|
||||
@@ -45,6 +49,7 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
|
||||
const [notebookDescription, setNotebookDescription] = useState<string>("");
|
||||
const [notebookTags, setNotebookTags] = useState<string>("");
|
||||
const [imageSrc, setImageSrc] = useState<string>();
|
||||
const { snapshot: notebookSnapshot, error: notebookSnapshotError } = useNotebookSnapshotStore();
|
||||
|
||||
const CodeOfConductAccepted = async () => {
|
||||
try {
|
||||
@@ -74,6 +79,14 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
|
||||
setContent(newContent);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setImageSrc(notebookSnapshot);
|
||||
}, [notebookSnapshot]);
|
||||
|
||||
useEffect(() => {
|
||||
setFormError(notebookSnapshotError);
|
||||
}, [notebookSnapshotError]);
|
||||
|
||||
const submit = async (): Promise<void> => {
|
||||
const clearPublishingMessage = NotificationConsoleUtils.logConsoleProgress(`Publishing ${name} to gallery`);
|
||||
setIsExecuting(true);
|
||||
@@ -178,13 +191,14 @@ export const PublishNotebookPane: FunctionComponent<PublishNotebookPaneAProps> =
|
||||
notebookAuthor: author,
|
||||
notebookCreatedDate: new Date().toISOString(),
|
||||
notebookObject: notebookObject,
|
||||
notebookParentDomElement: parentDomElement,
|
||||
notebookContentRef,
|
||||
onError: createFormError,
|
||||
clearFormError: clearFormError,
|
||||
setNotebookName,
|
||||
setNotebookDescription,
|
||||
setNotebookTags,
|
||||
setImageSrc,
|
||||
onTakeSnapshot,
|
||||
};
|
||||
return (
|
||||
<GenericRightPaneComponent {...props}>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "@fluentui/react";
|
||||
import { ImmutableNotebook } from "@nteract/commutable";
|
||||
import Html2Canvas from "html2canvas";
|
||||
import React, { FunctionComponent, useState } from "react";
|
||||
import { GalleryCardComponent } from "../../Controls/NotebookGallery/Cards/GalleryCardComponent";
|
||||
import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
|
||||
import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";
|
||||
import { NotebookUtil } from "../../Notebook/NotebookUtil";
|
||||
import "./styled.less";
|
||||
|
||||
@@ -11,17 +11,19 @@ export interface PublishNotebookPaneProps {
|
||||
notebookName: string;
|
||||
notebookAuthor: string;
|
||||
notebookTags: string;
|
||||
imageSrc: string;
|
||||
notebookDescription: string;
|
||||
notebookCreatedDate: string;
|
||||
notebookObject: ImmutableNotebook;
|
||||
notebookParentDomElement?: HTMLElement;
|
||||
notebookContentRef: string;
|
||||
imageSrc: string;
|
||||
|
||||
onError: (formError: string, formErrorDetail: string, area: string) => void;
|
||||
clearFormError: () => void;
|
||||
setNotebookName: (newValue: string) => void;
|
||||
setNotebookDescription: (newValue: string) => void;
|
||||
setNotebookTags: (newValue: string) => void;
|
||||
setImageSrc: (newValue: string) => void;
|
||||
onTakeSnapshot: (request: SnapshotRequest) => void;
|
||||
}
|
||||
|
||||
enum ImageTypes {
|
||||
@@ -34,18 +36,19 @@ enum ImageTypes {
|
||||
export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPaneProps> = ({
|
||||
notebookName,
|
||||
notebookTags,
|
||||
imageSrc,
|
||||
notebookDescription,
|
||||
notebookAuthor,
|
||||
notebookCreatedDate,
|
||||
notebookObject,
|
||||
notebookParentDomElement,
|
||||
notebookContentRef,
|
||||
imageSrc,
|
||||
onError,
|
||||
clearFormError,
|
||||
setNotebookName,
|
||||
setNotebookDescription,
|
||||
setNotebookTags,
|
||||
setImageSrc,
|
||||
onTakeSnapshot,
|
||||
}: PublishNotebookPaneProps) => {
|
||||
const [type, setType] = useState<string>(ImageTypes.CustomImage);
|
||||
const CARD_WIDTH = 256;
|
||||
@@ -63,25 +66,40 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
|
||||
)}" to the gallery?`;
|
||||
|
||||
const options: ImageTypes[] = [ImageTypes.CustomImage, ImageTypes.Url];
|
||||
if (onTakeSnapshot) {
|
||||
options.push(ImageTypes.TakeScreenshot);
|
||||
if (notebookObject) {
|
||||
options.push(ImageTypes.UseFirstDisplayOutput);
|
||||
}
|
||||
}
|
||||
|
||||
const thumbnailSelectorProps: IDropdownProps = {
|
||||
label: "Cover image",
|
||||
defaultSelectedKey: ImageTypes.CustomImage,
|
||||
selectedKey: type,
|
||||
ariaLabel: "Cover image",
|
||||
options: options.map((value: string) => ({ text: value, key: value })),
|
||||
onChange: async (event, options) => {
|
||||
setImageSrc("");
|
||||
clearFormError();
|
||||
if (options.text === ImageTypes.TakeScreenshot) {
|
||||
try {
|
||||
await takeScreenshot(notebookParentDomElement, screenshotErrorHandler);
|
||||
} catch (error) {
|
||||
screenshotErrorHandler(error);
|
||||
}
|
||||
onTakeSnapshot({
|
||||
aspectRatio: cardHeightToWidthRatio,
|
||||
requestId: new Date().getTime().toString(),
|
||||
type: "notebook",
|
||||
notebookContentRef,
|
||||
});
|
||||
} else if (options.text === ImageTypes.UseFirstDisplayOutput) {
|
||||
try {
|
||||
await takeScreenshot(findFirstOutput(), firstOutputErrorHandler);
|
||||
} catch (error) {
|
||||
firstOutputErrorHandler(error);
|
||||
const cellIds = NotebookUtil.findCodeCellWithDisplay(notebookObject);
|
||||
if (cellIds.length > 0) {
|
||||
onTakeSnapshot({
|
||||
aspectRatio: cardHeightToWidthRatio,
|
||||
requestId: new Date().getTime().toString(),
|
||||
type: "celloutput",
|
||||
cellId: cellIds[0],
|
||||
notebookContentRef,
|
||||
});
|
||||
} else {
|
||||
firstOutputErrorHandler(new Error("Output does not exist for any of the cells."));
|
||||
}
|
||||
}
|
||||
setType(options.text);
|
||||
@@ -97,13 +115,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
|
||||
},
|
||||
};
|
||||
|
||||
const screenshotErrorHandler = (error: Error) => {
|
||||
const formError = "Failed to take screen shot";
|
||||
const formErrorDetail = `${error}`;
|
||||
const area = "PublishNotebookPaneComponent/takeScreenshot";
|
||||
onError(formError, formErrorDetail, area);
|
||||
};
|
||||
|
||||
const firstOutputErrorHandler = (error: Error) => {
|
||||
const formError = "Failed to capture first output";
|
||||
const formErrorDetail = `${error}`;
|
||||
@@ -111,13 +122,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
|
||||
onError(formError, formErrorDetail, area);
|
||||
};
|
||||
|
||||
if (notebookParentDomElement) {
|
||||
options.push(ImageTypes.TakeScreenshot);
|
||||
if (notebookObject) {
|
||||
options.push(ImageTypes.UseFirstDisplayOutput);
|
||||
}
|
||||
}
|
||||
|
||||
const imageToBase64 = (file: File, updateImageSrc: (result: string) => void) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
@@ -133,36 +137,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
|
||||
};
|
||||
};
|
||||
|
||||
const takeScreenshot = (target: HTMLElement, onError: (error: Error) => void): void => {
|
||||
const updateImageSrcWithScreenshot = (canvasUrl: string): void => {
|
||||
setImageSrc(canvasUrl);
|
||||
};
|
||||
|
||||
target.scrollIntoView();
|
||||
Html2Canvas(target, {
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
scale: 1,
|
||||
logging: true,
|
||||
})
|
||||
.then((canvas) => {
|
||||
//redraw canvas to fit Card Cover Image dimensions
|
||||
const originalImageData = canvas.toDataURL();
|
||||
const requiredHeight = parseInt(canvas.style.width.split("px")[0]) * cardHeightToWidthRatio;
|
||||
canvas.height = requiredHeight;
|
||||
const context = canvas.getContext("2d");
|
||||
const image = new Image();
|
||||
image.src = originalImageData;
|
||||
image.onload = () => {
|
||||
context.drawImage(image, 0, 0);
|
||||
updateImageSrcWithScreenshot(canvas.toDataURL());
|
||||
};
|
||||
})
|
||||
.catch((error) => {
|
||||
onError(error);
|
||||
});
|
||||
};
|
||||
|
||||
const renderThumbnailSelectors = (type: string) => {
|
||||
switch (type) {
|
||||
case ImageTypes.Url:
|
||||
@@ -198,12 +172,6 @@ export const PublishNotebookPaneComponent: FunctionComponent<PublishNotebookPane
|
||||
}
|
||||
};
|
||||
|
||||
const findFirstOutput = (): HTMLElement => {
|
||||
const indexOfFirstCodeCellWithDisplay = NotebookUtil.findFirstCodeCellWithDisplay(notebookObject);
|
||||
const cellOutputDomElements = notebookParentDomElement.querySelectorAll<HTMLElement>(".nteract-cell-outputs");
|
||||
return cellOutputDomElements[indexOfFirstCodeCellWithDisplay];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="publishNotebookPanelContent">
|
||||
<Stack className="panelMainContent" tokens={{ childrenGap: 20 }}>
|
||||
|
||||
@@ -52,7 +52,6 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
|
||||
<StackItem>
|
||||
<Dropdown
|
||||
ariaLabel="Cover image"
|
||||
defaultSelectedKey="Custom Image"
|
||||
label="Cover image"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
@@ -67,6 +66,7 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
|
||||
},
|
||||
]
|
||||
}
|
||||
selectedKey="Custom Image"
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
|
||||
40
src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
Normal file
40
src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { mount, ReactWrapper } from "enzyme";
|
||||
import React from "react";
|
||||
import { RightPaneForm } from "./RightPaneForm";
|
||||
|
||||
const onSubmit = jest.fn();
|
||||
const expandConsole = jest.fn();
|
||||
|
||||
const props = {
|
||||
expandConsole,
|
||||
formError: "",
|
||||
formErrorDetail: "",
|
||||
isExecuting: false,
|
||||
submitButtonText: "Load",
|
||||
onSubmit,
|
||||
};
|
||||
|
||||
describe("Right Pane Form", () => {
|
||||
let wrapper: ReactWrapper;
|
||||
|
||||
it("should render Default properly", () => {
|
||||
wrapper = mount(<RightPaneForm {...props} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
it("should call submit method enter in form", () => {
|
||||
render(<RightPaneForm {...props} />);
|
||||
fireEvent.click(screen.getByLabelText("Load"));
|
||||
expect(onSubmit).toHaveBeenCalled();
|
||||
});
|
||||
it("should call submit method click on submit button", () => {
|
||||
render(<RightPaneForm {...props} />);
|
||||
fireEvent.click(screen.getByLabelText("Load"));
|
||||
expect(onSubmit).toHaveBeenCalled();
|
||||
});
|
||||
it("should render error in header", () => {
|
||||
render(<RightPaneForm {...props} formError="file already Exist" />);
|
||||
expect(screen.getByLabelText("error")).toBeDefined();
|
||||
expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
|
||||
});
|
||||
});
|
||||
50
src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
Normal file
50
src/Explorer/Panes/RightPaneForm/RightPaneForm.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React, { FunctionComponent, ReactNode } from "react";
|
||||
import { PanelFooterComponent } from "../PanelFooterComponent";
|
||||
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "../PanelInfoErrorComponent";
|
||||
import { PanelLoadingScreen } from "../PanelLoadingScreen";
|
||||
|
||||
export interface RightPaneFormProps {
|
||||
expandConsole: () => void;
|
||||
formError: string;
|
||||
formErrorDetail: string;
|
||||
isExecuting: boolean;
|
||||
onSubmit: () => void;
|
||||
submitButtonText: string;
|
||||
isSubmitButtonHidden?: boolean;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const RightPaneForm: FunctionComponent<RightPaneFormProps> = ({
|
||||
expandConsole,
|
||||
formError,
|
||||
formErrorDetail,
|
||||
isExecuting,
|
||||
onSubmit,
|
||||
submitButtonText,
|
||||
isSubmitButtonHidden = false,
|
||||
children,
|
||||
}: RightPaneFormProps) => {
|
||||
const handleOnSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
onSubmit();
|
||||
};
|
||||
|
||||
const panelInfoErrorProps: PanelInfoErrorProps = {
|
||||
messageType: "error",
|
||||
message: formError,
|
||||
formError: formError !== "",
|
||||
showErrorDetails: formErrorDetail !== "",
|
||||
openNotificationConsole: expandConsole,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PanelInfoErrorComponent {...panelInfoErrorProps} />
|
||||
<form className="panelFormWrapper" onSubmit={handleOnSubmit}>
|
||||
{children}
|
||||
{!isSubmitButtonHidden && <PanelFooterComponent buttonLabel={submitButtonText} />}
|
||||
</form>
|
||||
{isExecuting && <PanelLoadingScreen />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,16 +1,13 @@
|
||||
import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
|
||||
import * as Constants from "Common/Constants";
|
||||
import { Tooltip } from "Common/Tooltip/Tooltip";
|
||||
import { configContext } from "ConfigContext";
|
||||
import React, { FunctionComponent, MouseEvent, useState } from "react";
|
||||
import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
|
||||
import * as StringUtility from "Shared/StringUtility";
|
||||
import { userContext } from "UserContext";
|
||||
import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
|
||||
import {
|
||||
GenericRightPaneComponent,
|
||||
GenericRightPaneProps,
|
||||
} from "../GenericRightPaneComponent/GenericRightPaneComponent";
|
||||
import { InfoTooltip } from "../../../Common/Tooltip/InfoTooltip";
|
||||
import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
|
||||
import * as StringUtility from "../../../Shared/StringUtility";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
|
||||
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
|
||||
|
||||
export interface SettingsPaneProps {
|
||||
expandConsole: () => void;
|
||||
@@ -105,15 +102,12 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
setGraphAutoVizDisabled(option.key);
|
||||
};
|
||||
|
||||
const genericPaneProps: GenericRightPaneProps = {
|
||||
const genericPaneProps: RightPaneFormProps = {
|
||||
expandConsole,
|
||||
formError: formErrors,
|
||||
formErrorDetail: "",
|
||||
id: "settingspane",
|
||||
isExecuting,
|
||||
title: "Setting",
|
||||
submitButtonText: "Apply",
|
||||
onClose: () => closePanel(),
|
||||
onSubmit: () => handlerOnSubmit(undefined),
|
||||
};
|
||||
const pageOptionList: IChoiceGroupOption[] = [
|
||||
@@ -130,17 +124,17 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
setPageOption(option.key);
|
||||
};
|
||||
return (
|
||||
<GenericRightPaneComponent {...genericPaneProps}>
|
||||
<RightPaneForm {...genericPaneProps}>
|
||||
<div className="paneMainContent">
|
||||
{shouldShowQueryPageOptions && (
|
||||
<div className="settingsSection">
|
||||
<div className="settingsSectionPart pageOptionsPart">
|
||||
<div className="settingsSectionLabel">
|
||||
Page options
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
|
||||
query results per page.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
|
||||
</div>
|
||||
@@ -149,7 +143,7 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
<div className="tabcontent">
|
||||
<div className="settingsSectionLabel">
|
||||
Query results per page
|
||||
<Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
|
||||
<InfoTooltip>Enter the number of query results that should be shown per page.</InfoTooltip>
|
||||
</div>
|
||||
|
||||
<SpinButton
|
||||
@@ -176,10 +170,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
<div className="settingsSectionPart">
|
||||
<div className="settingsSectionLabel">
|
||||
Enable cross-partition query
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Send more than one request while executing a query. More than one request is necessary if the query is
|
||||
not scoped to single partition key value.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
|
||||
<Checkbox
|
||||
@@ -199,11 +193,11 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
<div className="settingsSectionPart">
|
||||
<div className="settingsSectionLabel">
|
||||
Max degree of parallelism
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Gets or sets the number of concurrent operations run client side during parallel query execution. A
|
||||
positive property value limits the number of concurrent operations to the set value. If it is set to
|
||||
less than 0, the system automatically decides the number of concurrent operations to run.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
|
||||
<SpinButton
|
||||
@@ -227,10 +221,10 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
<div className="settingsSectionPart">
|
||||
<div className="settingsSectionLabel">
|
||||
Display Gremlin query results as:
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
|
||||
JSON.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
|
||||
<ChoiceGroup
|
||||
@@ -249,6 +243,6 @@ export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,16 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Settings Pane should render Default properly 1`] = `
|
||||
<GenericRightPaneComponent
|
||||
<RightPaneForm
|
||||
expandConsole={[Function]}
|
||||
formError=""
|
||||
formErrorDetail=""
|
||||
id="settingspane"
|
||||
isExecuting={false}
|
||||
onClose={[Function]}
|
||||
onSubmit={[Function]}
|
||||
submitButtonText="Apply"
|
||||
title="Setting"
|
||||
>
|
||||
<div
|
||||
className="paneMainContent"
|
||||
@@ -25,9 +22,9 @@ exports[`Settings Pane should render Default properly 1`] = `
|
||||
className="settingsSectionLabel"
|
||||
>
|
||||
Page options
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<StyledChoiceGroup
|
||||
onChange={[Function]}
|
||||
@@ -56,9 +53,9 @@ exports[`Settings Pane should render Default properly 1`] = `
|
||||
className="settingsSectionLabel"
|
||||
>
|
||||
Query results per page
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Enter the number of query results that should be shown per page.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<StyledSpinButton
|
||||
ariaLabel="Custom query items per page"
|
||||
@@ -85,9 +82,9 @@ exports[`Settings Pane should render Default properly 1`] = `
|
||||
className="settingsSectionLabel"
|
||||
>
|
||||
Enable cross-partition query
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<StyledCheckboxBase
|
||||
ariaLabel="Enable cross partition query"
|
||||
@@ -114,9 +111,9 @@ exports[`Settings Pane should render Default properly 1`] = `
|
||||
className="settingsSectionLabel"
|
||||
>
|
||||
Max degree of parallelism
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<StyledSpinButton
|
||||
ariaLabel="Max degree of parallelism"
|
||||
@@ -148,20 +145,17 @@ exports[`Settings Pane should render Default properly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
`;
|
||||
|
||||
exports[`Settings Pane should render Gremlin properly 1`] = `
|
||||
<GenericRightPaneComponent
|
||||
<RightPaneForm
|
||||
expandConsole={[Function]}
|
||||
formError=""
|
||||
formErrorDetail=""
|
||||
id="settingspane"
|
||||
isExecuting={false}
|
||||
onClose={[Function]}
|
||||
onSubmit={[Function]}
|
||||
submitButtonText="Apply"
|
||||
title="Setting"
|
||||
>
|
||||
<div
|
||||
className="paneMainContent"
|
||||
@@ -176,9 +170,9 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
|
||||
className="settingsSectionLabel"
|
||||
>
|
||||
Display Gremlin query results as:
|
||||
<Tooltip>
|
||||
<InfoTooltip>
|
||||
Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
|
||||
</Tooltip>
|
||||
</InfoTooltip>
|
||||
</div>
|
||||
<StyledChoiceGroup
|
||||
aria-label="Graph Auto-visualization"
|
||||
@@ -214,5 +208,5 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
`;
|
||||
|
||||
@@ -54,89 +54,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
GraphStylingPane {
|
||||
"container": [Circular],
|
||||
"firstFieldHasFocus": [Function],
|
||||
@@ -205,89 +122,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
|
||||
],
|
||||
"_refreshSparkEnabledStateForAccount": [Function],
|
||||
"_resetNotebookWorkspace": [Function],
|
||||
"addCollectionPane": AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"addCollectionText": [Function],
|
||||
"addDatabasePane": AddDatabasePane {
|
||||
"autoPilotUsageCost": [Function],
|
||||
@@ -2365,7 +2199,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 +2212,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"
|
||||
>
|
||||
<FontIcon
|
||||
className="ms-Button-icon icon-156"
|
||||
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 {
|
||||
@@ -2737,7 +2571,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 +2862,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 +2871,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 +4639,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 +4657,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"
|
||||
>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
|
||||
<div class="contextual-pane-out" data-bind="click: close, clickBubble: false"></div>
|
||||
<div class="contextual-pane" id="switchdirectorypane">
|
||||
<!-- Switch Directory -- Start -->
|
||||
<div class="contextual-pane-in">
|
||||
<!-- Switch Directory header - Start -->
|
||||
<div class="firstdivbg headerline">
|
||||
<span role="heading" aria-level="2" data-bind="text: title"></span>
|
||||
<div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: close">
|
||||
<img src="/images/close-black.svg" title="Close" alt="Close" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Switch Directory header - End -->
|
||||
|
||||
<!-- Switch Directory content - Start -->
|
||||
<div class="paneMainContent" data-bind="react: directoryComponentAdapter"></div>
|
||||
<!-- Switch Directory content - Start -->
|
||||
</div>
|
||||
<!-- Switch Directory -- End -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,88 +0,0 @@
|
||||
import * as ko from "knockout";
|
||||
|
||||
import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
|
||||
import { DirectoryListProps } from "../Controls/Directory/DirectoryListComponent";
|
||||
import { DefaultDirectoryDropdownProps } from "../Controls/Directory/DefaultDirectoryDropdownComponent";
|
||||
import { DirectoryComponentAdapter } from "../Controls/Directory/DirectoryComponentAdapter";
|
||||
import SwitchDirectoryPaneTemplate from "./SwitchDirectoryPane.html";
|
||||
import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
|
||||
|
||||
class PaneComponent {
|
||||
constructor(data: any) {
|
||||
return data.data;
|
||||
}
|
||||
}
|
||||
|
||||
export class SwitchDirectoryPaneComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: PaneComponent,
|
||||
template: SwitchDirectoryPaneTemplate,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export class SwitchDirectoryPane {
|
||||
public id: string;
|
||||
public firstFieldHasFocus: ko.Observable<boolean>;
|
||||
public title: ko.Observable<string>;
|
||||
public visible: ko.Observable<boolean>;
|
||||
|
||||
public directoryComponentAdapter: DirectoryComponentAdapter;
|
||||
|
||||
constructor(
|
||||
dropdownProps: ko.Observable<DefaultDirectoryDropdownProps>,
|
||||
listProps: ko.Observable<DirectoryListProps>
|
||||
) {
|
||||
this.id = "switchdirectorypane";
|
||||
this.title = ko.observable("Switch directory");
|
||||
this.visible = ko.observable(false);
|
||||
this.firstFieldHasFocus = ko.observable(false);
|
||||
this.resetData();
|
||||
this.directoryComponentAdapter = new DirectoryComponentAdapter(dropdownProps, listProps);
|
||||
}
|
||||
|
||||
public open() {
|
||||
this.visible(true);
|
||||
this.firstFieldHasFocus(true);
|
||||
this.resizePane();
|
||||
TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Open, {
|
||||
paneTitle: this.title(),
|
||||
});
|
||||
|
||||
this.directoryComponentAdapter.forceRender();
|
||||
}
|
||||
|
||||
public close() {
|
||||
this.visible(false);
|
||||
this.resetData();
|
||||
this.directoryComponentAdapter.forceRender();
|
||||
}
|
||||
|
||||
public resetData() {
|
||||
this.firstFieldHasFocus(false);
|
||||
}
|
||||
|
||||
public onCloseKeyPress(source: any, event: KeyboardEvent): void {
|
||||
if (event.key === " " || event.key === "Enter") {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
public onPaneKeyDown(source: any, event: KeyboardEvent): boolean {
|
||||
if (event.key === "Escape") {
|
||||
this.close();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
private resizePane(): void {
|
||||
const paneElement: HTMLElement = document.getElementById(this.id);
|
||||
const headerElement: HTMLElement = document.getElementsByTagName("header")[0];
|
||||
const newPaneElementHeight = window.innerHeight - headerElement.offsetHeight;
|
||||
|
||||
paneElement.style.height = `${newPaneElementHeight}px`;
|
||||
}
|
||||
}
|
||||
@@ -2,10 +2,7 @@ import { Upload } from "Common/Upload/Upload";
|
||||
import React, { ChangeEvent, FunctionComponent, useState } from "react";
|
||||
import { logConsoleError, logConsoleInfo, logConsoleProgress } from "Utils/NotificationConsoleUtils";
|
||||
import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
|
||||
import {
|
||||
GenericRightPaneComponent,
|
||||
GenericRightPaneProps,
|
||||
} from "../GenericRightPaneComponent/GenericRightPaneComponent";
|
||||
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
|
||||
|
||||
export interface UploadFilePanelProps {
|
||||
expandConsole: () => void;
|
||||
@@ -18,9 +15,6 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
|
||||
closePanel,
|
||||
uploadFile,
|
||||
}: UploadFilePanelProps) => {
|
||||
const title = "Upload file to notebook server";
|
||||
const submitButtonLabel = "Upload";
|
||||
const selectFileInputLabel = "Select file to upload";
|
||||
const extensions: string = undefined; //ex. ".ipynb"
|
||||
const errorMessage = "Could not upload file";
|
||||
const inProgressMessage = "Uploading file to notebook server";
|
||||
@@ -42,11 +36,8 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
|
||||
}
|
||||
|
||||
const file: File = files.item(0);
|
||||
// const id: string = logConsoleProgress(
|
||||
// `${inProgressMessage}: ${file.name}`
|
||||
// );
|
||||
|
||||
logConsoleProgress(`${inProgressMessage}: ${file.name}`);
|
||||
const clearMessage = logConsoleProgress(`${inProgressMessage}: ${file.name}`);
|
||||
|
||||
setIsExecuting(true);
|
||||
|
||||
@@ -64,7 +55,7 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
|
||||
)
|
||||
.finally(() => {
|
||||
setIsExecuting(false);
|
||||
// clearInProgressMessageWithId(id);
|
||||
clearMessage();
|
||||
});
|
||||
};
|
||||
|
||||
@@ -91,23 +82,20 @@ export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
|
||||
return uploadFile(file.name, fileContent);
|
||||
};
|
||||
|
||||
const genericPaneProps: GenericRightPaneProps = {
|
||||
const genericPaneProps: RightPaneFormProps = {
|
||||
expandConsole,
|
||||
formError: formErrors,
|
||||
formErrorDetail: formErrorsDetails,
|
||||
id: "uploadFilePane",
|
||||
isExecuting: isExecuting,
|
||||
title,
|
||||
submitButtonText: submitButtonLabel,
|
||||
onClose: closePanel,
|
||||
submitButtonText: "Upload",
|
||||
onSubmit: submit,
|
||||
};
|
||||
|
||||
return (
|
||||
<GenericRightPaneComponent {...genericPaneProps}>
|
||||
<RightPaneForm {...genericPaneProps}>
|
||||
<div className="paneMainContent">
|
||||
<Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
|
||||
<Upload label="Select file to upload" accept={extensions} onUpload={updateSelectedFiles} />
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,34 +2,16 @@ import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "@flu
|
||||
import { Upload } from "Common/Upload/Upload";
|
||||
import { UploadDetailsRecord } from "Contracts/ViewModels";
|
||||
import React, { ChangeEvent, FunctionComponent, useState } from "react";
|
||||
import { userContext } from "UserContext";
|
||||
import { logConsoleError } from "Utils/NotificationConsoleUtils";
|
||||
import Explorer from "../../Explorer";
|
||||
import { getErrorMessage } from "../../Tables/Utilities";
|
||||
import {
|
||||
GenericRightPaneComponent,
|
||||
GenericRightPaneProps,
|
||||
} from "../GenericRightPaneComponent/GenericRightPaneComponent";
|
||||
import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
|
||||
|
||||
export interface UploadItemsPaneProps {
|
||||
explorer: Explorer;
|
||||
closePanel: () => void;
|
||||
}
|
||||
|
||||
const getTitle = (): string => {
|
||||
if (userContext.apiType === "Cassandra" || userContext.apiType === "Tables") {
|
||||
return "Upload Tables";
|
||||
} else if (userContext.apiType === "Gremlin") {
|
||||
return "Upload Graph";
|
||||
} else {
|
||||
return "Upload Items";
|
||||
}
|
||||
};
|
||||
|
||||
export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
|
||||
explorer,
|
||||
closePanel,
|
||||
}: UploadItemsPaneProps) => {
|
||||
export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ explorer }: UploadItemsPaneProps) => {
|
||||
const [files, setFiles] = useState<FileList>();
|
||||
const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
|
||||
const [formError, setFormError] = useState<string>("");
|
||||
@@ -70,15 +52,12 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
|
||||
setFiles(event.target.files);
|
||||
};
|
||||
|
||||
const genericPaneProps: GenericRightPaneProps = {
|
||||
const genericPaneProps: RightPaneFormProps = {
|
||||
expandConsole: () => explorer.expandConsole(),
|
||||
formError,
|
||||
formErrorDetail,
|
||||
id: "uploaditemspane",
|
||||
isExecuting: isExecuting,
|
||||
title: getTitle(),
|
||||
submitButtonText: "Upload",
|
||||
onClose: closePanel,
|
||||
onSubmit,
|
||||
};
|
||||
|
||||
@@ -113,7 +92,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<GenericRightPaneComponent {...genericPaneProps}>
|
||||
<RightPaneForm {...genericPaneProps}>
|
||||
<div className="paneMainContent">
|
||||
<Upload
|
||||
label="Select JSON Files"
|
||||
@@ -139,6 +118,6 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Upload Items Pane should render Default properly 1`] = `
|
||||
<GenericRightPaneComponent
|
||||
<RightPaneForm
|
||||
expandConsole={[Function]}
|
||||
formError=""
|
||||
formErrorDetail=""
|
||||
id="uploaditemspane"
|
||||
onClose={[Function]}
|
||||
onSubmit={[Function]}
|
||||
submitButtonText="Upload"
|
||||
title="Upload Items"
|
||||
>
|
||||
<div
|
||||
className="paneMainContent"
|
||||
@@ -20,10 +17,8 @@ exports[`Upload Items Pane should render Default properly 1`] = `
|
||||
multiple={true}
|
||||
onUpload={[Function]}
|
||||
tabIndex={0}
|
||||
tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
|
||||
documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
|
||||
can perform multiple upload operations for larger data sets."
|
||||
tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
|
||||
/>
|
||||
</div>
|
||||
</GenericRightPaneComponent>
|
||||
</RightPaneForm>
|
||||
`;
|
||||
|
||||
@@ -52,89 +52,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
GraphStylingPane {
|
||||
"container": [Circular],
|
||||
"firstFieldHasFocus": [Function],
|
||||
@@ -203,89 +120,6 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
],
|
||||
"_refreshSparkEnabledStateForAccount": [Function],
|
||||
"_resetNotebookWorkspace": [Function],
|
||||
"addCollectionPane": AddCollectionPane {
|
||||
"_isSynapseLinkEnabled": [Function],
|
||||
"autoPilotThroughput": [Function],
|
||||
"autoPilotUsageCost": [Function],
|
||||
"canConfigureThroughput": [Function],
|
||||
"canExceedMaximumValue": [Function],
|
||||
"canRequestSupport": [Function],
|
||||
"collectionId": [Function],
|
||||
"collectionIdTitle": [Function],
|
||||
"collectionWithThroughputInShared": [Function],
|
||||
"collectionWithThroughputInSharedTitle": [Function],
|
||||
"container": [Circular],
|
||||
"costsVisible": [Function],
|
||||
"databaseCreateNew": [Function],
|
||||
"databaseCreateNewShared": [Function],
|
||||
"databaseHasSharedOffer": [Function],
|
||||
"databaseId": [Function],
|
||||
"databaseIds": [Function],
|
||||
"dedicatedRequestUnitsUsageCost": [Function],
|
||||
"displayCollectionThroughput": [Function],
|
||||
"firstFieldHasFocus": [Function],
|
||||
"formErrors": [Function],
|
||||
"formErrorsDetails": [Function],
|
||||
"formWarnings": [Function],
|
||||
"freeTierExceedThroughputTooltip": [Function],
|
||||
"id": "addcollectionpane",
|
||||
"isAnalyticalStorageOn": [Function],
|
||||
"isAutoPilotSelected": [Function],
|
||||
"isEnableMongoCapabilityEnabled": [Function],
|
||||
"isExecuting": [Function],
|
||||
"isFixedStorageSelected": [Function],
|
||||
"isFreeTierAccount": [Function],
|
||||
"isNonTableApi": [Function],
|
||||
"isPreferredApiTable": [Function],
|
||||
"isSharedAutoPilotSelected": [Function],
|
||||
"isSynapseLinkSupported": [Function],
|
||||
"isSynapseLinkUpdating": [Function],
|
||||
"isTemplateReady": [Function],
|
||||
"isTryCosmosDBSubscription": [Function],
|
||||
"isUnlimitedStorageSelected": [Function],
|
||||
"largePartitionKey": [Function],
|
||||
"lowerCasePartitionKeyName": [Function],
|
||||
"maxCollectionsReached": [Function],
|
||||
"maxCollectionsReachedMessage": [Function],
|
||||
"maxThroughputRU": [Function],
|
||||
"minThroughputRU": [Function],
|
||||
"onMoreDetailsKeyPress": [Function],
|
||||
"partitionKey": [Function],
|
||||
"partitionKeyName": [Function],
|
||||
"partitionKeyPattern": [Function],
|
||||
"partitionKeyPlaceholder": [Function],
|
||||
"partitionKeyTitle": [Function],
|
||||
"partitionKeyVisible": [Function],
|
||||
"requestUnitsUsageCost": [Function],
|
||||
"ruToolTipText": [Function],
|
||||
"sharedAutoPilotThroughput": [Function],
|
||||
"sharedThroughputRangeText": [Function],
|
||||
"shouldCreateMongoWildcardIndex": [Function],
|
||||
"shouldUseDatabaseThroughput": [Function],
|
||||
"showAnalyticalStore": [Function],
|
||||
"showEnableSynapseLink": [Function],
|
||||
"showIndexingOptionsForSharedThroughput": [Function],
|
||||
"showUpsellMessage": [Function],
|
||||
"storage": [Function],
|
||||
"throughputDatabase": [Function],
|
||||
"throughputMultiPartition": [Function],
|
||||
"throughputRangeText": [Function],
|
||||
"throughputSinglePartition": [Function],
|
||||
"throughputSpendAck": [Function],
|
||||
"throughputSpendAckText": [Function],
|
||||
"throughputSpendAckVisible": [Function],
|
||||
"title": [Function],
|
||||
"ttl90DaysEnabled": [Function],
|
||||
"uniqueKeys": [Function],
|
||||
"uniqueKeysPlaceholder": [Function],
|
||||
"uniqueKeysVisible": [Function],
|
||||
"upsellAnchorText": [Function],
|
||||
"upsellAnchorUrl": [Function],
|
||||
"upsellMessage": [Function],
|
||||
"upsellMessageAriaLabel": [Function],
|
||||
"useIndexingForSharedThroughput": [Function],
|
||||
"visible": [Function],
|
||||
},
|
||||
"addCollectionText": [Function],
|
||||
"addDatabasePane": AddDatabasePane {
|
||||
"autoPilotUsageCost": [Function],
|
||||
@@ -1291,14 +1125,16 @@ 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"
|
||||
className="panelWarningIcon"
|
||||
iconName="WarningSolid"
|
||||
key=".0:$.0"
|
||||
>
|
||||
<IconBase
|
||||
aria-label="warning"
|
||||
className="panelWarningIcon"
|
||||
iconName="WarningSolid"
|
||||
styles={[Function]}
|
||||
@@ -1577,9 +1413,10 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
}
|
||||
>
|
||||
<i
|
||||
aria-hidden={true}
|
||||
className="panelWarningIcon root-204"
|
||||
aria-label="warning"
|
||||
className="panelWarningIcon root-104"
|
||||
data-icon-name="WarningSolid"
|
||||
role="img"
|
||||
>
|
||||
|
||||
</i>
|
||||
@@ -1590,14 +1427,15 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
key=".0:$.1"
|
||||
>
|
||||
<Text
|
||||
aria-label="message"
|
||||
className="panelWarningErrorMessage"
|
||||
variant="small"
|
||||
>
|
||||
<span
|
||||
className="panelWarningErrorMessage css-205"
|
||||
aria-label="message"
|
||||
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>
|
||||
</Text>
|
||||
</span>
|
||||
@@ -1619,7 +1457,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>
|
||||
@@ -1919,18 +1757,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]}
|
||||
@@ -1953,7 +1791,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>
|
||||
@@ -1963,7 +1801,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>
|
||||
@@ -2265,17 +2103,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]}
|
||||
@@ -2298,11 +2136,13 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
className="panelFooter"
|
||||
>
|
||||
<CustomizedPrimaryButton
|
||||
ariaLabel="OK"
|
||||
id="sidePanelOkButton"
|
||||
text="OK"
|
||||
type="submit"
|
||||
>
|
||||
<PrimaryButton
|
||||
ariaLabel="OK"
|
||||
id="sidePanelOkButton"
|
||||
text="OK"
|
||||
theme={
|
||||
@@ -2581,6 +2421,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
type="submit"
|
||||
>
|
||||
<CustomizedDefaultButton
|
||||
ariaLabel="OK"
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
primary={true}
|
||||
@@ -2861,6 +2702,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
type="submit"
|
||||
>
|
||||
<DefaultButton
|
||||
ariaLabel="OK"
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
primary={true}
|
||||
@@ -3141,6 +2983,7 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
type="submit"
|
||||
>
|
||||
<BaseButton
|
||||
ariaLabel="OK"
|
||||
baseClassName="ms-Button"
|
||||
id="sidePanelOkButton"
|
||||
onRenderDescription={[Function]}
|
||||
@@ -3995,7 +3838,8 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
|
||||
variantClassName="ms-Button--primary"
|
||||
>
|
||||
<button
|
||||
className="ms-Button ms-Button--primary root-218"
|
||||
aria-label="OK"
|
||||
className="ms-Button ms-Button--primary root-118"
|
||||
data-is-focusable={true}
|
||||
id="sidePanelOkButton"
|
||||
onClick={[Function]}
|
||||
@@ -4007,14 +3851,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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user