OONI Run V2 (#154)

.env.development

@@ -0,0 +1,5 @@
+# Used only in development environments
+# To override locally, make a copy called `.env.development.local`
+# Refer: https://nextjs.org/docs/basic-features/environment-variables
+
+NEXT_PUBLIC_OONI_API=https://api.dev.ooni.io

.env.production

@@ -0,0 +1,5 @@
+# Used only in producition
+# To override locally, make a copy called `.env.production.local`
+# Refer: https://nextjs.org/docs/basic-features/environment-variables
+
+NEXT_PUBLIC_OONI_API=https://api.ooni.io

.env.test

@@ -0,0 +1,5 @@
+# Used in test/CI environemnts
+# To override locally, make a copy called `.env.test.local`
+# Refer: https://nextjs.org/docs/basic-features/environment-variables
+
+NEXT_PUBLIC_OONI_API=https://api.dev.ooni.io

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - name: Run Playwright tests
+      run: yarn playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -7,4 +7,15 @@ dist/*
 package-lock.json
 yarn-error.log
 lang/.messages
+next-env.d.ts
+.env*.local
+.yalc
+yalc.lock
 .env.local
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+public/mockServiceWorker.js
+# Sentry Config File
+.env.sentry-build-plugin

Dockerfile

@@ -2,9 +2,6 @@
 FROM node:18-alpine AS base
 # Build: run ooni-sysadmin.git/scripts/docker-build from this directory
 
-# Note: node:16.3-alpine3.12 is chosen as a workaround to build issues on darwin/arm64
-# Based on this issue: https://github.com/docker/for-mac/issues/5831
-
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.

Readme.md

@@ -27,11 +27,6 @@ Create a build:
 yarn run build
 ```
 
-This actually is running:
-
-```
-yarn run build:next && yarn run build:widgets
-```
 
 Upload a release:
 

biome.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single"
+    }
+  },
+  "files": {
+    "ignore": [".next/", "scripts/", "public/", "config/"]
+  }
+}

components/ArchivedTag.tsx

@@ -0,0 +1,16 @@
+import { MdOutlineInventory2 } from 'react-icons/md'
+import { useIntl } from 'react-intl'
+
+const ArchivedTag = () => {
+  const intl = useIntl()
+  return (
+    <div className="inline-block">
+      <div className="flex uppercase tracking-wide bg-gray-600 text-white text-xs font-bold px-2 py-1 items-center rounded gap-1">
+        <span>{intl.formatMessage({ id: 'ArchivedTag.Expired' })}</span>
+        <MdOutlineInventory2 />
+      </div>
+    </div>
+  )
+}
+
+export default ArchivedTag

components/Code.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import { MdOutlineCheckCircle, MdOutlineContentCopy } from 'react-icons/md'
+
+type Code = {
+  text: string
+}
+
+const Code = ({ text }: Code) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyTextToClipboard = async (text: string) => {
+    if ('clipboard' in navigator) {
+      return await navigator.clipboard.writeText(text)
+    }
+    return document.execCommand('copy', true, text)
+  }
+
+  const handleCopyClick = () => {
+    copyTextToClipboard(text)
+      .then(() => {
+        setIsCopied(true)
+        setTimeout(() => {
+          setIsCopied(false)
+        }, 2000)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+
+  return (
+    <div className="flex text-sm p-4 bg-blue-100 whitespace-pre-wrap items-center font-mono">
+      {text}
+      <div className="ml-2 cursor-pointer">
+        {isCopied ? (
+          <MdOutlineCheckCircle className="text-green-700" size="24" />
+        ) : (
+          <MdOutlineContentCopy onClick={handleCopyClick} size="24" />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Code

components/DescriptorCard.tsx

@@ -0,0 +1,101 @@
+import Markdown from 'markdown-to-jsx'
+import Link, { type LinkProps } from 'next/link'
+import type { ReactNode } from 'react'
+import { MdKeyboardArrowRight } from 'react-icons/md'
+import { useIntl } from 'react-intl'
+import { formatMediumDate } from 'utils'
+import type { icons } from 'utils/icons'
+import ArchivedTag from './ArchivedTag'
+import DescriptorIcon from './DescriptorIcon'
+
+type Span = {
+  children: React.ReactNode
+}
+const Span = ({ children }: Span) => <span>{children}</span>
+
+type StyledLink = LinkProps & { children: ReactNode }
+
+const StyledLink = ({ href, ...props }: StyledLink) => (
+  <Link
+    href={href}
+    {...props}
+    className="flex justify-between text-black leading-[1.3] bg-white p-4 border border-gray-300 rounded-lg cursor-pointer relative hover:text-blue-500"
+  />
+)
+
+type DescriptorCard = {
+  descriptor: Descriptor
+}
+
+const DescriptorCard = ({ descriptor }: DescriptorCard) => {
+  const { locale, formatMessage } = useIntl()
+
+  return (
+    <StyledLink href={`/v2/${descriptor.oonirun_link_id}`}>
+      <div className="self-start">
+        <div className="mb-1">
+          <h4 className="m-0 inline mr-2">
+            {descriptor?.icon && (
+              <DescriptorIcon icon={descriptor.icon as keyof typeof icons} />
+            )}
+            {descriptor.name}
+          </h4>
+          {!!descriptor.is_expired && (
+            <span className="align-text-bottom">
+              <ArchivedTag />
+            </span>
+          )}
+        </div>
+        <div className="mb-2">
+          {descriptor.author && (
+            <span>
+              {formatMessage(
+                { id: 'DescriptorCard.CreatedBy' },
+                {
+                  author: (
+                    <span className="font-bold">{descriptor.author}</span>
+                  ),
+                },
+              )}{' '}
+              |{' '}
+            </span>
+          )}{' '}
+          {formatMessage(
+            { id: 'DescriptorCard.Updated' },
+            { date: formatMediumDate(descriptor.date_updated, locale) },
+          )}{' '}
+          |{' '}
+          {descriptor.is_expired
+            ? formatMessage(
+                { id: 'DescriptorCard.Expired' },
+                { date: formatMediumDate(descriptor.expiration_date, locale) },
+              )
+            : formatMessage(
+                { id: 'DescriptorCard.Expiring' },
+                { date: formatMediumDate(descriptor.expiration_date, locale) },
+              )}
+        </div>
+        {descriptor.short_description && (
+          <div className="text-gray-500">
+            <Markdown
+              options={{
+                overrides: {
+                  a: {
+                    component: Span,
+                  },
+                },
+              }}
+            >
+              {descriptor.short_description}
+            </Markdown>
+          </div>
+        )}
+      </div>
+      <div className="self-center">
+        <MdKeyboardArrowRight />
+      </div>
+    </StyledLink>
+  )
+}
+
+export default DescriptorCard

components/DescriptorIcon.tsx

@@ -0,0 +1,19 @@
+import { icons } from 'utils/icons'
+
+type DescriptorIconProps = {
+  icon: keyof typeof icons
+}
+
+const DescriptorIcon = ({ icon }: DescriptorIconProps) => {
+  if (!icon) return ''
+
+  const IconComponent = icons[icon]
+
+  return IconComponent ? (
+    <IconComponent style={{ marginRight: '10px' }} className="inline" />
+  ) : (
+    ''
+  )
+}
+
+export default DescriptorIcon