Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-03 01:18:43 +02:00
Code Issues Projects Releases Wiki Activity

feat: project mode tooltip (#3353)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-03-21 10:27:46 +01:00 committed by GitHub
parent 4c6cdf562f
commit 9495df6705
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/component/project/Project/ProjectForm/CollaborationModeTooltip.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Box, styled, Typography } from '@mui/material';
import { HelpOutline } from '@mui/icons-material';
import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
import React, { FC } from 'react';
const StyledTitle = styled(Typography)(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
display: ' inline',
}));
const StyledDescription = styled(Typography)(({ theme }) => ({
display: ' inline',
color: theme.palette.text.secondary,
}));
export const CollaborationModeTooltip: FC = () => (
<HtmlTooltip
title={
<>
<Box>
<StyledTitle>open: </StyledTitle>
<StyledDescription>
everyone can submit change requests
</StyledDescription>
</Box>
<Box sx={{ mt: 2 }}>
<StyledTitle>protected: </StyledTitle>
<StyledDescription>
only project members can submit change requests
</StyledDescription>
</Box>
</>
}
arrow
describeChild
>
<HelpOutline />
</HtmlTooltip>
);

1
frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts
View File

@ -13,6 +13,7 @@ export const StyledContainer = styled('div')(() => ({
export const StyledDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1),
marginRight: theme.spacing(1),
}));
export const StyledInput = styled(Input)(({ theme }) => ({

13
frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
View File

@ -14,6 +14,8 @@ import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrate
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import Select from 'component/common/select';
import { DefaultStickiness, ProjectMode } from '../hooks/useProjectForm';
import { Box } from '@mui/material';
import { CollaborationModeTooltip } from './CollaborationModeTooltip';
interface IProjectForm {
projectId: string;
@ -138,14 +140,17 @@ const ProjectForm: React.FC<IProjectForm> = ({
condition={Boolean(projectModeFlag)}
show={
<>
<Box sx={{ display: 'flex' }}>
<StyledDescription>
What is your project mode?
What is your project collaboration mode?
</StyledDescription>
<CollaborationModeTooltip />
</Box>
<Select
id="project-mode"
value={projectMode}
label="Project mode"
name="Project mode"
label="Project collaboration mode"
name="Project collaboration mode"
onChange={e => {
setProjectMode?.(
e.target.value as ProjectMode
@ -155,7 +160,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
{ key: 'open', label: 'open' },
{ key: 'protected', label: 'protected' },
]}
style={{ minWidth: '150px' }}
style={{ minWidth: '200px' }}
></Select>
</>
}