@finos/legend-application-studio 13.0.0

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

@@ -0,0 +1,889 @@
+/**
+ * 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 { useEffect, useCallback, useState, forwardRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ServiceEditorState } from '../../../../stores/editor-state/element-editor-state/service/ServiceEditorState.js';
+import {
+  type ServiceExecutionContextState,
+  SingleServicePureExecutionState,
+  ServicePureExecutionState,
+  MultiServicePureExecutionState,
+} from '../../../../stores/editor-state/element-editor-state/service/ServiceExecutionState.js';
+import { EmbeddedRuntimeEditor } from '../../../editor/edit-panel/RuntimeEditor.js';
+import { useDrop } from 'react-dnd';
+import {
+  CORE_DND_TYPE,
+  type ElementDragSource,
+  type UMLEditorElementDropTarget,
+} from '../../../../stores/shared/DnDUtil.js';
+import { UnsupportedEditorPanel } from '../../../editor/edit-panel/UnsupportedElementEditor.js';
+import {
+  clsx,
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizablePanelSplitter,
+  ResizablePanelSplitterLine,
+  PURE_MappingIcon,
+  PURE_RuntimeIcon,
+  ErrorIcon,
+  CogIcon,
+  LongArrowRightIcon,
+  ExclamationTriangleIcon,
+  CustomSelectorInput,
+  ContextMenu,
+  KeyIcon,
+  MenuContent,
+  MenuContentItem,
+  Dialog,
+  InputWithInlineValidation,
+  BlankPanelPlaceholder,
+  HouseKeys,
+  PlusIcon,
+  ArrowsJoinIcon,
+  ArrowsSplitIcon,
+} from '@finos/legend-art';
+import { ServiceExecutionQueryEditor } from '../../../editor/edit-panel/service-editor/ServiceExecutionQueryEditor.js';
+import { useEditorStore } from '../../EditorStoreProvider.js';
+import {
+  type KeyedExecutionParameter,
+  type Runtime,
+  Mapping,
+  RuntimePointer,
+  PackageableRuntime,
+  PackageableElementExplicitReference,
+  validate_PureExecutionMapping,
+} from '@finos/legend-graph';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import type { PackageableElementOption } from '@finos/legend-application';
+
+const PureExecutionContextConfigurationEditor = observer(
+  (props: {
+    pureExecutionState: ServicePureExecutionState;
+    executionContextState: ServiceExecutionContextState;
+  }) => {
+    const { executionContextState, pureExecutionState } = props;
+    const executionContext = executionContextState.executionContext;
+    const editorStore = useEditorStore();
+    const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+    const isReadOnly = serviceState.isReadOnly;
+    // mapping
+    // TODO: this is not generic error handling, as there could be other problems
+    // with mapping, we need to genericize this
+    const isMappingEmpty = validate_PureExecutionMapping(
+      executionContext.mapping.value,
+    );
+    const mapping = executionContext.mapping.value;
+    const mappingOptions = editorStore.mappingOptions;
+    const noMappingLabel = (
+      <div
+        className="service-execution-editor__configuration__mapping-option--empty"
+        title={isMappingEmpty?.messages.join('\n') ?? ''}
+      >
+        <div className="service-execution-editor__configuration__mapping-option--empty__label">
+          (none)
+        </div>
+        <ErrorIcon />
+      </div>
+    );
+    const selectedMappingOption = {
+      value: mapping,
+      label: isMappingEmpty ? noMappingLabel : mapping.path,
+    };
+    const onMappingSelectionChange = (
+      val: PackageableElementOption<Mapping>,
+    ): void => {
+      if (val.value !== mapping) {
+        executionContextState.setMapping(val.value);
+        pureExecutionState.autoSelectRuntimeOnMappingChange(val.value);
+      }
+    };
+    const visitMapping = (): void => editorStore.openElement(mapping);
+    // runtime
+    const runtime = executionContext.runtime;
+    const isRuntimePointer = runtime instanceof RuntimePointer;
+    const customRuntimeLabel = (
+      <div className="service-execution-editor__configuration__runtime-option--custom">
+        <CogIcon />
+        <div className="service-execution-editor__configuration__runtime-option--custom__label">
+          (custom)
+        </div>
+      </div>
+    );
+    // only show custom runtime option when a runtime pointer is currently selected
+    let runtimeOptions = !isRuntimePointer
+      ? []
+      : ([{ label: customRuntimeLabel }] as {
+          label: string | React.ReactNode;
+          value?: Runtime;
+        }[]);
+    // NOTE: for now, only include runtime associated with the mapping
+    // TODO?: Should we bring the runtime compatibility check from query to here?
+    const runtimes = editorStore.graphManagerState.graph.runtimes.filter((rt) =>
+      rt.runtimeValue.mappings.map((m) => m.value).includes(mapping),
+    );
+    runtimeOptions = runtimeOptions.concat(
+      runtimes.map((rt) => ({
+        label: rt.path,
+        value: new RuntimePointer(
+          PackageableElementExplicitReference.create(rt),
+        ),
+      })),
+    );
+    const runtimePointerWarning =
+      runtime instanceof RuntimePointer &&
+      !runtimes.includes(runtime.packageableRuntime.value) // if the runtime does not belong to the chosen mapping
+        ? `runtime is not associated with specified mapping '${mapping.path}'`
+        : undefined;
+    const selectedRuntimeOption = {
+      value: runtime,
+      label:
+        runtime instanceof RuntimePointer ? (
+          <div
+            className="service-execution-editor__configuration__runtime-option__pointer"
+            title={undefined}
+          >
+            <div
+              className={clsx(
+                'service-execution-editor__configuration__runtime-option__pointer__label',
+                {
+                  'service-execution-editor__configuration__runtime-option__pointer__label--with-warning':
+                    Boolean(runtimePointerWarning),
+                },
+              )}
+            >
+              {runtime.packageableRuntime.value.path}
+            </div>
+            {runtimePointerWarning && (
+              <div
+                className="service-execution-editor__configuration__runtime-option__pointer__warning"
+                title={runtimePointerWarning}
+              >
+                <ExclamationTriangleIcon />
+              </div>
+            )}
+          </div>
+        ) : (
+          customRuntimeLabel
+        ),
+    };
+    const onRuntimeSelectionChange = (val: {
+      label: string | React.ReactNode;
+      value?: Runtime;
+    }): void => {
+      if (val.value === undefined) {
+        pureExecutionState.useCustomRuntime();
+      } else if (val.value !== runtime) {
+        executionContextState.setRuntime(val.value);
+      }
+    };
+    const visitRuntime = (): void => {
+      if (runtime instanceof RuntimePointer) {
+        editorStore.openElement(runtime.packageableRuntime.value);
+      }
+    };
+    const openRuntimeEditor = (): void =>
+      pureExecutionState.openRuntimeEditor();
+    // DnD
+    const handleMappingOrRuntimeDrop = useCallback(
+      (item: UMLEditorElementDropTarget): void => {
+        const element = item.data.packageableElement;
+        if (!isReadOnly) {
+          if (element instanceof Mapping) {
+            executionContextState.setMapping(element);
+            pureExecutionState.autoSelectRuntimeOnMappingChange(element);
+          } else if (
+            element instanceof PackageableRuntime &&
+            element.runtimeValue.mappings.map((m) => m.value).includes(mapping)
+          ) {
+            executionContextState.setRuntime(
+              new RuntimePointer(
+                PackageableElementExplicitReference.create(element),
+              ),
+            );
+          }
+        }
+      },
+      [isReadOnly, mapping, executionContextState, pureExecutionState],
+    );
+    const [{ isMappingOrRuntimeDragOver }, dropMappingOrRuntimeRef] = useDrop(
+      () => ({
+        accept: [
+          CORE_DND_TYPE.PROJECT_EXPLORER_MAPPING,
+          CORE_DND_TYPE.PROJECT_EXPLORER_RUNTIME,
+        ],
+        drop: (item: ElementDragSource): void =>
+          handleMappingOrRuntimeDrop(item),
+        collect: (monitor): { isMappingOrRuntimeDragOver: boolean } => ({
+          isMappingOrRuntimeDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleMappingOrRuntimeDrop],
+    );
+    // close runtime editor as we leave service editor
+    useEffect(
+      () => (): void => pureExecutionState.closeRuntimeEditor(),
+      [executionContextState, pureExecutionState],
+    );
+
+    return (
+      <div
+        ref={dropMappingOrRuntimeRef}
+        className="panel__content dnd__overlay__container"
+      >
+        <div
+          className={clsx({
+            dnd__overlay: isMappingOrRuntimeDragOver && !isReadOnly,
+          })}
+        />
+        <div className="service-execution-editor__configuration__items">
+          <div className="service-execution-editor__configuration__item">
+            <div className="btn--sm service-execution-editor__configuration__item__label">
+              <PURE_MappingIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+              disabled={isReadOnly}
+              options={mappingOptions}
+              onChange={onMappingSelectionChange}
+              value={selectedMappingOption}
+              darkMode={true}
+              hasError={isMappingEmpty}
+            />
+            <button
+              className="btn--dark btn--sm service-execution-editor__configuration__item__btn"
+              onClick={visitMapping}
+              tabIndex={-1}
+              title={'See mapping'}
+            >
+              <LongArrowRightIcon />
+            </button>
+          </div>
+          <div className="service-execution-editor__configuration__item">
+            <div className="btn--sm service-execution-editor__configuration__item__label">
+              <PURE_RuntimeIcon />
+            </div>
+            <CustomSelectorInput
+              className="panel__content__form__section__dropdown service-execution-editor__configuration__item__dropdown"
+              disabled={isReadOnly}
+              options={runtimeOptions}
+              onChange={onRuntimeSelectionChange}
+              value={selectedRuntimeOption}
+              darkMode={true}
+            />
+            {!isRuntimePointer && (
+              <button
+                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                disabled={Boolean(isReadOnly || isMappingEmpty)}
+                onClick={openRuntimeEditor}
+                tabIndex={-1}
+                title={isReadOnly ? 'See runtime' : 'Configure custom runtime'}
+              >
+                <CogIcon />
+              </button>
+            )}
+            {isRuntimePointer && (
+              <button
+                className="btn--sm btn--dark service-execution-editor__configuration__item__btn"
+                onClick={visitRuntime}
+                tabIndex={-1}
+                title={'See runtime'}
+              >
+                <LongArrowRightIcon />
+              </button>
+            )}
+            <EmbeddedRuntimeEditor
+              runtimeEditorState={pureExecutionState.runtimeEditorState}
+              isReadOnly={serviceState.isReadOnly}
+              onClose={(): void => pureExecutionState.closeRuntimeEditor()}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export const ChangeExecutionModal = observer(
+  (props: {
+    executionState: ServicePureExecutionState;
+    isReadOnly: boolean;
+  }) => {
+    const { executionState, isReadOnly } = props;
+    const closeModal = (): void => executionState.setShowChangeExecModal(false);
+    const isChangingToMulti =
+      executionState instanceof SingleServicePureExecutionState;
+    const handleSubmit = (): void => {
+      executionState.changeExecution();
+      closeModal();
+    };
+    const renderChangeExecution = (): React.ReactNode => {
+      if (executionState instanceof SingleServicePureExecutionState) {
+        const keyValue = executionState.multiExecutionKey;
+        const validationMessage =
+          keyValue === '' ? `Key value can't be empty` : undefined;
+
+        const onChange: React.ChangeEventHandler<HTMLInputElement> = (
+          event,
+        ) => {
+          executionState.setMultiExecutionKey(event.target.value);
+        };
+        return (
+          <InputWithInlineValidation
+            className="service-execution-editor__input input-group__input"
+            spellCheck={false}
+            value={keyValue}
+            onChange={onChange}
+            placeholder={`Multi Execution Key Name`}
+            validationErrorMessage={validationMessage}
+          />
+        );
+      } else if (executionState instanceof MultiServicePureExecutionState) {
+        const multiExec = executionState.execution;
+        const currentOption = executionState.singleExecutionKey
+          ? {
+              value: executionState.singleExecutionKey,
+              label: executionState.singleExecutionKey.key,
+            }
+          : undefined;
+        const multiOptions = multiExec.executionParameters.map(
+          (keyExecutionParameter) => ({
+            value: keyExecutionParameter,
+            label: keyExecutionParameter.key,
+          }),
+        );
+        const _onChange = (
+          val: { label: string; value: KeyedExecutionParameter } | null,
+        ): void => {
+          if (val === null) {
+            executionState.setSingleExecutionKey(undefined);
+          } else if (val.value !== currentOption?.value) {
+            executionState.setSingleExecutionKey(val.value);
+          }
+        };
+        return (
+          <CustomSelectorInput
+            className="panel__content__form__section__dropdown"
+            options={multiOptions}
+            onChange={_onChange}
+            value={currentOption}
+            escapeClearsValue={true}
+            darkMode={true}
+            disable={isReadOnly}
+          />
+        );
+      }
+      return null;
+    };
+    return (
+      <Dialog
+        open={executionState.showChangeExecModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="modal modal--dark search-modal"
+        >
+          <div className="modal__title">
+            Change to {`${isChangingToMulti ? ' multi ' : ' single '}`}{' '}
+            execution
+          </div>
+          <div className="service-execution-editor__change__modal">
+            {renderChangeExecution()}
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              disabled={
+                isReadOnly || executionState.isChangeExecutionDisabled()
+              }
+            >
+              Change
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+const PureSingleExecutionEditor = observer(
+  (props: { singleExecutionState: SingleServicePureExecutionState }) => {
+    const { singleExecutionState } = props;
+    // close runtime editor as we leave service editor
+    useEffect(
+      () => (): void => singleExecutionState.closeRuntimeEditor(),
+      [singleExecutionState],
+    );
+
+    return (
+      <div className="service-execution-editor__execution">
+        <div className="panel">
+          <div className="panel__content service-editor__content">
+            <PureExecutionContextConfigurationEditor
+              pureExecutionState={singleExecutionState}
+              executionContextState={
+                singleExecutionState.selectedExecutionContextState
+              }
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+const KeyExecutionContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      multiExecutionState: MultiServicePureExecutionState;
+      keyExecutionParameter: KeyedExecutionParameter;
+      isReadOnly: boolean;
+    }
+  >(function TestContainerContextMenu(props, ref) {
+    const { multiExecutionState, keyExecutionParameter } = props;
+    const rename = (): void => {
+      multiExecutionState.setRenameKey(keyExecutionParameter);
+    };
+    const remove = (): void => {
+      multiExecutionState.deleteKeyExecutionParameter(keyExecutionParameter);
+    };
+    const add = (): void => {
+      multiExecutionState.setNewKeyParameterModal(true);
+    };
+    return (
+      <MenuContent ref={ref}>
+        <MenuContentItem onClick={rename}>Rename</MenuContentItem>
+        <MenuContentItem onClick={remove}>Delete</MenuContentItem>
+        <MenuContentItem onClick={add}>Create a new key</MenuContentItem>
+      </MenuContent>
+    );
+  }),
+);
+
+const KeyExecutionItem = observer(
+  (props: {
+    multiExecutionState: MultiServicePureExecutionState;
+    keyExecutionParameter: KeyedExecutionParameter;
+    isReadOnly: boolean;
+  }) => {
+    const { multiExecutionState, keyExecutionParameter, isReadOnly } = props;
+    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
+      useState(false);
+    const isActive =
+      multiExecutionState.selectedExecutionContextState?.executionContext ===
+      keyExecutionParameter;
+    const openKeyedExecution = (): void =>
+      multiExecutionState.changeKeyedExecutionParameter(keyExecutionParameter);
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+    return (
+      <ContextMenu
+        className={clsx(
+          'service-multi-execution-editor__item',
+          {
+            'service-multi-execution-editor__item--selected-from-context-menu':
+              !isActive && isSelectedFromContextMenu,
+          },
+          { 'service-multi-execution-editor__item--active': isActive },
+        )}
+        disabled={isReadOnly}
+        content={
+          <KeyExecutionContextMenu
+            multiExecutionState={multiExecutionState}
+            keyExecutionParameter={keyExecutionParameter}
+            isReadOnly={isReadOnly}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        onOpen={onContextMenuOpen}
+        onClose={onContextMenuClose}
+      >
+        <button
+          className={clsx('service-multi-execution-editor__item__label')}
+          onClick={openKeyedExecution}
+          tabIndex={-1}
+        >
+          <div className="service-multi-execution-editor__item__label__icon">
+            <KeyIcon />
+          </div>
+          <div className="service-multi-execution-editor__item__label__text">
+            {keyExecutionParameter.key}
+          </div>
+        </button>
+      </ContextMenu>
+    );
+  },
+);
+
+export const NewExecutionParameterModal = observer(
+  (props: {
+    executionState: MultiServicePureExecutionState;
+    isReadOnly: boolean;
+  }) => {
+    const [keyValue, setKeyValue] = useState('');
+    const { executionState, isReadOnly } = props;
+    const validationMessage =
+      keyValue === ''
+        ? `Execution key value can't be empty`
+        : executionState.execution.executionParameters.find(
+            (e) => e.key === keyValue,
+          )
+        ? 'Execution key value already exists'
+        : undefined;
+
+    const closeModal = (): void =>
+      executionState.setNewKeyParameterModal(false);
+    const handleSubmit = (): void => {
+      executionState.addExecutionParameter(keyValue);
+      setKeyValue('');
+      closeModal();
+    };
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setKeyValue(event.target.value);
+    };
+    return (
+      <Dialog
+        open={executionState.newKeyParameterModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="modal modal--dark search-modal"
+        >
+          <div className="modal__title">New Execution Parameter Key </div>
+          <div className="service-execution-editor__change__modal">
+            <InputWithInlineValidation
+              className="service-execution-editor__input input-group__input"
+              spellCheck={false}
+              value={keyValue}
+              onChange={onChange}
+              placeholder={`Key execution name`}
+              validationErrorMessage={validationMessage}
+            />
+          </div>
+          <div className="search-modal__actions">
+            <button
+              className="btn btn--dark"
+              disabled={isReadOnly || Boolean(validationMessage)}
+            >
+              Add
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+const RenameModal = observer(
+  (props: {
+    val: string;
+    isReadOnly: boolean;
+    setValue: (val: string) => void;
+    showModal: boolean;
+    closeModal: () => void;
+  }) => {
+    const { val, isReadOnly, showModal, closeModal, setValue } = props;
+    const [inputValue, setInputValue] = useState(val);
+    const handleSubmit = (): void => {
+      setValue(inputValue);
+      closeModal();
+    };
+    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+      setInputValue(event.target.value);
+    };
+    return (
+      <Dialog
+        open={showModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <form
+          onSubmit={handleSubmit}
+          className="modal modal--dark search-modal"
+        >
+          <div className="modal__title">Rename</div>
+          <input
+            className="panel__content__form__section__input"
+            spellCheck={false}
+            disabled={isReadOnly}
+            value={inputValue}
+            onChange={changeValue}
+          />
+          <div className="search-modal__actions">
+            <button className="btn btn--dark" disabled={isReadOnly}>
+              Rename
+            </button>
+          </div>
+        </form>
+      </Dialog>
+    );
+  },
+);
+
+const MultiPureExecutionEditor = observer(
+  (props: { multiExecutionState: MultiServicePureExecutionState }) => {
+    const { multiExecutionState } = props;
+    const multiExecution = multiExecutionState.execution;
+    const key = multiExecution.executionKey;
+    const addExecutionKey = (): void => {
+      multiExecutionState.setNewKeyParameterModal(true);
+    };
+    const editReviewTitle: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      multiExecutionState.setExecutionKey(event.target.value);
+    };
+    return (
+      <div className="service-execution-editor__execution">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel size={300} minSize={200}>
+            <div className="service-multi-execution-editor__header">
+              <div className="service-multi-execution-editor__header__content">
+                <div className="btn--sm service-multi-execution-editor__header__content__label">
+                  <HouseKeys />
+                </div>
+                <input
+                  className="service-multi-execution-editor__header__content__input input--dark"
+                  spellCheck={false}
+                  value={key}
+                  onChange={editReviewTitle}
+                  placeholder={'Key'}
+                />
+              </div>
+            </div>
+            <div className="service-multi-execution-editor__panel">
+              <div className="panel__header">
+                <div className="panel__header__title">
+                  <div className="panel__header__title__content">
+                    KEY VALUES
+                  </div>
+                </div>
+                <div className="panel__header__actions">
+                  <button
+                    className="panel__header__action"
+                    disabled={multiExecutionState.serviceEditorState.isReadOnly}
+                    onClick={addExecutionKey}
+                    tabIndex={-1}
+                    title={'Add execution key parameter'}
+                  >
+                    <PlusIcon />
+                  </button>
+                </div>
+              </div>
+
+              {multiExecution.executionParameters.map((executionParameter) => (
+                <KeyExecutionItem
+                  key={executionParameter.key}
+                  multiExecutionState={multiExecutionState}
+                  keyExecutionParameter={executionParameter}
+                  isReadOnly={multiExecutionState.serviceEditorState.isReadOnly}
+                />
+              ))}
+              {!multiExecution.executionParameters.length && (
+                <BlankPanelPlaceholder
+                  placeholderText="Add a key"
+                  onClick={addExecutionKey}
+                  clickActionType="add"
+                  tooltipText="Click to add an execution key"
+                />
+              )}
+            </div>
+            {multiExecutionState.newKeyParameterModal && (
+              <NewExecutionParameterModal
+                executionState={multiExecutionState}
+                isReadOnly={multiExecutionState.serviceEditorState.isReadOnly}
+              />
+            )}
+            {multiExecutionState.renameKey && (
+              <RenameModal
+                val={multiExecutionState.renameKey.key}
+                isReadOnly={multiExecutionState.serviceEditorState.isReadOnly}
+                showModal={true}
+                closeModal={(): void =>
+                  multiExecutionState.setRenameKey(undefined)
+                }
+                setValue={(val: string): void =>
+                  multiExecutionState.changeKeyValue(
+                    guaranteeNonNullable(multiExecutionState.renameKey),
+                    val,
+                  )
+                }
+              />
+            )}
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel minSize={56}>
+            {multiExecutionState.selectedExecutionContextState ? (
+              <PureExecutionContextConfigurationEditor
+                pureExecutionState={multiExecutionState}
+                executionContextState={
+                  multiExecutionState.selectedExecutionContextState
+                }
+              />
+            ) : (
+              <BlankPanelPlaceholder
+                placeholderText="Add a key"
+                onClick={addExecutionKey}
+                clickActionType="add"
+                tooltipText="Click to add an execution key"
+              />
+            )}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
+const ServicePureExecutionEditor = observer(
+  (props: {
+    servicePureExecutionState: ServicePureExecutionState;
+    isReadOnly: boolean;
+  }) => {
+    const { servicePureExecutionState, isReadOnly } = props;
+    const serviceState = servicePureExecutionState.serviceEditorState;
+    const isMultiExecution =
+      servicePureExecutionState instanceof MultiServicePureExecutionState;
+    const showChangeExecutionModal = (): void => {
+      if (servicePureExecutionState instanceof MultiServicePureExecutionState) {
+        servicePureExecutionState.setSingleExecutionKey(
+          servicePureExecutionState.execution.executionParameters[0],
+        );
+      }
+      servicePureExecutionState.setShowChangeExecModal(true);
+    };
+
+    const renderExecutionEditor = (): React.ReactNode => {
+      if (
+        servicePureExecutionState instanceof SingleServicePureExecutionState
+      ) {
+        return (
+          <PureSingleExecutionEditor
+            singleExecutionState={servicePureExecutionState}
+          />
+        );
+      } else if (
+        servicePureExecutionState instanceof MultiServicePureExecutionState
+      ) {
+        return (
+          <MultiPureExecutionEditor
+            multiExecutionState={servicePureExecutionState}
+          />
+        );
+      }
+      return (
+        <UnsupportedEditorPanel
+          text="Can't display this execution in form-mode"
+          isReadOnly={serviceState.isReadOnly}
+        />
+      );
+    };
+    return (
+      <div className="service-execution-editor">
+        <ResizablePanelGroup orientation="horizontal">
+          <ResizablePanel size={500} minSize={28}>
+            <ServiceExecutionQueryEditor
+              executionState={servicePureExecutionState}
+              isReadOnly={isReadOnly}
+            />
+          </ResizablePanel>
+          <ResizablePanelSplitter>
+            <ResizablePanelSplitterLine color="var(--color-dark-grey-200)" />
+          </ResizablePanelSplitter>
+          <ResizablePanel minSize={56}>
+            <div className="service-execution-editor__content">
+              <div className="panel">
+                <div className="panel__header">
+                  <div className="panel__header__title">
+                    <div className="panel__header__title__label service-editor__execution__label--test">
+                      context
+                    </div>
+                  </div>
+                  <div className="service-multi-execution-editor__actions">
+                    {(servicePureExecutionState instanceof
+                      SingleServicePureExecutionState ||
+                      servicePureExecutionState instanceof
+                        MultiServicePureExecutionState) && (
+                      <button
+                        className="service-multi-execution-editor__action"
+                        tabIndex={-1}
+                        onClick={showChangeExecutionModal}
+                        title={`Switch to ${
+                          servicePureExecutionState instanceof
+                          SingleServicePureExecutionState
+                            ? 'multi execution'
+                            : 'single execution'
+                        }`}
+                      >
+                        {isMultiExecution ? (
+                          <ArrowsJoinIcon />
+                        ) : (
+                          <ArrowsSplitIcon />
+                        )}
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className="panel__content service-execution-editor__configuration__content">
+                  {renderExecutionEditor()}
+                  {servicePureExecutionState.showChangeExecModal && (
+                    <ChangeExecutionModal
+                      executionState={servicePureExecutionState}
+                      isReadOnly={
+                        servicePureExecutionState.serviceEditorState.isReadOnly
+                      }
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);
+
+export const ServiceExecutionEditor = observer(() => {
+  const editorStore = useEditorStore();
+  const serviceState = editorStore.getCurrentEditorState(ServiceEditorState);
+  const executionState = serviceState.executionState;
+  const isReadOnly = serviceState.isReadOnly;
+  if (executionState instanceof ServicePureExecutionState) {
+    return (
+      <ServicePureExecutionEditor
+        servicePureExecutionState={executionState}
+        isReadOnly={isReadOnly}
+      />
+    );
+  }
+  return (
+    <UnsupportedEditorPanel
+      text="Can't display thie service execution in form-mode"
+      isReadOnly={serviceState.isReadOnly}
+    />
+  );
+});