@finos/legend-application-studio 28.13.2 → 28.13.4

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

@@ -48,13 +48,10 @@ import {
   PanelContent,
   PanelDnDEntry,
   Dialog,
-  ModalHeader,
   ModalBody,
   ModalFooter,
-  ModalTitle,
   CaretDownIcon,
   DropdownMenu,
-  LaunchIcon,
   BlankPanelContent,
   MenuContent,
   MenuContentItem,
@@ -100,9 +97,6 @@ import {
   stub_RawVariableExpression,
   getFunctionNameWithPath,
   getFunctionSignature,
-  generateFunctionPrettyName,
-  extractAnnotatedElementDocumentation,
-  getClassProperty,
   RawExecutionResult,
   extractExecutionResultValues,
   RawLambda,
@@ -149,14 +143,13 @@ import {
 } from '@finos/legend-query-builder';
 import type { EditorStore } from '../../../../stores/editor/EditorStore.js';
 import { graph_renameElement } from '../../../../stores/graph-modifier/GraphModifierHelper.js';
-import { ProtocolValueBuilder } from '../ProtocolValueBuilder.js';
-import type { ProtocolValueBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/ProtocolValueBuilderState.js';
 import {
   CODE_EDITOR_LANGUAGE,
   CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { PanelGroupItemExperimentalBadge } from '../../panel-group/PanelGroup.js';
-import type { FunctionActivatorPromoteState } from '../../../../stores/editor/editor-state/element-editor-state/FunctionActivatorPromoteState.js';
+import type { FunctionActivatorState } from '../../../../stores/editor/editor-state/element-editor-state/FunctionActivatorState.js';
+import { FunctionTestableEditor } from './testable/FunctionTestableEditor.js';
 
 enum FUNCTION_PARAMETER_TYPE {
   CLASS = 'CLASS',
@@ -164,7 +157,7 @@ enum FUNCTION_PARAMETER_TYPE {
   PRIMITIVE = 'PRIMITIVE',
 }
 
-export enum FUNCTION_PROMOTE_TYPE {
+export enum FUNCTION_ACTIVATE_TYPE {
   SNOWFLAKE_NATIVE_APP = 'Snowflake Native App',
   REST_SERVICE = 'REST Service',
   SERVICE_JAR = 'Service JAR',
@@ -680,7 +673,7 @@ const ReturnTypeEditor = observer(
 const FunctionPromoteEditor = observer(
   (props: {
     functionElement: ConcreteFunctionDefinition;
-    activatorPromoteState: FunctionActivatorPromoteState;
+    activatorPromoteState: FunctionActivatorState;
   }) => {
     const { functionElement, activatorPromoteState } = props;
     const applicationStore = useApplicationStore();
@@ -692,13 +685,13 @@ const FunctionPromoteEditor = observer(
         : undefined;
     let validationMessage = '';
     const closeModal = (): void => {
-      activatorPromoteState.closeFunctionPromoteModal();
-      activatorPromoteState.setPromoteType(undefined);
+      activatorPromoteState.closeFunctionActivateModal();
+      activatorPromoteState.setAcitvateType(undefined);
     };
     const promoteFunction = (): void => {
-      flowResult(activatorPromoteState.promote(functionElement))
+      flowResult(activatorPromoteState.activate(functionElement))
         .then(() => {
-          activatorPromoteState.closeFunctionPromoteModal();
+          activatorPromoteState.closeFunctionActivateModal();
         })
         .catch(applicationStore.alertUnhandledError);
     };
@@ -709,7 +702,7 @@ const FunctionPromoteEditor = observer(
     };
     const validateFunctionActivator = (type: string): boolean => {
       switch (type) {
-        case FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP: {
+        case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP: {
           const availableConnections =
             activatorPromoteState.functionEditorState.editorStore.graphManagerState.usableConnections.filter(
               (connection) =>
@@ -731,77 +724,77 @@ const FunctionPromoteEditor = observer(
     };
     const renderFunctionPromoteTypes = (type: string): React.ReactNode => {
       switch (type) {
-        case FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP:
+        case FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP:
           return (
             <BaseCard
-              key={FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP}
+              key={FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP}
               cardMedia={
                 <Snowflake_BrandIcon className="function-promote-editor__type-icon" />
               }
               cardName={type}
               cardContent="Deploy the function as a UDTF(user-defined table function) in snowflake"
               isActive={
-                activatorPromoteState.promoteType ===
-                FUNCTION_PROMOTE_TYPE.SNOWFLAKE_NATIVE_APP
+                activatorPromoteState.activateType ===
+                FUNCTION_ACTIVATE_TYPE.SNOWFLAKE_NATIVE_APP
               }
               onClick={() => {
-                activatorPromoteState.setPromoteType(type);
+                activatorPromoteState.setAcitvateType(type);
               }}
             />
           );
-        case FUNCTION_PROMOTE_TYPE.REST_SERVICE:
+        case FUNCTION_ACTIVATE_TYPE.REST_SERVICE:
           return (
             <BaseCard
-              key={FUNCTION_PROMOTE_TYPE.REST_SERVICE}
+              key={FUNCTION_ACTIVATE_TYPE.REST_SERVICE}
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Create a HostedService that will be deployed to a server environment and executed with a pattern"
               isDisable={true}
               isActive={
-                activatorPromoteState.promoteType ===
-                FUNCTION_PROMOTE_TYPE.REST_SERVICE
+                activatorPromoteState.activateType ===
+                FUNCTION_ACTIVATE_TYPE.REST_SERVICE
               }
             />
           );
-        case FUNCTION_PROMOTE_TYPE.SERVICE_JAR:
+        case FUNCTION_ACTIVATE_TYPE.SERVICE_JAR:
           return (
             <BaseCard
-              key={FUNCTION_PROMOTE_TYPE.SERVICE_JAR}
+              key={FUNCTION_ACTIVATE_TYPE.SERVICE_JAR}
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Deploy the function in the definition of a Store persistence"
               isDisable={true}
               isActive={
-                activatorPromoteState.promoteType ===
-                FUNCTION_PROMOTE_TYPE.SERVICE_JAR
+                activatorPromoteState.activateType ===
+                FUNCTION_ACTIVATE_TYPE.SERVICE_JAR
               }
             />
           );
-        case FUNCTION_PROMOTE_TYPE.REFINER:
+        case FUNCTION_ACTIVATE_TYPE.REFINER:
           return (
             <BaseCard
-              key={FUNCTION_PROMOTE_TYPE.REFINER}
+              key={FUNCTION_ACTIVATE_TYPE.REFINER}
               cardMedia={<div className="coming-soon-label">Coming Soon</div>}
               cardName={type}
               cardContent="Use the service in a refiner context"
               isDisable={true}
               isActive={
-                activatorPromoteState.promoteType ===
-                FUNCTION_PROMOTE_TYPE.REFINER
+                activatorPromoteState.activateType ===
+                FUNCTION_ACTIVATE_TYPE.REFINER
               }
             />
           );
-        case FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP:
+        case FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP:
           return (
             <BaseCard
-              key={FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP}
+              key={FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP}
               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}
               isActive={
-                activatorPromoteState.promoteType ===
-                FUNCTION_PROMOTE_TYPE.BIG_QUERY_NATIVE_APP
+                activatorPromoteState.activateType ===
+                FUNCTION_ACTIVATE_TYPE.BIG_QUERY_NATIVE_APP
               }
             />
           );
@@ -812,7 +805,7 @@ const FunctionPromoteEditor = observer(
 
     return (
       <Dialog
-        open={activatorPromoteState.isPromotingFunction}
+        open={activatorPromoteState.isActivatingFunction}
         onClose={closeModal}
         classes={{ container: 'search-modal__container' }}
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
@@ -823,7 +816,7 @@ const FunctionPromoteEditor = observer(
               Select any one of the following activator types to continue
             </div>
             <div className="function-promote-editor__content__activator-types">
-              {Object.values(FUNCTION_PROMOTE_TYPE).map((type) =>
+              {Object.values(FUNCTION_ACTIVATE_TYPE).map((type) =>
                 renderFunctionPromoteTypes(type),
               )}
             </div>
@@ -850,18 +843,18 @@ const FunctionPromoteEditor = observer(
             <ModalFooterButton
               className=" function-promote-editor__action-btn function-promote-editor__action-btn--primitive"
               disabled={
-                !activatorPromoteState.promoteType ||
-                !validateFunctionActivator(activatorPromoteState.promoteType)
+                !activatorPromoteState.activateType ||
+                !validateFunctionActivator(activatorPromoteState.activateType)
               }
               title={
-                activatorPromoteState.promoteType &&
-                validateFunctionActivator(activatorPromoteState.promoteType)
+                activatorPromoteState.activateType &&
+                validateFunctionActivator(activatorPromoteState.activateType)
                   ? ''
                   : validationMessage
               }
               onClick={promoteFunction}
             >
-              Promote
+              Activate
             </ModalFooterButton>
           </ModalFooter>
         </Modal>
@@ -1060,91 +1053,6 @@ const FunctionDefinitionEditor = observer(
   },
 );
 
-const FunctionActivatorContentBuilder = observer(
-  (props: {
-    functionEditorState: FunctionEditorState;
-    valueBuilderState: ProtocolValueBuilderState;
-  }) => {
-    const { functionEditorState, valueBuilderState } = props;
-    const builderState = functionEditorState.activatorBuilderState;
-
-    // name
-    const nameInputRef = useRef<HTMLInputElement>(null);
-    const nameValidationErrorMessage =
-      builderState.activatorName.length === 0
-        ? 'Element name cannot be empty'
-        : builderState.isDuplicated
-        ? `Element of the same path already existed`
-        : undefined;
-    useEffect(() => {
-      nameInputRef.current?.focus();
-      nameInputRef.current?.select();
-    }, [valueBuilderState]);
-
-    // function
-    const functionFieldProperty = returnUndefOnError(() =>
-      getClassProperty(valueBuilderState.type, 'function'),
-    );
-    const functionFieldDocumentation = functionFieldProperty
-      ? extractAnnotatedElementDocumentation(functionFieldProperty)
-      : undefined;
-
-    return (
-      <>
-        <div className="panel__content__form">
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__header__label">
-              Name
-            </div>
-            <div className="input-group">
-              <input
-                className="panel__content__form__section__input"
-                spellCheck={false}
-                ref={nameInputRef}
-                value={builderState.activatorName}
-                onChange={(event) =>
-                  builderState.setActivatorName(event.target.value)
-                }
-              />
-              {nameValidationErrorMessage && (
-                <div className="input-group__error-message">
-                  {nameValidationErrorMessage}
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__header__label">
-              Function
-            </div>
-            {functionFieldDocumentation && (
-              <div className="panel__content__form__section__header__prompt">
-                {functionFieldDocumentation}
-              </div>
-            )}
-            <input
-              className="panel__content__form__section__input"
-              spellCheck={false}
-              disabled={true}
-              value={generateFunctionPrettyName(
-                functionEditorState.functionElement,
-                {
-                  fullPath: true,
-                  spacing: false,
-                },
-              )}
-            />
-          </div>
-          <div className="panel__content__form__section">
-            <div className="panel__content__form__section__divider"></div>
-          </div>
-        </div>
-        <ProtocolValueBuilder builderState={valueBuilderState} />
-      </>
-    );
-  },
-);
-
 export const FunctionEditor = observer(() => {
   const editorStore = useEditorStore();
   const applicationStore = useApplicationStore();
@@ -1245,12 +1153,6 @@ export const FunctionEditor = observer(() => {
     (): void =>
       functionEditorState.setSelectedTab(tab);
 
-  const activate = (): void => {
-    flowResult(functionEditorState.activatorBuilderState.activate()).catch(
-      applicationStore.alertUnhandledError,
-    );
-  };
-
   const runFunc = applicationStore.guardUnhandledError(() =>
     flowResult(functionEditorState.handleRunFunc()),
   );
@@ -1368,10 +1270,15 @@ export const FunctionEditor = observer(() => {
       }
     });
 
-  const openFunctionPromoteModal = (): void => {
-    functionEditorState.activatorPromoteState.showFunctionPromoteModal();
+  const openFunctionActivateModal = (): void => {
+    functionEditorState.activatorPromoteState.showFunctionActivateModal();
   };
-
+  // tabs
+  const functionTabs = Object.values(FUNCTION_EDITOR_TAB).filter(
+    (val) =>
+      val !== FUNCTION_EDITOR_TAB.TEST_SUITES ||
+      editorStore.applicationStore.config.options.NonProductionFeatureFlag,
+  );
   return (
     <div
       data-testid={LEGEND_STUDIO_TEST_ID.FUNCTION_EDITOR}
@@ -1393,7 +1300,7 @@ export const FunctionEditor = observer(() => {
         </div>
         <div className="panel__header function-editor__tabs__header">
           <div className="function-editor__tabs">
-            {Object.values(FUNCTION_EDITOR_TAB).map((tab) => (
+            {functionTabs.map((tab) => (
               <div
                 key={tab}
                 onClick={changeTab(tab)}
@@ -1406,220 +1313,97 @@ export const FunctionEditor = observer(() => {
             ))}
           </div>
           <div className="panel__header__actions">
-            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              <button
-                className="btn__dropdown-combo__label"
-                onClick={editWithQueryBuilder()}
-                title="Edit Query"
-                tabIndex={-1}
-              >
-                <PencilIcon className="btn__dropdown-combo__label__icon" />
-                <div className="btn__dropdown-combo__label__title">Edit</div>
-              </button>
-            </div>
-            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              {functionEditorState.isRunningFunc ? (
-                <button
-                  className="btn__dropdown-combo__canceler"
-                  onClick={cancelQuery}
-                  tabIndex={-1}
-                >
-                  <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
-                    <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
-                    <div className="btn__dropdown-combo__canceler__label__title">
-                      Stop
-                    </div>
-                  </div>
-                </button>
-              ) : (
-                <>
+            {selectedTab === FUNCTION_EDITOR_TAB.DEFINITION && (
+              <>
+                <div className="btn__dropdown-combo btn__dropdown-combo--primary">
                   <button
                     className="btn__dropdown-combo__label"
-                    onClick={runFunc}
-                    title="Run Function"
-                    disabled={executionIsRunning}
+                    onClick={editWithQueryBuilder()}
+                    title="Edit Query"
                     tabIndex={-1}
                   >
-                    <PlayIcon className="btn__dropdown-combo__label__icon" />
-                    <div className="btn__dropdown-combo__label__title">Run</div>
+                    <PencilIcon className="btn__dropdown-combo__label__icon" />
+                    <div className="btn__dropdown-combo__label__title">
+                      Edit
+                    </div>
                   </button>
-                  <DropdownMenu
-                    className="btn__dropdown-combo__dropdown-btn"
-                    disabled={executionIsRunning}
-                    content={
-                      <MenuContent>
-                        <MenuContentItem
-                          className="btn__dropdown-combo__option"
-                          onClick={generatePlan}
-                        >
-                          Generate Plan
-                        </MenuContentItem>
-                        <MenuContentItem
-                          className="btn__dropdown-combo__option"
-                          onClick={debugPlanGeneration}
-                        >
-                          Debug
-                        </MenuContentItem>
-                      </MenuContent>
-                    }
-                    menuProps={{
-                      anchorOrigin: {
-                        vertical: 'bottom',
-                        horizontal: 'right',
-                      },
-                      transformOrigin: {
-                        vertical: 'top',
-                        horizontal: 'right',
-                      },
-                    }}
+                </div>
+                <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                  {functionEditorState.isRunningFunc ? (
+                    <button
+                      className="btn__dropdown-combo__canceler"
+                      onClick={cancelQuery}
+                      tabIndex={-1}
+                    >
+                      <div className="btn--dark btn--caution btn__dropdown-combo__canceler__label">
+                        <PauseCircleIcon className="btn__dropdown-combo__canceler__label__icon" />
+                        <div className="btn__dropdown-combo__canceler__label__title">
+                          Stop
+                        </div>
+                      </div>
+                    </button>
+                  ) : (
+                    <>
+                      <button
+                        className="btn__dropdown-combo__label"
+                        onClick={runFunc}
+                        title="Run Function"
+                        disabled={executionIsRunning}
+                        tabIndex={-1}
+                      >
+                        <PlayIcon className="btn__dropdown-combo__label__icon" />
+                        <div className="btn__dropdown-combo__label__title">
+                          Run
+                        </div>
+                      </button>
+                      <DropdownMenu
+                        className="btn__dropdown-combo__dropdown-btn"
+                        disabled={executionIsRunning}
+                        content={
+                          <MenuContent>
+                            <MenuContentItem
+                              className="btn__dropdown-combo__option"
+                              onClick={generatePlan}
+                            >
+                              Generate Plan
+                            </MenuContentItem>
+                            <MenuContentItem
+                              className="btn__dropdown-combo__option"
+                              onClick={debugPlanGeneration}
+                            >
+                              Debug
+                            </MenuContentItem>
+                          </MenuContent>
+                        }
+                        menuProps={{
+                          anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                          },
+                          transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                          },
+                        }}
+                      >
+                        <CaretDownIcon />
+                      </DropdownMenu>
+                    </>
+                  )}
+                </div>
+                <div className="btn__dropdown-combo btn__dropdown-combo--primary">
+                  <button
+                    className="btn__dropdown-combo__label"
+                    onClick={openFunctionActivateModal}
+                    title="Activate function"
+                    tabIndex={-1}
                   >
-                    <CaretDownIcon />
-                  </DropdownMenu>
-                </>
-              )}
-            </div>
-            <div className="btn__dropdown-combo btn__dropdown-combo--primary">
-              <button
-                className="btn__dropdown-combo__label"
-                onClick={openFunctionPromoteModal}
-                title="Promote function"
-                tabIndex={-1}
-              >
-                <RocketIcon className="btn__dropdown-combo__label__icon" />
-                <div className="btn__dropdown-combo__label__title">Promote</div>
-              </button>
-            </div>
-            {editorStore.applicationStore.config.options
-              .TEMPORARY__enableFunctionActivatorSupport && (
-              <>
-                <DropdownMenu
-                  className="btn__dropdown-combo"
-                  disabled={
-                    !editorStore.graphState.functionActivatorConfigurations
-                      .length
-                  }
-                  content={
-                    <MenuContent>
-                      {editorStore.graphState.functionActivatorConfigurations.map(
-                        (config) => (
-                          <MenuContentItem
-                            key={config.uuid}
-                            className="function-editor__activator__selector__option"
-                            onClick={() =>
-                              functionEditorState.activatorBuilderState.setCurrentActivatorConfiguration(
-                                config,
-                              )
-                            }
-                            title={config.description}
-                          >
-                            <div className="function-editor__activator__selector__option__name">
-                              {config.name}
-                            </div>
-                            <div className="function-editor__activator__selector__option__description">
-                              {config.description}
-                            </div>
-                          </MenuContentItem>
-                        ),
-                      )}
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                    transformOrigin: { vertical: 'top', horizontal: 'right' },
-                  }}
-                >
-                  <div className="btn__dropdown-combo__label">
-                    <div className="btn__dropdown-combo__label__icon">
-                      <LaunchIcon />
-                    </div>
+                    <RocketIcon className="btn__dropdown-combo__label__icon" />
                     <div className="btn__dropdown-combo__label__title">
                       Activate
                     </div>
-                  </div>
-                  <div className="btn__dropdown-combo__dropdown-btn">
-                    <CaretDownIcon />
-                  </div>
-                </DropdownMenu>
-                {functionEditorState.activatorBuilderState
-                  .currentActivatorConfiguration && (
-                  <Dialog
-                    open={Boolean(
-                      functionEditorState.activatorBuilderState
-                        .currentActivatorConfiguration,
-                    )}
-                    onClose={() =>
-                      functionEditorState.activatorBuilderState.setCurrentActivatorConfiguration(
-                        undefined,
-                      )
-                    }
-                    classes={{
-                      root: 'editor-modal__root-container',
-                      container: 'editor-modal__container',
-                      paper: 'editor-modal__content',
-                    }}
-                    // NOTE: this is a safer way compared to using <form> as it will not trigger click event
-                    // on nested button
-                    // See https://stackoverflow.com/questions/11353105/why-browser-trigger-a-click-event-instead-of-a-submit-in-a-form
-                    // See https://stackoverflow.com/questions/3350247/how-to-prevent-form-from-being-submitted
-                    // See https://gomakethings.com/how-to-prevent-buttons-from-causing-a-form-to-submit-with-html/
-                    onKeyDown={(event) => {
-                      if (event.code === 'Enter' && !event.shiftKey) {
-                        event.preventDefault();
-                        activate();
-                      }
-                    }}
-                  >
-                    <Modal darkMode={true} className="editor-modal">
-                      <ModalHeader>
-                        <ModalTitle
-                          title={`Function Activator: ${functionEditorState.activatorBuilderState.currentActivatorConfiguration.name}`}
-                        />
-                      </ModalHeader>
-                      <ModalBody>
-                        <div className="function-editor__activator-builder">
-                          {functionEditorState.activatorBuilderState
-                            .functionActivatorProtocolValueBuilderState && (
-                            <FunctionActivatorContentBuilder
-                              functionEditorState={functionEditorState}
-                              valueBuilderState={
-                                functionEditorState.activatorBuilderState
-                                  .functionActivatorProtocolValueBuilderState
-                              }
-                            />
-                          )}
-                          {!functionEditorState.activatorBuilderState
-                            .functionActivatorProtocolValueBuilderState && (
-                            <BlankPanelContent>
-                              No activator chosen
-                            </BlankPanelContent>
-                          )}
-                        </div>
-                      </ModalBody>
-                      <ModalFooter>
-                        <button
-                          className="btn btn--dark function-editor__activator__btn"
-                          type="submit"
-                          disabled={
-                            !functionEditorState.activatorBuilderState.isValid
-                          }
-                          onClick={activate}
-                        >
-                          Activate
-                        </button>
-                        <button
-                          className="btn btn--dark"
-                          onClick={() =>
-                            functionEditorState.activatorBuilderState.setCurrentActivatorConfiguration(
-                              undefined,
-                            )
-                          }
-                        >
-                          Close
-                        </button>
-                      </ModalFooter>
-                    </Modal>
-                  </Dialog>
-                )}
+                  </button>
+                </div>
               </>
             )}
             <button
@@ -1684,6 +1468,13 @@ export const FunctionEditor = observer(() => {
               ))}
             </div>
           )}
+          {selectedTab === FUNCTION_EDITOR_TAB.TEST_SUITES && (
+            <FunctionTestableEditor
+              functionTestableState={
+                functionEditorState.functionTestableEditorState
+              }
+            />
+          )}
           <ExecutionPlanViewer
             executionPlanState={functionEditorState.executionPlanState}
           />
@@ -1699,7 +1490,7 @@ export const FunctionEditor = observer(() => {
             />
           )}
         </PanelContent>
-        {functionEditorState.activatorPromoteState.isPromotingFunction && (
+        {functionEditorState.activatorPromoteState.isActivatingFunction && (
           <FunctionPromoteEditor
             functionElement={functionElement}
             activatorPromoteState={functionEditorState.activatorPromoteState}