From d96da453a4e7760ee81ecbbd59d1d44aeffdaee3 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 26 Jul 2024 09:27:25 +0200
Subject: [PATCH] fix: show the selected project's name on the button, not its
 ID (#7671)

This change makes it so that we show the name of the project that is
selected on the selection button instead of the ID. There is a chance
that the name is not unique, but I'm willing to take that risk (plus
it's how we do it today).

I've used a useMemo for this, because we have to scan through a list
to find the right project. Sure, it's always a small list (less than
500 items, I should think), but still nice to avoid doing it every
render. Happy to remove it if you think it obfuscates something.

We *could* also use a `useState` hook and initialize it with the right
value, update when it changes, but I actually think this is a better
option (requires less code and less "remember to update this when that
changes").
---
 .../CreateFeatureDialog.tsx                      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
index b605f08107..be7bc7c730 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/CreateFeatureDialog.tsx
@@ -2,7 +2,13 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
-import { type ReactNode, useState, useContext, type FormEvent } from 'react';
+import {
+    type ReactNode,
+    useState,
+    useContext,
+    type FormEvent,
+    useMemo,
+} from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, styled } from '@mui/material';
@@ -169,6 +175,11 @@ export const CreateFeatureDialog = ({
         0,
     );
 
+    const currentProjectName = useMemo(() => {
+        const projectObject = projects.find((p) => p.id === project);
+        return projectObject?.name;
+    }, [project, projects]);
+
     return (
         <StyledDialog open={open} onClose={onClose}>
             <FormTemplate
@@ -233,7 +244,8 @@ export const CreateFeatureDialog = ({
                                             setProject(value);
                                         }}
                                         button={{
-                                            label: project,
+                                            label:
+                                                currentProjectName ?? project,
                                             icon: configButtonData.project.icon,
                                             labelWidth: '12ch',
                                         }}