diff --git a/plugins/github-issues/src/components/GitHubIssues/GitHubIssues.tsx b/plugins/github-issues/src/components/GitHubIssues/GitHubIssues.tsx index da31869000..1e50ececbf 100644 --- a/plugins/github-issues/src/components/GitHubIssues/GitHubIssues.tsx +++ b/plugins/github-issues/src/components/GitHubIssues/GitHubIssues.tsx @@ -41,7 +41,6 @@ export const GitHubIssues = ({ itemsPerRepo = 40, }: Props) => { const [isLoading, setIsLoading] = React.useState(true); - const [activeFilter, setActiveFilter] = React.useState>([]); const [issuesByRepository, setIssuesByRepository] = React.useState>(); @@ -49,62 +48,6 @@ export const GitHubIssues = ({ const { repositories } = useEntityGitHubRepositories(); const getIssues = useGetIssuesByRepoFromGitHub(); - const filters = React.useMemo( - () => - issuesByRepository - ? Object.keys(issuesByRepository) - .filter(repo => issuesByRepository[repo].issues.totalCount > 0) - .map(repo => ({ - label: `${repo} (${issuesByRepository[repo].issues.totalCount})`, - value: repo, - })) - : [], - [issuesByRepository], - ); - - const totalIssuesInGitHub = React.useMemo( - () => - issuesByRepository - ? Object.values(issuesByRepository).reduce( - (acc, { issues: { totalCount } }) => acc + totalCount, - 0, - ) - : 0, - [issuesByRepository], - ); - - const filteredRepos = React.useMemo( - () => - issuesByRepository && activeFilter.length - ? activeFilter.reduce( - (acc, val) => ({ - [val]: issuesByRepository[val], - ...acc, - }), - {}, - ) - : issuesByRepository, - [issuesByRepository, activeFilter], - ); - - const issues = React.useMemo( - () => - filteredRepos - ? Object.values(filteredRepos) - .map(({ issues: { edges } }) => edges) - .flat() - .sort((a, b) => { - if (a.node.updatedAt > b.node.updatedAt) { - return -1; - } else if (b.node.updatedAt > a.node.updatedAt) { - return 1; - } - return 0; - }) - : [], - [filteredRepos], - ); - const fetchGitHubIssues = React.useCallback(async () => { setIsLoading(true); const issuesByRepo = await getIssues(repositories, itemsPerRepo); @@ -139,11 +82,8 @@ export const GitHubIssues = ({ {isLoading && } ); diff --git a/plugins/github-issues/src/components/GitHubIssues/IssueCard/IssueCard.tsx b/plugins/github-issues/src/components/GitHubIssues/IssueCard/IssueCard.tsx index 73010d50c9..5b0abe79b3 100644 --- a/plugins/github-issues/src/components/GitHubIssues/IssueCard/IssueCard.tsx +++ b/plugins/github-issues/src/components/GitHubIssues/IssueCard/IssueCard.tsx @@ -16,7 +16,13 @@ import React, { FunctionComponent } from 'react'; import { DateTime } from 'luxon'; -import { Box, Paper, Typography, CardActionArea } from '@material-ui/core'; +import { + Box, + Paper, + Typography, + CardActionArea, + Link, +} from '@material-ui/core'; import Assignees from './Assignees'; import { CommentsCount } from './CommentsCount'; @@ -58,9 +64,12 @@ export const IssueCard: FunctionComponent = (props: Props) => { - + {repositoryName} - + diff --git a/plugins/github-issues/src/components/GitHubIssues/IssuesList/Filters/Filters.tsx b/plugins/github-issues/src/components/GitHubIssues/IssuesList/Filters/Filters.tsx index 7f654dd9e5..9a6ceb103f 100644 --- a/plugins/github-issues/src/components/GitHubIssues/IssuesList/Filters/Filters.tsx +++ b/plugins/github-issues/src/components/GitHubIssues/IssuesList/Filters/Filters.tsx @@ -14,9 +14,8 @@ * limitations under the License. */ import React from 'react'; -import { Select } from '@backstage/core-components'; -import { SelectedItems } from '@backstage/core-components'; -import { makeStyles, Box } from '@material-ui/core'; +import { Select, SelectedItems } from '@backstage/core-components'; +import { makeStyles, Box, Typography } from '@material-ui/core'; export type FilterItem = { label: string; @@ -26,6 +25,7 @@ export type FilterItem = { type Props = { items: Array; totalIssuesInGitHub: number; + placeholder: string; onChange: (active: Array) => void; }; @@ -33,9 +33,9 @@ const useStyles = makeStyles(theme => ({ filters: { margin: theme.spacing(0, 0, 2, 0), '& > div': { - width: '600px', + maxWidth: '800px', '& > div': { - maxWidth: '600px', + maxWidth: '800px', }, }, }, @@ -47,18 +47,22 @@ const checkSelectedItems: ( return onChange(active as Array); }; -export const Filters = ({ items, totalIssuesInGitHub, onChange }: Props) => { +export const Filters = ({ items, onChange, placeholder }: Props) => { const css = useStyles(); return (