Update ThroughputInput.less

less/TableStyles/fulldatatables.less

@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {
 
 .context-menu-item.icon-customize-columns {
     background-image: url(../../images/Options.svg);
-}
+}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -24,8 +24,6 @@ import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/Pricing
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   AutoscaleEstimatedSpendingDisplayProps,
-  ManualEstimatedSpendingDisplayProps,
-  PriceBreakdown,
   checkBoxAndInputStackProps,
   getAutoPilotV3SpendElement,
   getChoiceGroupStyles,
@@ -33,14 +31,16 @@ import {
   getRuPriceBreakdown,
   getTextFieldStyles,
   getToolTipContainer,
+  ManualEstimatedSpendingDisplayProps,
   manualToAutoscaleDisclaimerElement,
   messageBarStyles,
   noLeftPaddingCheckBoxStyle,
+  PriceBreakdown,
   saveThroughputWarningMessage,
   titleAndInputStackProps,
   transparentDetailsHeaderStyle,
 } from "../../SettingsRenderUtils";
-import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 
 export interface ThroughputInputAutoPilotV3Props {
@@ -218,7 +218,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const estimatedSpendingColumns: IColumn[] = [
       {
         key: "costType",
-        name: "Cost Type",
+        name: "",
         fieldName: "costType",
         minWidth: 100,
         maxWidth: 200,
@@ -312,7 +312,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const estimatedSpendingColumns: IColumn[] = [
       {
         key: "costType",
-        name: "Cost type",
+        name: "",
         fieldName: "costType",
         minWidth: 100,
         maxWidth: 200,

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -311,7 +311,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
               "key": "costType",
               "maxWidth": 200,
               "minWidth": 100,
-              "name": "Cost type",
+              "name": "",
               "styles": Object {
                 "root": Object {
                   "selectors": Object {
@@ -586,7 +586,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
               "key": "costType",
               "maxWidth": 200,
               "minWidth": 100,
-              "name": "Cost type",
+              "name": "",
               "styles": Object {
                 "root": Object {
                   "selectors": Object {

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -14,3 +14,7 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
+.capacitycalculator-link:focus{
+  text-decoration: underline;
+  outline-offset: 2px;
+}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -226,6 +226,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"
+              className="capacitycalculator-link"
             >
               capacity calculator
             </Link>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -714,11 +714,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
+              className="capacitycalculator-link"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
+                className="capacitycalculator-link"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -998,7 +1000,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-60"
+                  className="ms-Link capacitycalculator-link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"