Feature flags

app/Dockerfile

@@ -13,6 +13,7 @@ ENV NEXTAUTH_URL $NEXTAUTH_URL
 ENV NEXT_PUBLIC_URL $NEXT_PUBLIC_URL
 ENV NEXT_PUBLIC_MAPBOX_API_TOKEN $NEXT_PUBLIC_MAPBOX_API_TOKEN
 ENV NEXT_PUBLIC_API_URL $NEXT_PUBLIC_API_URL
+ENV NEXT_PUBLIC_FEATURE_FLAGS $NEXT_PUBLIC_FEATURE_FLAGS
 
 RUN addgroup $USER && adduser -s /bin/bash -D -G $USER $USER
 

app/components/features/selected-item/component.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo } from 'react';
 
 import cx from 'classnames';
 
+import { useFeatureFlags } from 'hooks/feature-flags';
+
 import Button from 'components/button';
 import Checkbox from 'components/forms/checkbox';
 import Select from 'components/forms/select';
@@ -55,7 +57,6 @@ export const Item: React.FC<ItemProps> = ({
   id,
   name,
   className,
-  description,
   type,
 
   splitSelected,
@@ -74,6 +75,11 @@ export const Item: React.FC<ItemProps> = ({
   onMouseEnter,
   onMouseLeave,
 }: ItemProps) => {
+  const {
+    split,
+    strat,
+  } = useFeatureFlags();
+
   // EVENTS
   const onSplitChanged = useCallback(
     (selected) => {
@@ -123,13 +129,13 @@ export const Item: React.FC<ItemProps> = ({
     >
       <header
         className={cx({
-          'px-4 pt-2 pb-4 border-l-4': true,
+          'px-4 py-2 border-l-4': true,
           'border-green-300': type === 'bioregional',
           'border-yellow-300': type === 'species',
         })}
       >
         <div className="flex items-start justify-between">
-          <h2 className="mt-1 text-sm font-heading">{name}</h2>
+          <h2 className="text-sm font-heading">{name}</h2>
 
           {editable && (
             <Button
@@ -141,11 +147,9 @@ export const Item: React.FC<ItemProps> = ({
               Remove
             </Button>
           )}
-
         </div>
-        <div className="mt-2 text-sm opacity-50 clamp-2">{description}</div>
 
-        {type === 'bioregional' && (
+        {type === 'bioregional' && split && (
           <div>
             <div className="flex items-center mt-3 space-x-2 tracking-wide font-heading">
               <Icon icon={SPLIT_SVG} className="w-5 h-5 text-green-300" />
@@ -190,7 +194,7 @@ export const Item: React.FC<ItemProps> = ({
           </div>
         )}
 
-        {type === 'species' && editable && (
+        {type === 'species' && editable && strat && (
           <div>
             <div className="flex items-center mt-3 space-x-2 tracking-wide font-heading">
               <Icon icon={INTERSECT_SVG} className="w-5 h-5 text-yellow-300" />

app/hooks/feature-flags/index.ts

@@ -0,0 +1,18 @@
+import {
+  useMemo,
+} from 'react';
+
+export function useFeatureFlags(): Record<string, boolean> {
+  const flags = useMemo(() => {
+    const FLAGS = (process.env.NEXT_PUBLIC_FEATURE_FLAGS || '').split(',');
+
+    return FLAGS.reduce((acc, flag) => {
+      return {
+        ...acc,
+        [flag]: true,
+      };
+    }, {});
+  }, []);
+
+  return flags;
+}