Merge branch 'chore/upgrade-react-nextjs' into staging

wri · Oct 23, 2024 · c9fd52a · c9fd52a
2 parents d5d6eb6 + fba0316
commit c9fd52a
Show file tree

Hide file tree

Showing 40 changed files with 1,405 additions and 1,086 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -51,7 +51,7 @@ jobs:
       - name: Install API dependencies
         run: |
           sudo apt update --fix-missing
-          sudo apt-get -yqq install libpq-dev build-essential libcurl4-openssl-dev gdal-bin
+          sudo apt-get -yqq install libpq-dev build-essential libcurl4-openssl-dev libgdal-dev
           npm install -g mjml
 
       - name: Setup API Ruby
@@ -125,8 +125,9 @@ jobs:
         run: |
           echo "
           PORT=4000
+          ENV=production
           NODE_ENV=production
-          SECRET=session_secret
+          SECRET=946bd4887fa5eea44256377ca06fc798f431359e1b1885e0d9ac570c1f24d8fe3e5863855d02d61e375729a330f5c7d84606ca1bf735b0676eb368321a119637
           OTP_COUNTRIES='COG,CMR,COD,CAF,GAB'
           OTP_COUNTRIES_IDS='7,47,45,188,53'
           APP_URL=http://localhost:4000
@@ -152,7 +153,7 @@ jobs:
           key: nextjs-${{ hashFiles('yarn.lock') }}
 
       - name: Start Portal
-        run: yarn start &
+        run: yarn start > otp-portal.log &
 
       - name: Run E2E Tests
         working-directory: e2e
@@ -164,6 +165,7 @@ jobs:
         with:
           name: e2e-tests-artifacts
           path: |
+            otp-portal.log
             e2e/cypress/screenshots
             e2e/cypress/videos
             e2e/cypress/e2e/__image_snapshots__

