Refactor isEnv checks; introduce NEXT_PUBLIC_APP_ENV

.env.local.example

@@ -35,3 +35,5 @@ TS_API_KEY=ok
 # Only for Production
 MAILJET_APIKEY_PUBLIC=''
 MAILJET_APIKEY_PRIVATE=''
+
+NEXT_PUBLIC_APP_ENV='development' # 'staging', 'production'

.env.test

@@ -1,2 +1,4 @@
 # See `./docker-compose.yml`
 DATABASE_URL=postgresql://postgres:password@localhost:6002/postgres
+
+NEXT_PUBLIC_APP_ENV='development' # 'staging', 'production'

.github/workflows/deploy-app-production.yml

@@ -9,6 +9,7 @@ jobs:
     with:
       APP_ORIGIN: http://trassenscout.de
       NEXT_PUBLIC_APP_ORIGIN: http://trassenscout.de
+      NEXT_PUBLIC_APP_ENV: "production"
       SERVICE_NAME: trassenscout-production
       S3_UPLOAD_BUCKET: trassenscout
       S3_UPLOAD_REGION: eu-central-1

.github/workflows/deploy-app-staging.yml

@@ -9,6 +9,7 @@ jobs:
     with:
       APP_ORIGIN: http://staging.trassenscout.de
       NEXT_PUBLIC_APP_ORIGIN: http://staging.trassenscout.de
+      NEXT_PUBLIC_APP_ENV: "staging"
       SERVICE_NAME: trassenscout-staging
       S3_UPLOAD_BUCKET: trassenscout
       S3_UPLOAD_REGION: eu-central-1

.github/workflows/deploy-app-tinkering.yml

@@ -9,6 +9,7 @@ jobs:
     with:
       APP_ORIGIN: http://tinkering.trassenscout.de
       NEXT_PUBLIC_APP_ORIGIN: http://tinkering.trassenscout.de
+      NEXT_PUBLIC_APP_ENV: "staging"
       SERVICE_NAME: trassenscout-tinkering
       S3_UPLOAD_BUCKET: trassenscout
       S3_UPLOAD_REGION: eu-central-1

.github/workflows/deploy-app.yml

@@ -122,6 +122,7 @@ jobs:
         env:
           APP_ORIGIN: ${{ inputs.APP_ORIGIN }}
           NEXT_PUBLIC_APP_ORIGIN: ${{ inputs.NEXT_PUBLIC_APP_ORIGIN }}
+          NEXT_PUBLIC_APP_ENV: ${{ inputs.NEXT_PUBLIC_APP_ENV }}
           SERVICE_NAME: ${{ inputs.SERVICE_NAME }}
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
           SESSION_SECRET_KEY: ${{ secrets.SESSION_SECRET_KEY }}

.github/workflows/deployment-config.yml.tpl

@@ -13,6 +13,7 @@ containers:
     environment:
       APP_ORIGIN: ${APP_ORIGIN}
       NEXT_PUBLIC_APP_ORIGIN: ${NEXT_PUBLIC_APP_ORIGIN}
+      NEXT_PUBLIC_APP_ENV: ${NEXT_PUBLIC_APP_ENV}
       DATABASE_URL: ${DATABASE_URL}
       SESSION_SECRET_KEY: ${SESSION_SECRET_KEY}
       MAILJET_APIKEY_PUBLIC: ${MAILJET_APIKEY_PUBLIC}

src/core/components/AdminBox/AdminBox.tsx

@@ -6,7 +6,7 @@ type Props = {
   children: React.ReactNode
 }
 
-export const AdminBox: React.FC<Props> = ({ label, className, children }) => {
+export const AdminBox = ({ label, className, children }: Props) => {
   return (
     <div
       className={clsx(

src/core/layouts/Navigation/NavigationUser/NavigationUserLoggedIn.tsx

@@ -5,6 +5,7 @@ import {
   showMembershipRoleCheckIndicatorCountActions,
   showMembershipRoleCheckIndicatorState,
 } from "@/src/core/store/showMembershipRoleCheckIndicator.zustand"
+import { isDev, isProduction, isStaging } from "@/src/core/utils/isEnv"
 import { CurrentUser } from "@/src/users/types"
 import { getFullname, getInitials, isAdmin } from "@/src/users/utils"
 import { Routes, useParam } from "@blitzjs/next"
@@ -63,15 +64,22 @@ export const NavigationUserLoggedIn: React.FC<Props> = ({ user }) => {
 
                   {isAdmin(user) && (
                     <>
-                      <AdminBox label="Admin">
+                      <AdminBox label="Admin" className="divide-y divide-purple-300">
                         <p className="font-semibold">Rolle: Admin</p>
                         <button
                           onClick={toggleShowMembershipRoleCheckIndicator}
-                          className={clsx(linkStyles, "text-left")}
+                          className={clsx(linkStyles, "text-left leading-none")}
                         >
                           {showMembershipRoleCheckIndicator ? "AN" : "AUS"}: Hervorheben, wo Element
                           abhängig von der Editor-Rolle angezeigt werden.
                         </button>
+                        <pre className="text-xs">
+                          Env: {JSON.stringify({ isProduction, isStaging, isDev }, undefined, 2)}
+                          <br />
+                          NEXT_PUBLIC_APP_ENV: {JSON.stringify(process.env.NEXT_PUBLIC_APP_ENV)}
+                          <br />
+                          NODE_ENV: {JSON.stringify(process.env.NODE_ENV)}
+                        </pre>
                       </AdminBox>
                     </>
                   )}

src/core/layouts/TailwindResponsiveHelper/TailwindResponsiveHelper.tsx

@@ -1,6 +1,6 @@
 import { isDev } from "@/src/core/utils"
 
-export const TailwindResponsiveHelper: React.FC = () => {
+export const TailwindResponsiveHelper = () => {
   if (!isDev) return null
 
   return (

src/core/utils/isEnv.ts

@@ -1,14 +1,10 @@
-export const isProduction =
-  process.env.NODE_ENV === "production" &&
-  process.env.NEXT_PUBLIC_APP_ORIGIN === "http://trassenscout.de"
+export const isProduction = process.env.NEXT_PUBLIC_APP_ENV === "production"
 
-// This does not handle tinkering.trassenscout, yet
-// export const isStaging =
-//   process.env.NODE_ENV === "production" &&
-//   process.env.NEXT_PUBLIC_APP_ORIGIN === "http://staging.trassenscout.de"
+export const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging"
+
+export const isDev =
+  process.env.NEXT_PUBLIC_APP_ENV === "development" && process.env.NODE_ENV === "development"
 
-export const isDev = process.env.NODE_ENV === "development"
 export const isTest = process.env.NODE_ENV === "test"
 
 export const isBrowser = typeof window !== "undefined"
-export const isSSR = !isBrowser

src/env.d.ts

@@ -22,5 +22,6 @@ namespace NodeJS {
     TS_API_KEY: string
     MAILJET_APIKEY_PUBLIC: string
     MAILJET_APIKEY_PRIVATE: string
+    NEXT_PUBLIC_APP_ENV: "development" | "staging" | "production"
   }
 }

src/survey-public/components/maps/DebugMapTileBoundaries.tsx

@@ -1,11 +1,11 @@
-import { isDev } from "@/src/core/utils"
+import { isProduction } from "@/src/core/utils"
 import { useState } from "react"
 import { useMap } from "react-map-gl/maplibre"
 
 export const DebugMapTileBoundaries = () => {
   const { mainMap } = useMap()
   const [show, setShow] = useState(false)
-  if (!isDev) return null
+  if (isProduction) return null
 
   return (
     <button