@drodil/backstage-plugin-qeta-react 3.12.5 → 3.13.1

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

@@ -1 +1 @@
-{"version":3,"file":"AnswersContainer.esm.js","sources":["../../../src/components/AnswersContainer/AnswersContainer.tsx"],"sourcesContent":["import Collapse from '@mui/material/Collapse';\nimport Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Grid from '@mui/material/Grid';\nimport Button from '@mui/material/Button';\nimport React, { useEffect } from 'react';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport FilterList from '@mui/icons-material/FilterList';\nimport { useSearchParams } from 'react-router-dom';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useAnalytics } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { getFiltersWithDateRange } from '../../utils/utils';\nimport {\n  AnswerFilters,\n  FilterKey,\n  filterKeys,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport { AnswerList } from './AnswerList';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport { SearchBar } from '../SearchBar/SearchBar';\n\nexport interface AnswersContainerProps {\n  tags?: string[];\n  author?: string;\n  entity?: string;\n  showFilters?: boolean;\n  showTitle?: boolean;\n  title?: string;\n}\n\nexport type AnswerFilterChange = {\n  key: keyof AnswerFilters;\n  value?: AnswerFilters[keyof AnswerFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-answer-filters-expanded';\n\nexport const AnswersContainer = (props: AnswersContainerProps) => {\n  const { tags, author, entity, showFilters, showTitle, title } = props;\n  const analytics = useAnalytics();\n  const [page, setPage] = React.useState(1);\n  const [answersPerPage, setAnswersPerPage] = React.useState(10);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [filters, setFilters] = React.useState<AnswerFilters>({\n    order: 'desc',\n    orderBy: 'created',\n    searchQuery: '',\n    dateRange: '',\n    entities: entity ? [entity] : undefined,\n    tags: tags ?? [],\n    noVotes: 'false',\n  });\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onPageChange = (value: number) => {\n    setPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('page', String(value));\n      return newValue;\n    });\n  };\n\n  const onFilterChange = (\n    changes: AnswerFilterChange | AnswerFilterChange[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n    setSearchParams(prev => {\n      const newValue = prev;\n      for (const { key, value } of changesArray) {\n        if (!value || value === 'false') {\n          newValue.delete(key);\n        } else if (Array.isArray(value)) {\n          if (value.length === 0) {\n            newValue.delete(key);\n          } else {\n            newValue.set(key, value.join(','));\n          }\n        } else if (value.length > 0) {\n          newValue.set(key, value);\n        } else {\n          newValue.delete(key);\n        }\n      }\n      return newValue;\n    });\n  };\n\n  const onSearchQueryChange = (query: string) => {\n    onPageChange(1);\n    if (query) {\n      analytics.captureEvent('qeta_search', query);\n    }\n    setSearchQuery(query);\n  };\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    let filtersApplied = false;\n    searchParams.forEach((value, key) => {\n      try {\n        if (key === 'page') {\n          const pv = Number.parseInt(value, 10);\n          if (pv > 0) {\n            setPage(pv);\n          } else {\n            setPage(1);\n          }\n        } else if (key === 'answersPerPage') {\n          const qpp = Number.parseInt(value, 10);\n          if (qpp > 0) setAnswersPerPage(qpp);\n        } else if (filterKeys.includes(key as FilterKey)) {\n          filtersApplied = true;\n          if (key === 'tags') {\n            filters.tags = filterTags(value) ?? [];\n          } else {\n            (filters as any)[key] = value;\n          }\n        }\n      } catch (_e) {\n        // NOOP\n      }\n    });\n    setFilters(filters);\n    if (filtersApplied) {\n      setShowFilterPanel(true);\n    }\n  }, [searchParams, filters]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getAnswers({\n        limit: answersPerPage,\n        offset: (page - 1) * answersPerPage,\n        author,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [page, filters, answersPerPage],\n  );\n\n  const onPageSizeChange = (value: number) => {\n    if (response) {\n      let newPage = page;\n      while (newPage * value > response.total) {\n        newPage -= 1;\n      }\n      onPageChange(Math.max(1, newPage));\n    }\n    setAnswersPerPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('answersPerPage', String(value));\n      return newValue;\n    });\n  };\n\n  let shownTitle = title;\n  let link = undefined;\n  if (author) {\n    shownTitle = `${t('answerContainer.title.answersBy')} `;\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = `${t('answerContainer.title.answersAbout')} `;\n    link = <EntityRefLink entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = t('answerContainer.title.answersTagged', {\n      tags: tags.join(', '),\n    });\n  }\n\n  return (\n    <Box className=\"qetaAnswersContainer\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaAnswersContainerTitle\"\n          style={{ marginBottom: '1.5em' }}\n        >\n          {shownTitle} {link}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearchQueryChange}\n            label={t('answerContainer.search.label')}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Typography variant=\"h6\" className=\"qetaAnswersContainerAnswerCount\">\n            {t('common.answers', { count: response?.total ?? 0 })}\n          </Typography>\n        </Grid>\n        {(showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaAnswerContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<AnswerFilters>\n            onChange={onFilterChange}\n            filters={filters}\n          />\n        </Collapse>\n      )}\n\n      <AnswerList\n        loading={loading}\n        error={error}\n        response={response}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n        entity={entity}\n        page={page}\n        pageSize={answersPerPage}\n        entityPage={entity !== undefined}\n        tags={tags}\n      />\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswersContainer.esm.js","sources":["../../../src/components/AnswersContainer/AnswersContainer.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { useSearchParams } from 'react-router-dom';\nimport { EntityRefLink } from '@backstage/plugin-catalog-react';\nimport { useAnalytics } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { getFiltersWithDateRange } from '../../utils/utils';\nimport {\n  AnswerFilters,\n  FilterKey,\n  filterKeys,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport { AnswerList } from './AnswerList';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport FilterList from '@material-ui/icons/FilterList';\n\nexport interface AnswersContainerProps {\n  tags?: string[];\n  author?: string;\n  entity?: string;\n  showFilters?: boolean;\n  showTitle?: boolean;\n  title?: string;\n}\n\nexport type AnswerFilterChange = {\n  key: keyof AnswerFilters;\n  value?: AnswerFilters[keyof AnswerFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-answer-filters-expanded';\n\nexport const AnswersContainer = (props: AnswersContainerProps) => {\n  const { tags, author, entity, showFilters, showTitle, title } = props;\n  const analytics = useAnalytics();\n  const [page, setPage] = React.useState(1);\n  const [answersPerPage, setAnswersPerPage] = React.useState(10);\n  const [showFilterPanel, setShowFilterPanel] = React.useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [filters, setFilters] = React.useState<AnswerFilters>({\n    order: 'desc',\n    orderBy: 'created',\n    searchQuery: '',\n    dateRange: '',\n    entities: entity ? [entity] : undefined,\n    tags: tags ?? [],\n    noVotes: 'false',\n  });\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const onPageChange = (value: number) => {\n    setPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('page', String(value));\n      return newValue;\n    });\n  };\n\n  const onFilterChange = (\n    changes: AnswerFilterChange | AnswerFilterChange[],\n  ) => {\n    const changesArray = Array.isArray(changes) ? changes : [changes];\n    setPage(1);\n    setFilters(prev => {\n      const newValue = { ...prev };\n      for (const { key, value } of changesArray) {\n        (newValue as any)[key] = value;\n      }\n      return newValue;\n    });\n    setSearchParams(prev => {\n      const newValue = prev;\n      for (const { key, value } of changesArray) {\n        if (!value || value === 'false') {\n          newValue.delete(key);\n        } else if (Array.isArray(value)) {\n          if (value.length === 0) {\n            newValue.delete(key);\n          } else {\n            newValue.set(key, value.join(','));\n          }\n        } else if (value.length > 0) {\n          newValue.set(key, value);\n        } else {\n          newValue.delete(key);\n        }\n      }\n      return newValue;\n    });\n  };\n\n  const onSearchQueryChange = (query: string) => {\n    onPageChange(1);\n    if (query) {\n      analytics.captureEvent('qeta_search', query);\n    }\n    setSearchQuery(query);\n  };\n\n  useDebounce(\n    () => {\n      if (filters.searchQuery !== searchQuery) {\n        setFilters({ ...filters, searchQuery: searchQuery });\n      }\n    },\n    400,\n    [searchQuery],\n  );\n\n  useEffect(() => {\n    let filtersApplied = false;\n    searchParams.forEach((value, key) => {\n      try {\n        if (key === 'page') {\n          const pv = Number.parseInt(value, 10);\n          if (pv > 0) {\n            setPage(pv);\n          } else {\n            setPage(1);\n          }\n        } else if (key === 'answersPerPage') {\n          const qpp = Number.parseInt(value, 10);\n          if (qpp > 0) setAnswersPerPage(qpp);\n        } else if (filterKeys.includes(key as FilterKey)) {\n          filtersApplied = true;\n          if (key === 'tags') {\n            filters.tags = filterTags(value) ?? [];\n          } else {\n            (filters as any)[key] = value;\n          }\n        }\n      } catch (_e) {\n        // NOOP\n      }\n    });\n    setFilters(filters);\n    if (filtersApplied) {\n      setShowFilterPanel(true);\n    }\n  }, [searchParams, filters]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getAnswers({\n        limit: answersPerPage,\n        offset: (page - 1) * answersPerPage,\n        author,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [page, filters, answersPerPage],\n  );\n\n  const onPageSizeChange = (value: number) => {\n    if (response) {\n      let newPage = page;\n      while (newPage * value > response.total) {\n        newPage -= 1;\n      }\n      onPageChange(Math.max(1, newPage));\n    }\n    setAnswersPerPage(value);\n    setSearchParams(prev => {\n      const newValue = prev;\n      newValue.set('answersPerPage', String(value));\n      return newValue;\n    });\n  };\n\n  let shownTitle = title;\n  let link = undefined;\n  if (author) {\n    shownTitle = `${t('answerContainer.title.answersBy')} `;\n    link = <EntityRefLink entityRef={author} hideIcon defaultKind=\"user\" />;\n  } else if (entity) {\n    shownTitle = `${t('answerContainer.title.answersAbout')} `;\n    link = <EntityRefLink entityRef={entity} />;\n  } else if (tags) {\n    shownTitle = t('answerContainer.title.answersTagged', {\n      tags: tags.join(', '),\n    });\n  }\n\n  return (\n    <Box className=\"qetaAnswersContainer\">\n      {showTitle && (\n        <Typography\n          variant=\"h5\"\n          className=\"qetaAnswersContainerTitle\"\n          style={{ marginBottom: '1.5em' }}\n        >\n          {shownTitle} {link}\n        </Typography>\n      )}\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={onSearchQueryChange}\n            label={t('answerContainer.search.label')}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Typography variant=\"h6\" className=\"qetaAnswersContainerAnswerCount\">\n            {t('common.answers', { count: response?.total ?? 0 })}\n          </Typography>\n        </Grid>\n        {(showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaAnswerContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<AnswerFilters>\n            onChange={onFilterChange}\n            filters={filters}\n          />\n        </Collapse>\n      )}\n\n      <AnswerList\n        loading={loading}\n        error={error}\n        response={response}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n        entity={entity}\n        page={page}\n        pageSize={answersPerPage}\n        entityPage={entity !== undefined}\n        tags={tags}\n      />\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ArticleContent/ArticleButtons.esm.js

@@ -1,43 +1,49 @@
 import React__default from 'react';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Grid';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import { makeStyles, Grid, Tooltip, IconButton, Typography } from '@material-ui/core';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
 import { FavoriteButton } from '../Buttons/FavoriteButton.esm.js';
 import { LinkButton } from '../Buttons/LinkButton.esm.js';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { editArticleRouteRef } from '../../routes.esm.js';
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from '@material-ui/icons/Delete';
 import { DeleteModal } from '../DeleteModal/DeleteModal.esm.js';
-import EditIcon from '@mui/icons-material/Edit';
+import EditIcon from '@material-ui/icons/Edit';
 import { useVoting } from '../../hooks/useVoting.esm.js';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
-import { styled } from '@mui/system';
 
-const ArticleButtonContainer = styled("div", {
-  name: "QetaArticleButtonContainer"
-})(({ theme }) => ({
-  width: "100%",
-  paddingTop: "0.5em",
-  paddingBottom: "0.5em",
-  borderTop: `1px solid ${theme.palette.background.paper}`,
-  borderBottom: `1px solid ${theme.palette.background.paper}`
-}));
+const useLocalStyles = makeStyles(
+  (theme) => {
+    return {
+      container: {
+        width: "100%",
+        paddingTop: "0.5rem",
+        paddingBottom: "0.5rem",
+        borderTop: `1px solid ${theme.palette.background.paper}`,
+        borderBottom: `1px solid ${theme.palette.background.paper}`
+      },
+      scoreText: {
+        marginLeft: "0.5rem",
+        userSelect: "none"
+      }
+    };
+  },
+  { name: "QetaArticleButtons" }
+);
 const ArticleButtons = (props) => {
   const { post } = props;
   const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } = useVoting(post);
+  const styles = useLocalStyles();
   const { t } = useTranslation();
   const editArticleRoute = useRouteRef(editArticleRouteRef);
   const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
   const handleDeleteModalClose = () => setDeleteModalOpen(false);
   const own = props.post.own ?? false;
-  return /* @__PURE__ */ React__default.createElement(ArticleButtonContainer, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: voteUpTooltip }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "space-between" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: voteUpTooltip }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
     IconButton,
     {
       "aria-label": "vote up",
@@ -59,14 +65,7 @@ const ArticleButtons = (props) => {
       onClick: voteDown
     },
     /* @__PURE__ */ React__default.createElement(ArrowDownward, null)
-  ))), /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("common.score", { score: score.toString(10) }) }, /* @__PURE__ */ React__default.createElement(
-    Typography,
-    {
-      sx: { marginLeft: "0.5em", userSelect: "none" },
-      display: "inline"
-    },
-    score
-  ))), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FavoriteButton, { entity: post }), /* @__PURE__ */ React__default.createElement(LinkButton, { entity: post }), (post.canEdit || post.canDelete) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, post.canDelete && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("articlePage.deleteButton") }, /* @__PURE__ */ React__default.createElement(IconButton, { size: "small", onClick: handleDeleteModalOpen }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))), /* @__PURE__ */ React__default.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("common.score", { score: score.toString(10) }) }, /* @__PURE__ */ React__default.createElement(Typography, { className: styles.scoreText, display: "inline" }, score))), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(FavoriteButton, { entity: post }), /* @__PURE__ */ React__default.createElement(LinkButton, { entity: post }), (post.canEdit || post.canDelete) && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, post.canDelete && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("articlePage.deleteButton") }, /* @__PURE__ */ React__default.createElement(IconButton, { size: "small", onClick: handleDeleteModalOpen }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))), /* @__PURE__ */ React__default.createElement(
     DeleteModal,
     {
       open: deleteModalOpen,
@@ -85,5 +84,5 @@ const ArticleButtons = (props) => {
   ))))));
 };
 
