Fix lint issues

IFRCGo · Nov 6, 2024 · 9563ad0 · 9563ad0
1 parent 7bbf3d2
commit 9563ad0
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 65 deletions.
diff --git a/app/src/views/OperationalLearning/KeyInsights/index.tsx b/app/src/views/OperationalLearning/KeyInsights/index.tsx
@@ -55,65 +55,19 @@ function KeyInsights(props: Props) {
             withOverflowInContent
             contentViewType="grid"
             numPreferredGridContentColumns={3}
-            footerContent={(
-                <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>
-            )}
             footerActionsContainerClassName={styles.actions}
             footerActions={(
-                <>
-                    <Link
-                        linkElementClassName={styles.reportIssueLink}
-                        href="https://forms.office.com/pages/responsepage.aspx?id=5Tu1ok5zbE6rDdGE9g_ZF4KwLxGrbflAt2rbQ7DtFG5UQU1CTEZTSldLQ0ZTVEtPSVdQQklOVzBDVi4u"
-                        icons={<AlertFillIcon />}
-                        external
-                        withLinkIcon
-                    >
-                        {strings.keyInsightsReportIssue}
-                    </Link>
-                    <Button
-                        name={opsLearningSummaryResponse.id}
-                        variant="tertiary"
-                        onClick={toggleExpansion}
-                        actions={(isExpanded
-                            ? <ArrowUpSmallFillIcon />
-                            : <ArrowDownSmallFillIcon />
-                        )}
-                    >
-                        {isExpanded ? strings.closeSources : strings.seeSources}
-                    </Button>
-                </>
+                <Button
+                    name={opsLearningSummaryResponse.id}
+                    variant="tertiary"
+                    onClick={toggleExpansion}
+                    actions={(isExpanded
+                        ? <ArrowUpSmallFillIcon />
+                        : <ArrowDownSmallFillIcon />
+                    )}
+                >
+                    {isExpanded ? strings.closeSources : strings.seeSources}
+                </Button>
             )}
         >
             {isDefined(opsLearningSummaryResponse?.insights1_title) && (
@@ -134,6 +88,50 @@ function KeyInsights(props: Props) {
                     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.reportIssueLinkContainer}>
+                <Link
+                    linkElementClassName={styles.reportIssueLink}
+                    href="https://forms.office.com/pages/responsepage.aspx?id=5Tu1ok5zbE6rDdGE9g_ZF4KwLxGrbflAt2rbQ7DtFG5UQU1CTEZTSldLQ0ZTVEtPSVdQQklOVzBDVi4u"
+                    icons={<AlertFillIcon />}
+                    external
+                    withLinkIcon
+                >
+                    {strings.keyInsightsReportIssue}
+                </Link>
+            </div>
             {isExpanded && (
                 <Sources
                     className={styles.sources}

diff --git a/app/src/views/OperationalLearning/KeyInsights/styles.module.css b/app/src/views/OperationalLearning/KeyInsights/styles.module.css
@@ -6,17 +6,24 @@
     }
 
     .disclaimer-text {
-        max-width: var(--go-ui-width-content-max);
+        grid-column: 1 / -1;
         text-transform: uppercase;
         color: var(--go-ui-color-text-light);
-    }
 
-    .methodology-link {
-        text-transform: uppercase;
+        .methodology-link {
+            text-transform: uppercase;
+        }
     }
 
-    .report-issue-link {
-        color: var(--go-ui-color-negative);
+    .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);
+        }
     }
 
     .actions {

diff --git a/app/src/views/OperationalLearning/index.tsx b/app/src/views/OperationalLearning/index.tsx
@@ -3,6 +3,7 @@ import {
     useMemo,
     useState,
 } from 'react';
+import { InfoIcon } from '@ifrc-go/icons';
 import {
     Button,
     Chip,
@@ -62,7 +63,6 @@ import Summary, { type Props as SummaryProps } from './Summary';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
-import { InfoIcon } from '@ifrc-go/icons';
 
 type SummaryStatusEnum = components<'read'>['schemas']['OpsLearningSummaryStatusEnum'];
 const opsLearningDashboardURL = 'https://app.powerbi.com/view?r=eyJrIjoiMTM4Y2ZhZGEtNGZmMS00ODZhLWFjZjQtMTE2ZTIyYTI0ODc4IiwidCI6ImEyYjUzYmU1LTczNGUtNGU2Yy1hYjBkLWQxODRmNjBmZDkxNyIsImMiOjh9&pageName=ReportSectionfa0be9512521e929ae4a';

diff --git a/app/src/views/OperationalLearning/styles.module.css b/app/src/views/OperationalLearning/styles.module.css
@@ -62,7 +62,7 @@
         justify-content: center;
         margin: 0 auto;
         color: var(--go-ui-color-text-light);
-        gap: var(--spacing-sm);
+        gap: var(--go-ui-spacing-xs);
 
         .icon {
             flex-shrink: 0;