Skip to content

Commit

Permalink
Upgrade ooni-components and apply necessary fixes (#863)
Browse files Browse the repository at this point in the history
  • Loading branch information
@majakomel
majakomel authored Oct 17, 2023
1 parent d27dbad commit a3cdee6
Show file tree
Hide file tree
Showing 281 changed files with 1,916 additions and 2,335 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ public/static/lang/.messages/
.env*.local
.vercel
cypress/screenshots
.yalc
yalc.lock

# Sentry
.sentryclirc
Expand Down
4 changes: 4 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"prettier.semi": false,
"prettier.singleQuote": true
}
9 changes: 3 additions & 6 deletions components/Badge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { cloneElement } from 'react'
import { FormattedMessage } from 'react-intl'
import styled from 'styled-components'
import { getTestMetadata } from './utils'
import * as icons from 'ooni-components/icons'

// XXX replace what is inside of search/results-list.StyledResultTag
const Badge = styled(Box)`
Expand Down Expand Up @@ -38,7 +39,7 @@ const TestGroupBadge = ({ testName, ...props }) => {
export const CategoryBadge = ({ categoryCode }) => {
let IconComponent
try {
IconComponent = require(`ooni-components/dist/icons/CategoryCode${categoryCode}`).default
IconComponent = icons[`CategoryCode${categoryCode}`]
} catch {
IconComponent = null
}
Expand All @@ -49,11 +50,7 @@ export const CategoryBadge = ({ categoryCode }) => {
<Box>
<FormattedMessage id={`CategoryCode.${categoryCode}.Name`} />
</Box>
{IconComponent &&
<Box>
<IconComponent height={15} width={15} />
</Box>
}
{IconComponent && <IconComponent size={15} />}
</Flex>
</Badge>
)
Expand Down
5 changes: 2 additions & 3 deletions components/DateRangePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,6 @@ margin: 1em 1em 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
button {
padding: 4px 6px;
}
`

const StyledFooter = styled.div`
Expand Down Expand Up @@ -101,7 +98,9 @@ const DateRangePicker = ({handleRangeSelect, initialRange, close, ...props}) =>
const rangesList = ranges.map((range) =>
<Button
hollow
size="small"
key={range}
px={2}
onClick={(e) => {
e.preventDefault()
selectRange(range)
Expand Down
4 changes: 2 additions & 2 deletions components/Flag.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const FlagContainer = styled.div`
/* padding-top: 3px; */
width: ${props => props.size + 2}px;
height: ${props => props.size + 2}px;
border: ${props => props.border ? '1px solid white' : 'none'};
border: ${props => props.$border ? '1px solid white' : 'none'};
`

export const Flag = ({countryCode, size, border}) => {
Expand All @@ -47,7 +47,7 @@ export const Flag = ({countryCode, size, border}) => {
}
const src = `/static/flags/1x1/${countryCode}.svg`
return (
<FlagContainer className='country-flag' size={size} border={border}>
<FlagContainer className='country-flag' size={size} $border={border}>
<FlagImg src={src} size={size} loading='lazy' />
</FlagContainer>
)
Expand Down
89 changes: 61 additions & 28 deletions components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Flex, Box, Container, Link } from 'ooni-components'
import ExplorerLogo from 'ooni-components/components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
import ExplorerLogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochromeInverted.svg'
import { useIntl } from 'react-intl'
import dayjs from 'dayjs'

const StyledFooter = styled.footer`
background-color: ${props => props.theme.colors.blue9};
background-color: ${(props) => props.theme.colors.blue9};
color: #ffffff;
font-size: 16px;
margin-top: 32px;
Expand All @@ -24,18 +24,20 @@ const FooterHead = styled.div`
`

const StyledFooterItem = styled(Link)`
text-decoration: none;
color: #ffffff;
cursor: pointer;
opacity: 0.5;
display: ${props => (props.$horizontal === 'true') ? 'inline' : 'block'};
margin-left: ${props => (props.$horizontal === 'true') ? '1rem' : 0};
&:hover {
opacity: 1;
&& {
text-decoration: none;
color: #ffffff;
cursor: pointer;
opacity: 0.5;
display: ${(props) => (props.$horizontal === 'true' ? 'inline' : 'block')};
margin-left: ${(props) => (props.$horizontal === 'true' ? '1rem' : 0)};
&:hover {
opacity: 1;
}
}
`