-export { ArticleButtons };
+export { ArticleButtons, useLocalStyles };
 //# sourceMappingURL=ArticleButtons.esm.js.map

package/dist/components/ArticleContent/ArticleButtons.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleButtons.esm.js","sources":["../../../src/components/ArticleContent/ArticleButtons.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport ArrowUpward from '@mui/icons-material/ArrowUpward';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport Grid from '@mui/material/Grid';\nimport ArrowDownward from '@mui/icons-material/ArrowDownward';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { editArticleRouteRef } from '../../routes';\nimport DeleteIcon from '@mui/icons-material/Delete';\nimport { DeleteModal } from '../DeleteModal';\nimport EditIcon from '@mui/icons-material/Edit';\nimport { useVoting } from '../../hooks/useVoting';\nimport { useTranslation } from '../../hooks';\nimport { styled } from '@mui/system';\n\nconst ArticleButtonContainer = styled('div', {\n  name: 'QetaArticleButtonContainer',\n})(({ theme }) => ({\n  width: '100%',\n  paddingTop: '0.5em',\n  paddingBottom: '0.5em',\n  borderTop: `1px solid ${theme.palette.background.paper}`,\n  borderBottom: `1px solid ${theme.palette.background.paper}`,\n}));\n\nexport const ArticleButtons = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } =\n    useVoting(post);\n  const { t } = useTranslation();\n  const editArticleRoute = useRouteRef(editArticleRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n\n  const own = props.post.own ?? false;\n\n  return (\n    <ArticleButtonContainer>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Tooltip title={voteUpTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote up\"\n                color={ownVote > 0 ? 'primary' : 'default'}\n                className={ownVote > 0 ? 'qetaVoteUpSelected' : 'qetaVoteUp'}\n                disabled={own}\n                size=\"small\"\n                onClick={voteUp}\n              >\n                <ArrowUpward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={voteDownTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote down\"\n                color={ownVote < 0 ? 'primary' : 'default'}\n                className={\n                  ownVote < 0 ? 'qetaVoteDownSelected' : 'qetaVoteDown'\n                }\n                disabled={own}\n                size=\"small\"\n                onClick={voteDown}\n              >\n                <ArrowDownward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={t('common.score', { score: score.toString(10) })}>\n            <Typography\n              sx={{ marginLeft: '0.5em', userSelect: 'none' }}\n              display=\"inline\"\n            >\n              {score}\n            </Typography>\n          </Tooltip>\n        </Grid>\n        <Grid item>\n          <FavoriteButton entity={post} />\n          <LinkButton entity={post} />\n          {(post.canEdit || post.canDelete) && (\n            <>\n              {post.canDelete && (\n                <>\n                  <Tooltip title={t('articlePage.deleteButton')}>\n                    <IconButton size=\"small\" onClick={handleDeleteModalOpen}>\n                      <DeleteIcon />\n                    </IconButton>\n                  </Tooltip>\n                  <DeleteModal\n                    open={deleteModalOpen}\n                    onClose={handleDeleteModalClose}\n                    entity={post}\n                  />\n                </>\n              )}\n              {post.canEdit && (\n                <Tooltip title={t('articlePage.editButton')}>\n                  <IconButton\n                    size=\"small\"\n                    href={editArticleRoute({\n                      id: post.id.toString(10),\n                    })}\n                  >\n                    <EditIcon />\n                  </IconButton>\n                </Tooltip>\n              )}\n            </>\n          )}\n        </Grid>\n      </Grid>\n    </ArticleButtonContainer>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ArticleButtons.esm.js","sources":["../../../src/components/ArticleContent/ArticleButtons.tsx"],"sourcesContent":["import { PostResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport ArrowUpward from '@material-ui/icons/ArrowUpward';\nimport {\n  Grid,\n  IconButton,\n  makeStyles,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport ArrowDownward from '@material-ui/icons/ArrowDownward';\nimport { FavoriteButton } from '../Buttons/FavoriteButton';\nimport { LinkButton } from '../Buttons/LinkButton';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { editArticleRouteRef } from '../../routes';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { DeleteModal } from '../DeleteModal';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { useVoting } from '../../hooks/useVoting';\nimport { useTranslation } from '../../hooks';\n\nexport type QetaArticleButtonsClassKey = 'container' | 'scoreText';\n\nexport const useLocalStyles = makeStyles(\n  theme => {\n    return {\n      container: {\n        width: '100%',\n        paddingTop: '0.5rem',\n        paddingBottom: '0.5rem',\n        borderTop: `1px solid ${theme.palette.background.paper}`,\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n      },\n      scoreText: {\n        marginLeft: '0.5rem',\n        userSelect: 'none',\n      },\n    };\n  },\n  { name: 'QetaArticleButtons' },\n);\n\nexport const ArticleButtons = (props: { post: PostResponse }) => {\n  const { post } = props;\n  const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } =\n    useVoting(post);\n  const styles = useLocalStyles();\n  const { t } = useTranslation();\n  const editArticleRoute = useRouteRef(editArticleRouteRef);\n  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n\n  const own = props.post.own ?? false;\n\n  return (\n    <div className={styles.container}>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item>\n          <Tooltip title={voteUpTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote up\"\n                color={ownVote > 0 ? 'primary' : 'default'}\n                className={ownVote > 0 ? 'qetaVoteUpSelected' : 'qetaVoteUp'}\n                disabled={own}\n                size=\"small\"\n                onClick={voteUp}\n              >\n                <ArrowUpward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={voteDownTooltip}>\n            <span>\n              <IconButton\n                aria-label=\"vote down\"\n                color={ownVote < 0 ? 'primary' : 'default'}\n                className={\n                  ownVote < 0 ? 'qetaVoteDownSelected' : 'qetaVoteDown'\n                }\n                disabled={own}\n                size=\"small\"\n                onClick={voteDown}\n              >\n                <ArrowDownward />\n              </IconButton>\n            </span>\n          </Tooltip>\n          <Tooltip title={t('common.score', { score: score.toString(10) })}>\n            <Typography className={styles.scoreText} display=\"inline\">\n              {score}\n            </Typography>\n          </Tooltip>\n        </Grid>\n        <Grid item>\n          <FavoriteButton entity={post} />\n          <LinkButton entity={post} />\n          {(post.canEdit || post.canDelete) && (\n            <>\n              {post.canDelete && (\n                <>\n                  <Tooltip title={t('articlePage.deleteButton')}>\n                    <IconButton size=\"small\" onClick={handleDeleteModalOpen}>\n                      <DeleteIcon />\n                    </IconButton>\n                  </Tooltip>\n                  <DeleteModal\n                    open={deleteModalOpen}\n                    onClose={handleDeleteModalClose}\n                    entity={post}\n                  />\n                </>\n              )}\n              {post.canEdit && (\n                <Tooltip title={t('articlePage.editButton')}>\n                  <IconButton\n                    size=\"small\"\n                    href={editArticleRoute({\n                      id: post.id.toString(10),\n                    })}\n                  >\n                    <EditIcon />\n                  </IconButton>\n                </Tooltip>\n              )}\n            </>\n          )}\n        </Grid>\n      </Grid>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ArticleContent/ArticleContent.esm.js

@@ -1,6 +1,4 @@
-import Typography from '@mui/material/Typography';
-import Avatar from '@mui/material/Avatar';
-import Grid from '@mui/material/Grid';
+import { makeStyles, Typography, Grid, Avatar } from '@material-ui/core';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import React__default from 'react';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
@@ -14,22 +12,39 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
-import { styled } from '@mui/system';
 
-const HeaderImage = styled("img", { name: "QetaArticleHeaderImage" })(
-  ({ theme }) => ({
-    marginBottom: "2em",
-    marginTop: "2em",
-    height: "250px",
-    objectFit: "cover",
-    width: "100%",
-    borderColor: theme.palette.background.paper,
-    borderStyle: "solid",
-    borderWidth: "1px"
-  })
+const useStyles = makeStyles(
+  (theme) => {
+    return {
+      content: {
+        fontSize: "110%",
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+        borderBottom: `1px solid ${theme.palette.background.paper}`
+      },
+      headerImage: {
+        marginBottom: theme.spacing(2),
+        marginTop: theme.spacing(2),
+        height: "250px",
+        objectFit: "cover",
+        width: "100%",
+        border: `1px solid ${theme.palette.background.paper}`,
+        boxShadow: theme.shadows[1]
+      },
+      commentSection: {
+        borderBottom: `1px solid ${theme.palette.background.paper}`,
+        paddingBottom: theme.spacing(2),
+        marginBottom: theme.spacing(2),
+        marginLeft: 0
+      }
+    };
+  },
+  { name: "QetaArticle" }
 );
 const ArticleContent = (props) => {
   const { post, views } = props;
+  const styles = useStyles();
   const { t } = useTranslation();
   const { name, initials, user } = useEntityAuthor(post);
   const [postEntity, setPostEntity] = React__default.useState(post);
@@ -48,44 +63,29 @@ const ArticleContent = (props) => {
       variant: "rounded"
     },
     initials
-  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, name), /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption" }, t("common.views", { count: views }), " ", " \xB7 ", t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: postEntity.created })))), /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, marginTop: 2 }, /* @__PURE__ */ React__default.createElement(ArticleButtons, { post: postEntity })), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, postEntity.headerImage && /* @__PURE__ */ React__default.createElement(HeaderImage, { src: post.headerImage, alt: post.title }), /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, name), /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption" }, t("common.views", { count: views }), " ", " \xB7 ", t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: postEntity.created })))), /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(ArticleButtons, { post: postEntity }))), postEntity.headerImage && /* @__PURE__ */ React__default.createElement(
+    "img",
+    {
+      src: post.headerImage,
+      alt: post.title,
+      className: styles.headerImage
+    }
+  ), /* @__PURE__ */ React__default.createElement(
     MarkdownRenderer,
     {
       content: postEntity.content,
-      sx: {
-        fontSize: "113% !important",
-        paddingTop: postEntity.headerImage ? 2 : 4,
-        paddingBottom: 4
-      }
+      className: styles.content
     }
-  )), /* @__PURE__ */ React__default.createElement(
-    Grid,
-    {
-      item: true,
-      xs: 12,
-      sx: {
-        borderColor: "background.paper",
-        borderBottomStyle: "solid",
-        borderBottomWidth: "1px",
-        paddingBottom: 4,
-        marginBottom: 2
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(TagsAndEntities, { entity: postEntity })
-  ), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, t("common.comments")), /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, t("common.comments")), /* @__PURE__ */ React__default.createElement(
     CommentSection,
     {
+      className: styles.commentSection,
       post: postEntity,
       onCommentDelete: onCommentAction,
-      onCommentPost: onCommentAction,
-      sx: {
-        marginBottom: 2,
-        paddingBottom: 2,
-        marginLeft: "0"
-      }
+      onCommentPost: onCommentAction
     }
-  ))));
+  ), /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(TagsAndEntities, { entity: postEntity }))));
 };
 
