@drodil/backstage-plugin-qeta-react 3.7.2 → 3.9.0

package/dist/components/PostForm/TagInput.esm.js

@@ -1,6 +1,5 @@
-import { Controller } from 'react-hook-form';
 import { Autocomplete } from '@material-ui/lab';
-import { TextField } from '@material-ui/core';
+import { Tooltip, TextField } from '@material-ui/core';
 import React, { useMemo, useEffect } from 'react';
 import { qetaApiRef } from '../../api.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
@@ -11,13 +10,20 @@ import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 
 const TagInput = (props) => {
-  const { control } = props;
+  const {
+    value,
+    onChange,
+    error,
+    allowCreate = true,
+    hideHelpText = false,
+    style
+  } = props;
   const qetaApi = useApi(qetaApiRef);
   const config = useApi(configApiRef);
   const { t } = useTranslation();
   const allowCreation = useMemo(
-    () => config.getOptionalBoolean("qeta.tags.allowCreation") ?? true,
-    [config]
+    () => config.getOptionalBoolean("qeta.tags.allowCreation") ?? allowCreate,
+    [config, allowCreate]
   );
   const allowedTags = useMemo(
     () => config.getOptionalStringArray("qeta.tags.allowedTags") ?? null,
@@ -28,54 +34,68 @@ const TagInput = (props) => {
     [config]
   );
   const [availableTags, setAvailableTags] = React.useState([]);
+  const [tagDescriptions, setTagDescriptions] = React.useState({});
   useEffect(() => {
-    if (allowCreation) {
-      qetaApi.getTags().catch((_) => setAvailableTags(null)).then(
-        (data) => data ? setAvailableTags(data.tags.map((tag) => tag.tag)) : setAvailableTags(null)
-      );
-    } else {
-      setAvailableTags(allowedTags);
-    }
+    qetaApi.getTags().catch((_) => setAvailableTags(null)).then((data) => {
+      if (data) {
+        const uniqueTags = [
+          .../* @__PURE__ */ new Set([
+            ...allowedTags ?? [],
+            ...data.tags.map((tag) => tag.tag)
+          ])
+        ];
+        setAvailableTags(uniqueTags);
+        setTagDescriptions(
+          data.tags.reduce((acc, tag) => {
+            if (!tag.description) {
+              return acc;
+            }
+            acc[tag.tag] = tag.description;
+            return acc;
+          }, {})
+        );
+      }
+    });
   }, [qetaApi, allowCreation, allowedTags]);
-  if (!allowCreation && (allowedTags === null || allowedTags.length === 0)) {
+  if (!availableTags || availableTags.length === 0) {
     return null;
   }
   return /* @__PURE__ */ React.createElement(
-    Controller,
+    Autocomplete,
     {
-      control,
-      render: ({ field: { onChange, value }, fieldState: { error } }) => /* @__PURE__ */ React.createElement(
-        Autocomplete,
+      multiple: true,
+      id: "tags-select",
+      className: "qetaTagInput",
+      value,
+      options: availableTags ?? [],
+      freeSolo: allowCreation,
+      style,
+      renderOption: (option) => {
+        if (tagDescriptions[option]) {
+          return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tagDescriptions[option] }, /* @__PURE__ */ React.createElement("span", null, option)));
+        }
+        return option;
+      },
+      onChange: (_e, newValue) => {
+        const tags = filterTags(newValue);
+        if (tags && tags.length <= maximumTags && tags.length === newValue.length) {
+          onChange(newValue);
+        }
+      },
+      renderInput: (params) => /* @__PURE__ */ React.createElement(
+        TextField,
         {
-          multiple: true,
-          id: "tags-select",
-          className: "qetaAskFormTags",
-          value,
-          options: availableTags ?? [],
-          freeSolo: allowCreation,
-          onChange: (_e, newValue) => {
-            const tags = filterTags(newValue);
-            if (tags && tags.length <= maximumTags && tags.length === newValue.length) {
-              onChange(newValue);
-            }
-          },
-          renderInput: (params) => /* @__PURE__ */ React.createElement(
-            TextField,
-            {
-              ...params,
-              variant: "outlined",
-              margin: "normal",
-              label: t("tagsInput.label"),
-              placeholder: t("tagsInput.placeholder"),
-              helperText: t("tagsInput.helperText", {
-                max: maximumTags.toString(10)
-              }),
-              error: error !== void 0
-            }
-          )
+          ...params,
+          variant: "outlined",
+          margin: "normal",
+          label: t("tagsInput.label"),
+          placeholder: t("tagsInput.placeholder"),
+          helperText: hideHelpText ? "" : t("tagsInput.helperText", {
+            max: maximumTags.toString(10)
+          }),
+          error: error !== void 0
         }
-      ),
-      name: "tags"
+      )
     }
   );
 };

