@flagsmith/backstage-plugin 0.1.0-pr.7.ffc27ed → 0.2.1

package/dist/components/FlagsTab/ExpandableRow.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { TableRow, TableCell, IconButton, Box, Typography, Collapse, CircularProgress, Grid } from '@material-ui/core';
+import { memo, useState } from 'react';
+import { TableRow, TableCell, IconButton, Box, Typography, Chip, Switch, Collapse, CircularProgress, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
@@ -9,8 +9,14 @@ import '../shared/SearchInput.esm.js';
 import { FlagsmithLink } from '../shared/FlagsmithLink.esm.js';
 import '@material-ui/icons/ChevronLeft';
 import '@material-ui/icons/ChevronRight';
+import '../shared/ChartTooltip.esm.js';
 import { buildFlagUrl } from '../../theme/flagsmithTheme.esm.js';
+import { switchOnStyle } from '../../theme/sharedStyles.esm.js';
+import { MAX_TABLE_ENVIRONMENTS, MAX_DISPLAY_TAGS, DESCRIPTION_TRUNCATE_LENGTH } from '../../constants/index.esm.js';
+import { truncateText, getErrorMessage } from '../../utils/flagTypeHelpers.esm.js';
+import { formatDate } from '../../utils/dateFormatters.esm.js';
 import { EnvironmentTable } from './EnvironmentTable.esm.js';
+import { FeatureAnalyticsSection } from './FeatureAnalyticsSection.esm.js';
 import { FeatureDetailsGrid } from './FeatureDetailsGrid.esm.js';
 import { SegmentOverridesSection } from './SegmentOverridesSection.esm.js';
 
@@ -21,111 +27,192 @@ const useStyles = makeStyles((theme) => ({
     gap: theme.spacing(0.5)
   },
   expandedContent: {
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing(2)
+    // No backgroundColor - inherit from parent table
+  },
+  expandedCell: {
+    paddingBottom: 0,
+    paddingTop: 0
+  },
+  clickableRow: {
+    cursor: "pointer"
+  },
+  tagChip: {
+    fontSize: "0.7rem",
+    height: 20,
+    marginRight: theme.spacing(0.5)
+  },
+  tagsCell: {
+    maxWidth: 200
+  },
+  switchOn: switchOnStyle,
+  loadingText: {
+    marginLeft: theme.spacing(1)
+  },
+  tagsContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 2
   }
 }));
