refresh part is fixed

.vscode/settings.json

@@ -27,5 +27,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[typescriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,4 +1,5 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { readCollection } from "Common/dataAccess/readCollection";
 import {
   ComputedPropertiesComponent,
   ComputedPropertiesComponentProps,
@@ -11,6 +12,7 @@ import {
   ThroughputBucketsComponent,
   ThroughputBucketsComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent";
+import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
 import { useDatabases } from "Explorer/useDatabases";
 import { isFabricNative } from "Platform/Fabric/FabricUtil";
 import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
@@ -70,7 +72,6 @@ import {
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
 } from "./SettingsUtils";
-
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
   content: JSX.Element;
@@ -173,7 +174,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
   private totalThroughputUsed: number;
   private throughputBucketsEnabled: boolean;
   public mongoDBCollectionResource: MongoDBCollectionResource;
-
+  private unsubscribe: () => void;
   constructor(props: SettingsComponentProps) {
     super(props);
 
@@ -303,8 +304,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
     }
+    this.unsubscribe = useIndexingPolicyStore.subscribe((state) => {
+      this.refreshCollectionData();
+    });
+  }
+  componentWillUnmount(): void {
+    if (this.unsubscribe) this.unsubscribe();
   }
-
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
       useCommandBar.getState().setContextButtons(this.getTabsButtons());
@@ -777,7 +783,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         { name: "name_of_property", query: "query_to_compute_property" },
       ] as DataModels.ComputedProperties;
     }
-
     const throughputBuckets = this.offer?.throughputBuckets;
 
     return {
@@ -852,9 +857,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
     const throughputDelta = (newThroughput - this.offer.autoscaleMaxThroughput) * numberOfRegions;
     if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${this.totalThroughputUsed + throughputDelta
-        this.totalThroughputUsed + throughputDelta
+        } RU/s. Change total throughput limit in cost management.`;
-      } RU/s. Change total throughput limit in cost management.`;
     }
     this.setState({ autoPilotThroughput: newThroughput, throughputError });
   };
@@ -865,9 +869,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
     const throughputDelta = (newThroughput - this.offer.manualThroughput) * numberOfRegions;
     if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
-      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${this.totalThroughputUsed + throughputDelta
-        this.totalThroughputUsed + throughputDelta
+        } RU/s. Change total throughput limit in cost management.`;
-      } RU/s. Change total throughput limit in cost management.`;
     }
     this.setState({ throughput: newThroughput, throughputError });
   };
@@ -929,10 +932,20 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       startKey,
     );
   };
-
+  private refreshCollectionData = async (): Promise<void> => {
+    // Fetch the latest collection data from backend
+    const latestCollection = await readCollection(this.collection.databaseId, this.collection.id());
+    // Update the observable and state
+    this.collection.rawDataModel = latestCollection;
+    this.collection.indexingPolicy(latestCollection.indexingPolicy);
+    console.log("Fetched latest indexing policy:", latestCollection.indexingPolicy);
+    this.setState({
+      indexingPolicyContent: latestCollection.indexingPolicy,
+      indexingPolicyContentBaseline: latestCollection.indexingPolicy,
+    });
+  };
   private saveCollectionSettings = async (startKey: number): Promise<void> => {
     const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
     if (
       this.state.isSubSettingsSaveable ||
       this.state.isContainerPolicyDirty ||
@@ -966,8 +979,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       newCollection.changeFeedPolicy =
         this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
           ? {
-              retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
+            retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
-            }
+          }
           : undefined;
 
       newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
@@ -1128,6 +1141,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       },
       startKey,
     );
+    // console.log("coll", newCollection.indexingPolicy);
   };
 
   public getMongoIndexTabContent = (
@@ -1161,7 +1175,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       onScaleDiscardableChange: this.onScaleDiscardableChange,
       throughputError: this.state.throughputError,
     };
