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