Merge branch 'feature/update-ops-learning-key-insight-disclaimer' int…

…o develop
IFRCGo · Nov 6, 2024 · 3a4b9d5 · 3a4b9d5
2 parents a113afc + 9563ad0
commit 3a4b9d5
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 134 deletions.
diff --git a/.changeset/lucky-pigs-kneel.md b/.changeset/lucky-pigs-kneel.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Update key insights disclaimer text in Ops. Learning
diff --git a/app/src/views/OperationalLearning/KeyInsights/i18n.json b/app/src/views/OperationalLearning/KeyInsights/i18n.json
@@ -1,11 +1,13 @@
 {
-    "namespace": "keyInsights",
+    "namespace": "opsLearningKeyInsights",
     "strings": {
-    "opsLearningSummariesHeading": "Summary of learnings",
-    "keyInsightsDisclaimer": "THESE SUMMARIES WERE GENERATED USING AI AND LARGE LANGUAGE MODELS. THEY REPRESENT {numOfExtractsUsed} PRIORITISED EXTRACTS OUT OF {totalNumberOfExtracts} FROM THE DREF AND EA DOCUMENTS BETWEEN {appealsFromDate} - {appealsToDate}. TO SEE THE METHODOLOGY BEHIND THE PRIORITISATION ",
-    "keyInsightsDisclaimerClickHere": "CLICK HERE.",
-    "keyInsightsReportIssue": "Report an issue",
-    "closeSources": "Close Sources",
-    "seeSources": "Show Sources"
+        "opsLearningSummariesHeading": "Summary of learnings",
+        "keyInsightsDisclaimer": "These summaries were generated using AI and Large Language Models. They represent {numOfExtractsUsed} prioritised extracts out of {totalNumberOfExtracts} from the DREF and EA documents between {appealsFromDate} - {appealsToDate}. An initial automatic assessment of the quality of the summaries resulted in around 78% performance in terms of relevancy, coherence, consisentency and fluency. To see the methodology behind the prioritisation {methodologyLink}.",
+        "methodologyLinkLabel": "click here",
+        "keyInsightsReportIssue": "Report an issue",
+        "closeSources": "Close Sources",
+        "seeSources": "Show Sources"
     }
 }
+
+
diff --git a/app/src/views/OperationalLearning/KeyInsights/index.tsx b/app/src/views/OperationalLearning/KeyInsights/index.tsx
@@ -6,14 +6,15 @@ import {
 import {
     Button,
     Container,
+    NumberOutput,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
     useTranslation,
 } from '@ifrc-go/ui/hooks';
 import {
     formatDate,
-    resolveToString,
+    resolveToComponent,
 } from '@ifrc-go/ui/utils';
 import { isDefined } from '@togglecorp/fujs';
 
@@ -48,9 +49,13 @@ function KeyInsights(props: Props) {
     return (
         <Container
             className={styles.keyInsights}
+            headingLevel={2}
             heading={strings.opsLearningSummariesHeading}
             withInternalPadding
             withOverflowInContent
+            contentViewType="grid"
+            numPreferredGridContentColumns={3}
+            footerActionsContainerClassName={styles.actions}
             footerActions={(
                 <Button
                     name={opsLearningSummaryResponse.id}
@@ -64,61 +69,72 @@ function KeyInsights(props: Props) {
                     {isExpanded ? strings.closeSources : strings.seeSources}
                 </Button>
             )}
-            childrenContainerClassName={styles.insights}
         >
-            <div className={styles.insightTexts}>
-                {isDefined(opsLearningSummaryResponse?.insights1_title) && (
-                    <Container
-                        heading={opsLearningSummaryResponse.insights1_title}
-                        headerDescription={opsLearningSummaryResponse.insights1_content}
-                    />
-                )}
-                {isDefined(opsLearningSummaryResponse?.insights2_title) && (
-                    <Container
-                        heading={opsLearningSummaryResponse.insights2_title}
-                        headerDescription={opsLearningSummaryResponse.insights2_content}
-                    />
-                )}
-                {isDefined(opsLearningSummaryResponse?.insights3_title) && (
-                    <Container
-                        heading={opsLearningSummaryResponse.insights3_title}
-                        headerDescription={opsLearningSummaryResponse.insights3_content}
-                    />
-                )}
+            {isDefined(opsLearningSummaryResponse?.insights1_title) && (
+                <Container
+                    heading={opsLearningSummaryResponse.insights1_title}
+                    headerDescription={opsLearningSummaryResponse.insights1_content}
+                />
+            )}
+            {isDefined(opsLearningSummaryResponse?.insights2_title) && (
+                <Container
+                    heading={opsLearningSummaryResponse.insights2_title}
+                    headerDescription={opsLearningSummaryResponse.insights2_content}
+                />
+            )}
+            {isDefined(opsLearningSummaryResponse?.insights3_title) && (
+                <Container
+                    heading={opsLearningSummaryResponse.insights3_title}
+                    headerDescription={opsLearningSummaryResponse.insights3_content}
+                />
+            )}
+            <div className={styles.disclaimerText}>
+                {resolveToComponent(strings.keyInsightsDisclaimer, {
+                    numOfExtractsUsed: (
+                        <NumberOutput
+                            value={opsLearningSummaryResponse.used_extracts_count}
+                        />
+                    ),
+                    totalNumberOfExtracts: (
+                        <NumberOutput
+                            value={opsLearningSummaryResponse.total_extracts_count}
+                        />
+                    ),
+                    appealsFromDate: formatDate(
+                        opsLearningSummaryResponse.earliest_appeal_date,
+                        'MMM-yyyy',
+                    ),
+                    appealsToDate: formatDate(
+                        opsLearningSummaryResponse.latest_appeal_date,
+                        'MMM-yyyy',
+                    ),
+                    methodologyLink: (
+                        <Link
+                            href="https://go-wiki.ifrc.org/en/user_guide/ops_learning"
+                            external
+                            withUnderline
+                            linkElementClassName={styles.methodologyLink}
+                            withLinkIcon
+                        >
+                            {strings.methodologyLinkLabel}
+                        </Link>
+                    ),
+                })}
             </div>
-            <div className={styles.summaries}>
-                <span className={styles.text}>
-                    {resolveToString(strings.keyInsightsDisclaimer, {
-                        numOfExtractsUsed: opsLearningSummaryResponse.used_extracts_count,
-                        totalNumberOfExtracts: opsLearningSummaryResponse.total_extracts_count,
-                        appealsFromDate: formatDate(
-                            opsLearningSummaryResponse.earliest_appeal_date,
-                            'MMM-yyyy',
-                        ),
-                        appealsToDate: formatDate(
-                            opsLearningSummaryResponse.latest_appeal_date,
-                            'MMM-yyyy',
-                        ),
-                    })}
-                    <Link
-                        href="https://go-wiki.ifrc.org/en/user_guide/ops_learning"
-                        external
-                        withUnderline
-                    >
-                        {strings.keyInsightsDisclaimerClickHere}
-                    </Link>
-                </span>
+            <div className={styles.reportIssueLinkContainer}>
                 <Link
-                    className={styles.reportIssue}
+                    linkElementClassName={styles.reportIssueLink}
                     href="https://forms.office.com/pages/responsepage.aspx?id=5Tu1ok5zbE6rDdGE9g_ZF4KwLxGrbflAt2rbQ7DtFG5UQU1CTEZTSldLQ0ZTVEtPSVdQQklOVzBDVi4u"
-                    actions={<AlertFillIcon />}
+                    icons={<AlertFillIcon />}
                     external
+                    withLinkIcon
                 >
                     {strings.keyInsightsReportIssue}
                 </Link>
             </div>
             {isExpanded && (
                 <Sources
+                    className={styles.sources}
                     summaryId={opsLearningSummaryResponse.id}
                     summaryType="insight"
                 />

diff --git a/app/src/views/OperationalLearning/KeyInsights/styles.module.css b/app/src/views/OperationalLearning/KeyInsights/styles.module.css
@@ -1,31 +1,35 @@
 .key-insights {
     background-color: var(--go-ui-color-background);
 
-    .summaries {
-        display: flex;
-        align-items: baseline;
-        justify-content: flex-end;
-        gap: var(--go-ui-spacing-md);
+    .sources {
+        grid-column: 1 / -1;
+    }
 
-        .text {
-            color: var(--go-ui-color-text-light);
+    .disclaimer-text {
+        grid-column: 1 / -1;
+        text-transform: uppercase;
+        color: var(--go-ui-color-text-light);
+
+        .methodology-link {
+            text-transform: uppercase;
         }
+    }
 
-        .report-issue {
+    .report-issue-link-container {
+        display: flex;
+        justify-content: flex-end;
+        grid-column: 1 / -1;
+
+        .report-issue-link {
             flex-shrink: 0;
             color: var(--go-ui-color-negative);
         }
     }
 
-    .insights {
-        display: flex;
+    .actions {
+        align-items: flex-end;
+        align-self: flex-end;
         flex-direction: column;
-        gap: var(--go-ui-spacing-lg);
-
-        .insight-texts {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
-            gap: var(--go-ui-spacing-md);
-        }
+        flex-grow: 1;
     }
 }
diff --git a/app/src/views/OperationalLearning/Sources/index.tsx b/app/src/views/OperationalLearning/Sources/index.tsx
@@ -3,8 +3,8 @@ import { CopyLineIcon } from '@ifrc-go/icons';
 import {
     Button,
     Container,
-    List,
     Pager,
+    RawList,
 } from '@ifrc-go/ui';
 import {
     useBooleanState,
@@ -23,7 +23,6 @@ import AllExtractsModal from './AllExtractsModal';
 import Emergency from './Emergency';
 
 import i18n from './i18n.json';
-import styles from './styles.module.css';
 
 // FIXME: move this to utils
 // NOTE: this may be slower on the long run
@@ -35,17 +34,19 @@ export function isChildNull(children: any) {
 type AppealDocumentResponse = GoApiResponse<'/api/v2/appeal_document/'>;
 type AppealDocument = NonNullable<AppealDocumentResponse['results']>[number];
 
-type Props = {
+const PAGE_SIZE = 10;
+
+interface Props {
+    className?: string;
     summaryType: 'sector' | 'component' | 'insight';
     summaryId: number;
 }
 
-const PAGE_SIZE = 10;
-
 function Sources(props: Props) {
     const {
         summaryId,
         summaryType,
+        className,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -99,30 +100,31 @@ function Sources(props: Props) {
 
     return (
         <Container
-            className={styles.sources}
+            className={className}
             footerContent={isChildNull(pager) ? undefined : pager}
-            childrenContainerClassName={styles.content}
+            contentViewType="vertical"
+            footerIcons={(
+                <Button
+                    name="viewAll"
+                    variant="secondary"
+                    icons={<CopyLineIcon />}
+                    onClick={setShowExtractsModalTrue}
+                >
+                    {strings.viewAllExtracts}
+                </Button>
+            )}
+            emptyMessage={strings.noSources}
+            errored={isDefined(appealDocumentError)}
+            pending={appealDocumentPending}
+            filtered={false}
+            compactMessage
         >
-            <List
-                className={styles.appealList}
+            <RawList
                 data={appealDocumentResponse?.results}
                 renderer={Emergency}
                 keySelector={numericIdSelector}
                 rendererParams={appealRendererParams}
-                emptyMessage={strings.noSources}
-                errored={isDefined(appealDocumentError)}
-                pending={appealDocumentPending}
-                filtered={false}
-                compact
             />
-            <Button
-                name="viewAll"
-                variant="secondary"
-                icons={<CopyLineIcon />}
-                onClick={setShowExtractsModalTrue}
-            >
-                {strings.viewAllExtracts}
-            </Button>
             {showExtractsModal && (
                 <AllExtractsModal
                     summaryType={summaryType}

diff --git a/app/src/views/OperationalLearning/Sources/styles.module.css b/app/src/views/OperationalLearning/Sources/styles.module.css