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

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

@@ -1 +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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"}
+{"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":";;;;;;;;;;;;;AAYA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IACtB,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,KAAA,CAAM,OAAA,CAAQ,OAAA,CAAQ,IAAA;AAAA,IAC7B,QAAA,EAAU,UAAA;AAAA,IACV,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC1B,SAAA,EAAW;AAAA,MACT,cAAA,EAAgB;AAAA;AAClB,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,SAAA,EAAW,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC5B,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC1B,eAAA,EACE,KAAA,CAAM,OAAA,CAAQ,IAAA,KAAS,SACnB,2BAAA,GACA,qBAAA;AAAA,IACN,YAAA,EAAc,MAAM,KAAA,CAAM,YAAA;AAAA,IAC1B,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA;AAAA,GAC5C;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,OAAA,EAAS,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IACxB,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,IAC/B,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,UAAA,CAAW,KAAA;AAAA,IAC1C,YAAA,EAAc,MAAM,KAAA,CAAM,YAAA;AAAA,IAC1B,MAAA,EAAQ,CAAA,UAAA,EAAa,KAAA,CAAM,OAAA,CAAQ,OAAO,CAAA;AAAA,GAC5C;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,iBAAiB,eAAA,CAAgB,OAAA;AAAA,IACjC,KAAA,EAAO,OAAA;AAAA,IACP,QAAA,EAAU,QAAA;AAAA,IACV,MAAA,EAAQ,EAAA;AAAA,IACR,UAAA,EAAY,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAE/B,CAAA,CAAE,CAAA;AAUK,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAoC;AAClC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,MAAM,gBAAA,GACJ,SAAS,YAAA,EAAc,MAAA,CAAO,WAAS,KAAA,CAAM,eAAA,KAAoB,IAAI,CAAA,IACrE,EAAC;AAEH,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,cAAA;AAAA,QACnB,OAAA,EAAS,MAAM,eAAA,CAAgB,CAAC,YAAY,CAAA;AAAA,QAE3C,QAAA,EAAA;AAAA,UAAA,YAAA,mBACC,GAAA,CAAC,qBAAkB,QAAA,EAAS,OAAA,EAAQ,oBAEpC,GAAA,CAAC,kBAAA,EAAA,EAAmB,UAAS,OAAA,EAAQ,CAAA;AAAA,0BAEvC,GAAA,CAAC,cAAW,OAAA,EAAQ,OAAA,EAAQ,WAAU,MAAA,EACnC,QAAA,EAAA,YAAA,GAAe,4BAA4B,yBAAA,EAC9C;AAAA;AAAA;AAAA,KACF;AAAA,oBAEA,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAI,YAAA,EAAc,OAAA,EAAQ,QAClC,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,eAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,IAAI,GAAA,EACP,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,YAAA,EAAU,CAAA;AAAA,UAAS,GAAA;AAAA,UAAE,WAAA,EAAa,YAAY,KAAA,GAAQ,IAAA;AAAA,UAC7D,WAAA,EAAa,YAAA,IAAgB,CAAA,KAAA,EAAQ,WAAA,CAAY,YAAY,CAAA,CAAA;AAAA,SAAA,EAChE,CAAA;AAAA,wBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,WAAA,EAAS,CAAA;AAAA,UAAS,GAAA;AAAA,UAAE,OAAA,CAAQ,cAAc,KAAA,GAAQ;AAAA,SAAA,EAC5D;AAAA,OAAA,EACF,CAAA;AAAA,MAEC,SAAS,YAAA,IAAgB,OAAA,CAAQ,aAAa,MAAA,GAAS,CAAA,yBACrD,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAY,YAAA,EAAY,MAAC,QAAA,EAAA,mBAAA,EAE7C,CAAA;AAAA,QACC,gBAAA,CAAiB,MAAA,KAAW,CAAA,mBAC3B,GAAA,CAAC,cAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,eAAA,EAAgB,8CAElD,CAAA,GAEA,gBAAA,CAAiB,GAAA,CAAI,CAAC,OAAO,KAAA,qBAC3B,IAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YAEC,WAAW,OAAA,CAAQ,gBAAA;AAAA,YAEnB,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,UAAA,EAAW,QAAA,EAC7B,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAS,KAAA,CAAM,OAAA,EAAS,MAAK,OAAA,EAAQ,CAAA;AAAA,gCAC1D,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAO,EAAE,UAAA,EAAY,CAAA,EAAE,EAChD,QAAA,EAAA,KAAA,CAAM,OAAA,GAAU,SAAA,GAAY,UAAA,EAC/B,CAAA;AAAA,gBACC,MAAM,eAAA,oBACL,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,KAAA,EAAO,YAAY,KAAA,CAAM,eAAA,CAAgB,OAAO,CAAA,YAAA,EAAe,KAAA,CAAM,gBAAgB,QAAQ,CAAA,CAAA,CAAA;AAAA,oBAC7F,IAAA,EAAK,OAAA;AAAA,oBACL,WAAW,OAAA,CAAQ;AAAA;AAAA;AACrB,eAAA,EAEJ,CAAA;AAAA,cACC,MAAM,mBAAA,oBACL,IAAA,CAAC,OAAI,EAAA,EAAI,GAAA,EAAK,IAAI,CAAA,EACf,QAAA,EAAA;AAAA,gBAAA,KAAA,CAAM,mBAAA,CAAoB,YAAA,KAAiB,IAAA,IAC1C,KAAA,CAAM,mBAAA,CAAoB,YAAA,KACxB,MAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,KAAA,EAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,kBAAA,UAAA;AAAA,kBACzC,MAAM,mBAAA,CAAoB,YAAA;AAAA,kBAAa;AAAA,iBAAA,EAClD,CAAA;AAAA,gBAEH,KAAA,CAAM,mBAAA,CAAoB,aAAA,KAAkB,IAAA,IAC3C,KAAA,CAAM,mBAAA,CAAoB,aAAA,KACxB,MAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,OAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,kBAAA,SAAA;AAAA,kBAC1C,MAAM,mBAAA,CAAoB;AAAA,iBAAA,EACpC,CAAA;AAAA,gBAEH,KAAA,CAAM,mBAAA,CAAoB,aAAA,KAAkB,IAAA,IAC3C,KAAA,CAAM,mBAAA,CAAoB,aAAA,KACxB,MAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,OAAM,eAAA,EAAgB,QAAA,EAAA;AAAA,kBAAA,QAAA;AAAA,kBAC3C,GAAA;AAAA,kBACN,MAAA,CAAO,KAAA,CAAM,mBAAA,CAAoB,aAAa;AAAA,iBAAA,EACjD;AAAA,eAAA,EAEN;AAAA;AAAA,WAAA;AAAA,UAxCG,MAAM,EAAA,IAAM;AAAA,SA2CpB;AAAA,OAAA,EAEL;AAAA,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
-import { Box, Grid, Typography, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, TablePagination } from '@material-ui/core';
+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';
@@ -9,12 +9,9 @@ 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 { ErrorState } from '../shared/ErrorState.esm.js';
-import '../shared/ChartTooltip.esm.js';
 import { buildProjectUrl } from '../../theme/flagsmithTheme.esm.js';
 import { useFlagsmithProject } from '../../hooks/useFlagsmithProject.esm.js';
 import '@backstage/core-plugin-api';
-import { DEFAULT_ROWS_PER_PAGE, MAX_TABLE_ENVIRONMENTS, PAGINATION_OPTIONS } from '../../constants/index.esm.js';
 import { ExpandableRow } from './ExpandableRow.esm.js';
 
 const useStyles = makeStyles((theme) => ({
@@ -26,18 +23,12 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     gap: theme.spacing(2),
     justifyContent: "flex-end"
-  },
-  errorHint: {
-    marginTop: theme.spacing(2)
   }
 }));
