@drodil/backstage-plugin-qeta 3.60.0 → 4.0.0

package/dist/components/ContentHealthCard/ContentHealthCard.esm.js

@@ -1,50 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { makeStyles, Card, CardHeader, CardContent, Typography, LinearProgress, Tooltip, Button, Divider } from '@material-ui/core';
+import { Card, CardHeader, Text, CardBody, Alert, Box, Flex, TooltipTrigger, Button, Tooltip } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { useCanReview, qetaTranslationRef, useQetaApi, ObsoleteModal, ValidReviewModal } from '@drodil/backstage-plugin-qeta-react';
-import CheckIcon from '@material-ui/icons/Check';
-import BlockIcon from '@material-ui/icons/Block';
-import { Alert } from '@material-ui/lab';
+import { RiCheckLine, RiForbidLine } from '@remixicon/react';
 import { ReviewList } from './ReviewList.esm.js';
+import styles from './ContentHealthCard.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  card: {
-    marginBottom: theme.spacing(2)
-  },
-  cardHeader: {
-    paddingBottom: 0
-  },
-  scoreContainer: {
-    display: "flex",
-    alignItems: "center",
-    marginBottom: theme.spacing(1)
-  },
-  scoreLabel: {
-    flexGrow: 1,
-    marginRight: theme.spacing(2)
-  },
-  progressBar: {
-    flexGrow: 2,
-    height: 10,
-    borderRadius: 5
-  },
-  actions: {
-    marginTop: theme.spacing(2),
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: theme.spacing(1)
-  },
-  obsoleteAlert: {
-    marginTop: theme.spacing(1)
-  },
-  divider: {
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(1)
-  }
-}));
 const ContentHealthCard = ({ post }) => {
-  const classes = useStyles();
   const { canReview, canRead } = useCanReview();
   const { t } = useTranslationRef(qetaTranslationRef);
   const { value: reviews } = useQetaApi(
@@ -59,59 +22,68 @@ const ContentHealthCard = ({ post }) => {
   if (!canRead && !canReview) {
     return null;
   }
-  const getProgressColor = (score) => {
-    if (score > 70) return "primary";
-    if (score > 40) return "secondary";
-    return "secondary";
+  const getProgressFillClass = (score) => {
+    if (score > 70) return styles.progressFillHigh;
+    if (score > 40) return styles.progressFillMedium;
+    return styles.progressFillLow;
   };
-  return /* @__PURE__ */ jsxs(Card, { className: classes.card, children: [
-    /* @__PURE__ */ jsx(
-      CardHeader,
-      {
-        title: t("contentHealth.cardTitle"),
-        titleTypographyProps: { variant: "h6" },
-        className: classes.cardHeader
-      }
-    ),
-    /* @__PURE__ */ jsxs(CardContent, { children: [
-      post.status !== "obsolete" && post.needsReview && /* @__PURE__ */ jsx(Typography, { variant: "body2", paragraph: true, children: t("contentHealth.description") }),
-      /* @__PURE__ */ jsx("div", { className: classes.scoreContainer, children: /* @__PURE__ */ jsx(Typography, { variant: "body1", className: classes.scoreLabel, children: t("contentHealth.healthScore", {
-        score: String(post.healthScore)
-      }) }) }),
-      /* @__PURE__ */ jsx(
-        LinearProgress,
-        {
-          variant: "determinate",
-          value: post.healthScore ?? 0,
-          className: classes.progressBar,
-          color: getProgressColor(post.healthScore ?? 0)
-        }
-      ),
-      post.status === "obsolete" && /* @__PURE__ */ jsx(Alert, { severity: "warning", className: classes.obsoleteAlert, children: t("contentHealth.obsoleteWarning") }),
-      canReview && (post.needsReview || post.status === "obsolete") && /* @__PURE__ */ jsxs("div", { className: classes.actions, children: [
-        /* @__PURE__ */ jsx(Tooltip, { title: t("contentHealth.markValid"), children: /* @__PURE__ */ jsx(
-          Button,
+  const healthScore = post.healthScore ?? 0;
+  return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Text, { as: "h3", variant: "title-small", children: t("contentHealth.cardTitle") }) }),
+    /* @__PURE__ */ jsxs(CardBody, { children: [
+      post.status !== "obsolete" && post.needsReview && /* @__PURE__ */ jsx(Text, { as: "div", variant: "body-medium", children: t("contentHealth.description") }),
+      /* @__PURE__ */ jsxs("div", { className: styles.scoreContainer, children: [
+        /* @__PURE__ */ jsx(Text, { className: styles.scoreLabel, weight: "bold", children: t("contentHealth.healthScore", {
+          score: String(post.healthScore)
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: styles.progressTrack, children: /* @__PURE__ */ jsx(
+          "div",
           {
-            variant: "outlined",
-            color: "primary",
-            size: "small",
-            startIcon: /* @__PURE__ */ jsx(CheckIcon, {}),
-            onClick: () => setOpenValidModal(true),
-            children: t("contentHealth.valid")
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Tooltip, { title: t("contentHealth.markObsolete"), children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "outlined",
-            color: "secondary",
-            size: "small",
-            startIcon: /* @__PURE__ */ jsx(BlockIcon, {}),
-            onClick: () => setOpenObsoleteModal(true),
-            children: t("contentHealth.obsolete")
+            className: `${styles.progressFill} ${getProgressFillClass(
+              healthScore
+            )}`,
+            style: { width: `${Math.min(100, Math.max(0, healthScore))}%` }
           }
         ) })
       ] }),
+      post.status === "obsolete" && /* @__PURE__ */ jsx(
+        Alert,
+        {
+          status: "warning",
+          icon: true,
+          description: t("contentHealth.obsoleteWarning"),
+          className: styles.obsoleteAlert
+        }
+      ),
+      canReview && (post.needsReview || post.status === "obsolete") && /* @__PURE__ */ jsx(Box, { className: styles.actions, children: /* @__PURE__ */ jsxs(Flex, { gap: "2", children: [
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              iconStart: /* @__PURE__ */ jsx(RiCheckLine, { size: 16 }),
+              onClick: () => setOpenValidModal(true),
+              children: t("contentHealth.valid")
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: t("contentHealth.markValid") })
+        ] }),
+        /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              destructive: true,
+              size: "small",
+              iconStart: /* @__PURE__ */ jsx(RiForbidLine, { size: 16 }),
+              onClick: () => setOpenObsoleteModal(true),
+              children: t("contentHealth.obsolete")
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { children: t("contentHealth.markObsolete") })
+        ] })
+      ] }) }),
       /* @__PURE__ */ jsx(
         ObsoleteModal,
         {
@@ -131,7 +103,7 @@ const ContentHealthCard = ({ post }) => {
         }
       ),
       reviews && reviews.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Divider, { className: classes.divider }),
+        /* @__PURE__ */ jsx("div", { className: styles.divider }),
         /* @__PURE__ */ jsx(ReviewList, { reviews })
       ] })
     ] })

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

@@ -1 +1 @@
-{"version":3,"file":"ContentHealthCard.esm.js","sources":["../../../src/components/ContentHealthCard/ContentHealthCard.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Post } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Divider,\n  LinearProgress,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  ObsoleteModal,\n  qetaTranslationRef,\n  useCanReview,\n  useQetaApi,\n  ValidReviewModal,\n} from '@drodil/backstage-plugin-qeta-react';\nimport CheckIcon from '@material-ui/icons/Check';\nimport BlockIcon from '@material-ui/icons/Block';\nimport { Alert } from '@material-ui/lab';\nimport { ReviewList } from './ReviewList';\n\nconst useStyles = makeStyles(theme => ({\n  card: {\n    marginBottom: theme.spacing(2),\n  },\n  cardHeader: {\n    paddingBottom: 0,\n  },\n  scoreContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    marginBottom: theme.spacing(1),\n  },\n  scoreLabel: {\n    flexGrow: 1,\n    marginRight: theme.spacing(2),\n  },\n  progressBar: {\n    flexGrow: 2,\n    height: 10,\n    borderRadius: 5,\n  },\n  actions: {\n    marginTop: theme.spacing(2),\n    display: 'flex',\n    justifyContent: 'flex-end',\n    gap: theme.spacing(1),\n  },\n  obsoleteAlert: {\n    marginTop: theme.spacing(1),\n  },\n  divider: {\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(1),\n  },\n}));\n\nexport const ContentHealthCard = ({ post }: { post: Post }) => {\n  const classes = useStyles();\n  const { canReview, canRead } = useCanReview();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { value: reviews } = useQetaApi(\n    api => api.getPostReviews(post.id),\n    [post.id],\n  );\n\n  const [openObsoleteModal, setOpenObsoleteModal] = useState(false);\n  const [openValidModal, setOpenValidModal] = useState(false);\n\n  const handleRefresh = () => {\n    window.location.reload();\n  };\n\n  if (!canRead && !canReview) {\n    return null;\n  }\n\n  const getProgressColor = (score: number) => {\n    if (score > 70) return 'primary';\n    if (score > 40) return 'secondary';\n    return 'secondary';\n  };\n\n  return (\n    <Card className={classes.card}>\n      <CardHeader\n        title={t('contentHealth.cardTitle')}\n        titleTypographyProps={{ variant: 'h6' }}\n        className={classes.cardHeader}\n      />\n      <CardContent>\n        {post.status !== 'obsolete' && post.needsReview && (\n          <Typography variant=\"body2\" paragraph>\n            {t('contentHealth.description')}\n          </Typography>\n        )}\n        <div className={classes.scoreContainer}>\n          <Typography variant=\"body1\" className={classes.scoreLabel}>\n            {t('contentHealth.healthScore', {\n              score: String(post.healthScore),\n            })}\n          </Typography>\n        </div>\n        <LinearProgress\n          variant=\"determinate\"\n          value={post.healthScore ?? 0}\n          className={classes.progressBar}\n          color={getProgressColor(post.healthScore ?? 0)}\n        />\n\n        {post.status === 'obsolete' && (\n          <Alert severity=\"warning\" className={classes.obsoleteAlert}>\n            {t('contentHealth.obsoleteWarning')}\n          </Alert>\n        )}\n\n        {canReview && (post.needsReview || post.status === 'obsolete') && (\n          <div className={classes.actions}>\n            <Tooltip title={t('contentHealth.markValid')}>\n              <Button\n                variant=\"outlined\"\n                color=\"primary\"\n                size=\"small\"\n                startIcon={<CheckIcon />}\n                onClick={() => setOpenValidModal(true)}\n              >\n                {t('contentHealth.valid')}\n              </Button>\n            </Tooltip>\n            <Tooltip title={t('contentHealth.markObsolete')}>\n              <Button\n                variant=\"outlined\"\n                color=\"secondary\"\n                size=\"small\"\n                startIcon={<BlockIcon />}\n                onClick={() => setOpenObsoleteModal(true)}\n              >\n                {t('contentHealth.obsolete')}\n              </Button>\n            </Tooltip>\n          </div>\n        )}\n\n        <ObsoleteModal\n          open={openObsoleteModal}\n          onClose={() => setOpenObsoleteModal(false)}\n          post={post}\n          onConfirm={handleRefresh}\n        />\n        <ValidReviewModal\n          open={openValidModal}\n          onClose={() => setOpenValidModal(false)}\n          post={post}\n          onConfirm={handleRefresh}\n        />\n\n        {reviews && reviews.length > 0 && (\n          <>\n            <Divider className={classes.divider} />\n            <ReviewList reviews={reviews} />\n          </>\n        )}\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ContentHealthCard.esm.js","sources":["../../../src/components/ContentHealthCard/ContentHealthCard.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Post } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Alert,\n  Box,\n  Button,\n  Card,\n  CardBody,\n  CardHeader,\n  Flex,\n  Text,\n  Tooltip,\n  TooltipTrigger,\n} from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  ObsoleteModal,\n  qetaTranslationRef,\n  useCanReview,\n  useQetaApi,\n  ValidReviewModal,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { RiCheckLine, RiForbidLine } from '@remixicon/react';\nimport { ReviewList } from './ReviewList';\nimport styles from './ContentHealthCard.module.css';\n\nexport const ContentHealthCard = ({ post }: { post: Post }) => {\n  const { canReview, canRead } = useCanReview();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const { value: reviews } = useQetaApi(\n    api => api.getPostReviews(post.id),\n    [post.id],\n  );\n\n  const [openObsoleteModal, setOpenObsoleteModal] = useState(false);\n  const [openValidModal, setOpenValidModal] = useState(false);\n\n  const handleRefresh = () => {\n    window.location.reload();\n  };\n\n  if (!canRead && !canReview) {\n    return null;\n  }\n\n  const getProgressFillClass = (score: number) => {\n    if (score > 70) return styles.progressFillHigh;\n    if (score > 40) return styles.progressFillMedium;\n    return styles.progressFillLow;\n  };\n\n  const healthScore = post.healthScore ?? 0;\n\n  return (\n    <Card className={styles.card}>\n      <CardHeader>\n        <Text as=\"h3\" variant=\"title-small\">\n          {t('contentHealth.cardTitle')}\n        </Text>\n      </CardHeader>\n      <CardBody>\n        {post.status !== 'obsolete' && post.needsReview && (\n          <Text as=\"div\" variant=\"body-medium\">\n            {t('contentHealth.description')}\n          </Text>\n        )}\n        <div className={styles.scoreContainer}>\n          <Text className={styles.scoreLabel} weight=\"bold\">\n            {t('contentHealth.healthScore', {\n              score: String(post.healthScore),\n            })}\n          </Text>\n          <div className={styles.progressTrack}>\n            <div\n              className={`${styles.progressFill} ${getProgressFillClass(\n                healthScore,\n              )}`}\n              style={{ width: `${Math.min(100, Math.max(0, healthScore))}%` }}\n            />\n          </div>\n        </div>\n\n        {post.status === 'obsolete' && (\n          <Alert\n            status=\"warning\"\n            icon\n            description={t('contentHealth.obsoleteWarning')}\n            className={styles.obsoleteAlert}\n          />\n        )}\n\n        {canReview && (post.needsReview || post.status === 'obsolete') && (\n          <Box className={styles.actions}>\n            <Flex gap=\"2\">\n              <TooltipTrigger>\n                <Button\n                  variant=\"secondary\"\n                  size=\"small\"\n                  iconStart={<RiCheckLine size={16} />}\n                  onClick={() => setOpenValidModal(true)}\n                >\n                  {t('contentHealth.valid')}\n                </Button>\n                <Tooltip>{t('contentHealth.markValid')}</Tooltip>\n              </TooltipTrigger>\n              <TooltipTrigger>\n                <Button\n                  variant=\"secondary\"\n                  destructive\n                  size=\"small\"\n                  iconStart={<RiForbidLine size={16} />}\n                  onClick={() => setOpenObsoleteModal(true)}\n                >\n                  {t('contentHealth.obsolete')}\n                </Button>\n                <Tooltip>{t('contentHealth.markObsolete')}</Tooltip>\n              </TooltipTrigger>\n            </Flex>\n          </Box>\n        )}\n\n        <ObsoleteModal\n          open={openObsoleteModal}\n          onClose={() => setOpenObsoleteModal(false)}\n          post={post}\n          onConfirm={handleRefresh}\n        />\n        <ValidReviewModal\n          open={openValidModal}\n          onClose={() => setOpenValidModal(false)}\n          post={post}\n          onConfirm={handleRefresh}\n        />\n\n        {reviews && reviews.length > 0 && (\n          <>\n            <div className={styles.divider} />\n            <ReviewList reviews={reviews} />\n          </>\n        )}\n      </CardBody>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ContentHealthCard/ContentHealthCard.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "@layer components {\n  .ContentHealthCard_card__e5f423f303 {\n    margin-bottom: var(--bui-space-4);\n  }\n\n  .ContentHealthCard_scoreContainer__e5f423f303 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-4);\n    margin-top: var(--bui-space-3);\n    margin-bottom: var(--bui-space-2);\n  }\n\n  .ContentHealthCard_scoreLabel__e5f423f303 {\n    flex-grow: 1;\n  }\n\n  .ContentHealthCard_scoreValue__e5f423f303 {\n    font-weight: 700;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ContentHealthCard_progressTrack__e5f423f303 {\n    flex-grow: 2;\n    height: 10px;\n    border-radius: var(--bui-radius-full);\n    background-color: var(--bui-border-1);\n    overflow: hidden;\n  }\n\n  .ContentHealthCard_progressFill__e5f423f303 {\n    height: 100%;\n    border-radius: var(--bui-radius-full);\n  }\n\n  .ContentHealthCard_progressFillHigh__e5f423f303 {\n    background-color: var(--bui-fg-success);\n  }\n\n  .ContentHealthCard_progressFillMedium__e5f423f303 {\n    background-color: var(--bui-fg-warning);\n  }\n\n  .ContentHealthCard_progressFillLow__e5f423f303 {\n    background-color: var(--bui-fg-danger);\n  }\n\n  .ContentHealthCard_actions__e5f423f303 {\n    margin-top: var(--bui-space-4);\n    display: flex;\n    justify-content: flex-end;\n    gap: var(--bui-space-2);\n  }\n\n  .ContentHealthCard_obsoleteAlert__e5f423f303 {\n    margin-top: var(--bui-space-2);\n  }\n\n  .ContentHealthCard_divider__e5f423f303 {\n    margin-top: var(--bui-space-4);\n    margin-bottom: var(--bui-space-2);\n    height: 1px;\n    border: none;\n    background-color: var(--bui-border-1);\n  }\n}\n";
+var styles = {"card":"ContentHealthCard_card__e5f423f303","scoreContainer":"ContentHealthCard_scoreContainer__e5f423f303","scoreLabel":"ContentHealthCard_scoreLabel__e5f423f303","progressTrack":"ContentHealthCard_progressTrack__e5f423f303","progressFill":"ContentHealthCard_progressFill__e5f423f303","progressFillHigh":"ContentHealthCard_progressFillHigh__e5f423f303","progressFillMedium":"ContentHealthCard_progressFillMedium__e5f423f303","progressFillLow":"ContentHealthCard_progressFillLow__e5f423f303","actions":"ContentHealthCard_actions__e5f423f303","obsoleteAlert":"ContentHealthCard_obsoleteAlert__e5f423f303","divider":"ContentHealthCard_divider__e5f423f303"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ContentHealthCard.module.css.esm.js.map

package/dist/components/ContentHealthCard/ContentHealthCard.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentHealthCard.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ContentHealthCard/ReviewList.esm.js

@@ -1,75 +1,42 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { makeStyles, Typography, List, ListItem, ListItemText } from '@material-ui/core';
+import { Text } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef, UserLink, RelativeTimeWithTooltip } from '@drodil/backstage-plugin-qeta-react';
+import styles from './ReviewList.module.css.esm.js';
 
-const useStyles = makeStyles((theme) => ({
-  reviewList: {
-    padding: 0,
-    marginTop: theme.spacing(1)
-  },
-  reviewItem: {
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: theme.spacing(0.5),
-    paddingBottom: theme.spacing(0.5),
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    "&:last-child": {
-      borderBottom: "none"
-    }
-  },
-  reviewMeta: {
-    display: "flex",
-    alignItems: "baseline",
-    gap: theme.spacing(0.5),
-    flexWrap: "wrap"
-  },
-  reviewUserLink: {
-    fontSize: "0.75rem"
-  },
-  reviewStatus: {
-    fontWeight: 500
-  },
-  reviewComment: {
-    marginTop: theme.spacing(0.25),
-    fontSize: "0.8rem"
-  }
-}));
 const ReviewList = ({ reviews }) => {
-  const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   if (!reviews || reviews.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: t("contentHealth.reviewHistory", {}) }),
-    /* @__PURE__ */ jsx(List, { className: classes.reviewList, children: reviews.map((review) => /* @__PURE__ */ jsx(ListItem, { className: classes.reviewItem, dense: true, children: /* @__PURE__ */ jsx(
-      ListItemText,
-      {
-        primary: /* @__PURE__ */ jsxs("div", { className: classes.reviewMeta, children: [
-          /* @__PURE__ */ jsx("span", { className: classes.reviewUserLink, children: /* @__PURE__ */ jsx(UserLink, { entityRef: review.reviewer }) }),
-          /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              className: classes.reviewStatus,
-              color: review.status === "valid" ? "primary" : "secondary",
-              children: review.status === "valid" ? t("contentHealth.valid") : t("contentHealth.obsolete")
-            }
-          ),
-          /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: review.created }) })
-        ] }),
-        secondary: review.comment ? /* @__PURE__ */ jsx(
-          Typography,
+    /* @__PURE__ */ jsx(Text, { as: "div", variant: "body-small", weight: "bold", children: t("contentHealth.reviewHistory", {}) }),
+    /* @__PURE__ */ jsx("div", { className: styles.reviewList, children: reviews.map((review) => /* @__PURE__ */ jsxs("div", { className: styles.reviewItem, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.reviewMeta, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.reviewUserLink, children: /* @__PURE__ */ jsx(UserLink, { entityRef: review.reviewer }) }),
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            variant: "body2",
-            color: "textSecondary",
-            className: classes.reviewComment,
-            children: review.comment
+            as: "span",
+            variant: "body-x-small",
+            className: styles.reviewStatus,
+            color: review.status === "valid" ? "success" : "danger",
+            children: review.status === "valid" ? t("contentHealth.valid") : t("contentHealth.obsolete")
           }
-        ) : null
-      }
-    ) }, review.id)) })
+        ),
+        /* @__PURE__ */ jsx(Text, { as: "span", variant: "body-x-small", color: "secondary", children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: review.created }) })
+      ] }),
+      review.comment && /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "div",
+          variant: "body-small",
+          color: "secondary",
+          className: styles.reviewComment,
+          children: review.comment
+        }
+      )
+    ] }, review.id)) })
   ] });
 };
 

