fix: replace regex-based isNewlyCreated with explicit isNew prop

Pass isNew from parent state instead of guessing from the role name
pattern. Set true on create/copy, cleared on back/click-to-edit.
This commit is contained in:
Jannis Braun
2026-03-22 00:17:14 +01:00
parent b8c8e39dfd
commit 6122c7829f
@@ -77,6 +77,7 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail); const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
const [editingRoleId, setEditingRoleId] = useState<string | null>(null); const [editingRoleId, setEditingRoleId] = useState<string | null>(null);
const [isNewRole, setIsNewRole] = useState(false);
const [creating, setCreating] = useState(false); const [creating, setCreating] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -96,6 +97,7 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
const uniqueName = getUniqueRoleName('new role', roles); const uniqueName = getUniqueRoleName('new role', roles);
const newRole = await api.roles.create(spaceId, { name: uniqueName }); const newRole = await api.roles.create(spaceId, { name: uniqueName });
await loadSpaceDetail(spaceId); await loadSpaceDetail(spaceId);
setIsNewRole(true);
setEditingRoleId(newRole.id); setEditingRoleId(newRole.id);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create role'); setError(err instanceof Error ? err.message : 'Failed to create role');
@@ -115,9 +117,10 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
key={editingRoleId} key={editingRoleId}
role={role} role={role}
spaceId={spaceId} spaceId={spaceId}
onBack={() => setEditingRoleId(null)} isNew={isNewRole}
onDeleted={() => setEditingRoleId(null)} onBack={() => { setIsNewRole(false); setEditingRoleId(null); }}
onCopied={(newRoleId) => setEditingRoleId(newRoleId)} onDeleted={() => { setIsNewRole(false); setEditingRoleId(null); }}
onCopied={(newRoleId) => { setIsNewRole(true); setEditingRoleId(newRoleId); }}
/> />
); );
} }
@@ -152,7 +155,7 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
return ( return (
<button <button
key={role.id} key={role.id}
onClick={() => setEditingRoleId(role.id)} onClick={() => { setIsNewRole(false); setEditingRoleId(role.id); }}
className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-interactive-hover transition-colors text-left group" className="w-full flex items-center justify-between px-3 py-2 rounded hover:bg-interactive-hover transition-colors text-left group"
> >
<div className="flex items-center gap-2.5 min-w-0"> <div className="flex items-center gap-2.5 min-w-0">
@@ -188,12 +191,13 @@ export function RolesPanel({ spaceId }: RolesPanelProps) {
interface RoleEditViewProps { interface RoleEditViewProps {
role: Role; role: Role;
spaceId: string; spaceId: string;
isNew?: boolean;
onBack: () => void; onBack: () => void;
onDeleted: () => void; onDeleted: () => void;
onCopied: (newRoleId: string) => void; onCopied: (newRoleId: string) => void;
} }
function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditViewProps) { function RoleEditView({ role, spaceId, isNew, onBack, onDeleted, onCopied }: RoleEditViewProps) {
const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail); const loadSpaceDetail = useSpaceStore((s) => s.loadSpaceDetail);
const roles = useSpaceStore((s) => s.roles); const roles = useSpaceStore((s) => s.roles);
const isEveryone = role.id === spaceId; const isEveryone = role.id === spaceId;
@@ -201,7 +205,6 @@ function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditVi
const [draftName, setDraftName] = useState(role.name); const [draftName, setDraftName] = useState(role.name);
const [nameError, setNameError] = useState(''); const [nameError, setNameError] = useState('');
const nameInputRef = useRef<HTMLInputElement>(null); const nameInputRef = useRef<HTMLInputElement>(null);
const isNewlyCreated = /^new role( \d+)?$/i.test(role.name) || /^Copy of /i.test(role.name);
useEffect(() => { useEffect(() => {
if (!isEveryone && nameInputRef.current) { if (!isEveryone && nameInputRef.current) {
@@ -328,7 +331,7 @@ function RoleEditView({ role, spaceId, onBack, onDeleted, onCopied }: RoleEditVi
</button> </button>
</div> </div>
{isNewlyCreated && !hasChanges && ( {isNew && !hasChanges && (
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm"> <div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">
Role created customize it below Role created customize it below
</div> </div>