Fix: Synchronize selected environment in all tabs (#2127)

Author: mykalmax

web/client/src/App.tsx

@@ -20,14 +20,18 @@ import {
 } from '@api/client'
 import { type PlanApplyTracker } from '@models/tracker-plan-apply'
 import { type PlanCancelTracker } from '@models/tracker-plan-cancel'
+import { type EnvironmentName } from '@models/environment'
 
 export default function App(): JSX.Element {
   const environment = useStoreContext(s => s.environment)
+  const environments = useStoreContext(s => s.environments)
   const version = useStoreContext(s => s.version)
   const modules = useStoreContext(s => s.modules)
   const setVersion = useStoreContext(s => s.setVersion)
   const setModules = useStoreContext(s => s.setModules)
+  const addLocalEnvironment = useStoreContext(s => s.addLocalEnvironment)
   const addRemoteEnvironments = useStoreContext(s => s.addRemoteEnvironments)
+  const setEnvironment = useStoreContext(s => s.setEnvironment)
 
   const planOverview = useStorePlan(s => s.planOverview)
   const planApply = useStorePlan(s => s.planApply)
@@ -55,20 +59,25 @@ export default function App(): JSX.Element {
   } = useApiMeta()
 
   useEffect(() => {
-    const channelPlanOverview = channel<any>(
+    const channelPlanOverview = channel(
       'plan-overview',
       updatePlanOverviewTracker,
     )
-    const channelPlanApply = channel<any>('plan-apply', updatePlanApplyTracker)
-    const channelPlanCancel = channel<any>(
-      'plan-cancel',
-      updatePlanCancelTracker,
-    )
+    const channelPlanApply = channel('plan-apply', updatePlanApplyTracker)
+    const channelPlanCancel = channel('plan-cancel', updatePlanCancelTracker)
 
     channelPlanOverview.subscribe()
     channelPlanApply.subscribe()
     channelPlanCancel.subscribe()
 
+    return () => {
+      channelPlanApply.unsubscribe()
+      channelPlanCancel.unsubscribe()
+      channelPlanOverview.unsubscribe()
+    }
+  }, [environment, environments])
+
+  useEffect(() => {
     void getMeta().then(({ data }) => {
       setVersion(data?.version)
       setModules(Array.from(new Set(modules.concat(data?.modules ?? []))))
@@ -83,10 +92,6 @@ export default function App(): JSX.Element {
     })
 
     return () => {
-      channelPlanOverview.unsubscribe()
-      channelPlanApply.unsubscribe()
-      channelPlanCancel.unsubscribe()
-
       void cancelRequestMeta()
       void cancelRequestEnvironments()
     }
@@ -95,18 +100,20 @@ export default function App(): JSX.Element {
   function updatePlanOverviewTracker(data: PlanOverviewTracker): void {
     planOverview.update(data)
 
-    setPlanOverview(planOverview)
-  }
-
-  function updatePlanCancelTracker(data: PlanCancelTracker): void {
-    planCancel.update(data)
+    if (data.environment !== environment.name) {
+      synchronizeEnvironment(data.environment)
+    }
 
-    setPlanCancel(planCancel)
+    setPlanOverview(planOverview)
   }
 
   function updatePlanApplyTracker(data: PlanApplyTracker): void {
     planApply.update(data, planOverview)
 
+    if (data.environment !== environment.name) {
+      synchronizeEnvironment(data.environment)
+    }
+
     const isFinished =
       isTrue(data.meta?.done) && data.meta?.status !== Status.init
 
@@ -125,6 +132,16 @@ export default function App(): JSX.Element {
     setPlanApply(planApply)
   }
 
+  function updatePlanCancelTracker(data: PlanCancelTracker): void {
+    planCancel.update(data)
+
+    if (data.environment !== environment.name) {
+      synchronizeEnvironment(data.environment)
+    }
+
+    setPlanCancel(planCancel)
+  }
+
   function updateEnviroments(data: Optional<Environments>): void {
     const { environments, default_target_environment, pinned_environments } =
       data ?? {}
@@ -138,6 +155,16 @@ export default function App(): JSX.Element {
     }
   }
 
+  function synchronizeEnvironment(environment: EnvironmentName): void {
+    const found = Array.from(environments).find(e => e.name === environment)
+
+    if (isNil(found)) {
+      addLocalEnvironment(environment)
+    } else {
+      setEnvironment(found)
+    }
+  }
+
   const router = getBrowserRouter(modules)
   const isLoadingMeta = isNil(version) || isFetchingMeta
 

web/client/src/context/context.ts

@@ -34,8 +34,8 @@ interface ContextStore {
   getNextEnvironment: () => ModelEnvironment
   setEnvironment: (environment: ModelEnvironment) => void
   addLocalEnvironment: (
-    environments: EnvironmentName,
-    created_from: EnvironmentName,
+    environment: EnvironmentName,
+    created_from?: EnvironmentName,
   ) => void
   removeLocalEnvironment: (environments: ModelEnvironment) => void
   addRemoteEnvironments: (
@@ -46,6 +46,8 @@ interface ContextStore {
   hasRemoteEnvironments: () => boolean
 }
 
+const PROD = 'prod'
+
 const environments = new Set(ModelEnvironment.getEnvironments())
 const environment =
   ModelEnvironment.getEnvironment() ?? environments.values().next().value
@@ -163,7 +165,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
       }
     })
   },
-  addLocalEnvironment(localEnvironment, created_from) {
+  addLocalEnvironment(localEnvironment, created_from = PROD) {
     set(s => {
       if (isStringEmptyOrNil(localEnvironment)) return s
 
@@ -260,7 +262,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
 
       environments.forEach(env => {
         switch (env.name) {
-          case 'prod':
+          case PROD:
             prodEnv = env
             break
           case profileEnv?.name: