Merge pull request #1445 from IFRCGo/feature/uat-requested-changes

Update Operational Learning and PER Pages
IFRCGo · Nov 5, 2024 · fbffc7c · fbffc7c
2 parents a651f07 + 43325c2
commit fbffc7c
Show file tree

Hide file tree

Showing 26 changed files with 159 additions and 125 deletions.
diff --git a/.changeset/green-crews-marry.md b/.changeset/green-crews-marry.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Updated PER terminology and add PER logo in PER PDF export.
diff --git a/.changeset/loud-wombats-breathe.md b/.changeset/loud-wombats-breathe.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Add link to GO UI storybook in resources page
diff --git a/.changeset/twenty-paws-happen.md b/.changeset/twenty-paws-happen.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Add beta tag, URL redirect, and link to old dashboard on Ops Learning
diff --git a/app/src/App/routes/index.tsx b/app/src/App/routes/index.tsx
@@ -344,7 +344,6 @@ const preparednessIndex = customWrapRoute({
                 '#global-summary': 'global-summary',
                 '#global-performance': 'global-performance',
                 '#resources-catalogue': 'resources-catalogue',
-                '#operational-learning': 'operational-learning',
             },
         },
     },
@@ -396,21 +395,6 @@ const preparednessGlobalCatalogue = customWrapRoute({
     },
 });
 
