@finos/legend-application-studio 23.0.3 → 23.1.0

package/src/components/editor/edit-panel/service-editor/BulkServiceRegistrationEditor.tsx

@@ -26,96 +26,119 @@ import {
   ModalBody,
   TimesIcon,
 } from '@finos/legend-art';
-import { prettyCONSTName } from '@finos/legend-shared';
+import {
+  filterByType,
+  guaranteeNonNullable,
+  prettyCONSTName,
+} from '@finos/legend-shared';
 import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
-import { ServiceExecutionMode } from '@finos/legend-graph';
+import {
+  ServiceRegistrationFail,
+  ServiceRegistrationSuccess,
+  ServiceExecutionMode,
+} from '@finos/legend-graph';
 import { flowResult } from 'mobx';
 import { Version } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
+import { generateServiceManagementUrl } from '../../../../stores/editor/editor-state/element-editor-state/service/ServiceRegistrationState.js';
 
 export const BulkServiceRegistrationEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
-  const serviceState = editorStore.bulkServiceRegistrationState;
-  const registrationState = serviceState.serviceConfigState;
+  const bulkServiceRegistrationState = editorStore.bulkServiceRegistrationState;
   // env & execution server
-  const envOptions = registrationState.options.map((info) => ({
-    label: info.env.toUpperCase(),
-    value: info.env,
-  }));
-  const selectedEnvOption = registrationState.serviceEnv
+  const envOptions = bulkServiceRegistrationState.options
+    .filter((info) => info.env !== 'prod')
+    .map((info) => ({
+      label: info.env.toUpperCase(),
+      value: info.env,
+    }));
+  const selectedEnvOption = bulkServiceRegistrationState.serviceEnv
     ? {
-        label: registrationState.serviceEnv.toUpperCase(),
-        value: registrationState.serviceEnv,
+        label: bulkServiceRegistrationState.serviceEnv.toUpperCase(),
+        value: bulkServiceRegistrationState.serviceEnv,
       }
     : null;
   const onServerEnvChange = (
     val: { label: string; value: string } | null,
   ): void => {
-    registrationState.updateEnv(val?.value);
+    bulkServiceRegistrationState.updateEnv(val?.value);
   };
 
   // execution mode
-  const serviceTypesOptions = registrationState.executionModes.map((mode) => ({
-    label: prettyCONSTName(mode),
-    value: mode,
-  }));
-  const selectedServiceType = registrationState.serviceExecutionMode
+  const serviceTypesOptions = bulkServiceRegistrationState.executionModes
+    .filter((mode) => mode !== ServiceExecutionMode.PROD)
+    .map((mode) => ({
+      label: prettyCONSTName(mode),
+      value: mode,
+    }));
+  const selectedServiceType = bulkServiceRegistrationState.serviceExecutionMode
     ? {
-        label: prettyCONSTName(registrationState.serviceExecutionMode),
-        value: registrationState.serviceExecutionMode,
+        label: prettyCONSTName(
+          bulkServiceRegistrationState.serviceExecutionMode,
+        ),
+        value: bulkServiceRegistrationState.serviceExecutionMode,
       }
     : null;
   const onServiceTypeSelectionChange = (
     val: { label: ServiceExecutionMode; value: ServiceExecutionMode } | null,
   ): void => {
-    registrationState.updateType(val?.value);
+    bulkServiceRegistrationState.updateType(val?.value);
   };
 
   // version
-  const selectedVersion = registrationState.projectVersion
+  const selectedVersion = bulkServiceRegistrationState.projectVersion
     ? {
         label:
-          registrationState.projectVersion instanceof Version
-            ? registrationState.projectVersion.id.id
-            : registrationState.projectVersion,
-        value: registrationState.projectVersion,
+          bulkServiceRegistrationState.projectVersion instanceof Version
+            ? bulkServiceRegistrationState.projectVersion.id.id
+            : bulkServiceRegistrationState.projectVersion,
+        value: bulkServiceRegistrationState.projectVersion,
       }
     : null;
   const onVersionSelectionChange = (
     val: { label: string; value: Version | string } | null,
   ): void => {
-    registrationState.setProjectVersion(val?.value);
+    bulkServiceRegistrationState.setProjectVersion(val?.value);
   };
   const versionPlaceholder =
