@drodil/backstage-plugin-qeta-react 3.10.0 → 3.10.1

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

@@ -1 +1 @@
-{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef, userRouteRef } from '../../routes';\nimport { useStyles, useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const styles = useStyles();\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid\n      container\n      spacing={2}\n      className={styles.questionListItem}\n      justifyContent=\"flex-start\"\n    >\n      <Grid item justifyContent=\"center\" style={{ paddingTop: '0px' }}>\n        <div className={styles.questionCardVote}>\n          <VoteButtons entity={answer} />\n        </div>\n      </Grid>\n      <Grid item className={styles.questionListItemContent}>\n        <Grid container>\n          <Grid item xs={12}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaQuestionListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography\n                variant=\"caption\"\n                display=\"inline\"\n                className={`${styles.questionListItemAuthor} qetaAnswerListItemAuthor`}\n              >\n                <Avatar\n                  src={user?.spec?.profile?.picture}\n                  className={styles.questionListItemAvatar}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n                {answer.author === 'anonymous' ? (\n                  t('common.anonymousAuthor')\n                ) : (\n                  <Link to={`${userRoute()}/${answer.author}`}>{name}</Link>\n                )}{' '}\n                <Link\n                  to={getAnswerLink()}\n                  className=\"qetaQuestionListItemQuestionBtn\"\n                >\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"AnswerListItem.esm.js","sources":["../../../src/components/AnswersContainer/AnswerListItem.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography';\nimport Avatar from '@mui/material/Avatar';\nimport Grid from '@mui/material/Grid';\nimport { Link } from '@backstage/core-components';\nimport React from 'react';\nimport DOMPurify from 'dompurify';\nimport {\n  AnswerResponse,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { VoteButtons } from '../Buttons/VoteButtons';\nimport { questionRouteRef, userRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useEntityAuthor } from '../../hooks/useEntityAuthor';\nimport { VoteButtonContainer } from '../Styled/VoteButtonContainer';\n\nexport interface AnswerListItemProps {\n  answer: AnswerResponse;\n  entity?: string;\n}\n\nexport const AnswerListItem = (props: AnswerListItemProps) => {\n  const { answer, entity } = props;\n\n  const questionRoute = useRouteRef(questionRouteRef);\n  const userRoute = useRouteRef(userRouteRef);\n  const { name, initials, user } = useEntityAuthor(answer);\n  const { t } = useTranslation();\n\n  const getAnswerLink = () => {\n    return entity\n      ? `${questionRoute({\n          id: answer.postId.toString(10),\n        })}?entity=${entity}#answer_${answer.id}`\n      : `${questionRoute({\n          id: answer.postId.toString(10),\n        })}/#answer_${answer.id}`;\n  };\n\n  return (\n    <Grid container spacing={2} justifyContent=\"flex-start\">\n      <Grid item justifyContent=\"center\" style={{ paddingTop: '0px' }}>\n        <VoteButtonContainer>\n          <VoteButtons entity={answer} />\n        </VoteButtonContainer>\n      </Grid>\n      <Grid item>\n        <Grid container>\n          <Grid item xs={12}>\n            <Typography variant=\"h5\" component=\"div\">\n              <Link\n                to={getAnswerLink()}\n                className=\"qetaAnswerListItemQuestionBtn\"\n              >\n                {t('answer.questionTitle', {\n                  question: answer.post?.title ?? '',\n                })}\n              </Link>\n            </Typography>\n            <Typography\n              variant=\"caption\"\n              noWrap\n              component=\"div\"\n              className=\"qetaQuestionListItemContent\"\n              style={{ marginBottom: '5px' }}\n            >\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(answer.content), 150),\n              )}\n            </Typography>\n            <Grid item xs={12}>\n              {answer.post && <TagsAndEntities entity={answer.post} />}\n              <Typography variant=\"caption\" display=\"inline\">\n                <Avatar\n                  src={user?.spec?.profile?.picture}\n                  alt={name}\n                  variant=\"rounded\"\n                >\n                  {initials}\n                </Avatar>\n                {answer.author === 'anonymous' ? (\n                  t('common.anonymousAuthor')\n                ) : (\n                  <Link to={`${userRoute()}/${answer.author}`}>{name}</Link>\n                )}{' '}\n                <Link\n                  to={getAnswerLink()}\n                  className=\"qetaQuestionListItemQuestionBtn\"\n                >\n                  {`${t('answer.answeredTime')} `}\n                  <RelativeTimeWithTooltip value={answer.created} />\n                </Link>\n              </Typography>\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":["React"],"mappings":"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"}

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

@@ -16,7 +16,6 @@ import { AnswerList } from './AnswerList.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '../../api.esm.js';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { SearchBar } from '../SearchBar/SearchBar.esm.js';
 

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.5rem' }}\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 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.5rem' }}\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