-const ExpandableRow = ({
-  feature,
-  environments,
-  client,
-  projectId
-}) => {
-  const classes = useStyles();
-  const [open, setOpen] = useState(false);
-  const [details, setDetails] = useState(null);
-  const [loadingDetails, setLoadingDetails] = useState(false);
-  const [detailsError, setDetailsError] = useState(null);
-  const primaryEnvId = environments[0]?.id;
-  const handleToggle = async () => {
-    const newOpen = !open;
-    setOpen(newOpen);
-    if (newOpen && !details && !loadingDetails && primaryEnvId) {
-      setLoadingDetails(true);
-      setDetailsError(null);
-      try {
-        const featureDetails = await client.getFeatureDetails(
-          primaryEnvId,
-          feature.id
-        );
-        setDetails(featureDetails);
-      } catch (err) {
-        setDetailsError(
-          err instanceof Error ? err.message : "Failed to load details"
-        );
-      } finally {
-        setLoadingDetails(false);
-      }
-    }
-  };
-  const liveVersion = details?.liveVersion || feature.live_version;
-  const segmentOverrides = details?.segmentOverrides ?? feature.num_segment_overrides ?? 0;
-  const flagUrl = buildFlagUrl(
-    projectId,
-    primaryEnvId?.toString() || "",
-    feature.id
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(TableRow, { hover: true, children: [
-      /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          size: "small",
-          onClick: handleToggle,
-          "aria-label": open ? `Collapse ${feature.name}` : `Expand ${feature.name}`,
-          "aria-expanded": open,
-          children: open ? /* @__PURE__ */ jsx(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx(KeyboardArrowRight, {})
+const FIXED_COLUMNS_COUNT = 3;
+const TRAILING_COLUMNS_COUNT = 1;
+const ExpandableRow = memo(
+  ({ feature, environments, client, projectId, orgId }) => {
+    const classes = useStyles();
+    const [open, setOpen] = useState(false);
+    const [details, setDetails] = useState(null);
+    const [loadingDetails, setLoadingDetails] = useState(false);
+    const [detailsError, setDetailsError] = useState(null);
+    const primaryEnvId = environments[0]?.id;
+    const handleToggle = async () => {
+      const newOpen = !open;
+      setOpen(newOpen);
+      if (newOpen && !details && !loadingDetails && primaryEnvId) {
+        setLoadingDetails(true);
+        setDetailsError(null);
+        try {
+          const featureDetails = await client.getFeatureDetails(
+            primaryEnvId,
+            feature.id
+          );
+          setDetails(featureDetails);
+        } catch (err) {
+          setDetailsError(getErrorMessage(err, "Failed to load details"));
+        } finally {
+          setLoadingDetails(false);
         }
-      ) }),
-      /* @__PURE__ */ jsxs(TableCell, { children: [
-        /* @__PURE__ */ jsx(Box, { className: classes.flagName, children: /* @__PURE__ */ jsx(FlagsmithLink, { href: flagUrl, tooltip: "Open in Flagsmith", children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: feature.name }) }) }),
-        feature.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: feature.description.length > 60 ? `${feature.description.substring(0, 60)}...` : feature.description })
-      ] }),
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: feature.type || "FLAG" }) }),
-      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: new Date(feature.created_date).toLocaleDateString() }) })
-    ] }),
-    /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: 4, children: /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxs(Box, { className: classes.expandedContent, children: [
-      loadingDetails && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", p: 2, children: [
-        /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            variant: "body2",
-            color: "textSecondary",
-            style: { marginLeft: 8 },
-            children: "Loading feature details..."
-          }
-        )
-      ] }),
-      !loadingDetails && detailsError && /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", children: detailsError }),
-      !loadingDetails && !detailsError && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
-        /* @__PURE__ */ jsx(
-          FeatureDetailsGrid,
-          {
-            feature,
-            liveVersion,
-            segmentOverrides
-          }
-        ),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-          EnvironmentTable,
+      }
+    };
+    const liveVersion = details?.liveVersion || feature.live_version;
+    const scheduledVersion = details?.scheduledVersion || null;
+    const segmentOverrides = details?.segmentOverrides ?? feature.num_segment_overrides ?? 0;
+    const flagUrl = buildFlagUrl(
+      projectId,
+      primaryEnvId?.toString() || "",
+      feature.id
+    );
+    const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);
+    const tags = feature.tags || [];
+    const displayTags = tags.slice(0, MAX_DISPLAY_TAGS);
+    const remainingTagsCount = tags.length - MAX_DISPLAY_TAGS;
+    const totalColumns = FIXED_COLUMNS_COUNT + displayedEnvs.length + TRAILING_COLUMNS_COUNT;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(TableRow, { hover: true, className: classes.clickableRow, onClick: handleToggle, children: [
+        /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+          IconButton,
           {
-            feature,
-            environments
+            size: "small",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleToggle();
+            },
+            "aria-label": open ? `Collapse ${feature.name}` : `Expand ${feature.name}`,
+            "aria-expanded": open,
+            children: open ? /* @__PURE__ */ jsx(KeyboardArrowDown, {}) : /* @__PURE__ */ jsx(KeyboardArrowRight, {})
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
-          SegmentOverridesSection,
-          {
-            feature,
-            details,
-            liveVersion
-          }
-        ) })
-      ] })
-    ] }) }) }) })
-  ] });
-};
+        /* @__PURE__ */ jsxs(TableCell, { children: [
+          /* @__PURE__ */ jsx(Box, { className: classes.flagName, children: /* @__PURE__ */ jsx(
+            FlagsmithLink,
+            {
+              href: flagUrl,
+              tooltip: "Open in Flagsmith",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: feature.name })
+            }
+          ) }),
+          feature.description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: truncateText(feature.description, DESCRIPTION_TRUNCATE_LENGTH) })
+        ] }),
+        /* @__PURE__ */ jsx(TableCell, { className: classes.tagsCell, children: /* @__PURE__ */ jsxs(Box, { className: classes.tagsContainer, children: [
+          displayTags.map((tag, index) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: tag,
+              size: "small",
+              variant: "outlined",
+              className: classes.tagChip
+            },
+            index
+          )),
+          remainingTagsCount > 0 && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: `+${remainingTagsCount}`,
+              size: "small",
+              variant: "outlined",
+              className: classes.tagChip
+            }
+          )
+        ] }) }),
+        displayedEnvs.map((env) => {
+          const envState = feature.environment_state?.find((s) => s.id === env.id);
+          const enabled = envState?.enabled ?? feature.default_enabled ?? false;
+          return /* @__PURE__ */ jsx(TableCell, { align: "center", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: enabled,
+              size: "small",
+              disabled: true,
+              className: classes.switchOn
+            }
+          ) }, env.id);
+        }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatDate(feature.created_date) }) })
+      ] }),
+      /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { className: classes.expandedCell, colSpan: totalColumns, children: /* @__PURE__ */ jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsxs(Box, { className: classes.expandedContent, p: 2, children: [
+        loadingDetails && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", p: 2, children: [
+          /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              className: classes.loadingText,
+              children: "Loading feature details..."
+            }
+          )
+        ] }),
+        !loadingDetails && detailsError && /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", children: detailsError }),
+        !loadingDetails && !detailsError && /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+            FeatureAnalyticsSection,
+            {
+              client,
+              orgId,
+              projectId: parseInt(projectId, 10),
+              environments
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            FeatureDetailsGrid,
+            {
+              feature,
+              liveVersion,
+              segmentOverrides,
+              scheduledVersion
+            }
+          ),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+            EnvironmentTable,
+            {
+              feature,
+              environments
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+            SegmentOverridesSection,
+            {
+              feature,
+              details,
+              liveVersion
+            }
+          ) })
+        ] })
+      ] }) }) }) })
+    ] });
+  }
+);
+ExpandableRow.displayName = "ExpandableRow";
 
 export { ExpandableRow };
 //# sourceMappingURL=ExpandableRow.esm.js.map

