@drodil/backstage-plugin-qeta-react 3.26.0 → 3.27.0

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionCard.esm.js","sources":["../../../src/components/CollectionCard/CollectionCard.tsx"],"sourcesContent":["import { Collection } from '@drodil/backstage-plugin-qeta-common';\nimport { InfoCard } from '@backstage/core-components';\nimport { Button, CardContent, CardMedia, Grid } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useState } from 'react';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { DeleteModal } from '../DeleteModal';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionEditRouteRef } from '../../routes';\nimport { useTranslation } from '../../hooks';\nimport { useNavigate } from 'react-router-dom';\n\nexport const CollectionCard = (props: { collection: Collection }) => {\n  const { collection } = props;\n  const editCollectionRoute = useRouteRef(collectionEditRouteRef);\n  const navigate = useNavigate();\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslation();\n  return (\n    <InfoCard>\n      {collection.headerImage && (\n        <CardMedia\n          component=\"img\"\n          height=\"200\"\n          src={collection.headerImage}\n          alt={collection.title}\n        />\n      )}\n      <CardContent>\n        <Grid container>\n          <Grid item xs={12}>\n            {collection.description && (\n              <MarkdownRenderer content={collection.description} />\n            )}\n          </Grid>\n          <Grid item xs={12}>\n            <TagsAndEntities entity={collection} />\n          </Grid>\n          <Grid container item xs={12}>\n            {collection.canEdit && (\n              <Grid item>\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  startIcon={<EditIcon />}\n                  onClick={() =>\n                    navigate(\n                      editCollectionRoute({\n                        id: collection.id.toString(10),\n                      }),\n                    )\n                  }\n                  className=\"qetaCollectionCardEditBtn\"\n                >\n                  {t('questionPage.editButton')}\n                </Button>\n              </Grid>\n            )}\n            {collection.canDelete && (\n              <Grid item>\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  color=\"secondary\"\n                  onClick={handleDeleteModalOpen}\n                  startIcon={<DeleteIcon />}\n                >\n                  {t('deleteModal.deleteButton')}\n                </Button>\n                <DeleteModal\n                  open={deleteModalOpen}\n                  onClose={handleDeleteModalClose}\n                  entity={collection}\n                />\n              </Grid>\n            )}\n          </Grid>\n        </Grid>\n      </CardContent>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionCard.esm.js","sources":["../../../src/components/CollectionCard/CollectionCard.tsx"],"sourcesContent":["import { Collection } from '@drodil/backstage-plugin-qeta-common';\nimport { InfoCard } from '@backstage/core-components';\nimport { Button, CardContent, CardMedia, Grid } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { useState } from 'react';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { DeleteModal } from '../DeleteModal';\nimport EditIcon from '@material-ui/icons/Edit';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionEditRouteRef } from '../../routes';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useNavigate } from 'react-router-dom';\n\nexport const CollectionCard = (props: { collection: Collection }) => {\n  const { collection } = props;\n  const editCollectionRoute = useRouteRef(collectionEditRouteRef);\n  const navigate = useNavigate();\n  const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n  const handleDeleteModalOpen = () => setDeleteModalOpen(true);\n  const handleDeleteModalClose = () => setDeleteModalOpen(false);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  return (\n    <InfoCard>\n      {collection.headerImage && (\n        <CardMedia\n          component=\"img\"\n          height=\"200\"\n          src={collection.headerImage}\n          alt={collection.title}\n        />\n      )}\n      <CardContent>\n        <Grid container>\n          <Grid item xs={12}>\n            {collection.description && (\n              <MarkdownRenderer content={collection.description} />\n            )}\n          </Grid>\n          <Grid item xs={12}>\n            <TagsAndEntities entity={collection} />\n          </Grid>\n          <Grid container item xs={12}>\n            {collection.canEdit && (\n              <Grid item>\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  startIcon={<EditIcon />}\n                  onClick={() =>\n                    navigate(\n                      editCollectionRoute({\n                        id: collection.id.toString(10),\n                      }),\n                    )\n                  }\n                  className=\"qetaCollectionCardEditBtn\"\n                >\n                  {t('questionPage.editButton')}\n                </Button>\n              </Grid>\n            )}\n            {collection.canDelete && (\n              <Grid item>\n                <Button\n                  variant=\"outlined\"\n                  size=\"small\"\n                  color=\"secondary\"\n                  onClick={handleDeleteModalOpen}\n                  startIcon={<DeleteIcon />}\n                >\n                  {t('deleteModal.deleteButton')}\n                </Button>\n                <DeleteModal\n                  open={deleteModalOpen}\n                  onClose={handleDeleteModalClose}\n                  entity={collection}\n                />\n              </Grid>\n            )}\n          </Grid>\n        </Grid>\n      </CardContent>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionForm/CollectionForm.esm.js

@@ -10,15 +10,8 @@ import { collectionRouteRef } from '../../routes.esm.js';
 import { useConfirmNavigationIfEdited } from '../../utils/utils.esm.js';
 import { qetaApiRef } from '../../api.esm.js';
 import { HeaderImageInput } from '../HeaderImageInput/HeaderImageInput.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 
 const formToRequest = (form, images) => {
   return {
@@ -57,7 +50,7 @@ const CollectionForm = (props) => {
   const [error, setError] = useState(false);
   const [edited, setEdited] = useState(false);
   const [images, setImages] = useState([]);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const qetaApi = useApi(qetaApiRef);
   const {
     register,

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionForm.esm.js","sources":["../../../src/components/CollectionForm/CollectionForm.tsx"],"sourcesContent":["import { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { Button, TextField } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport { useCallback, useEffect, useState } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  CollectionRequest,\n  CollectionResponse,\n  QetaApi,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';\nimport { collectionRouteRef } from '../../routes';\nimport { useConfirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport { CollectionFormData } from './types';\nimport { HeaderImageInput } from '../HeaderImageInput/HeaderImageInput';\nimport { useTranslation } from '../../hooks';\n\nconst formToRequest = (\n  form: CollectionFormData,\n  images: number[],\n): CollectionRequest => {\n  return {\n    ...form,\n    images,\n  };\n};\n\nexport type CollectionFormProps = {\n  id?: string;\n  onPost?: (collection: CollectionResponse) => void;\n};\n\nconst getDefaultValues = (): CollectionFormData => {\n  return {\n    title: '',\n    images: [],\n  };\n};\n\nconst getValues = async (\n  api: QetaApi,\n  id?: string,\n): Promise<{ form: CollectionFormData; collection?: CollectionResponse }> => {\n  if (!id) {\n    return { form: getDefaultValues() };\n  }\n\n  const collection = await api.getCollection(id);\n  return {\n    form: {\n      title: collection.title,\n      description: collection.description,\n      headerImage: collection.headerImage,\n      images: collection.images,\n    },\n    collection,\n  };\n};\n\nexport const CollectionForm = (props: CollectionFormProps) => {\n  const { id, onPost } = props;\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const [posting, setPosting] = useState(false);\n  const [values, setValues] = useState(getDefaultValues());\n  const [error, setError] = useState(false);\n  const [edited, setEdited] = useState(false);\n  const [images, setImages] = useState<number[]>([]);\n  const { t } = useTranslation();\n\n  const qetaApi = useApi(qetaApiRef);\n  const {\n    register,\n    handleSubmit,\n    control,\n    reset,\n    formState: { errors },\n  } = useForm<CollectionFormData>({\n    values,\n    defaultValues: getDefaultValues(),\n  });\n\n  const postQuestion = (data: CollectionFormData) => {\n    setPosting(true);\n\n    if (id) {\n      qetaApi\n        .updateCollection(Number(id), formToRequest(data, images))\n        .then(q => {\n          if (!q || !q.id) {\n            setError(true);\n            return;\n          }\n          setEdited(false);\n          reset();\n          analytics.captureEvent('edit', 'collection');\n          if (onPost) {\n            onPost(q);\n          } else {\n            navigate(collectionRoute({ id: q.id.toString(10) }));\n          }\n        })\n        .catch(_e => {\n          setError(true);\n          setPosting(false);\n        });\n      return;\n    }\n    qetaApi\n      .createCollection(formToRequest(data, images))\n      .then(q => {\n        if (!q || !q.id) {\n          setError(true);\n          return;\n        }\n        setEdited(false);\n        analytics.captureEvent('post', 'collection');\n        reset();\n        navigate(collectionRoute({ id: q.id.toString(10) }));\n      })\n      .catch(_e => {\n        setError(true);\n        setPosting(false);\n      });\n  };\n\n  useEffect(() => {\n    if (id) {\n      getValues(qetaApi, id).then(data => {\n        setValues(data.form);\n        setImages(data.form.images);\n      });\n    }\n  }, [qetaApi, id]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useConfirmNavigationIfEdited(edited && !posting);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <form\n      onSubmit={handleSubmit(postQuestion)}\n      onChange={() => {\n        setEdited(true);\n      }}\n    >\n      {error && (\n        <Alert severity=\"error\">{t('collectionForm.errorPosting')}</Alert>\n      )}\n      <Controller\n        control={control}\n        render={({ field: { onChange, value } }) => (\n          <HeaderImageInput\n            onChange={onChange}\n            onImageUpload={onImageUpload}\n            url={value}\n            collectionId={id ? Number(id) : undefined}\n          />\n        )}\n        name=\"headerImage\"\n      />\n      <TextField\n        label={t('collectionForm.titleInput.label')}\n        className=\"qetaCollectionFormTitle\"\n        required\n        fullWidth\n        error={'title' in errors}\n        margin=\"normal\"\n        variant=\"outlined\"\n        helperText={t('collectionForm.titleInput.helperText')}\n        FormHelperTextProps={{\n          style: { marginLeft: '0.2em' },\n        }}\n        {\n          // @ts-ignore\n          ...register('title', { required: true, maxLength: 255 })\n        }\n      />\n\n      <Controller\n        control={control}\n        rules={{\n          required: false,\n        }}\n        render={({ field: { onChange, value } }) => (\n          <MarkdownEditor\n            value={value ?? ''}\n            onChange={onChange}\n            height={400}\n            error={'content' in errors}\n            placeholder={t('collectionForm.descriptionInput.placeholder')}\n            onImageUpload={onImageUpload}\n            collectionId={id ? Number(id) : undefined}\n          />\n        )}\n        name=\"description\"\n      />\n      <Button\n        color=\"primary\"\n        type=\"submit\"\n        variant=\"contained\"\n        disabled={posting}\n      >\n        {id\n          ? t('collectionForm.submit.existingCollection')\n          : t('collectionForm.submit.newCollection')}\n      </Button>\n    </form>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAA,GAAgB,CACpB,IAAA,EACA,MACsB,KAAA;AACtB,EAAO,OAAA;AAAA,IACL,GAAG,IAAA;AAAA,IACH;AAAA,GACF;AACF,CAAA;AAOA,MAAM,mBAAmB,MAA0B;AACjD,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,EAAA;AAAA,IACP,QAAQ;AAAC,GACX;AACF,CAAA;AAEA,MAAM,SAAA,GAAY,OAChB,GAAA,EACA,EAC2E,KAAA;AAC3E,EAAA,IAAI,CAAC,EAAI,EAAA;AACP,IAAO,OAAA,EAAE,IAAM,EAAA,gBAAA,EAAmB,EAAA;AAAA;AAGpC,EAAA,MAAM,UAAa,GAAA,MAAM,GAAI,CAAA,aAAA,CAAc,EAAE,CAAA;AAC7C,EAAO,OAAA;AAAA,IACL,IAAM,EAAA;AAAA,MACJ,OAAO,UAAW,CAAA,KAAA;AAAA,MAClB,aAAa,UAAW,CAAA,WAAA;AAAA,MACxB,aAAa,UAAW,CAAA,WAAA;AAAA,MACxB,QAAQ,UAAW,CAAA;AAAA,KACrB;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,KAA+B,KAAA;AAC5D,EAAM,MAAA,EAAE,EAAI,EAAA,MAAA,EAAW,GAAA,KAAA;AACvB,EAAM,MAAA,eAAA,GAAkB,YAAY,kBAAkB,CAAA;AACtD,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAS,kBAAkB,CAAA;AACvD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,KAAK,CAAA;AACxC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AACjD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA;AACjC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA,EAAW,EAAE,MAAO;AAAA,MAClB,OAA4B,CAAA;AAAA,IAC9B,MAAA;AAAA,IACA,eAAe,gBAAiB;AAAA,GACjC,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,IAA6B,KAAA;AACjD,IAAA,UAAA,CAAW,IAAI,CAAA;AAEf,IAAA,IAAI,EAAI,EAAA;AACN,MACG,OAAA,CAAA,gBAAA,CAAiB,MAAO,CAAA,EAAE,CAAG,EAAA,aAAA,CAAc,MAAM,MAAM,CAAC,CACxD,CAAA,IAAA,CAAK,CAAK,CAAA,KAAA;AACT,QAAA,IAAI,CAAC,CAAA,IAAK,CAAC,CAAA,CAAE,EAAI,EAAA;AACf,UAAA,QAAA,CAAS,IAAI,CAAA;AACb,UAAA;AAAA;AAEF,QAAA,SAAA,CAAU,KAAK,CAAA;AACf,QAAM,KAAA,EAAA;AACN,QAAU,SAAA,CAAA,YAAA,CAAa,QAAQ,YAAY,CAAA;AAC3C,QAAA,IAAI,MAAQ,EAAA;AACV,UAAA,MAAA,CAAO,CAAC,CAAA;AAAA,SACH,MAAA;AACL,UAAS,QAAA,CAAA,eAAA,CAAgB,EAAE,EAAI,EAAA,CAAA,CAAE,GAAG,QAAS,CAAA,EAAE,CAAE,EAAC,CAAC,CAAA;AAAA;AACrD,OACD,CACA,CAAA,KAAA,CAAM,CAAM,EAAA,KAAA;AACX,QAAA,QAAA,CAAS,IAAI,CAAA;AACb,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA,OACjB,CAAA;AACH,MAAA;AAAA;AAEF,IAAA,OAAA,CACG,iBAAiB,aAAc,CAAA,IAAA,EAAM,MAAM,CAAC,CAAA,CAC5C,KAAK,CAAK,CAAA,KAAA;AACT,MAAA,IAAI,CAAC,CAAA,IAAK,CAAC,CAAA,CAAE,EAAI,EAAA;AACf,QAAA,QAAA,CAAS,IAAI,CAAA;AACb,QAAA;AAAA;AAEF,MAAA,SAAA,CAAU,KAAK,CAAA;AACf,MAAU,SAAA,CAAA,YAAA,CAAa,QAAQ,YAAY,CAAA;AAC3C,MAAM,KAAA,EAAA;AACN,MAAS,QAAA,CAAA,eAAA,CAAgB,EAAE,EAAI,EAAA,CAAA,CAAE,GAAG,QAAS,CAAA,EAAE,CAAE,EAAC,CAAC,CAAA;AAAA,KACpD,CACA,CAAA,KAAA,CAAM,CAAM,EAAA,KAAA;AACX,MAAA,QAAA,CAAS,IAAI,CAAA;AACb,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,KACjB,CAAA;AAAA,GACL;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,SAAA,CAAU,OAAS,EAAA,EAAE,CAAE,CAAA,IAAA,CAAK,CAAQ,IAAA,KAAA;AAClC,QAAA,SAAA,CAAU,KAAK,IAAI,CAAA;AACnB,QAAU,SAAA,CAAA,IAAA,CAAK,KAAK,MAAM,CAAA;AAAA,OAC3B,CAAA;AAAA;AACH,GACC,EAAA,CAAC,OAAS,EAAA,EAAE,CAAC,CAAA;AAEhB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,KAAA,CAAM,MAAM,CAAA;AAAA,GACX,EAAA,CAAC,MAAQ,EAAA,KAAK,CAAC,CAAA;AAElB,EAA6B,4BAAA,CAAA,MAAA,IAAU,CAAC,OAAO,CAAA;AAE/C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,OAAoB,KAAA;AACnB,MAAA,SAAA,CAAU,CAAc,UAAA,KAAA,CAAC,GAAG,UAAA,EAAY,OAAO,CAAC,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,aAAa,YAAY,CAAA;AAAA,MACnC,UAAU,MAAM;AACd,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,OAChB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,KAAA,wBACE,KAAM,EAAA,EAAA,QAAA,EAAS,OAAS,EAAA,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAAE,EAAA,CAAA;AAAA,wBAE5D,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBACC,QAAA;AAAA,gBACA,aAAA;AAAA,gBACA,GAAK,EAAA,KAAA;AAAA,gBACL,YAAc,EAAA,EAAA,GAAK,MAAO,CAAA,EAAE,CAAI,GAAA,KAAA;AAAA;AAAA,aAClC;AAAA,YAEF,IAAK,EAAA;AAAA;AAAA,SACP;AAAA,wBACA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,EAAE,iCAAiC,CAAA;AAAA,YAC1C,SAAU,EAAA,yBAAA;AAAA,YACV,QAAQ,EAAA,IAAA;AAAA,YACR,SAAS,EAAA,IAAA;AAAA,YACT,OAAO,OAAW,IAAA,MAAA;AAAA,YAClB,MAAO,EAAA,QAAA;AAAA,YACP,OAAQ,EAAA,UAAA;AAAA,YACR,UAAA,EAAY,EAAE,sCAAsC,CAAA;AAAA,YACpD,mBAAqB,EAAA;AAAA,cACnB,KAAA,EAAO,EAAE,UAAA,EAAY,OAAQ;AAAA,aAC/B;AAAA;AAAA,YAGE,GAAG,SAAS,OAAS,EAAA,EAAE,UAAU,IAAM,EAAA,SAAA,EAAW,KAAK;AAAA;AAAA,SAE3D;AAAA,wBAEA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,KAAO,EAAA;AAAA,cACL,QAAU,EAAA;AAAA,aACZ;AAAA,YACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,OAAO,KAAS,IAAA,EAAA;AAAA,gBAChB,QAAA;AAAA,gBACA,MAAQ,EAAA,GAAA;AAAA,gBACR,OAAO,SAAa,IAAA,MAAA;AAAA,gBACpB,WAAA,EAAa,EAAE,6CAA6C,CAAA;AAAA,gBAC5D,aAAA;AAAA,gBACA,YAAc,EAAA,EAAA,GAAK,MAAO,CAAA,EAAE,CAAI,GAAA,KAAA;AAAA;AAAA,aAClC;AAAA,YAEF,IAAK,EAAA;AAAA;AAAA,SACP;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAM,EAAA,SAAA;AAAA,YACN,IAAK,EAAA,QAAA;AAAA,YACL,OAAQ,EAAA,WAAA;AAAA,YACR,QAAU,EAAA,OAAA;AAAA,YAET,QACG,EAAA,EAAA,GAAA,CAAA,CAAE,0CAA0C,CAAA,GAC5C,EAAE,qCAAqC;AAAA;AAAA;AAC7C;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"CollectionForm.esm.js","sources":["../../../src/components/CollectionForm/CollectionForm.tsx"],"sourcesContent":["import { useAnalytics, useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { Button, TextField } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport { useCallback, useEffect, useState } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  CollectionRequest,\n  CollectionResponse,\n  QetaApi,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';\nimport { collectionRouteRef } from '../../routes';\nimport { useConfirmNavigationIfEdited } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\nimport { CollectionFormData } from './types';\nimport { HeaderImageInput } from '../HeaderImageInput/HeaderImageInput';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nconst formToRequest = (\n  form: CollectionFormData,\n  images: number[],\n): CollectionRequest => {\n  return {\n    ...form,\n    images,\n  };\n};\n\nexport type CollectionFormProps = {\n  id?: string;\n  onPost?: (collection: CollectionResponse) => void;\n};\n\nconst getDefaultValues = (): CollectionFormData => {\n  return {\n    title: '',\n    images: [],\n  };\n};\n\nconst getValues = async (\n  api: QetaApi,\n  id?: string,\n): Promise<{ form: CollectionFormData; collection?: CollectionResponse }> => {\n  if (!id) {\n    return { form: getDefaultValues() };\n  }\n\n  const collection = await api.getCollection(id);\n  return {\n    form: {\n      title: collection.title,\n      description: collection.description,\n      headerImage: collection.headerImage,\n      images: collection.images,\n    },\n    collection,\n  };\n};\n\nexport const CollectionForm = (props: CollectionFormProps) => {\n  const { id, onPost } = props;\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const [posting, setPosting] = useState(false);\n  const [values, setValues] = useState(getDefaultValues());\n  const [error, setError] = useState(false);\n  const [edited, setEdited] = useState(false);\n  const [images, setImages] = useState<number[]>([]);\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const qetaApi = useApi(qetaApiRef);\n  const {\n    register,\n    handleSubmit,\n    control,\n    reset,\n    formState: { errors },\n  } = useForm<CollectionFormData>({\n    values,\n    defaultValues: getDefaultValues(),\n  });\n\n  const postQuestion = (data: CollectionFormData) => {\n    setPosting(true);\n\n    if (id) {\n      qetaApi\n        .updateCollection(Number(id), formToRequest(data, images))\n        .then(q => {\n          if (!q || !q.id) {\n            setError(true);\n            return;\n          }\n          setEdited(false);\n          reset();\n          analytics.captureEvent('edit', 'collection');\n          if (onPost) {\n            onPost(q);\n          } else {\n            navigate(collectionRoute({ id: q.id.toString(10) }));\n          }\n        })\n        .catch(_e => {\n          setError(true);\n          setPosting(false);\n        });\n      return;\n    }\n    qetaApi\n      .createCollection(formToRequest(data, images))\n      .then(q => {\n        if (!q || !q.id) {\n          setError(true);\n          return;\n        }\n        setEdited(false);\n        analytics.captureEvent('post', 'collection');\n        reset();\n        navigate(collectionRoute({ id: q.id.toString(10) }));\n      })\n      .catch(_e => {\n        setError(true);\n        setPosting(false);\n      });\n  };\n\n  useEffect(() => {\n    if (id) {\n      getValues(qetaApi, id).then(data => {\n        setValues(data.form);\n        setImages(data.form.images);\n      });\n    }\n  }, [qetaApi, id]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useConfirmNavigationIfEdited(edited && !posting);\n\n  const onImageUpload = useCallback(\n    (imageId: number) => {\n      setImages(prevImages => [...prevImages, imageId]);\n    },\n    [setImages],\n  );\n\n  return (\n    <form\n      onSubmit={handleSubmit(postQuestion)}\n      onChange={() => {\n        setEdited(true);\n      }}\n    >\n      {error && (\n        <Alert severity=\"error\">{t('collectionForm.errorPosting')}</Alert>\n      )}\n      <Controller\n        control={control}\n        render={({ field: { onChange, value } }) => (\n          <HeaderImageInput\n            onChange={onChange}\n            onImageUpload={onImageUpload}\n            url={value}\n            collectionId={id ? Number(id) : undefined}\n          />\n        )}\n        name=\"headerImage\"\n      />\n      <TextField\n        label={t('collectionForm.titleInput.label')}\n        className=\"qetaCollectionFormTitle\"\n        required\n        fullWidth\n        error={'title' in errors}\n        margin=\"normal\"\n        variant=\"outlined\"\n        helperText={t('collectionForm.titleInput.helperText')}\n        FormHelperTextProps={{\n          style: { marginLeft: '0.2em' },\n        }}\n        {\n          // @ts-ignore\n          ...register('title', { required: true, maxLength: 255 })\n        }\n      />\n\n      <Controller\n        control={control}\n        rules={{\n          required: false,\n        }}\n        render={({ field: { onChange, value } }) => (\n          <MarkdownEditor\n            value={value ?? ''}\n            onChange={onChange}\n            height={400}\n            error={'content' in errors}\n            placeholder={t('collectionForm.descriptionInput.placeholder')}\n            onImageUpload={onImageUpload}\n            collectionId={id ? Number(id) : undefined}\n          />\n        )}\n        name=\"description\"\n      />\n      <Button\n        color=\"primary\"\n        type=\"submit\"\n        variant=\"contained\"\n        disabled={posting}\n      >\n        {id\n          ? t('collectionForm.submit.existingCollection')\n          : t('collectionForm.submit.newCollection')}\n      </Button>\n    </form>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsGrid/CollectionsGrid.esm.js

@@ -5,10 +5,11 @@ import { CollectionsGridContent } from './CollectionsGridContent.esm.js';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
@@ -24,7 +25,7 @@ import { useSearchParams } from 'react-router-dom';
 const EXPANDED_LOCAL_STORAGE_KEY = "qeta-collection-filters-expanded";
 const CollectionsGrid = (props) => {
   const { showFilters, owner } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const [page, setPage] = useState(1);
   const [pageCount, setPageCount] = useState(1);
   const [searchParams, setSearchParams] = useSearchParams();

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

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi, useTranslation } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport {\n  CollectionFilters,\n  CommonFilterPanelProps,\n  FilterKey,\n  filterKeys,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { getFiltersWithDateRange } from '../../utils';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { useSearchParams } from 'react-router-dom';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n  showFilters?: boolean;\n  filterPanelProps?: CommonFilterPanelProps;\n};\n\nexport type CollectionFilterChange = {\n  key: keyof CollectionFilters;\n  value?: CollectionFilters[keyof CollectionFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { showFilters, owner } = props;\n  const { t } = useTranslation();\n  const [page, setPage] = useState(1);\n  const [pageCount, setPageCount] = useState(1);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = useState(25);\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    orderBy: 'created',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        includePosts: false,\n        owner,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [collectionsPerPage, page, filters],\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    if (response) {\n      setPageCount(Math.ceil(response.total / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  const onFilterChange = (\n    changes: CollectionFilterChange | CollectionFilterChange[],\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 (!filterKeys.includes(key as FilterKey)) {\n          continue;\n        }\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 (typeof value === 'number') {\n          newValue.set(key, String(value));\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  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 === 'collectionsPerPage') {\n          const qpp = Number.parseInt(value, 10);\n          if (qpp > 0) setCollectionsPerPage(qpp);\n        } else if (filterKeys.includes(key as FilterKey)) {\n          filtersApplied = true;\n          if (key === 'tags') {\n            filters.tags = filterTags(value.split(',')) ?? [];\n          } else if (key === 'entities') {\n            filters.entities = value.split(',');\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  return (\n    <Box>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={setSearchQuery}\n            label={t('collectionsPage.search.label')}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography variant=\"h6\" className=\"qetaCollectionsContainerdCount\">\n              {t('common.collections', { count: response?.total ?? 0 })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaCollectionsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<CollectionFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            {...props.filterPanelProps}\n          />\n        </Collapse>\n      )}\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={collectionsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e =>\n            setCollectionsPerPage(Number(e.target.value))\n          }\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionsGrid.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGrid.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Box, Button, Collapse, Grid, Typography } from '@material-ui/core';\nimport { CollectionsGridContent } from './CollectionsGridContent';\nimport { useQetaApi } from '../../hooks';\nimport useDebounce from 'react-use/lib/useDebounce';\nimport { QetaPagination } from '../QetaPagination/QetaPagination';\nimport {\n  CollectionFilters,\n  CommonFilterPanelProps,\n  FilterKey,\n  filterKeys,\n  FilterPanel,\n} from '../FilterPanel/FilterPanel';\nimport FilterList from '@material-ui/icons/FilterList';\nimport { getFiltersWithDateRange } from '../../utils';\nimport { SearchBar } from '../SearchBar/SearchBar';\nimport { useSearchParams } from 'react-router-dom';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\n\nexport type CollectionsGridProps = {\n  owner?: string;\n  showFilters?: boolean;\n  filterPanelProps?: CommonFilterPanelProps;\n};\n\nexport type CollectionFilterChange = {\n  key: keyof CollectionFilters;\n  value?: CollectionFilters[keyof CollectionFilters];\n};\n\nconst EXPANDED_LOCAL_STORAGE_KEY = 'qeta-collection-filters-expanded';\n\nexport const CollectionsGrid = (props: CollectionsGridProps) => {\n  const { showFilters, owner } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const [page, setPage] = useState(1);\n  const [pageCount, setPageCount] = useState(1);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [collectionsPerPage, setCollectionsPerPage] = useState(25);\n  const [showFilterPanel, setShowFilterPanel] = useState(\n    localStorage.getItem(EXPANDED_LOCAL_STORAGE_KEY) === 'true',\n  );\n  const [filters, setFilters] = useState<CollectionFilters>({\n    order: 'desc',\n    searchQuery: '',\n    orderBy: 'created',\n  });\n\n  useEffect(() => {\n    localStorage.setItem(\n      EXPANDED_LOCAL_STORAGE_KEY,\n      showFilterPanel ? 'true' : 'false',\n    );\n  }, [showFilterPanel]);\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(\n    api => {\n      return api.getCollections({\n        limit: collectionsPerPage,\n        offset: (page - 1) * collectionsPerPage,\n        includePosts: false,\n        owner,\n        ...(getFiltersWithDateRange(filters) as any),\n      });\n    },\n    [collectionsPerPage, page, filters],\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    if (response) {\n      setPageCount(Math.ceil(response.total / collectionsPerPage));\n    }\n  }, [response, collectionsPerPage]);\n\n  const onFilterChange = (\n    changes: CollectionFilterChange | CollectionFilterChange[],\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 (!filterKeys.includes(key as FilterKey)) {\n          continue;\n        }\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 (typeof value === 'number') {\n          newValue.set(key, String(value));\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  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 === 'collectionsPerPage') {\n          const qpp = Number.parseInt(value, 10);\n          if (qpp > 0) setCollectionsPerPage(qpp);\n        } else if (filterKeys.includes(key as FilterKey)) {\n          filtersApplied = true;\n          if (key === 'tags') {\n            filters.tags = filterTags(value.split(',')) ?? [];\n          } else if (key === 'entities') {\n            filters.entities = value.split(',');\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  return (\n    <Box>\n      <Grid container justifyContent=\"space-between\">\n        <Grid item xs={12} md={4}>\n          <SearchBar\n            onSearch={setSearchQuery}\n            label={t('collectionsPage.search.label')}\n            loading={loading}\n          />\n        </Grid>\n      </Grid>\n      <Grid container justifyContent=\"space-between\">\n        {response && (\n          <Grid item>\n            <Typography variant=\"h6\" className=\"qetaCollectionsContainerdCount\">\n              {t('common.collections', { count: response?.total ?? 0 })}\n            </Typography>\n          </Grid>\n        )}\n        {response && (showFilters ?? true) && (\n          <Grid item>\n            <Button\n              onClick={() => {\n                setShowFilterPanel(!showFilterPanel);\n              }}\n              className=\"qetaCollectionsContainerFilterPanelBtn\"\n              startIcon={<FilterList />}\n            >\n              {t('filterPanel.filterButton')}\n            </Button>\n          </Grid>\n        )}\n      </Grid>\n      {(showFilters ?? true) && (\n        <Collapse in={showFilterPanel}>\n          <FilterPanel<CollectionFilters>\n            onChange={onFilterChange}\n            filters={filters}\n            {...props.filterPanelProps}\n          />\n        </Collapse>\n      )}\n      <CollectionsGridContent\n        loading={loading}\n        error={error}\n        response={response}\n      />\n      {response && response?.total > 0 && (\n        <QetaPagination\n          pageSize={collectionsPerPage}\n          handlePageChange={(_e, p) => setPage(p)}\n          handlePageSizeChange={e =>\n            setCollectionsPerPage(Number(e.target.value))\n          }\n          page={page}\n          pageCount={pageCount}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsGrid/CollectionsGridContent.esm.js

@@ -2,24 +2,14 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { WarningPanel } from '@backstage/core-components';
 import { Grid } from '@material-ui/core';
 import { CollectionsGridItem } from './CollectionsGridItem.esm.js';
-import '@backstage/core-plugin-api';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { LoadingGrid } from '../LoadingGrid/LoadingGrid.esm.js';
 import { NoCollectionsCard } from './NoCollectionsCard.esm.js';
 
 const CollectionsGridContent = (props) => {
   const { loading, error, response } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   if (loading) {
     return /* @__PURE__ */ jsx(LoadingGrid, {});
   }

package/dist/components/CollectionsGrid/CollectionsGridContent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGridContent.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridContent.tsx"],"sourcesContent":["import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport { CollectionsGridItem } from './CollectionsGridItem';\nimport { useTranslation } from '../../hooks';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { NoCollectionsCard } from './NoCollectionsCard';\n\nexport const CollectionsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: CollectionsResponse;\n}) => {\n  const { loading, error, response } = props;\n  const { t } = useTranslation();\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType: 'collections' })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.collections || response.collections.length === 0) {\n    return <NoCollectionsCard />;\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        item\n        direction=\"row\"\n        alignItems=\"stretch\"\n        style={{ marginTop: '1rem' }}\n      >\n        {response.collections.map(p => {\n          return (\n            <Grid item xs={12} md={4} lg={3} key={p.id}>\n              <CollectionsGridItem collection={p} />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAQa,MAAA,sBAAA,GAAyB,CAAC,KAIjC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,OAAO,CAAE,CAAA,wBAAA,EAA0B,EAAE,QAAA,EAAU,eAAe,CAAA;AAAA,QAE7D,QAAO,EAAA,KAAA,EAAA;AAAA;AAAA,KACV;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAS,CAAA,WAAA,IAAe,QAAS,CAAA,WAAA,CAAY,WAAW,CAAG,EAAA;AAC9D,IAAA,2BAAQ,iBAAkB,EAAA,EAAA,CAAA;AAAA;AAG5B,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,IAAI,EAAA,IAAA;AAAA,MACJ,SAAU,EAAA,KAAA;AAAA,MACV,UAAW,EAAA,SAAA;AAAA,MACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,MAE1B,QAAA,EAAA,QAAA,CAAS,WAAY,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AAC7B,QAAA,2BACG,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EAC5B,8BAAC,mBAAoB,EAAA,EAAA,UAAA,EAAY,CAAG,EAAA,CAAA,EAAA,EADA,EAAE,EAExC,CAAA;AAAA,OAEH;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CollectionsGridContent.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridContent.tsx"],"sourcesContent":["import { CollectionsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { WarningPanel } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport { CollectionsGridItem } from './CollectionsGridItem';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { LoadingGrid } from '../LoadingGrid/LoadingGrid';\nimport { NoCollectionsCard } from './NoCollectionsCard';\n\nexport const CollectionsGridContent = (props: {\n  loading: boolean;\n  error: any;\n  response?: CollectionsResponse;\n}) => {\n  const { loading, error, response } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  if (loading) {\n    return <LoadingGrid />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel\n        severity=\"error\"\n        title={t('postsList.errorLoading', { itemType: 'collections' })}\n      >\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  if (!response.collections || response.collections.length === 0) {\n    return <NoCollectionsCard />;\n  }\n\n  return (\n    <>\n      <Grid\n        container\n        item\n        direction=\"row\"\n        alignItems=\"stretch\"\n        style={{ marginTop: '1rem' }}\n      >\n        {response.collections.map(p => {\n          return (\n            <Grid item xs={12} md={4} lg={3} key={p.id}>\n              <CollectionsGridItem collection={p} />\n            </Grid>\n          );\n        })}\n      </Grid>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,sBAAA,GAAyB,CAAC,KAIjC,KAAA;AACJ,EAAA,MAAM,EAAE,OAAA,EAAS,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,WAAY,EAAA,EAAA,CAAA;AAAA;AAGtB,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAS,EAAA,OAAA;AAAA,QACT,OAAO,CAAE,CAAA,wBAAA,EAA0B,EAAE,QAAA,EAAU,eAAe,CAAA;AAAA,QAE7D,QAAO,EAAA,KAAA,EAAA;AAAA;AAAA,KACV;AAAA;AAIJ,EAAA,IAAI,CAAC,QAAS,CAAA,WAAA,IAAe,QAAS,CAAA,WAAA,CAAY,WAAW,CAAG,EAAA;AAC9D,IAAA,2BAAQ,iBAAkB,EAAA,EAAA,CAAA;AAAA;AAG5B,EAAA,uBAEI,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,IAAI,EAAA,IAAA;AAAA,MACJ,SAAU,EAAA,KAAA;AAAA,MACV,UAAW,EAAA,SAAA;AAAA,MACX,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,MAE1B,QAAA,EAAA,QAAA,CAAS,WAAY,CAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AAC7B,QAAA,2BACG,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,IAAI,EAAI,EAAA,CAAA,EAAG,EAAI,EAAA,CAAA,EAC5B,8BAAC,mBAAoB,EAAA,EAAA,UAAA,EAAY,CAAG,EAAA,CAAA,EAAA,EADA,EAAE,EAExC,CAAA;AAAA,OAEH;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js

@@ -6,23 +6,15 @@ import { Card, CardActionArea, CardMedia, CardContent, Typography, Grid, Tooltip
 import DOMPurify from 'dompurify';
 import { useNavigate } from 'react-router-dom';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities.esm.js';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { useCollectionsFollow } from '../../hooks/useCollectionsFollow.esm.js';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import Visibility from '@material-ui/icons/Visibility';
 
 const CollectionsGridItem = (props) => {
   const { collection } = props;
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const collectionRoute = useRouteRef(collectionRouteRef);
   const navigate = useNavigate();
   const collections = useCollectionsFollow();

package/dist/components/CollectionsGrid/CollectionsGridItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n  Collection,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n  Button,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslation } from '../../hooks';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\n\nexport interface PostsGridItemProps {\n  collection: Collection;\n}\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n  const { collection } = props;\n  const { t } = useTranslation();\n\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const navigate = useNavigate();\n  const collections = useCollectionsFollow();\n  const href = collectionRoute({ id: collection.id.toString(10) });\n\n  return (\n    <Card style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {collection.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={collection.headerImage}\n            alt={collection.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {collection.title}\n          </Typography>\n          {collection.description && (\n            <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(collection.description), 200),\n              )}\n            </Typography>\n          )}\n          <Grid container>\n            <Grid item xs={12}>\n              <TagsAndEntities entity={collection} />\n            </Grid>\n            <Grid item>\n              <Typography variant=\"caption\">\n                {t('common.posts', {\n                  count: collection.postsCount,\n                  itemType: 'post',\n                })}\n                {' · '}\n                {t('common.followers', {\n                  count: collection.followers,\n                })}\n              </Typography>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ marginTop: 'auto' }}>\n        <Grid container justifyContent=\"center\">\n          <Grid item>\n            <Tooltip title={t('collectionButton.tooltip')}>\n              <Button\n                size=\"small\"\n                variant=\"outlined\"\n                color={\n                  collections.isFollowingCollection(collection)\n                    ? 'secondary'\n                    : 'primary'\n                }\n                onClick={() => {\n                  if (collections.isFollowingCollection(collection)) {\n                    collections.unfollowCollection(collection);\n                  } else {\n                    collections.followCollection(collection);\n                  }\n                }}\n                startIcon={\n                  collections.isFollowingCollection(collection) ? (\n                    <VisibilityOff />\n                  ) : (\n                    <Visibility />\n                  )\n                }\n              >\n                {collections.isFollowingCollection(collection)\n                  ? t('collectionButton.unfollow')\n                  : t('collectionButton.follow')}\n              </Button>\n            </Tooltip>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CollectionsGridItem.esm.js","sources":["../../../src/components/CollectionsGrid/CollectionsGridItem.tsx"],"sourcesContent":["import {\n  Collection,\n  removeMarkdownFormatting,\n  truncate,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { collectionRouteRef } from '../../routes';\nimport {\n  Button,\n  Card,\n  CardActionArea,\n  CardContent,\n  CardMedia,\n  Grid,\n  Tooltip,\n  Typography,\n} from '@material-ui/core';\nimport DOMPurify from 'dompurify';\nimport { useNavigate } from 'react-router-dom';\nimport { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { useCollectionsFollow } from '../../hooks/useCollectionsFollow';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\n\nexport interface PostsGridItemProps {\n  collection: Collection;\n}\n\nexport const CollectionsGridItem = (props: PostsGridItemProps) => {\n  const { collection } = props;\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  const collectionRoute = useRouteRef(collectionRouteRef);\n  const navigate = useNavigate();\n  const collections = useCollectionsFollow();\n  const href = collectionRoute({ id: collection.id.toString(10) });\n\n  return (\n    <Card style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>\n      <CardActionArea onClick={() => navigate(href)}>\n        {collection.headerImage && (\n          <CardMedia\n            component=\"img\"\n            height=\"140\"\n            image={collection.headerImage}\n            alt={collection.title}\n          />\n        )}\n        <CardContent style={{ paddingBottom: '0.5rem' }}>\n          <Typography gutterBottom variant=\"h6\" component=\"div\">\n            {collection.title}\n          </Typography>\n          {collection.description && (\n            <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n              {DOMPurify.sanitize(\n                truncate(removeMarkdownFormatting(collection.description), 200),\n              )}\n            </Typography>\n          )}\n          <Grid container>\n            <Grid item xs={12}>\n              <TagsAndEntities entity={collection} />\n            </Grid>\n            <Grid item>\n              <Typography variant=\"caption\">\n                {t('common.posts', {\n                  count: collection.postsCount,\n                  itemType: 'post',\n                })}\n                {' · '}\n                {t('common.followers', {\n                  count: collection.followers,\n                })}\n              </Typography>\n            </Grid>\n          </Grid>\n        </CardContent>\n      </CardActionArea>\n      <CardContent style={{ marginTop: 'auto' }}>\n        <Grid container justifyContent=\"center\">\n          <Grid item>\n            <Tooltip title={t('collectionButton.tooltip')}>\n              <Button\n                size=\"small\"\n                variant=\"outlined\"\n                color={\n                  collections.isFollowingCollection(collection)\n                    ? 'secondary'\n                    : 'primary'\n                }\n                onClick={() => {\n                  if (collections.isFollowingCollection(collection)) {\n                    collections.unfollowCollection(collection);\n                  } else {\n                    collections.followCollection(collection);\n                  }\n                }}\n                startIcon={\n                  collections.isFollowingCollection(collection) ? (\n                    <VisibilityOff />\n                  ) : (\n                    <Visibility />\n                  )\n                }\n              >\n                {collections.isFollowingCollection(collection)\n                  ? t('collectionButton.unfollow')\n                  : t('collectionButton.follow')}\n              </Button>\n            </Tooltip>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CollectionsGrid/NoCollectionsCard.esm.js

@@ -1,20 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import '@backstage/core-plugin-api';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { Card, CardContent, Grid, Typography } from '@material-ui/core';
 
 const NoCollectionsCard = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   return /* @__PURE__ */ jsx(Card, { style: { marginTop: "2em" }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
     Grid,
     {

package/dist/components/CollectionsGrid/NoCollectionsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"NoCollectionsCard.esm.js","sources":["../../../src/components/CollectionsGrid/NoCollectionsCard.tsx"],"sourcesContent":["import { useTranslation } from '../../hooks';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\n\nexport const NoCollectionsCard = () => {\n  const { t } = useTranslation();\n\n  return (\n    <Card style={{ marginTop: '2em' }}>\n      <CardContent>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          direction=\"column\"\n        >\n          <Grid item>\n            <Typography variant=\"h6\">\n              {t(`common.collections`, { count: 0 })}\n            </Typography>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGO,MAAM,oBAAoB,MAAM;AACrC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA;AAE7B,EACE,uBAAA,GAAA,CAAC,QAAK,KAAO,EAAA,EAAE,WAAW,KAAM,EAAA,EAC9B,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,SAAU,EAAA,QAAA;AAAA,MAEV,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EACR,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,QAAA,EAAA,CAAA,CAAE,sBAAsB,EAAE,KAAA,EAAO,CAAE,EAAC,GACvC,CACF,EAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NoCollectionsCard.esm.js","sources":["../../../src/components/CollectionsGrid/NoCollectionsCard.tsx"],"sourcesContent":["import { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { Card, CardContent, Grid, Typography } from '@material-ui/core';\n\nexport const NoCollectionsCard = () => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n\n  return (\n    <Card style={{ marginTop: '2em' }}>\n      <CardContent>\n        <Grid\n          container\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          direction=\"column\"\n        >\n          <Grid item>\n            <Typography variant=\"h6\">\n              {t(`common.collections`, { count: 0 })}\n            </Typography>\n          </Grid>\n        </Grid>\n      </CardContent>\n    </Card>\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAElD,EACE,uBAAA,GAAA,CAAC,QAAK,KAAO,EAAA,EAAE,WAAW,KAAM,EAAA,EAC9B,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAS,EAAA,IAAA;AAAA,MACT,cAAe,EAAA,QAAA;AAAA,MACf,UAAW,EAAA,QAAA;AAAA,MACX,SAAU,EAAA,QAAA;AAAA,MAEV,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EACR,8BAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IACjB,EAAA,QAAA,EAAA,CAAA,CAAE,sBAAsB,EAAE,KAAA,EAAO,CAAE,EAAC,GACvC,CACF,EAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/CommentSection/CommentListItem.esm.js

@@ -6,18 +6,12 @@ import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTime
 import { Link } from '@backstage/core-components';
 import * as React from 'react';
 import { useState } from 'react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
 import { qetaApiRef } from '../../api.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
 import { CommentForm } from './CommentForm.esm.js';
+import { ExpertIcon } from '../Icons/ExpertIcon.esm.js';
 
 const useStyles = makeStyles(
   () => ({
@@ -35,7 +29,7 @@ const useStyles = makeStyles(
   { name: "QetaCommentList" }
 );
 const CommentListItem = (props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const { comment, onCommentAction, post, answer } = props;
   const qetaApi = useApi(qetaApiRef);
   const [posting, setPosting] = React.useState(false);
@@ -85,6 +79,7 @@ const CommentListItem = (props) => {
     /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "qetaCommentMetadata", children: [
       " \u2013 ",
       /* @__PURE__ */ jsx(AuthorLink, { entity: comment }),
+      comment.expert && /* @__PURE__ */ jsx(ExpertIcon, {}),
       " ",
       /* @__PURE__ */ jsx(RelativeTimeWithTooltip, { value: comment.created }),
       comment.canEdit && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/CommentSection/CommentListItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentListItem.esm.js","sources":["../../../src/components/CommentSection/CommentListItem.tsx"],"sourcesContent":["import { Box, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { AuthorLink } from '../Links';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { Link } from '@backstage/core-components';\nimport { useState } from 'react';\nimport * as React from 'react';\nimport { useTranslation } from '../../hooks';\nimport {\n  AnswerResponse,\n  Comment,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api.ts';\nimport { CommentForm } from './CommentForm.tsx';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    box: {\n      padding: '0.5em',\n    },\n    content: {\n      display: 'inline',\n      '& *:last-child': {\n        display: 'inline',\n      },\n    },\n  }),\n  { name: 'QetaCommentList' },\n);\n\nexport const CommentListItem = (props: {\n  comment: Comment;\n  onCommentAction: (question: PostResponse, answer?: AnswerResponse) => void;\n  post: PostResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { t } = useTranslation();\n  const { comment, onCommentAction, post, answer } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const [posting, setPosting] = React.useState(false);\n  const styles = useStyles();\n  const [editing, setEditing] = useState(false);\n\n  const deleteComment = (id: number) => {\n    if (answer) {\n      qetaApi.deleteAnswerComment(post.id, answer.id, id).then(a => {\n        onCommentAction(post, a);\n      });\n      return;\n    }\n    qetaApi.deletePostComment(post.id, id).then(q => onCommentAction(q));\n  };\n\n  const saveComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi\n        .updateAnswerComment(post.id, answer.id, comment.id, data.content)\n        .then(a => {\n          setEditing(false);\n          setPosting(false);\n          onCommentAction(post, a);\n        });\n      return;\n    }\n    qetaApi.updatePostComment(post.id, comment.id, data.content).then(q => {\n      setEditing(false);\n      setPosting(false);\n      onCommentAction(q);\n    });\n  };\n\n  return (\n    <Box className={styles.box}>\n      {editing ? (\n        <>\n          <CommentForm\n            submit={saveComment}\n            saveButtonTitle={t('commentList.save')}\n            defaultValues={{ content: comment.content }}\n            disabled={posting}\n          />\n        </>\n      ) : (\n        <>\n          <MarkdownRenderer\n            content={comment.content}\n            className={styles.content}\n          />\n          <Typography variant=\"caption\" className=\"qetaCommentMetadata\">\n            {' – '}\n            <AuthorLink entity={comment} />{' '}\n            <RelativeTimeWithTooltip value={comment.created} />\n            {comment.canEdit && (\n              <>\n                {' / '}\n                <Link\n                  underline=\"none\"\n                  to=\"#\"\n                  className=\"qetaCommentEditBtn\"\n                  onClick={() => setEditing(true)}\n                >\n                  {t('commentList.editLink')}\n                </Link>\n              </>\n            )}\n            {comment.canDelete && (\n              <>\n                {' / '}\n                <Link\n                  underline=\"none\"\n                  to=\"#\"\n                  className=\"qetaCommentDeleteBtn\"\n                  onClick={() => deleteComment(comment.id)}\n                >\n                  {t('commentList.deleteLink')}\n                </Link>\n              </>\n            )}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentListItem.esm.js","sources":["../../../src/components/CommentSection/CommentListItem.tsx"],"sourcesContent":["import { Box, makeStyles, Typography } from '@material-ui/core';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\nimport { AuthorLink } from '../Links';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';\nimport { Link } from '@backstage/core-components';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n  AnswerResponse,\n  Comment,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { qetaApiRef } from '../../api.ts';\nimport { CommentForm } from './CommentForm.tsx';\nimport { ExpertIcon } from '../Icons/ExpertIcon.tsx';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {},\n    box: {\n      padding: '0.5em',\n    },\n    content: {\n      display: 'inline',\n      '& *:last-child': {\n        display: 'inline',\n      },\n    },\n  }),\n  { name: 'QetaCommentList' },\n);\n\nexport const CommentListItem = (props: {\n  comment: Comment;\n  onCommentAction: (question: PostResponse, answer?: AnswerResponse) => void;\n  post: PostResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const { comment, onCommentAction, post, answer } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const [posting, setPosting] = React.useState(false);\n  const styles = useStyles();\n  const [editing, setEditing] = useState(false);\n\n  const deleteComment = (id: number) => {\n    if (answer) {\n      qetaApi.deleteAnswerComment(post.id, answer.id, id).then(a => {\n        onCommentAction(post, a);\n      });\n      return;\n    }\n    qetaApi.deletePostComment(post.id, id).then(q => onCommentAction(q));\n  };\n\n  const saveComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi\n        .updateAnswerComment(post.id, answer.id, comment.id, data.content)\n        .then(a => {\n          setEditing(false);\n          setPosting(false);\n          onCommentAction(post, a);\n        });\n      return;\n    }\n    qetaApi.updatePostComment(post.id, comment.id, data.content).then(q => {\n      setEditing(false);\n      setPosting(false);\n      onCommentAction(q);\n    });\n  };\n\n  return (\n    <Box className={styles.box}>\n      {editing ? (\n        <>\n          <CommentForm\n            submit={saveComment}\n            saveButtonTitle={t('commentList.save')}\n            defaultValues={{ content: comment.content }}\n            disabled={posting}\n          />\n        </>\n      ) : (\n        <>\n          <MarkdownRenderer\n            content={comment.content}\n            className={styles.content}\n          />\n          <Typography variant=\"caption\" className=\"qetaCommentMetadata\">\n            {' – '}\n            <AuthorLink entity={comment} />\n            {comment.expert && <ExpertIcon />}{' '}\n            <RelativeTimeWithTooltip value={comment.created} />\n            {comment.canEdit && (\n              <>\n                {' / '}\n                <Link\n                  underline=\"none\"\n                  to=\"#\"\n                  className=\"qetaCommentEditBtn\"\n                  onClick={() => setEditing(true)}\n                >\n                  {t('commentList.editLink')}\n                </Link>\n              </>\n            )}\n            {comment.canDelete && (\n              <>\n                {' / '}\n                <Link\n                  underline=\"none\"\n                  to=\"#\"\n                  className=\"qetaCommentDeleteBtn\"\n                  onClick={() => deleteComment(comment.id)}\n                >\n                  {t('commentList.deleteLink')}\n                </Link>\n              </>\n            )}\n          </Typography>\n        </>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/CommentSection/CommentSection.esm.js

@@ -6,14 +6,8 @@ import { qetaCreateCommentPermission } from '@drodil/backstage-plugin-qeta-commo
 import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { CommentList } from './CommentList.esm.js';
 import { qetaApiRef } from '../../api.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import AddCommentIcon from '@material-ui/icons/AddComment';
 import { OptionalRequirePermission } from '../Utility/OptionalRequirePermission.esm.js';
 import { CommentForm } from './CommentForm.esm.js';
@@ -35,7 +29,7 @@ const CommentSection = (props) => {
   const [posting, setPosting] = React.useState(false);
   const [formVisible, setFormVisible] = useState(false);
   const [edited, setEdited] = React.useState(false);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const styles = useStyles();
   const postComment = (data) => {
     setPosting(true);

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

@@ -1 +1 @@
-{"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\n\nimport * as React from 'react';\nimport { Box, Button, Grid, makeStyles } from '@material-ui/core';\nimport {\n  AnswerResponse,\n  PostResponse,\n  qetaCreateCommentPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport AddCommentIcon from '@material-ui/icons/AddComment';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { CommentForm } from './CommentForm.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport type QetaCommentSectionClassKey = 'root' | 'addCommentButton';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '1em',\n    },\n    addCommentButton: {},\n  }),\n  { name: 'QetaCommentSection' },\n);\n\nexport const CommentSection = (props: {\n  onCommentAction: (post: PostResponse, answer?: AnswerResponse) => void;\n  post: PostResponse;\n  answer?: AnswerResponse;\n  className?: string;\n}) => {\n  const { answer, post, onCommentAction } = props;\n  const analytics = useAnalytics();\n  const qetaApi = useApi(qetaApiRef);\n  const [posting, setPosting] = React.useState(false);\n  const [formVisible, setFormVisible] = useState(false);\n  const [edited, setEdited] = React.useState(false);\n  const { t } = useTranslation();\n  const styles = useStyles();\n\n  const postComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi.commentAnswer(post.id, answer.id, data.content).then(a => {\n        setFormVisible(false);\n        analytics.captureEvent('comment', 'answer');\n        setPosting(false);\n        setEdited(false);\n        onCommentAction(post, a);\n      });\n      return;\n    }\n\n    qetaApi.commentPost(post.id, data.content).then(q => {\n      setFormVisible(false);\n      analytics.captureEvent('comment', post.type);\n      setPosting(false);\n      setEdited(false);\n      onCommentAction(q);\n    });\n  };\n\n  useConfirmNavigationIfEdited(edited);\n\n  return (\n    <Box\n      marginLeft={9}\n      className={`${styles.root} ${props.className} qetaCommentSection`}\n    >\n      <CommentList\n        post={post}\n        answer={answer}\n        onCommentAction={onCommentAction}\n      />\n      <OptionalRequirePermission\n        permission={qetaCreateCommentPermission}\n        errorPage={<></>}\n      >\n        {!formVisible && (\n          <Grid container justifyContent=\"flex-end\">\n            <Grid item>\n              <Button\n                size=\"small\"\n                startIcon={<AddCommentIcon />}\n                onClick={() => setFormVisible(true)}\n              >\n                {t('commentSection.addComment')}\n              </Button>\n            </Grid>\n          </Grid>\n        )}\n        {formVisible && (\n          <CommentForm\n            submit={postComment}\n            saveButtonTitle={t('commentSection.post')}\n            disabled={posting}\n          />\n        )}\n      </OptionalRequirePermission>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-autofocus */\nimport { useState } from 'react';\n\nimport * as React from 'react';\nimport { Box, Button, Grid, makeStyles } from '@material-ui/core';\nimport {\n  AnswerResponse,\n  PostResponse,\n  qetaCreateCommentPermission,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport AddCommentIcon from '@material-ui/icons/AddComment';\nimport { OptionalRequirePermission } from '../Utility/OptionalRequirePermission';\nimport { CommentForm } from './CommentForm.tsx';\nimport { useConfirmNavigationIfEdited } from '../../utils';\n\nexport type QetaCommentSectionClassKey = 'root' | 'addCommentButton';\n\nconst useStyles = makeStyles(\n  () => ({\n    root: {\n      marginTop: '1em',\n    },\n    addCommentButton: {},\n  }),\n  { name: 'QetaCommentSection' },\n);\n\nexport const CommentSection = (props: {\n  onCommentAction: (post: PostResponse, answer?: AnswerResponse) => void;\n  post: PostResponse;\n  answer?: AnswerResponse;\n  className?: string;\n}) => {\n  const { answer, post, onCommentAction } = props;\n  const analytics = useAnalytics();\n  const qetaApi = useApi(qetaApiRef);\n  const [posting, setPosting] = React.useState(false);\n  const [formVisible, setFormVisible] = useState(false);\n  const [edited, setEdited] = React.useState(false);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const styles = useStyles();\n\n  const postComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi.commentAnswer(post.id, answer.id, data.content).then(a => {\n        setFormVisible(false);\n        analytics.captureEvent('comment', 'answer');\n        setPosting(false);\n        setEdited(false);\n        onCommentAction(post, a);\n      });\n      return;\n    }\n\n    qetaApi.commentPost(post.id, data.content).then(q => {\n      setFormVisible(false);\n      analytics.captureEvent('comment', post.type);\n      setPosting(false);\n      setEdited(false);\n      onCommentAction(q);\n    });\n  };\n\n  useConfirmNavigationIfEdited(edited);\n\n  return (\n    <Box\n      marginLeft={9}\n      className={`${styles.root} ${props.className} qetaCommentSection`}\n    >\n      <CommentList\n        post={post}\n        answer={answer}\n        onCommentAction={onCommentAction}\n      />\n      <OptionalRequirePermission\n        permission={qetaCreateCommentPermission}\n        errorPage={<></>}\n      >\n        {!formVisible && (\n          <Grid container justifyContent=\"flex-end\">\n            <Grid item>\n              <Button\n                size=\"small\"\n                startIcon={<AddCommentIcon />}\n                onClick={() => setFormVisible(true)}\n              >\n                {t('commentSection.addComment')}\n              </Button>\n            </Grid>\n          </Grid>\n        )}\n        {formVisible && (\n          <CommentForm\n            submit={postComment}\n            saveButtonTitle={t('commentSection.post')}\n            disabled={posting}\n          />\n        )}\n      </OptionalRequirePermission>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/DeleteModal/DeleteModal.esm.js

@@ -6,15 +6,8 @@ import { useState } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { qetaApiRef } from '../../api.esm.js';
-import 'react-use';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
-import '@backstage/catalog-model';
-import 'dataloader';
-import '@backstage/plugin-catalog-react';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import { ModalContent } from '../Utility/ModalContent.esm.js';
 
 const DeleteModal = (props) => {
@@ -22,7 +15,7 @@ const DeleteModal = (props) => {
   const navigate = useNavigate();
   const { entity, open, question, onClose } = props;
   const [error, setError] = useState(false);
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const isQuestion = "title" in entity;
   const isCollection = "owner" in entity;
   const isTag = "tag" in entity;

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteModal.esm.js","sources":["../../../src/components/DeleteModal/DeleteModal.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  CollectionResponse,\n  PostResponse,\n  TagResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Backdrop, Button, Modal, Typography } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport Delete from '@material-ui/icons/Delete';\nimport { useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../hooks';\nimport { ModalContent } from '../Utility/ModalContent';\n\nexport const DeleteModal = (props: {\n  entity: PostResponse | AnswerResponse | CollectionResponse | TagResponse;\n  open: boolean;\n  onClose: () => void;\n  question?: PostResponse;\n}) => {\n  const qetaApi = useApi(qetaApiRef);\n  const navigate = useNavigate();\n  const { entity, open, question, onClose } = props;\n  const [error, setError] = useState(false);\n  const { t } = useTranslation();\n  const isQuestion = 'title' in entity;\n  const isCollection = 'owner' in entity;\n  const isTag = 'tag' in entity;\n\n  const getTitle = () => {\n    if (isCollection) {\n      return t('deleteModal.title.collection');\n    }\n    if (isTag) {\n      return t('deleteModal.title.tag');\n    }\n    if (isQuestion) {\n      return t('deleteModal.title.question');\n    }\n    return t('deleteModal.title.answer');\n  };\n\n  // eslint-disable-next-line no-nested-ternary\n  const title = getTitle();\n\n  const handleDelete = () => {\n    if (isCollection) {\n      qetaApi\n        .deleteCollection(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(-1);\n          } else {\n            setError(true);\n          }\n        });\n    } else if (isTag) {\n      qetaApi\n        .deleteTag(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n          } else {\n            setError(true);\n          }\n        });\n    } else if (isQuestion) {\n      qetaApi\n        .deletePost(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(-1);\n          } else {\n            setError(true);\n          }\n        });\n    } else if (question) {\n      qetaApi\n        .deleteAnswer(question.id, entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            window.location.reload();\n          } else {\n            setError(true);\n          }\n        });\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      className=\"qetaDeleteModal\"\n      aria-labelledby=\"modal-modal-title\"\n      aria-describedby=\"modal-modal-description\"\n      closeAfterTransition\n      BackdropComponent={Backdrop}\n      BackdropProps={{\n        timeout: 500,\n      }}\n    >\n      <ModalContent>\n        {error && (\n          <Alert severity=\"error\">{t('deleteModal.errorDeleting')}</Alert>\n        )}\n        <Typography\n          id=\"modal-modal-title\"\n          className=\"qetaDeleteModalTitle\"\n          variant=\"h6\"\n          component=\"h2\"\n        >\n          {title}\n        </Typography>\n        <Button\n          onClick={handleDelete}\n          className=\"qetaDeleteModalDeleteBtn\"\n          startIcon={<Delete />}\n          color=\"secondary\"\n        >\n          {t('deleteModal.deleteButton')}\n        </Button>\n        <Button onClick={onClose} className=\"qetaDeleteModalCancelBtn\">\n          {t('deleteModal.cancelButton')}\n        </Button>\n      </ModalContent>\n    </Modal>\n  );\n};\n"],"names":["Delete"],"mappings":"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"}
+{"version":3,"file":"DeleteModal.esm.js","sources":["../../../src/components/DeleteModal/DeleteModal.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  CollectionResponse,\n  PostResponse,\n  TagResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Backdrop, Button, Modal, Typography } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport Delete from '@material-ui/icons/Delete';\nimport { useState } from 'react';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaApiRef } from '../../api';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport { ModalContent } from '../Utility/ModalContent';\n\nexport const DeleteModal = (props: {\n  entity: PostResponse | AnswerResponse | CollectionResponse | TagResponse;\n  open: boolean;\n  onClose: () => void;\n  question?: PostResponse;\n}) => {\n  const qetaApi = useApi(qetaApiRef);\n  const navigate = useNavigate();\n  const { entity, open, question, onClose } = props;\n  const [error, setError] = useState(false);\n  const { t } = useTranslationRef(qetaTranslationRef);\n  const isQuestion = 'title' in entity;\n  const isCollection = 'owner' in entity;\n  const isTag = 'tag' in entity;\n\n  const getTitle = () => {\n    if (isCollection) {\n      return t('deleteModal.title.collection');\n    }\n    if (isTag) {\n      return t('deleteModal.title.tag');\n    }\n    if (isQuestion) {\n      return t('deleteModal.title.question');\n    }\n    return t('deleteModal.title.answer');\n  };\n\n  // eslint-disable-next-line no-nested-ternary\n  const title = getTitle();\n\n  const handleDelete = () => {\n    if (isCollection) {\n      qetaApi\n        .deleteCollection(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(-1);\n          } else {\n            setError(true);\n          }\n        });\n    } else if (isTag) {\n      qetaApi\n        .deleteTag(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n          } else {\n            setError(true);\n          }\n        });\n    } else if (isQuestion) {\n      qetaApi\n        .deletePost(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(-1);\n          } else {\n            setError(true);\n          }\n        });\n    } else if (question) {\n      qetaApi\n        .deleteAnswer(question.id, entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            window.location.reload();\n          } else {\n            setError(true);\n          }\n        });\n    }\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      className=\"qetaDeleteModal\"\n      aria-labelledby=\"modal-modal-title\"\n      aria-describedby=\"modal-modal-description\"\n      closeAfterTransition\n      BackdropComponent={Backdrop}\n      BackdropProps={{\n        timeout: 500,\n      }}\n    >\n      <ModalContent>\n        {error && (\n          <Alert severity=\"error\">{t('deleteModal.errorDeleting')}</Alert>\n        )}\n        <Typography\n          id=\"modal-modal-title\"\n          className=\"qetaDeleteModalTitle\"\n          variant=\"h6\"\n          component=\"h2\"\n        >\n          {title}\n        </Typography>\n        <Button\n          onClick={handleDelete}\n          className=\"qetaDeleteModalDeleteBtn\"\n          startIcon={<Delete />}\n          color=\"secondary\"\n        >\n          {t('deleteModal.deleteButton')}\n        </Button>\n        <Button onClick={onClose} className=\"qetaDeleteModalCancelBtn\">\n          {t('deleteModal.cancelButton')}\n        </Button>\n      </ModalContent>\n    </Modal>\n  );\n};\n"],"names":["Delete"],"mappings":"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"}

package/dist/components/EntitiesGrid/EntitiesGrid.esm.js

@@ -4,10 +4,11 @@ import { useState, useEffect } from 'react';
 import { useQetaApi } from '../../hooks/useQetaApi.esm.js';
 import '@backstage/core-plugin-api';
 import '../../api.esm.js';
-import { useTranslation } from '../../hooks/useTranslation.esm.js';
 import '@backstage/catalog-model';
 import 'dataloader';
 import '@backstage/plugin-catalog-react';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.esm.js';
 import 'react-use/lib/useAsync';
 import '@backstage/plugin-permission-react';
 import '@drodil/backstage-plugin-qeta-common';
@@ -26,7 +27,7 @@ const EntitiesGrid = () => {
     order: "desc",
     searchQuery: ""
   });
-  const { t } = useTranslation();
+  const { t } = useTranslationRef(qetaTranslationRef);
   const {
     value: response,
     loading,