Add links to search in MAT tooltip for all counts

.dockerignore

@@ -5,3 +5,13 @@ npm-debug.log
 package-lock.json
 yarn-error.log
 ignore
+cypress
+.github
+.editorconfig
+.dockerignore
+CHANGELOG.md
+CODE_OF_CONDUCT.md
+cypress.config.js
+LICENSE.md
+Readme.md
+Todo.md

.env.development

@@ -2,7 +2,8 @@
 # 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
+NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_USER_FEEDBACK_API=https://ams-pg-test.ooni.org
 NEXT_PUBLIC_EXPLORER_URL=http://localhost:3100
 
 RUN_GIT_COMMIT_SHA_SHORT=yarn --silent git:getCommitSHA:short

.env.production

@@ -3,10 +3,6 @@
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
 NEXT_PUBLIC_OONI_API=https://api.ooni.io
+NEXT_PUBLIC_USER_FEEDBACK_API=https://api.ooni.io
 NEXT_PUBLIC_SENTRY_DSN=https://[email protected]/1427510
 NEXT_PUBLIC_EXPLORER_URL=https://explorer.ooni.org
-
-RUN_GIT_COMMIT_SHA_SHORT=yarn --silent git:getCommitSHA:short
-RUN_GIT_COMMIT_SHA=yarn --silent git:getCommitSHA
-RUN_GIT_COMMIT_REF=yarn --silent git:getCommitRef
-RUN_GIT_COMMIT_TAGS=yarn --silent git:getReleasesAndTags

.env.test

@@ -3,4 +3,6 @@
 # Refer: https://nextjs.org/docs/basic-features/environment-variables
 
 NEXT_PUBLIC_OONI_API=https://api.ooni.io
-NEXT_PUBLIC_EXPLORER_URL=https://explorer-test.ooni.io
+NEXT_PUBLIC_USER_FEEDBACK_API=https://ams-pg-test.ooni.org
+NEXT_PUBLIC_EXPLORER_URL=https://explorer.test.ooni.org
+NEXT_PUBLIC_IS_TEST_ENV=1

.github/workflows/main.yml

@@ -11,18 +11,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Cypress run
-        uses: cypress-io/github-action@v4.1.0
+        uses: cypress-io/github-action@v5
         with:
           build: npm run build
           start: npm start
           wait-on: 'http://localhost:3100'
-          browser: chrome
+        env:
+          NODE_ENV: 'test'
 
       - name: Upload screenshots on failure
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: cypress-screenshots

Dockerfile

@@ -16,33 +16,30 @@ RUN yarn install --frozen-lockfile
 # Rebuild the source code only when needed
 FROM node:16.3-alpine3.12 AS builder
 WORKDIR /app
-COPY . .
 COPY --from=deps /app/node_modules ./node_modules
-ARG NODE_ENV ${NODE_ENV:-production}
-ENV NODE_ENV ${NODE_ENV}
-RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+COPY . .
+RUN yarn build
 
 # Production image, copy all the files and run next
 FROM node:16.3-alpine3.12 AS runner
 WORKDIR /app
-ARG NODE_ENV ${NODE_ENV:-production}
-ENV NODE_ENV ${NODE_ENV}
-RUN addgroup -g 1001 -S nodejs
-RUN adduser -S nextjs -u 1001
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
 
 # You only need to copy next.config.js if you are NOT using the default configuration
 COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/package.json ./package.json
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
 USER nextjs
 
 EXPOSE 3100
+ENV PORT 3100
 
-ARG NODE_ENV ${NODE_ENV:-production}
-ENV NODE_ENV ${NODE_ENV}
-ENV NEXT_TELEMETRY_DISABLED 1
-
-CMD ["yarn", "start"]
+CMD ["node", "server.js"]

Readme.md

