{"size": 2705, "ext": "js", "max_stars_repo_path": "ui/src/router/components/form/components/outcome_config/bigquery/BigQueryConfigPanel.js", "max_stars_repo_name": "LeonLnj/turing", "max_stars_repo_stars_event_min_datetime": "2021-12-26T09:04:13.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-26T09:04:13.000Z", "max_issues_repo_path": "ui/src/router/components/form/components/outcome_config/bigquery/BigQueryConfigPanel.js", "max_issues_repo_name": "LeonLnj/turing", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "ui/src/router/components/form/components/outcome_config/bigquery/BigQueryConfigPanel.js", "max_forks_repo_name": "LeonLnj/turing", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.091954023, "max_line_length": 124, "alphanum_fraction": 0.5519408503}
import React, { useContext } from "react";
import { Panel } from "../../Panel";
import {
  EuiFieldText,
  EuiForm,
  EuiFormRow,
  EuiLink,
  EuiSpacer,
  EuiText,
} from "@elastic/eui";
import SecretsContext from "../../../../../../providers/secrets/context";
import { FormLabelWithToolTip } from "../../../../../../components/form/label_with_tooltip/FormLabelWithToolTip";
import { useOnChangeHandler } from "../../../../../../components/form/hooks/useOnChangeHandler";
import { ServiceAccountComboBox } from "../../../../../../components/form/service_account_combo_box/ServiceAccountComboBox";

export const BigQueryConfigPanel = ({
  projectId,
  bigQueryConfig,
  onChangeHandler,
  errors = {},
}) => {
  const secrets = useContext(SecretsContext);

  const { onChange } = useOnChangeHandler(onChangeHandler);

  return (
    <Panel title="BigQuery Configuration">
      <EuiSpacer size="m" />
      <EuiForm>
        <EuiFormRow
          fullWidth
          label={
            <FormLabelWithToolTip
              label="BigQuery Table *"
              content="Specify a BQ table, that will be used for storing request/response logs"
            />
          }
          isInvalid={!!errors.table}
          error={errors.table}
          display="row">
          <EuiFieldText
            fullWidth
            placeholder="project_name.dataset.table"
            value={bigQueryConfig.table || ""}
            onChange={(e) => onChange("table")(e.target.value)}
            isInvalid={!!errors.table}
            name="bigQuery-table"
          />
        </EuiFormRow>

        <EuiSpacer size="m" />

        <EuiFormRow
          fullWidth
          label="Service Account *"
          helpText={
            <EuiText size="s">
              <p>
                Choose a service account that has a write access to the
                configured BQ table.
                <br />
                You can add a new service account at Project's{" "}
                <EuiLink
                  href={`/projects/${projectId}/settings/secrets-management`}
                  target="_blank"
                  external>
                  Secrets Management
                </EuiLink>{" "}
                page.
              </p>
            </EuiText>
          }
          isInvalid={!!errors.service_account_secret}
          error={errors.service_account_secret}>
          <ServiceAccountComboBox
            fullwidth
            value={bigQueryConfig.service_account_secret}
            secrets={secrets}
            onChange={onChange("service_account_secret")}
            isInvalid={!!errors.service_account_secret}
          />
        </EuiFormRow>
      </EuiForm>
    </Panel>
  );
};
