diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx index 964e90c5cb..4637521dc9 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTableConfigButton.tsx @@ -10,7 +10,7 @@ import { type ChangeRequestTableConfigButtonProps = Pick< ConfigButtonProps, - 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader' + 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip' > & { search: { label: string; diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx index 5a71b39b6e..76d7d75f73 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.styles.tsx @@ -30,3 +30,14 @@ export const ButtonLabel = styled('span', { width: 'max-content', }, })); + +export const StyledTooltipContent = styled('article')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + paddingBlock: theme.spacing(1), + + '& > *': { + margin: 0, + }, +})); diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx index 6e1621c991..473ac84959 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ConfigButton.tsx @@ -6,18 +6,27 @@ import { StyledPopover, HiddenDescription, ButtonLabel, + StyledTooltipContent, } from './ConfigButton.styles'; import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; export type ConfigButtonProps = { - button: { label: string; icon: ReactNode; labelWidth?: string }; + button: { + label: string; + icon: ReactNode; + labelWidth?: string; + additionalTooltipContent?: ReactNode; + }; onOpen?: () => void; onClose?: () => void; description: string; preventOpen?: boolean; anchorEl: HTMLDivElement | null | undefined; setAnchorEl: (el: HTMLDivElement | null | undefined) => void; - tooltipHeader: string; + tooltip: { + header: string; + additionalContent?: ReactNode; + }; }; export const ConfigButton: FC> = ({ @@ -29,7 +38,7 @@ export const ConfigButton: FC> = ({ preventOpen, anchorEl, setAnchorEl, - tooltipHeader, + tooltip, }) => { const ref = useRef(null); const descriptionId = uuidv4(); @@ -49,10 +58,11 @@ export const ConfigButton: FC> = ({ -

{tooltipHeader}

+ +

{tooltip.header}

{description}

- + {tooltip.additionalContent} +
} variant='custom' > diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx index c8ed1c6ade..66b09bfe07 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/MultiSelectConfigButton.tsx @@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList'; type MultiSelectConfigButtonProps = Pick< ConfigButtonProps, - 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader' + 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip' > & Pick & { selectedOptions: Set; diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx index 072cb86c4e..9c5903e428 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/SingleSelectConfigButton.tsx @@ -4,7 +4,7 @@ import { DropdownList, type DropdownListProps } from './DropdownList'; type SingleSelectConfigButtonProps = Pick< ConfigButtonProps, - 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltipHeader' + 'button' | 'onOpen' | 'onClose' | 'description' | 'tooltip' > & Pick; diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx index 5e4da3427e..610b51922a 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.styles.tsx @@ -77,3 +77,16 @@ export const FormActions = styled(StyledFormSection)(({ theme }) => ({ }, }, })); + +export const StyledDefinitionList = styled('dl')(({ theme }) => ({ + dt: { + fontWeight: 'bold', + '&:after': { + content: '":"', + }, + }, + + 'dd + dt': { + marginBlockStart: theme.spacing(1), + }, +})); diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx index 5783a6518a..2d6f4436cf 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/NewProjectForm.tsx @@ -14,6 +14,7 @@ import { OptionButtons, ProjectDescriptionContainer, ProjectNameContainer, + StyledDefinitionList, StyledForm, StyledHeader, StyledIcon, @@ -70,7 +71,30 @@ const configButtonData = { }, mode: { icon: , - text: 'Mode defines who should be allowed to interact and see your project. Private mode hides the project from anyone except the project owner and members.', + text: "A project's collaboration mode defines who should be allowed see your project and create change requests in it.", + additionalTooltipContent: ( + <> +

The modes and their functions are:

+ +
Open
+
+ Anyone can see the project and anyone can create change + requests. +
+
Protected
+
+ Anyone can see the project, but only admins and project + members can submit change requests. +
+
Private
+
+ Hides the project from users with the "viewer" root role + who are not members of the project. Only project members + and admins can submit change requests. +
+
+ + ), }, changeRequests: { icon: , @@ -180,7 +204,7 @@ export const NewProjectForm: React.FC = ({ ({ @@ -207,7 +231,7 @@ export const NewProjectForm: React.FC = ({ /> ({ value: key, @@ -235,7 +259,12 @@ export const NewProjectForm: React.FC = ({ condition={isEnterprise()} show={ { @@ -261,7 +290,7 @@ export const NewProjectForm: React.FC = ({ condition={isEnterprise()} show={