@drodil/backstage-plugin-qeta-react 3.56.0 → 3.57.0

package/dist/components/Tooltips/PostTooltip.esm.js

@@ -0,0 +1,257 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip, Grid, Typography, Box, Avatar } from '@material-ui/core';
+import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+import 'react-use';
+import { useState, useEffect } from 'react';
+import '@backstage/plugin-signals-react';
+import '../../hooks/useListItemStyles.esm.js';
+import { useUserInfo } from '../../hooks/useEntityAuthor.esm.js';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@backstage/plugin-permission-common';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import '../QetaContext/QetaContext.esm.js';
+import 'dataloader';
+import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
+import ThumbUpOutlined from '@material-ui/icons/ThumbUpOutlined';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
+import QuestionAnswerOutlined from '@material-ui/icons/QuestionAnswerOutlined';
+import ChatBubbleOutline from '@material-ui/icons/ChatBubbleOutline';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
+import { Skeleton } from '@material-ui/lab';
+
+const cache = /* @__PURE__ */ new Map();
+const requestCache = /* @__PURE__ */ new Map();
+const TTL = 5 * 60 * 1e3;
+const PostTooltipContent = ({
+  post: propsPost,
+  id
+}) => {
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const qetaApi = useApi(qetaApiRef);
+  const [post, setPost] = useState(propsPost);
+  useEffect(() => {
+    if (propsPost) {
+      setPost(propsPost);
+      return;
+    }
+    if (id) {
+      const cached = cache.get(id.toString());
+      if (cached && Date.now() - cached.timestamp < TTL) {
+        setPost(cached.data);
+        return;
+      }
+      const strId = id.toString();
+      if (requestCache.has(strId)) {
+        requestCache.get(strId).then((res) => {
+          if (res) setPost(res);
+        });
+        return;
+      }
+      const promise = qetaApi.getPost(id).then((res) => {
+        if (res) {
+          cache.set(strId, { data: res, timestamp: Date.now() });
+          return res;
+        }
+        return void 0;
+      });
+      requestCache.set(strId, promise);
+      promise.then((res) => {
+        if (res) setPost(res);
+        requestCache.delete(strId);
+      });
+    }
+  }, [propsPost, id, qetaApi]);
+  const { name, initials, user } = useUserInfo(
+    post?.author ?? "",
+    post?.anonymous ?? false
+  );
+  if (!post) {
+    return /* @__PURE__ */ jsx(Grid, { container: true, style: { padding: "0.5em", maxWidth: 300 }, spacing: 1, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 200, height: 24 }),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circle",
+          width: 20,
+          height: 20,
+          style: { display: "inline-block", marginRight: 8 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "text",
+          width: 100,
+          height: 20,
+          style: { display: "inline-block" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "rect",
+          width: 280,
+          height: 80,
+          style: { marginTop: 8 }
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(Grid, { container: true, style: { padding: "0.5em", maxWidth: 300 }, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "subtitle1",
+        style: {
+          fontWeight: 600,
+          marginBottom: "0.5em"
+        },
+        children: post.title
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          marginBottom: "0.5em"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { style: { display: "inline-block", marginRight: "0.5em" }, children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: user?.spec?.profile?.picture,
+              alt: name,
+              variant: "rounded",
+              style: { width: "20px", height: "20px" },
+              children: initials
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { marginRight: "0.5em" }, children: name }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              color: "textSecondary",
+              style: { marginTop: "0.2em" },
+              children: /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: post.created })
+            }
+          )
+        ]
+      }
+    ) }),
+    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: post.tags.map((tag) => `#${tag}`).join(" ") }) }),
+    post.content && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: truncate(removeMarkdownFormatting(post.content), 150) }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        style: { gap: "0.5em" },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              ThumbUpOutlined,
+              {
+                style: { fontSize: "0.875rem", marginRight: "0.25em" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+              post.score,
+              " ",
+              t("common.votes", {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              VisibilityOutlined,
+              {
+                style: { fontSize: "0.875rem", marginRight: "0.25em" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+              post.views,
+              " ",
+              t("common.views", {})
+            ] })
+          ] }),
+          post.type === "question" && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              QuestionAnswerOutlined,
+              {
+                style: { fontSize: "0.875rem", marginRight: "0.25em" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+              post.answersCount,
+              " ",
+              t("common.answers", {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              ChatBubbleOutline,
+              {
+                style: { fontSize: "0.875rem", marginRight: "0.25em" }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+              post.commentsCount,
+              " ",
+              t("common.comments", {})
+            ] })
+          ] }),
+          post.correctAnswer && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", color: "success.main", children: [
+            /* @__PURE__ */ jsx(
+              CheckCircleOutline,
+              {
+                style: { fontSize: "0.875rem", marginRight: "0.25em" }
+              }
+            ),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("questionPage.correctAnswer", {}) })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+};
+const PostTooltip = (props) => {
+  const {
+    post: propsPost,
+    id,
+    interactive = true,
+    children,
+    className,
+    ...tooltipProps
+  } = props;
+  const classes = useTooltipStyles();
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(PostTooltipContent, { post: propsPost, id }),
+      interactive,
+      arrow: true,
+      classes: {
+        tooltip: classes.tooltip,
+        arrow: classes.tooltipArrow,
+        ...props.classes
+      },
+      className,
+      ...tooltipProps,
+      children
+    }
+  );
+};
+
+export { PostTooltip };
+//# sourceMappingURL=PostTooltip.esm.js.map

