feat: UI for playground of change requests (#7721)

## About the changes
UI draft

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx

@@ -8,6 +8,7 @@ import {
 import {
     Autocomplete,
     Box,
+    Button,
     IconButton,
     InputAdornment,
     styled,
@@ -29,6 +30,8 @@ import {
 } from '../../playground.utils';
 import Clear from '@mui/icons-material/Clear';
 import { ProjectSelect } from '../../../../common/ProjectSelect/ProjectSelect';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IPlaygroundConnectionFieldsetProps {
     environments: string[];
@@ -51,6 +54,21 @@ const SmallClear = styled(Clear)({
     fontSize: '1.25rem',
 });
 
+const StyledInput = styled(Input)(() => ({
+    width: '100%',
+}));
+
+const StyledGrid = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    columnGap: theme.spacing(2),
+    rowGap: theme.spacing(4),
+    gridTemplateColumns: '1fr',
+
+    [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: '1fr 1fr',
+    },
+}));
+
 export const PlaygroundConnectionFieldset: VFC<
     IPlaygroundConnectionFieldsetProps
 > = ({
@@ -68,6 +86,10 @@ export const PlaygroundConnectionFieldset: VFC<
 
     const { projects: availableProjects } = useProjects();
 
+    const isChangeRequestPlaygroundEnabled = useUiFlag(
+        'changeRequestPlayground',
+    );
+
     const projectsOptions = [
         allOption,
         ...availableProjects.map(({ name: label, id }) => ({
@@ -209,8 +231,8 @@ export const PlaygroundConnectionFieldset: VFC<
                     Access configuration
                 </Typography>
             </Box>
-            <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
+            <StyledGrid>
-                <Box flex={1}>
+                <Box>
                     <Tooltip
                         arrow
                         title={
@@ -240,7 +262,7 @@ export const PlaygroundConnectionFieldset: VFC<
                         />
                     </Tooltip>
                 </Box>
-                <Box flex={1}>
+                <Box>
                     <Tooltip
                         arrow
                         title={
@@ -258,21 +280,53 @@ export const PlaygroundConnectionFieldset: VFC<
                         />
                     </Tooltip>
                 </Box>
-            </Box>
+                <Box>
-            <Input
+                    <StyledInput
-                sx={{ mt: 2, width: '50%', pr: 1 }}
+                        label='API token'
-                label='API token'
+                        value={token || ''}
-                value={token || ''}
+                        onChange={onSetToken}
-                onChange={onSetToken}
+                        type={'text'}
-                type={'text'}
+                        error={Boolean(tokenError)}
-                error={Boolean(tokenError)}
+                        errorText={tokenError}
-                errorText={tokenError}
+                        placeholder={'Enter your API token'}
-                placeholder={'Enter your API token'}
+                        data-testid={'PLAYGROUND_TOKEN_INPUT'}
-                data-testid={'PLAYGROUND_TOKEN_INPUT'}
+                        InputProps={{
-                InputProps={{
+                            endAdornment: token ? renderClearButton() : null,
-                    endAdornment: token ? renderClearButton() : null,
+                        }}
-                }}
+                    />
-            />
+                </Box>
+                <ConditionallyRender
+                    condition={Boolean(isChangeRequestPlaygroundEnabled)}
+                    show={
+                        <Box sx={{ display: 'flex', gap: 2 }}>
+                            <Box sx={{ flex: 1 }}>
+                                <StyledInput
+                                    label='Change request'
+                                    value={
+                                        '// TODO: Change request #5 (feature1, feature2)'
+                                    }
+                                    onChange={() => {}}
+                                    type={'text'}
+                                    // error={Boolean(tokenError)}
+                                    // errorText={tokenError}
+                                    placeholder={'Enter your API token'}
+                                    data-testid={'PLAYGROUND_TOKEN_INPUT'}
+                                    // disabled
+                                    InputProps={{
+                                        endAdornment: renderClearButton(),
+                                        sx: {
+                                            cursor: 'default',
+                                        },
+                                    }}
+                                />
+                            </Box>
+                            <Button variant='outlined' size='small'>
+                                View change request
+                            </Button>
+                        </Box>
+                    }
+                />
+            </StyledGrid>
         </Box>
     );
 };

frontend/src/interfaces/uiConfig.ts

@@ -96,6 +96,7 @@ export type UiFlags = {
     integrationEvents?: boolean;
     improveCreateFlagFlow?: boolean;
     newEventSearch?: boolean;
+    changeRequestPlayground?: boolean;
 };
 
 export interface IVersionInfo {