Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: don't break personal dashboard charts if the flag is called . (#8807)

Browse Source 
This PR fixes an issue where the personal dashboard would fail to render
if the flag was called `.` (Curiously, it was not an issue with `..`;
probably because they end up accessing different URLs).

I've taken the very pragmatic approach here of saying "right, we know
that `.` and `..` cause issues, let's just not even try to fetch data
for them".

The option, of course, is to bake in more error handling in the
components, but due to how we've got hooks depending on each other, it's
a bit of a rabbit hole to go down. I think this is a good compromise for
now.

So now, you'll get this instead:

![image](https://github.com/user-attachments/assets/827b1800-d2aa-443e-ba0c-b0b1643ec3f1)

I've also gone and updated the text for when we get a metrics fetching
error, because this probably isn't due to the flag name anymore. If it
is, we want to know.
This commit is contained in:
Thomas Heartman 2024-11-20 14:38:57 +01:00 committed by GitHub
parent 4db1b5df03
commit d661096fb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/component/personalDashboard/FlagMetricsChart.tsx
View File

@ -97,7 +97,7 @@ const EmptyFlagMetricsChart = () => {
const useMetricsEnvironments = (project: string, flagName: string) => {
const [environment, setEnvironment] = useState<string | null>(null);
const { feature } = useFeature(project, flagName);
const activeEnvironments = feature.environments.map((env) => ({
const activeEnvironments = (feature?.environments ?? []).map((env) => ({
name: env.name,
type: env.type,
}));
@ -215,7 +215,7 @@ export const PlaceholderFlagMetricsChartWithWrapper: React.FC<{
);
};
export const FlagMetricsChart: FC<{
const FlagMetricsChartInner: FC<{
flag: { name: string; project: string };
onArchive: () => void;
}> = ({ flag, onArchive }) => {
@ -235,7 +235,7 @@ export const FlagMetricsChart: FC<{
return (
<ChartContainer>
<PlaceholderFlagMetricsChart
label={`Couldn't fetch metrics for the current flag. This may be a transient error, or your flag name ("${flag.name}") may be causing issues.`}
label={`Couldn't fetch metrics for the current flag right now. Please try again. Report this if it doesn't resolve itself.`}
/>
</ChartContainer>
);
@ -283,6 +283,24 @@ export const FlagMetricsChart: FC<{
);
};
export const FlagMetricsChart: FC<{
flag: { name: string; project: string };
onArchive: () => void;
}> = (props) => {
const breakingNames = ['.', '..'];
if (breakingNames.includes(props.flag.name)) {
return (
<ChartContainer>
<PlaceholderFlagMetricsChart
label={`The current flag name ('${props.flag.name}') is known to cause issues due how it affects URLs. We cannot show you a chart for it.`}
/>
</ChartContainer>
);
}
return <FlagMetricsChartInner {...props} />;
};
ChartJS.register(
annotationPlugin,
CategoryScale,