feat: allow icons in descriptions and add a placeholder

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -24,7 +24,8 @@ interface ICreateProps {
     title?: ReactNode;
     description: string;
     documentationLink: string;
-    documentationLinkLabel: string;
+    documentationIcon?: ReactNode;
+    documentationLinkLabel?: string;
     loading?: boolean;
     modal?: boolean;
     disablePadding?: boolean;
@@ -165,12 +166,20 @@ const StyledSidebar = styled('aside')(({ theme }) => ({
     },
 }));
 
-const StyledDescription = styled('p')(({ theme }) => ({
-    color: theme.palette.common.white,
+const StyledDescriptionCard = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'column nowrap',
+    gap: theme.spacing(2),
+    alignItems: 'center',
     zIndex: 1,
+    color: theme.palette.common.white,
     position: 'relative',
 }));
 
+const StyledDescription = styled('p')(({ theme }) => ({
+    width: '100%',
+}));
+
 const StyledLinkContainer = styled('div')(({ theme }) => ({
     margin: theme.spacing(3, 0),
     display: 'flex',
@@ -195,6 +204,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
     description,
     children,
     documentationLink,
+    documentationIcon,
     documentationLinkLabel,
     loading,
     modal,
@@ -261,6 +271,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                     <StyledRelativeDiv>
                         <MobileGuidance
                             description={description}
+                            documentationIcon={documentationIcon}
                             documentationLink={documentationLink}
                             documentationLinkLabel={documentationLinkLabel}
                         />
@@ -300,6 +311,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                 condition={showGuidance && !smallScreen}
                 show={
                     <Guidance
+                        documentationIcon={documentationIcon}
                         description={description}
                         documentationLink={documentationLink}
                         documentationLinkLabel={documentationLinkLabel}
@@ -318,8 +330,9 @@ const FormTemplate: React.FC<ICreateProps> = ({
 };
 
 interface IMobileGuidance {
-    description: string;
+    description: ReactNode;
     documentationLink: string;
+    documentationIcon?: ReactNode;
     documentationLinkLabel?: string;
 }
 
@@ -327,6 +340,7 @@ const MobileGuidance = ({
     description,
     documentationLink,
     documentationLinkLabel,
+    documentationIcon,
 }: IMobileGuidance) => {
     const [open, setOpen] = useState(false);
 
@@ -345,6 +359,7 @@ const MobileGuidance = ({
             </Tooltip>
             <Collapse in={open} timeout={500}>
                 <Guidance
+                    documentationIcon={documentationIcon}
                     description={description}
                     documentationLink={documentationLink}
                     documentationLinkLabel={documentationLinkLabel}
@@ -356,6 +371,7 @@ const MobileGuidance = ({
 
 interface IGuidanceProps {
     description: string;
+    documentationIcon?: ReactNode;
     documentationLink: string;
     documentationLinkLabel?: string;
     showDescription?: boolean;
@@ -366,6 +382,7 @@ const Guidance: React.FC<IGuidanceProps> = ({
     description,
     children,
     documentationLink,
+    documentationIcon,
     documentationLinkLabel = 'Learn more',
     showDescription = true,
     showLink = true,
@@ -374,7 +391,15 @@ const Guidance: React.FC<IGuidanceProps> = ({
         <StyledSidebar>
             <ConditionallyRender
                 condition={showDescription}
-                show={<StyledDescription>{description}</StyledDescription>}
+                show={
+                    <StyledDescriptionCard>
+                        <ConditionallyRender
+                            condition={!!documentationIcon}
+                            show={documentationIcon}
+                        />
+                        <StyledDescription>{description}</StyledDescription>
+                    </StyledDescriptionCard>
+                }
             />
 
             <ConditionallyRender

frontend/src/component/project/Project/CreateProject/CreateProjectDialog/CreateProjectDialog.tsx

@@ -1,4 +1,5 @@
 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';
@@ -116,6 +117,7 @@ export const CreateProjectDialogue = ({
             }
         }
     };
+
     return (
         <StyledDialog open={open} onClose={onClose}>
             <FormTemplate
@@ -123,6 +125,7 @@ export const CreateProjectDialogue = ({
                 description={documentation}
                 documentationLink='https://docs.getunleash.io/reference/projects'
                 documentationLinkLabel='Projects documentation'
+                documentationIcon={<StickinessIcon />}
                 formatApiCode={formatApiCode}
             >
                 <NewProjectForm