From d661096fb7a17e16aeac10136adb0159e216dcc1 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 20 Nov 2024 14:38:57 +0100
Subject: [PATCH] fix: don't break personal dashboard charts if the flag is
 called `.` (#8807)

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.
---
 .../personalDashboard/FlagMetricsChart.tsx    | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index 31f7ab2848..2647b346b1 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -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,