From cf0057ecd9f9d9de2c1ab7c2e37d2093f01d12be Mon Sep 17 00:00:00 2001 From: Koen Vlaswinkel Date: Fri, 6 Oct 2023 14:04:06 +0200 Subject: [PATCH] Add view state to method modeling panel This adds a view state to the method modeling panel similar to the model editor. This will be used to send the state of the show multiple models feature flag to the webview so this can be used to selectively show/hide components in the method modeling panel. --- .../ql-vscode/src/common/interface-types.ts | 11 +++++++++- .../method-modeling-view-provider.ts | 20 ++++++++++++++----- .../src/model-editor/shared/view-state.ts | 4 ++++ .../view/method-modeling/MethodModeling.tsx | 1 + .../method-modeling/MethodModelingView.tsx | 14 ++++++++++++- 5 files changed, 43 insertions(+), 7 deletions(-) diff --git a/extensions/ql-vscode/src/common/interface-types.ts b/extensions/ql-vscode/src/common/interface-types.ts index f1af10fabbd..650d4849801 100644 --- a/extensions/ql-vscode/src/common/interface-types.ts +++ b/extensions/ql-vscode/src/common/interface-types.ts @@ -19,7 +19,10 @@ import { ErrorLike } from "../common/errors"; import { DataFlowPaths } from "../variant-analysis/shared/data-flow-paths"; import { Method, Usage } from "../model-editor/method"; import { ModeledMethod } from "../model-editor/modeled-method"; -import { ModelEditorViewState } from "../model-editor/shared/view-state"; +import { + MethodModelingPanelViewState, + ModelEditorViewState, +} from "../model-editor/shared/view-state"; import { Mode } from "../model-editor/shared/mode"; import { QueryLanguage } from "./query-language"; @@ -625,6 +628,11 @@ export type FromMethodModelingMessage = | RevealInEditorMessage | StartModelingMessage; +interface SetMethodModelingPanelViewStateMessage { + t: "setMethodModelingPanelViewState"; + viewState: MethodModelingPanelViewState; +} + interface SetMethodMessage { t: "setMethod"; method: Method; @@ -643,6 +651,7 @@ interface SetSelectedMethodMessage { } export type ToMethodModelingMessage = + | SetMethodModelingPanelViewStateMessage | SetMethodMessage | SetModeledMethodMessage | SetMethodModifiedMessage diff --git a/extensions/ql-vscode/src/model-editor/method-modeling/method-modeling-view-provider.ts b/extensions/ql-vscode/src/model-editor/method-modeling/method-modeling-view-provider.ts index 41706c2bbe7..e80c5528ad7 100644 --- a/extensions/ql-vscode/src/model-editor/method-modeling/method-modeling-view-provider.ts +++ b/extensions/ql-vscode/src/model-editor/method-modeling/method-modeling-view-provider.ts @@ -12,6 +12,7 @@ import { DbModelingState, ModelingStore } from "../modeling-store"; import { AbstractWebviewViewProvider } from "../../common/vscode/abstract-webview-view-provider"; import { assertNever } from "../../common/helpers-pure"; import { ModelEditorViewTracker } from "../model-editor-view-tracker"; +import { showMultipleModels } from "../../config"; export class MethodModelingViewProvider extends AbstractWebviewViewProvider< ToMethodModelingMessage, @@ -29,11 +30,20 @@ export class MethodModelingViewProvider extends AbstractWebviewViewProvider< super(app, "method-modeling"); } - protected override onWebViewLoaded(): void { - this.setInitialState(); + protected override async onWebViewLoaded(): Promise { + await Promise.all([this.setViewState(), this.setInitialState()]); this.registerToModelingStoreEvents(); } + private async setViewState(): Promise { + await this.postMessage({ + t: "setMethodModelingPanelViewState", + viewState: { + showMultipleModels: showMultipleModels(), + }, + }); + } + public async setMethod(method: Method): Promise { this.method = method; @@ -45,11 +55,11 @@ export class MethodModelingViewProvider extends AbstractWebviewViewProvider< } } - private setInitialState(): void { + private async setInitialState(): Promise { if (this.modelingStore.hasStateForActiveDb()) { const selectedMethod = this.modelingStore.getSelectedMethodDetails(); if (selectedMethod) { - void this.postMessage({ + await this.postMessage({ t: "setSelectedMethod", method: selectedMethod.method, modeledMethod: selectedMethod.modeledMethod, @@ -64,7 +74,7 @@ export class MethodModelingViewProvider extends AbstractWebviewViewProvider< ): Promise { switch (msg.t) { case "viewLoaded": - this.onWebViewLoaded(); + await this.onWebViewLoaded(); break; case "telemetry": diff --git a/extensions/ql-vscode/src/model-editor/shared/view-state.ts b/extensions/ql-vscode/src/model-editor/shared/view-state.ts index e16036b5c48..f7250916b61 100644 --- a/extensions/ql-vscode/src/model-editor/shared/view-state.ts +++ b/extensions/ql-vscode/src/model-editor/shared/view-state.ts @@ -8,3 +8,7 @@ export interface ModelEditorViewState { showMultipleModels: boolean; mode: Mode; } + +export interface MethodModelingPanelViewState { + showMultipleModels: boolean; +} diff --git a/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx b/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx index 0e1d16d43b6..3743c2e76a1 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx @@ -40,6 +40,7 @@ export type MethodModelingProps = { modelingStatus: ModelingStatus; method: Method; modeledMethod: ModeledMethod | undefined; + showMultipleModels?: boolean; onChange: (modeledMethod: ModeledMethod) => void; }; diff --git a/extensions/ql-vscode/src/view/method-modeling/MethodModelingView.tsx b/extensions/ql-vscode/src/view/method-modeling/MethodModelingView.tsx index 0974f3a50e8..2c32c3ee553 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MethodModelingView.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MethodModelingView.tsx @@ -9,8 +9,16 @@ import { ModeledMethod } from "../../model-editor/modeled-method"; import { vscode } from "../vscode-api"; import { NotInModelingMode } from "./NotInModelingMode"; import { NoMethodSelected } from "./NoMethodSelected"; +import { MethodModelingPanelViewState } from "../../model-editor/shared/view-state"; -export function MethodModelingView(): JSX.Element { +type Props = { + initialViewState?: MethodModelingPanelViewState; +}; + +export function MethodModelingView({ initialViewState }: Props): JSX.Element { + const [viewState, setViewState] = useState< + MethodModelingPanelViewState | undefined + >(initialViewState); const [inModelingMode, setInModelingMode] = useState(false); const [method, setMethod] = useState(undefined); @@ -31,6 +39,9 @@ export function MethodModelingView(): JSX.Element { if (evt.origin === window.origin) { const msg: ToMethodModelingMessage = evt.data; switch (msg.t) { + case "setMethodModelingPanelViewState": + setViewState(msg.viewState); + break; case "setInModelingMode": setInModelingMode(msg.inModelingMode); break; @@ -84,6 +95,7 @@ export function MethodModelingView(): JSX.Element { modelingStatus={modelingStatus} method={method} modeledMethod={modeledMethod} + showMultipleModels={viewState?.showMultipleModels} onChange={onChange} /> );