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

package/dist/components/StatsChart/StatsChart.esm.js

@@ -0,0 +1,245 @@
+import React, { useCallback } from 'react';
+import { ResponsiveContainer, BarChart, Tooltip, Bar, CartesianGrid, XAxis, YAxis, Legend, LineChart, Line } from 'recharts';
+import { makeStyles, createStyles, Typography, ButtonGroup, IconButton } from '@material-ui/core';
+import { useTranslation, useIsDarkTheme } from '../../utils/hooks.esm.js';
+import ShowChartIcon from '@material-ui/icons/ShowChart';
+import BarChartIcon from '@material-ui/icons/BarChart';
+
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    tooltipLabel: {
+      color: theme.palette.text.primary
+    },
+    tooltipWrapper: {
+      backgroundColor: `${theme.palette.background.default} !important`,
+      border: "none !important"
+    },
+    xAxis: {
+      color: `${theme.palette.text.primary} !important`
+    }
+  })
+);
+const isGlobalStat = (stat) => {
+  return stat.totalUsers !== void 0;
+};
+const DEFAULT_STATS = [
+  {
+    dataKey: "totalViews",
+    name: "Total views",
+    color: "#8884d8",
+    enabled: false,
+    globalStat: false
+  },
+  {
+    dataKey: "totalQuestions",
+    name: "Total questions",
+    color: "#82ca9d",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalAnswers",
+    name: "Total answers",
+    color: "#ff7300",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalComments",
+    name: "Total comments",
+    color: "#739973",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalVotes",
+    name: "Total votes",
+    color: "#d88884",
+    enabled: true,
+    globalStat: false
+  },
+  {
+    dataKey: "totalUsers",
+    name: "Total users",
+    color: "#ff0000",
+    enabled: true,
+    globalStat: true
+  },
+  {
+    dataKey: "totalTags",
+    name: "Total tags",
+    color: "#ff00ff",
+    enabled: true,
+    globalStat: true
+  },
+  {
+    dataKey: "totalArticles",
+    name: "Total articles",
+    color: "#00ff00",
+    enabled: true,
+    globalStat: false
+  }
+];
+const useChartState = (data) => {
+  const styles = useStyles();
+  const isDark = useIsDarkTheme();
+  const globalStats = isGlobalStat(data[0]);
+  const [stats, setStats] = React.useState(
+    DEFAULT_STATS.filter((stat) => {
+      return globalStats || !stat.globalStat;
+    })
+  );
+  const toggleStat = useCallback(
+    (name) => {
+      setStats(
+        (prev) => prev.map(
+          (stat) => stat.name === name ? { ...stat, enabled: !stat.enabled } : stat
+        )
+      );
+    },
+    [setStats]
+  );
+  const isDisabled = useCallback(
+    (name) => {
+      return stats.find((stat) => stat.name === name)?.enabled === false;
+    },
+    [stats]
+  );
+  return { styles, isDark, toggleStat, stats, isDisabled };
+};
+const StatsBarChart = (props) => {
+  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(
+    props.data
+  );
+  return /* @__PURE__ */ React.createElement(ResponsiveContainer, { height: 400, width: "100%" }, /* @__PURE__ */ React.createElement(BarChart, { data: props.data, width: 900, height: 300 }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelClassName: styles.tooltipLabel,
+      wrapperClassName: styles.tooltipWrapper,
+      cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" }
+    }
+  ), stats.map((stat) => /* @__PURE__ */ React.createElement(
+    Bar,
+    {
+      key: stat.dataKey,
+      dataKey: stat.enabled ? stat.dataKey : "hidden",
+      name: stat.name,
+      fill: stat.color
+    }
+  )), /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: "#ccc" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "date",
+      tickFormatter: (tick) => new Date(tick).toDateString(),
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    YAxis,
+    {
+      allowDecimals: false,
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      verticalAlign: "top",
+      height: 36,
+      wrapperStyle: { cursor: "pointer" },
+      formatter: (data) => {
+        return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
+      },
+      onClick: (data) => {
+        if (data.value) {
+          toggleStat(data.value);
+        }
+      }
+    }
+  )));
+};
+const StatsLineChart = (props) => {
+  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(
+    props.data
+  );
+  return /* @__PURE__ */ React.createElement(ResponsiveContainer, { height: 400, width: "100%" }, /* @__PURE__ */ React.createElement(LineChart, { data: props.data, width: 900, height: 300 }, /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelClassName: styles.tooltipLabel,
+      wrapperClassName: styles.tooltipWrapper,
+      cursor: { fill: isDark ? "#4f4f4f" : "#f5f5f5" }
+    }
+  ), stats.map((stat) => /* @__PURE__ */ React.createElement(
+    Line,
+    {
+      key: stat.dataKey,
+      dataKey: stat.enabled ? stat.dataKey : "hidden",
+      name: stat.name,
+      stroke: stat.color
+    }
+  )), /* @__PURE__ */ React.createElement(CartesianGrid, { stroke: "#ccc" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "date",
+      tickFormatter: (tick) => new Date(tick).toDateString(),
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    YAxis,
+    {
+      allowDecimals: false,
+      axisLine: { stroke: isDark ? "white" : "black" },
+      tickLine: { stroke: isDark ? "white" : "black" },
+      tick: { fill: isDark ? "white" : "black" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Legend,
+    {
+      verticalAlign: "top",
+      height: 36,
+      wrapperStyle: { cursor: "pointer" },
+      formatter: (data) => {
+        return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;
+      },
+      onClick: (data) => {
+        if (data.value) {
+          toggleStat(data.value);
+        }
+      }
+    }
+  )));
+};
+const StatsChart = (props) => {
+  const { t } = useTranslation();
+  const [chart, setChart] = React.useState("line");
+  if (!props.data || props.data.length === 0) {
+    return /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle1" }, t("stats.noStats"));
+  }
+  const data = props.data.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()).map((d) => ({ ...d, hidden: 0 }));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, chart === "line" ? /* @__PURE__ */ React.createElement(StatsLineChart, { data }) : /* @__PURE__ */ React.createElement(StatsBarChart, { data }), /* @__PURE__ */ React.createElement(ButtonGroup, { "aria-label": "Chart type", style: { float: "right" } }, /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "Line chart",
+      onClick: () => {
+        setChart("line");
+      }
+    },
+    /* @__PURE__ */ React.createElement(ShowChartIcon, null)
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "Bar chart",
+      onClick: () => {
+        setChart("bar");
+      }
+    },
+    /* @__PURE__ */ React.createElement(BarChartIcon, null)
+  )));
+};
+
+export { StatsChart };
+//# sourceMappingURL=StatsChart.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatsChart.esm.js","sources":["../../../src/components/StatsChart/StatsChart.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport {\n  GlobalStat,\n  Stat,\n  UserStat,\n} from '@drodil/backstage-plugin-qeta-common';\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts';\nimport {\n  ButtonGroup,\n  createStyles,\n  IconButton,\n  makeStyles,\n  Theme,\n  Typography,\n} from '@material-ui/core';\nimport { useIsDarkTheme, useTranslation } from '../../utils/hooks';\nimport ShowChartIcon from '@material-ui/icons/ShowChart';\nimport BarChartIcon from '@material-ui/icons/BarChart';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    tooltipLabel: {\n      color: theme.palette.text.primary,\n    },\n    tooltipWrapper: {\n      backgroundColor: `${theme.palette.background.default} !important`,\n      border: 'none !important',\n    },\n    xAxis: {\n      color: `${theme.palette.text.primary} !important`,\n    },\n  }),\n);\n\nconst isGlobalStat = (stat: Stat): stat is GlobalStat => {\n  return (stat as GlobalStat).totalUsers !== undefined;\n};\n\ntype StatType = {\n  dataKey:\n    | 'totalViews'\n    | 'totalQuestions'\n    | 'totalAnswers'\n    | 'totalComments'\n    | 'totalVotes'\n    | 'totalUsers'\n    | 'totalTags'\n    | 'totalArticles';\n  name: string;\n  color: string;\n  enabled: boolean;\n  globalStat: boolean;\n};\n\nconst DEFAULT_STATS: StatType[] = [\n  {\n    dataKey: 'totalViews',\n    name: 'Total views',\n    color: '#8884d8',\n    enabled: false,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalQuestions',\n    name: 'Total questions',\n    color: '#82ca9d',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalAnswers',\n    name: 'Total answers',\n    color: '#ff7300',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalComments',\n    name: 'Total comments',\n    color: '#739973',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalVotes',\n    name: 'Total votes',\n    color: '#d88884',\n    enabled: true,\n    globalStat: false,\n  },\n  {\n    dataKey: 'totalUsers',\n    name: 'Total users',\n    color: '#ff0000',\n    enabled: true,\n    globalStat: true,\n  },\n  {\n    dataKey: 'totalTags',\n    name: 'Total tags',\n    color: '#ff00ff',\n    enabled: true,\n    globalStat: true,\n  },\n  {\n    dataKey: 'totalArticles',\n    name: 'Total articles',\n    color: '#00ff00',\n    enabled: true,\n    globalStat: false,\n  },\n];\n\nconst useChartState = (data: GlobalStat[] | UserStat[]) => {\n  const styles = useStyles();\n  const isDark = useIsDarkTheme();\n  const globalStats = isGlobalStat(data[0]);\n  const [stats, setStats] = React.useState<StatType[]>(\n    DEFAULT_STATS.filter(stat => {\n      return globalStats || !stat.globalStat;\n    }),\n  );\n  const toggleStat = useCallback(\n    (name: string) => {\n      setStats(prev =>\n        prev.map(stat =>\n          stat.name === name ? { ...stat, enabled: !stat.enabled } : stat,\n        ),\n      );\n    },\n    [setStats],\n  );\n  const isDisabled = useCallback(\n    (name: string) => {\n      return stats.find(stat => stat.name === name)?.enabled === false;\n    },\n    [stats],\n  );\n\n  return { styles, isDark, toggleStat, stats, isDisabled };\n};\n\nconst StatsBarChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <BarChart data={props.data} width={900} height={300}>\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Bar\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            fill={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n\nconst StatsLineChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { styles, isDark, stats, toggleStat, isDisabled } = useChartState(\n    props.data,\n  );\n  return (\n    <ResponsiveContainer height={400} width=\"100%\">\n      <LineChart data={props.data} width={900} height={300}>\n        <Tooltip\n          labelClassName={styles.tooltipLabel}\n          wrapperClassName={styles.tooltipWrapper}\n          cursor={{ fill: isDark ? '#4f4f4f' : '#f5f5f5' }}\n        />\n        {stats.map(stat => (\n          <Line\n            key={stat.dataKey}\n            dataKey={stat.enabled ? stat.dataKey : 'hidden'}\n            name={stat.name}\n            stroke={stat.color}\n          />\n        ))}\n        <CartesianGrid stroke=\"#ccc\" />\n        <XAxis\n          dataKey=\"date\"\n          tickFormatter={(tick: string) => new Date(tick).toDateString()}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <YAxis\n          allowDecimals={false}\n          axisLine={{ stroke: isDark ? 'white' : 'black' }}\n          tickLine={{ stroke: isDark ? 'white' : 'black' }}\n          tick={{ fill: isDark ? 'white' : 'black' }}\n        />\n        <Legend\n          verticalAlign=\"top\"\n          height={36}\n          wrapperStyle={{ cursor: 'pointer' }}\n          formatter={data => {\n            return isDisabled(data) ? `[ ] ${data}` : `[x] ${data}`;\n          }}\n          onClick={data => {\n            if (data.value) {\n              toggleStat(data.value as string);\n            }\n          }}\n        />\n      </LineChart>\n    </ResponsiveContainer>\n  );\n};\n\nexport const StatsChart = (props: { data: GlobalStat[] | UserStat[] }) => {\n  const { t } = useTranslation();\n  const [chart, setChart] = React.useState<'line' | 'bar'>('line');\n\n  if (!props.data || props.data.length === 0) {\n    return <Typography variant=\"subtitle1\">{t('stats.noStats')}</Typography>;\n  }\n  const data = props.data\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map(d => ({ ...d, hidden: 0 }));\n\n  return (\n    <>\n      {chart === 'line' ? (\n        <StatsLineChart data={data} />\n      ) : (\n        <StatsBarChart data={data} />\n      )}\n      <ButtonGroup aria-label=\"Chart type\" style={{ float: 'right' }}>\n        <IconButton\n          aria-label=\"Line chart\"\n          onClick={() => {\n            setChart('line');\n          }}\n        >\n          <ShowChartIcon />\n        </IconButton>\n        <IconButton\n          aria-label=\"Bar chart\"\n          onClick={() => {\n            setChart('bar');\n          }}\n        >\n          <BarChartIcon />\n        </IconButton>\n      </ButtonGroup>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/SummaryStatsGrid/SummaryStatsGrid.esm.js

