Global Secondary Index (#2071)

* add Materialized Views feature flag * fetch MV properties from RP API and capture them in our data models * AddMaterializedViewPanel * undefined check * subpartition keys * Partition Key, Throughput, Unique Keys * All views associated with a container (#2063) and Materialized View Target Container (#2065) Identified Source container and Target container Created tabs in Scale and Settings respectively Changed the Icon of target container * Add MV Panel * format * format * styling * add tests * tests * test files (#2074) Co-authored-by: nishthaAhujaa * fix type error * fix tests * merge conflict * Panel Integration (#2075) * integrated panel * edited header text --------- Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in> Co-authored-by: Asier Isayas <aisayas@microsoft.com> * updated tests (#2077) Co-authored-by: nishthaAhujaa * fix tests * update treeNodeUtil test snap * update settings component test snap * fixed source container in global "New Materialized View" * source container check (#2079) Co-authored-by: nishthaAhujaa * renamed Materialized Views to Global Secondary Index * more renaming * fix import * fix typo * disable materialized views for Fabric * updated input validation --------- Co-authored-by: Asier Isayas <aisayas@microsoft.com> Co-authored-by: Nishtha Ahuja <45535788+nishthaAhujaa@users.noreply.github.com> Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
2026-01-24 20:24:13 +00:00 · 2025-04-11 10:39:32 -04:00
parent a3bfc89318
commit 2cff0fc3ff
42 changed files with 2145 additions and 263 deletions
--- a/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/UniqueKeysComponent.tsx
+++ b/src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/UniqueKeysComponent.tsx
@@ -0,0 +1,78 @@
+import { ActionButton, IconButton, Stack } from "@fluentui/react";
+import { UniqueKeysHeader } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
+import React from "react";
+import { userContext } from "UserContext";
+
+export interface UniqueKeysComponentProps {
+  uniqueKeys: string[];
+  setUniqueKeys: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+export const UniqueKeysComponent = (props: UniqueKeysComponentProps): JSX.Element => {
+  const { uniqueKeys, setUniqueKeys } = props;
+
+  const updateUniqueKeysOnChange = (value: string, uniqueKeyToReplaceIndex: number): void => {
+    const updatedUniqueKeys = uniqueKeys.map((uniqueKey: string, uniqueKeyIndex: number) => {
+      if (uniqueKeyToReplaceIndex === uniqueKeyIndex) {
+        return value;
+      }
+      return uniqueKey;
+    });
+    setUniqueKeys(updatedUniqueKeys);
+  };
+
+  const deleteUniqueKeyOnClick = (uniqueKeyToDeleteIndex: number): void => {
+    const updatedUniqueKeys = uniqueKeys.filter((_, uniqueKeyIndex) => uniqueKeyToDeleteIndex !== uniqueKeyIndex);
+    setUniqueKeys(updatedUniqueKeys);
+  };
+
+  const addUniqueKeyOnClick = (): void => {
+    setUniqueKeys([...uniqueKeys, ""]);
+  };
+
+  return (
+    <Stack>
+      {UniqueKeysHeader()}
+
+      {uniqueKeys.map((uniqueKey: string, uniqueKeyIndex: number): JSX.Element => {
+        return (
+          <Stack style={{ marginBottom: 8 }} key={`uniqueKey-${uniqueKeyIndex}`} horizontal>
+            <input
+              type="text"
+              autoComplete="off"
+              placeholder={
+                userContext.apiType === "Mongo"
+                  ? "Comma separated paths e.g. firstName,address.zipCode"
+                  : "Comma separated paths e.g. /firstName,/address/zipCode"
+              }
+              className="panelTextField"
+              autoFocus
+              value={uniqueKey}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                updateUniqueKeysOnChange(event.target.value, uniqueKeyIndex);
+              }}
+            />
+
+            <IconButton
+              iconProps={{ iconName: "Delete" }}
+              style={{ height: 27 }}
+              onClick={() => {
+                deleteUniqueKeyOnClick(uniqueKeyIndex);
+              }}
+            />
+          </Stack>
+        );
+      })}
+
+      <ActionButton
+        iconProps={{ iconName: "Add" }}
+        styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
+        onClick={() => {
+          addUniqueKeyOnClick();
+        }}
+      >
+        Add unique key
+      </ActionButton>
+    </Stack>
+  );
+};