-export { ArticleContent };
+export { ArticleContent, useStyles };
 //# sourceMappingURL=ArticleContent.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ArticleContent.esm.js","sources":["../../../src/components/ArticleContent/ArticleContent.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport React from 'react';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { ArticleButtons } from './ArticleButtons';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { styled } from '@mui/system';\n\nconst HeaderImage = styled('img', { name: 'QetaArticleHeaderImage' })(\n  ({ theme }) => ({\n    marginBottom: '2em',\n    marginTop: '2em',\n    height: '250px',\n    objectFit: 'cover',\n    width: '100%',\n    borderColor: theme.palette.background.paper,\n    borderStyle: 'solid',\n    borderWidth: '1px',\n  }),\n);\n\nexport const ArticleContent = (props: {\n  post: PostResponse;\n  views: number;\n}) => {\n  const { post, views } = props;\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(post);\n  const [postEntity, setPostEntity] = React.useState(post);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setPostEntity(q);\n  };\n\n  if (post.type !== 'article') {\n    return (\n      <WarningPanel title=\"Not found\" message=\"Could not find the article\" />\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h2\">{postEntity.title}</Typography>\n      <Grid container alignItems=\"center\">\n        <Grid item>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item>\n          <Typography variant=\"subtitle1\">{name}</Typography>\n          <Typography variant=\"caption\">\n            {t('common.views', { count: views })} {' · '}\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={postEntity.created} />\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid container>\n        <Grid item xs={12} marginTop={2}>\n          <ArticleButtons post={postEntity} />\n        </Grid>\n        <Grid item xs={12}>\n          {postEntity.headerImage && (\n            <HeaderImage src={post.headerImage} alt={post.title} />\n          )}\n          <MarkdownRenderer\n            content={postEntity.content}\n            sx={{\n              fontSize: '113% !important',\n              paddingTop: postEntity.headerImage ? 2 : 4,\n              paddingBottom: 4,\n            }}\n          />\n        </Grid>\n        <Grid\n          item\n          xs={12}\n          sx={{\n            borderColor: 'background.paper',\n            borderBottomStyle: 'solid',\n            borderBottomWidth: '1px',\n            paddingBottom: 4,\n            marginBottom: 2,\n          }}\n        >\n          <TagsAndEntities entity={postEntity} />\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h6\">{t('common.comments')}</Typography>\n          <CommentSection\n            post={postEntity}\n            onCommentDelete={onCommentAction}\n            onCommentPost={onCommentAction}\n            sx={{\n              marginBottom: 2,\n              paddingBottom: 2,\n              marginLeft: '0',\n            }}\n          />\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"ArticleContent.esm.js","sources":["../../../src/components/ArticleContent/ArticleContent.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Avatar, Grid, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport React from 'react';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { ArticleButtons } from './ArticleButtons';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { CommentSection } from '../CommentSection/CommentSection';\nimport { WarningPanel } from '@backstage/core-components';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\n\nexport type QetaArticleContentClassKey =\n  | 'content'\n  | 'headerImage'\n  | 'commentSection';\n\nexport const useStyles = makeStyles(\n  theme => {\n    return {\n      content: {\n        fontSize: '110%',\n        paddingTop: theme.spacing(2),\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n      },\n      headerImage: {\n        marginBottom: theme.spacing(2),\n        marginTop: theme.spacing(2),\n        height: '250px',\n        objectFit: 'cover',\n        width: '100%',\n        border: `1px solid ${theme.palette.background.paper}`,\n        boxShadow: theme.shadows[1],\n      },\n      commentSection: {\n        borderBottom: `1px solid ${theme.palette.background.paper}`,\n        paddingBottom: theme.spacing(2),\n        marginBottom: theme.spacing(2),\n        marginLeft: 0,\n      },\n    };\n  },\n  { name: 'QetaArticle' },\n);\n\nexport const ArticleContent = (props: {\n  post: PostResponse;\n  views: number;\n}) => {\n  const { post, views } = props;\n  const styles = useStyles();\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(post);\n  const [postEntity, setPostEntity] = React.useState(post);\n  const onCommentAction = (q: PostResponse, _?: AnswerResponse) => {\n    setPostEntity(q);\n  };\n\n  if (post.type !== 'article') {\n    return (\n      <WarningPanel title=\"Not found\" message=\"Could not find the article\" />\n    );\n  }\n\n  return (\n    <>\n      <Typography variant=\"h2\">{postEntity.title}</Typography>\n      <Grid container alignItems=\"center\">\n        <Grid item>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid item>\n          <Typography variant=\"subtitle1\">{name}</Typography>\n          <Typography variant=\"caption\">\n            {t('common.views', { count: views })} {' · '}\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={postEntity.created} />\n          </Typography>\n        </Grid>\n      </Grid>\n      <Grid container>\n        <Grid item xs={12}>\n          <ArticleButtons post={postEntity} />\n        </Grid>\n      </Grid>\n      {postEntity.headerImage && (\n        <img\n          src={post.headerImage}\n          alt={post.title}\n          className={styles.headerImage}\n        />\n      )}\n      <MarkdownRenderer\n        content={postEntity.content}\n        className={styles.content}\n      />\n      <Typography variant=\"h6\">{t('common.comments')}</Typography>\n      <CommentSection\n        className={styles.commentSection}\n        post={postEntity}\n        onCommentDelete={onCommentAction}\n        onCommentPost={onCommentAction}\n      />\n      <Grid container>\n        <Grid item xs={12}>\n          <TagsAndEntities entity={postEntity} />\n        </Grid>\n      </Grid>\n    </>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,7 +1,3 @@
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Avatar from '@mui/material/Avatar';
-import Grid from '@mui/material/Grid';
 import React__default from 'react';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import { UpdatedByLink, AuthorLink } from '../Links/Links.esm.js';
