@drodil/backstage-plugin-qeta-react 2.14.0 → 3.0.0

package/dist/components/MarkdownRenderer/MarkdownRenderer.esm.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import ReactMarkdown from 'react-markdown';
+import { a11yDark, a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { useIsDarkTheme } from '../../utils/hooks.esm.js';
+import { makeStyles } from '@material-ui/core';
+import gfm from 'remark-gfm';
+
+const useStyles = makeStyles(
+  (theme) => ({
+    markdown: {
+      "& table": {
+        borderCollapse: "collapse",
+        border: `1px solid ${theme.palette.border}`
+      },
+      "& th, & td": {
+        border: `1px solid ${theme.palette.border}`,
+        padding: theme.spacing(1)
+      },
+      "& td": {
+        wordBreak: "break-word",
+        overflow: "hidden",
+        verticalAlign: "middle",
+        lineHeight: "1",
+        margin: 0,
+        padding: theme.spacing(3, 2, 3, 2.5),
+        borderBottom: 0
+      },
+      "& th": {
+        backgroundColor: theme.palette.background.paper
+      },
+      "& tr": {
+        backgroundColor: theme.palette.background.paper
+      },
+      "& tr:nth-child(odd)": {
+        backgroundColor: theme.palette.background.default
+      },
+      "& a": {
+        color: theme.palette.link
+      },
+      "& img": {
+        maxWidth: "100%"
+      }
+    }
+  }),
+  { name: "QetaMarkdownContent" }
+);
+const flatten = (text, child) => {
+  if (!child) return text;
+  return typeof child === "string" ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+};
+const headingRenderer = (props) => {
+  const { node, children } = props;
+  const childrenArray = React.Children.toArray(children);
+  const text = childrenArray.reduce(flatten, "");
+  const slug = text.toLocaleLowerCase("en-US").replace(/\W/g, "-");
+  return React.createElement(`${node.tagName}`, { id: slug }, children);
+};
+const MarkdownRenderer = (props) => {
+  const { content, className: mainClassName } = props;
+  const darkTheme = useIsDarkTheme();
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(
+    ReactMarkdown,
+    {
+      remarkPlugins: [gfm],
+      className: `${classes.markdown} ${mainClassName ?? ""}`.trim(),
+      components: {
+        h1: (p) => headingRenderer(p),
+        h2: (p) => headingRenderer(p),
+        h3: (p) => headingRenderer(p),
+        h4: (p) => headingRenderer(p),
+        h5: (p) => headingRenderer(p),
+        h6: (p) => headingRenderer(p),
+        code(p) {
+          const { children, className, node, ...rest } = p;
+          const match = /language-(\w+)/.exec(className || "");
+          return match ? /* @__PURE__ */ React.createElement(
+            SyntaxHighlighter,
+            {
+              ...rest,
+              PreTag: "div",
+              language: match[1],
+              style: darkTheme ? a11yDark : a11yLight,
+              showLineNumbers: true
+            },
+            String(children).replace(/\n$/, "")
+          ) : /* @__PURE__ */ React.createElement("code", { ...rest, className }, children);
+        }
+      }
+    },
+    content
+  );
+};
+
+export { MarkdownRenderer };
+//# sourceMappingURL=MarkdownRenderer.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownRenderer.esm.js","sources":["../../../src/components/MarkdownRenderer/MarkdownRenderer.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react';\nimport SyntaxHighlighter from 'react-syntax-highlighter';\nimport ReactMarkdown from 'react-markdown';\nimport {\n  a11yDark,\n  a11yLight,\n} from 'react-syntax-highlighter/dist/esm/styles/hljs';\nimport { useIsDarkTheme } from '../../utils/hooks';\nimport { makeStyles } from '@material-ui/core';\nimport gfm from 'remark-gfm';\n\nconst useStyles = makeStyles(\n  theme => ({\n    markdown: {\n      '& table': {\n        borderCollapse: 'collapse',\n        border: `1px solid ${theme.palette.border}`,\n      },\n      '& th, & td': {\n        border: `1px solid ${theme.palette.border}`,\n        padding: theme.spacing(1),\n      },\n      '& td': {\n        wordBreak: 'break-word',\n        overflow: 'hidden',\n        verticalAlign: 'middle',\n        lineHeight: '1',\n        margin: 0,\n        padding: theme.spacing(3, 2, 3, 2.5),\n        borderBottom: 0,\n      },\n      '& th': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr': {\n        backgroundColor: theme.palette.background.paper,\n      },\n      '& tr:nth-child(odd)': {\n        backgroundColor: theme.palette.background.default,\n      },\n      '& a': {\n        color: theme.palette.link,\n      },\n      '& img': {\n        maxWidth: '100%',\n      },\n    },\n  }),\n  { name: 'QetaMarkdownContent' },\n);\n\nconst flatten = (text: string, child: any): string => {\n  if (!child) return text;\n\n  return typeof child === 'string'\n    ? text + child\n    : React.Children.toArray(child.props.children).reduce(flatten, text);\n};\n\nconst headingRenderer = (\n  props: PropsWithChildren<{ node: { tagName: string } }>,\n) => {\n  const { node, children } = props;\n  const childrenArray = React.Children.toArray(children);\n  const text = childrenArray.reduce(flatten, '');\n  const slug = text.toLocaleLowerCase('en-US').replace(/\\W/g, '-');\n  return React.createElement(`${node.tagName}`, { id: slug }, children);\n};\n\nexport const MarkdownRenderer = (props: {\n  content: string;\n  className?: string;\n}) => {\n  const { content, className: mainClassName } = props;\n  const darkTheme = useIsDarkTheme();\n  const classes = useStyles();\n  return (\n    <ReactMarkdown\n      remarkPlugins={[gfm]}\n      className={`${classes.markdown} ${mainClassName ?? ''}`.trim()}\n      components={{\n        h1: (p: any) => headingRenderer(p),\n        h2: (p: any) => headingRenderer(p),\n        h3: (p: any) => headingRenderer(p),\n        h4: (p: any) => headingRenderer(p),\n        h5: (p: any) => headingRenderer(p),\n        h6: (p: any) => headingRenderer(p),\n        code(p: any) {\n          const { children, className, node, ...rest } = p;\n          const match = /language-(\\w+)/.exec(className || '');\n          return match ? (\n            <SyntaxHighlighter\n              {...rest}\n              PreTag=\"div\"\n              language={match[1]}\n              style={darkTheme ? a11yDark : a11yLight}\n              showLineNumbers\n            >\n              {String(children).replace(/\\n$/, '')}\n            </SyntaxHighlighter>\n          ) : (\n            <code {...rest} className={className}>\n              {children}\n            </code>\n          );\n        },\n      }}\n    >\n      {content}\n    </ReactMarkdown>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.esm.js

@@ -0,0 +1,34 @@
+import { Controller } from 'react-hook-form';
+import { Box, FormControlLabel, Tooltip, Checkbox } from '@material-ui/core';
+import React from 'react';
+import { useTranslation } from '../../utils/hooks.esm.js';
+
+const PostAnonymouslyCheckbox = (props) => {
+  const { control, label } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(Box, { style: { marginLeft: "0.2rem" } }, /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      control,
+      render: ({ field: { onChange, value } }) => /* @__PURE__ */ React.createElement(
+        FormControlLabel,
+        {
+          control: /* @__PURE__ */ React.createElement(Tooltip, { title: t("anonymousCheckbox.tooltip") }, /* @__PURE__ */ React.createElement(
+            Checkbox,
+            {
+              onChange,
+              value,
+              size: "small",
+              name: "anonymous"
+            }
+          )),
+          label
+        }
+      ),
+      name: "anonymous"
+    }
+  ));
+};
+
+export { PostAnonymouslyCheckbox };
+//# sourceMappingURL=PostAnonymouslyCheckbox.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PostAnonymouslyCheckbox.esm.js","sources":["../../../src/components/PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.tsx"],"sourcesContent":["import { Control, Controller } from 'react-hook-form';\nimport { Box, Checkbox, FormControlLabel, Tooltip } from '@material-ui/core';\nimport React from 'react';\nimport { useTranslation } from '../../utils';\n\nexport const PostAnonymouslyCheckbox = (props: {\n  control: Control<any>;\n  label: string;\n}) => {\n  const { control, label } = props;\n  const { t } = useTranslation();\n  return (\n    <Box style={{ marginLeft: '0.2rem' }}>\n      <Controller\n        control={control}\n        render={({ field: { onChange, value } }) => (\n          <FormControlLabel\n            control={\n              <Tooltip title={t('anonymousCheckbox.tooltip')}>\n                <Checkbox\n                  onChange={onChange}\n                  value={value}\n                  size=\"small\"\n                  name=\"anonymous\"\n                />\n              </Tooltip>\n            }\n            label={label}\n          />\n        )}\n        name=\"anonymous\"\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,uBAAA,GAA0B,CAAC,KAGlC,KAAA;AACJ,EAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC3B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,2CACG,GAAI,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,UACxB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,EAAE,QAAU,EAAA,KAAA,IAC5B,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,yBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,CAAA,CAAE,2BAA2B,CAC3C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,KAAA;AAAA,cACA,IAAK,EAAA,OAAA;AAAA,cACL,IAAK,EAAA,WAAA;AAAA,aAAA;AAAA,WAET,CAAA;AAAA,UAEF,KAAA;AAAA,SAAA;AAAA,OACF;AAAA,MAEF,IAAK,EAAA,WAAA;AAAA,KAAA;AAAA,GAET,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,100 @@
+import { Controller } from 'react-hook-form';
+import { Autocomplete } from '@material-ui/lab';
+import { getEntityTitle } from '../../utils/utils.esm.js';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+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) {
+      kinds = configApi.getOptionalStringArray("qeta.entities.kinds");
+    }
+    return kinds || ["Component", "System"];
+  }, [configApi]);
+  const max = useMemo(
+    () => configApi.getOptionalNumber("qeta.entities.max") ?? 3,
+    [configApi]
+  );
+  useEffect(() => {
+    if (entityRef) {
+      catalogApi.getEntityByRef(entityRef).then((data) => {
+        if (data) {
+          setAvailableEntities([data]);
+        }
+      });
+    }
+  }, [catalogApi, entityRef]);
+  useEffect(() => {
+    if (entityRef) {
+      return;
+    }
+    if (entityKinds && entityKinds.length > 0) {
+      catalogApi.getEntities({
+        order: { field: "kind", order: "asc" },
+        filter: { kind: entityKinds },
+        fields: [
+          "kind",
+          "metadata.name",
+          "metadata.namespace",
+          "metadata.title"
+        ]
+      }).catch((_) => setAvailableEntities(null)).then(
+        (data) => data ? setAvailableEntities(data.items) : setAvailableEntities(null)
+      );
+    }
+  }, [catalogApi, entityRef, configApi, entityKinds]);
+  if (!availableEntities || availableEntities.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Controller,
+    {
+      control,
+      render: ({ field: { onChange, value } }) => /* @__PURE__ */ React.createElement(
+        Autocomplete,
+        {
+          multiple: true,
+          className: "qetaAskFormEntities",
+          value,
+          groupBy: entityKinds.length > 1 ? (option) => option.kind : void 0,
+          id: "entities-select",
+          options: availableEntities,
+          getOptionLabel: getEntityTitle,
+          getOptionSelected: (o, v) => stringifyEntityRef(o) === stringifyEntityRef(v),
+          onChange: (_e, newValue) => {
+            if (!value || value.length < max) {
+              onChange(newValue);
+            }
+          },
+          renderInput: (params) => /* @__PURE__ */ React.createElement(
+            TextField,
+            {
+              ...params,
+              variant: "outlined",
+              margin: "normal",
+              label: t("entitiesInput.label"),
+              placeholder: t("entitiesInput.placeholder"),
+              helperText: t("entitiesInput.helperText", {
+                max: max.toString(10)
+              })
+            }
+          )
+        }
+      ),
+      name: "entities"
+    }
+  );
+};
+
+export { EntitiesInput };
+//# sourceMappingURL=EntitiesInput.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntitiesInput.esm.js","sources":["../../../src/components/PostForm/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';\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/PostForm/PostForm.esm.js

