@drodil/backstage-plugin-qeta 1.20.0 → 1.21.1

package/dist/esm/{index-ba15a52c.esm.js → index-05d845fb.esm.js}

@@ -5,11 +5,11 @@ import omitBy from 'lodash/omitBy';
 import isEmpty from 'lodash/isEmpty';
 import { qetaRouteRef, tagRouteRef, questionRouteRef, userRouteRef, askRouteRef } from '@drodil/backstage-plugin-qeta-react';
 import useAsync from 'react-use/lib/useAsync';
-import { makeStyles, Box, Grid, FormGroup, FormControlLabel, Checkbox, FormControl, FormLabel, RadioGroup, TextField, Radio, Tooltip, Chip, useTheme, Card, CardContent, Typography, Divider, Select, MenuItem, Button, Collapse, TableRow, TableCell, ButtonGroup, TableContainer, Table, TableHead, TableBody, TablePagination, SvgIcon, ListItem, ListItemAvatar, Avatar, ListItemText, List, Container } from '@material-ui/core';
-import { catalogApiRef, entityRouteRef, useEntityPresentation, EntityRefLink } from '@backstage/plugin-catalog-react';
+import { makeStyles, Box, Grid, FormGroup, FormControlLabel, Checkbox, FormControl, FormLabel, RadioGroup, TextField, Radio, Tooltip, Chip, useTheme, Card, CardContent, Typography, Avatar, Divider, Select, MenuItem, Button, Collapse, TableRow, TableCell, ButtonGroup, TableContainer, Table, TableHead, TableBody, TablePagination, SvgIcon, ListItem, ListItemAvatar, ListItemText, List, Container } from '@material-ui/core';
+import { catalogApiRef, useEntityPresentation, entityRouteRef, EntityRefLink } from '@backstage/plugin-catalog-react';
 import { trimEnd, compact } from 'lodash';
 import { useSearchParams, useNavigate } from 'react-router-dom';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import { Autocomplete, Pagination, Alert } from '@material-ui/lab';
 import { stringifyEntityRef, getCompoundEntityRef, parseEntityRef } from '@backstage/catalog-model';
