mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	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").
This commit is contained in:
		
							parent
							
								
									464568dace
								
							
						
					
					
						commit
						d96da453a4
					
				@ -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',
 | 
			
		||||
                                        }}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user