@@ -0,0 +1,53 @@
+import { Grid, Card, CardContent, Typography } from '@material-ui/core';
+import React from 'react';
+import numeral from 'numeral';
+import { useTranslation } from '../../utils/hooks.esm.js';
+
+const SummaryCard = (props) => {
+  const { title, value } = props;
+  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, value >= 1e3 ? numeral(value).format("0.0 a") : value, /* @__PURE__ */ React.createElement(Typography, { variant: "caption", style: { marginLeft: "1rem" } }, title))));
+};
+const SummaryStatsGrid = (props) => {
+  const { stats } = props;
+  const { t } = useTranslation();
+  return /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.questions"),
+      value: stats.summary.totalQuestions
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.answers"),
+      value: stats.summary.totalAnswers
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.articles"),
+      value: stats.summary.totalArticles
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.comments"),
+      value: stats.summary.totalComments
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.views"),
+      value: stats.summary.totalViews
+    }
+  )), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(
+    SummaryCard,
+    {
+      title: t("stats.votes"),
+      value: stats.summary.totalVotes
+    }
+  )));
+};
+
+export { SummaryStatsGrid };
+//# sourceMappingURL=SummaryStatsGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryStatsGrid.esm.js","sources":["../../../src/components/SummaryStatsGrid/SummaryStatsGrid.tsx"],"sourcesContent":["import { Card, CardContent, Grid, Typography } from '@material-ui/core';\nimport { StatisticsResponse } from '@drodil/backstage-plugin-qeta-common';\nimport React from 'react';\nimport numeral from 'numeral';\nimport { useTranslation } from '../../utils/hooks';\n\nconst SummaryCard = (props: { title: string; value: number }) => {\n  const { title, value } = props;\n  return (\n    <Card>\n      <CardContent>\n        <Typography variant=\"h5\">\n          {value >= 1000 ? numeral(value).format('0.0 a') : value}\n          <Typography variant=\"caption\" style={{ marginLeft: '1rem' }}>\n            {title}\n          </Typography>\n        </Typography>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const SummaryStatsGrid = (props: { stats: StatisticsResponse }) => {\n  const { stats } = props;\n  const { t } = useTranslation();\n  return (\n    <Grid container>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.questions')}\n          value={stats.summary.totalQuestions}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.answers')}\n          value={stats.summary.totalAnswers}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.articles')}\n          value={stats.summary.totalArticles}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.comments')}\n          value={stats.summary.totalComments}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.views')}\n          value={stats.summary.totalViews}\n        />\n      </Grid>\n      <Grid item xs={4}>\n        <SummaryCard\n          title={t('stats.votes')}\n          value={stats.summary.totalVotes}\n        />\n      </Grid>\n    </Grid>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,WAAA,GAAc,CAAC,KAA4C,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAO,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,IAAA,EAAA,EACjB,KAAS,IAAA,GAAA,GAAO,OAAQ,CAAA,KAAK,CAAE,CAAA,MAAA,CAAO,OAAO,CAAA,GAAI,KAClD,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAU,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,MAAO,EAAA,EAAA,EACvD,KACH,CACF,CACF,CACF,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,gBAAA,GAAmB,CAAC,KAAyC,KAAA;AACxE,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA,CAAA;AAClB,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,cAAe,EAAA,CAAA;AAC7B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,SAAS,EAAA,IAAA,EAAA,sCACZ,IAAK,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,EAAA,EAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,iBAAiB,CAAA;AAAA,MAC1B,KAAA,EAAO,MAAM,OAAQ,CAAA,cAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,eAAe,CAAA;AAAA,MACxB,KAAA,EAAO,MAAM,OAAQ,CAAA,YAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,MACzB,KAAA,EAAO,MAAM,OAAQ,CAAA,aAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,gBAAgB,CAAA;AAAA,MACzB,KAAA,EAAO,MAAM,OAAQ,CAAA,aAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,aAAa,CAAA;AAAA,MACtB,KAAA,EAAO,MAAM,OAAQ,CAAA,UAAA;AAAA,KAAA;AAAA,GAEzB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAK,IAAI,EAAA,IAAA,EAAC,IAAI,CACb,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,EAAE,aAAa,CAAA;AAAA,MACtB,KAAA,EAAO,MAAM,OAAQ,CAAA,UAAA;AAAA,KAAA;AAAA,GAEzB,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/TagsAndEntities/EntityChip.esm.js

