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

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

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Grid, TextField, Button } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import { qetaCreateCommentPermission } from '@drodil/backstage-plugin-qeta-common';
+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.esm.js';
+import { useTranslation } from '../../utils/hooks.esm.js';
+import { confirmNavigationIfEdited } from '../../utils/utils.esm.js';
+import { RequirePermission } from '@backstage/plugin-permission-react';
+
+const CommentSection = (props) => {
+  const { answer, post, onCommentPost, onCommentDelete } = props;
+  const analytics = useAnalytics();
+  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,
+    formState: { errors },
+    reset
+  } = useForm({});
+  const postComment = (data) => {
+    setPosting(true);
+    if (answer) {
+      qetaApi.commentAnswer(post.id, answer.id, data.content).then((a) => {
+        setFormVisible(false);
+        analytics.captureEvent("comment", "answer");
+        reset();
+        setPosting(false);
+        setEdited(false);
+        onCommentPost(post, a);
+      });
+      return;
+    }
+    qetaApi.commentPost(post.id, data.content).then((q) => {
+      setFormVisible(false);
+      analytics.captureEvent("comment", post.type);
+      reset();
+      setPosting(false);
+      setEdited(false);
+      onCommentPost(q);
+    });
+  };
+  useEffect(() => {
+    return confirmNavigationIfEdited(edited);
+  }, [edited]);
+  return /* @__PURE__ */ React.createElement(Box, { marginLeft: 9, className: `${props.className} qetaCommentSection` }, /* @__PURE__ */ React.createElement(
+    CommentList,
+    {
+      question: post,
+      answer,
+      onCommentDelete
+    }
+  ), /* @__PURE__ */ React.createElement(
+    RequirePermission,
+    {
+      permission: qetaCreateCommentPermission,
+      errorPage: /* @__PURE__ */ React.createElement(React.Fragment, null)
+    },
+    !formVisible && /* @__PURE__ */ React.createElement(
+      Link,
+      {
+        underline: "none",
+        to: "#",
+        className: "qetaAddCommentBtn",
+        onClick: () => setFormVisible(true)
+      },
+      t("commentSection.addComment")
+    ),
+    formVisible && /* @__PURE__ */ React.createElement(
+      "form",
+      {
+        onSubmit: handleSubmit(postComment),
+        onChange: () => {
+          setEdited(true);
+        },
+        className: "qetaCommentForm"
+      },
+      /* @__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 };
+//# sourceMappingURL=CommentSection.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentSection.esm.js","sources":["../../../src/components/CommentSection/CommentSection.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Box, Button, Grid, TextField } from '@material-ui/core';\nimport { Link } from '@backstage/core-components';\nimport {\n  AnswerResponse,\n  PostResponse,\n  qetaCreateCommentPermission,\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';\nimport { RequirePermission } from '@backstage/plugin-permission-react';\n\nexport const CommentSection = (props: {\n  onCommentPost: (question: PostResponse, answer?: AnswerResponse) => void;\n  onCommentDelete: (question: PostResponse, answer?: AnswerResponse) => void;\n  post: PostResponse;\n  answer?: AnswerResponse;\n  className?: string;\n}) => {\n  const { answer, post, 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(post.id, answer.id, data.content).then(a => {\n        setFormVisible(false);\n        analytics.captureEvent('comment', 'answer');\n        reset();\n        setPosting(false);\n        setEdited(false);\n        onCommentPost(post, a);\n      });\n      return;\n    }\n\n    qetaApi.commentPost(post.id, data.content).then(q => {\n      setFormVisible(false);\n      analytics.captureEvent('comment', post.type);\n      reset();\n      setPosting(false);\n      setEdited(false);\n      onCommentPost(q);\n    });\n  };\n\n  useEffect(() => {\n    return confirmNavigationIfEdited(edited);\n  }, [edited]);\n\n  return (\n    <Box marginLeft={9} className={`${props.className} qetaCommentSection`}>\n      <CommentList\n        question={post}\n        answer={answer}\n        onCommentDelete={onCommentDelete}\n      />\n      <RequirePermission\n        permission={qetaCreateCommentPermission}\n        errorPage={<></>}\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      </RequirePermission>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,88 @@
+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, useTranslation } from '../../utils/hooks.esm.js';
+import { useApi } from '@backstage/core-plugin-api';
+import { useNavigate } from 'react-router-dom';
+import { qetaApiRef } from '../../api.esm.js';
+
+const DeleteModal = (props) => {
+  const qetaApi = useApi(qetaApiRef);
+  const base_path = useBasePath();
+  const navigate = useNavigate();
+  const { entity, open, question, onClose } = props;
+  const styles = useStyles();
+  const [error, setError] = React.useState(false);
+  const { t } = useTranslation();
+  const isQuestion = "title" in entity;
+  const isCollection = "owner" in entity;
+  const title = isCollection ? t("deleteModal.title.collection") : isQuestion ? t("deleteModal.title.question") : t("deleteModal.title.answer");
+  const handleDelete = () => {
+    if (isCollection) {
+      qetaApi.deleteCollection(entity.id).catch((_) => setError(true)).then((ret) => {
+        if (ret) {
+          onClose();
+          navigate(`${base_path}/qeta`);
+        } else {
+          setError(true);
+        }
+      });
+    } else if (isQuestion) {
+      qetaApi.deletePost(entity.id).catch((_) => setError(true)).then((ret) => {
+        if (ret) {
+          onClose();
+          navigate(`${base_path}/qeta`);
+        } else {
+          setError(true);
+        }
+      });
+    } else if (question) {
+      qetaApi.deleteAnswer(question.id, entity.id).catch((_) => setError(true)).then((ret) => {
+        if (ret) {
+          onClose();
+          window.location.reload();
+        } else {
+          setError(true);
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      open,
+      onClose,
+      className: "qetaDeleteModal",
+      "aria-labelledby": "modal-modal-title",
+      "aria-describedby": "modal-modal-description",
+      closeAfterTransition: true,
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        timeout: 500
+      }
+    },
+    /* @__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",
+        className: "qetaDeleteModalTitle",
+        variant: "h6",
+        component: "h2"
+      },
+      title
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleDelete,
+        className: "qetaDeleteModalDeleteBtn",
+        startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null),
+        color: "secondary"
+      },
+      t("deleteModal.deleteButton")
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: onClose, className: "qetaDeleteModalCancelBtn" }, t("deleteModal.cancelButton")))
+  );
+};
+
+export { DeleteModal };
+//# sourceMappingURL=DeleteModal.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteModal.esm.js","sources":["../../../src/components/DeleteModal/DeleteModal.tsx"],"sourcesContent":["import {\n  AnswerResponse,\n  CollectionResponse,\n  PostResponse,\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: PostResponse | AnswerResponse | CollectionResponse;\n  open: boolean;\n  onClose: () => void;\n  question?: PostResponse;\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  const isCollection = 'owner' in entity;\n\n  // eslint-disable-next-line no-nested-ternary\n  const title = isCollection\n    ? t('deleteModal.title.collection')\n    : isQuestion\n    ? t('deleteModal.title.question')\n    : t('deleteModal.title.answer');\n\n  const handleDelete = () => {\n    if (isCollection) {\n      qetaApi\n        .deleteCollection(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(`${base_path}/qeta`);\n          } else {\n            setError(true);\n          }\n        });\n    } else if (isQuestion) {\n      qetaApi\n        .deletePost(entity.id)\n        .catch(_ => setError(true))\n        .then(ret => {\n          if (ret) {\n            onClose();\n            navigate(`${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/EntitiesGrid/EntitiesGrid.esm.js

@@ -0,0 +1,45 @@
+import { Grid, TextField, IconButton, Typography } from '@material-ui/core';
+import React from 'react';
+import { useTranslation, useQetaApi } from '../../utils/hooks.esm.js';
+import { Progress, WarningPanel } from '@backstage/core-components';
+import { EntitiesGridItem } from './EntitiesGridItem.esm.js';
+
+const EntitiesGrid = () => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const { t } = useTranslation();
+  const {
+    value: response,
+    loading,
+    error
+  } = useQetaApi((api) => api.getEntities(), []);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error || response === void 0) {
+    return /* @__PURE__ */ React.createElement(WarningPanel, { severity: "error", title: t("entitiesPage.errorLoading") }, error?.message);
+  }
+  const filterData = (query, data) => {
+    if (!query) {
+      return data;
+    }
+    return data.filter(
+      (entity) => entity.entityRef.toLowerCase().includes(query)
+    );
+  };
+  const entities = filterData(searchQuery, response);
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, className: "qetaEntitiesContainer" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      id: "search-bar",
+      className: "text qetaEntitiesContainerSearchInput",
+      onChange: (event) => setSearchQuery(event.target.value),
+      label: t("entitiesPage.search.label"),
+      variant: "outlined",
+      placeholder: t("entitiesPage.search.placeholder"),
+      size: "small"
+    }
+  ), /* @__PURE__ */ React.createElement(IconButton, { type: "submit", "aria-label": "search" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", className: "qetaEntitiesContainerTitle" }, t("entitiesPage.entities", { count: entities.length }))), /* @__PURE__ */ React.createElement(Grid, { container: true, item: true, xs: 12, alignItems: "stretch" }, entities.map((entity) => /* @__PURE__ */ React.createElement(EntitiesGridItem, { entity, key: entity.entityRef }))));
+};
+
+export { EntitiesGrid };
+//# sourceMappingURL=EntitiesGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntitiesGrid.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGrid.tsx"],"sourcesContent":["import { Grid, IconButton, TextField, Typography } from '@material-ui/core';\nimport React from 'react';\nimport { useQetaApi, useTranslation } from '../../utils/hooks';\nimport { Progress, WarningPanel } from '@backstage/core-components';\nimport { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { EntitiesGridItem } from './EntitiesGridItem';\n\nexport const EntitiesGrid = () => {\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const { t } = useTranslation();\n\n  const {\n    value: response,\n    loading,\n    error,\n  } = useQetaApi(api => api.getEntities(), []);\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (error || response === undefined) {\n    return (\n      <WarningPanel severity=\"error\" title={t('entitiesPage.errorLoading')}>\n        {error?.message}\n      </WarningPanel>\n    );\n  }\n\n  const filterData = (query: string, data: EntityResponse[]) => {\n    if (!query) {\n      return data;\n    }\n    return data.filter(entity =>\n      entity.entityRef.toLowerCase().includes(query),\n    );\n  };\n\n  const entities = filterData(searchQuery, response);\n\n  return (\n    <Grid container className=\"qetaEntitiesContainer\">\n      <Grid item xs={12}>\n        <TextField\n          id=\"search-bar\"\n          className=\"text qetaEntitiesContainerSearchInput\"\n          onChange={(\n            event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,\n          ) => setSearchQuery(event.target.value)}\n          label={t('entitiesPage.search.label')}\n          variant=\"outlined\"\n          placeholder={t('entitiesPage.search.placeholder')}\n          size=\"small\"\n        />\n        <IconButton type=\"submit\" aria-label=\"search\" />\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"h6\" className=\"qetaEntitiesContainerTitle\">\n          {t('entitiesPage.entities', { count: entities.length })}\n        </Typography>\n      </Grid>\n      <Grid container item xs={12} alignItems=\"stretch\">\n        {entities.map(entity => (\n          <EntitiesGridItem entity={entity} key={entity.entityRef} />\n        ))}\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,KAAA,CAAM,SAAS,EAAE,CAAA,CAAA;AACvD,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAE7B,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA,KAAA;AAAA,MACE,UAAW,CAAA,CAAA,GAAA,KAAO,IAAI,WAAY,EAAA,EAAG,EAAE,CAAA,CAAA;AAE3C,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAAA,GACnB;AAEA,EAAI,IAAA,KAAA,IAAS,aAAa,KAAW,CAAA,EAAA;AACnC,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAa,QAAS,EAAA,OAAA,EAAQ,OAAO,CAAE,CAAA,2BAA2B,CAChE,EAAA,EAAA,KAAA,EAAO,OACV,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAA,EAAe,IAA2B,KAAA;AAC5D,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AACA,IAAA,OAAO,IAAK,CAAA,MAAA;AAAA,MAAO,YACjB,MAAO,CAAA,SAAA,CAAU,WAAY,EAAA,CAAE,SAAS,KAAK,CAAA;AAAA,KAC/C,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,QAAA,GAAW,UAAW,CAAA,WAAA,EAAa,QAAQ,CAAA,CAAA;AAEjD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAS,IAAC,EAAA,SAAA,EAAU,uBACxB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,YAAA;AAAA,MACH,SAAU,EAAA,uCAAA;AAAA,MACV,UAAU,CACR,KAAA,KACG,cAAe,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,MACtC,KAAA,EAAO,EAAE,2BAA2B,CAAA;AAAA,MACpC,OAAQ,EAAA,UAAA;AAAA,MACR,WAAA,EAAa,EAAE,iCAAiC,CAAA;AAAA,MAChD,IAAK,EAAA,OAAA;AAAA,KAAA;AAAA,GACP,kBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,IAAK,EAAA,QAAA,EAAS,cAAW,QAAS,EAAA,CAChD,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EAAA,kBACZ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAK,WAAU,4BAChC,EAAA,EAAA,CAAA,CAAE,uBAAyB,EAAA,EAAE,KAAO,EAAA,QAAA,CAAS,QAAQ,CACxD,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,WAAS,IAAC,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,EAAI,EAAA,UAAA,EAAW,aACrC,QAAS,CAAA,GAAA,CAAI,CACZ,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,MAAA,EAAgB,KAAK,MAAO,CAAA,SAAA,EAAW,CAC1D,CACH,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,61 @@
+import { Grid, Card, CardActionArea, CardHeader, Avatar, CardContent, Typography, CardActions, Button } from '@material-ui/core';
+import React from 'react';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation, useEntityFollow } from '../../utils/hooks.esm.js';
+import { useEntityPresentation } from '@backstage/plugin-catalog-react';
+import { entityRouteRef } from '../../routes.esm.js';
+import { parseEntityRef } from '@backstage/catalog-model';
+
+const EntitiesGridItem = (props) => {
+  const { entity } = props;
+  const entityRoute = useRouteRef(entityRouteRef);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const entityFollow = useEntityFollow();
+  const compound = parseEntityRef(entity.entityRef);
+  const { primaryTitle, Icon } = useEntityPresentation(compound);
+  return /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      variant: "outlined",
+      style: { height: "100%", display: "flex", flexDirection: "column" }
+    },
+    /* @__PURE__ */ React.createElement(
+      CardActionArea,
+      {
+        onClick: () => navigate(entityRoute({ entityRef: entity.entityRef }))
+      },
+      /* @__PURE__ */ React.createElement(
+        CardHeader,
+        {
+          title: primaryTitle,
+          avatar: Icon ? /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(Icon, null)) : null
+        }
+      ),
+      /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, t("common.posts", {
+        count: entity.postsCount,
+        itemType: "post"
+      }), " \xB7 ", t("common.followers", { count: entity.followerCount })))
+    ),
+    /* @__PURE__ */ React.createElement(CardActions, { style: { marginTop: "auto" } }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        size: "small",
+        variant: "outlined",
+        color: entityFollow.isFollowingEntity(entity.entityRef) ? "secondary" : "primary",
+        onClick: () => {
+          if (entityFollow.isFollowingEntity(entity.entityRef)) {
+            entityFollow.unfollowEntity(entity.entityRef);
+          } else {
+            entityFollow.followEntity(entity.entityRef);
+          }
+        }
+      },
+      entityFollow.isFollowingEntity(entity.entityRef) ? t("entityButton.unfollow") : t("entityButton.follow")
+    ))
+  ));
+};
+
+export { EntitiesGridItem };
+//# sourceMappingURL=EntitiesGridItem.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Avatar,\n  Button,\n  Card,\n  CardActionArea,\n  CardActions,\n  CardContent,\n  CardHeader,\n  Grid,\n  Typography,\n} from '@material-ui/core';\nimport React from 'react';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from '../../utils';\nimport { useEntityFollow } from '../../utils/hooks';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const entityFollow = useEntityFollow();\n  const compound = parseEntityRef(entity.entityRef);\n  const { primaryTitle, Icon } = useEntityPresentation(compound);\n\n  return (\n    <Grid item xs={3}>\n      <Card\n        variant=\"outlined\"\n        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}\n      >\n        <CardActionArea\n          onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n        >\n          <CardHeader\n            title={primaryTitle}\n            avatar={\n              Icon ? (\n                <Avatar>\n                  <Icon />\n                </Avatar>\n              ) : null\n            }\n          />\n          <CardContent>\n            <Typography variant=\"caption\">\n              {t('common.posts', {\n                count: entity.postsCount,\n                itemType: 'post',\n              })}\n              {' · '}\n              {t('common.followers', { count: entity.followerCount })}\n            </Typography>\n          </CardContent>\n        </CardActionArea>\n        <CardActions style={{ marginTop: 'auto' }}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={\n              entityFollow.isFollowingEntity(entity.entityRef)\n                ? 'secondary'\n                : 'primary'\n            }\n            onClick={() => {\n              if (entityFollow.isFollowingEntity(entity.entityRef)) {\n                entityFollow.unfollowEntity(entity.entityRef);\n              } else {\n                entityFollow.followEntity(entity.entityRef);\n              }\n            }}\n          >\n            {entityFollow.isFollowingEntity(entity.entityRef)\n              ? t('entityButton.unfollow')\n              : t('entityButton.follow')}\n          </Button>\n        </CardActions>\n      </Card>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAqBa,MAAA,gBAAA,GAAmB,CAAC,KAAsC,KAAA;AACrE,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AACnB,EAAM,MAAA,WAAA,GAAc,YAAY,cAAc,CAAA,CAAA;AAC9C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAM,MAAA,QAAA,GAAW,cAAe,CAAA,MAAA,CAAO,SAAS,CAAA,CAAA;AAChD,EAAA,MAAM,EAAE,YAAA,EAAc,IAAK,EAAA,GAAI,sBAAsB,QAAQ,CAAA,CAAA;AAE7D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,UAAA;AAAA,MACR,OAAO,EAAE,MAAA,EAAQ,QAAQ,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,KAAA;AAAA,oBAElE,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,QAAS,CAAA,WAAA,CAAY,EAAE,SAAW,EAAA,MAAA,CAAO,SAAU,EAAC,CAAC,CAAA;AAAA,OAAA;AAAA,sBAEpE,KAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAO,EAAA,YAAA;AAAA,UACP,QACE,IACE,mBAAA,KAAA,CAAA,aAAA,CAAC,8BACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAK,CACR,CACE,GAAA,IAAA;AAAA,SAAA;AAAA,OAER;AAAA,0CACC,WACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,OAAQ,EAAA,SAAA,EAAA,EACjB,EAAE,cAAgB,EAAA;AAAA,QACjB,OAAO,MAAO,CAAA,UAAA;AAAA,QACd,QAAU,EAAA,MAAA;AAAA,OACX,CACA,EAAA,QAAA,EACA,CAAE,CAAA,kBAAA,EAAoB,EAAE,KAAA,EAAO,MAAO,CAAA,aAAA,EAAe,CACxD,CACF,CAAA;AAAA,KACF;AAAA,wCACC,WAAY,EAAA,EAAA,KAAA,EAAO,EAAE,SAAA,EAAW,QAC/B,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QACL,OAAQ,EAAA,UAAA;AAAA,QACR,OACE,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,IAC3C,WACA,GAAA,SAAA;AAAA,QAEN,SAAS,MAAM;AACb,UAAA,IAAI,YAAa,CAAA,iBAAA,CAAkB,MAAO,CAAA,SAAS,CAAG,EAAA;AACpD,YAAa,YAAA,CAAA,cAAA,CAAe,OAAO,SAAS,CAAA,CAAA;AAAA,WACvC,MAAA;AACL,YAAa,YAAA,CAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,WAC5C;AAAA,SACF;AAAA,OAAA;AAAA,MAEC,YAAA,CAAa,kBAAkB,MAAO,CAAA,SAAS,IAC5C,CAAE,CAAA,uBAAuB,CACzB,GAAA,CAAA,CAAE,qBAAqB,CAAA;AAAA,KAE/B,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/FilterPanel/DateRangeFilter.esm.js

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { useMediaQuery, Box, TextField, MenuItem, Typography } from '@material-ui/core';
+import { useStyles, useTranslation } from '../../utils/hooks.esm.js';
+import { formatDate } from '../../utils/utils.esm.js';
+
+const DateRangeFilter = (props) => {
+  const { value, onChange } = props;
+  const styles = useStyles();
+  const [dateRangeOption, setDateRangeOption] = useState(
+    value
+  );
+  const { t } = useTranslation();
+  const [fromDate, setFromDate] = useState("");
+  const [toDate, setToDate] = useState("");
+  const [validation, setValidation] = useState({
+    isValid: true
+  });
+  const isSmallScreen = useMediaQuery(
+    (theme) => theme.breakpoints.down("sm")
+  );
+  const localDate = formatDate(/* @__PURE__ */ new Date());
+  useEffect(() => {
+    setDateRangeOption(value || "");
+    if (value && value.indexOf("--") >= 0) {
+      setDateRangeOption("custom");
+      setFromDate(value.split("--")[0] || "");
+      setToDate(value.split("--")[1] || "");
+    }
+  }, [value]);
+  useEffect(() => {
+    if (dateRangeOption && dateRangeOption !== "custom") {
+      setFromDate("");
+      setToDate("");
+      onChange(
+        "dateRange",
+        !dateRangeOption || dateRangeOption === "select" ? "" : dateRangeOption
+      );
+    }
+  }, [dateRangeOption, onChange]);
+  useEffect(() => {
+    if (fromDate && toDate) {
+      const startDate = new Date(fromDate);
+      const endDate = new Date(toDate);
+      if (startDate <= endDate) {
+        setValidation({ isValid: true });
+        onChange("dateRange", `${fromDate}--${toDate}`);
+      } else {
+        setValidation({
+          isValid: false,
+          message: t("datePicker.invalidRange")
+        });
+      }
+    }
+  }, [t, fromDate, toDate, onChange]);
+  return /* @__PURE__ */ React.createElement(Box, { display: isSmallScreen ? "block" : "flex", gridGap: "16px" }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      id: "outlined-select-currency",
+      select: true,
+      label: t("datePicker.range.label"),
+      value: dateRangeOption || "select",
+      className: styles.dateFilter,
+      onChange: (_e) => {
+        setDateRangeOption(_e.target.value);
+      },
+      variant: "outlined",
+      defaultValue: "None"
+    },
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "select" }, t("datePicker.range.default")),
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "7-days" }, t("datePicker.range.last7days")),
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "30-days" }, t("datePicker.range.last30days")),
+    /* @__PURE__ */ React.createElement(MenuItem, { value: "custom" }, t("datePicker.range.custom"))
+  ), dateRangeOption === "custom" && /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { display: isSmallScreen ? "block" : "flex", gridGap: "12px" }, /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      variant: "outlined",
+      label: t("datePicker.from"),
+      id: "from-date",
+      type: "date",
+      value: fromDate,
+      className: styles.dateFilter,
+      InputLabelProps: { shrink: true },
+      error: !validation.isValid,
+      onChange: (_e) => setFromDate(_e.target.value),
+      inputProps: {
+        max: toDate || localDate
+      }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    TextField,
+    {
+      variant: "outlined",
+      label: t("datePicker.to"),
+      id: "to-date",
+      type: "date",
+      value: toDate,
+      className: styles.dateFilter,
+      InputLabelProps: { shrink: true },
+      error: !validation.isValid,
+      onChange: (_e) => setToDate(_e.target.value),
+      inputProps: {
+        min: fromDate,
+        max: localDate
+      }
+    }
+  )), validation.message && /* @__PURE__ */ React.createElement(Typography, { color: "error", variant: "body2" }, validation.message)));
+};
+
+export { DateRangeFilter };
+//# sourceMappingURL=DateRangeFilter.esm.js.map

