From 03f723fa79c6f9fd3f9525a27cb834a1e27280c8 Mon Sep 17 00:00:00 2001
From: LionelB <lionel@lumographe.fr>
Date: Tue, 23 Feb 2021 14:03:39 +0100
Subject: [PATCH 1/3] fix(frontend): add refto relevant content

closes #321
---
 .../src/pages/alerts/[[...params]].js         | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/targets/frontend/src/pages/alerts/[[...params]].js b/targets/frontend/src/pages/alerts/[[...params]].js
index e1c3fb9aa..0622029eb 100644
--- a/targets/frontend/src/pages/alerts/[[...params]].js
+++ b/targets/frontend/src/pages/alerts/[[...params]].js
@@ -1,3 +1,4 @@
+/** @jsxImportSource theme-ui */
 import { Accordion } from "@reach/accordion";
 import slugify from "@socialgouv/cdtn-slugify";
 import { getRouteBySource } from "@socialgouv/cdtn-sources";
@@ -9,10 +10,11 @@ import { DiffChange } from "src/components/changes";
 import { ChangesGroup } from "src/components/changes/ChangeGroup";
 import { Layout } from "src/components/layout/auth.layout";
 import { Stack } from "src/components/layout/Stack";
+import { Li } from "src/components/list";
 import { Pagination } from "src/components/pagination";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";
