Open jira-issues in Script Kit

/*
# 🏷️ My Jira issues
- Lists the last 10 issues assigned to me
- You can open the issue in jira
- When selecting an issue, displays a widget on the screen that contains the issue data
- default shortcut to run the script: `cmd+option+shift+j`
*/
// Name: 🏷️ Jira issues
// Description: List issues assigned to me in Jira
// Shortcut: cmd+option+shift+j
// Author: WaelNalouti
import "@johnlindquist/kit";
const JIRA_HOST = await env(
"JIRA_HOST_URL",
"jira host url: exemple.atlassian.net"
);
const JIRA_USERNAME = await env("JIRA_USERNAME", "your jira username");
const AUTH = await env("AUTH", "your jira acces token");
const JIRA_APP_URL = `${JIRA_HOST}/browse`;
const JIRA_API_URL = `${JIRA_HOST}/rest/api/latest`;
const JIRA_ISSUES_QUERY = `/search?orderBy=-created&jql=assignee=%22${JIRA_USERNAME.replaceAll(
" ",
"%20"
)}%22&maxResults=10&startAt=0`;
let headersList = {
Authorization: AUTH,
};
let response = await get(`${JIRA_API_URL}${JIRA_ISSUES_QUERY}`, {
headers: headersList,
});
let data = await response.data;
let issuesData = data.issues.map((issue) => ({
key: issue.key,
summary: issue.fields.summary,
issuetype: issue.fields.issuetype,
project: issue.fields.project,
created: issue.fields.created,
priority: issue.fields.priority,
description: issue.fields.description,
creator: issue.fields.creator,
status: issue.fields.status,
}));
const selectedIssue = await arg("Select an issue to open in browser", () => {
return issuesData.map((issue) => ({
name: issue.summary,
icon: issue.issuetype.iconUrl,
description: `[${issue.status.statusCategory.name}] - ${issue.project.name}/${issue.key}`,
value: issue.key,
preview: () =>
`
<div class="p-7 font-mono">
<div class="flex text-xs mb-2">
<img src="${issue.issuetype.iconUrl}" width="16" height="16"/>
<p class="ml-2">${issue.issuetype.name}</p>
<p cless="pl-4">[${issue.status.statusCategory.name}]</p>
</div>
<h1>
${issue.summary}
</h1>
<div class="border-b-4 border-dashed border-gray-900 mt-4 mb-4"></div>
<div class='grid grid-cols-2 gap-4 text-xs items-center'>
<p>Project: <b>${issue.project.name}</b></p>
<p>Key: <b>${issue.key}</b></p>
</div>
<div class='grid grid-cols-2 mt-4 mb-4 gap-2 items-center text-xs'>
<div>
created by:
<div class="flex mb-2">
<img src="${
issue.creator.avatarUrls["16x16"]
}" class="mr-2 object-scale-down" width="16" height="16"/>
<b>${issue.creator.displayName}</b>
</div>
</div>
<div class="mb-2">
created at:
<p>
<b>${new Date(issue.created).toLocaleString()}</b>
</p>
</div>
</div>
<div class="border-b-2 border-dashed border-gray-900 mt-4 mb-4"></div>
<a href="${JIRA_APP_URL}/${issue.key}">
Open issue in jira
</a>
<p class="text-s mt-4 whitespace-pre-wrap">${
issue.description ||
"<span class='opacity-20'>No description for this task 🌵</span>"
}</p>
</div>
`,
}));
});
let issueDataRes = await fetch(`${JIRA_API_URL}/issue/${selectedIssue}`, {
method: "GET",
headers: headersList,
});
let issueData = await issueDataRes.json();
let issue = {
key: issueData.key,
summary: issueData.fields.summary,
issuetype: issueData.fields.issuetype,
project: issueData.fields.project,
created: issueData.fields.created,
priority: issueData.fields.priority,
description: issueData.fields.description,
creator: issueData.fields.creator,
status: issueData.fields.status,
};
await widget(
`
<div class="p-7 font-mono">
<div class="flex text-xs mb-2">
<img src="${issue.issuetype.iconUrl}" width="16" height="16"/>
<p class="ml-2">${issue.issuetype.name}</p>
<p cless="pl-4">[${issue.status.statusCategory.name}]</p>
</div>
<h1>
${issue.summary}
</h1>
<div class="border-b-4 border-dashed border-gray-900 mt-4 mb-4"></div>
<div class='grid grid-cols-2 gap-4 text-xs items-center'>
<p>Project: <b>${issue.project.name}</b></p>
<p>Key: <b>${issue.key}</b></p>
</div>
<div class='grid grid-cols-2 mt-4 mb-4 gap-2 items-center text-xs'>
<div>
created by:
<div class="flex mb-2">
<img src="${
issue.creator.avatarUrls["16x16"]
}" class="mr-2 object-scale-down" width="16" height="16"/>
<b>${issue.creator.displayName}</b>
</div>
</div>
<div class="mb-2">
created at:
<p>
<b>${new Date(issue.created).toLocaleString()}</b>
</p>
</div>
</div>
<a href="${JIRA_APP_URL}/${selectedIssue}">
go to issue
</a>
<div class="border-b-2 border-dashed border-gray-900 mt-4 mb-4"></div>
<p class="text-s mt-4 whitespace-pre-wrap">${
issue.description ||
"<span class='opacity-20'>No description for this task 🌵"
}</p>
</div>
`,
{
alwaysOnTop: true,
opacity: 0.7,
roundedCorners: true,
hasShadow: true,
draggable: true,
backgroundColor: "#000",
// frame: true,
darkTheme: true,
useContentSize: true,
}
);