Merge pull request #424 from iFixit/commented-on

Participants: Add a UI component

Author: danielbeardsley

frontend/dummy-pulls.json

@@ -167,6 +167,7 @@
     "base": {
       "ref": "master"
     },
+    "participants": ["ianrohde", "Another"],
     "user": {
       "login": "ianrohde"
     },
@@ -457,6 +458,7 @@
     "body": "pull request dummy body",
     "created_at": "2020-10-28T01:02:33.000Z",
     "updated_at": "2020-11-10T22:16:17.000Z",
+    "participants": ["danielbeardsley", "someone else"],
     "closed_at": null,
     "merged_at": null,
     "difficulty": null,
@@ -4702,6 +4704,7 @@
     "base": {
       "ref": "master"
     },
+    "participants": ["BaseInfinity", "other", "another"],
     "user": {
       "login": "BaseInfinity"
     },
@@ -4991,6 +4994,7 @@
     "base": {
       "ref": "master"
     },
+    "participants": ["evannoronha", "someone else"],
     "user": {
       "login": "evannoronha"
     },

frontend/src/pull-card/index.tsx

@@ -1,5 +1,6 @@
 import { Pull } from "../pull";
 import { CommitStatuses } from "./commit-statuses";
+import { Participants } from "./participants";
 import { Age } from "./age";
 import { Flags } from "./flags";
 import { Avatar } from "./avatar";
@@ -68,6 +69,7 @@ export const PullCard = memo(function PullCard({
 
   return (
     <Card ref={cardRef} display={show ? undefined : "none"}>
+      <Participants pull={pull} />
       <RefreshButton pull={pull} />
       <CommitStatuses pull={pull} />
       <Box>

frontend/src/pull-card/participants.tsx

@@ -0,0 +1,37 @@
+import { Pull } from "../pull";
+import {
+  Box
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faUser,
+  faUsers,
+} from "@fortawesome/free-solid-svg-icons";
+
+export function Participants({ pull }: { pull: Pull }) {
+  if (!pull.participants?.length) {
+    return null;
+  }
+  return (
+    <Box position="absolute" top="2px" right="5px">
+      <FontAwesomeIcon
+        icon={pull.participants.length > 1 ? faUsers : faUser}
+        title={tooltip(pull)}
+        color={pull.participating() ? "var(--participants-including-me)" : "var(--participants-without-me)"}
+      />
+    </Box>
+  );
+}
+
+function tooltip(pull: Pull) {
+   if (pull.participants.length == 1) {
+      return pull.participating() ?
+         "Only you participating" :
+         "1 participant"
+   } else {
+      return pull.participating() ?
+         `${pull.participants.length} participants (including you)` :
+         `${pull.participants.length} participants`;
+   }
+}
+

frontend/src/pull.ts

@@ -49,7 +49,8 @@ export class Pull extends PullData {
       this.hasCurrentSig(getUser()) ||
       this.hasOutdatedSig(getUser()) ||
       this.hasMyDevBlock() ||
-      this.hasMyDeployBlock()
+      this.hasMyDeployBlock() ||
+      this.participating()
     );
   }
 
@@ -79,6 +80,10 @@ export class Pull extends PullData {
     );
   }
 
+  participating(): boolean {
+    return this.participants && this.participants.includes(getUser());
+  }
+
   hasMyDevBlock(): boolean {
     return this.getDevBlock()?.data.user.login == getUser();
   }

frontend/src/theme/day_theme.less

@@ -175,6 +175,9 @@ body[data-theme="day_theme"] {
   --refresh-background: @white;
   --refresh-hover: @blue;
 
+  --participants-without-me: @grey;
+  --participants-including-me: @blue;
+
   // Lines Changed
   --additions: darken(@green, 10%);
   --deletions: @red;

frontend/src/theme/night_theme.less

@@ -168,6 +168,9 @@ body[data-theme="night_theme"] {
   --refresh-background: @steel;
   --refresh-hover: @blue;
 
+  --participants-without-me: darken(@grey, 15%);
+  --participants-including-me: @blue;
+
   --copy-branch: darken(@grey, 15%);
   --copy-branch-hover: @blue;
 

frontend/src/types.ts

@@ -124,4 +124,5 @@ export class PullData {
     commit_statuses: CommitStatus[];
   };
   labels: Label[];
+  participants: string[];
 }

frontend/test/named-pulls.ts

@@ -390,6 +390,39 @@ export const MyOwn = <PullData[]>[
   }),
 ];
 
+export const Participants = <PullData[]>[
+  pullData({
+    number: 1,
+    title: "No participants",
+    cr_req: 0,
+    participants: [],
+  }),
+  pullData({
+    number: 2,
+    title: "One participant",
+    cr_req: 0,
+    participants: ["Other"],
+  }),
+  pullData({
+    number: 3,
+    title: "Multiple participants",
+    cr_req: 0,
+    participants: ["User2", "User3"],
+  }),
+  pullData({
+    number: 4,
+    title: "Only me participating",
+    cr_req: 0,
+    participants: [getUser()],
+  }),
+  pullData({
+    number: 5,
+    title: "multiple participants (including me)",
+    cr_req: 0,
+    participants: ["User2", "User3", getUser()],
+  }),
+];
+
 export const KitchenSink = <PullData[]>[
   pullData({
     title: "Pull With Lots of flags and such and a really long title",
@@ -428,5 +461,6 @@ export const KitchenSink = <PullData[]>[
         created_at: daysAgo(1 / 24),
       }),
     ],
+    participants: ["other person", getUser()],
   }),
 ];

frontend/test/pull-card-demo.tsx

@@ -17,6 +17,7 @@ import {
   Labels,
   Draft,
   MyOwn,
+  Participants,
   KitchenSink,
 } from "./named-pulls";
 import { PullCard } from "../src/pull-card";
@@ -50,6 +51,7 @@ function PullCardDemo() {
       <Row title="Labels" pullDatas={Labels} />
       <Row title="Draft" pullDatas={Draft} />
       <Row title="My Own" pullDatas={MyOwn} />
+      <Row title="Participants" pullDatas={Participants} />
       <Row title="Kitchen Sink (all the things)" pullDatas={KitchenSink} linesChanged={true}/>
     </ChakraProvider>
   );

frontend/test/pull-data-parts.ts

@@ -77,7 +77,7 @@ export function pullData(p: DeepPartial<PullData>): PullData {
   return <PullData>{
     repo: repo,
     repoSpec: p.repoSpec || null,
-    number: pullNumber(),
+    number: p.number || pullNumber(),
     state: "open",
     draft: p.draft,
     title: p.title || "Young pull with no CR / QA",
@@ -113,6 +113,7 @@ export function pullData(p: DeepPartial<PullData>): PullData {
       commit_statuses: p.status?.commit_statuses || [],
     },
     labels: p.labels || [],
+    participants: p.participants || [],
   };
 }