Fix/discover link break

site/gatsby-site/cypress/e2e/integration/discover.cy.js

@@ -547,6 +547,32 @@ describe('The Discover app', () => {
     }
   );
 
+  it('Should update display types', () => {
+    cy.visit(url + '?display=list');
+
+    cy.get('[data-cy="display-mode-list"]').should('have.class', 'selected');
+
+    cy.waitForStableDOM();
+
+    cy.get('[data-cy="display-mode-compact"]').click();
+
+    cy.waitForStableDOM();
+
+    cy.location('search', { timeout: 8000 }).should('contain', 'display=compact');
+
+    cy.get('[data-cy="display-mode-compact"]').should('have.class', 'selected');
+
+    cy.waitForStableDOM();
+
+    cy.get('[data-cy="display-mode-details"]').click();
+
+    cy.waitForStableDOM();
+
+    cy.location('search', { timeout: 8000 }).should('contain', 'display=details');
+
+    cy.get('[data-cy="display-mode-details"]').should('have.class', 'selected');
+  });
+
   conditionalIt(
     !Cypress.env('isEmptyEnvironment'),
     'Search using the classifications filter',

site/gatsby-site/src/components/discover/Discover.js

@@ -43,7 +43,20 @@ export default function Discover() {
     }, 1000)
   ).current;
 
+  const [display, setDisplay] = useState('');
+
   useEffect(() => {
+    const queryString = window.location.search;
+
+    const urlParams = new URLSearchParams(queryString);
+
+    const display = urlParams.get('display');
+
+    setDisplay((prev) => {
+      if (display && display !== prev) {
+        return display;
+      }
+    });
     window.addEventListener('resize', handleWindowSizeChange);
 
     handleWindowSizeChange();
@@ -72,8 +85,9 @@ export default function Discover() {
             return window.location;
           },
           parseURL: ({ location }) => parseURL({ location, indexName, queryConfig, taxa }),
-          createURL: ({ routeState }) =>
-            createURL({ indexName, locale, queryConfig, routeState, taxa }),
+          createURL: ({ routeState }) => {
+            return createURL({ indexName, locale, queryConfig, routeState, taxa, display });
+          },
           push: (url) => {
             navigate(`?${url}`);
           },

site/gatsby-site/src/components/discover/DisplayModeSwitch.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useQueryParam } from 'use-query-params';
 import { DisplayModeEnumParam } from './queryParams';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTh, faThList, faInfo } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-react';
+import { useInstantSearch } from 'react-instantsearch';
 
 const modes = {
   details: {
@@ -20,8 +21,30 @@ const modes = {
 export default function DisplayModeSwitch() {
   const [display, setDisplay] = useQueryParam('display', DisplayModeEnumParam);
 
+  const { indexUiState, setIndexUiState } = useInstantSearch();
+
+  const [, setConfigure] = useState({ ...indexUiState.configure });
+
+  useEffect(() => {
+    setConfigure((configure) => ({ ...configure, ...indexUiState.configure }));
+  }, [indexUiState]);
+
   const onChange = (key) => {
     setDisplay(key);
+    setIndexUiState((previousState) => {
+      return {
+        ...previousState,
+        refinementList: {
+          ...previousState.refinementList,
+          display: [key],
+        },
+        configure: {
+          ...previousState.configure,
+        },
+      };
+    });
+
+    setConfigure((configure) => ({ ...configure }));
   };
 
   return (
@@ -32,8 +55,11 @@ export default function DisplayModeSwitch() {
           onClick={() => onChange(key)}
           size="sm"
           className={`${
-            key == display ? 'bg-gray-700 hover:bg-gray-800' : 'bg-gray-500 hover:bg-gray-700'
+            key == display
+              ? 'bg-gray-700 hover:bg-gray-800 selected'
+              : 'bg-gray-500 hover:bg-gray-700'
           } text-white w-8`}
+          data-cy={`display-mode-${key}`}
         >
           <FontAwesomeIcon icon={modes[key].icon} />
         </Button>

site/gatsby-site/src/components/discover/createURL.js

@@ -93,14 +93,18 @@ const getQueryFromState = ({ state, locale, taxa }) => {
   return query;
 };
 
-export default function ({ routeState, indexName, locale, queryConfig, taxa }) {
+export default function ({ routeState, indexName, locale, queryConfig, taxa, display }) {
   const state = routeState[indexName] || {};
 
   const query = getQueryFromState({ state, locale, taxa });
 
   const encoded = encodeQueryParams(queryConfig, query);
 
-  const stringified = stringify(encoded);
+  let stringified = stringify(encoded);
+
+  if (display) {
+    stringified += `&display=${display}`;
+  }
 
   return stringified;
 }

site/gatsby-site/src/components/discover/hitTypes/List.js

@@ -5,7 +5,7 @@ import TranslationBadge from 'components/i18n/TranslationBadge';
 import { VIEW_TYPES } from 'utils/discover';
 import ReportCard from 'components/reports/ReportCard';
 
-export default function Details({ item, toggleFilterByIncidentId, viewType }) {
+export default function List({ item, toggleFilterByIncidentId, viewType }) {
   const actions = <Actions toggleFilterByIncidentId={toggleFilterByIncidentId} item={item} />;
 
   item.title = viewType === VIEW_TYPES.INCIDENTS ? item.incident_title : item.title;

site/gatsby-site/src/components/reports/ReportCard.js

@@ -24,7 +24,7 @@ const ReportCard = ({
   incidentId = null,
   readOnly = false,
 }) => {
-  item.incident_id = incidentId;
+  item.incident_id = incidentId || item.incident_id;
 
   const { t } = useTranslation();