@finos/legend-application-studio 15.1.0 → 16.0.0

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type MappingTestState,
@@ -45,6 +45,7 @@ import {
   WrenchIcon,
   PauseCircleIcon,
   PanelDropZone,
+  PencilIcon,
 } from '@finos/legend-art';
 import { useDrop } from 'react-dnd';
 import {
@@ -55,6 +56,8 @@ import {
   IllegalStateError,
   guaranteeType,
   tryToFormatLosslessJSONString,
+  hashObject,
+  assertErrorThrown,
 } from '@finos/legend-shared';
 import {
   EDITOR_LANGUAGE,
@@ -84,12 +87,13 @@ import {
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { DSLMapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLMapping_LegendStudioApplicationPlugin_Extension.js';
 import { flatData_setData } from '../../../../stores/graphModifier/StoreFlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
 } from '../../../../stores/graphModifier/StoreRelational_GraphModifierHelper.js';
+import type { QueryBuilderState } from '@finos/legend-query-builder';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 
 const MappingTestQueryEditor = observer(
   (props: { testState: MappingTestState; isReadOnly: boolean }) => {
@@ -98,19 +102,73 @@ const MappingTestQueryEditor = observer(
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
 
-    const extraQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLMapping_LegendStudioApplicationPlugin_Extension
-          ).getExtraMappingTestQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>
-          {config.renderer(testState, isReadOnly)}
-        </Fragment>
-      ));
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        await flowResult(
+          embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+            setupQueryBuilderState: (): QueryBuilderState => {
+              const queryBuilderState = new MappingExecutionQueryBuilderState(
+                testState.mappingEditorState.mapping,
+                embeddedQueryBuilderState.editorStore.applicationStore,
+                embeddedQueryBuilderState.editorStore.graphManagerState,
+              );
+              queryBuilderState.initializeWithQuery(testState.queryState.query);
+              queryBuilderState.changeDetectionState.setQueryHashCode(
+                hashObject(testState.queryState.query),
+              );
+              queryBuilderState.changeDetectionState.setIsEnabled(true);
+              return queryBuilderState;
+            },
+            actionConfigs: [
+              {
+                key: 'save-query-btn',
+                renderer: (
+                  queryBuilderState: QueryBuilderState,
+                ): React.ReactNode => {
+                  const save = applicationStore.guardUnhandledError(
+                    async (): Promise<void> => {
+                      try {
+                        const rawLambda = queryBuilderState.buildQuery();
+                        await flowResult(
+                          testState.queryState.updateLamba(rawLambda),
+                        );
+                        applicationStore.notifySuccess(
+                          `Mapping test query is updated`,
+                        );
+                        queryBuilderState.changeDetectionState.setQueryHashCode(
+                          hashObject(rawLambda),
+                        );
+                        embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                          undefined,
+                        );
+                      } catch (error) {
+                        assertErrorThrown(error);
+                        applicationStore.notifyError(
+                          `Can't save query: ${error.message}`,
+                        );
+                      }
+                    },
+                  );
+                  return (
+                    <button
+                      className="query-builder__dialog__header__custom-action"
+                      tabIndex={-1}
+                      disabled={isReadOnly}
+                      onClick={save}
+                    >
+                      Save Query
+                    </button>
+                  );
+                },
+              },
+            ],
+            disableCompile: isStubbed_RawLambda(testState.queryState.query),
+          }),
+        );
+      },
+    );
 
     // Class mapping selector
     const [openClassMappingSelectorModal, setOpenClassMappingSelectorModal] =
