3556812

src/Common/CosmosClient.ts

@@ -8,7 +8,6 @@ import { PriorityLevel } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
 import { Platform, configContext } from "../ConfigContext";
 import { updateUserContext, userContext } from "../UserContext";
-import { isDataplaneRbacSupported } from "../Utils/APITypeUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -19,7 +18,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
   if (userContext.features.enableAadDataPlane || dataPlaneRBACOptionEnabled) {
     Logger.logInfo(
       `AAD Data Plane Feature flag set to ${userContext.features.enableAadDataPlane} for account with disable local auth ${userContext.databaseAccount.properties.disableLocalAuth} `,

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -35,20 +35,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
   setIsThroughputCapExceeded,
   onCostAcknowledgeChange,
 }: ThroughputInputProps) => {
-  let defaultThroughput: number;
+  const defaultThroughput: number =
-  const workloadType: Constants.WorkloadType = getWorkloadType();
-
-  if (
     isFreeTier ||
     isQuickstart ||
-    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(workloadType)
+    [Constants.WorkloadType.Learning, Constants.WorkloadType.DevelopmentTesting].includes(getWorkloadType())
-  ) {
+      ? AutoPilotUtils.autoPilotThroughput1K
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput1K;
+      : AutoPilotUtils.autoPilotThroughput4K;
-  } else if (workloadType === Constants.WorkloadType.Production) {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput10K;
-  } else {
-    defaultThroughput = AutoPilotUtils.autoPilotThroughput4K;
-  }
 
   const [isAutoscaleSelected, setIsAutoScaleSelected] = useState<boolean>(true);
   const [throughput, setThroughput] = useState<number>(defaultThroughput);

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

@@ -14,6 +14,10 @@
       .flex-direction(@direction: row);
       padding: 4px 5px;
 
+      label {
+        padding: 0px;
+      }
+
       .valueCol {
         flex-grow: 1;
         padding-right: 5px;
@@ -59,10 +63,6 @@
     height: 100%;
   }
 
-  .customTrashIcon {
-    padding-top: 33px;
-  }
-
   .rightPaneTrashIconImg {
     vertical-align: top;
   }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -142,11 +142,10 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div className="labelCol">
                   <TextField
                     className="edgeInput"
-                    label={index === 0 && "Key"}
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    required
+                    aria-required="true"
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -154,11 +153,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                   />
                 </div>
+                <span className="mandatoryStar">*&nbsp;</span>
 
                 <div className="valueCol">
                   <TextField
                     className="edgeInput"
-                    label={index === 0 && "Value"}
                     type="text"
                     placeholder="Value"
                     autoComplete="off"
@@ -170,8 +169,6 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div>
                   <Dropdown
                     role="combobox"
-                    label={index === 0 && "Type"}
-                    ariaLabel="Type"
                     placeholder="Select an option"
                     defaultSelectedKey={data.values[0].type}
                     style={{ width: 100 }}
@@ -184,7 +181,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div className="actionCol">
                   <div
-                    className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
+                    className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
                     aria-label={`Delete ${data.key}`}

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -37,25 +37,21 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(enableAzureSynapseLinkBtn).toBeDefined();
     });
 
