From 228a72d637c3cf30677c98ac0a45c5e3127cc180 Mon Sep 17 00:00:00 2001 From: Fredrik Strand Oseberg Date: Mon, 14 Mar 2022 13:14:26 +0100 Subject: [PATCH] Feat/change form order (#784) * 4.9.0-beta.1 * 4.9.0-beta.2 * fix: mobile guidance WIP * fix: add autofocus * feat: update forms * refactor: mobile guidance * fix: add relative as common class * fix: add max height to codebox --- .../src/assets/img/mobile-guidance-bg.svg | 3 + frontend/src/common.styles.js | 3 + .../ApiTokenForm/ApiTokenForm.styles.ts | 7 - .../api-token/ApiTokenForm/ApiTokenForm.tsx | 2 - .../EnvironmentPermissionAccordion.tsx | 2 +- .../ProjectRoleForm/ProjectRoleForm.tsx | 2 - .../admin/users/UserForm/UserForm.styles.ts | 7 - .../admin/users/UserForm/UserForm.tsx | 2 - .../common/Codebox/Codebox.styles.ts | 2 + .../ConstraintAccordionEditHeader.tsx | 1 + .../FormTemplate/FormTemplate.styles.ts | 24 ++- .../common/FormTemplate/FormTemplate.tsx | 145 ++++++++++++++---- .../common/GeneralSelect/GeneralSelect.tsx | 3 + .../SidebarModal/SidebarModal.styles.ts | 1 + .../StringTruncator/StringTruncator.tsx | 2 +- .../context/ContextForm/ContextForm.styles.ts | 7 - .../context/ContextForm/ContextForm.tsx | 2 - .../FeatureStrategyForm.styles.ts | 1 + ...ectForm.style.ts => ProjectForm.styles.ts} | 7 - .../Project/ProjectForm/ProjectForm.tsx | 4 +- .../StrategyForm/StrategyForm.styles.ts | 8 +- .../strategies/StrategyForm/StrategyForm.tsx | 2 - .../StrategyParameters/StrategyParameters.tsx | 2 +- .../tags/TagTypeForm/TagTypeForm.styles.ts | 7 - .../tags/TagTypeForm/TagTypeForm.tsx | 2 - 25 files changed, 152 insertions(+), 96 deletions(-) create mode 100644 frontend/src/assets/img/mobile-guidance-bg.svg rename frontend/src/component/project/Project/ProjectForm/{ProjectForm.style.ts => ProjectForm.styles.ts} (87%) diff --git a/frontend/src/assets/img/mobile-guidance-bg.svg b/frontend/src/assets/img/mobile-guidance-bg.svg new file mode 100644 index 0000000000..20093fdcf3 --- /dev/null +++ b/frontend/src/assets/img/mobile-guidance-bg.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/common.styles.js b/frontend/src/common.styles.js index 94932df896..4b79b87270 100644 --- a/frontend/src/common.styles.js +++ b/frontend/src/common.styles.js @@ -19,6 +19,9 @@ export const useCommonStyles = makeStyles(theme => ({ marginLeft: '0.8rem !important', }, }, + relative: { + position: 'relative', + }, divider: { margin: '1rem 0', backgroundColor: theme.palette.division.main, diff --git a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts index 969ece267d..a4a89fac41 100644 --- a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts +++ b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.styles.ts @@ -34,13 +34,6 @@ export const useStyles = makeStyles(theme => ({ inputDescription: { marginBottom: '0.5rem', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, permissionErrorContainer: { position: 'relative', }, diff --git a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx index 9f160f0ad2..2f2e3edc4e 100644 --- a/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx +++ b/frontend/src/component/admin/api-token/ApiTokenForm/ApiTokenForm.tsx @@ -65,8 +65,6 @@ const ApiTokenForm: React.FC = ({ return (
-

Token information

-

Who are you generating the token for? diff --git a/frontend/src/component/admin/project-roles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx b/frontend/src/component/admin/project-roles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx index c666290182..1569f80c39 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx @@ -84,7 +84,7 @@ const EnvironmentPermissionAccordion = ({ color="primary" /> } - label={permission.displayName || 'Dummy permission'} + label={permission.displayName} /> ); } diff --git a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx index 3578deb444..01e27cc3fd 100644 --- a/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx +++ b/frontend/src/component/admin/project-roles/ProjectRoleForm/ProjectRoleForm.tsx @@ -128,8 +128,6 @@ const ProjectRoleForm: React.FC = ({ return ( -

Role information

-

What is your role name? diff --git a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts index a179d251c6..068ce842bd 100644 --- a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts +++ b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts @@ -27,13 +27,6 @@ export const useStyles = makeStyles(theme => ({ inputDescription: { marginBottom: '0.5rem', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, permissionErrorContainer: { position: 'relative', }, diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx index 369418c3d3..9bc72d5649 100644 --- a/frontend/src/component/admin/users/UserForm/UserForm.tsx +++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx @@ -63,8 +63,6 @@ const UserForm: React.FC = ({ return ( -

User information

-

Who is the new Unleash user? diff --git a/frontend/src/component/common/Codebox/Codebox.styles.ts b/frontend/src/component/common/Codebox/Codebox.styles.ts index 2adb9aec5b..c92f5a3c94 100644 --- a/frontend/src/component/common/Codebox/Codebox.styles.ts +++ b/frontend/src/component/common/Codebox/Codebox.styles.ts @@ -6,6 +6,8 @@ export const useStyles = makeStyles(theme => ({ padding: '1rem', borderRadius: '3px', position: 'relative', + maxHeight: '500px', + overflow: 'auto', }, code: { margin: 0, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx index 245d6df52f..30f5a85b03 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx @@ -122,6 +122,7 @@ export const ConstraintAccordionEditHeader = ({ id="context-field-select" name="contextName" label="Context Field" + autoFocus options={constraintNameOptions} value={localConstraint.contextName || ''} onChange={( diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts index 870ee72c9d..45829eba08 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts +++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts @@ -28,8 +28,7 @@ export const useStyles = makeStyles(theme => ({ }, }, title: { - color: '#fff', - marginBottom: '1rem', + marginBottom: '1.5rem', fontWeight: 'normal', }, subtitle: { @@ -70,4 +69,25 @@ export const useStyles = makeStyles(theme => ({ }, }, icon: { fill: '#fff' }, + mobileGuidanceBgContainer: { + position: 'absolute', + right: '-3px', + top: '-3px', + backgroundColor: theme.palette.primary.light, + }, + mobileGuidanceBackground: { + position: 'absolute', + right: '-3px', + top: '-3px', + width: '75px', + height: '75px', + }, + mobileGuidanceButton: { + position: 'absolute', + zIndex: 400, + right: 0, + }, + infoIcon: { + fill: '#fff', + }, })); diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx index 394eb99f9b..08ff624225 100644 --- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx +++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx @@ -1,14 +1,16 @@ import { useStyles } from './FormTemplate.styles'; import MenuBookIcon from '@material-ui/icons/MenuBook'; import Codebox from '../Codebox/Codebox'; -import { IconButton, useMediaQuery } from '@material-ui/core'; -import { FileCopy } from '@material-ui/icons'; +import { Collapse, IconButton, useMediaQuery } from '@material-ui/core'; +import { FileCopy, Info } from '@material-ui/icons'; import ConditionallyRender from '../ConditionallyRender'; import Loader from '../Loader/Loader'; import copy from 'copy-to-clipboard'; import useToast from '../../../hooks/useToast'; -import React from 'react'; +import React, { useState } from 'react'; import classNames from 'classnames'; +import { ReactComponent as MobileGuidanceBG } from '../../../assets/img/mobile-guidance-bg.svg'; +import { useCommonStyles } from 'common.styles'; interface ICreateProps { title: string; @@ -19,6 +21,11 @@ interface ICreateProps { formatApiCode: () => string; } +// Components in this file: +// FormTemplate +// MobileGuidance +// Guidance + const FormTemplate: React.FC = ({ title, description, @@ -30,6 +37,7 @@ const FormTemplate: React.FC = ({ }) => { const { setToastData } = useToast(); const styles = useStyles(); + const commonStyles = useCommonStyles(); const smallScreen = useMediaQuery(`(max-width:${900}px)`); const copyCommand = () => { @@ -56,45 +64,114 @@ const FormTemplate: React.FC = ({

- + + +
+ } + />
} - elseShow={<>{children}} + elseShow={ + <> +

{title}

+ {children} + + } />{' '}
+ +

+ API Command{' '} + + + +

+ + + } + /> ); }; +interface IMobileGuidance { + description: string; + documentationLink: string; +} + +const MobileGuidance = ({ + description, + documentationLink, +}: IMobileGuidance) => { + const [open, setOpen] = useState(false); + const styles = useStyles(); + + return ( + <> +
+ +
+ setOpen(prev => !prev)} + > + + + + + + + ); +}; + +interface IGuidanceProps { + description: string; + documentationLink: string; +} + +const Guidance: React.FC = ({ + description, + children, + documentationLink, +}) => { + const styles = useStyles(); + + return ( + + ); +}; + export default FormTemplate; diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx index 8127a90350..90017e3881 100644 --- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx +++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx @@ -14,6 +14,7 @@ export interface ISelectMenuProps { id: string; value?: string; label?: string; + autoFocus?: boolean; options: ISelectOption[]; style?: object; onChange?: OnGeneralSelectChange; @@ -38,6 +39,7 @@ const GeneralSelect: React.FC = ({ defaultValue, id, disabled = false, + autoFocus, className, classes, fullWidth, @@ -70,6 +72,7 @@ const GeneralSelect: React.FC = ({ onChange={onChange} className={className} label={label} + autoFocus={autoFocus} id={id} value={value} IconComponent={KeyboardArrowDownOutlined} diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts b/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts index 6f19c2bd77..4640a4a56b 100644 --- a/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts +++ b/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts @@ -5,6 +5,7 @@ export const useStyles = makeStyles(() => ({ position: 'absolute', top: 0, right: 0, + bottom: 0, height: '100vh', maxWidth: 1300, overflow: 'auto', diff --git a/frontend/src/component/common/StringTruncator/StringTruncator.tsx b/frontend/src/component/common/StringTruncator/StringTruncator.tsx index 85ee8f1b02..00526e758a 100644 --- a/frontend/src/component/common/StringTruncator/StringTruncator.tsx +++ b/frontend/src/component/common/StringTruncator/StringTruncator.tsx @@ -37,7 +37,7 @@ const StringTruncator = ({ } - elseShow={<>{text}} + elseShow={{text}} /> ); }; diff --git a/frontend/src/component/context/ContextForm/ContextForm.styles.ts b/frontend/src/component/context/ContextForm/ContextForm.styles.ts index 66cc6631aa..e22d298ddf 100644 --- a/frontend/src/component/context/ContextForm/ContextForm.styles.ts +++ b/frontend/src/component/context/ContextForm/ContextForm.styles.ts @@ -43,13 +43,6 @@ export const useStyles = makeStyles(theme => ({ inputDescription: { marginBottom: '0.5rem', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, permissionErrorContainer: { position: 'relative', }, diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx index 1170e02a48..1fe9385619 100644 --- a/frontend/src/component/context/ContextForm/ContextForm.tsx +++ b/frontend/src/component/context/ContextForm/ContextForm.tsx @@ -93,8 +93,6 @@ export const ContextForm: React.FC = ({ return ( -

Context information

-

What is your context name? diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts index 47bb62e6eb..beae13f499 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts @@ -14,6 +14,7 @@ export const useStyles = makeStyles(theme => ({ display: 'grid', gridTemplateColumns: 'auto 1fr', gridGap: '.5rem', + fontSize: theme.fontSizes.subHeader, }, icon: { color: theme.palette.primary.main, diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts similarity index 87% rename from frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts rename to frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts index 8bd5c86784..900fb2f9f1 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.style.ts +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts @@ -27,13 +27,6 @@ export const useStyles = makeStyles(theme => ({ inputDescription: { marginBottom: '0.5rem', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, permissionErrorContainer: { position: 'relative', }, diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx index cc40ee91db..9fcc293c6a 100644 --- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx +++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx @@ -1,6 +1,6 @@ import Input from '../../../common/Input/Input'; import { TextField, Button } from '@material-ui/core'; -import { useStyles } from './ProjectForm.style'; +import { useStyles } from './ProjectForm.styles'; import React from 'react'; import { trim } from '../../../common/util'; @@ -38,8 +38,6 @@ const ProjectForm: React.FC = ({ return ( -

Project Information

-

What is your project Id? diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts b/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts index aeef886687..0988c327bb 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts +++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts @@ -9,6 +9,7 @@ export const useStyles = makeStyles(theme => ({ flexDirection: 'column', height: '100%', }, + input: { width: '100%', marginBottom: '1rem' }, selectInput: { marginBottom: '1rem', @@ -43,13 +44,6 @@ export const useStyles = makeStyles(theme => ({ top: '-13px', position: 'relative', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, errorMessage: { fontSize: theme.fontSizes.smallBody, color: theme.palette.error.main, diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx index 5c70a575f4..fbebee88c5 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx +++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx @@ -52,8 +52,6 @@ export const StrategyForm: React.FC = ({ return ( -

Strategy type information

-

What would you like to call your strategy? diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameters.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameters.tsx index 12c9383902..319644ebb1 100644 --- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameters.tsx +++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameters.tsx @@ -15,7 +15,7 @@ export const StrategyParameters = ({ setParams, errors, }: IStrategyParametersProps) => ( -

+
{input.map((item, index) => ( ({ inputDescription: { marginBottom: '0.5rem', }, - formHeader: { - fontWeight: 'normal', - marginTop: '0', - }, - header: { - fontWeight: 'normal', - }, permissionErrorContainer: { position: 'relative', }, diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx index e962fc0714..0a1d3e6757 100644 --- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx +++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx @@ -36,8 +36,6 @@ const TagTypeForm: React.FC = ({ return ( -

Tag information

-

What is your tag name?