From a1691fead7c32c873a5568111bd2fbbcd91cd37a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Mon, 22 Sep 2025 11:26:52 +0100 Subject: [PATCH] chore: add new strategy icons (#10665) https://linear.app/unleash/issue/2-3879/add-new-strategy-icons Adds new strategy icons in the new "add strategy" modal. image image --- frontend/src/assets/img/strategyCustom.svg | 23 +++++++++++++ frontend/src/assets/img/strategyDefault.svg | 17 ++++++++++ frontend/src/assets/img/strategyGradual.svg | 18 +++++++++++ frontend/src/assets/img/strategyHosts.svg | 23 +++++++++++++ frontend/src/assets/img/strategyIPs.svg | 24 ++++++++++++++ frontend/src/assets/img/strategyOn.svg | 18 +++++++++++ .../FeatureStrategyMenuCard.tsx | 4 +-- .../FeatureStrategyMenuCardIcon.tsx | 32 +++++++++++++++++++ .../FeatureStrategyMenuCards.tsx | 9 ++---- ...eatureStrategyMenuCardsDefaultStrategy.tsx | 6 ++-- ...atureStrategyMenuCardsReleaseTemplates.tsx | 8 ++--- 11 files changed, 166 insertions(+), 16 deletions(-) create mode 100644 frontend/src/assets/img/strategyCustom.svg create mode 100644 frontend/src/assets/img/strategyDefault.svg create mode 100644 frontend/src/assets/img/strategyGradual.svg create mode 100644 frontend/src/assets/img/strategyHosts.svg create mode 100644 frontend/src/assets/img/strategyIPs.svg create mode 100644 frontend/src/assets/img/strategyOn.svg create mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx diff --git a/frontend/src/assets/img/strategyCustom.svg b/frontend/src/assets/img/strategyCustom.svg new file mode 100644 index 0000000000..75ca770d00 --- /dev/null +++ b/frontend/src/assets/img/strategyCustom.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/strategyDefault.svg b/frontend/src/assets/img/strategyDefault.svg new file mode 100644 index 0000000000..86188b5c99 --- /dev/null +++ b/frontend/src/assets/img/strategyDefault.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/strategyGradual.svg b/frontend/src/assets/img/strategyGradual.svg new file mode 100644 index 0000000000..5a91b84f12 --- /dev/null +++ b/frontend/src/assets/img/strategyGradual.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/strategyHosts.svg b/frontend/src/assets/img/strategyHosts.svg new file mode 100644 index 0000000000..29140f8924 --- /dev/null +++ b/frontend/src/assets/img/strategyHosts.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/strategyIPs.svg b/frontend/src/assets/img/strategyIPs.svg new file mode 100644 index 0000000000..d53aa8a699 --- /dev/null +++ b/frontend/src/assets/img/strategyIPs.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/strategyOn.svg b/frontend/src/assets/img/strategyOn.svg new file mode 100644 index 0000000000..aeea9bf6d9 --- /dev/null +++ b/frontend/src/assets/img/strategyOn.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx index cfe28a2012..fac62b2ed7 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx @@ -6,8 +6,8 @@ const StyledIcon = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', '& > svg': { - width: theme.spacing(3.5), - height: theme.spacing(3.5), + width: theme.spacing(6), + height: theme.spacing(6), fill: theme.palette.primary.main, }, })); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx new file mode 100644 index 0000000000..43e06af197 --- /dev/null +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx @@ -0,0 +1,32 @@ +import { ReactComponent as StrategyDefaultIcon } from 'assets/img/strategyDefault.svg'; +import { ReactComponent as StrategyGradualIcon } from 'assets/img/strategyGradual.svg'; +import { ReactComponent as StrategyIPsIcon } from 'assets/img/strategyIPs.svg'; +import { ReactComponent as StrategyOnIcon } from 'assets/img/strategyOn.svg'; +import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplates.svg'; +import { ReactComponent as StrategyHostsIcon } from 'assets/img/strategyHosts.svg'; +import { ReactComponent as StrategyCustomIcon } from 'assets/img/strategyCustom.svg'; + +interface IFeatureStrategyMenuCardIconProps { + name: string; +} + +export const FeatureStrategyMenuCardIcon = ({ + name, +}: IFeatureStrategyMenuCardIconProps) => { + switch (name) { + case 'defaultStrategy': + return ; + case 'default': + return ; + case 'flexibleRollout': + return ; + case 'remoteAddress': + return ; + case 'applicationHostname': + return ; + case 'releasePlanTemplate': + return ; + default: + return ; + } +}; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx index 7475b7f0db..518fe63820 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx @@ -19,15 +19,13 @@ import { UPDATE_PROJECT, } from 'component/providers/AccessProvider/permissions.ts'; import AccessContext from 'contexts/AccessContext.ts'; -import { - formatStrategyName, - getFeatureStrategyIcon, -} from 'utils/strategyNames.tsx'; +import { formatStrategyName } from 'utils/strategyNames.tsx'; import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx'; import { formatCreateStrategyPath } from '../../FeatureStrategyCreate/FeatureStrategyCreate.tsx'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker.ts'; import { FeatureStrategyMenuCardsDefaultStrategy } from './FeatureStrategyMenuCardsDefaultStrategy.tsx'; import type { IStrategy } from 'interfaces/strategy.ts'; +import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx'; const FILTERS = [ { label: 'All', value: null }, @@ -162,14 +160,13 @@ export const FeatureStrategyMenuCards = ({ const renderStrategy = (strategy: IStrategy) => { const name = strategy.displayName || formatStrategyName(strategy.name); - const Icon = getFeatureStrategyIcon(strategy.name); return ( } + icon={} > diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx index 187e3d09ac..2405b7d532 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx @@ -7,7 +7,7 @@ import useToast from 'hooks/useToast.tsx'; import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview'; import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx'; import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx'; -import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx'; +import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx'; interface IFeatureStrategyMenuCardsDefaultStrategyProps { projectId: string; @@ -95,13 +95,11 @@ export const FeatureStrategyMenuCardsDefaultStrategy = ({ projectDefaultStrategy.title || 'This is the default strategy defined for this environment in the project'; - const Icon = getFeatureStrategyIcon(strategyName); - return ( } + icon={} isDefault > {shouldShowHeader && ( @@ -158,7 +156,9 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({ key={template.id} name={template.name} description={template.description} - icon={} + icon={ + + } > onReviewReleasePlan(template)}