Move database settings tab to react (#386)

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>
2025-12-20 01:11:25 +00:00 · 2021-02-10 14:06:14 -08:00
parent 4210e0752b
commit 22d8a7a1be
25 changed files with 528 additions and 386 deletions
--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -2,7 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import SettingsTabV2 from "../../Tabs/SettingsTabV2";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { collection } from "./TestUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
@@ -37,16 +37,15 @@ jest.mock("../../../Common/dataAccess/updateOffer", () => ({

 describe("SettingsComponent", () => {
  const baseProps: SettingsComponentProps = {
-    settingsTab: new SettingsTabV2({
+    settingsTab: new CollectionSettingsTabV2({
      collection: collection,
-      tabKind: ViewModels.CollectionTabKind.SettingsV2,
+      tabKind: ViewModels.CollectionTabKind.CollectionSettingsV2,
      title: "Scale & Settings",
      tabPath: "",
      node: undefined,
      hashLocation: "settings",
      isActive: ko.observable(false),
      onUpdateTabsButtons: undefined,
-      getPendingNotification: Promise.resolve(undefined),
    }),
  };

@@ -139,6 +138,7 @@ describe("SettingsComponent", () => {
      readSettings: undefined,
      onSettingsClick: undefined,
      loadOffer: undefined,
+      getPendingThroughputSplitNotification: undefined,
    } as ViewModels.Database;
    newCollection.getDatabase = () => newDatabase;
    newCollection.offer = ko.observable(undefined);
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -11,7 +11,7 @@ import Explorer from "../../Explorer";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import SettingsTab from "../../Tabs/SettingsTabV2";
+import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
 import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
@@ -58,7 +58,7 @@ interface ButtonV2 {
 }

 export interface SettingsComponentProps {
-  settingsTab: SettingsTab;
+  settingsTab: SettingsTabV2;
 }

 export interface SettingsComponentState {
@@ -116,7 +116,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private discardSettingsChangesButton: ButtonV2;

  private isAnalyticalStorageEnabled: boolean;
+  private isCollectionSettingsTab: boolean;
  private collection: ViewModels.Collection;
+  private database: ViewModels.Database;
+  private offer: DataModels.Offer;
  private container: Explorer;
  private changeFeedPolicyVisible: boolean;
  private isFixedContainer: boolean;
@@ -126,20 +129,28 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  constructor(props: SettingsComponentProps) {
    super(props);

-    this.collection = this.props.settingsTab.collection as ViewModels.Collection;
-    this.container = this.collection?.container;
-    this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
-    this.shouldShowIndexingPolicyEditor =
-      this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
+    this.isCollectionSettingsTab = this.props.settingsTab.tabKind === ViewModels.CollectionTabKind.CollectionSettingsV2;
+    if (this.isCollectionSettingsTab) {
+      this.collection = this.props.settingsTab.collection as ViewModels.Collection;
+      this.container = this.collection?.container;
+      this.offer = this.collection?.offer();
+      this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
+      this.shouldShowIndexingPolicyEditor =
+        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();

-    this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
-      Constants.Features.enableChangeFeedPolicy
-    );
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );

-    // Mongo container with system partition key still treat as "Fixed"
-    this.isFixedContainer =
-      this.container.isPreferredApiMongoDB() &&
-      (!this.collection.partitionKey || this.collection.partitionKey.systemKey);
+      // Mongo container with system partition key still treat as "Fixed"
+      this.isFixedContainer =
+        this.container.isPreferredApiMongoDB() &&
+        (!this.collection?.partitionKey || this.collection?.partitionKey.systemKey);
+    } else {
+      this.database = this.props.settingsTab.database;
+      this.container = this.database?.container;
+      this.offer = this.database?.offer();
+    }

    this.state = {
      throughput: undefined,
@@ -206,18 +217,21 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  }

  componentDidMount(): void {
-    this.refreshIndexTransformationProgress();
-    this.loadMongoIndexes();
+    if (this.isCollectionSettingsTab) {
+      this.refreshIndexTransformationProgress();
+      this.loadMongoIndexes();
+    }
+
    this.setAutoPilotStates();
    this.setBaseline();
    if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
    }
  }

  componentDidUpdate(): void {
    if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
    }
  }

@@ -270,7 +284,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  };

  private setAutoPilotStates = (): void => {
-    const autoscaleMaxThroughput = this.collection?.offer()?.autoscaleMaxThroughput;
+    const autoscaleMaxThroughput = this.offer?.autoscaleMaxThroughput;

    if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
      this.setState({
@@ -295,7 +309,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    !!this.collection.conflictResolutionPolicy();

  public isOfferReplacePending = (): boolean => {
-    return this.collection?.offer()?.offerReplacePending;
+    return this.offer?.offerReplacePending;
  };

  public onSaveClick = async (): Promise<void> => {
@@ -309,174 +323,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      tabTitle: this.props.settingsTab.tabTitle(),
    });

-    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
-
    try {
-      if (
-        this.state.isSubSettingsSaveable ||
-        this.state.isIndexingPolicyDirty ||
-        this.state.isConflictResolutionDirty
-      ) {
-        let defaultTtl: number;
-        switch (this.state.timeToLive) {
-          case TtlType.On:
-            defaultTtl = Number(this.state.timeToLiveSeconds);
-            break;
-          case TtlType.OnNoDefault:
-            defaultTtl = -1;
-            break;
-          case TtlType.Off:
-          default:
-            defaultTtl = undefined;
-            break;
-        }
-
-        const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
-        newCollection.defaultTtl = defaultTtl;
-
-        newCollection.indexingPolicy = this.state.indexingPolicyContent;
-
-        newCollection.changeFeedPolicy =
-          this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
-            ? {
-                retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
-              }
-            : undefined;
-
-        newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
-
-        newCollection.geospatialConfig = {
-          type: this.state.geospatialConfigType,
-        };
-
-        const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
-        if (conflictResolutionChanges) {
-          newCollection.conflictResolutionPolicy = conflictResolutionChanges;
-        }
-
-        const updatedCollection: DataModels.Collection = await updateCollection(
-          this.collection.databaseId,
-          this.collection.id(),
-          newCollection
-        );
-        this.collection.rawDataModel = updatedCollection;
-        this.collection.defaultTtl(updatedCollection.defaultTtl);
-        this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
-        this.collection.id(updatedCollection.id);
-        this.collection.indexingPolicy(updatedCollection.indexingPolicy);
-        this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
-        this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
-        this.collection.geospatialConfig(updatedCollection.geospatialConfig);
-
-        if (wasIndexingPolicyModified) {
-          await this.refreshIndexTransformationProgress();
-        }
-
-        this.setState({
-          isSubSettingsSaveable: false,
-          isSubSettingsDiscardable: false,
-          isIndexingPolicyDirty: false,
-          isConflictResolutionDirty: false,
-        });
-      }
-
-      if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
-        try {
-          const newMongoIndexes = this.getMongoIndexesToSave();
-          const newMongoCollection: MongoDBCollectionResource = {
-            ...this.mongoDBCollectionResource,
-            indexes: newMongoIndexes,
-          };
-
-          this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
-            this.collection.databaseId,
-            this.collection.id(),
-            newMongoCollection
-          );
-
-          await this.refreshIndexTransformationProgress();
-          this.setState({
-            isMongoIndexingPolicySaveable: false,
-            indexesToDrop: [],
-            indexesToAdd: [],
-            currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
-          });
-          traceSuccess(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-            },
-            startKey
-          );
-        } catch (error) {
-          traceFailure(
-            Action.MongoIndexUpdated,
-            {
-              databaseAccountName: this.container.databaseAccount()?.name,
-              databaseName: this.collection?.databaseId,
-              collectionName: this.collection?.id(),
-              defaultExperience: this.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.props.settingsTab.tabTitle(),
-              error: getErrorMessage(error),
-              errorStack: getErrorStack(error),
-            },
-            startKey
-          );
-          throw error;
-        }
-      }
-
-      if (this.state.isScaleSaveable) {
-        const updateOfferParams: DataModels.UpdateOfferParams = {
-          databaseId: this.collection.databaseId,
-          collectionId: this.collection.id(),
-          currentOffer: this.collection.offer(),
-          autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
-          manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
-        };
-        if (this.hasProvisioningTypeChanged()) {
-          if (this.state.isAutoPilotSelected) {
-            updateOfferParams.migrateToAutoPilot = true;
-          } else {
-            updateOfferParams.migrateToManual = true;
-          }
-        }
-        const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
-        this.collection.offer(updatedOffer);
-        this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
-        if (this.state.isAutoPilotSelected) {
-          this.setState({
-            autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
-            autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
-          });
-        } else {
-          this.setState({
-            throughput: updatedOffer.manualThroughput,
-            throughputBaseline: updatedOffer.manualThroughput,
-          });
-        }
-      }
-      this.container.isRefreshingExplorer(false);
-      this.setBaseline();
-      this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
-      traceSuccess(
-        Action.SettingsV2Updated,
-        {
-          databaseAccountName: this.container.databaseAccount()?.name,
-          databaseName: this.collection?.databaseId,
-          collectionName: this.collection?.id(),
-          defaultExperience: this.container.defaultExperience(),
-          dataExplorerArea: Constants.Areas.Tab,
-          tabTitle: this.props.settingsTab.tabTitle(),
-        },
-        startKey
-      );
+      await (this.isCollectionSettingsTab
+        ? this.saveCollectionSettings(startKey)
+        : this.saveDatabaseSettings(startKey));
    } catch (error) {
      this.container.isRefreshingExplorer(false);
      this.props.settingsTab.isExecutionError(true);
@@ -495,8 +345,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        },
        startKey
      );
+    } finally {
+      this.props.settingsTab.isExecuting(false);
    }
-    this.props.settingsTab.isExecuting(false);
  };

  public onRevertClick = (): void => {
@@ -693,6 +544,17 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  };

  public setBaseline = (): void => {
+    const offerThroughput = this.offer?.manualThroughput;
+
+    if (!this.isCollectionSettingsTab) {
+      this.setState({
+        throughput: offerThroughput,
+        throughputBaseline: offerThroughput,
+      });
+
+      return;
+    }
+
    const defaultTtl = this.collection.defaultTtl();

    let timeToLive: TtlType = this.state.timeToLive;
@@ -725,7 +587,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      }
    }

-    const offerThroughput = this.collection.offer()?.manualThroughput;
    const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
      ? ChangeFeedPolicyState.On
      : ChangeFeedPolicyState.Off;
@@ -811,9 +672,225 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    this.setState({ selectedTab: selectedTab });
  };

