introduce DEFAULT_DATA_ENV (#4288)

packages/atlas/src/.env

@@ -2,11 +2,13 @@
 
 # should be set to "production" for production builds
 VITE_ENV=development
+VITE_ENV_SELECTION_ENABLED=true
+# default env in environments admin modal. Can be production, development, next or local. If not provided, VITE_ENV will be used
+VITE_DEFAULT_DATA_ENV=
 
 # App configuration
 VITE_APP_ID=4414-2
 VITE_APP_NAME=Atlas
-VITE_ENV_SELECTION_ENABLED=true
 
 VITE_AVATAR_SERVICE_URL=https://atlas-services.joystream.org/avatars
 VITE_GEOLOCATION_SERVICE_URL=https://geolocation.joystream.org

packages/atlas/src/components/_overlays/AdminModal/AdminModal.tsx

@@ -14,7 +14,7 @@ import { Select } from '@/components/_inputs/Select'
 import { Switch } from '@/components/_inputs/Switch'
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { atlasConfig } from '@/config'
-import { ENV_SELECTION_ENABLED, NODE_URL, availableEnvs } from '@/config/env'
+import { ENV_SELECTION_ENABLED, NODE_URL } from '@/config/env'
 import { absoluteRoutes } from '@/config/routes'
 import { useConfirmationModal } from '@/providers/confirmationModal'
 import { useEnvironmentStore } from '@/providers/environment'
@@ -22,6 +22,7 @@ import { useSnackbar } from '@/providers/snackbars'
 import { useUserStore } from '@/providers/user/user.store'
 import { ActiveUserState } from '@/providers/user/user.types'
 import { useUserLocationStore } from '@/providers/userLocation'
+import { availableEnvs } from '@/utils/envVariables'
 import { SentryLogger } from '@/utils/logs'
 
 import {
@@ -35,8 +36,6 @@ const ENVIRONMENT_NAMES: Record<string, string> = {
   production: 'Joystream Mainnet',
   development: `${atlasConfig.general.appName} Dev Testnet`,
   next: `${atlasConfig.general.appName} Next Testnet`,
-  // todo for removal, created only for testing purposes
-  orion2test: `${atlasConfig.general.appName} Orion v2 production Testnet`,
   local: 'Local chain',
 }
 
@@ -133,9 +132,9 @@ export const AdminModal: FC = () => {
 
 const EnvTab: FC = () => {
   const {
-    targetDevEnv,
+    defaultDataEnv,
     nodeOverride,
-    actions: { setTargetDevEnv, setNodeOverride },
+    actions: { setDefaultDataEnv, setNodeOverride },
   } = useEnvironmentStore()
 
   const determinedNode = nodeOverride || NODE_URL
@@ -148,7 +147,7 @@ const EnvTab: FC = () => {
     if (!value) {
       return
     }
-    setTargetDevEnv(value)
+    setDefaultDataEnv(value)
     setNodeOverride(null)
     resetActiveUser()
 
@@ -184,7 +183,7 @@ const EnvTab: FC = () => {
         <Select
           items={environmentsItems}
           onChange={handleEnvironmentChange}
-          value={targetDevEnv}
+          value={defaultDataEnv}
           disabled={!ENV_SELECTION_ENABLED}
         />
       </FormField>

packages/atlas/src/config/env.ts

@@ -1,13 +1,10 @@
 import { useEnvironmentStore } from '@/providers/environment'
+import { getEnvName } from '@/utils/envVariables'
 
 type BuildEnv = 'production' | 'development'
 
 export const ENV_PREFIX = 'VITE'
 
-export const getEnvName = (name: string) => {
-  return `${ENV_PREFIX}_${name}`
-}
-
 export const ENV_SELECTION_ENABLED: boolean = import.meta.env[getEnvName('ENV_SELECTION_ENABLED')] === 'true'
 
 export const BUILD_ENV = (import.meta.env[getEnvName('ENV')] || 'production') as BuildEnv
@@ -17,30 +14,15 @@ export const BUILD_ENV = (import.meta.env[getEnvName('ENV')] || 'production') as
 if (ENV_SELECTION_ENABLED === false) {
   const environmentState = useEnvironmentStore.getState()
 
-  if (environmentState.actions.getInitialState().targetDevEnv !== environmentState.targetDevEnv) {
+  if (environmentState.actions.getInitialState().defaultDataEnv !== environmentState.defaultDataEnv) {
     useEnvironmentStore.getState().actions.reset()
   }
 }
-export const availableEnvs = () => {
-  return Array.from(
-    new Set(
-      Object.keys(import.meta.env)
-        .filter(
-          (key) =>
-            key.startsWith(ENV_PREFIX) &&
-            !key.startsWith(`${ENV_PREFIX}_ENV`) &&
-            !key.startsWith(`${ENV_PREFIX}_VERCEL`)
-        )
-        .map((key) => {
-          return key.replace(ENV_PREFIX, '').split('_')[1].toLowerCase()
-        })
-    )
-  )
-}
+
 export const readEnv = (name: string, required = true, direct = false): string => {
   const fullName = direct
     ? getEnvName(name)
-    : getEnvName(`${useEnvironmentStore.getState().targetDevEnv.toUpperCase()}_${name}`)
+    : getEnvName(`${useEnvironmentStore.getState().defaultDataEnv.toUpperCase()}_${name}`)
   const value = import.meta.env[fullName]
   if (!value && required) {
     throw new Error(`Missing required env variable "${name}", tried access via "${fullName}"`)
@@ -50,12 +32,15 @@ export const readEnv = (name: string, required = true, direct = false): string =
   return value.toString()
 }
 
+// variables that depends on chosen environment
 export const ORION_GRAPHQL_URL = readEnv('ORION_URL')
 export const QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL = readEnv('QUERY_NODE_SUBSCRIPTION_URL')
 export const NODE_URL = readEnv('NODE_URL')
 export const FAUCET_URL = readEnv('FAUCET_URL')
-export const GOOGLE_OAUTH_ENDPOINT = 'https://accounts.google.com/o/oauth2/v2/auth'
 
+// direct variables
+export const GOOGLE_OAUTH_ENDPOINT = 'https://accounts.google.com/o/oauth2/v2/auth'
+export const DEFAULT_DATA_ENV = readEnv('DEFAUL_DATA_ENV', false, true) || BUILD_ENV // if default data env is not provided use BUILD_ENV
 export const JOY_PRICE_SERVICE_URL = readEnv('PRICE_SERVICE_URL', false, true)
 export const USER_LOCATION_SERVICE_URL = readEnv('GEOLOCATION_SERVICE_URL', true, true)
 export const HCAPTCHA_SITE_KEY = readEnv('HCAPTCHA_SITE_KEY', false, true)

packages/atlas/src/providers/environment/store.ts

@@ -1,19 +1,22 @@
+import { getEnvName } from '@/utils/envVariables'
 import { createStore } from '@/utils/store'
 
 const LOCAL_STORAGE_KEY = 'environment'
 
 export type EnvironmentState = {
-  targetDevEnv: string
+  defaultDataEnv: string
   nodeOverride: string | null
 }
 
+export const ENV_PREFIX = 'VITE'
+
 const INITIAL_STATE: EnvironmentState = {
-  targetDevEnv: 'development',
+  defaultDataEnv: import.meta.env[getEnvName('DEFAULT_DATA_ENV')] || import.meta.env[getEnvName('ENV')] || 'production',
   nodeOverride: null,
 }
 
 export type EnvironmentStoreActions = {
-  setTargetDevEnv: (env: string) => void
+  setDefaultDataEnv: (env: string) => void
   setNodeOverride: (node: string | null) => void
   reset: () => void
   getInitialState: () => EnvironmentState
@@ -28,9 +31,9 @@ export const useEnvironmentStore = createStore<EnvironmentState, EnvironmentStor
           state.nodeOverride = node
         })
       },
-      setTargetDevEnv: (env) => {
+      setDefaultDataEnv: (env) => {
         set((state) => {
-          state.targetDevEnv = env
+          state.defaultDataEnv = env
         })
       },
       reset: () => {
@@ -43,7 +46,7 @@ export const useEnvironmentStore = createStore<EnvironmentState, EnvironmentStor
     persist: {
       key: LOCAL_STORAGE_KEY,
       version: 0,
-      whitelist: ['nodeOverride', 'targetDevEnv'],
+      whitelist: ['nodeOverride', 'defaultDataEnv'],
       migrate: () => null,
     },
   }

packages/atlas/src/utils/envVariables.ts

@@ -0,0 +1,22 @@
+export const ENV_PREFIX = 'VITE'
+
+export const getEnvName = (name: string) => {
+  return `${ENV_PREFIX}_${name}`
+}
+
+export const availableEnvs = () => {
+  return Array.from(
+    new Set(
+      Object.keys(import.meta.env)
+        .filter(
+          (key) =>
+            key.startsWith(ENV_PREFIX) &&
+            !key.startsWith(`${ENV_PREFIX}_ENV`) &&
+            !key.startsWith(`${ENV_PREFIX}_VERCEL`)
+        )
+        .map((key) => {
+          return key.replace(ENV_PREFIX, '').split('_')[1].toLowerCase()
+        })
+    )
+  )
+}