package/dist/components/ContentHealthCard/ReviewList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewList.esm.js","sources":["../../../src/components/ContentHealthCard/ReviewList.tsx"],"sourcesContent":["import { PostReview } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Typography,\n  makeStyles,\n  List,\n  ListItem,\n  ListItemText,\n} from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  qetaTranslationRef,\n  UserLink,\n  RelativeTimeWithTooltip,\n} from '@drodil/backstage-plugin-qeta-react';\n\nconst useStyles = makeStyles(theme => ({\n  reviewList: {\n    padding: 0,\n    marginTop: theme.spacing(1),\n  },\n  reviewItem: {\n    paddingLeft: 0,\n    paddingRight: 0,\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n    borderBottom: `1px solid ${theme.palette.divider}`,\n    '&:last-child': {\n      borderBottom: 'none',\n    },\n  },\n  reviewMeta: {\n    display: 'flex',\n    alignItems: 'baseline',\n    gap: theme.spacing(0.5),\n    flexWrap: 'wrap',\n  },\n  reviewUserLink: {\n    fontSize: '0.75rem',\n  },\n  reviewStatus: {\n    fontWeight: 500,\n  },\n  reviewComment: {\n    marginTop: theme.spacing(0.25),\n    fontSize: '0.8rem',\n  },\n}));\n\nexport const ReviewList = ({ reviews }: { reviews: PostReview[] }) => {\n  const classes = useStyles();\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (!reviews || reviews.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Typography variant=\"subtitle2\">\n        {t('contentHealth.reviewHistory', {})}\n      </Typography>\n      <List className={classes.reviewList}>\n        {reviews.map(review => (\n          <ListItem key={review.id} className={classes.reviewItem} dense>\n            <ListItemText\n              primary={\n                <div className={classes.reviewMeta}>\n                  <span className={classes.reviewUserLink}>\n                    <UserLink entityRef={review.reviewer} />\n                  </span>\n                  <Typography\n                    variant=\"caption\"\n                    className={classes.reviewStatus}\n                    color={review.status === 'valid' ? 'primary' : 'secondary'}\n                  >\n                    {review.status === 'valid'\n                      ? t('contentHealth.valid')\n                      : t('contentHealth.obsolete')}\n                  </Typography>\n                  <Typography variant=\"caption\" color=\"textSecondary\">\n                    <RelativeTimeWithTooltip value={review.created} />\n                  </Typography>\n                </div>\n              }\n              secondary={\n                review.comment ? (\n                  <Typography\n                    variant=\"body2\"\n                    color=\"textSecondary\"\n                    className={classes.reviewComment}\n                  >\n                    {review.comment}\n                  </Typography>\n                ) : null\n              }\n            />\n          </ListItem>\n        ))}\n      </List>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ReviewList.esm.js","sources":["../../../src/components/ContentHealthCard/ReviewList.tsx"],"sourcesContent":["import { PostReview } from '@drodil/backstage-plugin-qeta-common';\nimport { Text } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  qetaTranslationRef,\n  UserLink,\n  RelativeTimeWithTooltip,\n} from '@drodil/backstage-plugin-qeta-react';\nimport styles from './ReviewList.module.css';\n\nexport const ReviewList = ({ reviews }: { reviews: PostReview[] }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (!reviews || reviews.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Text as=\"div\" variant=\"body-small\" weight=\"bold\">\n        {t('contentHealth.reviewHistory', {})}\n      </Text>\n      <div className={styles.reviewList}>\n        {reviews.map(review => (\n          <div key={review.id} className={styles.reviewItem}>\n            <div className={styles.reviewMeta}>\n              <span className={styles.reviewUserLink}>\n                <UserLink entityRef={review.reviewer} />\n              </span>\n              <Text\n                as=\"span\"\n                variant=\"body-x-small\"\n                className={styles.reviewStatus}\n                color={review.status === 'valid' ? 'success' : 'danger'}\n              >\n                {review.status === 'valid'\n                  ? t('contentHealth.valid')\n                  : t('contentHealth.obsolete')}\n              </Text>\n              <Text as=\"span\" variant=\"body-x-small\" color=\"secondary\">\n                <RelativeTimeWithTooltip value={review.created} />\n              </Text>\n            </div>\n            {review.comment && (\n              <Text\n                as=\"div\"\n                variant=\"body-small\"\n                color=\"secondary\"\n                className={styles.reviewComment}\n              >\n                {review.comment}\n              </Text>\n            )}\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,UAAA,GAAa,CAAC,EAAE,OAAA,EAAQ,KAAiC;AACpE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,CAAC,OAAA,IAAW,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AACpC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,KAAA,EAAM,OAAA,EAAQ,YAAA,EAAa,MAAA,EAAO,MAAA,EACxC,QAAA,EAAA,CAAA,CAAE,6BAAA,EAA+B,EAAE,CAAA,EACtC,CAAA;AAAA,oBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,UAAA,EACpB,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,qBACX,IAAA,CAAC,KAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,UAAA,EACrC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,UAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,cAAA,EACtB,8BAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,QAAA,EAAU,CAAA,EACxC,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,MAAA;AAAA,YACH,OAAA,EAAQ,cAAA;AAAA,YACR,WAAW,MAAA,CAAO,YAAA;AAAA,YAClB,KAAA,EAAO,MAAA,CAAO,MAAA,KAAW,OAAA,GAAU,SAAA,GAAY,QAAA;AAAA,YAE9C,iBAAO,MAAA,KAAW,OAAA,GACf,EAAE,qBAAqB,CAAA,GACvB,EAAE,wBAAwB;AAAA;AAAA,SAChC;AAAA,wBACA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,cAAA,EAAe,KAAA,EAAM,WAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,uBAAA,EAAA,EAAwB,KAAA,EAAO,MAAA,CAAO,SAAS,CAAA,EAClD;AAAA,OAAA,EACF,CAAA;AAAA,MACC,OAAO,OAAA,oBACN,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,KAAA;AAAA,UACH,OAAA,EAAQ,YAAA;AAAA,UACR,KAAA,EAAM,WAAA;AAAA,UACN,WAAW,MAAA,CAAO,aAAA;AAAA,UAEjB,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA;AACV,KAAA,EAAA,EA3BM,MAAA,CAAO,EA6BjB,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/ContentHealthCard/ReviewList.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "@layer components {\n  .ReviewList_reviewList__cd5dfb06e7 {\n    margin-top: var(--bui-space-2);\n  }\n\n  .ReviewList_reviewItem__cd5dfb06e7 {\n    padding-top: var(--bui-space-1);\n    padding-bottom: var(--bui-space-1);\n    border-bottom: 1px solid var(--bui-border-1);\n  }\n\n  .ReviewList_reviewItem__cd5dfb06e7:last-child {\n    border-bottom: none;\n  }\n\n  .ReviewList_reviewMeta__cd5dfb06e7 {\n    display: flex;\n    align-items: baseline;\n    gap: var(--bui-space-1);\n    flex-wrap: wrap;\n  }\n\n  .ReviewList_reviewUserLink__cd5dfb06e7 {\n    font-size: 0.75rem;\n  }\n\n  .ReviewList_reviewStatus__cd5dfb06e7 {\n    font-weight: var(--bui-font-weight-bold);\n  }\n\n  .ReviewList_reviewComment__cd5dfb06e7 {\n    margin-top: 2px;\n    font-size: 0.8rem;\n  }\n}\n";
+var styles = {"reviewList":"ReviewList_reviewList__cd5dfb06e7","reviewItem":"ReviewList_reviewItem__cd5dfb06e7","reviewMeta":"ReviewList_reviewMeta__cd5dfb06e7","reviewUserLink":"ReviewList_reviewUserLink__cd5dfb06e7","reviewStatus":"ReviewList_reviewStatus__cd5dfb06e7","reviewComment":"ReviewList_reviewComment__cd5dfb06e7"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ReviewList.module.css.esm.js.map

package/dist/components/ContentHealthCard/ReviewList.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewList.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/CreateLinkPage/CreateLinkPage.esm.js

@@ -1,10 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, PostForm } from '@drodil/backstage-plugin-qeta-react';
+import { qetaTranslationRef, useQetaConfig, PostForm } from '@drodil/backstage-plugin-qeta-react';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
-import { InfoCard } from '@backstage/core-components';
-import { Grid } from '@material-ui/core';
+import { Header, Box } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const CreateLinkPage = () => {
@@ -30,8 +29,8 @@ const CreateLinkPage = () => {
     title = t("createLinkPage.title.newLink");
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ContentHeader, { title }),
-    /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, direction: "column", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(InfoCard, { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Header, { title }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
       PostForm,
       {
         id,
@@ -40,7 +39,7 @@ const CreateLinkPage = () => {
         tags,
         type: "link"
       }
-    ) }) }) })
+    ) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"CreateLinkPage.esm.js","sources":["../../../src/components/CreateLinkPage/CreateLinkPage.tsx"],"sourcesContent":["import { useParams, useSearchParams } from 'react-router-dom';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  ContentHeader,\n  PostForm,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { InfoCard } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CreateLinkPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const tags = filterTags(searchParams.get('tags'));\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.links) {\n    return null;\n  }\n\n  let title;\n  if (id) {\n    title = t('createLinkPage.title.existingLink');\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = t('createLinkPage.title.entityLink', {\n      entity: representation.primaryTitle,\n    });\n  } else {\n    title = t('createLinkPage.title.newLink');\n  }\n\n  return (\n    <>\n      <ContentHeader title={title} />\n      <Grid container spacing={3} direction=\"column\">\n        <Grid item>\n          <InfoCard>\n            <PostForm\n              id={id}\n              entity={entity}\n              entityPage={entityPage}\n              tags={tags}\n              type=\"link\"\n            />\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,SAAA,EAAU;AACzB,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AACvC,EAAA,MAAM,MAAA,GAAS,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAA;AAC7C,EAAA,MAAM,UAAA,GAAa,YAAA,CAAa,GAAA,CAAI,YAAY,CAAA,KAAM,MAAA;AACtD,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAA;AAChD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,KAAA,EAAO;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA;AACJ,EAAA,IAAI,EAAA,EAAI;AACN,IAAA,KAAA,GAAQ,EAAE,mCAAmC,CAAA;AAAA,EAC/C,WAAW,MAAA,EAAQ;AAEjB,IAAA,MAAM,cAAA,GAAiB,sBAAsB,MAAM,CAAA;AACnD,IAAA,KAAA,GAAQ,EAAE,iCAAA,EAAmC;AAAA,MAC3C,QAAQ,cAAA,CAAe;AAAA,KACxB,CAAA;AAAA,EACH,CAAA,MAAO;AACL,IAAA,KAAA,GAAQ,EAAE,8BAA8B,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,iBAAc,KAAA,EAAc,CAAA;AAAA,oBAC7B,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,OAAA,EAAS,CAAA,EAAG,SAAA,EAAU,QAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EACR,8BAAC,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,MAAA;AAAA,QACA,UAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA,EAAK;AAAA;AAAA,KACP,EACF,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CreateLinkPage.esm.js","sources":["../../../src/components/CreateLinkPage/CreateLinkPage.tsx"],"sourcesContent":["import { useParams, useSearchParams } from 'react-router-dom';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  PostForm,\n  qetaTranslationRef,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { Box, Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const CreateLinkPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const tags = filterTags(searchParams.get('tags'));\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { disabled } = useQetaConfig();\n\n  if (disabled.links) {\n    return null;\n  }\n\n  let title;\n  if (id) {\n    title = t('createLinkPage.title.existingLink');\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = t('createLinkPage.title.entityLink', {\n      entity: representation.primaryTitle,\n    });\n  } else {\n    title = t('createLinkPage.title.newLink');\n  }\n\n  return (\n    <>\n      <Header title={title} />\n      <Box>\n        <PostForm\n          id={id}\n          entity={entity}\n          entityPage={entityPage}\n          tags={tags}\n          type=\"link\"\n        />\n      </Box>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAWO,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,EAAE,EAAA,EAAG,GAAI,SAAA,EAAU;AACzB,EAAA,MAAM,CAAC,YAAY,CAAA,GAAI,eAAA,EAAgB;AACvC,EAAA,MAAM,MAAA,GAAS,YAAA,CAAa,GAAA,CAAI,QAAQ,CAAA,IAAK,MAAA;AAC7C,EAAA,MAAM,UAAA,GAAa,YAAA,CAAa,GAAA,CAAI,YAAY,CAAA,KAAM,MAAA;AACtD,EAAA,MAAM,IAAA,GAAO,UAAA,CAAW,YAAA,CAAa,GAAA,CAAI,MAAM,CAAC,CAAA;AAChD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,EAAc;AAEnC,EAAA,IAAI,SAAS,KAAA,EAAO;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA;AACJ,EAAA,IAAI,EAAA,EAAI;AACN,IAAA,KAAA,GAAQ,EAAE,mCAAmC,CAAA;AAAA,EAC/C,WAAW,MAAA,EAAQ;AAEjB,IAAA,MAAM,cAAA,GAAiB,sBAAsB,MAAM,CAAA;AACnD,IAAA,KAAA,GAAQ,EAAE,iCAAA,EAAmC;AAAA,MAC3C,QAAQ,cAAA,CAAe;AAAA,KACxB,CAAA;AAAA,EACH,CAAA,MAAO;AACL,IAAA,KAAA,GAAQ,EAAE,8BAA8B,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAO,KAAA,EAAc,CAAA;AAAA,wBACrB,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,MAAA;AAAA,QACA,UAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA,EAAK;AAAA;AAAA,KACP,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/EntityPage/EntityPage.esm.js

@@ -3,19 +3,15 @@ import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { useApi } from '@backstage/core-plugin-api';
-import { qetaTranslationRef, useQetaConfig, ContentHeader, AskQuestionButton, WriteArticleButton, CreateLinkButton, EntitiesContainer, useQetaApi, EntityFollowButton, ContentHeaderCard, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
+import { qetaTranslationRef, useQetaConfig, EntitiesContainer, useQetaApi, EntityFollowButton, AskQuestionButton, WriteArticleButton, CreateLinkButton, PostsContainer } from '@drodil/backstage-plugin-qeta-react';
 import { useEntityPresentation, catalogApiRef, EntityRefLink } from '@backstage/plugin-catalog-react';
-import CategoryOutlined from '@material-ui/icons/CategoryOutlined';
-import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
-import PeopleIcon from '@material-ui/icons/People';
-import { Skeleton } from '@material-ui/lab';
-import { WarningPanel } from '@backstage/core-components';
+import { Header, Skeleton, Alert } from '@backstage/ui';
 
 const SingleEntityPage = ({ entityRef }) => {
   const { t } = useTranslationRef(qetaTranslationRef);
   const { disabled } = useQetaConfig();
   const [entity, setEntity] = useState(void 0);
-  const { Icon } = useEntityPresentation(entityRef);
+  const { primaryTitle } = useEntityPresentation(entityRef);
   const catalogApi = useApi(catalogApiRef);
   useEffect(() => {
     catalogApi.getEntityByRef(entityRef).then((e) => setEntity(e));
@@ -29,55 +25,52 @@ const SingleEntityPage = ({ entityRef }) => {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 200 });
+    return /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 200 });
   }
   if (error || !resp) {
-    return /* @__PURE__ */ jsx(WarningPanel, { severity: "error", title: t("questionPage.errorLoading"), children: error?.message });
+    return /* @__PURE__ */ jsx(
+      Alert,
+      {
+        status: "danger",
+        title: t("questionPage.errorLoading"),
+        description: error?.message
+      }
+    );
   }
-  const title = /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-    EntityRefLink,
-    {
-      entityRef: resp.entityRef,
-      defaultKind: "Component",
-      hideIcon: true
-    }
-  ) });
-  const description = `${entity?.kind} ${entity?.spec?.type ? `(${entity?.spec?.type})` : ""}`;
+  const description = [
+    `${entity?.kind} ${entity?.spec?.type ? `(${entity?.spec?.type})` : ""}`,
+    entity?.metadata?.description
+  ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
+    /* @__PURE__ */ jsx(
+      Header,
       {
-        title,
-        titleIcon: /* @__PURE__ */ jsx(CategoryOutlined, { fontSize: "large" }),
+        title: primaryTitle,
         description,
-        children: [
+        metadata: [
+          ...[
+            {
+              label: t("metadata.posts"),
+              value: resp.postsCount
+            },
+            {
+              label: t("metadata.followers"),
+              value: resp.followerCount
+            }
+          ],
+          ...entity?.spec?.owner ? [
+            {
+              label: t("metadata.owner"),
+              value: /* @__PURE__ */ jsx(EntityRefLink, { entityRef: entity.spec.owner })
+            }
+          ] : []
+        ],
+        customActions: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: resp.entityRef }),
           /* @__PURE__ */ jsx(AskQuestionButton, { entity: resp.entityRef }),
           /* @__PURE__ */ jsx(WriteArticleButton, { entity: resp.entityRef }),
           /* @__PURE__ */ jsx(CreateLinkButton, { entity: resp.entityRef })
-        ]
-      }
-    ),
-    resp && /* @__PURE__ */ jsx(
-      ContentHeaderCard,
-      {
-        description: entity?.metadata?.description,
-        imageIcon: Icon ? /* @__PURE__ */ jsx("div", { style: { fontSize: "80px", display: "flex" }, children: /* @__PURE__ */ jsx(Icon, { fontSize: "inherit" }) }) : /* @__PURE__ */ jsx(CategoryOutlined, { style: { fontSize: 80 } }),
-        stats: [
-          {
-            label: t("common.postsLabel", {
-              count: resp.postsCount,
-              itemType: "post"
-            }),
-            value: resp.postsCount,
-            icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small" })
-          },
-          {
-            label: t("common.followersLabel", { count: resp.followerCount }),
-            value: resp.followerCount,
-            icon: /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small" })
-          }
-        ]
+        ] })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -102,18 +95,7 @@ const EntityPage = () => {
     return /* @__PURE__ */ jsx(SingleEntityPage, { entityRef });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ContentHeader,
-      {
-        title: t("entitiesPage.defaultTitle"),
-        titleIcon: /* @__PURE__ */ jsx(CategoryOutlined, { fontSize: "large" }),
-        children: [
-          /* @__PURE__ */ jsx(AskQuestionButton, {}),
-          /* @__PURE__ */ jsx(WriteArticleButton, {}),
-          /* @__PURE__ */ jsx(CreateLinkButton, {})
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsx(Header, { title: t("entitiesPage.defaultTitle") }),
     /* @__PURE__ */ jsx(EntitiesContainer, {})
   ] });
 };