@backstage-community/plugin-entity-feedback 0.2.19 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @backstage-community/plugin-entity-feedback
 
+## 0.3.0
+
+### Minor Changes
+
+- f4e4277: Add comment boxes for each checked option in the Feedback Dialog box. Display those option responses as bullet points in the Feedback Response table.
+
 ## 0.2.19
 
 ### Patch Changes

package/README.md

@@ -138,3 +138,22 @@ const groupPage = (
 ```
 
 Note: For a full example of this you can look at [this EntityPage](../../packages/app/src/components/catalog/EntityPage.tsx).
+
+## Local Development
+
+To start the mocked example you need to run the front and backend.
+Start the backend from `workspaces/entity-feedback/plugins/entity-feedback-backend`
+
+```sh
+yarn install
+yarn start
+```
+
+Then start the frontend example from `workspaces/entity-feedback/plugins/entity-feedback`
+
+```sh
+yarn install
+yarn start
+```
+
+Once that is running you can navigate to `http://localhost:3000/feedback`

package/dist/components/FeedbackResponseDialog/FeedbackResponseDialog.esm.js

@@ -3,6 +3,7 @@ import { Progress } from '@backstage/core-components';
 import { useApi, errorApiRef } from '@backstage/core-plugin-api';
 import Button from '@material-ui/core/Button';
 import Checkbox from '@material-ui/core/Checkbox';
+import Collapse from '@material-ui/core/Collapse';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -24,18 +25,36 @@ import { entityFeedbackApiRef } from '../../api/EntityFeedbackApi.esm.js';
 const defaultFeedbackResponses = [
   { id: "incorrect", label: "Incorrect info" },
   { id: "missing", label: "Missing info" },
-  { id: "other", label: "Other (please specify below)" }
+  { id: "other", label: "Other" }
 ];
-const useStyles = makeStyles({
-  contactConsent: {
-    marginTop: "5px"
-  }
-});
+const useStyles = makeStyles(
+  (theme) => ({
+    contactConsent: {
+      marginTop: theme.spacing(1.5)
+    },
+    commentBoxes: {
+      marginBottom: theme.spacing(1.5)
+    },
+    boxContainer: {
+      marginBottom: theme.spacing(1.5),
+      marginTop: theme.spacing(1.5),
+      marginLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1)
+    },
+    formLabel: {
+      marginBottom: theme.spacing(1.5)
+    },
+    dialogActions: {
+      justifyContent: "flex-start"
+    }
+  }),
+  { name: "BackstageEntityFeedbackDialog" }
+);
 const FeedbackResponseDialog = (props) => {
   const {
     entity,
     feedbackDialogResponses = defaultFeedbackResponses,
-    feedbackDialogTitle = "Please provide feedback on what can be improved",
+    feedbackDialogTitle = "Tell us what could be better",
     open,
     onClose
   } = props;
@@ -45,12 +64,27 @@ const FeedbackResponseDialog = (props) => {
   const [responseSelections, setResponseSelections] = useState(
     Object.fromEntries(feedbackDialogResponses.map((r) => [r.id, false]))
   );
-  const [comments, setComments] = useState("");
+  const [comments, setComments] = useState({
+    responseComments: {},
+    additionalComments: ""
+  });
   const [consent, setConsent] = useState(true);
   const [{ loading: saving }, saveResponse] = useAsyncFn(async () => {
+    const filteredResponseComments = Object.entries(
+      comments.responseComments
+    ).reduce((entry, [key, value]) => {
+      if (responseSelections[key]) {
+        entry[key] = value;
+      }
+      return entry;
+    }, {});
+    const filteredComments = {
+      ...comments,
+      responseComments: filteredResponseComments
+    };
     try {
       await feedbackApi.recordResponse(stringifyEntityRef(entity), {
-        comments,
+        comments: JSON.stringify(filteredComments),
         consent,
         response: Object.keys(responseSelections).filter((id) => responseSelections[id]).join(",")
       });
@@ -59,10 +93,9 @@ const FeedbackResponseDialog = (props) => {
       errorApi.post(e);
     }
   }, [comments, consent, entity, feedbackApi, onClose, responseSelections]);
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: () => !saving && onClose() }, saving && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement(DialogTitle, null, feedbackDialogTitle), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset" }, /* @__PURE__ */ React.createElement(FormLabel, { component: "legend" }, "Choose all that apply"), /* @__PURE__ */ React.createElement(FormGroup, null, feedbackDialogResponses.map((response) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: () => !saving && onClose() }, saving && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement(DialogTitle, null, feedbackDialogTitle), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(FormControl, { component: "fieldset", fullWidth: true }, /* @__PURE__ */ React.createElement(FormLabel, { component: "legend" }, "Select all that apply"), /* @__PURE__ */ React.createElement(FormGroup, { className: classes.boxContainer }, feedbackDialogResponses.map((response) => /* @__PURE__ */ React.createElement(Grid, { container: true, key: response.id, direction: "column", spacing: 1 }, /* @__PURE__ */ React.createElement(
     FormControlLabel,
     {
-      key: response.id,
       control: /* @__PURE__ */ React.createElement(
         Checkbox,
         {
@@ -72,31 +105,55 @@ const FeedbackResponseDialog = (props) => {
           onChange: (e) => setResponseSelections({
             ...responseSelections,
             [e.target.name]: e.target.checked
-          })
+          }),
+          color: "primary"
         }
       ),
       label: response.label
     }
-  )))), /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Collapse, { in: responseSelections[response.id] }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      "data-testid": `feedback-response-dialog-collapse-comments-input-${responseSelections[response.id]}`,
+      disabled: saving,
+      className: classes.commentBoxes,
+      multiline: true,
+      minRows: 2,
+      fullWidth: true,
+      variant: "outlined",
+      value: comments.responseComments[response.id] || "",
+      onChange: (e) => setComments((prevComments) => ({
+        responseComments: {
+          ...prevComments.responseComments,
+          [response.id]: e.target.value
+        },
+        additionalComments: prevComments.additionalComments
+      }))
+    }
+  )))))), /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(FormLabel, { component: "legend", className: classes.formLabel }, "Additional comments"), /* @__PURE__ */ React.createElement(
     TextField,
     {
       "data-testid": "feedback-response-dialog-comments-input",
       disabled: saving,
-      label: "Additional comments",
       multiline: true,
       minRows: 2,
-      onChange: (e) => setComments(e.target.value),
+      onChange: (e) => setComments((prevComments) => ({
+        responseComments: {
+          ...prevComments.responseComments
+        },
+        additionalComments: e.target.value
+      })),
       variant: "outlined",
-      value: comments
+      value: comments.additionalComments || ""
     }
-  )), /* @__PURE__ */ React.createElement(Typography, { className: classes.contactConsent }, "Can we reach out to you for more info?", /* @__PURE__ */ React.createElement(Grid, { component: "label", container: true, alignItems: "center", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, "No"), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Typography, { className: classes.contactConsent }, "May we contact you about your feedback?", /* @__PURE__ */ React.createElement(Grid, { component: "label", container: true, alignItems: "center", spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true }, "No"), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Switch,
     {
       checked: consent,
       disabled: saving,
       onChange: (e) => setConsent(e.target.checked)
     }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Yes")))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { color: "primary", disabled: saving, onClick: onClose }, "Close"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, "Yes")))), /* @__PURE__ */ React.createElement(DialogActions, { className: classes.dialogActions }, /* @__PURE__ */ React.createElement(
     Button,
     {
       color: "primary",
@@ -105,7 +162,7 @@ const FeedbackResponseDialog = (props) => {
       onClick: saveResponse
     },
     "Submit"
-  )));
+  ), /* @__PURE__ */ React.createElement(Button, { color: "primary", disabled: saving, onClick: onClose }, "Close")));
 };
 
 export { FeedbackResponseDialog };

