Adding Simple URL-based feature flags (#117)

* Fixes #66: As a developer, I want to limit the audience
that sees new features, so that we can control
the message and positioning of our tool.
Implements simple feature flagging via URL parameters.
Provide "?flags=x,y,z" to enable flags x, y, and z.
* Fixing type to use Location instead of URL
* Updating README with info on how to use feature flags
This commit is contained in:
Nat Hillard 2021-06-09 15:32:59 -04:00 committed by GitHub
commit 7ab14c7f3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 202 additions and 31 deletions

View file

@ -4,13 +4,21 @@ import {GovBanner,
Title,
PrimaryNav,
SiteAlert} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import {useIntl, Link} from 'gatsby-plugin-intl';
import {Helmet} from 'react-helmet';
const headerLinks = [
<></>,
];
import {useFlags} from '../contexts/FlagContext';
const headerLinks = (flags: string[] | undefined) => {
const timelineLink = <Link key="/timeline" to="/timeline"> Timeline </Link>;
const links = [];
if (flags && flags.includes('timeline')) {
links.push(timelineLink);
}
return links;
};
const J40Header = () => {
const flags = useFlags();
const intl = useIntl();
const title = intl.formatMessage({
id: '71L0pp',
@ -39,7 +47,7 @@ const J40Header = () => {
<div className="usa-navbar">
<Title className={'j40-title'}>{title}</Title>
</div>
<PrimaryNav items={headerLinks}/>
<PrimaryNav items={headerLinks(flags)} />
</div>
</Header>
</>