fix: feedback button (#9644)

Fix alignment of "add strategy" & "add template" buttons

---------

Co-authored-by: Simon Hornby <sighphyre@users.noreply.github.com>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -5,7 +5,7 @@ import PermissionButton, {
     type IPermissionButtonProps,
 } from 'component/common/PermissionButton/PermissionButton';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import { Popover, styled, Link } from '@mui/material';
+import { Popover, styled } from '@mui/material';
 import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
 import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate';
 import MoreVert from '@mui/icons-material/MoreVert';
@@ -20,9 +20,7 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useUiFlag } from 'hooks/useUiFlag';
-import type { Link as RouterLink } from 'react-router-dom';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { RELEASE_TEMPLATE_FEEDBACK } from 'constants/links';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -33,14 +31,11 @@ interface IFeatureStrategyMenuProps {
     matchWidth?: boolean;
     size?: IPermissionButtonProps['size'];
     disableReason?: string;
-    allowReleasePlanFeedback?: boolean;
 }
 
 const StyledStrategyMenu = styled('div')(({ theme }) => ({
-    flexShrink: 0,
     display: 'flex',
     flexFlow: 'row',
-    flex: 1,
     justifyContent: 'flex-end',
     gap: theme.spacing(1),
 }));
@@ -52,19 +47,6 @@ const StyledAdditionalMenuButton = styled(PermissionButton)(({ theme }) => ({
     paddingBlock: 0,
 }));
 
-const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.spacing(1),
-    color: theme.palette.links,
-    fontWeight: theme.typography.fontWeightMedium,
-    textDecoration: 'none',
-}));
-
-const Spacer = styled('div')(({ theme }) => ({
-    flex: 1,
-}));
-
 export const FeatureStrategyMenu = ({
     label,
     projectId,
@@ -74,7 +56,6 @@ export const FeatureStrategyMenu = ({
     size,
     matchWidth,
     disableReason,
-    allowReleasePlanFeedback = false,
 }: IFeatureStrategyMenuProps) => {
     const [anchor, setAnchor] = useState<Element>();
     const [onlyReleasePlans, setOnlyReleasePlans] = useState<boolean>(false);
@@ -180,38 +161,22 @@ export const FeatureStrategyMenu = ({
     return (
         <StyledStrategyMenu onClick={(event) => event.stopPropagation()}>
             {displayReleasePlanButton ? (
-                <>
+                <PermissionButton
-                    {allowReleasePlanFeedback ? (
+                    data-testid='ADD_TEMPLATE_BUTTON'
-                        <>
+                    permission={CREATE_FEATURE_STRATEGY}
-                            <StyledLink
+                    projectId={projectId}
-                                component='a'
+                    environmentId={environmentId}
-                                href={RELEASE_TEMPLATE_FEEDBACK}
+                    onClick={openReleasePlans}
-                                underline='hover'
+                    aria-labelledby={popoverId}
-                                rel='noopener noreferrer'
+                    variant='outlined'
-                                target='_blank'
+                    sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
-                            >
+                    disabled={Boolean(disableReason)}
-                                Give feedback to release templates
+                    tooltipProps={{
-                            </StyledLink>
+                        title: disableReason ? disableReason : undefined,
-                            <Spacer />
+                    }}
-                        </>
+                >
-                    ) : null}
+                    Use template
-                    <PermissionButton
+                </PermissionButton>
-                        data-testid='ADD_TEMPLATE_BUTTON'
-                        permission={CREATE_FEATURE_STRATEGY}
-                        projectId={projectId}
-                        environmentId={environmentId}
-                        onClick={openReleasePlans}
-                        aria-labelledby={popoverId}
-                        variant='outlined'
-                        sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
-                        disabled={Boolean(disableReason)}
-                        tooltipProps={{
-                            title: disableReason ? disableReason : undefined,
-                        }}
-                    >
-                        Use template
-                    </PermissionButton>
-                </>
             ) : null}
 
             <PermissionButton

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback.tsx

@@ -0,0 +1,26 @@
+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';
+
+const StyledLink = styled(Link<typeof RouterLink | 'a'>)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    color: theme.palette.links,
+    fontWeight: theme.typography.fontWeightMedium,
+    textDecoration: 'none',
+    marginRight: 'auto',
+}));
+
+export const ReleaseTemplatesFeedback: FC = () => (
+    <StyledLink
+        component='a'
+        href={RELEASE_TEMPLATE_FEEDBACK}
+        underline='hover'
+        rel='noopener noreferrer'
+        target='_blank'
+    >
+        Give feedback to release templates
+    </StyledLink>
+);

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -14,6 +14,8 @@ import { FeatureOverviewEnvironmentToggle } from './EnvironmentHeader/FeatureOve
 import { useState } from 'react';
 import type { IReleasePlan } from 'interfaces/releasePlans';
 import { EnvironmentAccordionBody as NewEnvironmentAccordionBody } from './EnvironmentAccordionBody/EnvironmentAccordionBody';
+import { Box } from '@mui/material';
+import { ReleaseTemplatesFeedback } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/ReleaseTemplatesFeedback/ReleaseTemplatesFeedback';
 
 const StyledFeatureOverviewEnvironment = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
@@ -43,8 +45,7 @@ const NewStyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
 const StyledAccordionFooter = styled('footer')(({ theme }) => ({
     padding: theme.spacing(2, 3, 3),
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
-    justifyContent: 'end',
     gap: theme.spacing(2),
 }));
 
@@ -126,13 +127,17 @@ export const FeatureOverviewEnvironment = ({
                         />
                     </StyledEnvironmentAccordionContainer>
                     <StyledAccordionFooter>
-                        <FeatureStrategyMenu
+                        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
-                            label='Add strategy'
+                            <ReleaseTemplatesFeedback />
-                            projectId={projectId}
+                            <Box ml='auto'>
-                            featureId={featureId}
+                                <FeatureStrategyMenu
-                            environmentId={environment.name}
+                                    label='Add strategy'
-                            allowReleasePlanFeedback={true}
+                                    projectId={projectId}
-                        />
+                                    featureId={featureId}
+                                    environmentId={environment.name}
+                                />
+                            </Box>
+                        </Box>
                         {isOss() && environment?.type === 'production' ? (
                             <UpgradeChangeRequests />
                         ) : null}