@@ -469,7 +469,7 @@ const qetaPlugin = createPlugin({
 const QetaPage = qetaPlugin.provide(
   createRoutableExtension({
     name: "QetaPage",
-    component: () => import('./index-0917d370.esm.js').then((m) => m.HomePage),
+    component: () => import('./index-3bec4f6e.esm.js').then((m) => m.HomePage),
     mountPoint: qetaRouteRef
   })
 );
@@ -478,7 +478,7 @@ const QuestionTableCard = qetaPlugin.provide(
     name: "QuestionsTableCard",
     title: "Q&A",
     description: "Shows Q&A questions",
-    components: () => import('./index-a1512692.esm.js'),
+    components: () => import('./index-db684599.esm.js'),
     layout: {
       height: { minRows: 6 },
       width: { minColumns: 6 }
@@ -606,6 +606,29 @@ const useStyles$1 = makeStyles((theme) => {
       width: "calc(100% - 70px)",
       minHeight: "160px"
     },
+    questionListItemStats: {
+      width: "80px",
+      textAlign: "right",
+      marginRight: "26px",
+      display: "inline-block",
+      verticalAlign: "top",
+      paddingTop: "10px"
+    },
+    questionListItemContent: {
+      display: "inline-block",
+      width: "calc(100% - 120px)"
+    },
+    questionListItemAuthor: {
+      display: "inline",
+      float: "right"
+    },
+    questionListItemAvatar: {
+      display: "inline-flex",
+      marginRight: "0.25rem",
+      fontSize: "1rem",
+      maxWidth: "1rem",
+      maxHeight: "1rem"
+    },
     answerCardContent: {
       display: "inline-block",
       width: "calc(100% - 70px)"
@@ -713,6 +736,43 @@ const useBasePath = () => {
   const { pathname } = new URL(url, base);
   return trimEnd(pathname, "/");
 };
+const useEntityAuthor = (entity) => {
+  var _a;
+  const catalogApi = useApi(catalogApiRef);
+  const identityApi = useApi(identityApiRef);
+  const [name, setName] = React.useState(void 0);
+  const [user, setUser] = React.useState(null);
+  const [initials, setInitials] = React.useState(null);
+  const [currentUser, setCurrentUser] = React.useState(null);
+  const anonymous = (_a = entity.anonymous) != null ? _a : false;
+  const { primaryTitle: userName } = useEntityPresentation(entity.author);
+  useEffect(() => {
+    if (!anonymous) {
+      catalogApi.getEntityByRef(entity.author).catch((_) => setUser(null)).then((data) => data ? setUser(data) : setUser(null));
+    }
+  }, [catalogApi, entity, anonymous]);
+  useEffect(() => {
+    identityApi.getBackstageIdentity().then((res) => {
+      var _a2;
+      setCurrentUser((_a2 = res.userEntityRef) != null ? _a2 : "user:default/guest");
+    });
+  }, [identityApi]);
+  useEffect(() => {
+    let displayName = userName;
+    if (entity.author === currentUser) {
+      displayName = "You";
+      if (anonymous) {
+        displayName += " (anonymous)";
+      }
+    }
+    setName(displayName);
+  }, [entity.author, anonymous, currentUser, userName]);
+  useEffect(() => {
+    const init = (name != null ? name : "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
+    setInitials(init);
+  }, [name]);
+  return { name, initials, user };
+};
 
 const formatEntityName = (username) => {
   if (!username) {
@@ -1013,12 +1073,44 @@ const RelativeTimeWithTooltip = (props) => {
 };
 
 const QuestionListItem = (props) => {
+  var _a, _b;
   const { question, entity } = props;
   const questionRoute = useRouteRef(questionRouteRef);
   const userRoute = useRouteRef(userRouteRef);
-  const { primaryTitle: userName } = useEntityPresentation(question.author);
   const theme = useTheme();
-  return /* @__PURE__ */ React.createElement(Card, { className: "qetaQuestionListItem" }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "div" }, /* @__PURE__ */ React.createElement(
+  const styles = useStyles$1();
+  const { name, initials, user } = useEntityAuthor(question);
+  return /* @__PURE__ */ React.createElement(Card, { className: "qetaQuestionListItem" }, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Box, { className: styles.questionListItemStats }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      display: "block",
+      variant: "caption",
+      className: "qetaQuestionListItemScore"
+    },
+    question.score,
+    " score"
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "caption",
+      display: "block",
+      className: `qetaQuestionListItemAnswers ${question.correctAnswer ? "qetaQuestionListItemCorrectAnswer" : "quetaQuestionListItemNoCorrectAnswer"}`,
+      style: {
+        color: question.correctAnswer ? theme.palette.success.main : void 0
+      }
+    },
+    question.answersCount,
+    " answers"
+  ), /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      display: "block",
+      variant: "caption",
+      className: "qetaQuestionListItemViews"
+    },
+    question.views,
+    " views"
+  )), /* @__PURE__ */ React.createElement(Box, { className: styles.questionListItemContent }, /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "div" }, /* @__PURE__ */ React.createElement(
     Link,
     {
       to: entity ? `${questionRoute({
@@ -1027,66 +1119,49 @@ const QuestionListItem = (props) => {
       className: "qetaQuestionListItemQuestionBtn"
     },
     question.title
-  ))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, style: { paddingTop: 0, paddingBottom: 0 } }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(
     Typography,
     {
       variant: "caption",
       noWrap: true,
       component: "div",
-      className: "qetaQuestionListItemContent"
+      className: "qetaQuestionListItemContent",
+      style: { marginBottom: "5px" }
     },
     DOMPurify.sanitize(
       truncate(removeMarkdownFormatting(question.content), 150)
     )
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "body2",
-      display: "block",
-      className: "qetaQuestionListItemAuthor"
-    },
-    "By",
-    " ",
-    question.author === "anonymous" ? "Anonymous" : /* @__PURE__ */ React.createElement(Link, { to: `${userRoute()}/${question.author}` }, userName),
-    " ",
-    /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: question.created })
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(TagsAndEntities, { question }), /* @__PURE__ */ React.createElement(
     Typography,
     {
       variant: "caption",
       display: "inline",
-      gutterBottom: true,
-      className: "qetaQuestionListItemScore"
+      className: `${styles.questionListItemAuthor} qetaQuestionListItemAuthor`
     },
-    "Score: ",
-    question.score,
+    /* @__PURE__ */ React.createElement(
+      Avatar,
+      {
+        src: (_b = (_a = user == null ? void 0 : user.spec) == null ? void 0 : _a.profile) == null ? void 0 : _b.picture,
+        className: styles.questionListItemAvatar,
+        alt: name,
+        variant: "rounded"
+      },
+      initials
+    ),
+    question.author === "anonymous" ? "Anonymous" : /* @__PURE__ */ React.createElement(Link, { to: `${userRoute()}/${question.author}` }, name),
     " ",
-    " | "
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "caption",
-      className: `qetaQuestionListItemAnswers ${question.correctAnswer ? "qetaQuestionListItemCorrectAnswer" : "quetaQuestionListItemNoCorrectAnswer"}`,
-      style: {
-        color: question.correctAnswer ? theme.palette.success.main : void 0
+    /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        to: entity ? `${questionRoute({
+          id: question.id.toString(10)
+        })}?entity=${entity}` : questionRoute({ id: question.id.toString(10) }),
+        className: "qetaQuestionListItemQuestionBtn"
       },
-      display: "inline",
-      gutterBottom: true
-    },
-    "Answers: ",
-    question.answersCount
-  ), /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      variant: "caption",
-      display: "inline",
-      gutterBottom: true,
-      className: "qetaQuestionListItemViews"
-    },
-    " | ",
-    " Views: ",
-    question.views
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(TagsAndEntities, { question })))));
+      "asked ",
+      /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: question.created })
+    )
+  ))));
 };
 
 const NoQuestionsCard = (props) => {
@@ -1135,19 +1210,32 @@ const QuestionList = (props) => {
     entityPage
   } = props;
   const styles = useStyles$1();
+  const listRef = useRef(null);
+  const [initialLoad, setInitialLoad] = useState(true);
+  useEffect(() => {
+    if (!initialLoad) {
+      setInitialLoad(false);
+    }
+  }, [initialLoad, loading]);
   const handlePageChange = (_event, value) => {
+    if (listRef.current) {
+      listRef.current.scrollIntoView();
+    }
     onPageChange(value);
   };
   const handlePageSizeChange = (event) => {
+    if (listRef.current) {
+      listRef.current.scrollIntoView();
+    }
     onPageSizeChange(Number.parseInt(event.target.value, 10));
   };
-  if (loading) {
+  if (loading && initialLoad) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (error || response === void 0) {
     return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: "Could not load questions." }, error == null ? void 0 : error.message);
   }
-  if (!response.questions || response.questions.length === 0) {
+  if (initialLoad && (!response.questions || response.questions.length === 0)) {
     return /* @__PURE__ */ React.createElement(
       NoQuestionsCard,
       {
@@ -1158,7 +1246,7 @@ const QuestionList = (props) => {
     );
   }
   const pageCount = response.total < props.pageSize ? 1 : Math.ceil(response.total / props.pageSize);
-  return /* @__PURE__ */ React.createElement(Box, { sx: { mt: 2 }, className: "qetaQuestionList" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, className: "qetaQuestionListGrid" }, response.questions.map((question) => {
+  return /* @__PURE__ */ React.createElement("div", { ref: listRef }, /* @__PURE__ */ React.createElement(Box, { sx: { mt: 2 }, className: "qetaQuestionList" }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, className: "qetaQuestionListGrid" }, response.questions.map((question) => {
     return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, key: question.id }, /* @__PURE__ */ React.createElement(QuestionListItem, { question, entity }), /* @__PURE__ */ React.createElement(Divider, null));
   })), /* @__PURE__ */ React.createElement(
     Grid,
@@ -1196,7 +1284,7 @@ const QuestionList = (props) => {
         showLastButton: true
       }
     )
-  ));
+  )));
 };
 
 const AskQuestionButton = (props) => {
@@ -2266,5 +2354,5 @@ const StatisticsPage = () => {
   return /* @__PURE__ */ React.createElement(Content$1, { className: "qetaStatisticsPage" }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Statistics" }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(TopRankingUsers, { limit: 10 })));
 };
 
-export { AskForm as A, BackToQuestionsButton as B, Content as C, MarkdownEditor as M, QuestionsContainer as Q, RelativeTimeWithTooltip as R, StatisticsPage as S, TagsAndEntities as T, UpdatedByLink as U, useStyles$1 as a, AuthorLink as b, AskAnonymouslyCheckbox as c, useQetaApi as d, AskQuestionButton as e, formatEntityName as f, useIdentityApi as g, TrophyIcon as h, QuestionsTable as i, qetaPlugin as j, QetaPage as k, QuestionTableCard as l, RankingRow as m, RankingCard as n, TopRankingUsers as o, QetaClient as p, qetaApiRef as q, useBasePath as u };
-//# sourceMappingURL=index-ba15a52c.esm.js.map
+export { AskForm as A, BackToQuestionsButton as B, Content as C, MarkdownEditor as M, QuestionsContainer as Q, RelativeTimeWithTooltip as R, StatisticsPage as S, TagsAndEntities as T, UpdatedByLink as U, useStyles$1 as a, useEntityAuthor as b, AuthorLink as c, AskAnonymouslyCheckbox as d, useQetaApi as e, AskQuestionButton as f, useIdentityApi as g, TrophyIcon as h, QuestionsTable as i, qetaPlugin as j, QetaPage as k, QuestionTableCard as l, RankingRow as m, RankingCard as n, TopRankingUsers as o, QetaClient as p, qetaApiRef as q, useBasePath as u };
+//# sourceMappingURL=index-05d845fb.esm.js.map