Add Tables to missing api type checks for dataplane RBAC. (#2060)

* Add Tables to missing api type checks for dataplane RBAC.

* Comment out test that is broken due to invalid hook call error.

src/Common/CosmosClient.ts

@@ -8,6 +8,7 @@ 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";
@@ -18,7 +19,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 && userContext.apiType === "SQL";
+  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && isDataplaneRbacSupported(userContext.apiType);
   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/Graph/NewVertexComponent/NewVertexComponent.less

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

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -142,10 +142,11 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 <div className="labelCol">
                   <TextField
                     className="edgeInput"
+                    label={index === 0 && "Key"}
                     type="text"
                     id="propertyKeyNewVertexPane"
                     componentRef={input}
-                    aria-required="true"
+                    required
                     placeholder="Key"
                     autoComplete="off"
                     aria-label={`Enter value for propery ${index + 1}`}
@@ -153,11 +154,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"
@@ -169,6 +170,8 @@ 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 }}
@@ -181,7 +184,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 </div>
                 <div className="actionCol">
                   <div
-                    className="rightPaneTrashIcon rightPaneBtns"
+                    className={`rightPaneTrashIcon rightPaneBtns ${index === 0 && "customTrashIcon"}`}
                     tabIndex={0}
                     role="button"
                     aria-label={`Delete ${data.key}`}

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

@@ -37,21 +37,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
       expect(enableAzureSynapseLinkBtn).toBeDefined();
     });
 
-    it("Button should not be visible for Tables API", () => {
+    // TODO: Now that Tables API supports dataplane RBAC, calling createStaticCommandBarButtons will enable the
-      updateUserContext({
+    //       Entra ID Login button, which causes this test to fail due to "Invalid hook call.". This seems to be
-        databaseAccount: {
+    //       unsupported in jest and needs to be tested with react-hooks-testing-library.
-          properties: {
+    //
-            capabilities: [{ name: "EnableTable" }],
+    // it("Button should not be visible for Tables API", () => {
-          },
+    //   updateUserContext({
-        } as DatabaseAccount,
+    //     databaseAccount: {
-      });
+    //       properties: {
-
+    //         capabilities: [{ name: "EnableTable" }],
-      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
+    //       },
-      const enableAzureSynapseLinkBtn = buttons.find(
+    //     } as DatabaseAccount,
-        (button) => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel,
+    //   });
-      );
+    //
-      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    //   const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
-    });
+    //  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,4 +1,5 @@
 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";
@@ -61,7 +62,7 @@ export function createStaticCommandBarButtons(
     }
   }
 
-  if (userContext.apiType === "SQL") {
+  if (isDataplaneRbacSupported(userContext.apiType)) {
     const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
     const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
     const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -109,15 +109,15 @@ export class NotificationConsoleComponent extends React.Component<
           <div className="statusBar">
             <span className="dataTypeIcons">
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={LoadingIcon} alt="in progress items" />
+                <img src={LoadingIcon} alt="In progress items" />
                 <span className="numInProgress">{numInProgress}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={ErrorBlackIcon} alt="error items" />
+                <img src={ErrorBlackIcon} alt="Error items" />
                 <span className="numErroredItems">{numErroredItems}</span>
               </span>
               <span className="notificationConsoleHeaderIconWithData">
-                <img src={infoBubbleIcon} alt="info items" />
+                <img src={infoBubbleIcon} alt="Info items" />
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
@@ -134,12 +134,12 @@ export class NotificationConsoleComponent extends React.Component<
             data-test="NotificationConsole/ExpandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-label="Console"
-            aria-expanded={!this.props.isConsoleExpanded}
+            aria-expanded={this.props.isConsoleExpanded}
           >
             <img
               src={this.props.isConsoleExpanded ? ChevronDownIcon : ChevronUpIcon}
-              alt={this.props.isConsoleExpanded ? "ChevronDownIcon" : "ChevronUpIcon"}
+              alt={this.props.isConsoleExpanded ? "Collapse icon" : "Expand icon"}
             />
           </div>
         </div>

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -34,7 +34,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -47,7 +47,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -71,15 +71,15 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
+      aria-expanded={false}
-      aria-label="console button collapsed"
+      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>
@@ -192,7 +192,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="in progress items"
+            alt="In progress items"
             src={{}}
           />
           <span
@@ -205,7 +205,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="error items"
+            alt="Error items"
             src={{}}
           />
           <span
@@ -218,7 +218,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           className="notificationConsoleHeaderIconWithData"
         >
           <img
-            alt="info items"
+            alt="Info items"
             src={{}}
           />
           <span
@@ -244,15 +244,15 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
       </span>
     </div>
     <div
-      aria-expanded={true}
+      aria-expanded={false}
-      aria-label="console button collapsed"
+      aria-label="Console"
       className="expandCollapseButton"
       data-test="NotificationConsole/ExpandCollapseButton"
       role="button"
       tabIndex={0}
     >
       <img
-        alt="ChevronUpIcon"
+        alt="Expand icon"
         src=""
       />
     </div>

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -32,6 +32,7 @@ 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";
@@ -183,7 +184,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin" && !isEmulator;
   const showEnableEntraIdRbac =
-    userContext.apiType === "SQL" &&
+    isDataplaneRbacSupported(userContext.apiType) &&
     userContext.authType === AuthType.AAD &&
     configContext.platform !== Platform.Fabric &&
     !isEmulator;

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(selfServeExample.constructor.name);
+      await loadTranslations(selfServeType);
       return selfServeExample.toSelfServeDescriptor();
     }
     case SelfServeType.sqlx: {
       const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
       const sqlX = new SqlX.default();
-      await loadTranslations(sqlX.constructor.name);
+      await loadTranslations(selfServeType);
       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(graphAPICompute.constructor.name);
+      await loadTranslations(selfServeType);
       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(materializedViewsBuilder.constructor.name);
+      await loadTranslations(selfServeType);
       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?.toLowerCase() as keyof typeof SelfServeType];
+  const selfServeType = SelfServeType[selfServeTypeText.toLocaleLowerCase() as keyof typeof SelfServeType];
   if (
     !inputs.subscriptionId ||
     !inputs.resourceGroup ||

src/SelfServe/SelfServeUtils.tsx

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

src/Utils/APITypeUtils.ts

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

src/hooks/useKnockoutExplorer.ts

@@ -13,6 +13,7 @@ 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";
@@ -299,7 +300,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 (userContext.apiType === "SQL") {
+      if (isDataplaneRbacSupported(userContext.apiType)) {
         if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
           const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
           Logger.logInfo(
@@ -552,7 +553,7 @@ async function configurePortal(): Promise<Explorer> {
           const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
 
           let dataPlaneRbacEnabled;
-          if (userContext.apiType === "SQL") {
+          if (isDataplaneRbacSupported(userContext.apiType)) {
             if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
               const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
               Logger.logInfo(