package/dist/components/FlagsTab/ExpandableRow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableRow.esm.js","sources":["../../../src/components/FlagsTab/ExpandableRow.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Typography,\n  Box,\n  CircularProgress,\n  Grid,\n  TableCell,\n  TableRow,\n  IconButton,\n  Collapse,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\nimport {\n  FlagsmithClient,\n  FlagsmithEnvironment,\n  FlagsmithFeature,\n  FlagsmithFeatureDetails,\n} from '../../api/FlagsmithClient';\nimport { FlagsmithLink } from '../shared';\nimport { buildFlagUrl } from '../../theme/flagsmithTheme';\nimport { EnvironmentTable } from './EnvironmentTable';\nimport { FeatureDetailsGrid } from './FeatureDetailsGrid';\nimport { SegmentOverridesSection } from './SegmentOverridesSection';\n\nconst useStyles = makeStyles(theme => ({\n  flagName: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  },\n  expandedContent: {\n    backgroundColor: theme.palette.background.default,\n    padding: theme.spacing(2),\n  },\n}));\n\ninterface ExpandableRowProps {\n  feature: FlagsmithFeature;\n  environments: FlagsmithEnvironment[];\n  client: FlagsmithClient;\n  projectId: string;\n}\n\nexport const ExpandableRow = ({\n  feature,\n  environments,\n  client,\n  projectId,\n}: ExpandableRowProps) => {\n  const classes = useStyles();\n  const [open, setOpen] = useState(false);\n  const [details, setDetails] = useState<FlagsmithFeatureDetails | null>(null);\n  const [loadingDetails, setLoadingDetails] = useState(false);\n  const [detailsError, setDetailsError] = useState<string | null>(null);\n\n  const primaryEnvId = environments[0]?.id;\n\n  const handleToggle = async () => {\n    const newOpen = !open;\n    setOpen(newOpen);\n\n    if (newOpen && !details && !loadingDetails && primaryEnvId) {\n      setLoadingDetails(true);\n      setDetailsError(null);\n      try {\n        const featureDetails = await client.getFeatureDetails(\n          primaryEnvId,\n          feature.id,\n        );\n        setDetails(featureDetails);\n      } catch (err) {\n        setDetailsError(\n          err instanceof Error ? err.message : 'Failed to load details',\n        );\n      } finally {\n        setLoadingDetails(false);\n      }\n    }\n  };\n\n  const liveVersion = details?.liveVersion || feature.live_version;\n  const segmentOverrides =\n    details?.segmentOverrides ?? feature.num_segment_overrides ?? 0;\n  const flagUrl = buildFlagUrl(\n    projectId,\n    primaryEnvId?.toString() || '',\n    feature.id,\n  );\n\n  return (\n    <>\n      <TableRow hover>\n        <TableCell padding=\"checkbox\">\n          <IconButton\n            size=\"small\"\n            onClick={handleToggle}\n            aria-label={open ? `Collapse ${feature.name}` : `Expand ${feature.name}`}\n            aria-expanded={open}\n          >\n            {open ? <KeyboardArrowDown /> : <KeyboardArrowRight />}\n          </IconButton>\n        </TableCell>\n        <TableCell>\n          <Box className={classes.flagName}>\n            <FlagsmithLink href={flagUrl} tooltip=\"Open in Flagsmith\">\n              <Typography variant=\"subtitle2\">{feature.name}</Typography>\n            </FlagsmithLink>\n          </Box>\n          {feature.description && (\n            <Typography variant=\"body2\" color=\"textSecondary\">\n              {feature.description.length > 60\n                ? `${feature.description.substring(0, 60)}...`\n                : feature.description}\n            </Typography>\n          )}\n        </TableCell>\n        <TableCell>\n          <Typography variant=\"body2\">{feature.type || 'FLAG'}</Typography>\n        </TableCell>\n        <TableCell>\n          <Typography variant=\"body2\">\n            {new Date(feature.created_date).toLocaleDateString()}\n          </Typography>\n        </TableCell>\n      </TableRow>\n\n      <TableRow>\n        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={4}>\n          <Collapse in={open} timeout=\"auto\" unmountOnExit>\n            <Box className={classes.expandedContent}>\n              {loadingDetails && (\n                <Box display=\"flex\" alignItems=\"center\" p={2}>\n                  <CircularProgress size={20} />\n                  <Typography\n                    variant=\"body2\"\n                    color=\"textSecondary\"\n                    style={{ marginLeft: 8 }}\n                  >\n                    Loading feature details...\n                  </Typography>\n                </Box>\n              )}\n              {!loadingDetails && detailsError && (\n                <Typography color=\"error\" variant=\"body2\">\n                  {detailsError}\n                </Typography>\n              )}\n              {!loadingDetails && !detailsError && (\n                <Grid container spacing={2}>\n                  <FeatureDetailsGrid\n                    feature={feature}\n                    liveVersion={liveVersion}\n                    segmentOverrides={segmentOverrides}\n                  />\n\n                  <Grid item xs={12}>\n                    <EnvironmentTable\n                      feature={feature}\n                      environments={environments}\n                    />\n                  </Grid>\n\n                  <Grid item xs={12}>\n                    <SegmentOverridesSection\n                      feature={feature}\n                      details={details}\n                      liveVersion={liveVersion}\n                    />\n                  </Grid>\n                </Grid>\n              )}\n            </Box>\n          </Collapse>\n        </TableCell>\n      </TableRow>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpandableRow.esm.js","sources":["../../../src/components/FlagsTab/ExpandableRow.tsx"],"sourcesContent":["import { useState, memo } from 'react';\nimport {\n  Typography,\n  Box,\n  CircularProgress,\n  Grid,\n  TableCell,\n  TableRow,\n  IconButton,\n  Collapse,\n  Chip,\n  Switch,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';\nimport KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';\nimport {\n  FlagsmithClient,\n  FlagsmithEnvironment,\n  FlagsmithFeature,\n  FlagsmithFeatureDetails,\n} from '../../api/FlagsmithClient';\nimport { FlagsmithLink } from '../shared';\nimport { buildFlagUrl } from '../../theme/flagsmithTheme';\nimport { switchOnStyle } from '../../theme/sharedStyles';\nimport {\n  MAX_DISPLAY_TAGS,\n  MAX_TABLE_ENVIRONMENTS,\n  DESCRIPTION_TRUNCATE_LENGTH,\n} from '../../constants';\nimport { truncateText, getErrorMessage } from '../../utils/flagTypeHelpers';\nimport { formatDate } from '../../utils/dateFormatters';\nimport { EnvironmentTable } from './EnvironmentTable';\nimport { FeatureAnalyticsSection } from './FeatureAnalyticsSection';\nimport { FeatureDetailsGrid } from './FeatureDetailsGrid';\nimport { SegmentOverridesSection } from './SegmentOverridesSection';\n\nconst useStyles = makeStyles(theme => ({\n  flagName: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  },\n  expandedContent: {\n    // No backgroundColor - inherit from parent table\n  },\n  expandedCell: {\n    paddingBottom: 0,\n    paddingTop: 0,\n  },\n  clickableRow: {\n    cursor: 'pointer',\n  },\n  tagChip: {\n    fontSize: '0.7rem',\n    height: 20,\n    marginRight: theme.spacing(0.5),\n  },\n  tagsCell: {\n    maxWidth: 200,\n  },\n  switchOn: switchOnStyle,\n  loadingText: {\n    marginLeft: theme.spacing(1),\n  },\n  tagsContainer: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 2,\n  },\n}));\n\n/** Number of fixed columns before environment columns (checkbox, name, tags) */\nconst FIXED_COLUMNS_COUNT = 3;\n/** Number of fixed columns after environment columns (created date) */\nconst TRAILING_COLUMNS_COUNT = 1;\n\ninterface ExpandableRowProps {\n  feature: FlagsmithFeature;\n  environments: FlagsmithEnvironment[];\n  client: FlagsmithClient;\n  projectId: string;\n  orgId: number;\n}\n\nexport const ExpandableRow = memo(\n  ({ feature, environments, client, projectId, orgId }: ExpandableRowProps) => {\n    const classes = useStyles();\n    const [open, setOpen] = useState(false);\n    const [details, setDetails] = useState<FlagsmithFeatureDetails | null>(null);\n    const [loadingDetails, setLoadingDetails] = useState(false);\n    const [detailsError, setDetailsError] = useState<string | null>(null);\n\n    const primaryEnvId = environments[0]?.id;\n\n    const handleToggle = async () => {\n      const newOpen = !open;\n      setOpen(newOpen);\n\n      if (newOpen && !details && !loadingDetails && primaryEnvId) {\n        setLoadingDetails(true);\n        setDetailsError(null);\n        try {\n          const featureDetails = await client.getFeatureDetails(\n            primaryEnvId,\n            feature.id,\n          );\n          setDetails(featureDetails);\n        } catch (err) {\n          setDetailsError(getErrorMessage(err, 'Failed to load details'));\n        } finally {\n          setLoadingDetails(false);\n        }\n      }\n    };\n\n    const liveVersion = details?.liveVersion || feature.live_version;\n    const scheduledVersion = details?.scheduledVersion || null;\n    const segmentOverrides =\n      details?.segmentOverrides ?? feature.num_segment_overrides ?? 0;\n    const flagUrl = buildFlagUrl(\n      projectId,\n      primaryEnvId?.toString() || '',\n      feature.id,\n    );\n\n    const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);\n    const tags = feature.tags || [];\n    const displayTags = tags.slice(0, MAX_DISPLAY_TAGS);\n    const remainingTagsCount = tags.length - MAX_DISPLAY_TAGS;\n    const totalColumns =\n      FIXED_COLUMNS_COUNT + displayedEnvs.length + TRAILING_COLUMNS_COUNT;\n\n    return (\n      <>\n        <TableRow hover className={classes.clickableRow} onClick={handleToggle}>\n          <TableCell padding=\"checkbox\">\n            <IconButton\n              size=\"small\"\n              onClick={e => {\n                e.stopPropagation();\n                handleToggle();\n              }}\n              aria-label={open ? `Collapse ${feature.name}` : `Expand ${feature.name}`}\n              aria-expanded={open}\n            >\n              {open ? <KeyboardArrowDown /> : <KeyboardArrowRight />}\n            </IconButton>\n          </TableCell>\n          <TableCell>\n            <Box className={classes.flagName}>\n              <FlagsmithLink\n                href={flagUrl}\n                tooltip=\"Open in Flagsmith\"\n                onClick={e => e.stopPropagation()}\n              >\n                <Typography variant=\"subtitle2\">{feature.name}</Typography>\n              </FlagsmithLink>\n            </Box>\n            {feature.description && (\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                {truncateText(feature.description, DESCRIPTION_TRUNCATE_LENGTH)}\n              </Typography>\n            )}\n          </TableCell>\n          <TableCell className={classes.tagsCell}>\n            <Box className={classes.tagsContainer}>\n              {displayTags.map((tag, index) => (\n                <Chip\n                  key={index}\n                  label={tag}\n                  size=\"small\"\n                  variant=\"outlined\"\n                  className={classes.tagChip}\n                />\n              ))}\n              {remainingTagsCount > 0 && (\n                <Chip\n                  label={`+${remainingTagsCount}`}\n                  size=\"small\"\n                  variant=\"outlined\"\n                  className={classes.tagChip}\n                />\n              )}\n            </Box>\n          </TableCell>\n          {displayedEnvs.map(env => {\n            const envState = feature.environment_state?.find(s => s.id === env.id);\n            const enabled = envState?.enabled ?? feature.default_enabled ?? false;\n            return (\n              <TableCell key={env.id} align=\"center\">\n                <Switch\n                  checked={enabled}\n                  size=\"small\"\n                  disabled\n                  className={classes.switchOn}\n                />\n              </TableCell>\n            );\n          })}\n          <TableCell>\n            <Typography variant=\"body2\">\n              {formatDate(feature.created_date)}\n            </Typography>\n          </TableCell>\n        </TableRow>\n\n        <TableRow>\n          <TableCell className={classes.expandedCell} colSpan={totalColumns}>\n            <Collapse in={open} timeout=\"auto\" unmountOnExit>\n              <Box className={classes.expandedContent} p={2}>\n                {loadingDetails && (\n                  <Box display=\"flex\" alignItems=\"center\" p={2}>\n                    <CircularProgress size={20} />\n                    <Typography\n                      variant=\"body2\"\n                      color=\"textSecondary\"\n                      className={classes.loadingText}\n                    >\n                      Loading feature details...\n                    </Typography>\n                  </Box>\n                )}\n                {!loadingDetails && detailsError && (\n                  <Typography color=\"error\" variant=\"body2\">\n                    {detailsError}\n                  </Typography>\n                )}\n                {!loadingDetails && !detailsError && (\n                  <Grid container spacing={2}>\n                    <Grid item xs={12}>\n                      <FeatureAnalyticsSection\n                        client={client}\n                        orgId={orgId}\n                        projectId={parseInt(projectId, 10)}\n                        environments={environments}\n                      />\n                    </Grid>\n\n                    <FeatureDetailsGrid\n                      feature={feature}\n                      liveVersion={liveVersion}\n                      segmentOverrides={segmentOverrides}\n                      scheduledVersion={scheduledVersion}\n                    />\n\n                    <Grid item xs={12}>\n                      <EnvironmentTable\n                        feature={feature}\n                        environments={environments}\n                      />\n                    </Grid>\n\n                    <Grid item xs={12}>\n                      <SegmentOverridesSection\n                        feature={feature}\n                        details={details}\n                        liveVersion={liveVersion}\n                      />\n                    </Grid>\n                  </Grid>\n                )}\n              </Box>\n            </Collapse>\n          </TableCell>\n        </TableRow>\n      </>\n    );\n  },\n);\n\nExpandableRow.displayName = 'ExpandableRow';\n"],"names":[],"mappings":"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"}

package/dist/components/FlagsTab/FeatureAnalyticsSection.esm.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { Box, Typography, CircularProgress } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line } from 'recharts';
+import { CHART_CONFIG, getEnvColor, MAX_TABLE_ENVIRONMENTS } from '../../constants/index.esm.js';
+import { getErrorMessage } from '../../utils/flagTypeHelpers.esm.js';
+import { formatShortDate } from '../../utils/dateFormatters.esm.js';
+import '../shared/FlagStatusIndicator.esm.js';
+import '../shared/SearchInput.esm.js';
+import '../shared/FlagsmithLink.esm.js';
+import '@material-ui/icons/ChevronLeft';
+import '@material-ui/icons/ChevronRight';
+import { ChartTooltip, ChartTooltipText } from '../shared/ChartTooltip.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    padding: theme.spacing(2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper
+  },
+  chartContainer: {
+    width: "100%",
+    height: CHART_CONFIG.HEIGHT,
+    marginTop: theme.spacing(1)
+  },
+  noData: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 150,
+    color: theme.palette.text.secondary
+  },
+  loading: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    height: 150
+  }
+}));
+const AnalyticsTooltip = ({ active, payload, label }) => {
+  return /* @__PURE__ */ jsx(ChartTooltip, { active, payload, label, children: (data, tooltipLabel) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ChartTooltipText, { variant: "subtitle2", fontWeight: 600, children: tooltipLabel }),
+    /* @__PURE__ */ jsx(Box, { mt: 1, children: data.map((entry, index) => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        mt: 0.25,
+        style: { gap: "4px" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                width: "8px",
+                height: "8px",
+                backgroundColor: entry.color,
+                borderRadius: "50%"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(ChartTooltipText, { children: [
+            entry.name,
+            ": ",
+            entry.value
+          ] })
+        ]
+      },
+      `item-${index}`
+    )) })
+  ] }) });
+};
+const transformUsageData = (usageByEnv) => {
+  const dataByDate = /* @__PURE__ */ new Map();
+  const envNames = [];
+  usageByEnv.forEach((data, envName) => {
+    envNames.push(envName);
+    data.forEach((item) => {
+      const date = formatShortDate(item.day);
+      if (!dataByDate.has(date)) {
+        dataByDate.set(date, { date });
+      }
+      const point = dataByDate.get(date);
+      point[envName] = item.flags ?? 0;
+    });
+  });
+  const sortedData = Array.from(dataByDate.values()).sort((a, b) => {
+    const dateA = new Date(a.date);
+    const dateB = new Date(b.date);
+    return dateA.getTime() - dateB.getTime();
+  });
+  return { chartData: sortedData, envNames };
+};
+const FeatureAnalyticsSection = ({
+  client,
+  orgId,
+  projectId,
+  environments
+}) => {
+  const classes = useStyles();
+  const [loading, setLoading] = useState(true);
+  const [chartData, setChartData] = useState([]);
+  const [envNames, setEnvNames] = useState([]);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const fetchUsageData = async () => {
+      if (!orgId || !projectId || environments.length === 0) {
+        setLoading(false);
+        return;
+      }
+      try {
+        setLoading(true);
+        setError(null);
+        const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);
+        const usageByEnv = await client.getUsageDataByEnvironments(
+          orgId,
+          projectId,
+          displayedEnvs
+        );
+        const { chartData: data, envNames: names } = transformUsageData(usageByEnv);
+        setChartData(data);
+        setEnvNames(names);
+      } catch (err) {
+        setError(getErrorMessage(err, "Failed to load analytics"));
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUsageData();
+  }, [client, orgId, projectId, environments]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Usage Analytics" }),
+      /* @__PURE__ */ jsxs(Box, { className: classes.loading, children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "Loading analytics..." })
+      ] })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Usage Analytics" }),
+      /* @__PURE__ */ jsx(Box, { className: classes.noData, children: /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "error", children: error }) })
+    ] });
+  }
+  if (chartData.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, { className: classes.container, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Usage Analytics (Last 30 Days)" }),
+    /* @__PURE__ */ jsx(Box, { className: classes.chartContainer, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data: chartData, margin: CHART_CONFIG.MARGIN, children: [
+      /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "date", fontSize: 12 }),
+      /* @__PURE__ */ jsx(YAxis, { fontSize: 12 }),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(AnalyticsTooltip, {}) }),
+      /* @__PURE__ */ jsx(Legend, {}),
+      envNames.map((envName, index) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "monotone",
+          dataKey: envName,
+          stroke: getEnvColor(envName, index),
+          strokeWidth: 2,
+          dot: false,
+          activeDot: { r: 4 }
+        },
+        envName
+      ))
+    ] }) }) })
+  ] });
+};
+
+export { FeatureAnalyticsSection };
+//# sourceMappingURL=FeatureAnalyticsSection.esm.js.map

