Skip to content

Commit

Permalink
chore: move flag activity info to the left (#8411)
Browse files Browse the repository at this point in the history
Shifts the display of the activity info to the left instead of cramming
it in next to metrics selectors.

![image](https://github.com/user-attachments/assets/baaafd02-c0d8-40ec-92a0-9b22e7d377d8)
  • Loading branch information
thomasheartman authored Oct 10, 2024
1 parent 42d5eeb commit 2ae9589
Showing 1 changed file with 23 additions and 14 deletions.
37 changes: 23 additions & 14 deletions frontend/src/component/personalDashboard/FlagMetricsChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,10 @@ const EnvironmentSelect: FC<{
);
};

const ExposureAndSelectors = styled(Box)(({ theme }) => ({
const MetricsSelectors = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
gap: theme.spacing(2),
width: '100%',
}));

const ChartContainer = styled('div')(({ theme }) => ({
Expand All @@ -157,6 +156,14 @@ const ChartContainer = styled('div')(({ theme }) => ({

const StyledExposure = styled(FlagExposure)({
alignItems: 'center',
justifySelf: 'start',
});

const ExposureAndMetricsRow = styled('div')({
display: 'flex',
flexFlow: 'row',
justifyContent: 'space-between',
width: '100%',
});

export const FlagMetricsChart: FC<{
Expand All @@ -174,24 +181,26 @@ export const FlagMetricsChart: FC<{

return (
<ChartContainer>
<ExposureAndSelectors>
<ExposureAndMetricsRow>
<StyledExposure
project={flag.project}
flagName={flag.name}
onArchive={onArchive}
/>
{environment ? (
<EnvironmentSelect
environment={environment}
setEnvironment={setEnvironment}
activeEnvironments={activeEnvironments}
<MetricsSelectors>
{environment ? (
<EnvironmentSelect
environment={environment}
setEnvironment={setEnvironment}
activeEnvironments={activeEnvironments}
/>
) : null}
<FeatureMetricsHours
hoursBack={hoursBack}
setHoursBack={setHoursBack}
/>
) : null}
<FeatureMetricsHours
hoursBack={hoursBack}
setHoursBack={setHoursBack}
/>
</ExposureAndSelectors>
</MetricsSelectors>
</ExposureAndMetricsRow>

{noData ? (
<PlaceholderFlagMetricsChart />
Expand Down

0 comments on commit 2ae9589

Please sign in to comment.