-const FIXED_COLUMNS_COUNT = 4;
 const FlagsTab = () => {
   const classes = useStyles();
   const { entity } = useEntity();
   const [searchQuery, setSearchQuery] = useState("");
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);
   const projectId = entity.metadata.annotations?.["flagsmith.com/project-id"];
   const { project, environments, features, loading, error, client } = useFlagsmithProject(projectId);
   const filteredFeatures = useMemo(() => {
@@ -47,34 +38,25 @@ const FlagsTab = () => {
       (f) => f.name.toLowerCase().includes(query) || f.description?.toLowerCase().includes(query)
     );
   }, [features, searchQuery]);
-  const paginatedFeatures = useMemo(() => {
-    const startIndex = page * rowsPerPage;
-    return filteredFeatures.slice(startIndex, startIndex + rowsPerPage);
-  }, [filteredFeatures, page, rowsPerPage]);
-  const handleChangePage = (_event, newPage) => {
-    setPage(newPage);
-  };
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
   const dashboardUrl = buildProjectUrl(
     projectId || "",
     environments[0]?.id?.toString()
   );
-  const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);
-  const totalColumns = FIXED_COLUMNS_COUNT + displayedEnvs.length;
   if (loading) {
     return /* @__PURE__ */ jsx(LoadingState, { message: "Loading feature flags..." });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(Box, { p: 3, children: /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        message: error,
-        hint: !projectId ? "Add a flagsmith.com/project-id annotation to this entity to view feature flags." : void 0
-      }
-    ) });
+    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: [
@@ -103,34 +85,20 @@ const FlagsTab = () => {
       /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }),
         /* @__PURE__ */ jsx(TableCell, { children: "Flag Name" }),