-// FIXME: update name to `preparednessOperationalLearning`
-const preparednessGlobalOperational = customWrapRoute({
-    parent: preparednessLayout,
-    path: 'operational-learning',
-    component: {
-        render: () => import('#views/PreparednessOperationalLearning'),
-        props: {},
-    },
-    wrapperComponent: Auth,
-    context: {
-        title: 'Preparedness - Operational Learning',
-        visibility: 'anything',
-    },
-});
-
 const globalThreeW = customWrapRoute({
     parent: rootLayout,
     path: 'three-w/projects',
@@ -1186,6 +1170,22 @@ const perWorkPlanForm = customWrapRoute({
 });
 
 // Redirect Routes
+const preparednessOperationalLearning = customWrapRoute({
+    parent: preparednessLayout,
+    path: 'operational-learning',
+    component: {
+        eagerLoad: true,
+        render: Navigate,
+        props: {
+            to: operationalLearning.absolutePath,
+        },
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Operational Learning',
+        visibility: 'anything',
+    },
+});
 
 const wrappedRoutes = {
     fourHundredFour,
@@ -1214,7 +1214,6 @@ const wrappedRoutes = {
     preparednessGlobalSummary,
     preparednessGlobalPerformance,
     preparednessGlobalCatalogue,
-    preparednessGlobalOperational,
     preparednessIndex,
     perProcessFormIndex,
     globalThreeW,
@@ -1272,6 +1271,8 @@ const wrappedRoutes = {
     ...countryRoutes,
     ...surgeRoutes,
 
+    // Redirects
+    preparednessOperationalLearning,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

diff --git a/app/src/assets/icons/per_logo.png b/app/src/assets/icons/per_logo.png
diff --git a/app/src/components/Navbar/i18n.json b/app/src/components/Navbar/i18n.json
@@ -31,7 +31,6 @@
         "userMenuGlobalSummary":"Global Summary",
         "userMenuGlobalPerformance":"Global Performance",
         "userMenuCatalogueResources":"Catalogue of Resources",
-        "userMenuOperationalLearning":"Operational Learning",
         "userMenuStartPER":"Start PER Process",
         "userMenuGlobal3WProjectDescription":"The \"Who does What, Where\" or 3W aims to map the global footprint of the Red Cross Red Crescent Movement, as reported by the National Societies.",
         "userMenuSubmit3WProject":"Submit 3W Project",

diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
@@ -212,13 +212,6 @@ function Navbar(props: Props) {
                                 >
                                     {strings.userMenuCatalogueResources}
                                 </DropdownMenuItem>
-                                <DropdownMenuItem
-                                    type="link"
-                                    to="preparednessGlobalOperational"
-                                    variant="tertiary"
-                                >
-                                    {strings.userMenuOperationalLearning}
-                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     type="link"
                                     to="perProcessLayout"

diff --git a/app/src/views/CountryPreparedness/PrivateCountryPreparedness/i18n.json b/app/src/views/CountryPreparedness/PrivateCountryPreparedness/i18n.json
@@ -28,7 +28,7 @@
         "lastUpdatedLabel": "Last update",
         "perExport": "Export",
         "upload": "Upload",
-        "typeOfOperation": "Type of Operation",
+        "perAreas": "PER Areas",
         "relevantDocumentHeader": "Relevant Documents",
         "uploadLimitDisclaimer": "Note: You can only upload upto 10 documents.",
         "perArea": "Area {areaNumber}: {title}"

diff --git a/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx b/app/src/views/CountryPreparedness/PrivateCountryPreparedness/index.tsx
@@ -637,7 +637,7 @@ function PrivateCountryPreparedness() {
                             <Heading
                                 level={5}
                             >
-                                {strings.typeOfOperation}
+                                {strings.perAreas}
                             </Heading>
                             <div className={styles.separator} />
                             {perFormAreaResponse?.results?.map((perFormArea) => {

diff --git a/app/src/views/DrefApplicationForm/EventDetail/index.tsx b/app/src/views/DrefApplicationForm/EventDetail/index.tsx
@@ -89,7 +89,7 @@ function EventDetail(props: Props) {
     }, [setFieldValue]);
 
     const operationalLearningUrl = useLink({
-        to: 'preparednessGlobalOperational',
+        to: 'operationalLearning',
         external: false,
     });
 

diff --git a/app/src/views/OperationalLearning/i18n.json b/app/src/views/OperationalLearning/i18n.json
@@ -17,6 +17,9 @@
         "noSummariesAvailableForComponent": "No summaries available for components.",
         "extractCount": "{count} extract",
         "extractsCount": "{count} extracts",
-        "failedToCreateExport": "Failed to generate export."
+        "failedToCreateExport": "Failed to generate export.",
+        "disclaimerMessage": "This is an updated implementation of the Operational Learning project started by the DREF and PER teams at IFRC. The previous dashboard can be found {link}.",
+        "here": "here",
+        "beta": "beta"
     }
 }
diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
@@ -10,6 +10,7 @@ import {
     DismissableListOutput,
     DismissableMultiListOutput,
     DismissableTextOutput,
+    Header,
     List,
     Tab,
     TabList,
@@ -21,6 +22,7 @@ import { useTranslation } from '@ifrc-go/ui/hooks';
 import {
     hasSomeDefinedValue,
     numericIdSelector,
+    resolveToComponent,
     resolveToString,
     stringNameSelector,
     stringValueSelector,
@@ -36,6 +38,7 @@ import Papa from 'papaparse';
 
 import ExportButton from '#components/domain/ExportButton';
 import { type RegionOption } from '#components/domain/RegionSelectInput';
+import Link from '#components/Link';
 import Page from '#components/Page';
 import { type components } from '#generated/types';
 import useCountry, { Country } from '#hooks/domain/useCountry';
@@ -61,7 +64,7 @@ import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type SummaryStatusEnum = components<'read'>['schemas']['OpsLearningSummaryStatusEnum'];
-
+const opsLearningDashboardURL = 'https://app.powerbi.com/view?r=eyJrIjoiMTM4Y2ZhZGEtNGZmMS00ODZhLWFjZjQtMTE2ZTIyYTI0ODc4IiwidCI6ImEyYjUzYmU1LTczNGUtNGU2Yy1hYjBkLWQxODRmNjBmZDkxNyIsImMiOjh9&pageName=ReportSectionfa0be9512521e929ae4a';
 const SUMMARY_STATUS_PENDING = 1 satisfies SummaryStatusEnum;
 const SUMMARY_STATUS_STARTED = 2 satisfies SummaryStatusEnum;
 const SUMMARY_STATUS_SUCCESS = 3 satisfies SummaryStatusEnum;
@@ -279,9 +282,39 @@ export function Component() {
 
     return (
         <Page
-            heading={strings.operationalLearningHeading}
+            className={styles.operationalLearning}
+            heading={(
+                <Header
+                    headingLevel={1}
+                    heading={strings.operationalLearningHeading}
+                    actionsContainerClassName={styles.betaTag}
+                    actions={(
+                        <Chip
+                            className={styles.chip}
+                            name="betaTag"
+                            label={strings.beta}
+                            variant="tertiary"
+                        />
+                    )}
+                />
+            )}
             description={strings.operationalLearningHeadingDescription}
             mainSectionClassName={styles.mainSection}
+            infoContainerClassName={styles.disclaimer}
+            info={resolveToComponent(
+                strings.disclaimerMessage,
+                {
+                    link: (
+                        <Link
+                            href={opsLearningDashboardURL}
+                            external
+                            variant="tertiary"
+                        >
+                            {strings.here}
+                        </Link>
+                    ),
+                },
+            )}
         >
             <Container
                 footerClassName={styles.footer}

diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
@@ -1,55 +1,72 @@
-.mainSection {
-    display: flex;
-    flex-direction: column;
-    gap: var(--go-ui-spacing-xl);
+.operational-learning {
 
-    .selected-filters {
+    .beta-tag {
+        font-size: var(--go-ui-font-size-sm);
+    }
+
+    .main-section {
         display: flex;
-        padding: var(--go-ui-spacing-sm) 0;
-        gap: var(--go-ui-spacing-sm);
+        flex-direction: column;
+        gap: var(--go-ui-spacing-xl);
 
-        .options {
+        .selected-filters {
             display: flex;
-            flex-wrap: wrap;
+            padding: var(--go-ui-spacing-sm) 0;
             gap: var(--go-ui-spacing-sm);
+
+            .options {
+                display: flex;
+                flex-wrap: wrap;
+                gap: var(--go-ui-spacing-sm);
+            }
         }
-    }
 
-    .summary-heading {
-        gap: var(--go-ui-spacing-xl);
-    }
+        .summary-heading {
+            gap: var(--go-ui-spacing-xl);
+        }
 
-    .summary-list {
-        display: flex;
-        flex-direction: column;
-        gap: var(--go-ui-spacing-md);
-    }
+        .summary-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+        }
 
-    .action-buttons {
-        display: flex;
-        align-items: flex-end;
-        gap: var(--go-ui-spacing-sm);
-    }
+        .action-buttons {
+            display: flex;
+            align-items: flex-end;
+            gap: var(--go-ui-spacing-sm);
+        }
 
-    .footer {
-        display: flex;
-        justify-content: space-between;
-    }
+        .footer {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .filter-chips {
+            width: 100%;
+        }
+
+        .footer-content {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 0;
+            width: 100%;
 
-    .filter-chips {
-        width: 100%;
+            .action-buttons {
+                align-self: flex-end;
+            }
+        }
     }
 
-    .footer-content {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 0;
-        width: 100%;
+    .disclaimer {
+        display: inline;
+        padding-top: var(--go-ui-spacing-lg);
+        font-style: italic;
 
-        .action-buttons {
-            align-self: flex-end;
+        .button {
+            display: inline;
+            font-style: italic;
         }
     }
 }
 
-
diff --git a/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/i18n.json b/app/src/views/PerAssessmentForm/AreaInput/ComponentInput/i18n.json
@@ -6,7 +6,7 @@
         "urbanConsiderationDescription": "NS mandate and auxiliary role to public authorities is well understood at the sub-national level among disaster management authorities within urban contexts and key entities that manage urban aspects (e.g., urban planning and housing office), including in relation to service providers (e.g., public transport, water and electricity services).",
         "environmentConsiderationDescriptionOne": "NS has a long-term commitment, reflected in an environmental policy, guidelines, or management plans, to improve environmental sustainability of programmes, projects and activities.",
         "environmentConsiderationDescriptionTwo": "NS policies and strategies are informed by, and adjusted where needed, based on weather information and climate change projections for the country and region",
-        "epiConsiderationTitle": "EPI Considerations",
+        "epiConsiderationTitle": "Epidemic Considerations",
         "urbanConsiderationTitle": "Urban Considerations",
         "environmentConsiderationTitle": "Climate and Environmental Considerations",
         "placeholderReviewedRating": "Rating: 0 - Not reviewed",

diff --git a/app/src/views/PerExport/i18n.json b/app/src/views/PerExport/i18n.json
@@ -2,7 +2,7 @@
     "namespace" : "perExport",
     "strings": {
         "perExportNSPreparedness": "NS Preparedness and Response Capacity",
-        "perImageLogoIFRCAlt": "IFRC",
+        "ifrcLogoIFRCAltText": "IFRC",
         "perExportTitle": "PER",
         "perExportStartDateLabel": "Start Date",
         "perExportPhaseLabel": "PER Phase",
@@ -18,7 +18,8 @@
         "perHighlightedTopRatedComponentHeading": "Highlighted Top Rated Components",
         "perComponentRatingResultsHeading": "Components Rating Results",
         "perComponentNotReviewed": "0 - Not reviewed",
-        "typeOfOperation": "Type of Operation",
-        "perArea": "Area {areaNumber}: {title}"
+        "perAreas": "PER Areas",
+        "perArea": "Area {areaNumber}: {title}",
+        "perLogoAltText": "Preparedness for Effective Response"
     }
 }
diff --git a/app/src/views/PerExport/index.tsx b/app/src/views/PerExport/index.tsx
@@ -36,6 +36,7 @@ import {
 } from '@togglecorp/fujs';
 
 import ifrcLogo from '#assets/icons/ifrc-square.png';
+import perLogo from '#assets/icons/per_logo.png';
 import {
     getFormattedComponentName,
     getPerAreaColor,
@@ -362,14 +363,16 @@ export function Component() {
                 <img
                     className={styles.ifrcLogo}
                     src={ifrcLogo}
-                    alt={strings.perImageLogoIFRCAlt}
+                    alt={strings.ifrcLogoIFRCAltText}
                 />
                 <Heading level={1} className={styles.countryName}>
-                    {perResponse?.country_details.name}
-                </Heading>
-                <Heading level={1}>
-                    {strings.perExportTitle}
+                    {perResponse?.country_details.society_name}
                 </Heading>
+                <img
+                    className={styles.perLogo}
+                    src={perLogo}
+                    alt={strings.perLogoAltText}
+                />
             </Container>
             {pending && (
                 <BlockLoading className={styles.pendingMessage} />
@@ -532,7 +535,7 @@ export function Component() {
                         <Heading
                             level={5}
                         >
-                            {strings.typeOfOperation}
+                            {strings.perAreas}
                         </Heading>
                         <div className={styles.separator} />
                         {perFormAreaResponse?.results?.map((perFormArea) => {