npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.48.2 → 3.49.0 - Mend

@drodil/backstage-plugin-qeta-react 3.48.2 → 3.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js CHANGED Viewed

@@ -2,72 +2,176 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { collectionRouteRef } from '../../routes.esm.js';
-import { Card, CardActionArea, CardMedia, CardContent, Typography, Grid, Tooltip, Button } from '@material-ui/core';
+import { makeStyles, Card, CardMedia, Box, CardContent, Typography, Grid } from '@material-ui/core';
 import DOMPurify from 'dompurify';
 import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
-import { useCollectionsFollow } from '../../hooks/useCollectionsFollow.esm.js';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
-import Visibility from '@material-ui/icons/Visibility';
+import { CollectionFollowButton } from '../Buttons/CollectionFollowButton.esm.js';
+import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
+const useStyles = makeStyles((theme) => ({
+  placeholderImage: {
+    height: 140,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: theme.palette.type === "dark" ? `linear-gradient(135deg, ${theme.palette.grey[800]} 0%, ${theme.palette.grey[900]} 100%)` : `linear-gradient(135deg, ${theme.palette.grey[200]} 0%, ${theme.palette.grey[300]} 100%)`,
+    color: theme.palette.text.secondary,
+    opacity: 0.8
+  },
+  card: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    cursor: "pointer",
+    position: "relative",
+    "&:hover::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "currentColor",
+      opacity: theme.palette.action.hoverOpacity || 0.04,
+      borderRadius: theme.shape.borderRadius,
+      pointerEvents: "none"
+    }
+  },
+  statsGrid: {
+    marginTop: "auto"
+  },
+  statItem: {
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center"
+  }
+}));
 const CollectionsGridItem = (props) => {
   const { collection } = props;
+  const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const collectionRoute = useRouteRef(collectionRouteRef);
   const navigate = useNavigate();
-  const collections = useCollectionsFollow();
   const href = collectionRoute({ id: collection.id.toString(10) });
-  return /* @__PURE__ */ jsxs(Card, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs(CardActionArea, { onClick: () => navigate(href), children: [
-      collection.headerImage && /* @__PURE__ */ jsx(
-        CardMedia,
-        {
-          component: "img",
-          height: "140",
-          onError: (e) => e.currentTarget.style.display = "none",
-          image: collection.headerImage,
-          alt: collection.title
-        }
-      ),
-      /* @__PURE__ */ jsxs(CardContent, { style: { paddingBottom: "0.5rem" }, children: [
-        /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h6", component: "div", children: collection.title }),
-        collection.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: DOMPurify.sanitize(
-          truncate(removeMarkdownFormatting(collection.description), 200)
-        ) }),
-        /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: collection }) }),
-          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
-            t("common.posts", {
-              count: collection.postsCount,
-              itemType: "post"
-            }),
-            " \xB7 ",
-            t("common.followers", {
-              count: collection.followers
-            })
-          ] }) })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(CardContent, { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("collectionButton.tooltip"), children: /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsxs(Card, { className: classes.card, onClick: () => navigate(href), children: [
+    collection.headerImage ? /* @__PURE__ */ jsx(
+      CardMedia,
       {
-        size: "small",
-        variant: "outlined",
-        color: collections.isFollowingCollection(collection) ? "secondary" : "primary",
-        onClick: () => {
-          if (collections.isFollowingCollection(collection)) {
-            collections.unfollowCollection(collection);
-          } else {
-            collections.followCollection(collection);
-          }
+        component: "img",
+        height: "140",
+        onError: (e) => e.currentTarget.style.display = "none",
+        image: collection.headerImage,
+        alt: collection.title,
+        style: { objectFit: "cover" }
+      }
+    ) : /* @__PURE__ */ jsx(Box, { className: classes.placeholderImage, children: /* @__PURE__ */ jsx(PlaylistPlayIcon, { style: { fontSize: 60 } }) }),
+    /* @__PURE__ */ jsxs(
+      CardContent,
+      {
+        style: {
+          paddingBottom: "0.5rem",
+          flexGrow: 1,
+          display: "flex",
+          flexDirection: "column"
         },
-        startIcon: collections.isFollowingCollection(collection) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-        children: collections.isFollowingCollection(collection) ? t("collectionButton.unfollow") : t("collectionButton.follow")
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              children: [
+                /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h6", component: "div", children: collection.title }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    onClick: (e) => e.stopPropagation(),
+                    onKeyPress: () => {
+                    },
+                    role: "button",
+                    tabIndex: 0,
+                    children: /* @__PURE__ */ jsx(CollectionFollowButton, { collection })
+                  }
+                )
+              ]
+            }
+          ),
+          collection.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true, children: DOMPurify.sanitize(
+            truncate(removeMarkdownFormatting(collection.description), 200)
+          ) }),
+          /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(TagsAndEntities, { entity: collection }) }),
+          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: classes.statsGrid, children: [
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                className: classes.statItem,
+                children: [
+                  /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: collection.questionsCount }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.questions") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                className: classes.statItem,
+                children: [
+                  /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: collection.articlesCount }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.articles") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                className: classes.statItem,
+                children: [
+                  /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: collection.linksCount }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.links") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                className: classes.statItem,
+                children: [
+                  /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small", color: "disabled" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: collection.followers }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("common.followersPlain") })
+                ]
+              }
+            ) })
+          ] })
+        ]
       }
