@finos/legend-application-studio 18.1.0 → 19.0.0

package/src/components/editor/edit-panel/project-configuration-editor/ProjectConfigurationEditor.tsx

@@ -39,7 +39,6 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   ExternalLinkSquareIcon,
-  ArchiveIcon,
   Dialog,
   Panel,
   PanelForm,
@@ -48,6 +47,10 @@ import {
   CheckSquareIcon,
   SquareIcon,
   ExclamationTriangleIcon,
+  DropdownMenu,
+  CaretDownIcon,
+  MenuContentItem,
+  MenuContent,
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import {
@@ -58,8 +61,6 @@ import {
 } from '@finos/legend-server-sdlc';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
-  ActionAlertActionType,
-  ActionAlertType,
   DocumentationPreview,
   EDITOR_LANGUAGE,
   LEGEND_APPLICATION_DOCUMENTATION_KEY,
@@ -73,11 +74,11 @@ import {
   type ProjectData,
   type ProjectDependencyInfo,
 } from '@finos/legend-server-depot';
-import { generateViewProjectRoute } from '../../../../stores/LegendStudioRouter.js';
 import {
-  compareSemVerVersions,
-  generateGAVCoordinates,
-} from '@finos/legend-storage';
+  generateViewProjectByGAVRoute,
+  generateViewProjectRoute,
+} from '../../../../stores/LegendStudioRouter.js';
+import { compareSemVerVersions } from '@finos/legend-storage';
 
 interface VersionOption {
   label: string;
@@ -326,26 +327,24 @@ const ProjectDependencyEditor = observer(
         }
       }
     };