@@ -0,0 +1,80 @@
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { Tooltip, Chip, Grid, Typography, Button } from '@material-ui/core';
+import React, { useEffect } from 'react';
+import { useRouteRef, useApi } from '@backstage/core-plugin-api';
+import { useEntityPresentation } from '@backstage/plugin-catalog-react';
+import { entityRouteRef } from '../../routes.esm.js';
+import { qetaApiRef } from '../../api.esm.js';
+import { useTranslation, useEntityFollow } from '../../utils/hooks.esm.js';
+
+const cache = /* @__PURE__ */ new Map();
+const EntityTooltip = (props) => {
+  const { entity } = props;
+  const entityRef = typeof entity === "string" ? entity : stringifyEntityRef(entity);
+  const qetaApi = useApi(qetaApiRef);
+  const { primaryTitle } = useEntityPresentation(entity);
+  const { t } = useTranslation();
+  const entitiesFollow = useEntityFollow();
+  const [resp, setResp] = React.useState();
+  useEffect(() => {
+    if (cache.has(entityRef)) {
+      setResp(cache.get(entityRef));
+      return;
+    }
+    qetaApi.getEntity(entityRef).then((res) => {
+      if (res) {
+        cache.set(entityRef, res);
+        setResp(res);
+      }
+    });
+  }, [qetaApi, entityRef]);
+  if (!resp) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, style: { padding: "0.5rem" }, spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, primaryTitle)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, t("common.posts", { count: resp.postsCount, itemType: "post" }), " \xB7 ", t("common.followers", { count: resp.followerCount }))), !entitiesFollow.loading && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      variant: "outlined",
+      color: entitiesFollow.isFollowingEntity(entityRef) ? "secondary" : "primary",
+      onClick: () => {
+        if (entitiesFollow.isFollowingEntity(entityRef)) {
+          entitiesFollow.followEntity(entityRef);
+        } else {
+          entitiesFollow.followEntity(entityRef);
+        }
+      }
+    },
+    entitiesFollow.isFollowingEntity(entityRef) ? t("entityButton.unfollow") : t("entityButton.follow")
+  )));
+};
+const EntityChip = (props) => {
+  const { entity } = props;
+  const entityRoute = useRouteRef(entityRouteRef);
+  const { primaryTitle } = useEntityPresentation(entity);
+  const entityRef = typeof entity === "string" ? entity : stringifyEntityRef(entity);
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ React.createElement(EntityTooltip, { entity }),
+      arrow: true,
+      interactive: true,
+      enterDelay: 400
+    },
+    /* @__PURE__ */ React.createElement(
+      Chip,
+      {
+        label: primaryTitle,
+        size: "small",
+        variant: "outlined",
+        className: "qetaEntityChip",
+        component: "a",
+        href: entityRoute({ entityRef }),
+        clickable: true
+      }
+    )
+  );
+};
+
+export { EntityChip };
+//# sourceMappingURL=EntityChip.esm.js.map