-    ) }) }) }) })
+    )
   ] });
 };

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n Collection,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n Button,\n Card,\n CardActionArea,\n CardContent,\n CardMedia,\n Grid,\n Tooltip,\n Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\n\nexport interface PostsGridItemProps {\n collection: Collection;\n}\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n const { collection } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const collectionRoute = useRouteRef(collectionRouteRef);\n const navigate = useNavigate();\n const collections = useCollectionsFollow();\n const href = collectionRoute({ id: collection.id.toString(10) });\n\n return (\n <Card style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>\n <CardActionArea onClick={() => navigate(href)}>\n {collection.headerImage && (\n <CardMedia\n component=\"img\"\n height=\"140\"\n onError={e => (e.currentTarget.style.display = 'none')}\n image={collection.headerImage}\n alt={collection.title}\n />\n )}\n <CardContent style={{ paddingBottom: '0.5rem' }}>\n <Typography gutterBottom variant=\"h6\" component=\"div\">\n {collection.title}\n </Typography>\n {collection.description && (\n <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(collection.description), 200),\n )}\n </Typography>\n )}\n <Grid container>\n <Grid item xs={12}>\n <TagsAndEntities entity={collection} />\n </Grid>\n <Grid item>\n <Typography variant=\"caption\">\n {t('common.posts', {\n count: collection.postsCount,\n itemType: 'post',\n })}\n {' · '}\n {t('common.followers', {\n count: collection.followers,\n })}\n </Typography>\n </Grid>\n </Grid>\n </CardContent>\n </CardActionArea>\n <CardContent style={{ marginTop: 'auto' }}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('collectionButton.tooltip')}>\n <Button\n size=\"small\"\n variant=\"outlined\"\n color={\n collections.isFollowingCollection(collection)\n ? 'secondary'\n : 'primary'\n }\n onClick={() => {\n if (collections.isFollowingCollection(collection)) {\n collections.unfollowCollection(collection);\n } else {\n collections.followCollection(collection);\n }\n }}\n startIcon={\n collections.isFollowingCollection(collection) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {collections.isFollowingCollection(collection)\n ? t('collectionButton.unfollow')\n : t('collectionButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n Collection,\n removeMarkdownFormatting,\n truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n Card,\n CardContent,\n CardMedia,\n Grid,\n Typography,\n Box,\n makeStyles,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { CollectionFollowButton } from '../Buttons/CollectionFollowButton';\nimport PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\n\nexport interface PostsGridItemProps {\n collection: Collection;\n}\n\nconst useStyles = makeStyles(theme => ({\n placeholderImage: {\n height: 140,\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background:\n theme.palette.type === 'dark'\n ? `linear-gradient(135deg, ${theme.palette.grey[800]} 0%, ${theme.palette.grey[900]} 100%)`\n : `linear-gradient(135deg, ${theme.palette.grey[200]} 0%, ${theme.palette.grey[300]} 100%)`,\n color: theme.palette.text.secondary,\n opacity: 0.8,\n },\n card: {\n height: '100%',\n display: 'flex',\n flexDirection: 'column',\n cursor: 'pointer',\n position: 'relative',\n '&:hover::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: 'currentColor',\n opacity: theme.palette.action.hoverOpacity \|\| 0.04,\n borderRadius: theme.shape.borderRadius,\n pointerEvents: 'none',\n },\n },\n statsGrid: {\n marginTop: 'auto',\n },\n statItem: {\n padding: theme.spacing(1),\n borderRadius: theme.shape.borderRadius,\n width: '100%',\n height: '100%',\n justifyContent: 'center',\n },\n}));\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n const { collection } = props;\n const classes = useStyles();\n const { t } = useTranslationRef(qetaTranslationRef);\n\n const collectionRoute = useRouteRef(collectionRouteRef);\n const navigate = useNavigate();\n const href = collectionRoute({ id: collection.id.toString(10) });\n\n return (\n <Card className={classes.card} onClick={() => navigate(href)}>\n {collection.headerImage ? (\n <CardMedia\n component=\"img\"\n height=\"140\"\n onError={e => (e.currentTarget.style.display = 'none')}\n image={collection.headerImage}\n alt={collection.title}\n style={{ objectFit: 'cover' }}\n />\n ) : (\n <Box className={classes.placeholderImage}>\n <PlaylistPlayIcon style={{ fontSize: 60 }} />\n </Box>\n )}\n <CardContent\n style={{\n paddingBottom: '0.5rem',\n flexGrow: 1,\n display: 'flex',\n flexDirection: 'column',\n }}\n >\n <Box\n display=\"flex\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n >\n <Typography gutterBottom variant=\"h6\" component=\"div\">\n {collection.title}\n </Typography>\n <div\n onClick={e => e.stopPropagation()}\n onKeyPress={() => {}}\n role=\"button\"\n tabIndex={0}\n >\n <CollectionFollowButton collection={collection} />\n </div>\n </Box>\n {collection.description && (\n <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n {DOMPurify.sanitize(\n truncate(removeMarkdownFormatting(collection.description), 200),\n )}\n </Typography>\n )}\n <Box mt={2}>\n <TagsAndEntities entity={collection} />\n </Box>\n <Grid container spacing={1} className={classes.statsGrid}>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={classes.statItem}\n >\n <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {collection.questionsCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('common.questions')}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={classes.statItem}\n >\n <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {collection.articlesCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('common.articles')}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={classes.statItem}\n >\n <LinkIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {collection.linksCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('common.links')}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={classes.statItem}\n >\n <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {collection.followers}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('common.followersPlain')}\n </Typography>\n </Box>\n </Grid>\n </Grid>\n </CardContent>\n </Card>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CommentSection/CommentForm.esm.js CHANGED Viewed

@@ -1,18 +1,21 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { Grid, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
 import { useForm, Controller } from 'react-hook-form';
 import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor.esm.js';
 import { useConfirmNavigationIfEdited } from '../../utils/utils.esm.js';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 const CommentForm = (props) => {
-  const { submit, disabled, saveButtonTitle, defaultValues } = props;
-  const { handleSubmit, control } = useForm({
+  const { submit, disabled, saveButtonTitle, defaultValues, onDiscard } = props;
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const { handleSubmit, control, reset } = useForm({
     defaultValues
   });
   const [edited, setEdited] = useState(false);
   useConfirmNavigationIfEdited(edited);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: handleSubmit(submit),
@@ -20,8 +23,8 @@ const CommentForm = (props) => {
         setEdited(true);
       },
       className: "qetaCommentForm",
-      children: /* @__PURE__ */ jsxs(Grid, { container: true, children: [
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsx(
+      children: [
+        /* @__PURE__ */ jsx(
           Controller,
           {
             control,
@@ -44,21 +47,47 @@ const CommentForm = (props) => {
             ),
             name: "content"
           }
-        ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 1, children: /* @__PURE__ */ jsx(
-          Button,
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            variant: "contained",
-            size: "small",
-            className: "qetaCommentBtn",
-            type: "submit",
-            color: "primary",
-            disabled,
-            style: { minWidth: "100%" },
-            children: saveButtonTitle
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              marginTop: "0.5rem"
+            },
+            children: [
+              onDiscard && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "text",
+                  size: "small",
+                  color: "primary",
+                  onClick: () => {
+                    setEdited(false);
+                    onDiscard();
+                    reset();
+                  },
+                  style: { marginRight: "0.5rem" },
+                  children: t("common.cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "contained",
+                  size: "small",
+                  className: "qetaCommentBtn",
+                  type: "submit",
+                  color: "primary",
+                  disabled,
+                  children: saveButtonTitle
+                }
+              )
+            ]
           }
-        ) })
-      ] })
+        )
+      ]
     }
   );
 };

