@finos/legend-application-studio 28.18.40 → 28.18.42

package/src/components/editor/editor-group/connection-editor/RelationalDatabaseConnectionEditor.tsx

@@ -1162,7 +1162,7 @@ const RelationalConnectionStoreEditor = observer(
     const selectedStore = {
       value: store,
       label: isStoreEmpty ? noStoreLabel : store.path,
-    };
+    } as PackageableElementOption<Store>;
     const onStoreChange = (
       val: PackageableElementOption<Store> | null,
     ): void => {
@@ -1195,7 +1195,7 @@ const RelationalConnectionStoreEditor = observer(
                   .TEMPORARY__isLightColorThemeEnabled
               }
               disabled={isReadOnly}
-              hasError={isStoreEmpty}
+              hasError={Boolean(isStoreEmpty)}
             />
             <PanelDivider />
             <button
@@ -1885,21 +1885,15 @@ export const RelationalDatabaseConnectionEditor = observer(
   }) => {
     const { connectionValueState, isReadOnly } = props;
     const selectedTab = connectionValueState.selectedTab;
-    const changeTab =
-      <T,>( // eslint-disable-line
-        tab: T,
-      ) =>
-      (): void => {
-        connectionValueState.setSelectedTab(
-          tab as unknown as RELATIONAL_DATABASE_TAB_TYPE,
-        );
-      };
+    const changeTab = (tab: string) => (): void => {
+      connectionValueState.setSelectedTab(tab as RELATIONAL_DATABASE_TAB_TYPE);
+    };
 
     return (
       <Panel>
         <PanelTabs
-          tabTitles={Object.values(RELATIONAL_DATABASE_TAB_TYPE)}
-          changeTheTab={changeTab}
+          tabs={Object.values(RELATIONAL_DATABASE_TAB_TYPE)}
+          changeTab={changeTab}
           selectedTab={selectedTab}
           tabClassName="relational-connection-editor__tab"
         />

package/src/components/editor/editor-group/data-editor/EmbeddedDataEditor.tsx

@@ -177,12 +177,13 @@ export const DataElementReferenceDataEditor = observer(
     const applicationStore = editorStore.applicationStore;
     const options =
       editorStore.graphManagerState.usableDataElements.map(buildElementOption);
-    const selectedOption = buildElementOption(dataElement);
-    const onDataElementChange = (val: {
-      label: string;
-      value?: DataElement;
-    }): void => {
-      if (val.value !== selectedOption.value && val.value) {
+    const selectedOption = buildElementOption(
+      dataElement,
+    ) as PackageableElementOption<DataElement>;
+    const onDataElementChange = (
+      val: PackageableElementOption<DataElement>,
+    ): void => {
+      if (val.value !== selectedOption.value) {
         dataElementReferenceState.setDataElement(val.value);
       }
     };
@@ -255,8 +256,8 @@ export const ModelEmbeddedDataEditor = observer(
     const elementFilterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Class>): string =>
-        option.value.path,
+      stringify: (option: { data: PackageableElementOption<Class> }): string =>
+        option.data.value.path,
     });
     const editorStore = modelStoreDataState.editorStore;
     const applicationStore = editorStore.applicationStore;
@@ -293,7 +294,7 @@ export const ModelEmbeddedDataEditor = observer(
               <PURE_ClassIcon />
             </div>
             <CustomSelectorInput
-              ref={classSelectorRef}
+              inputRef={classSelectorRef}
               className="sample-data-generator__controller__class-selector"
               options={classOptions}
               onChange={changeClass}

package/src/components/editor/editor-group/database/IsolatedQueryDatabase.tsx

@@ -15,6 +15,7 @@
  */
 
 import {
+  type Database,
   type PackageableConnection,
   getMappingCompatibleClasses,
 } from '@finos/legend-graph';
@@ -86,7 +87,10 @@ const IsolatedDatabseQueryBuilderSetupPanelContext = observer(
               className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
               noMatchMessage="No compatible mapping found for specified class"
               disabled={true}
-              options={[]}
+              options={[] as { label: string; value: Database }[]}
+              onChange={() => {
+                // do nothing
+              }}
               value={databaseOption}
               darkMode={
                 !queryBuilderState.applicationStore.layoutService

package/src/components/editor/editor-group/element-generation-editor/FileGenerationEditor.tsx

@@ -455,7 +455,7 @@ const GenerationEnumPropertyEditor = observer(
           darkMode={
             !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
-          disable={isReadOnly}
+          disabled={isReadOnly}
         />
       </div>
     );

package/src/components/editor/editor-group/external-format-editor/DSL_ExternalFormat_BindingElementEditor.tsx

@@ -205,21 +205,27 @@ const BindingGeneralEditor = observer(
         PackageableElementExplicitReference.create(val.value),
       );
     };
-    const selectedSchemaSet = {
-      value: binding.schemaSet,
-      label: binding.schemaSet?.valueForSerialization,
-    };
-    const schemaIdOptions = selectedSchemaSet.value?.value.schemas.map((e) => ({
-      value: e.id,
-      label: e.id,
-    }));
+    const selectedSchemaSet = binding.schemaSet
+      ? {
+          label: binding.schemaSet.valueForSerialization ?? '',
+          value: binding.schemaSet.value,
+        }
+      : null;
+    const schemaIdOptions = selectedSchemaSet?.value.schemas
+      .filter((e) => e.id)
+      .map((e) => ({
+        value: guaranteeNonNullable(e.id),
+        label: guaranteeNonNullable(e.id),
+      }));
     const onSchemaIdChange = (
       val: { label: string; value: string } | null,
     ): void => externalFormat_Binding_setSchemaId(binding, val?.value);
-    const selectedSchemaId = {
-      value: binding.schemaId,
-      label: binding.schemaId,
-    };
+    const selectedSchemaId = binding.schemaId
+      ? {
+          value: binding.schemaId,
+          label: binding.schemaId,
+        }
+      : null;
     const projectSelectorRef = useRef<SelectComponent>(null);
     const contentTypeOptions =
       editorStore.graphState.graphGenerationState.externalFormatState.formatContentTypes.map(
@@ -260,7 +266,7 @@ const BindingGeneralEditor = observer(
           <CustomSelectorInput
             className="binding-general-editor__section__dropdown"
             disabled={isReadOnly}
-            ref={projectSelectorRef}
+            inputRef={projectSelectorRef}
             options={schemaSetOptions}
             onChange={onSchemaSetChange}
             value={selectedSchemaSet}
@@ -279,7 +285,7 @@ const BindingGeneralEditor = observer(
           <CustomSelectorInput
             className="binding-general-editor__section__dropdown"
             disabled={isReadOnly}
-            ref={projectSelectorRef}
+            inputRef={projectSelectorRef}
             options={schemaIdOptions}
             onChange={onSchemaIdChange}
             value={selectedSchemaId}

package/src/components/editor/editor-group/function-activator/FunctionEditor.tsx

@@ -238,8 +238,8 @@ const ParameterBasicEditor = observer(
     const filterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Type>): string =>
-        option.value.path,
+      stringify: (option: { data: PackageableElementOption<Type> }): string =>
+        option.data.value.path,
     });
     const selectedType = { value: paramType, label: paramType.name };
     const changeType = (val: PackageableElementOption<Type>): void => {
@@ -503,10 +503,13 @@ const ReturnTypeEditor = observer(
     const filterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
-      stringify: (option: PackageableElementOption<Type>): string =>
-        option.value.path,
+      stringify: (option: { data: PackageableElementOption<Type> }): string =>
+        option.data.value.path,
     });
-    const selectedType = { value: returnType, label: returnType.value.name };
+    const selectedType = {
+      value: returnType.value,
+      label: returnType.value.name,
+    };
     const changeType = (val: PackageableElementOption<Type>): void => {
       function_setReturnType(functionElement, val.value);
       setIsEditingType(false);
@@ -774,7 +777,7 @@ const FunctionPromoteEditor = observer(
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Deploy the function in the definition of a Store persistence"
-              isDisable={true}
+              disabled={true}
               isActive={
                 activatorPromoteState.activateType ===
                 FUNCTION_ACTIVATE_TYPE.SERVICE_JAR
@@ -788,7 +791,7 @@ const FunctionPromoteEditor = observer(
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Use the service in a refiner context"
-              isDisable={true}
+              disabled={true}
               isActive={
                 activatorPromoteState.activateType ===
                 FUNCTION_ACTIVATE_TYPE.REFINER
@@ -802,7 +805,7 @@ const FunctionPromoteEditor = observer(
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Deploy the function as a UDTF(user-defined table function) in BigQuery"
-              isDisable={true}
+              disabled={true}
               isActive={
                 activatorPromoteState.activateType ===
                 FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP

package/src/components/editor/editor-group/function-activator/HostedServiceFunctionActivatorEditor.tsx

@@ -553,7 +553,6 @@ export const HostedServiceFunctionActivatorEditor = observer(() => {
                               <CustomSelectorInput
                                 className="service-editor__owner__selector"
                                 placeholder="Enter an owner..."
-                                spellCheck={false}
                                 inputValue={searchText}
                                 options={userOptions}
                                 allowCreating={true}

package/src/components/editor/editor-group/function-activator/SnowflakeAppFunctionActivatorEditor.tsx

@@ -62,8 +62,8 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
   const connectionFilterOption = createFilter({
     ignoreCase: true,
     ignoreAccents: false,
-    stringify: (option: RelationalDatabaseConnectionOption): string =>
-      option.value.path,
+    stringify: (option: { data: RelationalDatabaseConnectionOption }): string =>
+      option.data.value.path,
   });
   const connectionOptions = editorStore.graphManagerState.usableConnections
     .filter(
@@ -230,7 +230,7 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
                   <PURE_ConnectionIcon />
                 </div>
                 <CustomSelectorInput
-                  ref={connectionSelectorRef}
+                  inputRef={connectionSelectorRef}
                   className="snowflake-app-function-activator-editor__config__connection-selector__input"
                   options={connectionOptions}
                   onChange={changeConnection}
@@ -286,10 +286,14 @@ export const SnowflakeAppFunctionActivatorEditor = observer(() => {
                   className="snowflake-app-function-activator-editor__config__connection-selector__input"
                   options={permissionSchemeOptions}
                   onChange={changePermissionScheme}
-                  value={{
-                    label: activator.permissionScheme,
-                    value: activator.permissionScheme,
-                  }}
+                  value={
+                    activator.permissionScheme
+                      ? {
+                          label: activator.permissionScheme,
+                          value: activator.permissionScheme,
+                        }
+                      : null
+                  }
                   darkMode={
                     !applicationStore.layoutService
                       .TEMPORARY__isLightColorThemeEnabled

package/src/components/editor/editor-group/function-activator/testable/FunctionTestableEditor.tsx

@@ -555,7 +555,7 @@ const NewParameterModal = observer(
               !applicationStore.layoutService
                 .TEMPORARY__isLightColorThemeEnabled
             }
-            disable={isReadOnly}
+            disabled={isReadOnly}
           />
           <div className="search-modal__actions">
             <button className="btn btn--dark" disabled={isReadOnly}>

package/src/components/editor/editor-group/mapping-editor/EnumerationMappingEditor.tsx

@@ -101,9 +101,9 @@ const EnumerationMappingSourceSelectorModal = observer(
     const filterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
-      stringify: (
-        option: PackageableElementOption<PackageableElement>,
-      ): string => option.value.path,
+      stringify: (option: {
+        data: PackageableElementOption<PackageableElement>;
+      }): string => option.data.value.path,
     });
     const sourceType = enumerationMapping.sourceType?.value;
     const selectedSourceType = sourceType
@@ -149,7 +149,7 @@ const EnumerationMappingSourceSelectorModal = observer(
         >
           <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
-            ref={sourceSelectorRef}
+            inputRef={sourceSelectorRef}
             options={options}
             onChange={changeSourceType}
             value={selectedSourceType}

package/src/components/editor/editor-group/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -138,7 +138,6 @@ const EnumerationPropertyMappingEditor = observer(
       mappingEditorState.mapping,
       enumeration,
     ).map((em) => ({ value: em, label: em.id.value }));
-    const transformerLabel = propertyMapping.transformer?.valueForSerialization;
     const handleSelectionChange = (
       val: { label: string; value: EnumerationMapping } | null,
     ): void =>
@@ -193,7 +192,15 @@ const EnumerationPropertyMappingEditor = observer(
               disabled={options.length <= 1 || isReadOnly}
               options={options}
               onChange={handleSelectionChange}
-              value={{ value: transformerLabel, label: transformerLabel }}
+              value={
+                propertyMapping.transformer
+                  ? {
+                      label:
+                        propertyMapping.transformer.valueForSerialization ?? '',
+                      value: propertyMapping.transformer.value,
+                    }
+                  : null
+              }
               placeholder="Choose an existing enumeration mapping"
             />
             <button

package/src/components/editor/editor-group/mapping-editor/InstanceSetImplementationSourceSelectorModal.tsx

@@ -44,7 +44,7 @@ import {
   PackageableElement,
   FlatData,
 } from '@finos/legend-graph';
-import { UnsupportedOperationError } from '@finos/legend-shared';
+import { isNonNullable, UnsupportedOperationError } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
@@ -183,7 +183,9 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
                   mainTableAlias.name = mainTableAlias.relation.value.name;
                   return mainTableAlias;
                 })
-    ).map(buildMappingElementSourceOption);
+    )
+      .map(buildMappingElementSourceOption)
+      .filter(isNonNullable);
     const sourceFilterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
@@ -207,9 +209,7 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
           editorStore.pluginManager.getApplicationPlugins(),
         ),
     );
-    const changeSourceType = (
-      val: MappingElementSourceSelectOption | null,
-    ): Promise<void> =>
+    const changeSourceType = (val: MappingElementSourceSelectOption | null) => {
       flowResult(
         mappingEditorState.changeClassMappingSourceDriver(
           setImplementation,
@@ -218,6 +218,7 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
       )
         .then(() => closeModal())
         .catch(applicationStore.alertUnhandledError);
+    };
     const handleEnter = (): void => sourceSelectorRef.current?.focus();
 
     return (
@@ -244,7 +245,7 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
         >
           <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
-            ref={sourceSelectorRef}
+            inputRef={sourceSelectorRef}
             options={options}
             onChange={changeSourceType}
             value={selectedSourceType}

package/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx

@@ -127,8 +127,8 @@ export const ClassMappingSelectorModal = observer(
     const filterOption = createFilter({
       ignoreCase: true,
       ignoreAccents: false,
-      stringify: (option: ClassMappingSelectOption): string =>
-        getMappingElementLabel(option.value, editorStore).value,
+      stringify: (option: { data: ClassMappingSelectOption }): string =>
+        getMappingElementLabel(option.data.value, editorStore).value,
     });
     const classMappingOptions = uniq(
       getAllClassMappings(mappingEditorState.mapping)
@@ -164,7 +164,7 @@ export const ClassMappingSelectorModal = observer(
         >
           <ModalTitle title="Choose a class mapping" />
           <CustomSelectorInput
-            ref={classMappingSelectorRef}
+            inputRef={classMappingSelectorRef}
             options={classMappingOptions}
             onChange={changeClassMappingOption}
             value={null}

package/src/components/editor/editor-group/mapping-editor/MappingExecutionQueryBuilder.tsx

@@ -62,6 +62,9 @@ const MappingExecutionQueryBuilderSetupPanelContent = observer(
               className="panel__content__form__section__dropdown query-builder__setup__config-group__item__selector"
               disabled={true}
               options={[]}
+              onChange={() => {
+                // do nothing
+              }}
               value={selectedMappingOption}
               darkMode={
                 !applicationStore.layoutService

package/src/components/editor/editor-group/mapping-editor/MappingTestableEditor.tsx

@@ -365,7 +365,7 @@ const CreateTestModal = observer(
                   Mapped Class for which you would like to build test suite for
                 </div>
                 <CustomSelectorInput
-                  ref={mappedClassSelectorRef}
+                  inputRef={mappedClassSelectorRef}
                   options={mappedClassOptions}
                   onChange={changeClassOption}
                   value={selectedClassOption}
@@ -536,7 +536,7 @@ const CreateStoreTestDataModal = observer(
                 Store to add test data
               </div>
               <CustomSelectorInput
-                ref={mappedStoreRef}
+                inputRef={mappedStoreRef}
                 options={selectedStoreOptions}
                 onChange={changeStoreOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}

package/src/components/editor/editor-group/mapping-editor/NewMappingElementModal.tsx

@@ -88,11 +88,15 @@ export const NewMappingElementModal = observer(() => {
   const filterOption = createFilter({
     ignoreCase: true,
     ignoreAccents: false,
-    stringify: (option: PackageableElementOption<PackageableElement>): string =>
-      option.value.path,
+    stringify: (option: {
+      data: PackageableElementOption<PackageableElement>;
+    }): string => option.data.value.path,
   });
   const selectedOption = spec?.target
-    ? { label: spec.target.name, value: spec.target.path }
+    ? {
+        label: spec.target.name,
+        value: spec.target,
+      }
     : null;
   const handleTargetChange = (
     val: PackageableElementOption<PackageableElement> | null,
@@ -231,7 +235,7 @@ export const NewMappingElementModal = observer(() => {
           {titleText && <div className="modal__title">{titleText}</div>}
           {spec.showTarget && (
             <CustomSelectorInput
-              ref={targetSelectorRef}
+              inputRef={targetSelectorRef}
               options={options}
               filterOption={filterOption}
               onChange={handleTargetChange}
@@ -266,7 +270,7 @@ export const NewMappingElementModal = observer(() => {
             <>
               <PanelDivider />
               <CustomSelectorInput
-                ref={classMappingTypeSelectorRef}
+                inputRef={classMappingTypeSelectorRef}
                 options={classMappingTypeOptions}
                 onChange={changeClassMappingType}
                 value={classMappingType}

package/src/components/editor/editor-group/mapping-editor/OperationSetImplementationEditor.tsx

@@ -91,7 +91,8 @@ export const OperationSetImplementationEditor = observer(
       )
       .map((si) => ({ value: si, label: si.id.value }));
     const filterOption = createFilter({
-      stringify: (option: SetImplementationOption): string => option.label,
+      stringify: (option: { data: SetImplementationOption }): string =>
+        option.data.label,
     });
     const addParameter = (): void =>
       operationMapping_addParameter(
@@ -235,7 +236,7 @@ export const OperationSetImplementationEditor = observer(
                       onChange={changeParamater(param)}
                       filterOption={filterOption}
                       value={{
-                        value: param,
+                        value: param.setImplementation.value,
                         label: param.setImplementation.value.id.value,
                       }}
                       placeholder="Select parameter ID"

package/src/components/editor/editor-group/mapping-editor/PurePropertyMappingEditor.tsx

@@ -140,7 +140,6 @@ const EnumerationPropertyMappingEditor = observer(
       mappingEditorState.mapping,
       enumeration,
     ).map((em) => ({ value: em, label: em.id.value }));
-    const transformerLabel = propertyMapping.transformer?.valueForSerialization;
     const handleSelectionChange = (
       val: { label: string; value: EnumerationMapping } | null,
     ): void =>
@@ -197,7 +196,15 @@ const EnumerationPropertyMappingEditor = observer(
               disabled={options.length <= 1 || isReadOnly}
               options={options}
               onChange={handleSelectionChange}
-              value={{ value: transformerLabel, label: transformerLabel }}
+              value={
+                propertyMapping.transformer
+                  ? {
+                      label:
+                        propertyMapping.transformer.valueForSerialization ?? '',
+                      value: propertyMapping.transformer.value,
+                    }
+                  : null
+              }
               placeholder="Choose an existing enumeration mapping"
             />
             <button

package/src/components/editor/editor-group/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -106,7 +106,6 @@ const EnumerationPropertyMappingEditor = observer(
       mappingEditorState.mapping,
       enumeration,
     ).map((em) => ({ value: em, label: em.id.value }));
-    const transformerLabel = propertyMapping.transformer?.valueForSerialization;
     const handleSelectionChange = (
       val: { label: string; value: EnumerationMapping } | null,
     ): void =>
@@ -156,7 +155,15 @@ const EnumerationPropertyMappingEditor = observer(
               disabled={options.length <= 1 || isReadOnly}
               options={options}
               onChange={handleSelectionChange}
-              value={{ value: transformerLabel, label: transformerLabel }}
+              value={
+                propertyMapping.transformer
+                  ? {
+                      value: propertyMapping.transformer.value,
+                      label:
+                        propertyMapping.transformer.valueForSerialization ?? '',
+                    }
+                  : null
+              }
               placeholder="Choose an existing enumeration mapping"
             />
             <button

package/src/components/editor/editor-group/project-configuration-editor/ProjectDependencyEditor.tsx

@@ -896,12 +896,16 @@ const ProjectVersionDependencyEditor = observer(
       <div className="project-dependency-editor">
         <CustomSelectorInput
           className="project-dependency-editor__selector"
-          ref={projectSelectorRef}
+          inputRef={projectSelectorRef}
           disabled={projectDisabled}
           options={projectsOptions}
           isClearable={true}
           escapeClearsValue={true}
-          onChange={onProjectSelectionChange}
+          onChange={(val: ProjectOption | null) => {
+            onProjectSelectionChange(val).catch(
+              applicationStore.alertUnhandledError,
+            );
+          }}
           value={selectedProjectOption}
           isLoading={configState.fetchingProjectVersionsState.isInProgress}
           formatOptionLabel={formatOptionLabel}
@@ -911,7 +915,7 @@ const ProjectVersionDependencyEditor = observer(
         />
         <CustomSelectorInput
           className="project-dependency-editor__selector"
-          ref={versionSelectorRef}
+          inputRef={versionSelectorRef}
           options={versionOptions}
           isClearable={true}
           escapeClearsValue={true}

package/src/components/editor/editor-group/service-editor/BulkServiceRegistrationEditor.tsx

@@ -84,7 +84,7 @@ export const BulkServiceRegistrationEditor = observer(() => {
       }
     : null;
   const onServiceTypeSelectionChange = (
-    val: { label: ServiceExecutionMode; value: ServiceExecutionMode } | null,
+    val: { label: string; value: ServiceExecutionMode } | null,
   ): void => {
     globalBulkServiceRegistrationState.serviceConfigState.updateType(
       val?.value,

package/src/components/editor/editor-group/service-editor/ServiceEditor.tsx

@@ -479,7 +479,6 @@ const ServiceGeneralEditor = observer(() => {
                           <CustomSelectorInput
                             className="service-editor__owner__selector"
                             placeholder="Enter an owner..."
-                            spellCheck={false}
                             inputValue={searchText}
                             options={userOptions}
                             allowCreating={true}
@@ -638,7 +637,6 @@ const ServiceGeneralEditor = observer(() => {
                     <CustomSelectorInput
                       className="service-editor__owner__selector"
                       placeholder="Enter an owner..."
-                      spellCheck={false}
                       inputValue={searchText}
                       options={userOptions}
                       allowCreating={true}

package/src/components/editor/editor-group/service-editor/ServiceExecutionEditor.tsx

@@ -116,7 +116,7 @@ const PureExecutionContextConfigurationEditor = observer(
     const selectedMappingOption = {
       value: mapping,
       label: isMappingEmpty ? noMappingLabel : mapping.path,
-    };
+    } as PackageableElementOption<Mapping>;
     const onMappingSelectionChange = (
       val: PackageableElementOption<Mapping>,
     ): void => {
@@ -143,7 +143,7 @@ const PureExecutionContextConfigurationEditor = observer(
       ? []
       : ([{ label: customRuntimeLabel }] as {
           label: string | React.ReactNode;
-          value?: Runtime;
+          value: Runtime | undefined;
         }[]);
     // NOTE: for now, only include runtime associated with the mapping
     // TODO?: Should we bring the runtime compatibility check from query to here?
@@ -197,7 +197,7 @@ const PureExecutionContextConfigurationEditor = observer(
     };
     const onRuntimeSelectionChange = (val: {
       label: string | React.ReactNode;
-      value?: Runtime;
+      value: Runtime | undefined;
     }): void => {
       if (val.value === undefined) {
         pureExecutionState.useCustomRuntime();
@@ -280,7 +280,7 @@ const PureExecutionContextConfigurationEditor = observer(
                   !applicationStore.layoutService
                     .TEMPORARY__isLightColorThemeEnabled
                 }
-                hasError={isMappingEmpty}
+                hasError={Boolean(isMappingEmpty)}
               />
               <button
                 className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
@@ -406,7 +406,7 @@ export const ChangeExecutionModal = observer(
               !applicationStore.layoutService
                 .TEMPORARY__isLightColorThemeEnabled
             }
-            disable={isReadOnly}
+            disabled={isReadOnly}
           />
         );
       }