From ec175f513c9e909dc514cfbbc7a71a0c4dc32ed4 Mon Sep 17 00:00:00 2001 From: tylerhekman-procore Date: Thu, 6 Apr 2023 02:53:34 -0700 Subject: [PATCH] Add card filter icons and tests Signed-off-by: tylerhekman-procore --- .changeset/great-ways-switch.md | 2 +- .../src/components/Card/Card.tsx | 6 + .../src/components/Card/CardHeader.tsx | 24 +- .../EntityTeamPullRequestsCard.test.tsx | 261 ++++++++++++++++++ .../EntityTeamPullRequestsContent.test.tsx | 261 ++++++++++++++++++ .../PullRequestCard/PullRequestCard.tsx | 10 +- 6 files changed, 555 insertions(+), 9 deletions(-) create mode 100644 plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx create mode 100644 plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx diff --git a/.changeset/great-ways-switch.md b/.changeset/great-ways-switch.md index 82ad1d7d26..96469dfade 100644 --- a/.changeset/great-ways-switch.md +++ b/.changeset/great-ways-switch.md @@ -4,5 +4,5 @@ Add a new "Archived" Filter Options to the Github Pull Requests Dashboard. -When toggling this option on, the dashboard will displays PRs in archived repositories. +When toggling this option on, the dashboard will display PRs from archived repositories. These PRs will not be displayed in the default filter. diff --git a/plugins/github-pull-requests-board/src/components/Card/Card.tsx b/plugins/github-pull-requests-board/src/components/Card/Card.tsx index 56e8c6a077..3a47fca696 100644 --- a/plugins/github-pull-requests-board/src/components/Card/Card.tsx +++ b/plugins/github-pull-requests-board/src/components/Card/Card.tsx @@ -25,6 +25,8 @@ type Props = { authorName: string; authorAvatar?: string; repositoryName: string; + isDraft: boolean; + repositoryIsArchived: boolean; }; const Card: FunctionComponent = (props: PropsWithChildren) => { @@ -36,6 +38,8 @@ const Card: FunctionComponent = (props: PropsWithChildren) => { authorName, authorAvatar, repositoryName, + isDraft, + repositoryIsArchived, children, } = props; @@ -51,6 +55,8 @@ const Card: FunctionComponent = (props: PropsWithChildren) => { authorName={authorName} authorAvatar={authorAvatar} repositoryName={repositoryName} + isDraft={isDraft} + repositoryIsArchived={repositoryIsArchived} /> {children} diff --git a/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx b/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx index 831423a464..bb6f3e564d 100644 --- a/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx +++ b/plugins/github-pull-requests-board/src/components/Card/CardHeader.tsx @@ -14,9 +14,11 @@ * limitations under the License. */ import React, { FunctionComponent } from 'react'; -import { Typography, Box } from '@material-ui/core'; +import { Typography, Box, Tooltip } from '@material-ui/core'; import { getElapsedTime } from '../../utils/functions'; import { UserHeader } from '../UserHeader'; +import { DraftPrIcon } from '../icons/DraftPr'; +import UnarchiveIcon from '@material-ui/icons/Unarchive'; type Props = { title: string; @@ -25,6 +27,8 @@ type Props = { authorName: string; authorAvatar?: string; repositoryName: string; + isDraft: boolean; + repositoryIsArchived: boolean; }; const CardHeader: FunctionComponent = (props: Props) => { @@ -35,6 +39,8 @@ const CardHeader: FunctionComponent = (props: Props) => { authorName, authorAvatar, repositoryName, + isDraft, + repositoryIsArchived, } = props; return ( @@ -45,6 +51,22 @@ const CardHeader: FunctionComponent = (props: Props) => { + + {isDraft && ( + + + + + + )} + {repositoryIsArchived && ( + + + + + + )} + {title} diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx new file mode 100644 index 0000000000..29594ea6d4 --- /dev/null +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsCard/EntityTeamPullRequestsCard.test.tsx @@ -0,0 +1,261 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { EntityTeamPullRequestsCard } from '../EntityTeamPullRequestsCard'; +import { PullRequestsColumn } from '../../utils/types'; +import { render } from '@testing-library/react'; +import { fireEvent } from '@testing-library/react'; + +jest.mock('../../hooks/useUserRepositoriesAndTeam', () => { + return { + useUserRepositoriesAndTeam: () => { + return { + loading: false, + repositories: ['team-login/team-repo'], + teamMembers: ['team-member'], + teamMembersOrganization: 'test-org', + }; + }, + }; +}); + +jest.mock('../../hooks/usePullRequestsByTeam', () => { + const buildPullRequest = ( + prTitle: string, + authorLogin: string, + repoName: string, + isDraft: boolean, + isArchived: boolean, + ) => { + return { + id: 'id', + title: prTitle, + url: 'url', + lastEditedAt: 'last-edited-at', + latestReviews: { + nodes: [], + }, + mergeable: true, + state: 'state', + reviewDecision: null, + createdAt: 'created-at', + repository: { + name: repoName, + owner: { + login: 'team-login', + }, + isArchived: isArchived, + }, + isDraft: isDraft, + author: { + login: authorLogin, + avatarUrl: 'avatar-url', + id: 'id', + email: 'email', + name: 'name', + }, + }; + }; + + const pullRequests: PullRequestsColumn[] = [ + { + title: 'column', + content: [ + buildPullRequest( + 'non-team-non-draft-non-archive', + 'non-team-member', + 'team-repo', + false, + false, + ), + buildPullRequest( + 'non-team-non-draft-is-archive', + 'non-team-member', + 'team-repo', + false, + true, + ), + buildPullRequest( + 'non-team-is-draft-non-archive', + 'non-team-member', + 'team-repo', + true, + false, + ), + buildPullRequest( + 'non-team-is-draft-is-archive', + 'non-team-member', + 'team-repo', + true, + true, + ), + buildPullRequest( + 'is-team-non-draft-non-archive', + 'team-member', + 'non-team-repo', + false, + false, + ), + buildPullRequest( + 'is-team-non-draft-is-archive', + 'team-member', + 'non-team-repo', + false, + true, + ), + buildPullRequest( + 'is-team-is-draft-non-archive', + 'team-member', + 'non-team-repo', + true, + false, + ), + buildPullRequest( + 'is-team-is-draft-is-archive', + 'team-member', + 'non-team-repo', + true, + true, + ), + ], + }, + ]; + + return { + usePullRequestsByTeam: () => { + return { + loading: false, + pullRequests: pullRequests, + refreshPullRequest: () => {}, + }; + }, + }; +}); + +describe('EntityTeamPullRequestsCard', () => { + it('should render', async () => { + await render(); + }); + + describe('non-team PRs', () => { + describe('non-draft PRs', () => { + it('should show non-team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, queryAllByTitle } = await render( + , + ); + expect(getByText('non-team-non-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + + it('should show non-team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('non-team-non-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + }); + + describe('draft PRs', () => { + it('should show draft non-team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + expect(getByText('non-team-is-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + + it('should show draft non-team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('non-team-is-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + }); + }); + + describe('team PRs', () => { + describe('non-draft PRs', () => { + it('should show team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + expect(getByText('is-team-non-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + + it('should show team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('is-team-non-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + }); + + describe('draft PRs', () => { + it('should show draft team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + expect(getByText('is-team-is-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + + it('should show draft team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('is-team-is-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + }); + }); +}); diff --git a/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx new file mode 100644 index 0000000000..a1bd051217 --- /dev/null +++ b/plugins/github-pull-requests-board/src/components/EntityTeamPullRequestsContent/EntityTeamPullRequestsContent.test.tsx @@ -0,0 +1,261 @@ +/* + * Copyright 2023 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import { EntityTeamPullRequestsContent } from '../EntityTeamPullRequestsContent'; +import { PullRequestsColumn } from '../../utils/types'; +import { render } from '@testing-library/react'; +import { fireEvent } from '@testing-library/react'; + +jest.mock('../../hooks/useUserRepositoriesAndTeam', () => { + return { + useUserRepositoriesAndTeam: () => { + return { + loading: false, + repositories: ['team-login/team-repo'], + teamMembers: ['team-member'], + teamMembersOrganization: 'test-org', + }; + }, + }; +}); + +jest.mock('../../hooks/usePullRequestsByTeam', () => { + const buildPullRequest = ( + prTitle: string, + authorLogin: string, + repoName: string, + isDraft: boolean, + isArchived: boolean, + ) => { + return { + id: 'id', + title: prTitle, + url: 'url', + lastEditedAt: 'last-edited-at', + latestReviews: { + nodes: [], + }, + mergeable: true, + state: 'state', + reviewDecision: null, + createdAt: 'created-at', + repository: { + name: repoName, + owner: { + login: 'team-login', + }, + isArchived: isArchived, + }, + isDraft: isDraft, + author: { + login: authorLogin, + avatarUrl: 'avatar-url', + id: 'id', + email: 'email', + name: 'name', + }, + }; + }; + + const pullRequests: PullRequestsColumn[] = [ + { + title: 'column', + content: [ + buildPullRequest( + 'non-team-non-draft-non-archive', + 'non-team-member', + 'team-repo', + false, + false, + ), + buildPullRequest( + 'non-team-non-draft-is-archive', + 'non-team-member', + 'team-repo', + false, + true, + ), + buildPullRequest( + 'non-team-is-draft-non-archive', + 'non-team-member', + 'team-repo', + true, + false, + ), + buildPullRequest( + 'non-team-is-draft-is-archive', + 'non-team-member', + 'team-repo', + true, + true, + ), + buildPullRequest( + 'is-team-non-draft-non-archive', + 'team-member', + 'non-team-repo', + false, + false, + ), + buildPullRequest( + 'is-team-non-draft-is-archive', + 'team-member', + 'non-team-repo', + false, + true, + ), + buildPullRequest( + 'is-team-is-draft-non-archive', + 'team-member', + 'non-team-repo', + true, + false, + ), + buildPullRequest( + 'is-team-is-draft-is-archive', + 'team-member', + 'non-team-repo', + true, + true, + ), + ], + }, + ]; + + return { + usePullRequestsByTeam: () => { + return { + loading: false, + pullRequests: pullRequests, + refreshPullRequest: () => {}, + }; + }, + }; +}); + +describe('EntityTeamPullRequestsContent', () => { + it('should render', async () => { + await render(); + }); + + describe('non-team PRs', () => { + describe('non-draft PRs', () => { + it('should show non-team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, queryAllByTitle } = await render( + , + ); + expect(getByText('non-team-non-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + + it('should show non-team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('non-team-non-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + }); + + describe('draft PRs', () => { + it('should show draft non-team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + expect(getByText('non-team-is-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + + it('should show draft non-team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('non-team-is-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + }); + }); + + describe('team PRs', () => { + describe('non-draft PRs', () => { + it('should show team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + expect(getByText('is-team-non-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + + it('should show team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('is-team-non-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(0); + }); + }); + + describe('draft PRs', () => { + it('should show draft team PRs for un-archived repos when archived option is not checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + expect(getByText('is-team-is-draft-non-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(0); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + + it('should show draft team PRs for archived repos when archived option is checked', async () => { + const { getByText, getAllByText, getByTitle, queryAllByTitle } = + await render(); + const teamToggle = getByTitle('Show PRs from your team'); + fireEvent.click(teamToggle); + const draftToggle = getByTitle('Show draft PRs'); + fireEvent.click(draftToggle); + const archiveToggle = getByTitle('Show archived repos'); + fireEvent.click(archiveToggle); + expect(getByText('is-team-is-draft-is-archive')).toBeInTheDocument(); + expect(getAllByText('non-team-repo')).toHaveLength(1); + expect(queryAllByTitle('Repository is archived')).toHaveLength(1); + expect(queryAllByTitle('Draft PR')).toHaveLength(1); + }); + }); + }); +}); diff --git a/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx b/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx index 51ee162555..fa3ce4eb9c 100644 --- a/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx +++ b/plugins/github-pull-requests-board/src/components/PullRequestCard/PullRequestCard.tsx @@ -52,21 +52,17 @@ const PullRequestCard: FunctionComponent = (props: Props) => { const commentsReviews = getCommentedReviews(reviews); const changeRequests = getChangeRequests(reviews); - // Resolved in this way to satisfy merge - Author: tylerhekman-procore - // This information should probably be moved into dedicated CardHeader fields - // instead of title prefixes - const cardTitleModifiers = [isDraft && '🔧 DRAFT', repositoryIsArchived && '📁 ARCHIVED'].filter(Boolean); - const cardTitle = cardTitleModifiers.length > 0 ? `(${cardTitleModifiers.join(' | ')}) - ${title}` : title; - return ( {!!approvedReviews.length && (