package/dist/components/Tooltips/PostTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostTooltip.esm.js","sources":["../../../src/components/Tooltips/PostTooltip.tsx"],"sourcesContent":["import {\n  Avatar,\n  Box,\n  Grid,\n  Tooltip,\n  TooltipProps,\n  Typography,\n} from '@material-ui/core';\nimport {\n  Post,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { useUserInfo } from '../../hooks';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport ThumbUpOutlined from '@material-ui/icons/ThumbUpOutlined';\nimport VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';\nimport QuestionAnswerOutlined from '@material-ui/icons/QuestionAnswerOutlined';\nimport ChatBubbleOutline from '@material-ui/icons/ChatBubbleOutline';\nimport CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';\nimport { useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles';\nimport { Skeleton } from '@material-ui/lab';\n\nconst cache: Map<string, { data: Post; timestamp: number }> = new Map();\nconst requestCache: Map<string, Promise<Post | undefined>> = new Map();\nconst TTL = 5 * 60 * 1000;\n\nconst PostTooltipContent = ({\n  post: propsPost,\n  id,\n}: {\n  post?: Post;\n  id?: string | number;\n}) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const qetaApi = useApi(qetaApiRef);\n  const [post, setPost] = useState<Post | undefined>(propsPost);\n\n  useEffect(() => {\n    if (propsPost) {\n      setPost(propsPost);\n      return;\n    }\n\n    if (id) {\n      const cached = cache.get(id.toString());\n      if (cached && Date.now() - cached.timestamp < TTL) {\n        setPost(cached.data);\n        return;\n      }\n\n      const strId = id.toString();\n      if (requestCache.has(strId)) {\n        requestCache.get(strId)!.then(res => {\n          if (res) setPost(res);\n        });\n        return;\n      }\n\n      const promise = qetaApi.getPost(id).then(res => {\n        if (res) {\n          cache.set(strId, { data: res, timestamp: Date.now() });\n          return res;\n        }\n        return undefined;\n      });\n\n      requestCache.set(strId, promise);\n      promise.then(res => {\n        if (res) setPost(res);\n        requestCache.delete(strId);\n      });\n    }\n  }, [propsPost, id, qetaApi]);\n\n  const { name, initials, user } = useUserInfo(\n    post?.author ?? '',\n    post?.anonymous ?? false,\n  );\n\n  if (!post) {\n    return (\n      <Grid container style={{ padding: '0.5em', maxWidth: 300 }} spacing={1}>\n        <Grid item xs={12}>\n          <Skeleton variant=\"text\" width={200} height={24} />\n          <Skeleton\n            variant=\"circle\"\n            width={20}\n            height={20}\n            style={{ display: 'inline-block', marginRight: 8 }}\n          />\n          <Skeleton\n            variant=\"text\"\n            width={100}\n            height={20}\n            style={{ display: 'inline-block' }}\n          />\n          <Skeleton\n            variant=\"rect\"\n            width={280}\n            height={80}\n            style={{ marginTop: 8 }}\n          />\n        </Grid>\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5em', maxWidth: 300 }} spacing={1}>\n      <Grid item xs={12}>\n        <Typography\n          variant=\"subtitle1\"\n          style={{\n            fontWeight: 600,\n            marginBottom: '0.5em',\n          }}\n        >\n          {post.title}\n        </Typography>\n      </Grid>\n\n      <Grid item xs={12}>\n        <Box\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            marginBottom: '0.5em',\n          }}\n        >\n          <Box style={{ display: 'inline-block', marginRight: '0.5em' }}>\n            <Avatar\n              src={user?.spec?.profile?.picture}\n              alt={name}\n              variant=\"rounded\"\n              style={{ width: '20px', height: '20px' }}\n            >\n              {initials}\n            </Avatar>\n          </Box>\n          <Typography variant=\"body2\" style={{ marginRight: '0.5em' }}>\n            {name}\n          </Typography>\n          <Typography\n            variant=\"caption\"\n            color=\"textSecondary\"\n            style={{ marginTop: '0.2em' }}\n          >\n            <RelativeTimeWithTooltip value={post.created} />\n          </Typography>\n        </Box>\n      </Grid>\n\n      {post.tags && post.tags.length > 0 && (\n        <Grid item xs={12}>\n          <Typography variant=\"caption\" color=\"textSecondary\">\n            {post.tags.map(tag => `#${tag}`).join(' ')}\n          </Typography>\n        </Grid>\n      )}\n\n      {post.content && (\n        <Grid item xs={12}>\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            {truncate(removeMarkdownFormatting(post.content), 150)}\n          </Typography>\n        </Grid>\n      )}\n\n      <Grid item xs={12}>\n        <Box\n          display=\"flex\"\n          alignItems=\"center\"\n          flexWrap=\"wrap\"\n          style={{ gap: '0.5em' }}\n        >\n          <Box display=\"flex\" alignItems=\"center\">\n            <ThumbUpOutlined\n              style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n            />\n            <Typography variant=\"caption\">\n              {post.score} {t('common.votes', {})}\n            </Typography>\n          </Box>\n\n          <Box display=\"flex\" alignItems=\"center\">\n            <VisibilityOutlined\n              style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n            />\n            <Typography variant=\"caption\">\n              {post.views} {t('common.views', {})}\n            </Typography>\n          </Box>\n\n          {post.type === 'question' && (\n            <Box display=\"flex\" alignItems=\"center\">\n              <QuestionAnswerOutlined\n                style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n              />\n              <Typography variant=\"caption\">\n                {post.answersCount} {t('common.answers', {})}\n              </Typography>\n            </Box>\n          )}\n\n          <Box display=\"flex\" alignItems=\"center\">\n            <ChatBubbleOutline\n              style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n            />\n            <Typography variant=\"caption\">\n              {post.commentsCount} {t('common.comments', {})}\n            </Typography>\n          </Box>\n\n          {post.correctAnswer && (\n            <Box display=\"flex\" alignItems=\"center\" color=\"success.main\">\n              <CheckCircleOutline\n                style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n              />\n              <Typography variant=\"caption\">\n                {t('questionPage.correctAnswer', {})}\n              </Typography>\n            </Box>\n          )}\n        </Box>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const PostTooltip = (\n  props: {\n    post?: Post;\n    id?: string | number;\n    interactive?: boolean;\n  } & Omit<TooltipProps, 'title'>,\n) => {\n  const {\n    post: propsPost,\n    id,\n    interactive = true,\n    children,\n    className,\n    ...tooltipProps\n  } = props;\n  const classes = useTooltipStyles();\n\n  return (\n    <Tooltip\n      title={<PostTooltipContent post={propsPost} id={id} />}\n      interactive={interactive}\n      arrow\n      classes={{\n        tooltip: classes.tooltip,\n        arrow: classes.tooltipArrow,\n        ...props.classes,\n      }}\n      className={className}\n      {...tooltipProps}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltips/TagTooltip.esm.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
+import 'react-use';
+import '@backstage/plugin-signals-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
+import '../../hooks/useListItemStyles.esm.js';
+import { useTagsFollow } from '../../hooks/useTagsFollow.esm.js';
+import '@backstage/catalog-model';
+import 'dataloader';
+import '@backstage/plugin-catalog-react';
+import 'react-use/lib/useAsync';
+import '@backstage/plugin-permission-react';
+import '@drodil/backstage-plugin-qeta-common';
+import '@backstage/plugin-permission-common';
+import { Tooltip, Grid, Box, Typography, Button } from '@material-ui/core';
+import 'react-router-dom';
+import 'react-use/lib/useDebounce';
+import '../FilterPanel/FilterPanel.esm.js';
+import '../QetaContext/QetaContext.esm.js';
+import { Skeleton } from '@material-ui/lab';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import Visibility from '@material-ui/icons/Visibility';
+import LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import DescriptionOutlined from '@material-ui/icons/DescriptionOutlined';
+import PeopleAltOutlined from '@material-ui/icons/PeopleAltOutlined';
+import { useTooltipStyles } from '../../hooks/useTooltipStyles.esm.js';
+
+const cache = /* @__PURE__ */ new Map();
+const requestCache = /* @__PURE__ */ new Map();
+const TTL = 5 * 60 * 1e3;
+const TagTooltipContent = ({
+  tag,
+  interactive
+}) => {
+  const qetaApi = useApi(qetaApiRef);
+  const { t } = useTranslationRef(qetaTranslationRef);
+  const tags = useTagsFollow();
+  const [resp, setResp] = useState();
+  useEffect(() => {
+    const cached = cache.get(tag);
+    if (cached && Date.now() - cached.timestamp < TTL) {
+      setResp(cached.data);
+      return;
+    }
+    if (requestCache.has(tag)) {
+      requestCache.get(tag).then((res) => {
+        if (res) setResp(res);
+      });
+      return;
+    }
+    const promise = qetaApi.getTag(tag).then((res) => {
+      if (res) {
+        cache.set(tag, { data: res, timestamp: Date.now() });
+      } else {
+        const notFound = {
+          id: 0,
+          tag,
+          postsCount: 0,
+          questionsCount: 0,
+          articlesCount: 0,
+          linksCount: 0,
+          followerCount: 0,
+          description: t("tagChip.nonExistingTag")
+        };
+        cache.set(tag, { data: notFound, timestamp: Date.now() });
+        return notFound;
+      }
+      return res;
+    });
+    requestCache.set(tag, promise);
+    promise.then((res) => {
+      setResp(res);
+      requestCache.delete(tag);
+    });
+  }, [qetaApi, tag, t]);
+  if (!resp) {
+    return /* @__PURE__ */ jsx(Grid, { container: true, style: { padding: "0.5em", maxWidth: 300 }, spacing: 1, children: /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 100, height: 24 }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 200, height: 20 }),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "rect",
+          width: 280,
+          height: 100,
+          style: { marginTop: 8 }
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(Grid, { container: true, style: { padding: "0.5em", maxWidth: 300 }, spacing: 1, children: [
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(LoyaltyOutlined, { fontSize: "small", style: { marginRight: "5px" } }),
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "subtitle1",
+          style: {
+            textOverflow: "ellipsis",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            fontWeight: 600
+          },
+          children: tag
+        }
+      )
+    ] }) }),
+    resp.id > 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { display: "flex", flexWrap: "wrap", style: { gap: "1em" }, children: [
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          HelpOutline,
+          {
+            style: { fontSize: "0.875rem", marginRight: "0.25em" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+          resp.questionsCount,
+          " ",
+          t("common.questions")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          DescriptionOutlined,
+          {
+            style: { fontSize: "0.875rem", marginRight: "0.25em" }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+          resp.articlesCount,
+          " ",
+          t("common.articles")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          PeopleAltOutlined,
+          {
+            style: { fontSize: "0.875rem", marginRight: "0.25em" }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", children: t("common.followers", { count: resp.followerCount }) })
+      ] })
+    ] }) }),
+    resp.description && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: resp.description }) }),
+    interactive && !tags.loading && resp.id !== 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        color: tags.isFollowingTag(tag) ? "secondary" : "primary",
+        fullWidth: true,
+        onClick: () => {
+          if (tags.isFollowingTag(tag)) {
+            tags.unfollowTag(tag);
+          } else {
+            tags.followTag(tag);
+          }
+        },
+        startIcon: tags.isFollowingTag(tag) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
+        children: tags.isFollowingTag(tag) ? t("tagButton.unfollow") : t("tagButton.follow")
+      }
+    ) })
+  ] });
+};
+const TagTooltip = (props) => {
+  const {
+    tag,
+    interactive = true,
+    children,
+    className,
+    ...tooltipProps
+  } = props;
+  const classes = useTooltipStyles();
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(TagTooltipContent, { tag, interactive }),
+      interactive,
+      arrow: true,
+      classes: {
+        tooltip: classes.tooltip,
+        arrow: classes.tooltipArrow,
+        ...props.classes
+      },
+      className,
+      ...tooltipProps,
+      children
+    }
+  );
+};
+
+export { TagTooltip };
+//# sourceMappingURL=TagTooltip.esm.js.map