package/dist/components/FilterPanel/DateRangeFilter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport {\n  Box,\n  MenuItem,\n  TextField,\n  Theme,\n  Typography,\n  useMediaQuery,\n} from '@material-ui/core';\nimport { useStyles, useTranslation } from '../../utils/hooks';\nimport { formatDate } from '../../utils/utils';\n\nexport interface DateRangeFilterProps {\n  value?: string;\n  onChange: (dateRange: 'dateRange', value: string | string[]) => void;\n}\n\ntype DateRangeValidation = {\n  isValid: boolean;\n  message?: string;\n};\n\nexport const DateRangeFilter = (props: DateRangeFilterProps) => {\n  const { value, onChange } = props;\n  const styles = useStyles();\n  const [dateRangeOption, setDateRangeOption] = useState<string | undefined>(\n    value,\n  );\n  const { t } = useTranslation();\n  const [fromDate, setFromDate] = useState('');\n  const [toDate, setToDate] = useState('');\n  const [validation, setValidation] = useState<DateRangeValidation>({\n    isValid: true,\n  });\n  const isSmallScreen = useMediaQuery<Theme>(theme =>\n    theme.breakpoints.down('sm'),\n  );\n\n  const localDate = formatDate(new Date());\n\n  useEffect(() => {\n    setDateRangeOption(value || '');\n    if (value && value.indexOf('--') >= 0) {\n      setDateRangeOption('custom');\n      setFromDate(value.split('--')[0] || '');\n      setToDate(value.split('--')[1] || '');\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (dateRangeOption && dateRangeOption !== 'custom') {\n      setFromDate('');\n      setToDate('');\n      onChange(\n        'dateRange',\n        !dateRangeOption || dateRangeOption === 'select' ? '' : dateRangeOption,\n      );\n    }\n  }, [dateRangeOption, onChange]);\n\n  useEffect(() => {\n    if (fromDate && toDate) {\n      const startDate = new Date(fromDate);\n      const endDate = new Date(toDate);\n      if (startDate <= endDate) {\n        setValidation({ isValid: true });\n        onChange('dateRange', `${fromDate}--${toDate}`);\n      } else {\n        setValidation({\n          isValid: false,\n          message: t('datePicker.invalidRange'),\n        });\n      }\n    }\n  }, [t, fromDate, toDate, onChange]);\n\n  return (\n    <Box display={isSmallScreen ? 'block' : 'flex'} gridGap=\"16px\">\n      <TextField\n        id=\"outlined-select-currency\"\n        select\n        label={t('datePicker.range.label')}\n        value={dateRangeOption || 'select'}\n        className={styles.dateFilter}\n        onChange={_e => {\n          setDateRangeOption(_e.target.value);\n        }}\n        variant=\"outlined\"\n        defaultValue=\"None\"\n      >\n        <MenuItem value=\"select\">{t('datePicker.range.default')}</MenuItem>\n        <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n        <MenuItem value=\"30-days\">{t('datePicker.range.last30days')}</MenuItem>\n        <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n      </TextField>\n      {dateRangeOption === 'custom' && (\n        <Box display=\"flex\" flexDirection=\"column\">\n          <Box display={isSmallScreen ? 'block' : 'flex'} gridGap=\"12px\">\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.from')}\n              id=\"from-date\"\n              type=\"date\"\n              value={fromDate}\n              className={styles.dateFilter}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={_e => setFromDate(_e.target.value)}\n              inputProps={{\n                max: toDate || localDate,\n              }}\n            />\n            <TextField\n              variant=\"outlined\"\n              label={t('datePicker.to')}\n              id=\"to-date\"\n              type=\"date\"\n              value={toDate}\n              className={styles.dateFilter}\n              InputLabelProps={{ shrink: true }}\n              error={!validation.isValid}\n              onChange={_e => setToDate(_e.target.value)}\n              inputProps={{\n                min: fromDate,\n                max: localDate,\n              }}\n            />\n          </Box>\n          {validation.message && (\n            <Typography color=\"error\" variant=\"body2\">\n              {validation.message}\n            </Typography>\n          )}\n        </Box>\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}