feat: add links to documentation [DHIS2-21476]

src/app/layout/Breadcrumb.module.css

@@ -45,3 +45,11 @@ span.breadcrumbItemLink {
     color: var(--colors-grey800);
     padding: 0 4px;
 }
+
+.learnMoreIconLink {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+    vertical-align: middle;
+    color: var(--colors-grey700);
+}

src/app/layout/Breadcrumb.spec.tsx

@@ -71,6 +71,34 @@ describe('BreadcrumbItem', () => {
             '#/overview/dataElements'
         )
     })
+
+    it('should render a learn-more link next to the label when it is the current page and a learnMoreUrl is given', () => {
+        const { getByRole, getByText } = render(
+            <BreadcrumbItem
+                label={'Data elements'}
+                to={'/'}
+                learnMoreUrl={'https://docs.dhis2.org/data-elements'}
+            />,
+            { wrapper: HashRouter }
+        )
+
+        expect(getByText('Data elements')).toBeDefined()
+        const learnMoreLink = getByRole('link')
+        expect(learnMoreLink).toHaveAttribute(
+            'href',
+            'https://docs.dhis2.org/data-elements'
+        )
+        expect(learnMoreLink).toHaveAttribute('target', '_blank')
+    })
+
+    it('should not render a learn-more link when no learnMoreUrl is given', () => {
+        const { queryByRole } = render(
+            <BreadcrumbItem label={'Data elements'} to={'/'} />,
+            { wrapper: HashRouter }
+        )
+
+        expect(queryByRole('link')).not.toBeInTheDocument()
+    })
 })
 describe('Breadcrumbs', () => {
     it('should render crumb components in handle', () => {

src/app/layout/Breadcrumb.tsx

@@ -1,3 +1,5 @@
+import i18n from '@dhis2/d2-i18n'
+import { IconQuestion16 } from '@dhis2/ui-icons'
 import React from 'react'
 import { Link, To, useLocation, useMatches, matchPath } from 'react-router-dom'
 import { useToWithSearchState } from '../../lib'
@@ -9,16 +11,23 @@ const BreadcrumbSeparator = () => <span className={css.separator}>/</span>
 type BreadcrumbItemProps = {
     label: string
     to: To
+    learnMoreUrl?: string
 }
 
-export const BreadcrumbItem = ({ label, to }: BreadcrumbItemProps) => {
+export const BreadcrumbItem = ({
+    label,
+    to,
+    learnMoreUrl,
+}: BreadcrumbItemProps) => {
     const resolvedTo = useToWithSearchState(to)
     const currentLoc = useLocation()
 
     if (resolvedTo.pathname) {
         const match = matchPath(resolvedTo.pathname, currentLoc.pathname)
         if (match?.pattern.end) {
-            return <BreadCrumbEndItem label={label} />
+            return (
+                <BreadCrumbEndItem label={label} learnMoreUrl={learnMoreUrl} />
+            )
         }
     }
 
@@ -35,8 +44,28 @@ export const BreadcrumbItem = ({ label, to }: BreadcrumbItemProps) => {
 
 /** Component that is used for "End links", where the current route is the end of the path
  * and thus should not be a link */
-export const BreadCrumbEndItem = ({ label }: { label: string }) => (
-    <span className={css.breadcrumbItem}>{label}</span>
+export const BreadCrumbEndItem = ({
+    label,
+    learnMoreUrl,
+}: {
+    label: string
+    learnMoreUrl?: string
+}) => (
+    <span className={css.breadcrumbItem}>
+        {label}
+        {learnMoreUrl && (
+            <a
+                className={css.learnMoreIconLink}
+                href={learnMoreUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <span aria-label={i18n.t('Learn more')}>
+                    <IconQuestion16 />
+                </span>
+            </a>
+        )}
+    </span>
 )
 
 export const Breadcrumbs = () => {

src/app/routes/Router.tsx

@@ -28,7 +28,7 @@ import {
     useBoundResourceQueryFn,
     useSectionHandle,
 } from '../../lib'
-import { OverviewSection } from '../../types'
+import { ModelSection, OverviewSection } from '../../types'
 import { Layout, BreadcrumbItem } from '../layout'
 import {
     SectionAuthorizedGuard,
@@ -205,6 +205,9 @@ const schemaSectionRoutes = Object.values(SECTIONS_MAP).map((section) => (
                         <BreadcrumbItem
                             label={section.titlePlural}
                             to={matchInfo.pathname}
+                            learnMoreUrl={
+                                (section as ModelSection).learnMoreUrl
+                            }
                         />
                     ),
                 } satisfies RouteHandle

src/pages/overview/card/SummaryCard.module.css

@@ -64,3 +64,8 @@
 .cardActions a {
     text-decoration: none;
 }
+
+.learnMoreIconLink {
+    margin-left: auto;
+    place-self: center;
+}

src/pages/overview/card/SummaryCard.tsx

@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { Card, Button } from '@dhis2/ui'
-import { IconEdit24 } from '@dhis2/ui-icons'
+import { IconEdit24, IconQuestion16 } from '@dhis2/ui-icons'
 import React, { PropsWithChildren } from 'react'
 import { Link } from 'react-router-dom'
 import {
@@ -92,6 +92,7 @@ export const SummaryCardActions = ({
     hideNew,
 }: SummaryCardActionsProps) => {
     const canCreate = useCanCreateModelInSection(section)
+    const learnMoreUrl = section.learnMoreUrl
     return (
         <div className={styles.cardActions}>
             {canCreate && !hideNew && (
@@ -106,6 +107,18 @@ export const SummaryCardActions = ({
                     {i18n.t('Manage')}
                 </Button>
             </Link>
+            {learnMoreUrl && (
+                <a
+                    className={styles.learnMoreIconLink}
+                    href={learnMoreUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <span aria-label={i18n.t('Learn more')}>
+                        <IconQuestion16 />
+                    </span>
+                </a>
+            )}
         </div>
     )
 }

src/types/section.ts

@@ -10,6 +10,7 @@ export interface SectionBase {
     minApiVersion?: number
     maxApiVersion?: number
     clonable?: boolean
+    learnMoreUrl?: string
 }
 
 // SchemaSection is a section that can be mapped directly to a schema by the name