@@ -4,7 +4,6 @@ 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 makeStyles from '@mui/styles/makeStyles';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import { FavoriteButton } from '../Buttons/FavoriteButton.esm.js';
 import { LinkButton } from '../Buttons/LinkButton.esm.js';
@@ -17,39 +16,26 @@ import { useVoting } from '../../hooks/useVoting.esm.js';
 import '../../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 { styled } from '@mui/system';
 
-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 ArticleButtonContainer = styled("div")(({ theme }) => ({
+  width: "100%",
+  paddingTop: "0.5rem",
+  paddingBottom: "0.5rem",
+  borderTop: `1px solid ${theme.palette.background.paper}`,
+  borderBottom: `1px solid ${theme.palette.background.paper}`
+}));
 const ArticleButtons = (props) => {
   const { post } = props;
   const { voteUpTooltip, ownVote, voteUp, score, voteDownTooltip, voteDown } = useVoting(post);
-  const styles = useLocalStyles();
-  const classes = useStyles();
   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("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(
+  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(
     IconButton,
     {
       "aria-label": "vote up",
@@ -71,15 +57,14 @@ 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, { 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, className: classes.marginLeft }), (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,
+  ))), /* @__PURE__ */ React__default.createElement(Tooltip, { title: t("common.score", { score: score.toString(10) }) }, /* @__PURE__ */ React__default.createElement(
+    Typography,
     {
-      size: "small",
-      onClick: handleDeleteModalOpen,
-      className: classes.marginLeft
+      sx: { marginLeft: "0.5rem", userSelect: "none" },
+      display: "inline"
     },
-    /* @__PURE__ */ React__default.createElement(DeleteIcon, null)
-  )), /* @__PURE__ */ React__default.createElement(
+    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,
@@ -90,7 +75,6 @@ const ArticleButtons = (props) => {
     IconButton,
     {
       size: "small",
-      className: classes.marginLeft,
       href: editArticleRoute({
         id: post.id.toString(10)
       })
@@ -99,5 +83,5 @@ const ArticleButtons = (props) => {
   ))))));
 };
 
-export { ArticleButtons, useLocalStyles };
+export { ArticleButtons };
 //# 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 makeStyles from '@mui/styles/makeStyles';\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 { useStyles, 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 classes = useStyles();\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} className={classes.marginLeft} />\n          {(post.canEdit || post.canDelete) && (\n            <>\n              {post.canDelete && (\n                <>\n                  <Tooltip title={t('articlePage.deleteButton')}>\n                    <IconButton\n                      size=\"small\"\n                      onClick={handleDeleteModalOpen}\n                      className={classes.marginLeft}\n                    >\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                    className={classes.marginLeft}\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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"}
+{"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')(({ theme }) => ({\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\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.5rem', 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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"}

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

@@ -1,7 +1,6 @@
 import Typography from '@mui/material/Typography';
 import Avatar from '@mui/material/Avatar';
 import Grid from '@mui/material/Grid';
-import makeStyles from '@mui/styles/makeStyles';
 import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
 import React__default from 'react';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
