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

exports[`AddCollectionPanel should render Default properly 1`] = `
<form
  className="panelFormWrapper"
  id="panelContainer"
  onSubmit={[Function]}
>
  <div
    className="panelMainContent"
  >
    <Stack
      hidden={false}
      style={
        {
          "marginBottom": -2,
        }
      }
    >
      <Stack
        horizontal={true}
      >
        <span
          className="mandatoryStar"
        >
          * 
        </span>
        <Text
          className="panelTextBold"
          variant="small"
        >
          Database 
          id
        </Text>
        <StyledTooltipHostBase
          content="A database is analogous to a namespace. It is the unit of management for a set of containers."
          directionalHint={4}
        >
          <Icon
            ariaLabel="A database is analogous to a namespace. It is the unit of management for a set of containers."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
      </Stack>
      <Stack
        horizontal={true}
        verticalAlign="center"
      >
        <div
          role="radiogroup"
        >
          <input
            aria-checked={true}
            aria-label="Create new database"
            checked={true}
            className="panelRadioBtn"
            id="databaseCreateNew"
            name="databaseType"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
            type="radio"
          />
          <span
            className="panelRadioBtnLabel"
          >
            Create new
          </span>
          <input
            aria-checked={false}
            aria-label="Use existing database"
            checked={false}
            className="panelRadioBtn"
            name="databaseType"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
            type="radio"
          />
          <span
            className="panelRadioBtnLabel"
          >
            Use existing
          </span>
        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
      >
        <input
          aria-label="New database id, Type a new database id"
          aria-required={true}
          autoComplete="off"
          className="panelTextField"
          id="newDatabaseId"
          name="newDatabaseId"
          onChange={[Function]}
          pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
          placeholder="Type a new database id"
          required={true}
          size={40}
          tabIndex={0}
          title="May not end with space nor contain characters '\\' '/' '#' '?'"
          type="text"
          value=""
        />
        <Stack
          horizontal={true}
        >
          <StyledCheckboxBase
            checked={false}
            label="Share throughput across containers"
            onChange={[Function]}
            styles={
              {
                "checkbox": {
                  "height": 12,
                  "width": 12,
                },
                "label": {
                  "alignItems": "center",
                  "padding": 0,
                },
                "root": {
                  "selectors": {
                    ":hover .ms-Checkbox-text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  },
                },
                "text": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 12,
                },
              }
            }
          />
          <StyledTooltipHostBase
            content="Throughput configured at the database level will be shared across all containers within the database."
            directionalHint={4}
          >
            <Icon
              ariaLabel="Throughput configured at the database level will be shared across all containers within the database."
              className="panelInfoIcon"
              iconName="Info"
              tabIndex={0}
            />
          </StyledTooltipHostBase>
        </Stack>
      </Stack>
      <Separator
        className="panelSeparator"
        style={
          {
            "marginBottom": -4,
            "marginTop": -4,
          }
        }
      />
    </Stack>
    <Stack>
      <Stack
        horizontal={true}
        style={
          {
            "marginBottom": 1,
            "marginTop": -5,
          }
        }
      >
        <span
          className="mandatoryStar"
        >
          * 
        </span>
        <Text
          className="panelTextBold"
          variant="small"
        >
          Container id
        </Text>
        <StyledTooltipHostBase
          content="Unique identifier for the container and used for id-based routing through REST and all SDKs."
          directionalHint={4}
        >
          <Icon
            ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
            className="panelInfoIcon"
            iconName="Info"
            role="button"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
      </Stack>
      <input
        aria-label="Container id, Example Container1"
        aria-required={true}
        autoComplete="off"
        className="panelTextField"
        id="collectionId"
        name="collectionId"
        onChange={[Function]}
        pattern="[^\\/?#\\\\]*[^\\/?# \\\\]"
        placeholder="e.g., Container1"
        required={true}
        size={40}
        title="May not end with space nor contain characters '\\' '/' '#' '?'"
        type="text"
        value=""
      />
      <Separator
        className="panelSeparator"
        style={
          {
            "marginBottom": -5,
            "marginTop": -5,
          }
        }
      />
    </Stack>
    <Stack>
      <Stack
        horizontal={true}
        style={
          {
            "marginBottom": -4,
            "marginTop": -5,
          }
        }
      >
        <span
          className="mandatoryStar"
        >
          * 
        </span>
        <Text
          className="panelTextBold"
          variant="small"
        >
          Partition key
        </Text>
        <StyledTooltipHostBase
          content="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
          directionalHint={4}
        >
          <Icon
            ariaLabel="The partition key is used to automatically distribute data across partitions for scalability. Choose a property in your JSON document that has a wide range of values and evenly distributes request volume. For small read-heavy workloads or write-heavy workloads of any size, id is often a good choice."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
      </Stack>
      <Text
        variant="small"
      />
      <input
        aria-label="Partition key"
        aria-required={true}
        className="panelTextField"
        id="addCollection-partitionKeyValue"
        onChange={[Function]}
        pattern=".*"
        placeholder="Required - first partition key e.g., /TenantId"
        required={true}
        size={40}
        title=""
        type="text"
        value=""
      />
      <Stack
        className="panelGroupSpacing"
      >
        <CustomizedDefaultButton
          disabled={false}
          hidden={false}
          onClick={[Function]}
          styles={
            {
              "label": {
                "fontSize": 12,
              },
              "root": {
                "backgroundColor": "var(--colorNeutralBackground2)",
                "borderColor": "var(--colorNeutralStroke1)",
                "color": "var(--colorNeutralForeground1)",
                "height": 30,
                "padding": 0,
                "width": 200,
              },
              "rootHovered": {
                "backgroundColor": "var(--colorNeutralBackground3)",
                "color": "var(--colorNeutralForeground1)",
              },
              "rootPressed": {
                "backgroundColor": "var(--colorBrandBackgroundPressed)",
                "color": "var(--colorNeutralForegroundOnBrand)",
              },
            }
          }
        >
          Add hierarchical partition key
        </CustomizedDefaultButton>
      </Stack>
      <Separator
        className="panelSeparator"
        style={
          {
            "marginBottom": -4,
            "marginTop": 2,
          }
        }
      />
    </Stack>
    <ThroughputInput
      isDatabase={false}
      isSharded={true}
      onCostAcknowledgeChange={[Function]}
      setIsAutoscale={[Function]}
      setIsThroughputCapExceeded={[Function]}
      setThroughputValue={[Function]}
    />
    <Stack
      style={
        {
          "marginBottom": -4,
          "marginTop": -2,
        }
      }
    >
      <Stack
        horizontal={true}
        style={
          {
            "marginBottom": -2,
          }
        }
      >
        <Text
          className="panelTextBold"
          variant="small"
        >
          Unique keys
        </Text>
        <StyledTooltipHostBase
          content="Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
          directionalHint={4}
        >
          <Icon
            ariaLabel="Unique keys provide developers with the ability to add a layer of data integrity to their database. By creating a unique key policy when a container is created, you ensure the uniqueness of one or more values per partition key."
            className="panelInfoIcon"
            iconName="Info"
            tabIndex={0}
          />
        </StyledTooltipHostBase>
      </Stack>
      <CustomizedActionButton
        iconProps={
          {
            "iconName": "Add",
          }
        }
        onClick={[Function]}
        styles={
          {
            "label": {
              "color": "var(--colorNeutralForeground1)",
              "fontSize": 12,
            },
            "root": {
              "padding": 0,
            },
          }
        }
      >
        Add unique key
      </CustomizedActionButton>
    </Stack>
    <Separator
      className="panelSeparator"
      style={
        {
          "marginBottom": -4,
          "marginTop": -15,
        }
      }
    />
    <Stack
      className="panelGroupSpacing"
      style={
        {
          "marginTop": -4,
        }
      }
    >
      <Text
        className="panelTextBold"
        variant="small"
      >
        <Stack
          horizontal={true}
          style={
            {
              "marginBottom": -2,
            }
          }
        >
          <Text
            className="panelTextBold"
            variant="small"
          >
            Analytical Store
          </Text>
          <StyledTooltipHostBase
            content="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
            directionalHint={4}
          >
            <Icon
              ariaLabel="Enable analytical store capability to perform near real-time analytics on your operational data, without impacting the performance of transactional workloads."
              className="panelInfoIcon"
              iconName="Info"
              tabIndex={0}
            />
          </StyledTooltipHostBase>
        </Stack>
      </Text>
      <Stack
        horizontal={true}
        verticalAlign="center"
      >
        <div
          role="radiogroup"
        >
          <input
            aria-checked={false}
            aria-label="Enable analytical store"
            checked={false}
            className="panelRadioBtn"
            disabled={true}
            id="enableAnalyticalStoreBtn"
            name="analyticalStore"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
            type="radio"
          />
          <span
            className="panelRadioBtnLabel"
          >
            On
          </span>
          <input
            aria-checked={true}
            aria-label="Disable analytical store"
            checked={true}
            className="panelRadioBtn"
            disabled={true}
            id="disableAnalyticalStoreBtn"
            name="analyticalStore"
            onChange={[Function]}
            role="radio"
            tabIndex={0}
            type="radio"
          />
          <span
            className="panelRadioBtnLabel"
          >
            Off
          </span>
        </div>
      </Stack>
      <Stack
        className="panelGroupSpacing"
      >
        <Text
          style={
            {
              "color": "var(--colorNeutralForeground1)",
            }
          }
          variant="small"
        >
          Azure Synapse Link is required for creating an analytical store
           
          container
          . Enable Synapse Link for this Cosmos DB account. 
          <br />
          <StyledLinkBase
            aria-label="Learn more about Azure Synapse Link."
            className="capacitycalculator-link"
            href="https://aka.ms/cosmosdb-synapselink"
            target="_blank"
          >
            Learn more
          </StyledLinkBase>
        </Text>
        <CustomizedDefaultButton
          onClick={[Function]}
          style={
            {
              "height": 27,
              "width": 80,
            }
          }
          styles={
            {
              "label": {
                "fontSize": 12,
              },
            }
          }
          text="Enable"
        />
      </Stack>
    </Stack>
    <Stack>
      <CollapsibleSectionComponent
        isExpandedByDefault={false}
        onExpand={[Function]}
        title="Container Full Text Search Policy"
      >
        <Stack
          id="collapsibleFullTextPolicySectionContent"
          styles={
            {
              "root": {
                "position": "relative",
              },
            }
          }
        >
          <Stack
            styles={
              {
                "root": {
                  "paddingLeft": 40,
                },
              }
            }
          >
            <FullTextPoliciesComponent
              englishOnly={true}
              fullTextPolicy={
                {
                  "defaultLanguage": "en-US",
                  "fullTextPaths": [],
                }
              }
              onFullTextPathChange={[Function]}
            />
          </Stack>
        </Stack>
      </CollapsibleSectionComponent>
    </Stack>
    <CollapsibleSectionComponent
      isExpandedByDefault={false}
      onExpand={[Function]}
      title="Advanced"
    >
      <Stack
        className="panelGroupSpacing"
        id="collapsibleAdvancedSectionContent"
      >
        <Stack
          className="panelGroupSpacing"
        >
          <StyledCheckboxBase
            checked={false}
            label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
            onChange={[Function]}
            styles={
              {
                "checkbox": {
                  "height": 12,
                  "width": 12,
                },
                "label": {
                  "alignItems": "center",
                  "padding": 0,
                  "whiteSpace": "break-spaces",
                  "wordWrap": "break-word",
                },
                "root": {
                  "selectors": {
                    ":hover .ms-Checkbox-text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  },
                },
                "text": {
                  "color": "var(--colorNeutralForeground1)",
                  "fontSize": 12,
                },
              }
            }
          />
          <Text
            style={
              {
                "color": "var(--colorNeutralForeground1)",
              }
            }
            variant="small"
          >
            <Icon
              className="removeIcon"
              iconName="InfoSolid"
            />
             To ensure compatibility with older SDKs, the created container will use a legacy partitioning scheme that supports partition key values of size only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.
             
            <StyledLinkBase
              href="https://aka.ms/cosmos-large-pk"
              target="_blank"
            >
              Learn more
            </StyledLinkBase>
          </Text>
        </Stack>
      </Stack>
    </CollapsibleSectionComponent>
  </div>
  <PanelFooterComponent
    buttonLabel="OK"
    isButtonDisabled={false}
  />
</form>
`;
