save added

Author: pashidlos

src/components/CommentsPopper.tsx

@@ -26,16 +26,22 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 interface IProps {
-  text: string;
+  text: string | undefined;
+  onSave: (comment: string) => Promise<any>;
 }
 
-export const CommentsPopper: React.FunctionComponent<IProps> = ({ text }) => {
+export const CommentsPopper: React.FunctionComponent<IProps> = ({
+  text,
+  onSave,
+}) => {
   const classes = useStyles();
   const popupState = usePopupState({
     variant: "popper",
     popupId: "commentPopper",
   });
-  const [comment, setComment] = React.useState(text);
+  const [comment, setComment] = React.useState("");
+
+  React.useEffect(() => setComment(text ? text : ""), [text]);
 
   return (
     <React.Fragment>
@@ -77,7 +83,7 @@ export const CommentsPopper: React.FunctionComponent<IProps> = ({ text }) => {
                 />
                 <Button
                   onClick={() => {
-                    popupState.close();
+                    onSave(comment).then(() => popupState.close());
                   }}
                 >
                   Save

src/components/TestDetailsModal.tsx

@@ -204,7 +204,20 @@ const TestDetailsModal: React.FunctionComponent<{
             </Button>
           </Grid>
           <Grid item>
-            <CommentsPopper text={testRun.comment}/>
+            <CommentsPopper
+              text={testRun.comment}
+              onSave={(comment) =>
+                Promise.all([
+                  // update in test run
+                  testRunService
+                    .setComment(testRun.id, comment)
+                    .then((testRun) => updateTestRun(testRunDispatch, testRun)),
+                  // update in variation
+                  testVariationService
+                    .setComment(testRun.testVariationId, comment),
+                ])
+              }
+            />
           </Grid>
           <Grid item>
             <Paper variant="outlined">

src/services/testRun.service.ts

@@ -12,6 +12,7 @@ export const testRunService = {
   approve,
   reject,
   setIgnoreAreas,
+  setComment,
 };
 
 function getList(buildId: string): Promise<TestRun[]> {
@@ -86,3 +87,15 @@ function setIgnoreAreas(
     requestOptions
   ).then(handleResponse);
 }
+
+function setComment(id: string, comment: string): Promise<TestRun> {
+  const requestOptions = {
+    method: "PUT",
+    headers: { "Content-Type": "application/json", ...authHeader() },
+    body: JSON.stringify({ comment }),
+  };
+
+  return fetch(`${API_URL}${ENDPOINT_URL}/comment/${id}`, requestOptions).then(
+    handleResponse
+  );
+}

src/services/testVariation.service.ts

@@ -3,12 +3,13 @@ import { handleResponse, authHeader } from "../_helpers/service.helpers";
 import { API_URL } from "../_config/api.config";
 import { IgnoreArea } from "../types/ignoreArea";
 
-const ENDPOINT_URL = "/test-variations"
+const ENDPOINT_URL = "/test-variations";
 
 export const testVariationService = {
   getList,
   getDetails,
-  setIgnoreAreas
+  setIgnoreAreas,
+  setComment,
 };
 
 function getList(projectId: String): Promise<TestVariation[]> {
@@ -17,7 +18,10 @@ function getList(projectId: String): Promise<TestVariation[]> {
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}${ENDPOINT_URL}?projectId=${projectId}`, requestOptions).then(handleResponse);
+  return fetch(
+    `${API_URL}${ENDPOINT_URL}?projectId=${projectId}`,
+    requestOptions
+  ).then(handleResponse);
 }
 
 function getDetails(id: String): Promise<TestVariation> {
@@ -26,7 +30,9 @@ function getDetails(id: String): Promise<TestVariation> {
     headers: authHeader(),
   };
 
-  return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(handleResponse);
+  return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(
+    handleResponse
+  );
 }
 
 function setIgnoreAreas(
@@ -43,4 +49,16 @@ function setIgnoreAreas(
     `${API_URL}${ENDPOINT_URL}/ignoreArea/${variationId}`,
     requestOptions
   ).then(handleResponse);
-}
+}
+
+function setComment(id: string, comment: string): Promise<TestVariation> {
+  const requestOptions = {
+    method: "PUT",
+    headers: { "Content-Type": "application/json", ...authHeader() },
+    body: JSON.stringify({ comment }),
+  };
+
+  return fetch(`${API_URL}${ENDPOINT_URL}/comment/${id}`, requestOptions).then(
+    handleResponse
+  );
+}

src/types/testRun.ts

@@ -16,5 +16,5 @@ export interface TestRun {
   viewport: string;
   device: string;
   ignoreAreas: string;
-  comment: string;
+  comment?: string;
 }

src/types/testVariation.ts

@@ -11,5 +11,5 @@ export interface TestVariation {
   ignoreAreas: string;
   projectId: string;
   baselines: Baseline[];
-  comment: string;
+  comment?: string;
 }