1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-23 00:16:25 +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:
Thomas Heartman 2024-07-26 09:27:25 +02:00 committed by GitHub
parent 464568dace
commit d96da453a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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',
}}