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

feat: make doc cards work

Browse Source
This commit is contained in:
Thomas Heartman 2024-05-22 11:57:55 +02:00
parent afb1f2af61
commit d2325edb44
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
2 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

@ -23,7 +23,7 @@ import { relative } from 'themes/themeStyles';
interface ICreateProps { interface ICreateProps {
title?: ReactNode; title?: ReactNode;
description: string; description: string;
documentationLink: string; documentationLink?: string;
documentationIcon?: ReactNode; documentationIcon?: ReactNode;
documentationLinkLabel?: string; documentationLinkLabel?: string;
loading?: boolean; loading?: boolean;
@ -174,6 +174,8 @@ const StyledDescriptionCard = styled('article')(({ theme }) => ({
zIndex: 1, zIndex: 1,
color: theme.palette.common.white, color: theme.palette.common.white,
position: 'relative', position: 'relative',
paddingBlock: theme.spacing(4),
minHeight: '13rem',
})); }));
const StyledDescription = styled('p')(({ theme }) => ({ const StyledDescription = styled('p')(({ theme }) => ({
@ -181,9 +183,10 @@ const StyledDescription = styled('p')(({ theme }) => ({
})); }));
const StyledLinkContainer = styled('div')(({ theme }) => ({ const StyledLinkContainer = styled('div')(({ theme }) => ({
margin: theme.spacing(3, 0), // margin: theme.spacing(3, 0),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '100%',
})); }));
const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({ const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
@ -330,8 +333,8 @@ const FormTemplate: React.FC<ICreateProps> = ({
}; };
interface IMobileGuidance { interface IMobileGuidance {
description: ReactNode; description: string;
documentationLink: string; documentationLink?: string;
documentationIcon?: ReactNode; documentationIcon?: ReactNode;
documentationLinkLabel?: string; documentationLinkLabel?: string;
} }
@ -360,6 +363,7 @@ const MobileGuidance = ({
<Collapse in={open} timeout={500}> <Collapse in={open} timeout={500}>
<Guidance <Guidance
documentationIcon={documentationIcon} documentationIcon={documentationIcon}
showLink={!!documentationLink}
description={description} description={description}
documentationLink={documentationLink} documentationLink={documentationLink}
documentationLinkLabel={documentationLinkLabel} documentationLinkLabel={documentationLinkLabel}
@ -372,7 +376,7 @@ const MobileGuidance = ({
interface IGuidanceProps { interface IGuidanceProps {
description: string; description: string;
documentationIcon?: ReactNode; documentationIcon?: ReactNode;
documentationLink: string; documentationLink?: string;
documentationLinkLabel?: string; documentationLinkLabel?: string;
showDescription?: boolean; showDescription?: boolean;
showLink?: boolean; showLink?: boolean;
@ -398,12 +402,9 @@ const Guidance: React.FC<IGuidanceProps> = ({
show={documentationIcon} show={documentationIcon}
/> />
<StyledDescription>{description}</StyledDescription> <StyledDescription>{description}</StyledDescription>
</StyledDescriptionCard>
}
/>
<ConditionallyRender <ConditionallyRender
condition={showLink} condition={showLink && !!documentationLink}
show={ show={
<StyledLinkContainer> <StyledLinkContainer>
<StyledLinkIcon /> <StyledLinkIcon />
@ -417,6 +418,9 @@ const Guidance: React.FC<IGuidanceProps> = ({
</StyledLinkContainer> </StyledLinkContainer>
} }
/> />
</StyledDescriptionCard>
}
/>
{children} {children}
</StyledSidebar> </StyledSidebar>

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

@ -9,7 +9,7 @@ import useProjectForm, {
DEFAULT_PROJECT_STICKINESS, DEFAULT_PROJECT_STICKINESS,
} from '../../hooks/useProjectForm'; } from '../../hooks/useProjectForm';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useState } from 'react'; import { type ReactNode, useState } from 'react';
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -74,9 +74,17 @@ export const CreateProjectDialogue = ({
errors, errors,
} = useProjectForm(); } = useProjectForm();
const generalDocumentation = { const generalDocumentation: {
icon: ReactNode;
text: string;
link?: { url: string; label: string };
} = {
icon: <StyledProjectIcon />, icon: <StyledProjectIcon />,
text: 'Projects allows you to group feature flags together in the management UI.', text: 'Projects allows you to group feature flags together in the management UI.',
link: {
url: 'https://docs.getunleash.io/reference/projects',
label: 'Projects documentation',
},
}; };
const [documentation, setDocumentation] = useState(generalDocumentation); const [documentation, setDocumentation] = useState(generalDocumentation);
@ -131,8 +139,8 @@ export const CreateProjectDialogue = ({
disablePadding disablePadding
description={documentation.text} description={documentation.text}
documentationIcon={documentation.icon} documentationIcon={documentation.icon}
documentationLink='https://docs.getunleash.io/reference/projects' documentationLink={documentation.link?.url}
documentationLinkLabel='Projects documentation' documentationLinkLabel={documentation.link?.label}
formatApiCode={formatApiCode} formatApiCode={formatApiCode}
> >
<NewProjectForm <NewProjectForm