npm - @drodil/backstage-plugin-qeta-react - Versions diffs - 3.48.1 → 3.49.0 - Mend

@drodil/backstage-plugin-qeta-react 3.48.1 → 3.49.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

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

@@ -1,79 +1,133 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Grid, Card, CardActionArea, CardHeader, Tooltip, Avatar, CardContent, Typography, CardActions, Button } from '@material-ui/core';
+import { EntityFollowButton } from '../Buttons/EntityFollowButton.esm.js';
+import { makeStyles, Grid, Card, Box, Avatar, Tooltip, Typography, CardContent } from '@material-ui/core';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { useNavigate } from 'react-router-dom';
 import { useEntityPresentation } from '@backstage/plugin-catalog-react';
 import { entityRouteRef } from '../../routes.esm.js';
 import { parseEntityRef } from '@backstage/catalog-model';
-import '../../api.esm.js';
-import 'react-use';
-import 'react';
-import { useEntityFollow } from '../../hooks/useEntityFollow.esm.js';
-import 'dataloader';
+import LinkIcon from '@material-ui/icons/Link';
+import DescriptionIcon from '@material-ui/icons/Description';
+import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';
+import PeopleIcon from '@material-ui/icons/People';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.esm.js';
-import 'react-use/lib/useAsync';
-import '@backstage/plugin-permission-react';
-import '@drodil/backstage-plugin-qeta-common';
-import '@backstage/plugin-permission-common';
-import VisibilityOff from '@material-ui/icons/VisibilityOff';
-import Visibility from '@material-ui/icons/Visibility';
 import useGridItemStyles from '../GridItemStyles/useGridItemStyles.esm.js';
