@drodil/backstage-plugin-qeta 3.60.0 → 4.0.0

package/dist/components/UserPage/UserPage.esm.js

@@ -1,51 +1,20 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { useUserInfo, qetaTranslationRef, useQetaConfig, useIdentityApi, useQetaApi, RelativeTimeWithTooltip, ContentHeader, UserFollowButton, AskQuestionButton, WriteArticleButton, CreateLinkButton, PostsContainer, CollectionsContainer, AnswersContainer } from '@drodil/backstage-plugin-qeta-react';
+import { useUserInfo, qetaTranslationRef, useQetaConfig, useIdentityApi, useQetaApi, UserFollowButton, RelativeTimeWithTooltip, PostsContainer, CollectionsContainer, AnswersContainer } from '@drodil/backstage-plugin-qeta-react';
 import { UserStatsContent } from './UserStatsContent.esm.js';
-import { TabContext, TabList, TabPanel } from '@material-ui/lab';
-import { Box, Avatar, Typography, Tab, makeStyles } from '@material-ui/core';
+import { Tab, Header, Tabs, TabList, TabPanel, Flex } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import AssessmentIcon from '@material-ui/icons/Assessment';
-import HelpOutline from '@material-ui/icons/HelpOutline';
-import CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';
-import CollectionsIcon from '@material-ui/icons/Collections';
-import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
-import LinkIcon from '@material-ui/icons/Link';
+import { RiBarChartLine, RiQuestionLine, RiBookmarkLine, RiLink, RiStackLine, RiQuestionAnswerLine } from '@remixicon/react';
+import styles from './UserPage.module.css.esm.js';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
 
