From d2325edb4454c7dc4c5ae67879d9418cbdea916c Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 22 May 2024 11:57:55 +0200
Subject: [PATCH] feat: make doc cards work

---
 .../common/FormTemplate/FormTemplate.tsx      | 46 ++++++++++---------
 .../CreateProjectDialog.tsx                   | 16 +++++--
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index deca849908..fb9a32a761 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -23,7 +23,7 @@ import { relative } from 'themes/themeStyles';
 interface ICreateProps {
     title?: ReactNode;
     description: string;
-    documentationLink: string;
+    documentationLink?: string;
     documentationIcon?: ReactNode;
     documentationLinkLabel?: string;
     loading?: boolean;
@@ -174,6 +174,8 @@ const StyledDescriptionCard = styled('article')(({ theme }) => ({
     zIndex: 1,
     color: theme.palette.common.white,
     position: 'relative',
+    paddingBlock: theme.spacing(4),
+    minHeight: '13rem',
 }));
 
 const StyledDescription = styled('p')(({ theme }) => ({
@@ -181,9 +183,10 @@ const StyledDescription = styled('p')(({ theme }) => ({
 }));
 
 const StyledLinkContainer = styled('div')(({ theme }) => ({
-    margin: theme.spacing(3, 0),
+    // margin: theme.spacing(3, 0),
     display: 'flex',
     alignItems: 'center',
+    width: '100%',
 }));
 
 const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
@@ -330,8 +333,8 @@ const FormTemplate: React.FC<ICreateProps> = ({
 };
 
 interface IMobileGuidance {
-    description: ReactNode;
-    documentationLink: string;
+    description: string;
+    documentationLink?: string;
     documentationIcon?: ReactNode;
     documentationLinkLabel?: string;
 }
@@ -360,6 +363,7 @@ const MobileGuidance = ({
             <Collapse in={open} timeout={500}>
                 <Guidance
                     documentationIcon={documentationIcon}
+                    showLink={!!documentationLink}
                     description={description}
                     documentationLink={documentationLink}
                     documentationLinkLabel={documentationLinkLabel}
@@ -372,7 +376,7 @@ const MobileGuidance = ({
 interface IGuidanceProps {
     description: string;
     documentationIcon?: ReactNode;
-    documentationLink: string;
+    documentationLink?: string;
     documentationLinkLabel?: string;
     showDescription?: boolean;
     showLink?: boolean;
@@ -398,23 +402,23 @@ const Guidance: React.FC<IGuidanceProps> = ({
                             show={documentationIcon}
                         />
                         <StyledDescription>{description}</StyledDescription>
-                    </StyledDescriptionCard>
-                }
-            />
 
-            <ConditionallyRender
-                condition={showLink}
-                show={
-                    <StyledLinkContainer>
-                        <StyledLinkIcon />
-                        <StyledDocumentationLink
-                            href={documentationLink}
-                            rel='noopener noreferrer'
-                            target='_blank'
-                        >
-                            {documentationLinkLabel}
-                        </StyledDocumentationLink>
-                    </StyledLinkContainer>
+                        <ConditionallyRender
+                            condition={showLink && !!documentationLink}
+                            show={
+                                <StyledLinkContainer>
+                                    <StyledLinkIcon />
+                                    <StyledDocumentationLink
+                                        href={documentationLink}
+                                        rel='noopener noreferrer'
+                                        target='_blank'
+                                    >
+                                        {documentationLinkLabel}
+                                    </StyledDocumentationLink>
+                                </StyledLinkContainer>
+                            }
+                        />
+                    </StyledDescriptionCard>
                 }
             />
 
diff --git a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
index c2bb94edc5..4714b629d3 100644
--- a/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
+++ b/frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx
@@ -9,7 +9,7 @@ import useProjectForm, {
     DEFAULT_PROJECT_STICKINESS,
 } from '../../hooks/useProjectForm';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';
@@ -74,9 +74,17 @@ export const CreateProjectDialogue = ({
         errors,
     } = useProjectForm();
 
-    const generalDocumentation = {
+    const generalDocumentation: {
+        icon: ReactNode;
+        text: string;
+        link?: { url: string; label: string };
+    } = {
         icon: <StyledProjectIcon />,
         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);
@@ -131,8 +139,8 @@ export const CreateProjectDialogue = ({
                 disablePadding
                 description={documentation.text}
                 documentationIcon={documentation.icon}
-                documentationLink='https://docs.getunleash.io/reference/projects'
-                documentationLinkLabel='Projects documentation'
+                documentationLink={documentation.link?.url}
+                documentationLinkLabel={documentation.link?.label}
                 formatApiCode={formatApiCode}
             >
                 <NewProjectForm