Extract NewCommitsToggle and WhitelistedTeams components (#785)

Author: fwouts

src/components/NewCommitsToggle.tsx

@@ -0,0 +1,33 @@
+import styled from "@emotion/styled";
+import { observer } from "mobx-react-lite";
+import React from "react";
+
+export interface NewCommitsToggleProps {
+  toggled: boolean;
+  onToggle(): void;
+}
+
+export const NewCommitsToggle = observer((props: NewCommitsToggleProps) => {
+  return (
+    <Container>
+      <NewCommitsCheckbox
+        type="checkbox"
+        checked={props.toggled}
+        onChange={props.onToggle}
+      />
+      Include new commits
+    </Container>
+  );
+});
+
+const Container = styled.label`
+  padding: 8px;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const NewCommitsCheckbox = styled.input`
+  margin-right: 8px;
+`;

src/components/Popup.tsx

@@ -12,9 +12,11 @@ import { Link } from "./design/Link";
 import { Row } from "./design/Row";
 import { IgnoredRepositories } from "./IgnoredRepositories";
 import { Loader } from "./Loader";
+import { NewCommitsToggle } from "./NewCommitsToggle";
 import { PullRequestList } from "./PullRequestList";
 import { Settings } from "./Settings";
 import { Status } from "./Status";
+import { WhitelistedTeams } from "./WhitelistedTeams";
 
 export interface PopupProps {
   core: Core;
@@ -159,6 +161,31 @@ export const Popup = observer((props: PopupProps) => {
               />
             </Tabs>
             <PullRequestList
+              header={
+                state.currentFilter === Filter.INCOMING && (
+                  <>
+                    <WhitelistedTeams
+                      onlyDirectRequestsToggled={
+                        !!props.core.muteConfiguration.onlyDirectRequests
+                      }
+                      whitelistedTeams={
+                        props.core.muteConfiguration.whitelistedTeams || []
+                      }
+                      userLogin={
+                        props.core.loadedState
+                          ? props.core.loadedState.userLogin
+                          : undefined
+                      }
+                      onToggleOnlyDirectRequests={onToggleOnlyDirectRequests}
+                      onChangeWhitelistedTeams={onChangeWhitelistedTeams}
+                    />
+                    <NewCommitsToggle
+                      toggled={!!props.core.muteConfiguration.notifyNewCommits}
+                      onToggle={onToggleNewCommitsNotification}
+                    />
+                  </>
+                )
+              }
               pullRequests={
                 props.core.filteredPullRequests
                   ? props.core.filteredPullRequests[state.currentFilter]
@@ -176,28 +203,6 @@ export const Popup = observer((props: PopupProps) => {
                   ? "allow-unmuting"
                   : "none"
               }
-              newCommitsNotificationToggled={
-                state.currentFilter === Filter.INCOMING
-                  ? !!props.core.muteConfiguration.notifyNewCommits
-                  : null
-              }
-              onlyDirectRequestsToggled={
-                state.currentFilter === Filter.INCOMING
-                  ? !!props.core.muteConfiguration.onlyDirectRequests
-                  : null
-              }
-              whitelistedTeams={
-                state.currentFilter === Filter.INCOMING
-                  ? props.core.muteConfiguration.whitelistedTeams || []
-                  : []
-              }
-              userLogin={
-                (props.core.loadedState && props.core.loadedState.userLogin) ||
-                undefined
-              }
-              onToggleNewCommitsNotification={onToggleNewCommitsNotification}
-              onToggleOnlyDirectRequests={onToggleOnlyDirectRequests}
-              onChangeWhitelistedTeams={onChangeWhitelistedTeams}
               onOpenAll={onOpenAll}
               onOpen={onOpen}
               onMute={onMute}

src/components/PullRequestList.tsx

@@ -1,10 +1,9 @@
 import styled from "@emotion/styled";
 import { observer } from "mobx-react-lite";
-import React, { useRef, useState } from "react";
+import React from "react";
 import { EnrichedPullRequest } from "../filtering/enriched-pull-request";
 import { PullRequest } from "../storage/loaded-state";
 import { MuteType } from "../storage/mute-configuration";
-import { LargeButton } from "./design/Button";
 import { Link } from "./design/Link";
 import { Paragraph } from "./design/Paragraph";
 import { Loader } from "./Loader";
@@ -17,40 +16,6 @@ const List = styled.div`
   margin-bottom: 16px;
 `;
 
-const NewCommitsToggle = styled.label`
-  padding: 8px;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-const NewCommitsCheckbox = styled.input`
-  margin-right: 8px;
-`;
-
-const OnlyDirectRequestsCheckbox = styled.input`
-  margin-right: 8px;
-`;
-
-const OnlyDirectRequestsToggle = styled.label`
-  padding: 8px;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
-const WhitelistedTeamsInput = styled.input`
-  flex-grow: 1;
-  padding: 4px 8px;
-  margin-right: 8px;
-
-  &:focus {
-    outline-color: #2ee59d;
-  }
-`;
-
 const OpenAllParagraph = styled(Paragraph)`
   text-align: center;
   color: #777;
@@ -60,85 +25,17 @@ export interface PullRequestListProps {
   pullRequests: EnrichedPullRequest[] | null;
   emptyMessage: string;
   mutingConfiguration: "allow-muting" | "allow-unmuting" | "none";
-  newCommitsNotificationToggled: boolean | null;
-  onlyDirectRequestsToggled: boolean | null;
-  whitelistedTeams: string[];
-  userLogin?: string;
-  onToggleNewCommitsNotification?(): void;
-  onToggleOnlyDirectRequests?(): void;
-  onChangeWhitelistedTeams?: (text: string) => void;
+  header: React.ReactNode;
   onOpenAll(): void;
   onOpen(pullRequestUrl: string): void;
   onMute(pullRequest: PullRequest, muteType: MuteType): void;
   onUnmute(pullRequest: PullRequest): void;
 }
 
 export const PullRequestList = observer((props: PullRequestListProps) => {
-  const defaultWhitelistedTeams = props.whitelistedTeams.join(", ");
-  const [whitelistedTeams, setWhitelistedTeams] = useState(
-    defaultWhitelistedTeams
-  );
-  const inputRef = useRef<HTMLInputElement>(null);
-  const handleWhitelistedTeamsChange = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!inputRef.current) {
-      return;
-    }
-
-    setWhitelistedTeams(inputRef.current.value);
-  };
-  const handleApplyWhitelistedTeamsChange = (e: React.FormEvent) => {
-    e.preventDefault();
-    props.onChangeWhitelistedTeams &&
-      props.onChangeWhitelistedTeams(whitelistedTeams);
-  };
   return (
     <List>
-      {props.onlyDirectRequestsToggled !== null && (
-        <OnlyDirectRequestsToggle>
-          <OnlyDirectRequestsCheckbox
-            type="checkbox"
-            checked={props.onlyDirectRequestsToggled}
-            onChange={props.onToggleOnlyDirectRequests}
-          />
-          <div>
-            Only directly requested
-            {props.userLogin && (
-              <span>
-                {" "}
-                (<b>@{props.userLogin}</b>){" "}
-              </span>
-            )}
-            and whitelisted teams
-            {props.onlyDirectRequestsToggled && props.onChangeWhitelistedTeams && (
-              <div>
-                <WhitelistedTeamsInput
-                  ref={inputRef}
-                  placeholder="team1, team2"
-                  value={whitelistedTeams}
-                  onInput={handleWhitelistedTeamsChange}
-                ></WhitelistedTeamsInput>
-                <LargeButton
-                  disabled={whitelistedTeams === defaultWhitelistedTeams}
-                  onClick={handleApplyWhitelistedTeamsChange}
-                >
-                  Apply
-                </LargeButton>
-              </div>
-            )}
-          </div>
-        </OnlyDirectRequestsToggle>
-      )}
-      {props.newCommitsNotificationToggled !== null && (
-        <NewCommitsToggle>
-          <NewCommitsCheckbox
-            type="checkbox"
-            checked={props.newCommitsNotificationToggled}
-            onChange={props.onToggleNewCommitsNotification}
-          />
-          Include new commits
-        </NewCommitsToggle>
-      )}
+      {props.header}
       {props.pullRequests === null ? (
         <Loader />
       ) : props.pullRequests.length === 0 ? (

src/components/WhitelistedTeams.tsx

@@ -0,0 +1,89 @@
+import styled from "@emotion/styled";
+import { observer } from "mobx-react-lite";
+import React, { useRef, useState } from "react";
+import { LargeButton } from "./design/Button";
+
+export interface WhitelistedTeamsProps {
+  onlyDirectRequestsToggled: boolean;
+  whitelistedTeams: string[];
+  userLogin?: string;
+  onToggleOnlyDirectRequests(): void;
+  onChangeWhitelistedTeams(text: string): void;
+}
+
+export const WhitelistedTeams = observer((props: WhitelistedTeamsProps) => {
+  const defaultWhitelistedTeams = props.whitelistedTeams.join(", ");
+  const [whitelistedTeams, setWhitelistedTeams] = useState(
+    defaultWhitelistedTeams
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+  const handleWhitelistedTeamsChange = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inputRef.current) {
+      return;
+    }
+
+    setWhitelistedTeams(inputRef.current.value);
+  };
+  const handleApplyWhitelistedTeamsChange = (e: React.FormEvent) => {
+    e.preventDefault();
+    props.onChangeWhitelistedTeams(whitelistedTeams);
+  };
+  return (
+    <OnlyDirectRequestsToggle>
+      <OnlyDirectRequestsCheckbox
+        type="checkbox"
+        checked={props.onlyDirectRequestsToggled}
+        onChange={props.onToggleOnlyDirectRequests}
+      />
+      <div>
+        Only directly requested
+        {props.userLogin && (
+          <span>
+            {" "}
+            (<b>@{props.userLogin}</b>){" "}
+          </span>
+        )}{" "}
+        and whitelisted teams
+        {props.onlyDirectRequestsToggled && (
+          <div>
+            <WhitelistedTeamsInput
+              ref={inputRef}
+              placeholder="team1, team2"
+              value={whitelistedTeams}
+              onInput={handleWhitelistedTeamsChange}
+            ></WhitelistedTeamsInput>
+            <LargeButton
+              disabled={whitelistedTeams === defaultWhitelistedTeams}
+              onClick={handleApplyWhitelistedTeamsChange}
+            >
+              Apply
+            </LargeButton>
+          </div>
+        )}
+      </div>
+    </OnlyDirectRequestsToggle>
+  );
+});
+
+const OnlyDirectRequestsCheckbox = styled.input`
+  margin-right: 8px;
+`;
+
+const OnlyDirectRequestsToggle = styled.label`
+  padding: 8px;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const WhitelistedTeamsInput = styled.input`
+  flex-grow: 1;
+  padding: 4px 8px;
+  margin-right: 8px;
+
+  &:focus {
+    outline-color: #2ee59d;
+  }
+`;