package/dist/components/TagsAndEntities/EntityChip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityChip.esm.js","sources":["../../../src/components/TagsAndEntities/EntityChip.tsx"],"sourcesContent":["import { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { Button, Chip, Grid, Tooltip, Typography } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { useEntityPresentation } from '@backstage/plugin-catalog-react';\nimport { entityRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { useTranslation } from '../../utils';\nimport { useEntityFollow } from '../../utils/hooks';\nimport { EntityResponse } from '@drodil/backstage-plugin-qeta-common';\n\nconst cache: Map<string, EntityResponse> = new Map();\n\nconst EntityTooltip = (props: { entity: Entity | string }) => {\n  const { entity } = props;\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  const qetaApi = useApi(qetaApiRef);\n  const { primaryTitle } = useEntityPresentation(entity);\n  const { t } = useTranslation();\n  const entitiesFollow = useEntityFollow();\n  const [resp, setResp] = React.useState<undefined | EntityResponse>();\n\n  useEffect(() => {\n    if (cache.has(entityRef)) {\n      setResp(cache.get(entityRef));\n      return;\n    }\n\n    qetaApi.getEntity(entityRef).then(res => {\n      if (res) {\n        cache.set(entityRef, res);\n        setResp(res);\n      }\n    });\n  }, [qetaApi, entityRef]);\n\n  if (!resp) {\n    return null;\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5rem' }} spacing={1}>\n      <Grid item xs={12}>\n        <Typography variant=\"h6\">{primaryTitle}</Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">\n          {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n          {' · '}\n          {t('common.followers', { count: resp.followerCount })}\n        </Typography>\n      </Grid>\n      {!entitiesFollow.loading && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={\n              entitiesFollow.isFollowingEntity(entityRef)\n                ? 'secondary'\n                : 'primary'\n            }\n            onClick={() => {\n              if (entitiesFollow.isFollowingEntity(entityRef)) {\n                entitiesFollow.followEntity(entityRef);\n              } else {\n                entitiesFollow.followEntity(entityRef);\n              }\n            }}\n          >\n            {entitiesFollow.isFollowingEntity(entityRef)\n              ? t('entityButton.unfollow')\n              : t('entityButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const EntityChip = (props: { entity: Entity | string }) => {\n  const { entity } = props;\n  const entityRoute = useRouteRef(entityRouteRef);\n  const { primaryTitle } = useEntityPresentation(entity);\n  const entityRef =\n    typeof entity === 'string' ? entity : stringifyEntityRef(entity);\n  return (\n    <Tooltip\n      title={<EntityTooltip entity={entity} />}\n      arrow\n      interactive\n      enterDelay={400}\n    >\n      <Chip\n        label={primaryTitle}\n        size=\"small\"\n        variant=\"outlined\"\n        className=\"qetaEntityChip\"\n        component=\"a\"\n        href={entityRoute({ entityRef })}\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TagsAndEntities/TagChip.esm.js

@@ -0,0 +1,78 @@
+import { Tooltip, Chip, Grid, Typography, Button } from '@material-ui/core';
+import React, { useEffect } from 'react';
+import { useRouteRef, useApi } from '@backstage/core-plugin-api';
+import { tagRouteRef } from '../../routes.esm.js';
+import { qetaApiRef } from '../../api.esm.js';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation, useTagsFollow } from '../../utils/hooks.esm.js';
+import { MarkdownRenderer } from '../MarkdownRenderer/MarkdownRenderer.esm.js';
+
+const cache = /* @__PURE__ */ new Map();
+const TagTooltip = (props) => {
+  const { tag } = props;
+  const qetaApi = useApi(qetaApiRef);
+  const { t } = useTranslation();
+  const tags = useTagsFollow();
+  const [resp, setResp] = React.useState();
+  useEffect(() => {
+    if (cache.has(tag)) {
+      setResp(cache.get(tag));
+      return;
+    }
+    qetaApi.getTag(tag).then((res) => {
+      if (res) {
+        cache.set(tag, res);
+        setResp(res);
+      }
+    });
+  }, [qetaApi, tag]);
+  if (!resp) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Grid, { container: true, style: { padding: "0.5rem" }, spacing: 1 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, tag)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Typography, { variant: "subtitle2" }, t("common.posts", { count: resp.postsCount, itemType: "post" }), " \xB7 ", t("common.followers", { count: resp.followerCount }))), resp.description && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(MarkdownRenderer, { content: resp.description })), !tags.loading && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "small",
+      variant: "outlined",
+      color: tags.isFollowingTag(tag) ? "secondary" : "primary",
+      onClick: () => {
+        if (tags.isFollowingTag(tag)) {
+          tags.unfollowTag(tag);
+        } else {
+          tags.followTag(tag);
+        }
+      }
+    },
+    tags.isFollowingTag(tag) ? t("tagButton.unfollow") : t("tagButton.follow")
+  )));
+};
+const TagChip = (props) => {
+  const tagRoute = useRouteRef(tagRouteRef);
+  const navigate = useNavigate();
+  const { tag } = props;
+  return /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      arrow: true,
+      title: /* @__PURE__ */ React.createElement(TagTooltip, { tag }),
+      interactive: true,
+      enterDelay: 400
+    },
+    /* @__PURE__ */ React.createElement(
+      Chip,
+      {
+        label: tag,
+        size: "small",
+        className: "qetaTagChip",
+        component: "a",
+        onClick: () => {
+          navigate(tagRoute({ tag }));
+        },
+        clickable: true
+      }
+    )
+  );
+};
+
+export { TagChip };
+//# sourceMappingURL=TagChip.esm.js.map