-
+    // console.log("Rendering IndexingPolicyComponent with:", this.state.indexingPolicyContent); // <-- Add this
     if (!this.isCollectionSettingsTab) {
       return (
         <div className="settingsV2MainContainer">

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

@@ -33,7 +33,7 @@ export class IndexingPolicyComponent extends React.Component<
   private shouldCheckComponentIsDirty = true;
   private indexingPolicyDiv = React.createRef<HTMLDivElement>();
   private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
-
+  private unsubscribeFromStore: () => void;
   constructor(props: IndexingPolicyComponentProps) {
     super(props);
     this.state = {
@@ -42,6 +42,7 @@ export class IndexingPolicyComponent extends React.Component<
   }
 
   componentDidUpdate(): void {
+    // const { indexingPolicy } = useIndexingPolicyStore.getState();
     if (this.props.shouldDiscardIndexingPolicy) {
       this.resetIndexingPolicyEditor();
       this.props.resetShouldDiscardIndexingPolicy();
@@ -50,6 +51,7 @@ export class IndexingPolicyComponent extends React.Component<
   }
 
   componentDidMount(): void {
+    // const { indexingPolicy, baselinePolicy } = useIndexingPolicyStore.getState();
     this.resetIndexingPolicyEditor();
     this.onComponentUpdate();
   }
@@ -74,16 +76,16 @@ export class IndexingPolicyComponent extends React.Component<
       this.shouldCheckComponentIsDirty = true;
       return;
     }
+    // const isDirtyState = isDirty(storeIndexingPolicy, this.props.indexingPolicyContentBaseline);
+    // this.props.onIndexingPolicyDirtyChange(isDirtyState && this.state.indexingPolicyContentIsValid);
+    // this.shouldCheckComponentIsDirty = false;
     this.props.onIndexingPolicyDirtyChange(this.IsComponentDirty());
     this.shouldCheckComponentIsDirty = false;
   };
 
   public IsComponentDirty = (): boolean => {
-    const { indexingPolicy, baselinePolicy } = useIndexingPolicyStore.getState();
-    // const { policies, baselines } = useIndexingPolicyStore.getState();
-    // const { containerId } = useQueryMetadataStore();
     if (
-      isDirty(indexingPolicy || this.props.indexingPolicyContent, baselinePolicy || this.props.indexingPolicyContentBaseline) &&
+      isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) &&
       this.state.indexingPolicyContentIsValid
     ) {
       return true;
@@ -94,11 +96,10 @@ export class IndexingPolicyComponent extends React.Component<
 
   private async createIndexingPolicyEditor(): Promise<void> {
     const { indexingPolicy, baselinePolicy } = useIndexingPolicyStore.getState();
-    // const { policies, baselines } = useIndexingPolicyStore.getState();
+    const policyToUse = this.props.indexingPolicyContent;
-    const policyToUse = indexingPolicy ?? this.props.indexingPolicyContent;
 
-    const value: string = JSON.stringify(policyToUse, undefined, 4);
+    // const value: string = JSON.stringify(policyToUse, undefined, 4);
-    // const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+    const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
     this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
       value: value,
@@ -113,14 +114,15 @@ export class IndexingPolicyComponent extends React.Component<
     }
     console.log("compp", indexingPolicy);
     console.log("Accessed policy from Zustand store:", useIndexingPolicyStore.getState().indexingPolicy);
+    console.log("actual indexing content", this.props.indexingPolicyContent);
+    console.log("baseline", this.props.indexingPolicyContentBaseline);
   }
 
   private onEditorContentChange = (): void => {
     const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
     try {
       const newIndexingPolicyContent = JSON.parse(indexingPolicyEditorModel.getValue()) as DataModels.IndexingPolicy;
-      useIndexingPolicyStore.getState().setIndexingPolicyOnly(newIndexingPolicyContent);
+      // useIndexingPolicyStore.getState().setIndexingPolicyOnly(newIndexingPolicyContent);
-      // useIndexingPolicyStore.getState().setIndexingPolicyOnly(this.props.containerId, newIndexingPolicyContent);
       this.props.onIndexingPolicyContentChange(newIndexingPolicyContent);
       this.setState({ indexingPolicyContentIsValid: true });
       // console.log("editor", newIndexingPolicyContent);
@@ -130,7 +132,6 @@ export class IndexingPolicyComponent extends React.Component<
   };
 
   public render(): JSX.Element {
-    // const { indexingPolicy, baselinePolicy } = useIndexingPolicyStore.getState();
     return (
       <Stack {...titleAndInputStackProps}>
         <IndexingPolicyRefreshComponent

src/Explorer/Tabs/QueryTab/ResultsView.tsx

@@ -692,6 +692,14 @@ const IndexAdvisorTab: React.FC<IndexAdvisorTabProps> = ({ onPolicyUpdated }) =>
           ...(containerDef.indexingPolicy?.compositeIndexes || []),
           ...newCompositeIndexes,
         ],
+        spatialIndexes: [
+          ...(containerDef.indexingPolicy?.spatialIndexes || []),
+          // ...newSpatialIndexes, 
+        ],
+        vectorIndexes: [
+          ...(containerDef.indexingPolicy?.vectorIndexes || []),
+          // ...newVectorIndexes,
+        ],
       };
 
       await client()
@@ -941,13 +949,13 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
   const [activeTab, setActiveTab] = useState<ResultsTabs>(ResultsTabs.Results);
   const [indexingPolicy, setIndexingPolicy] = useState<DataModels.IndexingPolicy | null>(null);
   const [baselinePolicy, setBaselinePolicy] = useState<DataModels.IndexingPolicy | null>(null);
-  const { containerId } = useQueryMetadataStore();
   const { setIndexingPolicies } = useIndexingPolicyStore.getState();
 
   const onTabSelect = useCallback((event: SelectTabEvent, data: SelectTabData) => {
     setActiveTab(data.value as ResultsTabs);
   }, []);
-  // console.log("value", indexingPolicy);
+  console.log("indeing", indexingPolicy);
+  console.log("baseline", baselinePolicy);
 
   return (
     <div data-test="QueryTab/ResultsPane/ResultsView" className={styles.queryResultsTabPanel}>
@@ -991,7 +999,6 @@ export const ResultsView: React.FC<ResultsViewProps> = ({ isMongoDB, queryResult
             setIndexingPolicy(freshPolicy);
             setBaselinePolicy(freshPolicy);
             setIndexingPolicies(freshPolicy, freshPolicy);
-            // setIndexingPolicies(containerId, freshPolicy, freshPolicy);
           }
           }
         />}
@@ -1020,19 +1027,6 @@ export interface IndexingPolicyStore {
     baselinePolicy: DataModels.IndexingPolicy
   ) => void;
   setIndexingPolicyOnly: (indexingPolicy: DataModels.IndexingPolicy) => void;
-  // policies: Record<string, DataModels.IndexingPolicy | null>;
-  // baselines: Record<string, DataModels.IndexingPolicy | null>;
-  // setIndexingPolicies: (
-  //   containerId: string,
-  //   indexingPolicy: DataModels.IndexingPolicy,
-  //   baselinePolicy: DataModels.IndexingPolicy
-  // ) => void;
-  // setIndexingPolicyOnly: (
-  //   containerId: string,
-  //   indexingPolicy: DataModels.IndexingPolicy
-  // ) => void;
-  // getIndexingPolicy: (containerId: string) => DataModels.IndexingPolicy | null;
-  // getBaselinePolicy: (containerId: string) => DataModels.IndexingPolicy | null;
 }
 
 export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
@@ -1043,34 +1037,7 @@ export const useIndexingPolicyStore = create<IndexingPolicyStore>((set) => ({
   // setIndexingPolicyOnly: (indexingPolicy) =>
   //   set((state) => ({ indexingPolicy })),
   setIndexingPolicyOnly: (indexingPolicy) =>
-    set(() => ({ indexingPolicy: { ...indexingPolicy } })),
+    set((state) => ({ indexingPolicy: { ...indexingPolicy } })),
 }));
-// export const useIndexingPolicyStore = create<IndexingPolicyStore>((set, get) => ({
-//   policies: {},
-//   baselines: {},
-
-//   setIndexingPolicies: (containerId, indexingPolicy, baselinePolicy) =>
-//     set((state) => ({
-//       policies: {
-//         ...state.policies,
-//         [containerId]: { ...indexingPolicy },
-//       },
-//       baselines: {
-//         ...state.baselines,
-//         [containerId]: { ...baselinePolicy },
-//       },
-//     })),
-
-//   setIndexingPolicyOnly: (containerId, indexingPolicy) =>
-//     set((state) => ({
-//       policies: {
-//         ...state.policies,
-//         [containerId]: { ...indexingPolicy },
-//       },
-//     })),
-
-//   getIndexingPolicy: (containerId: string) => get().policies[containerId] ?? null,
-//   getBaselinePolicy: (containerId: string) => get().baselines[containerId] ?? null,
-// }));
 
 

src/Explorer/Tree/Collection.ts

@@ -46,7 +46,6 @@ import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
-
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
   public container: Explorer;
@@ -123,6 +122,55 @@ export default class Collection implements ViewModels.Collection {
     this.vectorEmbeddingPolicy = ko.observable(data.vectorEmbeddingPolicy);
     this.fullTextPolicy = ko.observable(data.fullTextPolicy);
     this.indexingPolicy = ko.observable(data.indexingPolicy);
+    // // console.log("Indexing policy changed data.indexngpolicy:", data.indexingPolicy);
+
+    // this.indexingPolicy(data.indexingPolicy);
+    // this.indexingPolicy.subscribe(async (newPolicy) => {
+    //   console.log("Indexing policy changed via KO:", newPolicy);
+
+    //   // Sync with Zustand (React side, if needed)
+    //   useIndexingPolicyStore.getState().setIndexingPolicyOnly(newPolicy);
+
+    //   // Prepare a new collection object based on raw data
+    //   const updatedCollection: DataModels.Collection = {
+    //     ...this.rawDataModel,
+    //     indexingPolicy: newPolicy,
+    //   };
+
+    //   try {
+    //     // Send update to backend
+    //     const updated = await updateCollection(
+    //       this.databaseId,
+    //       this.id(),
+    //       updatedCollection
+    //     );
+    //     console.log("updatedcollection", updatedCollection);
+    //     // Update the local view model with backend-confirmed values
+    //     this.rawDataModel = updated;
+    //     this.defaultTtl(updated.defaultTtl);
+    //     this.analyticalStorageTtl(updated.analyticalStorageTtl);
+    //     this.id(updated.id);
+    //     this.indexingPolicy(updated.indexingPolicy);
+    //     this.conflictResolutionPolicy(updated.conflictResolutionPolicy);
+    //     this.changeFeedPolicy(updated.changeFeedPolicy);
+    //     this.geospatialConfig(updated.geospatialConfig);
+    //     this.computedProperties(updated.computedProperties);
+    //     this.vectorEmbeddingPolicy(updated.vectorEmbeddingPolicy);
+    //     this.fullTextPolicy(updated.fullTextPolicy);
+
+    //     console.log("✅ Indexing policy update persisted and view model refreshed.");
+    //   } catch (error) {
+    //     console.error("❌ Failed to update indexing policy:", error);
+    //   }
+    // });
+
+    // this.indexingPolicy.subscribe((newPolicy) => {
+    //   console.log("Indexing policy changed via KO:", newPolicy);
+    //   //func to tigger
+    //   useIndexingPolicyStore.getState().setIndexingPolicyOnly(newPolicy);
+
+    // }); console.log(useIndexingPolicyStore.getState().indexingPolicy);
+
     this.usageSizeInKB = ko.observable();
     this.offer = ko.observable();
     this.conflictResolutionPolicy = ko.observable(data.conflictResolutionPolicy);