app.js

var token = ''
var repoList = []
var intervalIds = []
var githubApiUrl = 'https://api.github.com/'

$(window).on('unload', () => {
  intervalIds.forEach(clearInterval)
  return
})

// don't try to re initialize the extension if there's a token in memory
if (token === '') {
  intervalIds.push(
    setInterval(() => {
      initializeExtension()
    }, 1000)
  )
}

function initializeExtension() {
  const {
    currentRepo,
    error,
    githubApiUrl: currentGithubApiUrl,
    githubOrigin,
    issueNumber,
    organization,
    url,
  } = populateUrlMetadata(document.location.href)

  if (error) {
    return
  }

  githubApiUrl = currentGithubApiUrl

  if (!isIssueDetailUrl({ currentRepo, issueNumber, organization, url })) {
    return
  }

  // if the page is a pull request page(view or create)
  // or the page is a new issue page
  // or there is a Kamino button in the DOM, exit
  if (
    url.indexOf(`${organization}/${currentRepo}/compare/`) > -1 ||
    url.indexOf(`${organization}/${currentRepo}/pull/`) > -1 ||
    url.indexOf(`${organization}/${currentRepo}/issues/new`) > -1 ||
    $('.kaminoButton').length > 0 ||
    $('.batchButton').length > 0
  ) {
    intervalIds.forEach(clearInterval)
    return
  }

  intervalIds.forEach(clearInterval)
  saveAppliedFilters({ currentRepo, githubOrigin, issueNumber, organization, url })

  const kaminoButton = $(Handlebars.templates.button().replace(/(\r\n|\n|\r)/gm, ''))
  const modalContext = {
    confirmText:
      'Are you sure you want to clone this issue to another repository? Choose whether to clone and close or clone and keep the original issue open.',
  }
  const modal = $(Handlebars.templates.modal(modalContext).replace(/(\r\n|\n|\r)/gm, ''))

  let targetElement;

  if ($('.sidebar-assignee').length) {
    targetElement = $('.sidebar-assignee');
  } else if ($('[data-testid="sidebar-section"]').length) {
    targetElement = $('[data-testid="sidebar-section"]').first();
  } else {
    console.warn("It appears GitHub has changed their page structure, preventing the Kamino button from being rendered. Please go to https://github.com/gatewayapps/kamino and create an issue and we will try to remedy the issue as quickly as possible. Thanks");
    return;
  }

  $(kaminoButton).insertBefore(targetElement)
  $(modal).insertBefore(targetElement)

  const kaminoButtonExists = $('.kaminoButton').length > 0
  $('.btn-group').removeClass('open')

  chrome.storage.sync.get(
    {
      githubToken: '',
    },
    (item) => {
      token = item.githubToken

      if (kaminoButtonExists) {
        loadRepos()
      }
    }
  )

  $('.kaminoButton').click(() => {
    openDropdown()
  })

  $('.quickClone').click(() => {
    if ($('.quickClone').attr('data-repo') === undefined) {
      openDropdown()
    } else {
      itemClick($('.quickClone').attr('data-repo'))
    }
  })

  $('.cloneAndClose').click(async () => {
    toggleModal(false)
    await getGithubIssue($('.cloneAndClose').attr('data-repo'), true)
  })

  $('.cloneAndKeepOpen').click(async () => {
    toggleModal(false)
    await getGithubIssue($('.cloneAndKeepOpen').attr('data-repo'), false)
  })

  $('.close').click(() => {
    toggleModal(false)
  })

  $('.noClone').click(() => {
    toggleModal(false)
  })
}

function isIssueDetailUrl(urlMetadata) {
  try {
    const issueUrl = new URL(urlMetadata.url)
    return (
      issueUrl.pathname === `/${urlMetadata.organization}/${urlMetadata.currentRepo}/issues/${urlMetadata.issueNumber}` &&
      !isNaN(urlMetadata.issueNumber)
    )
  } catch {
    return false
  }
}

function saveAppliedFilters(urlMetadata) {
  const { currentRepo, githubOrigin, issueNumber, organization, url } = urlMetadata

  // url should have /issues and should not track any url that has an issue number at the end
  if (url.indexOf('/issues') > 0 && isNaN(issueNumber)) {
    const querystring = url.substring(url.indexOf('/issues'))

    // another check to try and prevent a bad querystring from being added to filters
    if (querystring.indexOf('?') === 0) {
      return
    }

    var newFilter = {
      filter: querystring,
      githubOrigin,
      organization,
      currentRepo,
    }

    chrome.storage.sync.get(
      {
        filters: [],
      },
      (item) => {
        const { filters, changed } = createFilters(newFilter, item)

        // only save if changed, otherwise the max quota per minute will be exceeded throwing errors
        if (changed) {
          chrome.storage.sync.set({
            filters,
          })
        }
      }
    )
  }
}