-const useStyles = makeStyles((theme) => ({
-  tabIcon: {
-    marginRight: theme.spacing(1)
-  },
-  tabPanel: {
-    padding: theme.spacing(3, 0)
-  },
-  avatar: {
-    width: theme.spacing(12),
-    height: theme.spacing(12),
-    marginRight: theme.spacing(3),
-    boxShadow: theme.shadows[2]
-  },
-  headerContent: {
-    display: "flex",
-    alignItems: "center",
-    padding: theme.spacing(3, 0)
-  },
-  tabList: {},
-  tabLabel: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    minWidth: 0
-  }
-}));
 const UserPage = () => {
   const identity = useParams()["*"] ?? "unknown";
-  const { name, initials, user, secondaryTitle } = useUserInfo(identity);
+  const { name, user, secondaryTitle } = useUserInfo(identity);
   const [tab, setTab] = useState("statistics");
   const { t } = useTranslationRef(qetaTranslationRef);
   const [_searchParams, setSearchParams] = useSearchParams();
-  const classes = useStyles();
   const { disabled } = useQetaConfig();
   const {
     value: currentUser,
@@ -56,7 +25,7 @@ const UserPage = () => {
     (api) => api.getUserStats(identity),
     [identity]
   );
-  const handleChange = (_event, newValue) => {
+  const handleChange = (newValue) => {
     setSearchParams({});
     setTab(newValue);
   };
@@ -75,215 +44,147 @@ const UserPage = () => {
       setTab(availableTabs[0]);
     }
   }, [availableTabs, tab]);
-  const TabLabel = ({
-    icon,
-    label
-  }) => /* @__PURE__ */ jsxs("div", { className: classes.tabLabel, children: [
+  const TabLabel = ({ icon, label }) => /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", className: styles.tabLabel, children: [
     icon,
     /* @__PURE__ */ jsx("span", { children: label })
   ] });
-  const title = /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: classes.headerContent,
-      role: "banner",
-      "aria-label": t("userPage.profileHeader", {}),
-      children: [
-        /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            src: user?.spec?.profile?.picture,
-            alt: name,
-            variant: "rounded",
-            className: classes.avatar,
-            "aria-label": t("userPage.profilePicture", { name }),
-            children: initials
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", children: [
-          /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", children: /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "h4",
-              component: "h2",
-              id: "user-name",
-              style: { fontWeight: 700 },
-              children: name
-            }
-          ) }),
-          (secondaryTitle || user?.spec?.profile?.email) && /* @__PURE__ */ jsx(Typography, { variant: "h6", color: "textSecondary", children: secondaryTitle || user?.spec?.profile?.email }),
-          userStats?.summary?.lastSeen && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
-            t("stats.lastSeen"),
-            ":",
-            " ",
-            /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: userStats.summary.lastSeen })
-          ] })
-        ] })
-      ]
-    }
-  );
   const tabItems = [
-    /* @__PURE__ */ jsx(
-      Tab,
+    /* @__PURE__ */ jsx(Tab, { id: "statistics", children: /* @__PURE__ */ jsx(
+      TabLabel,
       {
-        value: "statistics",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
-          {
-            icon: /* @__PURE__ */ jsx(AssessmentIcon, { className: classes.tabIcon }),
-            label: t("userPage.statistics", {})
-          }
-        )
-      },
-      "statistics"
-    ),
-    !disabled.questions ? /* @__PURE__ */ jsx(
-      Tab,
+        icon: /* @__PURE__ */ jsx(RiBarChartLine, { size: 16 }),
+        label: t("userPage.statistics", {})
+      }
+    ) }, "statistics"),
+    !disabled.questions ? /* @__PURE__ */ jsx(Tab, { id: "questions", children: /* @__PURE__ */ jsx(
+      TabLabel,
       {
-        value: "questions",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
-          {
-            icon: /* @__PURE__ */ jsx(HelpOutline, { className: classes.tabIcon }),
-            label: t("userPage.questions", {})
-          }
-        )
-      },
-      "questions"
-    ) : null,
-    !disabled.articles ? /* @__PURE__ */ jsx(
-      Tab,
+        icon: /* @__PURE__ */ jsx(RiQuestionLine, { size: 16 }),
+        label: t("userPage.questions", {})
+      }
+    ) }, "questions") : null,
+    !disabled.articles ? /* @__PURE__ */ jsx(Tab, { id: "articles", children: /* @__PURE__ */ jsx(
+      TabLabel,
       {
-        value: "articles",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
-          {
-            icon: /* @__PURE__ */ jsx(CollectionsBookmarkIcon, { className: classes.tabIcon }),
-            label: t("userPage.articles", {})
-          }
-        )
-      },
-      "articles"
-    ) : null,
-    !disabled.links ? /* @__PURE__ */ jsx(
-      Tab,
+        icon: /* @__PURE__ */ jsx(RiBookmarkLine, { size: 16 }),
+        label: t("userPage.articles", {})
+      }
+    ) }, "articles") : null,
+    !disabled.links ? /* @__PURE__ */ jsx(Tab, { id: "links", children: /* @__PURE__ */ jsx(TabLabel, { icon: /* @__PURE__ */ jsx(RiLink, { size: 16 }), label: t("userPage.links", {}) }) }, "links") : null,
+    !disabled.collections ? /* @__PURE__ */ jsx(Tab, { id: "collections", children: /* @__PURE__ */ jsx(
+      TabLabel,
       {
-        value: "links",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
-          {
-            icon: /* @__PURE__ */ jsx(LinkIcon, { className: classes.tabIcon }),
-            label: t("userPage.links", {})
-          }
-        )
-      },
-      "links"
-    ) : null,
-    !disabled.collections ? /* @__PURE__ */ jsx(
-      Tab,
+        icon: /* @__PURE__ */ jsx(RiStackLine, { size: 16 }),
+        label: t("userPage.collections", {})
+      }
+    ) }, "collections") : null,
+    !disabled.questions ? /* @__PURE__ */ jsx(Tab, { id: "answers", children: /* @__PURE__ */ jsx(
+      TabLabel,
       {
-        value: "collections",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
-          {
-            icon: /* @__PURE__ */ jsx(CollectionsIcon, { className: classes.tabIcon }),
-            label: t("userPage.collections", {})
-          }
-        )
-      },
-      "collections"
-    ) : null,
-    !disabled.questions ? /* @__PURE__ */ jsx(
-      Tab,
+        icon: /* @__PURE__ */ jsx(RiQuestionAnswerLine, { size: 16 }),
+        label: t("userPage.answers", {})
+      }
+    ) }, "answers") : null
+  ].filter((item) => item !== null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Header,
       {
-        value: "answers",
-        label: /* @__PURE__ */ jsx(
-          TabLabel,
+        title: name,
+        metadata: [
+          ...secondaryTitle || user?.spec?.profile?.email ? [
+            {
+              label: t("userPage.profileHeader", {}),
+              value: /* @__PURE__ */ jsx(EntityRefLink, { entityRef: identity, children: secondaryTitle || user?.spec?.profile?.email })
+            }
+          ] : [],
+          ...userStats?.summary?.lastSeen ? [
+            {
+              label: t("stats.lastSeen"),
+              value: /* @__PURE__ */ jsx(
+                RelativeTimeWithTooltip,
+                {
+                  value: userStats.summary.lastSeen
+                }
+              )
+            }
+          ] : [],
+          ...userStats?.summary?.totalFollowers ? [
+            {
+              label: t("metadata.followers"),
+              value: userStats.summary.totalFollowers
+            }
+          ] : []
+        ],
+        customActions: /* @__PURE__ */ jsx(Fragment, { children: !loadingUser && !userError && currentUser?.userEntityRef !== identity && /* @__PURE__ */ jsx(
+          UserFollowButton,
           {
-            icon: /* @__PURE__ */ jsx(QuestionAnswerIcon, { className: classes.tabIcon }),
-            label: t("userPage.answers", {})
+            userRef: identity,
+            "aria-label": t("userPage.followUser", { name })
           }
-        )
-      },
-      "answers"
-    ) : null
-  ].filter((item) => item !== null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(ContentHeader, { titleComponent: title, children: [
-      !loadingUser && !userError && currentUser?.userEntityRef !== identity && /* @__PURE__ */ jsx(
-        UserFollowButton,
-        {
-          userRef: identity,
-          "aria-label": t("userPage.followUser", { name })
-        }
-      ),
-      /* @__PURE__ */ jsx(AskQuestionButton, {}),
-      /* @__PURE__ */ jsx(WriteArticleButton, {}),
-      /* @__PURE__ */ jsx(CreateLinkButton, {})
-    ] }),
-    /* @__PURE__ */ jsxs(TabContext, { value: tab, children: [
-      /* @__PURE__ */ jsx(Box, { className: classes.tabList, children: /* @__PURE__ */ jsx(
-        TabList,
-        {
-          onChange: handleChange,
-          "aria-label": t("userPage.profileTab", {}),
-          "aria-labelledby": "user-name",
-          variant: "scrollable",
-          scrollButtons: "auto",
-          children: tabItems
-        }
-      ) }),
-      /* @__PURE__ */ jsx(TabPanel, { value: "statistics", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        UserStatsContent,
-        {
-          userRef: identity ?? "",
-          stats: userStats,
-          loading: loadingUserStats
-        }
-      ) }),
-      !disabled.questions && /* @__PURE__ */ jsx(TabPanel, { value: "questions", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        PostsContainer,
-        {
-          author: identity ?? "",
-          showNoQuestionsBtn: false,
-          type: "question",
-          prefix: "user-questions"
-        }
-      ) }),
-      !disabled.articles && /* @__PURE__ */ jsx(TabPanel, { value: "articles", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        PostsContainer,
-        {
-          author: identity ?? "",
-          type: "article",
-          showNoQuestionsBtn: false,
-          prefix: "user-articles"
-        }
-      ) }),
-      !disabled.links && /* @__PURE__ */ jsx(TabPanel, { value: "links", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        PostsContainer,
-        {
-          author: identity ?? "",
-          type: "link",
-          showNoQuestionsBtn: false,
-          prefix: "user-links"
-        }
-      ) }),
-      !disabled.collections && /* @__PURE__ */ jsx(TabPanel, { value: "collections", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        CollectionsContainer,
-        {
-          owner: identity ?? "",
-          prefix: "user-collections"
-        }
-      ) }),
-      !disabled.questions && /* @__PURE__ */ jsx(TabPanel, { value: "answers", className: classes.tabPanel, children: /* @__PURE__ */ jsx(
-        AnswersContainer,
-        {
-          author: identity ?? "",
-          title: t("userPage.answers", {}),
-          prefix: "user-answers"
-        }
-      ) })
-    ] })
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        selectedKey: tab,
+        onSelectionChange: (key) => handleChange(key),
+        children: [
+          /* @__PURE__ */ jsx(TabList, { "aria-label": t("userPage.profileTab", {}), children: tabItems }),
+          /* @__PURE__ */ jsx(TabPanel, { id: "statistics", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            UserStatsContent,
+            {
+              userRef: identity ?? "",
+              stats: userStats,
+              loading: loadingUserStats
+            }
+          ) }),
+          !disabled.questions && /* @__PURE__ */ jsx(TabPanel, { id: "questions", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            PostsContainer,
+            {
+              author: identity ?? "",
+              showNoQuestionsBtn: false,
+              type: "question",
+              prefix: "user-questions"
+            }
+          ) }),
+          !disabled.articles && /* @__PURE__ */ jsx(TabPanel, { id: "articles", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            PostsContainer,
+            {
+              author: identity ?? "",
+              type: "article",
+              showNoQuestionsBtn: false,
+              prefix: "user-articles"
+            }
+          ) }),
+          !disabled.links && /* @__PURE__ */ jsx(TabPanel, { id: "links", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            PostsContainer,
+            {
+              author: identity ?? "",
+              type: "link",
+              showNoQuestionsBtn: false,
+              prefix: "user-links"
+            }
+          ) }),
+          !disabled.collections && /* @__PURE__ */ jsx(TabPanel, { id: "collections", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            CollectionsContainer,
+            {
+              owner: identity ?? "",
+              prefix: "user-collections"
+            }
+          ) }),
+          !disabled.questions && /* @__PURE__ */ jsx(TabPanel, { id: "answers", className: styles.tabPanel, children: /* @__PURE__ */ jsx(
+            AnswersContainer,
+            {
+              author: identity ?? "",
+              title: t("userPage.answers", {}),
+              prefix: "user-answers"
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"UserPage.esm.js","sources":["../../../src/components/UserPage/UserPage.tsx"],"sourcesContent":["import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport {\n  AnswersContainer,\n  AskQuestionButton,\n  CollectionsContainer,\n  ContentHeader,\n  CreateLinkButton,\n  PostsContainer,\n  qetaTranslationRef,\n  useIdentityApi,\n  UserFollowButton,\n  useUserInfo,\n  WriteArticleButton,\n  useQetaApi,\n  RelativeTimeWithTooltip,\n  useQetaConfig,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { UserStatsContent } from './UserStatsContent';\nimport { TabContext, TabList, TabPanel } from '@material-ui/lab';\nimport { Avatar, Box, makeStyles, Tab, Typography } from '@material-ui/core';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport AssessmentIcon from '@material-ui/icons/Assessment';\nimport HelpOutlineIcon from '@material-ui/icons/HelpOutline';\nimport CollectionsBookmarkIcon from '@material-ui/icons/CollectionsBookmark';\nimport CollectionsIcon from '@material-ui/icons/Collections';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport LinkIcon from '@material-ui/icons/Link';\n\nconst useStyles = makeStyles(theme => ({\n  tabIcon: {\n    marginRight: theme.spacing(1),\n  },\n  tabPanel: {\n    padding: theme.spacing(3, 0),\n  },\n  avatar: {\n    width: theme.spacing(12),\n    height: theme.spacing(12),\n    marginRight: theme.spacing(3),\n    boxShadow: theme.shadows[2],\n  },\n  headerContent: {\n    display: 'flex',\n    alignItems: 'center',\n    padding: theme.spacing(3, 0),\n  },\n  tabList: {},\n  tabLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    minWidth: 0,\n  },\n}));\n\nexport const UserPage = () => {\n  const identity = useParams()['*'] ?? 'unknown';\n  const { name, initials, user, secondaryTitle } = useUserInfo(identity);\n  const [tab, setTab] = useState('statistics');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [_searchParams, setSearchParams] = useSearchParams();\n  const classes = useStyles();\n  const { disabled } = useQetaConfig();\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n  const { value: userStats, loading: loadingUserStats } = useQetaApi(\n    api => api.getUserStats(identity),\n    [identity],\n  );\n\n  const handleChange = (_event: ChangeEvent<{}>, newValue: string) => {\n    setSearchParams({});\n    setTab(newValue);\n  };\n\n  const availableTabs = useMemo(() => {\n    return [\n      'statistics',\n      !disabled.questions ? 'questions' : null,\n      !disabled.articles ? 'articles' : null,\n      !disabled.links ? 'links' : null,\n      !disabled.collections ? 'collections' : null,\n      !disabled.questions ? 'answers' : null,\n    ].filter((v): v is string => Boolean(v));\n  }, [disabled]);\n\n  useEffect(() => {\n    if (!availableTabs.includes(tab)) {\n      setTab(availableTabs[0]);\n    }\n  }, [availableTabs, tab]);\n\n  const TabLabel = ({\n    icon,\n    label,\n  }: {\n    icon: React.ReactNode;\n    label: string;\n  }) => (\n    <div className={classes.tabLabel}>\n      {icon}\n      <span>{label}</span>\n    </div>\n  );\n\n  const title = (\n    <Box\n      className={classes.headerContent}\n      role=\"banner\"\n      aria-label={t('userPage.profileHeader', {})}\n    >\n      <Avatar\n        src={user?.spec?.profile?.picture}\n        alt={name}\n        variant=\"rounded\"\n        className={classes.avatar}\n        aria-label={t('userPage.profilePicture', { name })}\n      >\n        {initials}\n      </Avatar>\n      <Box display=\"flex\" flexDirection=\"column\" justifyContent=\"center\">\n        <Box display=\"flex\" alignItems=\"center\">\n          <Typography\n            variant=\"h4\"\n            component=\"h2\"\n            id=\"user-name\"\n            style={{ fontWeight: 700 }}\n          >\n            {name}\n          </Typography>\n        </Box>\n        {(secondaryTitle || user?.spec?.profile?.email) && (\n          <Typography variant=\"h6\" color=\"textSecondary\">\n            {secondaryTitle || user?.spec?.profile?.email}\n          </Typography>\n        )}\n        {userStats?.summary?.lastSeen && (\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            {t('stats.lastSeen')}:{' '}\n            <RelativeTimeWithTooltip value={userStats.summary.lastSeen} />\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  );\n\n  const tabItems = [\n    <Tab\n      key=\"statistics\"\n      value=\"statistics\"\n      label={\n        <TabLabel\n          icon={<AssessmentIcon className={classes.tabIcon} />}\n          label={t('userPage.statistics', {})}\n        />\n      }\n    />,\n    !disabled.questions ? (\n      <Tab\n        key=\"questions\"\n        value=\"questions\"\n        label={\n          <TabLabel\n            icon={<HelpOutlineIcon className={classes.tabIcon} />}\n            label={t('userPage.questions', {})}\n          />\n        }\n      />\n    ) : null,\n    !disabled.articles ? (\n      <Tab\n        key=\"articles\"\n        value=\"articles\"\n        label={\n          <TabLabel\n            icon={<CollectionsBookmarkIcon className={classes.tabIcon} />}\n            label={t('userPage.articles', {})}\n          />\n        }\n      />\n    ) : null,\n    !disabled.links ? (\n      <Tab\n        key=\"links\"\n        value=\"links\"\n        label={\n          <TabLabel\n            icon={<LinkIcon className={classes.tabIcon} />}\n            label={t('userPage.links', {})}\n          />\n        }\n      />\n    ) : null,\n    !disabled.collections ? (\n      <Tab\n        key=\"collections\"\n        value=\"collections\"\n        label={\n          <TabLabel\n            icon={<CollectionsIcon className={classes.tabIcon} />}\n            label={t('userPage.collections', {})}\n          />\n        }\n      />\n    ) : null,\n    !disabled.questions ? (\n      <Tab\n        key=\"answers\"\n        value=\"answers\"\n        label={\n          <TabLabel\n            icon={<QuestionAnswerIcon className={classes.tabIcon} />}\n            label={t('userPage.answers', {})}\n          />\n        }\n      />\n    ) : null,\n  ].filter((item): item is React.ReactElement => item !== null);\n\n  return (\n    <>\n      <ContentHeader titleComponent={title}>\n        {!loadingUser &&\n          !userError &&\n          currentUser?.userEntityRef !== identity && (\n            <UserFollowButton\n              userRef={identity}\n              aria-label={t('userPage.followUser', { name })}\n            />\n          )}\n        <AskQuestionButton />\n        <WriteArticleButton />\n        <CreateLinkButton />\n      </ContentHeader>\n      <TabContext value={tab}>\n        <Box className={classes.tabList}>\n          <TabList\n            onChange={handleChange}\n            aria-label={t('userPage.profileTab', {})}\n            aria-labelledby=\"user-name\"\n            variant=\"scrollable\"\n            scrollButtons=\"auto\"\n          >\n            {tabItems}\n          </TabList>\n        </Box>\n        <TabPanel value=\"statistics\" className={classes.tabPanel}>\n          <UserStatsContent\n            userRef={identity ?? ''}\n            stats={userStats}\n            loading={loadingUserStats}\n          />\n        </TabPanel>\n        {!disabled.questions && (\n          <TabPanel value=\"questions\" className={classes.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              showNoQuestionsBtn={false}\n              type=\"question\"\n              prefix=\"user-questions\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.articles && (\n          <TabPanel value=\"articles\" className={classes.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              type=\"article\"\n              showNoQuestionsBtn={false}\n              prefix=\"user-articles\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.links && (\n          <TabPanel value=\"links\" className={classes.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              type=\"link\"\n              showNoQuestionsBtn={false}\n              prefix=\"user-links\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.collections && (\n          <TabPanel value=\"collections\" className={classes.tabPanel}>\n            <CollectionsContainer\n              owner={identity ?? ''}\n              prefix=\"user-collections\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.questions && (\n          <TabPanel value=\"answers\" className={classes.tabPanel}>\n            <AnswersContainer\n              author={identity ?? ''}\n              title={t('userPage.answers', {})}\n              prefix=\"user-answers\"\n            />\n          </TabPanel>\n        )}\n      </TabContext>\n    </>\n  );\n};\n"],"names":["HelpOutlineIcon"],"mappings":"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"}
+{"version":3,"file":"UserPage.esm.js","sources":["../../../src/components/UserPage/UserPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode, useEffect, useMemo, useState } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport {\n  AnswersContainer,\n  CollectionsContainer,\n  PostsContainer,\n  qetaTranslationRef,\n  RelativeTimeWithTooltip,\n  useIdentityApi,\n  useQetaApi,\n  useQetaConfig,\n  UserFollowButton,\n  useUserInfo,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { UserStatsContent } from './UserStatsContent';\nimport { Flex, Header, Tab, TabList, TabPanel, Tabs } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport {\n  RiBarChartLine,\n  RiBookmarkLine,\n  RiLink,\n  RiQuestionAnswerLine,\n  RiQuestionLine,\n  RiStackLine,\n} from '@remixicon/react';\nimport styles from './UserPage.module.css';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\n\nexport const UserPage = () => {\n  const identity = useParams()['*'] ?? 'unknown';\n  const { name, user, secondaryTitle } = useUserInfo(identity);\n  const [tab, setTab] = useState('statistics');\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [_searchParams, setSearchParams] = useSearchParams();\n  const { disabled } = useQetaConfig();\n  const {\n    value: currentUser,\n    loading: loadingUser,\n    error: userError,\n  } = useIdentityApi(api => api.getBackstageIdentity(), []);\n  const { value: userStats, loading: loadingUserStats } = useQetaApi(\n    api => api.getUserStats(identity),\n    [identity],\n  );\n\n  const handleChange = (newValue: string) => {\n    setSearchParams({});\n    setTab(newValue);\n  };\n\n  const availableTabs = useMemo(() => {\n    return [\n      'statistics',\n      !disabled.questions ? 'questions' : null,\n      !disabled.articles ? 'articles' : null,\n      !disabled.links ? 'links' : null,\n      !disabled.collections ? 'collections' : null,\n      !disabled.questions ? 'answers' : null,\n    ].filter((v): v is string => Boolean(v));\n  }, [disabled]);\n\n  useEffect(() => {\n    if (!availableTabs.includes(tab)) {\n      setTab(availableTabs[0]);\n    }\n  }, [availableTabs, tab]);\n\n  const TabLabel = ({ icon, label }: { icon: ReactNode; label: string }) => (\n    <Flex align=\"center\" gap=\"2\" className={styles.tabLabel}>\n      {icon}\n      <span>{label}</span>\n    </Flex>\n  );\n\n  const tabItems = [\n    <Tab key=\"statistics\" id=\"statistics\">\n      <TabLabel\n        icon={<RiBarChartLine size={16} />}\n        label={t('userPage.statistics', {})}\n      />\n    </Tab>,\n    !disabled.questions ? (\n      <Tab key=\"questions\" id=\"questions\">\n        <TabLabel\n          icon={<RiQuestionLine size={16} />}\n          label={t('userPage.questions', {})}\n        />\n      </Tab>\n    ) : null,\n    !disabled.articles ? (\n      <Tab key=\"articles\" id=\"articles\">\n        <TabLabel\n          icon={<RiBookmarkLine size={16} />}\n          label={t('userPage.articles', {})}\n        />\n      </Tab>\n    ) : null,\n    !disabled.links ? (\n      <Tab key=\"links\" id=\"links\">\n        <TabLabel icon={<RiLink size={16} />} label={t('userPage.links', {})} />\n      </Tab>\n    ) : null,\n    !disabled.collections ? (\n      <Tab key=\"collections\" id=\"collections\">\n        <TabLabel\n          icon={<RiStackLine size={16} />}\n          label={t('userPage.collections', {})}\n        />\n      </Tab>\n    ) : null,\n    !disabled.questions ? (\n      <Tab key=\"answers\" id=\"answers\">\n        <TabLabel\n          icon={<RiQuestionAnswerLine size={16} />}\n          label={t('userPage.answers', {})}\n        />\n      </Tab>\n    ) : null,\n  ].filter((item): item is ReactElement => item !== null);\n\n  return (\n    <>\n      <Header\n        title={name}\n        metadata={[\n          ...(secondaryTitle || user?.spec?.profile?.email\n            ? [\n                {\n                  label: t('userPage.profileHeader', {}),\n                  value: (\n                    <EntityRefLink entityRef={identity}>\n                      {secondaryTitle || user?.spec?.profile?.email}\n                    </EntityRefLink>\n                  ),\n                },\n              ]\n            : []),\n          ...(userStats?.summary?.lastSeen\n            ? [\n                {\n                  label: t('stats.lastSeen'),\n                  value: (\n                    <RelativeTimeWithTooltip\n                      value={userStats.summary.lastSeen}\n                    />\n                  ),\n                },\n              ]\n            : []),\n          ...(userStats?.summary?.totalFollowers\n            ? [\n                {\n                  label: t('metadata.followers'),\n                  value: userStats.summary.totalFollowers,\n                },\n              ]\n            : []),\n        ]}\n        customActions={\n          <>\n            {!loadingUser &&\n              !userError &&\n              currentUser?.userEntityRef !== identity && (\n                <UserFollowButton\n                  userRef={identity}\n                  aria-label={t('userPage.followUser', { name })}\n                />\n              )}\n          </>\n        }\n      />\n      <Tabs\n        selectedKey={tab}\n        onSelectionChange={key => handleChange(key as string)}\n      >\n        <TabList aria-label={t('userPage.profileTab', {})}>{tabItems}</TabList>\n        <TabPanel id=\"statistics\" className={styles.tabPanel}>\n          <UserStatsContent\n            userRef={identity ?? ''}\n            stats={userStats}\n            loading={loadingUserStats}\n          />\n        </TabPanel>\n        {!disabled.questions && (\n          <TabPanel id=\"questions\" className={styles.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              showNoQuestionsBtn={false}\n              type=\"question\"\n              prefix=\"user-questions\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.articles && (\n          <TabPanel id=\"articles\" className={styles.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              type=\"article\"\n              showNoQuestionsBtn={false}\n              prefix=\"user-articles\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.links && (\n          <TabPanel id=\"links\" className={styles.tabPanel}>\n            <PostsContainer\n              author={identity ?? ''}\n              type=\"link\"\n              showNoQuestionsBtn={false}\n              prefix=\"user-links\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.collections && (\n          <TabPanel id=\"collections\" className={styles.tabPanel}>\n            <CollectionsContainer\n              owner={identity ?? ''}\n              prefix=\"user-collections\"\n            />\n          </TabPanel>\n        )}\n        {!disabled.questions && (\n          <TabPanel id=\"answers\" className={styles.tabPanel}>\n            <AnswersContainer\n              author={identity ?? ''}\n              title={t('userPage.answers', {})}\n              prefix=\"user-answers\"\n            />\n          </TabPanel>\n        )}\n      </Tabs>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/UserPage/UserPage.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  .UserPage_tabPanel__16da0feece {\n    padding: var(--bui-space-6) 0;\n  }\n\n  .UserPage_tabLabel__16da0feece {\n    justify-content: flex-start;\n  }\n}\n";
+var styles = {"tabPanel":"UserPage_tabPanel__16da0feece","tabLabel":"UserPage_tabLabel__16da0feece"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=UserPage.module.css.esm.js.map

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

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

package/dist/components/UserPage/UserStatsContent.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useQetaApi, UserBadges, StatsChart } from '@drodil/backstage-plugin-qeta-react';
-import { Grid, Card, CardContent, CircularProgress } from '@material-ui/core';
+import { Grid, Card, CardBody, Skeleton } from '@backstage/ui';
 
 const UserStatsContent = (props) => {
   const {
@@ -21,9 +21,9 @@ const UserStatsContent = (props) => {
   if (error) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(UserBadges, { entityRef: props.userRef }) }) }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { children: [
+  return /* @__PURE__ */ jsxs(Grid.Root, { columns: { sm: "12" }, gap: "6", children: [
+    /* @__PURE__ */ jsx(Grid.Item, { colSpan: { sm: "12" }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(UserBadges, { entityRef: props.userRef }) }) }) }),
+    /* @__PURE__ */ jsx(Grid.Item, { colSpan: { sm: "12" }, children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardBody, { children: [
       !isLoading && stats && /* @__PURE__ */ jsx(
         StatsChart,
         {
@@ -31,7 +31,7 @@ const UserStatsContent = (props) => {
           summary: stats.summary
         }
       ),
-      isLoading && !props.stats && /* @__PURE__ */ jsx(CircularProgress, {})
+      isLoading && !props.stats && /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 300 })
     ] }) }) })
   ] });
 };

