Skip to content

Commit

Permalink
feat(github): add support for new issues panel (#2353)
Browse files Browse the repository at this point in the history 
* chore(github): apply format

* feat(github): add support for new issues panel

* fix(github): add uniqueness in rendering

* fix(github): add case check for double rendering
  • Loading branch information
@askides
askides authored Nov 26, 2024
1 parent 073a7c9 commit cdf3466
Showing 1 changed file with 115 additions and 61 deletions.
176 changes: 115 additions & 61 deletions src/content/github.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,130 +3,184 @@
* @urlAlias github.com
* @urlRegex *://github.com/*
*/
"use strict";
'use strict'

// We need it to get the issue name, the tag value is being changed dynamically
const getPaneDescription = async (elem) => {
return new Promise((resolve) => {
const description = setInterval(() => {
const titleElem = elem.querySelector("#__primerPortalRoot__ bdi");
const numElem = titleElem.parentElement.lastChild;
const titleElem = elem.querySelector('#__primerPortalRoot__ bdi')
const numElem = titleElem.parentElement.lastChild

if (!!titleElem.textContent) {
clearInterval(description);
resolve(`${numElem.textContent} ${titleElem.textContent.trim()}`);
clearInterval(description)
resolve(`${numElem.textContent} ${titleElem.textContent.trim()}`)
}
}, 1000);
});
};
}, 1000)
})
}

// Issue and Pull Request Page
togglbutton.render(
"#partial-discussion-sidebar",
'#partial-discussion-sidebar:not(.toggl)',
{ observe: true },
function (elem) {
const numElem = $(".gh-header-number");
const titleElem = $(".js-issue-title");
const projectElem = $("h1.public strong a, h1.private strong a");
const existingTag = $(".discussion-sidebar-item.toggl");
const numElem = $('.gh-header-number')
const titleElem = $('.js-issue-title')
const projectElem = $('h1.public strong a, h1.private strong a')
const existingTag = $('.discussion-sidebar-item.toggl')

// Check for existing tag, create a new one if one doesn't exist or is not the first one
// We want button to be the first one because it looks different from the other sidebar items
// and looks very weird between them.

if (existingTag) {
if (existingTag.parentNode.firstChild.classList.contains("toggl")) {
return;
if (existingTag.parentNode.firstChild.classList.contains('toggl')) {
return
}
existingTag.parentNode.removeChild(existingTag);
existingTag.parentNode.removeChild(existingTag)
}

let description = titleElem.textContent;
let description = titleElem.textContent
if (numElem !== null) {
description = numElem.textContent + " " + description.trim();
description = numElem.textContent + ' ' + description.trim()
}

const div = document.createElement("div");
div.classList.add("discussion-sidebar-item", "toggl");
const div = document.createElement('div')
div.classList.add('discussion-sidebar-item', 'toggl')

const link = togglbutton.createTimerLink({
className: "github",
className: 'github',
description: description,
projectName: projectElem && projectElem.textContent,
});
})

div.appendChild(link);
elem.prepend(div);
}
);
div.appendChild(link)
elem.prepend(div)
},
)

// Issue Beta
togglbutton.render(
'[data-testid="issue-viewer-metadata-container"]:not(.toggl)',
{ observe: true },
function (elem) {
// This is needed as for this case it will enter in the "Project Page side pane" case.
if ($('[data-testid="side-panel-focus-target"]')) {
return
}

const titleElem = $('[data-testid="issue-title"]')
const projectElem = $('[data-testid="project-title"]')
const existingTag = $('.discussion-sidebar-item.toggl')

const numElem = titleElem.parentElement.querySelector('span')

if (existingTag) {
if (existingTag.parentNode.firstChild.classList.contains('toggl')) {
return
}
existingTag.parentNode.removeChild(existingTag)
}

let description = titleElem.textContent

if (numElem !== null) {
description = numElem.textContent + ' ' + description.trim()
}

const elementOfBase = document.querySelector(
'[data-testid="sidebar-section"]',
)

const div = document.createElement('div')
div.className = elementOfBase.className
div.classList.add('discussion-sidebar-item', 'toggl')
div.style.paddingLeft = '8px'
div.style.paddingRight = '8px'

const link = togglbutton.createTimerLink({
className: 'github',
description: description,
projectName: projectElem && projectElem.textContent,
})

div.appendChild(link)
elem.prepend(div)
},
)

// Project Page side pane
togglbutton.render(
'div[role="dialog"]:not(.toggl)',
{ observe: true },
async function (elem) {
const projectElem = document.querySelector("div[role='navigation'] h1");
const projectElem = document.querySelector("div[role='navigation'] h1")

const description = await getPaneDescription(elem);
const targetParent = document.querySelector("div[data-testid='issue-viewer-metadata-container']");
const targetChildSection = targetParent && targetParent.querySelector("div[data-testid='sidebar-section']");
const description = await getPaneDescription(elem)
const targetParent = document.querySelector(
"div[data-testid='issue-viewer-metadata-container']",
)
const targetChildSection =
targetParent &&
targetParent.querySelector("div[data-testid='sidebar-section']")

if (targetChildSection === null) {
return;
return
}

const div = document.createElement("div");
div.className = targetChildSection.className;
div.style.paddingLeft = "8px";
const div = document.createElement('div')
div.className = targetChildSection.className
div.style.paddingLeft = '8px'

const link = togglbutton.createTimerLink({
className: "github",
className: 'github',
description: description,
projectName: projectElem ? projectElem.textContent.trim() : "",
});
projectName: projectElem ? projectElem.textContent.trim() : '',
})

div.appendChild(link);
targetParent.prepend(div);
}
);
div.appendChild(link)
targetParent.prepend(div)
},
)

// Project Page
togglbutton.render(
".js-project-card-details .js-comment:not(.toggl)",
'.js-project-card-details .js-comment:not(.toggl)',
{ observe: true },
function (elem) {
const getDescription = () => {
const titleElem = $(".js-issue-title");
const titleElem = $('.js-issue-title')

if (!titleElem) {
return "";
return ''
}
const issueNumberElem = $(".js-issue-title + span");
const issueTitle = titleElem.textContent.trim();
const issueNumberElem = $('.js-issue-title + span')
const issueTitle = titleElem.textContent.trim()

// Check if the text starts with a '#' followed by digits, indicating an issue number
if (issueNumberElem && /^#\d+/.test(issueNumberElem.textContent)) {
return issueNumberElem.textContent.trim() + " " + issueTitle;
return issueNumberElem.textContent.trim() + ' ' + issueTitle
}

return issueTitle;
};
return issueTitle
}

const projectElem = $("h1.public strong a, h1.private strong a");
const projectElem = $('h1.public strong a, h1.private strong a')

const link = togglbutton.createTimerLink({
className: "github",
className: 'github',
description: getDescription,
projectName: projectElem && projectElem.textContent,
});
})

const wrapper = createTag(
"div",
"discussion-sidebar-item js-discussion-sidebar-item"
);
wrapper.appendChild(link);

const target = $(".discussion-sidebar-item");
target.parentNode.insertBefore(wrapper, target);
}
);
'div',
'discussion-sidebar-item js-discussion-sidebar-item',
)
wrapper.appendChild(link)

const target = $('.discussion-sidebar-item')
target.parentNode.insertBefore(wrapper, target)
},
)

0 comments on commit cdf3466

Please sign in to comment.