<commit_before>// Node modules.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
// Relative imports.
import recordEvent from 'platform/monitoring/record-event';
import resourcesSettings from '../manifest.json';
import searchSettings from 'applications/search/manifest.json';

export default function SearchBar({
  onInputChange,
  onSearch,
  useDefaultFormSearch,
  userInput,
}) {
  const [isGlobalSearch, setGlobalSearch] = useState(false);
  const [expanded, setExpanded] = useState(false);

  const disabled = userInput.length < 3;

  const onSubmit = event => {
    // Track All VA.gov search.
    if (isGlobalSearch) {
      recordEvent({
        event: 'view_search_results',
        'search-page-path': document.location.pathname,
        'search-query': userInput,
        'search-results-total-count': undefined,
        'search-results-total-pages': undefined,
        'search-selection': 'All VA.gov',
        'search-typeahead-enabled': false,
        'type-ahead-option-keyword-selected': undefined,
        'type-ahead-option-position': undefined,
        'type-ahead-options-list': undefined,
      });
    }

    // Escape early if we are not on the search page to let the form submit manually.
    if (useDefaultFormSearch) {
      return;
    }

    event.preventDefault();
    if (!disabled) {
      onSearch();
    }
  };

  return (
    <div className="vads-u-border-bottom--0 medium-screen:vads-u-border-top--2px vads-u-border-color--gray-light vads-u-padding-y--3 vads-u-padding-x--1">
      {/* Mobile expand/collapse */}
      <button
        className={`${
          expanded ? 'va-border-bottom-radius--0 ' : ''
        }vads-u-width--full vads-u-display--flex vads-u-margin--0 vads-u-padding-x--2 vads-u-justify-content--space-between vads-u-padding-y--2 vads-u-color--primary-darker vads-u-background-color--gray-lightest medium-screen:vads-u-display--none`}
        onClick={() => setExpanded(!expanded)}
        type="button"
      >
        Search resources and support
        <i
          className={`${
            expanded ? 'vads-u-display--none ' : ''
          }fa fa-sliders-h vads-u-font-size--base vads-u-color--primary-darker`}
          id="sliders-icon"
          aria-hidden="true"
        />
        <i
          className={`${
            expanded ? '' : 'vads-u-display--none '
          }fa fa-times vads-u-font-size--base vads-u-color--primary-darker`}
          id="times-icon"
          aria-hidden="true"
        />
      </button>
      {/* Search form */}
      <form
        data-testid="resources-support-search"
        className={`${
          expanded ? 'va-border-bottom-radius--5px ' : 'vads-u-display--none '
        }vads-u-flex-direction--column vads-u-background-color--gray-lightest vads-u-margin--0 vads-u-padding--2 vads-u-border-top--1px vads-u-border-color--gray-light medium-screen:vads-u-padding-x--0 medium-screen:vads-u-border-top--0 medium-screen-va-background-color--white medium-screen:vads-u-display--flex`}
        id="resources-support-search"
        method="get"
        action={
          isGlobalSearch
            ? `${searchSettings.rootUrl}/`
            : `${resourcesSettings.rootUrl}/`
        }
        onSubmit={isGlobalSearch ? null : onSubmit}
      >
        <fieldset className="fieldset-input vads-u-margin--0">
          <legend className="vads-u-font-size--md vads-u-font-family--serif">
            Search resources and support articles or all of VA.gov
          </legend>
          <label
            className="vads-u-visibility--screen-reader"
            htmlFor="website-section"
          >
            Website section to search
          </label>
          <div className="form-radio-buttons vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-display--block">
            <div className="radio-button vads-u-display--inline-block vads-u-margin-right--3">
              <input
                checked={!isGlobalSearch}
                id="search-within-resources-and-support"
                onChange={event => {
                  setGlobalSearch(!event.target.checked);
                }}
                type="radio"
                value="/resources/search"
              />
              <label htmlFor="search-within-resources-and-support">
                <span className="vads-u-visibility--screen-reader">
                  Search within
                </span>{' '}
                Resources and support
              </label>
            </div><commit_msg>Add escape early and proper onsubmit handler (#15437)<commit_after>// Node modules.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
// Relative imports.
import recordEvent from 'platform/monitoring/record-event';
import resourcesSettings from '../manifest.json';
import searchSettings from 'applications/search/manifest.json';

export default function SearchBar({
  onInputChange,
  onSearch,
  useDefaultFormSearch,
  userInput,
}) {
  const [isGlobalSearch, setGlobalSearch] = useState(false);
  const [expanded, setExpanded] = useState(false);

  const disabled = userInput.length < 3;

  const onSubmit = event => {
    // Track All VA.gov search.
    if (isGlobalSearch) {
      recordEvent({
        event: 'view_search_results',
        'search-page-path': document.location.pathname,
        'search-query': userInput,
        'search-results-total-count': undefined,
        'search-results-total-pages': undefined,
        'search-selection': 'All VA.gov',
        'search-typeahead-enabled': false,
        'type-ahead-option-keyword-selected': undefined,
        'type-ahead-option-position': undefined,
        'type-ahead-options-list': undefined,
      });
      return;
    }

    // Escape early if we are not on the search page to let the form submit manually.
    if (useDefaultFormSearch) {
      return;
    }

    event.preventDefault();
    if (!disabled) {
      onSearch();
    }
  };

  return (
    <div className="vads-u-border-bottom--0 medium-screen:vads-u-border-top--2px vads-u-border-color--gray-light vads-u-padding-y--3 vads-u-padding-x--1">
      {/* Mobile expand/collapse */}
      <button
        className={`${
          expanded ? 'va-border-bottom-radius--0 ' : ''
        }vads-u-width--full vads-u-display--flex vads-u-margin--0 vads-u-padding-x--2 vads-u-justify-content--space-between vads-u-padding-y--2 vads-u-color--primary-darker vads-u-background-color--gray-lightest medium-screen:vads-u-display--none`}
        onClick={() => setExpanded(!expanded)}
        type="button"
      >
        Search resources and support
        <i
          className={`${
            expanded ? 'vads-u-display--none ' : ''
          }fa fa-sliders-h vads-u-font-size--base vads-u-color--primary-darker`}
          id="sliders-icon"
          aria-hidden="true"
        />
        <i
          className={`${
            expanded ? '' : 'vads-u-display--none '
          }fa fa-times vads-u-font-size--base vads-u-color--primary-darker`}
          id="times-icon"
          aria-hidden="true"
        />
      </button>
      {/* Search form */}
      <form
        data-testid="resources-support-search"
        className={`${
          expanded ? 'va-border-bottom-radius--5px ' : 'vads-u-display--none '
        }vads-u-flex-direction--column vads-u-background-color--gray-lightest vads-u-margin--0 vads-u-padding--2 vads-u-border-top--1px vads-u-border-color--gray-light medium-screen:vads-u-padding-x--0 medium-screen:vads-u-border-top--0 medium-screen-va-background-color--white medium-screen:vads-u-display--flex`}
        id="resources-support-search"
        method="get"
        action={
          isGlobalSearch
            ? `${searchSettings.rootUrl}/`
            : `${resourcesSettings.rootUrl}/`
        }
        onSubmit={onSubmit}
      >
        <fieldset className="fieldset-input vads-u-margin--0">
          <legend className="vads-u-font-size--md vads-u-font-family--serif">
            Search resources and support articles or all of VA.gov
          </legend>
          <label
            className="vads-u-visibility--screen-reader"
            htmlFor="website-section"
          >
            Website section to search
          </label>
          <div className="form-radio-buttons vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-display--block">
            <div className="radio-button vads-u-display--inline-block vads-u-margin-right--3">
              <input
                checked={!isGlobalSearch}
                id="search-within-resources-and-support"
                onChange={event => {
                  setGlobalSearch(!event.target.checked);
                }}
                type="radio"
                value="/resources/search"
              />
              <label htmlFor="search-within-resources-and-support">
                <span className="vads-u-visibility--screen-reader">
                  Search within
                </span>{' '}
                Resources and support
              </label>
            </div>
{'fraction_non_alphanumeric': 0.1435490973139586, 'fraction_numerical': 0.0042932628797886395, 'mean_word_length': 2.053781512605042, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '936823', 'n_tokens_mistral': 2725, 'n_tokens_neox': 2683, 'n_words': 463}