Skip to content

Commit 0d70a91

Browse files
talissoncostatalissoncosta
committed
Merge branch 'feat/ui-improvements-2' into feat/github-pages-demo
2 parents 86d26aa + 37caddc commit 0d70a91

File tree

14 files changed

+57
-187
lines changed

14 files changed

+57
-187
lines changed

‎src/api/FlagsmithClient.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export interface FlagsmithFeature {
5050
type?: string;
5151
default_enabled?: boolean;
5252
is_archived?: boolean;
53+
initial_value?: string | null;
5354
}
5455

5556
export interface FlagsmithFeatureVersion {

‎src/components/FlagsTab/EnvironmentTable.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,6 @@ const useStyles = makeStyles(theme => ({
4545
fontSize: '0.85rem',
4646
color: theme.palette.text.primary,
4747
},
48-
envName: {
49-
fontWeight: 500,
50-
},
5148
}));
5249

5350
interface EnvironmentTableProps {
@@ -76,7 +73,7 @@ export const EnvironmentTable = ({
7673
const envState = feature.environment_state?.find(s => s.id === env.id);
7774
const enabled = envState?.enabled ?? feature.default_enabled ?? false;
7875
const segmentCount = feature.num_segment_overrides ?? 0;
79-
const value = feature.type === 'CONFIG' ? (feature as FlagsmithFeature & { initial_value?: string }).initial_value : null;
76+
const value = feature.type === 'CONFIG' ? feature.initial_value : null;
8077

8178
return (
8279
<TableRow key={env.id}>

‎src/components/FlagsTab/ExpandableRow.tsx‎

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,8 @@ import { FlagsmithLink } from '../shared';
2222
import { buildFlagUrl } from '../../theme/flagsmithTheme';
2323
import { EnvironmentTable } from './EnvironmentTable';
2424
import { FeatureDetailsGrid } from './FeatureDetailsGrid';
25-
import { SegmentOverridesSection } from './SegmentOverridesSection';
2625

2726
const useStyles = makeStyles(theme => ({
28-
tableRow: {
29-
'& > td': {
30-
paddingTop: theme.spacing(1.5),
31-
paddingBottom: theme.spacing(1.5),
32-
},
33-
},
3427
flagName: {
3528
display: 'flex',
3629
alignItems: 'center',
@@ -40,17 +33,6 @@ const useStyles = makeStyles(theme => ({
4033
backgroundColor: theme.palette.background.default,
4134
padding: theme.spacing(2),
4235
},
43-
collapseCell: {
44-
paddingBottom: 0,
45-
paddingTop: 0,
46-
},
47-
loadingContainer: {
48-
display: 'flex',
49-
alignItems: 'center',
50-
justifyContent: 'center',
51-
gap: theme.spacing(1),
52-
padding: theme.spacing(2),
53-
},
5436
}));
5537

5638
interface ExpandableRowProps {
@@ -98,8 +80,6 @@ export const ExpandableRow = ({
9880
};
9981

10082
const liveVersion = details?.liveVersion || feature.live_version;
101-
const segmentOverrides =
102-
details?.segmentOverrides ?? feature.num_segment_overrides ?? 0;
10383
const flagUrl = buildFlagUrl(
10484
projectId,
10585
primaryEnvId?.toString() || '',
@@ -108,7 +88,7 @@ export const ExpandableRow = ({
10888

10989
return (
11090
<>
111-
<TableRow hover className={classes.tableRow}>
91+
<TableRow hover>
11292
<TableCell padding="checkbox">
11393
<IconButton
11494
size="small"
@@ -144,13 +124,17 @@ export const ExpandableRow = ({
144124
</TableRow>
145125

146126
<TableRow>
147-
<TableCell className={classes.collapseCell} colSpan={4}>
127+
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={4}>
148128
<Collapse in={open} timeout="auto" unmountOnExit>
149129
<Box className={classes.expandedContent}>
150130
{loadingDetails && (
151-
<Box className={classes.loadingContainer}>
131+
<Box display="flex" alignItems="center" p={2}>
152132
<CircularProgress size={20} />
153-
<Typography variant="body2" color="textSecondary">
133+
<Typography
134+
variant="body2"
135+
color="textSecondary"
136+
style={{ marginLeft: 8 }}
137+
>
154138
Loading feature details...
155139
</Typography>
156140
</Box>
@@ -165,7 +149,6 @@ export const ExpandableRow = ({
165149
<FeatureDetailsGrid
166150
feature={feature}
167151
liveVersion={liveVersion}
168-
segmentOverrides={segmentOverrides}
169152
/>
170153

171154
<Grid item xs={12}>
@@ -174,14 +157,6 @@ export const ExpandableRow = ({
174157
environments={environments}
175158
/>
176159
</Grid>
177-
178-
<Grid item xs={12}>
179-
<SegmentOverridesSection
180-
feature={feature}
181-
details={details}
182-
liveVersion={liveVersion}
183-
/>
184-
</Grid>
185160
</Grid>
186161
)}
187162
</Box>

‎src/components/FlagsTab/FeatureDetailsGrid.tsx‎

Lines changed: 6 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,18 @@ const useStyles = makeStyles(theme => ({
1010
border: `1px solid ${theme.palette.divider}`,
1111
borderRadius: theme.shape.borderRadius,
1212
},
13-
tagsContainer: {
14-
display: 'flex',
15-
flexWrap: 'wrap',
16-
gap: theme.spacing(1),
17-
},
18-
serverKeyChip: {
19-
marginTop: theme.spacing(0.5),
20-
backgroundColor: flagsmithColors.secondary,
21-
color: 'white',
22-
},
2313
}));
2414

2515
type LiveVersionInfo = FlagsmithFeature['live_version'];
2616

2717
interface FeatureDetailsGridProps {
2818
feature: FlagsmithFeature;
2919
liveVersion: LiveVersionInfo;
30-
segmentOverrides: number;
3120
}
3221

3322
export const FeatureDetailsGrid = ({
3423
feature,
3524
liveVersion,
36-
segmentOverrides,
3725
}: FeatureDetailsGridProps) => {
3826
const classes = useStyles();
3927

@@ -57,23 +45,6 @@ export const FeatureDetailsGrid = ({
5745
</Grid>
5846
)}
5947

60-
<Grid item xs={12} md={4}>
61-
<Box className={classes.detailCard}>
62-
<Typography variant="subtitle2" gutterBottom>
63-
Targeting
64-
</Typography>
65-
<Typography variant="body2">
66-
Segment overrides: {segmentOverrides}
67-
</Typography>
68-
{feature.num_identity_overrides !== null &&
69-
feature.num_identity_overrides !== undefined && (
70-
<Typography variant="body2">
71-
Identity overrides: {feature.num_identity_overrides}
72-
</Typography>
73-
)}
74-
</Box>
75-
</Grid>
76-
7748
<Grid item xs={12} md={4}>
7849
<Box className={classes.detailCard}>
7950
<Typography variant="subtitle2" gutterBottom>
@@ -87,15 +58,19 @@ export const FeatureDetailsGrid = ({
8758
<Chip
8859
label="Server Key Only"
8960
size="small"
90-
className={classes.serverKeyChip}
61+
style={{
62+
marginTop: 4,
63+
backgroundColor: flagsmithColors.secondary,
64+
color: 'white',
65+
}}
9166
/>
9267
)}
9368
</Box>
9469
</Grid>
9570

9671
{feature.tags && feature.tags.length > 0 && (
9772
<Grid item xs={12}>
98-
<Box className={classes.tagsContainer}>
73+
<Box display="flex" flexWrap="wrap" style={{ gap: 4 }}>
9974
{feature.tags.map((tag, index) => (
10075
<Chip
10176
key={index}

‎src/components/FlagsTab/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,6 @@ const useStyles = makeStyles(theme => ({
2828
gap: theme.spacing(2),
2929
justifyContent: 'flex-end',
3030
},
31-
errorHint: {
32-
marginTop: theme.spacing(2),
33-
},
3431
}));
3532

3633
export const FlagsTab = () => {
@@ -66,7 +63,7 @@ export const FlagsTab = () => {
6663
<Box p={3}>
6764
<Typography color="error">Error: {error}</Typography>
6865
{!projectId && (
69-
<Typography variant="body2" className={classes.errorHint}>
66+
<Typography variant="body2" style={{ marginTop: 16 }}>
7067
Add a <code>flagsmith.com/project-id</code> annotation to this
7168
entity to view feature flags.
7269
</Typography>

‎src/components/FlagsmithOverviewCard/index.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import { useEntity } from '@backstage/plugin-catalog-react';
1717
import { FlagsmithLink, MiniPagination, LoadingState } from '../shared';
1818
import { buildProjectUrl } from '../../theme/flagsmithTheme';
1919
import { useFlagsmithProject } from '../../hooks';
20-
import { calculateFeatureStats, paginate } from '../../utils';
21-
import { FlagStatsRow } from './FlagStatsRow';
20+
import { paginate } from '../../utils';
2221
import { FeatureFlagRow } from './FeatureFlagRow';
2322

2423
const useStyles = makeStyles(theme => ({
@@ -62,7 +61,6 @@ export const FlagsmithOverviewCard = () => {
6261
page,
6362
PAGE_SIZE,
6463
);
65-
const { enabledCount, disabledCount } = calculateFeatureStats(features);
6664
const dashboardUrl = buildProjectUrl(
6765
projectId || '',
6866
environments[0]?.id?.toString(),
@@ -78,8 +76,6 @@ export const FlagsmithOverviewCard = () => {
7876
</Box>
7977
}
8078
>
81-
<FlagStatsRow enabledCount={enabledCount} disabledCount={disabledCount} />
82-
8379
<TableContainer component={Paper} variant="outlined">
8480
<Table size="small">
8581
<TableHead>

‎src/components/FlagsmithUsageCard/UsageTooltip.tsx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,6 @@
11
import { Box, Typography } from '@material-ui/core';
2-
import { makeStyles } from '@material-ui/core/styles';
32
import { FlagsmithUsageData } from '../../api/FlagsmithClient';
43

5-
const useStyles = makeStyles(theme => ({
6-
container: {
7-
padding: theme.spacing(1.5),
8-
backgroundColor: 'rgba(12, 0, 0, 0.95)',
9-
border: '1px solid #ccc',
10-
borderRadius: theme.shape.borderRadius,
11-
},
12-
title: {
13-
fontWeight: 600,
14-
},
15-
content: {
16-
marginTop: theme.spacing(1),
17-
},
18-
}));
19-
204
interface UsageTooltipProps {
215
active?: boolean;
226
payload?: Array<{
@@ -25,24 +9,29 @@ interface UsageTooltipProps {
259
}
2610

2711
export const UsageTooltip = ({ active, payload }: UsageTooltipProps) => {
28-
const classes = useStyles();
29-
3012
if (!active || !payload || !payload.length) {
3113
return null;
3214
}
3315

3416
const data = payload[0].payload;
3517

3618
return (
37-
<Box className={classes.container}>
38-
<Typography variant="subtitle2" className={classes.title}>
19+
<Box
20+
p={1.5}
21+
style={{
22+
backgroundColor: 'rgba(12, 0, 0, 0.95)',
23+
border: '1px solid #ccc',
24+
borderRadius: 4,
25+
}}
26+
>
27+
<Typography variant="subtitle2" style={{ fontWeight: 600 }}>
3928
{new Date(data.day).toLocaleDateString('en-US', {
4029
month: 'short',
4130
day: 'numeric',
4231
year: 'numeric',
4332
})}
4433
</Typography>
45-
<Box className={classes.content}>
34+
<Box mt={1}>
4635
<Typography variant="body2">
4736
<strong>Flags:</strong> {data.flags ?? 0}
4837
</Typography>

‎src/components/FlagsmithUsageCard/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ const useStyles = makeStyles(theme => ({
1313
alignItems: 'center',
1414
gap: theme.spacing(1),
1515
},
16-
errorHint: {
17-
marginTop: theme.spacing(1),
18-
},
1916
}));
2017

2118
export const FlagsmithUsageCard = () => {
@@ -46,7 +43,7 @@ export const FlagsmithUsageCard = () => {
4643
<Box p={2}>
4744
<Typography color="error">Error: {error}</Typography>
4845
{!orgId && (
49-
<Typography variant="body2" className={classes.errorHint}>
46+
<Typography variant="body2" style={{ marginTop: 8 }}>
5047
Add a <code>flagsmith.com/organization-id</code> annotation to this
5148
entity.
5249
</Typography>

‎src/components/shared/FlagStatusIndicator.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,18 @@ const useStyles = makeStyles(() => ({
99
gap: 6,
1010
},
1111
dot: {
12-
borderRadius: '50%',
13-
flexShrink: 0,
14-
},
15-
dotSmall: {
16-
width: 8,
17-
height: 8,
18-
},
19-
dotMedium: {
2012
width: 10,
2113
height: 10,
14+
borderRadius: '50%',
15+
flexShrink: 0,
2216
},
2317
enabled: {
2418
backgroundColor: flagsmithColors.enabled,
2519
},
2620
disabled: {
2721
backgroundColor: flagsmithColors.disabled,
2822
},
29-
labelSmall: {
30-
fontSize: '0.75rem',
31-
},
32-
labelMedium: {
23+
label: {
3324
fontSize: '0.875rem',
3425
},
3526
}));
@@ -53,16 +44,20 @@ export const FlagStatusIndicator = ({
5344
}: FlagStatusIndicatorProps) => {
5445
const classes = useStyles();
5546

56-
const dotSizeClass = size === 'small' ? classes.dotSmall : classes.dotMedium;
57-
const labelClass = size === 'small' ? classes.labelSmall : classes.labelMedium;
47+
const dotSize = size === 'small' ? 8 : 10;
5848

5949
const indicator = (
6050
<Box className={classes.container}>
6151
<Box
62-
className={`${classes.dot} ${dotSizeClass} ${enabled ? classes.enabled : classes.disabled}`}
52+
className={`${classes.dot} ${enabled ? classes.enabled : classes.disabled}`}
53+
style={{ width: dotSize, height: dotSize }}
6354
/>
6455
{showLabel && (
65-
<Typography variant="body2" className={labelClass}>
56+
<Typography
57+
variant="body2"
58+
className={classes.label}
59+
style={{ fontSize: size === 'small' ? '0.75rem' : '0.875rem' }}
60+
>
6661
{enabled ? 'On' : 'Off'}
6762
</Typography>
6863
)}

0 commit comments

Comments
 (0)