@flagsmith/backstage-plugin 0.1.0-pr.7.a55a280

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

@@ -0,0 +1,131 @@
+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 { 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 { buildFlagUrl } from '../../theme/flagsmithTheme.esm.js';
+import { EnvironmentTable } from './EnvironmentTable.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: {
+    backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(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, {})
+        }
+      ) }),
+      /* @__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,
+          {
+            feature,
+            environments
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(
+          SegmentOverridesSection,
+          {
+            feature,
+            details,
+            liveVersion
+          }
+        ) })
+      ] })
+    ] }) }) }) })
+  ] });
+};
+
+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 } 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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"}

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

@@ -0,0 +1,84 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Grid, Box, Typography, Chip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  detailCard: {
+    padding: theme.spacing(1.5),
+    marginBottom: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius
+  }
+}));
+const FeatureDetailsGrid = ({
+  feature,
+  liveVersion,
+  segmentOverrides
+}) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    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: ",
+        new Date(liveVersion.live_from).toLocaleDateString()
+      ] })
+    ] }) }),
+    /* @__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
+      ] }),
+      feature.num_identity_overrides !== null && feature.num_identity_overrides !== void 0 && /* @__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: [
+        "Type: ",
+        feature.type || "Standard"
+      ] }),
+      feature.is_server_key_only && /* @__PURE__ */ jsx(
+        Chip,
+        {
+          label: "Server Key Only",
+          size: "small",
+          style: {
+            marginTop: 4,
+            backgroundColor: flagsmithColors.secondary,
+            color: "white"
+          }
+        }
+      )
+    ] }) }),
+    feature.tags && feature.tags.length > 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Box, { display: "flex", flexWrap: "wrap", style: { gap: 4 }, children: feature.tags.map((tag, index) => /* @__PURE__ */ jsx(
+      Chip,
+      {
+        label: tag,
+        size: "small",
+        variant: "outlined"
+      },
+      index
+    )) }) }),
+    feature.owners && feature.owners.length > 0 && /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+      "Owners:",
+      " ",
+      feature.owners.map((o) => o.email || `${o.name}`).join(", ")
+    ] }) })
+  ] });
+};
+
+export { FeatureDetailsGrid };
+//# sourceMappingURL=FeatureDetailsGrid.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureDetailsGrid.esm.js","sources":["../../../src/components/FlagsTab/FeatureDetailsGrid.tsx"],"sourcesContent":["import { Box, Chip, Grid, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagsmithFeature } from '../../api/FlagsmithClient';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\n\nconst useStyles = makeStyles(theme => ({\n  detailCard: {\n    padding: theme.spacing(1.5),\n    marginBottom: theme.spacing(1),\n    border: `1px solid ${theme.palette.divider}`,\n    borderRadius: theme.shape.borderRadius,\n  },\n}));\n\ntype LiveVersionInfo = FlagsmithFeature['live_version'];\n\ninterface FeatureDetailsGridProps {\n  feature: FlagsmithFeature;\n  liveVersion: LiveVersionInfo;\n  segmentOverrides: number;\n}\n\nexport const FeatureDetailsGrid = ({\n  feature,\n  liveVersion,\n  segmentOverrides,\n}: FeatureDetailsGridProps) => {\n  const classes = useStyles();\n\n  return (\n    <>\n      {liveVersion && (\n        <Grid item xs={12} md={4}>\n          <Box className={classes.detailCard}>\n            <Typography variant=\"subtitle2\" gutterBottom>\n              Version\n            </Typography>\n            <Typography variant=\"body2\">\n              Status: {liveVersion.is_live ? 'Active' : 'Inactive'}\n            </Typography>\n            {liveVersion.live_from && (\n              <Typography variant=\"body2\">\n                Live since: {new Date(liveVersion.live_from).toLocaleDateString()}\n              </Typography>\n            )}\n          </Box>\n        </Grid>\n      )}\n\n      <Grid item xs={12} md={4}>\n        <Box className={classes.detailCard}>\n          <Typography variant=\"subtitle2\" gutterBottom>\n            Targeting\n          </Typography>\n          <Typography variant=\"body2\">\n            Segment overrides: {segmentOverrides}\n          </Typography>\n          {feature.num_identity_overrides !== null &&\n            feature.num_identity_overrides !== undefined && (\n              <Typography variant=\"body2\">\n                Identity overrides: {feature.num_identity_overrides}\n              </Typography>\n            )}\n        </Box>\n      </Grid>\n\n      <Grid item xs={12} md={4}>\n        <Box className={classes.detailCard}>\n          <Typography variant=\"subtitle2\" gutterBottom>\n            Details\n          </Typography>\n          <Typography variant=\"body2\">ID: {feature.id}</Typography>\n          <Typography variant=\"body2\">\n            Type: {feature.type || 'Standard'}\n          </Typography>\n          {feature.is_server_key_only && (\n            <Chip\n              label=\"Server Key Only\"\n              size=\"small\"\n              style={{\n                marginTop: 4,\n                backgroundColor: flagsmithColors.secondary,\n                color: 'white',\n              }}\n            />\n          )}\n        </Box>\n      </Grid>\n\n      {feature.tags && feature.tags.length > 0 && (\n        <Grid item xs={12}>\n          <Box display=\"flex\" flexWrap=\"wrap\" style={{ gap: 4 }}>\n            {feature.tags.map((tag, index) => (\n              <Chip\n                key={index}\n                label={tag}\n                size=\"small\"\n                variant=\"outlined\"\n              />\n            ))}\n          </Box>\n        </Grid>\n      )}\n\n      {feature.owners && feature.owners.length > 0 && (\n        <Grid item xs={12}>\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            Owners:{' '}\n            {feature.owners.map(o => o.email || `${o.name}`).join(', ')}\n          </Typography>\n        </Grid>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,128 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Box, Typography, Collapse, Chip } 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 { FlagStatusIndicator } from '../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 { flagsmithColors } from '../../theme/flagsmithTheme.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  showMoreButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    cursor: "pointer",
+    color: theme.palette.primary.main,
+    fontSize: "0.875rem",
+    marginTop: theme.spacing(1),
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  },
+  showMoreContent: {
+    marginTop: theme.spacing(1.5),
+    padding: theme.spacing(1.5),
+    backgroundColor: theme.palette.type === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.02)",
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`
+  },
+  featureStateItem: {
+    padding: theme.spacing(1),
+    marginBottom: theme.spacing(0.5),
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${theme.palette.divider}`
+  },
+  segmentBadge: {
+    backgroundColor: flagsmithColors.warning,
+    color: "white",
+    fontSize: "0.7rem",
+    height: 20,
+    marginLeft: theme.spacing(1)
+  }
+}));
+const SegmentOverridesSection = ({
+  feature,
+  details,
+  liveVersion
+}) => {
+  const classes = useStyles();
+  const [showMoreOpen, setShowMoreOpen] = useState(false);
+  const segmentOverrides = details?.featureState?.filter((state) => state.feature_segment !== null) ?? [];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: classes.showMoreButton,
+        onClick: () => setShowMoreOpen(!showMoreOpen),
+        children: [
+          showMoreOpen ? /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRight, { fontSize: "small" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", component: "span", children: showMoreOpen ? "Hide additional details" : "Show additional details" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: showMoreOpen, timeout: "auto", children: /* @__PURE__ */ jsxs(Box, { className: classes.showMoreContent, children: [
+      /* @__PURE__ */ jsxs(Box, { mb: 1.5, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Published:" }),
+          " ",
+          liveVersion?.published ? "Yes" : "No",
+          liveVersion?.published_by && ` (by ${liveVersion.published_by})`
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Archived:" }),
+          " ",
+          feature.is_archived ? "Yes" : "No"
+        ] })
+      ] }),
+      details?.featureState && details.featureState.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Segment Overrides" }),
+        segmentOverrides.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", children: "No segment overrides configured." }) : segmentOverrides.map((state, index) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: classes.featureStateItem,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+                /* @__PURE__ */ jsx(FlagStatusIndicator, { enabled: state.enabled, size: "small" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", style: { marginLeft: 8 }, children: state.enabled ? "Enabled" : "Disabled" }),
+                state.feature_segment && /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: `Segment: ${state.feature_segment.segment} (Priority: ${state.feature_segment.priority})`,
+                    size: "small",
+                    className: classes.segmentBadge
+                  }
+                )
+              ] }),
+              state.feature_state_value && /* @__PURE__ */ jsxs(Box, { mt: 0.5, ml: 3, children: [
+                state.feature_state_value.string_value !== null && state.feature_state_value.string_value !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
+                  'Value: "',
+                  state.feature_state_value.string_value,
+                  '"'
+                ] }),
+                state.feature_state_value.integer_value !== null && state.feature_state_value.integer_value !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
+                  "Value: ",
+                  state.feature_state_value.integer_value
+                ] }),
+                state.feature_state_value.boolean_value !== null && state.feature_state_value.boolean_value !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
+                  "Value:",
+                  " ",
+                  String(state.feature_state_value.boolean_value)
+                ] })
+              ] })
+            ]
+          },
+          state.id || index
+        ))
+      ] })
+    ] }) })
+  ] });
+};
+
+export { SegmentOverridesSection };
+//# sourceMappingURL=SegmentOverridesSection.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentOverridesSection.esm.js","sources":["../../../src/components/FlagsTab/SegmentOverridesSection.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box, Chip, Collapse, Typography } 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  FlagsmithFeature,\n  FlagsmithFeatureDetails,\n} from '../../api/FlagsmithClient';\nimport { FlagStatusIndicator } from '../shared';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\n\nconst useStyles = makeStyles(theme => ({\n  showMoreButton: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    cursor: 'pointer',\n    color: theme.palette.primary.main,\n    fontSize: '0.875rem',\n    marginTop: theme.spacing(1),\n    '&:hover': {\n      textDecoration: 'underline',\n    },\n  },\n  showMoreContent: {\n    marginTop: theme.spacing(1.5),\n    padding: theme.spacing(1.5),\n    backgroundColor:\n      theme.palette.type === 'dark'\n        ? 'rgba(255, 255, 255, 0.05)'\n        : 'rgba(0, 0, 0, 0.02)',\n    borderRadius: theme.shape.borderRadius,\n    border: `1px solid ${theme.palette.divider}`,\n  },\n  featureStateItem: {\n    padding: theme.spacing(1),\n    marginBottom: theme.spacing(0.5),\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: theme.shape.borderRadius,\n    border: `1px solid ${theme.palette.divider}`,\n  },\n  segmentBadge: {\n    backgroundColor: flagsmithColors.warning,\n    color: 'white',\n    fontSize: '0.7rem',\n    height: 20,\n    marginLeft: theme.spacing(1),\n  },\n}));\n\ntype LiveVersionInfo = FlagsmithFeature['live_version'];\n\ninterface SegmentOverridesSectionProps {\n  feature: FlagsmithFeature;\n  details: FlagsmithFeatureDetails | null;\n  liveVersion: LiveVersionInfo;\n}\n\nexport const SegmentOverridesSection = ({\n  feature,\n  details,\n  liveVersion,\n}: SegmentOverridesSectionProps) => {\n  const classes = useStyles();\n  const [showMoreOpen, setShowMoreOpen] = useState(false);\n\n  const segmentOverrides =\n    details?.featureState?.filter(state => state.feature_segment !== null) ??\n    [];\n\n  return (\n    <>\n      <Box\n        className={classes.showMoreButton}\n        onClick={() => setShowMoreOpen(!showMoreOpen)}\n      >\n        {showMoreOpen ? (\n          <KeyboardArrowDown fontSize=\"small\" />\n        ) : (\n          <KeyboardArrowRight fontSize=\"small\" />\n        )}\n        <Typography variant=\"body2\" component=\"span\">\n          {showMoreOpen ? 'Hide additional details' : 'Show additional details'}\n        </Typography>\n      </Box>\n\n      <Collapse in={showMoreOpen} timeout=\"auto\">\n        <Box className={classes.showMoreContent}>\n          <Box mb={1.5}>\n            <Typography variant=\"body2\">\n              <strong>Published:</strong> {liveVersion?.published ? 'Yes' : 'No'}\n              {liveVersion?.published_by && ` (by ${liveVersion.published_by})`}\n            </Typography>\n            <Typography variant=\"body2\">\n              <strong>Archived:</strong> {feature.is_archived ? 'Yes' : 'No'}\n            </Typography>\n          </Box>\n\n          {details?.featureState && details.featureState.length > 0 && (\n            <Box>\n              <Typography variant=\"subtitle2\" gutterBottom>\n                Segment Overrides\n              </Typography>\n              {segmentOverrides.length === 0 ? (\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  No segment overrides configured.\n                </Typography>\n              ) : (\n                segmentOverrides.map((state, index) => (\n                  <Box\n                    key={state.id || index}\n                    className={classes.featureStateItem}\n                  >\n                    <Box display=\"flex\" alignItems=\"center\">\n                      <FlagStatusIndicator enabled={state.enabled} size=\"small\" />\n                      <Typography variant=\"body2\" style={{ marginLeft: 8 }}>\n                        {state.enabled ? 'Enabled' : 'Disabled'}\n                      </Typography>\n                      {state.feature_segment && (\n                        <Chip\n                          label={`Segment: ${state.feature_segment.segment} (Priority: ${state.feature_segment.priority})`}\n                          size=\"small\"\n                          className={classes.segmentBadge}\n                        />\n                      )}\n                    </Box>\n                    {state.feature_state_value && (\n                      <Box mt={0.5} ml={3}>\n                        {state.feature_state_value.string_value !== null &&\n                          state.feature_state_value.string_value !==\n                            undefined && (\n                            <Typography variant=\"caption\" color=\"textSecondary\">\n                              Value: \"{state.feature_state_value.string_value}\"\n                            </Typography>\n                          )}\n                        {state.feature_state_value.integer_value !== null &&\n                          state.feature_state_value.integer_value !==\n                            undefined && (\n                            <Typography variant=\"caption\" color=\"textSecondary\">\n                              Value: {state.feature_state_value.integer_value}\n                            </Typography>\n                          )}\n                        {state.feature_state_value.boolean_value !== null &&\n                          state.feature_state_value.boolean_value !==\n                            undefined && (\n                            <Typography variant=\"caption\" color=\"textSecondary\">\n                              Value:{' '}\n                              {String(state.feature_state_value.boolean_value)}\n                            </Typography>\n                          )}\n                      </Box>\n                    )}\n                  </Box>\n                ))\n              )}\n            </Box>\n          )}\n        </Box>\n      </Collapse>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Box, Typography, Grid, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import '../shared/FlagStatusIndicator.esm.js';
+import { SearchInput } from '../shared/SearchInput.esm.js';
+import { FlagsmithLink } from '../shared/FlagsmithLink.esm.js';
+import '@material-ui/icons/ChevronLeft';
+import '@material-ui/icons/ChevronRight';
+import { LoadingState } from '../shared/LoadingState.esm.js';
+import { buildProjectUrl } from '../../theme/flagsmithTheme.esm.js';
+import { useFlagsmithProject } from '../../hooks/useFlagsmithProject.esm.js';
+import '@backstage/core-plugin-api';
+import { ExpandableRow } from './ExpandableRow.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  header: {
+    marginBottom: theme.spacing(2)
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    justifyContent: "flex-end"
+  }
+}));
+const FlagsTab = () => {
+  const classes = useStyles();
+  const { entity } = useEntity();
+  const [searchQuery, setSearchQuery] = useState("");
+  const projectId = entity.metadata.annotations?.["flagsmith.com/project-id"];
+  const { project, environments, features, loading, error, client } = useFlagsmithProject(projectId);
+  const filteredFeatures = useMemo(() => {
+    if (!searchQuery.trim()) return features;
+    const query = searchQuery.toLowerCase();
+    return features.filter(
+      (f) => f.name.toLowerCase().includes(query) || f.description?.toLowerCase().includes(query)
+    );
+  }, [features, searchQuery]);
+  const dashboardUrl = buildProjectUrl(
+    projectId || "",
+    environments[0]?.id?.toString()
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx(LoadingState, { message: "Loading feature flags..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Box, { p: 3, children: [
+      /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+        "Error: ",
+        error
+      ] }),
+      !projectId && /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: { marginTop: 16 }, children: [
+        "Add a ",
+        /* @__PURE__ */ jsx("code", { children: "flagsmith.com/project-id" }),
+        " annotation to this entity to view feature flags."
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { p: 3, children: [
+    /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, alignItems: "center", className: classes.header, children: [
+      /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, md: 6, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h4", children: "Feature Flags" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+          project?.name,
+          " (",
+          features.length,
+          " flags)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxs(Box, { className: classes.headerActions, children: [
+        /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: "Search flags..."
+          }
+        ),
+        /* @__PURE__ */ jsx(FlagsmithLink, { href: dashboardUrl, iconOnly: true, tooltip: "Open Dashboard" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(TableContainer, { component: Paper, children: /* @__PURE__ */ jsxs(Table, { size: "small", children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Flag Name" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Type" }),
+        /* @__PURE__ */ jsx(TableCell, { children: "Created" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: filteredFeatures.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, align: "center", children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: searchQuery ? "No flags match your search" : "No feature flags found for this project" }) }) }) : filteredFeatures.map((feature) => /* @__PURE__ */ jsx(
+        ExpandableRow,
+        {
+          feature,
+          environments,
+          client,
+          projectId
+        },
+        feature.id
+      )) })
+    ] }) })
+  ] });
+};
+
+export { FlagsTab };
+//# sourceMappingURL=index.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsTab/index.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  Typography,\n  Box,\n  Grid,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Paper,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { SearchInput, FlagsmithLink, LoadingState } from '../shared';\nimport { buildProjectUrl } from '../../theme/flagsmithTheme';\nimport { useFlagsmithProject } from '../../hooks';\nimport { ExpandableRow } from './ExpandableRow';\n\nconst useStyles = makeStyles(theme => ({\n  header: {\n    marginBottom: theme.spacing(2),\n  },\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    justifyContent: 'flex-end',\n  },\n}));\n\nexport const FlagsTab = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const { project, environments, features, loading, error, client } =\n    useFlagsmithProject(projectId);\n\n  const filteredFeatures = useMemo(() => {\n    if (!searchQuery.trim()) return features;\n    const query = searchQuery.toLowerCase();\n    return features.filter(\n      f =>\n        f.name.toLowerCase().includes(query) ||\n        f.description?.toLowerCase().includes(query),\n    );\n  }, [features, searchQuery]);\n\n  const dashboardUrl = buildProjectUrl(\n    projectId || '',\n    environments[0]?.id?.toString(),\n  );\n\n  if (loading) {\n    return <LoadingState message=\"Loading feature flags...\" />;\n  }\n\n  if (error) {\n    return (\n      <Box p={3}>\n        <Typography color=\"error\">Error: {error}</Typography>\n        {!projectId && (\n          <Typography variant=\"body2\" style={{ marginTop: 16 }}>\n            Add a <code>flagsmith.com/project-id</code> annotation to this\n            entity to view feature flags.\n          </Typography>\n        )}\n      </Box>\n    );\n  }\n\n  return (\n    <Box p={3}>\n      <Grid container spacing={2} alignItems=\"center\" className={classes.header}>\n        <Grid item xs={12} md={6}>\n          <Typography variant=\"h4\">Feature Flags</Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            {project?.name} ({features.length} flags)\n          </Typography>\n        </Grid>\n        <Grid item xs={12} md={6}>\n          <Box className={classes.headerActions}>\n            <SearchInput\n              value={searchQuery}\n              onChange={setSearchQuery}\n              placeholder=\"Search flags...\"\n            />\n            <FlagsmithLink href={dashboardUrl} iconOnly tooltip=\"Open Dashboard\" />\n          </Box>\n        </Grid>\n      </Grid>\n\n      <TableContainer component={Paper}>\n        <Table size=\"small\">\n          <TableHead>\n            <TableRow>\n              <TableCell padding=\"checkbox\" />\n              <TableCell>Flag Name</TableCell>\n              <TableCell>Type</TableCell>\n              <TableCell>Created</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {filteredFeatures.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={4} align=\"center\">\n                  <Typography color=\"textSecondary\">\n                    {searchQuery\n                      ? 'No flags match your search'\n                      : 'No feature flags found for this project'}\n                  </Typography>\n                </TableCell>\n              </TableRow>\n            ) : (\n              filteredFeatures.map(feature => (\n                <ExpandableRow\n                  key={feature.id}\n                  feature={feature}\n                  environments={environments}\n                  client={client}\n                  projectId={projectId!}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </TableContainer>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FlagsmithOverviewCard/FeatureFlagRow.esm.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TableRow, TableCell, Typography, Tooltip, Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { FlagStatusIndicator } from '../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 { buildEnvStatusTooltip, getFeatureEnvStatus } from '../../utils/flagHelpers.esm.js';
+
+const useStyles = makeStyles(() => ({
+  envDots: {
+    display: "flex",
+    gap: 2,
+    justifyContent: "flex-end"
+  }
+}));
+const FeatureFlagRow = ({ feature, environments }) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ jsxs(TableRow, { hover: true, children: [
+    /* @__PURE__ */ jsxs(TableCell, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: feature.name }),
+      feature.description && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "textSecondary", children: [
+        feature.description.substring(0, 40),
+        feature.description.length > 40 ? "..." : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(TableCell, { align: "right", children: /* @__PURE__ */ jsx(Tooltip, { title: buildEnvStatusTooltip(feature, environments), children: /* @__PURE__ */ jsx(Box, { className: classes.envDots, children: environments.map((env) => /* @__PURE__ */ jsx(
+      FlagStatusIndicator,
+      {
+        enabled: getFeatureEnvStatus(feature, env.id),
+        size: "small"
+      },
+      env.id
+    )) }) }) })
+  ] });
+};
+
+export { FeatureFlagRow };
+//# sourceMappingURL=FeatureFlagRow.esm.js.map

