Incident reporting fixes (#878)

* Add default incident startdate, validate on blur

* Hide tableview filters from mat chart in incident reports

* Add meta tags to incident report

* Don't throw an error when caption is invalid

* Add publish/unpublish buttons

* Switch datetime with date only input

* Add more navigation buttons and error styling

* remove double import

* Improve preview modal

* Handle missing email address

* Improve handling of missing email modal

* Fix SpinLoader warnings for styled props

* Fix ASN submission

* Display number of reports

* Show report creation date

* Change form validation mode

* Change display of networks

* Rename incidents to findings

* Display creation date on index page

* Improve MAT tag validation

* Show all reports on the dashboard

components/CountryBox.js

@@ -1,33 +1,9 @@
-import { Box, Flex, Link, Text } from 'ooni-components'
-import { FormattedMessage, useIntl } from 'react-intl'
-import NLink from 'next/link'
+import { Box, Flex, Text } from 'ooni-components'
+import { useIntl } from 'react-intl'
 import { getLocalisedRegionName } from 'utils/i18nCountries'
 import Flag from 'components/Flag'
-import styled from 'styled-components'
 import { GridBox } from 'components/VirtualizedGrid'
 
-const StyledLink = styled(Link)`
-&:hover {
-  filter: none;
-}
-`
-
-const StyledCountryName = styled(Text)`
-`
-
-const StyledBox = styled(Box)`
-border: 1px solid ${props => props.theme.colors.gray3};
-position: relative;
-color: black;
-
-&:hover {
-  border-color: ${props => props.theme.colors.blue5};
-  ${StyledCountryName} {
-    color: ${props => props.theme.colors.blue5};
-  }
-}
-`
-
 const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => {
   const intl = useIntl()
   const gridTemplateColumns = ['1fr 1fr', '1fr 1fr', '1fr 1fr 1fr 1fr', [...Array(itemsPerRow)].map((i) => ('1fr')).join(' ')]
@@ -45,7 +21,7 @@ const CountryList = ({ countries, itemsPerRow = 6, gridGap = 3 }) => {
           title={
             <Flex mb={2} alignItems='center'>
               <Box alignSelf='start'><Flag countryCode={c.country} size={22} border /></Box>
-              <StyledCountryName fontSize={1} fontWeight='bold' ml={2} lineHeight='24px'>{getLocalisedRegionName(c.country, intl.locale)}</StyledCountryName>
+              <Text fontSize={1} fontWeight='bold' ml={2} lineHeight='24px'>{getLocalisedRegionName(c.country, intl.locale)}</Text>
             </Flex>
           }
           count={c.measurements}

components/MATChart.js

@@ -10,7 +10,6 @@ import { axiosResponseTime } from 'components/axios-plugins'
 import axios from 'axios'
 import { MATContextProvider } from 'components/aggregation/mat/MATContext'
 import { useIntl } from 'react-intl'
-import { ResizableBox } from './aggregation/mat/Resizable'
 import { FormattedMarkdownBase } from './FormattedMarkdown'
 
 axiosResponseTime(axios)
@@ -43,8 +42,9 @@ const fetcher = (query) => {
     })
 }
 
-export const MATChartReportWrapper = ({link, caption}) => {
+export const MATChartWrapper = ({ link, caption }) => {
   let searchParams
+  const captionText = typeof caption === 'string' ? caption : ''
   const today = dayjs.utc().add(1, 'day')
   const monthAgo = dayjs.utc(today).subtract(1, 'month')
 
@@ -67,16 +67,16 @@ export const MATChartReportWrapper = ({link, caption}) => {
 
   return !!searchParams && 
     <Box my={4}>
-      <MATChart query={query} />
+      <MATChart query={query} showFilters={false} />
       {caption && (
         <Text fontSize={1} mt={2}>
-          <FormattedMarkdownBase>{caption}</FormattedMarkdownBase>
+          <FormattedMarkdownBase>{captionText}</FormattedMarkdownBase>
         </Text>
       )}
     </Box>
 }
 
-const MATChart = ({ query }) => {
+const MATChart = ({ query, showFilters = true }) => {
   const intl = useIntl()
   const { data, error, isValidating } = useSWR(query ? query : null, fetcher, swrOptions)
 
@@ -97,9 +97,9 @@ const MATChart = ({ query }) => {
                   {data && data.data.dimension_count == 0 && <FunnelChart data={data.data.result} />}
                   {data && data.data.dimension_count == 1 && <StackedBarChart data={data.data.result} query={query} />}
                   {data && data.data.dimension_count > 1 && (
-                    <TableView data={data.data.result} query={query} />
+                    <TableView data={data.data.result} query={query} showFilters={showFilters} />
                   )}
-                </Box> : <ResizableBox><NoCharts /></ResizableBox>
+                </Box> : <NoCharts />
               }
             </>
           )}

components/NavBar.js

@@ -115,7 +115,7 @@ export const NavBar = ({ color }) => {
               <NavItem label={<FormattedMessage id="Navbar.Countries" />} href="/countries" />
               <NavItem label={<FormattedMessage id="Navbar.Networks" />} href="/networks" />
               <NavItem label={<FormattedMessage id="Navbar.Domains" />} href="/domains" />
-              {/* <NavItem label={<FormattedMessage id="Navbar.Incidents" />} href="/incidents" /> */}
+              {/* <NavItem label={<FormattedMessage id="Navbar.Findings" />} href="/findings" /> */}
               {user?.logged_in ? (
                 <Box ml={[0, 4]} my={[2, 0]}>
                   <StyledNavItem>

components/aggregation/mat/Filters.js

@@ -1,12 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTable, useFlexLayout, useRowSelect, useSortBy, useGlobalFilter, useAsyncDebounce } from 'react-table'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { defaultRangeExtractor, useVirtual } from 'react-virtual'
+import { useVirtual } from 'react-virtual'
 import styled from 'styled-components'
 import { Flex, Box, Button, Text } from 'ooni-components'
 
-import GridChart, { prepareDataForGridChart } from './GridChart'
-import { ResizableBox } from './Resizable'
 import { DetailsBox } from '../../measurement/DetailsBox'
 import { sortRows } from './computations'
 

components/aggregation/mat/TableView.js

@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl'
 
 import Filters from './Filters'
 import GridChart, { prepareDataForGridChart } from './GridChart'
-import { ResizableBox } from './Resizable'
 
 const prepareDataforTable = (data, query, locale) => {
   const table = []
@@ -37,7 +36,7 @@ const prepareDataforTable = (data, query, locale) => {
 // Maybe this can also be `[]`
 const noRowsSelected = null
 
-const TableView = ({ data, query }) => {
+const TableView = ({ data, query, showFilters = true }) => {
   const intl = useIntl()
   const resetTableRef = useRef(false)
   const yAxis = query.axis_y
@@ -60,19 +59,19 @@ const TableView = ({ data, query }) => {
 
   return (
     <Flex flexDirection='column'>
-      <Filters
-        query={query}
-        tableData={tableData}
-        setDataForCharts={setDataForCharts}
-       />
-      <ResizableBox>
-        <GridChart
-          data={reshapedData}
-          selectedRows={dataForCharts}
-          rowKeys={rowKeys}
-          rowLabels={rowLabels}
+      {showFilters && 
+        <Filters
+          query={query}
+          tableData={tableData}
+          setDataForCharts={setDataForCharts}
         />
-      </ResizableBox>
+      }
+      <GridChart
+        data={reshapedData}
+        selectedRows={dataForCharts}
+        rowKeys={rowKeys}
+        rowLabels={rowLabels}
+      />
     </Flex>
   )
 }

components/findings/FindingDisplay.js

@@ -0,0 +1,60 @@
+import { Heading, Flex, Box, Text } from 'ooni-components'
+import { Badge } from 'components/Badge'
+import Flag from 'components/Flag'
+import Markdown from 'markdown-to-jsx'
+import { MATChartWrapper } from 'components/MATChart'
+import { getLocalisedRegionName } from 'utils/i18nCountries'
+import { useIntl } from 'react-intl'
+import { formatLongDate } from 'utils'
+import NLink from 'next/link'
+
+const FormattedMarkdown = ({ children }) => {
+  return (
+    <Markdown
+      options={{
+        overrides: {
+          MAT: {
+            component: MATChartWrapper,
+          },
+        },
+      }}
+    >
+      {children}
+    </Markdown>
+  )
+}
+
+const FindingDisplay = ({ incident }) => {
+  const intl = useIntl()
+
+  return (
+    <>
+      <Heading h={1} mt={4} mb={4} pb={3} sx={{borderBottom: '1px solid', borderColor: 'gray3'}}>
+        {incident?.title}
+      </Heading>
+      {!!incident?.CCs?.length && (
+        <Flex alignItems="center">
+          <Flag countryCode={incident.CCs[0]} size={32} />
+          <Heading h={3} ml={2}>
+            {getLocalisedRegionName(incident.CCs[0], intl.locale)}
+          </Heading>
+        </Flex>
+      )}
+      <Text color="gray6" mb={3}>{incident?.start_time && formatLongDate(incident?.start_time, intl.locale)} - {incident?.end_time ? formatLongDate(incident?.end_time, intl.locale) : 'ongoing'}</Text>
+      {!!incident?.tags?.length && (
+        <Flex mb={3}>
+          {incident.tags.map((tag) => (
+            <Box key={tag} mr={2}>
+              <Badge>{tag}</Badge>
+            </Box>
+          ))}
+        </Flex>
+      )}
+      <Text color="gray6" mb={4}>created by {incident?.reported_by} on {incident?.create_time && formatLongDate(incident?.create_time, intl.locale)}</Text>
+      {!!incident?.ASNs?.length && <Box mb={3} fontSize={18} lineHeight="1.5">Network: {incident.ASNs.map((as) => (<NLink key={as} href={`/as/AS${as}`}>{`AS${as}`}</NLink>)).reduce((prev, curr) => (prev ? [prev, ', ', curr] : curr), null)}</Box>}
+      <Box fontSize={18} lineHeight="1.5">{incident?.text && <FormattedMarkdown>{incident.text}</FormattedMarkdown>}</Box>
+    </>
+  )
+}
+
+export default FindingDisplay