@@ -0,0 +1,283 @@
+import { useRouteRef, useAnalytics, useApi, configApiRef, errorApiRef } from '@backstage/core-plugin-api';
+import { Button, TextField } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React, { useEffect, useCallback } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTranslation, useStyles } from '../../utils/hooks.esm.js';
+import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor.esm.js';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { compact } from 'lodash';
+import { TagInput } from './TagInput.esm.js';
+import { EntitiesInput } from './EntitiesInput.esm.js';
+import { questionRouteRef, articleRouteRef } from '../../routes.esm.js';
+import { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox.esm.js';
+import { confirmNavigationIfEdited, imageUpload } from '../../utils/utils.esm.js';
+import { qetaApiRef } from '../../api.esm.js';
+
+const formToRequest = (form, images, headerImage) => {
+  return {
+    ...form,
+    entities: form.entities?.map(stringifyEntityRef),
+    images,
+    headerImage
+  };
+};
+const getDefaultValues = (props) => {
+  return {
+    title: "",
+    content: "",
+    tags: props.tags ?? [],
+    entities: [],
+    type: props.type
+  };
+};
+const getValues = async (api, catalogApi, type, id) => {
+  if (!id) {
+    return getDefaultValues({ type });
+  }
+  const post = await api.getPost(id);
+  const entities = post.entities && post.entities.length > 0 ? await catalogApi.getEntitiesByRefs({
+    entityRefs: post.entities,
+    fields: [
+      "kind",
+      "metadata.name",
+      "metadata.namespace",
+      "metadata.title"
+    ]
+  }) : [];
+  return {
+    title: post.title,
+    content: post.content,
+    tags: post.tags ?? [],
+    entities: "items" in entities ? compact(entities.items) : [],
+    type,
+    headerImage: post.headerImage
+  };
+};
+const PostForm = (props) => {
+  const { id, entity, onPost, entityPage, type } = props;
+  const questionRoute = useRouteRef(questionRouteRef);
+  const articleRoute = useRouteRef(articleRouteRef);
+  const navigate = useNavigate();
+  const analytics = useAnalytics();
+  const [entityRef, setEntityRef] = React.useState(entity);
+  const [posting, setPosting] = React.useState(false);
+  const [values, setValues] = React.useState(getDefaultValues(props));
+  const [error, setError] = React.useState(false);
+  const [edited, setEdited] = React.useState(false);
+  const [headerImage, setHeaderImage] = React.useState();
+  const [images, setImages] = React.useState([]);
+  const [searchParams, _setSearchParams] = useSearchParams();
+  const { t } = useTranslation();
+  const qetaApi = useApi(qetaApiRef);
+  const catalogApi = useApi(catalogApiRef);
+  const configApi = useApi(configApiRef);
+  const errorApi = useApi(errorApiRef);
+  const allowAnonymouns = configApi.getOptionalBoolean("qeta.allowAnonymous");
+  const styles = useStyles();
+  const isUploadDisabled = configApi.getOptionalBoolean("qeta.storage.disabled") || false;
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors }
+  } = useForm({
+    values,
+    defaultValues: getDefaultValues(props)
+  });
+  const postQuestion = (data) => {
+    setPosting(true);
+    const route = type === "question" ? questionRoute : articleRoute;
+    const queryParams = new URLSearchParams();
+    if (entity) {
+      queryParams.set("entity", entity);
+    }
+    if (entityPage) {
+      queryParams.set("entityPage", "true");
+    }
+    if (id) {
+      qetaApi.updatePost(id, formToRequest(data, images, headerImage)).then((q) => {
+        if (!q || !q.id) {
+          setError(true);
+          return;
+        }
+        setEdited(false);
+        reset();
+        analytics.captureEvent("edit", type);
+        if (onPost) {
+          onPost(q);
+        } else if (entity) {
+          navigate(
+            `${route({
+              id: q.id.toString(10)
+            })}?${queryParams.toString()}`
+          );
+        } else {
+          navigate(route({ id: q.id.toString(10) }));
+        }
+      }).catch((_e) => {
+        setError(true);
+        setPosting(false);
+      });
+      return;
+    }
+    qetaApi.createPost(formToRequest(data, images, headerImage)).then((q) => {
+      if (!q || !q.id) {
+        setError(true);
+        return;
+      }
+      setEdited(false);
+      analytics.captureEvent("post", type);
+      reset();
+      if (entity) {
+        navigate(
+          `${route({
+            id: q.id.toString(10)
+          })}?${queryParams.toString()}`
+        );
+      } else {
+        navigate(route({ id: q.id.toString(10) }));
+      }
+    }).catch((_e) => {
+      setError(true);
+      setPosting(false);
+    });
+  };
+  useEffect(() => {
+    if (!entityRef) {
+      const e = searchParams.get("entity");
+      if (e) {
+        setEntityRef(e);
+      }
+    }
+  }, [entityRef, searchParams]);
+  useEffect(() => {
+    if (id) {
+      getValues(qetaApi, catalogApi, type, id).then((data) => {
+        setValues(data);
+        setHeaderImage(data.headerImage);
+      });
+    }
+  }, [qetaApi, catalogApi, type, id]);
+  useEffect(() => {
+    if (entityRef) {
+      catalogApi.getEntityByRef(entityRef).then((data) => {
+        if (data) {
+          setValues((v) => {
+            return { ...v, entities: [data] };
+          });
+        }
+      });
+    }
+  }, [catalogApi, entityRef]);
+  useEffect(() => {
+    reset(values);
+  }, [values, reset]);
+  useEffect(() => {
+    return confirmNavigationIfEdited(edited);
+  }, [edited]);
+  const onImageUpload = useCallback(
+    (imageId) => {
+      setImages((prevImages) => [...prevImages, imageId]);
+    },
+    [setImages]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "form",
+    {
+      onSubmit: handleSubmit(postQuestion),
+      onChange: () => {
+        setEdited(true);
+      },
+      className: "qetaAskForm"
+    },
+    error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, t("postForm.errorPosting", { type })),
+    type === "article" && !isUploadDisabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        accept: "image/*",
+        style: { display: "none" },
+        id: "headerImage",
+        type: "file",
+        onChange: async (event) => {
+          if (!event.target.files || event.target.files.length === 0) {
+            return;
+          }
+          const buffer = await event.target.files[0].arrayBuffer();
+          const uri = await imageUpload({
+            qetaApi,
+            errorApi,
+            onImageUpload
+          })(buffer).next();
+          if (typeof uri.value === "string") {
+            setHeaderImage(uri.value);
+          }
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("label", { htmlFor: "headerImage" }, /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "primary", component: "span" }, t("postForm.uploadHeaderImage")))),
+    headerImage && /* @__PURE__ */ React.createElement("img", { className: styles.headerImage, src: headerImage, alt: "header" }),
+    /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        label: "Title",
+        className: "qetaAskFormTitle",
+        required: true,
+        fullWidth: true,
+        error: "title" in errors,
+        margin: "normal",
+        variant: "outlined",
+        helperText: t("postForm.titleInput.helperText", { type }),
+        // @ts-ignore
+        ...register("title", { required: true, maxLength: 255 })
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Controller,
+      {
+        control,
+        rules: {
+          required: true
+        },
+        render: ({ field: { onChange, value } }) => /* @__PURE__ */ React.createElement(
+          MarkdownEditor,
+          {
+            value,
+            onChange,
+            height: 400,
+            error: "content" in errors,
+            placeholder: t("postForm.contentInput.placeholder", { type }),
+            config: configApi,
+            onImageUpload
+          }
+        ),
+        name: "content"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(TagInput, { control }),
+    /* @__PURE__ */ React.createElement(EntitiesInput, { control, entityRef }),
+    allowAnonymouns && !id && /* @__PURE__ */ React.createElement(
+      PostAnonymouslyCheckbox,
+      {
+        control,
+        label: t("anonymousCheckbox.postAnonymously")
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        type: "submit",
+        variant: "contained",
+        disabled: posting,
+        className: `qetaAskFormSubmitBtn ${styles.postButton}`
+      },
+      id ? t("postForm.submit.existingPost") : t("postForm.submit.newPost")
+    )
+  );
+};
+
+export { PostForm };
+//# sourceMappingURL=PostForm.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PostForm.esm.js","sources":["../../../src/components/PostForm/PostForm.tsx"],"sourcesContent":["import {\n  configApiRef,\n  errorApiRef,\n  useAnalytics,\n  useApi,\n  useRouteRef,\n} from '@backstage/core-plugin-api';\nimport { Button, TextField } from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport React, { useCallback, useEffect } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useNavigate, useSearchParams } from 'react-router-dom';\nimport {\n  PostRequest,\n  PostResponse,\n  PostType,\n  QetaApi,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useStyles, useTranslation } from '../../utils';\nimport { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { stringifyEntityRef } from '@backstage/catalog-model';\nimport { CatalogApi } from '@backstage/catalog-client';\nimport { compact } from 'lodash';\nimport { TagInput } from './TagInput';\nimport { QuestionForm } from './types';\nimport { EntitiesInput } from './EntitiesInput';\nimport { articleRouteRef, questionRouteRef } from '../../routes';\nimport { PostAnonymouslyCheckbox } from '../PostAnonymouslyCheckbox/PostAnonymouslyCheckbox';\nimport { confirmNavigationIfEdited, imageUpload } from '../../utils/utils';\nimport { qetaApiRef } from '../../api';\n\nconst formToRequest = (\n  form: QuestionForm,\n  images: number[],\n  headerImage?: string,\n): PostRequest => {\n  return {\n    ...form,\n    entities: form.entities?.map(stringifyEntityRef),\n    images,\n    headerImage,\n  };\n};\n\nexport type PostFormProps = {\n  type: PostType;\n  id?: string;\n  entity?: string;\n  tags?: string[];\n  onPost?: (question: PostResponse) => void;\n  entityPage?: boolean;\n};\n\nconst getDefaultValues = (props: PostFormProps): QuestionForm => {\n  return {\n    title: '',\n    content: '',\n    tags: props.tags ?? [],\n    entities: [],\n    type: props.type,\n  };\n};\n\nconst getValues = async (\n  api: QetaApi,\n  catalogApi: CatalogApi,\n  type: PostType,\n  id?: string,\n): Promise<QuestionForm> => {\n  if (!id) {\n    return getDefaultValues({ type });\n  }\n\n  const post = await api.getPost(id);\n  const entities =\n    post.entities && post.entities.length > 0\n      ? await catalogApi.getEntitiesByRefs({\n          entityRefs: post.entities,\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n      : [];\n  return {\n    title: post.title,\n    content: post.content,\n    tags: post.tags ?? [],\n    entities: 'items' in entities ? compact(entities.items) : [],\n    type,\n    headerImage: post.headerImage,\n  };\n};\n\nexport const PostForm = (props: PostFormProps) => {\n  const { id, entity, onPost, entityPage, type } = props;\n  const questionRoute = useRouteRef(questionRouteRef);\n  const articleRoute = useRouteRef(articleRouteRef);\n  const navigate = useNavigate();\n  const analytics = useAnalytics();\n  const [entityRef, setEntityRef] = React.useState(entity);\n  const [posting, setPosting] = React.useState(false);\n  const [values, setValues] = React.useState(getDefaultValues(props));\n  const [error, setError] = React.useState(false);\n  const [edited, setEdited] = React.useState(false);\n  const [headerImage, setHeaderImage] = React.useState<string | undefined>();\n\n  const [images, setImages] = React.useState<number[]>([]);\n  const [searchParams, _setSearchParams] = useSearchParams();\n  const { t } = useTranslation();\n\n  const qetaApi = useApi(qetaApiRef);\n  const catalogApi = useApi(catalogApiRef);\n  const configApi = useApi(configApiRef);\n  const errorApi = useApi(errorApiRef);\n  const allowAnonymouns = configApi.getOptionalBoolean('qeta.allowAnonymous');\n  const styles = useStyles();\n  const isUploadDisabled =\n    configApi.getOptionalBoolean('qeta.storage.disabled') || false;\n  const {\n    register,\n    handleSubmit,\n    control,\n    reset,\n    formState: { errors },\n  } = useForm<QuestionForm>({\n    values,\n    defaultValues: getDefaultValues(props),\n  });\n\n  const postQuestion = (data: QuestionForm) => {\n    setPosting(true);\n    const route = type === 'question' ? questionRoute : articleRoute;\n\n    const queryParams = new URLSearchParams();\n    if (entity) {\n      queryParams.set('entity', entity);\n    }\n    if (entityPage) {\n      queryParams.set('entityPage', 'true');\n    }\n\n    if (id) {\n      qetaApi\n        .updatePost(id, formToRequest(data, images, headerImage))\n        .then(q => {\n          if (!q || !q.id) {\n            setError(true);\n            return;\n          }\n          setEdited(false);\n          reset();\n          analytics.captureEvent('edit', type);\n          if (onPost) {\n            onPost(q);\n          } else if (entity) {\n            navigate(\n              `${route({\n                id: q.id.toString(10),\n              })}?${queryParams.toString()}`,\n            );\n          } else {\n            navigate(route({ id: q.id.toString(10) }));\n          }\n        })\n        .catch(_e => {\n          setError(true);\n          setPosting(false);\n        });\n      return;\n    }\n    qetaApi\n      .createPost(formToRequest(data, images, headerImage))\n      .then(q => {\n        if (!q || !q.id) {\n          setError(true);\n          return;\n        }\n        setEdited(false);\n        analytics.captureEvent('post', type);\n        reset();\n        if (entity) {\n          navigate(\n            `${route({\n              id: q.id.toString(10),\n            })}?${queryParams.toString()}`,\n          );\n        } else {\n          navigate(route({ id: q.id.toString(10) }));\n        }\n      })\n      .catch(_e => {\n        setError(true);\n        setPosting(false);\n      });\n  };\n\n  useEffect(() => {\n    if (!entityRef) {\n      const e = searchParams.get('entity');\n      if (e) {\n        setEntityRef(e);\n      }\n    }\n  }, [entityRef, searchParams]);\n\n  useEffect(() => {\n    if (id) {\n      getValues(qetaApi, catalogApi, type, id).then(data => {\n        setValues(data);\n        setHeaderImage(data.headerImage);\n      });\n    }\n  }, [qetaApi, catalogApi, type, id]);\n\n  useEffect(() => {\n    if (entityRef) {\n      catalogApi.getEntityByRef(entityRef).then(data => {\n        if (data) {\n          setValues(v => {\n            return { ...v, entities: [data] };\n          });\n        }\n      });\n    }\n  }, [catalogApi, entityRef]);\n\n  useEffect(() => {\n    reset(values);\n  }, [values, reset]);\n\n  useEffect(() => {\n    return confirmNavigationIfEdited(edited);\n  }, [edited]);\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      className=\"qetaAskForm\"\n    >\n      {error && (\n        <Alert severity=\"error\">{t('postForm.errorPosting', { type })}</Alert>\n      )}\n      {type === 'article' && !isUploadDisabled && (\n        <>\n          <input\n            accept=\"image/*\"\n            style={{ display: 'none' }}\n            id=\"headerImage\"\n            type=\"file\"\n            onChange={async event => {\n              if (!event.target.files || event.target.files.length === 0) {\n                return;\n              }\n              const buffer = await event.target.files[0].arrayBuffer();\n\n              const uri = await imageUpload({\n                qetaApi,\n                errorApi,\n                onImageUpload,\n              })(buffer).next();\n              if (typeof uri.value === 'string') {\n                setHeaderImage(uri.value);\n              }\n            }}\n          />\n          <label htmlFor=\"headerImage\">\n            <Button variant=\"contained\" color=\"primary\" component=\"span\">\n              {t('postForm.uploadHeaderImage')}\n            </Button>\n          </label>\n        </>\n      )}\n      {headerImage && (\n        <img className={styles.headerImage} src={headerImage} alt=\"header\" />\n      )}\n      <TextField\n        label=\"Title\"\n        className=\"qetaAskFormTitle\"\n        required\n        fullWidth\n        error={'title' in errors}\n        margin=\"normal\"\n        variant=\"outlined\"\n        helperText={t('postForm.titleInput.helperText', { type })}\n        {\n          // @ts-ignore\n          ...register('title', { required: true, maxLength: 255 })\n        }\n      />\n\n      <Controller\n        control={control}\n        rules={{\n          required: true,\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('postForm.contentInput.placeholder', { type })}\n            config={configApi}\n            onImageUpload={onImageUpload}\n          />\n        )}\n        name=\"content\"\n      />\n      <TagInput control={control} />\n      <EntitiesInput control={control} entityRef={entityRef} />\n      {allowAnonymouns && !id && (\n        <PostAnonymouslyCheckbox\n          control={control}\n          label={t('anonymousCheckbox.postAnonymously')}\n        />\n      )}\n      <Button\n        color=\"primary\"\n        type=\"submit\"\n        variant=\"contained\"\n        disabled={posting}\n        className={`qetaAskFormSubmitBtn ${styles.postButton}`}\n      >\n        {id ? t('postForm.submit.existingPost') : t('postForm.submit.newPost')}\n      </Button>\n    </form>\n  );\n};\n"],"names":[],"mappings":"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"}