-        /* @__PURE__ */ jsx(TableCell, { children: "Tags" }),
-        displayedEnvs.map((env) => /* @__PURE__ */ jsx(TableCell, { align: "center", children: env.name }, env.id)),
+        /* @__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: totalColumns, align: "center", children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: searchQuery ? "No flags match your search" : "No feature flags found for this project" }) }) }) : paginatedFeatures.map((feature) => /* @__PURE__ */ jsx(
+      /* @__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,
-          orgId: project?.organisation || 0
+          projectId
         },
         feature.id
       )) })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      TablePagination,
-      {
-        component: "div",
-        count: filteredFeatures.length,
-        page,
-        onPageChange: handleChangePage,
-        rowsPerPage,
-        onRowsPerPageChange: handleChangeRowsPerPage,
-        rowsPerPageOptions: PAGINATION_OPTIONS
-      }
-    )
+    ] }) })
   ] });
 };
 

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

@@ -1 +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  TablePagination,\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, ErrorState } from '../shared';\nimport { buildProjectUrl } from '../../theme/flagsmithTheme';\nimport { useFlagsmithProject } from '../../hooks';\nimport {\n  MAX_TABLE_ENVIRONMENTS,\n  DEFAULT_ROWS_PER_PAGE,\n  PAGINATION_OPTIONS,\n} from '../../constants';\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  errorHint: {\n    marginTop: theme.spacing(2),\n  },\n}));\n\n/** Number of fixed columns (checkbox, name, tags, created) */\nconst FIXED_COLUMNS_COUNT = 4;\n\nexport const FlagsTab = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const [searchQuery, setSearchQuery] = useState('');\n  const [page, setPage] = useState(0);\n  const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);\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 paginatedFeatures = useMemo(() => {\n    const startIndex = page * rowsPerPage;\n    return filteredFeatures.slice(startIndex, startIndex + rowsPerPage);\n  }, [filteredFeatures, page, rowsPerPage]);\n\n  const handleChangePage = (_event: unknown, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setRowsPerPage(parseInt(event.target.value, 10));\n    setPage(0);\n  };\n\n  const dashboardUrl = buildProjectUrl(\n    projectId || '',\n    environments[0]?.id?.toString(),\n  );\n\n  const displayedEnvs = environments.slice(0, MAX_TABLE_ENVIRONMENTS);\n  const totalColumns = FIXED_COLUMNS_COUNT + displayedEnvs.length;\n\n  if (loading) {\n    return <LoadingState message=\"Loading feature flags...\" />;\n  }\n\n  if (error) {\n    return (\n      <Box p={3}>\n        <ErrorState\n          message={error}\n          hint={!projectId ? 'Add a flagsmith.com/project-id annotation to this entity to view feature flags.' : undefined}\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>Tags</TableCell>\n              {displayedEnvs.map(env => (\n                <TableCell key={env.id} align=\"center\">\n                  {env.name}\n                </TableCell>\n              ))}\n              <TableCell>Created</TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {filteredFeatures.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={totalColumns} 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              paginatedFeatures.map(feature => (\n                <ExpandableRow\n                  key={feature.id}\n                  feature={feature}\n                  environments={environments}\n                  client={client}\n                  projectId={projectId!}\n                  orgId={project?.organisation || 0}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </TableContainer>\n      <TablePagination\n        component=\"div\"\n        count={filteredFeatures.length}\n        page={page}\n        onPageChange={handleChangePage}\n        rowsPerPage={rowsPerPage}\n        onRowsPerPageChange={handleChangeRowsPerPage}\n        rowsPerPageOptions={PAGINATION_OPTIONS}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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

@@ -6,7 +6,6 @@ import '../shared/SearchInput.esm.js';
 import '../shared/FlagsmithLink.esm.js';
 import '@material-ui/icons/ChevronLeft';
 import '@material-ui/icons/ChevronRight';
-import '../shared/ChartTooltip.esm.js';
 import { buildEnvStatusTooltip, getFeatureEnvStatus } from '../../utils/flagHelpers.esm.js';
 
 const useStyles = makeStyles(() => ({

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

@@ -1 +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;;;;"}
+{"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

@@ -6,7 +6,6 @@ import '../shared/SearchInput.esm.js';
 import '../shared/FlagsmithLink.esm.js';
 import '@material-ui/icons/ChevronLeft';
 import '@material-ui/icons/ChevronRight';
-import '../shared/ChartTooltip.esm.js';
 
 const useStyles = makeStyles((theme) => ({
   statsRow: {

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

@@ -1 +1 @@
-{"version":3,"file":"FlagStatsRow.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/FlagStatsRow.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagStatusIndicator } from '../shared';\n\nconst useStyles = makeStyles(theme => ({\n  statsRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1),\n    fontSize: '0.75rem',\n  },\n  statItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  },\n}));\n\ninterface FlagStatsRowProps {\n  enabledCount: number;\n  disabledCount: number;\n}\n\nexport const FlagStatsRow = ({ enabledCount, disabledCount }: FlagStatsRowProps) => {\n  const classes = useStyles();\n\n  return (\n    <Box px={2} pt={1}>\n      <Box className={classes.statsRow}>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled size=\"small\" />\n          <Typography variant=\"caption\">{enabledCount} Enabled</Typography>\n        </Box>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled={false} size=\"small\" />\n          <Typography variant=\"caption\">{disabledCount} Disabled</Typography>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAIA,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,CAAC,CAAA;AAAA,IACpB,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA;AAE1B,CAAA,CAAE,CAAA;AAOK,MAAM,YAAA,GAAe,CAAC,EAAE,YAAA,EAAc,eAAc,KAAyB;AAClF,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAA,EAAI,GACd,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAO,IAAA,EAAC,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAC1C,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QAAa;AAAA,OAAA,EAAQ;AAAA,KAAA,EACtD,CAAA;AAAA,oBACA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAS,KAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAClD,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QAAc;AAAA,OAAA,EAAS;AAAA,KAAA,EACxD;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FlagStatsRow.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/FlagStatsRow.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { FlagStatusIndicator } from '../shared';\n\nconst useStyles = makeStyles(theme => ({\n  statsRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    marginBottom: theme.spacing(1),\n    fontSize: '0.75rem',\n  },\n  statItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  },\n}));\n\ninterface FlagStatsRowProps {\n  enabledCount: number;\n  disabledCount: number;\n}\n\nexport const FlagStatsRow = ({ enabledCount, disabledCount }: FlagStatsRowProps) => {\n  const classes = useStyles();\n\n  return (\n    <Box px={2} pt={1}>\n      <Box className={classes.statsRow}>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled size=\"small\" />\n          <Typography variant=\"caption\">{enabledCount} Enabled</Typography>\n        </Box>\n        <Box className={classes.statItem}>\n          <FlagStatusIndicator enabled={false} size=\"small\" />\n          <Typography variant=\"caption\">{disabledCount} Disabled</Typography>\n        </Box>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAIA,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,CAAC,CAAA;AAAA,IACpB,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA;AAAA,IAC7B,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG;AAAA;AAE1B,CAAA,CAAE,CAAA;AAOK,MAAM,YAAA,GAAe,CAAC,EAAE,YAAA,EAAc,eAAc,KAAyB;AAClF,EAAA,MAAM,UAAU,SAAA,EAAU;AAE1B,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAA,EAAI,GACd,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAO,IAAA,EAAC,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAC1C,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,YAAA;AAAA,QAAa;AAAA,OAAA,EAAQ;AAAA,KAAA,EACtD,CAAA;AAAA,oBACA,IAAA,CAAC,GAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,QAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,OAAA,EAAS,KAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,CAAA;AAAA,sBAClD,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAW,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QAAc;AAAA,OAAA,EAAS;AAAA,KAAA,EACxD;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, Tooltip, TableBody, Typography, Box } from '@material-ui/core';
+import { Box, Typography, TableContainer, Paper, Table, TableHead, TableRow, TableCell, Tooltip, TableBody } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { InfoCard } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -9,8 +9,6 @@ import '../shared/SearchInput.esm.js';
 import { FlagsmithLink } from '../shared/FlagsmithLink.esm.js';
 import { MiniPagination } from '../shared/MiniPagination.esm.js';
 import { LoadingState } from '../shared/LoadingState.esm.js';
-import { ErrorState } from '../shared/ErrorState.esm.js';
-import '../shared/ChartTooltip.esm.js';
 import { buildProjectUrl } from '../../theme/flagsmithTheme.esm.js';
 import { useFlagsmithProject } from '../../hooks/useFlagsmithProject.esm.js';
 import '@backstage/core-plugin-api';
@@ -36,7 +34,10 @@ const FlagsmithOverviewCard = () => {
     return /* @__PURE__ */ jsx(InfoCard, { title: "Flagsmith Flags", children: /* @__PURE__ */ jsx(LoadingState, { message: "Loading flags...", size: 24 }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(InfoCard, { title: "Flagsmith Flags", children: /* @__PURE__ */ jsx(ErrorState, { message: error }) });
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flagsmith Flags", children: /* @__PURE__ */ jsx(Box, { p: 2, children: /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+      "Error: ",
+      error
+    ] }) }) });
   }
   const { paginatedItems: paginatedFeatures, totalPages } = paginate(
     features,

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/index.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Typography,\n  Box,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Paper,\n  Tooltip,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, MiniPagination, LoadingState, ErrorState } from '../shared';\nimport { buildProjectUrl } from '../../theme/flagsmithTheme';\nimport { useFlagsmithProject } from '../../hooks';\nimport { calculateFeatureStats, paginate } from '../../utils';\nimport { FlagStatsRow } from './FlagStatsRow';\nimport { FeatureFlagRow } from './FeatureFlagRow';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst PAGE_SIZE = 5;\n\nexport const FlagsmithOverviewCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const [page, setPage] = useState(0);\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const { project, environments, features, loading, error } = useFlagsmithProject(projectId);\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <LoadingState message=\"Loading flags...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <ErrorState message={error} />\n      </InfoCard>\n    );\n  }\n\n  const { paginatedItems: paginatedFeatures, totalPages } = paginate(\n    features,\n    page,\n    PAGE_SIZE,\n  );\n  const { enabledCount, disabledCount } = calculateFeatureStats(features);\n  const dashboardUrl = buildProjectUrl(\n    projectId || '',\n    environments[0]?.id?.toString(),\n  );\n\n  return (\n    <InfoCard\n      title=\"Flagsmith Flags\"\n      subheader={project?.name}\n      action={\n        <Box className={classes.headerActions}>\n          <FlagsmithLink href={dashboardUrl} iconOnly tooltip=\"Open Dashboard\" />\n        </Box>\n      }\n    >\n      <FlagStatsRow enabledCount={enabledCount} disabledCount={disabledCount} />\n\n      <TableContainer component={Paper} variant=\"outlined\">\n        <Table size=\"small\">\n          <TableHead>\n            <TableRow>\n              <TableCell>Flag Name</TableCell>\n              <TableCell align=\"right\">\n                <Tooltip title={environments.map(e => e.name).join(' • ')}>\n                  <span>Environments</span>\n                </Tooltip>\n              </TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {paginatedFeatures.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={2} align=\"center\">\n                  <Typography color=\"textSecondary\" variant=\"body2\">\n                    No feature flags found\n                  </Typography>\n                </TableCell>\n              </TableRow>\n            ) : (\n              paginatedFeatures.map(feature => (\n                <FeatureFlagRow\n                  key={feature.id}\n                  feature={feature}\n                  environments={environments}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </TableContainer>\n\n      <MiniPagination\n        page={page}\n        totalPages={totalPages}\n        totalItems={features.length}\n        onPrevious={() => setPage(p => Math.max(0, p - 1))}\n        onNext={() => setPage(p => Math.min(totalPages - 1, p + 1))}\n        itemLabel=\"flags\"\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithOverviewCard/index.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Typography,\n  Box,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Paper,\n  Tooltip,\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, MiniPagination, LoadingState } from '../shared';\nimport { buildProjectUrl } from '../../theme/flagsmithTheme';\nimport { useFlagsmithProject } from '../../hooks';\nimport { calculateFeatureStats, paginate } from '../../utils';\nimport { FlagStatsRow } from './FlagStatsRow';\nimport { FeatureFlagRow } from './FeatureFlagRow';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nconst PAGE_SIZE = 5;\n\nexport const FlagsmithOverviewCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n  const [page, setPage] = useState(0);\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const { project, environments, features, loading, error } = useFlagsmithProject(projectId);\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <LoadingState message=\"Loading flags...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flagsmith Flags\">\n        <Box p={2}>\n          <Typography color=\"error\">Error: {error}</Typography>\n        </Box>\n      </InfoCard>\n    );\n  }\n\n  const { paginatedItems: paginatedFeatures, totalPages } = paginate(\n    features,\n    page,\n    PAGE_SIZE,\n  );\n  const { enabledCount, disabledCount } = calculateFeatureStats(features);\n  const dashboardUrl = buildProjectUrl(\n    projectId || '',\n    environments[0]?.id?.toString(),\n  );\n\n  return (\n    <InfoCard\n      title=\"Flagsmith Flags\"\n      subheader={project?.name}\n      action={\n        <Box className={classes.headerActions}>\n          <FlagsmithLink href={dashboardUrl} iconOnly tooltip=\"Open Dashboard\" />\n        </Box>\n      }\n    >\n      <FlagStatsRow enabledCount={enabledCount} disabledCount={disabledCount} />\n\n      <TableContainer component={Paper} variant=\"outlined\">\n        <Table size=\"small\">\n          <TableHead>\n            <TableRow>\n              <TableCell>Flag Name</TableCell>\n              <TableCell align=\"right\">\n                <Tooltip title={environments.map(e => e.name).join(' • ')}>\n                  <span>Environments</span>\n                </Tooltip>\n              </TableCell>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {paginatedFeatures.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={2} align=\"center\">\n                  <Typography color=\"textSecondary\" variant=\"body2\">\n                    No feature flags found\n                  </Typography>\n                </TableCell>\n              </TableRow>\n            ) : (\n              paginatedFeatures.map(feature => (\n                <FeatureFlagRow\n                  key={feature.id}\n                  feature={feature}\n                  environments={environments}\n                />\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </TableContainer>\n\n      <MiniPagination\n        page={page}\n        totalPages={totalPages}\n        totalItems={features.length}\n        onPrevious={() => setPage(p => Math.max(0, p - 1))}\n        onNext={() => setPage(p => Math.min(totalPages - 1, p + 1))}\n        itemLabel=\"flags\"\n      />\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/FlagsmithUsageCard/UsageChart.esm.js

@@ -1,46 +1,9 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box, Typography } from '@material-ui/core';
 import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from 'recharts';
 import { flagsmithColors } from '../../theme/flagsmithTheme.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';
+import { UsageTooltip } from './UsageTooltip.esm.js';
 
-const UsageChartTooltip = ({ active, payload }) => /* @__PURE__ */ jsx(ChartTooltip, { active, payload, children: (data) => {
-  const usageData = data[0].payload;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ChartTooltipText, { variant: "subtitle2", fontWeight: 600, children: new Date(usageData.day).toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric"
-    }) }),
-    /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
-      /* @__PURE__ */ jsxs(ChartTooltipText, { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Flags:" }),
-        " ",
-        usageData.flags ?? 0
-      ] }),
-      /* @__PURE__ */ jsxs(ChartTooltipText, { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Identities:" }),
-        " ",
-        usageData.identities
-      ] }),
-      /* @__PURE__ */ jsxs(ChartTooltipText, { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Traits:" }),
-        " ",
-        usageData.traits
-      ] }),
-      /* @__PURE__ */ jsxs(ChartTooltipText, { children: [
-        /* @__PURE__ */ jsx("strong", { children: "Environment Document:" }),
-        " ",
-        usageData.environment_document
-      ] })
-    ] })
-  ] });
-} });
 const UsageChart = ({ data }) => {
   if (data.length === 0) {
     return /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", height: 300, children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", children: "No usage data available" }) });
