Fabric native improvements: Settings pane, Partition Key settings tab, sample data and message contract (#2119)

* Hide entire Accordion of options in Settings Pane

* In PartitionKeyComponent hide "Change partition key" label when read-only.

* Create sample data container with correct pkey

* Add unit tests to PartitionKeyComponent

* Fix format

* fix unit test snapshot

* Add Fabric message to open Settings to given tab id

* Improve syntax on message contract

* Remove "(preview)" in partition key tab title in Settings Tab

src/Contracts/DataExplorerMessagesContract.ts

@@ -18,10 +18,13 @@ export type DataExploreMessageV3 =
   | {
       type: FabricMessageTypes.GetAllResourceTokens;
       id: string;
+    }
+  | {
+      type: FabricMessageTypes.OpenSettings;
+      settingsId: string;
     };
-
-export type GetCosmosTokenMessageOptions = {
+export interface GetCosmosTokenMessageOptions {
   verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
   resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
   resourceId: string;
-};
+}

src/Contracts/FabricMessageTypes.ts

@@ -6,6 +6,7 @@ export enum FabricMessageTypes {
   GetAllResourceTokens = "GetAllResourceTokens",
   GetAccessToken = "GetAccessToken",
   Ready = "Ready",
+  OpenSettings = "OpenSettings",
 }
 
 export interface AuthorizationToken {

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.test.tsx

@@ -0,0 +1,41 @@
+import { shallow } from "enzyme";
+import {
+  PartitionKeyComponent,
+  PartitionKeyComponentProps,
+} from "Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent";
+import Explorer from "Explorer/Explorer";
+import React from "react";
+
+describe("PartitionKeyComponent", () => {
+  // Create a test setup function to get fresh instances for each test
+  const setupTest = () => {
+    // Create an instance of the mocked Explorer
+    const explorer = new Explorer();
+    // Create minimal mock objects for database and collection
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mockDatabase = {} as any as import("../../../../Contracts/ViewModels").Database;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mockCollection = {} as any as import("../../../../Contracts/ViewModels").Collection;
+
+    // Create props with the mocked Explorer instance
+    const props: PartitionKeyComponentProps = {
+      database: mockDatabase,
+      collection: mockCollection,
+      explorer,
+    };
+
+    return { explorer, props };
+  };
+
+  it("renders default component and matches snapshot", () => {
+    const { props } = setupTest();
+    const wrapper = shallow(<PartitionKeyComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders read-only component and matches snapshot", () => {
+    const { props } = setupTest();
+    const wrapper = shallow(<PartitionKeyComponent {...props} isReadOnly={true} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -161,7 +161,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   return (
     <Stack tokens={{ childrenGap: 20 }} styles={{ root: { maxWidth: 600 } }}>
       <Stack tokens={{ childrenGap: 10 }}>
-        <Text styles={textHeadingStyle}>Change {partitionKeyName.toLowerCase()}</Text>
+        {!isReadOnly && <Text styles={textHeadingStyle}>Change {partitionKeyName.toLowerCase()}</Text>}
         <Stack horizontal tokens={{ childrenGap: 20 }}>
           <Stack tokens={{ childrenGap: 5 }}>
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap

@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PartitionKeyComponent renders default component and matches snapshot 1`] = `
+<Stack
+  styles={
+    {
+      "root": {
+        "maxWidth": 600,
+      },
+    }
+  }
+  tokens={
+    {
+      "childrenGap": 20,
+    }
+  }
+>
+  <Stack
+    tokens={
+      {
+        "childrenGap": 10,
+      }
+    }
+  >
+    <Text
+      styles={
+        {
+          "root": {
+            "fontSize": 16,
+            "fontWeight": 600,
+          },
+        }
+      }
+    >
+      Change 
+      partition key
+    </Text>
+    <Stack
+      horizontal={true}
+      tokens={
+        {
+          "childrenGap": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          {
+            "childrenGap": 5,
+          }
+        }
+      >
+        <Text
+          styles={
+            {
+              "root": {
+                "fontWeight": 600,
+              },
+            }
+          }
+        >
+          Current 
+          partition key
+        </Text>
+        <Text
+          styles={
+            {
+              "root": {
+                "fontWeight": 600,
+              },
+            }
+          }
+        >
+          Partitioning
+        </Text>
+      </Stack>
+      <Stack
+        tokens={
+          {
+            "childrenGap": 5,
+          }
+        }
+      >
+        <Text />
+        <Text>
+          Non-hierarchical
+        </Text>
+      </Stack>
+    </Stack>
+  </Stack>
+  <StyledMessageBar
+    messageBarType={5}
+  >
+    To safeguard the integrity of the data being copied to the new container, ensure that no updates are made to the source container for the entire duration of the partition key change process.
+    <StyledLinkBase
+      href="https://learn.microsoft.com/azure/cosmos-db/container-copy#how-does-container-copy-work"
+      target="_blank"
+      underline={true}
+    >
+      Learn more
+    </StyledLinkBase>
+  </StyledMessageBar>
+  <Text>
+    To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
+  </Text>
+  <CustomizedPrimaryButton
+    onClick={[Function]}
+    styles={
+      {
+        "root": {
+          "width": "fit-content",
+        },
+      }
+    }
+    text="Change"
+  />
+</Stack>
+`;
+
+exports[`PartitionKeyComponent renders read-only component and matches snapshot 1`] = `
+<Stack
+  styles={
+    {
+      "root": {
+        "maxWidth": 600,
+      },
+    }
+  }
+  tokens={
+    {
+      "childrenGap": 20,
+    }
+  }
+>
+  <Stack
+    tokens={
+      {
+        "childrenGap": 10,
+      }
+    }
+  >
+    <Stack
+      horizontal={true}
+      tokens={
+        {
+          "childrenGap": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          {
+            "childrenGap": 5,
+          }
+        }
+      >
+        <Text
+          styles={
+            {
+              "root": {
+                "fontWeight": 600,
+              },
+            }
+          }
+        >
+          Current 
+          partition key
+        </Text>
+        <Text
+          styles={
+            {
+              "root": {
+                "fontWeight": 600,
+              },
+            }
+          }
+        >
+          Partitioning
+        </Text>
+      </Stack>
+      <Stack
+        tokens={
+          {
+            "childrenGap": 5,
+          }
+        }
+      >
+        <Text />
+        <Text>
+          Non-hierarchical
+        </Text>
+      </Stack>
+    </Stack>
+  </Stack>
+</Stack>
+`;

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -1,6 +1,7 @@
 import * as Constants from "../../../Common/Constants";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
 import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 
 const zeroValue = 0;
@@ -165,7 +166,7 @@ export const getTabTitle = (tab: SettingsV2TabTypes): string => {
     case SettingsV2TabTypes.IndexingPolicyTab:
       return "Indexing Policy";
     case SettingsV2TabTypes.PartitionKeyTab:
-      return "Partition Keys (preview)";
+      return isFabricNative() ? "Partition Keys" : "Partition Keys (preview)";
     case SettingsV2TabTypes.ComputedPropertiesTab:
       return "Computed Properties";
     case SettingsV2TabTypes.ContainerVectorPolicyTab:

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -23,7 +23,7 @@ import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { Platform, configContext } from "ConfigContext";
 import { useDialog } from "Explorer/Controls/Dialog";
 import { useDatabases } from "Explorer/useDatabases";
-import { isFabric } from "Platform/Fabric/FabricUtil";
+import { isFabric, isFabricNative } from "Platform/Fabric/FabricUtil";
 import {
   AppStateComponentNames,
   deleteAllStates,
@@ -607,6 +607,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
+        {!isFabricNative() && (
           <Accordion className={`customAccordion ${styles.firstItem}`}>
             {shouldShowQueryPageOptions && (
               <AccordionItem value="1">
@@ -665,8 +666,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 <AccordionPanel>
                   <div className={styles.settingsSectionContainer}>
                     <div className={styles.settingsSectionDescription}>
-                    Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra ID
-                    RBAC.
+                      Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
+                      ID RBAC.
                       <a
                         href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
                         target="_blank"
@@ -726,8 +727,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                   <AccordionPanel>
                     <div className={styles.settingsSectionContainer}>
                       <div className={styles.settingsSectionDescription}>
-                      When a query reaches a specified time limit, a popup with an option to cancel the query will show
-                      unless automatic cancellation has been enabled.
+                        When a query reaches a specified time limit, a popup with an option to cancel the query will
+                        show unless automatic cancellation has been enabled.
                       </div>
                       <Toggle
                         styles={toggleStyles}
@@ -880,8 +881,12 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                       onChange={handleOnMaxWaitTimeSpinButtonChange}
                       incrementButtonAriaLabel="Increase value by 1"
                       decrementButtonAriaLabel="Decrease value by 1"
-                    onIncrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)}
-                    onDecrement={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)}
+                      onIncrement={(newValue) =>
+                        setMaxWaitTimeInSeconds(parseInt(newValue) + 1 || MaxWaitTimeInSeconds)
+                      }
+                      onDecrement={(newValue) =>
+                        setMaxWaitTimeInSeconds(parseInt(newValue) - 1 || MaxWaitTimeInSeconds)
+                      }
                       onValidate={(newValue) => setMaxWaitTimeInSeconds(parseInt(newValue) || MaxWaitTimeInSeconds)}
                       styles={spinButtonStyles}
                     />
@@ -921,8 +926,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 <AccordionPanel>
                   <div className={styles.settingsSectionContainer}>
                     <div className={styles.settingsSectionDescription}>
-                    Send more than one request while executing a query. More than one request is necessary if the query
-                    is not scoped to single partition key value.
+                      Send more than one request while executing a query. More than one request is necessary if the
+                      query is not scoped to single partition key value.
                     </div>
                     <Checkbox
                       styles={{
@@ -946,9 +951,9 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 <AccordionPanel>
                   <div className={styles.settingsSectionContainer}>
                     <div className={styles.settingsSectionDescription}>
-                    Gets or sets the number of concurrent operations run client side during parallel query execution. A
-                    positive property value limits the number of concurrent operations to the set value. If it is set to
-                    less than 0, the system automatically decides the number of concurrent operations to run.
+                      Gets or sets the number of concurrent operations run client side during parallel query execution.
+                      A positive property value limits the number of concurrent operations to the set value. If it is
+                      set to less than 0, the system automatically decides the number of concurrent operations to run.
                     </div>
                     <SpinButton
                       min={-1}
@@ -1002,8 +1007,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
                 <AccordionPanel>
                   <div className={styles.settingsSectionContainer}>
                     <div className={styles.settingsSectionDescription}>
-                    Select Graph to automatically visualize the query results as a Graph or JSON to display the results
-                    as JSON.
+                      Select Graph to automatically visualize the query results as a Graph or JSON to display the
+                      results as JSON.
                     </div>
                     <ChoiceGroup
                       selectedKey={graphAutoVizDisabled}
@@ -1042,6 +1047,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               </AccordionItem>
             )}
           </Accordion>
+        )}
 
         <div className="settingsSection">
           <div className="settingsSectionPart">

src/Explorer/SplashScreen/SampleUtil.ts

@@ -1,3 +1,4 @@
+import { BackendDefaults } from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
 import Explorer from "Explorer/Explorer";
 import { useDatabases } from "Explorer/useDatabases";
@@ -35,6 +36,11 @@ export const createContainer = async (
     collectionId: containerName,
     databaseId: databaseName,
     databaseLevelThroughput: false,
+    partitionKey: {
+      paths: [`/${SAMPLE_DATA_PARTITION_KEY}`],
+      kind: "Hash",
+      version: BackendDefaults.partitionKeyVersion,
+    },
   };
   await createCollection(createRequest);
   await explorer.refreshAllDatabases();
@@ -47,6 +53,8 @@ export const createContainer = async (
   return newCollection;
 };
 
+const SAMPLE_DATA_PARTITION_KEY = "category"; // This pkey is specifically set for queryCopilotSampleData.json below
+
 export const importData = async (collection: ViewModels.Collection): Promise<void> => {
   // TODO: keep same chunk as ContainerSampleGenerator
   const dataFileContent = await import(