Merge pull request #2144 from OpenNeuroOrg/107-feature-flag

107 feature flag

packages/openneuro-app/src/scripts/components/feature-toggle.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react'
+import { useCookies } from 'react-cookie'
+
+interface FeatureToggleProps {
+  feature: string
+  renderOnEnabled(): ReactNode
+  renderOnDisabled(): ReactNode
+}
+
+const FeatureToggle: FC<FeatureToggleProps> = ({
+  feature,
+  renderOnEnabled,
+  renderOnDisabled,
+}) => {
+  const [cookies] = useCookies()
+  return <>{cookies[feature] ? renderOnEnabled() : renderOnDisabled()}</>
+}
+
+export default FeatureToggle

packages/openneuro-app/src/scripts/index.jsx

@@ -4,17 +4,24 @@ import React from 'react'
 import Navbar from './nav/navbar.jsx'
 import Routes from './routes.jsx'
 import Uploader from './uploader/uploader.jsx'
+import FeatureToggle from './components/feature-toggle'
 
 const Index = () => {
   return (
-    <Uploader>
-      <div className="page">
-        <div className="main">
-          <Navbar />
-          <Routes />
-        </div>
-      </div>
-    </Uploader>
+    <FeatureToggle
+      feature="redesign-2021"
+      renderOnEnabled={() => <h1>Redesign 2021</h1>}
+      renderOnDisabled={() => (
+        <Uploader>
+          <div className="page">
+            <div className="main">
+              <Navbar />
+              <Routes />
+            </div>
+          </div>
+        </Uploader>
+      )}
+    />
   )
 }
 

packages/openneuro-server/src/handlers/feature-flags.js

@@ -0,0 +1,12 @@
+const feature = {
+  REDESIGN_2021: 'redesign-2021',
+}
+
+export const setFlagRedesign2021 = (req, res) => {
+  res.cookie(feature.REDESIGN_2021, true).redirect('/')
+}
+
+export const unsetFlagRedesign2021 = (req, res) => {
+  res.clearCookie(feature.REDESIGN_2021)
+  res.redirect('/')
+}

packages/openneuro-server/src/routes.js

@@ -6,6 +6,10 @@ import * as datalad from './handlers/datalad'
 import * as comments from './handlers/comments'
 import { clientConfig } from './handlers/config.js'
 import * as subscriptions from './handlers/subscriptions'
+import {
+  setFlagRedesign2021,
+  unsetFlagRedesign2021,
+} from './handlers/feature-flags'
 import verifyUser from './libs/authentication/verifyUser.js'
 import * as google from './libs/authentication/google.js'
 import * as orcid from './libs/authentication/orcid.js'
@@ -156,6 +160,17 @@ const routes = [
     url: '/sitemap',
     handler: sitemapHandler,
   },
+  // feature flag setters and unsetters
+  {
+    method: 'get',
+    url: '/feature/redesign-2021/enable',
+    handler: setFlagRedesign2021,
+  },
+  {
+    method: 'get',
+    url: '/feature/redesign-2021/disable',
+    handler: unsetFlagRedesign2021,
+  },
 ]
 
 // initialize routes -------------------------------

yarn.lock

@@ -35,36 +35,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:^3.3.19":
-  version: 3.3.19
-  resolution: "@apollo/client@npm:3.3.19"
-  dependencies:
-    "@graphql-typed-document-node/core": ^3.0.0
-    "@types/zen-observable": ^0.8.0
-    "@wry/context": ^0.6.0
-    "@wry/equality": ^0.4.0
-    fast-json-stable-stringify: ^2.0.0
-    graphql-tag: ^2.12.0
-    hoist-non-react-statics: ^3.3.2
-    optimism: ^0.16.0
-    prop-types: ^15.7.2
-    symbol-observable: ^2.0.0
-    ts-invariant: ^0.7.0
-    tslib: ^1.10.0
-    zen-observable: ^0.8.14
-  peerDependencies:
-    graphql: ^14.0.0 || ^15.0.0
-    react: ^16.8.0 || ^17.0.0
-    subscriptions-transport-ws: ^0.9.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-    subscriptions-transport-ws:
-      optional: true
-  checksum: a7266cfdff900ef71adece4d24c853fc6179dfe3d3b89905b468b0a487959a435ef84219fb1266c86e2edb0747ff0e52b6ac49dba72bdac7cdbc55e1d0a2e357
-  languageName: node
-  linkType: hard
-
 "@apollo/protobufjs@npm:1.2.2, @apollo/protobufjs@npm:^1.0.3":
   version: 1.2.2
   resolution: "@apollo/protobufjs@npm:1.2.2"
@@ -4880,7 +4850,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@openneuro/components@workspace:packages/openneuro-components"
   dependencies:
-    "@apollo/client": ^3.3.19
     "@mdx-js/react": ^1.6.22
     "@storybook/addon-a11y": ^6.2.8
     "@storybook/addon-actions": ^6.2.8
@@ -4899,7 +4868,6 @@ __metadata:
     "@types/slick-carousel": ^1
     css-loader: ^5.2.1
     date-fns: ^2.21.1
-    graphql-hooks: ^5.1.1
     rc-slider: ^9.7.2
     react: ^17.0.1
     react-router-dom: ^5.2.0
@@ -13355,13 +13323,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "dequal@npm:2.0.2"
-  checksum: 3b5b019a873da282a25512c632c077e5e8e2a019e71c5b6968836443b861e44176ee3934facfecdc14994d553c1ff4a6c7232278d6aef87baf65e2413d41760c
-  languageName: node
-  linkType: hard
-
 "des.js@npm:^1.0.0":
   version: 1.0.1
   resolution: "des.js@npm:1.0.1"
@@ -15644,7 +15605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extract-files@npm:9.0.0, extract-files@npm:^9.0.0":
+"extract-files@npm:9.0.0":
   version: 9.0.0
   resolution: "extract-files@npm:9.0.0"
   checksum: 021b10787718a2f81847e58bd5eea3b09d636e8bb3cf281dad2aeeafc439c32f9e7d2353b2b4b30f6a7febf93be9d1edd76706ea56cff6850b3f39e1594e5bb3
@@ -17957,18 +17918,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"graphql-hooks@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "graphql-hooks@npm:5.1.1"
-  dependencies:
-    dequal: ^2.0.0
-    extract-files: ^9.0.0
-  peerDependencies:
-    react: ^17.0.0
-  checksum: 4d615236e206e70d6f334e513243385c10c9524d50542e6ca9eee85c843c0effea7d07fa5ff84b8b15619598c46a93a5cf7d6ec979c95118147473414525e1e9
-  languageName: node
-  linkType: hard
-
 "graphql-iso-date@npm:^3.6.1":
   version: 3.6.1
   resolution: "graphql-iso-date@npm:3.6.1"
@@ -25038,16 +24987,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"optimism@npm:^0.16.0":
-  version: 0.16.1
-  resolution: "optimism@npm:0.16.1"
-  dependencies:
-    "@wry/context": ^0.6.0
-    "@wry/trie": ^0.3.0
-  checksum: 760b1295525ba86592edf245736ed704670330a8997d91144c1b45bc9f76e392b53c170fb1eb3b265f67584a4f7e205bc777d0c8ed97774326dba9fbfe899e27
-  languageName: node
-  linkType: hard
-
 "optimize-css-assets-webpack-plugin@npm:^5.0.3":
   version: 5.0.6
   resolution: "optimize-css-assets-webpack-plugin@npm:5.0.6"