-    registrationState.versionOptions === undefined
+    bulkServiceRegistrationState.versionOptions === undefined
       ? `Only valid for ${prettyCONSTName(
           ServiceExecutionMode.SEMI_INTERACTIVE,
         )} and ${prettyCONSTName(ServiceExecutionMode.PROD)} service types`
-      : !registrationState.versionOptions.length
+      : !bulkServiceRegistrationState.versionOptions.length
       ? 'Project has no versions'
       : undefined;
 
   // store model for full interactive
   const toggleUseStoreModel = (): void => {
-    registrationState.setUseStoreModelWithFullInteractive(
-      !registrationState.TEMPORARY__useStoreModel,
+    bulkServiceRegistrationState.setUseStoreModelWithFullInteractive(
+      !bulkServiceRegistrationState.TEMPORARY__useStoreModel,
     );
   };
 
+  const config = guaranteeNonNullable(
+    bulkServiceRegistrationState.options.find(
+      (info) => info.env === bulkServiceRegistrationState.serviceEnv,
+    ),
+  );
+
   // actions
   const registerService = (): void => {
     if (selectedEnvOption && selectedServiceType) {
-      flowResult(serviceState.registerServices()).catch(
+      flowResult(bulkServiceRegistrationState.registerServices()).catch(
         applicationStore.alertUnhandledError,
       );
     }
   };
+  const closeModal = (): void => {
+    editorStore.bulkServiceRegistrationState.setSuccessModal(false);
+  };
   const disableRegistration =
     !selectedEnvOption ||
     !selectedServiceType ||
-    registrationState.registrationState.isInProgress;
+    bulkServiceRegistrationState.registrationState.isInProgress;
 
   return (
     <div
@@ -140,51 +163,57 @@ export const BulkServiceRegistrationEditor = observer(() => {
             <Dialog
               open={editorStore.bulkServiceRegistrationState.showSuccessModel}
             >
-              <Modal darkMode={true} className="blocking-alert__summary-text">
-                <div>
+              <Modal
+                darkMode={true}
+                className="editor-modal bulk-service-registration__service__response"
+              >
+                <div className="bulk-service-registration__header">
                   <button
-                    className="query-builder__dialog__header__action"
+                    className="bulk-service-registration__header__action"
                     tabIndex={-1}
-                    onClick={() => {
-                      editorStore.bulkServiceRegistrationState.setSuccessModal(
-                        false,
-                      );
-                    }}
+                    onClick={closeModal}
                   >
                     <TimesIcon />
                   </button>
                 </div>
                 <ModalBody>
-                  <div>
-                    Successful Services:
-                    {editorStore.bulkServiceRegistrationState.serviceConfigState.registrationResult?.successfulServices.map(
-                      (service) => (
-                        <div key={service}>
+                  <div className="bulk-service-registration__service__result__header">
+                    Successful Services
+                    {editorStore.bulkServiceRegistrationState.registrationResult
+                      ?.filter(filterByType(ServiceRegistrationSuccess))
+                      .map((service) => (
+                        <div
+                          className="bulk-service-registration__service__link__label"
+                          key={service.pattern}
+                        >
                           <a
-                            href={editorStore.bulkServiceRegistrationState.serviceConfigState.registrationResult?.serviceLinks.at(
-                              editorStore.bulkServiceRegistrationState.serviceConfigState.registrationResult.successfulServices.indexOf(
-                                service,
-                              ),
+                            className="bulk-service-registration__service__link__label__service__link"
+                            href={generateServiceManagementUrl(
+                              config.managementUrl,
+                              service.pattern,
                             )}
                           >
-                            {service}
+                            {service.pattern}
                           </a>
                         </div>
-                      ),
-                    )}
+                      ))}
                   </div>
-                  <>
-                    {editorStore.bulkServiceRegistrationState.serviceConfigState.registrationResult?.successfulServices.forEach(
-                      (element) => {
-                        <div>{element}</div>;
-                      },
-                    )}
-                  </>
                   <div>
-                    Failed Services:{' '}
-                    {editorStore.bulkServiceRegistrationState.serviceConfigState.registrationResult?.failedServices.join(
-                      '\n',
-                    )}
+                    <div className="bulk-service-registration__service__result__header">
+                      Failed Services
+                    </div>
+                    <div>
+                      {editorStore.bulkServiceRegistrationState.registrationResult
+                        ?.filter(filterByType(ServiceRegistrationFail))
+                        .map((service) => (
+                          <div
+                            key={service.errorMessage}
+                            className="bulk-service-registration__service__link__label"
+                          >
+                            {`${service.service?.path} ${service.errorMessage}`}
+                          </div>
+                        ))}
+                    </div>
                   </div>
                 </ModalBody>
               </Modal>
@@ -193,12 +222,12 @@ export const BulkServiceRegistrationEditor = observer(() => {
         </div>
       </div>
       <PanelLoadingIndicator
-        isLoading={registrationState.registrationState.isInProgress}
+        isLoading={bulkServiceRegistrationState.registrationState.isInProgress}
       />
       <div className="panel__content__form">
-        {registrationState.registrationState.message && (
+        {bulkServiceRegistrationState.registrationState.message && (
           <div className="service-registration-editor__progress-msg">
-            {`${registrationState.registrationState.message}...`}
+            {`${bulkServiceRegistrationState.registrationState.message}...`}
           </div>
         )}
         <div className="panel__content__form__section">
@@ -230,7 +259,7 @@ export const BulkServiceRegistrationEditor = observer(() => {
             darkMode={true}
           />
         </div>
-        {registrationState.serviceExecutionMode ===
+        {bulkServiceRegistrationState.serviceExecutionMode ===
           ServiceExecutionMode.FULL_INTERACTIVE && (
           <div className="panel__content__form__section">
             <div className="panel__content__form__section__header__label">
@@ -243,11 +272,11 @@ export const BulkServiceRegistrationEditor = observer(() => {
               <button
                 className={clsx('panel__content__form__section__toggler__btn', {
                   'panel__content__form__section__toggler__btn--toggled':
-                    registrationState.TEMPORARY__useStoreModel,
+                    bulkServiceRegistrationState.TEMPORARY__useStoreModel,
                 })}
                 tabIndex={-1}
               >
-                {registrationState.TEMPORARY__useStoreModel ? (
+                {bulkServiceRegistrationState.TEMPORARY__useStoreModel ? (
                   <CheckSquareIcon />
                 ) : (
                   <SquareIcon />
@@ -268,11 +297,11 @@ export const BulkServiceRegistrationEditor = observer(() => {
             relevant for semi-interactive and production services.
           </div>
           <CustomSelectorInput
-            options={registrationState.versionOptions ?? []}
+            options={bulkServiceRegistrationState.versionOptions ?? []}
             onChange={onVersionSelectionChange}
             value={selectedVersion}
             darkMode={true}
-            disabled={registrationState.versionOptions === undefined}
+            disabled={bulkServiceRegistrationState.versionOptions === undefined}
             placeholder={versionPlaceholder}
             isLoading={editorStore.sdlcState.isFetchingProjectVersions}
           />

package/src/components/editor/edit-panel/service-editor/ServiceExecutionQueryEditor.tsx

@@ -597,7 +597,7 @@ export const ServiceExecutionQueryEditor = observer(
           />
           <div
             className="service-execution-query-editor__content"
-            title={'double click to edit query in query builder'}
+            title="Double click to edit in query builder"
             onDoubleClick={(event) => {
               event.preventDefault();
               event.stopPropagation();

package/src/components/editor/side-bar/Explorer.tsx

@@ -1299,9 +1299,7 @@ export const Explorer = observer(() => {
                 ) && (
                   <div className="explorer__content--empty">
                     <div className="explorer__content--empty__text">
-                      Can&apos;t build graph as workspace contains merge
-                      conflicts, please resolve them before trying to build the
-                      graph again
+                      {`Can't build graph as workspace contains merge conflicts, please resolve them before trying to build the graph again`}
                     </div>
                     <button
                       className="btn--dark btn--conflict btn--important explorer__content--empty__btn"

package/src/components/editor/side-bar/RegisterService.tsx

@@ -26,8 +26,6 @@ import {
   Dialog,
   Modal,
   TimesIcon,
-  EmptyWindowRestoreIcon,
-  WindowMaximizeIcon,
 } from '@finos/legend-art';
 import type { BulkServiceRegistrationState } from '../../../stores/editor/sidebar-state/BulkServiceRegistrationState.js';
 import { BulkServiceRegistrationEditor } from '../edit-panel/service-editor/BulkServiceRegistrationEditor.js';
@@ -37,25 +35,22 @@ export const RegisterService = observer(
   (props: { bulkServiceRegistrationState: BulkServiceRegistrationState }) => {
     const editorStore = useEditorStore();
     const services = editorStore.graphManagerState.graph.ownServices;
-    const [open, setOpen] = useState(false);
+    const [showRegistrationModel, setShowRegistrationModel] = useState(false);
 
-    const [isMaximized, setIsMaximized] = useState(false);
-    const toggleMaximize = (): void => setIsMaximized(!isMaximized);
-
-    const renderTestables = (): React.ReactNode => (
+    const serviceItems = (): React.ReactNode => (
       <>
         {services.map((service) => (
           <ContextMenu key={service._UUID}>
             <div
               className={clsx(
-                'tree-view__node__container global-test-runner__explorer__testable-tree__node__container',
+                'bulk-service-registration__service__container bulk-service-registration__explorer__service__container',
               )}
             >
-              <div className="global-test-runner__explorer__testable-tree__node__result__icon__type">
+              <div className="bulk-service-registration__explorer__service__result__icon__type">
                 <PURE_ServiceIcon />
               </div>
-              <div className="global-test-runner__item__link__content">
-                <span className="global-test-runner__item__link__content__id">
+              <div className="bulk-service-registration__item__link__content">
+                <span className="bulk-service-registration__item__link__content__id">
                   {service.name}
                 </span>
               </div>
@@ -67,53 +62,44 @@ export const RegisterService = observer(
 
     return (
       <div
-        data-testid={LEGEND_STUDIO_TEST_ID.GLOBAL_TEST_RUNNER}
-        className="panel global-test-runner"
+        data-testid={LEGEND_STUDIO_TEST_ID.BULK_REGISTRATION}
+        className="panel bulk-service-registration"
       >
         <div className="panel__header side-bar__header">
-          <div className="panel__header__title global-test-runner__header__title">
+          <div className="panel__header__title bulk-service-registration__header__title">
             <div className="panel__header__title__content side-bar__header__title__content">
               REGISTER SERVICES
             </div>
           </div>
           <div className="panel__header__actions side-bar__header__actions"></div>
           <button
-            className="panel__header__action side-bar__header__action global-test-runner__refresh-btn"
-            onClick={() => setOpen(true)}
+            className="panel__header__action side-bar__header__action bulk-service-registration__play-btn"
+            onClick={() => setShowRegistrationModel(true)}
             tabIndex={-1}
             title="Register All Services"
           >
             <PlayIcon />
           </button>
-          <Dialog onClose={noop} open={open}>
+          <Dialog onClose={noop} open={showRegistrationModel}>
             <Modal
               darkMode={true}
-              className={clsx('editor-modal query-builder__dialog', {
-                'query-builder__dialog--expanded': isMaximized,
-              })}
+              className={clsx(
+                'editor-modal bulk-service-registration__service__editor',
+              )}
             >
-              <div className="query-builder__dialog__header">
-                <div className="query-builder__dialog__header__actions"></div>
+              <div className="bulk-service-registration__header">
+                <div className="bulk-service-registration__header__actions"></div>
                 <button
-                  className="query-builder__dialog__header__action"
+                  className="bulk-service-registration__header__action"
                   tabIndex={-1}
-                  onClick={toggleMaximize}
-                >
-                  {isMaximized ? (
-                    <EmptyWindowRestoreIcon />
-                  ) : (
-                    <WindowMaximizeIcon />
-                  )}
-                </button>
-                <button
-                  className="query-builder__dialog__header__action"
-                  tabIndex={-1}
-                  onClick={() => setOpen(false)}
+                  onClick={() => setShowRegistrationModel(false)}
                 >
                   <TimesIcon />
                 </button>
               </div>
-              <BulkServiceRegistrationEditor />;
+              <div className="bulk-service-registration__panel__content__form">
+                <BulkServiceRegistrationEditor />
+              </div>
             </Modal>
           </Dialog>
         </div>
@@ -128,9 +114,11 @@ export const RegisterService = observer(
                 data-testid={
                   LEGEND_STUDIO_TEST_ID.SIDEBAR_PANEL_HEADER__CHANGES_COUNT
                 }
-              ></div>
+              >
+                {services.length}
+              </div>
             </div>
-            <PanelContent>{renderTestables()}</PanelContent>
+            <PanelContent>{serviceItems()}</PanelContent>
           </div>
         </div>
       </div>

package/src/components/project-view/ProjectViewer.tsx

@@ -44,7 +44,7 @@ import {
   withProjectViewerStore,
 } from './ProjectViewerStoreProvider.js';
 import {
-  type ViewerPathParams,
+  type ProjectViewerPathParams,
   generateSetupRoute,
 } from '../../application/LegendStudioNavigation.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
@@ -72,7 +72,7 @@ import {
 import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 const ProjectViewerStatusBar = observer(() => {
-  const params = useParams<ViewerPathParams>();
+  const params = useParams<ProjectViewerPathParams>();
   const viewerStore = useProjectViewerStore();
   const editorStore = useEditorStore();
   const applicationStore = useLegendStudioApplicationStore();
@@ -262,7 +262,7 @@ const ProjectViewerActivityBar = observer(() => {
 export const ProjectViewer = withEditorStore(
   withProjectViewerStore(
     observer(() => {
-      const params = useParams<ViewerPathParams>();
+      const params = useParams<ProjectViewerPathParams>();
       const viewerStore = useProjectViewerStore();
       const editorStore = useEditorStore();
       const applicationStore = useApplicationStore();

package/src/components/workspace-review/WorkspaceReview.tsx

@@ -38,7 +38,7 @@ import {
   AssistantIcon,
 } from '@finos/legend-art';
 import {
-  type ReviewPathParams,
+  type WorkspaceReviewPathParams,
   generateSetupRoute,
 } from '../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
@@ -194,7 +194,7 @@ const WorkspaceReviewExplorer = observer(() => {
 export const WorkspaceReview = withEditorStore(
   withWorkspaceReviewStore(
     observer(() => {
-      const params = useParams<ReviewPathParams>();
+      const params = useParams<WorkspaceReviewPathParams>();
       const projectId = params.projectId;
       const reviewId = params.reviewId;
       const reviewStore = useWorkspaceReviewStore();

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -28,7 +28,7 @@ import {
 } from '@finos/legend-art';
 import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
 import {
-  type SetupPathParams,
+  type WorkspaceSetupPathParams,
   generateEditorRoute,
   LEGEND_STUDIO_ROUTE_PATTERN_TOKEN,
 } from '../../application/LegendStudioNavigation.js';
@@ -94,7 +94,7 @@ const withWorkspaceSetupStore = (WrappedComponent: React.FC): React.FC =>
 
 export const WorkspaceSetup = withWorkspaceSetupStore(
   observer(() => {
-    const params = useParams<SetupPathParams>();
+    const params = useParams<WorkspaceSetupPathParams>();
     const projectId = params[LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.PROJECT_ID];
     const workspaceId = params[LEGEND_STUDIO_ROUTE_PATTERN_TOKEN.WORKSPACE_ID];
     const groupWorkspaceId =

package/src/stores/editor/editor-state/element-editor-state/service/ServiceRegistrationState.ts

@@ -35,7 +35,6 @@ import { LEGEND_STUDIO_APP_EVENT } from '../../../../../application/LegendStudio
 import { Version } from '@finos/legend-server-sdlc';
 import {
   type Service,
-  type ServiceRegistrationResult,
   type PureExecution,
   ServiceExecutionMode,
   buildLambdaVariableExpressions,
@@ -43,6 +42,7 @@ import {
   generateMultiplicityString,
   areMultiplicitiesEqual,
   Multiplicity,
+  type ServiceRegistrationSuccess,
 } from '@finos/legend-graph';
 import { ServiceRegistrationEnvironmentConfig } from '../../../../../application/LegendStudioApplicationConfig.js';
 import {
@@ -85,22 +85,19 @@ interface ServiceVersionOption {
   value: Version | string;
 }
 
-export class ServiceRegistrationState {
+export class ServiceConfigState {
   readonly editorStore: EditorStore;
-  readonly service: Service;
   readonly registrationOptions: ServiceRegistrationEnvironmentConfig[] = [];
   readonly registrationState = ActionState.create();
 
   serviceEnv?: string | undefined;
   serviceExecutionMode?: ServiceExecutionMode | undefined;
   projectVersion?: Version | string | undefined;
-  activatePostRegistration = true;
   enableModesWithVersioning: boolean;
   TEMPORARY__useStoreModel = false;
 
   constructor(
     editorStore: EditorStore,
-    service: Service,
     registrationOptions: ServiceRegistrationEnvironmentConfig[],
     enableModesWithVersioning: boolean,
   ) {
@@ -108,7 +105,6 @@ export class ServiceRegistrationState {
       serviceEnv: observable,
       serviceExecutionMode: observable,
       projectVersion: observable,
-      activatePostRegistration: observable,
       enableModesWithVersioning: observable,
       TEMPORARY__useStoreModel: observable,
       executionModes: computed,
@@ -117,21 +113,18 @@ export class ServiceRegistrationState {
       setServiceEnv: action,
       setServiceExecutionMode: action,
       setProjectVersion: action,
-      setActivatePostRegistration: action,
       setUseStoreModelWithFullInteractive: action,
       initialize: action,
       updateVersion: action,
       updateType: action,
       updateEnv: action,
-      registerService: flow,
     });
 
     this.editorStore = editorStore;
-    this.service = service;
     this.registrationOptions = registrationOptions;
     this.enableModesWithVersioning = enableModesWithVersioning;
-    this.initialize();
     this.registrationState.setMessageFormatter(prettyCONSTName);
+    this.initialize();
   }
 
   get options(): ServiceRegistrationEnvironmentConfig[] {
@@ -195,10 +188,6 @@ export class ServiceRegistrationState {
     this.projectVersion = val;
   }
 
-  setActivatePostRegistration(val: boolean): void {
-    this.activatePostRegistration = val;
-  }
-
   setUseStoreModelWithFullInteractive(val: boolean): void {
     this.TEMPORARY__useStoreModel = val;
   }
@@ -228,6 +217,30 @@ export class ServiceRegistrationState {
     this.setServiceEnv(val);
     this.setServiceExecutionMode(this.executionModes[0]);
   }
+}
+
+export class ServiceRegistrationState extends ServiceConfigState {
+  readonly service: Service;
+  activatePostRegistration = true;
+
+  constructor(
+    editorStore: EditorStore,
+    service: Service,
+    registrationOptions: ServiceRegistrationEnvironmentConfig[],
+    enableModesWithVersioning: boolean,
+  ) {
+    super(editorStore, registrationOptions, enableModesWithVersioning);
+    makeObservable(this, {
+      activatePostRegistration: observable,
+      setActivatePostRegistration: action,
+      registerService: flow,
+    });
+
+    this.service = service;
+  }
+  setActivatePostRegistration(val: boolean): void {
+    this.activatePostRegistration = val;
+  }
 
   *registerService(): GeneratorFn<void> {
     try {
@@ -257,7 +270,7 @@ export class ServiceRegistrationState {
           {
             TEMPORARY__useStoreModel: this.TEMPORARY__useStoreModel,
           },
-        )) as ServiceRegistrationResult;
+        )) as ServiceRegistrationSuccess;
       if (this.activatePostRegistration) {
         this.registrationState.setMessage(`Activating service...`);
         yield this.editorStore.graphManagerState.graphManager.activateService(

package/src/stores/editor/editor-state/element-editor-state/service/testable/ServiceTestEditorState.ts

@@ -103,6 +103,7 @@ export class ServiceTestParameterState {
 export class ServiceValueSpecificationTestParameterState extends ServiceTestParameterState {
   valueSpec: ValueSpecification;
   varExpression: VariableExpression;
+
   constructor(
     parameterValue: ParameterValue,
     editorStore: EditorStore,
@@ -147,6 +148,7 @@ export class ServiceValueSpecificationTestParameterState extends ServiceTestPara
     const mockValue = generateVariableExpressionMockValue(
       this.varExpression,
       this.editorStore.graphManagerState.graph,
+      this.editorStore.changeDetectionState.observerContext,
     );
     if (mockValue) {
       this.updateValueSpecification(mockValue);
@@ -157,6 +159,7 @@ export class ServiceValueSpecificationTestParameterState extends ServiceTestPara
 export class ServiceTestSetupState {
   readonly editorStore: EditorStore;
   readonly testState: ServiceTestState;
+
   parameterValueStates: ServiceTestParameterState[] = [];
   newParameterValueName = '';
   showNewParameterModal = false;
@@ -294,6 +297,7 @@ export class ServiceTestSetupState {
         generateVariableExpressionMockValue(
           expression,
           this.editorStore.graphManagerState.graph,
+          this.editorStore.changeDetectionState.observerContext,
         ),
       );
       const paramValue = new ParameterValue();
@@ -380,6 +384,7 @@ export class ServiceTestSetupState {
           const mockValue = generateVariableExpressionMockValue(
             varExpression,
             this.editorStore.graphManagerState.graph,
+            this.editorStore.changeDetectionState.observerContext,
           );
           if (mockValue) {
             const paramValue = new ParameterValue();