ui tweaks (#2557)

frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx

@@ -1,12 +1,23 @@
-import { VFC } from 'react';
+import React, { FC, VFC } from 'react';
-import { Alert, Box, styled } from '@mui/material';
+import {
+    Alert,
+    Box,
+    Popover,
+    styled,
+    Tooltip,
+    Typography,
+} from '@mui/material';
 import { ChangeRequestFeatureToggleChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange';
 import { objectId } from 'utils/objectId';
 import { ToggleStatusChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
-import type { IChangeRequest } from '../changeRequest.types';
+import type {
+    IChangeRequest,
+    IChangeRequestDeleteStrategy,
+    IChangeRequestUpdateStrategy,
+} from '../changeRequest.types';
 import {
     Discard,
     StrategyAddedChange,
@@ -17,9 +28,13 @@ import {
     formatStrategyName,
     GetFeatureStrategyIcon,
 } from 'utils/strategyNames';
-import { hasNameField } from '../changeRequest.types';
+import {
+    hasNameField,
+    IChangeRequestAddStrategy,
+} from '../changeRequest.types';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
+import EventDiff from '../../events/EventDiff/EventDiff';
 
 interface IChangeRequestProps {
     changeRequest: IChangeRequest;
@@ -69,6 +84,64 @@ const StyledAlert = styled(Alert)(({ theme }) => ({
     },
 }));
 
+const CodeSnippetPopover: FC<{
+    change:
+        | IChangeRequestAddStrategy
+        | IChangeRequestUpdateStrategy
+        | IChangeRequestDeleteStrategy;
+}> = ({ change }) => {
+    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+    const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handlePopoverClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+
+    return (
+        <>
+            <GetFeatureStrategyIcon strategyName={change.payload.name} />
+
+            <Typography
+                onMouseEnter={handlePopoverOpen}
+                onMouseLeave={handlePopoverClose}
+            >
+                {formatStrategyName(change.payload.name)}
+            </Typography>
+            <Popover
+                id={String(change.id)}
+                sx={{
+                    pointerEvents: 'none',
+                }}
+                open={open}
+                anchorEl={anchorEl}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
+                }}
+                onClose={handlePopoverClose}
+                disableRestoreFocus
+            >
+                <Box sx={{ paddingLeft: 3, paddingRight: 3 }}>
+                    <EventDiff
+                        entry={{
+                            data: change.payload,
+                        }}
+                    />
+                </Box>
+            </Popover>
+        </>
+    );
+};
+
 export const ChangeRequest: VFC<IChangeRequestProps> = ({
     changeRequest,
     onRefetch,
@@ -173,13 +246,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                                             />
                                         }
                                     >
-                                        <GetFeatureStrategyIcon
+                                        <CodeSnippetPopover change={change} />
-                                            strategyName={change.payload.name}
-                                        />
-
-                                        {formatStrategyName(
-                                            change.payload.name
-                                        )}
                                     </StrategyAddedChange>
                                 )}
                                 {change.action === 'deleteStrategy' && (
@@ -198,16 +265,9 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                                         }
                                     >
                                         {hasNameField(change.payload) && (
-                                            <>
+                                            <CodeSnippetPopover
-                                                <GetFeatureStrategyIcon
+                                                change={change}
-                                                    strategyName={
+                                            />
-                                                        change.payload.name
-                                                    }
-                                                />
-                                                {formatStrategyName(
-                                                    change.payload.name
-                                                )}
-                                            </>
                                         )}
                                     </StrategyDeletedChange>
                                 )}
@@ -226,12 +286,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                                             />
                                         }
                                     >
-                                        <GetFeatureStrategyIcon
+                                        <CodeSnippetPopover change={change} />
-                                            strategyName={change.payload.name}
-                                        />
-                                        {formatStrategyName(
-                                            change.payload.name
-                                        )}
                                     </StrategyEditedChange>
                                 )}
                             </Box>

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange.tsx

@@ -61,7 +61,7 @@ export const ChangeRequestFeatureToggleChange: FC<
                     px: 3,
                 }}
             >
-                <ToggleOnIcon color="disabled" />
+                <Typography>Feature toggle name: </Typography>
                 <Typography
                     component={Link}
                     to={`/projects/${projectId}/features/${featureName}`}
@@ -69,7 +69,7 @@ export const ChangeRequestFeatureToggleChange: FC<
                     sx={{ textDecoration: 'none', marginLeft: 1 }}
                     onClick={onNavigate}
                 >
-                    {featureName}
+                    <strong>{featureName}</strong>
                 </Typography>
             </Box>
         </Box>

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestFeatureToggleChange/StrategyChange.tsx

@@ -30,7 +30,7 @@ export const StrategyAddedChange: FC<{ discard?: ReactNode }> = ({
         <ChangeItemWrapper>
             <ChangeItemInfo>
                 <Typography
-                    sx={theme => ({ color: theme.palette.success.main })}
+                    sx={theme => ({ color: theme.palette.success.dark })}
                 >
                     + Adding strategy:
                 </Typography>

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -218,6 +218,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                         key={environmentChangeRequest.id}
                         sx={{
                             padding: 2,
+                            mt: 2,
                             border: '2px solid',
                             borderColor: theme => theme.palette.neutral.light,
                             borderRadius: theme =>
@@ -304,7 +305,7 @@ export const ChangeRequestSidebar: VFC<IChangeRequestSidebarProps> = ({
                                             <StyledSuccessIcon />
                                             <Typography
                                                 color={
-                                                    theme.palette.success.main
+                                                    theme.palette.success.dark
                                                 }
                                             >
                                                 Draft successfully sent to

frontend/src/component/changeRequest/DraftBanner/DraftBanner.tsx

@@ -28,9 +28,8 @@ const DraftBannerContent: FC<{
     return (
         <Box className={classes.content}>
             <DraftBannerContentWrapper>
-                <WarningAmberIcon />
+                <Typography variant="body2">
-                <Typography variant="body2" sx={{ ml: 1, maxWidth: '500px' }}>
+                    <strong>Change request mode</strong> – You have changes{' '}
-                    <strong>Draft mode!</strong> – You have changes{' '}
                     <ConditionallyRender
                         condition={Boolean(changeRequest.environment)}
                         show={

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -99,6 +99,7 @@ type ChangeRequestEditStrategy = ChangeRequestAddStrategy & { id: string };
 
 type ChangeRequestDeleteStrategy = {
     id: string;
+    name: string;
 };
 
 export type ChangeRequestAction =

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/AddFromTemplateCard/AddFromTemplateCard.tsx

@@ -10,7 +10,6 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import { IFeatureStrategyPayload } from 'interfaces/strategy';
-import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
 interface IAddFromTemplateCardProps {
     title: string;