feat: cr overview title (#3516)

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

@@ -1,32 +1,42 @@
 import { Box } from '@mui/material';
-import { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Typography, Tooltip } from '@mui/material';
 import TimeAgo from 'react-timeago';
 import { IChangeRequest } from 'component/changeRequest/changeRequest.types';
 import { ChangeRequestStatusBadge } from 'component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge';
 import {
     StyledPaper,
-    StyledContainer,
     StyledHeader,
     StyledInnerContainer,
     StyledAvatar,
     StyledCard,
 } from './ChangeRequestHeader.styles';
 import { Separator } from '../../ChangeRequestSidebar/ChangeRequestSidebar';
+import { ChangeRequestTitle } from '../../ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle';
 
 export const ChangeRequestHeader: FC<{ changeRequest: IChangeRequest }> = ({
     changeRequest,
 }) => {
+    const [title, setTitle] = useState(changeRequest.title);
     return (
         <StyledPaper elevation={0}>
-            <StyledContainer>
+            <ChangeRequestTitle
+                environmentChangeRequest={changeRequest}
+                title={title}
+                setTitle={setTitle}
+            >
                 <StyledHeader variant="h1" sx={{ mr: 1.5 }}>
-                    Change request #{changeRequest.id}
+                    {title}
                 </StyledHeader>
-                <ChangeRequestStatusBadge state={changeRequest.state} />
-            </StyledContainer>
+            </ChangeRequestTitle>
             <StyledInnerContainer>
-                <Typography variant="body2" sx={{ margin: 'auto 0' }}>
+                <ChangeRequestStatusBadge state={changeRequest.state} />
+                <Typography
+                    variant="body2"
+                    sx={theme => ({
+                        margin: theme.spacing('auto', 0, 'auto', 2),
+                    })}
+                >
                     Created{' '}
                     <TimeAgo
                         minPeriod={60}

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

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Box, Button, IconButton, styled } from '@mui/material';
+import { Box, Button, IconButton, styled, Typography } from '@mui/material';
 import Input from 'component/common/Input/Input';
 import { IChangeRequest } from '../../changeRequest.types';
 import { Edit } from '@mui/icons-material';
@@ -14,12 +14,21 @@ const StyledBox = styled(Box)(({ theme }) => ({
     width: '100%',
     '& > div': { width: '100%' },
     justifyContent: 'space-between',
+    marginBottom: theme.spacing(1),
 }));
 
-export const EnvironmentChangeRequestTitle: FC<{
+export const StyledHeader = styled(Typography)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    marginRight: theme.spacing(1),
+    fontSize: theme.fontSizes.mainHeader,
+}));
+
+export const ChangeRequestTitle: FC<{
     environmentChangeRequest: IChangeRequest;
-}> = ({ environmentChangeRequest }) => {
-    const [title, setTitle] = useState(environmentChangeRequest.title);
+    title: string;
+    setTitle: React.Dispatch<React.SetStateAction<string>>;
+}> = ({ environmentChangeRequest, title, setTitle, children }) => {
     const [isDisabled, setIsDisabled] = useState(true);
     const { updateTitle } = useChangeRequestApi();
     const { setToastData, setToastApiError } = useToast();
@@ -46,13 +55,19 @@ export const EnvironmentChangeRequestTitle: FC<{
     };
     return (
         <StyledBox>
-            <Input
-                label="Change request title"
-                id="group-name"
-                value={title}
-                fullWidth
-                onChange={e => setTitle(e.target.value)}
-                disabled={isDisabled}
+            <ConditionallyRender
+                condition={isDisabled}
+                show={children}
+                elseShow={
+                    <Input
+                        label="Change request title"
+                        id="group-name"
+                        value={title}
+                        fullWidth
+                        onChange={e => setTitle(e.target.value)}
+                        disabled={isDisabled}
+                    />
+                }
             />
             <ConditionallyRender
                 condition={isDisabled}
@@ -69,7 +84,7 @@ export const EnvironmentChangeRequestTitle: FC<{
                         <Button
                             variant="contained"
                             color="primary"
-                            sx={theme => ({ marginLeft: theme.spacing(4) })}
+                            sx={theme => ({ marginLeft: theme.spacing(2) })}
                             onClick={() => saveTitle()}
                         >
                             Save

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

@@ -21,7 +21,8 @@ import {
 import { CloudCircle } from '@mui/icons-material';
 import { AddCommentField } from '../../ChangeRequestOverview/ChangeRequestComments/AddCommentField';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
-import { EnvironmentChangeRequestTitle } from './EnvironmentChangeRequestTitle';
+import Input from 'component/common/Input/Input';
+import { ChangeRequestTitle } from './ChangeRequestTitle';
 
 const SubmitChangeRequestButton: FC<{ onClick: () => void; count: number }> = ({
     onClick,
@@ -43,7 +44,7 @@ const ChangeRequestHeader = styled(Box)(({ theme }) => ({
 }));
 
 const ChangeRequestContent = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(0, 3, 3, 3),
+    padding: theme.spacing(3, 3, 3, 3),
     border: '2px solid',
     mb: 5,
     borderColor: theme.palette.divider,
@@ -62,6 +63,7 @@ export const EnvironmentChangeRequest: FC<{
     const navigate = useNavigate();
     const [commentText, setCommentText] = useState('');
     const { user } = useAuthUser();
+    const [title, setTitle] = useState(environmentChangeRequest.title);
 
     return (
         <Box key={environmentChangeRequest.id}>
@@ -94,9 +96,20 @@ export const EnvironmentChangeRequest: FC<{
                     </Box>
                 </Box>
                 <Divider sx={{ my: 3 }} />
-                <EnvironmentChangeRequestTitle
+                <ChangeRequestTitle
                     environmentChangeRequest={environmentChangeRequest}
-                />
+                    title={title}
+                    setTitle={setTitle}
+                >
+                    <Input
+                        label="Change request title"
+                        id="group-name"
+                        fullWidth
+                        value={title}
+                        onChange={() => {}}
+                        disabled={true}
+                    />
+                </ChangeRequestTitle>
             </ChangeRequestHeader>
             <ChangeRequestContent>
                 <Typography variant="body2" color="text.secondary">

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequestTitle.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { FC, useState } from 'react';
 import { screen } from '@testing-library/react';
-import { EnvironmentChangeRequestTitle } from './EnvironmentChangeRequestTitle';
+import { ChangeRequestTitle } from './ChangeRequestTitle';
 import { ChangeRequestState } from '../../changeRequest.types';
 import userEvent from '@testing-library/user-event';
 import { testServerRoute, testServerSetup } from '../../../../utils/testServer';
@@ -32,14 +32,25 @@ testServerRoute(
 
 testServerRoute(server, '/api/admin/ui-config', {});
 
+const TestComponent: FC = () => {
+    const [title, setTitle] = useState(changeRequest.title);
+
+    return (
+        <ChangeRequestTitle
+            environmentChangeRequest={changeRequest}
+            title={title}
+            setTitle={setTitle}
+        >
+            <h1>{title}</h1>
+        </ChangeRequestTitle>
+    );
+};
+
 test('can edit and save title', async () => {
     const user = userEvent.setup();
-
     render(
         <UIProviderContainer>
-            <EnvironmentChangeRequestTitle
-                environmentChangeRequest={changeRequest}
-            />
+            <TestComponent />
         </UIProviderContainer>
     );
 
@@ -53,6 +64,6 @@ test('can edit and save title', async () => {
     const saveButton = await screen.findByText('Save');
     await user.click(saveButton);
 
-    const newTitle = await screen.findByDisplayValue('New title');
+    const newTitle = await screen.findByText('New title');
     expect(newTitle).toBeInTheDocument();
 });