feat: ML challenge page routing (#728)

#705

- Adds routing for the ML challenge page at `/competition` (pending
confirmation from @junxini)
- Sets up skeleton page for ML challenge page with footer and header
layout
- Adds feature flag + redirect to 404 page when flag is disabled

## Demo

<img width="1728" alt="image"
src="https://github.com/chanzuckerberg/cryoet-data-portal/assets/2176050/563751f8-3edd-4c9f-b029-49ff03fd8aac">

---------

Co-authored-by: Kira Evans <[email protected]>

frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx

@@ -1,15 +1,40 @@
 import { useLocation } from '@remix-run/react'
+import { useTranslation } from 'react-i18next'
 
 import { Link } from 'app/components/Link'
-import { i18n } from 'app/i18n'
+import { I18nKeys } from 'app/types/i18n'
 import { cns } from 'app/utils/cns'
+import { useFeatureFlag } from 'app/utils/featureFlags'
 
 import { AboutAndHelpDropdown } from './AboutAndHelpDropdown'
 import { CryoETHomeLink } from './CryoETHomeLink'
 import { ToolsDropdown } from './ToolsDropdown'
 
+interface TopNavLink {
+  isActive(pathname: string): boolean
+  label: I18nKeys
+  link: string
+}
+
+const TOP_NAV_LINKS: TopNavLink[] = [
+  {
+    isActive: (pathname) =>
+      pathname.includes('/datasets') || pathname.includes('/runs'),
+    label: 'browseData',
+    link: '/browse-data/datasets',
+  },
+
+  {
+    isActive: (pathname) => pathname === '/competition',
+    label: 'competition',
+    link: '/competition',
+  },
+]
+
 export function TopNavigation() {
   const { pathname } = useLocation()
+  const { t } = useTranslation()
+  const showMlChallenge = useFeatureFlag('mlChallenge')
 
   return (
     <nav
@@ -24,18 +49,22 @@ export function TopNavigation() {
       {/* Add empty space to push content to right */}
       <div className="flex-grow" />
 
-      <Link
-        className={cns(
-          'text-sds-header-s font-semibold mx-sds-xxl p-0',
-
-          pathname.startsWith('/datasets')
-            ? 'text-sds-gray-white'
-            : 'text-sds-gray-400 hover:text-sds-gray-white',
-        )}
-        to="/browse-data/datasets"
-      >
-        {i18n.browseData}
-      </Link>
+      {TOP_NAV_LINKS.filter(
+        (link) => showMlChallenge || link.label !== 'competition',
+      ).map((link) => (
+        <Link
+          className={cns(
+            'text-sds-header-s leading-sds-header-s font-semibold mr-sds-xxl p-0',
+
+            link.isActive(pathname)
+              ? 'text-sds-gray-white'
+              : 'text-sds-gray-400 hover:text-sds-gray-white',
+          )}
+          to={link.link}
+        >
+          {t(link.label)}
+        </Link>
+      ))}
 
       <ToolsDropdown className="mr-sds-xxl text-sds-header-s" />
       <AboutAndHelpDropdown className="ml-sds-xxl text-sds-header-s" />

frontend/packages/data-portal/app/components/MLChallenge/MLChallenge.tsx

@@ -0,0 +1,5 @@
+import { Demo } from 'app/components/Demo'
+
+export function MLChallenge() {
+  return <Demo>ML Challenge</Demo>
+}

frontend/packages/data-portal/app/components/MLChallenge/index.ts

@@ -0,0 +1 @@
+export * from './MLChallenge'

frontend/packages/data-portal/app/routes/competition.tsx

@@ -0,0 +1,23 @@
+import { LoaderFunctionArgs, redirect } from '@remix-run/server-runtime'
+
+import { MLChallenge } from 'app/components/MLChallenge'
+import { getFeatureFlag } from 'app/utils/featureFlags'
+
+export function loader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url)
+  const showMlChallenge = getFeatureFlag({
+    env: process.env.ENV,
+    key: 'mlChallenge',
+    params: url.searchParams,
+  })
+
+  if (!showMlChallenge) {
+    return redirect('/404')
+  }
+
+  return null
+}
+
+export default function CompetitionPage() {
+  return <MLChallenge />
+}

frontend/packages/data-portal/app/utils/featureFlags.ts

@@ -4,11 +4,15 @@ import { useEnvironment } from 'app/context/Environment.context'
 
 export type FeatureFlagEnvironment = typeof process.env.ENV
 
-export type FeatureFlagKey = 'downloadSingleAnnotation' | 'methodType'
+export type FeatureFlagKey =
+  | 'downloadSingleAnnotation'
+  | 'methodType'
+  | 'mlChallenge'
 
 export const FEATURE_FLAGS: Record<FeatureFlagKey, FeatureFlagEnvironment[]> = {
   downloadSingleAnnotation: ['local', 'dev', 'staging', 'prod'],
   methodType: ['local', 'dev'],
+  mlChallenge: ['local', 'dev'],
 }
 
 const ENABLE_FEATURE_PARAM = 'enable-feature'

frontend/packages/data-portal/public/locales/en/translation.json

@@ -53,6 +53,7 @@
   "clearFilters": "Clear Filters",
   "clickToDownloadViaBrowser": "Click to download via your browser",
   "close": "Close",
+  "competition": "Competition",
   "confidence": "confidence",
   "configureDownload": "Configure Download",
   "contributeCta": "We encourage you to share datasets and/or annotations to existing data. Click below to fill out the inquiry form.",