diff --git a/components/layout/footer.js b/components/layout/footer.js
@@ -19,7 +19,7 @@ const Footer = () => {
             <div className="footer-item">
               <h1 className="logo">
                 <Link href="/" prefetch={false}>
-                  <a>Open Timber Portal</a>
+                  Open Timber Portal
                 </Link>
               </h1>
             </div>
@@ -50,11 +50,11 @@ const Footer = () => {
               </p>
 
               <div className="footer-links">
-                <Link href="/terms" prefetch={false}>
+                <Link href="/terms" prefetch={false} legacyBehavior>
                   {intl.formatMessage({ id: 'terms.title' })}
                 </Link>
                 <span> | </span>
-                <Link href="/privacy-policy" prefetch={false}>
+                <Link href="/privacy-policy" prefetch={false} legacyBehavior>
                   {intl.formatMessage({ id: 'Privacy Policy' })}
                 </Link>
                 <span> | </span>

diff --git a/components/layout/head.js b/components/layout/head.js
@@ -5,10 +5,11 @@ import { useRouter } from 'next/router';
 
 const Head = ({ title, description }) => {
   const { locales, asPath } = useRouter();
+  const fullTitle = `${title} | Open Timber Portal`;
 
   return (
     <HeadNext>
-      <title>{title} | Open Timber Portal</title>
+      <title>{fullTitle}</title>
       <meta name="description" content={description} />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta name="author" content="Vizzuality" />

diff --git a/components/layout/header.js b/components/layout/header.js
@@ -31,9 +31,9 @@ const Header = ({ url }) => {
         <div className="header-container">
           <h1 className="header-logo">
             <Link href="/" prefetch={false}>
-              <a>
+
                 Open Timber Portal
-              </a>
+
             </Link>
             {process.env.ENV === 'staging' && (
               <span className="header-logo-staging">Staging</span>

diff --git a/components/map/legend/component.js b/components/map/legend/component.js
@@ -78,19 +78,19 @@ class LegendComponent extends PureComponent {
     setLayerSettings({
       id,
       settings: {
-        ...decodeConfig && {
+        ...(decodeConfig && {
           decodeParams: {
             startDate: dates[0],
             endDate: dates[1],
             trimEndDate: dates[2]
           }
-        },
-        ...!decodeConfig && {
+        }),
+        ...(!decodeConfig && {
           params: {
             startDate: dates[0],
             endDate: dates[1]
           }
-        }
+        })
       }
     });
   }

diff --git a/components/map/legend/templates/alerts/component.js b/components/map/legend/templates/alerts/component.js
@@ -25,9 +25,9 @@ class LegendTemplateAlerts extends PureComponent {
         decodeParams: {
           ...decodeParams,
           [who]: dayjs(value).format('YYYY-MM-DD'),
-          ...who === 'trimEndDate' && {
+          ...(who === 'trimEndDate' && {
             endDate: dayjs(value).format('YYYY-MM-DD')
-          }
+          })
         }
       }
     })

diff --git a/components/map/popup/templates/fmu/component.js b/components/map/popup/templates/fmu/component.js
@@ -52,26 +52,31 @@ class FMUTemplatePopup extends PureComponent {
         </table>
 
         {operatorId && operatorName && id &&
-          <Link href={`/operators/${operatorId}/documentation?fmuId=${id}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {intl.formatMessage({ id: 'documentation' })}
-            </a>
+          <Link
+            href={`/operators/${operatorId}/documentation?fmuId=${id}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {intl.formatMessage({ id: 'documentation' })}
+
           </Link>
         }
 
         {id &&
-          <Link href={`/operators/${operatorId}/observations?fmuId=${id}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {intl.formatMessage({ id: 'observations' })} ({fmuObservations})
-            </a>
+          <Link
+            href={`/operators/${operatorId}/observations?fmuId=${id}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {intl.formatMessage({ id: 'observations' })}({fmuObservations})
           </Link>
         }
 
         {operatorId &&
-          <Link href={`/operators/${operatorId}`}>
-            <a className="c-button -tertiary -fullwidth -ellipsis -small">
-              {operatorName}
-            </a>
+          <Link
+            href={`/operators/${operatorId}`}
+            className="c-button -tertiary -fullwidth -ellipsis -small">
+
+            {operatorName}
+
           </Link>
         }
       </div>

diff --git a/components/map/popup/templates/observation/component.js b/components/map/popup/templates/observation/component.js
@@ -38,11 +38,15 @@ export default function ObservationPopup({ data }) {
       label: intl.formatMessage({ id: 'operator' }),
       value: (
         data['operator-profile-id'] ? (
-          <Link href={`/operators/${data['operator-profile-id']}`} passHref>
-            <a target="_blank" rel="noopener noreferrer">
-              {data.operator}
-            </a>
-          </Link>
+          (<Link
+            href={`/operators/${data['operator-profile-id']}`}
+            passHref
+            target="_blank"
+            rel="noopener noreferrer">
+
+            {data.operator}
+
+          </Link>)
         ) : data.operator
       )
     },

diff --git a/components/operators/new.js b/components/operators/new.js
@@ -254,17 +254,17 @@ class NewOperator extends React.Component {
 
                   <ul className="c-field-buttons">
                     <li>
-                      <Link href="/operators">
-                        <a className="card-link c-button -primary -fullwidth">
-                          {intl.formatMessage({ id: 'operators' })}
-                        </a>
+                      <Link href="/operators" className="card-link c-button -primary -fullwidth">
+
+                        {intl.formatMessage({ id: 'operators' })}
+
                       </Link>
                     </li>
                     <li>
-                      <Link href="/observations">
-                        <a className="card-link c-button -primary -fullwidth">
-                          {intl.formatMessage({ id: 'observations' })}
-                        </a>
+                      <Link href="/observations" className="card-link c-button -primary -fullwidth">
+
+                        {intl.formatMessage({ id: 'observations' })}
+
                       </Link>
                     </li>
                   </ul>

diff --git a/components/operators/table.js b/components/operators/table.js
@@ -134,54 +134,58 @@ class OperatorsTable extends React.Component {
                   (fmuSearch && fmuSearch.length > 1) ||
                   expandedOperatorIds.includes(r.id);
 
-                return (
-                  <>
-                    <tr key={`${r.id}-ranking`}>
-                      <td
-                        id={`td-documentation-${r.id}`}
-                        className="td-documentation -ta-left"
+                return <>
+                  <tr key={`${r.id}-ranking`}>
+                    <td
+                      id={`td-documentation-${r.id}`}
+                      className="td-documentation -ta-left"
+                    >
+                      {r.documentation}%
+                    </td>
+
+                    <td className="-ta-left">
+                      <Link
+                        href={{
+                          pathname: '/operators/detail',
+                          query: { id: r.slug },
+                        }}
+                        as={`/operators/${r.slug}`}
                       >
-                        {r.documentation}%
-                      </td>
-
-                      <td className="-ta-left">
-                        <Link href={`/operators/${r.slug}/overview`}>
-                          <a>{r.name}</a>
-                        </Link>
-                      </td>
-
-                      <td className="-ta-left">{r.country}</td>
-                      <td className="-ta-center">
-                        {!!r.obsPerVisit && (
-                          <span>{r.obsPerVisit.toFixed(2)}</span>
-                        )}
-                        {!r.obsPerVisit && (
-                          <div className="stoplight-dot -state-0}" />
-                        )}
-                      </td>
-                      <td className="-ta-right">{r.fmusLenght}</td>
-                      <td className="-ta-right">{r.certification}</td>
-                      <td className="-ta-right">
-                        {r.fmusLenght > 0 && (
-                          <button
-                            className={`expand-row-btn${expanded ? ' -green' : ''
-                              }`}
-                            onClick={() => this.handleRowToggle(r.id)}
-                          >
-                            {expanded ? (
-                              <Icon name="icon-arrow-up" />
-                            ) : (
-                              <Icon name="icon-arrow-down" />
-                            )}
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                    {expanded && (
-                      <TableExpandedRow operator={r} fmuSearch={fmuSearch} />
-                    )}
-                  </>
-                );
+                        {r.name}
+                      </Link>
+                    </td>
+
+                    <td className="-ta-left">{r.country}</td>
+                    <td className="-ta-center">
+                      {!!r.obsPerVisit && (
+                        <span>{r.obsPerVisit.toFixed(2)}</span>
+                      )}
+                      {!r.obsPerVisit && (
+                        <div className="stoplight-dot -state-0}" />
+                      )}
+                    </td>
+                    <td className="-ta-right">{r.fmusLenght}</td>
+                    <td className="-ta-right">{r.certification}</td>
+                    <td className="-ta-right">
+                      {r.fmusLenght > 0 && (
+                        <button
+                          className={`expand-row-btn${expanded ? ' -green' : ''
+                            }`}
+                          onClick={() => this.handleRowToggle(r.id)}
+                        >
+                          {expanded ? (
+                            <Icon name="icon-arrow-up" />
+                          ) : (
+                            <Icon name="icon-arrow-down" />
+                          )}
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                  {expanded && (
+                    <TableExpandedRow operator={r} fmuSearch={fmuSearch} />
+                  )}
+                </>;
               })}
             </tbody>
           </table>

diff --git a/components/ui/card.js b/components/ui/card.js
@@ -28,11 +28,11 @@ export default function Card({ theme, letter, title, description, link, Componen
         {!isNullOrUndefined(letter) && <div className={`card-letter ${letterClassName}`}> {letter} </div>}
 
         <h2 className="card-title">{title}</h2>
-        <p className="card-description">
+        <div className="card-description">
           <Truncate lines={6}>
             {renderHTML(description || '')}
           </Truncate>
-        </p>
+        </div>
 
         {!!Component && (
           <div className="card-component">
@@ -42,8 +42,11 @@ export default function Card({ theme, letter, title, description, link, Componen
       </div>
 
       {!!link && (
-        <Link {...omit(link, 'label')} prefetch={false}>
-          <a className="card-link c-button -primary -fullwidth">{link.label}</a>
+        <Link
+          {...omit(link, 'label')}
+          prefetch={false}
+          className="card-link c-button -primary -fullwidth">
+          {link.label}
         </Link>
       )}
     </div>

diff --git a/components/ui/chart-legend.js b/components/ui/chart-legend.js
@@ -26,7 +26,7 @@ function ChartLegend({ title, list, className, intl }) {
             as={'/help/how-otp-works?article=assessing-severity-of-observations'}
             prefetch={false}
           >
-            <a><Icon name="icon-info" className="-smaller" /></a>
+            <Icon name="icon-info" className="-smaller" />
           </Link>
 
           {intl.formatMessage({ id: 'legend.title' })}:

diff --git a/components/ui/country-doc-modal.js b/components/ui/country-doc-modal.js
@@ -74,14 +74,14 @@ class DocModal extends React.Component {
           ...(docType === 'file' && form.file.base64 && {
             attachment: form.file.base64,
           }),
-          ...docType === 'stats' && {
+          ...(docType === 'stats' && {
             value: form.value,
             units: form.units,
             link: form.link
-          },
-          ...docType === 'link' && {
+          }),
+          ...(docType === 'link' && {
             link: form.link
-          }
+          })
         }
       }
     };

diff --git a/components/ui/language-dropdown.js b/components/ui/language-dropdown.js
@@ -53,7 +53,7 @@ const LanguageDropdown = ({ showSelectedCode, className }) => {
               key={l.code}
               className="language-dropdown-list-item"
             >
-              <Link href={fixedAsPath} passHref locale={l.code}>
+              <Link href={fixedAsPath} passHref locale={l.code} legacyBehavior>
                 <LanguageLink locale={l.code}>
                   {l.name}
                 </LanguageLink>
@@ -63,7 +63,7 @@ const LanguageDropdown = ({ showSelectedCode, className }) => {
         </ul>
       </DropdownContent>
     </Dropdown>
-  )
+  );
 }
 
 LanguageDropdown.propTypes = {