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

1-1342: show flag naming pattern info when you copy toggles (#4629)

Browse Source 
Because you need to match the pattern when copying toggles, it's
important that we show the required information to the user.

This change adds information about the pattern to the page. This isn't
its final design, but it's more important that the information is
there (to avoid user frustration) than that it is pretty.
This commit is contained in:
Thomas Heartman 2023-09-07 10:22:13 +02:00 committed by GitHub
parent cfbf47d6bd
commit 3b754ec7ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; 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';
const StyledPage = styled(Paper)(({ theme }) => ({ const StyledPage = styled(Paper)(({ theme }) => ({
overflow: 'visible', overflow: 'visible',
@ -69,6 +70,10 @@ export const CopyFeatureToggle = () => {
const { isChangeRequestConfiguredInAnyEnv } = const { isChangeRequestConfiguredInAnyEnv } =
useChangeRequestsEnabled(projectId); useChangeRequestsEnabled(projectId);
const {
project: { featureNaming },
} = useProject(projectId);
const setValue: ChangeEventHandler<HTMLInputElement> = event => { const setValue: ChangeEventHandler<HTMLInputElement> = event => {
const value = trim(event.target.value); const value = trim(event.target.value);
setNewToggleName(value); setNewToggleName(value);
@ -111,6 +116,8 @@ export const CopyFeatureToggle = () => {
if (!feature || !feature.name) return <span>Toggle not found</span>; if (!feature || !feature.name) return <span>Toggle not found</span>;
const displayFeatureNamingInfo = Boolean(featureNaming?.pattern);
return ( return (
<StyledPage className={themeStyles.fullwidth}> <StyledPage className={themeStyles.fullwidth}>
<StyledHeader> <StyledHeader>
@ -130,6 +137,47 @@ export const CopyFeatureToggle = () => {
. You must give the new feature toggle a unique name before . You must give the new feature toggle a unique name before
you can proceed. you can proceed.
</StyledDescription> </StyledDescription>
<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>
</>
}
/>
<ConditionallyRender
condition={Boolean(
featureNaming?.description
)}
show={
<>
<dt>Description</dt>
<dd>
{featureNaming?.description}
</dd>
</>
}
/>
</dl>
</>
}
/>
<StyledForm onSubmit={onSubmit}> <StyledForm onSubmit={onSubmit}>
<TextField <TextField
label="Name" label="Name"
@ -142,6 +190,11 @@ export const CopyFeatureToggle = () => {
variant="outlined" variant="outlined"
size="small" size="small"
aria-required aria-required
aria-details={
displayFeatureNamingInfo
? 'feature-naming-pattern-info'
: undefined
}
autoFocus autoFocus
/> />
<StyledFormControlLabel <StyledFormControlLabel