🔨 Refactor queue config to env var

.gitignore

@@ -37,3 +37,5 @@ next-env.d.ts
 
 # cypress
 cypress/videos
+
+.env

components/reports/QueueSelector.tsx

@@ -2,14 +2,18 @@ import { Dropdown } from '@/common/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
-export const QUEUES = {
-  stratosphere: {
-    name: 'Stratosphere',
-  },
-  troposphere: {
-    name: 'Troposphere',
-  },
+type QueueConfig = Record<string, { name: string }>
+
+const getQueueConfig = () => {
+  const config = process.env.NEXT_PUBLIC_QUEUE_CONFIG || '{}'
+  try {
+    return JSON.parse(config) as QueueConfig
+  } catch (err) {
+    return {}
+  }
 }
+
+export const QUEUES = getQueueConfig()
 export const QUEUE_NAMES = Object.keys(QUEUES)
 
 export const QueueSelector = () => {
@@ -28,6 +32,15 @@ export const QueueSelector = () => {
     router.push((pathname ?? '') + '?' + nextParams.toString())
   }
 
+  // If no queues are configured, just use a static title
+  if (!QUEUE_NAMES.length) {
+    return (
+      <h3 className="flex items-center text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
+        Queue
+      </h3>
+    )
+  }
+
   return (
     <Dropdown
       containerClassName="inline-block"

components/repositories/DidHistory.tsx

@@ -3,7 +3,7 @@ import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import { useQuery } from '@tanstack/react-query'
 
 const PLC_DIRECTORY_URL =
-  process.env.PLC_DIRECTORY_URL || `https://plc.directory`
+  process.env.NEXT_PUBLIC_PLC_DIRECTORY_URL || `https://plc.directory`
 
 // Not a complete mapping of the DID history event, just the parts we care about in the UI
 type DidHistoryEvent = {

environment.d.ts

@@ -0,0 +1,10 @@
+import Next from 'next'
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      NEXT_PUBLIC_PLC_DIRECTORY_URL?: string
+      NEXT_PUBLIC_QUEUE_CONFIG?: string
+    }
+  }
+}