refactored: Improved types and small code improvements.

Signed-off-by: Marley Powell <Marley.Powell@exclaimer.com>
2021-11-10 14:53:40 +00:00
parent 1bd69aa3f3
commit 96c562bb22
8 changed files with 247 additions and 57 deletions
@@ -14,10 +14,16 @@
 * limitations under the License.
 */

+import {
+  DashboardPullRequest,
+  PolicyEvaluationStatus,
+  PolicyType,
+  PullRequestStatus,
+  PullRequestVoteStatus,
+} from '@backstage/plugin-azure-devops-common';
+
 import { MemoryRouter } from 'react-router';
-import { PullRequest } from '../../../../api/types';
 import { PullRequestCard } from './PullRequestCard';
-import { PullRequestStatus } from 'azure-devops-node-api/interfaces/GitInterfaces';
 import React from 'react';

 export default {
@@ -25,16 +31,17 @@ export default {
  component: PullRequestCard,
 };

-const pullRequest: PullRequest = {
+const pullRequest: DashboardPullRequest = {
  pullRequestId: 1,
  title:
    "feat(EXUX-4091): 🛂 Added the admin role authorization to the backend API's",
  description:
    'This PR contains the following updates:\n\n| Package | Type | Update | Change |\n|---|---|---|---|\n| [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) | devDependencies | major | [`4.33.0` -> `5.0.0`](https://renovatebot.com/diffs/npm/@typescript-eslint%2feslint-plugin/4.33.0/5.0.0) |\n| [@typescript-eslint/parser](https://github.com/typescript-eslint/typescrip',
-  link: '',
+  link: undefined,
  repository: {
+    id: undefined,
    name: 'backstage',
-    url: '',
+    url: undefined,
  },
  createdBy: {
    id: '',
@@ -44,31 +51,56 @@ const pullRequest: PullRequest = {
      'https://dev.azure.com/exclaimerltd/_api/_common/identityImage?id=e6c0634b-68d2-6e6f-aa7d-adccada23216',
  },
  reviewers: [
-    { displayName: 'Marley', imageUrl: '' },
-    { displayName: 'User 1', imageUrl: '' },
-    { displayName: 'User 2', imageUrl: '' },
+    {
+      id: undefined,
+      displayName: 'Marley',
+      imageUrl: '',
+      isRequired: true,
+      isContainer: false,
+      voteStatus: PullRequestVoteStatus.Approved,
+    },
+    {
+      id: undefined,
+      displayName: 'User 1',
+      imageUrl: '',
+      isRequired: false,
+      isContainer: false,
+      voteStatus: PullRequestVoteStatus.WaitingForAuthor,
+    },
+    {
+      id: undefined,
+      displayName: 'User 2',
+      imageUrl: '',
+      isRequired: true,
+      isContainer: false,
+      voteStatus: PullRequestVoteStatus.NoVote,
+    },
  ],
  policies: [
    {
-      type: 'Build',
-      status: 'Running',
+      id: undefined,
+      type: PolicyType.Build,
+      status: PolicyEvaluationStatus.Running,
      text: 'Build: UI (running)',
+      link: undefined,
    },
    {
-      type: 'MinimumReviewers',
+      id: undefined,
+      type: PolicyType.MinimumReviewers,
      text: 'Minimum number of reviewers (2)',
-      status: '',
+      status: undefined,
+      link: undefined,
    },
    {
-      type: 'Comments',
+      id: undefined,
+      type: PolicyType.Comments,
      text: 'Comment requirements',
-      status: '',
+      status: undefined,
+      link: undefined,
    },
  ],
  hasAutoComplete: true,
  creationDate: new Date(Date.now() - 10000000).toISOString(),
-  sourceRefName: '',
-  targetRefName: '',
  status: PullRequestStatus.Active,
  isDraft: false,
 };
@@ -18,8 +18,8 @@ import { Card, CardContent, CardHeader, Link } from '@material-ui/core';

 import { AutoCompleteIcon } from '../AutoCompleteIcon';
 import { Avatar } from '@backstage/core-components';
+import { DashboardPullRequest } from '@backstage/plugin-azure-devops-common';
 import { DateTime } from 'luxon';
-import { PullRequest } from '../../../../api/types';
 import { PullRequestCardPolicies } from './PullRequestCardPolicies';
 import { PullRequestCardReviewers } from './PullRequestCardReviewers';
 import React from 'react';
@@ -53,7 +53,7 @@ const useStyles = makeStyles(
 );

 type PullRequestCardProps = {
-  pullRequest: PullRequest;
+  pullRequest: DashboardPullRequest;
  simplified?: boolean;
 };

@@ -75,21 +75,23 @@ export const PullRequestCard = ({
  const subheader = (
    <span>
      <Link
-        href={pullRequest.repository.url}
+        href={pullRequest.repository?.url}
        color="inherit"
        target="_blank"
        rel="noopener noreferrer"
      >
-        {pullRequest.repository.name}
+        {pullRequest.repository?.name}
      </Link>{' '}
-      · {DateTime.fromISO(pullRequest.creationDate.toString()).toRelative()}
+      ·{' '}
+      {pullRequest.creationDate &&
+        DateTime.fromISO(pullRequest.creationDate).toRelative()}
    </span>
  );

  const avatar = (
    <Avatar
-      displayName={pullRequest.createdBy.displayName}
-      picture={pullRequest.createdBy.imageUrl}
+      displayName={pullRequest.createdBy?.displayName}
+      picture={pullRequest.createdBy?.imageUrl}
      customStyles={{ width: '2.5rem', height: '2.5rem', fontSize: '1rem' }}
    />
  );
@@ -97,7 +99,10 @@ export const PullRequestCard = ({
  const classes = useStyles();

  return (
-    <Card classes={{ root: classes.card }}>
+    <Card
+      classes={{ root: classes.card }}
+      data-pull-request-id={pullRequest.pullRequestId}
+    >
      <CardHeader
        avatar={avatar}
        title={title}
@@ -113,12 +118,16 @@ export const PullRequestCard = ({

      {!simplified && (
        <CardContent className={classes.content}>
-          <PullRequestCardPolicies
-            policies={pullRequest.policies}
-            className={classes.policies}
-          />
+          {pullRequest.policies && (
+            <PullRequestCardPolicies
+              policies={pullRequest.policies}
+              className={classes.policies}
+            />
+          )}

-          <PullRequestCardReviewers reviewers={pullRequest.reviewers} />
+          {pullRequest.reviewers && (
+            <PullRequestCardReviewers reviewers={pullRequest.reviewers} />
+          )}
        </CardContent>
      )}
    </Card>
@@ -14,6 +14,11 @@
 * limitations under the License.
 */

+import {
+  Policy,
+  PolicyEvaluationStatus,
+  PolicyType,
+} from '@backstage/plugin-azure-devops-common';
 import {
  PolicyInProgressIcon,
  PolicyIssueIcon,
@@ -21,25 +26,24 @@ import {
  PullRequestCardPolicy,
 } from './PullRequestCardPolicy';

-import { Policy } from '../../../../api/types';
 import React from 'react';

 function getPullRequestCardPolicy(policy: Policy): JSX.Element | null {
  switch (policy.type) {
-    case 'Build':
+    case PolicyType.Build:
      switch (policy.status) {
-        case 'Running':
+        case PolicyEvaluationStatus.Running:
          return (
            <PullRequestCardPolicy
              policy={policy}
              icon={<PolicyInProgressIcon />}
            />
          );
-        case 'Rejected':
+        case PolicyEvaluationStatus.Rejected:
          return (
            <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
          );
-        case 'Queued':
+        case PolicyEvaluationStatus.Queued:
          return (
            <PullRequestCardPolicy
              policy={policy}
@@ -49,12 +53,12 @@ function getPullRequestCardPolicy(policy: Policy): JSX.Element | null {
        default:
          return null;
      }
-    case 'MinimumReviewers':
+    case PolicyType.MinimumReviewers:
      return (
        <PullRequestCardPolicy policy={policy} icon={<PolicyRequiredIcon />} />
      );
-    case 'Status':
-    case 'Comments':
+    case PolicyType.Status:
+    case PolicyType.Comments:
      return (
        <PullRequestCardPolicy policy={policy} icon={<PolicyIssueIcon />} />
      );
@@ -18,7 +18,7 @@ import { styled, withStyles } from '@material-ui/core/styles';

 import CancelIcon from '@material-ui/icons/Cancel';
 import GroupWorkIcon from '@material-ui/icons/GroupWork';
-import { Policy } from '../../../../api/types';
+import { Policy } from '@backstage/plugin-azure-devops-common';
 import React from 'react';
 import WatchLaterIcon from '@material-ui/icons/WatchLater';

@@ -57,7 +57,7 @@ const PullRequestCardPolicyContainer = styled('div')({

 type PullRequestCardPolicyProps = {
  policy: Policy;
-  icon: React.ReactNode;
+  icon: JSX.Element;
 };

 export const PullRequestCardPolicy = ({
@@ -16,8 +16,7 @@

 import { Avatar } from '@backstage/core-components';
 import React from 'react';
-import { Reviewer } from '../../../../api/types';
-import { Tooltip } from '@material-ui/core';
+import { Reviewer } from '@backstage/plugin-azure-devops-common';

 type PullRequestCardReviewerProps = {
  reviewer: Reviewer;
@@ -26,16 +25,14 @@ type PullRequestCardReviewerProps = {
 export const PullRequestCardReviewer = ({
  reviewer,
 }: PullRequestCardReviewerProps) => (
-  <Tooltip title={reviewer.displayName}>
-    <Avatar
-      displayName={reviewer.displayName}
-      picture={reviewer.imageUrl}
-      customStyles={{
-        width: '2.5rem',
-        height: '2.5rem',
-        fontSize: '1rem',
-        border: '0.3rem solid silver',
-      }}
-    />
-  </Tooltip>
+  <Avatar
+    displayName={reviewer.displayName}
+    picture={reviewer.imageUrl}
+    customStyles={{
+      width: '2.5rem',
+      height: '2.5rem',
+      fontSize: '1rem',
+      border: '0.3rem solid silver',
+    }}
+  />
 );
@@ -14,9 +14,13 @@
 * limitations under the License.
 */

+import {
+  PullRequestVoteStatus,
+  Reviewer,
+} from '@backstage/plugin-azure-devops-common';
+
 import { PullRequestCardReviewer } from './PullRequestCardReviewer';
 import React from 'react';
-import { Reviewer } from '../../../../api/types';
 import { styled } from '@material-ui/core/styles';

 const PullRequestCardReviewersContainer = styled('div')({
@@ -34,8 +38,14 @@ export const PullRequestCardReviewers = ({
  reviewers,
 }: PullRequestCardReviewersProps) => (
  <PullRequestCardReviewersContainer>
-    {reviewers.map(reviewer => (
+    {reviewers.filter(reviewerFilter).map(reviewer => (
      <PullRequestCardReviewer reviewer={reviewer} />
    ))}
  </PullRequestCardReviewersContainer>
 );
+
+function reviewerFilter(reviewer: Reviewer): boolean {
+  return reviewer.voteStatus === PullRequestVoteStatus.NoVote
+    ? !!reviewer.isRequired
+    : !reviewer.isContainer;
+}
@@ -14,10 +14,23 @@
 * limitations under the License.
 */

-import { PullRequest } from '../../../api/types';
+import {
+  DashboardPullRequest,
+  Team,
+} from '@backstage/plugin-azure-devops-common';

 export interface PullRequestGroup {
  title: string;
-  pullRequests: PullRequest[];
+  pullRequests: DashboardPullRequest[];
+  simplified?: boolean;
+}
+
+export type PullRequestFilter = (pullRequest: DashboardPullRequest) => boolean;
+
+export type TeamFilter = (team: Team) => boolean;
+
+export interface PullRequestGroupConfig {
+  title: string;
+  filter: PullRequestFilter;
  simplified?: boolean;
 }