@flagsmith/backstage-plugin 0.1.0-pr.7.3135fb9

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentTable.esm.js","sources":["../../../src/components/FlagsTab/EnvironmentTable.tsx"],"sourcesContent":["import {\n  Box,\n  Chip,\n  Switch,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagsmithEnvironment, FlagsmithFeature } from '../../api/FlagsmithClient';\nimport { switchOnStyle } from '../../theme/sharedStyles';\nimport { MAX_DETAIL_ENVIRONMENTS } from '../../constants';\nimport { isDefined } from '../../utils/flagTypeHelpers';\nimport { formatDate } from '../../utils/dateFormatters';\n\nconst useStyles = makeStyles(theme => ({\n  envTable: {\n    marginTop: theme.spacing(1),\n    '& th, & td': {\n      padding: theme.spacing(1, 1.5),\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    },\n    '& th': {\n      fontWeight: 600,\n      fontSize: '0.75rem',\n      color: theme.palette.text.secondary,\n      textTransform: 'uppercase',\n    },\n  },\n  switchOn: switchOnStyle,\n  envBadge: {\n    fontSize: '0.7rem',\n    height: 18,\n    marginRight: theme.spacing(0.5),\n    marginTop: theme.spacing(0.5),\n  },\n  valueCell: {\n    fontFamily: 'monospace',\n    fontSize: '0.85rem',\n    color: theme.palette.text.primary,\n  },\n  envName: {\n    fontWeight: 500,\n  },\n  overridesContainer: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 4,\n  },\n  hiddenEnvsMessage: {\n    marginTop: theme.spacing(1),\n  },\n}));\n\ninterface EnvironmentTableProps {\n  feature: FlagsmithFeature;\n  environments: FlagsmithEnvironment[];\n}\n\n/**\n * Format override count with proper pluralization\n */\nconst formatOverrideLabel = (count: number, singular: string, plural: string): string => {\n  return `${count} ${count > 1 ? plural : singular}`;\n};\n\nexport const EnvironmentTable = ({\n  feature,\n  environments,\n}: EnvironmentTableProps) => {\n  const classes = useStyles();\n  const displayedEnvironments = environments.slice(0, MAX_DETAIL_ENVIRONMENTS);\n  const hiddenCount = environments.length - MAX_DETAIL_ENVIRONMENTS;\n\n  // Check if any environment uses v2 versioning\n  const hasVersioning = displayedEnvironments.some(env => env.use_v2_feature_versioning);\n\n  return (\n    <>\n      <Table size=\"small\" className={classes.envTable}>\n        <TableHead>\n          <TableRow>\n            <TableCell>Environment</TableCell>\n            <TableCell>Status</TableCell>\n            <TableCell>Value</TableCell>\n            <TableCell>Overrides</TableCell>\n            {hasVersioning && <TableCell>Version</TableCell>}\n            <TableCell>Last updated</TableCell>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {displayedEnvironments.map(env => {\n            const envState = feature.environment_state?.find(s => s.id === env.id);\n            const enabled = envState?.enabled ?? feature.default_enabled ?? false;\n            const segmentCount = feature.num_segment_overrides ?? 0;\n            const identityCount = feature.num_identity_overrides ?? 0;\n            const value = feature.type === 'CONFIG' ? feature.initial_value : null;\n            const hasOverrides = segmentCount > 0 || identityCount > 0;\n\n            return (\n              <TableRow key={env.id}>\n                <TableCell>\n                  <Typography variant=\"body2\" className={classes.envName}>\n                    {env.name}\n                  </Typography>\n                </TableCell>\n                <TableCell>\n                  <Switch\n                    checked={enabled}\n                    size=\"small\"\n                    disabled\n                    className={classes.switchOn}\n                  />\n                </TableCell>\n                <TableCell>\n                  <Typography variant=\"body2\" className={classes.valueCell}>\n                    {isDefined(value) ? `\"${value}\"` : '-'}\n                  </Typography>\n                </TableCell>\n                <TableCell>\n                  <Box className={classes.overridesContainer}>\n                    {segmentCount > 0 && (\n                      <Chip\n                        label={formatOverrideLabel(segmentCount, 'segment', 'segments')}\n                        size=\"small\"\n                        variant=\"outlined\"\n                        className={classes.envBadge}\n                      />\n                    )}\n                    {identityCount > 0 && (\n                      <Chip\n                        label={formatOverrideLabel(identityCount, 'identity', 'identities')}\n                        size=\"small\"\n                        variant=\"outlined\"\n                        className={classes.envBadge}\n                      />\n                    )}\n                    {!hasOverrides && (\n                      <Typography variant=\"body2\" color=\"textSecondary\">\n                        -\n                      </Typography>\n                    )}\n                  </Box>\n                </TableCell>\n                {hasVersioning && (\n                  <TableCell>\n                    <Typography variant=\"body2\" color=\"textSecondary\">\n                      {env.use_v2_feature_versioning ? 'v2' : 'v1'}\n                    </Typography>\n                  </TableCell>\n                )}\n                <TableCell>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                    {formatDate(feature.created_date)}\n                  </Typography>\n                </TableCell>\n              </TableRow>\n            );\n          })}\n        </TableBody>\n      </Table>\n      {hiddenCount > 0 && (\n        <Box className={classes.hiddenEnvsMessage}>\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            +{hiddenCount} more environment{hiddenCount > 1 ? 's' : ''} not shown\n          </Typography>\n        </Box>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,218 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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';
+import '../shared/FlagStatusIndicator.esm.js';
+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';
+
+const useStyles = makeStyles((theme) => ({
+  flagName: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  },
+  expandedContent: {
+    // 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 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);
+        }
+      }
+    };
+    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,
+          {
+            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__ */ 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

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,GACxB;AAAA,EACA,eAAA,EAAiB;AAAA;AAAA,GAEjB;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,aAAA,EAAe,CAAA;AAAA,IACf,UAAA,EAAY;AAAA,GACd;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,QAAA;AAAA,IACV,MAAA,EAAQ,EAAA;AAAA,IACR,WAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA,GAChC;AAAA,EACA,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa;AAAA,IACX,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA,GAC7B;AAAA,EACA,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,GAAA,EAAK;AAAA;AAET,CAAA,CAAE,CAAA;AAGF,MAAM,mBAAA,GAAsB,CAAA;AAE5B,MAAM,sBAAA,GAAyB,CAAA;AAUxB,MAAM,aAAA,GAAgB,IAAA;AAAA,EAC3B,CAAC,EAAE,OAAA,EAAS,cAAc,MAAA,EAAQ,SAAA,EAAW,OAAM,KAA0B;AAC3E,IAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAyC,IAAI,CAAA;AAC3E,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC1D,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAwB,IAAI,CAAA;AAEpE,IAAA,MAAM,YAAA,GAAe,YAAA,CAAa,CAAC,CAAA,EAAG,EAAA;AAEtC,IAAA,MAAM,eAAe,YAAY;AAC/B,MAAA,MAAM,UAAU,CAAC,IAAA;AACjB,MAAA,OAAA,CAAQ,OAAO,CAAA;AAEf,MAAA,IAAI,OAAA,IAAW,CAAC,OAAA,IAAW,CAAC,kBAAkB,YAAA,EAAc;AAC1D,QAAA,iBAAA,CAAkB,IAAI,CAAA;AACtB,QAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,QAAA,IAAI;AACF,UAAA,MAAM,cAAA,GAAiB,MAAM,MAAA,CAAO,iBAAA;AAAA,YAClC,YAAA;AAAA,YACA,OAAA,CAAQ;AAAA,WACV;AACA,UAAA,UAAA,CAAW,cAAc,CAAA;AAAA,QAC3B,SAAS,GAAA,EAAK;AACZ,UAAA,eAAA,CAAgB,eAAA,CAAgB,GAAA,EAAK,wBAAwB,CAAC,CAAA;AAAA,QAChE,CAAA,SAAE;AACA,UAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,QACzB;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,OAAA,EAAS,WAAA,IAAe,OAAA,CAAQ,YAAA;AACpD,IAAA,MAAM,gBAAA,GAAmB,SAAS,gBAAA,IAAoB,IAAA;AACtD,IAAA,MAAM,gBAAA,GACJ,OAAA,EAAS,gBAAA,IAAoB,OAAA,CAAQ,qBAAA,IAAyB,CAAA;AAChE,IAAA,MAAM,OAAA,GAAU,YAAA;AAAA,MACd,SAAA;AAAA,MACA,YAAA,EAAc,UAAS,IAAK,EAAA;AAAA,MAC5B,OAAA,CAAQ;AAAA,KACV;AAEA,IAAA,MAAM,aAAA,GAAgB,YAAA,CAAa,KAAA,CAAM,CAAA,EAAG,sBAAsB,CAAA;AAClE,IAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,IAAA,IAAQ,EAAC;AAC9B,IAAA,MAAM,WAAA,GAAc,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,gBAAgB,CAAA;AAClD,IAAA,MAAM,kBAAA,GAAqB,KAAK,MAAA,GAAS,gBAAA;AACzC,IAAA,MAAM,YAAA,GACJ,mBAAA,GAAsB,aAAA,CAAc,MAAA,GAAS,sBAAA;AAE/C,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,YAAS,KAAA,EAAK,IAAA,EAAC,WAAW,OAAA,CAAQ,YAAA,EAAc,SAAS,YAAA,EACxD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,SAAQ,UAAA,EACjB,QAAA,kBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,OAAA;AAAA,YACL,SAAS,CAAA,CAAA,KAAK;AACZ,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,YAAA,EAAa;AAAA,YACf,CAAA;AAAA,YACA,YAAA,EAAY,OAAO,CAAA,SAAA,EAAY,OAAA,CAAQ,IAAI,CAAA,CAAA,GAAK,CAAA,OAAA,EAAU,QAAQ,IAAI,CAAA,CAAA;AAAA,YACtE,eAAA,EAAe,IAAA;AAAA,YAEd,QAAA,EAAA,IAAA,mBAAO,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA,uBAAM,kBAAA,EAAA,EAAmB;AAAA;AAAA,SACtD,EACF,CAAA;AAAA,6BACC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,OAAA;AAAA,cACN,OAAA,EAAQ,mBAAA;AAAA,cACR,OAAA,EAAS,CAAA,CAAA,KAAK,CAAA,CAAE,eAAA,EAAgB;AAAA,cAEhC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAa,kBAAQ,IAAA,EAAK;AAAA;AAAA,WAChD,EACF,CAAA;AAAA,UACC,OAAA,CAAQ,WAAA,oBACP,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,eAAA,EAC/B,QAAA,EAAA,YAAA,CAAa,OAAA,CAAQ,WAAA,EAAa,2BAA2B,CAAA,EAChE;AAAA,SAAA,EAEJ,CAAA;AAAA,wBACA,GAAA,CAAC,aAAU,SAAA,EAAW,OAAA,CAAQ,UAC5B,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,aAAA,EACrB,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,qBACrB,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cAEC,KAAA,EAAO,GAAA;AAAA,cACP,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAQ,UAAA;AAAA,cACR,WAAW,OAAA,CAAQ;AAAA,aAAA;AAAA,YAJd;AAAA,WAMR,CAAA;AAAA,UACA,qBAAqB,CAAA,oBACpB,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,IAAI,kBAAkB,CAAA,CAAA;AAAA,cAC7B,IAAA,EAAK,OAAA;AAAA,cACL,OAAA,EAAQ,UAAA;AAAA,cACR,WAAW,OAAA,CAAQ;AAAA;AAAA;AACrB,SAAA,EAEJ,CAAA,EACF,CAAA;AAAA,QACC,aAAA,CAAc,IAAI,CAAA,GAAA,KAAO;AACxB,UAAA,MAAM,QAAA,GAAW,QAAQ,iBAAA,EAAmB,IAAA,CAAK,OAAK,CAAA,CAAE,EAAA,KAAO,IAAI,EAAE,CAAA;AACrE,UAAA,MAAM,OAAA,GAAU,QAAA,EAAU,OAAA,IAAW,OAAA,CAAQ,eAAA,IAAmB,KAAA;AAChE,UAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAuB,KAAA,EAAM,QAAA,EAC5B,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,OAAA;AAAA,cACT,IAAA,EAAK,OAAA;AAAA,cACL,QAAA,EAAQ,IAAA;AAAA,cACR,WAAW,OAAA,CAAQ;AAAA;AAAA,WACrB,EAAA,EANc,IAAI,EAOpB,CAAA;AAAA,QAEJ,CAAC,CAAA;AAAA,wBACD,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SACjB,QAAA,EAAA,UAAA,CAAW,OAAA,CAAQ,YAAY,CAAA,EAClC,CAAA,EACF;AAAA,OAAA,EACF,CAAA;AAAA,sBAEA,GAAA,CAAC,YACC,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,WAAW,OAAA,CAAQ,YAAA,EAAc,OAAA,EAAS,YAAA,EACnD,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAI,IAAA,EAAM,OAAA,EAAQ,MAAA,EAAO,aAAA,EAAa,IAAA,EAC9C,QAAA,kBAAA,IAAA,CAAC,OAAI,SAAA,EAAW,OAAA,CAAQ,eAAA,EAAiB,CAAA,EAAG,CAAA,EACzC,QAAA,EAAA;AAAA,QAAA,cAAA,yBACE,GAAA,EAAA,EAAI,OAAA,EAAQ,QAAO,UAAA,EAAW,QAAA,EAAS,GAAG,CAAA,EACzC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,gBAAA,EAAA,EAAiB,MAAM,EAAA,EAAI,CAAA;AAAA,0BAC5B,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,eAAA;AAAA,cACN,WAAW,OAAA,CAAQ,WAAA;AAAA,cACpB,QAAA,EAAA;AAAA;AAAA;AAED,SAAA,EACF,CAAA;AAAA,QAED,CAAC,kBAAkB,YAAA,oBAClB,GAAA,CAAC,cAAW,KAAA,EAAM,OAAA,EAAQ,OAAA,EAAQ,OAAA,EAC/B,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,QAED,CAAC,kBAAkB,CAAC,YAAA,yBAClB,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,OAAA,EAAS,CAAA,EACvB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,EAAA,EAAI,EAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,uBAAA;AAAA,YAAA;AAAA,cACC,MAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAA,EAAW,QAAA,CAAS,SAAA,EAAW,EAAE,CAAA;AAAA,cACjC;AAAA;AAAA,WACF,EACF,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,WAAA;AAAA,cACA,gBAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,0BAEA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,IAAI,EAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA;AAAA;AAAA,WACF,EACF,CAAA;AAAA,0BAEA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAI,IAAA,EAAC,IAAI,EAAA,EACb,QAAA,kBAAA,GAAA;AAAA,YAAC,uBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,OAAA;AAAA,cACA;AAAA;AAAA,WACF,EACF;AAAA,SAAA,EACF;AAAA,OAAA,EAEJ,CAAA,EACF,GACF,CAAA,EACF;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}

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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"}

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

@@ -0,0 +1,160 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Grid, Box, Chip, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import ArchiveIcon from '@material-ui/icons/Archive';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import VpnKeyIcon from '@material-ui/icons/VpnKey';
+import { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+import { detailCardStyle } from '../../theme/sharedStyles.esm.js';
+import { getFlagType, getValueType, isDefined } from '../../utils/flagTypeHelpers.esm.js';
+import { formatDateTime, formatDate } from '../../utils/dateFormatters.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  detailCard: detailCardStyle(theme),
+  badgeChip: {
+    marginRight: theme.spacing(0.5),
+    marginTop: theme.spacing(0.5)
+  },
+  archivedChip: {
+    backgroundColor: theme.palette.warning.light,
+    color: theme.palette.warning.contrastText
+  },
+  serverKeyChip: {
+    backgroundColor: flagsmithColors.secondary,
+    color: "white"
+  },
+  scheduledCard: {
+    padding: theme.spacing(1.5),
+    marginBottom: theme.spacing(1),
+    border: `1px solid ${theme.palette.warning.main}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: `${theme.palette.warning.light}20`
+  },
+  scheduledHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    color: theme.palette.warning.dark
+  },
+  scheduleIcon: {
+    fontSize: "1.2rem",
+    color: theme.palette.warning.main
+  },
+  tagsContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 4
+  }
+}));
+const getCreatorDisplayName = (feature) => {
+  if (!feature.created_by) return "Unknown";
+  const { email, first_name, last_name } = feature.created_by;
+  if (email) return email;
+  const fullName = `${first_name || ""} ${last_name || ""}`.trim();
+  return fullName || "Unknown";
+};
+const FeatureDetailsGrid = ({
+  feature,
+  liveVersion,
+  segmentOverrides,
+  scheduledVersion
+}) => {
+  const classes = useStyles();
+  const flagType = getFlagType(feature);
+  const valueType = getValueType(feature);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (feature.is_server_key_only || feature.is_archived) && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Box, { display: "flex", flexWrap: "wrap", children: [
+      feature.is_server_key_only && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(VpnKeyIcon, {}),
+          label: "Server-side Only",
+          size: "small",
+          className: `${classes.badgeChip} ${classes.serverKeyChip}`
+        }
+      ),
+      feature.is_archived && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(ArchiveIcon, {}),
+          label: "Archived",
+          size: "small",
+          className: `${classes.badgeChip} ${classes.archivedChip}`
+        }
+      )
+    ] }) }),
+    scheduledVersion && scheduledVersion.live_from && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsxs(Box, { className: classes.scheduledCard, children: [
+      /* @__PURE__ */ jsxs(Box, { className: classes.scheduledHeader, children: [
+        /* @__PURE__ */ jsx(ScheduleIcon, { className: classes.scheduleIcon }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: "Scheduled Change" })
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Scheduled for: ",
+        formatDateTime(scheduledVersion.live_from)
+      ] }),
+      scheduledVersion.published_by && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+        "By: ",
+        scheduledVersion.published_by
+      ] })
+    ] }) }),
+    liveVersion && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsxs(Box, { className: classes.detailCard, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Version" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Status: ",
+        liveVersion.is_live ? "Active" : "Inactive"
+      ] }),
+      liveVersion.live_from && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Live since: ",
+        formatDate(liveVersion.live_from)
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsxs(Box, { className: classes.detailCard, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Targeting" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Segment overrides: ",
+        segmentOverrides
+      ] }),
+      isDefined(feature.num_identity_overrides) && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Identity overrides: ",
+        feature.num_identity_overrides
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsxs(Box, { className: classes.detailCard, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Details" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "ID: ",
+        feature.id
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Flag Type: ",
+        flagType
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Value Type: ",
+        valueType
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 4, children: /* @__PURE__ */ jsxs(Box, { className: classes.detailCard, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Ownership" }),
+      feature.created_by && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Creator: ",
+        getCreatorDisplayName(feature)
+      ] }),
+      feature.owners && feature.owners.length > 0 ? /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Assigned Users: ",
+        feature.owners.map((o) => o.email || o.name).join(", ")
+      ] }) : /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No assigned users" }),
+      feature.group_owners && feature.group_owners.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+        "Groups: ",
+        feature.group_owners.map((g) => g.name).join(", ")
+      ] })
+    ] }) }),
+    feature.tags && feature.tags.length > 0 && /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Tags" }),
+      /* @__PURE__ */ jsx(Box, { className: classes.tagsContainer, children: feature.tags.map((tag, index) => /* @__PURE__ */ jsx(Chip, { label: tag, size: "small", variant: "outlined" }, index)) })
+    ] })
+  ] });
+};
+
+export { FeatureDetailsGrid };
+//# sourceMappingURL=FeatureDetailsGrid.esm.js.map