mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-24 17:51:14 +02:00
f49cc8cd33
This PR updates the UI to reflect the changes to the implicit ^ and $ that we now add. The changes are: 1. Show input adornments for ^ and $ when you create a pattern. 2. Mention that ^ and $ are added implicitly in description. 3. Checks the example you provide against the pattern with added ^ and $ + adds a test for that. Points 1 and 2:  ## Discussion point: I have not touched the information about the pattern yet as the PR that updates that is still in review (#4656), but it would be prudent to also update that info to make it clearer. I can address that in a follow-up PR.
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { styled } from '@mui/material';
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
|
import { FeatureNamingType } from 'interfaces/project';
|
|
|
|
const StyledFlagNamingInfo = styled('article')(({ theme }) => ({
|
|
fontSize: theme.fontSizes.smallBody,
|
|
padding: theme.spacing(2),
|
|
borderRadius: theme.shape.borderRadius,
|
|
backgroundColor: `${theme.palette.background.elevation2}`,
|
|
dl: {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'max-content auto',
|
|
rowGap: theme.spacing(1),
|
|
columnGap: 0,
|
|
},
|
|
dt: {
|
|
color: theme.palette.text.secondary,
|
|
'&::after': { content: '":"' },
|
|
},
|
|
dd: {
|
|
marginInlineStart: theme.spacing(2),
|
|
},
|
|
|
|
marginBlockEnd: theme.spacing(2),
|
|
}));
|
|
|
|
type Props = {
|
|
featureNaming: FeatureNamingType;
|
|
};
|
|
|
|
export const FeatureNamingPatternInfo: React.FC<Props> = ({
|
|
featureNaming,
|
|
}) => {
|
|
return (
|
|
<StyledFlagNamingInfo>
|
|
<p>This project has feature flag naming patterns enabled.</p>
|
|
<dl id="feature-naming-pattern-info">
|
|
<dt>Pattern</dt>
|
|
<dd>
|
|
<code>^{featureNaming.pattern}$</code>
|
|
</dd>
|
|
<ConditionallyRender
|
|
condition={Boolean(featureNaming?.example)}
|
|
show={
|
|
<>
|
|
<dt>Example</dt>
|
|
<dd>{featureNaming?.example}</dd>
|
|
</>
|
|
}
|
|
/>
|
|
<ConditionallyRender
|
|
condition={Boolean(featureNaming?.description)}
|
|
show={
|
|
<>
|
|
<dt>Description</dt>
|
|
<dd>{featureNaming?.description}</dd>
|
|
</>
|
|
}
|
|
/>
|
|
</dl>
|
|
</StyledFlagNamingInfo>
|
|
);
|
|
};
|