+const useStyles = makeStyles((theme) => ({
+  statsGrid: {
+    marginTop: "auto"
+  },
+  statItem: {
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center"
+  },
+  flexColumn: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}));
 const EntitiesGridItem = (props) => {
   const { entity } = props;
   const classes = useGridItemStyles();
+  const localClasses = useStyles();
   const entityRoute = useRouteRef(entityRouteRef);
   const navigate = useNavigate();
   const { t } = useTranslationRef(qetaTranslationRef);
-  const entityFollow = useEntityFollow();
   const compound = parseEntityRef(entity.entityRef);
   const { primaryTitle, Icon, secondaryTitle } = useEntityPresentation(compound);
-  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, xl: 3, children: /* @__PURE__ */ jsxs(Card, { className: classes.card, variant: "outlined", children: [
-    /* @__PURE__ */ jsxs(
-      CardActionArea,
-      {
-        onClick: () => navigate(entityRoute({ entityRef: entity.entityRef })),
-        children: [
-          /* @__PURE__ */ jsx(
-            CardHeader,
+  return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, xl: 4, children: /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: classes.card,
+      style: { cursor: "pointer" },
+      onClick: () => navigate(entityRoute({ entityRef: entity.entityRef })),
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: classes.cardHeader, display: "flex", alignItems: "center", children: [
+          Icon && /* @__PURE__ */ jsx(Avatar, { style: { marginRight: 16 }, children: /* @__PURE__ */ jsx(Icon, {}) }),
+          /* @__PURE__ */ jsx(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx(Typography, { variant: "h6", noWrap: true, children: primaryTitle }) }) }),
+          /* @__PURE__ */ jsx(Box, { flexShrink: 0, children: /* @__PURE__ */ jsx(
+            "div",
             {
-              className: classes.cardHeader,
-              title: /* @__PURE__ */ jsx(Tooltip, { title: secondaryTitle ?? "", arrow: true, children: /* @__PURE__ */ jsx("span", { className: classes.ellipsis, children: primaryTitle }) }),
-              titleTypographyProps: { variant: "h6" },
-              avatar: Icon ? /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null
+              onClick: (e) => e.stopPropagation(),
+              onKeyPress: () => {
+              },
+              role: "button",
+              tabIndex: 0,
+              children: /* @__PURE__ */ jsx(EntityFollowButton, { entityRef: entity.entityRef })
             }
-          ),
-          /* @__PURE__ */ jsx(CardContent, { className: classes.cardContent, children: /* @__PURE__ */ jsxs(Typography, { className: classes.stats, variant: "caption", children: [
-            t("common.posts", {
-              count: entity.postsCount,
-              itemType: "post"
-            }),
-            " \xB7 ",
-            t("common.followers", { count: entity.followerCount })
-          ] }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(CardActions, { className: classes.cardActions, children: /* @__PURE__ */ jsx(Grid, { container: true, justifyContent: "center", children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { title: t("entityButton.tooltip"), children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        className: classes.actionButton,
-        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);
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CardContent,
+          {
+            className: `${classes.cardContent} ${localClasses.flexColumn}`,
+            children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, className: localClasses.statsGrid, children: [
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(QuestionAnswerIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.questionsCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.questions", {}) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.articlesCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.articles", {}) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(LinkIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.linksCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.links", {}) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Grid, { item: true, xs: 3, children: /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  className: localClasses.statItem,
+                  children: [
+                    /* @__PURE__ */ jsx(PeopleIcon, { fontSize: "small", color: "disabled" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { fontWeight: 600 }, children: entity.followerCount }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: t("stats.followers", {}) })
+                  ]
+                }
+              ) })
+            ] })
           }
-        },
-        startIcon: entityFollow.isFollowingEntity(entity.entityRef) ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {}),
-        children: entityFollow.isFollowingEntity(entity.entityRef) ? t("entityButton.unfollow") : t("entityButton.follow")
-      }
-    ) }) }) }) })
-  ] }) });
+        )
+      ]
+    }
+  ) });
 };
 export { EntitiesGridItem };

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

	@@ -1 +1 @@
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 Tooltip,\n Typography,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\nimport { useEntityFollow } from '../../hooks';\nimport VisibilityOff from '@material-ui/icons/VisibilityOff';\nimport Visibility from '@material-ui/icons/Visibility';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n const { entity } = props;\n const classes = useGridItemStyles();\n const entityRoute = useRouteRef(entityRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const entityFollow = useEntityFollow();\n const compound = parseEntityRef(entity.entityRef);\n const { primaryTitle, Icon, secondaryTitle } =\n useEntityPresentation(compound);\n\n return (\n <Grid item xs={12} sm={6} md={4} xl={3}>\n <Card className={classes.card} variant=\"outlined\">\n <CardActionArea\n onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n >\n <CardHeader\n className={classes.cardHeader}\n title={\n <Tooltip title={secondaryTitle ?? ''} arrow>\n <span className={classes.ellipsis}>{primaryTitle}</span>\n </Tooltip>\n }\n titleTypographyProps={{ variant: 'h6' }}\n avatar={\n Icon ? (\n <Avatar>\n <Icon />\n </Avatar>\n ) : null\n }\n />\n <CardContent className={classes.cardContent}>\n <Typography className={classes.stats} 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 className={classes.cardActions}>\n <Grid container justifyContent=\"center\">\n <Grid item>\n <Tooltip title={t('entityButton.tooltip')}>\n <Button\n className={classes.actionButton}\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 startIcon={\n entityFollow.isFollowingEntity(entity.entityRef) ? (\n <VisibilityOff />\n ) : (\n <Visibility />\n )\n }\n >\n {entityFollow.isFollowingEntity(entity.entityRef)\n ? t('entityButton.unfollow')\n : t('entityButton.follow')}\n </Button>\n </Tooltip>\n </Grid>\n </Grid>\n </CardActions>\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"EntitiesGridItem.esm.js","sources":["../../../src/components/EntitiesGrid/EntitiesGridItem.tsx"],"sourcesContent":["import { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { EntityFollowButton } from '../Buttons/EntityFollowButton';\nimport {\n Avatar,\n Card,\n CardContent,\n Grid,\n Tooltip,\n Typography,\n Box,\n makeStyles,\n} from '@material-ui/core';\nimport { useRouteRef } from '@backstage/core-plugin-api';\nimport { useNavigate } from 'react-router-dom';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { parseEntityRef } from '@backstage/catalog-model';\n\nimport LinkIcon from '@material-ui/icons/Link';\nimport DescriptionIcon from '@material-ui/icons/Description';\nimport QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer';\nimport PeopleIcon from '@material-ui/icons/People';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport useGridItemStyles from '../GridItemStyles/useGridItemStyles';\n\nconst useStyles = makeStyles(theme => ({\n statsGrid: {\n marginTop: 'auto',\n },\n statItem: {\n padding: theme.spacing(1),\n borderRadius: theme.shape.borderRadius,\n width: '100%',\n height: '100%',\n justifyContent: 'center',\n },\n flexColumn: {\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\nexport const EntitiesGridItem = (props: { entity: EntityResponse }) => {\n const { entity } = props;\n const classes = useGridItemStyles();\n const localClasses = useStyles();\n const entityRoute = useRouteRef(entityRouteRef);\n const navigate = useNavigate();\n const { t } = useTranslationRef(qetaTranslationRef);\n const compound = parseEntityRef(entity.entityRef);\n const { primaryTitle, Icon, secondaryTitle } =\n useEntityPresentation(compound);\n\n return (\n <Grid item xs={12} sm={6} md={6} xl={4}>\n <Card\n className={classes.card}\n style={{ cursor: 'pointer' }}\n onClick={() => navigate(entityRoute({ entityRef: entity.entityRef }))}\n >\n <Box className={classes.cardHeader} display=\"flex\" alignItems=\"center\">\n {Icon && (\n <Avatar style={{ marginRight: 16 }}>\n <Icon />\n </Avatar>\n )}\n <Box flex={1} minWidth={0}>\n <Tooltip title={secondaryTitle ?? ''} arrow>\n <Typography variant=\"h6\" noWrap>\n {primaryTitle}\n </Typography>\n </Tooltip>\n </Box>\n <Box flexShrink={0}>\n <div\n onClick={e => e.stopPropagation()}\n onKeyPress={() => {}}\n role=\"button\"\n tabIndex={0}\n >\n <EntityFollowButton entityRef={entity.entityRef} />\n </div>\n </Box>\n </Box>\n <CardContent\n className={`${classes.cardContent} ${localClasses.flexColumn}`}\n >\n <Grid container spacing={1} className={localClasses.statsGrid}>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={localClasses.statItem}\n >\n <QuestionAnswerIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {entity.questionsCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('stats.questions', {})}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={localClasses.statItem}\n >\n <DescriptionIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {entity.articlesCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('stats.articles', {})}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={localClasses.statItem}\n >\n <LinkIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {entity.linksCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('stats.links', {})}\n </Typography>\n </Box>\n </Grid>\n <Grid item xs={3}>\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n alignItems=\"center\"\n className={localClasses.statItem}\n >\n <PeopleIcon fontSize=\"small\" color=\"disabled\" />\n <Typography variant=\"body2\" style={{ fontWeight: 600 }}>\n {entity.followerCount}\n </Typography>\n <Typography variant=\"caption\" color=\"textSecondary\">\n {t('stats.followers', {})}\n </Typography>\n </Box>\n </Grid>\n </Grid>\n </CardContent>\n </Card>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -9,7 +9,7 @@ const useStyles = makeStyles(
   (theme) => ({
     root: {},
     textInput: {
-      minWidth: "230px",
+      width: "100%",
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(2),
       '& input[type="date"]': {
@@ -56,9 +56,9 @@ const DateRangeFilter = (props) => {
     },
     [onChange, fromDate, toDate, t]
   );
-  return /* @__PURE__ */ jsxs(Grid, { container: true, className: styles.root, children: [
+  return /* @__PURE__ */ jsxs(Grid, { container: true, className: styles.root, spacing: 1, children: [
     validation.message && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", children: validation.message }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(
       TextField,
       {
         select: true,
@@ -84,7 +84,7 @@ const DateRangeFilter = (props) => {
       }
     ) }),
     dateRangeOption === "custom" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
         TextField,
         {
           className: styles.textInput,
@@ -103,7 +103,7 @@ const DateRangeFilter = (props) => {
           }
         }
       ) }),
-      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, children: /* @__PURE__ */ jsx(
         TextField,
         {
           className: styles.textInput,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import { useEffect, useState, useCallback } from 'react';\nimport { formatDate } from '../../utils/utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n Grid,\n makeStyles,\n MenuItem,\n TextField,\n Typography,\n} from '@material-ui/core';\n\nexport interface DateRangeFilterProps {\n value?: string;\n onChange: (value: string \| string[]) => void;\n}\n\ntype DateRangeValidation = {\n isValid: boolean;\n message?: string;\n};\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n textInput: {\n ~~minWidth~~: '~~230px~~',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n '& input[type=\"date\"]': {\n colorScheme: theme.palette.type === 'dark' ? 'dark' : 'light',\n },\n },\n }),\n { name: 'QetaDateRangeFilter' },\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 } = useTranslationRef(qetaTranslationRef);\n const localDate = formatDate(new Date());\n const [fromDate, setFromDate] = useState(localDate);\n const [toDate, setToDate] = useState(localDate);\n const [validation, setValidation] = useState<DateRangeValidation>({\n isValid: true,\n });\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 const handleCustom = useCallback(\n (from?: string, to?: string) => {\n const startDate = new Date(from ?? fromDate);\n const endDate = new Date(to ?? toDate);\n if (startDate <= endDate) {\n setValidation({ isValid: true });\n onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);\n } else {\n setValidation({\n isValid: false,\n message: t('datePicker.invalidRange'),\n });\n }\n },\n [onChange, fromDate, toDate, t],\n );\n\n return (\n <Grid container className={styles.root}>\n {validation.message && (\n <Grid item xs={12}>\n <Typography color=\"error\" variant=\"body2\">\n {validation.message}\n </Typography>\n </Grid>\n )}\n <Grid item>\n <TextField\n select\n className={styles.textInput}\n value={dateRangeOption \|\| 'date-range'}\n onChange={e => {\n if (e.target.value !== 'custom') {\n onChange(e.target.value === 'date-range' ? '' : e.target.value);\n } else {\n handleCustom();\n }\n setDateRangeOption(e.target.value);\n }}\n variant=\"outlined\"\n defaultValue=\"date-range\"\n fullWidth\n >\n <MenuItem value=\"date-range\">{t('datePicker.range.label')}</MenuItem>\n <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n <MenuItem value=\"30-days\">\n {t('datePicker.range.last30days')}\n </MenuItem>\n <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n </TextField>\n </Grid>\n {dateRangeOption === 'custom' && (\n <>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.from')}\n id=\"from-date\"\n type=\"date\"\n value={fromDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(e.target.value);\n }}\n inputProps={{\n max: toDate \|\| localDate,\n }}\n />\n </Grid>\n <Grid item>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.to')}\n id=\"to-date\"\n type=\"date\"\n value={toDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(undefined, e.target.value);\n }}\n inputProps={{\n min: fromDate,\n max: localDate,\n }}\n />\n </Grid>\n </>\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAsBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB,CAAU,KAAA,MAAA;AAAA,IACR,MAAM,EAAC;AAAA,IACP,SAAW,EAAA;AAAA,MACT,~~QAAU~~,EAAA,~~OAAA~~;AAAA,~~MACV~~,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC1B,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC7B,sBAAwB,EAAA;AAAA,QACtB,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,SAAS,MAAS,GAAA;AAAA;AACxD;AACF,GACF,CAAA;AAAA,EACA,EAAE,MAAM,qBAAsB;AAChC,CAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,KAAO,EAAA,QAAA,EAAa,GAAA,KAAA;AAC5B,EAAA,MAAM,SAAS,SAAU,EAAA;AACzB,EAAM,MAAA,CAAC,eAAiB,EAAA,kBAAkB,CAAI,GAAA,QAAA;AAAA,IAC5C;AAAA,GACF;AACA,EAAA,MAAM,EAAE,CAAA,EAAM,GAAA,iBAAA,CAAkB,kBAAkB,CAAA;AAClD,EAAA,MAAM,SAAY,GAAA,UAAA,iBAAe,IAAA,IAAA,EAAM,CAAA;AACvC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,SAAS,CAAA;AAClD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAS,SAAS,CAAA;AAC9C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,QAA8B,CAAA;AAAA,IAChE,OAAS,EAAA;AAAA,GACV,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,kBAAA,CAAmB,SAAS,EAAE,CAAA;AAC9B,IAAA,IAAI,KAAS,IAAA,KAAA,CAAM,OAAQ,CAAA,IAAI,KAAK,CAAG,EAAA;AACrC,MAAA,kBAAA,CAAmB,QAAQ,CAAA;AAC3B,MAAA,WAAA,CAAY,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA;AACtC,MAAA,SAAA,CAAU,MAAM,KAAM,CAAA,IAAI,CAAE,CAAA,CAAC,KAAK,EAAE,CAAA;AAAA;AACtC,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,MAAe,EAAgB,KAAA;AAC9B,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,CAAA,IAAA,IAAQ,QAAQ,CAAA;AAC3C,MAAA,MAAM,OAAU,GAAA,IAAI,IAAK,CAAA,EAAA,IAAM,MAAM,CAAA;AACrC,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAc,aAAA,CAAA,EAAE,OAAS,EAAA,IAAA,EAAM,CAAA;AAC/B,QAAS,QAAA,CAAA,CAAA,EAAG,WAAW,SAAS,CAAC,KAAK,UAAW,CAAA,OAAO,CAAC,CAAE,CAAA,CAAA;AAAA,OACtD,MAAA;AACL,QAAc,aAAA,CAAA;AAAA,UACZ,OAAS,EAAA,KAAA;AAAA,UACT,OAAA,EAAS,EAAE,yBAAyB;AAAA,SACrC,CAAA;AAAA;AACH,KACF;AAAA,IACA,CAAC,QAAA,EAAU,QAAU,EAAA,MAAA,EAAQ,CAAC;AAAA,GAChC;AAEA,~~EAAA~~,~~4BACG~~,~~IAAK~~,~~EAAA~~,EAAA,~~SAAA~~,~~EAAS~~,~~IAAC~~,~~EAAA~~,~~SAAA~~,~~EAAW~~,~~OAAO~~,~~IAC/B~~,EAAA,QAAA,EAAA;AAAA,IAAA,UAAA,CAAW,OACV,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAI,MAAC,EAAI,EAAA,EAAA,EACb,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,OAAM,OAAQ,EAAA,OAAA,EAAQ,OAC/B,EAAA,QAAA,EAAA,UAAA,CAAW,SACd,CACF,EAAA,CAAA;AAAA,~~oBAEF~~,GAAA,~~CAAC~~,~~IAAK~~,EAAA,EAAA,IAAA,~~EAAI~~,~~IACR~~,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,MAAM,EAAA,IAAA;AAAA,QACN,WAAW,MAAO,CAAA,SAAA;AAAA,QAClB,OAAO,eAAmB,IAAA,YAAA;AAAA,QAC1B,UAAU,CAAK,CAAA,KAAA;AACb,UAAI,IAAA,CAAA,CAAE,MAAO,CAAA,KAAA,KAAU,QAAU,EAAA;AAC/B,YAAA,QAAA,CAAS,EAAE,MAAO,CAAA,KAAA,KAAU,eAAe,EAAK,GAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,WACzD,MAAA;AACL,YAAa,YAAA,EAAA;AAAA;AAEf,UAAmB,kBAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,SACnC;AAAA,QACA,OAAQ,EAAA,UAAA;AAAA,QACR,YAAa,EAAA,YAAA;AAAA,QACb,SAAS,EAAA,IAAA;AAAA,QAET,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,KAAA,EAAM,YAAc,EAAA,QAAA,EAAA,CAAA,CAAE,wBAAwB,CAAE,EAAA,CAAA;AAAA,8BACzD,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,QAAA,EAAA,CAAA,CAAE,4BAA4B,CAAE,EAAA,CAAA;AAAA,8BACzD,QAAS,EAAA,EAAA,KAAA,EAAM,SACb,EAAA,QAAA,EAAA,CAAA,CAAE,6BAA6B,CAClC,EAAA,CAAA;AAAA,8BACC,QAAS,EAAA,EAAA,KAAA,EAAM,QAAU,EAAA,QAAA,EAAA,CAAA,CAAE,yBAAyB,CAAE,EAAA;AAAA;AAAA;AAAA,KAE3D,EAAA,CAAA;AAAA,IACC,eAAA,KAAoB,4BAEjB,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,~~sBAAC~~,GAAA,~~CAAA~~,IAAA,EAAA,~~EAAK~~,~~MAAI~~,~~IACR~~,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,SAAA;AAAA,UAClB,OAAQ,EAAA,UAAA;AAAA,UACR,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,UAC1B,EAAG,EAAA,WAAA;AAAA,UACH,IAAK,EAAA,MAAA;AAAA,UACL,KAAO,EAAA,QAAA;AAAA,UACP,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,UAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,UACnB,UAAU,CAAK,CAAA,KAAA;AACb,YAAa,YAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,WAC7B;AAAA,UACA,UAAY,EAAA;AAAA,YACV,KAAK,MAAU,IAAA;AAAA;AACjB;AAAA,OAEJ,EAAA,CAAA;AAAA,~~sBACA~~,GAAA,~~CAAC~~,~~IAAK~~,EAAA,EAAA,IAAA,~~EAAI~~,~~IACR~~,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,WAAW,MAAO,CAAA,SAAA;AAAA,UAClB,OAAQ,EAAA,UAAA;AAAA,UACR,KAAA,EAAO,EAAE,eAAe,CAAA;AAAA,UACxB,EAAG,EAAA,SAAA;AAAA,UACH,IAAK,EAAA,MAAA;AAAA,UACL,KAAO,EAAA,MAAA;AAAA,UACP,eAAA,EAAiB,EAAE,MAAA,EAAQ,IAAK,EAAA;AAAA,UAChC,KAAA,EAAO,CAAC,UAAW,CAAA,OAAA;AAAA,UACnB,UAAU,CAAK,CAAA,KAAA;AACb,YAAa,YAAA,CAAA,KAAA,CAAA,EAAW,CAAE,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,WACxC;AAAA,UACA,UAAY,EAAA;AAAA,YACV,GAAK,EAAA,QAAA;AAAA,YACL,GAAK,EAAA;AAAA;AACP;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"DateRangeFilter.esm.js","sources":["../../../src/components/FilterPanel/DateRangeFilter.tsx"],"sourcesContent":["import { useEffect, useState, useCallback } from 'react';\nimport { formatDate } from '../../utils/utils';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { qetaTranslationRef } from '../../translation.ts';\nimport {\n Grid,\n makeStyles,\n MenuItem,\n TextField,\n Typography,\n} from '@material-ui/core';\n\nexport interface DateRangeFilterProps {\n value?: string;\n onChange: (value: string \| string[]) => void;\n}\n\ntype DateRangeValidation = {\n isValid: boolean;\n message?: string;\n};\n\nconst useStyles = makeStyles(\n theme => ({\n root: {},\n textInput: {\n width: '100%',\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(2),\n '& input[type=\"date\"]': {\n colorScheme: theme.palette.type === 'dark' ? 'dark' : 'light',\n },\n },\n }),\n { name: 'QetaDateRangeFilter' },\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 } = useTranslationRef(qetaTranslationRef);\n const localDate = formatDate(new Date());\n const [fromDate, setFromDate] = useState(localDate);\n const [toDate, setToDate] = useState(localDate);\n const [validation, setValidation] = useState<DateRangeValidation>({\n isValid: true,\n });\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 const handleCustom = useCallback(\n (from?: string, to?: string) => {\n const startDate = new Date(from ?? fromDate);\n const endDate = new Date(to ?? toDate);\n if (startDate <= endDate) {\n setValidation({ isValid: true });\n onChange(`${formatDate(startDate)}--${formatDate(endDate)}`);\n } else {\n setValidation({\n isValid: false,\n message: t('datePicker.invalidRange'),\n });\n }\n },\n [onChange, fromDate, toDate, t],\n );\n\n return (\n <Grid container className={styles.root} spacing={1}>\n {validation.message && (\n <Grid item xs={12}>\n <Typography color=\"error\" variant=\"body2\">\n {validation.message}\n </Typography>\n </Grid>\n )}\n <Grid item xs={12}>\n <TextField\n select\n className={styles.textInput}\n value={dateRangeOption \|\| 'date-range'}\n onChange={e => {\n if (e.target.value !== 'custom') {\n onChange(e.target.value === 'date-range' ? '' : e.target.value);\n } else {\n handleCustom();\n }\n setDateRangeOption(e.target.value);\n }}\n variant=\"outlined\"\n defaultValue=\"date-range\"\n fullWidth\n >\n <MenuItem value=\"date-range\">{t('datePicker.range.label')}</MenuItem>\n <MenuItem value=\"7-days\">{t('datePicker.range.last7days')}</MenuItem>\n <MenuItem value=\"30-days\">\n {t('datePicker.range.last30days')}\n </MenuItem>\n <MenuItem value=\"custom\">{t('datePicker.range.custom')}</MenuItem>\n </TextField>\n </Grid>\n {dateRangeOption === 'custom' && (\n <>\n <Grid item xs={6}>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.from')}\n id=\"from-date\"\n type=\"date\"\n value={fromDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(e.target.value);\n }}\n inputProps={{\n max: toDate \|\| localDate,\n }}\n />\n </Grid>\n <Grid item xs={6}>\n <TextField\n className={styles.textInput}\n variant=\"outlined\"\n label={t('datePicker.to')}\n id=\"to-date\"\n type=\"date\"\n value={toDate}\n InputLabelProps={{ shrink: true }}\n error={!validation.isValid}\n onChange={e => {\n handleCustom(undefined, e.target.value);\n }}\n inputProps={{\n min: fromDate,\n max: localDate,\n }}\n />\n </Grid>\n </>\n )}\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}