Add fix for MPAC Tables account issue

src/Common/CosmosClient.ts

@@ -11,7 +11,6 @@ import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
 import { getErrorMessage } from "./ErrorHandlingUtils";
-import * as Logger from "../Common/Logger";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -22,10 +21,6 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
     userContext.features.enableAadDataPlane && userContext.databaseAccount.properties.disableLocalAuth;
   const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
   if (aadDataPlaneFeatureEnabled || (!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} `,
-      "Explorer/tokenProvider",
-    );
     if (!userContext.aadToken) {
       logConsoleError(
         `AAD token does not exist. Please use "Login for Entra ID" prior to performing Entra ID RBAC operations`,
@@ -85,7 +80,6 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   }
 
   if (userContext.masterKey) {
-    Logger.logInfo(`Master Key exists`, "Explorer/tokenProvider");
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
       verb,
@@ -158,11 +152,8 @@ enum SDKSupportedCapabilities {
 let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
-  if (_client) {
-    if (!userContext.hasDataPlaneRbacSettingChanged) {
-      return _client;
-    }
-  }
+  if (_client) return _client;
+
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;

src/Contracts/AzureResourceGraph.ts

@@ -1,8 +1,7 @@
 export interface QueryRequestOptions {
   $skipToken?: string;
   $top?: number;
-  $allowPartialScopes: boolean;
-  subscriptions?: string[];
+  subscriptions: string[];
 }
 
 export interface QueryResponse {

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -162,23 +162,19 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     ) {
       updateUserContext({
         dataPlaneRbacEnabled: true,
-        hasDataPlaneRbacSettingChanged: true,
       });
       useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
     } else {
       updateUserContext({
         dataPlaneRbacEnabled: false,
-        hasDataPlaneRbacSettingChanged: true,
       });
       const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-      if (!userContext.features.enableAadDataPlane) {
-        const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
+      const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
 
-        if (keys.primaryMasterKey) {
-          updateUserContext({ masterKey: keys.primaryMasterKey });
+      if (keys.primaryMasterKey) {
+        updateUserContext({ masterKey: keys.primaryMasterKey });
 
-          useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
-        }
+        useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
       }
     }
 

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil.ts

@@ -1,68 +0,0 @@
-// Definitions of State data
-
-import { loadState, saveState, saveStateDebounced } from "Shared/AppStatePersistenceUtility";
-import { userContext } from "UserContext";
-import * as ViewModels from "../../../Contracts/ViewModels";
-
-// Component states
-export interface DocumentsTabStateData {
-  leftPaneWidthPercent: number;
-}
-
-const defaultState: DocumentsTabStateData = {
-  leftPaneWidthPercent: 35,
-};
-
-const ComponentName = "DocumentsTab";
-
-export const readDocumentsTabState = (): DocumentsTabStateData => {
-  const state = loadState({ componentName: ComponentName });
-  return (state as DocumentsTabStateData) || defaultState;
-};
-
-export const saveDocumentsTabState = (state: DocumentsTabStateData): void => {
-  saveStateDebounced({ componentName: ComponentName }, state);
-};
-
-export type ColumnSizesMap = { [columnId: string]: WidthDefinition };
-export type WidthDefinition = { idealWidth?: number; minWidth?: number };
-
-export const readSubComponentState = <T>(
-  subComponentName: "ColumnSizes" | "FilterHistory",
-  collection: ViewModels.CollectionBase,
-  defaultValue: T,
-): T => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  // TODO what if databaseAccount doesn't exist?
-
-  const state = loadState({
-    componentName: ComponentName,
-    subComponentName,
-    globalAccountName,
-    databaseName: collection.databaseId,
-    containerName: collection.id(),
-  }) as T;
-
-  return state || defaultValue;
-};
-
-export const saveSubComponentState = <T>(
-  subComponentName: "ColumnSizes" | "FilterHistory",
-  collection: ViewModels.CollectionBase,
-  state: T,
-  debounce?: boolean,
-): void => {
-  const globalAccountName = userContext.databaseAccount?.name;
-  // TODO what if databaseAccount doesn't exist?
-
-  (debounce ? saveStateDebounced : saveState)(
-    {
-      componentName: ComponentName,
-      subComponentName,
-      globalAccountName,
-      databaseName: collection.databaseId,
-      containerName: collection.id(),
-    },
-    state,
-  );
-};

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -13,7 +13,6 @@ import {
   SAVE_BUTTON_ID,
   UPDATE_BUTTON_ID,
   UPLOAD_BUTTON_ID,
-  addStringsNoDuplicate,
   buildQuery,
   getDiscardExistingDocumentChangesButtonState,
   getDiscardNewDocumentChangesButtonState,
@@ -340,10 +339,7 @@ describe("Documents tab (noSql API)", () => {
     const createMockProps = (): IDocumentsTabComponentProps => ({
       isPreferredApiMongoDB: false,
       documentIds: [],
-      collection: {
-        id: ko.observable<string>("collectionId"),
-        databaseId: "databaseId",
-      } as ViewModels.CollectionBase,
+      collection: undefined,
       partitionKey: { kind: "Hash", paths: ["/foo"], version: 2 },
       onLoadStartKey: 0,
       tabTitle: "",
@@ -478,13 +474,3 @@ describe("Documents tab (noSql API)", () => {
     });
   });
 });
-
-describe("Documents tab", () => {
-  it("should add strings to array without duplicate", () => {
-    const array1 = ["a", "b", "c"];
-    const array2 = ["b", "c", "d"];
-
-    const array3 = addStringsNoDuplicate(array1, array2);
-    expect(array3).toEqual(["a", "b", "c", "d"]);
-  });
-});

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -1,17 +1,5 @@
 import { Item, ItemDefinition, PartitionKey, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import {
-  Button,
-  FluentProvider,
-  Input,
-  Menu,
-  MenuItem,
-  MenuList,
-  MenuPopover,
-  MenuProps,
-  PositioningImperativeRef,
-  TableRowId,
-  useRestoreFocusTarget,
-} from "@fluentui/react-components";
+import { Button, FluentProvider, Input, TableRowId } from "@fluentui/react-components";
 import { ArrowClockwise16Filled, Dismiss16Filled } from "@fluentui/react-icons";
 import Split from "@uiw/react-split";
 import { KeyCodes, QueryCopilotSampleContainerId, QueryCopilotSampleDatabaseId } from "Common/Constants";
@@ -33,12 +21,6 @@ import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import Explorer from "Explorer/Explorer";
 import { useCommandBar } from "Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import { querySampleDocuments, readSampleDocument } from "Explorer/QueryCopilot/QueryCopilotUtilities";
-import {
-  DocumentsTabStateData,
-  readDocumentsTabState,
-  readSubComponentState,
-  saveSubComponentState,
-} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { getPlatformTheme } from "Explorer/Theme/ThemeUtil";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { KeyboardAction, KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
@@ -438,24 +420,6 @@ export const buildQuery = (
   return QueryUtils.buildDocumentsQuery(filter, partitionKeyProperties, partitionKey);
 };
 
-/**
- * Export to expose to unit tests
- *
- * Add array2 to array1 without duplicates
- * @param array1
- * @param array2
- * @return array1 with array2 added without duplicates
- */
-export const addStringsNoDuplicate = (array1: string[], array2: string[]): string[] => {
-  const result = [...array1];
-  array2.forEach((item) => {
-    if (!result.includes(item)) {
-      result.push(item);
-    }
-  });
-  return result;
-};
-
 // Export to expose to unit tests
 export interface IDocumentsTabComponentProps {
   isPreferredApiMongoDB: boolean;
@@ -470,11 +434,6 @@ export interface IDocumentsTabComponentProps {
   isTabActive: boolean;
 }
 
-const getUniqueId = (collection: ViewModels.CollectionBase): string => `${collection.databaseId}-${collection.id()}`;
-
-const defaultSqlFilters = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
-const defaultMongoFilters = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
-
 // Export to expose to unit tests
 export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabComponentProps> = ({
   isPreferredApiMongoDB,
@@ -521,9 +480,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     ViewModels.DocumentExplorerState.noDocumentSelected,
   );
 
-  // State
-  const [tabStateData, setTabStateData] = useState<DocumentsTabStateData>(() => readDocumentsTabState());
-
   const isQueryCopilotSampleContainer =
     _collection?.isSampleCollection &&
     _collection?.databaseId === QueryCopilotSampleDatabaseId &&
@@ -532,11 +488,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   // For Mongo only
   const [continuationToken, setContinuationToken] = useState<string>(undefined);
 
-  // User's filter history
-  const [lastFilterContents, setLastFilterContents] = useState<string[]>(() =>
-    readSubComponentState("FilterHistory", _collection, []),
-  );
-
   const setKeyboardActions = useKeyboardActionGroup(KeyboardActionGroup.ACTIVE_TAB);
 
   useEffect(() => {
@@ -562,6 +513,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     }
   }, [documentIds, clickedRowIndex, editorState]);
 
+  let lastFilterContents = ['WHERE c.id = "foo"', "ORDER BY c._ts DESC", 'WHERE c.id = "foo" ORDER BY c._ts DESC'];
+
   const applyFilterButton = {
     enabled: true,
     visible: true,
@@ -1350,26 +1303,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
     return () => resizeObserver.disconnect(); // clean up
   }, []);
 
-  const [filterMenuOpen, setFilterMenuOpen] = React.useState(false);
-  const onFilterMenuOpenChange: MenuProps["onOpenChange"] = (e, data) => {
-    // do not close menu as an outside click if clicking on the custom trigger/target
-    // this prevents it from closing & immediately re-opening when clicking custom triggers
-    if (data.type === "clickOutside" && (e.target === filterInput.current || e.target === inputRef.current)) {
-      return;
-    }
-    setFilterMenuOpen(data.open);
-  };
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const positioningRef = React.useRef<PositioningImperativeRef>(null);
-
-  React.useEffect(() => {
-    if (filterInput.current) {
-      positioningRef.current?.setTarget(filterInput.current);
-    }
-  }, [filterInput, positioningRef]);
-
-  const restoreFocusTargetAttribute = useRestoreFocusTarget();
-
   const columnHeaders = {
     idHeader: isPreferredApiMongoDB ? "_id" : "id",
     partitionKeyHeaders: (showPartitionKey(_collection, isPreferredApiMongoDB) && partitionKeyPropertyHeaders) || [],
@@ -1436,6 +1369,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
       return partitionKey;
     };
 
+    lastFilterContents = ['{"id":"foo"}', "{ qty: { $gte: 20 } }"];
     partitionKeyProperties = partitionKeyProperties?.map((partitionKeyProperty, i) => {
       if (partitionKeyProperty && ~partitionKeyProperty.indexOf(`"`)) {
         partitionKeyProperty = partitionKeyProperty.replace(/["]+/g, "");
@@ -1712,20 +1646,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   }
   // ***************** Mongo ***************************
 
-  const onApplyFilterClick = (): void => {
-    refreshDocumentsGrid(true);
-
-    // Remove duplicates, but keep order
-    if (lastFilterContents.includes(filterContent)) {
-      lastFilterContents.splice(lastFilterContents.indexOf(filterContent), 1);
-    }
-
-    // Save filter content to local storage
-    lastFilterContents.unshift(filterContent);
-    setLastFilterContents([...lastFilterContents]);
-    saveSubComponentState("FilterHistory", _collection, lastFilterContents);
-  };
-
   const refreshDocumentsGrid = useCallback(
     (applyFilterButtonPressed: boolean): void => {
       // clear documents grid
@@ -1788,10 +1708,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     <Input
                       id="filterInput"
                       ref={filterInput}
-                      {...restoreFocusTargetAttribute}
-                      autocomplete="off"
                       type="text"
-                      list={`filtersList-${getUniqueId(_collection)}`}
+                      list="filtersList"
                       className={`${filterContent.length === 0 ? "placeholderVisible" : ""}`}
                       style={{ width: "100%" }}
                       title="Type a query predicate or choose one from the list."
@@ -1803,38 +1721,21 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                       value={filterContent}
                       autoFocus={true}
                       onKeyDown={onFilterKeyDown}
-                      onChange={(e) => {
-                        setFilterContent(e.target.value);
-                        setFilterMenuOpen(true);
-                      }}
+                      onChange={(e) => setFilterContent(e.target.value)}
                       onBlur={() => setIsFilterFocused(false)}
                     />
-                    <Menu open={filterMenuOpen} onOpenChange={onFilterMenuOpenChange} positioning={{ positioningRef }}>
-                      <MenuPopover>
-                        <MenuList>
-                          {addStringsNoDuplicate(
-                            lastFilterContents,
-                            isPreferredApiMongoDB ? defaultMongoFilters : defaultSqlFilters,
-                          ).map((filter) => (
-                            <MenuItem key={filter}>{filter}</MenuItem>
-                          ))}
-                        </MenuList>
-                      </MenuPopover>
-                    </Menu>
-                    {/* <datalist id={`filtersList-${getUniqueId(_collection)}`}>
-                      {addStringsNoDuplicate(
-                        lastFilterContents,
-                        isPreferredApiMongoDB ? defaultMongoFilters : defaultSqlFilters,
-                      ).map((filter) => (
+
+                    <datalist id="filtersList">
+                      {lastFilterContents.map((filter) => (
                         <option key={filter} value={filter} />
                       ))}
-                    </datalist> */}
+                    </datalist>
 
                     <span className="filterbuttonpad">
                       <Button
                         appearance="primary"
                         style={filterButtonStyle}
-                        onClick={onApplyFilterClick}
+                        onClick={() => refreshDocumentsGrid(true)}
                         disabled={!applyFilterButton.enabled}
                         aria-label="Apply filter"
                         tabIndex={0}
@@ -1871,13 +1772,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         )}
         {/* <Split> doesn't like to be a flex child */}
         <div style={{ overflow: "hidden", height: "100%" }}>
-          <Split
-            onDragEnd={(preSize: number) => {
-              tabStateData.leftPaneWidthPercent = Math.min(100, Math.max(0, Math.round(100 * preSize) / 100));
-              // saveDocumentsTabState(tabStateData); // Disable saving split position for now
-              setTabStateData({ ...tabStateData });
-            }}
-          >
+          <Split>
             <div
               style={{ minWidth: 120, width: "35%", overflow: "hidden", position: "relative" }}
               ref={tableContainerRef}
@@ -1918,7 +1813,6 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                     (partitionKey.systemKey && !isPreferredApiMongoDB) ||
                     (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
                   }
-                  collection={_collection}
                 />
                 {tableItems.length > 0 && (
                   <a

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.test.tsx

@@ -1,7 +1,6 @@
 import { TableRowId } from "@fluentui/react-components";
 import { mount } from "enzyme";
 import React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import { DocumentsTableComponent, IDocumentsTableComponentProps } from "./DocumentsTableComponent";
 
 const PARTITION_KEY_HEADER = "partitionKey";
@@ -26,10 +25,6 @@ describe("DocumentsTableComponent", () => {
       partitionKeyHeaders: [PARTITION_KEY_HEADER],
     },
     isSelectionDisabled: false,
-    collection: {
-      databaseId: "db",
-      id: ((): string => "coll") as ko.Observable<string>,
-    } as ViewModels.CollectionBase,
   });
 
   it("should render documents and partition keys in header", () => {

src/Explorer/Tabs/DocumentsTabV2/DocumentsTableComponent.tsx

@@ -1,5 +1,4 @@
 import {
-  createTableColumn,
   Menu,
   MenuItem,
   MenuList,
@@ -17,23 +16,17 @@ import {
   TableRow,
   TableRowId,
   TableSelectionCell,
+  createTableColumn,
   useArrowNavigationGroup,
   useTableColumnSizing_unstable,
   useTableFeatures,
   useTableSelection,
 } from "@fluentui/react-components";
 import { NormalizedEventKey } from "Common/Constants";
-import {
-  ColumnSizesMap,
-  readSubComponentState,
-  saveSubComponentState,
-  WidthDefinition,
-} from "Explorer/Tabs/DocumentsTabV2/DocumentsTabStateUtil";
 import { selectionHelper } from "Explorer/Tabs/DocumentsTabV2/SelectionHelper";
 import { isEnvironmentCtrlPressed, isEnvironmentShiftPressed } from "Utils/KeyboardUtils";
 import React, { useCallback, useMemo } from "react";
 import { FixedSizeList as List, ListChildComponentProps } from "react-window";
-import * as ViewModels from "../../../Contracts/ViewModels";
 
 export type DocumentsTableComponentItem = {
   id: string;
@@ -52,7 +45,6 @@ export interface IDocumentsTableComponentProps {
   columnHeaders: ColumnHeaders;
   style?: React.CSSProperties;
   isSelectionDisabled?: boolean;
-  collection: ViewModels.CollectionBase;
 }
 
 interface TableRowData extends RowStateBase<DocumentsTableComponentItem> {
@@ -65,11 +57,6 @@ interface ReactWindowRenderFnProps extends ListChildComponentProps {
   data: TableRowData[];
 }
 
-const defaultSize: WidthDefinition = {
-  idealWidth: 200,
-  minWidth: 50,
-};
-
 export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> = ({
   items,
   onSelectedRowsChange,
@@ -78,32 +65,30 @@ export const DocumentsTableComponent: React.FC<IDocumentsTableComponentProps> =
   size,
   columnHeaders,
   isSelectionDisabled,
-  collection,
 }: IDocumentsTableComponentProps) => {
-  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(() => {
-    const columnIds = ["id"].concat(columnHeaders.partitionKeyHeaders);
-    const columnSizesMap: ColumnSizesMap = readSubComponentState("ColumnSizes", collection, {});
-    const columnSizesPx: ColumnSizesMap = {};
-    columnIds.forEach((columnId) => {
-      columnSizesPx[columnId] = (columnSizesMap && columnSizesMap[columnId]) || defaultSize;
-    });
-    return columnSizesPx;
+  const initialSizingOptions: TableColumnSizingOptions = {
+    id: {
+      idealWidth: 280,
+      minWidth: 50,
+    },
+  };
+  columnHeaders.partitionKeyHeaders.forEach((pkHeader) => {
+    initialSizingOptions[pkHeader] = {
+      idealWidth: 200,
+      minWidth: 50,
+    };
   });
 
+  const [columnSizingOptions, setColumnSizingOptions] = React.useState<TableColumnSizingOptions>(initialSizingOptions);
+
   const onColumnResize = React.useCallback((_, { columnId, width }) => {
-    setColumnSizingOptions((state) => {
-      const newSizingOptions = {
-        ...state,
-        [columnId]: {
-          ...state[columnId],
-          idealWidth: width,
-        },
-      };
-
-      saveSubComponentState("ColumnSizes", collection, newSizingOptions, true);
-
-      return newSizingOptions;
-    });
+    setColumnSizingOptions((state) => ({
+      ...state,
+      [columnId]: {
+        ...state[columnId],
+        idealWidth: width,
+      },
+    }));
   }, []);
 
   // Columns must be a static object and cannot change on re-renders otherwise React will complain about too many refreshes

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTabV2.test.tsx.snap

@@ -485,7 +485,6 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
     >
       <Split
         mode="horizontal"
-        onDragEnd={[Function]}
         prefixCls="w-split"
         visiable={true}
       >
@@ -527,12 +526,6 @@ exports[`Documents tab (noSql API) when rendered should render the page 1`] = `
             }
           >
             <DocumentsTableComponent
-              collection={
-                Object {
-                  "databaseId": "databaseId",
-                  "id": [Function],
-                }
-              }
               columnHeaders={
                 Object {
                   "idHeader": "id",

src/Explorer/Tabs/DocumentsTabV2/__snapshots__/DocumentsTableComponent.test.tsx.snap

@@ -2,12 +2,6 @@
 
 exports[`DocumentsTableComponent should not render selection column when isSelectionDisabled is true 1`] = `
 <DocumentsTableComponent
-  collection={
-    Object {
-      "databaseId": "db",
-      "id": [Function],
-    }
-  }
   columnHeaders={
     Object {
       "idHeader": "id",
@@ -1000,12 +994,6 @@ exports[`DocumentsTableComponent should not render selection column when isSelec
 
 exports[`DocumentsTableComponent should render documents and partition keys in header 1`] = `
 <DocumentsTableComponent
-  collection={
-    Object {
-      "databaseId": "db",
-      "id": [Function],
-    }
-  }
   columnHeaders={
     Object {
       "idHeader": "id",

src/Shared/AppStatePersistenceUtility.ts

@@ -1,76 +0,0 @@
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-
-// The component name whose state is being saved. Component name must not include special characters.
-export type ComponentName = "DocumentsTab" | "DocumentsTab.columnSizes";
-
-const SCHEMA_VERSION = 1;
-export interface StateData {
-  schemaVersion: number;
-  timestamp: number;
-  data: unknown;
-}
-
-type StorePath = {
-  componentName: string;
-  subComponentName?: string;
-  globalAccountName?: string;
-  databaseName?: string;
-  containerName?: string;
-};
-
-// Load and save state data
-export const loadState = (path: StorePath): unknown => {
-  const appState =
-    LocalStorageUtility.getEntryObject<ApplicationState>(StorageKey.AppState) || ({} as ApplicationState);
-  const key = createKeyFromPath(path);
-  return appState[key]?.data;
-};
-export const saveState = (path: StorePath, state: unknown): void => {
-  // Retrieve state object
-  const appState =
-    LocalStorageUtility.getEntryObject<ApplicationState>(StorageKey.AppState) || ({} as ApplicationState);
-  const key = createKeyFromPath(path);
-  appState[key] = {
-    schemaVersion: SCHEMA_VERSION,
-    timestamp: Date.now(),
-    data: state,
-  };
-
-  // TODO Add logic to clean up old state data based on timestamp
-
-  LocalStorageUtility.setEntryObject(StorageKey.AppState, appState);
-};
-
-// This is for high-frequency state changes
-let timeoutId: NodeJS.Timeout | undefined;
-export const saveStateDebounced = (path: StorePath, state: unknown, debounceDelayMs = 1000): void => {
-  if (timeoutId) {
-    clearTimeout(timeoutId);
-  }
-  timeoutId = setTimeout(() => saveState(path, state), debounceDelayMs);
-};
-
-interface ApplicationState {
-  [statePath: string]: StateData;
-}
-
-const orderedPathSegments: (keyof StorePath)[] = [
-  "subComponentName",
-  "globalAccountName",
-  "databaseName",
-  "containerName",
-];
-
-/**
- * /componentName/subComponentName/globalAccountName/databaseName/containerName/
- * Any of the path segments can be "" except componentName
- * @param path
- */
-const createKeyFromPath = (path: StorePath): string => {
-  let key = `/${path.componentName}`; // ComponentName is always there
-  orderedPathSegments.forEach((segment) => {
-    const segmentValue = path[segment as keyof StorePath];
-    key += `/${segmentValue !== undefined ? segmentValue : ""}`;
-  });
-  return key;
-};

src/Shared/LocalStorageUtility.ts

@@ -20,14 +20,3 @@ export const setEntryNumber = (key: StorageKey, value: number): void =>
 
 export const setEntryBoolean = (key: StorageKey, value: boolean): void =>
   localStorage.setItem(StorageKey[key], value.toString());
-
-export const setEntryObject = (key: StorageKey, value: unknown): void => {
-  localStorage.setItem(StorageKey[key], JSON.stringify(value));
-};
-export const getEntryObject = <T>(key: StorageKey): T | null => {
-  const item = localStorage.getItem(StorageKey[key]);
-  if (item) {
-    return JSON.parse(item) as T;
-  }
-  return null;
-};

src/Shared/StorageUtility.ts

@@ -30,7 +30,6 @@ export enum StorageKey {
   VisitedAccounts,
   PriorityLevel,
   DefaultQueryResultsView,
-  AppState,
 }
 
 export const hasRUThresholdBeenConfigured = (): boolean => {

src/UserContext.ts

@@ -73,6 +73,7 @@ export interface UserContext {
   readonly fabricContext?: FabricContext;
   readonly authType?: AuthType;
   readonly masterKey?: string;
+  readonly listKeysFetchInProgress?: boolean;
   readonly subscriptionId?: string;
   readonly resourceGroup?: string;
   readonly databaseAccount?: DatabaseAccount;
@@ -102,7 +103,6 @@ export interface UserContext {
   readonly vcoreMongoConnectionParams?: VCoreMongoConnectionParams;
   readonly feedbackPolicies?: AdminFeedbackPolicySettings;
   readonly dataPlaneRbacEnabled?: boolean;
-  readonly hasDataPlaneRbacSettingChanged?: boolean;
 }
 
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres" | "VCoreMongo";

src/hooks/useKnockoutExplorer.ts

@@ -41,9 +41,9 @@ import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext"
 import { acquireTokenWithMsal, getAuthorizationHeader, getMsalInstance } from "../Utils/AuthorizationUtils";
 import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";
 import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
-import * as Logger from "../Common/Logger";
 
 // This hook will create a new instance of Explorer.ts and bind it to the DOM
 // This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
@@ -276,79 +276,31 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     updateUserContext({
       databaseAccount: config.databaseAccount,
     });
-    Logger.logInfo(
-      `Configuring Data Explorer for ${userContext.apiType} account ${account.name}`,
-      "Explorer/configureHostedWithAAD",
-    );
+
     if (!userContext.features.enableAadDataPlane) {
-      Logger.logInfo(`AAD Feature flag is not enabled for account ${account.name}`, "Explorer/configureHostedWithAAD");
       if (userContext.apiType === "SQL") {
         if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
           const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
-          Logger.logInfo(
-            `Local storage RBAC setting for ${userContext.apiType} account ${account.name} is ${isDataPlaneRbacSetting}`,
-            "Explorer/configureHostedWithAAD",
-          );
 
           let dataPlaneRbacEnabled;
           if (isDataPlaneRbacSetting === Constants.RBACOptions.setAutomaticRBACOption) {
             dataPlaneRbacEnabled = account.properties.disableLocalAuth;
-            Logger.logInfo(
-              `Data Plane RBAC value for ${userContext.apiType} account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} is ${dataPlaneRbacEnabled}`,
-              "Explorer/configureHostedWithAAD",
-            );
           } else {
             dataPlaneRbacEnabled = isDataPlaneRbacSetting === Constants.RBACOptions.setTrueRBACOption;
-            Logger.logInfo(
-              `Data Plane RBAC value for ${userContext.apiType} account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} is ${dataPlaneRbacEnabled}`,
-              "Explorer/configureHostedWithAAD",
-            );
-          }
-          if (!dataPlaneRbacEnabled) {
-            Logger.logInfo(
-              `Calling fetch keys for ${userContext.apiType} account ${account.name} with RBAC setting ${dataPlaneRbacEnabled}`,
-              "Explorer/configureHostedWithAAD",
-            );
-            await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
           }
 
           updateUserContext({ dataPlaneRbacEnabled });
         } else {
           const dataPlaneRbacEnabled = account.properties.disableLocalAuth;
-          Logger.logInfo(
-            `Local storage setting does not exist : Data Plane RBAC value for ${userContext.apiType} account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} is ${dataPlaneRbacEnabled}`,
-            "Explorer/configureHostedWithAAD",
-          );
-
-          if (!dataPlaneRbacEnabled) {
-            Logger.logInfo(
-              `Fetching keys for ${userContext.apiType} account ${account.name} with RBAC setting ${dataPlaneRbacEnabled}`,
-              "Explorer/configureHostedWithAAD",
-            );
-            await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
-          }
 
           updateUserContext({ dataPlaneRbacEnabled });
           useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
         }
       } else {
-        Logger.logInfo(
-          `Fetching keys for ${userContext.apiType} account ${account.name}`,
-          "Explorer/configureHostedWithAAD",
-        );
-        await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
-      }
-    } else {
-      Logger.logInfo(
-        `AAD Feature flag is enabled for account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} `,
-        "Explorer/configureHostedWithAAD",
-      );
-      if (!account.properties.disableLocalAuth) {
-        Logger.logInfo(
-          `Fetching keys for ${userContext.apiType} account ${account.name} with AAD data plane feature enabled`,
-          "Explorer/configureHostedWithAAD",
-        );
-        await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+        const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
+        updateUserContext({
+          masterKey: keys.primaryMasterKey,
+        });
       }
     }
   } catch (e) {
@@ -467,23 +419,17 @@ function configureEmulator(): Explorer {
 
 async function fetchAndUpdateKeys(subscriptionId: string, resourceGroup: string, account: string) {
   try {
-    Logger.logInfo(`Fetching keys for ${userContext.apiType} account ${account}`, "Explorer/fetchAndUpdateKeys");
+    console.log("Starting to fetch keys...");
     const keys = await listKeys(subscriptionId, resourceGroup, account);
-    Logger.logInfo(`Keys fetched for ${userContext.apiType} account ${account}`, "Explorer/fetchAndUpdateKeys");
+    console.log("Keys fetched:", keys);
 
     updateUserContext({
       masterKey: keys.primaryMasterKey,
     });
-    Logger.logInfo(
-      `User context updated with Master key for ${userContext.apiType} account ${account}`,
-      "Explorer/fetchAndUpdateKeys",
-    );
+
+    console.log("User context updated with master key.");
   } catch (error) {
     console.error("Error during fetching keys or updating user context:", error);
-    Logger.logError(
-      `Error during fetching keys or updating user context: ${error} for ${userContext.apiType} account ${account}`,
-      "Explorer/fetchAndUpdateKeys",
-    );
     throw error;
   }
 }
@@ -492,8 +438,8 @@ async function configurePortal(): Promise<Explorer> {
   updateUserContext({
     authType: AuthType.AAD,
   });
-
   let explorer: Explorer;
+
   return new Promise((resolve) => {
     // In development mode, try to load the iframe message from session storage.
     // This allows webpack hot reload to function properly in the portal
@@ -507,7 +453,6 @@ async function configurePortal(): Promise<Explorer> {
         console.dir(message);
         updateContextsFromPortalMessage(message);
         explorer = new Explorer();
-
         // In development mode, save the iframe message from the portal in session storage.
         // This allows webpack hot reload to funciton properly
         if (process.env.NODE_ENV === "development") {
@@ -546,53 +491,38 @@ async function configurePortal(): Promise<Explorer> {
 
           const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
 
-          let dataPlaneRbacEnabled;
           if (userContext.apiType === "SQL") {
             if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
               const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
-              Logger.logInfo(
-                `Local storage RBAC setting for ${userContext.apiType} account ${account.name} is ${isDataPlaneRbacSetting}`,
-                "Explorer/configurePortal",
-              );
 
+              let dataPlaneRbacEnabled;
               if (isDataPlaneRbacSetting === Constants.RBACOptions.setAutomaticRBACOption) {
                 dataPlaneRbacEnabled = account.properties.disableLocalAuth;
               } else {
                 dataPlaneRbacEnabled = isDataPlaneRbacSetting === Constants.RBACOptions.setTrueRBACOption;
               }
+              if (!dataPlaneRbacEnabled) {
+                await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+              }
+
+              updateUserContext({ dataPlaneRbacEnabled });
+              useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
             } else {
-              Logger.logInfo(
-                `Local storage does not exist for ${userContext.apiType} account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} is ${dataPlaneRbacEnabled}`,
-                "Explorer/configurePortal",
-              );
-              dataPlaneRbacEnabled = account.properties.disableLocalAuth;
-            }
-            Logger.logInfo(
-              `Data Plane RBAC value for ${userContext.apiType} account ${account.name} with disable local auth set to ${account.properties.disableLocalAuth} is ${dataPlaneRbacEnabled}`,
-              "Explorer/configurePortal",
-            );
+              const dataPlaneRbacEnabled = account.properties.disableLocalAuth;
 
-            if (!dataPlaneRbacEnabled) {
-              Logger.logInfo(
-                `Calling fetch keys for ${userContext.apiType} account ${account.name}`,
-                "Explorer/configurePortal",
-              );
-              await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
-            }
+              if (!dataPlaneRbacEnabled) {
+                await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+              }
 
-            updateUserContext({ dataPlaneRbacEnabled });
-            useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
-          } else if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
-            Logger.logInfo(
-              `Calling fetch keys for ${userContext.apiType} account ${account.name}`,
-              "Explorer/configurePortal",
-            );
+              updateUserContext({ dataPlaneRbacEnabled });
+              useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
+            }
+          } else {
             await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
           }
 
           explorer = new Explorer();
           resolve(explorer);
-
           if (userContext.apiType === "Postgres" || userContext.apiType === "SQL" || userContext.apiType === "Mongo") {
             setTimeout(() => explorer.openNPSSurveyDialog(), 3000);
           }
@@ -639,6 +569,11 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   const authorizationToken = inputs.authorizationToken || "";
   const databaseAccount = inputs.databaseAccount;
 
+  if (userContext.apiType !== "SQL") {
+    const masterKey = inputs.masterKey || "";
+    updateUserContext({ masterKey });
+  }
+
   updateConfigContext({
     BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
     ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
@@ -659,6 +594,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     collectionCreationDefaults: inputs.defaultCollectionThroughput,
     isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
     feedbackPolicies: inputs.feedbackPolicies,
+    listKeysFetchInProgress: false,
   });
 
   if (inputs.isPostgresAccount) {

src/hooks/useSubscriptions.tsx

@@ -51,13 +51,17 @@ export async function fetchSubscriptionsFromGraph(accessToken: string): Promise<
   do {
     const body = {
       query: subscriptionsQuery,
-      options: {
-        $allowPartialScopes: true,
-        $top: 150,
-        ...(skipToken && {
-          $skipToken: skipToken,
-        }),
-      } as QueryRequestOptions,
+      ...(skipToken
+        ? {
+            options: {
+              $skipToken: skipToken,
+            } as QueryRequestOptions,
+          }
+        : {
+            options: {
+              $top: 150,
+            } as QueryRequestOptions,
+          }),
     };
 
     const response = await fetch(managementResourceGraphAPIURL, {