feat: advanced playground UI tweaks (#4136)

frontend/src/component/playground/Playground/AdvancedPlayground.tsx

@@ -234,8 +234,6 @@ export const AdvancedPlayground: VFC<{
                         sx={{
                             px: 4,
                             py: 3,
-                            mb: 4,
-                            mt: 2,
                             background: theme.palette.background.elevation2,
                             transition: 'width 0.4s ease',
                             minWidth: matches ? 'auto' : '500px',
@@ -260,7 +258,7 @@ export const AdvancedPlayground: VFC<{
                     sx={theme => ({
                         width: resultsWidth,
                         transition: 'width 0.4s ease',
-                        padding: theme.spacing(4, 2),
+                        padding: theme.spacing(4, 4),
                     })}
                 >
                     <ConditionallyRender

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

@@ -26,7 +26,6 @@ import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashCon
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useToast from 'hooks/useToast';
 import { PlaygroundEditor } from './PlaygroundEditor/PlaygroundEditor';
-import { GuidanceIndicator } from 'component/common/GuidanceIndicator/GuidanceIndicator';
 import { parseDateValue, parseValidDate } from 'component/common/util';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { isStringOrStringArray } from '../../playground.utils';
@@ -188,6 +187,7 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
             return (
                 <Autocomplete
                     disablePortal
+                    limitTags={3}
                     id="context-legal-values"
                     freeSolo
                     filterSelectedOptions
@@ -196,10 +196,11 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
                     onChange={changeContextValue}
                     options={options}
                     multiple={isAdvancedPlayground}
-                    sx={{ width: 200, maxWidth: '100%' }}
+                    sx={{ width: 370, maxWidth: '100%' }}
                     renderInput={(params: any) => (
                         <TextField {...params} label="Value" />
                     )}
+                    disableCloseOnSelect={isAdvancedPlayground!}
                 />
             );
         }
@@ -208,7 +209,10 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
             <TextField
                 label="Value"
                 id="context-value"
-                sx={{ width: 200, maxWidth: '100%' }}
+                sx={{ width: 370, maxWidth: '100%' }}
+                placeholder={
+                    isAdvancedPlayground ? 'value1,value2,value3' : 'value1'
+                }
                 size="small"
                 value={contextValue}
                 onChange={event => setContextValue(event.target.value || '')}
@@ -229,10 +233,9 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
     return (
         <Box>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                <GuidanceIndicator type="secondary">2</GuidanceIndicator>
                 <Typography
                     variant="body2"
-                    color={theme.palette.text.secondary}
+                    color={theme.palette.text.primary}
                     sx={{ ml: 1 }}
                 >
                     Unleash context

frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx

@@ -114,7 +114,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
             </StyledEditorHeader>
             <CodeMirror
                 value={context}
-                height="200px"
+                height="150px"
                 theme={themeMode === 'dark' ? duotoneDark : duotoneLight}
                 extensions={[json()]}
                 onChange={onCodeFieldChange}

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

@@ -1,4 +1,4 @@
-import { ComponentProps, VFC } from 'react';
+import React, { ComponentProps, VFC } from 'react';
 import {
     Autocomplete,
     Box,
@@ -7,8 +7,8 @@ import {
     useTheme,
 } from '@mui/material';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { GuidanceIndicator } from 'component/common/GuidanceIndicator/GuidanceIndicator';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { renderOption } from '../renderOption';
 
 interface IPlaygroundConnectionFieldsetProps {
     environments: string[];
@@ -109,10 +109,9 @@ export const PlaygroundConnectionFieldset: VFC<
     return (
         <Box sx={{ pb: 2 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                <GuidanceIndicator type="secondary">1</GuidanceIndicator>
                 <Typography
                     variant="body2"
-                    color={theme.palette.text.secondary}
+                    color={theme.palette.text.primary}
                     sx={{ ml: 1 }}
                 >
                     Access configuration
@@ -121,13 +120,17 @@ export const PlaygroundConnectionFieldset: VFC<
             <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                 <Autocomplete
                     disablePortal
+                    limitTags={3}
                     id="environment"
                     multiple={isAdvancedPlayground}
                     options={environmentOptions}
-                    sx={{ width: 200, maxWidth: '100%' }}
+                    sx={{ flex: 1 }}
                     renderInput={params => (
                         <TextField {...params} label="Environments" />
                     )}
+                    renderOption={renderOption}
+                    getOptionLabel={({ label }) => label}
+                    disableCloseOnSelect={isAdvancedPlayground!}
                     size="small"
                     value={envValue}
                     onChange={onEnvironmentsChange}
@@ -136,12 +139,16 @@ export const PlaygroundConnectionFieldset: VFC<
                 <Autocomplete
                     disablePortal
                     id="projects"
+                    limitTags={3}
                     multiple={!isAllProjects}
                     options={projectsOptions}
-                    sx={{ width: 200, maxWidth: '100%' }}
+                    sx={{ flex: 1 }}
                     renderInput={params => (
                         <TextField {...params} label="Projects" />
                     )}
+                    renderOption={renderOption}
+                    getOptionLabel={({ label }) => label}
+                    disableCloseOnSelect
                     size="small"
                     value={
                         isAllProjects

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

@@ -1,5 +1,4 @@
 import { Box, Button, Divider, useTheme } from '@mui/material';
-import { GuidanceIndicator } from 'component/common/GuidanceIndicator/GuidanceIndicator';
 import { IEnvironment } from 'interfaces/environments';
 import { FormEvent, VFC } from 'react';
 import { PlaygroundCodeFieldset } from './PlaygroundCodeFieldset/PlaygroundCodeFieldset';
@@ -48,33 +47,17 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
                     ({ name }) => name
                 )}
             />
-            <Divider
+
-                variant="fullWidth"
-                sx={{
-                    mb: 2,
-                    borderColor: theme.palette.divider,
-                    borderStyle: 'dashed',
-                }}
-            />
             <PlaygroundCodeFieldset context={context} setContext={setContext} />
 
-            <Divider
-                variant="fullWidth"
-                sx={{
-                    mt: 3,
-                    mb: 2,
-                    borderColor: theme.palette.divider,
-                }}
-            />
             <Box
                 sx={{
+                    mt: 2,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                 }}
             >
-                <GuidanceIndicator type="secondary">3</GuidanceIndicator>
-
                 <Button
                     variant="contained"
                     size="large"

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

@@ -0,0 +1,23 @@
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import React from 'react';
+import { Checkbox, styled } from '@mui/material';
+
+const SelectOptionCheckbox = styled(Checkbox)(({ theme }) => ({
+    marginRight: theme.spacing(0.4),
+}));
+
+export const renderOption = (
+    props: object,
+    option: { label: string },
+    { selected }: { selected: boolean }
+) => (
+    <li {...props}>
+        <SelectOptionCheckbox
+            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            checked={selected}
+        />
+        {option.label}
+    </li>
+);