fix: variable name typo, dependencies and pr card rendering

Signed-off-by: Talita Gregory Nunes Freire <talita.freire@dazn.com>

plugins/github-pull-requests-board/package.json

@@ -38,12 +38,13 @@
     "@backstage/catalog-model": "^1.0.1",
     "@backstage/core-components": "^0.9.3",
     "@backstage/core-plugin-api": "^1.0.1",
+    "@backstage/integration": "^1.1.0",
     "@backstage/plugin-catalog-react": "^1.0.1",
     "@backstage/theme": "^0.2.15",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
-    "@octokit/rest": "^18.6.7",
+    "@octokit/rest": "^18.12.0",
     "moment": "^2.29.1",
     "react-use": "^17.2.4"
   },

plugins/github-pull-requests-board/src/components/TeamPullRequestsBoard/TeamPullRequestsBoard.tsx

@@ -25,30 +25,31 @@ import { Wrapper } from '../Wrapper';
 import { PullRequestCard } from '../PullRequestCard';
 import { usePullRequestsByTeam } from '../../hooks/usePullRequestsByTeam';
 import { PRCardFormating } from '../../utils/types';
-import { DraftPrIcon } from '../icons/DraftPr'
+import { DraftPrIcon } from '../icons/DraftPr';
 import { useUserRepositories } from '../../hooks/useUserRepositories';
 
 const TeamPullRequestsBoard: FunctionComponent = () => {
   const [infoCardFormat, setInfoCardFormat] = useState<PRCardFormating[]>([]);
   const { repositories } = useUserRepositories();
-  const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam(repositories);
+  const { loading, pullRequests, refreshPullRequests } =
+    usePullRequestsByTeam(repositories);
 
   const header = (
     <InfoCardHeader onRefresh={refreshPullRequests}>
       <PullRequestBoardOptions
-        onClickOption={(newFormats) => setInfoCardFormat(newFormats)}
+        onClickOption={newFormats => setInfoCardFormat(newFormats)}
         value={infoCardFormat}
         options={[
           {
             icon: <DraftPrIcon />,
             value: 'draft',
-            ariaLabel: 'Show draft PRs'
+            ariaLabel: 'Show draft PRs',
           },
           {
             icon: <FullscreenIcon />,
             value: 'fullscreen',
-            ariaLabel: 'Info card is set to fullscreen'
-          }
+            ariaLabel: 'Info card is set to fullscreen',
+          },
         ]}
       />
     </InfoCardHeader>
@@ -67,44 +68,36 @@ const TeamPullRequestsBoard: FunctionComponent = () => {
               key={columnTitle}
               fullscreen={infoCardFormat.includes('fullscreen')}
             >
-              <Typography variant="overline">
-                {columnTitle}
-              </Typography>
-              {content.map(({
-                id,
-                title,
-                createdAt,
-                lastEditedAt,
-                author,
-                url,
-                latestReviews,
-                repository,
-                isDraft
-              }, index) => (
-                isDraft ? (infoCardFormat.includes('draft') === isDraft) &&
-                  <PullRequestCard
-                    key={`pull-request-${id}-${index}`}
-                    title={title}
-                    createdAt={createdAt}
-                    updatedAt={lastEditedAt}
-                    author={author}
-                    url={url}
-                    reviews={latestReviews.nodes}
-                    repositoryName={repository.name}
-                    isDraft={isDraft}
-                  />
-                  : <PullRequestCard
-                    key={`pull-request-${id}-${index}`}
-                    title={title}
-                    createdAt={createdAt}
-                    updatedAt={lastEditedAt}
-                    author={author}
-                    url={url}
-                    reviews={latestReviews.nodes}
-                    repositoryName={repository.name}
-                    isDraft={isDraft}
-                  />
-              ))}
+              <Typography variant="overline">{columnTitle}</Typography>
+              {content.map(
+                (
+                  {
+                    id,
+                    title,
+                    createdAt,
+                    lastEditedAt,
+                    author,
+                    url,
+                    latestReviews,
+                    repository,
+                    isDraft,
+                  },
+                  index,
+                ) =>
+                  infoCardFormat.includes('draft') === isDraft && (
+                    <PullRequestCard
+                      key={`pull-request-${id}-${index}`}
+                      title={title}
+                      createdAt={createdAt}
+                      updatedAt={lastEditedAt}
+                      author={author}
+                      url={url}
+                      reviews={latestReviews.nodes}
+                      repositoryName={repository.name}
+                      isDraft={isDraft}
+                    />
+                  ),
+              )}
             </Wrapper>
           ))
         ) : (

plugins/github-pull-requests-board/src/components/TeamPullRequestsPage/TeamPullRequestsPage.tsx

@@ -23,24 +23,25 @@ import { Wrapper } from '../../components/Wrapper';
 import { PullRequestCard } from '../../components/PullRequestCard';
 import { usePullRequestsByTeam } from '../../hooks/usePullRequestsByTeam';
 import { PRCardFormating } from '../../utils/types';
-import { DraftPrIcon } from '../../components/icons/DraftPr'
+import { DraftPrIcon } from '../../components/icons/DraftPr';
 import { useUserRepositories } from '../../hooks/useUserRepositories';
 
 const TeamPullRequestsPage: FunctionComponent = () => {
   const [infoCardFormat, setInfoCardFormat] = useState<PRCardFormating[]>([]);
   const { repositories } = useUserRepositories();
-  const { loading, pullRequests, refreshPullRequests } = usePullRequestsByTeam(repositories);
+  const { loading, pullRequests, refreshPullRequests } =
+    usePullRequestsByTeam(repositories);
 
   const header = (
     <InfoCardHeader onRefresh={refreshPullRequests}>
       <PullRequestBoardOptions
-        onClickOption={(newFormats) => setInfoCardFormat(newFormats)}
+        onClickOption={newFormats => setInfoCardFormat(newFormats)}
         value={infoCardFormat}
         options={[
           {
             icon: <DraftPrIcon />,
             value: 'draft',
-            ariaLabel: 'Show draft PRs'
+            ariaLabel: 'Show draft PRs',
           },
         ]}
       />
@@ -56,48 +57,37 @@ const TeamPullRequestsPage: FunctionComponent = () => {
       <Grid container spacing={2}>
         {pullRequests.length ? (
           pullRequests.map(({ title: columnTitle, content }) => (
-            <Wrapper
-              key={columnTitle}
-              fullscreen
-            >
-              <Typography variant="overline">
-                {columnTitle}
-              </Typography>
-              {content.map(({
-                id,
-                title,
-                createdAt,
-                lastEditedAt,
-                author,
-                url,
-                latestReviews,
-                repository,
-                isDraft
-              }, index) => (
-                isDraft ? (infoCardFormat.includes('draft') === isDraft) &&
-                  <PullRequestCard
-                    key={`pull-request-${id}-${index}`}
-                    title={title}
-                    createdAt={createdAt}
-                    updatedAt={lastEditedAt}
-                    author={author}
-                    url={url}
-                    reviews={latestReviews.nodes}
-                    repositoryName={repository.name}
-                    isDraft={isDraft}
-                  />
-                  : <PullRequestCard
-                    key={`pull-request-${id}-${index}`}
-                    title={title}
-                    createdAt={createdAt}
-                    updatedAt={lastEditedAt}
-                    author={author}
-                    url={url}
-                    reviews={latestReviews.nodes}
-                    repositoryName={repository.name}
-                    isDraft={isDraft}
-                  />
-              ))}
+            <Wrapper key={columnTitle} fullscreen>
+              <Typography variant="overline">{columnTitle}</Typography>
+              {content.map(
+                (
+                  {
+                    id,
+                    title,
+                    createdAt,
+                    lastEditedAt,
+                    author,
+                    url,
+                    latestReviews,
+                    repository,
+                    isDraft,
+                  },
+                  index,
+                ) =>
+                  infoCardFormat.includes('draft') === isDraft && (
+                    <PullRequestCard
+                      key={`pull-request-${id}-${index}`}
+                      title={title}
+                      createdAt={createdAt}
+                      updatedAt={lastEditedAt}
+                      author={author}
+                      url={url}
+                      reviews={latestReviews.nodes}
+                      repositoryName={repository.name}
+                      isDraft={isDraft}
+                    />
+                  ),
+              )}
             </Wrapper>
           ))
         ) : (

plugins/github-pull-requests-board/src/components/icons/DraftPr/DraftPr.tsx

@@ -16,8 +16,15 @@
 import React from 'react';
 
 const DraftPr = () => (
-  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true">
-    <path fillRule="evenodd" d="M2.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.25 1a2.25 2.25 0 00-.75 4.372v5.256a2.251 2.251 0 101.5 0V5.372A2.25 2.25 0 003.25 1zm0 11a.75.75 0 100 1.5.75.75 0 000-1.5zm9.5 3a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zm0-3a.75.75 0 100 1.5.75.75 0 000-1.5z" />
+  <svg
+    aria-hidden="true"
+    height="16"
+    viewBox="0 0 16 16"
+    version="1.1"
+    width="16"
+    data-view-component="true"
+  >
+    <path d="M2.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.25 1a2.25 2.25 0 00-.75 4.372v5.256a2.251 2.251 0 101.5 0V5.372A2.25 2.25 0 003.25 1zm0 11a.75.75 0 100 1.5.75.75 0 000-1.5zm9.5 3a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zm0-3a.75.75 0 100 1.5.75.75 0 000-1.5z" />
     <path d="M14 7.5a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zm0-4.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z" />
   </svg>
 );

plugins/github-pull-requests-board/src/utils/functions.ts

@@ -15,12 +15,17 @@
  */
 import { Entity } from '@backstage/catalog-model';
 import moment from 'moment';
-import { Reviews, PullRequests, ReviewDecision, PullRequestsColumn, Author } from './types';
+import {
+  Reviews,
+  PullRequests,
+  ReviewDecision,
+  PullRequestsColumn,
+  Author,
+} from './types';
 import { COLUMNS } from './constants';
 
 const GITHUB_PULL_REQUESTS_ANNOTATION = 'github.com/project-slug';
 
-
 export const getProjectNameFromEntity = (entity: Entity): string => {
   return entity?.metadata.annotations?.[GITHUB_PULL_REQUESTS_ANNOTATION] ?? '';
 };
@@ -38,55 +43,63 @@ export const getChangeRequests = (reviews: Reviews = []): Reviews => {
 
 export const filterSameUser = (users: Author[]): Author[] => {
   return users.reduce((acc, curr) => {
-    const contaisUser = acc.find(({ login }) => login === curr.login);
+    const containsUser = acc.find(({ login }) => login === curr.login);
 
-    if(!contaisUser) {
-      return [ ...acc, curr ];
+    if (!containsUser) {
+      return [...acc, curr];
     }
 
     return acc;
   }, [] as Author[]);
-}
+};
 
 export const getElapsedTime = (start: string): string => {
   return moment(start).fromNow();
 };
 
-export const formatPRsByReviewDecision = (prs: PullRequests): PullRequestsColumn[] => {
-  const reviewDecisions = prs.reduce((acc, curr) => {
-    const decision = curr.reviewDecision || 'REVIEW_REQUIRED';
+export const formatPRsByReviewDecision = (
+  prs: PullRequests,
+): PullRequestsColumn[] => {
+  const reviewDecisions = prs.reduce(
+    (acc, curr) => {
+      const decision = curr.reviewDecision || 'REVIEW_REQUIRED';
 
-    if(decision !== 'APPROVED' && curr.latestReviews.nodes.length === 0) {
-      return {
-        ...acc,
-        REVIEW_REQUIRED: [...acc.REVIEW_REQUIRED, curr]
+      if (decision !== 'APPROVED' && curr.latestReviews.nodes.length === 0) {
+        return {
+          ...acc,
+          REVIEW_REQUIRED: [...acc.REVIEW_REQUIRED, curr],
+        };
       }
-    }
 
-    if(decision !== 'APPROVED' && curr.latestReviews.nodes.length > 0) {
-      return {
-        ...acc,
-        IN_PROGRESS: [...acc.IN_PROGRESS, curr]
+      if (decision !== 'APPROVED' && curr.latestReviews.nodes.length > 0) {
+        return {
+          ...acc,
+          IN_PROGRESS: [...acc.IN_PROGRESS, curr],
+        };
       }
-    }
 
-    if(decision === 'APPROVED') {
-      return {
-        ...acc,
-        APPROVED: [...acc.APPROVED, curr]
+      if (decision === 'APPROVED') {
+        return {
+          ...acc,
+          APPROVED: [...acc.APPROVED, curr],
+        };
       }
-    }
 
-    return acc;
-  }, {
-    REVIEW_REQUIRED: [],
-    IN_PROGRESS: [],
-    APPROVED: []
-  } as Record<ReviewDecision, PullRequests>);
+      return acc;
+    },
+    {
+      REVIEW_REQUIRED: [],
+      IN_PROGRESS: [],
+      APPROVED: [],
+    } as Record<ReviewDecision, PullRequests>,
+  );
 
   return [
-    { title: COLUMNS.REVIEW_REQUIRED, content: reviewDecisions.REVIEW_REQUIRED },
+    {
+      title: COLUMNS.REVIEW_REQUIRED,
+      content: reviewDecisions.REVIEW_REQUIRED,
+    },
     { title: COLUMNS.REVIEW_IN_PROGRESS, content: reviewDecisions.IN_PROGRESS },
     { title: COLUMNS.APPROVED, content: reviewDecisions.APPROVED },
   ];
-};
+};