<commit_before>import { React, PropTypes, styled, observer } from 'vendor';
import { isEmpty } from 'lodash';
import { AssignmentBuilder, SplitRow, Label, HintText, TextInput, TextArea, Body } from './builder';
import RadioInput from '../../components/radio-input';
import PreviewTooltip from './preview-tooltip';
import NewTooltip from './new-tooltip';
import Tasking from './tasking';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import ChangeTimezone from './change-timezone';
import { Dropdown } from 'react-bootstrap';
import { colors } from '../../theme';
import * as EDIT_TYPES from '../grading-templates/editors';
import isUrl from 'validator/lib/isURL';

const isRequired = (value) => isEmpty(value) && 'Cannot be blank';
const isValidUrl = (value) => !isUrl(value) && 'A valid URL is required';

const DetailsBody = styled(Body)`
  padding-left: 10.4rem;
`;

const RowLabel = styled(Label)`
  max-width: 27rem;
  margin-right: 8rem;
`;

const FullWidthCol = styled.div`
  flex-basis: auto;
`;

const SectionRow = styled.div`
  margin-bottom: 2rem;
`;

const StyledTextInput = styled(TextInput)`
  max-width: 48rem;
`;

const StyledDropdown = styled(Dropdown)`
  display: inline-flex;
`;

const StyledToggle = styled(Dropdown.Toggle)`
  &&& {
    border: 1px solid ${colors.forms.borders.light};
    color: ${colors.neutral.darker};
    background: #fff;
    height: 3.4rem;
    width: 25rem;
    text-align: left;
    padding: 0 1rem;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    appearance: none;
    border-radius: 0.4rem;

    &:focus {
      border-color: ${colors.forms.borders.focus};
      box-shadow: 0 0 4px 0 ${colors.forms.borders.focusShadow};
    }

    &:after {
      color: ${colors.neutral.std};
      flex-basis: 0;
    }
  }
`;

const StyledMenu = styled(Dropdown.Menu)`
  && {
    width: 100%;
    border-radius: 0.4rem;

    .dropdown-item {
      padding: 0.8rem 1rem;
      font-size: 1.6rem;
      color: ${colors.neutral.darker};
    }
  }
`;

const StyledAddItem = styled(Dropdown.Item)`
  &&& {
    color: ${colors.link};
  }
`;

const EditModal = observer(({ ux }) => {
  const Edit = EDIT_TYPES[ux.plan.type];
  const template = ux.course.gradingTemplates.newTemplate({ task_plan_type: ux.plan.type });

  if (Edit) {
    return (
      <Edit
        template={template}
        onComplete={ux.onHideAddTemplate}
      />
    );
  } else {
    return null;
  }
});