@@ -33,3 +33,27 @@ yarn run start
 ```
 
 We also provide a `Dockerfile` for easy deployment.
+
+## Managing translations
+
+You should have checked out the https://github.com/ooni/translations
+repository.
+
+From inside of `ooni/translations` to update the transifex master copy (this is
+done when edits to the master spreadsheet are done), you should run:
+```
+./update-explorer-source.sh
+```
+
+Then when the translations have been done and you want to pull in the
+translated versions, run:
+```
+./update-explorer-translations.sh
+```
+
+From inside of the ooni/explorer repo you should then run:
+```
+yarn run script:build-translations
+```
+
+(this assumes you have `ooni/translations` checked out in the parent directory)

components/network/Chart.js → components/Chart.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import { useRouter } from 'next/router'
+import { FormattedMessage } from 'react-intl'
 import { Heading, Box, Flex } from 'ooni-components'
 import useSWR from 'swr'
 import GridChart, { prepareDataForGridChart } from 'components/aggregation/mat/GridChart'
@@ -13,34 +14,20 @@ const swrOptions = {
 }
 
 const Chart = React.memo(function Chart({testName, testGroup = null, title, queryParams = {}}) {
-  const router = useRouter()
-  const { query: {since, until, asn} } = router
-
   const name = testName || testGroup.name
 
-  const params = useMemo(() => ({
-    ...queryParams,
-    axis_x: 'measurement_start_day'
-  }), [queryParams])
-
-  const query = useMemo(() => ({
-    ...params,
-    probe_asn: asn,
-    since: since,
-    until: until,
-    ...testName && {test_name: testName}
-  }), [since, until, asn, params, testName])
-
   const apiQuery = useMemo(() => {
-    const qs = new URLSearchParams(query).toString()
+    const qs = new URLSearchParams(queryParams).toString()
     return qs
-  }, [query])
+  }, [queryParams])
 
   const { data, error } = useSWR(
-    testGroup ? { query: apiQuery, 
-      testNames: testGroup.tests, 
-      groupKey: name
-    } : apiQuery,
+    testGroup ? 
+      { query: apiQuery, 
+        testNames: testGroup.tests, 
+        groupKey: name
+      } : 
+      apiQuery,
     testGroup ? MATMultipleFetcher : MATFetcher,
     swrOptions
   )
@@ -49,23 +36,23 @@ const Chart = React.memo(function Chart({testName, testGroup = null, title, quer
       return [null, 0]
     }
     let chartData = testGroup ? data : data.data
-    const graphQuery = testGroup ? {...query, axis_y: name} : query
+    const graphQuery = testGroup ? {...queryParams, axis_y: name} : queryParams
     const [reshapedData, rowKeys, rowLabels] = prepareDataForGridChart(chartData, graphQuery)
     return [reshapedData, rowKeys, rowLabels]
-  }, [data, query, name, testGroup])
+  }, [data, queryParams, name, testGroup])
 
   const headerOptions = { probe_cc: false, subtitle: false }
 
   return (
-    <MATContextProvider key={name} test_name={name} {...params}>
+    <MATContextProvider key={name} test_name={name} {...queryParams}>
       <Flex flexDirection='column' mb={60}>
         <Box><Heading h={3} mt={40} mb={20}>{title}</Heading></Box>
         <Box>
           {(!chartData && !error) ? (
-            <div> Loading ...</div>
+            <FormattedMessage id="General.Loading" />
           ) : (
             chartData === null || chartData.length === 0 ? (
-              <Heading h={5}>No Data</Heading>
+              <Heading h={5}><FormattedMessage id="General.NoData" /></Heading>
             ) : (
               <GridChart
                 data={chartData}
@@ -93,4 +80,4 @@ const Chart = React.memo(function Chart({testName, testGroup = null, title, quer
   )
 })
 
-export default Chart
+export default Chart

components/DateRangePicker.js

@@ -6,6 +6,17 @@ import OutsideClickHandler from 'react-outside-click-handler'
 import { useIntl } from 'react-intl'
 import styled from 'styled-components'
 import { Button } from 'ooni-components'
+import { getDirection } from 'components/withIntl'
+
+import de from 'date-fns/locale/de'
+import en from 'date-fns/locale/en-US'
+import es from 'date-fns/locale/es'
+import fa from 'date-fns/locale/fa-IR'
+import fr from 'date-fns/locale/fr'
+import is from 'date-fns/locale/is'
+import ru from 'date-fns/locale/ru'
+import tr from 'date-fns/locale/tr'
+import zh from 'date-fns/locale/zh-CN'
 
 const StyledDatetime = styled.div`
 z-index: 99999;