@@ -203,7 +261,14 @@ const MappingTestQueryEditor = observer(
             <div className="panel__header__title__label">query</div>
           </div>
           <div className="panel__header__actions">
-            {extraQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               tabIndex={-1}

package/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx

@@ -45,6 +45,7 @@ import {
 } from '@finos/legend-graph';
 import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
 import {
+  buildElementOption,
   getPackageableElementOptionFormatter,
   type PackageableElementOption,
 } from '@finos/legend-application';
@@ -77,9 +78,9 @@ export const NewMappingElementModal = observer(() => {
   // Target
   const targetSelectorRef = useRef<SelectComponent>(null);
   const options: PackageableElementOption<PackageableElement>[] = [
-    ...editorStore.enumerationOptions,
-    ...editorStore.associationOptions,
-    ...editorStore.classOptions,
+    ...editorStore.graphManagerState.usableEnumerations.map(buildElementOption),
+    ...editorStore.graphManagerState.usableAssociations.map(buildElementOption),
+    ...editorStore.graphManagerState.usableClasses.map(buildElementOption),
   ].sort(compareLabelFn);
   const filterOption = createFilter({
     ignoreCase: true,

package/src/components/editor/edit-panel/mapping-editor/relational/TableOrViewSourceTree.tsx

@@ -35,7 +35,7 @@ import {
 import {
   generateColumnTypeLabel,
   renderColumnTypeIcon,
-} from '../../../../../stores/editor-state/element-editor-state/mapping/relational/DatabaseEditorHelper.js';
+} from '../../connection-editor/DatabaseEditorHelper.js';
 import {
   type Type,
   type Table,

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

@@ -68,7 +68,10 @@ import {
   validate_PureExecutionMapping,
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
-import type { PackageableElementOption } from '@finos/legend-application';
+import {
+  buildElementOption,
+  type PackageableElementOption,
+} from '@finos/legend-application';
 
 const PureExecutionContextConfigurationEditor = observer(
   (props: {
@@ -87,7 +90,8 @@ const PureExecutionContextConfigurationEditor = observer(
       executionContext.mapping.value,
     );
     const mapping = executionContext.mapping.value;
-    const mappingOptions = editorStore.mappingOptions;
+    const mappingOptions =
+      editorStore.graphManagerState.usableMappings.map(buildElementOption);
     const noMappingLabel = (
       <div
         className="service-execution-editor__configuration__mapping-option--empty"

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import type {
   ServicePureExecutionQueryState,
@@ -34,8 +34,9 @@ import {
   CaretDownIcon,
   MenuContentItem,
   PauseCircleIcon,
+  PencilIcon,
 } from '@finos/legend-art';
-import { debounce } from '@finos/legend-shared';
+import { assertErrorThrown, debounce, hashObject } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -45,8 +46,16 @@ import {
   useApplicationStore,
 } from '@finos/legend-application';
 import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
-import type { LightQuery } from '@finos/legend-graph';
-import type { DSLService_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSLService_LegendStudioApplicationPlugin_Extension.js';
+import {
+  type LightQuery,
+  isStubbed_PackageableElement,
+  isStubbed_RawLambda,
+  KeyedExecutionParameter,
+} from '@finos/legend-graph';
+import {
+  type QueryBuilderState,
+  ServiceQueryBuilderState,
+} from '@finos/legend-query-builder';
 
 const ServiceExecutionResultViewer = observer(
   (props: { executionState: ServicePureExecutionState }) => {
@@ -233,22 +242,101 @@ export const ServiceExecutionQueryEditor = observer(
     isReadOnly: boolean;
   }) => {
     const { executionState, isReadOnly } = props;
-    const queryState = executionState.queryState;
-    const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
-    const extraServiceQueryEditorActions = editorStore.pluginManager
-      .getApplicationPlugins()
-      .flatMap(
-        (plugin) =>
-          (
-            plugin as DSLService_LegendStudioApplicationPlugin_Extension
-          ).getExtraServiceQueryEditorActionConfigurations?.() ?? [],
-      )
-      .map((config) => (
-        <Fragment key={config.key}>
-          {config.renderer(executionState, isReadOnly)}
-        </Fragment>
-      ));
+    const editorStore = useEditorStore();
+    const queryState = executionState.queryState;
+
+    // actions
+    const editWithQueryBuilder = applicationStore.guardUnhandledError(
+      async () => {
+        const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+        executionState.setOpeningQueryEditor(true);
+        const service = executionState.serviceEditorState.service;
+        const selectedExecutionState =
+          executionState.selectedExecutionContextState;
+        if (selectedExecutionState) {
+          const mapping = selectedExecutionState.executionContext.mapping.value;
+          if (!isStubbed_PackageableElement(mapping)) {
+            await flowResult(
+              embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+                setupQueryBuilderState: (): QueryBuilderState => {
+                  const queryBuilderState = new ServiceQueryBuilderState(
+                    embeddedQueryBuilderState.editorStore.applicationStore,
+                    embeddedQueryBuilderState.editorStore.graphManagerState,
+                    service,
+                    selectedExecutionState.executionContext instanceof
+                    KeyedExecutionParameter
+                      ? selectedExecutionState.executionContext.key
+                      : undefined,
+                  );
+                  queryBuilderState.initializeWithQuery(
+                    executionState.execution.func,
+                  );
+                  queryBuilderState.changeDetectionState.setQueryHashCode(
+                    hashObject(executionState.execution.func),
+                  );
+                  queryBuilderState.changeDetectionState.setIsEnabled(true);
+                  return queryBuilderState;
+                },
+                actionConfigs: [
+                  {
+                    key: 'save-query-btn',
+                    renderer: (
+                      queryBuilderState: QueryBuilderState,
+                    ): React.ReactNode => {
+                      const save = applicationStore.guardUnhandledError(
+                        async () => {
+                          try {
+                            const rawLambda = queryBuilderState.buildQuery();
+                            await flowResult(
+                              executionState.queryState.updateLamba(rawLambda),
+                            );
+                            applicationStore.notifySuccess(
+                              `Service query is updated`,
+                            );
+                            queryBuilderState.changeDetectionState.setQueryHashCode(
+                              hashObject(rawLambda),
+                            );
+                            embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(
+                              undefined,
+                            );
+                          } catch (error) {
+                            assertErrorThrown(error);
+                            applicationStore.notifyError(
+                              `Can't save query: ${error.message}`,
+                            );
+                          }
+                        },
+                      );
+
+                      return (
+                        <button
+                          className="query-builder__dialog__header__custom-action"
+                          tabIndex={-1}
+                          disabled={isReadOnly}
+                          onClick={save}
+                        >
+                          Save Query
+                        </button>
+                      );
+                    },
+                  },
+                ],
+                disableCompile: isStubbed_RawLambda(
+                  executionState.queryState.query,
+                ),
+              }),
+            );
+            executionState.setOpeningQueryEditor(false);
+            return;
+          }
+        }
+        applicationStore.notifyWarning(
+          'Please specify a mapping and a runtime for the execution context to edit with query builder',
+        );
+        executionState.setOpeningQueryEditor(false);
+      },
+    );
     const importQuery = (): void => {
       queryState.setOpenQueryImporter(true);
     };
@@ -284,7 +372,14 @@ export const ServiceExecutionQueryEditor = observer(
             </div>
           </div>
           <div className="panel__header__actions">
-            {extraServiceQueryEditorActions}
+            <button
+              className="panel__header__action"
+              tabIndex={-1}
+              onClick={editWithQueryBuilder}
+              title="Edit query..."
+            >
+              <PencilIcon />
+            </button>
             <button
               className="panel__header__action"
               onClick={importQuery}

package/src/components/editor/edit-panel/service-editor/testable/ServiceTestDataEditor.tsx

@@ -46,13 +46,18 @@ import type { EmbeddedDataTypeOption } from '../../../../../stores/editor-state/
 import { EmbeddedDataEditor } from '../../data-editor/EmbeddedDataEditor.js';
 import { EmbeddedDataType } from '../../../../../stores/editor-state/ExternalFormatState.js';
 import { flowResult } from 'mobx';
-import { buildElementOption } from '@finos/legend-application';
+import {
+  buildElementOption,
+  useApplicationStore,
+} from '@finos/legend-application';
 import { prettyCONSTName } from '@finos/legend-shared';
 import type { DSLData_LegendStudioApplicationPlugin_Extension } from '../../../../../stores/DSLData_LegendStudioApplicationPlugin_Extension.js';
+import { useEditorStore } from '../../../EditorStoreProvider.js';
 
 export const ConnectionTestDataEditor = observer(
   (props: { connectionTestDataState: ConnectionTestDataState }) => {
     const { connectionTestDataState } = props;
+    const applicationStore = useApplicationStore();
     const isReadOnly =
       connectionTestDataState.testDataState.testSuiteState.testableState
         .serviceEditorState.isReadOnly;
@@ -66,10 +71,10 @@ export const ConnectionTestDataEditor = observer(
     };
     const generateTestData = (): void => {
       flowResult(connectionTestDataState.generateTestData()).catch(
-        connectionTestDataState.editorStore.applicationStore
-          .alertUnhandledError,
+        applicationStore.alertUnhandledError,
       );
     };
+
     return (
       <div className="service-test-data-editor">
         <div className="service-test-suite-editor__header">
@@ -209,7 +214,9 @@ const ConnectionTestDataItem = observer(
 export const NewConnectionDataModal = observer(
   (props: { testDataState: ServiceTestDataState }) => {
     const { testDataState } = props;
-    const dataElementOptions = testDataState.editorStore.dataOptions;
+    const editorStore = useEditorStore();
+    const dataElementOptions =
+      editorStore.graphManagerState.usableDataElements.map(buildElementOption);
     const newConnectionState = testDataState.newConnectionDataState;
     const dataElement = newConnectionState.dataElement;
     const selectedDataElement = dataElement
@@ -271,7 +278,7 @@ export const NewConnectionDataModal = observer(
           value: newConnectionState.embeddedDataType.value,
         }
       : undefined;
-    const extraOptionTypes = testDataState.editorStore.pluginManager
+    const extraOptionTypes = editorStore.pluginManager
       .getApplicationPlugins()
       .flatMap(
         (plugin) =>

package/src/components/editor/edit-panel/uml-editor/AssociationEditor.tsx

@@ -89,6 +89,7 @@ import {
   getClassPropertyType,
 } from '../../../../stores/shared/ModelUtil.js';
 import {
+  buildElementOption,
   useApplicationNavigationContext,
   type PackageableElementOption,
 } from '@finos/legend-application';
@@ -119,7 +120,8 @@ const AssociationPropertyBasicEditor = observer(
     // Generic Type
     const [isEditingType, setIsEditingType] = useState(false);
     // TODO: make this so that association can only refer to classes from the same graph space
-    const propertyTypeOptions = editorStore.classOptions;
+    const propertyTypeOptions =
+      editorStore.graphManagerState.usableClasses.map(buildElementOption);
     const propertyType = property.genericType.value.rawType;
     const propertyTypeName = getClassPropertyType(propertyType);
     const filterOption = createFilter({

package/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx

@@ -96,6 +96,7 @@ import {
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import {
   ApplicationNavigationContextData,
+  buildElementOption,
   getPackageableElementOptionFormatter,
   useApplicationNavigationContext,
   useApplicationStore,
@@ -167,7 +168,10 @@ const PropertyBasicEditor = observer(
     };
     // Generic Type
     const [isEditingType, setIsEditingType] = useState(false);
-    const propertyTypeOptions = editorStore.classPropertyGenericTypeOptions;
+    const propertyTypeOptions =
+      editorStore.graphManagerState.usableClassPropertyTypes.map(
+        buildElementOption,
+      );
     const propertyType = property.genericType.value.rawType;
     const propertyTypeName = getClassPropertyType(propertyType);
     const filterOption = createFilter({
@@ -492,7 +496,10 @@ const DerivedPropertyBasicEditor = observer(
       property_setName(derivedProperty, event.target.value);
     // Generic Type
     const [isEditingType, setIsEditingType] = useState(false);
-    const propertyTypeOptions = editorStore.classPropertyGenericTypeOptions;
+    const propertyTypeOptions =
+      editorStore.graphManagerState.usableClassPropertyTypes.map(
+        buildElementOption,
+      );
     const propertyType = derivedProperty.genericType.value.rawType;
     const propertyTypeName = getClassPropertyType(propertyType);
     const filterOption = createFilter({
@@ -998,16 +1005,18 @@ const SuperTypeEditor = observer(
     const { superType, _class, deleteSuperType, isReadOnly } = props;
     const editorStore = useEditorStore();
     // Type
-    const superTypeOptions = editorStore.classOptions.filter(
-      (classOption) =>
-        classOption.value instanceof Class &&
-        // Exclude current class
-        classOption.value !== _class &&
-        // Exclude super types of the class
-        !getAllSuperclasses(_class).includes(classOption.value) &&
-        // Ensure there is no loop (might be expensive)
-        !getAllSuperclasses(classOption.value).includes(_class),
-    );
+    const superTypeOptions = editorStore.graphManagerState.usableClasses
+      .filter(
+        (c) =>
+          c instanceof Class &&
+          // Exclude current class
+          c !== _class &&
+          // Exclude super types of the class
+          !getAllSuperclasses(_class).includes(c) &&
+          // Ensure there is no loop (might be expensive)
+          !getAllSuperclasses(c).includes(_class),
+      )
+      .map(buildElementOption);
 
     // Drag and Drop
     const handleHover = useCallback(

package/src/components/editor/edit-panel/uml-editor/ClassQueryBuilder.tsx

@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  type Class,
+  PackageableElementExplicitReference,
+  PureSingleExecution,
+  Service,
+} from '@finos/legend-graph';
+import {
+  type QueryBuilderState,
+  ClassQueryBuilderState,
+} from '@finos/legend-query-builder';
+import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import type { EditorStore } from '../../../../stores/EditorStore.js';
+import type { EmbeddedQueryBuilderState } from '../../../../stores/EmbeddedQueryBuilderState.js';
+import {
+  service_initNewService,
+  service_setExecution,
+} from '../../../../stores/graphModifier/DSLService_GraphModifierHelper.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import { NewServiceModal } from '../service-editor/NewServiceModal.js';
+
+const promoteQueryToService = async (
+  packagePath: string,
+  serviceName: string,
+  embeddedQueryBuilderState: EmbeddedQueryBuilderState,
+  queryBuilderState: QueryBuilderState,
+): Promise<void> => {
+  const editorStore = embeddedQueryBuilderState.editorStore;
+  const applicationStore = editorStore.applicationStore;
+  try {
+    const mapping = guaranteeNonNullable(
+      queryBuilderState.mapping,
+      'Mapping is required to create service execution',
+    );
+    const runtime = guaranteeNonNullable(
+      queryBuilderState.runtimeValue,
+      'Runtime is required to create service execution',
+    );
+    const query = queryBuilderState.buildQuery();
+    const service = new Service(serviceName);
+    service_initNewService(service);
+    service_setExecution(
+      service,
+      new PureSingleExecution(
+        query,
+        service,
+        PackageableElementExplicitReference.create(mapping),
+        runtime,
+      ),
+      editorStore.changeDetectionState.observerContext,
+    );
+    await flowResult(editorStore.addElement(service, packagePath, true));
+    await flowResult(
+      embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration(undefined),
+    ).catch(applicationStore.alertUnhandledError);
+    applicationStore.notifySuccess(`Service '${service.name}' created`);
+  } catch (error) {
+    assertErrorThrown(error);
+    applicationStore.notifyError(error);
+  }
+};
+
+const PromoteToServiceQueryBuilderAction = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const editorStore = useEditorStore();
+    const queryBuilderExtension = editorStore.embeddedQueryBuilderState;
+    const [openNewServiceModal, setOpenNewServiceModal] = useState(false);
+    const showNewServiceModal = (): void => setOpenNewServiceModal(true);
+    const closeNewServiceModal = (): void => setOpenNewServiceModal(false);
+    const allowPromoteToService = Boolean(
+      queryBuilderState.mapping && queryBuilderState.runtimeValue,
+    );
+    const promoteToService = async (
+      packagePath: string,
+      serviceName: string,
+    ): Promise<void> => {
+      if (allowPromoteToService) {
+        await promoteQueryToService(
+          packagePath,
+          serviceName,
+          queryBuilderExtension,
+          queryBuilderState,
+        );
+      }
+    };
+    return (
+      <>
+        <button
+          className="query-builder__dialog__header__custom-action"
+          tabIndex={-1}
+          onClick={showNewServiceModal}
+          disabled={!allowPromoteToService}
+        >
+          Promote to Service
+        </button>
+        {queryBuilderState.mapping && (
+          <NewServiceModal
+            mapping={queryBuilderState.mapping}
+            close={closeNewServiceModal}
+            showModal={openNewServiceModal}
+            promoteToService={promoteToService}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+export const queryClass = async (
+  _class: Class,
+  editorStore: EditorStore,
+): Promise<void> => {
+  const embeddedQueryBuilderState = editorStore.embeddedQueryBuilderState;
+  await flowResult(
+    embeddedQueryBuilderState.setEmbeddedQueryBuilderConfiguration({
+      setupQueryBuilderState: () => {
+        const queryBuilderState = new ClassQueryBuilderState(
+          embeddedQueryBuilderState.editorStore.applicationStore,
+          embeddedQueryBuilderState.editorStore.graphManagerState,
+        );
+        queryBuilderState.changeClass(_class);
+        queryBuilderState.propagateClassChange(_class);
+        return queryBuilderState;
+      },
+      // TODO: when we modularize DSL service, we will create an extension
+      // mechanism for this action config
+      // See https://github.com/finos/legend-studio/issues/65
+      actionConfigs: [
+        {
+          key: 'promote-to-service-btn',
+          renderer: (queryBuilderState: QueryBuilderState): React.ReactNode => (
+            <PromoteToServiceQueryBuilderAction
+              queryBuilderState={queryBuilderState}
+            />
+          ),
+        },
+      ],
+    }),
+  );
+};