CommentsPopper added

Author: pashidlos

src/components/CommentsPopper.tsx

@@ -4,42 +4,85 @@ import {
   Popper,
   Fade,
   Paper,
-  Typography,
-  Box,
   makeStyles,
+  TextField,
+  Badge,
+  IconButton,
 } from "@material-ui/core";
 import {
   usePopupState,
   bindToggle,
   bindPopper,
 } from "material-ui-popup-state/hooks";
+import { Comment } from "@material-ui/icons";
 
 const useStyles = makeStyles((theme) => ({
   popperContainer: {
     zIndex: 1400,
   },
+  contentContainer: {
+    padding: theme.spacing(2),
+  },
 }));
 
-export const CommentsPopper = () => {
+interface IProps {
+  text: string;
+}
+
+export const CommentsPopper: React.FunctionComponent<IProps> = ({ text }) => {
   const classes = useStyles();
   const popupState = usePopupState({
     variant: "popper",
-    popupId: "demoPopper",
+    popupId: "commentPopper",
   });
+  const [comment, setComment] = React.useState(text);
+
   return (
     <React.Fragment>
-      <Button color="primary" {...bindToggle(popupState)}>
-        Comments
-      </Button>
+      <IconButton {...bindToggle(popupState)}>
+        <Badge
+          color="secondary"
+          variant="dot"
+          invisible={!comment || comment === ""}
+        >
+          <Comment />
+        </Badge>
+      </IconButton>
       <Popper
         {...bindPopper(popupState)}
         transition
+        disablePortal
         className={classes.popperContainer}
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={350}>
-            <Paper>
-              <Typography>The content of the Popper.</Typography>
+            <Paper className={classes.contentContainer}>
+              <React.Fragment>
+                <TextField
+                  id="comment"
+                  name="comment"
+                  variant="outlined"
+                  value={comment}
+                  placeholder={"Add any additional data here"}
+                  multiline
+                  rows={4}
+                  rowsMax={10}
+                  fullWidth
+                  onChange={(event) =>
+                    setComment((event.target as HTMLInputElement).value)
+                  }
+                  inputProps={{
+                    "data-testid": "comment",
+                  }}
+                />
+                <Button
+                  onClick={() => {
+                    popupState.close();
+                  }}
+                >
+                  Save
+                </Button>
+              </React.Fragment>
             </Paper>
           </Fade>
         )}

src/components/TestDetailsModal.tsx

@@ -204,7 +204,7 @@ const TestDetailsModal: React.FunctionComponent<{
             </Button>
           </Grid>
           <Grid item>
-            <CommentsPopper />
+            <CommentsPopper text={testRun.comment}/>
           </Grid>
           <Grid item>
             <Paper variant="outlined">

src/types/testRun.ts

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

src/types/testVariation.ts

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