@@ -42,23 +53,47 @@ justify-content: right;
 gap: 6px;
 `
 
+const getDateFnsLocale = locale => {
+  switch (locale) {
+    case 'de':
+      return de
+    case 'es':
+      return es
+    case 'fa':
+      return fa
+    case 'fr':
+      return fr
+    case 'is':
+      return is
+    case 'ru':
+      return ru
+    case 'tr':
+      return tr
+    case 'zh':
+      return zh
+    default:
+      return en
+  }
+}
+
 const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) => {
   const intl = useIntl()
-
+  const tomorrow = addDays(new Date(), 1)
   const ranges = ['Today', 'LastWeek', 'LastMonth', 'LastYear']
+
   const selectRange = (range) => {
     switch (range) {
       case 'Today':
-        handleRangeSelect({from: new Date(), to: new Date()})
+        handleRangeSelect({from: new Date(), to: tomorrow})
         break
       case 'LastWeek':
-        handleRangeSelect({from: sub(new Date(), {weeks: 1}) , to: new Date()})
+        handleRangeSelect({from: sub(new Date(), {weeks: 1}) , to: tomorrow})
         break
       case 'LastMonth':
-        handleRangeSelect({from: sub(new Date(), {months: 1}) , to: new Date()})
+        handleRangeSelect({from: sub(new Date(), {months: 1}) , to: tomorrow})
         break
       case 'LastYear':
-        handleRangeSelect({from: sub(new Date(), {years: 1}) , to: new Date()})
+        handleRangeSelect({from: sub(new Date(), {years: 1}) , to: tomorrow})
         break
     }
   }
@@ -91,14 +126,14 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
     setRange(range)
   }
 
-  const tomorrow = addDays(new Date(), 1)
-
   return (
     <StyledDatetime>
       <OutsideClickHandler onOutsideClick={() => close()}>
         <StyledRangeButtons>{rangesList}</StyledRangeButtons>
         <DayPicker 
           {...props}
+          dir={getDirection(intl.locale)}
+          locale={getDateFnsLocale(intl.locale)}
           mode="range"
           toDate={tomorrow}
           selected={range}

components/Flag.js

@@ -34,9 +34,9 @@ const FlagContainer = styled.div`
   border-radius: 50%;
   /* padding-left: 3px; */
   /* padding-top: 3px; */
-  width: ${props => props.size + 6}px;
-  height: ${props => props.size + 6}px;
-  border: ${props => props.border ? '3px solid white' : 'none'};
+  width: ${props => props.size + 2}px;
+  height: ${props => props.size + 2}px;
+  border: ${props => props.border ? '1px solid white' : 'none'};
 `
 
 export const Flag = ({countryCode, size, border}) => {

components/Footer.js

@@ -55,7 +55,7 @@ const FooterText = styled.div`
 
 const Footer = () => {
   const intl = useIntl()
-  const currentYear = dayjs().get('year')
+  const currentYear = new Intl.DateTimeFormat(intl.locale, { year: 'numeric' }).format(new Date())
   return (
     <StyledFooter>
       <Container>
@@ -65,15 +65,15 @@ const Footer = () => {
               <Box p={[1, 0]} mb={[0, 3]} width={[1/2, 1]}>
                 <ExplorerLogo height='32px' />
               </Box>
-              <Box p={[1, 0]} pr={[0, '50%']} width={[1/2, 1]}> <FooterText>{intl.formatMessage({ id: 'Footer.Text.Slogan' })}</FooterText> </Box>
+              <Box width={[1/2, 2/3]}> <FooterText>{intl.formatMessage({ id: 'Footer.Text.Slogan' })}</FooterText> </Box>
             </Flex>
           </FooterBox>
           <FooterBox width={[1/2, 1/5]}>
             <FooterHead>{intl.formatMessage({ id: 'Footer.Heading.About' })}</FooterHead>
             <FooterLink href='https://ooni.org/about/' label={intl.formatMessage({ id: 'Footer.Link.About' })} />
             <FooterLink href='https://ooni.org/about/data-policy/' label={intl.formatMessage({ id: 'Footer.Link.DataPolicy' })} />
             <FooterLink href='https://github.com/ooni/license/tree/master/data' label={intl.formatMessage({ id: 'Footer.Link.DataLicense' })} />
-            <FooterLink href='https://github.com/ooni/explorer' label='Source Code / Issues' />
+            <FooterLink href='https://github.com/ooni/explorer' label={intl.formatMessage({ id: 'Footer.Link.Code' })} />
             <FooterLink href='https://ooni.org/about/#contact' label={intl.formatMessage({ id: 'Footer.Link.Contact' })} />
           </FooterBox>
           <FooterBox width={[1/2, 1/5]}>

components/Header.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
 import { useIntl } from 'react-intl'
 
 const Header = () => {
-  const canonical = 'https://explorer.ooni.org' + useRouter().pathname
+  const canonical = 'https://explorer.ooni.org' + useRouter().asPath.split('?')[0]
 
   const intl = useIntl()
   const description = intl.formatMessage({ id: 'Home.Meta.Description' })