jira random standup order generator

JIRA_STANDUP_GENERATOR.MD

WHAT

This inserts a "Standup" button into the Jira interface. When clicked, it will display a list of all the people who have filters created for them - in a random order.

Caveats - Only Works :

• in the Chrome browser
• when filters created for each team member
• with the Chrome extension below installed (and configured with the code below)

HOW

1. Install the Chrome extension "User JavaScript and CSS" from the Chrome Web Store
2. Navigtate to Jira
3. Click on the extension icon in the top right of the browser
4. Click on the "Add new" button
5. Paste standup.js into the JavaScript section
6. Paste standup.css into the CSS section
7. Click on the "Save" button

standup.css

a.btn-standup:hover {
	color: black !important;
}

.popup-standup {
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  position: fixed;
  z-index: 5000;
  padding: 0px 10px;
  border: 1px solid black;
  border-radius: 6px;
  background: white;
  right: 0px;
  top: 41px;
  min-width: 150px;
  user-select: none;
  cursor: default;
  overflow: hidden;
  transition: max-height 0.25s ease-in;
  max-height: 25px;
}
.popup-standup.displayed {
  max-height: 2000px;
}
.popup-standup.displayed .popup-header .btn-standup-close:after {
  content: '▲';
}
.popup-standup .popup-header {
  margin-left: -10px;
  padding-left: 5px;
  border-bottom: 1px solid black;
  width: calc(100% + 20px);
  height: 25px;
  line-height: 25px;
  font-size: 16px;
  position: relative;
  font-weight: bold;
}
.popup-standup .popup-header .btn-standup-close {
  cursor: pointer;
  position: absolute;
  right: 0px;
  padding: 0 10px;
  text-align: center;
}
.popup-standup .popup-header .btn-standup-close:after {
  content: '▼';
  font-size: 16px;
}
.popup-standup .standup-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.popup-standup .standup-list ul li {
  display: block;
  list-style-type: none;
  margin-left: 0;
  padding-left: 5px;
  padding: 3px;
  font-size: 16px;
}
.popup-standup .standup-list ul li.done {
  opacity: 0.5;
}
.popup-standup .standup-list ul li.done:before {
  display: inline-block;
  content: "✓";
  width: 20px;
  margin-left: -10px;
  text-align: left;
  padding-left: 4px;
}

standup.js

// modify blockedFilters to include filters that aren't people
const blockedFilters = [
  'Blocked',
  'Ralph',
  'blockedFilters',
  'Unassigned',
  'Bugs',
  'Release Ticket',
  'Only My Issues',
  'Recently Updated',
  '… Show more'
];

const standupCheckMark = '✓';
let standupPeople;

function getStandupList(){
  addStandupBtn();
  initStandupList();
}

function addStandupBtn() {
  const auiNav = document.querySelector( '.aui-nav' );
  const li = document.createElement( 'li' );
  li.innerHTML = `<a
    class="aui-button aui-button-primary aui-style btn-standup"
    resolved="">Standup</a>`;
  auiNav.appendChild( li );
  const btn = document.querySelector( '.btn-standup' );
  btn.addEventListener( 'click', createStandupPopup );
}

function removeStandupBtn() {
  const btn = document.querySelector( '.btn-standup' );
  btn.parentNode.removeChild( btn );
}

function initStandupList() {
  const filtersContainer = document.querySelector( '#js-work-quickfilters' );
  standupPeople = [ ...filtersContainer.querySelectorAll( 'a' ) ].map( a => a.innerHTML);
  standupPeople = standupPeople.filter( person => !blockedFilters.includes( person ) );
}

function createStandupPopup() {
  removeStandupBtn();
  const randomizedPeople = standupPeople.sort( () => Math.random() - 0.5 );
  const popup = document.createElement( 'div' );
  popup.className = 'popup-standup displayed';
  popup.innerHTML = `
    <div class="popup-header" onclick="toggleStandupPopup()">
      <span>standup</span>
      <span class="btn-standup-close"></span>
    </div>
    <div class="standup-list">
      <ul>
        ${randomizedPeople.map( person => `<li onclick="this.classList.toggle('done')">${person}</li>` ).join( '' )}
      </ul>
    </div>
  `;
  document.body.appendChild( popup );
}

function toggleStandupPopup() {
  const popup = document.querySelector( '.popup-standup' );
  if( popup ) {
    popup.classList.toggle( 'displayed' );
  }
}

window.setTimeout( getStandupList, 5000 );

standup.less

.popup-standup {
   font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu,
      "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   position: fixed;
   z-index: 5000;
   padding: 0px 10px;
   border: 1px solid black;
   border-radius: 6px;
   background: white;
   right: 0px;
   top: 41px;
   min-width: 150px;
   user-select: none;
   cursor: default;
   overflow: hidden;
   transition: max-height 0.25s ease-in;
   max-height: 25px;
   &.displayed {
      max-height: 2000px;
      .popup-header {
         .btn-standup-close {
            &:after {
               content : '▲';
            }
         }
      }
   }
   .popup-header {
      margin-left: -10px;
      padding-left: 5px;
      border-bottom: 1px solid black;
      width: calc(100% + 20px);
      height: 25px;
      line-height: 25px;
      font-size: 16px;
      position: relative;
      font-weight: bold;
      .btn-standup-close {
         cursor: pointer;
         position: absolute;
         right: 0px;
         padding: 0 10px;
         text-align: center;
         &:after{
            content : '▼';
            font-size : 16px;
         }
      }
   }
   .standup-list {
      ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         li {
            display: block;
            list-style-type: none;
            margin-left: 0;
            padding-left: 5px;
            padding: 3px;
            font-size: 16px;
            &.done {
               opacity: 0.5;
               &:before {
                  display: inline-block;
                  content: "✓";
                  width: 20px;
                  margin-left: -10px;
                  text-align: left;
                  padding-left: 4px;
               }
            }
         }
      }
   }
}