Initial Move from Azure DevOps to GitHub

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts

@@ -0,0 +1,222 @@
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import editable from "../../../Common/EditableUtility";
+import { ThroughputInputComponent, ThroughputInputParams, ThroughputInputViewModel } from "./ThroughputInputComponent";
+
+const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
+
+describe.skip("Throughput Input Component", () => {
+  let component: any;
+  let vm: ThroughputInputViewModel;
+  const testId: string = "ThroughputValue";
+  const value: ViewModels.Editable<number> = editable.observable(500);
+  const minimum: ko.Observable<number> = ko.observable(400);
+  const maximum: ko.Observable<number> = ko.observable(2000);
+
+  function buildListOptions(
+    value: ViewModels.Editable<number>,
+    minimum: ko.Observable<number>,
+    maxium: ko.Observable<number>,
+    canExceedMaximumValue?: boolean
+  ): ThroughputInputParams {
+    return {
+      testId,
+      value,
+      minimum,
+      maximum,
+      canExceedMaximumValue: ko.computed<boolean>(() => Boolean(canExceedMaximumValue)),
+      costsVisible: ko.observable(false),
+      isFixed: false,
+      label: ko.observable("Label"),
+      requestUnitsUsageCost: ko.observable("requestUnitsUsageCost"),
+      showAsMandatory: false,
+      autoPilotTiersList: null,
+      autoPilotUsageCost: null,
+      isAutoPilotSelected: null,
+      selectedAutoPilotTier: null,
+      throughputAutoPilotRadioId: null,
+      throughputProvisionedRadioId: null,
+      throughputModeRadioName: null
+    };
+  }
+
+  function simulateKeyPressSpace(target: HTMLElement): Promise<boolean> {
+    const event = new KeyboardEvent("keydown", {
+      key: "space"
+    });
+
+    const result = target.dispatchEvent(event);
+
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(result);
+      }, 1000);
+    });
+  }
+
+  beforeEach(() => {
+    component = ThroughputInputComponent;
+    document.body.innerHTML = component.template as any;
+  });
+
+  afterEach(async () => {
+    await ko.cleanNode(document);
+  });
+
+  describe("Rendering", () => {
+    it("should display value text", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      expect(($("input") as HTMLInputElement).value).toContain(value().toString());
+    });
+  });
+
+  describe("Behavior", () => {
+    it("should decrease value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(450);
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(400);
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(400);
+    });
+
+    it("should increase value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(1950);
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(2000);
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(2000);
+    });
+
+    it("should respect lower bound limits", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(minimum());
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(minimum());
+    });
+
+    it("should respect upper bound limits", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(maximum());
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(maximum());
+    });
+
+    it("should allow throughput to exceed upper bound limit when canExceedMaximumValue is set", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      value(maximum());
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(maximum() + 100);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it.skip("should decrease value with keypress", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      const target = $(".testhook-decreaseThroughput");
+
+      value(500);
+      expect(value()).toBe(500);
+
+      const result = await simulateKeyPressSpace(target);
+      expect(value()).toBe(400);
+    });
+
+    it.skip("should increase value with keypress", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      const target = $(".test-increaseThroughput");
+
+      value(400);
+      expect(value()).toBe(400);
+
+      const result = await simulateKeyPressSpace(target);
+      //    expect(value()).toBe(500);
+    });
+
+    it("should set the decreaseButtonAriaLabel using the default step value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 100");
+    });
+
+    it("should set the increaseButtonAriaLabel using the default step value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 100");
+    });
+
+    it("should set the increaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 10");
+    });
+
+    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 10");
+    });
+
+    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+    });
+
+    it("should have aria-label attribute on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const ariaLabel = $(".test-increaseThroughput").attributes.getNamedItem("aria-label").value;
+      expect(ariaLabel).toBe("Increase throughput by 100");
+    });
+
+    it("should have aria-label attribute on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const ariaLabel = $(".testhook-decreaseThroughput").attributes.getNamedItem("aria-label").value;
+      expect(ariaLabel).toBe("Decrease throughput by 100");
+    });
+
+    it("should have role on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".test-increaseThroughput").attributes.getNamedItem("role").value;
+      expect(role).toBe("button");
+    });
+
+    it("should have role on decrease button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("role").value;
+      expect(role).toBe("button");
+    });
+
+    it("should have tabindex 0 on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
+      expect(role).toBe("0");
+    });
+
+    it("should have tabindex 0 on decrease button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
+      expect(role).toBe("0");
+    });
+  });
+});

