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

package/dist/components/AIAnswerCard/AIAnswerCard.esm.js

@@ -14,7 +14,7 @@ import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
 import '@backstage/plugin-permission-common';
 import { useAI } from '../../hooks/useAI.esm.js';
-import FlareIcon from '@material-ui/icons/Flare';
+import Flare from '@material-ui/icons/Flare';
 import useDebounce from 'react-use/lib/useDebounce';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import RefreshIcon from '@material-ui/icons/Refresh';
@@ -112,7 +112,7 @@ const AIAnswerCard = (props) => {
     /* @__PURE__ */ jsx(
       CardHeader,
       {
-        avatar: /* @__PURE__ */ jsx(FlareIcon, {}),
+        avatar: /* @__PURE__ */ jsx(Flare, {}),
         style: !expanded ? { paddingBottom: "1em" } : {},
         title: /* @__PURE__ */ jsx(Typography, { variant: "h5", children: article ? t("aiAnswerCard.summary", { name: botName }) : t("aiAnswerCard.answer", { name: botName }) }),
         action: /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"AIAnswerCard.esm.js","sources":["../../../src/components/AIAnswerCard/AIAnswerCard.tsx"],"sourcesContent":["import {\n  AIQuery,\n  AIResponse,\n  Article,\n  Post,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { CSSProperties, useCallback, useState } from 'react';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI } from '../../hooks';\nimport FlareIcon from '@material-ui/icons/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  Collapse,\n  IconButton,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginTop: '1em',\n    backgroundColor: theme.palette.background.default,\n    border: `3px solid ${theme.palette.status.ok}`,\n  },\n}));\n\nexport type AIAnswerCardProps = {\n  question?: Post;\n  draft?: {\n    title: string;\n    content: string;\n  };\n  article?: Article;\n  debounceMs?: number;\n  style?: CSSProperties;\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-ai-expanded';\n\nexport const AIAnswerCard = (props: AIAnswerCardProps) => {\n  const { question, draft, article, style, debounceMs = 3000 } = props;\n  const [answer, setAnswer] = useState<AIResponse | null | undefined>(null);\n  const [expanded, setExpanded] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const config = useApi(configApiRef);\n  const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';\n  const styles = useStyles();\n\n  const {\n    isAIEnabled,\n    isNewQuestionsEnabled,\n    isExistingQuestionsEnabled,\n    isArticleSummaryEnabled,\n    answerExistingQuestion,\n    answerDraftQuestion,\n    summarizeArticle,\n  } = useAI();\n\n  const fetchAnswer = useCallback(\n    (options?: AIQuery) => {\n      if (!isAIEnabled) {\n        setAnswer(null);\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (article) {\n        summarizeArticle(article.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else {\n        setAnswer(null);\n      }\n    },\n    [\n      isAIEnabled,\n      question,\n      article,\n      draft,\n      answerExistingQuestion,\n      summarizeArticle,\n      answerDraftQuestion,\n    ],\n  );\n\n  useDebounce(\n    () => {\n      fetchAnswer();\n    },\n    debounceMs,\n    [answerExistingQuestion, answerDraftQuestion, isAIEnabled, question, draft],\n  );\n\n  const isEnabled = (): boolean => {\n    if (!isAIEnabled) {\n      return false;\n    }\n    if (question) {\n      return Boolean(isExistingQuestionsEnabled);\n    }\n    if (article) {\n      return Boolean(isArticleSummaryEnabled);\n    }\n    if (draft) {\n      return Boolean(isNewQuestionsEnabled);\n    }\n    return false;\n  };\n  const canEdit = question?.canEdit || article?.canEdit || false;\n\n  if (!isEnabled() || answer === null) {\n    return null;\n  }\n\n  return (\n    <Card style={style} className={styles.root}>\n      <CardHeader\n        avatar={<FlareIcon />}\n        style={!expanded ? { paddingBottom: '1em' } : {}}\n        title={\n          <Typography variant=\"h5\">\n            {article\n              ? t('aiAnswerCard.summary', { name: botName })\n              : t('aiAnswerCard.answer', { name: botName })}\n          </Typography>\n        }\n        action={\n          <>\n            {canEdit && isEnabled() && (\n              <Tooltip title={t('aiAnswerCard.regenerate')}>\n                <IconButton\n                  onClick={() => {\n                    setAnswer(undefined);\n                    fetchAnswer({ regenerate: true });\n                  }}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={expanded ? t('aiAnswerCard.hide') : t('aiAnswerCard.show')}\n            >\n              <IconButton\n                onClick={() => {\n                  setExpanded(!expanded);\n                  localStorage.setItem(\n                    EXPANDED_LOCAL_STORAGE_KEY,\n                    expanded ? 'false' : 'true',\n                  );\n                }}\n                aria-expanded={expanded}\n              >\n                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n              </IconButton>\n            </Tooltip>\n          </>\n        }\n        subheader={\n          answer ? (\n            <RelativeTimeWithTooltip value={answer.created ?? new Date()} />\n          ) : (\n            <>{t('aiAnswerCard.loading')}</>\n          )\n        }\n      />\n      <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>\n        <CardContent>\n          {answer === undefined && (\n            <Skeleton variant=\"rect\" height={200} animation=\"wave\" />\n          )}\n          {answer && <MarkdownRenderer content={answer.answer} />}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AIAnswerCard.esm.js","sources":["../../../src/components/AIAnswerCard/AIAnswerCard.tsx"],"sourcesContent":["import {\n  AIQuery,\n  AIResponse,\n  Article,\n  Post,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { CSSProperties, useCallback, useState } from 'react';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useAI } from '../../hooks';\nimport FlareIcon from '@material-ui/icons/Flare';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport RefreshIcon from '@material-ui/icons/Refresh';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  Collapse,\n  IconButton,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginTop: '1em',\n    backgroundColor: theme.palette.background.default,\n    border: `3px solid ${theme.palette.status.ok}`,\n  },\n}));\n\nexport type AIAnswerCardProps = {\n  question?: Post;\n  draft?: {\n    title: string;\n    content: string;\n  };\n  article?: Article;\n  debounceMs?: number;\n  style?: CSSProperties;\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-ai-expanded';\n\nexport const AIAnswerCard = (props: AIAnswerCardProps) => {\n  const { question, draft, article, style, debounceMs = 3000 } = props;\n  const [answer, setAnswer] = useState<AIResponse | null | undefined>(null);\n  const [expanded, setExpanded] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const config = useApi(configApiRef);\n  const botName = config.getOptionalString('qeta.aiBotName') ?? 'AI';\n  const styles = useStyles();\n\n  const {\n    isAIEnabled,\n    isNewQuestionsEnabled,\n    isExistingQuestionsEnabled,\n    isArticleSummaryEnabled,\n    answerExistingQuestion,\n    answerDraftQuestion,\n    summarizeArticle,\n  } = useAI();\n\n  const fetchAnswer = useCallback(\n    (options?: AIQuery) => {\n      if (!isAIEnabled) {\n        setAnswer(null);\n        return;\n      }\n\n      if (question) {\n        answerExistingQuestion(question.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (article) {\n        summarizeArticle(article.id, options)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else if (\n        draft &&\n        draft.title &&\n        draft.content &&\n        draft.title.length + draft.content.length > 30\n      ) {\n        answerDraftQuestion(draft)\n          .catch(_ => setAnswer(null))\n          .then(res => {\n            setAnswer(res ?? null);\n          });\n      } else {\n        setAnswer(null);\n      }\n    },\n    [\n      isAIEnabled,\n      question,\n      article,\n      draft,\n      answerExistingQuestion,\n      summarizeArticle,\n      answerDraftQuestion,\n    ],\n  );\n\n  useDebounce(\n    () => {\n      fetchAnswer();\n    },\n    debounceMs,\n    [answerExistingQuestion, answerDraftQuestion, isAIEnabled, question, draft],\n  );\n\n  const isEnabled = (): boolean => {\n    if (!isAIEnabled) {\n      return false;\n    }\n    if (question) {\n      return Boolean(isExistingQuestionsEnabled);\n    }\n    if (article) {\n      return Boolean(isArticleSummaryEnabled);\n    }\n    if (draft) {\n      return Boolean(isNewQuestionsEnabled);\n    }\n    return false;\n  };\n  const canEdit = question?.canEdit || article?.canEdit || false;\n\n  if (!isEnabled() || answer === null) {\n    return null;\n  }\n\n  return (\n    <Card style={style} className={styles.root}>\n      <CardHeader\n        avatar={<FlareIcon />}\n        style={!expanded ? { paddingBottom: '1em' } : {}}\n        title={\n          <Typography variant=\"h5\">\n            {article\n              ? t('aiAnswerCard.summary', { name: botName })\n              : t('aiAnswerCard.answer', { name: botName })}\n          </Typography>\n        }\n        action={\n          <>\n            {canEdit && isEnabled() && (\n              <Tooltip title={t('aiAnswerCard.regenerate')}>\n                <IconButton\n                  onClick={() => {\n                    setAnswer(undefined);\n                    fetchAnswer({ regenerate: true });\n                  }}\n                >\n                  <RefreshIcon />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={expanded ? t('aiAnswerCard.hide') : t('aiAnswerCard.show')}\n            >\n              <IconButton\n                onClick={() => {\n                  setExpanded(!expanded);\n                  localStorage.setItem(\n                    EXPANDED_LOCAL_STORAGE_KEY,\n                    expanded ? 'false' : 'true',\n                  );\n                }}\n                aria-expanded={expanded}\n              >\n                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}\n              </IconButton>\n            </Tooltip>\n          </>\n        }\n        subheader={\n          answer ? (\n            <RelativeTimeWithTooltip value={answer.created ?? new Date()} />\n          ) : (\n            <>{t('aiAnswerCard.loading')}</>\n          )\n        }\n      />\n      <Collapse in={expanded} timeout={0} unmountOnExit mountOnEnter>\n        <CardContent>\n          {answer === undefined && (\n            <Skeleton variant=\"rect\" height={200} animation=\"wave\" />\n          )}\n          {answer && <MarkdownRenderer content={answer.answer} />}\n        </CardContent>\n      </Collapse>\n    </Card>\n  );\n};\n"],"names":["FlareIcon"],"mappings":"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"}

package/dist/components/AuthorBox/AuthorBoxes.esm.js

@@ -1,12 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { isAnswer } from '@drodil/backstage-plugin-qeta-common';
 import { Box } from '@material-ui/core';
 import { AuthorBox } from './AuthorBox.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 
-function isAnswer(entity) {
-  return "postId" in entity && "correct" in entity;
-}
 const AuthorBoxes = (props) => {
   const entity = props.entity;
   const { t } = useTranslationRef(qetaTranslationRef);

package/dist/components/AuthorBox/AuthorBoxes.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthorBoxes.esm.js","sources":["../../../src/components/AuthorBox/AuthorBoxes.tsx"],"sourcesContent":["import {\n  Answer,\n  PostAnswerEntity,\n  QetaIdEntity,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box } from '@material-ui/core';\nimport { AuthorBox } from './AuthorBox.tsx';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nfunction isAnswer(entity: QetaIdEntity): entity is Answer {\n  return 'postId' in entity && 'correct' in entity;\n}\n\nexport const AuthorBoxes = (props: { entity: PostAnswerEntity }) => {\n  const entity = props.entity;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <Box\n      display=\"flex\"\n      minWidth={220}\n      style={{ gap: '8px', justifyContent: 'flex-end' }}\n      ml={1}\n    >\n      {entity.updated && entity.updatedBy && (\n        <AuthorBox\n          userEntityRef={entity.updatedBy}\n          time={entity.updated}\n          label={t('authorBox.updatedAtTime')}\n          expert={false}\n          anonymous={entity.anonymous}\n        />\n      )}\n      <AuthorBox\n        userEntityRef={entity.author}\n        time={entity.created}\n        label={\n          isAnswer(entity)\n            ? t('authorBox.answeredAtTime')\n            : t('authorBox.postedAtTime')\n        }\n        expert={isAnswer(entity) ? entity.expert : false}\n        anonymous={entity.anonymous}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAUA,SAAS,SAAS,MAAwC,EAAA;AACxD,EAAO,OAAA,QAAA,IAAY,UAAU,SAAa,IAAA,MAAA;AAC5C;AAEa,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAClE,EAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,GAAA;AAAA,MACV,KAAO,EAAA,EAAE,GAAK,EAAA,KAAA,EAAO,gBAAgB,UAAW,EAAA;AAAA,MAChD,EAAI,EAAA,CAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAO,MAAA,CAAA,OAAA,IAAW,OAAO,SACxB,oBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAe,MAAO,CAAA,SAAA;AAAA,YACtB,MAAM,MAAO,CAAA,OAAA;AAAA,YACb,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,YAClC,MAAQ,EAAA,KAAA;AAAA,YACR,WAAW,MAAO,CAAA;AAAA;AAAA,SACpB;AAAA,wBAEF,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAe,MAAO,CAAA,MAAA;AAAA,YACtB,MAAM,MAAO,CAAA,OAAA;AAAA,YACb,KAAA,EACE,SAAS,MAAM,CAAA,GACX,EAAE,0BAA0B,CAAA,GAC5B,EAAE,wBAAwB,CAAA;AAAA,YAEhC,MAAQ,EAAA,QAAA,CAAS,MAAM,CAAA,GAAI,OAAO,MAAS,GAAA,KAAA;AAAA,YAC3C,WAAW,MAAO,CAAA;AAAA;AAAA;AACpB;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"AuthorBoxes.esm.js","sources":["../../../src/components/AuthorBox/AuthorBoxes.tsx"],"sourcesContent":["import {\n  Answer,\n  PostAnswerEntity,\n  isAnswer,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box } from '@material-ui/core';\nimport { AuthorBox } from './AuthorBox.tsx';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport const AuthorBoxes = (props: { entity: PostAnswerEntity }) => {\n  const entity = props.entity;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <Box\n      display=\"flex\"\n      minWidth={220}\n      style={{ gap: '8px', justifyContent: 'flex-end' }}\n      ml={1}\n    >\n      {entity.updated && entity.updatedBy && (\n        <AuthorBox\n          userEntityRef={entity.updatedBy}\n          time={entity.updated}\n          label={t('authorBox.updatedAtTime')}\n          expert={false}\n          anonymous={entity.anonymous}\n        />\n      )}\n      <AuthorBox\n        userEntityRef={entity.author}\n        time={entity.created}\n        label={\n          isAnswer(entity)\n            ? t('authorBox.answeredAtTime')\n            : t('authorBox.postedAtTime')\n        }\n        expert={isAnswer(entity) ? (entity as Answer).expert : false}\n        anonymous={entity.anonymous}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAUa,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AAClE,EAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,QAAU,EAAA,GAAA;AAAA,MACV,KAAO,EAAA,EAAE,GAAK,EAAA,KAAA,EAAO,gBAAgB,UAAW,EAAA;AAAA,MAChD,EAAI,EAAA,CAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAO,MAAA,CAAA,OAAA,IAAW,OAAO,SACxB,oBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAe,MAAO,CAAA,SAAA;AAAA,YACtB,MAAM,MAAO,CAAA,OAAA;AAAA,YACb,KAAA,EAAO,EAAE,yBAAyB,CAAA;AAAA,YAClC,MAAQ,EAAA,KAAA;AAAA,YACR,WAAW,MAAO,CAAA;AAAA;AAAA,SACpB;AAAA,wBAEF,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,eAAe,MAAO,CAAA,MAAA;AAAA,YACtB,MAAM,MAAO,CAAA,OAAA;AAAA,YACb,KAAA,EACE,SAAS,MAAM,CAAA,GACX,EAAE,0BAA0B,CAAA,GAC5B,EAAE,wBAAwB,CAAA;AAAA,YAEhC,MAAQ,EAAA,QAAA,CAAS,MAAM,CAAA,GAAK,OAAkB,MAAS,GAAA,KAAA;AAAA,YACvD,WAAW,MAAO,CAAA;AAAA;AAAA;AACpB;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Badges/BadgeChip.esm.js

@@ -0,0 +1,231 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeStyles, Box, Typography } from '@material-ui/core';
+import StarIcon from '@material-ui/icons/Star';
+import VerifiedUser from '@material-ui/icons/VerifiedUser';
+import Visibility from '@material-ui/icons/Visibility';
+import EmojiEvents from '@material-ui/icons/EmojiEvents';
+import HelpIcon from '@material-ui/icons/Help';
+import SearchIcon from '@material-ui/icons/Search';
+import Support from '@material-ui/icons/ContactSupport';
+import Build from '@material-ui/icons/Build';
+import School from '@material-ui/icons/School';
+import MenuBook from '@material-ui/icons/MenuBook';
+import CastForEducation from '@material-ui/icons/CastForEducation';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import RateReview from '@material-ui/icons/RateReview';
+import DescriptionIcon from '@material-ui/icons/Description';
+import CreateIcon from '@material-ui/icons/Create';
+import LinkIcon from '@material-ui/icons/Link';
+import Comment from '@material-ui/icons/Comment';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+import Share from '@material-ui/icons/Share';
+import Public from '@material-ui/icons/Public';
+import RecordVoiceOver from '@material-ui/icons/RecordVoiceOver';
+import SpeakerNotes from '@material-ui/icons/SpeakerNotes';
+import Gavel from '@material-ui/icons/Gavel';
+import DeviceHub from '@material-ui/icons/DeviceHub';
+import Hearing from '@material-ui/icons/Hearing';
+import Stars from '@material-ui/icons/Stars';
+import Flare from '@material-ui/icons/Flare';
+import CheckCircle from '@material-ui/icons/CheckCircle';
+import DoneAll from '@material-ui/icons/DoneAll';
+import PersonAdd from '@material-ui/icons/PersonAdd';
+import TrendingUp from '@material-ui/icons/TrendingUp';
+import Group from '@material-ui/icons/Group';
+import NightsStay from '@material-ui/icons/NightsStay';
+import ChatBubble from '@material-ui/icons/ChatBubble';
+import Translate from '@material-ui/icons/Translate';
+import LibraryBooks from '@material-ui/icons/LibraryBooks';
+import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
+import LocalLibrary from '@material-ui/icons/LocalLibrary';
+import Archive from '@material-ui/icons/Archive';
+import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
+import FolderSpecial from '@material-ui/icons/FolderSpecial';
+import StarRate from '@material-ui/icons/StarRate';
+import Whatshot from '@material-ui/icons/Whatshot';
+import Palette from '@material-ui/icons/Palette';
+import CameraAlt from '@material-ui/icons/CameraAlt';
+import LabelImportant from '@material-ui/icons/LabelImportant';
+
+const useStyles = makeStyles((theme) => ({
+  badge: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    padding: theme.spacing(1.5),
+    borderRadius: theme.shape.borderRadius * 2,
+    width: 140,
+    height: 140,
+    textAlign: "center",
+    userSelect: "none",
+    overflow: "hidden"
+  },
+  bronze: {
+    background: "linear-gradient(135deg, #cd7f32 0%, #a0522d 100%)",
+    color: "#ffffff"
+  },
+  silver: {
+    background: "linear-gradient(135deg, #e8e8e8 0%, #a8a8a8 100%)",
+    color: "#333333"
+  },
+  gold: {
+    background: "linear-gradient(135deg, #ffd700 0%, #daa520 100%)",
+    color: "#333333"
+  },
+  diamond: {
+    background: "linear-gradient(135deg, #b9f2ff 0%, #7ec8e3 100%)",
+    color: "#1a365d"
+  },
+  icon: {
+    fontSize: 28,
+    marginBottom: theme.spacing(0.5)
+  },
+  name: {
+    fontWeight: 600,
+    fontSize: "0.85rem",
+    lineHeight: 1.2,
+    marginBottom: theme.spacing(0.5)
+  },
+  level: {
+    fontSize: "0.65rem",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    opacity: 0.85,
+    marginBottom: theme.spacing(0.5)
+  },
+  description: {
+    fontSize: "0.7rem",
+    lineHeight: 1.3,
+    opacity: 0.9
+  }
+}));
+const getIcon = (icon) => {
+  switch (icon) {
+    case "star":
+      return /* @__PURE__ */ jsx(StarIcon, {});
+    case "local_police":
+      return /* @__PURE__ */ jsx(VerifiedUser, {});
+    case "visibility":
+      return /* @__PURE__ */ jsx(Visibility, {});
+    case "workspace_premium":
+      return /* @__PURE__ */ jsx(EmojiEvents, {});
+    case "help":
+      return /* @__PURE__ */ jsx(HelpIcon, {});
+    case "psychology":
+      return /* @__PURE__ */ jsx(SearchIcon, {});
+    case "support":
+      return /* @__PURE__ */ jsx(Support, {});
+    case "build":
+      return /* @__PURE__ */ jsx(Build, {});
+    case "school":
+      return /* @__PURE__ */ jsx(School, {});
+    case "menu_book":
+      return /* @__PURE__ */ jsx(MenuBook, {});
+    case "cast_for_education":
+      return /* @__PURE__ */ jsx(CastForEducation, {});
+    case "thumb_up":
+      return /* @__PURE__ */ jsx(ThumbUp, {});
+    case "rate_review":
+      return /* @__PURE__ */ jsx(RateReview, {});
+    case "article":
+      return /* @__PURE__ */ jsx(DescriptionIcon, {});
+    case "history_edu":
+      return /* @__PURE__ */ jsx(CreateIcon, {});
+    case "link":
+      return /* @__PURE__ */ jsx(LinkIcon, {});
+    case "comment":
+      return /* @__PURE__ */ jsx(Comment, {});
+    case "view_column":
+      return /* @__PURE__ */ jsx(ViewColumn, {});
+    case "share":
+      return /* @__PURE__ */ jsx(Share, {});
+    case "public":
+      return /* @__PURE__ */ jsx(Public, {});
+    case "record_voice_over":
+      return /* @__PURE__ */ jsx(RecordVoiceOver, {});
+    case "campaign":
+      return /* @__PURE__ */ jsx(SpeakerNotes, {});
+    case "gavel":
+      return /* @__PURE__ */ jsx(Gavel, {});
+    case "device_hub":
+      return /* @__PURE__ */ jsx(DeviceHub, {});
+    case "hearing":
+      return /* @__PURE__ */ jsx(Hearing, {});
+    case "military_tech":
+      return /* @__PURE__ */ jsx(Stars, {});
+    case "verified":
+      return /* @__PURE__ */ jsx(VerifiedUser, {});
+    case "check_circle":
+      return /* @__PURE__ */ jsx(CheckCircle, {});
+    case "done_all":
+      return /* @__PURE__ */ jsx(DoneAll, {});
+    case "construction":
+      return /* @__PURE__ */ jsx(Build, {});
+    case "auto_fix_high":
+      return /* @__PURE__ */ jsx(Flare, {});
+    case "person_add":
+      return /* @__PURE__ */ jsx(PersonAdd, {});
+    case "trending_up":
+      return /* @__PURE__ */ jsx(TrendingUp, {});
+    case "emoji_events":
+      return /* @__PURE__ */ jsx(EmojiEvents, {});
+    case "groups":
+      return /* @__PURE__ */ jsx(Group, {});
+    case "nights_stay":
+      return /* @__PURE__ */ jsx(NightsStay, {});
+    case "auto_stories":
+      return /* @__PURE__ */ jsx(LibraryBooks, {});
+    case "translate":
+      return /* @__PURE__ */ jsx(Translate, {});
+    case "chat_bubble":
+      return /* @__PURE__ */ jsx(ChatBubble, {});
+    // Collection badges
+    case "collections_bookmark":
+      return /* @__PURE__ */ jsx(CollectionsBookmarkIcon, {});
+    case "local_library":
+      return /* @__PURE__ */ jsx(LocalLibrary, {});
+    case "archive":
+      return /* @__PURE__ */ jsx(Archive, {});
+    case "playlist_add":
+      return /* @__PURE__ */ jsx(PlayListAddIcon, {});
+    case "folder_special":
+      return /* @__PURE__ */ jsx(FolderSpecial, {});
+    case "inventory":
+      return /* @__PURE__ */ jsx(Archive, {});
+    case "star_rate":
+      return /* @__PURE__ */ jsx(StarRate, {});
+    case "diamond":
+      return /* @__PURE__ */ jsx(Stars, {});
+    case "whatshot":
+      return /* @__PURE__ */ jsx(Whatshot, {});
+    case "palette":
+      return /* @__PURE__ */ jsx(Palette, {});
+    case "camera_alt":
+      return /* @__PURE__ */ jsx(CameraAlt, {});
+    case "label_important":
+      return /* @__PURE__ */ jsx(LabelImportant, {});
+    default:
+      return /* @__PURE__ */ jsx(VerifiedUser, {});
+  }
+};
+const BadgeChip = ({
+  badge,
+  count
+}) => {
+  const classes = useStyles();
+  const IconComponent = getIcon(badge.icon);
+  return /* @__PURE__ */ jsxs(Box, { className: `${classes.badge} ${classes[badge.level]}`, children: [
+    /* @__PURE__ */ jsx(Box, { className: classes.icon, children: IconComponent }),
+    /* @__PURE__ */ jsx(Typography, { className: classes.name, children: badge.name }),
+    /* @__PURE__ */ jsx(Typography, { className: classes.level, children: badge.level }),
+    /* @__PURE__ */ jsx(Typography, { className: classes.description, children: badge.description }),
+    count && count > 1 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", style: { marginTop: "auto" }, children: [
+      "x ",
+      count
+    ] })
+  ] });
+};
+
+export { BadgeChip };
+//# sourceMappingURL=BadgeChip.esm.js.map

package/dist/components/Badges/BadgeChip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeChip.esm.js","sources":["../../../src/components/Badges/BadgeChip.tsx"],"sourcesContent":["import { Badge } from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Typography, makeStyles } from '@material-ui/core';\nimport Star from '@material-ui/icons/Star';\nimport VerifiedUser from '@material-ui/icons/VerifiedUser';\nimport Visibility from '@material-ui/icons/Visibility';\nimport EmojiEvents from '@material-ui/icons/EmojiEvents';\nimport Help from '@material-ui/icons/Help';\nimport Search from '@material-ui/icons/Search';\nimport Support from '@material-ui/icons/ContactSupport';\nimport Build from '@material-ui/icons/Build';\nimport School from '@material-ui/icons/School';\nimport MenuBook from '@material-ui/icons/MenuBook';\nimport CastForEducation from '@material-ui/icons/CastForEducation';\nimport ThumbUp from '@material-ui/icons/ThumbUp';\nimport RateReview from '@material-ui/icons/RateReview';\nimport Article from '@material-ui/icons/Description';\nimport Create from '@material-ui/icons/Create';\nimport Link from '@material-ui/icons/Link';\nimport Comment from '@material-ui/icons/Comment';\nimport ViewColumn from '@material-ui/icons/ViewColumn';\nimport Share from '@material-ui/icons/Share';\nimport Public from '@material-ui/icons/Public';\nimport RecordVoiceOver from '@material-ui/icons/RecordVoiceOver';\nimport SpeakerNotes from '@material-ui/icons/SpeakerNotes';\nimport Gavel from '@material-ui/icons/Gavel';\nimport DeviceHub from '@material-ui/icons/DeviceHub';\nimport Hearing from '@material-ui/icons/Hearing';\nimport Stars from '@material-ui/icons/Stars';\nimport Flare from '@material-ui/icons/Flare';\nimport CheckCircle from '@material-ui/icons/CheckCircle';\nimport DoneAll from '@material-ui/icons/DoneAll';\nimport PersonAdd from '@material-ui/icons/PersonAdd';\nimport TrendingUp from '@material-ui/icons/TrendingUp';\nimport Group from '@material-ui/icons/Group';\nimport NightsStay from '@material-ui/icons/NightsStay';\nimport ChatBubble from '@material-ui/icons/ChatBubble';\nimport Translate from '@material-ui/icons/Translate';\nimport LibraryBooks from '@material-ui/icons/LibraryBooks';\nimport CollectionsBookmark from '@material-ui/icons/CollectionsBookmark';\nimport LocalLibrary from '@material-ui/icons/LocalLibrary';\nimport Archive from '@material-ui/icons/Archive';\nimport PlaylistAdd from '@material-ui/icons/PlaylistAdd';\nimport FolderSpecial from '@material-ui/icons/FolderSpecial';\nimport StarRate from '@material-ui/icons/StarRate';\nimport Whatshot from '@material-ui/icons/Whatshot';\nimport Palette from '@material-ui/icons/Palette';\nimport CameraAlt from '@material-ui/icons/CameraAlt';\nimport LabelImportant from '@material-ui/icons/LabelImportant';\n\nconst useStyles = makeStyles(theme => ({\n  badge: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    padding: theme.spacing(1.5),\n    borderRadius: theme.shape.borderRadius * 2,\n    width: 140,\n    height: 140,\n    textAlign: 'center',\n    userSelect: 'none',\n    overflow: 'hidden',\n  },\n  bronze: {\n    background: 'linear-gradient(135deg, #cd7f32 0%, #a0522d 100%)',\n    color: '#ffffff',\n  },\n  silver: {\n    background: 'linear-gradient(135deg, #e8e8e8 0%, #a8a8a8 100%)',\n    color: '#333333',\n  },\n  gold: {\n    background: 'linear-gradient(135deg, #ffd700 0%, #daa520 100%)',\n    color: '#333333',\n  },\n  diamond: {\n    background: 'linear-gradient(135deg, #b9f2ff 0%, #7ec8e3 100%)',\n    color: '#1a365d',\n  },\n  icon: {\n    fontSize: 28,\n    marginBottom: theme.spacing(0.5),\n  },\n  name: {\n    fontWeight: 600,\n    fontSize: '0.85rem',\n    lineHeight: 1.2,\n    marginBottom: theme.spacing(0.5),\n  },\n  level: {\n    fontSize: '0.65rem',\n    textTransform: 'uppercase',\n    letterSpacing: '0.5px',\n    opacity: 0.85,\n    marginBottom: theme.spacing(0.5),\n  },\n  description: {\n    fontSize: '0.7rem',\n    lineHeight: 1.3,\n    opacity: 0.9,\n  },\n}));\n\nconst getIcon = (icon: string) => {\n  switch (icon) {\n    case 'star':\n      return <Star />;\n    case 'local_police':\n      return <VerifiedUser />;\n    case 'visibility':\n      return <Visibility />;\n    case 'workspace_premium':\n      return <EmojiEvents />;\n    case 'help':\n      return <Help />;\n    case 'psychology':\n      return <Search />;\n    case 'support':\n      return <Support />;\n    case 'build':\n      return <Build />;\n    case 'school':\n      return <School />;\n    case 'menu_book':\n      return <MenuBook />;\n    case 'cast_for_education':\n      return <CastForEducation />;\n    case 'thumb_up':\n      return <ThumbUp />;\n    case 'rate_review':\n      return <RateReview />;\n    case 'article':\n      return <Article />;\n    case 'history_edu':\n      return <Create />;\n    case 'link':\n      return <Link />;\n    case 'comment':\n      return <Comment />;\n    case 'view_column':\n      return <ViewColumn />;\n    case 'share':\n      return <Share />;\n    case 'public':\n      return <Public />;\n    case 'record_voice_over':\n      return <RecordVoiceOver />;\n    case 'campaign':\n      return <SpeakerNotes />;\n    case 'gavel':\n      return <Gavel />;\n    case 'device_hub':\n      return <DeviceHub />;\n    case 'hearing':\n      return <Hearing />;\n    case 'military_tech':\n      return <Stars />;\n    case 'verified':\n      return <VerifiedUser />;\n    case 'check_circle':\n      return <CheckCircle />;\n    case 'done_all':\n      return <DoneAll />;\n    case 'construction':\n      return <Build />;\n    case 'auto_fix_high':\n      return <Flare />;\n    case 'person_add':\n      return <PersonAdd />;\n    case 'trending_up':\n      return <TrendingUp />;\n    case 'emoji_events':\n      return <EmojiEvents />;\n    case 'groups':\n      return <Group />;\n    case 'nights_stay':\n      return <NightsStay />;\n    case 'auto_stories':\n      return <LibraryBooks />;\n    case 'translate':\n      return <Translate />;\n    case 'chat_bubble':\n      return <ChatBubble />;\n    // Collection badges\n    case 'collections_bookmark':\n      return <CollectionsBookmark />;\n    case 'local_library':\n      return <LocalLibrary />;\n    case 'archive':\n      return <Archive />;\n    case 'playlist_add':\n      return <PlaylistAdd />;\n    case 'folder_special':\n      return <FolderSpecial />;\n    case 'inventory':\n      return <Archive />;\n    case 'star_rate':\n      return <StarRate />;\n    case 'diamond':\n      return <Stars />;\n    case 'whatshot':\n      return <Whatshot />;\n    case 'palette':\n      return <Palette />;\n    case 'camera_alt':\n      return <CameraAlt />;\n    case 'label_important':\n      return <LabelImportant />;\n    default:\n      return <VerifiedUser />;\n  }\n};\n\nexport const BadgeChip = ({\n  badge,\n  count,\n}: {\n  badge: Badge;\n  count?: number;\n}) => {\n  const classes = useStyles();\n  const IconComponent = getIcon(badge.icon);\n\n  return (\n    <Box className={`${classes.badge} ${classes[badge.level]}`}>\n      <Box className={classes.icon}>{IconComponent}</Box>\n      <Typography className={classes.name}>{badge.name}</Typography>\n      <Typography className={classes.level}>{badge.level}</Typography>\n      <Typography className={classes.description}>\n        {badge.description}\n      </Typography>\n      {count && count > 1 && (\n        <Typography variant=\"caption\" style={{ marginTop: 'auto' }}>\n          x {count}\n        </Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":["Star","Help","Search","Article","Create","Link","CollectionsBookmark","PlaylistAdd"],"mappings":"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"}

package/dist/components/Badges/UserBadges.esm.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
+import 'react';
+import '@backstage/core-plugin-api';
+import '../../api.esm.js';
+import '@backstage/catalog-model';
+import 'dataloader';
+import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+import { BadgeChip } from './BadgeChip.esm.js';
+import { Box, Typography, Grid } from '@material-ui/core';
+import { Skeleton, Alert } from '@material-ui/lab';
+
+const LEVEL_ORDER = {
+  diamond: 0,
+  gold: 1,
+  silver: 2,
+  bronze: 3
+};
+const sortBadgesByLevel = (badges) => {
+  return [...badges].sort((a, b) => {
+    const levelA = LEVEL_ORDER[a.badge.level] ?? 99;
+    const levelB = LEVEL_ORDER[b.badge.level] ?? 99;
+    return levelA - levelB;
+  });
+};
+const UserBadges = ({ entityRef }) => {
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const {
+    value: badges,
+    loading,
+    error
+  } = useQetaApi((api) => api.getUserBadges(entityRef), [entityRef]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: 100 });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: t("userBadges.error") });
+  }
+  const sortedBadges = badges ? sortBadgesByLevel(badges) : [];
+  const groupedBadges = sortedBadges.reduce((acc, userBadge) => {
+    const key = userBadge.badge.id;
+    if (!acc[key]) {
+      acc[key] = {
+        badge: userBadge.badge,
+        count: 0
+      };
+    }
+    acc[key].count += 1;
+    return acc;
+  }, {});
+  const displayBadges = Object.values(groupedBadges).sort((a, b) => {
+    const levelA = LEVEL_ORDER[a.badge.level] ?? 99;
+    const levelB = LEVEL_ORDER[b.badge.level] ?? 99;
+    return levelA - levelB;
+  });
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: t("userBadges.title") }),
+    displayBadges.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("userBadges.noBadges") }) : /* @__PURE__ */ jsx(
+      Grid,
+      {
+        container: true,
+        spacing: 3,
+        style: { padding: "1em" },
+        justifyContent: "center",
+        alignItems: "center",
+        children: displayBadges.map((item, index) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(BadgeChip, { badge: item.badge, count: item.count }) }, index))
+      }
+    )
+  ] });
+};
+
+export { UserBadges };
+//# sourceMappingURL=UserBadges.esm.js.map

