Atlassian Jira. Admin evolution. Part 11

Part 10

Javascript refactoring

Here is our JavaScript code so far:

<script>
      $(function () {
         JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {

            if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {
               $("#reporter").change( function(e) {
                  if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
                    $("#customfield_10301").val("manager1");
                  } else {
                    $("#customfield_10301").val("manager2");
                  } 
               });

              if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
                $("#customfield_10301").val("manager1");
              } else {
                $("#customfield_10301").val("manager2");
              } 
              $("#customfield_10301").focus(function() {
                this.blur();
              });
              $("input#summary").val("mapping");
              $("input#summary").parent().css("display", "None");
            } 
         });
         if ($("#customfield_10301-val").text()) {
           if (JIRA.Users.LoggedInUser.userName() != $.trim($("#customfield_10301-val").text())) {
             $('#action_id_21').addClass('hidden');
           }
         }
     });
</script>

How does it look like? This code is very difficult to understand. Let's try to refactor it:

<script>

      function setApproverFieldByReporter() {
         if ($("optgroup#reporter-group-suggested > option:selected").val() == "admin") {
              $("#customfield_10301").val("manager1");
         } else {
              $("#customfield_10301").val("manager2");
         } 
      };

      function disableAporoverField() {
          $("#customfield_10301").focus(function() {
                this.blur();
          });
      };

      function hideSummaryField() {
          $("input#summary").val("mapping");
          $("input#summary").parent().css("display", "None");
      }

      function hideReadyForWorkButtonConditionally() {
         if ($("#customfield_10301-val").text()) {
           if (JIRA.Users.LoggedInUser.userName() != $.trim($("#customfield_10301-val").text())) {
             $('#action_id_21').addClass('hidden');
           }
         }
      }

      $(function () {
         JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {

            if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {

              $("#reporter").change( function(e) {
                 setApproverFieldByReporter();
              });
              setApproverFieldByReporter();
              disableAporoverField();
              hideSummaryField();
            } 
         });
         hideReadyForWorkButtonConditionally();
     });
</script>

I moved most logic to functions and now at least we can read the flow of our program like this:

 $(function () {
         JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, $context, reason) {

            if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady) {

              $("#reporter").change( function(e) {
                 setApproverFieldByReporter();
              });
              setApproverFieldByReporter();
              disableAporoverField();
              hideSummaryField();
            } 
         });
         hideReadyForWorkButtonConditionally();

We still have akward logic with bind Jira event, bind the onchange event. I will leave the refactoring of these things to you.

But event now there are only four pieces of logic in our JavaScript and our code is already difficult to read.

Part 12

2 comments

Taranjeet Singh
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
September 1, 2020

@Alexey Matveev great work!

M Amine
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
September 29, 2020

nice

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events