src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.html

@@ -0,0 +1,145 @@
+<div>
+  <div>
+    <p class="pkPadding">
+      <!-- ko if: showAsMandatory -->
+      <span class="mandatoryStar">*</span>
+      <!-- /ko -->
+
+      <span class="addCollectionLabel" data-bind="text: label"></span>
+
+      <!-- ko if: infoBubbleText -->
+      <span class="infoTooltip" role="tooltip" tabindex="0">
+        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
+        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
+      </span>
+      <!-- /ko -->
+    </p>
+  </div>
+
+  <!-- ko if: !isFixed -->
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
+    <input
+      class="throughputModeRadio"
+      aria-label="Autopilot mode"
+      data-test="throughput-autoPilot"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+      checked: isAutoPilotSelected,
+      checkedValue: true,
+      attr: {
+        id: throughputAutoPilotRadioId,
+        name: throughputModeRadioName,
+        'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
+      }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+      attr: {
+        for: throughputAutoPilotRadioId
+      }"
+      >Autopilot (preview)
+    </span>
+
+    <input
+      class="throughputModeRadio nonFirstRadio"
+      aria-label="Provisioned Throughput mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+      checked: isAutoPilotSelected,
+      checkedValue: false,
+      attr: {
+        id:  throughputProvisionedRadioId,
+        name: throughputModeRadioName,
+        'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
+      }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+      attr: {
+        for: throughputProvisionedRadioId
+      }"
+      >Manual
+    </span>
+  </div>
+  <!-- /ko -->
+
+  <div data-bind="visible: isAutoPilotSelected">
+    <select
+      name="autoPilotTiers"
+      class="collid select-font-size"
+      aria-label="Autopilot Max RU/s"
+      data-bind="
+          options: autoPilotTiersList,
+          optionsText: 'text',
+          optionsValue: 'value',
+          value: selectedAutoPilotTier,
+          optionsCaption: 'Choose Max RU/s'"
+    >
+    </select>
+    <p>
+      <span
+        data-bind="
+        html: autoPilotUsageCost,
+        visible: selectedAutoPilotTier"
+      >
+      </span>
+    </p>
+  </div>
+
+  <div data-bind="visible: !isAutoPilotSelected()">
+    <div data-bind="setTemplateReady: true">
+      <p class="addContainerThroughputInput">
+        <input
+          type="number"
+          required
+          data-bind="
+          textInput: value,
+          css: {
+              dirty: value.editableIsDirty
+          },
+          enable: isEnabled,
+          attr:{
+              'data-test': testId,
+              'class': cssClass,
+              step: step,
+              min: minimum,
+              max: canExceedMaximumValue() ? null : maximum,
+              'aria-label': ariaLabel
+          }"
+        />
+      </p>
+    </div>
+
+    <p data-bind="visible: costsVisible">
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+        attr: {
+          title: spendAckText,
+          id: spendAckId
+        },
+        checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>
+      Choose unlimited storage capacity for more than 10,000 RU/s.
+    </p>
+    <!-- /ko -->
+  </div>
+</div>

src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts

@@ -0,0 +1,261 @@
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { KeyCodes } from "../../../Common/Constants";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+import ThroughputInputComponentTemplate from "./ThroughputInputComponent.html";
+
+/**
+ * Throughput Input:
+ *
+ * Creates a set of controls to input, sanitize and increase/decrease throughput
+ *
+ * How to use in your markup:
+ * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
+ * </throughput-input>
+ *
+ */
+
+/**
+ * Parameters for this component
+ */
+export interface ThroughputInputParams {
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+
+  /**
+   * Observable to bind the Throughput value to
+   */
+  value: ViewModels.Editable<number>;
+
+  /**
+   * Text to use as id for testing
+   */
+  testId: string;
+
+  /**
+   * Text to use as aria-label
+   */
+  ariaLabel?: ko.Observable<string>;
+
+  /**
+   * Minimum value in the range
+   */
+  minimum: ko.Observable<number>;
+
+  /**
+   * Maximum value in the range
+   */
+  maximum: ko.Observable<number>;
+
+  /**
+   * Step value for increase/decrease
+   */
+  step?: number;
+
+  /**
+   * Observable to bind the Throughput enabled status
+   */
+  isEnabled?: ko.Observable<boolean>;
+
+  /**
+   * Should show pricing controls
+   */
+  costsVisible: ko.Observable<boolean>;
+
+  /**
+   * RU price
+   */
+  requestUnitsUsageCost: ko.Subscribable<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
+
+  /**
+   * State of the spending acknowledge checkbox
+   */
+  spendAckChecked?: ko.Observable<boolean>;
+
+  /**
+   * id of the spending acknowledge checkbox
+   */
+  spendAckId?: ko.Observable<string>;
+
+  /**
+   * spending acknowledge text
+   */
+  spendAckText?: ko.Observable<string>;
+
+  /**
+   * Show spending acknowledge controls
+   */
+  spendAckVisible?: ko.Observable<boolean>;
+
+  /**
+   * Display * to the left of the label
+   */
+  showAsMandatory: boolean;
+
+  /**
+   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
+   */
+  isFixed: boolean;
+
+  /**
+   * Label of the provisioned throughut control
+   */
+  label: ko.Observable<string>;
+
+  /**
+   * Text of the info bubble for provisioned throughut control
+   */
+  infoBubbleText?: ko.Observable<string>;
+
+  /**
+   * Computed value that decides if value can exceed maximum allowable value
+   */
+  canExceedMaximumValue?: ko.Computed<boolean>;
+
+  /**
+   * CSS classes to apply on input element
+   */
+  cssClass?: string;
+
+  isAutoPilotSelected: ko.Observable<boolean>;
+  throughputAutoPilotRadioId: string;
+  throughputProvisionedRadioId: string;
+  throughputModeRadioName: string;
+  autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
+  selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
+  autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
+}
+
+export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
+  public ariaLabel: ko.Observable<string>;
+  public canExceedMaximumValue: ko.Computed<boolean>;
+  public step: number;
+  public testId: string;
+  public value: ViewModels.Editable<number>;
+  public minimum: ko.Observable<number>;
+  public maximum: ko.Observable<number>;
+  public isEnabled: ko.Observable<boolean>;
+  public cssClass: string;
+  public decreaseButtonAriaLabel: string;
+  public increaseButtonAriaLabel: string;
+  public costsVisible: ko.Observable<boolean>;
+  public requestUnitsUsageCost: ko.Subscribable<string>;
+  public spendAckChecked: ko.Observable<boolean>;
+  public spendAckId: ko.Observable<string>;
+  public spendAckText: ko.Observable<string>;
+  public spendAckVisible: ko.Observable<boolean>;
+  public showAsMandatory: boolean;
+  public infoBubbleText: string | ko.Observable<string>;
+  public label: ko.Observable<string>;
+  public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
+  public isAutoPilotSelected: ko.Observable<boolean>;
+  public throughputAutoPilotRadioId: string;
+  public throughputProvisionedRadioId: string;
+  public throughputModeRadioName: string;
+  public autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
+  public selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
+  public autoPilotUsageCost: ko.Computed<string>;
+
+  public constructor(options: ThroughputInputParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && options.onTemplateReady) {
+        options.onTemplateReady();
+      }
+    });
+
+    const params: ThroughputInputParams = options;
+    this.testId = params.testId || "ThroughputValue";
+    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
+    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
+    this.step = params.step || ThroughputInputViewModel._defaultStep;
+    this.isEnabled = params.isEnabled || ko.observable(true);
+    this.cssClass = params.cssClass || "textfontclr collid";
+    this.minimum = params.minimum;
+    this.maximum = params.maximum;
+    this.value = params.value;
+    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step.toString();
+    this.increaseButtonAriaLabel = "Increase throughput by " + this.step.toString();
+    this.costsVisible = options.costsVisible;
+    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
+    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
+    this.spendAckId = options.spendAckId || ko.observable<string>();
+    this.spendAckText = options.spendAckText || ko.observable<string>();
+    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
+    this.showAsMandatory = !!options.showAsMandatory;
+    this.isFixed = !!options.isFixed;
+    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
+    this.label = options.label || ko.observable<string>();
+    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
+    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
+    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
+    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
+    this.throughputModeRadioName = options.throughputModeRadioName;
+    this.autoPilotTiersList = options.autoPilotTiersList;
+    this.selectedAutoPilotTier = options.selectedAutoPilotTier;
+    this.autoPilotUsageCost = options.autoPilotUsageCost;
+  }
+
+  public decreaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput > this.minimum()) {
+      offerThroughput -= this.step;
+      if (offerThroughput < this.minimum()) {
+        offerThroughput = this.minimum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public increaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
+      offerThroughput += this.step;
+      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
+        offerThroughput = this.maximum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.increaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.decreaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  private _getSanitizedValue(): number {
+    const throughput = this.value();
+    return isNaN(throughput) ? 0 : Number(throughput);
+  }
+
+  private static _defaultStep: number = 100;
+}
+
+export const ThroughputInputComponent = {
+  viewModel: ThroughputInputViewModel,
+  template: ThroughputInputComponentTemplate
+};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -0,0 +1,279 @@
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutoscaleV3.html";
+import { KeyCodes } from "../../../Common/Constants";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+
+/**
+ * Throughput Input:
+ *
+ * Creates a set of controls to input, sanitize and increase/decrease throughput
+ *
+ * How to use in your markup:
+ * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
+ * </throughput-input>
+ *
+ */
+
+/**
+ * Parameters for this component
+ */
+export interface ThroughputInputParams {
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+
+  /**
+   * Observable to bind the Throughput value to
+   */
+  value: ViewModels.Editable<number>;
+
+  /**
+   * Text to use as id for testing
+   */
+  testId: string;
+
+  /**
+   * Text to use as aria-label
+   */
+  ariaLabel?: ko.Observable<string>;
+
+  /**
+   * Minimum value in the range
+   */
+  minimum: ko.Observable<number>;
+
+  /**
+   * Maximum value in the range
+   */
+  maximum: ko.Observable<number>;
+
+  /**
+   * Step value for increase/decrease
+   */
+  step?: number;
+
+  /**
+   * Observable to bind the Throughput enabled status
+   */
+  isEnabled?: ko.Observable<boolean>;
+
+  /**
+   * Should show pricing controls
+   */
+  costsVisible: ko.Observable<boolean>;
+
+  /**
+   * RU price
+   */
+  requestUnitsUsageCost: ko.Computed<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
+
+  /**
+   * State of the spending acknowledge checkbox
+   */
+  spendAckChecked?: ko.Observable<boolean>;
+
+  /**
+   * id of the spending acknowledge checkbox
+   */
+  spendAckId?: ko.Observable<string>;
+
+  /**
+   * spending acknowledge text
+   */
+  spendAckText?: ko.Observable<string>;
+
+  /**
+   * Show spending acknowledge controls
+   */
+  spendAckVisible?: ko.Observable<boolean>;
+
+  /**
+   * Display * to the left of the label
+   */
+  showAsMandatory: boolean;
+
+  /**
+   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
+   */
+  isFixed: boolean;
+
+  /**
+   * Label of the provisioned throughut control
+   */
+  label: ko.Observable<string>;
+
+  /**
+   * Text of the info bubble for provisioned throughut control
+   */
+  infoBubbleText?: ko.Observable<string>;
+
+  /**
+   * Computed value that decides if value can exceed maximum allowable value
+   */
+  canExceedMaximumValue?: ko.Computed<boolean>;
+
+  /**
+   * CSS classes to apply on input element
+   */
+  cssClass?: string;
+
+  isAutoPilotSelected: ko.Observable<boolean>;
+  throughputAutoPilotRadioId: string;
+  throughputProvisionedRadioId: string;
+  throughputModeRadioName: string;
+  maxAutoPilotThroughputSet: ViewModels.Editable<number>;
+  autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
+  overrideWithAutoPilotSettings: ko.Observable<boolean>;
+  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
+}
+
+export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
+  public ariaLabel: ko.Observable<string>;
+  public canExceedMaximumValue: ko.Computed<boolean>;
+  public step: ko.Computed<number>;
+  public testId: string;
+  public value: ViewModels.Editable<number>;
+  public minimum: ko.Observable<number>;
+  public maximum: ko.Observable<number>;
+  public isEnabled: ko.Observable<boolean>;
+  public cssClass: string;
+  public decreaseButtonAriaLabel: string;
+  public increaseButtonAriaLabel: string;
+  public costsVisible: ko.Observable<boolean>;
+  public requestUnitsUsageCost: ko.Computed<string>;
+  public spendAckChecked: ko.Observable<boolean>;
+  public spendAckId: ko.Observable<string>;
+  public spendAckText: ko.Observable<string>;
+  public spendAckVisible: ko.Observable<boolean>;
+  public showAsMandatory: boolean;
+  public infoBubbleText: string | ko.Observable<string>;
+  public label: ko.Observable<string>;
+  public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
+  public isAutoPilotSelected: ko.Observable<boolean>;
+  public throughputAutoPilotRadioId: string;
+  public throughputProvisionedRadioId: string;
+  public throughputModeRadioName: string;
+  public maxAutoPilotThroughputSet: ko.Observable<number>;
+  public autoPilotUsageCost: ko.Computed<string>;
+  public minAutoPilotThroughput: ko.Observable<number>;
+  public overrideWithAutoPilotSettings: ko.Observable<boolean>;
+  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
+
+  public constructor(options: ThroughputInputParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && options.onTemplateReady) {
+        options.onTemplateReady();
+      }
+    });
+
+    const params: ThroughputInputParams = options;
+    this.testId = params.testId || "ThroughputValue";
+    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
+    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
+    this.isEnabled = params.isEnabled || ko.observable(true);
+    this.cssClass = params.cssClass || "textfontclr collid migration";
+    this.minimum = params.minimum;
+    this.maximum = params.maximum;
+    this.value = params.value;
+    this.costsVisible = options.costsVisible;
+    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
+    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
+    this.spendAckId = options.spendAckId || ko.observable<string>();
+    this.spendAckText = options.spendAckText || ko.observable<string>();
+    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
+    this.showAsMandatory = !!options.showAsMandatory;
+    this.isFixed = !!options.isFixed;
+    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
+    this.label = options.label || ko.observable<string>();
+    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
+    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
+    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
+    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
+    this.throughputModeRadioName = options.throughputModeRadioName;
+    this.overrideWithAutoPilotSettings = options.overrideWithAutoPilotSettings || ko.observable<boolean>(false);
+    this.overrideWithProvisionedThroughputSettings =
+      options.overrideWithProvisionedThroughputSettings || ko.observable<boolean>(false);
+
+    this.maxAutoPilotThroughputSet =
+      options.maxAutoPilotThroughputSet || ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
+    this.autoPilotUsageCost = options.autoPilotUsageCost;
+    this.minAutoPilotThroughput = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
+
+    this.step = ko.pureComputed(() => {
+      if (this.isAutoPilotSelected()) {
+        return AutoPilotUtils.autoPilotIncrementStep;
+      }
+      return params.step || ThroughputInputViewModel._defaultStep;
+    });
+    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step().toString();
+    this.increaseButtonAriaLabel = "Increase throughput by " + this.step().toString();
+  }
+
+  public decreaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput > this.minimum()) {
+      offerThroughput -= this.step();
+      if (offerThroughput < this.minimum()) {
+        offerThroughput = this.minimum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public increaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
+      offerThroughput += this.step();
+      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
+        offerThroughput = this.maximum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.increaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.decreaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  private _getSanitizedValue(): number {
+    let throughput = this.value();
+
+    if (this.isAutoPilotSelected()) {
+      throughput = this.maxAutoPilotThroughputSet();
+    }
+    return isNaN(throughput) ? 0 : Number(throughput);
+  }
+
+  private static _defaultStep: number = 100;
+}
+
+export const ThroughputInputComponentAutoPilotV3 = {
+  viewModel: ThroughputInputViewModel,
+  template: ThroughputInputComponentAutoscaleV3
+};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -0,0 +1,164 @@
+<div>
+  <div>
+    <p class="pkPadding">
+      <!-- ko if: showAsMandatory -->
+      <span class="mandatoryStar">*</span>
+      <!-- /ko -->
+
+      <span data-bind="text: label"></span>
+
+      <!-- ko if: infoBubbleText -->
+      <span class="infoTooltip" role="tooltip" tabindex="0">
+        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
+        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
+      </span>
+      <!-- /ko -->
+    </p>
+  </div>
+
+  <!-- ko if: !isFixed -->
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
+    <input
+      class="throughputModeRadio"
+      aria-label="Autopilot mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: true,
+          attr: {
+            id: throughputAutoPilotRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+          attr: {
+            for: throughputAutoPilotRadioId
+          }"
+      >Autoscale
+    </span>
+
+    <input
+      class="throughputModeRadio nonFirstRadio"
+      aria-label="Provisioned Throughput mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: false,
+          attr: {
+            id:  throughputProvisionedRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="attr: {
+          for: throughputProvisionedRadioId
+        }"
+      >Manual
+    </span>
+  </div>
+  <!-- /ko -->
+
+  <div data-bind="visible: isAutoPilotSelected">
+    <p>
+      <span
+        >Provision maximum RU/s required by this resource. Estimate your required RU/s with
+        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a>.</span
+      >
+    </p>
+    <p>
+      <span>Max RU/s</span>
+    </p>
+    <input
+      type="number"
+      data-bind="textInput: overrideWithProvisionedThroughputSettings() ? '' : maxAutoPilotThroughputSet, attr:{disabled: overrideWithProvisionedThroughputSettings(), step: step, 'class':'migration collid select-font-size', min: minAutoPilotThroughput, css: {
+          dirty: maxAutoPilotThroughputSet.editableIsDirty
+      }}"
+    />
+    <p data-bind="visible: overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()">
+      <span
+        data-bind="
+              html: autoPilotUsageCost"
+      ></span>
+    </p>
+    <p
+      data-bind="visible: costsVisible && overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()"
+    >
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+            attr: {
+              title: spendAckText,
+              id: spendAckId
+            },
+            checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+  </div>
+
+  <div data-bind="visible: !isAutoPilotSelected()">
+    <div data-bind="setTemplateReady: true">
+      <p class="addContainerThroughputInput">
+        <input
+          type="number"
+          required
+          data-bind="
+            textInput: overrideWithAutoPilotSettings() ? maxAutoPilotThroughputSet : value,
+            css: {
+                dirty: value.editableIsDirty
+            },
+            enable: isEnabled,
+            attr:{
+                'data-test': testId,
+                'class': cssClass,
+                step: step,
+                min: minimum,
+                max: canExceedMaximumValue() ? null : maximum,
+                'aria-label': ariaLabel,
+                disabled: overrideWithAutoPilotSettings()
+            }"
+        />
+      </p>
+    </div>
+
+    <p data-bind="visible: costsVisible">
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+        attr: {
+          title: spendAckText,
+          id: spendAckId
+        },
+        checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
+    <!-- /ko -->
+  </div>
+</div>