package/dist/components/Badges/UserBadges.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserBadges.esm.js","sources":["../../../src/components/Badges/UserBadges.tsx"],"sourcesContent":["import { useQetaApi } from '../../hooks';\nimport { BadgeChip } from './BadgeChip';\nimport { Box, Typography, Grid } from '@material-ui/core';\nimport { Alert, Skeleton } from '@material-ui/lab';\nimport { UserBadge } from '@drodil/backstage-plugin-qeta-common';\n\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\n\nconst LEVEL_ORDER: Record<string, number> = {\n  diamond: 0,\n  gold: 1,\n  silver: 2,\n  bronze: 3,\n};\n\nconst sortBadgesByLevel = (badges: UserBadge[]): UserBadge[] => {\n  return [...badges].sort((a, b) => {\n    const levelA = LEVEL_ORDER[a.badge.level] ?? 99;\n    const levelB = LEVEL_ORDER[b.badge.level] ?? 99;\n    return levelA - levelB;\n  });\n};\n\nexport const UserBadges = ({ entityRef }: { entityRef: string }) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const {\n    value: badges,\n    loading,\n    error,\n  } = useQetaApi(api => api.getUserBadges(entityRef), [entityRef]);\n\n  if (loading) {\n    return <Skeleton variant=\"rect\" height={100} />;\n  }\n\n  if (error) {\n    return <Alert severity=\"error\">{t('userBadges.error')}</Alert>;\n  }\n\n  const sortedBadges = badges ? sortBadgesByLevel(badges) : [];\n\n  const groupedBadges = sortedBadges.reduce((acc, userBadge) => {\n    const key = userBadge.badge.id;\n    if (!acc[key]) {\n      acc[key] = {\n        badge: userBadge.badge,\n        count: 0,\n      };\n    }\n    acc[key].count += 1;\n    return acc;\n  }, {} as Record<string, { badge: UserBadge['badge']; count: number }>);\n\n  const displayBadges = Object.values(groupedBadges).sort((a, b) => {\n    const levelA = LEVEL_ORDER[a.badge.level] ?? 99;\n    const levelB = LEVEL_ORDER[b.badge.level] ?? 99;\n    return levelA - levelB;\n  });\n\n  return (\n    <Box>\n      <Typography variant=\"h6\" gutterBottom>\n        {t('userBadges.title')}\n      </Typography>\n      {displayBadges.length === 0 ? (\n        <Typography variant=\"body2\">{t('userBadges.noBadges')}</Typography>\n      ) : (\n        <Grid\n          container\n          spacing={3}\n          style={{ padding: '1em' }}\n          justifyContent=\"center\"\n          alignItems=\"center\"\n        >\n          {displayBadges.map((item, index: number) => (\n            <Grid item key={index}>\n              <BadgeChip badge={item.badge} count={item.count} />\n            </Grid>\n          ))}\n        </Grid>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Buttons/LinkButton.esm.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { isPost } from '@drodil/backstage-plugin-qeta-common';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
 import { Tooltip, IconButton } from '@material-ui/core';
@@ -6,12 +7,12 @@ import LinkIcon from '@material-ui/icons/Link';
 import { useApi, alertApiRef } from '@backstage/core-plugin-api';
 
 const LinkButton = (props) => {
-  const isQuestion = "title" in props.entity;
+  const isPostEntity = isPost(props.entity);
   const { t } = useTranslationRef(qetaTranslationRef);
   const alertApi = useApi(alertApiRef);
   const copyToClipboard = () => {
     const url = new URL(window.location.href);
-    if (!isQuestion) {
+    if (!isPostEntity) {
       url.hash = `#answer_${props.entity.id}`;
     }
     window.navigator.clipboard.writeText(url.toString());
@@ -21,7 +22,7 @@ const LinkButton = (props) => {
       display: "transient"
     });
   };
-  return /* @__PURE__ */ jsx(Tooltip, { title: isQuestion ? t("link.post") : t("link.answer"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { title: isPostEntity ? t("link.post") : t("link.answer"), children: /* @__PURE__ */ jsx(
     IconButton,
     {
       "aria-label": t("link.aria"),

package/dist/components/Buttons/LinkButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.esm.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport Link from '@material-ui/icons/Link';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const LinkButton = (props: {\n  entity: PostResponse | AnswerResponse;\n  className?: string;\n}) => {\n  const isQuestion = 'title' in props.entity;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const alertApi = useApi(alertApiRef);\n  const copyToClipboard = () => {\n    const url = new URL(window.location.href);\n    if (!isQuestion) {\n      url.hash = `#answer_${props.entity.id}`;\n    }\n    window.navigator.clipboard.writeText(url.toString());\n    alertApi.post({\n      message: t('link.copied'),\n      severity: 'info',\n      display: 'transient',\n    });\n  };\n\n  return (\n    <Tooltip title={isQuestion ? t('link.post') : t('link.answer')}>\n      <IconButton\n        aria-label={t('link.aria')}\n        size=\"small\"\n        onClick={copyToClipboard}\n        className={props.className}\n      >\n        <Link />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":["Link"],"mappings":";;;;;;;AAUa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,UAAA,GAAa,WAAW,KAAM,CAAA,MAAA;AACpC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAA,IAAI,CAAC,UAAY,EAAA;AACf,MAAA,GAAA,CAAI,IAAO,GAAA,CAAA,QAAA,EAAW,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAEvC,IAAA,MAAA,CAAO,SAAU,CAAA,SAAA,CAAU,SAAU,CAAA,GAAA,CAAI,UAAU,CAAA;AACnD,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,EAAE,aAAa,CAAA;AAAA,MACxB,QAAU,EAAA,MAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,UAAA,GAAa,EAAE,WAAW,CAAA,GAAI,CAAE,CAAA,aAAa,CAC3D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,eAAA;AAAA,MACT,WAAW,KAAM,CAAA,SAAA;AAAA,MAEjB,8BAACA,QAAK,EAAA,EAAA;AAAA;AAAA,GAEV,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"LinkButton.esm.js","sources":["../../../src/components/Buttons/LinkButton.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n  isPost,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport LinkIcon from '@material-ui/icons/Link';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const LinkButton = (props: {\n  entity: PostResponse | AnswerResponse;\n  className?: string;\n}) => {\n  const isPostEntity = isPost(props.entity);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const alertApi = useApi(alertApiRef);\n  const copyToClipboard = () => {\n    const url = new URL(window.location.href);\n    if (!isPostEntity) {\n      url.hash = `#answer_${props.entity.id}`;\n    }\n    window.navigator.clipboard.writeText(url.toString());\n    alertApi.post({\n      message: t('link.copied'),\n      severity: 'info',\n      display: 'transient',\n    });\n  };\n\n  return (\n    <Tooltip title={isPostEntity ? t('link.post') : t('link.answer')}>\n      <IconButton\n        aria-label={t('link.aria')}\n        size=\"small\"\n        onClick={copyToClipboard}\n        className={props.className}\n      >\n        <LinkIcon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAWa,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAM,MAAA,YAAA,GAAe,MAAO,CAAA,KAAA,CAAM,MAAM,CAAA;AACxC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,EAAA,MAAM,kBAAkB,MAAM;AAC5B,IAAA,MAAM,GAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAA,IAAI,CAAC,YAAc,EAAA;AACjB,MAAA,GAAA,CAAI,IAAO,GAAA,CAAA,QAAA,EAAW,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA,CAAA;AAAA;AAEvC,IAAA,MAAA,CAAO,SAAU,CAAA,SAAA,CAAU,SAAU,CAAA,GAAA,CAAI,UAAU,CAAA;AACnD,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,EAAE,aAAa,CAAA;AAAA,MACxB,QAAU,EAAA,MAAA;AAAA,MACV,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,GACH;AAEA,EACE,uBAAA,GAAA,CAAC,WAAQ,KAAO,EAAA,YAAA,GAAe,EAAE,WAAW,CAAA,GAAI,CAAE,CAAA,aAAa,CAC7D,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,eAAA;AAAA,MACT,WAAW,KAAM,CAAA,SAAA;AAAA,MAEjB,8BAAC,QAAS,EAAA,EAAA;AAAA;AAAA,GAEd,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Buttons/OpenLinkButton.esm.js

@@ -10,11 +10,16 @@ const OpenLinkButton = (props) => {
   const { entity, className, style } = props;
   const qetaApi = useApi(qetaApiRef);
   const { t } = useTranslationRef(qetaTranslationRef);
+  if (!entity.url) {
+    return null;
+  }
   const handleClick = (event) => {
     event.stopPropagation();
+    event.preventDefault();
     qetaApi.clickLink(entity.id);
+    window.open(entity.url, "_blank", "noopener,noreferrer");
   };
-  return /* @__PURE__ */ jsx(Tooltip, { title: t("link.open"), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { title: `${t("link.open")}: ${entity.url}`, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       component: "a",

package/dist/components/Buttons/OpenLinkButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenLinkButton.esm.js","sources":["../../../src/components/Buttons/OpenLinkButton.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport OpenLinkIcon from '@material-ui/icons/OpenInNew';\nimport { qetaApiRef } from '../../api.ts';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const OpenLinkButton = (props: {\n  entity: PostResponse;\n  className?: string;\n  style?: React.CSSProperties;\n}) => {\n  const { entity, className, style } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    qetaApi.clickLink(entity.id);\n  };\n\n  return (\n    <Tooltip title={t('link.open')}>\n      <IconButton\n        component=\"a\"\n        href={entity.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-label={t('link.open')}\n        size=\"small\"\n        onClick={handleClick}\n        className={className}\n        style={style}\n      >\n        <OpenLinkIcon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAM,MAAA,WAAA,GAAc,CAClB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,EAAE,CAAA;AAAA,GAC7B;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,WAAW,CAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,MAAM,MAAO,CAAA,GAAA;AAAA,MACb,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,qBAAA;AAAA,MACJ,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAElB,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OpenLinkButton.esm.js","sources":["../../../src/components/Buttons/OpenLinkButton.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { IconButton, Tooltip } from '@material-ui/core';\nimport OpenLinkIcon from '@material-ui/icons/OpenInNew';\nimport { qetaApiRef } from '../../api.ts';\nimport { useApi } from '@backstage/core-plugin-api';\n\nexport const OpenLinkButton = (props: {\n  entity: PostResponse;\n  className?: string;\n  style?: React.CSSProperties;\n}) => {\n  const { entity, className, style } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (!entity.url) {\n    return null;\n  }\n\n  const handleClick = (\n    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n  ) => {\n    event.stopPropagation();\n    event.preventDefault();\n    qetaApi.clickLink(entity.id);\n    window.open(entity.url, '_blank', 'noopener,noreferrer');\n  };\n\n  return (\n    <Tooltip title={`${t('link.open')}: ${entity.url}`}>\n      <IconButton\n        component=\"a\"\n        href={entity.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-label={t('link.open')}\n        size=\"small\"\n        onClick={handleClick}\n        className={className}\n        style={style}\n      >\n        <OpenLinkIcon />\n      </IconButton>\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQa,MAAA,cAAA,GAAiB,CAAC,KAIzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAU,GAAA,KAAA;AACrC,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAI,IAAA,CAAC,OAAO,GAAK,EAAA;AACf,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,WAAA,GAAc,CAClB,KACG,KAAA;AACH,IAAA,KAAA,CAAM,eAAgB,EAAA;AACtB,IAAA,KAAA,CAAM,cAAe,EAAA;AACrB,IAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,EAAE,CAAA;AAC3B,IAAA,MAAA,CAAO,IAAK,CAAA,MAAA,CAAO,GAAK,EAAA,QAAA,EAAU,qBAAqB,CAAA;AAAA,GACzD;AAEA,EACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAO,CAAG,EAAA,CAAA,CAAE,WAAW,CAAC,CAAA,EAAA,EAAK,MAAO,CAAA,GAAG,CAC9C,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,GAAA;AAAA,MACV,MAAM,MAAO,CAAA,GAAA;AAAA,MACb,MAAO,EAAA,QAAA;AAAA,MACP,GAAI,EAAA,qBAAA;AAAA,MACJ,YAAA,EAAY,EAAE,WAAW,CAAA;AAAA,MACzB,IAAK,EAAA,OAAA;AAAA,MACL,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,YAAa,EAAA,EAAA;AAAA;AAAA,GAElB,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,14 +1,14 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } 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 { 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 { CollectionFollowButton } from '../Buttons/CollectionFollowButton.esm.js';
+import { ClickableLink } from '../Utility/ClickableLink.esm.js';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
 import PeopleIcon from '@material-ui/icons/People';
@@ -61,9 +61,8 @@ const CollectionsGridItem = (props) => {
   const classes = useStyles();
   const { t } = useTranslationRef(qetaTranslationRef);
   const collectionRoute = useRouteRef(collectionRouteRef);
-  const navigate = useNavigate();
   const href = collectionRoute({ id: collection.id.toString(10) });
-  return /* @__PURE__ */ jsxs(Card, { className: classes.card, onClick: () => navigate(href), children: [
+  return /* @__PURE__ */ jsx(Card, { className: classes.card, children: /* @__PURE__ */ jsxs(ClickableLink, { href, ariaLabel: collection.title, children: [
     collection.headerImage ? /* @__PURE__ */ jsx(
       CardMedia,
       {
@@ -94,13 +93,12 @@ const CollectionsGridItem = (props) => {
               children: [
                 /* @__PURE__ */ jsx(Typography, { gutterBottom: true, variant: "h6", component: "div", children: collection.title }),
                 /* @__PURE__ */ jsx(
-                  "div",
+                  Box,
                   {
-                    onClick: (e) => e.stopPropagation(),
-                    onKeyPress: () => {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
                     },
-                    role: "button",
-                    tabIndex: 0,
                     children: /* @__PURE__ */ jsx(CollectionFollowButton, { collection })
                   }
                 )
@@ -172,7 +170,7 @@ const CollectionsGridItem = (props) => {
         ]
       }
     )
-  ] });
+  ] }) });
 };
 
 export { CollectionsGridItem };