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

exports[`Settings Pane should render Default properly 1`] = `
<RightPaneForm
  formError=""
  isExecuting={false}
  onSubmit={[Function]}
  submitButtonText="Apply"
>
  <div
    className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
  >
    <Accordion
      className="customAccordion ___1uf6361_0000000 fz7g6wx"
      collapsible={true}
    >
      <AccordionItem
        value="1"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Page Options
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
            </div>
            <StyledChoiceGroup
              ariaLabelledBy="pageOptions"
              onChange={[Function]}
              options={
                [
                  {
                    "key": "custom",
                    "text": "Custom",
                  },
                  {
                    "key": "unlimited",
                    "text": "Unlimited",
                  },
                ]
              }
              selectedKey="custom"
              styles={
                {
                  "flexContainer": [
                    {
                      "selectors": {
                        ".ms-ChoiceField": {
                          "color": "inherit",
                          "marginTop": 0,
                        },
                        ".ms-ChoiceField-field": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover span": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-labelWrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-labelWrapper:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-wrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-wrapper label": {
                          "color": "inherit",
                          "fontSize": 12,
                          "paddingTop": 0,
                        },
                        ".ms-ChoiceField-wrapper:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceFieldGroup root-133": {
                          "clear": "both",
                        },
                      },
                    },
                  ],
                  "root": {
                    "clear": "both",
                  },
                }
              }
            />
          </div>
          <div
            className="tabs ___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="tabcontent"
            >
              <div
                className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
              >
                Query results per page
                 
                <InfoTooltip
                  className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
                >
                  Enter the number of query results that should be shown per page.
                </InfoTooltip>
              </div>
              <StyledSpinButton
                ariaLabel="Custom query items per page"
                className="textfontclr"
                decrementButtonAriaLabel="Decrease value by 1"
                incrementButtonAriaLabel="Increase value by 1"
                min={1}
                onDecrement={[Function]}
                onIncrement={[Function]}
                onValidate={[Function]}
                step={1}
                styles={
                  {
                    "arrowButtonsContainer": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                    },
                    "icon": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                    "input": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                      "color": "var(--colorNeutralForeground1)",
                      "selectors": {
                        "&:focus": {
                          "backgroundColor": "var(--colorNeutralBackground3)",
                          "borderColor": "var(--colorBrandStroke1)",
                        },
                        "::placeholder": {
                          "color": "var(--colorNeutralForeground2)",
                        },
                      },
                    },
                    "label": {
                      "color": "var(--colorNeutralForeground1)",
                      "fontSize": 12,
                      "fontWeight": 400,
                    },
                    "labelWrapper": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                    "root": {
                      "paddingBottom": 10,
                    },
                    "spinButtonWrapper": {
                      "backgroundColor": "var(--colorNeutralBackground3)",
                      "borderColor": "var(--colorNeutralStroke1)",
                    },
                  }
                }
                value="0"
              />
            </div>
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="4"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Query Timeout
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              When a query reaches a specified time limit, a popup with an option to cancel the query will show unless automatic cancellation has been enabled.
            </div>
            <StyledToggleBase
              defaultChecked={false}
              label="Enable query timeout"
              onChange={[Function]}
              styles={
                {
                  "container": {},
                  "label": {
                    "color": "inherit",
                    "display": "block",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "pill": {},
                  "root": {},
                  "text": {},
                  "thumb": {},
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="5"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            RU Limit
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              If a query exceeds a configured RU limit, the query will be aborted.
            </div>
            <StyledToggleBase
              defaultChecked={true}
              label="Enable RU limit"
              onChange={[Function]}
              styles={
                {
                  "container": {},
                  "label": {
                    "color": "inherit",
                    "display": "block",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "pill": {},
                  "root": {},
                  "text": {},
                  "thumb": {},
                }
              }
            />
          </div>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1000"
              defaultValue="5000"
              incrementButtonAriaLabel="Increase value by 1000"
              label="RU Limit (RU)"
              labelPosition={0}
              min={1}
              onChange={[Function]}
              step={1000}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="6"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Default Query Results View
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Select the default view to use when displaying query results.
            </div>
            <StyledChoiceGroup
              ariaLabelledBy="defaultQueryResultsView"
              onChange={[Function]}
              options={
                [
                  {
                    "key": "vertical",
                    "text": "Vertical",
                  },
                  {
                    "key": "horizontal",
                    "text": "Horizontal",
                  },
                ]
              }
              selectedKey="horizontal"
              styles={
                {
                  "flexContainer": [
                    {
                      "selectors": {
                        ".ms-ChoiceField": {
                          "color": "inherit",
                          "marginTop": 0,
                        },
                        ".ms-ChoiceField-field": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover .ms-ChoiceField-labelWrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-field:hover span": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-labelWrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-labelWrapper:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-wrapper": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceField-wrapper label": {
                          "color": "inherit",
                          "fontSize": 12,
                          "paddingTop": 0,
                        },
                        ".ms-ChoiceField-wrapper:hover": {
                          "color": "inherit",
                        },
                        ".ms-ChoiceFieldGroup root-133": {
                          "clear": "both",
                        },
                      },
                    },
                  ],
                  "root": {
                    "clear": "both",
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="7"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Retry Settings
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Retry policy associated with throttled requests during CosmosDB queries.
            </div>
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Max retry attempts
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Max number of retries to be performed for a request. Default value 9.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1"
              incrementButtonAriaLabel="Increase value by 1"
              labelPosition={0}
              min={1}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="9"
            />
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Fixed retry interval (ms)
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1000"
              incrementButtonAriaLabel="Increase value by 1000"
              labelPosition={0}
              min={1000}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1000}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="0"
            />
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Max wait time (s)
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1"
              incrementButtonAriaLabel="Increase value by 1"
              labelPosition={0}
              min={1}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="30"
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="8"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Enable container pagination
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
            </div>
            <StyledCheckboxBase
              ariaLabel="Enable container pagination"
              checked={false}
              className="padding"
              label="Enable container pagination"
              onChange={[Function]}
              onRenderLabel={[Function]}
              styles={
                {
                  "label": {
                    "padding": 0,
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="9"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Enable cross-partition query
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Send more than one request while executing a query. More than one request is necessary if the query is not scoped to single partition key value.
            </div>
            <StyledCheckboxBase
              ariaLabel="Enable cross partition query"
              checked={false}
              className="padding"
              onChange={[Function]}
              onRenderLabel={[Function]}
              styles={
                {
                  "label": {
                    "padding": 0,
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="10"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Enhanced query control
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Query up to the max degree of parallelism.
              <a
                href="https://learn.microsoft.com/en-us/azure/cosmos-db/nosql/performance-tips-query-sdk?tabs=v3&pivots=programming-language-nodejs#enhanced-query-control"
                rel="noopener noreferrer"
                target="_blank"
              >
                 
                Learn more
                 
              </a>
            </div>
            <StyledCheckboxBase
              ariaLabel="EnableQueryControl"
              checked={false}
              className="padding"
              onChange={[Function]}
              onRenderLabel={[Function]}
              styles={
                {
                  "label": {
                    "padding": 0,
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="10"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Max degree of parallelism
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Gets or sets the number of concurrent operations run client side during parallel query execution. A positive property value limits the number of concurrent operations to the set value. If it is set to less than 0, the system automatically decides the number of concurrent operations to run.
            </div>
            <StyledSpinButton
              ariaLabel="Max degree of parallelism"
              className="textfontclr"
              id="max-degree"
              label="Max degree of parallelism"
              min={-1}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              role="textbox"
              step={1}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="6"
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="15"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Advanced Settings
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <Stack
              horizontal={true}
              tokens={
                {
                  "childrenGap": 4,
                }
              }
              verticalAlign="center"
            >
              <StyledCheckboxBase
                ariaLabel="Ignore partition key on document update"
                checked={false}
                className="padding"
                label="Ignore partition key on document update"
                onChange={[Function]}
                styles={
                  {
                    "checkbox": {
                      "backgroundColor": "var(--colorNeutralBackground2)",
                      "borderColor": "var(--colorNeutralForeground3)",
                    },
                    "label": {
                      "color": "var(--colorNeutralForeground1)",
                      "padding": 0,
                    },
                    "root": {
                      "selectors": {
                        ":hover .ms-Checkbox-label": {
                          "color": "var(--colorNeutralForeground1)",
                        },
                        ":hover .ms-Checkbox-text": {
                          "color": "var(--colorNeutralForeground1)",
                        },
                      },
                    },
                    "text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  }
                }
              />
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                If checked, the partition key value will not be used to locate the document during update operations. Only use this if document updates are failing due to an abnormal partition key.
              </InfoTooltip>
            </Stack>
          </div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart"
      >
        <CustomizedDefaultButton
          onClick={[Function]}
          styles={
            {
              "root": {
                "backgroundColor": "var(--colorBrandBackground)",
                "color": "var(--colorNeutralForegroundOnBrand)",
                "selectors": {
                  ":active": {
                    "backgroundColor": "var(--colorBrandBackgroundPressed)",
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                  ":hover": {
                    "backgroundColor": "var(--colorBrandBackgroundHover)",
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                },
              },
            }
          }
        >
          Clear History
        </CustomizedDefaultButton>
      </div>
    </div>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart ___1evh9ps_0000000 fo7qwa0 f19n0e5"
      >
        <div
          className="settingsSectionLabel"
        >
          Explorer Version
        </div>
        <div />
      </div>
    </div>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart"
      >
        <div
          className="settingsSectionLabel"
        >
          Session ID
        </div>
        <div>
          1234-5678
        </div>
      </div>
    </div>
  </div>
</RightPaneForm>
`;