package/dist/components/FlagsmithOverviewCard/FeatureFlagRow.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureFlagRow.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/FeatureFlagRow.tsx"],"sourcesContent":["import { Box, TableCell, TableRow, Tooltip, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagsmithFeature, FlagsmithEnvironment } from '../../api/FlagsmithClient';\nimport { FlagStatusIndicator } from '../shared';\nimport { getFeatureEnvStatus, buildEnvStatusTooltip } from '../../utils';\n\nconst useStyles = makeStyles(() => ({\n  envDots: {\n    display: 'flex',\n    gap: 2,\n    justifyContent: 'flex-end',\n  },\n}));\n\ninterface FeatureFlagRowProps {\n  feature: FlagsmithFeature;\n  environments: FlagsmithEnvironment[];\n}\n\nexport const FeatureFlagRow = ({ feature, environments }: FeatureFlagRowProps) => {\n  const classes = useStyles();\n\n  return (\n    <TableRow hover>\n      <TableCell>\n        <Typography variant=\"body2\">{feature.name}</Typography>\n        {feature.description && (\n          <Typography variant=\"caption\" color=\"textSecondary\">\n            {feature.description.substring(0, 40)}\n            {feature.description.length > 40 ? '...' : ''}\n          </Typography>\n        )}\n      </TableCell>\n      <TableCell align=\"right\">\n        <Tooltip title={buildEnvStatusTooltip(feature, environments)}>\n          <Box className={classes.envDots}>\n            {environments.map(env => (\n              <FlagStatusIndicator\n                key={env.id}\n                enabled={getFeatureEnvStatus(feature, env.id)}\n                size=\"small\"\n              />\n            ))}\n          </Box>\n        </Tooltip>\n      </TableCell>\n    </TableRow>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAMA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,OAAA,EAAS;AAAA,IACP,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,CAAA;AAAA,IACL,cAAA,EAAgB;AAAA;AAEpB,CAAA,CAAE,CAAA;AAOK,MAAM,cAAA,GAAiB,CAAC,EAAE,OAAA,EAAS,cAAa,KAA2B;AAChF,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAK,IAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAS,QAAA,EAAA,OAAA,CAAQ,IAAA,EAAK,CAAA;AAAA,MACzC,QAAQ,WAAA,oBACP,IAAA,CAAC,cAAW,OAAA,EAAQ,SAAA,EAAU,OAAM,eAAA,EACjC,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,WAAA,CAAY,SAAA,CAAU,CAAA,EAAG,EAAE,CAAA;AAAA,QACnC,OAAA,CAAQ,WAAA,CAAY,MAAA,GAAS,EAAA,GAAK,KAAA,GAAQ;AAAA,OAAA,EAC7C;AAAA,KAAA,EAEJ,CAAA;AAAA,wBACC,SAAA,EAAA,EAAU,KAAA,EAAM,SACf,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAO,qBAAA,CAAsB,OAAA,EAAS,YAAY,CAAA,EACzD,8BAAC,GAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,OAAA,EACrB,QAAA,EAAA,YAAA,CAAa,IAAI,CAAA,GAAA,qBAChB,GAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,mBAAA,CAAoB,OAAA,EAAS,GAAA,CAAI,EAAE,CAAA;AAAA,QAC5C,IAAA,EAAK;AAAA,OAAA;AAAA,MAFA,GAAA,CAAI;AAAA,KAIZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/FlagsmithOverviewCard/FlagStatsRow.esm.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { FlagStatusIndicator } from '../shared/FlagStatusIndicator.esm.js';
+import '../shared/SearchInput.esm.js';
+import '../shared/FlagsmithLink.esm.js';
+import '@material-ui/icons/ChevronLeft';
+import '@material-ui/icons/ChevronRight';
+
+const useStyles = makeStyles((theme) => ({
+  statsRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+    fontSize: "0.75rem"
+  },
+  statItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  }
+}));
+const FlagStatsRow = ({ enabledCount, disabledCount }) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ jsx(Box, { px: 2, pt: 1, children: /* @__PURE__ */ jsxs(Box, { className: classes.statsRow, children: [
+    /* @__PURE__ */ jsxs(Box, { className: classes.statItem, children: [
+      /* @__PURE__ */ jsx(FlagStatusIndicator, { enabled: true, size: "small" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+        enabledCount,
+        " Enabled"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: classes.statItem, children: [
+      /* @__PURE__ */ jsx(FlagStatusIndicator, { enabled: false, size: "small" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+        disabledCount,
+        " Disabled"
+      ] })
+    ] })
+  ] }) });
+};
+
+export { FlagStatsRow };
+//# sourceMappingURL=FlagStatsRow.esm.js.map