@immobiliarelabs/backstage-plugin-gitlab
Version:
109 lines (106 loc) • 4.34 kB
JavaScript
import { Progress, Table, Avatar, StatusAborted, StatusOK, StatusPending } from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import Alert from '@material-ui/lab/Alert';
import React from 'react';
import { useAsync } from 'react-use';
import { GitlabCIApiRef } from '../../../api/GitlabCIApi.esm.js';
import { getElapsedTime } from '../../utils.esm.js';
import '@gitbeaker/rest';
import 'dayjs';
import { gitlabProjectId, gitlabProjectSlug, gitlabInstance } from '../../gitlabAppData.esm.js';
import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
import { gitlabTranslationRef } from '../../../translation.esm.js';
import { Box, Typography } from '@material-ui/core';
import Link from '@material-ui/core/Link';
function AuthorColumn(issueObject) {
return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
Avatar,
{
customStyles: { width: 32, height: 32 },
picture: issueObject.author.avatar_url,
displayName: issueObject.author.username
}
), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", noWrap: true }, /* @__PURE__ */ React.createElement(Box, { ml: 1, component: "span" }, /* @__PURE__ */ React.createElement(Link, { href: issueObject.author.web_url, target: "_blank" }, issueObject.author.username))));
}
const IssueTitle = (issueObject) => {
return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", noWrap: true }, /* @__PURE__ */ React.createElement(Box, { ml: 1, component: "span" }, /* @__PURE__ */ React.createElement(Link, { href: issueObject.web_url, target: "_blank" }, issueObject.title)));
};
const DenseTable = ({
issuesObjects,
projectName
}) => {
const { t } = useTranslationRef(gitlabTranslationRef);
const IssueStateIndicator = (issueObject) => {
switch (issueObject.state) {
case "opened":
return /* @__PURE__ */ React.createElement(StatusPending, null, t("issuesTable.status.open"));
case "closed":
return /* @__PURE__ */ React.createElement(StatusOK, null, t("issuesTable.status.close"));
default:
return /* @__PURE__ */ React.createElement(StatusAborted, null);
}
};
const columns = [
{ title: t("issuesTable.columnsTitle.issueId"), field: "id" },
{ title: t("issuesTable.columnsTitle.title"), render: IssueTitle },
{ title: t("issuesTable.columnsTitle.author"), render: AuthorColumn },
{ title: t("issuesTable.columnsTitle.createdAt"), field: "created_at" },
{ title: t("issuesTable.columnsTitle.issueType"), field: "type" },
{
title: t("issuesTable.columnsTitle.issueStatus"),
render: IssueStateIndicator
}
];
const title = t("issuesTable.title", { projectName: projectName || "" });
const data = issuesObjects.map((issue) => ({
...issue,
created_at: getElapsedTime(issue.created_at)
}));
return /* @__PURE__ */ React.createElement(
Table,
{
title,
options: { search: true, paging: true },
columns,
data
}
);
};
const IssuesTable = ({}) => {
const project_id = gitlabProjectId();
const project_slug = gitlabProjectSlug();
const gitlab_instance = gitlabInstance();
const GitlabCIAPI = useApi(GitlabCIApiRef).build(
gitlab_instance || "gitlab.com"
);
const { value, loading, error } = useAsync(async () => {
const projectDetails = await GitlabCIAPI.getProjectDetails(
project_slug || project_id
);
if (!projectDetails)
throw new Error("wrong project_slug or project_id");
const summary = await GitlabCIAPI.getIssuesSummary(projectDetails.id);
if (!summary) {
throw new Error("gitlab issues is undefined!");
}
const renderData = {
data: summary,
projectName: projectDetails.name
};
return renderData;
}, []);
if (loading) {
return /* @__PURE__ */ React.createElement(Progress, null);
} else if (error) {
return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, error.message);
}
return /* @__PURE__ */ React.createElement(
DenseTable,
{
issuesObjects: value?.data || [],
projectName: value?.projectName
}
);
};
export { AuthorColumn, DenseTable, IssuesTable };
//# sourceMappingURL=IssuesTable.esm.js.map