Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

feat: advanced playground UI tweaks (#4136)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-07-04 11:37:50 +02:00 committed by GitHub
parent 13def9a3a3
commit 1bee81b475
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/component/playground/Playground/AdvancedPlayground.tsx
View File

@ -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

13
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx
View File

@ -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

2
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
View File

@ -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}

19
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundConnectionFieldset/PlaygroundConnectionFieldset.tsx
View File

@ -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

21
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx
View File

@ -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"

23
frontend/src/component/playground/Playground/PlaygroundForm/renderOption.tsx Normal file
View File

@ -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>
);