async function getRepos(url) {
  const response = await ajaxRequest('GET', '', url)

  repoList = repoList.concat(response.data)

  const linkValue = response.header.getResponseHeader('Link')
  if (linkValue) {
    let nextLink
    const links = linkValue.split(',')

    links.forEach((link) => {
      if (link.indexOf('rel="next"') > -1) {
        const re = /\<(.*?)\>/
        nextLink = link.match(re)[1]
      }
    })

    compileRepositoryList(response.data)

    if (nextLink) {
      return await getRepos(nextLink)
    } else {
      return null
    }
  } else {
    compileRepositoryList(response.data)
    return null
  }
}

async function loadRepos() {
  let lastValue = ''

  $('.repoSearch').on('change keyup paste mouseup', function () {
    if ($(this).val() != lastValue) {
      lastValue = $(this).val()
      searchRepositories(lastValue)
    }
  })

  $('.kamino-heading').click(() => {
    chrome.runtime.sendMessage({ action: 'goToOptions' }, () => {})
  })

  if (token === '') {
    console.warn(
      'disabling button because there is no Personal Access Token for authentication with GitHub. Please check your Kamino settings to make sure there is a stored Access Token'
    )
    $('.kaminoButton').prop('disabled', true)
    $('.quickClone').prop('disabled', true)
  }

  repoList = []

  $('.repoDropdown').empty()
  $('.repoDropdown').append('<li class="dropdown-header dropdown-header-used">Last Used</li>')
  $('.repoDropdown').append('<li class="dropdown-header dropdown-header-rest">The Rest</li>')

  await getRepos(`${githubApiUrl}user/repos?per_page=100`)
}

function compileRepositoryList(mainRepoList, searchTerm) {
  chrome.storage.sync.get(
    {
      mostUsed: [],
    },
    (item) => {
      if (item.mostUsed && item.mostUsed.length > 0) {
        $('.quickClone').attr('data-repo', item.mostUsed[0])
        $('.quickClone').text(`Clone to ${item.mostUsed[0].substring(item.mostUsed[0].indexOf('/') + 1)}`)
        $('.dropdown-header-used').addClass('active')

        let mostUsed = item.mostUsed

        if (searchTerm && searchTerm !== '') {
          mostUsed = item.mostUsed.filter((item) => {
            return item.indexOf(searchTerm) > -1
          })
        }

        if (!mostUsed || mostUsed.length === 0) {
          $('.dropdown-header-used').removeClass('active')
        }

        mostUsed.forEach((fullRepositoryName) => {
          addRepoToList(fullRepositoryName, 'used')

          mainRepoList = mainRepoList.filter((i) => {
            return i.full_name !== fullRepositoryName
          })
        })
      } else {
        $('.dropdown-header-used').removeClass('active')
        $('.quickClone').text('Clone to')
      }

      if (!mainRepoList || mainRepoList.length === 0) {
        $('.dropdown-header-rest').removeClass('active')
      } else {
        $('.dropdown-header-rest').addClass('active')
      }

      mainRepoList.forEach((repo) => {
        addRepoToList(repo.full_name)
      })
    }
  )
}

function searchRepositories(searchTerm) {
  var repositoryMatches = repoList.filter((item) => {
    return item.full_name.indexOf(searchTerm) > -1
  })

  $('.repoDropdown :not(.dropdown-header)').remove()
  $('.dropdown-header-used').removeClass('active')
  $('.dropdown-header-rest').removeClass('active')

  compileRepositoryList(repositoryMatches, searchTerm)
}

async function getGithubIssue(repo, closeOriginal) {
  const { currentRepo, error, githubApiUrl: currentGithubApiUrl, issueNumber, organization } = populateUrlMetadata(
    document.location.href
  )

  if (error) {
    return
  }

  githubApiUrl = currentGithubApiUrl

  const repoName = repo.split('/')[1]

  // Make the assumption that if users are using Kamino, then enable issues for the repo.
  // Otherwise Kamino will not function
  await ajaxRequest('PATCH', { has_issues: true, name: repoName }, `${githubApiUrl}repos/${repo}`)

  const issue = await ajaxRequest(
    'GET',
    '',
    `${githubApiUrl}repos/${organization}/${currentRepo}/issues/${issueNumber}`
  )

  await createGithubIssue(repo, issue.data, closeOriginal)
}