const TemplateField = observer(({ ux }) => {
  return (
    <SplitRow>
      <RowLabel htmlFor="">
        <NewTooltip>
          <span>Grading template</span>
        </NewTooltip>
        <HintText>(Apply a pre-set submission and grading policy template)</HintText>
      </RowLabel>
      <div>
        <StyledDropdown data-test-id="grading-templates">
          <StyledToggle variant="outline">
            {ux.gradingTemplate.name}
          </StyledToggle>
          <StyledMenu>
            {ux.gradingTemplates.map(t =>
              <Dropdown.Item
                key={t.id}
                value={t.id}
                eventKey={t.id}
                onSelect={k => {
                  ux.form.setFieldValue('grading_template_id', k);
                  ux.plan.grading_template_id = k;
                }}
              >
                {t.name}
              </Dropdown.Item>)}
            <StyledAddItem onSelect={ux.onShowAddTemplate} data-test-id="add-template">
              + Add new template
            </StyledAddItem>
          </StyledMenu>
        </StyledDropdown>
        <PreviewTooltip template={ux.gradingTemplate} /><commit_msg>make '+ Add New Template' as a button. With '<a>' the modal loses focus.<commit_after>import { React, PropTypes, styled, observer } from 'vendor';
import { isEmpty } from 'lodash';
import { AssignmentBuilder, SplitRow, Label, HintText, TextInput, TextArea, Body } from './builder';
import RadioInput from '../../components/radio-input';
import PreviewTooltip from './preview-tooltip';
import NewTooltip from './new-tooltip';
import Tasking from './tasking';
import { OverlayTrigger, Tooltip, Dropdown } from 'react-bootstrap';
import ChangeTimezone from './change-timezone';
import { colors } from '../../theme';
import * as EDIT_TYPES from '../grading-templates/editors';
import isUrl from 'validator/lib/isURL';

const isRequired = (value) => isEmpty(value) && 'Cannot be blank';
const isValidUrl = (value) => !isUrl(value) && 'A valid URL is required';

const DetailsBody = styled(Body)`
  padding-left: 10.4rem;
`;

const RowLabel = styled(Label)`
  max-width: 27rem;
  margin-right: 8rem;
`;

const FullWidthCol = styled.div`
  flex-basis: auto;
`;

const SectionRow = styled.div`
  margin-bottom: 2rem;
`;

const StyledTextInput = styled(TextInput)`
  max-width: 48rem;
`;

const StyledDropdown = styled(Dropdown)`
  display: inline-flex;
`;

const StyledToggle = styled(Dropdown.Toggle)`
  &&& {
    border: 1px solid ${colors.forms.borders.light};
    color: ${colors.neutral.darker};
    background: #fff;
    height: 3.4rem;
    width: 25rem;
    text-align: left;
    padding: 0 1rem;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    appearance: none;
    border-radius: 0.4rem;

    &:focus {
      border-color: ${colors.forms.borders.focus};
      box-shadow: 0 0 4px 0 ${colors.forms.borders.focusShadow};
    }

    &:after {
      color: ${colors.neutral.std};
      flex-basis: 0;
    }
  }
`;

const StyledMenu = styled(Dropdown.Menu)`
  && {
    width: 100%;
    border-radius: 0.4rem;

    .dropdown-item {
      padding: 0.8rem 1rem;
      font-size: 1.6rem;
      color: ${colors.neutral.darker};
    }
  }
`;

const StyledAddItem = styled(Dropdown.Item)`
  &&& {
    color: ${colors.link};
    padding: 0.8rem 1rem;
    font-size: 1.6rem;
    /* display: block; */
    font-weight: 400;
    background-color: transparent;
    border: 0;
  }
`;

const EditModal = observer(({ ux }) => {
  const Edit = EDIT_TYPES[ux.plan.type];
  const template = ux.course.gradingTemplates.newTemplate({ task_plan_type: ux.plan.type });

  if (Edit) {
    return (
      <Edit
        template={template}
        onComplete={ux.onHideAddTemplate}
      />
    );
  } else {
    return null;
  }
});

const TemplateField = observer(({ ux }) => {
  return (
    <SplitRow>
      <RowLabel htmlFor="">
        <NewTooltip>
          <span>Grading template</span>
        </NewTooltip>
        <HintText>(Apply a pre-set submission and grading policy template)</HintText>
      </RowLabel>
      <div>
        <StyledDropdown data-test-id="grading-templates">
          <StyledToggle variant="outline">
            {ux.gradingTemplate.name}
          </StyledToggle>
          <StyledMenu>
            {ux.gradingTemplates.map(t =>
              <Dropdown.Item
                key={t.id}
                value={t.id}
                eventKey={t.id}
                onSelect={k => {
                  ux.form.setFieldValue('grading_template_id', k);
                  ux.plan.grading_template_id = k;
                }}
              >
                {t.name}
              </Dropdown.Item>)}
            <StyledAddItem as="button" onClick={ux.onShowAddTemplate} data-test-id="add-template">
              + Add new template
            </StyledAddItem>
          </StyledMenu>
        </StyledDropdown>
        <PreviewTooltip template={ux.gradingTemplate} />
{'fraction_non_alphanumeric': 0.143449752442125, 'fraction_numerical': 0.01057139033855212, 'mean_word_length': 2.510568341944575, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 60, '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': '2969993', 'n_tokens_mistral': 2521, 'n_tokens_neox': 2408, 'n_words': 525}