Multiplatform webview (#976)

ooni · Nov 26, 2024 · bc9a2b0 · bc9a2b0
1 parent 127f461
commit bc9a2b0
Show file tree

Hide file tree

Showing 29 changed files with 558 additions and 524 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -95,16 +95,13 @@ const Chart = memo(function Chart({
         )}
         {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/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/DomainChart.js b/components/DomainChart.js
@@ -75,16 +75,13 @@ const Chart = memo(function Chart({ queryParams = {}, setState }) {
         </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/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(() => {
@@ -31,23 +32,28 @@ const Layout = ({ children }) => {
 
   return (
     <UserProvider>
-      <div className="site text-sm flex flex-col min-h-[100vh]">
+      <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/NavBar.js b/components/NavBar.js
@@ -182,7 +182,7 @@ export const NavBar = ({ color }) => {
                   </div>
                 )}
                 <div
-                  className={`flex gap-4 lg:gap-8 ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
+                  className={`flex gap-4 lg:gap-8 text-sm ${showMenu && 'pt-2 flex-col items-start [&>a]:border-black [&>a]:hover:border-black [&>*]:opacity-100 [&>*]:text-black [&>*]:hover:text-black'}`}
                 >
                   <NavItem
                     label={<FormattedMessage id="Navbar.Findings" />}

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/dashboard/Charts.js b/components/dashboard/Charts.js
@@ -125,19 +125,15 @@ const Chart = memo(function Chart({ testName }) {
       </div>
       {error && (
         <DetailsBox
-          collapsed={false}
           content={
-            <>
-              <details>
-                <summary>
-                  <span>
-                    {intl.formatMessage({ id: 'General.Error' })}:{' '}
-                    {error.message}
-                  </span>
-                </summary>
-                <pre>{JSON.stringify(error, null, 2)}</pre>
-              </details>
-            </>
+            <details>
+              <summary>
+                <span>
+                  {intl.formatMessage({ id: 'General.Error' })}: {error.message}
+                </span>
+              </summary>
+              <pre>{JSON.stringify(error, null, 2)}</pre>
+            </details>
           }
         />
       )}

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 = () => {
@@ -21,7 +21,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>
 )
@@ -45,6 +45,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}`
@@ -137,42 +139,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"
@@ -201,19 +196,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" />
+          )
+        }
+      />
     </>
   )
 }