From 47c6f438653d1b42570a7f5dbd7e3c6ae34863da Mon Sep 17 00:00:00 2001 From: Simon Hornby Date: Thu, 27 Mar 2025 12:58:56 +0200 Subject: [PATCH] chore: add some getting started info and images when you have no release plans (#9627) --- .../assets/img/howToApplyReleaseTemplates.svg | 91 +++++++++++++++++++ .../img/howToApplyReleaseTemplatesDark.svg | 91 +++++++++++++++++++ .../ReleaseManagement/ReleaseManagement.tsx | 54 ++++++++++- 3 files changed, 235 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/img/howToApplyReleaseTemplates.svg create mode 100644 frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg diff --git a/frontend/src/assets/img/howToApplyReleaseTemplates.svg b/frontend/src/assets/img/howToApplyReleaseTemplates.svg new file mode 100644 index 0000000000..0d97d7ee93 --- /dev/null +++ b/frontend/src/assets/img/howToApplyReleaseTemplates.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg new file mode 100644 index 0000000000..6090dfeb94 --- /dev/null +++ b/frontend/src/assets/img/howToApplyReleaseTemplatesDark.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx index 5cc683b4a1..e2b9bdb8d4 100644 --- a/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx +++ b/frontend/src/component/releases/ReleaseManagement/ReleaseManagement.tsx @@ -1,5 +1,5 @@ import { PageContent } from 'component/common/PageContent/PageContent'; -import { Grid } from '@mui/material'; +import { Box, Grid, Link, styled } from '@mui/material'; import { styles as themeStyles } from 'component/common'; import { usePageTitle } from 'hooks/usePageTitle'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; @@ -13,6 +13,38 @@ import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; import { RELEASE_PLAN_TEMPLATE_CREATE } from '@server/types/permissions'; +import { ReactComponent as HowToApplyReleaseTemplates } from 'assets/img/howToApplyReleaseTemplates.svg'; +import { ReactComponent as HowToApplyReleaseTemplatesDark } from 'assets/img/howToApplyReleaseTemplatesDark.svg'; +import type { Link as RouterLink } from 'react-router-dom'; +import MenuBook from '@mui/icons-material/MenuBook'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; + +const StyledLink = styled(Link)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + padding: 0, + color: theme.palette.links, + fontWeight: theme.fontWeight.medium, + '&:hover, &:focus': { + textDecoration: 'underline', + }, +})); + +const StyledMenuBook = styled(MenuBook)(({ theme }) => ({ + fontSize: theme.spacing(2.25), +})); + +const CenteredHowTo = styled(Box)(({ theme }) => ({ + margin: theme.spacing(3, 0), + display: 'flex', + borderRadius: theme.shape.borderRadiusLarge, + backgroundColor: theme.palette.background.elevation1, + boxShadow: 'none', + justifyContent: 'center', + alignItems: 'center', + '> svg': { display: 'block', width: '100%', height: 'auto' }, +})); export const ReleaseManagement = () => { usePageTitle('Release templates'); @@ -64,6 +96,26 @@ export const ReleaseManagement = () => { )} + + {data.templates.length === 0 ? ( + <> + + } + lightmode={} + /> + + + Read more in our documentation + + + ) : null} ); };