// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 10,
    }
  }
>
  <StyledMessageBar
    messageBarIconProps={
      {
        "className": "messageBarWarningIcon",
        "iconName": "WarningSolid",
      }
    }
    role="alert"
    styles={
      {
        "root": {
          "marginTop": "5px",
          "selectors": {
            "&.ms-MessageBar--info": {
              "backgroundColor": "var(--colorNeutralBackground3)",
              "border": "1px solid var(--colorNeutralStroke1)",
            },
            "&.ms-MessageBar--severeWarning": {
              "backgroundColor": "var(--colorStatusDangerBackground1)",
              "border": "1px solid var(--colorStatusDangerBorder1)",
            },
            "&.ms-MessageBar--warning": {
              "backgroundColor": "var(--colorStatusWarningBackground1)",
              "border": "1px solid var(--colorStatusWarningBorder1)",
            },
            ".ms-MessageBar-icon": {
              "color": "var(--colorNeutralForeground1)",
            },
            ".ms-MessageBar-text": {
              "color": "var(--colorNeutralForeground1)",
            },
          },
        },
      }
    }
  >
    <Text>
      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
    </Text>
  </StyledMessageBar>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
    >
      <ToolTipLabelComponent
        label="label"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            infoBubbleText
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledMessageBar
      messageBarIconProps={
        {
          "className": "messageBarInfoIcon",
          "iconName": "InfoSolid",
        }
      }
      styles={
        {
          "root": {
            "marginTop": "5px",
            "selectors": {
              "&.ms-MessageBar--info": {
                "backgroundColor": "var(--colorNeutralBackground3)",
                "border": "1px solid var(--colorNeutralStroke1)",
              },
              "&.ms-MessageBar--severeWarning": {
                "backgroundColor": "var(--colorStatusDangerBackground1)",
                "border": "1px solid var(--colorStatusDangerBorder1)",
              },
              "&.ms-MessageBar--warning": {
                "backgroundColor": "var(--colorStatusWarningBackground1)",
                "border": "1px solid var(--colorStatusWarningBorder1)",
              },
              ".ms-MessageBar-icon": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-MessageBar-text": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    >
      <Text
        id="manualToAutoscaleDisclaimerElement"
        styles={
          {
            "root": {
              "color": "var(--colorNeutralForeground1)",
              "fontSize": 14,
            },
          }
        }
      >
        The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
         
        <StyledLinkBase
          href="https://aka.ms/cosmos-autoscale-migration"
        >
          Learn more
        </StyledLinkBase>
      </Text>
    </StyledMessageBar>
    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
        [
          {
            "key": "true",
            "text": "Autoscale",
          },
          {
            "key": "false",
            "text": "Manual",
          },
        ]
      }
      required={true}
      selectedKey="true"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "30px",
              "display": "inline-flex",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": undefined,
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    horizontal={true}
  >
    <StackItem
      style={
        {
          "maxWidth": "700px",
          "width": "70%",
        }
      }
    >
      <Stack
        style={
          {
            "paddingRight": "50px",
          }
        }
        tokens={
          {
            "childrenGap": 20,
          }
        }
      >
        <Stack
          horizontal={true}
          tokens={
            {
              "childrenGap": 8,
            }
          }
          verticalAlign="end"
        >
          <Stack
            tokens={
              {
                "childrenGap": 4,
              }
            }
          >
            <Stack
              horizontal={true}
              tokens={
                {
                  "childrenGap": 4,
                }
              }
              verticalAlign="center"
            >
              <Text
                style={
                  {
                    "color": "var(--colorNeutralForeground1)",
                    "fontWeight": 600,
                    "lineHeight": "20px",
                  }
                }
                variant="small"
              >
                Minimum RU/s
              </Text>
              <FontIcon
                iconName="Info"
                style={
                  {
                    "color": "var(--colorNeutralForeground2)",
                    "fontSize": 12,
                  }
                }
              />
            </Stack>
            <Text
              style={
                {
                  "alignItems": "center",
                  "backgroundColor": "transparent",
                  "border": "none",
                  "boxSizing": "border-box",
                  "color": "var(--colorNeutralForeground1)",
                  "display": "flex",
                  "fontFamily": "Segoe UI",
                  "fontSize": 14,
                  "fontWeight": 400,
                  "height": 28,
                  "justifyContent": "center",
                  "width": 70,
                }
              }
            >
              400
            </Text>
          </Stack>
          <Text
            style={
              {
                "color": "var(--colorNeutralForeground1)",
                "fontFamily": "Segoe UI",
                "fontSize": 12,
                "fontWeight": 400,
                "paddingBottom": 6,
              }
            }
          >
            x 10 =
          </Text>
          <Stack
            tokens={
              {
                "childrenGap": 4,
              }
            }
          >
            <Stack
              horizontal={true}
              tokens={
                {
                  "childrenGap": 4,
                }
              }
              verticalAlign="center"
            >
              <Text
                style={
                  {
                    "color": "var(--colorNeutralForeground1)",
                    "fontWeight": 600,
                    "lineHeight": "20px",
                  }
                }
                variant="small"
              >
                Maximum RU/s
              </Text>
              <FontIcon
                iconName="Info"
                style={
                  {
                    "color": "var(--colorNeutralForeground2)",
                    "fontSize": 12,
                  }
                }
              />
            </Stack>
            <StyledTextFieldBase
              data-test="autopilot-throughput-input"
              disabled={true}
              id="autopilotInput"
              key="auto pilot throughput input"
              min={1000}
              onChange={[Function]}
              onGetErrorMessage={[Function]}
              required={true}
              step={1000}
              styles={
                {
                  "field": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 14,
                    "fontWeight": 400,
                  },
                  "fieldGroup": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "height": 28,
                    "width": 100,
                  },
                  "root": {
                    "selectors": {
                      "input": {
                        "backgroundColor": "var(--colorNeutralBackground4)",
                        "color": "var(--colorNeutralForeground1)",
                      },
                    },
                  },
                  "subComponentStyles": {
                    "label": {
                      "root": {
                        "color": "var(--colorNeutralForeground1)",
                      },
                    },
                  },
                  "suffix": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "border": "1px solid var(--colorNeutralStroke1)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                }
              }
              type="number"
              validateOnLoad={false}
              value=""
            />
          </Stack>
        </Stack>
        <Stack>
          <Stack>
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "width": "34%",
                  }
                }
              >
                <span>
                  10,000
                </span>
              </StackItem>
              <StackItem
                style={
                  {
                    "width": "66%",
                  }
                }
              >
                <span
                  style={
                    {
                      "float": "left",
                      "transform": "translateX(-50%)",
                    }
                  }
                >
                  5,000
                </span>
                <span
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
                <span
                  data-test="soft-allowed-maximum-throughput"
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
              </StackItem>
            </Stack>
            <StyledProgressIndicatorBase
              barHeight={20}
              percentComplete={0}
              styles={
                {
                  "progressBar": [
                    {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                    },
                  ],
                }
              }
            />
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "paddingRight": "5px",
                    "width": "34%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  Instant
                </Separator>
              </StackItem>
              <StackItem
                style={
                  {
                    "paddingLeft": "5px",
                    "width": "66%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  4-6 hrs
                </Separator>
              </StackItem>
            </Stack>
          </Stack>
          <StyledMessageBar
            messageBarType={3}
            styles={
              {
                "root": {
                  "marginTop": "5px",
                  "selectors": {
                    "&.ms-MessageBar--info": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                      "border": "1px solid var(--colorNeutralStroke1)",
                    },
                    "&.ms-MessageBar--severeWarning": {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                      "border": "1px solid var(--colorStatusDangerBorder1)",
                    },
                    "&.ms-MessageBar--warning": {
                      "backgroundColor": "var(--colorStatusWarningBackground1)",
                      "border": "1px solid var(--colorStatusWarningBorder1)",
                    },
                    ".ms-MessageBar-icon": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                    ".ms-MessageBar-text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  },
                },
              }
            }
          >
            <Text
              styles={
                {
                  "root": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 14,
                  },
                }
              }
            >
              You are not able to lower throughput below your current minimum of 
              10000
               RU/s. For more information on this limit, please refer to our service quote documentation.
              <StyledLinkBase
                href="https://learn.microsoft.com/en-us/azure/cosmos-db/concepts-limits#minimum-throughput-limits"
                target="_blank"
              >
                Learn more
              </StyledLinkBase>
            </Text>
          </StyledMessageBar>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "marginTop": "40px",
            }
          }
        >
          Based on usage, your 
          container
           throughput will scale from
           
          <b>
            400
             RU/s (10% of max RU/s) -
             
            4000
             RU/s
          </b>
          <br />
        </Text>
        <StackItem
          style={
            {
              "marginTop": "40px",
            }
          }
        >
          <Stack
            tokens={
              {
                "childrenGap": 5,
              }
            }
          >
            <StyledLabelBase
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Storage capacity
            </StyledLabelBase>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Unlimited
            </Text>
          </Stack>
        </StackItem>
      </Stack>
    </StackItem>
    <StackItem
      style={
        {
          "maxWidth": "300px",
          "width": "30%",
        }
      }
    >
      <Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
            }
          }
        >
          Cost estimate*
        </Text>
        <Stack
          style={
            {
              "marginTop": 15,
            }
          }
          tokens={
            {
              "childrenGap": 10,
            }
          }
        >
          <div>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "fontWeight": 600,
                }
              }
            >
              Updated cost per month
            </Text>
            <Stack
              horizontal={true}
              style={
                {
                  "marginBottom": 10,
                  "marginTop": 5,
                }
              }
            >
              <Text
                style={
                  {
                    "color": "var(--colorNeutralForeground1)",
                    "width": "50%",
                  }
                }
              >
                $
                 
                35.04
                 min
              </Text>
              <Text
                style={
                  {
                    "color": "var(--colorNeutralForeground1)",
                    "width": "50%",
                  }
                }
              >
                $
                 
                350.40
                 max
              </Text>
            </Stack>
          </div>
          <Text
            style={
              {
                "color": "var(--colorNeutralForeground1)",
                "fontWeight": 600,
              }
            }
          >
            Current cost per month
          </Text>
          <Stack
            horizontal={true}
            style={
              {
                "color": "var(--colorNeutralForeground1)",
                "marginTop": 5,
              }
            }
          >
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "50%",
                }
              }
            >
              $
               
              35.04
               min
            </Text>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "50%",
                }
              }
            >
              $
               
              350.40
               max
            </Text>
          </Stack>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
              "marginTop": 15,
            }
          }
        >
          How we calculate this
        </Text>
        <Stack
          id="throughputSpendElement"
          style={
            {
              "marginTop": 5,
            }
          }
        >
          <span>
            1
             region
          </span>
          <span>
            400 RU/s - 
            4000
             RU/s
          </span>
          <span>
            $
            0.00012
            /RU
          </span>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "marginTop": 15,
            }
          }
        >
          <em>
            *
            This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
          </em>
        </Text>
      </Stack>
    </StackItem>
  </Stack>