@@ -13,42 +12,22 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
+import { styled } from '@mui/system';
 
-const useStyles = makeStyles(
-  (theme) => {
-    return {
-      content: {
-        fontSize: "110% !important",
-        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 HeaderImage = styled("img")(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  height: "250px",
+  objectFit: "cover",
+  width: "100%",
+  borderColor: theme.palette.background.paper,
+  borderStyle: "solid",
+  borderWidth: "1px"
+}));
 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);
@@ -67,29 +46,44 @@ 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 }))), postEntity.headerImage && /* @__PURE__ */ React__default.createElement(
-    "img",
-    {
-      src: post.headerImage,
-      alt: post.title,
-      className: styles.headerImage
-    }
-  ), /* @__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, 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(
     MarkdownRenderer,
     {
       content: postEntity.content,
-      className: styles.content
+      sx: {
+        fontSize: "113% !important",
+        paddingTop: postEntity.headerImage ? 2 : 4,
+        paddingBottom: 4
+      }
     }
-  ), /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, t("common.comments")), /* @__PURE__ */ React__default.createElement(
+  )), /* @__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(
     CommentSection,
     {
-      className: styles.commentSection,
       post: postEntity,
       onCommentDelete: onCommentAction,
-      onCommentPost: onCommentAction
+      onCommentPost: onCommentAction,
+      sx: {
+        marginBottom: 2,
+        paddingBottom: 2,
+        marginLeft: "0"
+      }
     }
-  ), /* @__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, useStyles };
+export { ArticleContent };
 //# 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 makeStyles from '@mui/styles/makeStyles';\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% !important',\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} marginTop={2}>\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":";;;;;;;;;;;;;;;;;;;AAuBO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAS,KAAA,KAAA;AACP,IAAO,OAAA;AAAA,MACL,OAAS,EAAA;AAAA,QACP,QAAU,EAAA,iBAAA;AAAA,QACV,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC3B,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,OAC3D;AAAA,MACA,WAAa,EAAA;AAAA,QACX,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC1B,MAAQ,EAAA,OAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,QACX,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,QACnD,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,OAC5B;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,WAAW,KAAK,CAAA,CAAA;AAAA,QACzD,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC9B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,QAC7B,UAAY,EAAA,CAAA;AAAA,OACd;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EACA,EAAE,MAAM,aAAc,EAAA;AACxB,EAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAGzB,KAAA;AACJ,EAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACxB,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,IAAK,EAAA,GAAI,gBAAgB,IAAI,CAAA,CAAA;AACrD,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAAA,cAAA,CAAM,SAAS,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAA,EAAiB,CAAuB,KAAA;AAC/D,IAAA,aAAA,CAAc,CAAC,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAI,IAAA,IAAA,CAAK,SAAS,SAAW,EAAA;AAC3B,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,WAAA,EAAY,SAAQ,4BAA6B,EAAA,CAAA,CAAA;AAAA,GAEzE;AAEA,EAAA,mGAEKA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EAAM,WAAW,KAAM,CAAA,kBAC1CA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,UAAA,EAAW,4BACxBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,MAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,IAAM,EAAA,IAAA,EAAM,OAAS,EAAA,OAAA;AAAA,MAC1B,SAAU,EAAA,mBAAA;AAAA,MACV,GAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,SAAA;AAAA,KAAA;AAAA,IAEP,QAAA;AAAA,GAEL,CACA,kBAAAA,cAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,WAAa,EAAA,EAAA,IAAK,CACtC,kBAAAA,cAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SACjB,EAAA,EAAA,CAAA,CAAE,cAAgB,EAAA,EAAE,KAAO,EAAA,KAAA,EAAO,CAAA,EAAE,GAAE,EAAA,QAAA,EACtC,CAAE,CAAA,wBAAwB,CAAG,EAAA,GAAA,+CAC7B,uBAAwB,EAAA,EAAA,KAAA,EAAO,UAAW,CAAA,OAAA,EAAS,CACtD,CACF,CACF,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAA,kBACZA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAA,kBAC3BA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,IAAM,EAAA,UAAA,EAAY,CACpC,CACF,CACC,EAAA,UAAA,CAAW,WACV,oBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAK,IAAK,CAAA,WAAA;AAAA,MACV,KAAK,IAAK,CAAA,KAAA;AAAA,MACV,WAAW,MAAO,CAAA,WAAA;AAAA,KAAA;AAAA,GAGtB,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,SAAS,UAAW,CAAA,OAAA;AAAA,MACpB,WAAW,MAAO,CAAA,OAAA;AAAA,KAAA;AAAA,GACpB,+CACC,UAAW,EAAA,EAAA,OAAA,EAAQ,QAAM,CAAE,CAAA,iBAAiB,CAAE,CAC/C,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,cAAA;AAAA,MAClB,IAAM,EAAA,UAAA;AAAA,MACN,eAAiB,EAAA,eAAA;AAAA,MACjB,aAAe,EAAA,eAAA;AAAA,KAAA;AAAA,qBAEhBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAA,+CACZ,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,sBACZA,cAAA,CAAA,aAAA,CAAA,eAAA,EAAA,EAAgB,QAAQ,UAAY,EAAA,CACvC,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"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')(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  height: '250px',\n  objectFit: 'cover',\n  width: '100%',\n  borderColor: theme.palette.background.paper,\n  borderStyle: 'solid',\n  borderWidth: '1px',\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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"}

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

@@ -2,7 +2,6 @@ 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 makeStyles from '@mui/styles/makeStyles';
 import React__default from 'react';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import { UpdatedByLink, AuthorLink } from '../Links/Links.esm.js';
@@ -10,46 +9,65 @@ import '@backstage/core-plugin-api';
 import '../../api.esm.js';
 import 'react-use';
 import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '../../hooks/useStyles.esm.js';
 import 'react-use/lib/useAsync';
 import { useEntityAuthor } from '../../hooks/useEntityAuthor.esm.js';
 
-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 styles = useStyles();
   const { t } = useTranslation();
   const { name, initials, user } = useEntityAuthor(entity);
-  return /* @__PURE__ */ React__default.createElement(Box, { className: `qetaAuthorBox ${styles.authorBox}` }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, alignItems: "center" }, /* @__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 }, /* @__PURE__ */ React__default.createElement(
-    Avatar,
+  return /* @__PURE__ */ React__default.createElement(
+    Box,
     {
-      src: user?.spec?.profile?.picture,
-      className: "qetaAuthorBoxAvatar avatar",
-      alt: name,
-      variant: "rounded"
+      sx: (theme) => ({
+        padding: 1,
+        float: "right",
+        maxWidth: "200px",
+        border: `1px solid ${theme.palette.action.selected}`,
+        borderRadius: 1,
+        "& .avatar": {
+          width: theme.spacing(3),
+          height: theme.spacing(3),
+          fontSize: "1rem"
+        }
+      })
     },
-    initials
-  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 10, className: styles.authorLink }, /* @__PURE__ */ React__default.createElement(Box, { style: { paddingLeft: "5px" } }, /* @__PURE__ */ React__default.createElement(AuthorLink, { entity })))));
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        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,
+        {
+          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 }))
+      )
+    )
+  );
 };
 
 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 makeStyles from '@mui/styles/makeStyles';\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 type QetaAuthorBoxClassKey = 'authorBox' | 'authorLink';\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 styles = useStyles();\n  const { t } = useTranslation();\n  const { name, initials, user } = useEntityAuthor(entity);\n\n  return (\n    <Box className={`qetaAuthorBox ${styles.authorBox}`}>\n      <Grid container alignItems=\"center\">\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}>\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 item xs={10} className={styles.authorLink}>\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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"}
+{"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: theme.spacing(3),\n          height: theme.spacing(3),\n          fontSize: '1rem',\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":"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"}