Refactor

grafana · Dec 5, 2024 · 82a70e3 · 82a70e3
1 parent 148f937
commit 82a70e3
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 21 deletions.
diff --git a/packages/scenes/src/core/SceneScopesBridge.ts b/packages/scenes/src/core/SceneScopesBridge.ts
@@ -1,26 +1,48 @@
 import { isEqual } from 'lodash';
-import { useEffect } from 'react';
 import { BehaviorSubject, filter, map, Observable, pairwise, Unsubscribable } from 'rxjs';
 
 import { Scope } from '@grafana/data';
 
 import { SceneObjectBase } from './SceneObjectBase';
-import { SceneComponentProps, SceneObjectState } from './types';
+import { SceneComponentProps, SceneObjectState, SceneObjectUrlValues, SceneObjectWithUrlSync } from './types';
 import { ScopesContextValue, useScopes } from './ScopesContext';
+import { SceneObjectUrlSyncConfig } from '../services/SceneObjectUrlSyncConfig';
 
 export interface SceneScopesBridgeState extends SceneObjectState {}
 
-export class SceneScopesBridge extends SceneObjectBase<SceneScopesBridgeState> {
+export class SceneScopesBridge extends SceneObjectBase<SceneScopesBridgeState> implements SceneObjectWithUrlSync {
   static Component = SceneScopesBridgeRenderer;
 
+  protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['scopes'] });
+
   protected _renderBeforeActivation = true;
 
   private _contextSubject = new BehaviorSubject<ScopesContextValue | undefined>(undefined);
 
+  private _pendingScopes: string[] | null = null;
+
   public constructor(state: SceneScopesBridgeState) {
     super(state);
   }
 
+  public getUrlState(): SceneObjectUrlValues {
+    return {
+      scopes: this._pendingScopes ?? (this.context?.state.value ?? []).map((scope) => scope.metadata.name),
+    };
+  }
+
+  public updateFromUrl(values: SceneObjectUrlValues) {
+    let scopes = values['scopes'] ?? [];
+    scopes = (Array.isArray(scopes) ? scopes : [scopes]).map(String);
+
+    if (!this.context) {
+      this._pendingScopes = scopes;
+      return;
+    }
+
+    this.context?.changeScopes(scopes);
+  }
+
   public getValue(): Scope[] {
     return this.context?.state.value ?? [];
   }
@@ -78,8 +100,21 @@ export class SceneScopesBridge extends SceneObjectBase<SceneScopesBridgeState> {
   }
 
   public updateContext(newContext: ScopesContextValue | undefined) {
-    if (this.context !== newContext) {
+    if (this._pendingScopes && newContext) {
+      setTimeout(() => {
+        newContext?.changeScopes(this._pendingScopes!);
+        this._pendingScopes = null;
+      });
+    }
+
+    if (this.context !== newContext || this.context?.state !== newContext?.state) {
+      const shouldUpdate = this.context?.state.value !== newContext?.state.value;
+
       this._contextSubject.next(newContext);
+
+      if (shouldUpdate) {
+        setTimeout(() => this.forceRender());
+      }
     }
   }
 
@@ -95,9 +130,7 @@ export class SceneScopesBridge extends SceneObjectBase<SceneScopesBridgeState> {
 function SceneScopesBridgeRenderer({ model }: SceneComponentProps<SceneScopesBridge>) {
   const context = useScopes();
 
-  useEffect(() => {
-    model.updateContext(context);
-  }, [context, model]);
+  model.updateContext(context);
 
   return null;
 }
diff --git a/packages/scenes/src/core/ScopesContext.ts b/packages/scenes/src/core/ScopesContext.ts
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 import { useObservable } from 'react-use';
-import { Observable, Subscription } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { Scope } from '@grafana/data';
 
@@ -9,21 +9,14 @@ export interface ScopesContextValue {
     isEnabled: boolean;
     isLoading: boolean;
     isReadOnly: boolean;
-    pendingScopes: string[] | null;
     value: Scope[];
   };
   stateObservable: Observable<ScopesContextValue['state']>;
-  setNewScopes: (scopeNames: string[] | null) => void;
-  setCurrentScopes: (scopes: Scope[]) => void;
-  enterLoadingMode: () => void;
-  exitLoadingMode: () => void;
+  changeScopes: (scopeNames: string[]) => void;
   enterReadOnly: () => void;
   exitReadOnly: () => void;
   enable: () => void;
   disable: () => void;
-  subscribeToState: (
-    cb: (newState: ScopesContextValue['state'], prevState: ScopesContextValue['state']) => void
-  ) => Subscription;
 }
 
 export const ScopesContext = createContext<ScopesContextValue | undefined>(undefined);
@@ -33,9 +26,15 @@ export function useScopes() {
 
   useObservable(context?.stateObservable ?? new Observable(), context?.state);
 
-  if (!context) {
-    return undefined;
-  }
-
-  return context;
+  return context
+    ? {
+        state: context.state,
+        stateObservable: context.stateObservable,
+        changeScopes: context.changeScopes,
+        enterReadOnly: context.enterReadOnly,
+        exitReadOnly: context.exitReadOnly,
+        enable: context.enable,
+        disable: context.disable,
+      }
+    : undefined;
 }