</Stack>
`;

exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 10,
    }
  }
>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
    >
      <ToolTipLabelComponent
        label="label"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            infoBubbleText
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
        [
          {
            "key": "true",
            "text": "Autoscale",
          },
          {
            "key": "false",
            "text": "Manual",
          },
        ]
      }
      required={true}
      selectedKey="false"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "30px",
              "display": "inline-flex",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    horizontal={true}
  >
    <StackItem
      style={
        {
          "maxWidth": "700px",
          "width": "70%",
        }
      }
    >
      <Stack
        style={
          {
            "paddingRight": "50px",
          }
        }
        tokens={
          {
            "childrenGap": 20,
          }
        }
      >
        <StyledTextFieldBase
          data-test="manual-throughput-input"
          disabled={false}
          id="throughputInput"
          key="provisioned throughput input"
          min={10000}
          onChange={[Function]}
          onGetErrorMessage={[Function]}
          required={true}
          step={100}
          styles={
            {
              "field": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
                "selectors": {
                  ":disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                },
              },
              "fieldGroup": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "height": 25,
                "selectors": {
                  ":disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "borderColor": "var(--colorNeutralStroke1)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input#autopilotInput": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input:disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                },
                "width": 300,
              },
              "subComponentStyles": {
                "label": {
                  "root": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
              "suffix": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "border": "1px solid var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
              },
            }
          }
          type="number"
          value="100"
        />
        <Stack>
          <Stack>
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "width": "34%",
                  }
                }
              >
                <span>
                  10,000
                </span>
              </StackItem>
              <StackItem
                style={
                  {
                    "width": "66%",
                  }
                }
              >
                <span
                  style={
                    {
                      "float": "left",
                      "transform": "translateX(-50%)",
                    }
                  }
                >
                  5,000
                </span>
                <span
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
                <span
                  data-test="soft-allowed-maximum-throughput"
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
              </StackItem>
            </Stack>
            <StyledProgressIndicatorBase
              barHeight={20}
              percentComplete={0}
              styles={
                {
                  "progressBar": [
                    {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                    },
                  ],
                }
              }
            />
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "paddingRight": "5px",
                    "width": "34%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  Instant
                </Separator>
              </StackItem>
              <StackItem
                style={
                  {
                    "paddingLeft": "5px",
                    "width": "66%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  4-6 hrs
                </Separator>
              </StackItem>
            </Stack>
          </Stack>
          <StyledMessageBar
            messageBarType={3}
            styles={
              {
                "root": {
                  "marginTop": "5px",
                  "selectors": {
                    "&.ms-MessageBar--info": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                      "border": "1px solid var(--colorNeutralStroke1)",
                    },
                    "&.ms-MessageBar--severeWarning": {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                      "border": "1px solid var(--colorStatusDangerBorder1)",
                    },
                    "&.ms-MessageBar--warning": {
                      "backgroundColor": "var(--colorStatusWarningBackground1)",
                      "border": "1px solid var(--colorStatusWarningBorder1)",
                    },
                    ".ms-MessageBar-icon": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                    ".ms-MessageBar-text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  },
                },
              }
            }
          >
            <Text
              styles={
                {
                  "root": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 14,
                  },
                }
              }
            >
              You are not able to lower throughput below your current minimum of 
              10000
               RU/s. For more information on this limit, please refer to our service quote documentation.
              <StyledLinkBase
                href="https://learn.microsoft.com/en-us/azure/cosmos-db/concepts-limits#minimum-throughput-limits"
                target="_blank"
              >
                Learn more
              </StyledLinkBase>
            </Text>
          </StyledMessageBar>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
            }
          }
        >
          Estimate your required RU/s with
          <StyledLinkBase
            href="https://cosmos.azure.com/capacitycalculator/"
            target="_blank"
          >
             capacity calculator
             
            <FontIcon
              iconName="NavigateExternalInline"
            />
          </StyledLinkBase>
        </Text>
        <StyledCheckboxBase
          checked={false}
          id="spendAckCheckBox"
          label="spendAckText"
          onChange={[Function]}
          styles={
            {
              "label": {
                "margin": 0,
                "padding": "2 0 2 0",
              },
              "text": {
                "fontSize": 12,
              },
            }
          }
        />
        <StackItem
          style={
            {
              "marginTop": "40px",
            }
          }
        >
          <Stack
            tokens={
              {
                "childrenGap": 5,
              }
            }
          >
            <StyledLabelBase
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Storage capacity
            </StyledLabelBase>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Unlimited
            </Text>
          </Stack>
        </StackItem>
      </Stack>
    </StackItem>
    <StackItem
      style={
        {
          "maxWidth": "300px",
          "width": "30%",
        }
      }
    >
      <Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
            }
          }
        >
          Cost estimate*
        </Text>
        <Stack
          style={
            {
              "marginTop": 15,
            }
          }
          tokens={
            {
              "childrenGap": 10,
            }
          }
        >
          <Text
            style={
              {
                "color": "var(--colorNeutralForeground1)",
                "fontWeight": 600,
              }
            }
          >
            Current cost per month
          </Text>
          <Stack
            horizontal={true}
            style={
              {
                "marginTop": 5,
              }
            }
          >
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              0.0080
              /hr
            </Text>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              0.19
              /day
            </Text>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              5.84
              /mo
            </Text>
          </Stack>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
              "marginTop": 15,
            }
          }
        >
          How we calculate this
        </Text>
        <Stack
          id="throughputSpendElement"
          style={
            {
              "marginTop": 5,
            }
          }
        >
          <span>
            1
             region
          </span>
          <span>
            100
             RU/s
          </span>
          <span>
            $
            0.00008
            /RU
          </span>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "marginTop": 15,
            }
          }
        >
          <em>
            *
            This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
          </em>
        </Text>
      </Stack>
    </StackItem>
  </Stack>
</Stack>
`;

exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
<Stack
  tokens={
    {
      "childrenGap": 10,
    }
  }
>
  <Stack>
    <StyledLabelBase
      id="settingsV2RadioButtonLabelId"
    >
      <ToolTipLabelComponent
        label="label"
        toolTipElement={
          <Text
            styles={
              {
                "root": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 14,
                },
              }
            }
          >
            infoBubbleText
          </Text>
        }
      />
    </StyledLabelBase>
    <StyledChoiceGroup
      ariaLabelledBy="settingsV2RadioButtonLabelId"
      onChange={[Function]}
      options={
        [
          {
            "key": "true",
            "text": "Autoscale",
          },
          {
            "key": "false",
            "text": "Manual",
          },
        ]
      }
      required={true}
      selectedKey="false"
      styles={
        {
          "flexContainer": [
            {
              "columnGap": "30px",
              "display": "inline-flex",
              "selectors": {
                ".ms-ChoiceField-field.is-checked::after": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field.is-checked::before": {
                  "borderColor": "",
                },
                ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceField-wrapper label": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontFamily": undefined,
                  "fontSize": 14,
                  "padding": "2px 5px",
                  "whiteSpace": "nowrap",
                },
                ".ms-ChoiceFieldLabel": {
                  "color": "var(--colorNeutralForeground1)",
                },
                ".ms-ChoiceFieldLabel:hover": {
                  "color": "var(--colorNeutralForeground1)",
                },
              },
            },
          ],
          "label": {
            "color": "var(--colorNeutralForeground1)",
          },
          "root": {
            "selectors": {
              ".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
              ".ms-ChoiceFieldLabel": {
                "color": "var(--colorNeutralForeground1)",
              },
            },
          },
        }
      }
    />
  </Stack>
  <Stack
    horizontal={true}
  >
    <StackItem
      style={
        {
          "maxWidth": "700px",
          "width": "70%",
        }
      }
    >
      <Stack
        style={
          {
            "paddingRight": "50px",
          }
        }
        tokens={
          {
            "childrenGap": 20,
          }
        }
      >
        <StyledTextFieldBase
          data-test="manual-throughput-input"
          disabled={false}
          id="throughputInput"
          key="provisioned throughput input"
          min={10000}
          onChange={[Function]}
          onGetErrorMessage={[Function]}
          required={true}
          step={100}
          styles={
            {
              "field": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "color": "var(--colorNeutralForeground1)",
                "selectors": {
                  ":disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                },
              },
              "fieldGroup": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "height": 25,
                "selectors": {
                  ":disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "borderColor": "var(--colorNeutralStroke1)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input#autopilotInput": {
                    "backgroundColor": "var(--colorNeutralBackground4)",
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input:disabled": {
                    "backgroundColor": "var(--colorNeutralBackground2)",
                    "color": "var(--colorNeutralForeground2)",
                  },
                },
                "width": 300,
              },
              "subComponentStyles": {
                "label": {
                  "root": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                },
              },
              "suffix": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "border": "1px solid var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
              },
            }
          }
          type="number"
          value="100"
        />
        <Stack>
          <Stack>
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "width": "34%",
                  }
                }
              >
                <span>
                  10,000
                </span>
              </StackItem>
              <StackItem
                style={
                  {
                    "width": "66%",
                  }
                }
              >
                <span
                  style={
                    {
                      "float": "left",
                      "transform": "translateX(-50%)",
                    }
                  }
                >
                  5,000
                </span>
                <span
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
                <span
                  data-test="soft-allowed-maximum-throughput"
                  style={
                    {
                      "float": "right",
                    }
                  }
                >
                  1,000,000
                </span>
              </StackItem>
            </Stack>
            <StyledProgressIndicatorBase
              barHeight={20}
              percentComplete={0}
              styles={
                {
                  "progressBar": [
                    {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                    },
                  ],
                }
              }
            />
            <Stack
              horizontal={true}
            >
              <StackItem
                style={
                  {
                    "paddingRight": "5px",
                    "width": "34%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  Instant
                </Separator>
              </StackItem>
              <StackItem
                style={
                  {
                    "paddingLeft": "5px",
                    "width": "66%",
                  }
                }
              >
                <Separator
                  styles={
                    {
                      "root": [
                        {
                          "selectors": {
                            "::before": {
                              "backgroundColor": "var(--colorNeutralStroke2)",
                              "height": "3px",
                              "marginTop": "-1px",
                            },
                          },
                        },
                      ],
                    }
                  }
                >
                  4-6 hrs
                </Separator>
              </StackItem>
            </Stack>
          </Stack>
          <StyledMessageBar
            messageBarType={3}
            styles={
              {
                "root": {
                  "marginTop": "5px",
                  "selectors": {
                    "&.ms-MessageBar--info": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                      "border": "1px solid var(--colorNeutralStroke1)",
                    },
                    "&.ms-MessageBar--severeWarning": {
                      "backgroundColor": "var(--colorStatusDangerBackground1)",
                      "border": "1px solid var(--colorStatusDangerBorder1)",
                    },
                    "&.ms-MessageBar--warning": {
                      "backgroundColor": "var(--colorStatusWarningBackground1)",
                      "border": "1px solid var(--colorStatusWarningBorder1)",
                    },
                    ".ms-MessageBar-icon": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                    ".ms-MessageBar-text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  },
                },
              }
            }
          >
            <Text
              styles={
                {
                  "root": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 14,
                  },
                }
              }
            >
              You are not able to lower throughput below your current minimum of 
              10000
               RU/s. For more information on this limit, please refer to our service quote documentation.
              <StyledLinkBase
                href="https://learn.microsoft.com/en-us/azure/cosmos-db/concepts-limits#minimum-throughput-limits"
                target="_blank"
              >
                Learn more
              </StyledLinkBase>
            </Text>
          </StyledMessageBar>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
            }
          }
        >
          Estimate your required RU/s with
          <StyledLinkBase
            href="https://cosmos.azure.com/capacitycalculator/"
            target="_blank"
          >
             capacity calculator
             
            <FontIcon
              iconName="NavigateExternalInline"
            />
          </StyledLinkBase>
        </Text>
        <StackItem
          style={
            {
              "marginTop": "40px",
            }
          }
        >
          <Stack
            tokens={
              {
                "childrenGap": 5,
              }
            }
          >
            <StyledLabelBase
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Storage capacity
            </StyledLabelBase>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                }
              }
            >
              Unlimited
            </Text>
          </Stack>
        </StackItem>
      </Stack>
    </StackItem>
    <StackItem
      style={
        {
          "maxWidth": "300px",
          "width": "30%",
        }
      }
    >
      <Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
            }
          }
        >
          Cost estimate*
        </Text>
        <Stack
          style={
            {
              "marginTop": 15,
            }
          }
          tokens={
            {
              "childrenGap": 10,
            }
          }
        >
          <Text
            style={
              {
                "color": "var(--colorNeutralForeground1)",
                "fontWeight": 600,
              }
            }
          >
            Current cost per month
          </Text>
          <Stack
            horizontal={true}
            style={
              {
                "marginTop": 5,
              }
            }
          >
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              0.0080
              /hr
            </Text>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              0.19
              /day
            </Text>
            <Text
              style={
                {
                  "color": "var(--colorNeutralForeground1)",
                  "width": "33%",
                }
              }
            >
              $
               
              5.84
              /mo
            </Text>
          </Stack>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "fontWeight": 600,
              "marginTop": 15,
            }
          }
        >
          How we calculate this
        </Text>
        <Stack
          id="throughputSpendElement"
          style={
            {
              "marginTop": 5,
            }
          }
        >
          <span>
            1
             region
          </span>
          <span>
            100
             RU/s
          </span>
          <span>
            $
            0.00008
            /RU
          </span>
        </Stack>
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
              "marginTop": 15,
            }
          }
        >
          <em>
            *
            This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
          </em>
        </Text>
      </Stack>
    </StackItem>
  </Stack>
</Stack>
`;