exports[`Settings Pane should render Gremlin properly 1`] = `
<RightPaneForm
  formError=""
  isExecuting={false}
  onSubmit={[Function]}
  submitButtonText="Apply"
>
  <div
    className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
  >
    <Accordion
      className="customAccordion ___1uf6361_0000000 fz7g6wx"
      collapsible={true}
    >
      <AccordionItem
        value="7"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Retry Settings
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Retry policy associated with throttled requests during CosmosDB queries.
            </div>
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Max retry attempts
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Max number of retries to be performed for a request. Default value 9.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1"
              incrementButtonAriaLabel="Increase value by 1"
              labelPosition={0}
              min={1}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="9"
            />
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Fixed retry interval (ms)
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Fixed retry interval in milliseconds to wait between each retry ignoring the retryAfter returned as part of the response. Default value is 0 milliseconds.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1000"
              incrementButtonAriaLabel="Increase value by 1000"
              labelPosition={0}
              min={1000}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1000}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="0"
            />
            <div>
              <span
                className="___zls1px0_0000000 fq02s40 f1ugzwwg"
              >
                Max wait time (s)
              </span>
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                Max wait time in seconds to wait for a request while the retries are happening. Default value 30 seconds.
              </InfoTooltip>
            </div>
            <StyledSpinButton
              decrementButtonAriaLabel="Decrease value by 1"
              incrementButtonAriaLabel="Increase value by 1"
              labelPosition={0}
              min={1}
              onChange={[Function]}
              onDecrement={[Function]}
              onIncrement={[Function]}
              onValidate={[Function]}
              step={1}
              styles={
                {
                  "arrowButtonsContainer": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                  },
                  "icon": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "input": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "color": "var(--colorNeutralForeground1)",
                    "selectors": {
                      "&:focus": {
                        "backgroundColor": "var(--colorNeutralBackground3)",
                        "borderColor": "var(--colorBrandStroke1)",
                      },
                      "::placeholder": {
                        "color": "var(--colorNeutralForeground2)",
                      },
                    },
                  },
                  "label": {
                    "color": "var(--colorNeutralForeground1)",
                    "fontSize": 12,
                    "fontWeight": 400,
                  },
                  "labelWrapper": {
                    "color": "var(--colorNeutralForeground1)",
                  },
                  "root": {
                    "paddingBottom": 10,
                  },
                  "spinButtonWrapper": {
                    "backgroundColor": "var(--colorNeutralBackground3)",
                    "borderColor": "var(--colorNeutralStroke1)",
                  },
                }
              }
              value="30"
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="8"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Enable container pagination
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Load 50 containers at a time. Currently, containers are not pulled in alphanumeric order.
            </div>
            <StyledCheckboxBase
              ariaLabel="Enable container pagination"
              checked={false}
              className="padding"
              label="Enable container pagination"
              onChange={[Function]}
              onRenderLabel={[Function]}
              styles={
                {
                  "label": {
                    "padding": 0,
                  },
                }
              }
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="12"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Display Gremlin query results as: 
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <div
              className="___10gar1i_0000000 f1fow5ox f1ugzwwg"
            >
              Select Graph to automatically visualize the query results as a Graph or JSON to display the results as JSON.
            </div>
            <StyledChoiceGroup
              aria-label="Graph Auto-visualization"
              onChange={[Function]}
              options={
                [
                  {
                    "key": "false",
                    "text": "Graph",
                  },
                  {
                    "key": "true",
                    "text": "JSON",
                  },
                ]
              }
              selectedKey="false"
            />
          </div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem
        value="15"
      >
        <AccordionHeader>
          <div
            className="___j7dlp70_0000000 fq02s40 f19n0e5"
          >
            Advanced Settings
          </div>
        </AccordionHeader>
        <AccordionPanel>
          <div
            className="___1evh9ps_0000000 fo7qwa0 f19n0e5"
          >
            <Stack
              horizontal={true}
              tokens={
                {
                  "childrenGap": 4,
                }
              }
              verticalAlign="center"
            >
              <StyledCheckboxBase
                ariaLabel="Ignore partition key on document update"
                checked={false}
                className="padding"
                label="Ignore partition key on document update"
                onChange={[Function]}
                styles={
                  {
                    "checkbox": {
                      "backgroundColor": "var(--colorNeutralBackground2)",
                      "borderColor": "var(--colorNeutralForeground3)",
                    },
                    "label": {
                      "color": "var(--colorNeutralForeground1)",
                      "padding": 0,
                    },
                    "root": {
                      "selectors": {
                        ":hover .ms-Checkbox-label": {
                          "color": "var(--colorNeutralForeground1)",
                        },
                        ":hover .ms-Checkbox-text": {
                          "color": "var(--colorNeutralForeground1)",
                        },
                      },
                    },
                    "text": {
                      "color": "var(--colorNeutralForeground1)",
                    },
                  }
                }
              />
              <InfoTooltip
                className="___vtc5hy0_0000000 f10ra9hq f1k6fduh"
              >
                If checked, the partition key value will not be used to locate the document during update operations. Only use this if document updates are failing due to an abnormal partition key.
              </InfoTooltip>
            </Stack>
          </div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart"
      >
        <CustomizedDefaultButton
          onClick={[Function]}
          styles={
            {
              "root": {
                "backgroundColor": "var(--colorBrandBackground)",
                "color": "var(--colorNeutralForegroundOnBrand)",
                "selectors": {
                  ":active": {
                    "backgroundColor": "var(--colorBrandBackgroundPressed)",
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                  ":hover": {
                    "backgroundColor": "var(--colorBrandBackgroundHover)",
                    "color": "var(--colorNeutralForegroundOnBrand)",
                  },
                },
              },
            }
          }
        >
          Clear History
        </CustomizedDefaultButton>
      </div>
    </div>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart ___1evh9ps_0000000 fo7qwa0 f19n0e5"
      >
        <div
          className="settingsSectionLabel"
        >
          Explorer Version
        </div>
        <div />
      </div>
    </div>
    <div
      className="settingsSection"
    >
      <div
        className="settingsSectionPart"
      >
        <div
          className="settingsSectionLabel"
        >
          Session ID
        </div>
        <div>
          1234-5678
        </div>
      </div>
    </div>
  </div>
</RightPaneForm>
`;
