Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
## About the changes
UI draft
This commit is contained in:
Tymoteusz Czech 2024-08-01 11:16:35 +02:00 committed by GitHub
parent f1e95108d1
commit 4aa3a64530
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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' }}>
<Box flex={1}>
<StyledGrid>
<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>
<Input
sx={{ mt: 2, width: '50%', pr: 1 }}
label='API token'
value={token || ''}
onChange={onSetToken}
type={'text'}
error={Boolean(tokenError)}
errorText={tokenError}
placeholder={'Enter your API token'}
data-testid={'PLAYGROUND_TOKEN_INPUT'}
InputProps={{
endAdornment: token ? renderClearButton() : null,
}}
/>
<Box>
<StyledInput
label='API token'
value={token || ''}
onChange={onSetToken}
type={'text'}
error={Boolean(tokenError)}
errorText={tokenError}
placeholder={'Enter your API token'}
data-testid={'PLAYGROUND_TOKEN_INPUT'}
InputProps={{
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>
);
};

1
frontend/src/interfaces/uiConfig.ts
View File

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