+  private saveDatabaseSettings = async (startKey: number): Promise<void> => {
+    if (this.state.isScaleSaveable) {
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.database.id(),
+        currentOffer: this.database.offer(),
+        autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+        manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
+      };
+      if (this.hasProvisioningTypeChanged()) {
+        if (this.state.isAutoPilotSelected) {
+          updateOfferParams.migrateToAutoPilot = true;
+        } else {
+          updateOfferParams.migrateToManual = true;
+        }
+      }
+      const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.database.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.database.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
+  private saveCollectionSettings = async (startKey: number): Promise<void> => {
+    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
+    if (this.state.isSubSettingsSaveable || this.state.isIndexingPolicyDirty || this.state.isConflictResolutionDirty) {
+      let defaultTtl: number;
+      switch (this.state.timeToLive) {
+        case TtlType.On:
+          defaultTtl = Number(this.state.timeToLiveSeconds);
+          break;
+        case TtlType.OnNoDefault:
+          defaultTtl = -1;
+          break;
+        case TtlType.Off:
+        default:
+          defaultTtl = undefined;
+          break;
+      }
+
+      const wasIndexingPolicyModified = this.state.isIndexingPolicyDirty;
+      newCollection.defaultTtl = defaultTtl;
+
+      newCollection.indexingPolicy = this.state.indexingPolicyContent;
+
+      newCollection.changeFeedPolicy =
+        this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
+          ? {
+              retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration,
+            }
+          : undefined;
+
+      newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
+
+      newCollection.geospatialConfig = {
+        type: this.state.geospatialConfigType,
+      };
+
+      const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
+      if (conflictResolutionChanges) {
+        newCollection.conflictResolutionPolicy = conflictResolutionChanges;
+      }
+
+      const updatedCollection: DataModels.Collection = await updateCollection(
+        this.collection.databaseId,
+        this.collection.id(),
+        newCollection
+      );
+      this.collection.rawDataModel = updatedCollection;
+      this.collection.defaultTtl(updatedCollection.defaultTtl);
+      this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
+      this.collection.id(updatedCollection.id);
+      this.collection.indexingPolicy(updatedCollection.indexingPolicy);
+      this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
+      this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
+      this.collection.geospatialConfig(updatedCollection.geospatialConfig);
+
+      if (wasIndexingPolicyModified) {
+        await this.refreshIndexTransformationProgress();
+      }
+
+      this.setState({
+        isSubSettingsSaveable: false,
+        isSubSettingsDiscardable: false,
+        isIndexingPolicyDirty: false,
+        isConflictResolutionDirty: false,
+      });
+    }
+
+    if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
+      try {
+        const newMongoIndexes = this.getMongoIndexesToSave();
+        const newMongoCollection: MongoDBCollectionResource = {
+          ...this.mongoDBCollectionResource,
+          indexes: newMongoIndexes,
+        };
+
+        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
+          this.collection.databaseId,
+          this.collection.id(),
+          newMongoCollection
+        );
+
+        await this.refreshIndexTransformationProgress();
+        this.setState({
+          isMongoIndexingPolicySaveable: false,
+          indexesToDrop: [],
+          indexesToAdd: [],
+          currentMongoIndexes: [...this.mongoDBCollectionResource.indexes],
+        });
+        traceSuccess(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+          },
+          startKey
+        );
+      } catch (error) {
+        traceFailure(
+          Action.MongoIndexUpdated,
+          {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            databaseName: this.collection?.databaseId,
+            collectionName: this.collection?.id(),
+            defaultExperience: this.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Tab,
+            tabTitle: this.props.settingsTab.tabTitle(),
+            error: getErrorMessage(error),
+            errorStack: getErrorStack(error),
+          },
+          startKey
+        );
+        throw error;
+      }
+    }
+
+    if (this.state.isScaleSaveable) {
+      const updateOfferParams: DataModels.UpdateOfferParams = {
+        databaseId: this.collection.databaseId,
+        collectionId: this.collection.id(),
+        currentOffer: this.collection.offer(),
+        autopilotThroughput: this.state.isAutoPilotSelected ? this.state.autoPilotThroughput : undefined,
+        manualThroughput: this.state.isAutoPilotSelected ? undefined : this.state.throughput,
+      };
+      if (this.hasProvisioningTypeChanged()) {
+        if (this.state.isAutoPilotSelected) {
+          updateOfferParams.migrateToAutoPilot = true;
+        } else {
+          updateOfferParams.migrateToManual = true;
+        }
+      }
+      const updatedOffer: DataModels.Offer = await updateOffer(updateOfferParams);
+      this.collection.offer(updatedOffer);
+      this.offer = updatedOffer;
+      this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+      if (this.state.isAutoPilotSelected) {
+        this.setState({
+          autoPilotThroughput: updatedOffer.autoscaleMaxThroughput,
+          autoPilotThroughputBaseline: updatedOffer.autoscaleMaxThroughput,
+        });
+      } else {
+        this.setState({
+          throughput: updatedOffer.manualThroughput,
+          throughputBaseline: updatedOffer.manualThroughput,
+        });
+      }
+    }
+    this.container.isRefreshingExplorer(false);
+    this.setBaseline();
+    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+    traceSuccess(
+      Action.SettingsV2Updated,
+      {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        databaseName: this.collection?.databaseId,
+        collectionName: this.collection?.id(),
+        defaultExperience: this.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Tab,
+        tabTitle: this.props.settingsTab.tabTitle(),
+      },
+      startKey
+    );
+  };
+
  public render(): JSX.Element {
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
+      database: this.database,
      container: this.container,
      isFixedContainer: this.isFixedContainer,
      onThroughputChange: this.onThroughputChange,
@@ -830,6 +907,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      initialNotification: this.props.settingsTab.pendingNotification(),
    };

