diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx index 7e1c7ff6b5..c38dbc5891 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx @@ -27,7 +27,10 @@ const CardContent = styled('div')(({ theme }) => ({ const HoverButtonsContainer = styled('div')(({ theme }) => ({ position: 'absolute', - right: theme.spacing(2), + background: theme.palette.background.paper, + padding: theme.spacing(1), + top: theme.spacing(1), + right: theme.spacing(1), display: 'flex', gap: theme.spacing(1), opacity: 0, diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx index b6da44ae7f..e59c5726fa 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx @@ -75,9 +75,10 @@ export const FeatureStrategyMenu = ({ usePendingChangeRequests(projectId); const { refetch } = useReleasePlans(projectId, featureId, environmentId); const { addReleasePlanToFeature } = useReleasePlansApi(); - const { isOss } = useUiConfig(); + const { isEnterprise } = useUiConfig(); + const addConfigurationEnabled = useUiFlag('addConfiguration'); const releasePlansEnabled = useUiFlag('releasePlans'); - const displayReleasePlanButton = !isOss() && releasePlansEnabled; + const displayReleasePlanButton = isEnterprise() && releasePlansEnabled; const crProtected = releasePlansEnabled && isChangeRequestConfigured(environmentId); @@ -161,56 +162,81 @@ export const FeatureStrategyMenu = ({ return ( event.stopPropagation()}> - {displayReleasePlanButton ? ( + {addConfigurationEnabled ? ( - Use template + Add configuration - ) : null} + ) : ( + <> + {displayReleasePlanButton ? ( + + Use template + + ) : null} - - {label} - + + {label} + - - - + + + + + )} ({ width: '100%', })); -const StyledInfoIcon = styled(InfoOutlinedIcon)(({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - color: theme.palette.text.secondary, -})); - const StyledIcon = styled('span')(({ theme }) => ({ width: theme.spacing(3), '& > svg': { @@ -162,55 +150,51 @@ export const FeatureStrategyMenuCards = ({ return null; } - if (!templates.length) { - return ( - - - - - - Create your own release templates - - - Standardize your rollouts and save time by reusing - predefined strategies. Find release templates in the - side menu under{' '} - navigate('/release-templates')} - > - Configure > Release templates - - - - ); - } - return ( - Apply a release template + Release templates - - - + - - {templates.map((template) => ( - - onAddReleasePlan(template)} - onPreviewClick={() => - onReviewReleasePlan(template) - } - /> - - ))} - + {!templates.length ? ( + + + + + + Create your own release templates + + + Standardize your rollouts and save time by reusing + predefined strategies. Find release templates in the + side menu under{' '} + navigate('/release-templates')} + > + Configure > Release templates + + + + ) : ( + + {templates.map((template) => ( + + onAddReleasePlan(template)} + onPreviewClick={() => + onReviewReleasePlan(template) + } + /> + + ))} + + )} ); }; @@ -219,7 +203,7 @@ export const FeatureStrategyMenuCards = ({ - {onlyReleasePlans ? 'Select template' : 'Select strategy'} + {onlyReleasePlans ? 'Select template' : 'Add configuration'} - Pre-defined strategy types + Standard strategies - - - + @@ -278,12 +260,10 @@ export const FeatureStrategyMenuCards = ({ Custom strategies - - - + {customStrategies.map((strategy) => ( diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback.tsx index 6a68e40689..712cc58f13 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback.tsx @@ -2,6 +2,8 @@ import type { FC } from 'react'; import { styled, Link } from '@mui/material'; import type { Link as RouterLink } from 'react-router-dom'; import { RELEASE_TEMPLATE_FEEDBACK } from 'constants/links'; +import { useUiFlag } from 'hooks/useUiFlag'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; const StyledLink = styled(Link)(({ theme }) => ({ display: 'flex', @@ -13,14 +15,23 @@ const StyledLink = styled(Link)(({ theme }) => ({ marginRight: 'auto', })); -export const ReleaseTemplatesFeedback: FC = () => ( - - Give feedback to release templates - -); +export const ReleaseTemplatesFeedback: FC = () => { + const { isEnterprise } = useUiConfig(); + const releaseTemplatesEnabled = useUiFlag('releasePlans'); + + if (!isEnterprise() || !releaseTemplatesEnabled) { + return null; + } + + return ( + + Give feedback to release templates + + ); +}; diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index 9a873673ee..950e1bd9ce 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -95,6 +95,7 @@ export type UiFlags = { timestampsInChangeRequestTimeline?: boolean; reportUnknownFlags?: boolean; lifecycleGraphs?: boolean; + addConfiguration?: boolean; }; export interface IVersionInfo { diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index cae6630c2b..aca80f59cd 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -65,7 +65,8 @@ export type IFlagKey = | 'paygInstanceStatsEvents' | 'timestampsInChangeRequestTimeline' | 'lifecycleGraphs' - | 'githubAuth'; + | 'githubAuth' + | 'addConfiguration'; export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>; @@ -305,6 +306,10 @@ const flags: IFlags = { process.env.UNLEASH_EXPERIMENTAL_GITHUB_AUTH, false, ), + addConfiguration: parseEnvVarBoolean( + process.env.UNLEASH_EXPERIMENTAL_ADD_CONFIGURATION, + false, + ), }; export const defaultExperimentalOptions: IExperimentalOptions = { diff --git a/src/server-dev.ts b/src/server-dev.ts index 579bce6495..374e2736d8 100644 --- a/src/server-dev.ts +++ b/src/server-dev.ts @@ -61,6 +61,7 @@ process.nextTick(async () => { paygTrialEvents: true, timestampsInChangeRequestTimeline: true, lifecycleGraphs: true, + addConfiguration: true, }, }, authentication: {