Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-21 13:47:39 +02:00
Code Issues Projects Releases Wiki Activity

fix: regexes in flag naming patterns will now break when necessary (#10067)

Browse Source 
This prevents the regex pattterns from causing overflows in chrome and
pushing the create button off screen (firefox already handled it
🤷).

We don't provide the *best* experience when you have super long flag
patterns, but we can potentially look into that later. For now, this
fixes the immediate issue.

Before the fix:
Chrome:
<img width="1519" alt="image"
src="https://github.com/user-attachments/assets/5bcb717c-67f0-4c7b-9ac1-29e9bdaf568e"
/>

Firefox:
<img width="1385" alt="image"
src="https://github.com/user-attachments/assets/19f38233-f6cd-45f0-9766-76b954f2eed4"
/>


After the fix:
Chrome:
<img width="1383" alt="image"
src="https://github.com/user-attachments/assets/3d9bb6dd-b31c-45aa-9c4e-baa96ba1c16b"
/>

Firefox is the same
This commit is contained in:
Thomas Heartman 2025-06-02 08:53:51 +02:00 committed by GitHub
parent 63bf01d211
commit 895cb1aab3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/common/DialogFormTemplate/NamingPatternInfo.tsx
View File

@ -34,6 +34,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
margin: 0, margin: 0,
})); }));
const BreakableCode = styled('code')({
overflowWrap: 'anywhere',
});
type Props = { type Props = {
naming: CreateFeatureNamingPatternSchema; naming: CreateFeatureNamingPatternSchema;
}; };
@ -48,14 +52,15 @@ export const NamingPatternInfo: React.FC<Props> = ({ naming }) => {
aria-controls={controlId} aria-controls={controlId}
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
> >
Name must match:&nbsp;<code>^{naming.pattern}$</code> Name must match:&nbsp;
<BreakableCode>^{naming.pattern}$</BreakableCode>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<p>The name must match this pattern:</p> <p>The name must match this pattern:</p>
<dl id='naming-pattern-info'> <dl id='naming-pattern-info'>
<dt>Pattern</dt> <dt>Pattern</dt>
<dd> <dd>
<code>^{naming.pattern}$</code> <BreakableCode>^{naming.pattern}$</BreakableCode>
</dd> </dd>
<ConditionallyRender <ConditionallyRender
condition={Boolean(naming?.example)} condition={Boolean(naming?.example)}