Implement UI for OONI Run v2 (#131)

.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://ams-pg-test.ooni.org

.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://ams-pg-test.ooni.org

.gitignore

@@ -8,4 +8,7 @@ package-lock.json
 yarn-error.log
 lang/.messages
 next-env.d.ts
+.env*.local
+.yalc
+yalc.lock
 .env.local

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,21 @@
+{
+  "$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"
+    }
+  }
+}

components/ArchivedTag.tsx

@@ -0,0 +1,31 @@
+import { Box, Flex } from "ooni-components"
+import { MdOutlineInventory2 } from "react-icons/md"
+import { styled } from "styled-components"
+
+const StyledArchivedTag = styled(Flex)`
+border-radius: 4px;
+text-transform: uppercase;
+letter-spacing: 1.25px;
+}`
+
+const ArchivedTag = () => {
+  return (
+    <Box sx={{ display: "inline-block" }}>
+      <StyledArchivedTag
+        bg="gray6"
+        color="white"
+        fontSize={0}
+        lineHeight={1.2}
+        fontWeight="600"
+        px={2}
+        py={1}
+        alignItems="center"
+      >
+        <span>EXPIRED</span>
+        <MdOutlineInventory2 />
+      </StyledArchivedTag>
+    </Box>
+  )
+}
+
+export default ArchivedTag

components/ButtonSpinner.tsx

@@ -0,0 +1,16 @@
+import { ImSpinner8 } from "react-icons/im"
+import { keyframes, styled } from "styled-components"
+
+const spin = keyframes`
+to {
+  transform: rotate(360deg);
+}
+`
+
+const StyledSpinner = styled(ImSpinner8)`
+  animation: ${spin} 1s linear infinite;
+`
+
+const ButtonSpinner = () => <StyledSpinner />
+
+export default ButtonSpinner

components/Code.tsx

@@ -0,0 +1,58 @@
+import { Box, Flex, theme } from "ooni-components"
+import { useState } from "react"
+import { MdOutlineCheckCircle, MdOutlineContentCopy } from "react-icons/md"
+import { styled } from "styled-components"
+
+const StyledCode = styled(Flex)`
+font-size: 14px;
+font-family: courier, monospace;
+white-space: pre-wrap;
+align-items: center;
+`
+
+const StyledIcon = styled(Box)`
+cursor: pointer;
+`
+
+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 (
+    <StyledCode p={3} bg="blue1">
+      {text}
+      <StyledIcon ml={2}>
+        {isCopied ? (
+          <MdOutlineCheckCircle color={theme.colors.green7} size="24" />
+        ) : (
+          <MdOutlineContentCopy onClick={handleCopyClick} size="24" />
+        )}
+      </StyledIcon>
+    </StyledCode>
+  )
+}
+
+export default Code

components/DescriptorCard.tsx

@@ -0,0 +1,95 @@
+import Markdown from "markdown-to-jsx"
+import NLink from "next/link"
+import { Box, Heading, Text } from "ooni-components"
+import { MdKeyboardArrowRight } from "react-icons/md"
+import { useIntl } from "react-intl"
+import styled from "styled-components"
+import { icons } from "utils/icons"
+import ArchivedTag from "./ArchivedTag"
+import DescriptorIcon from "./DescriptorIcon"
+
+type Span = {
+  children: React.ReactNode
+}
+const Span = ({ children }: Span) => <span>{children}</span>
+
+const StyledLink = styled(NLink)`
+  display: flex;
+  justify-content: space-between;
+  color: black;
+  line-height: 1.3;
+  background: #FFF;
+  padding: ${(props) => props.theme.space[3]}px;
+  border: 1px solid ${(props) => props.theme.colors.gray3};
+  border-radius: 8px;
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    color: ${(props) => props.theme.colors.blue5};
+  }
+`
+
+type DescriptorCard = {
+  descriptor: Descriptor
+}
+
+const DescriptorCard = ({ descriptor }: DescriptorCard) => {
+  const intl = useIntl()
+
+  return (
+    <StyledLink href={`/v2/${descriptor.ooni_run_link_id}`}>
+      <Box alignSelf="start">
+        <Box mb={1}>
+          <Heading h={4} m={0} display="inline" mr={2}>
+            {descriptor?.icon && (
+              <Box as="span" verticalAlign="text-top">
+                <DescriptorIcon icon={descriptor.icon as keyof typeof icons} />
+              </Box>
+            )}
+            {descriptor.name}
+          </Heading>
+          {!!descriptor.archived && (
+            <Box as="span" verticalAlign="super">
+              <ArchivedTag />
+            </Box>
+          )}
+        </Box>
+        <Text mb={2}>
+          {descriptor.author && (
+            <Text as="span">
+              Created by{" "}
+              <Text as="span" fontWeight="bold">
+                {descriptor.author}
+              </Text>{" "}
+              |{" "}
+            </Text>
+          )}{" "}
+          Updated{" "}
+          {new Intl.DateTimeFormat(intl.locale, {
+            dateStyle: "medium",
+          }).format(new Date(descriptor.descriptor_creation_time))}
+        </Text>
+        {descriptor.short_description && (
+          <Text color="gray5">
+            <Markdown
+              options={{
+                overrides: {
+                  a: {
+                    component: Span,
+                  },
+                },
+              }}
+            >
+              {descriptor.short_description}
+            </Markdown>
+          </Text>
+        )}
+      </Box>
+      <Box alignSelf="center">
+        <MdKeyboardArrowRight />
+      </Box>
+    </StyledLink>
+  )
+}
+
+export default DescriptorCard

components/DescriptorIcon.tsx

@@ -0,0 +1,15 @@
+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" }} /> : ""
+}
+
+export default DescriptorIcon