@roadiehq/backstage-plugin-github-pull-requests
Version:
274 lines (271 loc) • 9.41 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useRef } from 'react';
import { debounce } from 'lodash';
import { Box, Typography, Tooltip, ButtonGroup, Button, TextField, InputAdornment, IconButton } from '@material-ui/core';
import GitHubIcon from '@material-ui/icons/GitHub';
import ClearIcon from '@material-ui/icons/Clear';
import SearchIcon from '@material-ui/icons/Search';
import { Table, MarkdownContent, MissingAnnotationEmptyState } from '@backstage/core-components';
import { isGithubSlugSet, GITHUB_PULL_REQUESTS_ANNOTATION } from '../../utils/isGithubSlugSet.esm.js';
import { isRoadieBackstageDefaultFilterSet } from '../../utils/isRoadieBackstageDefaultFilterSet.esm.js';
import { usePullRequests } from '../usePullRequests.esm.js';
import { getStatusIconType } from '../Icons.esm.js';
import { useEntity } from '@backstage/plugin-catalog-react';
import { getHostname } from '../../utils/githubUtils.esm.js';
import { GitHubAuthorizationWrapper } from '@roadiehq/github-auth-utils-react';
const generatedColumns = [
{
title: "ID",
field: "number",
highlight: true,
width: "150px",
render: (row) => /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: /* @__PURE__ */ jsxs("a", { target: "_blank", rel: "noopener noreferrer", href: row.url, children: [
"#",
row.number
] }) })
},
{
title: "Title",
field: "title",
highlight: true,
render: (row) => /* @__PURE__ */ jsxs(Typography, { variant: "body2", noWrap: true, children: [
getStatusIconType(row),
" ",
/* @__PURE__ */ jsx(Box, { ml: 1, component: "span", children: row.title })
] })
},
{
title: "Creator",
field: "creatorNickname",
highlight: true,
render: (row) => /* @__PURE__ */ jsx(Box, { fontWeight: "fontWeightBold", children: /* @__PURE__ */ jsx(
"a",
{
target: "_blank",
rel: "noopener noreferrer",
href: row.creatorProfileLink,
children: row.creatorNickname
}
) })
},
{
title: "Created",
field: "createdTime",
highlight: true,
render: (row) => /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: row.createdTime })
},
{
title: "Last updated",
field: "updatedTime",
highlight: true,
render: (row) => /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, children: row.updatedTime })
}
];
const PullRequestsTableView = ({
projectName,
loading,
pageSize,
page,
prData,
onChangePage,
onChangePageSize,
total,
totalResults,
StateFilterComponent,
SearchComponent
}) => {
return /* @__PURE__ */ jsx(
Table,
{
detailPanel: ({ rowData }) => /* @__PURE__ */ jsx(Box, { marginLeft: "14px", children: /* @__PURE__ */ jsx(
MarkdownContent,
{
content: rowData.body ?? "_No description provided._",
dialect: "gfm"
}
) }),
isLoading: loading,
options: { paging: true, search: false, pageSize, padding: "dense" },
totalCount: total,
page,
actions: [],
data: prData ?? [],
onPageChange: onChangePage,
onRowsPerPageChange: onChangePageSize,
title: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
Box,
{
position: "absolute",
left: "20px",
top: "17px",
width: "45%",
display: "flex",
alignItems: "center",
children: [
/* @__PURE__ */ jsx(GitHubIcon, {}),
/* @__PURE__ */ jsxs(
Box,
{
ml: 1,
display: "flex",
flexDirection: "row",
alignItems: "baseline",
children: [
/* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: projectName }),
totalResults > 1e3 && /* @__PURE__ */ jsx(
Tooltip,
{
title: `Search results are limited to a maximum of ${1e3.toLocaleString()}
items. To refine your results, consider adjusting the search query.`,
arrow: true,
children: /* @__PURE__ */ jsxs(
Typography,
{
variant: "body1",
noWrap: true,
color: "primary",
style: { marginLeft: 10, cursor: "pointer" },
children: [
"Total ",
totalResults.toLocaleString()
]
}
)
}
)
]
}
)
]
}
),
/* @__PURE__ */ jsxs(
Box,
{
position: "absolute",
right: "20px",
top: "15px",
width: "50%",
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
children: [
StateFilterComponent ? /* @__PURE__ */ jsx(StateFilterComponent, {}) : /* @__PURE__ */ jsx(Fragment, {}),
StateFilterComponent && SearchComponent ? /* @__PURE__ */ jsx(Box, { mr: 1 }) : /* @__PURE__ */ jsx(Fragment, {}),
SearchComponent ? /* @__PURE__ */ jsx(SearchComponent, {}) : /* @__PURE__ */ jsx(Fragment, {})
]
}
)
] }),
columns: generatedColumns
}
);
};
const PullRequests = (__props) => {
const { entity } = useEntity();
const projectName = isGithubSlugSet(entity);
const defaultFilter = isRoadieBackstageDefaultFilterSet(entity);
const [owner, repo] = (projectName ?? "/").split("/");
const [search, setSearch] = useState(`state:open ${defaultFilter}`);
const setSearchValueDebounced = useRef(debounce(setSearch, 500));
const onChangePRStatusFilter = (state) => {
if (state === "all") {
setSearch(
(currentSearch) => currentSearch.replace(/state:(open|closed)/g, "").trim()
);
} else {
setSearch(
(currentSearch) => currentSearch.search(/state:(open|closed)/g) === -1 ? `state:${state} ${currentSearch}` : currentSearch.replace(/state:(open|closed)/g, `state:${state}`)
);
}
};
const [tableProps, { retry, setPage, setPageSize }] = usePullRequests({
search,
owner,
repo
});
const StateFilterComponent = () => /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(ButtonGroup, { color: "primary", "aria-label": "text primary button group", children: [
/* @__PURE__ */ jsx(
Button,
{
color: search.search("state:open") !== -1 ? "primary" : "default",
onClick: () => onChangePRStatusFilter("open"),
children: "OPEN"
}
),
/* @__PURE__ */ jsx(
Button,
{
color: search.search("state:closed") !== -1 ? "primary" : "default",
onClick: () => onChangePRStatusFilter("closed"),
children: "CLOSED"
}
),
/* @__PURE__ */ jsx(
Button,
{
color: search.search("state") === -1 ? "primary" : "default",
onClick: () => onChangePRStatusFilter("all"),
children: "ALL"
}
)
] }) });
const SearchComponent = () => {
const [draftSearch, setDraftSearch] = useState(search);
return /* @__PURE__ */ jsx(Box, { width: 500, children: /* @__PURE__ */ jsx(
TextField,
{
fullWidth: true,
onChange: (event) => {
setDraftSearch(event.target.value);
setSearchValueDebounced.current(event.target.value);
},
placeholder: "Filter",
value: draftSearch,
InputProps: {
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small" }) }),
endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
IconButton,
{
disabled: !draftSearch,
onClick: () => {
setDraftSearch("");
setSearch("");
},
children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small", "aria-label": "clear" })
}
) })
}
}
) });
};
return /* @__PURE__ */ jsx(
PullRequestsTableView,
{
...tableProps,
StateFilterComponent,
SearchComponent,
loading: tableProps.loading,
retry,
onChangePageSize: setPageSize,
onChangePage: setPage
}
);
};
const PullRequestsTable = (__props) => {
const { entity } = useEntity();
const hostname = getHostname(entity);
const projectName = isGithubSlugSet(entity);
if (!projectName || projectName === "") {
return /* @__PURE__ */ jsx(
MissingAnnotationEmptyState,
{
annotation: GITHUB_PULL_REQUESTS_ANNOTATION
}
);
}
return /* @__PURE__ */ jsx(GitHubAuthorizationWrapper, { title: "Your Pull Requests", hostname, children: /* @__PURE__ */ jsx(PullRequests, {}) });
};
export { PullRequestsTable, PullRequestsTableView };
//# sourceMappingURL=PullRequestsTable.esm.js.map