package/dist/components/Tooltips/TagTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagTooltip.esm.js","sources":["../../../src/components/Tooltips/TagTooltip.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer';\nimport { useTagsFollow } from '../../hooks';\nimport {\n  Box,\n  Button,\n  Grid,\n  Tooltip,\n  TooltipProps,\n  Typography,\n} from '@material-ui/core';\nimport { Skeleton } from '@material-ui/lab';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport LoyaltyOutlined from '@material-ui/icons/LoyaltyOutlined';\nimport HelpOutline from '@material-ui/icons/HelpOutline';\nimport DescriptionOutlined from '@material-ui/icons/DescriptionOutlined';\nimport PeopleAltOutlined from '@material-ui/icons/PeopleAltOutlined';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation';\nimport { useTooltipStyles } from '../../hooks/useTooltipStyles';\n\nconst cache: Map<string, { data: TagResponse; timestamp: number }> = new Map();\nconst requestCache: Map<string, Promise<TagResponse | undefined>> = new Map();\nconst TTL = 5 * 60 * 1000; // 5 minutes\n\nconst TagTooltipContent = ({\n  tag,\n  interactive,\n}: {\n  tag: string;\n  interactive: boolean;\n}) => {\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const tags = useTagsFollow();\n  const [resp, setResp] = useState<undefined | TagResponse>();\n\n  useEffect(() => {\n    const cached = cache.get(tag);\n    if (cached && Date.now() - cached.timestamp < TTL) {\n      setResp(cached.data);\n      return;\n    }\n\n    if (requestCache.has(tag)) {\n      requestCache.get(tag)!.then(res => {\n        if (res) setResp(res);\n      });\n      return;\n    }\n\n    const promise = qetaApi.getTag(tag).then(res => {\n      if (res) {\n        cache.set(tag, { data: res, timestamp: Date.now() });\n      } else {\n        const notFound: TagResponse = {\n          id: 0,\n          tag,\n          postsCount: 0,\n          questionsCount: 0,\n          articlesCount: 0,\n          linksCount: 0,\n          followerCount: 0,\n          description: t('tagChip.nonExistingTag'),\n        };\n        cache.set(tag, { data: notFound, timestamp: Date.now() });\n        return notFound;\n      }\n      return res;\n    });\n\n    requestCache.set(tag, promise);\n    promise.then(res => {\n      setResp(res);\n      requestCache.delete(tag);\n    });\n  }, [qetaApi, tag, t]);\n\n  if (!resp) {\n    return (\n      <Grid container style={{ padding: '0.5em', maxWidth: 300 }} spacing={1}>\n        <Grid item xs={12}>\n          <Skeleton variant=\"text\" width={100} height={24} />\n          <Skeleton variant=\"text\" width={200} height={20} />\n          <Skeleton\n            variant=\"rect\"\n            width={280}\n            height={100}\n            style={{ marginTop: 8 }}\n          />\n        </Grid>\n      </Grid>\n    );\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5em', maxWidth: 300 }} spacing={1}>\n      <Grid item xs={12}>\n        <Box style={{ display: 'flex', alignItems: 'center' }}>\n          <LoyaltyOutlined fontSize=\"small\" style={{ marginRight: '5px' }} />\n          <Typography\n            variant=\"subtitle1\"\n            style={{\n              textOverflow: 'ellipsis',\n              overflow: 'hidden',\n              whiteSpace: 'nowrap',\n              fontWeight: 600,\n            }}\n          >\n            {tag}\n          </Typography>\n        </Box>\n      </Grid>\n      {resp.id > 0 && (\n        <Grid item xs={12}>\n          <Box display=\"flex\" flexWrap=\"wrap\" style={{ gap: '1em' }}>\n            <Box display=\"flex\" alignItems=\"center\">\n              <HelpOutline\n                style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n              />\n              <Typography variant=\"caption\">\n                {resp.questionsCount} {t('common.questions')}\n              </Typography>\n            </Box>\n            <Box display=\"flex\" alignItems=\"center\">\n              <DescriptionOutlined\n                style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n              />\n              <Typography variant=\"caption\">\n                {resp.articlesCount} {t('common.articles')}\n              </Typography>\n            </Box>\n            <Box display=\"flex\" alignItems=\"center\">\n              <PeopleAltOutlined\n                style={{ fontSize: '0.875rem', marginRight: '0.25em' }}\n              />\n              <Typography variant=\"caption\">\n                {t('common.followers', { count: resp.followerCount })}\n              </Typography>\n            </Box>\n          </Box>\n        </Grid>\n      )}\n      {resp.description && (\n        <Grid item xs={12}>\n          <MarkdownRenderer content={resp.description} />\n        </Grid>\n      )}\n      {interactive && !tags.loading && resp.id !== 0 && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n            fullWidth\n            onClick={() => {\n              if (tags.isFollowingTag(tag)) {\n                tags.unfollowTag(tag);\n              } else {\n                tags.followTag(tag);\n              }\n            }}\n            startIcon={\n              tags.isFollowingTag(tag) ? <VisibilityOff /> : <Visibility />\n            }\n          >\n            {tags.isFollowingTag(tag)\n              ? t('tagButton.unfollow')\n              : t('tagButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const TagTooltip = (\n  props: { tag: string; interactive?: boolean } & Omit<TooltipProps, 'title'>,\n) => {\n  const {\n    tag,\n    interactive = true,\n    children,\n    className,\n    ...tooltipProps\n  } = props;\n  const classes = useTooltipStyles();\n\n  return (\n    <Tooltip\n      title={<TagTooltipContent tag={tag} interactive={interactive} />}\n      interactive={interactive}\n      arrow\n      classes={{\n        tooltip: classes.tooltip,\n        arrow: classes.tooltipArrow,\n        ...props.classes,\n      }}\n      className={className}\n      {...tooltipProps}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}