@@ -21,11 +37,14 @@ export const CollapsedResourceTree: FunctionComponent
-
+
-
+
{userContext.apiType} API
diff --git a/src/Common/Constants/Flights.ts b/src/Common/Constants/Flights.ts
index 06138c9d7..423258bcf 100644
--- a/src/Common/Constants/Flights.ts
+++ b/src/Common/Constants/Flights.ts
@@ -5,3 +5,4 @@ export const MongoIndexing = "mongoindexing";
export const AutoscaleTest = "autoscaletest";
export const PartitionKeyTest = "partitionkeytest";
export const PKPartitionKeyTest = "pkpartitionkeytest";
+export const Phoenix = "phoenix";
\ No newline at end of file
diff --git a/src/Common/Constants/index.ts b/src/Common/Constants/index.ts
index be271e0f2..65597d688 100644
--- a/src/Common/Constants/index.ts
+++ b/src/Common/Constants/index.ts
@@ -71,6 +71,12 @@ export {
ServerIds,
};
+export enum ConnectionStatusType {
+ Connecting = "Connecting",
+ Connected = "Connected",
+ Failed = "Connection Failed",
+}
+
export enum ConflictOperationType {
Replace = "replace",
Create = "create",
diff --git a/src/Common/MongoProxyClient.test.ts b/src/Common/MongoProxyClient.test.ts
index 3a5a02365..1c49141a0 100644
--- a/src/Common/MongoProxyClient.test.ts
+++ b/src/Common/MongoProxyClient.test.ts
@@ -3,8 +3,16 @@ import { resetConfigContext, updateConfigContext } from "../ConfigContext";
import { DatabaseAccount } from "../Contracts/DataModels";
import { Collection } from "../Contracts/ViewModels";
import DocumentId from "../Explorer/Tree/DocumentId";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
import { updateUserContext } from "../UserContext";
-import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
+import {
+ deleteDocument,
+ getEndpoint,
+ getFeatureEndpointOrDefault,
+ queryDocuments,
+ readDocument,
+ updateDocument,
+} from "./MongoProxyClient";
const databaseId = "testDB";
@@ -246,4 +254,31 @@ describe("MongoProxyClient", () => {
expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
});
});
+ describe("getFeatureEndpointOrDefault", () => {
+ beforeEach(() => {
+ resetConfigContext();
+ updateConfigContext({
+ BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+ });
+ const params = new URLSearchParams({
+ "feature.mongoProxyEndpoint": "https://localhost:12901",
+ "feature.mongoProxyAPIs": "readDocument|createDocument",
+ });
+ const features = extractFeatures(params);
+ updateUserContext({
+ authType: AuthType.AAD,
+ features: features,
+ });
+ });
+
+ it("returns a local endpoint", () => {
+ const endpoint = getFeatureEndpointOrDefault("readDocument");
+ expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
+ });
+
+ it("returns a production endpoint", () => {
+ const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+ expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
+ });
+ });
});
diff --git a/src/Common/MongoProxyClient.ts b/src/Common/MongoProxyClient.ts
index 3893af473..b99bac4b6 100644
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -6,6 +6,7 @@ import * as DataModels from "../Contracts/DataModels";
import { MessageTypes } from "../Contracts/ExplorerContracts";
import { Collection } from "../Contracts/ViewModels";
import DocumentId from "../Explorer/Tree/DocumentId";
+import { hasFlag } from "../Platform/Hosted/extractFeatures";
import { userContext } from "../UserContext";
import { logConsoleError } from "../Utils/NotificationConsoleUtils";
import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
@@ -78,7 +79,7 @@ export function queryDocuments(
: "",
};
- const endpoint = getEndpoint() || "";
+ const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
const headers: HeadersInit = {
...defaultHeaders,
...authHeaders(),
@@ -140,7 +141,8 @@ export function readDocument(
: "",
};
- const endpoint = getEndpoint();
+ const endpoint = getFeatureEndpointOrDefault("readDocument");
+
return window
.fetch(`${endpoint}?${queryString.stringify(params)}`, {
method: "GET",
@@ -180,7 +182,7 @@ export function createDocument(
pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
};
- const endpoint = getEndpoint();
+ const endpoint = getFeatureEndpointOrDefault("createDocument");
return window
.fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -224,7 +226,7 @@ export function updateDocument(
? documentId.partitionKeyProperty
: "",
};
- const endpoint = getEndpoint();
+ const endpoint = getFeatureEndpointOrDefault("updateDocument");
return window
.fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -265,7 +267,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
? documentId.partitionKeyProperty
: "",
};
- const endpoint = getEndpoint();
+ const endpoint = getFeatureEndpointOrDefault("deleteDocument");
return window
.fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -308,7 +310,7 @@ export function createMongoCollectionWithProxy(
autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
};
- const endpoint = getEndpoint();
+ const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
return window
.fetch(
@@ -332,8 +334,15 @@ export function createMongoCollectionWithProxy(
});
}
-export function getEndpoint(): string {
- let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
+export function getFeatureEndpointOrDefault(feature: string): string {
+ return hasFlag(userContext.features.mongoProxyAPIs, feature)
+ ? getEndpoint(userContext.features.mongoProxyEndpoint)
+ : getEndpoint();
+}
+
+export function getEndpoint(customEndpoint?: string): string {
+ let url = customEndpoint ? customEndpoint : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
+ url += "/api/mongo/explorer";
if (userContext.authType === AuthType.EncryptedToken) {
url = url.replace("api/mongo", "api/guest/mongo");
diff --git a/src/Common/ResourceTreeContainer.tsx b/src/Common/ResourceTreeContainer.tsx
index 18a769b12..00693a2c0 100644
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
import arrowLeftImg from "../../images/imgarrowlefticon.svg";
import refreshImg from "../../images/refresh-cosmos.svg";
import { AuthType } from "../AuthType";
@@ -6,6 +6,7 @@ import Explorer from "../Explorer/Explorer";
import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
import { ResourceTree } from "../Explorer/Tree/ResourceTree";
import { userContext } from "../UserContext";
+import { NormalizedEventKey } from "./Constants";
export interface ResourceTreeContainerProps {
toggleLeftPaneExpanded: () => void;
@@ -18,6 +19,22 @@ export const ResourceTreeContainer: FunctionComponent {
+ const focusButton = useRef() as MutableRefObject;
+
+ useEffect(() => {
+ if (isLeftPaneExpanded) {
+ if (focusButton.current) {
+ focusButton.current.focus();
+ }
+ }
+ });
+
+ const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+ if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+ toggleLeftPaneExpanded();
+ event.stopPropagation();
+ }
+ };
return (
The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
- Learn more
+ Learn more
);
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
index 4912cdd65..6210e1e95 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
styles={
Object {
"root": Object {
+ "color": "windowtext",
"fontSize": 14,
},
}
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
index 43bdce840..db2a3576f 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
Object {
"root": Object {
+ "color": "windowtext",
"fontSize": 14,
},
}
@@ -39,6 +40,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
Object {
"root": Object {
+ "color": "windowtext",
"fontSize": 14,
},
}
@@ -73,6 +75,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
styles={
Object {
"root": Object {
+ "color": "windowtext",
"fontSize": 14,
},
}
@@ -80,11 +83,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
>
The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
-
Learn more
-
+
The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
-
Learn more
-
+
= ({
const currency: string = getPriceCurrency(serverId);
const currencySign: string = getCurrencySign(serverId);
const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
- const pricePerRu = isAutoscale
- ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
- : getPricePerRu(serverId) * multiplier;
+ const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
- const iconWithEstimatedCostDisclaimer: JSX.Element = PricingUtils.estimatedCostDisclaimer ;
+ const iconWithEstimatedCostDisclaimer: JSX.Element = {estimatedCostDisclaimer} ;
if (isAutoscale) {
return (
diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index 8c780cebc..de8b7757a 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -118,6 +118,7 @@ export const ThroughputInput: FunctionComponent = ({
= ({
aria-label="Manual mode"
checked={!isAutoscaleSelected}
type="radio"
+ aria-required={true}
role="radio"
tabIndex={0}
onChange={(e) => handleOnChangeMode(e, "Manual")}
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index d295a7574..0798c01ef 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -345,12 +345,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
ariaLabel="Info"
className="panelInfoIcon"
iconName="Info"
+ tabIndex={0}
>
@@ -651,6 +654,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
>
diff --git a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
index 6c5ceb817..c54d8fcf4 100644
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -243,6 +243,7 @@ export class TreeNodeComponent extends React.Component
{/* Collections Window - - Start */}
@@ -43,9 +60,11 @@ export const ResourceTreeContainer: FunctionComponent
diff --git a/src/Common/Tooltip/InfoTooltip.tsx b/src/Common/Tooltip/InfoTooltip.tsx
index 480aa9020..3ce33ca93 100644
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent = ({ children }:
return (
-
);
diff --git a/src/Contracts/DataModels.ts b/src/Contracts/DataModels.ts
index efd5ffb78..a8957c662 100644
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -1,3 +1,5 @@
+import { ConnectionStatusType } from "../Common/Constants";
+
export interface DatabaseAccount {
id: string;
name: string;
@@ -496,3 +498,8 @@ export interface MemoryUsageInfo {
freeKB: number;
totalKB: number;
}
+
+export interface ContainerConnectionInfo {
+ status: ConnectionStatusType;
+ //need to add ram and rom info
+}
diff --git a/src/Controls/Heatmap/Heatmap.test.ts b/src/Controls/Heatmap/Heatmap.test.ts
index 473e55225..e5f8f5ef6 100644
--- a/src/Controls/Heatmap/Heatmap.test.ts
+++ b/src/Controls/Heatmap/Heatmap.test.ts
@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
};
let heatmap: Heatmap;
- let theme: PortalTheme = 1;
- const divElement: string = ``;
+ const theme: PortalTheme = 1;
+ const divElement = ``;
describe("drawHeatmap rendering", () => {
beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
});
it("should show a no data message with a dark theme", () => {
- let data = {
+ const data = {
data: {
signature: "pcIframe",
data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
},
};
- const divElement: string = ``;
+ const divElement = ``;
document.body.innerHTML = divElement;
handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
});
it("should show a no data message with a white theme", () => {
- let data = {
+ const data = {
data: {
signature: "pcIframe",
data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
},
};
- const divElement: string = ``;
+ const divElement = ``;
document.body.innerHTML = divElement;
handleMessage(data as MessageEvent);
diff --git a/src/Controls/Heatmap/Heatmap.ts b/src/Controls/Heatmap/Heatmap.ts
index 3cdc4589d..0b9c3b796 100644
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/src/Controls/Heatmap/Heatmap.ts
@@ -39,7 +39,7 @@ export class Heatmap {
}
}
- private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
+ private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#838383"): FontSettings {
return {
family: StyleConstants.DataExplorerFont,
size,
@@ -78,9 +78,9 @@ export class Heatmap {
// go thru all rows and create 2d matrix for heatmap...
for (let i = 0; i < rows.length; i++) {
output.yAxisPoints.push(rows[i]);
- let dataPoints: number[] = [];
+ const dataPoints: number[] = [];
for (let a = 0; a < output.xAxisPoints.length; a++) {
- let row: PartitionTimeStampToData = data[rows[i]];
+ const row: PartitionTimeStampToData = data[rows[i]];
dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
}
output.dataPoints.push(dataPoints);
@@ -193,7 +193,7 @@ export class Heatmap {
this._getLayoutSettings(),
this._getChartDisplaySettings()
);
- let plotDiv: any = document.getElementById(Heatmap.elementId);
+ const plotDiv: any = document.getElementById(Heatmap.elementId);
plotDiv.on("plotly_click", (data: any) => {
let timeSelected: string = data.points[0].x;
timeSelected = timeSelected.replace(" ", "T");
@@ -205,7 +205,7 @@ export class Heatmap {
break;
}
}
- let output = [];
+ const output = [];
for (let i = 0; i < this._chartData.dataPoints.length; i++) {
output.push(this._chartData.dataPoints[i][xAxisIndex]);
}
diff --git a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
index d662db58b..76d710cb7 100644
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,5 +1,6 @@
import { Icon, Label, Stack } from "@fluentui/react";
import * as React from "react";
+import { NormalizedEventKey } from "../../../Common/Constants";
import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
export interface CollapsibleSectionProps {
@@ -30,6 +31,13 @@ export class CollapsibleSectionComponent extends React.Component {
+ if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+ this.toggleCollapsed();
+ event.stopPropagation();
+ }
+ };
+
public render(): JSX.Element {
return (
<>
@@ -39,6 +47,11 @@ export class CollapsibleSectionComponent extends React.Component
{
text: secondaryButtonText,
onClick: onSecondaryButtonClick,
}
- : {};
-
+ : undefined;
return visible ? (
{choiceGroupProps &&
- this.setState({ isSuggestionVisible: true })}
- onChange={(_event, newValue?: string) => this.handleChange(newValue)}
- />
+
{this.props.showCancelButton && (
-
`;
@@ -28,16 +34,22 @@ exports[`inputTypeahead renders 1`] = `
-
`;
diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
index c0cda4f59..11f00f195 100644
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -1,45 +1,45 @@
-import * as React from "react";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import { Urls, StyleConstants } from "../../../Common/Constants";
import {
- getPriceCurrency,
- getCurrencySign,
- getAutoscalePricePerRu,
- getMultimasterMultiplier,
- computeRUUsagePriceHourly,
- getPricePerRu,
- estimatedCostDisclaimer,
-} from "../../../Utils/PricingUtils";
-import {
- ITextFieldStyles,
+ DetailsList,
+ DetailsListLayoutMode,
+ DetailsRow,
ICheckboxStyles,
- IStackProps,
- IStackTokens,
IChoiceGroupStyles,
- Link,
- Text,
- IMessageBarStyles,
- ITextStyles,
- IDetailsRowStyles,
- IStackStyles,
+ IColumn,
+ IDetailsColumnStyles,
IDetailsListStyles,
+ IDetailsRowProps,
+ IDetailsRowStyles,
IDropdownStyles,
+ IMessageBarStyles,
ISeparatorStyles,
+ IStackProps,
+ IStackStyles,
+ IStackTokens,
+ ITextFieldStyles,
+ ITextStyles,
+ Link,
MessageBar,
MessageBarType,
- Stack,
+ SelectionMode,
Spinner,
SpinnerSize,
- DetailsList,
- IColumn,
- SelectionMode,
- DetailsListLayoutMode,
- IDetailsRowProps,
- DetailsRow,
- IDetailsColumnStyles,
+ Stack,
+ Text,
} from "@fluentui/react";
-import { isDirtyTypes, isDirty } from "./SettingsUtils";
+import * as React from "react";
+import { StyleConstants, Urls } from "../../../Common/Constants";
+import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import {
+ computeRUUsagePriceHourly,
+ estimatedCostDisclaimer,
+ getAutoscalePricePerRu,
+ getCurrencySign,
+ getMultimasterMultiplier,
+ getPriceCurrency,
+ getPricePerRu,
+} from "../../../Utils/PricingUtils";
+import { isDirty, isDirtyTypes } from "./SettingsUtils";
export interface EstimatedSpendingDisplayProps {
costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
currencySign: string;
}
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: {
@@ -223,14 +223,15 @@ export const getRuPriceBreakdown = (
multimasterEnabled: isMultimaster,
isAutoscale: isAutoscale,
});
- const basePricePerRu: number = isAutoscale
- ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
- : getPricePerRu(serverId);
+ const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
+ const pricePerRu: number = isAutoscale
+ ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
+ : getPricePerRu(serverId, multimasterMultiplier);
return {
- hourlyPrice: hourlyPrice,
+ hourlyPrice,
dailyPrice: hourlyPrice * 24,
monthlyPrice: hourlyPrice * hoursInAMonth,
- pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+ pricePerRu,
currency: getPriceCurrency(serverId),
currencySign: getCurrencySign(serverId),
};
@@ -271,7 +272,7 @@ export const manualToAutoscaleDisclaimerElement: JSX.Element = (
Graph
-
+
li.active > a,
+ .nav-pills > li.active > a:focus,
+ .nav-pills > li.active > a:hover {
+ background-color: @AccentMediumHigh;
+ }
+
+ .nav-pills > li > a {
+ border-radius: 0px;
+ }
+
+ .nav > li > a {
+ padding: 5px 15px;
+ }
+
+ .typeahead__field input {
+ height: 25px !important;
+ }
+
+ .typeahead__cancel-button {
+ top: 5px !important;
+ right: 0.4em !important;
+ }
+
+ .queryMetricsSummary {
+ margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
+ table-layout: fixed;
+ display: block;
+ overflow-y: auto;
+ overflow-x: hidden;
+ min-height: 100px;
+
+ .queryMetricsSummaryHead {
+ .flex-display();
+ }
+
+ .queryMetricsSummaryHeader.queryMetricsSummaryTuple {
+ font-size: 10px;
+ }
+
+ .queryMetricsSummaryBody {
+ .flex-display();
+ .flex-direction();
+ }
+
+ .queryMetricsSummaryTuple {
+ border-bottom: 1px solid @BaseMedium;
+ height: 32px;
+ font-size: 12px;
+ width: 100%;
+ .flex-display();
+ th,
+ td {
+ padding: @DefaultSpace;
+
+ &:nth-child(1) {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ flex: 0 1 auto;
+ }
+
+ &:nth-child(2) {
+ flex: 1 1 auto;
+ }
+
+ &:nth-child(3) {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ flex: 0 0 50%;
+ }
+ }
+ }
+ }
+
+ .graphContainer {
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ padding-top: (2 * @MediumSpace);
+ .flex-display();
+
+ .leftPane {
+ width: 200px;
+ padding: 0px 0px 0px @DefaultSpace;
+ border-right: 1px solid @PaneDivider;
+ .flex-display();
+ .flex-direction();
+
+ .leftPaneResults {
+ margin: @MediumSpace 0px @DefaultSpace;
+ }
+
+ .leftPaneContent {
+ flex: 1;
+
+ .leftPaneContainer {
+ width: @LeftPaneContainerWidth;
+ padding-right: @SmallSpace;
+
+ table {
+ table-layout: fixed;
+
+ .disabled {
+ pointer-events: none;
+ background-color: @BaseLight;
+ opacity: 0.5;
+ }
+
+ .resultItem {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ }
+ }
+ }
+ } // Left Pane
+
+ .middlePane {
+ flex-grow: 1;
+ border-right: 1px solid @PaneDivider;
+ position: relative;
+ .flex-display();
+ .flex-direction();
+
+ .graphTitle {
+ margin-top: @DefaultSpace;
+
+ .graphExpandCollapseBtn {
+ padding: 2px 6px 5px 6px;
+ margin-right: @SmallSpace;
+
+ &:hover {
+ .hover();
+ }
+
+ &:active {
+ .active();
+ }
+
+ img {
+ .dataExplorerIcons();
+ }
+ }
+ }
+
+ .maingraphContainer {
+ position: relative;
+ .flex-display();
+ .flex-direction();
+ height: 100%;
+
+ .graphModal {
+ background-color: rgba(255, 255, 255, 0.7);
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+
+ img {
position: absolute;
top: 50%;
+ left: 50%;
width: @LoaderWidth;
height: @LoaderHeight;
+ }
}
- }
+ }
+ } // Middle Pane
- .buttonContainer {
- .disabled {
- background-color: @BaseLight;
- pointer-events: none;
- opacity: 0.5;
- }
- }
-
- .queryContainer {
- padding: (2 * @MediumSpace) @MediumSpace (2 * @LargeSpace);
+ .rightPane {
+ .collapsiblePanel {
+ right: 0px;
+ float: right;
+ width: @RightPaneWidth;
.flex-display();
+ .flex-direction();
+ padding-top: 6px;
- .queryButton {
- width: auto;
- vertical-align: middle;
- margin-left: @LargeSpace;
+ .panelContent {
+ height: 100%;
+ /* Override default (auto which grows as big as content) to make it grow to fill parent instead */
+ min-height: 0px;
+ margin-top: 0px;
+
+ .rightPaneHeader {
+ /* TODO: Hack to align the trashbox with the header for now. */
+ margin-top: -28px;
white-space: nowrap;
- }
+ margin-bottom: (2 * @LargeSpace);
- .filterclose {
- vertical-align: middle;
- }
- }
+ .rightPaneHeaderTrashIcon {
+ margin-right: (2 * @LargeSpace);
+ padding: 1px 5px 6px 5px;
- .loadGraphHelper {
- margin: auto;
- text-align: center;
- height:50%;
-
- img {
- width: @LoadGraphHelperWidth;
- height: @LoadGraphHelperHeight;
- margin-left: 32px;
- }
-
- p {
- margin: @DefaultSpace;
- }
-
- .loadGraphBtn{
- margin-top: @LargeSpace;
- }
- }
-
- .graphTabContent {
- overflow: hidden;
- }
-
- .graphJsonEditor {
- flex-grow: 1;
- margin: 20px;
- border: 1px solid @PaneDivider;
- .flex-display();
- .flex-direction();
-
- .jsonEditor {
- flex-grow: 1;
- }
- }
-
- /* Override bootstrap's nav pills */
- .nav-pills>li.active>a,
- .nav-pills>li.active>a:focus,
- .nav-pills>li.active>a:hover {
- background-color: @AccentMediumHigh;
- }
-
- .nav-pills>li>a {
- border-radius: 0px;
- }
-
- .nav>li>a {
- padding: 5px 15px;
- }
-
- .typeahead__field input {
- height: 25px !important;
- }
-
- .typeahead__cancel-button {
- top: 5px !important;
- right: .4em !important;
- }
-
-
- .queryMetricsSummary {
- margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
- table-layout: fixed;
- display: block;
- overflow-y: auto;
- overflow-x: hidden;
-
- .queryMetricsSummaryHead {
- .flex-display();
- }
-
- .queryMetricsSummaryHeader.queryMetricsSummaryTuple {
- font-size: 10px;
- }
-
- .queryMetricsSummaryBody {
- .flex-display();
- .flex-direction();
- }
-
- .queryMetricsSummaryTuple {
- border-bottom: 1px solid @BaseMedium;
- height: 32px;
- font-size: 12px;
- width: 100%;
- .flex-display();
- th, td {
- padding: @DefaultSpace;
-
- &:nth-child(1) {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 0 1 auto;
- }
-
- &:nth-child(2) {
- flex: 1 1 auto;
- }
-
- &:nth-child(3) {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- flex: 0 0 50%;
- }
- }
- }
- }
-
-
- .graphContainer {
- overflow: hidden;
- height: 100%;
- width: 100%;
- padding-top: (2 * @MediumSpace);
- .flex-display();
-
-
- .leftPane {
- width: 200px;
- padding: 0px 0px 0px @DefaultSpace;
- border-right: 1px solid @PaneDivider;
- .flex-display();
- .flex-direction();
-
- .leftPaneResults {
- margin: @MediumSpace 0px @DefaultSpace;
+ img {
+ .dataExplorerIcons();
+ }
}
- .leftPaneContent {
- flex: 1;
-
- .leftPaneContainer {
- width: @LeftPaneContainerWidth;
- padding-right: @SmallSpace;
-
- table {
- table-layout: fixed;
-
- .disabled {
- pointer-events: none;
- background-color: @BaseLight;
- opacity: 0.5;
- }
-
- .resultItem {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- }
+ .deleteConfirm {
+ background-color: @BaseLight;
+ padding: @SmallSpace;
}
- } // Left Pane
+ }
- .middlePane {
- flex-grow: 1;
- border-right: 1px solid @PaneDivider;
- position: relative;
- .flex-display();
- .flex-direction();
+ .rightPaneContent {
+ height: 100%;
- .graphTitle {
- margin-top: @DefaultSpace;
+ .rightPaneContainer {
+ width: @RightPaneContainerWidth;
+ padding-left: @SmallSpace;
- .graphExpandCollapseBtn{
- padding:2px 6px 5px 6px;
- margin-right: @SmallSpace;
+ .sectionHeader {
+ padding: 2px;
+ }
- &:hover {
- .hover();
- }
+ .sectionContent {
+ padding: @DefaultSpace @DefaultSpace @LargeSpace (2 * @MediumSpace);
+ }
- &:active {
- .active();
- }
+ .sectionTitle {
+ cursor: pointer;
+ margin-left: 6px;
+ font-weight: bold;
+ }
- img{
- .dataExplorerIcons();
- }
- }
- }
+ .edgesTable {
+ width: 100%;
+ max-width: 100%;
- .maingraphContainer {
- position: relative;
- .flex-display();
- .flex-direction();
- height: 100%;
+ td {
+ padding: 5px 2px @SmallSpace 2px;
- .graphModal {
- background-color: rgba(255, 255, 255, .7);
- position: absolute;
- top: 0px;
- left: 0px;
- height: 100%;
+ &.valueCol {
width: 100%;
+ padding-right: @SmallSpace;
+ }
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- width: @LoaderWidth;
- height: @LoaderHeight;
- }
+ &.rightPaneAddPropertyBtnPadding {
+ padding-top: @LargeSpace;
+ }
+
+ &.edgeLabel {
+ padding-right: 41px;
+ }
}
- }
- } // Middle Pane
+ }
- .rightPane {
- .collapsiblePanel {
- right: 0px;
- float: right;
- width: @RightPaneWidth;
- .flex-display();
- .flex-direction();
- padding-top: 6px;
+ .propertyTable {
+ width: 100%;
+ max-width: 100%;
+ tr {
+ vertical-align: top;
+ td {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 0px 4px 4px 4px;
+ }
+ td.actionCol {
+ padding-top: 4px;
+ }
+ }
+ }
- .panelContent {
- height: 100%;
- /* Override default (auto which grows as big as content) to make it grow to fill parent instead */
- min-height: 0px;
- margin-top: 0px;
+ .roPropertyTable {
+ table-layout: fixed;
+ tr {
+ height: 27px;
+ }
+ }
+ .actionCol {
+ width: 30px;
+ }
- .rightPaneHeader {
- /* TODO: Hack to align the trashbox with the header for now. */
- margin-top: -28px;
+ .labelCol {
+ width: 30%;
+ max-width: 100px;
+
+ input {
+ width: 100%;
+ padding-left: @SmallSpace;
+ }
+ }
+
+ .propertyValue {
white-space: nowrap;
- margin-bottom: (2 * @LargeSpace);
-
- .rightPaneHeaderTrashIcon {
- margin-right: (2 * @LargeSpace);
- padding: 1px 5px 6px 5px;
-
- img {
- .dataExplorerIcons();
- }
- }
-
- .deleteConfirm {
- background-color: @BaseLight;
- padding: @SmallSpace;
- }
- }
-
- .rightPaneContent {
- height: 100%;
-
- .rightPaneContainer {
- width: @RightPaneContainerWidth;
- padding-left: @SmallSpace;
-
- .sectionHeader {
- padding: 2px;
- }
-
- .sectionContent {
- padding: @DefaultSpace @DefaultSpace @LargeSpace (2 * @MediumSpace);
- }
-
- .sectionTitle {
- cursor: pointer;
- margin-left: 6px;
- font-weight: bold;
- }
-
- .edgesTable {
- width: 100%;
- max-width: 100%;
-
- td {
- padding: 5px 2px @SmallSpace 2px;
-
- &.valueCol {
- width: 100%;
- padding-right: @SmallSpace;
- }
-
- &.rightPaneAddPropertyBtnPadding {
- padding-top: @LargeSpace;
- }
-
- &.edgeLabel {
- padding-right: 41px;
- }
- }
- }
-
- .propertyTable {
- width: 100%;
- max-width: 100%;
- tr {
- vertical-align: top;
- td {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 0px 4px 4px 4px;
- }
- td.actionCol {
- padding-top: 4px;
- }
- }
- }
-
- .roPropertyTable {
- table-layout: fixed;
- tr {
- height: 27px;
- }
- }
-
- .actionCol {
- width: 30px;
- }
-
- .labelCol {
- width: 30%;
- max-width: 100px;
-
- input {
- width: 100%;
- padding-left: @SmallSpace;
- }
- }
-
- .propertyValue {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- .isNull {
- font-style: italic;
- }
- }
-
- .edgeInput {
- width: 100%;
- padding-left: @SmallSpace;
- }
-
- .typeSelect {
- height: 23px;
- width: 70px;
- }
-
- .propertyTableHeader {
- font-weight: bold;
- color: @DefaultFontColor ;
- border-bottom: 1px solid @BaseMediumHigh;
- }
-
- /* Override autocomplete stuff */
- .typeahead__container {
- font: @mediumFontSize 'Segoe UI' !important;
-
- input {
- font: @mediumFontSize 'Segoe UI' !important;
- padding: 0px @SmallSpace !important;
- }
- }
-
- .typeahead__field input {
- height: 25px !important;
- }
-
- .typeahead__cancel-button {
- top: 5px !important;
- right: .4em !important;
- }
-
- .rightPaneAddPropertyBtn {
- padding: @DefaultSpace;
- margin-left: -8px;/* TODO: Hack to align the addproperty button with the section content for now. */
-
- img {
- margin: 0px @SmallSpace @SmallSpace 0px;
- .dataExplorerIcons();
- }
- }
- }
- }
+ overflow: hidden;
+ text-overflow: ellipsis;
+ .isNull {
+ font-style: italic;
}
+ }
+
+ .edgeInput {
+ width: 100%;
+ padding-left: @SmallSpace;
+ }
+
+ .typeSelect {
+ height: 23px;
+ width: 70px;
+ }
+
+ .propertyTableHeader {
+ font-weight: bold;
+ color: @DefaultFontColor;
+ border-bottom: 1px solid @BaseMediumHigh;
+ }
+
+ /* Override autocomplete stuff */
+ .typeahead__container {
+ font: @mediumFontSize "Segoe UI" !important;
+
+ input {
+ font: @mediumFontSize "Segoe UI" !important;
+ padding: 0px @SmallSpace !important;
+ }
+ }
+
+ .typeahead__field input {
+ height: 25px !important;
+ }
+
+ .typeahead__cancel-button {
+ top: 5px !important;
+ right: 0.4em !important;
+ }
+
+ .rightPaneAddPropertyBtn {
+ padding: @DefaultSpace;
+ margin-left: -8px; /* TODO: Hack to align the addproperty button with the section content for now. */
+
+ img {
+ margin: 0px @SmallSpace @SmallSpace 0px;
+ .dataExplorerIcons();
+ }
+ }
}
- } // .rightPane
- }
-
- .queryMetricsSummaryContainer {
- .flex-display();
- .flex-direction();
- overflow: hidden;
- width: 100%;
- }
-
- .paneTitle {
- padding-left: @DefaultSpace;
- color: #000;
- font-weight: bold;
- margin-left: @SmallSpace;
- }
-
- .filterQueryResultError {
- padding: 0px 25px;
- line-height: 25px;
- margin-bottom: 10px;
- color: @ErrorColor;
- }
-
- .rightPaneEditIcon {
- padding: 1px 5px 5px 5px;
-
- img {
- .dataExplorerIcons();
+ }
}
+ }
+ } // .rightPane
+ }
+
+ .queryMetricsSummaryContainer {
+ .flex-display();
+ .flex-direction();
+ overflow: hidden;
+ width: 100%;
+ min-height: 200px;
+ overflow: auto;
+ }
+
+ .paneTitle {
+ padding-left: @DefaultSpace;
+ color: #000;
+ font-weight: bold;
+ margin-left: @SmallSpace;
+ }
+
+ .filterQueryResultError {
+ padding: 0px 25px;
+ line-height: 25px;
+ margin-bottom: 10px;
+ color: @ErrorColor;
+ }
+
+ .rightPaneEditIcon {
+ padding: 1px 5px 5px 5px;
+
+ img {
+ .dataExplorerIcons();
}
+ }
- .rightPaneCheckMark {
- padding: 1px 1px 5px 5px;
+ .rightPaneCheckMark {
+ padding: 1px 1px 5px 5px;
- img {
- .dataExplorerIcons();
- }
+ img {
+ .dataExplorerIcons();
}
+ }
- .rightPaneDiscardBtn {
- padding: 1px @SmallSpace 5px 2px;
- margin-right: @MediumSpace;
+ .rightPaneDiscardBtn {
+ padding: 1px @SmallSpace 5px 2px;
+ margin-right: @MediumSpace;
.discardBtn {
- margin: 0px 2px 0px @SmallSpace;
- width: 10px;
- height: 10px;
+ margin: 0px 2px 0px @SmallSpace;
+ width: 10px;
+ height: 10px;
}
- img {
- .dataExplorerIcons();
- }
+ img {
+ .dataExplorerIcons();
+ }
+ }
+
+ .rightPaneTrashIcon {
+ padding: @SmallSpace;
+
+ img {
+ vertical-align: top;
+ .dataExplorerIcons();
+ }
+ }
+
+ .rightPaneBtns {
+ cursor: pointer;
+
+ &:hover {
+ .hover();
}
- .rightPaneTrashIcon {
- padding: @SmallSpace;
+ &:active {
+ .active();
+ }
+ }
- img {
- vertical-align: top;
- .dataExplorerIcons();
- }
+ /* ****************** Graph styles ************ */
+
+ .link.inactive {
+ opacity: 0.1;
+ transition: opacity @TransitionLengthMs;
+ }
+
+ .nodes {
+ circle.main {
+ stroke: @GraphNodeBackgroundColor;
+ stroke-width: 2px;
}
- .rightPaneBtns {
- cursor: pointer;
-
- &:hover {
- .hover();
- }
-
- &:active {
- .active();
- }
+ text {
+ pointer-events: none;
+ font: 12px arial;
}
- /* ****************** Graph styles ************ */
+ .inactive {
+ stroke-opacity: 0.2;
+ fill-opacity: 0.2;
- .link.inactive {
+ transition: stroke-opacity @TransitionLengthMs;
+ transition: fill-opacity @TransitionLengthMs;
+ }
+ }
+
+ .node {
+ .icon-background {
+ display: none;
+ fill: @SelectionHigh;
+ }
+
+ &.root circle.main {
+ stroke: @GraphRootNodeSelected;
+ }
+
+ &.selected {
+ circle.main {
+ stroke: @GraphSelectedNode;
+ }
+
+ .icon-background {
+ display: block;
+ }
+ }
+ }
+
+ #triangleRight svg polygon {
+ fill: inherit;
+ }
+
+ use {
+ &.pageButton {
+ fill: @BaseLow;
+
+ &.active {
+ fill: @AccentMediumHigh;
+ }
+ }
+ }
+
+ #loadMoreIcon svg ellipse {
+ fill: inherit;
+ }
+
+ .loadmore {
+ use.loadMoreIcon {
+ fill: @GraphNodeDefaultColor;
+
+ &.active {
+ fill: @AccentMediumHigh;
+ }
+ }
+ }
+
+ .markerEnd polygon {
+ fill: inherit;
+ }
+
+ .markerEndContainer {
+ use.markerEnd {
+ &.inactive {
opacity: 0.1;
transition: opacity @TransitionLengthMs;
+ }
+ &.hidden {
+ opacity: 0;
+ }
}
+ }
- .nodes {
- circle.main {
- stroke: @GraphNodeBackgroundColor;
- stroke-width: 2px;
- }
+ /* scroll for leftpane, rightpane and newvertex pane*/
- text {
- pointer-events: none;
- font: 12px arial;
- }
-
- .inactive {
- stroke-opacity: 0.2;
- fill-opacity: 0.2;
-
- transition: stroke-opacity @TransitionLengthMs;
- transition: fill-opacity @TransitionLengthMs;
- }
- }
-
- .node {
- .icon-background {
- display: none;
- fill: @SelectionHigh;
- }
-
- &.root circle.main {
- stroke: @GraphRootNodeSelected;
- }
-
- &.selected {
- circle.main {
- stroke: @GraphSelectedNode;
- }
-
- .icon-background {
- display: block;
- }
- }
- }
-
- #triangleRight svg polygon {
- fill: inherit;
- }
-
- use {
- &.pageButton {
- fill: @BaseLow;
-
- &.active {
- fill: @AccentMediumHigh;
- }
- }
- }
-
- #loadMoreIcon svg ellipse {
- fill: inherit;
- }
-
- .loadmore {
- use.loadMoreIcon {
- fill:@GraphNodeDefaultColor;
-
- &.active {
- fill: @AccentMediumHigh;
- }
- }
- }
-
- .markerEnd polygon {
- fill: inherit;
- }
-
- .markerEndContainer {
- use.markerEnd {
- &.inactive {
- opacity: 0.1;
- transition: opacity @TransitionLengthMs;
- }
- &.hidden {
- opacity: 0;
- }
- }
-
-
- }
-
- /* scroll for leftpane, rightpane and newvertex pane*/
-
- .contentScroll {
- overflow-y: auto;
- overflow-x: hidden;
- white-space: nowrap;
- }
+ .contentScroll {
+ overflow-y: auto;
+ overflow-x: hidden;
+ white-space: nowrap;
+ }
}
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
index 9755075a8..a6d17e96a 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
@@ -9,6 +9,7 @@ import create, { UseStore } from "zustand";
import { StyleConstants } from "../../../Common/Constants";
import * as ViewModels from "../../../Contracts/ViewModels";
import { useTabs } from "../../../hooks/useTabs";
+import { userContext } from "../../../UserContext";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
import Explorer from "../../Explorer";
import { useSelectedNode } from "../../useSelectedNode";
@@ -54,6 +55,14 @@ export const CommandBar: React.FC = ({ container }: Props) => {
const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+ if (
+ userContext.features.notebooksTemporarilyDown === false &&
+ userContext.features.phoenix === true &&
+ useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
+ ) {
+ uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
+ }
+
if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
}
diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
index 623c8250d..3e9e35b54 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx
@@ -80,8 +80,9 @@ export function createStaticCommandBarButtons(
}
notebookButtons.push(createOpenTerminalButton(container));
-
- notebookButtons.push(createNotebookWorkspaceResetButton(container));
+ if (userContext.features.phoenix === false) {
+ notebookButtons.push(createNotebookWorkspaceResetButton(container));
+ }
if (
(userContext.apiType === "Mongo" &&
useNotebook.getState().isShellEnabled &&
diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
index 748657816..6549ce597 100644
--- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
@@ -13,6 +13,7 @@ import { StyleConstants } from "../../../Common/Constants";
import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { ConnectionStatus } from "./ConnectionStatusComponent";
import { MemoryTracker } from "./MemoryTrackerComponent";
/**
@@ -201,3 +202,10 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
onRender: () =>
+
+
+
+ );
+};
diff --git a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
index 07677cb98..c7a2cf108 100644
--- a/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
+++ b/src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
@@ -129,7 +129,7 @@ export class NotificationConsoleComponent extends React.Component<
className="expandCollapseButton"
role="button"
tabIndex={0}
- aria-label={"console button" + (this.props.isConsoleExpanded ? " collapsed" : " expanded")}
+ aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
aria-expanded={!this.props.isConsoleExpanded}
>
}
{item.type === ConsoleDataType.InProgress && 
}
{item.date}
- {item.message}
+
+ {item.message}
+
));
}
diff --git a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
index c28eb6008..9b0e62449 100644
--- a/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
+++ b/src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
+
+
+
+ {connectionInfo.status}
+
+ {connectionInfo.status === ConnectionStatusType.Connecting && isActive && (
+
message
diff --git a/src/Explorer/Notebook/NotebookComponent/epics.ts b/src/Explorer/Notebook/NotebookComponent/epics.ts
index 9e6616a06..da2bc35a8 100644
--- a/src/Explorer/Notebook/NotebookComponent/epics.ts
+++ b/src/Explorer/Notebook/NotebookComponent/epics.ts
@@ -109,7 +109,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
const q = params.toString();
const suffix = q !== "" ? `?${q}` : "";
- const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
+ const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
return url.replace(/^http(s)?/, "ws$1");
};
diff --git a/src/Explorer/Notebook/NotebookContainerClient.ts b/src/Explorer/Notebook/NotebookContainerClient.ts
index 0e50106a7..91cedca06 100644
--- a/src/Explorer/Notebook/NotebookContainerClient.ts
+++ b/src/Explorer/Notebook/NotebookContainerClient.ts
@@ -56,7 +56,7 @@ export class NotebookContainerClient {
const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
try {
- const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
+ const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
method: "GET",
headers: {
Authorization: authToken,
diff --git a/src/Explorer/Notebook/NotebookContentClient.ts b/src/Explorer/Notebook/NotebookContentClient.ts
index 5ca408c2a..a0e368020 100644
--- a/src/Explorer/Notebook/NotebookContentClient.ts
+++ b/src/Explorer/Notebook/NotebookContentClient.ts
@@ -36,7 +36,10 @@ export class NotebookContentClient {
*
* @param parent parent folder
*/
- public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): Promise {
+ public async createNewNotebookFile(
+ parent: NotebookContentItem,
+ isGithubTree?: boolean
+ ): Promise {
if (!parent || parent.type !== NotebookContentItemType.Directory) {
throw new Error(`Parent must be a directory: ${parent}`);
}
@@ -99,7 +102,6 @@ export class NotebookContentClient {
if (!parent || parent.type !== NotebookContentItemType.Directory) {
throw new Error(`Parent must be a directory: ${parent}`);
}
-
const filepath = NotebookUtil.getFilePath(parent.path, name);
if (await this.checkIfFilepathExists(filepath)) {
throw new Error(`File already exists: ${filepath}`);
diff --git a/src/Explorer/Notebook/useNotebook.ts b/src/Explorer/Notebook/useNotebook.ts
index 5a2c97b3e..2f4b086b1 100644
--- a/src/Explorer/Notebook/useNotebook.ts
+++ b/src/Explorer/Notebook/useNotebook.ts
@@ -28,6 +28,8 @@ interface NotebookState {
myNotebooksContentRoot: NotebookContentItem;
gitHubNotebooksContentRoot: NotebookContentItem;
galleryContentRoot: NotebookContentItem;
+ connectionInfo: DataModels.ContainerConnectionInfo;
+ notebookFolderName: string;
setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -36,6 +38,7 @@ interface NotebookState {
setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
setIsShellEnabled: (isShellEnabled: boolean) => void;
setNotebookBasePath: (notebookBasePath: string) => void;
+ setNotebookFolderName: (notebookFolderName: string) => void;
refreshNotebooksEnabledStateForAccount: () => Promise;
findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
@@ -43,6 +46,7 @@ interface NotebookState {
deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
initializeNotebooksTree: (notebookManager: NotebookManager) => Promise;
initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
+ setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
}
export const useNotebook: UseStore = create((set, get) => ({
@@ -65,6 +69,8 @@ export const useNotebook: UseStore = create((set, get) => ({
myNotebooksContentRoot: undefined,
gitHubNotebooksContentRoot: undefined,
galleryContentRoot: undefined,
+ connectionInfo: undefined,
+ notebookFolderName: undefined,
setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -75,6 +81,7 @@ export const useNotebook: UseStore = create((set, get) => ({
setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),
+ setNotebookFolderName: (notebookFolderName: string) => set({ notebookFolderName }),
refreshNotebooksEnabledStateForAccount: async (): Promise => {
const { databaseAccount, authType } = userContext;
if (
@@ -168,8 +175,10 @@ export const useNotebook: UseStore = create((set, get) => ({
isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
},
initializeNotebooksTree: async (notebookManager: NotebookManager): Promise => {
+ const notebookFolderName = userContext.features.phoenix === true ? "Temporary Notebooks" : "My Notebooks";
+ set({ notebookFolderName });
const myNotebooksContentRoot = {
- name: "My Notebooks",
+ name: get().notebookFolderName,
path: get().notebookBasePath,
type: NotebookContentItemType.Directory,
};
@@ -185,6 +194,7 @@ export const useNotebook: UseStore = create((set, get) => ({
type: NotebookContentItemType.Directory,
}
: undefined;
+
set({
myNotebooksContentRoot,
galleryContentRoot,
@@ -246,4 +256,5 @@ export const useNotebook: UseStore = create((set, get) => ({
set({ gitHubNotebooksContentRoot });
}
},
+ setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
}));
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 39d7ad2c8..170a8a925 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -161,7 +161,7 @@ export class AddCollectionPanel extends React.Component
- ) =>
this.setState({ newDatabaseId: event.target.value })
@@ -236,7 +237,7 @@ export class AddCollectionPanel extends React.Component
-
-
-
-
-
-
)}
+ {this.shouldShowAnalyticalStoreOptions() && (
+
+
+
+ Analytical store
+
+
+
+
+
+
+
+ On
+
+
+ Off
+
+
+ {!this.isSynapseLinkEnabled() && (
+
+
+ Azure Synapse Link is required for creating an analytical store{" "}
+ {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+
+ Learn more
+
+
+ this.props.explorer.openEnableSynapseLinkDialog()}
+ style={{ height: 27, width: 80 }}
+ styles={{ label: { fontSize: 12 } }}
+ />
+
+ )}
+
+ )}
+
{userContext.apiType !== "Tables" && (
-
-
-
- Analytical store
-
-
-
-
-
-
-
- On
-
-
- Off
-
-
- {!this.isSynapseLinkEnabled() && (
-
-
- Azure Synapse Link is required for creating an analytical store{" "}
- {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-
- Learn more
-
-
- this.props.explorer.openEnableSynapseLinkDialog()}
- style={{ height: 27, width: 80 }}
- styles={{ label: { fontSize: 12 } }}
- />
-
- )}
-
- )}
)}
diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
index 3ee59bd30..2c5009282 100644
--- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
+++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
@@ -23,10 +23,12 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
export interface AddDatabasePaneProps {
explorer: Explorer;
+ buttonElement?: HTMLElement;
}
export const AddDatabasePanel: FunctionComponent = ({
explorer: container,
+ buttonElement,
}: AddDatabasePaneProps) => {
const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
let throughput: number;
@@ -77,6 +79,7 @@ export const AddDatabasePanel: FunctionComponent = ({
dataExplorerArea: Constants.Areas.ContextualPane,
};
TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
+ buttonElement.focus();
}, []);
const onSubmit = () => {
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
index 7d0703336..69e84ee03 100644
--- a/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
+++ b/src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx
@@ -198,6 +198,7 @@ export const CassandraAddCollectionPane: FunctionComponent
= ({
selectedLocation.owner,
selectedLocation.repo
)} - ${selectedLocation.branch}`;
+ } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
+ destination = "My Notebooks Scratch";
}
clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
diff --git a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
index 47bac0e2e..1aaab131a 100644
--- a/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
+++ b/src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx
@@ -12,6 +12,7 @@ import {
import React, { FormEvent, FunctionComponent } from "react";
import { IPinnedRepo } from "../../../Juno/JunoClient";
import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { useNotebook } from "../../Notebook/useNotebook";
import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
interface Location {
@@ -46,11 +47,10 @@ export const CopyNotebookPaneComponent: FunctionComponent
const getDropDownOptions = (): IDropdownOption[] => {
const options: IDropdownOption[] = [];
-
options.push({
key: "MyNotebooks-Item",
- text: ResourceTreeAdapter.MyNotebooksTitle,
- title: ResourceTreeAdapter.MyNotebooksTitle,
+ text: useNotebook.getState().notebookFolderName,
+ title: useNotebook.getState().notebookFolderName,
data: {
type: "MyNotebooks",
} as Location,
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
index b09ac3eae..858ba3bc4 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx
@@ -108,6 +108,8 @@ export const DeleteCollectionConfirmationPane: FunctionComponent
{
setDeleteCollectionFeedback(newInput);
}}
+ ariaLabel={reasonInfo}
/>
)}
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
index 923557265..de359f986 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
@@ -123,6 +125,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent {
setInputCollectionName(newInput);
}}
+ ariaLabel={confirmContainer}
/>
{shouldRecordFeedback() && (
@@ -142,6 +145,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent
+
+
+
)}
- ![Delete param]()
-
-
-
-
-
+
- ![Add param]()
-
-
+ ![Add param]()
+
+
+
+