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

chore: small updates to the new add strategy modal design (#10646)

Browse Source 
https://linear.app/unleash/issue/2-3877/small-changes-to-match-the-new-designs

This adds 2 changes in our new "add strategy" modal to better align with
our sketches:
- Remove the "Custom strategies" filter: According to the designs,
they're part of the "Advanced strategies" filter;
- Update the project default tooltip in case you don't have access to
the project default strategy configuration;

Here are the design references:

<img width="330" height="148" alt="image"
src="https://github.com/user-attachments/assets/c508e776-5f54-4402-b148-321ea99e1134"
/>

<img width="657" height="371" alt="image"
src="https://github.com/user-attachments/assets/c9d8be22-99a3-46e3-b7a7-a77b94e0aa60"
/>

And this is how it looks like after this PR:

<img width="335" height="116" alt="image"
src="https://github.com/user-attachments/assets/f1e0cbec-d79a-49b6-a8a7-1b15f3f2726e"
/>

<img width="984" height="401" alt="image"
src="https://github.com/user-attachments/assets/7271ab5c-721e-4624-aebe-d3c5d7e402dd"
/>
This commit is contained in:
Nuno Góis 2025-09-11 10:50:16 +01:00 committed by GitHub
parent fabf76e12c
commit c0eedba400
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
View File

@ -7,13 +7,19 @@ import CloseIcon from '@mui/icons-material/Close';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.tsx';
import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview.ts';
import { useMemo, useState } from 'react';
import { useContext, useMemo, useState } from 'react';
import {
FeatureStrategyMenuCardsSection,
StyledStrategyModalSectionHeader,
} from './FeatureStrategyMenuCardsSection.tsx';
import { FeatureStrategyMenuCardsReleaseTemplates } from './FeatureStrategyMenuCardsReleaseTemplates.tsx';
import { QuickFilters } from 'component/common/QuickFilters/QuickFilters.tsx';
import {
PROJECT_DEFAULT_STRATEGY_READ,
PROJECT_DEFAULT_STRATEGY_WRITE,
UPDATE_PROJECT,
} from 'component/providers/AccessProvider/permissions.ts';
import AccessContext from 'contexts/AccessContext.ts';
const FILTERS = [
{ label: 'All', value: null },
@ -21,7 +27,6 @@ const FILTERS = [
{ label: 'Standard strategies', value: 'standard' },
{ label: 'Release templates', value: 'releaseTemplates' },
{ label: 'Advanced strategies', value: 'advanced' },
{ label: 'Custom strategies', value: 'custom' },
] as const;
export type StrategyFilterValue = (typeof FILTERS)[number]['value'];
@ -80,6 +85,7 @@ export const FeatureStrategyMenuCards = ({
onClose,
}: IFeatureStrategyMenuCardsProps) => {
const { isEnterprise } = useUiConfig();
const { hasAccess } = useContext(AccessContext);
const { strategies } = useStrategies();
const { project } = useProjectOverview(projectId);
@ -121,8 +127,11 @@ export const FeatureStrategyMenuCards = ({
() =>
FILTERS.filter(({ value }) => {
if (value === 'releaseTemplates') return isEnterprise();
if (value === 'advanced') return advancedStrategies.length > 0;
if (value === 'custom') return customStrategies.length > 0;
if (value === 'advanced')
return (
advancedStrategies.length > 0 ||
customStrategies.length > 0
);
return true;
}),
[isEnterprise, advancedStrategies.length, customStrategies.length],
@ -132,6 +141,15 @@ export const FeatureStrategyMenuCards = ({
return filter === null || filter === key;
};
const hasAccessToDefaultStrategyConfig = hasAccess(
[
UPDATE_PROJECT,
PROJECT_DEFAULT_STRATEGY_READ,
PROJECT_DEFAULT_STRATEGY_WRITE,
],
projectId,
);
return (
<StyledContainer>
<StyledHeader>
@ -164,16 +182,24 @@ export const FeatureStrategyMenuCards = ({
<HelpIcon
htmlTooltip
tooltip={
<>
This is set per project, per
environment, and can be
configured{' '}
<StyledLink
to={`/projects/${projectId}/settings/default-strategy`}
>
here
</StyledLink>
</>
hasAccessToDefaultStrategyConfig ? (
<>
This is set per project, per
environment, and can be
configured{' '}
<StyledLink
to={`/projects/${projectId}/settings/default-strategy`}
>
here
</StyledLink>
</>
) : (
<>
This is set per project, per
environment. Contact project
owner to change it.
</>
)
}
size='16px'
/>
@ -223,33 +249,37 @@ export const FeatureStrategyMenuCards = ({
setFilter={setFilter}
/>
)}
{advancedStrategies.length > 0 && shouldRender('advanced') && (
<FeatureStrategyMenuCardsSection title='Advanced strategies'>
{advancedStrategies.map((strategy) => (
<FeatureStrategyMenuCard
key={strategy.name}
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
))}
</FeatureStrategyMenuCardsSection>
)}
{customStrategies.length > 0 && shouldRender('custom') && (
<FeatureStrategyMenuCardsSection title='Custom strategies'>
{customStrategies.map((strategy) => (
<FeatureStrategyMenuCard
key={strategy.name}
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
))}
</FeatureStrategyMenuCardsSection>
{shouldRender('advanced') && (
<>
{advancedStrategies.length > 0 && (
<FeatureStrategyMenuCardsSection title='Advanced strategies'>
{advancedStrategies.map((strategy) => (
<FeatureStrategyMenuCard
key={strategy.name}
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
))}
</FeatureStrategyMenuCardsSection>
)}
{customStrategies.length > 0 && (
<FeatureStrategyMenuCardsSection title='Custom strategies'>
{customStrategies.map((strategy) => (
<FeatureStrategyMenuCard
key={strategy.name}
projectId={projectId}
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
))}
</FeatureStrategyMenuCardsSection>
)}
</>
)}
</StyledScrollableContent>
</StyledContainer>