Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

feat: send doc icons to sidebar

Browse Source
This commit is contained in:
Thomas Heartman 2024-05-22 11:39:39 +02:00
parent dfbe0ba2b0
commit 79ee8a66ea
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
View File

@ -1,5 +1,4 @@
import { formatUnknownError } from 'utils/formatUnknownError';
import StickinessIcon from '@mui/icons-material/FormatPaint';
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
import useToast from 'hooks/useToast';
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
@ -15,6 +14,7 @@ import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useNavigate } from 'react-router-dom';
import { Button, Dialog, styled } from '@mui/material';
import { ReactComponent as ProjectIcon } from 'assets/icons/projectIconSmall.svg';
interface ICreateProjectDialogueProps {
open: boolean;
@ -37,6 +37,11 @@ const StyledButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(3),
}));
const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
fill: theme.palette.common.white,
stroke: theme.palette.common.white,
}));
export const CreateProjectDialogue = ({
open,
onClose,
@ -69,8 +74,10 @@ export const CreateProjectDialogue = ({
errors,
} = useProjectForm();
const generalDocumentation =
'Projects allows you to group feature flags together in the management UI.';
const generalDocumentation = {
icon: <StyledProjectIcon />,
text: 'Projects allows you to group feature flags together in the management UI.',
};
const [documentation, setDocumentation] = useState(generalDocumentation);
@ -122,10 +129,10 @@ export const CreateProjectDialogue = ({
<StyledDialog open={open} onClose={onClose}>
<FormTemplate
disablePadding
description={documentation}
description={documentation.text}
documentationIcon={documentation.icon}
documentationLink='https://docs.getunleash.io/reference/projects'
documentationLinkLabel='Projects documentation'
documentationIcon={<StickinessIcon />}
formatApiCode={formatApiCode}
>
<NewProjectForm

34
frontend/src/component/project/Project/CreateProject/NewProjectForm.tsx
View File

@ -15,6 +15,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
import { useStickinessOptions } from 'hooks/useStickinessOptions';
import { ReactComponent as ChangeRequestIcon } from 'assets/icons/merge.svg';
import type { ReactNode } from 'react';
const StyledForm = styled('form')(({ theme }) => ({
background: theme.palette.background.default,
@ -37,7 +38,8 @@ const TopGrid = styled(StyledFormSection)(({ theme }) => ({
}));
const StyledIcon = styled(ProjectIcon)(({ theme }) => ({
color: theme.palette.primary.main,
fill: theme.palette.primary.main,
stroke: theme.palette.primary.main,
}));
const StyledHeader = styled(Typography)(({ theme }) => ({
@ -108,7 +110,7 @@ type FormProps = {
mode: 'Create' | 'Edit';
clearErrors: () => void;
validateProjectId: () => void;
overrideDocumentation: (description: string) => void;
overrideDocumentation: (args: { text: string; icon: ReactNode }) => void;
clearDocumentationOverride: () => void;
};
@ -216,9 +218,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
placeholder: 'Select project environments',
}}
onOpen={() =>
overrideDocumentation(
`Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`,
)
overrideDocumentation({
icon: <EnvironmentsIcon />,
text: `Each feature flag can have a separate configuration per environment. This setting configures which environments your project should start with.`,
})
}
onClose={clearDocumentationOverride}
/>
@ -240,9 +243,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
placeholder: 'Select default stickiness',
}}
onOpen={() =>
overrideDocumentation(
'Stickiness is used to guarantee that your users see the same result when using a gradual rollout. Default stickiness allows you to choose which field is used by default in this project.',
)
overrideDocumentation({
icon: <StickinessIcon />,
text: 'Stickiness is used to guarantee that your users see the same result when using a gradual rollout. Default stickiness allows you to choose which field is used by default in this project.',
})
}
onClose={clearDocumentationOverride}
/>
@ -264,9 +268,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
placeholder: 'Select project mode',
}}
onOpen={() =>
overrideDocumentation(
'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.',
)
overrideDocumentation({
icon: <ProjectModeIcon />,
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.',
})
}
onClose={clearDocumentationOverride}
/>
@ -309,9 +314,10 @@ export const NewProjectForm: React.FC<FormProps> = ({
projectChangeRequestConfiguration
}
onOpen={() =>
overrideDocumentation(
'Change requests can be configured per environment and require changes to go through an approval process before being applied.',
)
overrideDocumentation({
icon: <ChangeRequestIcon />,
text: 'Change requests can be configured per environment and require changes to go through an approval process before being applied.',
})
}
onClose={clearDocumentationOverride}
/>