Merge pull request #460 from IFRCGo/fix/Wiki-hook-points

Add Wiki hooks points for PER

Author: samshara

src/components/domain/RiskImminentEvents/Gdacs/EventDetails/i18n.json

@@ -9,6 +9,7 @@
         "eventPopulationLabel": "Population exposed",
         "eventPeopleAffectedLabel": "People affected",
         "eventImpactLabel": "Impact",
-        "eventSeverityLabel": "Severity"
+        "eventSeverityLabel": "Severity",
+        "eventAlertType": "Alert Type"
     }
 }

src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx

@@ -55,7 +55,6 @@ interface GdacsEventDetails {
         geometry?: string;
     },
 }
-
 interface GdacsPopulationExposure {
     death?: number;
     displaced?: number;
@@ -153,6 +152,12 @@ function EventDetails(props: Props) {
                         value={eventDetails?.severitydata?.severitytext}
                     />
                 )}
+                {isDefined(eventDetails?.alertlevel) && (
+                    <TextOutput
+                        label={strings.eventAlertType}
+                        value={eventDetails?.alertlevel}
+                    />
+                )}
             </div>
             {isDefined(eventDetails)
                 && isDefined(eventDetails.url)

src/views/AccountMyFormsPer/index.tsx

@@ -31,7 +31,7 @@ import useTranslation from '#hooks/useTranslation';
 import useFilterState from '#hooks/useFilterState';
 import { useRequest, type GoApiResponse } from '#utils/restRequest';
 import { numericIdSelector } from '#utils/selectors';
-
+import WikiLink from '#components/WikiLink';
 import PerTableActions, { type Props as PerTableActionsProps } from './PerTableActions';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -209,13 +209,19 @@ export function Component() {
             className={styles.accountPerForms}
             heading={strings.processStatusTitle}
             withHeaderBorder
+            actionsContainerClassName={styles.actionsContainer}
             actions={(
-                <Link
-                    to="newPerOverviewForm"
-                    variant="primary"
-                >
-                    {strings.newProcessButtonLabel}
-                </Link>
+                <>
+                    <Link
+                        to="newPerOverviewForm"
+                        variant="primary"
+                    >
+                        {strings.newProcessButtonLabel}
+                    </Link>
+                    <WikiLink
+                        href="user_guide/Preparedness#register-or-update-a-per-process"
+                    />
+                </>
             )}
             filtersContainerClassName={styles.filters}
             filters={(

src/views/AccountMyFormsPer/styles.module.css

@@ -7,6 +7,10 @@
         grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
     }
 
+    .actions-container {
+        display: flex;
+        align-items: center;
+    }
     .sub-cell {
         border-bottom: unset;
         background-color: var(--go-ui-color-gray-20);

src/views/CountryPreparedness/index.tsx

@@ -36,7 +36,7 @@ import {
     stringLabelSelector,
     stringTitleSelector,
 } from '#utils/selectors';
-
+import WikiLink from '#components/WikiLink';
 import PreviousAssessmentCharts from './PreviousAssessmentChart';
 import PublicCountryPreparedness from './PublicCountryPreparedness';
 import RatingByAreaChart from './RatingByAreaChart';
@@ -399,15 +399,21 @@ export function Component() {
             className={styles.countryPreparedness}
             childrenContainerClassName={styles.preparednessContent}
             heading={strings.nsPreparednessAndResponseCapacityHeading}
+            actionsContainerClassName={styles.actionsContainer}
             headingLevel={2}
             withHeaderBorder
             actions={(
-                <TextOutput
-                    label={strings.lastUpdatedLabel}
-                    value={processStatusResponse?.updated_at}
-                    valueType="date"
-                    strongValue
-                />
+                <>
+                    <TextOutput
+                        label={strings.lastUpdatedLabel}
+                        value={processStatusResponse?.updated_at}
+                        valueType="date"
+                        strongValue
+                    />
+                    <WikiLink
+                        href="user_guide/Preparedness#how-to-use-it"
+                    />
+                </>
             )}
         >
             <div className={styles.latestPerDetails}>

src/views/CountryPreparedness/styles.module.css

@@ -2,6 +2,11 @@
     padding: var(--go-ui-spacing-2xl) 0;
     min-height: 40vh;
 
+    .actions-container {
+        display: flex;
+        align-items: center;
+    }
+
     .preparedness-content {
         display: grid;
         grid-gap: var(--go-ui-spacing-lg);

src/views/Preparedness/index.tsx

@@ -8,11 +8,11 @@ import NavigationTab from '#components/NavigationTab';
 import NavigationTabList from '#components/NavigationTabList';
 import { resolveToComponent } from '#utils/translation';
 import useTranslation from '#hooks/useTranslation';
+import WikiLink from '#components/WikiLink';
 
 import i18n from './i18n.json';
 
 import styles from './styles.module.css';
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
@@ -28,6 +28,7 @@ export function Component() {
                 heading={strings.preparednessApproachSection}
                 withHeaderBorder
                 childrenContainerClassName={styles.approachContent}
+                actionsContainerClassName={styles.actionsContainer}
                 actions={(
                     <>
                         <Link
@@ -37,11 +38,9 @@ export function Component() {
                         >
                             {strings.contactPerTeam}
                         </Link>
-                        {/* {strings.wikiJsLink?.length > 0 && (
-                            <WikiLink
-                                href=''
-                            />
-                        )} */}
+                        <WikiLink
+                            href="user_guide/Preparedness"
+                        />
                     </>
                 )}
             >

src/views/Preparedness/styles.module.css

@@ -3,6 +3,10 @@
     flex-direction: column;
     gap: var(--go-ui-spacing-2xl);
 
+    .actions-container {
+        display: flex;
+        align-items: center;
+    }
     .approach-content {
         display: grid;
         grid-gap: var(--go-ui-spacing-md);

src/views/RegionRiskWatchImminent/index.tsx

@@ -8,7 +8,6 @@ import { RegionOutletContext } from '#utils/outletContext';
 import styles from './styles.module.css';
 
 // TODO: Add historic data chart
-
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const { regionResponse } = useOutletContext<RegionOutletContext>();