package/dist/components/FeedbackResponseDialog/FeedbackResponseDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackResponseDialog.esm.js","sources":["../../../src/components/FeedbackResponseDialog/FeedbackResponseDialog.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { Progress } from '@backstage/core-components';\nimport { ErrorApiError, errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport Button from '@material-ui/core/Button';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport Grid from '@material-ui/core/Grid';\nimport Switch from '@material-ui/core/Switch';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React, { ReactNode, useState } from 'react';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\n\nimport { entityFeedbackApiRef } from '../../api';\n\n/**\n * @public\n */\nexport interface EntityFeedbackResponse {\n  id: string;\n  label: string;\n}\n\nconst defaultFeedbackResponses: EntityFeedbackResponse[] = [\n  { id: 'incorrect', label: 'Incorrect info' },\n  { id: 'missing', label: 'Missing info' },\n  { id: 'other', label: 'Other (please specify below)' },\n];\n\n/**\n * @public\n */\nexport interface FeedbackResponseDialogProps {\n  entity: Entity;\n  feedbackDialogResponses?: EntityFeedbackResponse[];\n  feedbackDialogTitle?: ReactNode;\n  open: boolean;\n  onClose: () => void;\n}\n\nconst useStyles = makeStyles({\n  contactConsent: {\n    marginTop: '5px',\n  },\n});\n\nexport const FeedbackResponseDialog = (props: FeedbackResponseDialogProps) => {\n  const {\n    entity,\n    feedbackDialogResponses = defaultFeedbackResponses,\n    feedbackDialogTitle = 'Please provide feedback on what can be improved',\n    open,\n    onClose,\n  } = props;\n  const classes = useStyles();\n  const errorApi = useApi(errorApiRef);\n  const feedbackApi = useApi(entityFeedbackApiRef);\n  const [responseSelections, setResponseSelections] = useState(\n    Object.fromEntries(feedbackDialogResponses.map(r => [r.id, false])),\n  );\n  const [comments, setComments] = useState('');\n  const [consent, setConsent] = useState(true);\n\n  const [{ loading: saving }, saveResponse] = useAsyncFn(async () => {\n    try {\n      await feedbackApi.recordResponse(stringifyEntityRef(entity), {\n        comments,\n        consent,\n        response: Object.keys(responseSelections)\n          .filter(id => responseSelections[id])\n          .join(','),\n      });\n      onClose();\n    } catch (e) {\n      errorApi.post(e as ErrorApiError);\n    }\n  }, [comments, consent, entity, feedbackApi, onClose, responseSelections]);\n\n  return (\n    <Dialog open={open} onClose={() => !saving && onClose()}>\n      {saving && <Progress />}\n      <DialogTitle>{feedbackDialogTitle}</DialogTitle>\n      <DialogContent>\n        <FormControl component=\"fieldset\">\n          <FormLabel component=\"legend\">Choose all that apply</FormLabel>\n          <FormGroup>\n            {feedbackDialogResponses.map(response => (\n              <FormControlLabel\n                key={response.id}\n                control={\n                  <Checkbox\n                    checked={responseSelections[response.id]}\n                    disabled={saving}\n                    name={response.id}\n                    onChange={e =>\n                      setResponseSelections({\n                        ...responseSelections,\n                        [e.target.name]: e.target.checked,\n                      })\n                    }\n                  />\n                }\n                label={response.label}\n              />\n            ))}\n          </FormGroup>\n        </FormControl>\n        <FormControl fullWidth>\n          <TextField\n            data-testid=\"feedback-response-dialog-comments-input\"\n            disabled={saving}\n            label=\"Additional comments\"\n            multiline\n            minRows={2}\n            onChange={e => setComments(e.target.value)}\n            variant=\"outlined\"\n            value={comments}\n          />\n        </FormControl>\n        <Typography className={classes.contactConsent}>\n          Can we reach out to you for more info?\n          <Grid component=\"label\" container alignItems=\"center\" spacing={1}>\n            <Grid item>No</Grid>\n            <Grid item>\n              <Switch\n                checked={consent}\n                disabled={saving}\n                onChange={e => setConsent(e.target.checked)}\n              />\n            </Grid>\n            <Grid item>Yes</Grid>\n          </Grid>\n        </Typography>\n      </DialogContent>\n      <DialogActions>\n        <Button color=\"primary\" disabled={saving} onClick={onClose}>\n          Close\n        </Button>\n        <Button\n          color=\"primary\"\n          data-testid=\"feedback-response-dialog-submit-button\"\n          disabled={saving}\n          onClick={saveResponse}\n        >\n          Submit\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeedbackResponseDialog.esm.js","sources":["../../../src/components/FeedbackResponseDialog/FeedbackResponseDialog.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { Progress } from '@backstage/core-components';\nimport { ErrorApiError, errorApiRef, useApi } from '@backstage/core-plugin-api';\nimport Button from '@material-ui/core/Button';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Collapse from '@material-ui/core/Collapse';\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogActions from '@material-ui/core/DialogActions';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport FormControl from '@material-ui/core/FormControl';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport FormGroup from '@material-ui/core/FormGroup';\nimport FormLabel from '@material-ui/core/FormLabel';\nimport Grid from '@material-ui/core/Grid';\nimport Switch from '@material-ui/core/Switch';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport React, { ReactNode, useState } from 'react';\nimport useAsyncFn from 'react-use/esm/useAsyncFn';\n\nimport { entityFeedbackApiRef } from '../../api';\n\n/**\n * @public\n */\nexport interface EntityFeedbackResponse {\n  id: string;\n  label: string;\n}\nexport interface Comments {\n  responseComments: {\n    [key: string]: string;\n  };\n  additionalComments?: string;\n}\n\nconst defaultFeedbackResponses: EntityFeedbackResponse[] = [\n  { id: 'incorrect', label: 'Incorrect info' },\n  { id: 'missing', label: 'Missing info' },\n  { id: 'other', label: 'Other' },\n];\n\n/**\n * @public\n */\nexport interface FeedbackResponseDialogProps {\n  entity: Entity;\n  feedbackDialogResponses?: EntityFeedbackResponse[];\n  feedbackDialogTitle?: ReactNode;\n  open: boolean;\n  onClose: () => void;\n}\n\nconst useStyles = makeStyles<Theme>(\n  theme => ({\n    contactConsent: {\n      marginTop: theme.spacing(1.5),\n    },\n    commentBoxes: {\n      marginBottom: theme.spacing(1.5),\n    },\n    boxContainer: {\n      marginBottom: theme.spacing(1.5),\n      marginTop: theme.spacing(1.5),\n      marginLeft: theme.spacing(1),\n      paddingRight: theme.spacing(1),\n    },\n    formLabel: {\n      marginBottom: theme.spacing(1.5),\n    },\n    dialogActions: {\n      justifyContent: 'flex-start',\n    },\n  }),\n  { name: 'BackstageEntityFeedbackDialog' },\n);\n\nexport const FeedbackResponseDialog = (props: FeedbackResponseDialogProps) => {\n  const {\n    entity,\n    feedbackDialogResponses = defaultFeedbackResponses,\n    feedbackDialogTitle = 'Tell us what could be better',\n    open,\n    onClose,\n  } = props;\n  const classes = useStyles();\n  const errorApi = useApi(errorApiRef);\n  const feedbackApi = useApi(entityFeedbackApiRef);\n  const [responseSelections, setResponseSelections] = useState(\n    Object.fromEntries(feedbackDialogResponses.map(r => [r.id, false])),\n  );\n  const [comments, setComments] = useState<Comments>({\n    responseComments: {},\n    additionalComments: '',\n  });\n  const [consent, setConsent] = useState(true);\n\n  const [{ loading: saving }, saveResponse] = useAsyncFn(async () => {\n    // filter out responses that were not selected\n    const filteredResponseComments = Object.entries(\n      comments.responseComments,\n    ).reduce((entry, [key, value]) => {\n      if (responseSelections[key]) {\n        entry[key] = value;\n      }\n      return entry;\n    }, {} as { [key: string]: string });\n\n    const filteredComments = {\n      ...comments,\n      responseComments: filteredResponseComments,\n    };\n    try {\n      await feedbackApi.recordResponse(stringifyEntityRef(entity), {\n        comments: JSON.stringify(filteredComments),\n        consent,\n        response: Object.keys(responseSelections)\n          .filter(id => responseSelections[id])\n          .join(','),\n      });\n      onClose();\n    } catch (e) {\n      errorApi.post(e as ErrorApiError);\n    }\n  }, [comments, consent, entity, feedbackApi, onClose, responseSelections]);\n\n  return (\n    <Dialog open={open} onClose={() => !saving && onClose()}>\n      {saving && <Progress />}\n      <DialogTitle>{feedbackDialogTitle}</DialogTitle>\n      <DialogContent>\n        <FormControl component=\"fieldset\" fullWidth>\n          <FormLabel component=\"legend\">Select all that apply</FormLabel>\n          <FormGroup className={classes.boxContainer}>\n            {feedbackDialogResponses.map((response: EntityFeedbackResponse) => (\n              <Grid container key={response.id} direction=\"column\" spacing={1}>\n                <FormControlLabel\n                  control={\n                    <Checkbox\n                      checked={responseSelections[response.id]}\n                      disabled={saving}\n                      name={response.id}\n                      onChange={e =>\n                        setResponseSelections({\n                          ...responseSelections,\n                          [e.target.name]: e.target.checked,\n                        })\n                      }\n                      color=\"primary\"\n                    />\n                  }\n                  label={response.label}\n                />\n                <Collapse in={responseSelections[response.id]}>\n                  <TextField\n                    data-testid={`feedback-response-dialog-collapse-comments-input-${\n                      responseSelections[response.id]\n                    }`}\n                    disabled={saving}\n                    className={classes.commentBoxes}\n                    multiline\n                    minRows={2}\n                    fullWidth\n                    variant=\"outlined\"\n                    value={comments.responseComments[response.id] || ''}\n                    onChange={e =>\n                      setComments(prevComments => ({\n                        responseComments: {\n                          ...prevComments.responseComments,\n                          [response.id]: e.target.value,\n                        },\n                        additionalComments: prevComments.additionalComments,\n                      }))\n                    }\n                  />\n                </Collapse>\n              </Grid>\n            ))}\n          </FormGroup>\n        </FormControl>\n        <FormControl fullWidth>\n          <FormLabel component=\"legend\" className={classes.formLabel}>\n            Additional comments\n          </FormLabel>\n          <TextField\n            data-testid=\"feedback-response-dialog-comments-input\"\n            disabled={saving}\n            multiline\n            minRows={2}\n            onChange={e =>\n              setComments(prevComments => ({\n                responseComments: {\n                  ...prevComments.responseComments,\n                },\n                additionalComments: e.target.value,\n              }))\n            }\n            variant=\"outlined\"\n            value={comments.additionalComments || ''}\n          />\n        </FormControl>\n        <Typography className={classes.contactConsent}>\n          May we contact you about your feedback?\n          <Grid component=\"label\" container alignItems=\"center\" spacing={1}>\n            <Grid item>No</Grid>\n            <Grid item>\n              <Switch\n                checked={consent}\n                disabled={saving}\n                onChange={e => setConsent(e.target.checked)}\n              />\n            </Grid>\n            <Grid item>Yes</Grid>\n          </Grid>\n        </Typography>\n      </DialogContent>\n      <DialogActions className={classes.dialogActions}>\n        <Button\n          color=\"primary\"\n          data-testid=\"feedback-response-dialog-submit-button\"\n          disabled={saving}\n          onClick={saveResponse}\n        >\n          Submit\n        </Button>\n        <Button color=\"primary\" disabled={saving} onClick={onClose}>\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FeedbackResponseTable/FeedbackResponseTable.esm.js

@@ -4,6 +4,7 @@ import { EntityRefLink } from '@backstage/plugin-catalog-react';
 import Chip from '@material-ui/core/Chip';
 import { makeStyles } from '@material-ui/core/styles';
 import CheckIcon from '@material-ui/icons/Check';
+import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import useAsync from 'react-use/esm/useAsync';
 import '@backstage/errors';
@@ -12,6 +13,13 @@ import { entityFeedbackApiRef } from '../../api/EntityFeedbackApi.esm.js';
 const useStyles = makeStyles((theme) => ({
   consentCheck: {
     color: theme.palette.status.ok
+  },
+  listItem: {
+    padding: "0",
+    marginTop: theme.spacing(1)
+  },
+  list: {
+    paddingLeft: "0"
   }
 }));
 const FeedbackResponseTable = (props) => {
@@ -47,7 +55,23 @@ const FeedbackResponseTable = (props) => {
       width: "35%",
       render: (response) => /* @__PURE__ */ React.createElement(React.Fragment, null, (response.response || "").split(",").map((v) => v.trim()).filter(Boolean).map((res) => /* @__PURE__ */ React.createElement(Chip, { key: res, size: "small", label: res })))
     },
-    { title: "Comments", field: "comments", width: "40%" }
+    {
+      title: "Comments",
+      field: "comments",
+      width: "40%",
+      render: (response) => {
+        var _a;
+        let parsedComment;
+        try {
+          parsedComment = (response == null ? void 0 : response.comments) && JSON.parse(response.comments);
+        } catch (e) {
+          parsedComment = response.comments;
+        }
+        return /* @__PURE__ */ React.createElement("div", null, typeof parsedComment === "object" ? /* @__PURE__ */ React.createElement("ul", { className: classes.list }, (_a = Object.entries(parsedComment.responseComments)) == null ? void 0 : _a.map(
+          ([key, value]) => /* @__PURE__ */ React.createElement("li", { key, className: classes.listItem }, /* @__PURE__ */ React.createElement("strong", null, key, ":"), " ", value)
+        ), parsedComment.additionalComments && /* @__PURE__ */ React.createElement("li", { className: classes.listItem }, /* @__PURE__ */ React.createElement("strong", null, "additional:"), " ", parsedComment.additionalComments)) : /* @__PURE__ */ React.createElement(Typography, null, parsedComment));
+      }
+    }
   ];
   if (error) {
     return /* @__PURE__ */ React.createElement(

package/dist/components/FeedbackResponseTable/FeedbackResponseTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackResponseTable.esm.js","sources":["../../../src/components/FeedbackResponseTable/FeedbackResponseTable.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorPanel, Table } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { FeedbackResponse } from '@backstage-community/plugin-entity-feedback-common';\nimport Chip from '@material-ui/core/Chip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckIcon from '@material-ui/icons/Check';\nimport React from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { entityFeedbackApiRef } from '../../api';\n\ntype ResponseRow = Omit<FeedbackResponse, 'entityRef'>;\n\nconst useStyles = makeStyles(theme => ({\n  consentCheck: {\n    color: theme.palette.status.ok,\n  },\n}));\n\n/**\n * @public\n */\nexport interface FeedbackResponseTableProps {\n  entityRef: string;\n  title?: string;\n}\n\nexport const FeedbackResponseTable = (props: FeedbackResponseTableProps) => {\n  const { entityRef, title = 'Entity Responses' } = props;\n  const classes = useStyles();\n  const feedbackApi = useApi(entityFeedbackApiRef);\n\n  const {\n    error,\n    loading,\n    value: responses,\n  } = useAsync(async () => {\n    if (!entityRef) {\n      return [];\n    }\n\n    return feedbackApi.getResponses(entityRef);\n  }, [entityRef, feedbackApi]);\n\n  const columns = [\n    {\n      title: 'User',\n      field: 'userRef',\n      width: '15%',\n      render: (response: ResponseRow) => (\n        <EntityRefLink entityRef={response.userRef} defaultKind=\"user\" />\n      ),\n    },\n    {\n      title: 'OK to contact?',\n      field: 'consent',\n      width: '10%',\n      render: (response: ResponseRow) =>\n        response.consent ? <CheckIcon className={classes.consentCheck} /> : '',\n    },\n    {\n      title: 'Responses',\n      field: 'response',\n      width: '35%',\n      render: (response: ResponseRow) => (\n        <>\n          {(response.response || '')\n            .split(',')\n            .map(v => v.trim()) // removes whitespace\n            .filter(Boolean) // removes accidental empty entries\n            .map(res => (\n              <Chip key={res} size=\"small\" label={res} />\n            ))}\n        </>\n      ),\n    },\n    { title: 'Comments', field: 'comments', width: '40%' },\n  ];\n\n  if (error) {\n    return (\n      <ErrorPanel\n        defaultExpanded\n        title=\"Failed to load feedback responses\"\n        error={error}\n      />\n    );\n  }\n\n  return (\n    <Table<ResponseRow>\n      columns={columns}\n      data={(responses ?? []) as ResponseRow[]}\n      isLoading={loading}\n      options={{\n        emptyRowsWhenPaging: false,\n        loadingType: 'linear',\n        pageSize: 20,\n        pageSizeOptions: [20, 50, 100],\n        paging: true,\n        showEmptyDataSourceMessage: !loading,\n      }}\n      title={title}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeedbackResponseTable.esm.js","sources":["../../../src/components/FeedbackResponseTable/FeedbackResponseTable.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorPanel, Table } from '@backstage/core-components';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { FeedbackResponse } from '@backstage-community/plugin-entity-feedback-common';\nimport Chip from '@material-ui/core/Chip';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckIcon from '@material-ui/icons/Check';\nimport Typography from '@material-ui/core/Typography';\nimport React from 'react';\nimport useAsync from 'react-use/esm/useAsync';\n\nimport { entityFeedbackApiRef } from '../../api';\nimport { Comments } from '../FeedbackResponseDialog';\n\ntype ResponseRow = Omit<FeedbackResponse, 'entityRef'>;\n\nconst useStyles = makeStyles(theme => ({\n  consentCheck: {\n    color: theme.palette.status.ok,\n  },\n  listItem: {\n    padding: '0',\n    marginTop: theme.spacing(1),\n  },\n  list: {\n    paddingLeft: '0',\n  },\n}));\n\n/**\n * @public\n */\nexport interface FeedbackResponseTableProps {\n  entityRef: string;\n  title?: string;\n}\n\nexport const FeedbackResponseTable = (props: FeedbackResponseTableProps) => {\n  const { entityRef, title = 'Entity Responses' } = props;\n  const classes = useStyles();\n  const feedbackApi = useApi(entityFeedbackApiRef);\n\n  const {\n    error,\n    loading,\n    value: responses,\n  } = useAsync(async () => {\n    if (!entityRef) {\n      return [];\n    }\n\n    return feedbackApi.getResponses(entityRef);\n  }, [entityRef, feedbackApi]);\n\n  const columns = [\n    {\n      title: 'User',\n      field: 'userRef',\n      width: '15%',\n      render: (response: ResponseRow) => (\n        <EntityRefLink entityRef={response.userRef} defaultKind=\"user\" />\n      ),\n    },\n    {\n      title: 'OK to contact?',\n      field: 'consent',\n      width: '10%',\n      render: (response: ResponseRow) =>\n        response.consent ? <CheckIcon className={classes.consentCheck} /> : '',\n    },\n    {\n      title: 'Responses',\n      field: 'response',\n      width: '35%',\n      render: (response: ResponseRow) => (\n        <>\n          {(response.response || '')\n            .split(',')\n            .map((v: string) => v.trim()) // removes whitespace\n            .filter(Boolean) // removes accidental empty entries\n            .map((res: string) => (\n              <Chip key={res} size=\"small\" label={res} />\n            ))}\n        </>\n      ),\n    },\n    {\n      title: 'Comments',\n      field: 'comments',\n      width: '40%',\n      render: (response: ResponseRow) => {\n        // Check if comment is a stringified object\n        let parsedComment;\n        try {\n          parsedComment =\n            response?.comments && (JSON.parse(response.comments) as Comments);\n        } catch (e) {\n          // If parsing fails, assume it's a regular string\n          parsedComment = response.comments;\n        }\n        return (\n          <div>\n            {typeof parsedComment === 'object' ? (\n              <ul className={classes.list}>\n                {Object.entries<string>(parsedComment.responseComments)?.map(\n                  ([key, value]) => (\n                    <li key={key} className={classes.listItem}>\n                      <strong>{key}:</strong> {value}\n                    </li>\n                  ),\n                )}\n                {parsedComment.additionalComments && (\n                  <li className={classes.listItem}>\n                    <strong>additional:</strong>{' '}\n                    {parsedComment.additionalComments}\n                  </li>\n                )}\n              </ul>\n            ) : (\n              <Typography>{parsedComment}</Typography>\n            )}\n          </div>\n        );\n      },\n    },\n  ];\n\n  if (error) {\n    return (\n      <ErrorPanel\n        defaultExpanded\n        title=\"Failed to load feedback responses\"\n        error={error}\n      />\n    );\n  }\n\n  return (\n    <Table<ResponseRow>\n      columns={columns}\n      data={(responses ?? []) as ResponseRow[]}\n      isLoading={loading}\n      options={{\n        emptyRowsWhenPaging: false,\n        loadingType: 'linear',\n        pageSize: 20,\n        pageSizeOptions: [20, 50, 100],\n        paging: true,\n        showEmptyDataSourceMessage: !loading,\n      }}\n      title={title}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-entity-feedback",
-  "version": "0.2.19",
+  "version": "0.3.0",
   "backstage": {
     "role": "frontend-plugin"
   },
@@ -45,6 +45,8 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.26.5",
+    "@backstage/dev-utils": "^1.0.32",
+    "@backstage/plugin-catalog": "^1.20.0",
     "@backstage/test-utils": "^1.5.5",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",