From c84e1cb4e9e0fa6ce7831ed3e6afdf7c8eac4b71 Mon Sep 17 00:00:00 2001
From: Andrew Chen <59291082+andrew032011@users.noreply.github.com>
Date: Tue, 26 Sep 2023 01:35:10 -0400
Subject: [PATCH] Add Documentation Field for Dev and TPM Portfolios (#503)

* add support for documentation for tpm and devs

* prettier

* separate documentation input as component

* remove nullish-colesc

* typo

* update message
---
 backend/src/types/DataTypes.d.ts              |  3 ++
 common-types/index.d.ts                       |  1 +
 .../DevPortfolio/DevPortfolioDetails.tsx      |  3 ++
 .../DevPortfolioForm/DevPortfolioForm.tsx     | 34 ++++++++++++++++++-
 4 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/backend/src/types/DataTypes.d.ts b/backend/src/types/DataTypes.d.ts
index a9bd66cab..34bfb1601 100644
--- a/backend/src/types/DataTypes.d.ts
+++ b/backend/src/types/DataTypes.d.ts
@@ -81,6 +81,9 @@ export type DBDevPortfolioSubmission = {
   member: firestore.DocumentReference;
   openedPRs: PullRequestSubmission[];
   reviewedPRs: PullRequestSubmission[];
+  isLate?: boolean;
+  text?: string;
+  documentationText?: string;
   status: SubmissionStatus;
 };
 
diff --git a/common-types/index.d.ts b/common-types/index.d.ts
index 017a30bcc..d4e5e0313 100644
--- a/common-types/index.d.ts
+++ b/common-types/index.d.ts
@@ -162,6 +162,7 @@ interface DevPortfolioSubmission {
   reviewedPRs: PullRequestSubmission[];
   isLate?: boolean;
   text?: string;
+  documentationText?: string;
   status: SubmissionStatus;
 }
 
diff --git a/frontend/src/components/Admin/DevPortfolio/DevPortfolioDetails.tsx b/frontend/src/components/Admin/DevPortfolio/DevPortfolioDetails.tsx
index 02cc83ce1..3a50604be 100644
--- a/frontend/src/components/Admin/DevPortfolio/DevPortfolioDetails.tsx
+++ b/frontend/src/components/Admin/DevPortfolio/DevPortfolioDetails.tsx
@@ -186,6 +186,7 @@ const DetailsTable: React.FC<DevPortfolioDetailsTableProps> = ({ portfolio, isAd
           <Table.HeaderCell>Name</Table.HeaderCell>
           <Table.HeaderCell>Opened PRs</Table.HeaderCell>
           <Table.HeaderCell>Reviewed PRs</Table.HeaderCell>
+          <Table.HeaderCell>Documentation</Table.HeaderCell>
           <Table.HeaderCell>Status</Table.HeaderCell>
           {sortedSubmissions.some((submission) => submission.text) && (
             <Table.HeaderCell></Table.HeaderCell>
@@ -256,6 +257,7 @@ const SubmissionDetails: React.FC<SubmissionDetailsProps> = ({
             prSubmission={submission.reviewedPRs.length > 0 ? submission.reviewedPRs[0] : undefined}
           />
         </Table.Cell>
+        <Table.Cell>{submission.documentationText}</Table.Cell>
 
         {isAdminView ? (
           <Table.Cell rowSpan={`${numRows}`}>
@@ -320,6 +322,7 @@ const SubmissionDetails: React.FC<SubmissionDetailsProps> = ({
           prSubmission={i >= remainingReviewedPRs.length ? undefined : remainingReviewedPRs[i]}
         />
       </Table.Cell>
+      <Table.Cell />
       {!submission.text ? <div></div> : <></>}
     </Table.Row>
   ));
diff --git a/frontend/src/components/Forms/DevPortfolioForm/DevPortfolioForm.tsx b/frontend/src/components/Forms/DevPortfolioForm/DevPortfolioForm.tsx
index a823e4e8c..b322b062a 100644
--- a/frontend/src/components/Forms/DevPortfolioForm/DevPortfolioForm.tsx
+++ b/frontend/src/components/Forms/DevPortfolioForm/DevPortfolioForm.tsx
@@ -20,6 +20,7 @@ const DevPortfolioForm: React.FC = () => {
   const [reviewPRs, setReviewedPRs] = useState(['']);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [text, setText] = useState<string | undefined>(undefined);
+  const [documentationText, setDocumentationText] = useState<string>('');
 
   useEffect(() => {
     refreshDevPortfolios();
@@ -93,6 +94,11 @@ const DevPortfolioForm: React.FC = () => {
         headerMsg: 'Paragraph Submission Empty',
         contentMsg: 'Please write something for the paragraph section of the assignment.'
       });
+    } else if (!documentationText) {
+      Emitters.generalError.emit({
+        headerMsg: 'Documentation Empty',
+        contentMsg: 'Please write something for the documentation section of the assignment.'
+      });
     } else if (new Date(latestDeadline) < new Date()) {
       Emitters.generalError.emit({
         headerMsg: 'The deadline for this dev portfolio has passed',
@@ -115,6 +121,7 @@ const DevPortfolioForm: React.FC = () => {
           status: 'pending'
         })),
         status: 'pending',
+        documentationText,
         ...(text && { text })
       };
       sendSubmissionRequest(newDevPortfolioSubmission, devPortfolio);
@@ -180,7 +187,7 @@ const DevPortfolioForm: React.FC = () => {
                 2. What did the team do the past two weeks?
               </p>
 
-              <TextArea value={text} onChange={(e) => setText(e.target.value)}></TextArea>
+              <TextArea value={text} onChange={(e) => setText(e.target.value)} />
 
               <p>
                 In addition, if you have created and/or reviewed pull requests, please include those
@@ -205,6 +212,10 @@ const DevPortfolioForm: React.FC = () => {
             label="Reviewed Pull Request Github Link:"
             isTpm={isTpm}
           />
+          <DocumentationInput
+            setDocumentationText={setDocumentationText}
+            documentationText={documentationText}
+          />
         </div>
         <Message info>
           <Message.Header>Please note</Message.Header>
@@ -230,6 +241,27 @@ const DevPortfolioForm: React.FC = () => {
   );
 };
 
+const DocumentationInput = ({
+  documentationText,
+  setDocumentationText
+}: {
+  documentationText: string;
+  setDocumentationText: React.Dispatch<React.SetStateAction<string>>;
+}) => (
+  <div>
+    <label className={styles.bold}>
+      Documentation: <span className={styles.red_color}>*</span>
+    </label>
+    <p>
+      Please provide a link to at least one piece of documentation you added/updated. If it's
+      included in the PRs you added above, you may simply write "Documentation located in PR (insert
+      PR number here)". If you made a separate PR updating documentation in the codebase, please
+      link that PR here.
+    </p>
+    <TextArea value={documentationText} onChange={(e) => setDocumentationText(e.target.value)} />
+  </div>
+);
+
 const PRInputs = ({
   prs,
   setPRs,