package/dist/components/CommentSection/CommentForm.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommentForm.esm.js","sources":["../../../src/components/CommentSection/CommentForm.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\nimport { Button, ~~Grid~~ } from '@material-ui/core';\nimport { Controller, useForm } from 'react-hook-form';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport const CommentForm = (props: {\n submit: (data: { content: string }) => void;\n disabled?: boolean;\n defaultValues?: { content: string };\n saveButtonTitle: string;\n}) => {\n const { submit, disabled, saveButtonTitle, defaultValues } = props;\n const { handleSubmit, control } = useForm<{ content: string }>({\n defaultValues,\n });\n const [edited, setEdited] = useState(false);\n useConfirmNavigationIfEdited(edited);\n\n return (\n <form\n onSubmit={handleSubmit(submit)}\n onChange={() => {\n setEdited(true);\n }}\n className=\"qetaCommentForm\"\n >\n <~~Grid container>\n <Grid item xs={11}>\n <~~Controller\n control={control}\n defaultValue=\"\"\n rules={{\n required: true,\n }}\n render={({ field: { onChange, value } }) => (\n <MarkdownEditor\n autoFocus\n value={value}\n onChange={onChange}\n height={100}\n disablePreview\n disableAttachments\n disableToolbar\n disabled={disabled}\n />\n )}\n name=\"content\"\n />\n ~~</Grid>\~~n ~~<Grid~~ ~~item~~ ~~xs={1~~}>\n <Button\n variant=\"~~contained~~\"\n size=\"small\"\n ~~className~~=\"~~qetaCommentBtn~~\"\n ~~type=\"submit~~\"\n ~~color=\"primary\"\~~n ~~disabled={disabled~~}\n style={{ ~~minWidth~~: '~~100%~~' }}\n >\n {~~saveButtonTitle~~}\n </Button>\n </~~Grid~~>\n </~~Grid~~>\n </form>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;AAOa~~,MAAA,WAAA,GAAc,CAAC,~~KAKtB~~,KAAA;AACJ,EAAA,MAAM,EAAE,~~MAAA~~,~~EAAQ~~,~~QAAU~~,EAAA,~~eAAA~~,~~EAAiB~~,~~eAAkB~~,GAAA,KAAA;~~AAC7D~~,EAAA,MAAM,EAAE,YAAA,EAAc,~~OAAQ~~,EAAA,~~GAAI~~,OAA6B,CAAA;AAAA,~~IAC7D~~;AAAA,GACD,CAAA;AACD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,4BAAA,CAA6B,MAAM,CAAA;AAEnC,EACE,uBAAA,~~GAAA~~;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,aAAa,MAAM,CAAA;AAAA,MAC7B,UAAU,MAAM;AACd,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,OAChB;AAAA,MACA,SAAU,EAAA,iBAAA;AAAA,MAEV,QAAA,~~kBAAA,IAAA,CAAC,IAAK,~~EAAA~~,EAAA,SAAA,EAAS,IACb,EAAA,QAAA,EAAA~~;AAAA,wBAAA,GAAA~~,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,QAAA,kBAAA,GAAA~~;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,YAAa,EAAA,EAAA;AAAA,YACb,KAAO,EAAA;AAAA,cACL,QAAU,EAAA;AAAA,aACZ;AAAA,YACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAS,EAAA,IAAA;AAAA,gBACT,KAAA;AAAA,gBACA,QAAA;AAAA,gBACA,MAAQ,EAAA,GAAA;AAAA,gBACR,cAAc,EAAA,IAAA;AAAA,gBACd,kBAAkB,EAAA,IAAA;AAAA,gBAClB,cAAc,EAAA,IAAA;AAAA,gBACd;AAAA;AAAA,aACF;AAAA,YAEF,IAAK,EAAA;AAAA;AAAA,~~SAET~~,~~EAAA~~,~~CAAA~~;AAAA,~~wBACC~~,~~GAAA~~,~~CAAA~~,~~IAAA~~,EAAA,~~EAAK~~,~~IAAI~~,EAAA,~~IAAA~~,~~EAAC~~,~~IAAI~~,~~CACb~~,EAAA,QAAA,~~kBAAA~~,GAAA;AAAA,~~UAAC~~,MAAA;AAAA,~~UAAA~~;AAAA,~~YACC~~,OAAQ,EAAA,~~WAAA~~;AAAA,~~YACR~~,IAAK,EAAA,OAAA;AAAA,~~YACL~~,~~SAAU~~,EAAA,~~gBAAA~~;AAAA,~~YACV~~,~~IAAK~~,~~EAAA~~,~~QAAA~~;~~AAAA~~,~~YACL~~,~~KAAM~~,EAAA,~~SAAA~~;AAAA,~~YACN,QAAA~~;AAAA,~~YACA~~,KAAA,EAAO,EAAE,~~QAAA~~,~~EAAU~~,~~MAAO~~,EAAA;AAAA,~~YAEzB~~,~~QAAA~~,EAAA;AAAA;AAAA,~~SAEL~~,EAAA;AAAA,~~OACF~~,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
1	+ {"version":3,"file":"CommentForm.esm.js","sources":["../../../src/components/CommentSection/CommentForm.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus /\n/ eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\nimport { Button } from '@material-ui/core';\nimport { Controller, useForm } from 'react-hook-form';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const CommentForm = (props: {\n submit: (data: { content: string }) => void;\n disabled?: boolean;\n defaultValues?: { content: string };\n saveButtonTitle: string;\n onDiscard?: () => void;\n}) => {\n const { submit, disabled, saveButtonTitle, defaultValues, onDiscard } = props;\n const { t } = useTranslationRef(qetaTranslationRef);\n const { handleSubmit, control, reset } = useForm<{ content: string }>({\n defaultValues,\n });\n const [edited, setEdited] = useState(false);\n useConfirmNavigationIfEdited(edited);\n\n return (\n <form\n onSubmit={handleSubmit(submit)}\n onChange={() => {\n setEdited(true);\n }}\n className=\"qetaCommentForm\"\n >\n <Controller\n control={control}\n defaultValue=\"\"\n rules={{\n required: true,\n }}\n render={({ field: { onChange, value } }) => (\n <MarkdownEditor\n autoFocus\n value={value}\n onChange={onChange}\n height={100}\n disablePreview\n disableAttachments\n disableToolbar\n disabled={disabled}\n />\n )}\n name=\"content\"\n />\n <div\n style={{\n display: 'flex',\n justifyContent: 'flex-end',\n marginTop: '0.5rem',\n }}\n >\n {onDiscard && (\n <Button\n variant=\"text\"\n size=\"small\"\n color=\"primary\"\n onClick={() => {\n setEdited(false);\n onDiscard();\n reset();\n }}\n style={{ marginRight: '0.5rem' }}\n >\n {t('common.cancel')}\n </Button>\n )}\n <Button\n variant=\"contained\"\n size=\"small\"\n className=\"qetaCommentBtn\"\n type=\"submit\"\n color=\"primary\"\n disabled={disabled}\n >\n {saveButtonTitle}\n </Button>\n </div>\n </form>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUa,MAAA,WAAA,GAAc,CAAC,KAMtB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,eAAiB,EAAA,aAAA,EAAe,WAAc,GAAA,KAAA;AACxE,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,YAAA,EAAc,OAAS,EAAA,KAAA,KAAU,OAA6B,CAAA;AAAA,IACpE;AAAA,GACD,CAAA;AACD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,4BAAA,CAA6B,MAAM,CAAA;AAEnC,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,aAAa,MAAM,CAAA;AAAA,MAC7B,UAAU,MAAM;AACd,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,OAChB;AAAA,MACA,SAAU,EAAA,iBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,YAAa,EAAA,EAAA;AAAA,YACb,KAAO,EAAA;AAAA,cACL,QAAU,EAAA;AAAA,aACZ;AAAA,YACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAS,EAAA,IAAA;AAAA,gBACT,KAAA;AAAA,gBACA,QAAA;AAAA,gBACA,MAAQ,EAAA,GAAA;AAAA,gBACR,cAAc,EAAA,IAAA;AAAA,gBACd,kBAAkB,EAAA,IAAA;AAAA,gBAClB,cAAc,EAAA,IAAA;AAAA,gBACd;AAAA;AAAA,aACF;AAAA,YAEF,IAAK,EAAA;AAAA;AAAA,SACP;AAAA,wBACA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA;AAAA,cACL,OAAS,EAAA,MAAA;AAAA,cACT,cAAgB,EAAA,UAAA;AAAA,cAChB,SAAW,EAAA;AAAA,aACb;AAAA,YAEC,QAAA,EAAA;AAAA,cACC,SAAA,oBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,MAAA;AAAA,kBACR,IAAK,EAAA,OAAA;AAAA,kBACL,KAAM,EAAA,SAAA;AAAA,kBACN,SAAS,MAAM;AACb,oBAAA,SAAA,CAAU,KAAK,CAAA;AACf,oBAAU,SAAA,EAAA;AACV,oBAAM,KAAA,EAAA;AAAA,mBACR;AAAA,kBACA,KAAA,EAAO,EAAE,WAAA,EAAa,QAAS,EAAA;AAAA,kBAE9B,YAAE,eAAe;AAAA;AAAA,eACpB;AAAA,8BAEF,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,OAAQ,EAAA,WAAA;AAAA,kBACR,IAAK,EAAA,OAAA;AAAA,kBACL,SAAU,EAAA,gBAAA;AAAA,kBACV,IAAK,EAAA,QAAA;AAAA,kBACL,KAAM,EAAA,SAAA;AAAA,kBACN,QAAA;AAAA,kBAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/CommentSection/CommentListItem.esm.js CHANGED Viewed

@@ -32,12 +32,24 @@ const useStyles = makeStyles(
     metadata: {
       color: theme.palette.text.secondary,
       marginTop: theme.spacing(0.5),
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(0.5),
       "& a": {
-        color: theme.palette.primary.main,
+        color: theme.palette.text.secondary,
         transition: "all 0.2s ease-in-out",
+        textDecoration: "none",
         "&:hover": {
-          textDecoration: "underline",
-          opacity: 0.8
+          color: theme.palette.primary.main,
+          textDecoration: "underline"
+        }
+      },
+      "& .actionBtn": {
+        marginLeft: theme.spacing(1),
+        fontSize: "0.75rem",
+        opacity: 0.7,
+        "&:hover": {
+          opacity: 1
         }
       }
     }
@@ -119,7 +131,8 @@ const CommentListItem = (props) => {
       submit: saveComment,
       saveButtonTitle: t("commentList.save"),
       defaultValues: { content: comment.content },
-      disabled: posting
+      disabled: posting,
+      onDiscard: () => setEditing(false)
     }
   ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -130,37 +143,30 @@ const CommentListItem = (props) => {
       }
     ),
     /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: styles.metadata, children: [
-      " \u2013 ",
       /* @__PURE__ */ jsx(AuthorLink, { entity: comment }),
       comment.expert && /* @__PURE__ */ jsx(ExpertIcon, {}),
-      " ",
+      " \u2022 ",
       /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: comment.created }),
-      comment.canEdit && /* @__PURE__ */ jsxs(Fragment, { children: [
-        " / ",
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            underline: "none",
-            to: "#",
-            className: "qetaCommentEditBtn",
-            onClick: () => setEditing(true),
-            children: t("commentList.editLink")
-          }
-        )
-      ] }),
-      comment.canDelete && /* @__PURE__ */ jsxs(Fragment, { children: [
-        " / ",
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            underline: "none",
-            to: "#",
-            className: "qetaCommentDeleteBtn",
-            onClick: () => deleteComment(comment.id),
-            children: t("commentList.deleteLink")
-          }
-        )
-      ] })
+      comment.canEdit && /* @__PURE__ */ jsx(
+        Link,
+        {
+          underline: "none",
+          to: "#",
+          className: "actionBtn qetaCommentEditBtn",
+          onClick: () => setEditing(true),
+          children: t("commentList.editLink")
+        }
+      ),
+      comment.canDelete && /* @__PURE__ */ jsx(
+        Link,
+        {
+          underline: "none",
+          to: "#",
+          className: "actionBtn qetaCommentDeleteBtn",
+          onClick: () => deleteComment(comment.id),
+          children: t("commentList.deleteLink")
+        }
+      )
     ] })
   ] }) });
 };