function getSyncStorage(defaults) {
  return new Promise((resolve) => {
    chrome.storage.sync.get(defaults, resolve)
  })
}

function getDatePart(timestamp) {
  return timestamp ? timestamp.split('T')[0] : ''
}

function applyCloneTextOptions(text, options) {
  let updatedText = text

  if (options.preventMentions) {
    updatedText = preventMentions(updatedText)
  }

  if (options.preventReferences) {
    updatedText = preventReferences(updatedText)
  }

  return updatedText
}

function formatClonedBody(body, options) {
  if (!body) {
    return ''
  }

  return options.addBlockquote ? addBlockQuote(body) : body
}

function createClonedIssueBody(oldIssue, sourceIssueReference, options) {
  const clonedBody = formatClonedBody(oldIssue.body, options)

  if (!options.addBlockquote) {
    return applyCloneTextOptions(clonedBody, options)
  }

  const createdAt = getDatePart(oldIssue.created_at)
  const attribution = `**[<img src="https://avatars.githubusercontent.com/u/${oldIssue.user.id}?s=17&v=4" width="17" height="17"> ${oldIssue.user.login}](${oldIssue.user.html_url})** cloned issue [${sourceIssueReference}](${oldIssue.html_url}) on ${createdAt}:`
  const newIssueBody = `${attribution}${clonedBody ? ` \n\n${clonedBody}` : ''}`

  return applyCloneTextOptions(newIssueBody, options)
}

function createClonedCommentBody(comment, options) {
  const clonedBody = formatClonedBody(comment.body, options)

  if (!options.addBlockquote) {
    return applyCloneTextOptions(clonedBody, options)
  }

  const createdAt = getDatePart(comment.created_at)
  const attribution = `**[<img src="https://avatars.githubusercontent.com/u/${comment.user.id}?s=17&v=4" width="17" height="17"> ${comment.user.login}](${comment.user.html_url})** [commented](${comment.html_url}) on ${createdAt}:`
  const newCommentBody = `${attribution}${clonedBody ? ` \n\n${clonedBody}` : ''}`

  return applyCloneTextOptions(newCommentBody, options)
}

async function createGithubIssue(repo, oldIssue, closeOriginal) {
  const { currentRepo, error, githubApiUrl: currentGithubApiUrl, issueNumber, organization } = populateUrlMetadata(
    document.location.href
  )

  if (error) {
    return
  }

  githubApiUrl = currentGithubApiUrl

  const options = await getSyncStorage({
    addBlockquote: true,
    preventMentions: false,
    preventReferences: false,
  })

  const newIssue = {
    title: oldIssue.title,
    body: createClonedIssueBody(oldIssue, `${organization}/${currentRepo}#${issueNumber}`, options),
    labels: oldIssue.labels,
  }
  const response = await ajaxRequest('POST', newIssue, `${githubApiUrl}repos/${repo}/issues`)
  await cloneOldIssueComments(
    response.data.number,
    repo,
    `${githubApiUrl}repos/${organization}/${currentRepo}/issues/${issueNumber}/comments?per_page=100`
  )

  await commentOnIssue(repo, response.data, closeOriginal)

  return response
}

async function cloneOldIssueComments(newIssue, repo, url) {
  const options = await getSyncStorage({
    addBlockquote: true,
    cloneComments: false,
    preventMentions: false,
    preventReferences: false,
  })

  if (!options.cloneComments) {
    return null
  }

  const response = await ajaxRequest('GET', '', url)

  if (!response || !response.data || response.data.length === 0) {
    return response
  }

  for (const current of response.data) {
    const comment = {
      body: createClonedCommentBody(current, options),
    }

    await ajaxRequest('POST', comment, `${githubApiUrl}repos/${repo}/issues/${newIssue}/comments`)
  }

  return response
}

async function closeGithubIssue() {
  const issueToClose = {
    state: 'closed',
  }

  const { currentRepo, error, githubApiUrl: currentGithubApiUrl, issueNumber, organization } = populateUrlMetadata(
    document.location.href
  )

  if (error) {
    return
  }

  githubApiUrl = currentGithubApiUrl

  await ajaxRequest('PATCH', issueToClose, `${githubApiUrl}repos/${organization}/${currentRepo}/issues/${issueNumber}`)
}