-import { Card, Container, Divider, Message } from "theme-ui";
+import { Box, Card, Container, Divider, Message, NavLink } from "theme-ui";
 import { useQuery } from "urql";
 
 const getAlertQuery = `
@@ -157,21 +159,41 @@ export function AlertPage() {
                   <ChangesGroup
                     changes={alert.changes.documents}
                     label="Contenus liés"
-                    renderChange={(item, i) => {
+                    renderChange={(item) => {
                       const [title, anchor] = item.document.title.split("#");
 
                       return (
-                        <li key={`${alert.id}-documents-${i}`}>
+                        <li
+                          sx={{ lineHeight: 1.4, paddingBottom: "xxsmall" }}
+                          key={`${alert.id}-documents-${item.document.id}`}
+                        >
                           <a
                             target="_blank"
                             rel="noopener noreferrer"
-                            key={item.document.id}
                             href={`https://code.travail.gouv.fr/${getRouteBySource(
                               item.document.source
                             )}/${slugify(title)}${anchor ? `#${anchor}` : ``}`}
                           >
                             {title}
                           </a>
+                          <Box>
+                            {jsxJoin(
+                              item.references.map((node) => (
+                                <NavLink
+                                  sx={{
+                                    fontSize: "xsmall",
+                                    color: "muted",
+                                    lineHeight: 1,
+                                  }}
+                                  href={node.url}
+                                  key={node.dila_cid}
+                                >
+                                  {node.title}
+                                </NavLink>
+                              )),
+                              ", "
+                            )}
+                          </Box>
                         </li>
                       );
                     }}
@@ -202,3 +224,15 @@ export function AlertPage() {
 // };
 
 export default withCustomUrqlClient(withUserProvider(AlertPage));
+
+function jsxJoin(array, str) {
+  return array.length > 0
+    ? array.reduce((result, item) => (
+        <>
+          {result}
+          {str}
+          {item}
+        </>
+      ))
+    : null;
+}

From 3046751b77c99b17d8fdac25cc30d1f967297974 Mon Sep 17 00:00:00 2001
From: LionelB <lionel@lumographe.fr>
Date: Tue, 23 Feb 2021 17:49:48 +0100
Subject: [PATCH 2/3] fix: lint

---
 targets/frontend/src/pages/alerts/[[...params]].js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/targets/frontend/src/pages/alerts/[[...params]].js b/targets/frontend/src/pages/alerts/[[...params]].js
index 0622029eb..d63ce701b 100644
--- a/targets/frontend/src/pages/alerts/[[...params]].js
+++ b/targets/frontend/src/pages/alerts/[[...params]].js
@@ -10,7 +10,6 @@ import { DiffChange } from "src/components/changes";
 import { ChangesGroup } from "src/components/changes/ChangeGroup";
 import { Layout } from "src/components/layout/auth.layout";
 import { Stack } from "src/components/layout/Stack";
-import { Li } from "src/components/list";
 import { Pagination } from "src/components/pagination";
 import { withCustomUrqlClient } from "src/hoc/CustomUrqlClient";
 import { withUserProvider } from "src/hoc/UserProvider";

From f7200dea18843e0f8ee8cc959eff98f59209d9cf Mon Sep 17 00:00:00 2001
From: LionelB <lionel@lumographe.fr>
Date: Thu, 25 Feb 2021 11:22:35 +0100
Subject: [PATCH 3/3] fix: ref

---
 .../src/pages/alerts/[[...params]].js         | 189 ++++++++++--------
 1 file changed, 103 insertions(+), 86 deletions(-)

diff --git a/targets/frontend/src/pages/alerts/[[...params]].js b/targets/frontend/src/pages/alerts/[[...params]].js
index d63ce701b..e6e1fae1d 100644
--- a/targets/frontend/src/pages/alerts/[[...params]].js
+++ b/targets/frontend/src/pages/alerts/[[...params]].js
@@ -108,100 +108,117 @@ export function AlertPage() {
     <Layout title="Gestion des alertes">
       <Stack>
         <AlertTabs repository={repository} activeStatus={activeStatus} />
-        {alerts.map((alert) => (
-          <Container sx={{ paddingTop: "large" }} key={`${alert.id}`}>
-            <Card>
-              <Stack>
-                <AlertTitle alertId={alert.id} info={alert.info}>
-                  {getTitle(alert)}
-                </AlertTitle>
-                <Accordion collapsible multiple>
-                  {alert.changes.added.length > 0 && (
+        {alerts.map((alert) => {
+          const openIndices = [];
+          // Pre-open documents panel If there are documents targeted by the alert
+          if (alert.changes.documents && alert.changes.documents.length > 0) {
+            openIndices.push(0);
+          }
+          return (
+            <Container sx={{ paddingTop: "large" }} key={`${alert.id}`}>
+              <Card>
+                <Stack>
+                  <AlertTitle alertId={alert.id} info={alert.info}>
+                    {getTitle(alert)}
+                  </AlertTitle>
+                  <Accordion collapsible multiple defaultIndex={openIndices}>
                     <ChangesGroup
-                      changes={alert.changes.added}
-                      label="Éléments ajoutés"
+                      changes={alert.changes.documents}
+                      label="Contenus liés"
+                      renderChange={(item) => {
+                        const [title, anchor] = item.document.title.split("#");
+
+                        return (
+                          <li
+                            sx={{ lineHeight: 1.4, paddingBottom: "xxsmall" }}
+                            key={`${alert.id}-documents-${item.document.id}`}
+                          >
+                            <a
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              href={`https://code.travail.gouv.fr/${getRouteBySource(
+                                item.document.source
+                              )}/${slugify(title)}${
+                                anchor ? `#${anchor}` : ``
+                              }`}
+                            >
+                              {title}
+                            </a>
+                            <Box>
+                              {jsxJoin(
+                                item.references.map((node) => (
+                                  <NavLink
+                                    sx={{
+                                      color: "muted",
+                                      fontSize: "xsmall",
+                                      lineHeight: 1,
+                                    }}
+                                    href={node.url}
+                                    key={`${alert.id}-${item.document.id}-${node.dila_id}-${node.title}`}
+                                  >
+                                    {node.title}
+                                  </NavLink>
+                                )),
+                                ", "
+                              )}
+                            </Box>
+                          </li>
+                        );
+                      }}
+                    />
+
+                    {alert.changes.documents?.length > 0 &&
+                      alert.changes.added.length > 0 && <Divider />}
+
+                    {alert.changes.added.length > 0 && (
+                      <ChangesGroup
+                        changes={alert.changes.added}
+                        label="Éléments ajoutés"
+                        renderChange={(changes, i) =>
+                          renderChange(
+                            changes,
+                            `${alert.id}-added-${i}`,
+                            alert.info.type
+                          )
+                        }
+                      />
+                    )}
+
+                    {alert.changes.added.length > 0 &&
+                      alert.changes.modified.length > 0 && <Divider />}
+
+                    <ChangesGroup
+                      changes={alert.changes.modified}
+                      label="Éléments modifiés"
                       renderChange={(changes, i) =>
                         renderChange(
                           changes,
-                          `${alert.id}-added-${i}`,
+                          `${alert.id}-modified-${i}`,
                           alert.info.type
                         )
                       }
                     />
-                  )}
-                  {alert.changes.added.length > 0 &&
-                    alert.changes.modified.length > 0 && <Divider />}
-                  <ChangesGroup
-                    changes={alert.changes.modified}
-                    label="Éléments modifiés"
-                    renderChange={(changes, i) =>
-                      renderChange(
-                        changes,
-                        `${alert.id}-modified-${i}`,
-                        alert.info.type
-                      )
-                    }
-                  />
-                  {alert.changes.removed.length > 0 && <Divider />}
-                  <ChangesGroup
-                    changes={alert.changes.removed}
-                    label="Éléments supprimés"
-                    renderChange={(changes, i) =>
-                      renderChange(
-                        changes,
-                        `${alert.id}-removed-${i}`,
-                        alert.info.type
-                      )
-                    }
-                  />
-                  {alert.changes.documents?.length > 0 && <Divider />}
-                  <ChangesGroup
-                    changes={alert.changes.documents}
-                    label="Contenus liés"
-                    renderChange={(item) => {
-                      const [title, anchor] = item.document.title.split("#");
-
-                      return (
-                        <li
-                          sx={{ lineHeight: 1.4, paddingBottom: "xxsmall" }}
-                          key={`${alert.id}-documents-${item.document.id}`}
-                        >
-                          <a
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            href={`https://code.travail.gouv.fr/${getRouteBySource(
-                              item.document.source
-                            )}/${slugify(title)}${anchor ? `#${anchor}` : ``}`}
-                          >
-                            {title}
-                          </a>
-                          <Box>
-                            {jsxJoin(
-                              item.references.map((node) => (
-                                <NavLink
-                                  sx={{
-                                    fontSize: "xsmall",
-                                    color: "muted",
-                                    lineHeight: 1,
-                                  }}
-                                  href={node.url}
-                                  key={node.dila_cid}
-                                >
-                                  {node.title}
-                                </NavLink>
-                              )),
-                              ", "
-                            )}
-                          </Box>
-                        </li>
-                      );
-                    }}
-                  />
-                </Accordion>
-              </Stack>
-            </Card>
-          </Container>
-        ))}
+
+                    {alert.changes.modified.length > 0 &&
+                      alert.changes.removed.length > 0 && <Divider />}
+
+                    <ChangesGroup
+                      changes={alert.changes.removed}
+                      label="Éléments supprimés"
+                      renderChange={(changes, i) =>
+                        renderChange(
+                          changes,
+                          `${alert.id}-removed-${i}`,
+                          alert.info.type
+                        )
+                      }
+                    />
+                  </Accordion>
+                </Stack>
+              </Card>
+            </Container>
+          );
+        })}
         <Pagination
           count={alerts_aggregate.aggregate.count}
           currentPage={currentPage}