@@ -11,63 +7,69 @@ import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
+import { makeStyles, Box, Grid, Typography, Avatar } from '@material-ui/core';
 
+const useStyles = makeStyles(
+  (theme) => ({
+    authorBox: {
+      padding: theme.spacing(1),
+      float: "right",
+      maxWidth: "200px",
+      border: `1px solid ${theme.palette.action.selected}`,
+      "& .avatar": {
+        width: theme.spacing(3),
+        height: theme.spacing(3),
+        fontSize: "1rem"
+      }
+    },
+    authorLink: {
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      whiteSpace: "nowrap"
+    }
+  }),
+  { name: "QetaAuthorBox" }
+);
 const AuthorBox = (props) => {
   const { entity } = props;
   const { t } = useTranslation();
   const { name, initials, user } = useEntityAuthor(entity);
-  return /* @__PURE__ */ React__default.createElement(
-    Box,
+  const styles = useStyles();
+  return /* @__PURE__ */ React__default.createElement(Box, { className: `qetaAuthorBox ${styles.authorBox}` }, /* @__PURE__ */ React__default.createElement(
+    Grid,
     {
-      sx: (theme) => ({
-        padding: 1,
-        float: "right",
-        maxWidth: "200px",
-        border: `1px solid ${theme.palette.action.selected}`,
-        borderRadius: 1,
-        "& .avatar": {
-          width: "2em",
-          height: "2em",
-          fontSize: "1em"
-        }
-      })
+      container: true,
+      alignItems: "stretch",
+      justifyContent: "flex-start",
+      spacing: 0
     },
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React__default.createElement(Typography, { className: "qetaAuthorBoxCreated", variant: "caption" }, t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: entity.created }))),
+    entity.updated && entity.updatedBy && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 } }, /* @__PURE__ */ React__default.createElement(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption" }, t("authorBox.updatedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: entity.updated }), " ", t("authorBox.updatedBy"), " ", /* @__PURE__ */ React__default.createElement(UpdatedByLink, { entity }))),
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 2, style: { paddingTop: 0 } }, /* @__PURE__ */ React__default.createElement(
+      Avatar,
+      {
+        src: user?.spec?.profile?.picture,
+        className: "qetaAuthorBoxAvatar avatar",
+        alt: name,
+        variant: "rounded"
+      },
+      initials
+    )),
     /* @__PURE__ */ React__default.createElement(
       Grid,
       {
-        container: true,
-        alignItems: "stretch",
-        justifyContent: "flex-start",
-        spacing: 0
+        item: true,
+        xs: 10,
+        style: {
+          paddingTop: 0,
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap"
+        }
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0 } }, /* @__PURE__ */ React__default.createElement(Typography, { className: "qetaAuthorBoxCreated", variant: "caption" }, t("authorBox.postedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: entity.created }))),
-      entity.updated && entity.updatedBy && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, style: { paddingBottom: 0, paddingTop: 0 } }, /* @__PURE__ */ React__default.createElement(Typography, { className: "qetaAuthorBoxUpdated", variant: "caption" }, t("authorBox.updatedAtTime"), " ", /* @__PURE__ */ React__default.createElement(RelativeTimeWithTooltip, { value: entity.updated }), " ", t("authorBox.updatedBy"), " ", /* @__PURE__ */ React__default.createElement(UpdatedByLink, { entity }))),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 2, style: { paddingTop: 0 } }, /* @__PURE__ */ React__default.createElement(
-        Avatar,
-        {
-          src: user?.spec?.profile?.picture,
-          className: "qetaAuthorBoxAvatar avatar",
-          alt: name,
-          variant: "rounded"
-        },
-        initials
-      )),
-      /* @__PURE__ */ React__default.createElement(
-        Grid,
-        {
-          item: true,
-          xs: 10,
-          style: {
-            paddingTop: 0,
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap"
-          }
-        },
-        /* @__PURE__ */ React__default.createElement(Box, { style: { paddingLeft: "5px" } }, /* @__PURE__ */ React__default.createElement(AuthorLink, { entity }))
-      )
+      /* @__PURE__ */ React__default.createElement(Box, { style: { paddingLeft: "5px" } }, /* @__PURE__ */ React__default.createElement(AuthorLink, { entity }))
     )