-    const openProjectinArchive = (): void => {
+    const viewProject = (): void => {
       if (!projectDependency.isLegacyDependency) {
-        const projectDependencyVersionId =
-          projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
-            ? SNAPSHOT_VERSION_ALIAS
-            : projectDependency.versionId;
         applicationStore.navigator.visitAddress(
-          `${
-            applicationStore.config.baseUrl
-          }view/archive/${generateGAVCoordinates(
-            guaranteeNonNullable(projectDependency.groupId),
-            guaranteeNonNullable(projectDependency.artifactId),
-            projectDependencyVersionId,
-          )}`,
+          applicationStore.navigator.generateAddress(
+            generateViewProjectByGAVRoute(
+              guaranteeNonNullable(projectDependency.groupId),
+              guaranteeNonNullable(projectDependency.artifactId),
+              projectDependency.versionId === MASTER_SNAPSHOT_ALIAS
+                ? SNAPSHOT_VERSION_ALIAS
+                : projectDependency.versionId,
+            ),
+          ),
         );
       }
     };
     // NOTE: This assumes that the dependant project is in the same studio instance as the current project
     // In the future, the studio instance may be part of the project data
-    const openProject = (): void => {
+    const viewSDLCProject = (): void => {
       if (projectDependencyData) {
         applicationStore.navigator.visitAddress(
           applicationStore.navigator.generateAddress(
@@ -391,33 +390,41 @@ const ProjectDependencyEditor = observer(
           }
           darkMode={true}
         />
-        <button
-          className="project-dependency-editor__visit-btn btn--dark btn--sm"
-          disabled={
-            projectDependency.isLegacyDependency ||
-            !selectedProject ||
-            !selectedVersionOption ||
-            !projectDependencyData
-          }
-          onClick={openProject}
-          tabIndex={-1}
-          title="Open Project"
-        >
-          <ExternalLinkSquareIcon />
-        </button>
-        <button
-          className="project-dependency-editor__visit-btn btn--dark btn--sm"
-          disabled={
-            projectDependency.isLegacyDependency ||
-            !selectedProject ||
-            !selectedVersionOption
-          }
-          onClick={openProjectinArchive}
-          tabIndex={-1}
-          title="Open Project in archive"
-        >
-          <ArchiveIcon />
-        </button>
+        <div className="project-dependency-editor__visit-project-btn">
+          <button
+            className="project-dependency-editor__visit-project-btn__btn btn--dark"
+            disabled={
+              projectDependency.isLegacyDependency ||
+              !selectedProject ||
+              !selectedVersionOption
+            }
+            onClick={viewProject}
+            tabIndex={-1}
+            title="View project"
+          >
+            <ExternalLinkSquareIcon />
+          </button>
+          <DropdownMenu
+            className="project-dependency-editor__visit-project-btn__dropdown-trigger btn--dark"
+            content={
+              <MenuContent>
+                <MenuContentItem
+                  disabled={
+                    projectDependency.isLegacyDependency ||
+                    !selectedProject ||
+                    !selectedVersionOption ||
+                    !projectDependencyData
+                  }
+                  onClick={viewSDLCProject}
+                >
+                  View SDLC project
+                </MenuContentItem>
+              </MenuContent>
+            }
+          >
+            <CaretDownIcon title="Show more options..." />
+          </DropdownMenu>
+        </div>
         <button
           className="project-dependency-editor__remove-btn btn--dark btn--caution"
           disabled={isReadOnly}
@@ -711,38 +718,13 @@ export const ProjectConfigurationEditor = observer(() => {
     }
   };
   const disableAddButton =
-    selectedTab === CONFIGURATION_EDITOR_TAB.PROJECT_STRUCTURE || isReadOnly;
+    selectedTab !== CONFIGURATION_EDITOR_TAB.PROJECT_DEPENDENCIES || isReadOnly;
   const updateConfigs = (): void => {
-    if (editorStore.localChangesState.hasUnpushedChanges) {
-      editorStore.setActionAlertInfo({
-        message: 'You have unpushed changes',
-        prompt:
-          'This action will discard these changes and refresh the application',
-        type: ActionAlertType.CAUTION,
-        onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-        onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-        actions: [
-          {
-            label: 'Proceed to update project dependencies',
-            type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-            handler: (): void => {
-              flowResult(configState.updateConfigs()).catch(
-                applicationStore.alertUnhandledError,
-              );
-            },
-          },
-          {
-            label: 'Abort',
-            type: ActionAlertActionType.PROCEED,
-            default: true,
-          },
-        ],
-      });
-    } else {
+    editorStore.localChangesState.alertUnsavedChanges((): void => {
       flowResult(configState.updateConfigs()).catch(
         applicationStore.alertUnhandledError,
       );
-    }
+    });
   };
   useEffect(() => {
     if (

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

@@ -61,10 +61,6 @@ export const NewServiceModal = observer(
           .catch(applicationStore.alertUnhandledError);
       }
     };
-    const onSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-      event.preventDefault();
-      create();
-    };
     const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) =>
       setServicePath(event.target.value);
     return (
@@ -80,7 +76,13 @@ export const NewServiceModal = observer(
           },
         }}
       >
-        <form onSubmit={onSubmit} className="modal search-modal modal--dark">
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            create();
+          }}
+          className="modal search-modal modal--dark"
+        >
           <div className="modal__title">Promote to Service</div>
           <div className="input-group">
             <input

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

@@ -334,10 +334,6 @@ export const ChangeExecutionModal = observer(
     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;
@@ -404,7 +400,11 @@ export const ChangeExecutionModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            executionState.changeExecution();
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">
@@ -553,11 +553,6 @@ export const NewExecutionParameterModal = observer(
 
     const closeModal = (): void =>
       executionState.setNewKeyParameterModal(false);
-    const handleSubmit = (): void => {
-      executionState.addExecutionParameter(keyValue);
-      setKeyValue('');
-      closeModal();
-    };
     const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       setKeyValue(event.target.value);
     };
@@ -569,7 +564,12 @@ export const NewExecutionParameterModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            executionState.addExecutionParameter(keyValue);
+            setKeyValue('');
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">New Execution Context</div>
@@ -607,10 +607,6 @@ const RenameModal = observer(
   }) => {
     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);
     };
@@ -622,7 +618,11 @@ const RenameModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setValue(inputValue);
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">Rename</div>

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

@@ -42,9 +42,9 @@ import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   EDITOR_LANGUAGE,
   ExecutionPlanViewer,
+  TextInputEditor,
   useApplicationStore,
 } from '@finos/legend-application';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import {
   type LightQuery,
   isStubbed_PackageableElement,
@@ -80,7 +80,7 @@ const ServiceExecutionResultViewer = observer(
             <div className="modal__title">Execution Result</div>
           </div>
           <div className="modal__body">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={executionResultText ?? ''}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.JSON}
@@ -209,7 +209,7 @@ const ServiceExecutionQueryImporter = observer(
               isLoading={queryState.loadQueryInfoState.isInProgress}
             />
             {queryState.selectedQueryInfo && (
-              <StudioTextInputEditor
+              <TextInputEditor
                 inputValue={queryState.selectedQueryInfo.content}
                 isReadOnly={true}
                 language={EDITOR_LANGUAGE.PURE}
@@ -264,6 +264,7 @@ export const ServiceExecutionQueryEditor = observer(
                     embeddedQueryBuilderState.editorStore.applicationStore,
                     embeddedQueryBuilderState.editorStore.graphManagerState,
                     service,
+                    undefined,
                     selectedExecutionState.executionContext instanceof
                     KeyedExecutionParameter
                       ? selectedExecutionState.executionContext.key
@@ -396,19 +397,19 @@ export const ServiceExecutionQueryEditor = observer(
                 </div>
               </button>
             ) : (
-              <button
-                className="service-editor__execution__execute-btn"
-                onClick={runQuery}
-                title="Run Query"
-                disabled={executionState.isRunningQuery}
-                tabIndex={-1}
-              >
-                <div className="service-editor__execution__execute-btn__label">
+              <div className="service-editor__execution__execute-btn">
+                <button
+                  className="service-editor__execution__execute-btn__label"
+                  onClick={runQuery}
+                  title="Run Query"
+                  disabled={executionState.isGeneratingPlan}
+                  tabIndex={-1}
+                >
                   <PlayIcon className="service-editor__execution__execute-btn__label__icon" />
                   <div className="service-editor__execution__execute-btn__label__title">
                     Run Query
                   </div>
-                </div>
+                </button>
                 <DropdownMenu
                   className="service-editor__execution__execute-btn__dropdown-btn"
                   disabled={executionState.isGeneratingPlan}
@@ -435,7 +436,7 @@ export const ServiceExecutionQueryEditor = observer(
                 >
                   <CaretDownIcon />
                 </DropdownMenu>
-              </button>
+              </div>
             )}
           </div>
         </div>
@@ -448,7 +449,7 @@ export const ServiceExecutionQueryEditor = observer(
             }
           />
           <div className="service-execution-query-editor__content">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={queryState.lambdaString}
               isReadOnly={true}
               language={EDITOR_LANGUAGE.PURE}

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

@@ -253,14 +253,6 @@ export const NewConnectionDataModal = observer(
           (c) => c.connectionId === selectedConnection?.value.id,
         ),
       );
-    const handleSubmit = (): void => {
-      const connection = newConnectionState.connection;
-      const data = newConnectionState.embeddedDataType;
-      if (connection && data) {
-        testDataState.createConnectionTestData();
-        closeModal();
-      }
-    };
     const onConnectionSelectionChange = (val: {
       label: string;
       value?: IdentifiedConnection;
@@ -309,7 +301,15 @@ export const NewConnectionDataModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            const connection = newConnectionState.connection;
+            const data = newConnectionState.embeddedDataType;
+            if (connection && data) {
+              testDataState.createConnectionTestData();
+              closeModal();
+            }
+          }}
           className="modal service-test-data-modal modal--dark"
         >
           <div className="modal__header">

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

@@ -101,10 +101,6 @@ export const RenameModal = observer(
   }) => {
     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);
     };
@@ -116,7 +112,11 @@ export const RenameModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setValue(inputValue);
+            closeModal();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">Rename</div>

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

@@ -159,7 +159,6 @@ export const NewParameterModal = observer(
     };
     const options = setupState.newParamOptions;
     const closeModal = (): void => setupState.setShowNewParameterModal(false);
-    const handleSubmit = (): void => setupState.addParameterValue();
     const onChange = (val: { label: string; value: string } | null): void => {
       if (val === null) {
         setupState.setNewParameterValueName('');
@@ -175,7 +174,10 @@ export const NewParameterModal = observer(
         PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
       >
         <form
-          onSubmit={handleSubmit}
+          onSubmit={(event) => {
+            event.preventDefault();
+            setupState.addParameterValue();
+          }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">New Test Parameter Value </div>

package/src/components/editor/edit-panel/testable/TestAssertionEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EDITOR_LANGUAGE } from '@finos/legend-application';
+import { EDITOR_LANGUAGE, TextInputEditor } from '@finos/legend-application';
 import {
   clsx,
   CompareIcon,
@@ -43,7 +43,6 @@ import {
 import { externalFormatData_setData } from '../../../../stores/shared/modifier/DSL_Data_GraphModifierHelper.js';
 import { TESTABLE_RESULT } from '../../../../stores/sidebar-state/testable/GlobalTestRunnerState.js';
 import { JsonDiffView } from '../../../shared/DiffView.js';
-import { StudioTextInputEditor } from '../../../shared/StudioTextInputEditor.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 
 const EqualToJsonAsssertionEditor = observer(
@@ -80,7 +79,7 @@ const EqualToJsonAsssertionEditor = observer(
         </div>
         <div className="equal-to-json-editor__content panel__content">
           <div className="equal-to-json-editor__content__data">
-            <StudioTextInputEditor
+            <TextInputEditor
               inputValue={assertion.expected.data}
               language={EDITOR_LANGUAGE.JSON}
               updateInput={(val: string): void => {

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

@@ -35,7 +35,7 @@ import {
   ResizablePanelGroup,
   ResizablePanelSplitterLine,
   BlankPanelContent,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   LockIcon,
   PlusIcon,
@@ -440,13 +440,22 @@ export const AssociationEditor = observer(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.ASSOCIATION_EDITOR,
     );
 
+    // layout
+    const propertyEditorCollapsiblePanelGroupProps =
+      getCollapsiblePanelGroupProps(!selectedProperty, {
+        size: 250,
+      });
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.ASSOCIATION_EDITOR}
         className="uml-element-editor association-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...propertyEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -561,9 +570,7 @@ export const AssociationEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(!selectedProperty, {
-              size: 250,
-            })}
+            {...propertyEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {selectedProperty ? (

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

@@ -31,7 +31,7 @@ import {
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
   BlankPanelContent,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   LockIcon,
   PlusIcon,
@@ -93,7 +93,6 @@ import {
   getAllClassDerivedProperties,
   isElementReadOnly,
 } from '@finos/legend-graph';
-import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import {
   ApplicationNavigationContextData,
   buildElementOption,
@@ -134,6 +133,7 @@ import {
   getClassPropertyType,
 } from '../../../../stores/shared/ModelClassifierUtils.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
+import { LambdaEditor } from '@finos/legend-query-builder';
 
 type ClassPropertyDragSource = {
   property: Property;
@@ -811,7 +811,7 @@ const DerivedPropertyBasicEditor = observer(
                 </button>
               )}
             </div>
-            <StudioLambdaEditor
+            <LambdaEditor
               disabled={
                 editorState.classState
                   .isConvertingDerivedPropertyLambdaObjects ||
@@ -821,7 +821,7 @@ const DerivedPropertyBasicEditor = observer(
               lambdaEditorState={dpState}
               forceBackdrop={hasParserError}
               expectedType={propertyType}
-              onEditorFocusEventHandler={onLambdaEditorFocus}
+              onEditorFocus={onLambdaEditorFocus}
             />
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -971,7 +971,7 @@ const ConstraintEditor = observer(
                 </button>
               )}
             </div>
-            <StudioLambdaEditor
+            <LambdaEditor
               disabled={
                 editorState.classState.isConvertingConstraintLambdaObjects ||
                 isReadOnly ||
@@ -982,7 +982,7 @@ const ConstraintEditor = observer(
               expectedType={editorStore.graphManagerState.graph.getPrimitiveType(
                 PRIMITIVE_TYPE.BOOLEAN,
               )}
-              onEditorFocusEventHandler={onLambdaEditorFocus}
+              onEditorFocus={onLambdaEditorFocus}
             />
           </div>
         </PanelEntryDropZonePlaceholder>
@@ -1688,13 +1688,22 @@ export const ClassFormEditor = observer(
       );
     }, [applicationStore, classState]);
 
+    // layout
+    const propertyEditorCollapsiblePanelGroupProps =
+      getCollapsiblePanelGroupProps(!editorState.selectedProperty, {
+        size: 250,
+      });
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.CLASS_FORM_EDITOR}
         className="uml-element-editor class-form-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...propertyEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -1804,10 +1813,7 @@ export const ClassFormEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(
-              !editorState.selectedProperty,
-              { size: 250 },
-            )}
+            {...propertyEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {editorState.selectedProperty ? (

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

@@ -30,7 +30,7 @@ import { prettyCONSTName } from '@finos/legend-shared';
 import {
   BlankPanelContent,
   clsx,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   InputWithInlineValidation,
   ResizablePanel,
   ResizablePanelGroup,
@@ -541,13 +541,24 @@ export const EnumerationEditor = observer(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.ENUMERATION_EDITOR,
     );
 
+    // layout
+    const enumEditorCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      !selectedEnum,
+      {
+        size: 250,
+      },
+    );
+
     return (
       <div
         data-testid={LEGEND_STUDIO_TEST_ID.ENUMERATION_EDITOR}
         className="uml-element-editor enumeration-editor"
       >
         <ResizablePanelGroup orientation="horizontal">
-          <ResizablePanel minSize={56}>
+          <ResizablePanel
+            {...enumEditorCollapsiblePanelGroupProps.remainingPanel}
+            minSize={56}
+          >
             <Panel>
               <div className="panel__header">
                 <div className="panel__header__title">
@@ -674,9 +685,7 @@ export const EnumerationEditor = observer(
             <ResizablePanelSplitterLine color="var(--color-light-grey-200)" />
           </ResizablePanelSplitter>
           <ResizablePanel
-            {...getControlledResizablePanelProps(!selectedEnum, {
-              size: 250,
-            })}
+            {...enumEditorCollapsiblePanelGroupProps.collapsiblePanel}
             direction={-1}
           >
             {selectedEnum ? (