Merge branch 'master' into thematic-pages

ooni · Dec 13, 2024 · 02d42d2 · 02d42d2
2 parents 7121e24 + 044134a
commit 02d42d2
Show file tree

Hide file tree

Showing 30 changed files with 557 additions and 567 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -98,7 +98,6 @@ const Chart = ({ queryParams = {}, setState = null, headerOptions = {} }) => {
         </>
         {error && (
           <DetailsBox
-            collapsed={false}
             content={
               <details>
                 <summary>

diff --git a/components/ConditionalWrapper.js b/components/ConditionalWrapper.js
@@ -0,0 +1,4 @@
+const ConditionalWrapper = ({ condition, wrapper, children }) =>
+  condition ? wrapper(children) : children
+
+export default ConditionalWrapper
diff --git a/components/Layout.js b/components/Layout.js
@@ -4,11 +4,12 @@ import { useMemo } from 'react'
 import { StyledStickyNavBar } from 'components/SharedStyledComponents'
 import { UserProvider } from 'hooks/useUser'
 import { useRouter } from 'next/router'
+import ConditionalWrapper from './ConditionalWrapper'
 import Footer from './Footer'
 import Header from './Header'
 import NavBar from './NavBar'
 
-const Layout = ({ children }) => {
+const Layout = ({ children, isEmbeddedView }) => {
   const { pathname } = useRouter()
 
   const navbarColor = useMemo(() => {
@@ -38,20 +39,25 @@ const Layout = ({ children }) => {
       <div className="site flex flex-col min-h-[100vh]">
         <div className="flex-[1_0_auto]">
           <Header />
-          {navbarSticky ? (
-            <StyledStickyNavBar>
+          {!isEmbeddedView && (
+            <ConditionalWrapper
+              condition={!!navbarSticky}
+              wrapper={(children) => (
+                <StyledStickyNavBar>{children}</StyledStickyNavBar>
+              )}
+            >
               <NavBar color={navbarColor} />
-            </StyledStickyNavBar>
-          ) : (
-            <NavBar color={navbarColor} />
+            </ConditionalWrapper>
           )}
           <div className={`content ${!navbarColor && 'mt-[-66px]'}`}>
             {children}
           </div>
         </div>
-        <div className="flex-shrink-0">
-          <Footer />
-        </div>
+        {!isEmbeddedView && (
+          <div className="flex-shrink-0">
+            <Footer />
+          </div>
+        )}
       </div>
     </UserProvider>
   )

diff --git a/components/NotFound.js b/components/NotFound.js
@@ -5,12 +5,14 @@ const NotFound = ({ title }) => {
   const { asPath } = useRouter()
 
   return (
-    <div className="container">
-      <div className="flex justify-around items-center my-16">
-        <OONI404 height="200px" />
-        <div className="w-1/2">
-          <h4>{title}</h4>
-          <div className="text-gray-800">{`${process.env.NEXT_PUBLIC_EXPLORER_URL}${asPath}`}</div>
+    <div className="shadow-[0_-100px_0] shadow-blue-500 mt-16">
+      <div className="container">
+        <div className="flex justify-around items-center py-20">
+          <OONI404 height="200px" />
+          <div className="w-1/2">
+            <h4>{title}</h4>
+            <div className="text-gray-800">{`${process.env.NEXT_PUBLIC_EXPLORER_URL}${asPath}`}</div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/components/SocialButtons.js b/components/SocialButtons.js
@@ -6,9 +6,9 @@ const SocialButtons = ({ url }) => {
   const intl = useIntl()
 
   return (
-    <div className="flex px-2 items-center">
+    <div className="flex gap-2 items-center">
       <MdShare height="20px" width="20px" />
-      <div className="pl-2 text-right">
+      <div>
         {intl.formatMessage(
           { id: 'SocialButtons.CTA' },
           {

diff --git a/components/aggregation/mat/Filters.js b/components/aggregation/mat/Filters.js
@@ -312,10 +312,7 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   })
 
   return (
-    <DetailsBox
-      title={intl.formatMessage({ id: 'MAT.Table.Filters' })}
-      collapsed={false}
-    >
+    <DetailsBox title={intl.formatMessage({ id: 'MAT.Table.Filters' })}>
       <div className="flex flex-col">
         <div className="flex mb-4 items-center">
           <button

diff --git a/components/aggregation/mat/Help.js b/components/aggregation/mat/Help.js
@@ -15,7 +15,7 @@ const boxTitle = (
 
 const Help = () => {
   return (
-    <DetailsBox title={boxTitle} collapsed={false}>
+    <DetailsBox title={boxTitle}>
       <FormattedMarkdown id="MAT.Help.Content" />
       <div className="flex flex-col">
         {[...getCategoryCodesMap().values()].map(

diff --git a/components/country/ConfirmedBlockedCategory.js b/components/country/ConfirmedBlockedCategory.js
@@ -56,37 +56,32 @@ const ConfirmedBlockedCategory = () => {
           id: 'Country.Websites.ConfirmedBlockedCategories',
         })}
       </h3>
-      <>
-        {!blockedCategoriesData && !error ? (
-          <div> Loading ...</div>
-        ) : blockedCategoriesData === null ||
-          blockedCategoriesData.length === 0 ? (
-          <h5>
-            <FormattedMessage id="General.NoData" />
-          </h5>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            {blockedCategoriesData?.map((category) => (
-              <CategoryBadge
-                key={category.category_code}
-                categoryCode={category.category_code}
-              />
-            ))}
-          </div>
-        )}
-      </>
+      {!blockedCategoriesData && !error ? (
+        <div> Loading ...</div>
+      ) : blockedCategoriesData === null ||
+        blockedCategoriesData.length === 0 ? (
+        <h5>
+          <FormattedMessage id="General.NoData" />
+        </h5>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {blockedCategoriesData?.map((category) => (
+            <CategoryBadge
+              key={category.category_code}
+              categoryCode={category.category_code}
+            />
+          ))}
+        </div>
+      )}
       {error && (
         <DetailsBox
-          collapsed={false}
           content={
-            <>
-              <details>
-                <summary>
-                  <span>Error: {error.message}</span>
-                </summary>
-                <pre>{JSON.stringify(error, null, 2)}</pre>
-              </details>
-            </>
+            <details>
+              <summary>
+                <span>Error: {error.message}</span>
+              </summary>
+              <pre>{JSON.stringify(error, null, 2)}</pre>
+            </details>
           }
         />
       )}

diff --git a/components/country/CountryDetails.js b/components/country/CountryDetails.js
@@ -1,4 +1,3 @@
-import axios from 'axios'
 import Flag from 'components/Flag'
 import { StyledStickySubMenu } from 'components/SharedStyledComponents'
 import ThirdPartyDataChart from 'components/ThirdPartyDataChart'
@@ -10,7 +9,7 @@ import Overview from 'components/country/Overview'
 import PageNavMenu from 'components/country/PageNavMenu'
 import WebsitesSection from 'components/country/Websites'
 import { useRouter } from 'next/router'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useIntl } from 'react-intl'
 import dayjs from 'services/dayjs'
 import useScrollPosition from '/hooks/useScrollPosition'
@@ -37,15 +36,9 @@ const Header = ({ countryCode, countryName }) => {
   )
 }
 
-const CountryDetails = ({
-  countryCode,
-  overviewStats,
-  reports,
-  coverageDataSSR,
-}) => {
+const CountryDetails = ({ countryCode, overviewStats, reports }) => {
   const intl = useIntl()
   const countryName = getLocalisedRegionName(countryCode, intl.locale)
-  const [newData, setNewData] = useState(false)
   const router = useRouter()
   const { query } = router
 
@@ -78,30 +71,6 @@ const CountryDetails = ({
     }
   }, [])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  const fetchTestCoverageData = useCallback(
-    (testGroupList) => {
-      const fetcher = async (testGroupList) => {
-        const client = axios.create({
-          baseURL: process.env.NEXT_PUBLIC_OONI_API,
-        }) // eslint-disable-line
-        const result = await client.get('/api/_/test_coverage', {
-          params: {
-            probe_cc: countryCode,
-            test_groups: testGroupList,
-          },
-        })
-        // TODO: Use React.createContext to pass along data and methods
-        setNewData({
-          networkCoverage: result.data.network_coverage,
-          testCoverage: result.data.test_coverage,
-        })
-      }
-      fetcher(testGroupList)
-    },
-    [countryCode, setNewData],
-  )
-
   // Sync page URL params with changes from form values
   const onSubmit = ({ since, until }) => {
     const params = {
@@ -119,9 +88,6 @@ const CountryDetails = ({
     }
   }
 
-  const { testCoverage, networkCoverage } =
-    newData !== false ? newData : coverageDataSSR
-
   return (
     <>
       <CountryHead
@@ -143,16 +109,9 @@ const CountryDetails = ({
           >
             <Overview
               countryName={countryName}
-              middleboxCount={overviewStats.middlebox_detected_networks}
-              imCount={overviewStats.im_apps_blocked}
-              circumventionTools={overviewStats.circumvention_tools_blocked}
-              blockedWebsitesCount={overviewStats.websites_confirmed_blocked}
               networkCount={overviewStats.network_count}
               measurementCount={overviewStats.measurement_count}
               measuredSince={overviewStats.first_bucket_date}
-              testCoverage={testCoverage}
-              networkCoverage={networkCoverage}
-              fetchTestCoverageData={fetchTestCoverageData}
               featuredArticles={reports}
             />
             <Form onSubmit={onSubmit} since={since} until={until} />

diff --git a/components/measurement/CommonDetails.js b/components/measurement/CommonDetails.js
@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import { colors } from 'ooni-components'
 import PropTypes from 'prop-types'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { EmbeddedViewContext } from '../../pages/m/[measurement_uid]'
 import { DetailsBox, DetailsBoxTable } from './DetailsBox'
 
 const LoadingRawData = () => {
@@ -17,7 +17,7 @@ const ReactJson = dynamic(() => import('react-json-view'), {
 })
 
 const JsonViewer = ({ src, collapsed }) => (
-  <div className="[&_.string-value]:overflow-ellipsis [&_.string-value]:max-w-[800px] [&_.string-value]:overflow-hidden [&_.string-value]:inline-block">
+  <div className="text-xs md:text-sm [&_.string-value]:overflow-ellipsis [&_.string-value]:max-w-[800px] [&_.string-value]:overflow-hidden [&_.string-value]:inline-block">
     <ReactJson collapsed={collapsed} src={src} name={null} indentWidth={2} />
   </div>
 )
@@ -41,6 +41,8 @@ const CommonDetails = ({
     resolver_network_name,
   } = measurement ?? {}
 
+  const isEmbeddedView = useContext(EmbeddedViewContext)
+
   const { query } = useRouter()
   const queryString = new URLSearchParams(query)
   const rawMsmtDownloadURL = `${process.env.NEXT_PUBLIC_OONI_API}/api/v1/raw_measurement?${queryString}`
@@ -133,42 +135,35 @@ const CommonDetails = ({
   return (
     <>
       {showResolverItems && (
-        <div className="flex my-8">
-          {/* Resolver data */}
-          <DetailsBoxTable
-            title={
-              <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
-            }
-            items={resolverItems}
-          />
-        </div>
+        // Resolver data
+        <DetailsBoxTable
+          title={
+            <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
+          }
+          items={resolverItems}
+        />
       )}
-      <div className="flex my-8">
-        {/* Metadata: platform, probe, MK version etc. */}
-        <DetailsBoxTable items={items} className="bg-gray-200" />
-      </div>
+      {/* Metadata: platform, probe, MK version etc. */}
+      <DetailsBoxTable items={items} className="bg-gray-200" />
       {/* User Feedback */}
       {!!userFeedbackItems.length && (
-        <div className="flex my-8">
-          <DetailsBoxTable
-            title={
-              <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
-            }
-            items={userFeedbackItems}
-          />
-        </div>
+        <DetailsBoxTable
+          title={
+            <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
+          }
+          items={userFeedbackItems}
+        />
       )}
       {/* Raw Measurement */}
-      <div className="flex">
-        <DetailsBox
-          collapsed={false}
-          title={
-            <div className="flex flex-1 px-4 justify-between flex-col md:flex-row items-center bg-gray-200">
-              <div>
-                {intl.formatMessage({
-                  id: 'Measurement.CommonDetails.RawMeasurement.Heading',
-                })}
-              </div>
+      <DetailsBox
+        title={
+          <div className="flex flex-1 justify-between flex-col md:flex-row items-center bg-gray-200">
+            <div className="self-start">
+              {intl.formatMessage({
+                id: 'Measurement.CommonDetails.RawMeasurement.Heading',
+              })}
+            </div>
+            {!isEmbeddedView && (
               <div className="flex">
                 <a
                   className="text-blue-700"
@@ -197,19 +192,19 @@ const CommonDetails = ({
                   })}
                 </button>
               </div>
+            )}
+          </div>
+        }
+        content={
+          measurement && typeof measurement === 'object' ? (
+            <div className="flex bg-white" style={{ direction: 'ltr' }}>
+              <JsonViewer src={measurement} collapsed={collapsed} />
             </div>
-          }
-          content={
-            measurement && typeof measurement === 'object' ? (
-              <div className="flex bg-white p-4" style={{ direction: 'ltr' }}>
-                <JsonViewer src={measurement} collapsed={collapsed} />
-              </div>
-            ) : (
-              <FormattedMessage id="Measurement.CommonDetails.RawMeasurement.Unavailable" />
-            )
-          }
-        />
-      </div>
+          ) : (
+            <FormattedMessage id="Measurement.CommonDetails.RawMeasurement.Unavailable" />
+          )
+        }
+      />
     </>
   )
 }