package/dist/components/PostForm/TagInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/PostForm/TagInput.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { Autocomplete } from '@material-ui/lab';\nimport { TextField } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { TagAndEntitiesFormValues } from './types';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\n\nexport const TagInput = (props: {\n  control: Control<TagAndEntitiesFormValues>;\n}) => {\n  const { control } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const allowCreation = useMemo(\n    () => config.getOptionalBoolean('qeta.tags.allowCreation') ?? true,\n    [config],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? null,\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);\n  useEffect(() => {\n    if (allowCreation) {\n      qetaApi\n        .getTags()\n        .catch(_ => setAvailableTags(null))\n        .then(data =>\n          data\n            ? setAvailableTags(data.tags.map(tag => tag.tag))\n            : setAvailableTags(null),\n        );\n    } else {\n      setAvailableTags(allowedTags);\n    }\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!allowCreation && (allowedTags === null || allowedTags.length === 0)) {\n    return null;\n  }\n\n  return (\n    <Controller\n      control={control}\n      render={({ field: { onChange, value }, fieldState: { error } }) => (\n        <Autocomplete\n          multiple\n          id=\"tags-select\"\n          className=\"qetaAskFormTags\"\n          value={value}\n          options={availableTags ?? []}\n          freeSolo={allowCreation}\n          onChange={(_e, newValue) => {\n            const tags = filterTags(newValue);\n            if (\n              tags &&\n              tags.length <= maximumTags &&\n              tags.length === newValue.length\n            ) {\n              onChange(newValue);\n            }\n          }}\n          renderInput={params => (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              label={t('tagsInput.label')}\n              placeholder={t('tagsInput.placeholder')}\n              helperText={t('tagsInput.helperText', {\n                max: maximumTags.toString(10),\n              })}\n              error={error !== undefined}\n            />\n          )}\n        />\n      )}\n      name=\"tags\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/PostForm/TagInput.tsx"],"sourcesContent":["import { Autocomplete } from '@material-ui/lab';\nimport { TextField, Tooltip } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../hooks';\nimport { FieldError } from 'react-hook-form';\n\nexport const TagInput = (props: {\n  value?: string[];\n  onChange: (value: string[]) => void;\n  error?: FieldError;\n  allowCreate?: boolean;\n  hideHelpText?: boolean;\n  style?: React.CSSProperties;\n}) => {\n  const {\n    value,\n    onChange,\n    error,\n    allowCreate = true,\n    hideHelpText = false,\n    style,\n  } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const allowCreation = useMemo(\n    () => config.getOptionalBoolean('qeta.tags.allowCreation') ?? allowCreate,\n    [config, allowCreate],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? null,\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);\n  const [tagDescriptions, setTagDescriptions] = React.useState<\n    Record<string, string>\n  >({});\n  useEffect(() => {\n    qetaApi\n      .getTags()\n      .catch(_ => setAvailableTags(null))\n      .then(data => {\n        if (data) {\n          const uniqueTags = [\n            ...new Set([\n              ...(allowedTags ?? []),\n              ...data.tags.map(tag => tag.tag),\n            ]),\n          ];\n          setAvailableTags(uniqueTags);\n          setTagDescriptions(\n            data.tags.reduce((acc, tag) => {\n              if (!tag.description) {\n                return acc;\n              }\n              acc[tag.tag] = tag.description;\n              return acc;\n            }, {} as Record<string, string>),\n          );\n        }\n      });\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!availableTags || availableTags.length === 0) {\n    return null;\n  }\n\n  return (\n    <Autocomplete\n      multiple\n      id=\"tags-select\"\n      className=\"qetaTagInput\"\n      value={value}\n      options={availableTags ?? []}\n      freeSolo={allowCreation}\n      style={style}\n      renderOption={option => {\n        if (tagDescriptions[option]) {\n          return (\n            <>\n              <Tooltip title={tagDescriptions[option]}>\n                <span>{option}</span>\n              </Tooltip>\n            </>\n          );\n        }\n        return option;\n      }}\n      onChange={(_e, newValue) => {\n        const tags = filterTags(newValue);\n        if (\n          tags &&\n          tags.length <= maximumTags &&\n          tags.length === newValue.length\n        ) {\n          onChange(newValue);\n        }\n      }}\n      renderInput={params => (\n        <TextField\n          {...params}\n          variant=\"outlined\"\n          margin=\"normal\"\n          label={t('tagsInput.label')}\n          placeholder={t('tagsInput.placeholder')}\n          helperText={\n            hideHelpText\n              ? ''\n              : t('tagsInput.helperText', {\n                  max: maximumTags.toString(10),\n                })\n          }\n          error={error !== undefined}\n        />\n      )}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsContainer/PostList.esm.js

@@ -1,4 +1,4 @@
-import { Progress, WarningPanel } from '@backstage/core-components';
+import { WarningPanel } from '@backstage/core-components';
 import { Box, Card, Grid, Divider } from '@material-ui/core';
 import React, { useRef, useState, useEffect } from 'react';
 import { PostListItem } from './PostListItem.esm.js';
@@ -10,6 +10,7 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
+import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 
 const PostList = (props) => {
   const {
@@ -29,7 +30,7 @@ const PostList = (props) => {
   const [initialLoad, setInitialLoad] = useState(true);
   const { t } = useTranslation();
   useEffect(() => {
-    if (!initialLoad) {
+    if (!loading) {
       setInitialLoad(false);
     }
   }, [initialLoad, loading]);
@@ -45,8 +46,11 @@ const PostList = (props) => {
     }
     onPageSizeChange(Number.parseInt(event.target.value, 10));
   };
-  if (loading && initialLoad) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (loading) {
+    if (initialLoad) {
+      return /* @__PURE__ */ React.createElement(LoadingGrid, null);
+    }
+    return null;
   }
   const itemType = type ?? "post";
   if (error || response === void 0) {
@@ -59,7 +63,7 @@ const PostList = (props) => {
       error?.message
     );
   }
-  if (initialLoad && (!response.posts || response.posts.length === 0)) {
+  if (!response.posts || response.posts.length === 0) {
     return /* @__PURE__ */ React.createElement(
       NoPostsCard,
       {
@@ -74,7 +78,7 @@ const PostList = (props) => {
   const pageCount = response.total < props.pageSize ? 1 : Math.ceil(response.total / props.pageSize);
   return /* @__PURE__ */ React.createElement("div", { ref: listRef }, /* @__PURE__ */ React.createElement(Box, { sx: { mt: 2 }, className: "qetaPostList" }, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2, style: { paddingTop: "1rem" } }, response.posts.map((post) => {
     return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, key: post.id }, /* @__PURE__ */ React.createElement(PostListItem, { post, entity, type }), /* @__PURE__ */ React.createElement(Divider, null));
-  }))), /* @__PURE__ */ React.createElement(
+  }))), response.total > 0 && /* @__PURE__ */ React.createElement(
     QetaPagination,
     {
       pageSize: props.pageSize,

package/dist/components/PostsContainer/PostList.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostList.esm.js","sources":["../../../src/components/PostsContainer/PostList.tsx"],"sourcesContent":["import { Progress, WarningPanel } from '@backstage/core-components';\nimport { Box, Card, Divider, Grid } from '@material-ui/core';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { PostListItem } from './PostListItem';\nimport { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { NoPostsCard } from './NoPostsCard';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\n\nexport const PostList = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  pageCount: number;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  entityPage?: boolean;\n  type?: PostType;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n    showNoQuestionsBtn = true,\n    entityPage,\n    tags,\n    type,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!initialLoad) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (\n    event: React.ChangeEvent<{ value: unknown }>,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading && initialLoad) {\n    return <Progress />;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (initialLoad && (!response.posts || response.posts.length === 0)) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1rem' }}>\n            {response.posts.map(post => {\n              return (\n                <Grid item xs={12} key={post.id}>\n                  <PostListItem post={post} entity={entity} type={type} />\n                  <Divider />\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        <QetaPagination\n          pageSize={props.pageSize}\n          handlePageChange={handlePageChange}\n          handlePageSizeChange={handlePageSizeChange}\n          page={page}\n          pageCount={pageCount}\n          tooltip={t('postsList.postsPerPage', { itemType })}\n        />\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostList.esm.js","sources":["../../../src/components/PostsContainer/PostList.tsx"],"sourcesContent":["import { WarningPanel } from '@backstage/core-components';\nimport { Box, Card, Divider, Grid } from '@material-ui/core';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { PostListItem } from './PostListItem';\nimport { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport { NoPostsCard } from './NoPostsCard';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const PostList = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n  page: number;\n  pageSize: number;\n  pageCount: number;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  entityPage?: boolean;\n  type?: PostType;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    onPageChange,\n    entity,\n    page,\n    onPageSizeChange,\n    showNoQuestionsBtn = true,\n    entityPage,\n    tags,\n    type,\n  } = props;\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    if (!loading) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (\n    event: React.ChangeEvent<{ value: unknown }>,\n  ) => {\n    if (listRef.current) {\n      listRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading) {\n    if (initialLoad) {\n      return <LoadingGrid />;\n    }\n    return null;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.posts || response.posts.length === 0) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  const pageCount =\n    response.total < props.pageSize\n      ? 1\n      : Math.ceil(response.total / props.pageSize);\n\n  return (\n    <div ref={listRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostList\">\n        <Card>\n          <Grid container spacing={2} style={{ paddingTop: '1rem' }}>\n            {response.posts.map(post => {\n              return (\n                <Grid item xs={12} key={post.id}>\n                  <PostListItem post={post} entity={entity} type={type} />\n                  <Divider />\n                </Grid>\n              );\n            })}\n          </Grid>\n        </Card>\n        {response.total > 0 && (\n          <QetaPagination\n            pageSize={props.pageSize}\n            handlePageChange={handlePageChange}\n            handlePageSizeChange={handlePageSizeChange}\n            page={page}\n            pageCount={pageCount}\n            tooltip={t('postsList.postsPerPage', { itemType })}\n          />\n        )}\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsContainer/PostsContainer.esm.js

@@ -116,7 +116,14 @@ const PostsContainer = (props) => {
       entityPage: entity !== void 0,
       tags
     }
-  ))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaPostsContainerQuestionCount" }, t("common.posts", { count: response?.total ?? 0, itemType }))), (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "h6",
+      className: "qetaPostsContainerQuestionCount"
+    },
+    t("common.posts", { count: response?.total ?? 0, itemType })
+  )), response && (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: () => setShowFilterPanel(!showFilterPanel),

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

@@ -1 +1 @@
-{"version":3,"file":"PostsContainer.esm.js","sources":["../../../src/components/PostsContainer/PostsContainer.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport React from 'react';\nimport { FilterPanel } from '../FilterPanel/FilterPanel';\nimport { PostList } from './PostList';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { TagFollowButton } from '../Buttons/TagFollowButton';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport { WriteArticleButton } from '../Buttons';\nimport { capitalize } from 'lodash';\nimport {\n  PaginatedPostsProps,\n  usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslation } from '../../hooks';\n\nexport const PostsContainer = (props: PaginatedPostsProps) => {\n  const {\n    type,\n    tags,\n    author,\n    entity,\n    showFilters,\n    showTitle,\n    title,\n    favorite,\n    showAskButton,\n    showWriteButton,\n    showNoQuestionsBtn,\n  } = props;\n  const {\n    onSearchQueryChange,\n    filters,\n    response,\n    loading,\n    error,\n    setShowFilterPanel,\n    showFilterPanel,\n    onFilterChange,\n    onPageChange,\n    onPageSizeChange,\n    page,\n    postsPerPage,\n    pageCount,\n  } = usePaginatedPosts(props);\n  const { t } = useTranslation();\n\n  const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n  let shownTitle = title;\n  let link = undefined;\n  let btn = undefined;\n  if (author) {\n    shownTitle = t(`postsContainer.title.by`, { itemType });\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = t(`postsContainer.title.about`, { itemType });\n    link = <EntityRefLink entityRef={entity} />;\n    btn = <EntityFollowButton entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = `#${tags.join(', #')}`;\n    if (tags.length === 1) {\n      btn = <TagFollowButton tag={tags[0]} />;\n    }\n  } else if (favorite) {\n    shownTitle = t('postsContainer.title.favorite', {\n      itemType: itemType.toLowerCase(),\n    });\n  }\n\n  return (\n    <Box className=\"qetaPostsContainer\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaPostsContainerTitle\"\n          style={{ marginBottom: '1.5rem' }}\n        >\n          {shownTitle} {link} {btn}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            fullWidth\n            onChange={onSearchQueryChange}\n            label={t('postsContainer.search.label', { itemType })}\n            className=\"qetaPostsContainerSearchInput\"\n            variant=\"outlined\"\n            placeholder={t('postsContainer.search.placeholder')}\n            size=\"small\"\n            style={{ marginBottom: '5px' }}\n          />\n        </Grid>\n        {showAskButton && (\n          <Grid item>\n            <AskQuestionButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n        {showWriteButton && (\n          <Grid item>\n            <WriteArticleButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Typography variant=\"h6\" className=\"qetaPostsContainerQuestionCount\">\n            {t('common.posts', { count: response?.total ?? 0, itemType })}\n          </Typography>\n        </Grid>\n        {(showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaPostsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel\n            onChange={onFilterChange}\n            filters={filters}\n            type={type}\n          />\n        </Collapse>\n      )}\n      <PostList\n        loading={loading}\n        error={error}\n        response={response}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n        entity={entity}\n        page={page}\n        pageSize={postsPerPage}\n        pageCount={pageCount}\n        showNoQuestionsBtn={showNoQuestionsBtn}\n        entityPage={entity !== undefined}\n        tags={tags}\n        type={type}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostsContainer.esm.js","sources":["../../../src/components/PostsContainer/PostsContainer.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport React from 'react';\nimport { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel';\nimport { PostList } from './PostList';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { TagFollowButton } from '../Buttons/TagFollowButton';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport { WriteArticleButton } from '../Buttons';\nimport { capitalize } from 'lodash';\nimport {\n  PaginatedPostsProps,\n  usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslation } from '../../hooks';\n\nexport const PostsContainer = (\n  props: PaginatedPostsProps & { entity?: string },\n) => {\n  const {\n    type,\n    tags,\n    author,\n    entity,\n    showFilters,\n    showTitle,\n    title,\n    favorite,\n    showAskButton,\n    showWriteButton,\n    showNoQuestionsBtn,\n  } = props;\n  const {\n    onSearchQueryChange,\n    filters,\n    response,\n    loading,\n    error,\n    setShowFilterPanel,\n    showFilterPanel,\n    onFilterChange,\n    onPageChange,\n    onPageSizeChange,\n    page,\n    postsPerPage,\n    pageCount,\n  } = usePaginatedPosts(props);\n  const { t } = useTranslation();\n\n  const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n  let shownTitle = title;\n  let link = undefined;\n  let btn = undefined;\n  if (author) {\n    shownTitle = t(`postsContainer.title.by`, { itemType });\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = t(`postsContainer.title.about`, { itemType });\n    link = <EntityRefLink entityRef={entity} />;\n    btn = <EntityFollowButton entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = `#${tags.join(', #')}`;\n    if (tags.length === 1) {\n      btn = <TagFollowButton tag={tags[0]} />;\n    }\n  } else if (favorite) {\n    shownTitle = t('postsContainer.title.favorite', {\n      itemType: itemType.toLowerCase(),\n    });\n  }\n\n  return (\n    <Box className=\"qetaPostsContainer\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaPostsContainerTitle\"\n          style={{ marginBottom: '1.5rem' }}\n        >\n          {shownTitle} {link} {btn}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            fullWidth\n            onChange={onSearchQueryChange}\n            label={t('postsContainer.search.label', { itemType })}\n            className=\"qetaPostsContainerSearchInput\"\n            variant=\"outlined\"\n            placeholder={t('postsContainer.search.placeholder')}\n            size=\"small\"\n            style={{ marginBottom: '5px' }}\n          />\n        </Grid>\n        {showAskButton && (\n          <Grid item>\n            <AskQuestionButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n        {showWriteButton && (\n          <Grid item>\n            <WriteArticleButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography\n              variant=\"h6\"\n              className=\"qetaPostsContainerQuestionCount\"\n            >\n              {t('common.posts', { count: response?.total ?? 0, itemType })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaPostsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<PostFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            type={type}\n          />\n        </Collapse>\n      )}\n      <PostList\n        loading={loading}\n        error={error}\n        response={response}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n        entity={entity}\n        page={page}\n        pageSize={postsPerPage}\n        pageCount={pageCount}\n        showNoQuestionsBtn={showNoQuestionsBtn}\n        entityPage={entity !== undefined}\n        tags={tags}\n        type={type}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsGrid/PostsGrid.esm.js

@@ -38,7 +38,8 @@ const PostsGrid = (props) => {
     favorite,
     showAskButton,
     showWriteButton,
-    showNoQuestionsBtn
+    showNoQuestionsBtn,
+    allowRanking
   } = props;
   const { t } = useTranslation();
   const {
@@ -54,7 +55,8 @@ const PostsGrid = (props) => {
     postsPerPage,
     page,
     pageCount,
-    onPageChange
+    onPageChange,
+    retry
   } = usePaginatedPosts(props);
   const itemType = capitalize(t(`common.${type ?? "post"}`, {}));
   let shownTitle = title;
@@ -114,7 +116,14 @@ const PostsGrid = (props) => {
       entityPage: entity !== void 0,
       tags
     }
-  ))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaPostsContainerQuestionCount" }, t("common.posts", { count: response?.total ?? 0, itemType }))), (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(Grid, { container: true, justifyContent: "space-between" }, response && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      variant: "h6",
+      className: "qetaPostsContainerQuestionCount"
+    },
+    t("common.posts", { count: response?.total ?? 0, itemType })
+  )), response && (showFilters ?? true) && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: () => setShowFilterPanel(!showFilterPanel),
@@ -144,7 +153,10 @@ const PostsGrid = (props) => {
       type,
       page,
       pageCount,
-      onPageChange
+      onPageChange,
+      onRankUpdate: () => retry(),
+      collectionId: props.collectionId,
+      allowRanking
     }
   ));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PostsGrid.esm.js","sources":["../../../src/components/PostsGrid/PostsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n  AskQuestionButton,\n  EntityFollowButton,\n  TagFollowButton,\n  WriteArticleButton,\n} from '../Buttons';\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { FilterPanel } from '../FilterPanel/FilterPanel';\nimport { PostsGridContent } from './PostsGridContent';\nimport { capitalize } from 'lodash';\nimport {\n  PaginatedPostsProps,\n  usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslation } from '../../hooks';\n\nexport const PostsGrid = (props: PaginatedPostsProps) => {\n  const {\n    type,\n    tags,\n    author,\n    entity,\n    showFilters,\n    showTitle,\n    title,\n    favorite,\n    showAskButton,\n    showWriteButton,\n    showNoQuestionsBtn,\n  } = props;\n  const { t } = useTranslation();\n  const {\n    onSearchQueryChange,\n    filters,\n    response,\n    loading,\n    error,\n    setShowFilterPanel,\n    showFilterPanel,\n    onFilterChange,\n    onPageSizeChange,\n    postsPerPage,\n    page,\n    pageCount,\n    onPageChange,\n  } = usePaginatedPosts(props);\n\n  const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n  let shownTitle = title;\n  let link = undefined;\n  let btn = undefined;\n  if (author) {\n    shownTitle = t(`postsContainer.title.by`, { itemType });\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = t(`postsContainer.title.about`, { itemType });\n    link = <EntityRefLink entityRef={entity} />;\n    btn = <EntityFollowButton entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = `#${tags.join(', #')}`;\n    if (tags.length === 1) {\n      btn = <TagFollowButton tag={tags[0]} />;\n    }\n  } else if (favorite) {\n    shownTitle = t('postsContainer.title.favorite', { itemType });\n  }\n\n  return (\n    <Box className=\"qetaPostsGrid\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaPostsGridTitle\"\n          style={{ marginBottom: '1.5rem' }}\n        >\n          {shownTitle} {link} {btn}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            fullWidth\n            onChange={onSearchQueryChange}\n            label={t('postsContainer.search.label', { itemType })}\n            className=\"qetaPostsGridSearchInput\"\n            variant=\"outlined\"\n            placeholder={t('postsContainer.search.placeholder')}\n            size=\"small\"\n            style={{ marginBottom: '5px' }}\n          />\n        </Grid>\n        {showAskButton && (\n          <Grid item>\n            <AskQuestionButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n        {showWriteButton && (\n          <Grid item>\n            <WriteArticleButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Typography variant=\"h6\" className=\"qetaPostsContainerQuestionCount\">\n            {t('common.posts', { count: response?.total ?? 0, itemType })}\n          </Typography>\n        </Grid>\n        {(showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaPostsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel\n            onChange={onFilterChange}\n            filters={filters}\n            type={type}\n          />\n        </Collapse>\n      )}\n      <PostsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n        entity={entity}\n        showNoQuestionsBtn={showNoQuestionsBtn}\n        onPageSizeChange={onPageSizeChange}\n        pageSize={postsPerPage}\n        entityPage={entity !== undefined}\n        tags={tags}\n        type={type}\n        page={page}\n        pageCount={pageCount}\n        onPageChange={onPageChange}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostsGrid.esm.js","sources":["../../../src/components/PostsGrid/PostsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport {\n  AskQuestionButton,\n  EntityFollowButton,\n  TagFollowButton,\n  WriteArticleButton,\n} from '../Buttons';\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  TextField,\n  Typography,\n} from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { FilterPanel, PostFilters } from '../FilterPanel/FilterPanel';\nimport { PostsGridContent } from './PostsGridContent';\nimport { capitalize } from 'lodash';\nimport {\n  PaginatedPostsProps,\n  usePaginatedPosts,\n} from '../../hooks/usePaginatedPosts';\nimport { useTranslation } from '../../hooks';\n\nexport type PostGridProps = PaginatedPostsProps & { allowRanking?: boolean };\n\nexport const PostsGrid = (props: PostGridProps) => {\n  const {\n    type,\n    tags,\n    author,\n    entity,\n    showFilters,\n    showTitle,\n    title,\n    favorite,\n    showAskButton,\n    showWriteButton,\n    showNoQuestionsBtn,\n    allowRanking,\n  } = props;\n  const { t } = useTranslation();\n  const {\n    onSearchQueryChange,\n    filters,\n    response,\n    loading,\n    error,\n    setShowFilterPanel,\n    showFilterPanel,\n    onFilterChange,\n    onPageSizeChange,\n    postsPerPage,\n    page,\n    pageCount,\n    onPageChange,\n    retry,\n  } = usePaginatedPosts(props);\n\n  const itemType = capitalize(t(`common.${type ?? 'post'}`, {}));\n  let shownTitle = title;\n  let link = undefined;\n  let btn = undefined;\n  if (author) {\n    shownTitle = t(`postsContainer.title.by`, { itemType });\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = t(`postsContainer.title.about`, { itemType });\n    link = <EntityRefLink entityRef={entity} />;\n    btn = <EntityFollowButton entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = `#${tags.join(', #')}`;\n    if (tags.length === 1) {\n      btn = <TagFollowButton tag={tags[0]} />;\n    }\n  } else if (favorite) {\n    shownTitle = t('postsContainer.title.favorite', { itemType });\n  }\n\n  return (\n    <Box className=\"qetaPostsGrid\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaPostsGridTitle\"\n          style={{ marginBottom: '1.5rem' }}\n        >\n          {shownTitle} {link} {btn}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <TextField\n            id=\"search-bar\"\n            fullWidth\n            onChange={onSearchQueryChange}\n            label={t('postsContainer.search.label', { itemType })}\n            className=\"qetaPostsGridSearchInput\"\n            variant=\"outlined\"\n            placeholder={t('postsContainer.search.placeholder')}\n            size=\"small\"\n            style={{ marginBottom: '5px' }}\n          />\n        </Grid>\n        {showAskButton && (\n          <Grid item>\n            <AskQuestionButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n        {showWriteButton && (\n          <Grid item>\n            <WriteArticleButton\n              entity={entity ?? filters.entity}\n              entityPage={entity !== undefined}\n              tags={tags}\n            />\n          </Grid>\n        )}\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography\n              variant=\"h6\"\n              className=\"qetaPostsContainerQuestionCount\"\n            >\n              {t('common.posts', { count: response?.total ?? 0, itemType })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              className=\"qetaPostsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<PostFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            type={type}\n          />\n        </Collapse>\n      )}\n      <PostsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n        entity={entity}\n        showNoQuestionsBtn={showNoQuestionsBtn}\n        onPageSizeChange={onPageSizeChange}\n        pageSize={postsPerPage}\n        entityPage={entity !== undefined}\n        tags={tags}\n        type={type}\n        page={page}\n        pageCount={pageCount}\n        onPageChange={onPageChange}\n        onRankUpdate={() => retry()}\n        collectionId={props.collectionId}\n        allowRanking={allowRanking}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsGrid/PostsGridContent.esm.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Progress, WarningPanel } from '@backstage/core-components';
+import { WarningPanel } from '@backstage/core-components';
 import { NoPostsCard } from '../PostsContainer/NoPostsCard.esm.js';
 import { Box, Grid } from '@material-ui/core';
 import { PostsGridItem } from './PostsGridItem.esm.js';
@@ -10,6 +10,7 @@ import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { QetaPagination } from '../QetaPagination/QetaPagination.esm.js';
+import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 
 const PostsGridContent = (props) => {
   const {
@@ -31,7 +32,7 @@ const PostsGridContent = (props) => {
   const { t } = useTranslation();
   const gridRef = useRef(null);
   useEffect(() => {
-    if (!initialLoad) {
+    if (!loading) {
       setInitialLoad(false);
     }
   }, [initialLoad, loading]);
@@ -47,8 +48,11 @@ const PostsGridContent = (props) => {
     }
     onPageSizeChange(Number.parseInt(event.target.value, 10));
   };
-  if (loading && initialLoad) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
+  if (loading) {
+    if (initialLoad) {
+      return /* @__PURE__ */ React.createElement(LoadingGrid, null);
+    }
+    return null;
   }
   const itemType = type ?? "post";
   if (error || response === void 0) {
@@ -61,7 +65,7 @@ const PostsGridContent = (props) => {
       error?.message
     );
   }
-  if (initialLoad && (!response.posts || response.posts.length === 0)) {
+  if (!response.posts || response.posts.length === 0) {
     return /* @__PURE__ */ React.createElement(
       NoPostsCard,
       {
@@ -82,7 +86,17 @@ const PostsGridContent = (props) => {
       style: { marginTop: "1rem" }
     },
     response.posts.map((p) => {
-      return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, xl: 6, key: p.id }, /* @__PURE__ */ React.createElement(PostsGridItem, { post: p, type, entity }));
+      return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12, key: p.id }, /* @__PURE__ */ React.createElement(
+        PostsGridItem,
+        {
+          post: p,
+          type,
+          entity,
+          allowRanking: props.allowRanking,
+          onRankUpdate: props.onRankUpdate,
+          collectionId: props.collectionId
+        }
+      ));
     })
   ), /* @__PURE__ */ React.createElement(
     QetaPagination,

package/dist/components/PostsGrid/PostsGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostsGridContent.esm.js","sources":["../../../src/components/PostsGrid/PostsGridContent.tsx"],"sourcesContent":["import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { NoPostsCard } from '../PostsContainer/NoPostsCard';\nimport { Box, Grid } from '@material-ui/core';\nimport { PostsGridItem } from './PostsGridItem';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\n\nexport const PostsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  onPageSizeChange: (size: number) => void;\n  pageSize: number;\n  entityPage?: boolean;\n  type?: PostType;\n  onPageChange: (page: number) => void;\n  page: number;\n  pageCount: number;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    entity,\n    showNoQuestionsBtn = true,\n    onPageSizeChange,\n    pageSize,\n    entityPage,\n    tags,\n    type,\n    onPageChange,\n    page,\n    pageCount,\n  } = props;\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!initialLoad) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (gridRef.current) {\n      gridRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (\n    event: React.ChangeEvent<{ value: unknown }>,\n  ) => {\n    if (gridRef.current) {\n      gridRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading && initialLoad) {\n    return <Progress />;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (initialLoad && (!response.posts || response.posts.length === 0)) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  return (\n    <div ref={gridRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostsGrid\">\n        <Grid\n          container\n          direction=\"row\"\n          alignItems=\"stretch\"\n          style={{ marginTop: '1rem' }}\n        >\n          {response.posts.map(p => {\n            return (\n              <Grid item xs={12} xl={6} key={p.id}>\n                <PostsGridItem post={p} type={type} entity={entity} />\n              </Grid>\n            );\n          })}\n        </Grid>\n        <QetaPagination\n          pageSize={pageSize}\n          handlePageChange={handlePageChange}\n          handlePageSizeChange={handlePageSizeChange}\n          page={page}\n          pageCount={pageCount}\n          tooltip={t('postsList.postsPerPage', { itemType })}\n        />\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PostsGridContent.esm.js","sources":["../../../src/components/PostsGrid/PostsGridContent.tsx"],"sourcesContent":["import { PostsResponse, PostType } from '@drodil/backstage-plugin-qeta-common';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { WarningPanel } from '@backstage/core-components';\nimport { NoPostsCard } from '../PostsContainer/NoPostsCard';\nimport { Box, Grid } from '@material-ui/core';\nimport { PostsGridItem } from './PostsGridItem';\nimport { useTranslation } from '../../hooks';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\n\nexport const PostsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: PostsResponse;\n  entity?: string;\n  tags?: string[];\n  showNoQuestionsBtn?: boolean;\n  onPageSizeChange: (size: number) => void;\n  pageSize: number;\n  entityPage?: boolean;\n  type?: PostType;\n  onPageChange: (page: number) => void;\n  page: number;\n  pageCount: number;\n  allowRanking?: boolean;\n  onRankUpdate?: () => void;\n  collectionId?: number;\n}) => {\n  const {\n    loading,\n    error,\n    response,\n    entity,\n    showNoQuestionsBtn = true,\n    onPageSizeChange,\n    pageSize,\n    entityPage,\n    tags,\n    type,\n    onPageChange,\n    page,\n    pageCount,\n  } = props;\n  const [initialLoad, setInitialLoad] = useState(true);\n  const { t } = useTranslation();\n  const gridRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!loading) {\n      setInitialLoad(false);\n    }\n  }, [initialLoad, loading]);\n\n  const handlePageChange = (\n    _event: React.ChangeEvent<unknown>,\n    value: number,\n  ) => {\n    if (gridRef.current) {\n      gridRef.current.scrollIntoView();\n    }\n    onPageChange(value);\n  };\n\n  const handlePageSizeChange = (\n    event: React.ChangeEvent<{ value: unknown }>,\n  ) => {\n    if (gridRef.current) {\n      gridRef.current.scrollIntoView();\n    }\n    onPageSizeChange(Number.parseInt(event.target.value as string, 10));\n  };\n\n  if (loading) {\n    if (initialLoad) {\n      return <LoadingGrid />;\n    }\n    return null;\n  }\n\n  const itemType = (type ?? 'post') as any;\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.posts || response.posts.length === 0) {\n    return (\n      <NoPostsCard\n        showNoPostsBtn={showNoQuestionsBtn}\n        entity={entity}\n        entityPage={entityPage}\n        tags={tags}\n        type={type}\n      />\n    );\n  }\n\n  return (\n    <div ref={gridRef}>\n      <Box sx={{ mt: 2 }} className=\"qetaPostsGrid\">\n        <Grid\n          container\n          direction=\"row\"\n          alignItems=\"stretch\"\n          style={{ marginTop: '1rem' }}\n        >\n          {response.posts.map(p => {\n            return (\n              <Grid item xs={12} key={p.id}>\n                <PostsGridItem\n                  post={p}\n                  type={type}\n                  entity={entity}\n                  allowRanking={props.allowRanking}\n                  onRankUpdate={props.onRankUpdate}\n                  collectionId={props.collectionId}\n                />\n              </Grid>\n            );\n          })}\n        </Grid>\n        <QetaPagination\n          pageSize={pageSize}\n          handlePageChange={handlePageChange}\n          handlePageSizeChange={handlePageSizeChange}\n          page={page}\n          pageCount={pageCount}\n          tooltip={t('postsList.postsPerPage', { itemType })}\n        />\n      </Box>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostsGrid/PostsGridItem.esm.js

@@ -1,24 +1,29 @@
 import { truncate, removeMarkdownFormatting } from '@drodil/backstage-plugin-qeta-common';
 import React, { useState, useEffect } from 'react';
 import { useSignal } from '@backstage/plugin-signals-react';
-import { useRouteRef } from '@backstage/core-plugin-api';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { questionRouteRef, articleRouteRef, userRouteRef } from '../../routes.esm.js';
-import { Card, CardActionArea, CardMedia, CardContent, Typography, Box, Avatar } from '@material-ui/core';
+import { Card, CardActionArea, CardMedia, CardContent, Typography, Box, Avatar, Tooltip, IconButton } from '@material-ui/core';
 import DOMPurify from 'dompurify';
 import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
 import { Link } from '@backstage/core-components';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
-import '../../api.esm.js';
+import { qetaApiRef } from '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
+import VerticalAlignTopIcon from '@material-ui/icons/VerticalAlignTop';
+import VerticalAlignBottomIcon from '@material-ui/icons/VerticalAlignBottom';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 
 const PostsGridItem = (props) => {
-  const { post, entity } = props;
+  const { post, entity, allowRanking, onRankUpdate, collectionId } = props;
   const [views, setViews] = useState(post.views);
+  const qetaApi = useApi(qetaApiRef);
   const { t } = useTranslation();
   const { lastSignal } = useSignal(`qeta:post_${post.id}`);
   useEffect(() => {
@@ -36,6 +41,16 @@ const PostsGridItem = (props) => {
   const href = entity ? `${route({
     id: post.id.toString(10)
   })}?entity=${entity}` : route({ id: post.id.toString(10) });
+  const rank = (direction) => {
+    if (!collectionId) {
+      return;
+    }
+    qetaApi.rankPostInCollection(collectionId, post.id, direction).then((res) => {
+      if (res) {
+        onRankUpdate?.();
+      }
+    });
+  };
   return /* @__PURE__ */ React.createElement(Card, { style: { height: "100%" } }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => navigate(href) }, post.headerImage && /* @__PURE__ */ React.createElement(
     CardMedia,
     {
@@ -55,7 +70,20 @@ const PostsGridItem = (props) => {
       variant: "rounded"
     },
     initials
-  ), post.author === "anonymous" ? t("common.anonymousAuthor") : /* @__PURE__ */ React.createElement(Link, { to: `${userRoute()}/${post.author}` }, name), " ", /* @__PURE__ */ React.createElement(Link, { to: href, className: "qetaPostListItemQuestionBtn" }, /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: post.created })), " \xB7 ", t("common.views", { count: views })))));
+  ), post.author === "anonymous" ? t("common.anonymousAuthor") : /* @__PURE__ */ React.createElement(Link, { to: `${userRoute()}/${post.author}` }, name), " ", /* @__PURE__ */ React.createElement(Link, { to: href, className: "qetaPostListItemQuestionBtn" }, /* @__PURE__ */ React.createElement(RelativeTimeWithTooltip, { value: post.created })), " \xB7 ", t("common.views", { count: views }))), allowRanking && /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      style: {
+        paddingRight: "0.2rem",
+        paddingTop: "0.5rem",
+        float: "right"
+      }
+    },
+    /* @__PURE__ */ React.createElement(Tooltip, { title: t("ranking.top") }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => rank("top") }, /* @__PURE__ */ React.createElement(VerticalAlignTopIcon, null))),
+    /* @__PURE__ */ React.createElement(Tooltip, { title: t("ranking.up") }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => rank("up") }, /* @__PURE__ */ React.createElement(KeyboardArrowUpIcon, null))),
+    /* @__PURE__ */ React.createElement(Tooltip, { title: t("ranking.down") }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => rank("down") }, /* @__PURE__ */ React.createElement(KeyboardArrowDownIcon, null))),
+    /* @__PURE__ */ React.createElement(Tooltip, { title: t("ranking.bottom") }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: () => rank("bottom") }, /* @__PURE__ */ React.createElement(VerticalAlignBottomIcon, null)))
+  )));
 };
 
 export { PostsGridItem };