-    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
+    it("Button should not be visible for Tables API", () => {
-    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
+      updateUserContext({
-    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
+        databaseAccount: {
-    //
+          properties: {
-    // it("Button should not be visible for Tables API", () => {
+            capabilities: [{ name: "EnableTable" }],
-    //   updateUserContext({
+          },
-    //     databaseAccount: {
+        } as DatabaseAccount,
-    //       properties: {
+      });
-    //         capabilities: [{ name: "EnableTable" }],
+
-    //       },
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-    //     } as DatabaseAccount,
+      const enableAzureSynapseLinkBtn = buttons.find(
-    //   });
+        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //
+      );
-    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //  const enableAzureSynapseLinkBtn = buttons.find(
+    });
-    //    (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
-    //  );
-    //  expect(enableAzureSynapseLinkBtn).toBeUndefined();
-    //});
 
     it("Button should not be visible for Cassandra API", () => {
       updateUserContext({

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,5 +1,4 @@
 import { KeyboardAction } from "KeyboardShortcuts";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
@@ -62,7 +61,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (isDataplaneRbacSupported(userContext.apiType)) {
+  if (userContext.apiType === "SQL") {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -1,6 +1,6 @@
 @import "../../../../less/Common/Constants";
 
-@ConsoleHeaderHeight: 32px;
+// @ConsoleHeaderHeight: 32px;
 @ConsoleContentsPaneHeight: 220px;
 @ConsoleStatusMaxWidth: 672px;
 
@@ -22,7 +22,7 @@
         justify-content: space-between;
         align-items: center;
         flex-shrink: 0;
-        height: @ConsoleHeaderHeight;
+        // height: @ConsoleHeaderHeight;
         width: 100%;
         background-color: @NotificationLow;
         border-top: @ButtonBorderWidth @BaseMedium solid;
@@ -38,6 +38,9 @@
         }
 
         .statusBar {
+            width: 100%;
+            padding: 6px 0px;
+
             .dataTypeIcons {
                 cursor: pointer;
                 margin: 0px @DefaultSpace 0px @MediumSpace;
@@ -76,11 +79,14 @@
                     max-width: @ConsoleStatusMaxWidth;
                 }
             }
+            &:focus {
+                outline: none;
+            }
         }
 
         .expandCollapseButton {
             cursor: pointer;
-            padding-right: 5px;
+            padding: 6px 5px 6px 0px;
 
             img {
                 width: @ExpandCollapseIconSize;

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -81,9 +81,9 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement): void => {
+  // public setElememntRef = (element: HTMLElement): void => {
-    this.consoleHeaderElement = element;
+  //   this.consoleHeaderElement = element;
-  };
+  // };
 
   public render(): JSX.Element {
     const numInProgress = this.state.allConsoleData.filter(
@@ -98,15 +98,14 @@ export class NotificationConsoleComponent extends React.Component<
 
     return (
       <div className="notificationConsoleContainer">
-        <div
+        <div className="notificationConsoleHeader" id="notificationConsoleHeader">
-          className="notificationConsoleHeader"
+          <div
-          id="notificationConsoleHeader"
+            className="statusBar"
-          ref={this.setElememntRef}
+            // ref={this.setElememntRef}
-          onClick={() => this.expandCollapseConsole()}
+            onClick={() => this.expandCollapseConsole()}
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
-          tabIndex={0}
+            tabIndex={0}
-        >
+          >
-          <div className="statusBar">
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
                 <img src={LoadingIcon} alt="In progress items" />
@@ -136,6 +135,8 @@ export class NotificationConsoleComponent extends React.Component<
             tabIndex={0}
             aria-label="Console"
             aria-expanded={this.props.isConsoleExpanded}
+            onClick={() => this.expandCollapseConsole()}
+            onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
@@ -259,9 +260,9 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private onConsoleWasExpanded = (): void => {
-    if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
+    // if (this.props.isConsoleExpanded && this.consoleHeaderElement) {
-      this.consoleHeaderElement.focus();
+    //   this.consoleHeaderElement.focus();
-    }
+    // }
     useNotificationConsole.getState().setConsoleAnimationFinished(true);
   };
 

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,7 +32,6 @@ import {
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
 import { updateUserContext, userContext } from "UserContext";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { acquireMsalTokenForAccount } from "Utils/AuthorizationUtils";
 import { logConsoleError, logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
@@ -184,7 +183,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const showEnableEntraIdRbac =
-    isDataplaneRbacSupported(userContext.apiType) &&
+    userContext.apiType === "SQL" &&
     userContext.authType === AuthType.AAD &&
     configContext.platform !== Platform.Fabric &&
     !isEmulator;

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -393,7 +393,8 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
                 },
               }}
               disabled={isGeneratingQuery}
-              autoComplete="off"
+              autoComplete="list"
+              aria-expanded={showSamplePrompts}
               placeholder="Ask a question in natural language and we’ll generate the query for you."
               aria-labelledby="copilot-textfield-label"
               onRenderSuffix={() => {

src/SelfServe/SelfServe.tsx

@@ -41,13 +41,13 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
     case SelfServeType.example: {
       const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
       const selfServeExample = new SelfServeExample.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(selfServeExample.constructor.name);
       return selfServeExample.toSelfServeDescriptor();
     }
     case SelfServeType.sqlx: {
       const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
       const sqlX = new SqlX.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(sqlX.constructor.name);
       return sqlX.toSelfServeDescriptor();
     }
     case SelfServeType.graphapicompute: {
@@ -55,7 +55,7 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
         /* webpackChunkName: "GraphAPICompute" */ "./GraphAPICompute/GraphAPICompute"
       );
       const graphAPICompute = new GraphAPICompute.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(graphAPICompute.constructor.name);
       return graphAPICompute.toSelfServeDescriptor();
     }
     case SelfServeType.materializedviewsbuilder: {
@@ -63,7 +63,7 @@ const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDes
         /* webpackChunkName: "MaterializedViewsBuilder" */ "./MaterializedViewsBuilder/MaterializedViewsBuilder"
       );
       const materializedViewsBuilder = new MaterializedViewsBuilder.default();
-      await loadTranslations(selfServeType);
+      await loadTranslations(materializedViewsBuilder.constructor.name);
       return materializedViewsBuilder.toSelfServeDescriptor();
     }
     default:
@@ -103,7 +103,7 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
   const urlSearchParams = new URLSearchParams(window.location.search);
   const selfServeTypeText = urlSearchParams.get("selfServeType") || inputs.selfServeType;
-  const selfServeType = SelfServeType[selfServeTypeText.toLocaleLowerCase() as keyof typeof SelfServeType];
+  const selfServeType = SelfServeType[selfServeTypeText?.toLowerCase() as keyof typeof SelfServeType];
   if (
     !inputs.subscriptionId ||
     !inputs.resourceGroup ||

src/SelfServe/SelfServeUtils.tsx

@@ -29,11 +29,10 @@ export enum SelfServeType {
   // Unsupported self serve type passed as feature flag
   invalid = "invalid",
   // Add your self serve types here
-  // NOTE: text and casing of the enum's value must match the corresponding file in Localization\en\
+  example = "example",
-  example = "SelfServeExample",
+  sqlx = "sqlx",
-  sqlx = "SqlX",
+  graphapicompute = "graphapicompute",
-  graphapicompute = "GraphAPICompute",
+  materializedviewsbuilder = "materializedviewsbuilder",
-  materializedviewsbuilder = "MaterializedViewsBuilder",
 }
 
 /**

src/Utils/APITypeUtils.ts

@@ -89,7 +89,3 @@ export const getItemName = (): string => {
       return "Items";
   }
 };
-
-export const isDataplaneRbacSupported = (apiType: string): boolean => {
-  return apiType === "SQL" || apiType === "Tables";
-};

src/Utils/AutoPilotUtils.ts

@@ -1,7 +1,6 @@
 export const autoPilotThroughput1K = 1000;
 export const autoPilotIncrementStep = 1000;
 export const autoPilotThroughput4K = 4000;
-export const autoPilotThroughput10K = 10000;
 
 export function isValidAutoPilotThroughput(maxThroughput: number): boolean {
   if (!maxThroughput) {

src/hooks/useKnockoutExplorer.ts

@@ -13,7 +13,6 @@ import {
   readSubComponentState,
 } from "Shared/AppStatePersistenceUtility";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { isDataplaneRbacSupported } from "Utils/APITypeUtils";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
@@ -300,7 +299,7 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     );
     if (!userContext.features.enableAadDataPlane) {
       Logger.logInfo(`AAD Feature flag is not enabled for account ${account.name}`, "Explorer/configureHostedWithAAD");
-      if (isDataplaneRbacSupported(userContext.apiType)) {
+      if (userContext.apiType === "SQL") {
         if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
           const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
           Logger.logInfo(
@@ -553,7 +552,7 @@ async function configurePortal(): Promise<Explorer> {
           const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
 
           let dataPlaneRbacEnabled;
-          if (isDataplaneRbacSupported(userContext.apiType)) {
+          if (userContext.apiType === "SQL") {
             if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
               const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
               Logger.logInfo(