Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

feat: strategy menu interaction between two dialogues. (#9732)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-09 15:14:45 +03:00 committed by GitHub
parent 48b9be709e
commit 8da5fe6811
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View File

@ -38,6 +38,7 @@ const StyledCard = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '100%',
height: '100%',
maxWidth: '30rem',
padding: theme.spacing(1.5, 2),
color: 'inherit',

29
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

@ -70,15 +70,17 @@ export const FeatureStrategyMenu = ({
matchWidth,
disableReason,
}: IFeatureStrategyMenuProps) => {
const [anchor, setAnchor] = useState<Element>();
const [isStrategyMenuDialogOpen, setIsStrategyMenuDialogOpen] =
useState<boolean>(false);
const [onlyReleasePlans, setOnlyReleasePlans] = useState<boolean>(false);
const navigate = useNavigate();
const { trackEvent } = usePlausibleTracker();
const [selectedTemplate, setSelectedTemplate] =
useState<IReleasePlanTemplate>();
const [addReleasePlanOpen, setAddReleasePlanOpen] = useState(false);
const isPopoverOpen = Boolean(anchor);
const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
const dialogId = isStrategyMenuDialogOpen
? 'FeatureStrategyMenuDialog'
: undefined;
const { setToastApiError, setToastData } = useToast();
const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
const { addChange } = useChangeRequestApi();
@ -93,7 +95,7 @@ export const FeatureStrategyMenu = ({
releasePlansEnabled && isChangeRequestConfigured(environmentId);
const onClose = () => {
setAnchor(undefined);
setIsStrategyMenuDialogOpen(false);
};
const openDefaultStrategyCreationModal = (event: React.SyntheticEvent) => {
@ -107,12 +109,12 @@ export const FeatureStrategyMenu = ({
const openMoreStrategies = (event: React.SyntheticEvent) => {
setOnlyReleasePlans(false);
setAnchor(event.currentTarget);
setIsStrategyMenuDialogOpen(true);
};
const openReleasePlans = (event: React.SyntheticEvent) => {
setOnlyReleasePlans(true);
setAnchor(event.currentTarget);
setIsStrategyMenuDialogOpen(true);
};
const addReleasePlan = async (template: IReleasePlanTemplate) => {
@ -158,6 +160,7 @@ export const FeatureStrategyMenu = ({
} finally {
setAddReleasePlanOpen(false);
setSelectedTemplate(undefined);
onClose();
}
};
@ -178,7 +181,7 @@ export const FeatureStrategyMenu = ({
projectId={projectId}
environmentId={environmentId}
onClick={openReleasePlans}
aria-labelledby={popoverId}
aria-labelledby={dialogId}
variant='outlined'
sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
disabled={Boolean(disableReason)}
@ -196,7 +199,7 @@ export const FeatureStrategyMenu = ({
projectId={projectId}
environmentId={environmentId}
onClick={openDefaultStrategyCreationModal}
aria-labelledby={popoverId}
aria-labelledby={dialogId}
variant={variant}
sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
disabled={Boolean(disableReason)}
@ -222,7 +225,7 @@ export const FeatureStrategyMenu = ({
<MoreVert />
</StyledAdditionalMenuButton>
<Dialog
open={isPopoverOpen}
open={isStrategyMenuDialogOpen}
onClose={onClose}
maxWidth='md'
PaperProps={{
@ -244,6 +247,7 @@ export const FeatureStrategyMenu = ({
onReviewReleasePlan={(template) => {
setSelectedTemplate(template);
setAddReleasePlanOpen(true);
onClose();
}}
onClose={onClose}
/>
@ -252,7 +256,12 @@ export const FeatureStrategyMenu = ({
{selectedTemplate && (
<ReleasePlanReviewDialog
open={addReleasePlanOpen}
setOpen={setAddReleasePlanOpen}
setOpen={(open) => {
setAddReleasePlanOpen(open);
if (!open) {
setIsStrategyMenuDialogOpen(true);
}
}}
onConfirm={() => {
addReleasePlan(selectedTemplate);
}}

3
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

@ -17,6 +17,7 @@ interface IFeatureStrategyMenuCardProps {
strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
Partial<IStrategy>;
defaultStrategy?: boolean;
onClose: () => void;
}
const StyledIcon = styled('div')(({ theme }) => ({
@ -67,6 +68,7 @@ export const FeatureStrategyMenuCard = ({
environmentId,
strategy,
defaultStrategy,
onClose,
}: IFeatureStrategyMenuCardProps) => {
const StrategyIcon = getFeatureStrategyIcon(strategy.name);
const strategyName = formatStrategyName(strategy.name);
@ -86,6 +88,7 @@ export const FeatureStrategyMenuCard = ({
buttonTitle: strategy.displayName || strategyName,
},
});
onClose();
};
return (

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

@ -24,7 +24,7 @@ interface IFeatureStrategyMenuCardsProps {
onlyReleasePlans: boolean;
onAddReleasePlan: (template: IReleasePlanTemplate) => void;
onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
onClose?: () => void;
onClose: () => void;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
@ -102,7 +102,6 @@ const StyledIcon = styled('div')(({ theme }) => ({
alignItems: 'center',
}));
// Empty state styling
const EmptyStateContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
@ -170,16 +169,14 @@ export const FeatureStrategyMenuCards = ({
<TitleText variant='h2'>
{onlyReleasePlans ? 'Select template' : 'Select strategy'}
</TitleText>
{onClose && (
<IconButton
size='small'
onClick={onClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
)}
<IconButton
size='small'
onClick={onClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</TitleRow>
<ScrollableContent>
{allStrategies ? (
@ -203,6 +200,7 @@ export const FeatureStrategyMenuCards = ({
environmentId={environmentId}
strategy={defaultStrategy}
defaultStrategy={true}
onClose={onClose}
/>
</CardWrapper>
{preDefinedStrategies.map((strategy) => (
@ -212,6 +210,7 @@ export const FeatureStrategyMenuCards = ({
featureId={featureId}
environmentId={environmentId}
strategy={strategy}
onClose={onClose}
/>
</CardWrapper>
))}
@ -331,6 +330,7 @@ export const FeatureStrategyMenuCards = ({
environmentId
}
strategy={strategy}
onClose={onClose}
/>
</CardWrapper>
))}