templates/tracker/issue-entry-page.ezt

[define title]New Issue[end]
[define category_css]css/ph_detail.css[end]
[include "../framework/header.ezt" "hidetabs"]

[# Note: base permission for this page is CreateIssue]

[if-any read_only][include "../framework/read-only-rejection.ezt"]
[else]

<div id="color_control" style="margin-top: 0; padding: 3px;" class="closed [if-any code_font]codefont[end]">
 <form action="entry.do" method="POST" style="margin: 0; padding: 0" enctype="multipart/form-data" id="create_issue_form">
  <input type="hidden" name="token" value="[form_token]">
  <input type="hidden" name="template_name" value="[template_name]">
  <input type="hidden" name="star" id="star_input" value="1">
  <table cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tr><td>

    <table cellspacing="0" cellpadding="3" border="0" class="rowmajor vt" role="presentation">
     [if-any offer_templates]
      <tr><th><label for="template_name">Template:</label></th>
       <td colspan="2">
        <select name="template_name" id="template_name" data-project-name="[projectname]" ignore-dirty>
         [for config.template_names]
           <option role="option" value="[format "url"][config.template_names][end]" [is config.template_names template_name]selected=selected[end]>[config.template_names]</option>
         [end]
        </select>
        <span id="mr-code-font-toggle-slot"></span>
       </td>
      </tr>
     [else]
      <tr>
       <td colspan="3">
        <span id="mr-code-font-toggle-slot"></span>
       </td>
      </tr>
     [end]

      <tr><th><label for="summary">Summary:</label></th>
       <td colspan="2" class="inplace">
        <input type="text" id="summary" name="summary" value="[initial_summary]" required data-clear-summary-on-click="[clear_summary_on_click]"
               [if-any any_errors][else]autofocus[end]>
        [if-any errors.summary]
         <div class="fielderror">[errors.summary]</div>
        [end]

        [if-any any_errors][else]
          <script type="text/javascript" nonce="[nonce]">
            document.getElementById('summary').select();
          </script>
        [end]
       </td>
      </tr>

      <tr><th rowspan="3"><label for="comment">Description:</label></th>
       <td colspan="2">
        <textarea style="width:100%" cols="80" rows="15" name="comment" id="comment" class="issue_text" required>[initial_description]
</textarea> [# We want 1 final newline but 0 trailing spaces in the textarea]
        [if-any errors.comment]
         <div class="fielderror">[errors.comment]</div>
        [end]
       </td>
      </tr>

      <tr><td colspan="2">
       [include "../features/cues-conduct.ezt"]
       <div id="attachmentareadeventry"></div>
      </td></tr>

      <tr>
       <td style="width: 12em">
        [if-any allow_attachments]
         <span id="attachprompt"><img width="16" height="16" src="/static/images/paperclip.png" border="0" alt="A paperclip">
         <a href="#" id="attachafile">Attach a file</a></span>
         <div id="attachmaxsize" style="margin-left:1.2em; display:none">Max. attachments: [max_attach_size]</div>
         [if-any errors.attachments]
          <div class="fielderror">[errors.attachments]</div>
         [end]
        [else]
         <div style="color:#666">Issue attachment storage quota exceeded.</div>
        [end]
       </td>
       <td id="star_cell" style="vertical-align: initial">
        [# Note: if the user is permitted to enter an issue, they are permitted to star it.]
        <a class="star" id="star" style="color:cornflowerblue;">&#9733;</a>
        Notify me of issue changes, if enabled in <a id="settings" target="new" href="/hosting/settings">settings</a>
       </td>
      </tr>

      <tr [if-any page_perms.EditIssue page_perms.EditIssueStatus][else]style="display:none;"[end]><th width="10%"><label for="statusenter">Status:</label></th>
       <td colspan="2" class="inplace">
       <select id="statusenter" name="status">
         <option style="display: none" value="[initial_status]"></option>
       </select>
       </label>
       </td>
      </tr>
      <tr [if-any page_perms.EditIssue page_perms.EditIssueOwner][else]style="display:none;"[end]><th width="10%"><label for="ownerenter">Owner:</label></th>
       <td colspan="2">
        <input type="text" id="ownerenter" autocomplete="off"
               style="width:16em"
               name="owner" value="[initial_owner]" aria-autocomplete="list" role="combobox">
          <span class="availability_[owner_avail_state]" id="owner_avail_state"
                style="padding-left:1em; [if-any owner_avail_message_short][else]display:none[end]">
            &#9608;
            <span id="owner_availability">[owner_avail_message_short]</span>
          </span>
        </div>
        [if-any errors.owner]
         <div class="fielderror">[errors.owner]</div>
        [end]
       </td>
      </tr>

      <tr [if-any page_perms.EditIssue page_perms.EditIssueCc][else]style="display:none;"[end]><th><label for="memberenter">Cc:</label></th>
       <td colspan="2" class="inplace">
        <input type="text" multiple id="memberenter" autocomplete="off" name="cc" value="[initial_cc]" aria-autocomplete="list" role="combobox">
        [if-any errors.cc]
         <div class="fielderror">[errors.cc]</div>
        [end]
       </td>
      </tr>

      [# TODO(jrobbins): page_perms.EditIssueComponent]
      <tr [if-any page_perms.EditIssue][else]style="display:none;"[end]><th><label for="components">Components:</label></th>
       <td colspan="2" class="inplace">
        <input type="text" id="components" autocomplete="off" name="components" value="[initial_components]" aria-autocomplete="list" role="combobox">
        [if-any errors.components]
         <div class="fielderror">[errors.components]</div>
        [end]
       </td>
      </tr>

      [if-any uneditable_fields]
      <tr id="res_fd_banner"><th></th>
        <td colspan="2" class="inplace" style="text-align:left; border-radius:25px">
          <span style="background:var(--chops-orange-50); padding:5px; margin-top:10px; padding-left:10px; padding-right:10px; border-radius:25px">
            <span style="padding-right:7px">
              Info: Disabled inputs occur when you are not allowed to edit that restricted field.
            </span>
            <i id="res_fd_message" class="material-icons inline-icon" style="font-weight:bold; font-size:14px; vertical-align: text-bottom; cursor: pointer">
            close</i>
          </span>
        </td>
      </tr>
      [end]

      <tbody [if-any page_perms.EditIssue][else]style="display:none;"[end] class="collapse">
       [define any_fields_to_reveal]No[end]
       [for fields]
        [if-any fields.applicable][if-any fields.field_def.is_approval_subfield][else][if-any fields.field_def.is_phase_field][else]
         [# TODO(jrobbins): determine applicability dynamically and update fields in JS]
         <tr [if-any fields.display][else]class="ifExpand"[define any_fields_to_reveal]Yes[end][end]>
          <th id="[fields.field_id]_label">[fields.field_name]:</th>
          <td colspan="2">
            [if-any fields.is_editable]
              [include "field-value-widgets.ezt" fields.field_def.is_multivalued_bool "" fields.field_def.is_required_bool ""]
              <div class="fielderror" style="display:none" id="error_custom_[fields.field_id]"></div>
            [else]
              <input disabled value = "
              [for fields.values]
                [fields.values.val]
              [end]
              " style="text-align:right; width:12em" class="multivalued customfield" aria-labelledby="[fields.field_id]_label">
            [end]
          </td>
         <tr>
        [end][end][end]
       [end]
       [is any_fields_to_reveal "Yes"]
        <tr class="ifCollapse">
         <td colspan="2"><a href="#" class="toggleCollapse">Show all fields</a><t/td>
        </tr>
       [end]
      </tbody>

      <tr [if-any page_perms.EditIssue][else]style="display:none;"[end]><th>Labels:</th>[# aria-labels added in label-fields.ezt]
       <td colspan="2" class="labelediting">
        [include "label-fields.ezt" "just-two" ""]
       </td>
      </tr>

      <tbody class="collapse">
       [if-any page_perms.EditIssue]
       <tr class="ifCollapse">
        <td><a href="#" class="toggleCollapse">More options</a></td>
       </tr>
       [end]

       <tr [if-any page_perms.EditIssue][else]style="display:none;"[end] class="ifExpand"><th style="white-space:nowrap"><label for="blocked_on">Blocked on:</label></th>
        <td class="inplace" colspan="2">
         <input type="text" name="blocked_on" id="blocked_on" value="[initial_blocked_on]">
         [if-any errors.blocked_on]
          <div class="fielderror">[errors.blocked_on]</div>
         [end]
        </td>
       </tr>
       <tr [if-any page_perms.EditIssue][else]style="display:none;"[end] class="ifExpand"><th><label for="blocking">Blocking:</label></th>
        <td class="inplace" colspan="2">
         <input type="text" name="blocking" id="blocking" value="[initial_blocking]" />
         [if-any errors.blocking]
          <div class="fielderror">[errors.blocking]</div>
         [end]
        </td>
       </tr>

       <tr [if-any page_perms.EditIssue][else]style="display:none;"[end] class="ifExpand"><th><label for="hotlistsenter">Hotlists:</label></th>
        <td class="inplace" colspan="2">
         <input type="text" name="hotlists" autocomplete="off" id="hotlistsenter" value="[initial_hotlists]" />
         [if-any errors.hotlists]
          <div class="fielderror">[errors.hotlists]</div>
         [end]
        </td>
       </tr>
     </tbody>

     [if-any approvals]
        <tr>
          <th>Launch Gates:</th>
          <td colspan="7">
            [include "launch-gates-widget.ezt"]
          </td>
        </tr>
     [end]

     [for fields][if-any fields.applicable][if-any fields.field_def.is_approval_subfield]
     <tr is="subfield-row">
       <th>[fields.field_def.parent_approval_name] [fields.field_name]:</th>
       <td colspan="2">
         [if-any fields.is_editable]
           [include "field-value-widgets.ezt" False "tmpl" False ""]
           <div class="fielderror" style="display:none" id="error_custom_[fields.field_id]"></div>
         [else]
           <input disabled value = "
           [for fields.values]
             [fields.values.val]
           [end]
           " style="text-align:right; width:12em" class="multivalued customfield" aria-labelledby="[fields.field_id]_label">
         [end]
       </td>
     </tr>
    [end][end][end]

    [for issue_phase_names]
      [for fields]
        [is fields.phase_name issue_phase_names]
        <tr>
          <th>[issue_phase_names].[fields.field_name]:</th>
            <td colspan="2">
              [if-any fields.is_editable]
                [include "field-value-widgets.ezt" False "tmpl" False issue_phase_names]
                <div class="fielderror" style="display:none" id="error_custom_[issue_phase_names]_[fields.field_id]"></div>
              [else]
                <input disabled value = "
                [for fields.values]
                  [fields.values.val]
                [end]
                " style="text-align:right; width:12em" class="multivalued customfield" aria-labelledby="[fields.field_id]_label">
              [end]
            </td>
          </th>
        </tr>
      [end][end][end]

     [include "../framework/label-validation-row.ezt"]
     [include "../framework/component-validation-row.ezt"]
    </table>

    <div style="padding:6px">
     <input type="submit" id="submit_btn" name="btn" value="Submit issue">
     <input type="button" id="discard" name="nobtn" value="Discard">
    </div>

   </td>
   </tr>
  </table>
 </form>
</div>

[include "../features/filterrules-preview.ezt"]

<div style="margin-top:5em; margin-left: 8px;">
  Problems submitting issues?
  <a href="#" id="new-issue-feedback-link">
    Send feedback
  </a>
</div>

<div id="helparea"></div>

<script type="text/javascript" nonce="[nonce]">
runOnLoad(function() {
  window.getTSMonClient().recordIssueEntryTiming();

  if ($('launch-gates-table')) {
    $('launch-gates-table').classList.remove('hidden');
  }

  if ($("template_name")) {
    $("template_name").addEventListener("change", function(event) {
      _switchTemplate(event.target.getAttribute("data-project-name"),
                      event.target.value)
    });
  }

  if ($("summary")) {
    var clearSummaryOnClick = $("summary").getAttribute("data-clear-summary-on-click");
    if (clearSummaryOnClick) {
      $("summary").addEventListener("keydown", function(event) {
        _clearOnFirstEvent('[format "js"][initial_summary][end]');
      });
    }
    $("summary").addEventListener("click", function(event) {
      if (clearSummaryOnClick) {
        _clearOnFirstEvent('[format "js"][initial_summary][end]');
      }
      checksubmit();
    });
    $("summary").addEventListener("focus", function(event) {
      _acrob(null);
      _acof(event);
    });
    $("summary").addEventListener("keyup", function(event) {
      checksubmit();
      return true;
    });
  }

  if ($("settings")) {
    $("settings").addEventListener("focus", function(event) {
      _acrob(null);
    });
  }
  if ($("statusenter")) {
    _loadStatusSelect("[projectname]", "statusenter", "[initial_status]");
    $("statusenter").addEventListener("focus", function(event) {
      _acrob(null);
    });
  }
  if($("res_fd_message")) {
    $("res_fd_message").onclick = function(){
      $("res_fd_banner").classList.add("hidden");
    };
  };

  if ($("submit_btn")) {
    $("submit_btn").addEventListener("focus", function(event) {
      _acrob(null);
    });
    $("submit_btn").addEventListener("click", function(event) {
      _acrob(null);
      _trimCommas();
      userMadeChanges = false;
    });
  }
  if ($("discard")) {
    $("discard").addEventListener("focus", function(event) {
      _acrob(null);
    });
    $("discard").addEventListener("click", function(event) {
      _acrob(null);
      _confirmDiscardEntry(event.target);
      event.preventDefault();
    });
  }
  if ($("new-issue-feedback-link")) {
    $("new-issue-feedback-link").addEventListener("click", function(event) {
      userfeedback.api.startFeedback({
          'productId': '5208992',  // Required.
          'productVersion': '[app_version]'  // Optional.
        });
    })
  }

  window.allowSubmit = true;
  $("create_issue_form").addEventListener("submit", function() {
    if (allowSubmit) {
      allowSubmit = false;
      $("submit_btn").value = "Creating issue...";
      $("submit_btn").disabled = "disabled";
    }
    else {
      event.preventDefault();
    }
  });

  var _blockIdsToListeners = [[]"blocked_on", "blocking", "hotlistsenter"];
  for (var i = 0; i < _blockIdsToListeners.length; i++) {
    var id = _blockIdsToListeners[[]i];
    if ($(id)) {
      $(id).addEventListener("focus", function(event) {
        _acrob(null);
        _acof(event);
      });
    }
  }

  var _idsToAddDefaultListeners = [[]"ownerenter", "memberenter", "components"];
  for (var i = 0; i < _idsToAddDefaultListeners.length; i++) {
    var id = _idsToAddDefaultListeners[[]i];
    if ($(id)) {
      $(id).addEventListener("focus", function(event) {
        _acrob(null);
        _acof(event);
      });
    }
  }

  var _elementsToAddPresubmit = document.querySelectorAll(
      "#create_issue_form input, #create_issue_form select");
  var debounced_presubmit = debounce(TKR_presubmit, 500);
  for (var i = 0; i < _elementsToAddPresubmit.length; i++) {
    var el = _elementsToAddPresubmit[[]i];
    el.addEventListener("keyup", debounced_presubmit);
    el.addEventListener("change", debounced_presubmit);
  }
  debounced_presubmit();

  if ($("attachafile")) {
    $("attachafile").addEventListener("click", function(event) {
      _addAttachmentFields("attachmentareadeventry");
      event.preventDefault();
    });
  }

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
      event.preventDefault();
      $('submit_btn').click();
    }
  })

  window.onsubmit = function() {
    TKR_initialFormValues = TKR_currentFormValues();
  };

  window.onbeforeunload = function() {
    if (TKR_isDirty()) {
      // This message is ignored in recent versions of Chrome and Firefox.
      return "You have unsaved changes. Leave this page and discard them?";
    }
  };

  _lfidprefix = 'labelenter';
  [if-any any_errors]
   function _clearOnFirstEvent(){}
  [end]

  [if-any page_perms.EditIssue page_perms.EditIssueStatus page_perms.EditIssueOwner page_perms.EditIssueCc]
    setTimeout(_forceProperTableWidth, 100);
  [end]

  [if-any page_perms.EditIssue]
   _exposeExistingLabelFields();
  [end]

  var field_error;
  [if-any  errors.custom_fields]
    [for errors.custom_fields]
      field_error = document.getElementById('error_custom_' + [errors.custom_fields.field_id]);
      field_error.textContent = "[errors.custom_fields.message]";
      field_error.style.display = "";
    [end]
  [end]



function checksubmit() {
  var restrict_to_known = [if-any restrict_to_known]true[else]false[end];
  var confirmmsg = document.getElementById('confirmmsg');
  var cg = document.getElementById('cg');
  var label_blocksubmitmsg = document.getElementById('blocksubmitmsg');
  var component_blocksubmitmsg = document.getElementById('component_blocksubmitmsg');

  // Check for templates that require components.
  var component_required = [if-any component_required]true[else]false[end];
  var components = document.getElementById('components');
  if (components && component_required && components.value == "") {
    component_blocksubmitmsg.textContent = "You must specify a component for this template.";
  } else {
    component_blocksubmitmsg.textContent = "";
  }

  var submit = document.getElementById('submit_btn');
  var summary = document.getElementById('summary');
  if ((restrict_to_known && confirmmsg && confirmmsg.textContent) ||
      (label_blocksubmitmsg && label_blocksubmitmsg.textContent) ||
      (component_blocksubmitmsg && component_blocksubmitmsg.textContent) ||
      (cg && cg.value == "") ||
      (!allowSubmit) ||
      (!summary.value [if-any must_edit_summary]|| summary.value == '[format "js"][template_summary][end]'[end])) {
     submit.disabled='disabled';
  } else {
     submit.disabled='';
  }
}
checksubmit();
setInterval(checksubmit, 700); [# catch changes that were not keystrokes, e.g., paste menu item.]

$("star").addEventListener("click", function (event) {
    _TKR_toggleStarLocal($("star"), "star_input");
});

  const mrCodeFontToggle = document.createElement('mr-pref-toggle');
  mrCodeFontToggle.style = 'float:right; margin: 3px;';
  [if-any code_font]
    mrCodeFontToggle.initialValue = true;
  [end]
  [if-any logged_in_user]
    mrCodeFontToggle.userDisplayName = "[logged_in_user.email]";
  [end]
  mrCodeFontToggle.label = "Code";
  mrCodeFontToggle.title = "Code font";
  mrCodeFontToggle.prefName = "code_font";
  $('mr-code-font-toggle-slot').appendChild(mrCodeFontToggle);
  mrCodeFontToggle.fetchPrefs();
  mrCodeFontToggle.addEventListener('font-toggle', function(e) {
    const checked = e.detail.checked;
    const ancestor = $('color_control');
    if (ancestor) {
      if (checked) {
        ancestor.classList.add('codefont');
      } else {
        ancestor.classList.remove('codefont');
      }
    }
  });


});
</script>

<script type="text/javascript" defer src="/static/third_party/js/keys.js?version=[app_version]" nonce="[nonce]"></script>
<script type="text/javascript" defer src="/static/third_party/js/skipper.js?version=[app_version]" nonce="[nonce]"></script>
<script type="text/javascript" defer src="https://support.google.com/inapp/api.js" nonce="[nonce]"></script>
<script type="text/javascript" nonce="[nonce]">
runOnLoad(function() {
  _setupKibblesOnEntryPage('[project_home_url]/issues/list');
});
</script>

[end]

[include "field-value-widgets-js.ezt"]
[include "../framework/footer.ezt"]

<script type="text/javascript" nonce="[nonce]">
runOnLoad(function() {
  if (typeof(ClientLogger) === "function") {
    const l = new ClientLogger("issues");
    l.logStart("new-issue", "user-time");
    document.forms.create_issue_form.addEventListener('submit', function() {
      l.logStart("new-issue", "server-time");
    });
  }
});
</script>