@@ -66,7 +29,7 @@ const UsageChart = ({ data }) => {
           }
         ),
         /* @__PURE__ */ jsx(YAxis, {}),
-        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(UsageChartTooltip, {}) }),
+        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(UsageTooltip, {}) }),
         /* @__PURE__ */ jsx(
           Bar,
           {

package/dist/components/FlagsmithUsageCard/UsageChart.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"UsageChart.esm.js","sources":["../../../src/components/FlagsmithUsageCard/UsageChart.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport { FlagsmithUsageData } from '../../api/FlagsmithClient';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\nimport { ChartTooltip, ChartTooltipText } from '../shared';\n\ninterface UsageChartProps {\n  data: FlagsmithUsageData[];\n}\n\n/**\n * Custom tooltip for usage chart displaying flags, identities, traits, and environment document\n */\nconst UsageChartTooltip = ({ active, payload }: any) => (\n  <ChartTooltip active={active} payload={payload}>\n    {(data) => {\n      const usageData = data[0].payload as FlagsmithUsageData;\n      return (\n        <>\n          <ChartTooltipText variant=\"subtitle2\" fontWeight={600}>\n            {new Date(usageData.day).toLocaleDateString('en-US', {\n              month: 'short',\n              day: 'numeric',\n              year: 'numeric',\n            })}\n          </ChartTooltipText>\n          <Box mt={1}>\n            <ChartTooltipText>\n              <strong>Flags:</strong> {usageData.flags ?? 0}\n            </ChartTooltipText>\n            <ChartTooltipText>\n              <strong>Identities:</strong> {usageData.identities}\n            </ChartTooltipText>\n            <ChartTooltipText>\n              <strong>Traits:</strong> {usageData.traits}\n            </ChartTooltipText>\n            <ChartTooltipText>\n              <strong>Environment Document:</strong> {usageData.environment_document}\n            </ChartTooltipText>\n          </Box>\n        </>\n      );\n    }}\n  </ChartTooltip>\n);\n\nexport const UsageChart = ({ data }: UsageChartProps) => {\n  if (data.length === 0) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" height={300}>\n        <Typography color=\"textSecondary\">\n          No usage data available\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={300}>\n      <BarChart\n        data={data}\n        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n      >\n        <CartesianGrid strokeDasharray=\"3 3\" />\n        <XAxis\n          dataKey=\"day\"\n          tickFormatter={value => {\n            const date = new Date(value);\n            return `${date.getMonth() + 1}/${date.getDate()}`;\n          }}\n          angle={-45}\n          textAnchor=\"end\"\n          height={80}\n        />\n        <YAxis />\n        <Tooltip content={<UsageChartTooltip />} />\n        <Bar\n          dataKey=\"flags\"\n          fill={flagsmithColors.primary}\n          radius={[2, 2, 0, 0]}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"UsageChart.esm.js","sources":["../../../src/components/FlagsmithUsageCard/UsageChart.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport {\n  BarChart,\n  Bar,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport { FlagsmithUsageData } from '../../api/FlagsmithClient';\nimport { flagsmithColors } from '../../theme/flagsmithTheme';\nimport { UsageTooltip } from './UsageTooltip';\n\ninterface UsageChartProps {\n  data: FlagsmithUsageData[];\n}\n\nexport const UsageChart = ({ data }: UsageChartProps) => {\n  if (data.length === 0) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" height={300}>\n        <Typography color=\"textSecondary\">\n          No usage data available\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={300}>\n      <BarChart\n        data={data}\n        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}\n      >\n        <CartesianGrid strokeDasharray=\"3 3\" />\n        <XAxis\n          dataKey=\"day\"\n          tickFormatter={value => {\n            const date = new Date(value);\n            return `${date.getMonth() + 1}/${date.getDate()}`;\n          }}\n          angle={-45}\n          textAnchor=\"end\"\n          height={80}\n        />\n        <YAxis />\n        <Tooltip content={<UsageTooltip />} />\n        <Bar\n          dataKey=\"flags\"\n          fill={flagsmithColors.primary}\n          radius={[2, 2, 0, 0]}\n        />\n      </BarChart>\n    </ResponsiveContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,UAAA,GAAa,CAAC,EAAE,IAAA,EAAK,KAAuB;AACvD,EAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AACrB,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,OAAA,EAAQ,MAAA,EAAO,gBAAe,QAAA,EAAS,UAAA,EAAW,QAAA,EAAS,MAAA,EAAQ,KACtE,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAM,eAAA,EAAgB,qCAElC,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAM,MAAA,EAAO,QAAQ,GAAA,EACxC,QAAA,kBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,MAAA,EAAQ,EAAE,GAAA,EAAK,CAAA,EAAG,OAAO,EAAA,EAAI,IAAA,EAAM,EAAA,EAAI,MAAA,EAAQ,CAAA,EAAE;AAAA,MAEjD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,iBAAgB,KAAA,EAAM,CAAA;AAAA,wBACrC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,KAAA;AAAA,YACR,eAAe,CAAA,KAAA,KAAS;AACtB,cAAA,MAAM,IAAA,GAAO,IAAI,IAAA,CAAK,KAAK,CAAA;AAC3B,cAAA,OAAO,CAAA,EAAG,KAAK,QAAA,EAAS,GAAI,CAAC,CAAA,CAAA,EAAI,IAAA,CAAK,SAAS,CAAA,CAAA;AAAA,YACjD,CAAA;AAAA,YACA,KAAA,EAAO,GAAA;AAAA,YACP,UAAA,EAAW,KAAA;AAAA,YACX,MAAA,EAAQ;AAAA;AAAA,SACV;AAAA,4BACC,KAAA,EAAA,EAAM,CAAA;AAAA,wBACP,GAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,kBAAS,GAAA,CAAC,gBAAa,CAAA,EAAI,CAAA;AAAA,wBACpC,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,MAAM,eAAA,CAAgB,OAAA;AAAA,YACtB,MAAA,EAAQ,CAAC,CAAA,EAAG,CAAA,EAAG,GAAG,CAAC;AAAA;AAAA;AACrB;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}

package/dist/components/FlagsmithUsageCard/UsageTooltip.esm.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
+
+const UsageTooltip = ({ active, payload }) => {
+  if (!active || !payload || !payload.length) {
+    return null;
+  }
+  const data = payload[0].payload;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      p: 1.5,
+      style: {
+        backgroundColor: "rgba(12, 0, 0, 0.95)",
+        border: "1px solid #ccc",
+        borderRadius: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", style: { fontWeight: 600 }, children: new Date(data.day).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric"
+        }) }),
+        /* @__PURE__ */ jsxs(Box, { mt: 1, children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Flags:" }),
+            " ",
+            data.flags ?? 0
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Identities:" }),
+            " ",
+            data.identities
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Traits:" }),
+            " ",
+            data.traits
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsx("strong", { children: "Environment Document:" }),
+            " ",
+            data.environment_document
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { UsageTooltip };
+//# sourceMappingURL=UsageTooltip.esm.js.map

package/dist/components/FlagsmithUsageCard/UsageTooltip.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageTooltip.esm.js","sources":["../../../src/components/FlagsmithUsageCard/UsageTooltip.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core';\nimport { FlagsmithUsageData } from '../../api/FlagsmithClient';\n\ninterface UsageTooltipProps {\n  active?: boolean;\n  payload?: Array<{\n    payload: FlagsmithUsageData;\n  }>;\n}\n\nexport const UsageTooltip = ({ active, payload }: UsageTooltipProps) => {\n  if (!active || !payload || !payload.length) {\n    return null;\n  }\n\n  const data = payload[0].payload;\n\n  return (\n    <Box\n      p={1.5}\n      style={{\n        backgroundColor: 'rgba(12, 0, 0, 0.95)',\n        border: '1px solid #ccc',\n        borderRadius: 4,\n      }}\n    >\n      <Typography variant=\"subtitle2\" style={{ fontWeight: 600 }}>\n        {new Date(data.day).toLocaleDateString('en-US', {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })}\n      </Typography>\n      <Box mt={1}>\n        <Typography variant=\"body2\">\n          <strong>Flags:</strong> {data.flags ?? 0}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Identities:</strong> {data.identities}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Traits:</strong> {data.traits}\n        </Typography>\n        <Typography variant=\"body2\">\n          <strong>Environment Document:</strong> {data.environment_document}\n        </Typography>\n      </Box>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;AAUO,MAAM,YAAA,GAAe,CAAC,EAAE,MAAA,EAAQ,SAAQ,KAAyB;AACtE,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,OAAA,IAAW,CAAC,QAAQ,MAAA,EAAQ;AAC1C,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,CAAC,CAAA,CAAE,OAAA;AAExB,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAG,GAAA;AAAA,MACH,KAAA,EAAO;AAAA,QACL,eAAA,EAAiB,sBAAA;AAAA,QACjB,MAAA,EAAQ,gBAAA;AAAA,QACR,YAAA,EAAc;AAAA,OAChB;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,WAAA,EAAY,KAAA,EAAO,EAAE,UAAA,EAAY,GAAA,EAAI,EACtD,QAAA,EAAA,IAAI,IAAA,CAAK,IAAA,CAAK,GAAG,CAAA,CAAE,mBAAmB,OAAA,EAAS;AAAA,UAC9C,KAAA,EAAO,OAAA;AAAA,UACP,GAAA,EAAK,SAAA;AAAA,UACL,IAAA,EAAM;AAAA,SACP,CAAA,EACH,CAAA;AAAA,wBACA,IAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,CAAA,EACP,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,UAAA,EAAA,EAAW,SAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,KAAK,KAAA,IAAS;AAAA,WAAA,EACzC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,aAAA,EAAW,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EACrC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,SAAA,EAAO,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EACjC,CAAA;AAAA,0BACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAClB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAO,QAAA,EAAA,uBAAA,EAAqB,CAAA;AAAA,YAAS,GAAA;AAAA,YAAE,IAAA,CAAK;AAAA,WAAA,EAC/C;AAAA,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '@material-ui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { InfoCard } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
@@ -9,8 +9,6 @@ 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 { ErrorState } from '../shared/ErrorState.esm.js';
-import '../shared/ChartTooltip.esm.js';
 import { FLAGSMITH_DASHBOARD_URL } from '../../theme/flagsmithTheme.esm.js';
 import 'react';
 import '@backstage/core-plugin-api';
@@ -38,13 +36,17 @@ const FlagsmithUsageCard = () => {
     return /* @__PURE__ */ jsx(InfoCard, { title: "Flags Usage Data (30 Days)", children: /* @__PURE__ */ jsx(LoadingState, { message: "Loading usage data...", size: 24 }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(InfoCard, { title: "Flags Usage Data (30 Days)", children: /* @__PURE__ */ jsx(
-      ErrorState,
-      {
-        message: error,
-        hint: !orgId ? "Add a flagsmith.com/organization-id annotation to this entity." : void 0
-      }
-    ) });
+    return /* @__PURE__ */ jsx(InfoCard, { title: "Flags Usage Data (30 Days)", children: /* @__PURE__ */ jsxs(Box, { p: 2, children: [
+      /* @__PURE__ */ jsxs(Typography, { color: "error", children: [
+        "Error: ",
+        error
+      ] }),
+      !orgId && /* @__PURE__ */ jsxs(Typography, { variant: "body2", style: { marginTop: 8 }, children: [
+        "Add a ",
+        /* @__PURE__ */ jsx("code", { children: "flagsmith.com/organization-id" }),
+        " annotation to this entity."
+      ] })
+    ] }) });
   }
   const subheader = project?.name ? `${project.name} - ${totalFlags.toLocaleString()} total flag calls` : void 0;
   return /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithUsageCard/index.tsx"],"sourcesContent":["import { Box } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, LoadingState, ErrorState } from '../shared';\nimport { FLAGSMITH_DASHBOARD_URL } from '../../theme/flagsmithTheme';\nimport { useFlagsmithUsage } from '../../hooks';\nimport { UsageChart } from './UsageChart';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nexport const FlagsmithUsageCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const orgId = entity.metadata.annotations?.['flagsmith.com/org-id'];\n\n  const { project, usageData, totalFlags, loading, error } = useFlagsmithUsage(\n    projectId,\n    orgId,\n  );\n\n  const usageUrl = `${FLAGSMITH_DASHBOARD_URL}/organisation/${orgId}/usage`;\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <LoadingState message=\"Loading usage data...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <ErrorState\n          message={error}\n          hint={!orgId ? 'Add a flagsmith.com/organization-id annotation to this entity.' : undefined}\n        />\n      </InfoCard>\n    );\n  }\n\n  const subheader = project?.name\n    ? `${project.name} - ${totalFlags.toLocaleString()} total flag calls`\n    : undefined;\n\n  return (\n    <InfoCard\n      title=\"Flags Usage Data (30 Days)\"\n      subheader={subheader}\n      action={\n        orgId && (\n          <Box className={classes.headerActions}>\n            <FlagsmithLink href={usageUrl} iconOnly tooltip=\"View Usage Analytics\" />\n          </Box>\n        )\n      }\n    >\n      <Box p={2}>\n        <UsageChart data={usageData} />\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AASA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAExB,CAAA,CAAE,CAAA;AAEK,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,0BAA0B,CAAA;AAC1E,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,sBAAsB,CAAA;AAElE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,UAAA,EAAY,OAAA,EAAS,OAAM,GAAI,iBAAA;AAAA,IACzD,SAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,QAAA,GAAW,CAAA,EAAG,uBAAuB,CAAA,cAAA,EAAiB,KAAK,CAAA,MAAA,CAAA;AAEjE,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,4BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,gBAAa,OAAA,EAAQ,uBAAA,EAAwB,IAAA,EAAM,EAAA,EAAI,CAAA,EAC1D,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,4BAAA,EACd,QAAA,kBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,KAAA;AAAA,QACT,IAAA,EAAM,CAAC,KAAA,GAAQ,gEAAA,GAAmE;AAAA;AAAA,KACpF,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,SAAA,GAAY,OAAA,EAAS,IAAA,GACvB,CAAA,EAAG,OAAA,CAAQ,IAAI,CAAA,GAAA,EAAM,UAAA,CAAW,cAAA,EAAgB,CAAA,iBAAA,CAAA,GAChD,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,MAAA,EACE,KAAA,oBACE,GAAA,CAAC,GAAA,EAAA,EAAI,WAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,MAAM,QAAA,EAAU,QAAA,EAAQ,IAAA,EAAC,OAAA,EAAQ,wBAAuB,CAAA,EACzE,CAAA;AAAA,MAIJ,QAAA,kBAAA,GAAA,CAAC,OAAI,CAAA,EAAG,CAAA,EACN,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAW,CAAA,EAC/B;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../src/components/FlagsmithUsageCard/index.tsx"],"sourcesContent":["import { Typography, Box } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { FlagsmithLink, LoadingState } from '../shared';\nimport { FLAGSMITH_DASHBOARD_URL } from '../../theme/flagsmithTheme';\nimport { useFlagsmithUsage } from '../../hooks';\nimport { UsageChart } from './UsageChart';\n\nconst useStyles = makeStyles(theme => ({\n  headerActions: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(1),\n  },\n}));\n\nexport const FlagsmithUsageCard = () => {\n  const classes = useStyles();\n  const { entity } = useEntity();\n\n  const projectId = entity.metadata.annotations?.['flagsmith.com/project-id'];\n  const orgId = entity.metadata.annotations?.['flagsmith.com/org-id'];\n\n  const { project, usageData, totalFlags, loading, error } = useFlagsmithUsage(\n    projectId,\n    orgId,\n  );\n\n  const usageUrl = `${FLAGSMITH_DASHBOARD_URL}/organisation/${orgId}/usage`;\n\n  if (loading) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <LoadingState message=\"Loading usage data...\" size={24} />\n      </InfoCard>\n    );\n  }\n\n  if (error) {\n    return (\n      <InfoCard title=\"Flags Usage Data (30 Days)\">\n        <Box p={2}>\n          <Typography color=\"error\">Error: {error}</Typography>\n          {!orgId && (\n            <Typography variant=\"body2\" style={{ marginTop: 8 }}>\n              Add a <code>flagsmith.com/organization-id</code> annotation to this\n              entity.\n            </Typography>\n          )}\n        </Box>\n      </InfoCard>\n    );\n  }\n\n  const subheader = project?.name\n    ? `${project.name} - ${totalFlags.toLocaleString()} total flag calls`\n    : undefined;\n\n  return (\n    <InfoCard\n      title=\"Flags Usage Data (30 Days)\"\n      subheader={subheader}\n      action={\n        orgId && (\n          <Box className={classes.headerActions}>\n            <FlagsmithLink href={usageUrl} iconOnly tooltip=\"View Usage Analytics\" />\n          </Box>\n        )\n      }\n    >\n      <Box p={2}>\n        <UsageChart data={usageData} />\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,SAAA,GAAY,WAAW,CAAA,KAAA,MAAU;AAAA,EACrC,aAAA,EAAe;AAAA,IACb,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,CAAC;AAAA;AAExB,CAAA,CAAE,CAAA;AAEK,MAAM,qBAAqB,MAAM;AACtC,EAAA,MAAM,UAAU,SAAA,EAAU;AAC1B,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,0BAA0B,CAAA;AAC1E,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,QAAA,CAAS,WAAA,GAAc,sBAAsB,CAAA;AAElE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,UAAA,EAAY,OAAA,EAAS,OAAM,GAAI,iBAAA;AAAA,IACzD,SAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,QAAA,GAAW,CAAA,EAAG,uBAAuB,CAAA,cAAA,EAAiB,KAAK,CAAA,MAAA,CAAA;AAEjE,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAM,4BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,gBAAa,OAAA,EAAQ,uBAAA,EAAwB,IAAA,EAAM,EAAA,EAAI,CAAA,EAC1D,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,2BACG,QAAA,EAAA,EAAS,KAAA,EAAM,8BACd,QAAA,kBAAA,IAAA,CAAC,GAAA,EAAA,EAAI,GAAG,CAAA,EACN,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAM,OAAA,EAAQ,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAAQ;AAAA,OAAA,EAAM,CAAA;AAAA,MACvC,CAAC,KAAA,oBACA,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAQ,KAAA,EAAO,EAAE,SAAA,EAAW,CAAA,EAAE,EAAG,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBAC7C,GAAA,CAAC,UAAK,QAAA,EAAA,+BAAA,EAA6B,CAAA;AAAA,QAAO;AAAA,OAAA,EAElD;AAAA,KAAA,EAEJ,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,SAAA,GAAY,OAAA,EAAS,IAAA,GACvB,CAAA,EAAG,OAAA,CAAQ,IAAI,CAAA,GAAA,EAAM,UAAA,CAAW,cAAA,EAAgB,CAAA,iBAAA,CAAA,GAChD,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,4BAAA;AAAA,MACN,SAAA;AAAA,MACA,MAAA,EACE,KAAA,oBACE,GAAA,CAAC,GAAA,EAAA,EAAI,WAAW,OAAA,CAAQ,aAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,MAAM,QAAA,EAAU,QAAA,EAAQ,IAAA,EAAC,OAAA,EAAQ,wBAAuB,CAAA,EACzE,CAAA;AAAA,MAIJ,QAAA,kBAAA,GAAA,CAAC,OAAI,CAAA,EAAG,CAAA,EACN,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAW,CAAA,EAC/B;AAAA;AAAA,GACF;AAEJ;;;;"}