-  );
+  ));
 };
 
 export { AuthorBox };

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

@@ -1 +1 @@
-{"version":3,"file":"AuthorBox.esm.js","sources":["../../../src/components/AuthorBox/AuthorBox.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport Box from '@mui/material/Box';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport React from 'react';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { AuthorLink, UpdatedByLink } from '../Links';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\n\nexport const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {\n  const { entity } = props;\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(entity);\n\n  return (\n    <Box\n      sx={theme => ({\n        padding: 1,\n        float: 'right',\n        maxWidth: '200px',\n        border: `1px solid ${theme.palette.action.selected}`,\n        borderRadius: 1,\n        '& .avatar': {\n          width: '2em',\n          height: '2em',\n          fontSize: '1em',\n        },\n      })}\n    >\n      <Grid\n        container\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        spacing={0}\n      >\n        <Grid item xs={12} style={{ paddingBottom: 0 }}>\n          <Typography className=\"qetaAuthorBoxCreated\" variant=\"caption\">\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={entity.created} />\n          </Typography>\n        </Grid>\n        {entity.updated && entity.updatedBy && (\n          <Grid item xs={12} style={{ paddingBottom: 0, paddingTop: 0 }}>\n            <Typography className=\"qetaAuthorBoxUpdated\" variant=\"caption\">\n              {t('authorBox.updatedAtTime')}{' '}\n              <RelativeTimeWithTooltip value={entity.updated} />{' '}\n              {t('authorBox.updatedBy')} <UpdatedByLink entity={entity} />\n            </Typography>\n          </Grid>\n        )}\n        <Grid item xs={2} style={{ paddingTop: 0 }}>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAuthorBoxAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid\n          item\n          xs={10}\n          style={{\n            paddingTop: 0,\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          <Box style={{ paddingLeft: '5px' }}>\n            <AuthorLink entity={entity} />\n          </Box>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AAca,MAAA,SAAA,GAAY,CAAC,KAAqD,KAAA;AAC7E,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA;AACnB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAC7B,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,MAAM,CAAA;AAEvD,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,IAAI,CAAU,KAAA,MAAA;AAAA,QACZ,OAAS,EAAA,CAAA;AAAA,QACT,KAAO,EAAA,OAAA;AAAA,QACP,QAAU,EAAA,OAAA;AAAA,QACV,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,OAAO,QAAQ,CAAA,CAAA;AAAA,QAClD,YAAc,EAAA,CAAA;AAAA,QACd,WAAa,EAAA;AAAA,UACX,KAAO,EAAA,KAAA;AAAA,UACP,MAAQ,EAAA,KAAA;AAAA,UACR,QAAU,EAAA;AAAA;AACZ,OACF;AAAA,KAAA;AAAA,oBAEAA,cAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAS,EAAA,IAAA;AAAA,QACT,UAAW,EAAA,SAAA;AAAA,QACX,cAAe,EAAA,YAAA;AAAA,QACf,OAAS,EAAA;AAAA,OAAA;AAAA,sBAETA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAI,EAAA,KAAA,EAAO,EAAE,aAAA,EAAe,CAAE,EAAA,EAAA,kBAC1CA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAU,EAAA,sBAAA,EAAuB,OAAQ,EAAA,SAAA,EAAA,EAClD,CAAE,CAAA,wBAAwB,CAAG,EAAA,GAAA,kBAC7BA,cAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,MAAA,CAAO,OAAS,EAAA,CAClD,CACF,CAAA;AAAA,MACC,OAAO,OAAW,IAAA,MAAA,CAAO,6BACvBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IAAC,EAAA,EAAA,EAAI,IAAI,KAAO,EAAA,EAAE,eAAe,CAAG,EAAA,UAAA,EAAY,GACxD,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,SAAU,EAAA,sBAAA,EAAuB,OAAQ,EAAA,SAAA,EAAA,EAClD,EAAE,yBAAyB,CAAA,EAAG,qBAC9BA,cAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,OAAO,MAAO,CAAA,OAAA,EAAS,GAAG,GAClD,EAAA,CAAA,CAAE,qBAAqB,CAAE,EAAA,GAAA,+CAAE,aAAc,EAAA,EAAA,MAAA,EAAgB,CAC5D,CACF,CAAA;AAAA,sBAEFA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,GAAG,KAAO,EAAA,EAAE,UAAY,EAAA,CAAA,EACrC,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,UAC1B,SAAU,EAAA,4BAAA;AAAA,UACV,GAAK,EAAA,IAAA;AAAA,UACL,OAAQ,EAAA;AAAA,SAAA;AAAA,QAEP;AAAA,OAEL,CAAA;AAAA,sBACAA,cAAA,CAAA,aAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,IAAI,EAAA,IAAA;AAAA,UACJ,EAAI,EAAA,EAAA;AAAA,UACJ,KAAO,EAAA;AAAA,YACL,UAAY,EAAA,CAAA;AAAA,YACZ,YAAc,EAAA,UAAA;AAAA,YACd,QAAU,EAAA,QAAA;AAAA,YACV,UAAY,EAAA;AAAA;AACd,SAAA;AAAA,wBAEAA,cAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,KAAA,EAAO,EAAE,WAAA,EAAa,OACzB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAgB,CAC9B;AAAA;AACF;AACF,GACF;AAEJ;;;;"}
+{"version":3,"file":"AuthorBox.esm.js","sources":["../../../src/components/AuthorBox/AuthorBox.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  AnswerResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { AuthorLink, UpdatedByLink } from '../Links';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';\n\nconst useStyles = makeStyles(\n  theme => ({\n    authorBox: {\n      padding: theme.spacing(1),\n      float: 'right',\n      maxWidth: '200px',\n      border: `1px solid ${theme.palette.action.selected}`,\n      '& .avatar': {\n        width: theme.spacing(3),\n        height: theme.spacing(3),\n        fontSize: '1rem',\n      },\n    },\n    authorLink: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n    },\n  }),\n  { name: 'QetaAuthorBox' },\n);\n\nexport const AuthorBox = (props: { entity: PostResponse | AnswerResponse }) => {\n  const { entity } = props;\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(entity);\n  const styles = useStyles();\n\n  return (\n    <Box className={`qetaAuthorBox ${styles.authorBox}`}>\n      <Grid\n        container\n        alignItems=\"stretch\"\n        justifyContent=\"flex-start\"\n        spacing={0}\n      >\n        <Grid item xs={12} style={{ paddingBottom: 0 }}>\n          <Typography className=\"qetaAuthorBoxCreated\" variant=\"caption\">\n            {t('authorBox.postedAtTime')}{' '}\n            <RelativeTimeWithTooltip value={entity.created} />\n          </Typography>\n        </Grid>\n        {entity.updated && entity.updatedBy && (\n          <Grid item xs={12} style={{ paddingBottom: 0, paddingTop: 0 }}>\n            <Typography className=\"qetaAuthorBoxUpdated\" variant=\"caption\">\n              {t('authorBox.updatedAtTime')}{' '}\n              <RelativeTimeWithTooltip value={entity.updated} />{' '}\n              {t('authorBox.updatedBy')} <UpdatedByLink entity={entity} />\n            </Typography>\n          </Grid>\n        )}\n        <Grid item xs={2} style={{ paddingTop: 0 }}>\n          <Avatar\n            src={user?.spec?.profile?.picture}\n            className=\"qetaAuthorBoxAvatar avatar\"\n            alt={name}\n            variant=\"rounded\"\n          >\n            {initials}\n          </Avatar>\n        </Grid>\n        <Grid\n          item\n          xs={10}\n          style={{\n            paddingTop: 0,\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n            whiteSpace: 'nowrap',\n          }}\n        >\n          <Box style={{ paddingLeft: '5px' }}>\n            <AuthorLink entity={entity} />\n          </Box>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -1,13 +1,8 @@
 import React__default from 'react';
-import Grid from '@mui/material/Grid';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import AddCircle from '@mui/icons-material/AddCircle';
-import RemoveCircle from '@mui/icons-material/RemoveCircle';
-import PlayListAddIcon from '@mui/icons-material/PlaylistAdd';
+import { Button, Dialog, DialogTitle, DialogContent, Grid, DialogActions } from '@material-ui/core';
+import AddCircle from '@material-ui/icons/AddCircle';
+import RemoveCircle from '@material-ui/icons/RemoveCircle';
+import PlayListAddIcon from '@material-ui/icons/PlaylistAdd';
 import { useApi } from '@backstage/core-plugin-api';
 import { qetaApiRef } from '../../api.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
@@ -43,14 +38,13 @@ const AddToCollectionButton = (props) => {
   if (!collections.length) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     Button,
     {
       variant: "contained",
       size: "small",
       onClick: handleClickOpen,
-      startIcon: /* @__PURE__ */ React__default.createElement(PlayListAddIcon, null),
-      sx: { marginLeft: 2 }
+      startIcon: /* @__PURE__ */ React__default.createElement(PlayListAddIcon, null)
     },
     t("addToCollectionButton.title")
   ), /* @__PURE__ */ React__default.createElement(Dialog, { open, onClose: handleClose, fullWidth: true }, /* @__PURE__ */ React__default.createElement(DialogTitle, null, t("addToCollectionButton.manage")), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true }, collections.map((collection) => {