package/dist/components/TagsAndEntities/TagChip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagChip.esm.js","sources":["../../../src/components/TagsAndEntities/TagChip.tsx"],"sourcesContent":["import { Button, Chip, Grid, Tooltip, Typography } from '@material-ui/core';\nimport React, { useEffect } from 'react';\nimport { useApi, useRouteRef } from '@backstage/core-plugin-api';\nimport { tagRouteRef } from '../../routes';\nimport { qetaApiRef } from '../../api';\nimport { TagResponse } from '@drodil/backstage-plugin-qeta-common';\nimport { useNavigate } from 'react-router-dom';\nimport { useTranslation } from '../../utils';\nimport { useTagsFollow } from '../../utils/hooks';\nimport { MarkdownRenderer } from '../MarkdownRenderer';\n\nconst cache: Map<string, TagResponse> = new Map();\n\nconst TagTooltip = (props: { tag: string }) => {\n  const { tag } = props;\n  const qetaApi = useApi(qetaApiRef);\n  const { t } = useTranslation();\n  const tags = useTagsFollow();\n  const [resp, setResp] = React.useState<undefined | TagResponse>();\n\n  useEffect(() => {\n    if (cache.has(tag)) {\n      setResp(cache.get(tag));\n      return;\n    }\n\n    qetaApi.getTag(tag).then(res => {\n      if (res) {\n        cache.set(tag, res);\n        setResp(res);\n      }\n    });\n  }, [qetaApi, tag]);\n\n  if (!resp) {\n    return null;\n  }\n\n  return (\n    <Grid container style={{ padding: '0.5rem' }} spacing={1}>\n      <Grid item xs={12}>\n        <Typography variant=\"h6\">{tag}</Typography>\n      </Grid>\n      <Grid item xs={12}>\n        <Typography variant=\"subtitle2\">\n          {t('common.posts', { count: resp.postsCount, itemType: 'post' })}\n          {' · '}\n          {t('common.followers', { count: resp.followerCount })}\n        </Typography>\n      </Grid>\n      {resp.description && (\n        <Grid item xs={12}>\n          <MarkdownRenderer content={resp.description} />\n        </Grid>\n      )}\n      {!tags.loading && (\n        <Grid item xs={12}>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color={tags.isFollowingTag(tag) ? 'secondary' : 'primary'}\n            onClick={() => {\n              if (tags.isFollowingTag(tag)) {\n                tags.unfollowTag(tag);\n              } else {\n                tags.followTag(tag);\n              }\n            }}\n          >\n            {tags.isFollowingTag(tag)\n              ? t('tagButton.unfollow')\n              : t('tagButton.follow')}\n          </Button>\n        </Grid>\n      )}\n    </Grid>\n  );\n};\n\nexport const TagChip = (props: { tag: string }) => {\n  const tagRoute = useRouteRef(tagRouteRef);\n  const navigate = useNavigate();\n  const { tag } = props;\n  return (\n    <Tooltip\n      arrow\n      title={<TagTooltip tag={tag} />}\n      interactive\n      enterDelay={400}\n    >\n      <Chip\n        label={tag}\n        size=\"small\"\n        className=\"qetaTagChip\"\n        component=\"a\"\n        onClick={() => {\n          navigate(tagRoute({ tag }));\n        }}\n        clickable\n      />\n    </Tooltip>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/TagsAndEntities/TagsAndEntities.esm.js

@@ -0,0 +1,32 @@
+import { useApi } from '@backstage/core-plugin-api';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import React, { useEffect } from 'react';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { compact } from 'lodash';
+import { EntityChip } from './EntityChip.esm.js';
+import { TagChip } from './TagChip.esm.js';
+
+const TagsAndEntities = (props) => {
+  const { entity } = props;
+  const catalogApi = useApi(catalogApiRef);
+  const [entities, setEntities] = React.useState([]);
+  useEffect(() => {
+    if (entity.entities && entity.entities.length > 0) {
+      catalogApi.getEntitiesByRefs({
+        entityRefs: entity.entities,
+        fields: [
+          "kind",
+          "metadata.name",
+          "metadata.namespace",
+          "metadata.title"
+        ]
+      }).catch((_) => setEntities([])).then(
+        (data) => data ? setEntities(compact(data.items)) : setEntities([])
+      );
+    }
+  }, [catalogApi, entity]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, entity.tags && entity.tags.map((tag) => /* @__PURE__ */ React.createElement(TagChip, { key: tag, tag })), entities && entities.map((component) => /* @__PURE__ */ React.createElement(EntityChip, { entity: component, key: stringifyEntityRef(component) })));
+};
+
+export { TagsAndEntities };
+//# sourceMappingURL=TagsAndEntities.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagsAndEntities.esm.js","sources":["../../../src/components/TagsAndEntities/TagsAndEntities.tsx"],"sourcesContent":["import {\n  CollectionResponse,\n  PostResponse,\n} from '@drodil/backstage-plugin-qeta-common';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport React, { useEffect } from 'react';\nimport { Entity, stringifyEntityRef } from '@backstage/catalog-model';\nimport { compact } from 'lodash';\nimport { EntityChip } from './EntityChip';\nimport { TagChip } from './TagChip';\n\nexport const TagsAndEntities = (props: {\n  entity: PostResponse | CollectionResponse;\n}) => {\n  const { entity } = props;\n  const catalogApi = useApi(catalogApiRef);\n  const [entities, setEntities] = React.useState<Entity[]>([]);\n  useEffect(() => {\n    if (entity.entities && entity.entities.length > 0) {\n      catalogApi\n        .getEntitiesByRefs({\n          entityRefs: entity.entities,\n          fields: [\n            'kind',\n            'metadata.name',\n            'metadata.namespace',\n            'metadata.title',\n          ],\n        })\n        .catch(_ => setEntities([]))\n        .then(data =>\n          data ? setEntities(compact(data.items)) : setEntities([]),\n        );\n    }\n  }, [catalogApi, entity]);\n\n  return (\n    <>\n      {entity.tags && entity.tags.map(tag => <TagChip key={tag} tag={tag} />)}\n      {entities &&\n        entities.map(component => (\n          <EntityChip entity={component} key={stringifyEntityRef(component)} />\n        ))}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,eAAA,GAAkB,CAAC,KAE1B,KAAA;AACJ,EAAM,MAAA,EAAE,QAAW,GAAA,KAAA,CAAA;AACnB,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,IAAI,KAAM,CAAA,QAAA,CAAmB,EAAE,CAAA,CAAA;AAC3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,MAAO,CAAA,QAAA,IAAY,MAAO,CAAA,QAAA,CAAS,SAAS,CAAG,EAAA;AACjD,MAAA,UAAA,CACG,iBAAkB,CAAA;AAAA,QACjB,YAAY,MAAO,CAAA,QAAA;AAAA,QACnB,MAAQ,EAAA;AAAA,UACN,MAAA;AAAA,UACA,eAAA;AAAA,UACA,oBAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,OACD,EACA,KAAM,CAAA,CAAA,CAAA,KAAK,YAAY,EAAE,CAAC,CAC1B,CAAA,IAAA;AAAA,QAAK,CAAA,IAAA,KACJ,IAAO,GAAA,WAAA,CAAY,OAAQ,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA,GAAI,WAAY,CAAA,EAAE,CAAA;AAAA,OAC1D,CAAA;AAAA,KACJ;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,MAAM,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,MAAO,CAAA,IAAA,IAAQ,MAAO,CAAA,IAAA,CAAK,GAAI,CAAA,CAAA,GAAA,qBAAQ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,GAAK,EAAA,GAAA,EAAK,GAAU,EAAA,CAAE,CACrE,EAAA,QAAA,IACC,QAAS,CAAA,GAAA,CAAI,CACX,SAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,SAAW,EAAA,GAAA,EAAK,kBAAmB,CAAA,SAAS,CAAG,EAAA,CACpE,CACL,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/TagsGrid/EditTagModal.esm.js

@@ -0,0 +1,73 @@
+import { Modal, Backdrop, Box, Typography, Grid, TextField, Button } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React from 'react';
+import { useStyles, useTranslation } from '../../utils/hooks.esm.js';
+import { useApi } from '@backstage/core-plugin-api';
+import { qetaApiRef } from '../../api.esm.js';
+
+const EditTagModal = (props) => {
+  const { tag, open, onClose } = props;
+  const [description, setDescription] = React.useState(tag.description);
+  const styles = useStyles();
+  const { t } = useTranslation();
+  const [error, setError] = React.useState(false);
+  const qetaApi = useApi(qetaApiRef);
+  const handleUpdate = () => {
+    qetaApi.updateTag(tag.tag, description).then((ret) => {
+      if (ret) {
+        onClose();
+        return;
+      }
+      setError(true);
+    }).catch(() => {
+      setError(true);
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      open,
+      onClose,
+      className: "qetaEditTagModal",
+      "aria-labelledby": "modal-modal-title",
+      "aria-describedby": "modal-modal-description",
+      closeAfterTransition: true,
+      BackdropComponent: Backdrop,
+      BackdropProps: {
+        timeout: 500
+      }
+    },
+    /* @__PURE__ */ React.createElement(Box, { className: `qetaEditTagContent ${styles.deleteModal}` }, error && /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, t("editTagModal.errorPosting")), /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        id: "modal-modal-title",
+        className: "qetaEditTagModalTitle",
+        variant: "h6",
+        component: "h2"
+      },
+      t("editTagModal.title", { tag: tag.tag })
+    ), /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        variant: "outlined",
+        label: t("editTagModal.description"),
+        multiline: true,
+        minRows: 10,
+        style: { width: "100%" },
+        value: description,
+        onChange: (e) => setDescription(e.target.value)
+      }
+    ))), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleUpdate,
+        className: "qetaEditTagModalSaveBtn",
+        color: "secondary"
+      },
+      t("editTagModal.saveButton")
+    ), /* @__PURE__ */ React.createElement(Button, { onClick: onClose, className: "qetaEditTagModalCancelBtn" }, t("editTagModal.cancelButton")))
+  );
+};
+
+export { EditTagModal };
+//# sourceMappingURL=EditTagModal.esm.js.map