+    if (!this.isCollectionSettingsTab) {
+      return (
+        <div className="settingsV2MainContainer">
+          <div className="settingsV2TabsContainer">
+            <ScaleComponent {...scaleComponentProps} />
+          </div>
+        </div>
+      );
+    }
+
    const subSettingsComponentProps: SubSettingsComponentProps = {
      collection: this.collection,
      container: this.container,
@@ -899,7 +986,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    };

    const tabs: SettingsV2TabInfo[] = [];
-    if (!hasDatabaseSharedThroughput(this.collection) && this.collection.offer()) {
+    if (!hasDatabaseSharedThroughput(this.collection) && this.offer) {
      tabs.push({
        tab: SettingsV2TabTypes.ScaleTab,
        content: <ScaleComponent {...scaleComponentProps} />,
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -375,7 +375,7 @@ export const getThroughputApplyShortDelayMessage = (
  <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
    A request to increase the throughput is currently in progress. This operation will take some time to complete.
    <br />
-    Database: {databaseName}, Container: {collectionName}{" "}
+    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
    {getCurrentThroughput(isAutoscale, throughput, throughputUnit)}
  </Text>
 );
@@ -392,7 +392,7 @@ export const getThroughputApplyLongDelayMessage = (
    A request to increase the throughput is currently in progress. This operation will take 1-3 business days to
    complete. View the latest status in Notifications.
    <br />
-    Database: {databaseName}, Container: {collectionName}{" "}
+    {collectionName ? `Database: ${databaseName}, Container: ${collectionName} ` : `Database: ${databaseName} `}
    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, requestedThroughput)}
  </Text>
 );
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
@@ -18,6 +18,7 @@ describe("ScaleComponent", () => {

  const baseProps: ScaleComponentProps = {
    collection: collection,
+    database: undefined,
    container: container,
    isFixedContainer: false,
    onThroughputChange: () => {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -21,6 +21,7 @@ import { configContext, Platform } from "../../../../ConfigContext";

 export interface ScaleComponentProps {
  collection: ViewModels.Collection;
+  database: ViewModels.Database;
  container: Explorer;
  isFixedContainer: boolean;
  onThroughputChange: (newThroughput: number) => void;
@@ -39,9 +40,16 @@ export interface ScaleComponentProps {

 export class ScaleComponent extends React.Component<ScaleComponentProps> {
  private isEmulator: boolean;
+  private offer: DataModels.Offer;
+  private databaseId: string;
+  private collectionId: string;
+
  constructor(props: ScaleComponentProps) {
    super(props);
    this.isEmulator = configContext.platform === Platform.Emulator;
+    this.offer = this.props.database?.offer() || this.props.collection?.offer();
+    this.databaseId = this.props.database?.id() || this.props.collection.databaseId;
+    this.collectionId = this.props.collection?.id();
  }

  public isAutoScaleEnabled = (): boolean => {
@@ -87,9 +95,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
    }

-    return (
-      this.props.collection.offer()?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400
-    );
+    return this.offer?.minimumThroughput || SharedConstants.CollectionCreation.DefaultCollectionRUs400;
  };

  public getThroughputTitle = (): string => {
@@ -115,15 +121,14 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      return this.getLongDelayMessage();
    }

-    const offer = this.props.collection?.offer();
-    if (offer?.offerReplacePending) {
-      const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
+    if (this.offer?.offerReplacePending) {
+      const throughput = this.offer.manualThroughput || this.offer.autoscaleMaxThroughput;
      return getThroughputApplyShortDelayMessage(
        this.props.isAutoPilotSelected,
        throughput,
        throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id()
+        this.databaseId,
+        this.collectionId
      );
    }

@@ -135,7 +140,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      this.canThroughputExceedMaximumValue() &&
      this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;

-    if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+    if (throughputExceedsBackendLimits && !this.props.isFixedContainer) {
      return updateThroughputBeyondLimitWarningMessage;
    }

@@ -154,8 +159,8 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
        this.props.wasAutopilotOriginallySet,
        throughput,
        throughputUnit,
-        this.props.collection.databaseId,
-        this.props.collection.id(),
+        this.databaseId,
+        this.collectionId,
        targetThroughput
      );
    }
@@ -165,15 +170,15 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  private getThroughputInputComponent = (): JSX.Element => (
    <ThroughputInputAutoPilotV3Component
      databaseAccount={this.props.container.databaseAccount()}
-      databaseName={this.props.collection.databaseId}
-      collectionName={this.props.collection.id()}
+      databaseName={this.databaseId}
+      collectionName={this.collectionId}
      serverId={this.props.container.serverId()}
      throughput={this.props.throughput}
      throughputBaseline={this.props.throughputBaseline}
      onThroughputChange={this.props.onThroughputChange}
      minimum={this.getMinRUs()}
      maximum={this.getMaxRUs()}
-      isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
+      isEnabled={!!this.props.database || !hasDatabaseSharedThroughput(this.props.collection)}
      canExceedMaximumValue={this.canThroughputExceedMaximumValue()}
      label={this.getThroughputTitle()}
      isEmulator={this.isEmulator}
@@ -189,7 +194,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      onScaleSaveableChange={this.props.onScaleSaveableChange}
      onScaleDiscardableChange={this.props.onScaleDiscardableChange}
      getThroughputWarningMessage={this.getThroughputWarningMessage}
-      usageSizeInKB={this.props.collection.usageSizeInKB()}
+      usageSizeInKB={this.props.collection?.usageSizeInKB()}
    />
  );

@@ -230,7 +235,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
        {!this.isAutoScaleEnabled() && (
          <Stack {...subComponentStackProps}>
            {this.getThroughputInputComponent()}
-            {this.getStorageCapacityTitle()}
+            {!this.props.database && this.getStorageCapacityTitle()}
          </Stack>
        )}

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -40,6 +40,7 @@ import { userContext } from "../../../../../UserContext";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";

 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
@@ -541,6 +542,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        step={AutoPilotUtils.autoPilotIncrementStep}
        value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
        onChange={this.onAutoPilotThroughputChange}
+        min={minAutoPilotThroughput}
      />
      {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
      {this.minRUperGBSurvey()}
@@ -579,6 +581,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
            : this.props.throughput?.toString()
        }
        onChange={this.onThroughputChange}
+        min={this.props.minimum}
      />
      {this.state.exceedFreeTierThroughput && (
        <MessageBar
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -142,6 +142,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    id="autopilotInput"
    key="auto pilot throughput input"
    label="Max RU/s"
+    min={4000}
    onChange={[Function]}
    required={true}
    step={1000}
@@ -260,6 +261,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
      disabled={false}
      id="throughputInput"
      key="provisioned throughput input"
+      min={10000}
      onChange={[Function]}
      required={true}
      step={100}
@@ -533,6 +535,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
      disabled={false}
      id="throughputInput"
      key="provisioned throughput input"
+      min={10000}
      onChange={[Function]}
      required={true}
      step={100}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
@@ -23,11 +23,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
    >
      A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
      <br />
-      Database: 
-      test
-      , Container: 
-      test
-       
+      Database: test, Container: test 
      , Current autoscale throughput: 100 - 1000 RU/s, Target autoscale throughput: 600 - 6000 RU/s
    </Text>
  </StyledMessageBarBase>
--- a/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
@@ -46,6 +46,7 @@ describe("SettingsUtils", () => {
        readSettings: undefined,
        onSettingsClick: undefined,
        loadOffer: undefined,
+        getPendingThroughputSplitNotification: undefined,
      } as ViewModels.Database;
    };
    newCollection.offer(undefined);
--- a/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
@@ -256,11 +256,7 @@ exports[`SettingsUtils functions render 1`] = `
  >
    A request to increase the throughput is currently in progress. This operation will take some time to complete.
    <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
    , Current manual throughput: 1000 RU/s
  </Text>
  <Text
@@ -275,11 +271,7 @@ exports[`SettingsUtils functions render 1`] = `
  >
    A request to increase the throughput is currently in progress. This operation will take 1-3 business days to complete. View the latest status in Notifications.
    <br />
-    Database: 
-    sampleDb
-    , Container: 
-    sampleCollection
-     
+    Database: sampleDb, Container: sampleCollection 
    , Current manual throughput: 1000 RU/s, Target manual throughput: 2000
  </Text>
  <Text