package/dist/components/UserPage/UserStatsContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserStatsContent.esm.js","sources":["../../../src/components/UserPage/UserStatsContent.tsx"],"sourcesContent":["import {\n  StatsChart,\n  useQetaApi,\n  UserBadges,\n} from '@drodil/backstage-plugin-qeta-react';\nimport {\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Card, CardContent, CircularProgress, Grid } from '@material-ui/core';\n\nexport const UserStatsContent = (props: {\n  userRef: string;\n  stats?: StatisticsResponse<UserStat>;\n  loading?: boolean;\n}) => {\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      if (props.stats) {\n        return Promise.resolve(props.stats);\n      }\n      return api.getUserStats(props.userRef);\n    },\n    [props.userRef, props.stats],\n  );\n\n  const stats = props.stats || response;\n  const isLoading = props.loading || loading;\n\n  if (error) {\n    return null;\n  }\n  return (\n    <Grid container spacing={3}>\n      <Grid item xs={12}>\n        <Card>\n          <CardContent>\n            <UserBadges entityRef={props.userRef} />\n          </CardContent>\n        </Card>\n      </Grid>\n      <Grid item xs={12}>\n        <Card>\n          <CardContent>\n            {!isLoading && stats && (\n              <StatsChart\n                data={stats.statistics}\n                summary={stats.summary as unknown as Record<string, number>}\n              />\n            )}\n            {isLoading && !props.stats && <CircularProgress />}\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAI3B;AACJ,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACF,GAAI,UAAA;AAAA,IACF,CAAA,GAAA,KAAO;AACL,MAAA,IAAI,MAAM,KAAA,EAAO;AACf,QAAA,OAAO,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA;AAAA,MACpC;AACA,MAAA,OAAO,GAAA,CAAI,YAAA,CAAa,KAAA,CAAM,OAAO,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,CAAC,KAAA,CAAM,OAAA,EAAS,KAAA,CAAM,KAAK;AAAA,GAC7B;AAEA,EAAA,MAAM,KAAA,GAAQ,MAAM,KAAA,IAAS,QAAA;AAC7B,EAAA,MAAM,SAAA,GAAY,MAAM,OAAA,IAAW,OAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,EAAA,EACb,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAW,SAAA,EAAW,KAAA,CAAM,OAAA,EAAS,CAAA,EACxC,GACF,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,QAAK,IAAA,EAAI,IAAA,EAAC,IAAI,EAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAa,KAAA,oBACb,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,MAAM,KAAA,CAAM,UAAA;AAAA,UACZ,SAAS,KAAA,CAAM;AAAA;AAAA,OACjB;AAAA,MAED,SAAA,IAAa,CAAC,KAAA,CAAM,KAAA,wBAAU,gBAAA,EAAA,EAAiB;AAAA,KAAA,EAClD,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UserStatsContent.esm.js","sources":["../../../src/components/UserPage/UserStatsContent.tsx"],"sourcesContent":["import {\n  StatsChart,\n  useQetaApi,\n  UserBadges,\n} from '@drodil/backstage-plugin-qeta-react';\nimport {\n  StatisticsResponse,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Card, CardBody, Grid, Skeleton } from '@backstage/ui';\n\nexport const UserStatsContent = (props: {\n  userRef: string;\n  stats?: StatisticsResponse<UserStat>;\n  loading?: boolean;\n}) => {\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      if (props.stats) {\n        return Promise.resolve(props.stats);\n      }\n      return api.getUserStats(props.userRef);\n    },\n    [props.userRef, props.stats],\n  );\n\n  const stats = props.stats || response;\n  const isLoading = props.loading || loading;\n\n  if (error) {\n    return null;\n  }\n  return (\n    <Grid.Root columns={{ sm: '12' }} gap=\"6\">\n      <Grid.Item colSpan={{ sm: '12' }}>\n        <Card>\n          <CardBody>\n            <UserBadges entityRef={props.userRef} />\n          </CardBody>\n        </Card>\n      </Grid.Item>\n      <Grid.Item colSpan={{ sm: '12' }}>\n        <Card>\n          <CardBody>\n            {!isLoading && stats && (\n              <StatsChart\n                data={stats.statistics}\n                summary={stats.summary as unknown as Record<string, number>}\n              />\n            )}\n            {isLoading && !props.stats && (\n              <Skeleton width=\"100%\" height={300} />\n            )}\n          </CardBody>\n        </Card>\n      </Grid.Item>\n    </Grid.Root>\n  );\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAI3B;AACJ,EAAA,MAAM;AAAA,IACJ,KAAA,EAAO,QAAA;AAAA,IACP,OAAA;AAAA,IACA;AAAA,GACF,GAAI,UAAA;AAAA,IACF,CAAA,GAAA,KAAO;AACL,MAAA,IAAI,MAAM,KAAA,EAAO;AACf,QAAA,OAAO,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAA;AAAA,MACpC;AACA,MAAA,OAAO,GAAA,CAAI,YAAA,CAAa,KAAA,CAAM,OAAO,CAAA;AAAA,IACvC,CAAA;AAAA,IACA,CAAC,KAAA,CAAM,OAAA,EAAS,KAAA,CAAM,KAAK;AAAA,GAC7B;AAEA,EAAA,MAAM,KAAA,GAAQ,MAAM,KAAA,IAAS,QAAA;AAC7B,EAAA,MAAM,SAAA,GAAY,MAAM,OAAA,IAAW,OAAA;AAEnC,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,uBACE,IAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,OAAA,EAAS,EAAE,EAAA,EAAI,IAAA,EAAK,EAAG,GAAA,EAAI,GAAA,EACpC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAK,IAAA,EAAL,EAAU,SAAS,EAAE,EAAA,EAAI,MAAK,EAC7B,QAAA,kBAAA,GAAA,CAAC,QACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EACC,8BAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAM,OAAA,EAAS,CAAA,EACxC,GACF,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,IAAA,CAAK,IAAA,EAAL,EAAU,OAAA,EAAS,EAAE,EAAA,EAAI,IAAA,EAAK,EAC7B,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,CAAC,aAAa,KAAA,oBACb,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,MAAM,KAAA,CAAM,UAAA;AAAA,UACZ,SAAS,KAAA,CAAM;AAAA;AAAA,OACjB;AAAA,MAED,SAAA,IAAa,CAAC,KAAA,CAAM,KAAA,wBAClB,QAAA,EAAA,EAAS,KAAA,EAAM,MAAA,EAAO,MAAA,EAAQ,GAAA,EAAK;AAAA,KAAA,EAExC,GACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/UsersPage/UsersPage.esm.js

@@ -1,18 +1,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { qetaTranslationRef, ContentHeader, UsersContainer } from '@drodil/backstage-plugin-qeta-react';
-import PeopleOutline from '@material-ui/icons/PeopleOutline';
+import { qetaTranslationRef, UsersContainer } from '@drodil/backstage-plugin-qeta-react';
+import { Header } from '@backstage/ui';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 
 const UsersPage = () => {
   const { t } = useTranslationRef(qetaTranslationRef);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ContentHeader,
-      {
-        title: t("usersPage.title"),
-        titleIcon: /* @__PURE__ */ jsx(PeopleOutline, { fontSize: "large" })
-      }
-    ),
+    /* @__PURE__ */ jsx(Header, { title: t("usersPage.title") }),
     /* @__PURE__ */ jsx(UsersContainer, {})
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"UsersPage.esm.js","sources":["../../../src/components/UsersPage/UsersPage.tsx"],"sourcesContent":["import {\n  ContentHeader,\n  qetaTranslationRef,\n  UsersContainer,\n} from '@drodil/backstage-plugin-qeta-react';\nimport PeopleOutline from '@material-ui/icons/PeopleOutline';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const UsersPage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <>\n      <ContentHeader\n        title={t('usersPage.title')}\n        titleIcon={<PeopleOutline fontSize=\"large\" />}\n      />\n      <UsersContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAQO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,QAC1B,SAAA,kBAAW,GAAA,CAAC,aAAA,EAAA,EAAc,QAAA,EAAS,OAAA,EAAQ;AAAA;AAAA,KAC7C;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ;;;;"}
+{"version":3,"file":"UsersPage.esm.js","sources":["../../../src/components/UsersPage/UsersPage.tsx"],"sourcesContent":["import {\n  qetaTranslationRef,\n  UsersContainer,\n} from '@drodil/backstage-plugin-qeta-react';\nimport { Header } from '@backstage/ui';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\n\nexport const UsersPage = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <>\n      <Header title={t('usersPage.title')} />\n      <UsersContainer />\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,KAAA,EAAO,CAAA,CAAE,iBAAiB,CAAA,EAAG,CAAA;AAAA,wBACpC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ;;;;"}

package/dist/components/WritePage/WritePage.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 WritePage = () => {
@@ -30,8 +29,8 @@ const WritePage = () => {
     title = t("writePage.title.newArticle");
   }
   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 WritePage = () => {
         tags,
         type: "article"
       }
-    ) }) }) })
+    ) })
   ] });
 };