package/dist/components/FlagsTab/FeatureAnalyticsSection.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureAnalyticsSection.esm.js","sources":["../../../src/components/FlagsTab/FeatureAnalyticsSection.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { Box, CircularProgress, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport {\n  LineChart,\n  Line,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  Legend,\n  ResponsiveContainer,\n} from 'recharts';\nimport {\n  FlagsmithClient,\n  FlagsmithEnvironment,\n  FlagsmithUsageData,\n} from '../../api/FlagsmithClient';\nimport {\n  CHART_CONFIG,\n  MAX_TABLE_ENVIRONMENTS,\n  getEnvColor,\n} from '../../constants';\nimport { getErrorMessage } from '../../utils/flagTypeHelpers';\nimport { formatShortDate } from '../../utils/dateFormatters';\nimport { ChartTooltip, ChartTooltipText } from '../shared';\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    padding: theme.spacing(2),\n    border: `1px solid ${theme.palette.divider}`,\n    borderRadius: theme.shape.borderRadius,\n    backgroundColor: theme.palette.background.paper,\n  },\n  chartContainer: {\n    width: '100%',\n    height: CHART_CONFIG.HEIGHT,\n    marginTop: theme.spacing(1),\n  },\n  noData: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: 150,\n    color: theme.palette.text.secondary,\n  },\n  loading: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n    height: 150,\n  },\n}));\n\ninterface ChartDataPoint {\n  date: string;\n  [envName: string]: number | string;\n}\n\n/**\n * Custom tooltip component for analytics chart\n */\nconst AnalyticsTooltip = ({ active, payload, label }: any) => {\n  return (\n    <ChartTooltip active={active} payload={payload} label={label}>\n      {(data, tooltipLabel) => (\n        <>\n          <ChartTooltipText variant=\"subtitle2\" fontWeight={600}>\n            {tooltipLabel}\n          </ChartTooltipText>\n          <Box mt={1}>\n            {data.map((entry: any, index: number) => (\n              <Box\n                key={`item-${index}`}\n                display=\"flex\"\n                alignItems=\"center\"\n                mt={0.25}\n                style={{ gap: '4px' }}\n              >\n                <span\n                  style={{\n                    display: 'inline-block',\n                    width: '8px',\n                    height: '8px',\n                    backgroundColor: entry.color,\n                    borderRadius: '50%',\n                  }}\n                />\n                <ChartTooltipText>\n                  {entry.name}: {entry.value}\n                </ChartTooltipText>\n              </Box>\n            ))}\n          </Box>\n        </>\n      )}\n    </ChartTooltip>\n  );\n};\n\ninterface FeatureAnalyticsSectionProps {\n  client: FlagsmithClient;\n  orgId: number;\n  projectId: number;\n  environments: FlagsmithEnvironment[];\n}\n\n/**\n * Transform usage data by environment into chart-friendly format\n */\nconst transformUsageData = (\n  usageByEnv: Map<string, FlagsmithUsageData[]>,\n): { chartData: ChartDataPoint[]; envNames: string[] } => {\n  const dataByDate = new Map<string, ChartDataPoint>();\n  const envNames: string[] = [];\n\n  usageByEnv.forEach((data: FlagsmithUsageData[], envName: string) => {\n    envNames.push(envName);\n    data.forEach(item => {\n      const date = formatShortDate(item.day);\n      if (!dataByDate.has(date)) {\n        dataByDate.set(date, { date });\n      }\n      const point = dataByDate.get(date)!;\n      point[envName] = item.flags ?? 0;\n    });\n  });\n\n  const sortedData = Array.from(dataByDate.values()).sort((a, b) => {\n    const dateA = new Date(a.date);\n    const dateB = new Date(b.date);\n    return dateA.getTime() - dateB.getTime();\n  });\n\n  return { chartData: sortedData, envNames };\n};\n\nexport const FeatureAnalyticsSection = ({\n  client,\n  orgId,\n  projectId,\n  environments,\n}: FeatureAnalyticsSectionProps) => {\n  const classes = useStyles();\n  const [loading, setLoading] = useState(true);\n  const [chartData, setChartData] = useState<ChartDataPoint[]>([]);\n  const [envNames, setEnvNames] = useState<string[]>([]);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const fetchUsageData = async () => {\n      if (!orgId || !projectId || environments.length === 0) {\n        setLoading(false);\n        return;\n      }\n\n      try {\n        setLoading(true);\n        setError(null);\n\n        const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);\n\n        const usageByEnv = await client.getUsageDataByEnvironments(\n          orgId,\n          projectId,\n          displayedEnvs,\n        );\n\n        const { chartData: data, envNames: names } = transformUsageData(usageByEnv);\n        setChartData(data);\n        setEnvNames(names);\n      } catch (err) {\n        setError(getErrorMessage(err, 'Failed to load analytics'));\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchUsageData();\n  }, [client, orgId, projectId, environments]);\n\n  if (loading) {\n    return (\n      <Box className={classes.container}>\n        <Typography variant=\"subtitle2\" gutterBottom>\n          Usage Analytics\n        </Typography>\n        <Box className={classes.loading}>\n          <CircularProgress size={20} />\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            Loading analytics...\n          </Typography>\n        </Box>\n      </Box>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box className={classes.container}>\n        <Typography variant=\"subtitle2\" gutterBottom>\n          Usage Analytics\n        </Typography>\n        <Box className={classes.noData}>\n          <Typography variant=\"body2\" color=\"error\">\n            {error}\n          </Typography>\n        </Box>\n      </Box>\n    );\n  }\n\n  if (chartData.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box className={classes.container}>\n      <Typography variant=\"subtitle2\" gutterBottom>\n        Usage Analytics (Last 30 Days)\n      </Typography>\n      <Box className={classes.chartContainer}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={chartData} margin={CHART_CONFIG.MARGIN}>\n            <CartesianGrid strokeDasharray=\"3 3\" />\n            <XAxis dataKey=\"date\" fontSize={12} />\n            <YAxis fontSize={12} />\n            <Tooltip content={<AnalyticsTooltip />} />\n            <Legend />\n            {envNames.map((envName, index) => (\n              <Line\n                key={envName}\n                type=\"monotone\"\n                dataKey={envName}\n                stroke={getEnvColor(envName, index)}\n                strokeWidth={2}\n                dot={false}\n                activeDot={{ r: 4 }}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}