-
-
Notifications
You must be signed in to change notification settings - Fork 656
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
rough layout of the new form (#6960)
This PR adds a very rough first implementation of the look of the new project form. *It is not final and does not work yet*. The important part here is that the layout is roughly right (we'll adjust spacing etc later) and that we've got all the basic elements present. I'll hook it up to actually work in an upcoming PR. ![image](https://github.com/Unleash/unleash/assets/17786332/b941702f-ec1b-4d16-9628-ba560b0919f2) The missing icon, text alignment, etc, will also be solved later.
- Loading branch information
1 parent
2ba250f
commit f77f8a7
Showing
2 changed files
with
140 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
import { | ||
Button, | ||
MenuItem, | ||
Select, | ||
TextField, | ||
Typography, | ||
styled, | ||
} from '@mui/material'; | ||
import { GO_BACK } from 'constants/navigate'; | ||
import { CreateButton } from 'component/common/CreateButton/CreateButton'; | ||
import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions'; | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
const StyledForm = styled('form')(({ theme }) => ({ | ||
background: theme.palette.background.default, | ||
})); | ||
|
||
const StyledFormSection = styled('div')(({ theme }) => ({ | ||
'& + *': { | ||
borderBlockStart: `1px solid ${theme.palette.divider}`, | ||
}, | ||
|
||
padding: theme.spacing(7), | ||
})); | ||
|
||
const TopGrid = styled(StyledFormSection)(({ theme }) => ({ | ||
display: 'grid', | ||
gridTemplateAreas: | ||
'"icon header template" "icon project-name project-name" "icon description description"', | ||
gridTemplateColumns: 'minmax(auto, 50px) 1fr auto', | ||
gap: theme.spacing(2), | ||
})); | ||
|
||
const StyledIcon = styled('span')(({ theme }) => ({ | ||
border: `1px solid ${theme.palette.primary.main}`, | ||
width: `100%`, | ||
aspectRatio: '1', | ||
borderRadius: theme.shape.borderRadius, | ||
})); | ||
|
||
const StyledHeader = styled(Typography)(({ theme }) => ({ | ||
gridArea: 'header', | ||
})); | ||
|
||
const StyledTemplateSelector = styled(Select)(({ theme }) => ({ | ||
gridArea: 'template', | ||
})); | ||
|
||
const StyledInput = styled(TextField)(({ theme }) => ({ | ||
width: '100%', | ||
margin: 0, | ||
fieldset: { border: 'none' }, | ||
})); | ||
|
||
const StyledProjectName = styled(StyledInput)(({ theme }) => ({ | ||
gridArea: 'project-name', | ||
'*': { fontSize: theme.typography.h1.fontSize }, | ||
})); | ||
|
||
const StyledProjectDescription = styled(StyledInput)(({ theme }) => ({ | ||
gridArea: 'description', | ||
'*': { fontSize: theme.typography.h2.fontSize }, | ||
})); | ||
|
||
const OptionButtons = styled(StyledFormSection)(({ theme }) => ({ | ||
display: 'flex', | ||
gap: theme.spacing(2), | ||
})); | ||
|
||
const FormActions = styled(StyledFormSection)(({ theme }) => ({ | ||
display: 'flex', | ||
gap: theme.spacing(5), | ||
justifyContent: 'flex-end', | ||
})); | ||
|
||
const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN'; | ||
|
||
export const NewProjectForm = () => { | ||
const navigate = useNavigate(); | ||
|
||
const handleCancel = () => { | ||
navigate(GO_BACK); | ||
}; | ||
|
||
return ( | ||
<StyledForm> | ||
<TopGrid> | ||
<StyledIcon>icon</StyledIcon> | ||
<StyledHeader variant='h2'>New project</StyledHeader> | ||
<StyledTemplateSelector | ||
id='template-selector' | ||
value={'none'} | ||
label='Project creation template' | ||
name='Project creation template' | ||
> | ||
<MenuItem value={'none'}>No template</MenuItem> | ||
</StyledTemplateSelector> | ||
<StyledProjectName label='Project name' required /> | ||
<StyledProjectDescription | ||
label='Description (optional)' | ||
multiline | ||
/> | ||
</TopGrid> | ||
<OptionButtons> | ||
<Button variant='outlined'>4 selected</Button> | ||
<Button variant='outlined'>clientId</Button> | ||
<Button variant='outlined'>Open</Button> | ||
<Button variant='outlined'>1 environment configured</Button> | ||
</OptionButtons> | ||
<FormActions> | ||
<Button onClick={handleCancel}>Cancel</Button> | ||
|
||
<CreateButton | ||
name='project' | ||
permission={CREATE_PROJECT} | ||
data-testid={CREATE_PROJECT_BTN} | ||
/> | ||
</FormActions> | ||
</StyledForm> | ||
); | ||
}; |