Revert "Introduce webview for measurement pages (#972)"

This reverts commit 9ad1e63.
ooni · Nov 26, 2024 · 127f461 · 127f461
1 parent 9ad1e63
commit 127f461
Show file tree

Hide file tree

Showing 30 changed files with 2,409 additions and 2,408 deletions.
diff --git a/components/Chart.js b/components/Chart.js
@@ -95,13 +95,16 @@ 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
diff --git a/components/DomainChart.js b/components/DomainChart.js
@@ -75,13 +75,16 @@ 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,12 +4,11 @@ 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, isEmbeddedView }) => {
+const Layout = ({ children }) => {
   const { pathname } = useRouter()
 
   const navbarColor = useMemo(() => {
@@ -32,28 +31,23 @@ const Layout = ({ children, isEmbeddedView }) => {
 
   return (
     <UserProvider>
-      <div className="site flex flex-col min-h-[100vh]">
+      <div className="site text-sm flex flex-col min-h-[100vh]">
         <div className="flex-[1_0_auto]">
           <Header />
-          {!isEmbeddedView && (
-            <ConditionalWrapper
-              condition={!!navbarSticky}
-              wrapper={(children) => (
-                <StyledStickyNavBar>{children}</StyledStickyNavBar>
-              )}
-            >
+          {navbarSticky ? (
+            <StyledStickyNavBar>
               <NavBar color={navbarColor} />
-            </ConditionalWrapper>
+            </StyledStickyNavBar>
+          ) : (
+            <NavBar color={navbarColor} />
           )}
           <div className={`content ${!navbarColor && 'mt-[-66px]'}`}>
             {children}
           </div>
         </div>
-        {!isEmbeddedView && (
-          <div className="flex-shrink-0">
-            <Footer />
-          </div>
-        )}
+        <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 text-sm ${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 ${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 gap-2 items-center">
+    <div className="flex px-2 items-center">
       <MdShare height="20px" width="20px" />
-      <div>
+      <div className="pl-2 text-right">
         {intl.formatMessage(
           { id: 'SocialButtons.CTA' },
           {

diff --git a/components/aggregation/mat/Filters.js b/components/aggregation/mat/Filters.js
@@ -312,7 +312,10 @@ const Filters = ({ data = [], tableData, setDataForCharts, query }) => {
   })
 
   return (
-    <DetailsBox title={intl.formatMessage({ id: 'MAT.Table.Filters' })}>
+    <DetailsBox
+      title={intl.formatMessage({ id: 'MAT.Table.Filters' })}
+      collapsed={false}
+    >
       <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}>
+    <DetailsBox title={boxTitle} collapsed={false}>
       <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,32 +56,37 @@ 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,15 +125,19 @@ 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 { useContext, useState } from 'react'
+import { 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="text-xs md:text-sm [&_.string-value]:overflow-ellipsis [&_.string-value]:max-w-[800px] [&_.string-value]:overflow-hidden [&_.string-value]:inline-block">
+  <div className="[&_.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,8 +45,6 @@ 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}`
@@ -139,35 +137,42 @@ const CommonDetails = ({
   return (
     <>
       {showResolverItems && (
-        // Resolver data
-        <DetailsBoxTable
-          title={
-            <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
-          }
-          items={resolverItems}
-        />
+        <div className="flex my-8">
+          {/* Resolver data */}
+          <DetailsBoxTable
+            title={
+              <FormattedMessage id="Measurement.CommonDetails.Label.Resolver" />
+            }
+            items={resolverItems}
+          />
+        </div>
       )}
-      {/* Metadata: platform, probe, MK version etc. */}
-      <DetailsBoxTable items={items} className="bg-gray-200" />
+      <div className="flex my-8">
+        {/* Metadata: platform, probe, MK version etc. */}
+        <DetailsBoxTable items={items} className="bg-gray-200" />
+      </div>
       {/* User Feedback */}
       {!!userFeedbackItems.length && (
-        <DetailsBoxTable
-          title={
-            <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
-          }
-          items={userFeedbackItems}
-        />
+        <div className="flex my-8">
+          <DetailsBoxTable
+            title={
+              <FormattedMessage id="Measurement.CommonDetails.Label.UserFeedback" />
+            }
+            items={userFeedbackItems}
+          />
+        </div>
       )}
       {/* Raw Measurement */}
-      <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">
+        <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>
               <div className="flex">
                 <a
                   className="text-blue-700"
@@ -196,19 +201,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>
-          ) : (
-            <FormattedMessage id="Measurement.CommonDetails.RawMeasurement.Unavailable" />
-          )
-        }
-      />
+          }
+          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>
     </>
   )
 }