@drodil/backstage-plugin-qeta 2.5.3 → 2.7.0

package/dist/components/AskForm/EntitiesInput.esm.js

@@ -6,12 +6,14 @@ import { TextField } from '@material-ui/core';
 import React, { useMemo, useEffect } from 'react';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { useTranslation } from '../../utils/hooks.esm.js';
 
 const EntitiesInput = (props) => {
   const { control, entityRef } = props;
   const configApi = useApi(configApiRef);
   const catalogApi = useApi(catalogApiRef);
   const [availableEntities, setAvailableEntities] = React.useState([]);
+  const { t } = useTranslation();
   const entityKinds = useMemo(() => {
     let kinds = configApi.getOptionalStringArray("qeta.entityKinds");
     if (!kinds) {
@@ -38,6 +40,7 @@ const EntitiesInput = (props) => {
     }
     if (entityKinds && entityKinds.length > 0) {
       catalogApi.getEntities({
+        order: { field: "kind", order: "asc" },
         filter: { kind: entityKinds },
         fields: [
           "kind",
@@ -79,9 +82,11 @@ const EntitiesInput = (props) => {
               ...params,
               variant: "outlined",
               margin: "normal",
-              label: "Entities",
-              placeholder: "Type or select entities",
-              helperText: `Add up to ${max} entities this question relates to`
+              label: t("entitiesInput.label"),
+              placeholder: t("entitiesInput.placeholder"),
+              helperText: t("entitiesInput.helperText", {
+                max: max.toString(10)
+              })
             }
           )
         }

package/dist/components/AskForm/EntitiesInput.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/AskForm/EntitiesInput.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { QuestionForm } from './types';\nimport { Autocomplete } from '@material-ui/lab';\nimport { getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TextField } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\n\nexport const EntitiesInput = (props: {\n  control: Control<QuestionForm>;\n  entityRef?: string;\n}) => {\n  const { control, entityRef } = props;\n  const configApi = useApi(configApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >([]);\n\n  const entityKinds: string[] = useMemo(() => {\n    let kinds = configApi.getOptionalStringArray('qeta.entityKinds');\n    if (!kinds) {\n      kinds = configApi.getOptionalStringArray('qeta.entities.kinds');\n    }\n    return kinds || ['Component', 'System'];\n  }, [configApi]);\n  const max = useMemo(\n    () => configApi.getOptionalNumber('qeta.entities.max') ?? 3,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (entityRef) {\n      catalogApi.getEntityByRef(entityRef).then(data => {\n        if (data) {\n          setAvailableEntities([data]);\n        }\n      });\n    }\n  }, [catalogApi, entityRef]);\n\n  useEffect(() => {\n    if (entityRef) {\n      return;\n    }\n\n    if (entityKinds && entityKinds.length > 0) {\n      catalogApi\n        .getEntities({\n          filter: { kind: entityKinds },\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .catch(_ => setAvailableEntities(null))\n        .then(data =>\n          data ? setAvailableEntities(data.items) : setAvailableEntities(null),\n        );\n    }\n  }, [catalogApi, entityRef, configApi, entityKinds]);\n\n  if (!availableEntities || availableEntities.length === 0) {\n    return null;\n  }\n\n  return (\n    <Controller\n      control={control}\n      render={({ field: { onChange, value } }) => (\n        <Autocomplete\n          multiple\n          className=\"qetaAskFormEntities\"\n          value={value}\n          groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n          id=\"entities-select\"\n          options={availableEntities}\n          getOptionLabel={getEntityTitle}\n          getOptionSelected={(o, v) =>\n            stringifyEntityRef(o) === stringifyEntityRef(v)\n          }\n          onChange={(_e, newValue) => {\n            if (!value || value.length < max) {\n              onChange(newValue);\n            }\n          }}\n          renderInput={params => (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              label=\"Entities\"\n              placeholder=\"Type or select entities\"\n              helperText={`Add up to ${max} entities this question relates to`}\n            />\n          )}\n        />\n      )}\n      name=\"entities\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/AskForm/EntitiesInput.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { QuestionForm } from './types';\nimport { Autocomplete } from '@material-ui/lab';\nimport { getEntityTitle } from '../../utils/utils';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { TextField } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { useTranslation } from '../../utils/hooks';\n\nexport const EntitiesInput = (props: {\n  control: Control<QuestionForm>;\n  entityRef?: string;\n}) => {\n  const { control, entityRef } = props;\n  const configApi = useApi(configApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const [availableEntities, setAvailableEntities] = React.useState<\n    Entity[] | null\n  >([]);\n  const { t } = useTranslation();\n\n  const entityKinds: string[] = useMemo(() => {\n    let kinds = configApi.getOptionalStringArray('qeta.entityKinds');\n    if (!kinds) {\n      kinds = configApi.getOptionalStringArray('qeta.entities.kinds');\n    }\n    return kinds || ['Component', 'System'];\n  }, [configApi]);\n  const max = useMemo(\n    () => configApi.getOptionalNumber('qeta.entities.max') ?? 3,\n    [configApi],\n  );\n\n  useEffect(() => {\n    if (entityRef) {\n      catalogApi.getEntityByRef(entityRef).then(data => {\n        if (data) {\n          setAvailableEntities([data]);\n        }\n      });\n    }\n  }, [catalogApi, entityRef]);\n\n  useEffect(() => {\n    if (entityRef) {\n      return;\n    }\n\n    if (entityKinds && entityKinds.length > 0) {\n      catalogApi\n        .getEntities({\n          order: { field: 'kind', order: 'asc' },\n          filter: { kind: entityKinds },\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .catch(_ => setAvailableEntities(null))\n        .then(data =>\n          data ? setAvailableEntities(data.items) : setAvailableEntities(null),\n        );\n    }\n  }, [catalogApi, entityRef, configApi, entityKinds]);\n\n  if (!availableEntities || availableEntities.length === 0) {\n    return null;\n  }\n\n  return (\n    <Controller\n      control={control}\n      render={({ field: { onChange, value } }) => (\n        <Autocomplete\n          multiple\n          className=\"qetaAskFormEntities\"\n          value={value}\n          groupBy={entityKinds.length > 1 ? option => option.kind : undefined}\n          id=\"entities-select\"\n          options={availableEntities}\n          getOptionLabel={getEntityTitle}\n          getOptionSelected={(o, v) =>\n            stringifyEntityRef(o) === stringifyEntityRef(v)\n          }\n          onChange={(_e, newValue) => {\n            if (!value || value.length < max) {\n              onChange(newValue);\n            }\n          }}\n          renderInput={params => (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              label={t('entitiesInput.label')}\n              placeholder={t('entitiesInput.placeholder')}\n              helperText={t('entitiesInput.helperText', {\n                max: max.toString(10),\n              })}\n            />\n          )}\n        />\n      )}\n      name=\"entities\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -5,11 +5,13 @@ import React, { useMemo, useEffect } from 'react';
 import { qetaApiRef } from '../../api/QetaClient.esm.js';
 import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
+import { useTranslation } from '../../utils/hooks.esm.js';
 
 const TagInput = (props) => {
   const { control } = props;
   const qetaApi = useApi(qetaApiRef);
   const config = useApi(configApiRef);
+  const { t } = useTranslation();
   const allowCreation = useMemo(
     () => config.getOptionalBoolean("qeta.tags.allowCreation") ?? true,
     [config]
@@ -60,9 +62,11 @@ const TagInput = (props) => {
               ...params,
               variant: "outlined",
               margin: "normal",
-              label: "Tags",
-              placeholder: "Type or select tags",
-              helperText: `Add up to ${maximumTags} tags to categorize your question`,
+              label: t("tagsInput.label"),
+              placeholder: t("tagsInput.placeholder"),
+              helperText: t("tagsInput.helperText", {
+                max: maximumTags.toString(10)
+              }),
               error: error !== void 0
             }
           )

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

@@ -1 +1 @@
-{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/AskForm/TagInput.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { Autocomplete } from '@material-ui/lab';\nimport { TextField } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { QuestionForm } from './types';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\n\nexport const TagInput = (props: { control: Control<QuestionForm> }) => {\n  const { control } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const allowCreation = useMemo(\n    () => config.getOptionalBoolean('qeta.tags.allowCreation') ?? true,\n    [config],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? null,\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);\n  useEffect(() => {\n    if (allowCreation) {\n      qetaApi\n        .getTags()\n        .catch(_ => setAvailableTags(null))\n        .then(data =>\n          data\n            ? setAvailableTags(data.map(tag => tag.tag))\n            : setAvailableTags(null),\n        );\n    } else {\n      setAvailableTags(allowedTags);\n    }\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!allowCreation && (allowedTags === null || allowedTags.length === 0)) {\n    return null;\n  }\n\n  return (\n    <Controller\n      control={control}\n      render={({ field: { onChange, value }, fieldState: { error } }) => (\n        <Autocomplete\n          multiple\n          id=\"tags-select\"\n          className=\"qetaAskFormTags\"\n          value={value}\n          options={availableTags ?? []}\n          freeSolo={allowCreation}\n          onChange={(_e, newValue) => {\n            const tags = filterTags(newValue);\n            if (\n              tags &&\n              tags.length <= maximumTags &&\n              tags.length === newValue.length\n            ) {\n              onChange(newValue);\n            }\n          }}\n          renderInput={params => (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              label=\"Tags\"\n              placeholder=\"Type or select tags\"\n              helperText={`Add up to ${maximumTags} tags to categorize your question`}\n              error={error !== undefined}\n            />\n          )}\n        />\n      )}\n      name=\"tags\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TagInput.esm.js","sources":["../../../src/components/AskForm/TagInput.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { Autocomplete } from '@material-ui/lab';\nimport { TextField } from '@material-ui/core';\nimport React, { useEffect, useMemo } from 'react';\nimport { qetaApiRef } from '../../api';\nimport { QuestionForm } from './types';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../utils/hooks';\n\nexport const TagInput = (props: { control: Control<QuestionForm> }) => {\n  const { control } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const config = useApi(configApiRef);\n  const { t } = useTranslation();\n  const allowCreation = useMemo(\n    () => config.getOptionalBoolean('qeta.tags.allowCreation') ?? true,\n    [config],\n  );\n  const allowedTags = useMemo(\n    () => config.getOptionalStringArray('qeta.tags.allowedTags') ?? null,\n    [config],\n  );\n  const maximumTags = useMemo(\n    () => config.getOptionalNumber('qeta.tags.max') ?? 5,\n    [config],\n  );\n  const [availableTags, setAvailableTags] = React.useState<string[] | null>([]);\n  useEffect(() => {\n    if (allowCreation) {\n      qetaApi\n        .getTags()\n        .catch(_ => setAvailableTags(null))\n        .then(data =>\n          data\n            ? setAvailableTags(data.map(tag => tag.tag))\n            : setAvailableTags(null),\n        );\n    } else {\n      setAvailableTags(allowedTags);\n    }\n  }, [qetaApi, allowCreation, allowedTags]);\n\n  if (!allowCreation && (allowedTags === null || allowedTags.length === 0)) {\n    return null;\n  }\n\n  return (\n    <Controller\n      control={control}\n      render={({ field: { onChange, value }, fieldState: { error } }) => (\n        <Autocomplete\n          multiple\n          id=\"tags-select\"\n          className=\"qetaAskFormTags\"\n          value={value}\n          options={availableTags ?? []}\n          freeSolo={allowCreation}\n          onChange={(_e, newValue) => {\n            const tags = filterTags(newValue);\n            if (\n              tags &&\n              tags.length <= maximumTags &&\n              tags.length === newValue.length\n            ) {\n              onChange(newValue);\n            }\n          }}\n          renderInput={params => (\n            <TextField\n              {...params}\n              variant=\"outlined\"\n              margin=\"normal\"\n              label={t('tagsInput.label')}\n              placeholder={t('tagsInput.placeholder')}\n              helperText={t('tagsInput.helperText', {\n                max: maximumTags.toString(10),\n              })}\n              error={error !== undefined}\n            />\n          )}\n        />\n      )}\n      name=\"tags\"\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/AskPage/AskPage.esm.js

@@ -6,6 +6,7 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton.esm.js';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { filterTags } from '@drodil/backstage-plugin-qeta-common';
+import { useTranslation } from '../../utils/hooks.esm.js';
 
 const AskPage = () => {
   const { id } = useParams();
@@ -13,14 +14,17 @@ const AskPage = () => {
   const entity = searchParams.get("entity") ?? void 0;
   const entityPage = searchParams.get("entityPage") === "true";
   const tags = filterTags(searchParams.get("tags"));
+  const { t } = useTranslation();
   let title;
   if (id) {
-    title = "Edit question";
+    title = t("askPage.title.existingQuestion");
   } else if (entity) {
     const representation = useEntityPresentation(entity);
-    title = `Ask a question about ${representation.primaryTitle}`;
+    title = t("askPage.title.entityQuestion", {
+      entity: representation.primaryTitle
+    });
   } else {
-    title = "Ask question";
+    title = t("askPage.title.newQuestion");
   }
   return /* @__PURE__ */ React.createElement(Content, { className: "qetaAskPage" }, /* @__PURE__ */ React.createElement(ContentHeader, { title }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, { entityPage })), /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
     AskForm,

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

@@ -1 +1 @@
-{"version":3,"file":"AskPage.esm.js","sources":["../../../src/components/AskPage/AskPage.tsx"],"sourcesContent":["import { Content, ContentHeader, InfoCard } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport React from 'react';\n\nimport { AskForm } from '../AskForm/AskForm';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\n\nexport const AskPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const tags = filterTags(searchParams.get('tags'));\n  let title;\n  if (id) {\n    title = 'Edit question';\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = `Ask a question about ${representation.primaryTitle}`;\n  } else {\n    title = 'Ask question';\n  }\n\n  return (\n    <Content className=\"qetaAskPage\">\n      <ContentHeader title={title}>\n        <BackToQuestionsButton entityPage={entityPage} />\n      </ContentHeader>\n      <Grid container spacing={3} direction=\"column\">\n        <Grid item>\n          <InfoCard>\n            <AskForm\n              id={id}\n              entity={entity}\n              entityPage={entityPage}\n              tags={tags}\n            />\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </Content>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU,MAAM;AAC3B,EAAM,MAAA,EAAE,EAAG,EAAA,GAAI,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,CAAC,YAAY,CAAA,GAAI,eAAgB,EAAA,CAAA;AACvC,EAAA,MAAM,MAAS,GAAA,YAAA,CAAa,GAAI,CAAA,QAAQ,CAAK,IAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,UAAa,GAAA,YAAA,CAAa,GAAI,CAAA,YAAY,CAAM,KAAA,MAAA,CAAA;AACtD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,YAAa,CAAA,GAAA,CAAI,MAAM,CAAC,CAAA,CAAA;AAChD,EAAI,IAAA,KAAA,CAAA;AACJ,EAAA,IAAI,EAAI,EAAA;AACN,IAAQ,KAAA,GAAA,eAAA,CAAA;AAAA,aACC,MAAQ,EAAA;AAEjB,IAAM,MAAA,cAAA,GAAiB,sBAAsB,MAAM,CAAA,CAAA;AACnD,IAAQ,KAAA,GAAA,CAAA,qBAAA,EAAwB,eAAe,YAAY,CAAA,CAAA,CAAA;AAAA,GACtD,MAAA;AACL,IAAQ,KAAA,GAAA,cAAA,CAAA;AAAA,GACV;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,aACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,KACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,qBAAsB,EAAA,EAAA,UAAA,EAAwB,CACjD,CAAA,sCACC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,CAAG,EAAA,SAAA,EAAU,QACpC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AskPage.esm.js","sources":["../../../src/components/AskPage/AskPage.tsx"],"sourcesContent":["import { Content, ContentHeader, InfoCard } from '@backstage/core-components';\nimport { Grid } from '@material-ui/core';\nimport React from 'react';\n\nimport { AskForm } from '../AskForm/AskForm';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { filterTags } from '@drodil/backstage-plugin-qeta-common';\nimport { useTranslation } from '../../utils/hooks';\n\nexport const AskPage = () => {\n  const { id } = useParams();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity') ?? undefined;\n  const entityPage = searchParams.get('entityPage') === 'true';\n  const tags = filterTags(searchParams.get('tags'));\n  const { t } = useTranslation();\n  let title;\n  if (id) {\n    title = t('askPage.title.existingQuestion');\n  } else if (entity) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const representation = useEntityPresentation(entity);\n    title = t('askPage.title.entityQuestion', {\n      entity: representation.primaryTitle,\n    });\n  } else {\n    title = t('askPage.title.newQuestion');\n  }\n\n  return (\n    <Content className=\"qetaAskPage\">\n      <ContentHeader title={title}>\n        <BackToQuestionsButton entityPage={entityPage} />\n      </ContentHeader>\n      <Grid container spacing={3} direction=\"column\">\n        <Grid item>\n          <InfoCard>\n            <AskForm\n              id={id}\n              entity={entity}\n              entityPage={entityPage}\n              tags={tags}\n            />\n          </InfoCard>\n        </Grid>\n      </Grid>\n    </Content>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWO,MAAM,UAAU,MAAM;AAC3B,EAAM,MAAA,EAAE,EAAG,EAAA,GAAI,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,CAAC,YAAY,CAAA,GAAI,eAAgB,EAAA,CAAA;AACvC,EAAA,MAAM,MAAS,GAAA,YAAA,CAAa,GAAI,CAAA,QAAQ,CAAK,IAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,UAAa,GAAA,YAAA,CAAa,GAAI,CAAA,YAAY,CAAM,KAAA,MAAA,CAAA;AACtD,EAAA,MAAM,IAAO,GAAA,UAAA,CAAW,YAAa,CAAA,GAAA,CAAI,MAAM,CAAC,CAAA,CAAA;AAChD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAI,IAAA,KAAA,CAAA;AACJ,EAAA,IAAI,EAAI,EAAA;AACN,IAAA,KAAA,GAAQ,EAAE,gCAAgC,CAAA,CAAA;AAAA,aACjC,MAAQ,EAAA;AAEjB,IAAM,MAAA,cAAA,GAAiB,sBAAsB,MAAM,CAAA,CAAA;AACnD,IAAA,KAAA,GAAQ,EAAE,8BAAgC,EAAA;AAAA,MACxC,QAAQ,cAAe,CAAA,YAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACI,MAAA;AACL,IAAA,KAAA,GAAQ,EAAE,2BAA2B,CAAA,CAAA;AAAA,GACvC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,aACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAc,KACb,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,qBAAsB,EAAA,EAAA,UAAA,EAAwB,CACjD,CAAA,sCACC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,OAAA,EAAS,CAAG,EAAA,SAAA,EAAU,QACpC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IACR,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GAEJ,CACF,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -5,10 +5,12 @@ import { qetaCreateQuestionPermission } from '@drodil/backstage-plugin-qeta-comm
 import { LinkButton } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { askRouteRef } from '@drodil/backstage-plugin-qeta-react';
+import { useTranslation } from '../../utils/hooks.esm.js';
 
 const AskQuestionButton = (props) => {
   const { entity, entityPage, tags } = props;
   const askRoute = useRouteRef(askRouteRef);
+  const { t } = useTranslation();
   const params = new URLSearchParams();
   if (entity) {
     params.set("entity", entity);
@@ -34,7 +36,7 @@ const AskQuestionButton = (props) => {
         className: "qetaAskQuestionBtn",
         startIcon: /* @__PURE__ */ React.createElement(HelpOutline, null)
       },
-      "Ask question"
+      t("askQuestionButton.title")
     )
   );
 };

package/dist/components/Buttons/AskQuestionButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AskQuestionButton.esm.js","sources":["../../../src/components/Buttons/AskQuestionButton.tsx"],"sourcesContent":["import HelpOutline from '@material-ui/icons/HelpOutline';\nimport React from 'react';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { qetaCreateQuestionPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { askRouteRef } from '@drodil/backstage-plugin-qeta-react';\n\nexport const AskQuestionButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const askRoute = useRouteRef(askRouteRef);\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <RequirePermission\n      permission={qetaCreateQuestionPermission}\n      errorPage={<></>}\n    >\n      <LinkButton\n        variant=\"contained\"\n        to={entity || tags ? `${askRoute()}?${params.toString()}` : askRoute()}\n        color=\"primary\"\n        className=\"qetaAskQuestionBtn\"\n        startIcon={<HelpOutline />}\n      >\n        Ask question\n      </LinkButton>\n    </RequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQa,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA,CAAA;AAExC,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA,CAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA,CAAA;AAAA,GAC7B;AACA,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA,CAAA;AAAA,GACjC;AACA,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,GACnC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,4BAAA;AAAA,MACZ,2BAAa,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,oBAEb,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,EAAA,EAAI,MAAU,IAAA,IAAA,GAAO,CAAG,EAAA,QAAA,EAAU,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GAAK,QAAS,EAAA;AAAA,QACrE,KAAM,EAAA,SAAA;AAAA,QACN,SAAU,EAAA,oBAAA;AAAA,QACV,SAAA,sCAAY,WAAY,EAAA,IAAA,CAAA;AAAA,OAAA;AAAA,MACzB,cAAA;AAAA,KAED;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"AskQuestionButton.esm.js","sources":["../../../src/components/Buttons/AskQuestionButton.tsx"],"sourcesContent":["import HelpOutline from '@material-ui/icons/HelpOutline';\nimport React from 'react';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\nimport { qetaCreateQuestionPermission } from '@drodil/backstage-plugin-qeta-common';\nimport { LinkButton } from '@backstage/core-components';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { askRouteRef } from '@drodil/backstage-plugin-qeta-react';\nimport { useTranslation } from '../../utils/hooks';\n\nexport const AskQuestionButton = (props: {\n  entity?: string;\n  tags?: string[];\n  entityPage?: boolean;\n}) => {\n  const { entity, entityPage, tags } = props;\n  const askRoute = useRouteRef(askRouteRef);\n  const { t } = useTranslation();\n\n  const params = new URLSearchParams();\n  if (entity) {\n    params.set('entity', entity);\n  }\n  if (entityPage) {\n    params.set('entityPage', 'true');\n  }\n  if (tags && tags.length > 0) {\n    params.set('tags', tags.join(','));\n  }\n\n  return (\n    <RequirePermission\n      permission={qetaCreateQuestionPermission}\n      errorPage={<></>}\n    >\n      <LinkButton\n        variant=\"contained\"\n        to={entity || tags ? `${askRoute()}?${params.toString()}` : askRoute()}\n        color=\"primary\"\n        className=\"qetaAskQuestionBtn\"\n        startIcon={<HelpOutline />}\n      >\n        {t('askQuestionButton.title')}\n      </LinkButton>\n    </RequirePermission>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AASa,MAAA,iBAAA,GAAoB,CAAC,KAI5B,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,YAAY,WAAW,CAAA,CAAA;AACxC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAM,MAAA,MAAA,GAAS,IAAI,eAAgB,EAAA,CAAA;AACnC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,MAAA,CAAA,GAAA,CAAI,UAAU,MAAM,CAAA,CAAA;AAAA,GAC7B;AACA,EAAA,IAAI,UAAY,EAAA;AACd,IAAO,MAAA,CAAA,GAAA,CAAI,cAAc,MAAM,CAAA,CAAA;AAAA,GACjC;AACA,EAAI,IAAA,IAAA,IAAQ,IAAK,CAAA,MAAA,GAAS,CAAG,EAAA;AAC3B,IAAA,MAAA,CAAO,GAAI,CAAA,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAAA,GACnC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,UAAY,EAAA,4BAAA;AAAA,MACZ,2BAAa,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,oBAEb,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,EAAA,EAAI,MAAU,IAAA,IAAA,GAAO,CAAG,EAAA,QAAA,EAAU,CAAA,CAAA,EAAI,MAAO,CAAA,QAAA,EAAU,CAAA,CAAA,GAAK,QAAS,EAAA;AAAA,QACrE,KAAM,EAAA,SAAA;AAAA,QACN,SAAU,EAAA,oBAAA;AAAA,QACV,SAAA,sCAAY,WAAY,EAAA,IAAA,CAAA;AAAA,OAAA;AAAA,MAEvB,EAAE,yBAAyB,CAAA;AAAA,KAC9B;AAAA,GACF,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import { LinkButton } from '@backstage/core-components';
 import HomeOutlined from '@material-ui/icons/HomeOutlined';
 import React from 'react';
-import { useStyles } from '../../utils/hooks.esm.js';
+import { useStyles, useTranslation } from '../../utils/hooks.esm.js';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { entityRouteRef } from '@backstage/plugin-catalog-react';
 import { parseEntityRef } from '@backstage/catalog-model';
@@ -12,6 +12,7 @@ const BackToQuestionsButton = (props) => {
   const styles = useStyles();
   const entityRoute = useRouteRef(entityRouteRef);
   const rootRoute = useRouteRef(qetaRouteRef);
+  const { t } = useTranslation();
   let to = rootRoute();
   const [searchParams] = useSearchParams();
   const entity = searchParams.get("entity");
@@ -30,7 +31,7 @@ const BackToQuestionsButton = (props) => {
       to,
       startIcon: /* @__PURE__ */ React.createElement(HomeOutlined, null)
     },
-    "Back to questions"
+    t("backToQuestionsButton.title")
   );
 };
 

package/dist/components/Buttons/BackToQuestionsButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackToQuestionsButton.esm.js","sources":["../../../src/components/Buttons/BackToQuestionsButton.tsx"],"sourcesContent":["import { LinkButton } from '@backstage/core-components';\nimport HomeOutlined from '@material-ui/icons/HomeOutlined';\nimport React from 'react';\nimport { useStyles } from '../../utils/hooks';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useSearchParams } from 'react-router-dom';\nimport { qetaRouteRef } from '@drodil/backstage-plugin-qeta-react';\n\nexport const BackToQuestionsButton = (props: { entityPage?: boolean }) => {\n  const styles = useStyles();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const rootRoute = useRouteRef(qetaRouteRef);\n\n  let to = rootRoute();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity');\n  if (entity) {\n    const entityRef = parseEntityRef(entity);\n    if (props.entityPage) {\n      to = `${entityRoute(entityRef)}/qeta`;\n    } else {\n      to = `${rootRoute()}?entity=${entity}`;\n    }\n  }\n\n  return (\n    <LinkButton\n      className={`${styles.marginRight} qetaBackToQuestionsBtn`}\n      to={to}\n      startIcon={<HomeOutlined />}\n    >\n      Back to questions\n    </LinkButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,qBAAA,GAAwB,CAAC,KAAoC,KAAA;AACxE,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA,CAAA;AAE1C,EAAA,IAAI,KAAK,SAAU,EAAA,CAAA;AACnB,EAAM,MAAA,CAAC,YAAY,CAAA,GAAI,eAAgB,EAAA,CAAA;AACvC,EAAM,MAAA,MAAA,GAAS,YAAa,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AACxC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,SAAA,GAAY,eAAe,MAAM,CAAA,CAAA;AACvC,IAAA,IAAI,MAAM,UAAY,EAAA;AACpB,MAAK,EAAA,GAAA,CAAA,EAAG,WAAY,CAAA,SAAS,CAAC,CAAA,KAAA,CAAA,CAAA;AAAA,KACzB,MAAA;AACL,MAAA,EAAA,GAAK,CAAG,EAAA,SAAA,EAAW,CAAA,QAAA,EAAW,MAAM,CAAA,CAAA,CAAA;AAAA,KACtC;AAAA,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAG,EAAA,MAAA,CAAO,WAAW,CAAA,uBAAA,CAAA;AAAA,MAChC,EAAA;AAAA,MACA,SAAA,sCAAY,YAAa,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IAC1B,mBAAA;AAAA,GAED,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BackToQuestionsButton.esm.js","sources":["../../../src/components/Buttons/BackToQuestionsButton.tsx"],"sourcesContent":["import { LinkButton } from '@backstage/core-components';\nimport HomeOutlined from '@material-ui/icons/HomeOutlined';\nimport React from 'react';\nimport { useStyles, useTranslation } from '../../utils/hooks';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { entityRouteRef } from '@backstage/plugin-catalog-react';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useSearchParams } from 'react-router-dom';\nimport { qetaRouteRef } from '@drodil/backstage-plugin-qeta-react';\n\nexport const BackToQuestionsButton = (props: { entityPage?: boolean }) => {\n  const styles = useStyles();\n  const entityRoute = useRouteRef(entityRouteRef);\n  const rootRoute = useRouteRef(qetaRouteRef);\n  const { t } = useTranslation();\n\n  let to = rootRoute();\n  const [searchParams] = useSearchParams();\n  const entity = searchParams.get('entity');\n  if (entity) {\n    const entityRef = parseEntityRef(entity);\n    if (props.entityPage) {\n      to = `${entityRoute(entityRef)}/qeta`;\n    } else {\n      to = `${rootRoute()}?entity=${entity}`;\n    }\n  }\n\n  return (\n    <LinkButton\n      className={`${styles.marginRight} qetaBackToQuestionsBtn`}\n      to={to}\n      startIcon={<HomeOutlined />}\n    >\n      {t('backToQuestionsButton.title')}\n    </LinkButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAUa,MAAA,qBAAA,GAAwB,CAAC,KAAoC,KAAA;AACxE,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAY,YAAY,YAAY,CAAA,CAAA;AAC1C,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAA,IAAI,KAAK,SAAU,EAAA,CAAA;AACnB,EAAM,MAAA,CAAC,YAAY,CAAA,GAAI,eAAgB,EAAA,CAAA;AACvC,EAAM,MAAA,MAAA,GAAS,YAAa,CAAA,GAAA,CAAI,QAAQ,CAAA,CAAA;AACxC,EAAA,IAAI,MAAQ,EAAA;AACV,IAAM,MAAA,SAAA,GAAY,eAAe,MAAM,CAAA,CAAA;AACvC,IAAA,IAAI,MAAM,UAAY,EAAA;AACpB,MAAK,EAAA,GAAA,CAAA,EAAG,WAAY,CAAA,SAAS,CAAC,CAAA,KAAA,CAAA,CAAA;AAAA,KACzB,MAAA;AACL,MAAA,EAAA,GAAK,CAAG,EAAA,SAAA,EAAW,CAAA,QAAA,EAAW,MAAM,CAAA,CAAA,CAAA;AAAA,KACtC;AAAA,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAG,EAAA,MAAA,CAAO,WAAW,CAAA,uBAAA,CAAA;AAAA,MAChC,EAAA;AAAA,MACA,SAAA,sCAAY,YAAa,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IAExB,EAAE,6BAA6B,CAAA;AAAA,GAClC,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import { Box, Typography, Divider } from '@material-ui/core';
 import React from 'react';
 import { MarkdownContent, Link } from '@backstage/core-components';
-import { useStyles } from '../../utils/hooks.esm.js';
+import { useStyles, useTranslation } from '../../utils/hooks.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip.esm.js';
 import { AuthorLink } from '../Links/Links.esm.js';
@@ -12,6 +12,7 @@ const CommentList = (props) => {
   const entity = answer ?? question;
   const styles = useStyles();
   const qetaApi = useApi(qetaApiRef);
+  const { t } = useTranslation();
   const deleteComment = (id) => {
     if (answer) {
       qetaApi.deleteAnswerComment(question.id, answer.id, id).then((a) => {
@@ -37,7 +38,7 @@ const CommentList = (props) => {
         className: "qetaCommentDeleteBtn",
         onClick: () => deleteComment(c.id)
       },
-      "delete"
+      t("commentList.deleteLink")
     ))), /* @__PURE__ */ React.createElement(Divider, null));
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CommentList.esm.js","sources":["../../../src/components/CommentSection/CommentList.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Divider, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { Link, MarkdownContent } from '@backstage/core-components';\nimport { useStyles } from '../../utils/hooks';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip';\nimport { AuthorLink } from '../Links/Links';\nimport { qetaApiRef } from '../../api';\n\nexport const CommentList = (props: {\n  onCommentDelete: (\n    question: QuestionResponse,\n    answer?: AnswerResponse,\n  ) => void;\n  question: QuestionResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { question, answer, onCommentDelete } = props;\n  const entity = answer ?? question;\n  const styles = useStyles();\n  const qetaApi = useApi(qetaApiRef);\n\n  const deleteComment = (id: number) => {\n    if (answer) {\n      qetaApi.deleteAnswerComment(question.id, answer.id, id).then(a => {\n        onCommentDelete(question, a);\n        return;\n      });\n    }\n    qetaApi\n      .deleteQuestionComment(question.id, id)\n      .then(q => onCommentDelete(q));\n  };\n\n  return (\n    <>\n      {entity.comments?.map(c => {\n        return (\n          <>\n            <Box key={c.id} className=\"qetaCommentBox\">\n              <MarkdownContent\n                dialect=\"gfm\"\n                content={c.content}\n                className={`${styles.markdownContent} inline`}\n              />\n              {' – '}\n              <AuthorLink entity={c} />{' '}\n              <Typography variant=\"caption\" className=\"qetaCommentTime\">\n                <RelativeTimeWithTooltip value={c.created} />\n              </Typography>\n              {(c.own || c.canDelete) && (\n                <>\n                  {' / '}\n                  <Link\n                    underline=\"none\"\n                    to=\"#\"\n                    className=\"qetaCommentDeleteBtn\"\n                    onClick={() => deleteComment(c.id)}\n                  >\n                    delete\n                  </Link>\n                </>\n              )}\n            </Box>\n            <Divider />\n          </>\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaa,MAAA,WAAA,GAAc,CAAC,KAOtB,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA,CAAA;AAC9C,EAAA,MAAM,SAAS,MAAU,IAAA,QAAA,CAAA;AACzB,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA,CAAA;AAEjC,EAAM,MAAA,aAAA,GAAgB,CAAC,EAAe,KAAA;AACpC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,EAAI,EAAA,MAAA,CAAO,IAAI,EAAE,CAAA,CAAE,KAAK,CAAK,CAAA,KAAA;AAChE,QAAA,eAAA,CAAgB,UAAU,CAAC,CAAA,CAAA;AAC3B,QAAA,OAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AACA,IACG,OAAA,CAAA,qBAAA,CAAsB,SAAS,EAAI,EAAA,EAAE,EACrC,IAAK,CAAA,CAAA,CAAA,KAAK,eAAgB,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAO,QAAU,EAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AACzB,IAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,KAAK,CAAE,CAAA,EAAA,EAAI,WAAU,gBACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,KAAA;AAAA,QACR,SAAS,CAAE,CAAA,OAAA;AAAA,QACX,SAAA,EAAW,CAAG,EAAA,MAAA,CAAO,eAAe,CAAA,OAAA,CAAA;AAAA,OAAA;AAAA,KACtC,EACC,UACD,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,CAAG,EAAA,CAAA,EAAG,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,SAAA,EAAU,qCACrC,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,CAAA,CAAE,OAAS,EAAA,CAC7C,CACE,EAAA,CAAA,CAAA,CAAE,GAAO,IAAA,CAAA,CAAE,SACX,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KACD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAG,EAAA,GAAA;AAAA,QACH,SAAU,EAAA,sBAAA;AAAA,QACV,OAAS,EAAA,MAAM,aAAc,CAAA,CAAA,CAAE,EAAE,CAAA;AAAA,OAAA;AAAA,MAClC,QAAA;AAAA,KAGH,CAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,CACX,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CommentList.esm.js","sources":["../../../src/components/CommentSection/CommentList.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Box, Divider, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { Link, MarkdownContent } from '@backstage/core-components';\nimport { useStyles, useTranslation } from '../../utils/hooks';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip/RelativeTimeWithTooltip';\nimport { AuthorLink } from '../Links/Links';\nimport { qetaApiRef } from '../../api';\n\nexport const CommentList = (props: {\n  onCommentDelete: (\n    question: QuestionResponse,\n    answer?: AnswerResponse,\n  ) => void;\n  question: QuestionResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { question, answer, onCommentDelete } = props;\n  const entity = answer ?? question;\n  const styles = useStyles();\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n\n  const deleteComment = (id: number) => {\n    if (answer) {\n      qetaApi.deleteAnswerComment(question.id, answer.id, id).then(a => {\n        onCommentDelete(question, a);\n        return;\n      });\n    }\n    qetaApi\n      .deleteQuestionComment(question.id, id)\n      .then(q => onCommentDelete(q));\n  };\n\n  return (\n    <>\n      {entity.comments?.map(c => {\n        return (\n          <>\n            <Box key={c.id} className=\"qetaCommentBox\">\n              <MarkdownContent\n                dialect=\"gfm\"\n                content={c.content}\n                className={`${styles.markdownContent} inline`}\n              />\n              {' – '}\n              <AuthorLink entity={c} />{' '}\n              <Typography variant=\"caption\" className=\"qetaCommentTime\">\n                <RelativeTimeWithTooltip value={c.created} />\n              </Typography>\n              {(c.own || c.canDelete) && (\n                <>\n                  {' / '}\n                  <Link\n                    underline=\"none\"\n                    to=\"#\"\n                    className=\"qetaCommentDeleteBtn\"\n                    onClick={() => deleteComment(c.id)}\n                  >\n                    {t('commentList.deleteLink')}\n                  </Link>\n                </>\n              )}\n            </Box>\n            <Divider />\n          </>\n        );\n      })}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaa,MAAA,WAAA,GAAc,CAAC,KAOtB,KAAA;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA,CAAA;AAC9C,EAAA,MAAM,SAAS,MAAU,IAAA,QAAA,CAAA;AACzB,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA,CAAA;AACjC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAM,MAAA,aAAA,GAAgB,CAAC,EAAe,KAAA;AACpC,IAAA,IAAI,MAAQ,EAAA;AACV,MAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,EAAI,EAAA,MAAA,CAAO,IAAI,EAAE,CAAA,CAAE,KAAK,CAAK,CAAA,KAAA;AAChE,QAAA,eAAA,CAAgB,UAAU,CAAC,CAAA,CAAA;AAC3B,QAAA,OAAA;AAAA,OACD,CAAA,CAAA;AAAA,KACH;AACA,IACG,OAAA,CAAA,qBAAA,CAAsB,SAAS,EAAI,EAAA,EAAE,EACrC,IAAK,CAAA,CAAA,CAAA,KAAK,eAAgB,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,MAAA,CAAO,QAAU,EAAA,GAAA,CAAI,CAAK,CAAA,KAAA;AACzB,IAAA,iFAEK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,KAAK,CAAE,CAAA,EAAA,EAAI,WAAU,gBACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,KAAA;AAAA,QACR,SAAS,CAAE,CAAA,OAAA;AAAA,QACX,SAAA,EAAW,CAAG,EAAA,MAAA,CAAO,eAAe,CAAA,OAAA,CAAA;AAAA,OAAA;AAAA,KACtC,EACC,UACD,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,CAAG,EAAA,CAAA,EAAG,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,SAAA,EAAU,qCACrC,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,EAAwB,KAAO,EAAA,CAAA,CAAE,OAAS,EAAA,CAC7C,CACE,EAAA,CAAA,CAAA,CAAE,GAAO,IAAA,CAAA,CAAE,SACX,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KACD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,MAAA;AAAA,QACV,EAAG,EAAA,GAAA;AAAA,QACH,SAAU,EAAA,sBAAA;AAAA,QACV,OAAS,EAAA,MAAM,aAAc,CAAA,CAAA,CAAE,EAAE,CAAA;AAAA,OAAA;AAAA,MAEhC,EAAE,wBAAwB,CAAA;AAAA,KAE/B,CAEJ,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,CACX,CAAA,CAAA;AAAA,GAEH,CACH,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, Grid, TextField, Button } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
 import { useForm, Controller } from 'react-hook-form';
 import { useAnalytics, useApi } from '@backstage/core-plugin-api';
 import { CommentList } from './CommentList.esm.js';
 import { qetaApiRef } from '../../api/QetaClient.esm.js';
+import { useTranslation } from '../../utils/hooks.esm.js';
+import { confirmNavigationIfEdited } from '../../utils/utils.esm.js';
 
 const CommentSection = (props) => {
   const { answer, question, onCommentPost, onCommentDelete } = props;
@@ -12,6 +14,8 @@ const CommentSection = (props) => {
   const qetaApi = useApi(qetaApiRef);
   const [posting, setPosting] = React.useState(false);
   const [formVisible, setFormVisible] = useState(false);
+  const [edited, setEdited] = React.useState(false);
+  const { t } = useTranslation();
   const {
     handleSubmit,
     control,
@@ -38,6 +42,9 @@ const CommentSection = (props) => {
       onCommentPost(q);
     });
   };
+  useEffect(() => {
+    confirmNavigationIfEdited(edited);
+  }, [edited]);
   return /* @__PURE__ */ React.createElement(Box, { marginLeft: 9, className: "qetaCommentSection" }, /* @__PURE__ */ React.createElement(
     CommentList,
     {
@@ -53,44 +60,54 @@ const CommentSection = (props) => {
       className: "qetaAddCommentBtn",
       onClick: () => setFormVisible(true)
     },
-    "Add comment"
-  ), formVisible && /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit(postComment), className: "qetaCommentForm" }, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(
-    Controller,
+    t("commentSection.addComment")
+  ), formVisible && /* @__PURE__ */ React.createElement(
+    "form",
     {
-      control,
-      defaultValue: "",
-      rules: {
-        required: true
+      onSubmit: handleSubmit(postComment),
+      onChange: () => {
+        setEdited(true);
       },
-      render: ({ field: { onChange, value } }) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          id: "comment",
-          multiline: true,
-          minRows: 2,
-          fullWidth: true,
-          className: "qetaCommentInput",
-          value,
-          placeholder: "Your commment",
-          onChange,
-          variant: "outlined",
-          error: "content" in errors
-        }
-      ),
-      name: "content"
-    }
-  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "contained",
-      size: "small",
-      className: "qetaCommentBtn",
-      type: "submit",
-      color: "primary",
-      disabled: posting
+      className: "qetaCommentForm"
     },
-    "Post"
-  )))));
+    /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React.createElement(
+      Controller,
+      {
+        control,
+        defaultValue: "",
+        rules: {
+          required: true
+        },
+        render: ({ field: { onChange, value } }) => /* @__PURE__ */ React.createElement(
+          TextField,
+          {
+            id: "comment",
+            multiline: true,
+            minRows: 2,
+            fullWidth: true,
+            className: "qetaCommentInput",
+            value,
+            placeholder: t("commentSection.input.placeholder"),
+            onChange,
+            variant: "outlined",
+            error: "content" in errors
+          }
+        ),
+        name: "content"
+      }
+    )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        size: "small",
+        className: "qetaCommentBtn",
+        type: "submit",
+        color: "primary",
+        disabled: posting
+      },
+      t("commentSection.post")
+    )))
+  ));
 };
 
 export { CommentSection };

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

@@ -1 +1 @@
-{"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Button, Grid, TextField } from '@material-ui/core';\nimport { Link } from '@backstage/core-components';\nimport {\n  AnswerResponse,\n  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\n\nexport const CommentSection = (props: {\n  onCommentPost: (question: QuestionResponse, answer?: AnswerResponse) => void;\n  onCommentDelete: (\n    question: QuestionResponse,\n    answer?: AnswerResponse,\n  ) => void;\n  question: QuestionResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { answer, question, onCommentPost, onCommentDelete } = 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 {\n    handleSubmit,\n    control,\n    formState: { errors },\n    reset,\n  } = useForm<{ content: string }>({});\n\n  const postComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi.commentAnswer(question.id, answer.id, data.content).then(a => {\n        setFormVisible(false);\n        analytics.captureEvent('comment', 'answer');\n        reset();\n        setPosting(false);\n        onCommentPost(question, a);\n      });\n      return;\n    }\n\n    qetaApi.commentQuestion(question.id, data.content).then(q => {\n      setFormVisible(false);\n      analytics.captureEvent('comment', 'question');\n      reset();\n      setPosting(false);\n      onCommentPost(q);\n    });\n  };\n\n  return (\n    <Box marginLeft={9} className=\"qetaCommentSection\">\n      <CommentList\n        question={question}\n        answer={answer}\n        onCommentDelete={onCommentDelete}\n      />\n      {!formVisible && (\n        <Link\n          underline=\"none\"\n          to=\"#\"\n          className=\"qetaAddCommentBtn\"\n          onClick={() => setFormVisible(true)}\n        >\n          Add comment\n        </Link>\n      )}\n      {formVisible && (\n        <form onSubmit={handleSubmit(postComment)} className=\"qetaCommentForm\">\n          <Grid container>\n            <Grid item xs={11}>\n              <Controller\n                control={control}\n                defaultValue=\"\"\n                rules={{\n                  required: true,\n                }}\n                render={({ field: { onChange, value } }) => (\n                  <TextField\n                    id=\"comment\"\n                    multiline\n                    minRows={2}\n                    fullWidth\n                    className=\"qetaCommentInput\"\n                    value={value}\n                    placeholder=\"Your commment\"\n                    onChange={onChange}\n                    variant=\"outlined\"\n                    error={'content' in errors}\n                  />\n                )}\n                name=\"content\"\n              />\n            </Grid>\n            <Grid item xs={1}>\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                className=\"qetaCommentBtn\"\n                type=\"submit\"\n                color=\"primary\"\n                disabled={posting}\n              >\n                Post\n              </Button>\n            </Grid>\n          </Grid>\n        </form>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { Box, Button, Grid, TextField } from '@material-ui/core';\nimport { Link } from '@backstage/core-components';\nimport {\n  AnswerResponse,\n  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useAnalytics, useApi } from '@backstage/core-plugin-api';\nimport { CommentList } from './CommentList';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../utils/hooks';\nimport { confirmNavigationIfEdited } from '../../utils/utils';\n\nexport const CommentSection = (props: {\n  onCommentPost: (question: QuestionResponse, answer?: AnswerResponse) => void;\n  onCommentDelete: (\n    question: QuestionResponse,\n    answer?: AnswerResponse,\n  ) => void;\n  question: QuestionResponse;\n  answer?: AnswerResponse;\n}) => {\n  const { answer, question, onCommentPost, onCommentDelete } = 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 {\n    handleSubmit,\n    control,\n    formState: { errors },\n    reset,\n  } = useForm<{ content: string }>({});\n\n  const postComment = (data: { content: string }) => {\n    setPosting(true);\n    if (answer) {\n      qetaApi.commentAnswer(question.id, answer.id, data.content).then(a => {\n        setFormVisible(false);\n        analytics.captureEvent('comment', 'answer');\n        reset();\n        setPosting(false);\n        onCommentPost(question, a);\n      });\n      return;\n    }\n\n    qetaApi.commentQuestion(question.id, data.content).then(q => {\n      setFormVisible(false);\n      analytics.captureEvent('comment', 'question');\n      reset();\n      setPosting(false);\n      onCommentPost(q);\n    });\n  };\n\n  useEffect(() => {\n    confirmNavigationIfEdited(edited);\n  }, [edited]);\n\n  return (\n    <Box marginLeft={9} className=\"qetaCommentSection\">\n      <CommentList\n        question={question}\n        answer={answer}\n        onCommentDelete={onCommentDelete}\n      />\n      {!formVisible && (\n        <Link\n          underline=\"none\"\n          to=\"#\"\n          className=\"qetaAddCommentBtn\"\n          onClick={() => setFormVisible(true)}\n        >\n          {t('commentSection.addComment')}\n        </Link>\n      )}\n      {formVisible && (\n        <form\n          onSubmit={handleSubmit(postComment)}\n          onChange={() => {\n            setEdited(true);\n          }}\n          className=\"qetaCommentForm\"\n        >\n          <Grid container>\n            <Grid item xs={11}>\n              <Controller\n                control={control}\n                defaultValue=\"\"\n                rules={{\n                  required: true,\n                }}\n                render={({ field: { onChange, value } }) => (\n                  <TextField\n                    id=\"comment\"\n                    multiline\n                    minRows={2}\n                    fullWidth\n                    className=\"qetaCommentInput\"\n                    value={value}\n                    placeholder={t('commentSection.input.placeholder')}\n                    onChange={onChange}\n                    variant=\"outlined\"\n                    error={'content' in errors}\n                  />\n                )}\n                name=\"content\"\n              />\n            </Grid>\n            <Grid item xs={1}>\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                className=\"qetaCommentBtn\"\n                type=\"submit\"\n                color=\"primary\"\n                disabled={posting}\n              >\n                {t('commentSection.post')}\n              </Button>\n            </Grid>\n          </Grid>\n        </form>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAca,MAAA,cAAA,GAAiB,CAAC,KAQzB,KAAA;AACJ,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,aAAA,EAAe,iBAAoB,GAAA,KAAA,CAAA;AAC7D,EAAA,MAAM,YAAY,YAAa,EAAA,CAAA;AAC/B,EAAM,MAAA,OAAA,GAAU,OAAO,UAAU,CAAA,CAAA;AACjC,EAAA,MAAM,CAAC,OAAS,EAAA,UAAU,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AACpD,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAChD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA,EAAW,EAAE,MAAO,EAAA;AAAA,IACpB,KAAA;AAAA,GACF,GAAI,OAA6B,CAAA,EAAE,CAAA,CAAA;AAEnC,EAAM,MAAA,WAAA,GAAc,CAAC,IAA8B,KAAA;AACjD,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAA,IAAI,MAAQ,EAAA;AACV,MAAQ,OAAA,CAAA,aAAA,CAAc,SAAS,EAAI,EAAA,MAAA,CAAO,IAAI,IAAK,CAAA,OAAO,CAAE,CAAA,IAAA,CAAK,CAAK,CAAA,KAAA;AACpE,QAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AACpB,QAAU,SAAA,CAAA,YAAA,CAAa,WAAW,QAAQ,CAAA,CAAA;AAC1C,QAAM,KAAA,EAAA,CAAA;AACN,QAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,QAAA,aAAA,CAAc,UAAU,CAAC,CAAA,CAAA;AAAA,OAC1B,CAAA,CAAA;AACD,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,OAAA,CAAQ,gBAAgB,QAAS,CAAA,EAAA,EAAI,KAAK,OAAO,CAAA,CAAE,KAAK,CAAK,CAAA,KAAA;AAC3D,MAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AACpB,MAAU,SAAA,CAAA,YAAA,CAAa,WAAW,UAAU,CAAA,CAAA;AAC5C,MAAM,KAAA,EAAA,CAAA;AACN,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,MAAA,aAAA,CAAc,CAAC,CAAA,CAAA;AAAA,KAChB,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,yBAAA,CAA0B,MAAM,CAAA,CAAA;AAAA,GAClC,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,UAAY,EAAA,CAAA,EAAG,WAAU,oBAC5B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,MAAA;AAAA,MACA,eAAA;AAAA,KAAA;AAAA,GACF,EACC,CAAC,WACA,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,MAAA;AAAA,MACV,EAAG,EAAA,GAAA;AAAA,MACH,SAAU,EAAA,mBAAA;AAAA,MACV,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,KAAA;AAAA,IAEjC,EAAE,2BAA2B,CAAA;AAAA,KAGjC,WACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,aAAa,WAAW,CAAA;AAAA,MAClC,UAAU,MAAM;AACd,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AAAA,MACA,SAAU,EAAA,iBAAA;AAAA,KAAA;AAAA,oBAEV,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,YAAa,EAAA,EAAA;AAAA,QACb,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,QACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,EAAG,EAAA,SAAA;AAAA,YACH,SAAS,EAAA,IAAA;AAAA,YACT,OAAS,EAAA,CAAA;AAAA,YACT,SAAS,EAAA,IAAA;AAAA,YACT,SAAU,EAAA,kBAAA;AAAA,YACV,KAAA;AAAA,YACA,WAAA,EAAa,EAAE,kCAAkC,CAAA;AAAA,YACjD,QAAA;AAAA,YACA,OAAQ,EAAA,UAAA;AAAA,YACR,OAAO,SAAa,IAAA,MAAA;AAAA,WAAA;AAAA,SACtB;AAAA,QAEF,IAAK,EAAA,SAAA;AAAA,OAAA;AAAA,KAET,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,OAAA;AAAA,QACL,SAAU,EAAA,gBAAA;AAAA,QACV,IAAK,EAAA,QAAA;AAAA,QACL,KAAM,EAAA,SAAA;AAAA,QACN,QAAU,EAAA,OAAA;AAAA,OAAA;AAAA,MAET,EAAE,qBAAqB,CAAA;AAAA,KAE5B,CACF,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ;;;;"}

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

@@ -2,7 +2,7 @@ import { Modal, Backdrop, Box, Typography, Button } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import DeleteIcon from '@material-ui/icons/Delete';
 import React from 'react';
-import { useBasePath, useStyles } from '../../utils/hooks.esm.js';
+import { useBasePath, useStyles, useTranslation } from '../../utils/hooks.esm.js';
 import { useApi } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { qetaApiRef } from '../../api/QetaClient.esm.js';
@@ -14,8 +14,9 @@ const DeleteModal = (props) => {
   const { entity, open, question, onClose } = props;
   const styles = useStyles();
   const [error, setError] = React.useState(false);
+  const { t } = useTranslation();
   const isQuestion = "title" in entity;
-  const title = isQuestion ? "Are you sure you want to delete this question?" : "Are you sure you want to delete this answer?";
+  const title = isQuestion ? t("deleteModal.title.question") : t("deleteModal.title.answer");
   const handleDelete = () => {
     if (isQuestion) {
       qetaApi.deleteQuestion(entity.id).catch((_) => setError(true)).then((ret) => {
@@ -51,7 +52,7 @@ const DeleteModal = (props) => {
         timeout: 500
       }
     },
-    /* @__PURE__ */ React.createElement(Box, { className: `qetaDeleteModalContent ${styles.deleteModal}` }, error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, "Failed to delete"), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { className: `qetaDeleteModalContent ${styles.deleteModal}` }, error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, t("deleteModal.errorDeleting")), /* @__PURE__ */ React.createElement(
       Typography,
       {
         id: "modal-modal-title",
@@ -68,8 +69,8 @@ const DeleteModal = (props) => {
         startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null),
         color: "secondary"
       },
-      "Delete"
-    ), /* @__PURE__ */ React.createElement(Button, { onClick: onClose, className: "qetaDeleteModalCancelBtn" }, "Cancel"))
+      t("deleteModal.deleteButton")
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: onClose, className: "qetaDeleteModalCancelBtn" }, t("deleteModal.cancelButton")))
   );
 };
 

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  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Backdrop, Box, Button, Modal, Typography } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport Delete from '@material-ui/icons/Delete';\nimport React from 'react';\nimport { useBasePath, useStyles } from '../../utils/hooks';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaApiRef } from '../../api';\n\nexport const DeleteModal = (props: {\n  entity: QuestionResponse | AnswerResponse;\n  open: boolean;\n  onClose: () => void;\n  question?: QuestionResponse;\n}) => {\n  const qetaApi = useApi(qetaApiRef);\n  const base_path = useBasePath();\n  const navigate = useNavigate();\n  const { entity, open, question, onClose } = props;\n  const styles = useStyles();\n  const [error, setError] = React.useState(false);\n  const isQuestion = 'title' in entity;\n\n  const title = isQuestion\n    ? 'Are you sure you want to delete this question?'\n    : 'Are you sure you want to delete this answer?';\n\n  const handleDelete = () => {\n    if (isQuestion) {\n      qetaApi\n        .deleteQuestion(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(`${base_path}/qeta`);\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      <Box className={`qetaDeleteModalContent ${styles.deleteModal}`}>\n        {error && <Alert severity=\"error\">Failed to delete</Alert>}\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          Delete\n        </Button>\n        <Button onClick={onClose} className=\"qetaDeleteModalCancelBtn\">\n          Cancel\n        </Button>\n      </Box>\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  QuestionResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { Backdrop, Box, Button, Modal, Typography } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport Delete from '@material-ui/icons/Delete';\nimport React from 'react';\nimport { useBasePath, useStyles, useTranslation } from '../../utils/hooks';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { qetaApiRef } from '../../api';\n\nexport const DeleteModal = (props: {\n  entity: QuestionResponse | AnswerResponse;\n  open: boolean;\n  onClose: () => void;\n  question?: QuestionResponse;\n}) => {\n  const qetaApi = useApi(qetaApiRef);\n  const base_path = useBasePath();\n  const navigate = useNavigate();\n  const { entity, open, question, onClose } = props;\n  const styles = useStyles();\n  const [error, setError] = React.useState(false);\n  const { t } = useTranslation();\n  const isQuestion = 'title' in entity;\n\n  const title = isQuestion\n    ? t('deleteModal.title.question')\n    : t('deleteModal.title.answer');\n\n  const handleDelete = () => {\n    if (isQuestion) {\n      qetaApi\n        .deleteQuestion(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(`${base_path}/qeta`);\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      <Box className={`qetaDeleteModalContent ${styles.deleteModal}`}>\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      </Box>\n    </Modal>\n  );\n};\n"],"names":["Delete"],"mappings":"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"}

package/dist/components/FavoritePage/FavoritePage.esm.js

@@ -4,9 +4,11 @@ import { QuestionsContainer } from '../QuestionsContainer/QuestionsContainer.esm
 import { AskQuestionButton } from '../Buttons/AskQuestionButton.esm.js';
 import { Container } from '@material-ui/core';
 import { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton.esm.js';
+import { useTranslation } from '../../utils/hooks.esm.js';
 
 const FavoritePage = () => {
-  return /* @__PURE__ */ React.createElement(Content, { className: "qetaFavoritePage" }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: "Your favorite questions" }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { favorite: true })));
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(Content, { className: "qetaFavoritePage" }, /* @__PURE__ */ React.createElement(Container, { maxWidth: "lg" }, /* @__PURE__ */ React.createElement(ContentHeader, { title: t("favoritePage.title") }, /* @__PURE__ */ React.createElement(BackToQuestionsButton, null), /* @__PURE__ */ React.createElement(AskQuestionButton, null)), /* @__PURE__ */ React.createElement(QuestionsContainer, { favorite: true })));
 };
 
 export { FavoritePage };

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

@@ -1 +1 @@
-{"version":3,"file":"FavoritePage.esm.js","sources":["../../../src/components/FavoritePage/FavoritePage.tsx"],"sourcesContent":["import React from 'react';\nimport { Content, ContentHeader } from '@backstage/core-components';\nimport { QuestionsContainer } from '../QuestionsContainer/QuestionsContainer';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { Container } from '@material-ui/core';\nimport { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton';\n\nexport const FavoritePage = () => {\n  return (\n    <Content className=\"qetaFavoritePage\">\n      <Container maxWidth=\"lg\">\n        <ContentHeader title=\"Your favorite questions\">\n          <BackToQuestionsButton />\n          <AskQuestionButton />\n        </ContentHeader>\n        <QuestionsContainer favorite />\n      </Container>\n    </Content>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,eAAe,MAAM;AAChC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,kBACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAU,QAAS,EAAA,IAAA,EAAA,kBACjB,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA,EAAc,KAAM,EAAA,yBAAA,EAAA,sCAClB,qBAAsB,EAAA,IAAA,CAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAkB,CACrB,CAAA,sCACC,kBAAmB,EAAA,EAAA,QAAA,EAAQ,IAAC,EAAA,CAC/B,CACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FavoritePage.esm.js","sources":["../../../src/components/FavoritePage/FavoritePage.tsx"],"sourcesContent":["import React from 'react';\nimport { Content, ContentHeader } from '@backstage/core-components';\nimport { QuestionsContainer } from '../QuestionsContainer';\nimport { AskQuestionButton } from '../Buttons/AskQuestionButton';\nimport { Container } from '@material-ui/core';\nimport { BackToQuestionsButton } from '../Buttons/BackToQuestionsButton';\nimport { useTranslation } from '../../utils/hooks';\n\nexport const FavoritePage = () => {\n  const { t } = useTranslation();\n  return (\n    <Content className=\"qetaFavoritePage\">\n      <Container maxWidth=\"lg\">\n        <ContentHeader title={t('favoritePage.title')}>\n          <BackToQuestionsButton />\n          <AskQuestionButton />\n        </ContentHeader>\n        <QuestionsContainer favorite />\n      </Container>\n    </Content>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,eAAe,MAAM;AAChC,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,kBACjB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,EAAA,QAAA,EAAS,IAClB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,KAAA,EAAO,CAAE,CAAA,oBAAoB,qBACzC,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,IAAsB,CACvB,kBAAA,KAAA,CAAA,aAAA,CAAC,iBAAkB,EAAA,IAAA,CACrB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,kBAAmB,EAAA,EAAA,QAAA,EAAQ,IAAC,EAAA,CAC/B,CACF,CAAA,CAAA;AAEJ;;;;"}