From f77f8a71f83a279d394721b99b04faa2ddbd0c09 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 30 Apr 2024 08:09:07 +0200 Subject: [PATCH] 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. --- .../Project/CreateProject/CreateProject.tsx | 19 +++ .../Project/CreateProject/NewProjectForm.tsx | 121 ++++++++++++++++++ 2 files changed, 140 insertions(+) create mode 100644 frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx diff --git a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx index a9b5e6c528..7324dfdc22 100644 --- a/frontend/src/component/project/Project/CreateProject/CreateProject.tsx +++ b/frontend/src/component/project/Project/CreateProject/CreateProject.tsx @@ -1,5 +1,6 @@ import { useNavigate } from 'react-router-dom'; import ProjectForm from '../ProjectForm/ProjectForm'; +import { NewProjectForm } from './NewProjectForm'; import useProjectForm, { DEFAULT_PROJECT_STICKINESS, } from '../hooks/useProjectForm'; @@ -14,6 +15,7 @@ import { formatUnknownError } from 'utils/formatUnknownError'; import { GO_BACK } from 'constants/navigate'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { Button, styled } from '@mui/material'; +import { useUiFlag } from 'hooks/useUiFlag'; const CREATE_PROJECT_BTN = 'CREATE_PROJECT_BTN'; @@ -45,6 +47,8 @@ const CreateProject = () => { errors, } = useProjectForm(); + const useNewProjectForm = useUiFlag('newCreateProjectUI'); + const { createProject, loading } = useProjectApi(); const handleSubmit = async (e: Event) => { @@ -89,6 +93,21 @@ const CreateProject = () => { navigate(GO_BACK); }; + if (useNewProjectForm) { + return ( + + + + ); + } + return ( ({ + 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 ( + + + icon + New project + + No template + + + + + + + + + + + + + + + + + ); +};