const FooterLink = ({ label, href, horizontal = false}) => (
const FooterLink = ({ label, href, horizontal = false }) => (
// Use non-boolean value for props sent to non-DOM styled components
// https://www.styled-components.com/docs/faqs#why-am-i-getting-html-attribute-warnings
<StyledFooterItem mb={2} $horizontal={horizontal.toString()} href={href}>
Expand All @@ -46,7 +48,7 @@ const FooterLink = ({ label, href, horizontal = false}) => (
FooterLink.propTypes = {
label: PropTypes.node,
href: PropTypes.string.isRequired,
horizontal: PropTypes.bool
horizontal: PropTypes.bool,
}

const FooterText = styled.div`
Expand All @@ -55,48 +57,79 @@ const FooterText = styled.div`

const Footer = () => {
const intl = useIntl()
const currentYear = new Intl.DateTimeFormat(intl.locale, { year: 'numeric' }).format(new Date())
const currentYear = new Intl.DateTimeFormat(intl.locale, {
year: 'numeric',
}).format(new Date())
return (
<StyledFooter>
<Container>
<Flex flexWrap='wrap'>
<FooterBox width={[1, 2/5]}>
<FooterBox width={[1, 2 / 5]}>
<Flex flexWrap='wrap' alignItems='center'>
<Box p={[1, 0]} mb={[0, 3]} width={[1/2, 1]}>
<Box p={[1, 0]} mb={[0, 3]} width={[1 / 2, 1]}>
<ExplorerLogo height='32px' />
</Box>
<Box width={[1/2, 2/3]}> <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]}>
<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={intl.formatMessage({ id: 'Footer.Link.Code' })} />
<FooterLink href='https://ooni.org/about/#contact' label={intl.formatMessage({ id: 'Footer.Link.Contact' })} />
<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={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]}>
<FooterBox width={[1 / 2, 1 / 5]}>
<FooterHead>{intl.formatMessage({ id: 'Footer.Heading.OONIProbe' })}</FooterHead>
<FooterLink href='https://ooni.org/install/' label={intl.formatMessage({ id: 'Footer.Link.Probe' })} />
<FooterLink href='https://ooni.org/nettest/' label={intl.formatMessage({ id: 'Footer.Link.Tests' })} />
<FooterLink href='https://github.com/ooni' label={intl.formatMessage({ id: 'Footer.Link.Code' })} />
<FooterLink href='https://api.ooni.io/' label={intl.formatMessage({ id: 'Footer.Link.API' })} />
</FooterBox>
<FooterBox width={[1/2, 1/5]}>
<FooterBox width={[1 / 2, 1 / 5]}>
<FooterHead>{intl.formatMessage({ id: 'Footer.Heading.Updates' })}</FooterHead>
<FooterLink href='https://ooni.org/post/' label={intl.formatMessage({ id: 'Footer.Link.Blog' })} />
<FooterLink href='https://twitter.com/OpenObservatory' label={intl.formatMessage({ id: 'Footer.Link.Twitter' })} />
<FooterLink href='https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-talk' label={intl.formatMessage({ id: 'Footer.Link.MailingList' })} />
<FooterLink href='https://openobservatory.slack.com/' label={intl.formatMessage({ id: 'Footer.Link.Slack' })} />
<FooterLink
href='https://twitter.com/OpenObservatory'
label={intl.formatMessage({ id: 'Footer.Link.Twitter' })}
/>
<FooterLink
href='https://lists.torproject.org/cgi-bin/mailman/listinfo/ooni-talk'
label={intl.formatMessage({ id: 'Footer.Link.MailingList' })}
/>
<FooterLink
href='https://openobservatory.slack.com/'
label={intl.formatMessage({ id: 'Footer.Link.Slack' })}
/>
</FooterBox>
</Flex>
<Flex flexWrap='wrap'>
<FooterBox>
<small>
<Box mb={1}>{intl.formatMessage({ id: 'Footer.Text.Copyright' }, { currentYear })}</Box>
<FooterLink href='https://github.com/ooni/license' label={intl.formatMessage({ id: 'Footer.Text.CCommons'})} />
<FooterText>{intl.formatMessage({ id: 'Footer.Text.Version' }) }: {process.env.GIT_COMMIT_SHA_SHORT}</FooterText>
<FooterLink
href='https://github.com/ooni/license'
label={intl.formatMessage({ id: 'Footer.Text.CCommons' })}
/>
<FooterText>
{intl.formatMessage({ id: 'Footer.Text.Version' })}: {process.env.GIT_COMMIT_SHA_SHORT}
</FooterText>
</small>
</FooterBox>
</Flex>
Expand Down
51 changes: 25 additions & 26 deletions components/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,10 @@ import NLink from 'next/link'
import styled from 'styled-components'
import { FormattedMessage, useIntl } from 'react-intl'
import { getLocalisedLanguageName } from 'utils/i18nCountries'
import ExplorerLogo from 'ooni-components/components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
import {
Link,
Flex,
Box,
Container,
Select,
} from 'ooni-components'
import ExplorerLogo from 'ooni-components/svgs/logos/Explorer-HorizontalMonochromeInverted.svg'
import { Link, Flex, Box, Container } from 'ooni-components'
import useUser from 'hooks/useUser'
import { getDirection } from './withIntl'

const StyledNavItem = styled.a`
text-decoration: none;
Expand All @@ -22,9 +17,9 @@ const StyledNavItem = styled.a`
`

const NavItemLabel = styled.span`
color: ${props => props.theme.colors.white};
color: ${(props) => props.theme.colors.white};
cursor: pointer;
opacity: ${props => props.active ? '1' : '0.6 '};
opacity: ${(props) => (props.$active ? '1' : '0.6 ')};
${StyledNavItem}:hover & {
opacity: 1;
Expand All @@ -34,34 +29,34 @@ const NavItemLabel = styled.span`
const Underline = styled.span`
display: block;
height: 2px;
background: ${props => props.theme.colors.white};
background: ${(props) => props.theme.colors.white};
position: absolute;
left: 0;
bottom: -6px;
width: ${props => props.active ? '100%' : '0px'};
width: ${(props) => (props.$active ? '100%' : '0px')};
${StyledNavItem}:hover & {
width: calc(100%);
}
`

const LanguageSelect = styled.select`
color: ${props => props.theme.colors.white};
color: ${(props) => props.theme.colors.white};
background: none;
opacity: 0.6;
border: none;
text-transform: capitalize;
cursor: pointer;
`

const NavItemComponent = ({router, label, href}) => {
const NavItemComponent = ({ router, label, href }) => {
const active = router.pathname === href
return (
<Box ml={[0, 4]} my={[2, 0]}>
<NLink href={href} passHref>
<StyledNavItem>
<NavItemLabel active={active} >{label}</NavItemLabel>
<Underline active={active} />
<NavItemLabel $active={active}>{label}</NavItemLabel>
<Underline $active={active} />
</StyledNavItem>
</NLink>
</Box>
Expand All @@ -70,20 +65,22 @@ const NavItemComponent = ({router, label, href}) => {
const NavItem = withRouter(NavItemComponent)

const StyledNavBar = styled.div`
background-color: ${props => props.color || props.theme.colors.blue5};
background-color: ${(props) => props.color || props.theme.colors.blue5};
padding-top: 16px;
padding-bottom: 20px;
z-index: 999;
`
const languages = process.env.LOCALES

export const NavBar = ({color}) => {
export const NavBar = ({ color }) => {
const { locale } = useIntl()
const router = useRouter()
const { pathname, asPath, query } = router
const { user, logout } = useUser()

const handleLocaleChange = (event) => {
const htmlEl = document.documentElement
htmlEl.setAttribute('dir', getDirection(event.target.value))
router.push({ pathname, query }, asPath, { locale: event.target.value })
}

Expand All @@ -100,34 +97,36 @@ export const NavBar = ({color}) => {
justifyContent={['flex-start', 'space-between']}
alignItems={['flex-start', 'center']}
>
<Box style={{zIndex: 1}}>
<Box style={{ zIndex: 1 }}>
<NLink href='/' passHref>
<Link><ExplorerLogo height='26px' /></Link>
<Link>
<ExplorerLogo height='26px' />
</Link>
</NLink>
</Box>
<Box mt={[2, 0]}>
<Flex flexDirection={['column', 'row']} alignItems={'center'} >
<Flex flexDirection={['column', 'row']} alignItems={'center'}>
<NavItem label={<FormattedMessage id='Navbar.Search' />} href='/search' />
<NavItem label={<FormattedMessage id='Navbar.Charts.MAT' />} href='/chart/mat' />
<NavItem label={<FormattedMessage id='Navbar.Charts.Circumvention' />} href='/chart/circumvention' />
<NavItem label={<FormattedMessage id='Navbar.Countries' />} href='/countries' />
<NavItem label={<FormattedMessage id='Navbar.Networks' />} href='/networks' />
<NavItem label={<FormattedMessage id='Navbar.Domains' />} href='/domains' />
{user?.logged_in &&
<Box ml={[0, 4]} my={[2, 0]}>
{user?.logged_in && (
<Box ml={[0, 4]} my={[2, 0]}>
<StyledNavItem>
<NavItemLabel onClick={logoutUser}>
<FormattedMessage id='General.Logout' />
</NavItemLabel>
<Underline />
</StyledNavItem>
</Box>
}
)}
<Box ml={[0, 4]} my={[2, 0]}>
<LanguageSelect ml={[0, 4]} onChange={handleLocaleChange} value={locale}>
{languages.map((c) => (
<option key={c} value={c}>
{getLocalisedLanguageName(c,c)}
{getLocalisedLanguageName(c, c)}
</option>
))}
</LanguageSelect>
Expand All @@ -140,4 +139,4 @@ export const NavBar = ({color}) => {
)
}

export default NavBar
export default NavBar
2 changes: 1 addition & 1 deletion components/aggregation/mat/ChartHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Flex, Heading, Text } from 'ooni-components'
import OONILogo from 'ooni-components/components/svgs/logos/OONI-HorizontalMonochrome.svg'
import OONILogo from 'ooni-components/svgs/logos/OONI-HorizontalMonochrome.svg'
import { useIntl } from 'react-intl'

import { colorMap } from './colorMap'
Expand Down
Loading

1 comment on commit a3cdee6

@vercel
Copy link

@vercel vercel bot commented on a3cdee6 Oct 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

explorer – ./

explorer-one.vercel.app
explorer-git-master-ooni1.vercel.app
explorer-ooni1.vercel.app

Please sign in to comment.