package/dist/components/CommentSection/CommentListItem.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommentListItem.esm.js","sources":["../../../src/components/CommentSection/CommentListItem.tsx"],"sourcesContent":["import { Box, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { AuthorLink } from '../Links';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { Link } from '@backstage/core-components';\nimport { useState } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n AnswerResponse,\n Comment,\n PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api.ts';\nimport { CommentForm } from './CommentForm.tsx';\nimport { ExpertIcon } from '../Icons/ExpertIcon.tsx';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n box: {\n padding: theme.spacing(1.5),\n transition: 'all 0.2s ease-in-out',\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n content: {\n display: 'inline',\n '&>*:last-child:not(ul,ol,blockquote)': {\n display: 'inline',\n },\n lineHeight: 1.5,\n },\n metadata: {\n color: theme.palette.text.secondary,\n marginTop: theme.spacing(0.5),\n '& a': {\n color: theme.palette.primary.main,\n transition: 'all 0.2s ease-in-out',\n '&:hover': {\n textDecoration: 'underline',\n opacity: 0.8,\n },\n },\n },\n }),\n { name: 'QetaCommentList' },\n);\n\nexport const CommentListItem = (props: {\n comment: Comment;\n onCommentAction: (question: PostResponse, answer?: AnswerResponse) => void;\n post: PostResponse;\n answer?: AnswerResponse;\n}) => {\n const { t } = useTranslationRef(qetaTranslationRef);\n const { comment, onCommentAction, post, answer } = props;\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = useState(false);\n const styles = useStyles();\n const [editing, setEditing] = useState(false);\n const alertApi = useApi(alertApiRef);\n\n const deleteComment = (id: number) => {\n if (answer) {\n qetaApi\n .deleteAnswerComment(post.id, answer.id, id)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(a => {\n if (a) {\n onCommentAction(post, a);\n }\n });\n return;\n }\n qetaApi\n .deletePostComment(post.id, id)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(q => {\n if (q) {\n onCommentAction(q);\n }\n });\n };\n\n const saveComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi\n .updateAnswerComment(post.id, answer.id, comment.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(a => {\n if (a) {\n onCommentAction(post, a);\n }\n })\n .finally(() => {\n setEditing(false);\n setPosting(false);\n });\n return;\n }\n qetaApi\n .updatePostComment(post.id, comment.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(q => {\n if (q) {\n onCommentAction(q);\n }\n })\n .finally(() => {\n setEditing(false);\n setPosting(false);\n });\n };\n\n return (\n <Box className={styles.box}>\n {editing ? (\n <>\n <CommentForm\n submit={saveComment}\n saveButtonTitle={t('commentList.save')}\n defaultValues={{ content: comment.content }}\n disabled={posting}\n />\n </>\n ) : (\n <>\n <MarkdownRenderer\n content={comment.content}\n className={styles.content}\n />\n <Typography variant=\"caption\" className={styles.metadata}>\n {' – '}\n <AuthorLink entity={comment} />\n {comment.expert && <ExpertIcon />}{' '}\n <RelativeTimeWithTooltip value={comment.created} />\n {comment.canEdit && (\n <>\n {' / '}\n <Link\n underline=\"none\"\n to=\"#\"\n className=\"qetaCommentEditBtn\"\n onClick={() => setEditing(true)}\n >\n {t('commentList.editLink')}\n </Link>\n </>\n )}\n {comment.canDelete && (\n <>\n {' / '}\n <Link\n underline=\"none\"\n to=\"#\"\n className=\"qetaCommentDeleteBtn\"\n onClick={() => deleteComment(comment.id)}\n >\n {t('commentList.deleteLink')}\n </Link>\n </>\n )}\n </Typography>\n </>\n )}\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"CommentListItem.esm.js","sources":["../../../src/components/CommentSection/CommentListItem.tsx"],"sourcesContent":["import { Box, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { AuthorLink } from '../Links';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { Link } from '@backstage/core-components';\nimport { useState } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n AnswerResponse,\n Comment,\n PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api.ts';\nimport { CommentForm } from './CommentForm.tsx';\nimport { ExpertIcon } from '../Icons/ExpertIcon.tsx';\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n box: {\n padding: theme.spacing(1.5),\n transition: 'all 0.2s ease-in-out',\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n content: {\n display: 'inline',\n '&>*:last-child:not(ul,ol,blockquote)': {\n display: 'inline',\n },\n lineHeight: 1.5,\n },\n metadata: {\n color: theme.palette.text.secondary,\n marginTop: theme.spacing(0.5),\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(0.5),\n '& a': {\n color: theme.palette.text.secondary,\n transition: 'all 0.2s ease-in-out',\n textDecoration: 'none',\n '&:hover': {\n color: theme.palette.primary.main,\n textDecoration: 'underline',\n },\n },\n '& .actionBtn': {\n marginLeft: theme.spacing(1),\n fontSize: '0.75rem',\n opacity: 0.7,\n '&:hover': {\n opacity: 1,\n },\n },\n },\n }),\n { name: 'QetaCommentList' },\n);\n\nexport const CommentListItem = (props: {\n comment: Comment;\n onCommentAction: (question: PostResponse, answer?: AnswerResponse) => void;\n post: PostResponse;\n answer?: AnswerResponse;\n}) => {\n const { t } = useTranslationRef(qetaTranslationRef);\n const { comment, onCommentAction, post, answer } = props;\n const qetaApi = useApi(qetaApiRef);\n const [posting, setPosting] = useState(false);\n const styles = useStyles();\n const [editing, setEditing] = useState(false);\n const alertApi = useApi(alertApiRef);\n\n const deleteComment = (id: number) => {\n if (answer) {\n qetaApi\n .deleteAnswerComment(post.id, answer.id, id)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(a => {\n if (a) {\n onCommentAction(post, a);\n }\n });\n return;\n }\n qetaApi\n .deletePostComment(post.id, id)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(q => {\n if (q) {\n onCommentAction(q);\n }\n });\n };\n\n const saveComment = (data: { content: string }) => {\n setPosting(true);\n if (answer) {\n qetaApi\n .updateAnswerComment(post.id, answer.id, comment.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(a => {\n if (a) {\n onCommentAction(post, a);\n }\n })\n .finally(() => {\n setEditing(false);\n setPosting(false);\n });\n return;\n }\n qetaApi\n .updatePostComment(post.id, comment.id, data.content)\n .catch(e =>\n alertApi.post({\n message: e.message,\n display: 'transient',\n severity: 'error',\n }),\n )\n .then(q => {\n if (q) {\n onCommentAction(q);\n }\n })\n .finally(() => {\n setEditing(false);\n setPosting(false);\n });\n };\n\n return (\n <Box className={styles.box}>\n {editing ? (\n <>\n <CommentForm\n submit={saveComment}\n saveButtonTitle={t('commentList.save')}\n defaultValues={{ content: comment.content }}\n disabled={posting}\n onDiscard={() => setEditing(false)}\n />\n </>\n ) : (\n <>\n <MarkdownRenderer\n content={comment.content}\n className={styles.content}\n />\n <Typography variant=\"caption\" className={styles.metadata}>\n <AuthorLink entity={comment} />\n {comment.expert && <ExpertIcon />}\n {' • '}\n <RelativeTimeWithTooltip value={comment.created} />\n {comment.canEdit && (\n <Link\n underline=\"none\"\n to=\"#\"\n className=\"actionBtn qetaCommentEditBtn\"\n onClick={() => setEditing(true)}\n >\n {t('commentList.editLink')}\n </Link>\n )}\n {comment.canDelete && (\n <Link\n underline=\"none\"\n to=\"#\"\n className=\"actionBtn qetaCommentDeleteBtn\"\n onClick={() => deleteComment(comment.id)}\n >\n {t('commentList.deleteLink')}\n </Link>\n )}\n </Typography>\n </>\n )}\n </Box>\n );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CommentSection/CommentSection.esm.js CHANGED Viewed

@@ -48,7 +48,7 @@ const useStyles = makeStyles(
       marginTop: theme.spacing(1)
     },
     prominentButton: {
-      marginTop: theme.spacing(3),
+      marginTop: theme.spacing(1),
       marginBottom: theme.spacing(2),
       marginLeft: theme.spacing(1),
       padding: theme.spacing(1, 2.5),
@@ -171,7 +171,8 @@ const CommentSection = (props) => {
                 {
                   submit: postComment,
                   saveButtonTitle: t("commentSection.post"),
-                  disabled: posting
+                  disabled: posting,
+                  onDiscard: () => setFormVisible(false)
                 }
               ) })
             ]