Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-09 00:18:00 +01:00
Code Issues Projects Releases Wiki Activity

ui: update design for feature naming pattern info (#4656)

Browse Source 
This PR updates the design for the feature naming pattern info. In doing
so, I've extracted the information into a single component.

It also, on @nicolaesocaciu's behest, makes the new toggle form inputs
wider when they have room to grow.

Light mode:

![image](https://github.com/Unleash/unleash/assets/17786332/0923cf95-18e3-4524-8402-7f42a0ac94ec)


Dark mode:

![image](https://github.com/Unleash/unleash/assets/17786332/c2a07f73-8973-42d0-b94a-d7dc4ec38a25)

For copying features it looks like this:


![image](https://github.com/Unleash/unleash/assets/17786332/2a39f17b-4d86-408c-8f3b-5f2b24e82c81)
This commit is contained in:
Thomas Heartman 2023-09-13 08:05:58 +02:00 committed by GitHub
parent c39d815516
commit 03d6ed0c32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 181 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/component/feature/CopyFeature/CopyFeature.tsx
View File

@ -20,6 +20,7 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useChangeRequestsEnabled } from '../../../hooks/useChangeRequestsEnabled';
import useProject from 'hooks/api/getters/useProject/useProject';
import { FeatureNamingPatternInfo } from '../FeatureNamingPatternInfo/FeatureNamingPatternInfo';
const StyledPage = styled(Paper)(({ theme }) => ({
overflow: 'visible',
@ -141,41 +142,9 @@ export const CopyFeatureToggle = () => {
<ConditionallyRender
condition={displayFeatureNamingInfo}
show={
<>
<p>
This project has feature flag naming patterns
enabled, so the name must also match the
configured pattern.
</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>
</>
}
<FeatureNamingPatternInfo
featureNaming={featureNaming!}
/>
<ConditionallyRender
condition={Boolean(
featureNaming?.description
)}
show={
<>
<dt>Description</dt>
<dd>
{featureNaming?.description}
</dd>
</>
}
/>
</dl>
</>
}
/>
<StyledForm onSubmit={onSubmit}>

55
frontend/src/component/feature/FeatureForm/FeatureForm.tsx
View File

@ -22,6 +22,7 @@ import { useNavigate } from 'react-router-dom';
import React from 'react';
import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
import { FeatureNamingType } from 'interfaces/project';
import { FeatureNamingPatternInfo } from '../FeatureNamingPatternInfo/FeatureNamingPatternInfo';
interface IFeatureToggleForm {
type: string;
@ -44,15 +45,9 @@ interface IFeatureToggleForm {
}
const StyledForm = styled('form')({
display: 'flex',
flexDirection: 'column',
height: '100%',
});
const StyledContainer = styled('div')({
maxWidth: '400px',
});
const StyledInputDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1),
}));
@ -82,11 +77,6 @@ const StyledTypeDescription = styled('p')(({ theme }) => ({
position: 'relative',
}));
const StyledFlagNamingInfo = styled('div')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
color: theme.palette.text.secondary,
}));
const StyledButtonContainer = styled('div')({
marginTop: 'auto',
display: 'flex',
@ -147,47 +137,13 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
return (
<StyledForm onSubmit={handleSubmit}>
<StyledContainer>
<StyledInputDescription>
What would you like to call your toggle?
</StyledInputDescription>
<ConditionallyRender
condition={displayFeatureNamingInfo}
show={
<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>
<FeatureNamingPatternInfo featureNaming={featureNaming!} />
}
/>
<StyledInput
@ -268,9 +224,9 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
Impression Data
</Typography>
<p>
When you enable impression data for a feature toggle,
your client SDKs will emit events you can listen for
every time this toggle gets triggered. Learn more in{' '}
When you enable impression data for a feature toggle, your
client SDKs will emit events you can listen for every time
this toggle gets triggered. Learn more in{' '}
<Link
target="_blank"
rel="noopener noreferrer"
@ -296,7 +252,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
/>
</StyledRow>
</StyledFormControl>
</StyledContainer>
<StyledButtonContainer>
{children}
<StyledCancelButton onClick={handleCancel}>

63
frontend/src/component/feature/FeatureNamingPatternInfo/FeatureNamingPatternInfo.tsx Normal file
View File

@ -0,0 +1,63 @@
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>
);
};