async function commentOnIssue(repo, newIssue, closeOriginal) {
  const {
    currentRepo,
    error,
    githubApiUrl: currentGithubApiUrl,
    issueNumber,
    organization,
  } = populateUrlMetadata(document.location.href)

  if (error) {
    return
  }

  githubApiUrl = currentGithubApiUrl

  const newIssueLink = `[${repo}](${newIssue.html_url})`
  const comment = {
    body: closeOriginal
      ? `Kamino closed and cloned this issue to ${newIssueLink}`
      : `Kamino cloned this issue to ${newIssueLink}`,
  }

  const item = await getSyncStorage({
    disableCommentsOnOriginal: false,
  })

  if (!item.disableCommentsOnOriginal) {
    await ajaxRequest('POST', comment, `${githubApiUrl}repos/${organization}/${currentRepo}/issues/${issueNumber}/comments`)
  }

  if (closeOriginal) {
    await closeGithubIssue()
  }

  goToIssueList(repo, newIssue.number, organization, currentRepo)
}

function goToIssueList(repo, issueNumber, org, oldRepo) {
  const { githubOrigin } = populateUrlMetadata(document.location.href)
  chrome.runtime.sendMessage(
    { repo: repo, issueNumber: issueNumber, organization: org, oldRepo: oldRepo, githubOrigin },
    () => {}
  )
}

function delay(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds))
}

function shouldRetryAjax(xhr, textStatus) {
  if (textStatus === 'timeout') {
    return true
  }

  if (!xhr) {
    return false
  }

  if ([429, 502, 503, 504].includes(xhr.status)) {
    return true
  }

  return xhr.status === 403
}

function makeAjaxRequest(settings) {
  return new Promise((resolve, reject) => {
    $.ajax(settings)
      .done((data, status, header) => {
        resolve({
          data: data,
          status: status,
          header: header,
        })
      })
      .fail((xhr, textStatus, errorThrown) => {
        reject({ xhr, textStatus, errorThrown })
      })
  })
}

async function ajaxRequest(type, data, url, options = {}) {
  const item = await getSyncStorage({
    githubToken: '',
  })
  const retryLimit = options.retryLimit ?? 3

  token = item.githubToken

  for (let attempt = 0; attempt <= retryLimit; attempt += 1) {
    try {
      return await makeAjaxRequest({
        type: type,
        beforeSend: (request) => {
          request.setRequestHeader('Authorization', `token ${token}`)
          request.setRequestHeader('Content-Type', 'application/json')
        },
        data: JSON.stringify(data),
        timeout: options.timeout ?? 30000,
        url: url,
      })
    } catch (error) {
      if (attempt === retryLimit || !shouldRetryAjax(error.xhr, error.textStatus)) {
        throw error
      }

      await delay(1000 * (attempt + 1))
    }
  }
}

function addRepoToList(repoFullName, section) {
  // replace slashes and periods because they aren't valid HTML ids
  const periodReplace = repoFullName.replace(/\./g, '_').replace(/\//g, '_')
  const listItem = `<li data-toggle="modal" id="${periodReplace}" data-target="#kaminoModal"><a class="repoItem" href="#" title="${repoFullName}">${repoFullName}</a></li>`

  if (section === 'used') {
    if ($(`#${periodReplace}`).length === 0) {
      $('.dropdown-header-rest').before(listItem)
    }
  } else {
    $('.repoDropdown').append(listItem)
  }

  $(`#${periodReplace}`).bind('click', () => {
    itemClick(repoFullName)
  })
}

function addToMostUsed(repo) {
  chrome.storage.sync.get(
    {
      mostUsed: [],
    },
    (item) => {
      if (
        item.mostUsed.find((e) => {
          return e === repo
        })
      ) {
        const index = item.mostUsed.indexOf(repo)

        item.mostUsed.splice(index, 1)
        item.mostUsed.unshift(repo)

        if (item.mostUsed.length > 5) {
          item.mostUsed.pop()
        }
      } else {
        item.mostUsed.unshift(repo)

        if (item.mostUsed.length > 5) {
          item.mostUsed.pop()
        }
      }

      chrome.storage.sync.set({
        mostUsed: item.mostUsed,
      })
    }
  )
}

function openDropdown() {
  if ($('.btn-group').hasClass('open')) {
    $('.btn-group').removeClass('open')
  } else {
    $('.btn-group').addClass('open')
  }
}

function itemClick(repo) {
  addToMostUsed(repo)

  $('.cloneAndClose').attr('data-repo', repo)
  $('.cloneAndKeepOpen').attr('data-repo', repo)
  $('.confirmText').text(
    `Are you sure you want to clone this issue to ${repo}? Choose whether to clone and close or clone and keep the original issue open.`
  )
  toggleModal(true)
}

function toggleModal(open) {
  if (open) {
    $('#kaminoModal').addClass('in')
    $('#kaminoModal').css('display', 'block')
  } else {
    $('#kaminoModal').removeClass('in')
    $('#kaminoModal').css('display', '')
  }
}