@finos/legend-application-studio 25.0.6 → 26.0.0

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

@@ -26,25 +26,27 @@ import {
   debounce,
   guaranteeNonNullable,
   type PlainObject,
+  prettyCONSTName,
 } from '@finos/legend-shared';
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
-  clsx,
   CustomSelectorInput,
   PencilIcon,
   RefreshIcon,
   TimesIcon,
-  CheckSquareIcon,
-  SquareIcon,
   LockIcon,
   SaveIcon,
   PanelDropZone,
   Panel,
   PanelContent,
   PanelFormSection,
+  PanelHeader,
+  PanelFormTextField,
+  PanelFormBooleanField,
+  Button,
 } from '@finos/legend-art';
 import {
   type FileGenerationSourceDropTarget,
@@ -205,22 +207,18 @@ const FileGenerationScopeEditor = observer(
                       onChange={changeItemInputValue}
                     />
                     <div className="panel__content__form__section__list__new-item__actions">
-                      <button
-                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                      <Button
+                        className="panel__content__form__section__list__new-item__add-btn"
                         disabled={isDisabled}
                         onClick={updateValue(value)}
-                        tabIndex={-1}
-                      >
-                        Save
-                      </button>
-                      <button
-                        className="panel__content__form__section__list__new-item__cancel-btn btn btn--dark"
+                        text="save"
+                      />
+                      <Button
+                        className="panel__content__form__section__list__new-item__cancel-btn"
                         disabled={isReadOnly}
                         onClick={hideAddOrEditItemInput}
-                        tabIndex={-1}
-                      >
-                        Cancel
-                      </button>
+                        text="cancel"
+                      />
                     </div>
                   </>
                 ) : (
@@ -337,7 +335,7 @@ const GenerationStringPropertyEditor = observer(
     return (
       <div className="panel__content__form__section">
         <div className="panel__content__form__section__header__label">
-          {property.name}
+          {prettyCONSTName(property.name)}
         </div>
         <div className="panel__content__form__section__header__prompt">
           {property.description}
@@ -409,36 +407,16 @@ const GenerationBooleanPropertyEditor = observer(
       | undefined;
     const value =
       (getConfigValue(property.name) as boolean | undefined) ?? defaultValue;
-    const toggle = (): void => {
-      if (!isReadOnly) {
-        update(property, !value as unknown as PlainObject);
-      }
-    };
     return (
-      <div className="panel__content__form__section">
-        <div className="panel__content__form__section__header__label">
-          {property.name}
-        </div>
-        <div
-          className={clsx('panel__content__form__section__toggler', {
-            'panel__content__form__section__toggler--disabled': isReadOnly,
-          })}
-          onClick={toggle}
-        >
-          <button
-            className={clsx('panel__content__form__section__toggler__btn', {
-              'panel__content__form__section__toggler__btn--toggled': value,
-            })}
-            disabled={isReadOnly}
-            tabIndex={-1}
-          >
-            {value ? <CheckSquareIcon /> : <SquareIcon />}
-          </button>
-          <div className="panel__content__form__section__toggler__prompt">
-            {property.description}
-          </div>
-        </div>
-      </div>
+      <PanelFormBooleanField
+        isReadOnly={isReadOnly}
+        value={value}
+        name={prettyCONSTName(property.name)}
+        prompt={property.description}
+        update={(newValue: boolean | undefined): void => {
+          update(property, newValue as unknown as PlainObject);
+        }}
+      />
     );
   },
 );
@@ -672,14 +650,12 @@ const GenerationArrayPropertyEditor = observer(
           </div>
           {showEditInput !== true && (
             <div className="panel__content__form__section__list__new-item__add">
-              <button
-                className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+              <Button
+                className="panel__content__form__section__list__new-item__add-btn"
                 disabled={isReadOnly}
                 onClick={showAddItemInput}
-                tabIndex={-1}
-              >
-                Add Value
-              </button>
+                text="Add Value"
+              />
             </div>
           )}
         </div>
@@ -770,7 +746,7 @@ const GenerationMapPropertyEditor = observer(
         }
       };
     return (
-      <div className="panel__content__form__section">
+      <PanelFormSection>
         <div className="panel__content__form__section__header__label">
           {property.name}
         </div>
@@ -918,7 +894,7 @@ const GenerationMapPropertyEditor = observer(
             </div>
           )}
         </div>
-      </div>
+      </PanelFormSection>
     );
   },
 );
@@ -1039,12 +1015,6 @@ export const FileGenerationConfigurationEditor = observer(
       fileGenerationState.resetGenerator();
       debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
     };
-
-    const changeValue: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      const val = event.target.value;
-      fileGeneration_setGenerationOutputPath(fileGeneration, val || undefined);
-    };
-
     // Drag and Drop
     const handleDrop = useCallback(
       (item: FileGenerationSourceDropTarget): void => {
@@ -1094,8 +1064,8 @@ export const FileGenerationConfigurationEditor = observer(
       getNullableFileGenerationConfig(fileGeneration, name)?.value;
 
     return (
-      <div className="panel file-generation-editor__configuration">
-        <div className="panel__header">
+      <Panel className="file-generation-editor__configuration">
+        <PanelHeader>
           <div className="panel__header__title">
             <div className="panel__header__title__label">{`${fileGeneration.type} configuration`}</div>
           </div>
@@ -1123,7 +1093,7 @@ export const FileGenerationConfigurationEditor = observer(
               </button>
             )}
           </div>
-        </div>
+        </PanelHeader>
         <PanelContent>
           <PanelDropZone
             dropTargetConnector={scopeElementDropRef}
@@ -1137,22 +1107,20 @@ export const FileGenerationConfigurationEditor = observer(
                 regenerate={debouncedRegenerate}
                 isReadOnly={isReadOnly || Boolean(elementGenerationState)}
               />
-              <div className="panel__content__form__section">
-                <div className="panel__content__form__section__header__label">
-                  Generation Output Path
-                </div>
-                <div className="panel__content__form__section__header__prompt">
-                  Specifies the root path where files will be generated.
-                  Defaults to the file specification path
-                </div>
-                <input
-                  className="panel__content__form__section__input"
-                  spellCheck={false}
-                  disabled={isReadOnly}
-                  value={fileGeneration.generationOutputPath ?? ''}
-                  onChange={changeValue}
-                />
-              </div>
+
+              <PanelFormTextField
+                isReadOnly={isReadOnly}
+                value={fileGeneration.generationOutputPath ?? ''}
+                name="Generation Output Path"
+                prompt="Specifies the root path where files will be generated.
+                Defaults to the file specification path"
+                update={(value: string | undefined): void =>
+                  fileGeneration_setGenerationOutputPath(
+                    fileGeneration,
+                    value ?? '',
+                  )
+                }
+              />
               {fileGenerationConfiguration.map((abstractGenerationProperty) => (
                 <GenerationPropertyEditor
                   key={
@@ -1168,7 +1136,7 @@ export const FileGenerationConfigurationEditor = observer(
             </div>
           </PanelDropZone>
         </PanelContent>
-      </div>
+      </Panel>
     );
   },
 );
@@ -1185,7 +1153,7 @@ export const FileGenerationEditor = observer(() => {
   return (
     <div className="file-generation-editor">
       <Panel>
-        <div className="panel__header">
+        <PanelHeader>
           <div className="panel__header__title">
             {isReadOnly && (
               <div className="uml-element-editor__header__lock">
@@ -1197,8 +1165,8 @@ export const FileGenerationEditor = observer(() => {
               {fileGeneration.name}
             </div>
           </div>
-        </div>
-        <div className="panel__content file-generation-editor__content">
+        </PanelHeader>
+        <PanelContent className="file-generation-editor__content">
           <ResizablePanelGroup orientation="vertical">
             <ResizablePanel size={400} minSize={300}>
               <FileGenerationConfigurationEditor
@@ -1219,7 +1187,7 @@ export const FileGenerationEditor = observer(() => {
               />
             </ResizablePanel>
           </ResizablePanelGroup>
-        </div>
+        </PanelContent>
       </Panel>
     </div>
   );

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

@@ -36,6 +36,7 @@ import {
   fromElementPathToMappingElementId,
   OperationSetImplementation,
   OperationType,
+  INTERNAL__UnknownSetImplementation,
 } from '@finos/legend-graph';
 import {
   setImpl_nominateRoot,
@@ -44,6 +45,7 @@ import {
   setImplementation_setRoot,
 } from '../../../../stores/graph-modifier/DSL_Mapping_GraphModifierHelper.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 
 export const OperatorSelector = observer(
   (props: {
@@ -183,7 +185,10 @@ export const ClassMappingEditor = observer(
             </div>
           </div>
           {/* Instance Set Implementation Source */}
-          {!(setImplementation instanceof OperationSetImplementation) && (
+          {!(
+            setImplementation instanceof OperationSetImplementation ||
+            setImplementation instanceof INTERNAL__UnknownSetImplementation
+          ) && (
             <div
               className={clsx(
                 'mapping-element-editor__metadata__chunk',
@@ -247,20 +252,30 @@ export const ClassMappingEditor = observer(
             </button>
           )}
         </div>
-        {setImplementation instanceof OperationSetImplementation && (
-          <OperationSetImplementationEditor
-            setImplementation={setImplementation}
+        {setImplementation instanceof INTERNAL__UnknownSetImplementation && (
+          <UnsupportedEditorPanel
+            text="Can't display this set implementation in form-mode"
             isReadOnly={isReadOnly}
           />
         )}
-        {editorStore.graphManagerState.graphManager.isInstanceSetImplementation(
-          setImplementation,
-        ) && (
-          <InstanceSetImplementationEditor
+        {setImplementation instanceof OperationSetImplementation && (
+          <OperationSetImplementationEditor
             setImplementation={setImplementation}
             isReadOnly={isReadOnly}
           />
         )}
+        {!(
+          setImplementation instanceof OperationSetImplementation ||
+          setImplementation instanceof INTERNAL__UnknownSetImplementation
+        ) &&
+          editorStore.graphManagerState.graphManager.isInstanceSetImplementation(
+            setImplementation,
+          ) && (
+            <InstanceSetImplementationEditor
+              setImplementation={setImplementation}
+              isReadOnly={isReadOnly}
+            />
+          )}
       </div>
     );
   },

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

@@ -734,10 +734,11 @@ export const DEPRECATED__MappingTestEditor = observer(
     const runTest = applicationStore.guardUnhandledError(() =>
       flowResult(testState.runTest()),
     );
-    const cancelTest = (): void => {
-      testState.setIsRunningTest(false);
-      testState.setTestRunPromise(undefined);
-    };
+
+    const cancelTest = applicationStore.guardUnhandledError(() =>
+      flowResult(testState.cancelTest()),
+    );
+
     const executionPlanState = testState.executionPlanState;
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(testState.generatePlan(false)),

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

@@ -121,6 +121,9 @@ const EnumerationMappingSourceSelectorModal = observer(
     };
     const handleEnter = (): void => sourceSelectorRef.current?.focus();
 
+    const isDarkMode =
+      editorStore.applicationStore.config.options
+        .TEMPORARY__enableMappingTestableEditor;
     return (
       <Dialog
         open={open}
@@ -137,7 +140,7 @@ const EnumerationMappingSourceSelectorModal = observer(
           },
         }}
       >
-        <Modal className="search-modal">
+        <Modal className="search-modal" darkMode={isDarkMode}>
           <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
             ref={sourceSelectorRef}
@@ -146,6 +149,7 @@ const EnumerationMappingSourceSelectorModal = observer(
             value={selectedSourceType}
             placeholder="Choose a type..."
             isClearable={true}
+            darkMode={isDarkMode}
             filterOption={filterOption}
             formatOptionLabel={getPackageableElementOptionFormatter({})}
           />

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

@@ -325,37 +325,47 @@ export const InstanceSetImplementationSourceExplorer = observer(
             dropTargetConnector={dropRef}
             isDragOver={isDragOver && !isReadOnly}
           >
-            {srcElement ? (
-              <div className="source-panel__explorer">
-                {srcElement instanceof Type && (
-                  <TypeTree
-                    type={srcElement}
-                    selectedType={instanceSetImplementationState.selectedType}
-                  />
-                )}
-                {srcElement instanceof RootFlatDataRecordType && (
-                  <FlatDataRecordTypeTree
-                    recordType={srcElement}
-                    selectedType={instanceSetImplementationState.selectedType}
-                  />
-                )}
-                {srcElement instanceof TableAlias && (
-                  <TableOrViewSourceTree
-                    relation={srcElement.relation.value}
-                    selectedType={instanceSetImplementationState.selectedType}
+            {!isUnsupported && (
+              <>
+                {srcElement ? (
+                  <div className="source-panel__explorer">
+                    {srcElement instanceof Type && (
+                      <TypeTree
+                        type={srcElement}
+                        selectedType={
+                          instanceSetImplementationState.selectedType
+                        }
+                      />
+                    )}
+                    {srcElement instanceof RootFlatDataRecordType && (
+                      <FlatDataRecordTypeTree
+                        recordType={srcElement}
+                        selectedType={
+                          instanceSetImplementationState.selectedType
+                        }
+                      />
+                    )}
+                    {srcElement instanceof TableAlias && (
+                      <TableOrViewSourceTree
+                        relation={srcElement.relation.value}
+                        selectedType={
+                          instanceSetImplementationState.selectedType
+                        }
+                      />
+                    )}
+                  </div>
+                ) : (
+                  <BlankPanelPlaceholder
+                    text="Choose a source"
+                    onClick={showSourceSelectorModal}
+                    clickActionType="add"
+                    tooltipText="Drop a class mapping source, or click to choose one"
+                    isDropZoneActive={canDrop}
+                    disabled={isReadOnly}
+                    previewText="No source"
                   />
                 )}
-              </div>
-            ) : (
-              <BlankPanelPlaceholder
-                text="Choose a source"
-                onClick={showSourceSelectorModal}
-                clickActionType="add"
-                tooltipText="Drop a class mapping source, or click to choose one"
-                isDropZoneActive={canDrop}
-                disabled={isReadOnly}
-                previewText="No source"
-              />
+              </>
             )}
             {isUnsupported && (
               <UnsupportedEditorPanel

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

@@ -21,6 +21,8 @@ import {
   type SelectComponent,
   CustomSelectorInput,
   createFilter,
+  Modal,
+  ModalTitle,
 } from '@finos/legend-art';
 import {
   getMappingElementSource,
@@ -129,6 +131,9 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
     } = props;
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
+    const isDarkMode =
+      editorStore.applicationStore.config.options
+        .TEMPORARY__enableMappingTestableEditor;
     const options = (
       editorStore.graphManagerState.usableClasses as MappingElementSource[]
     )
@@ -207,19 +212,20 @@ export const InstanceSetImplementationSourceSelectorModal = observer(
           },
         }}
       >
-        <div className="modal search-modal">
-          <div className="modal__title">Choose a Source</div>
+        <Modal className="modal search-modal" darkMode={isDarkMode}>
+          <ModalTitle title="Choose a Source" />
           <CustomSelectorInput
             ref={sourceSelectorRef}
             options={options}
             onChange={changeSourceType}
             value={selectedSourceType}
             placeholder={`Select a source...`}
+            darkMode={isDarkMode}
             isClearable={true}
             filterOption={sourceFilterOption}
             formatOptionLabel={formatSourceOptionLabel}
           />
-        </div>
+        </Modal>
       </Dialog>
     );
   },

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

@@ -247,9 +247,13 @@ export const NewMappingElementModal = observer(() => {
           )}
           {showId && (
             <div>
+              <PanelDivider />
               Default ID could not be used, please specify one:
+              <PanelDivider />
               <input
-                className="input new-mapping-element-modal__id-input"
+                className={clsx('input new-mapping-element-modal__id-input', {
+                  'input--dark': darkMappingMode,
+                })}
                 ref={mappingIdInputRef}
                 spellCheck={false}
                 value={id}

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

@@ -32,16 +32,14 @@ import {
   guaranteeType,
   isNonNullable,
 } from '@finos/legend-shared';
-import {
-  generateColumnTypeLabel,
-  renderColumnTypeIcon,
-} from '../../connection-editor/DatabaseEditorHelper.js';
+import { renderColumnTypeIcon } from '../../connection-editor/DatabaseEditorHelper.js';
 import {
   type Type,
   type Table,
   type Join,
   type View,
   Column,
+  stringifyDataType,
 } from '@finos/legend-graph';
 
 export const TABLE_ELEMENT_DND_TYPE = 'TABLE_ELEMENT_DND_TYPE';
@@ -302,7 +300,7 @@ const RelationalOperationElementTreeNodeContainer: React.FC<
               tabIndex={-1}
               title="Column Type"
             >
-              {generateColumnTypeLabel(guaranteeType(node.column, Column).type)}
+              {stringifyDataType(guaranteeType(node.column, Column).type)}
             </button>
           </div>
         )}

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

@@ -49,6 +49,10 @@ import {
   RepoIcon,
   ModalFooterButton,
   Button,
+  Panel,
+  PanelHeader,
+  PanelHeaderActions,
+  PanelHeaderActionItem,
 } from '@finos/legend-art';
 import {
   MASTER_SNAPSHOT_ALIAS,
@@ -134,15 +138,13 @@ const ProjectDependencyActions = observer(
           text="View Dependency Explorer"
         />
         {Boolean(hasConflicts) && (
-          <button
+          <Button
             className="project-dependency-editor__conflicts-btn"
-            tabIndex={-1}
+            text="View Conflicts"
             onClick={viewConflict}
             disabled={!dependencyEditorState.dependencyReport?.conflicts.length}
             title="View any conflicts in your dependencies"
-          >
-            View Conflicts
-          </button>
+          />
         )}
       </div>
     );
@@ -650,7 +652,6 @@ const ProjectDependencyReportModal = observer(
       >
         <Modal darkMode={true} className="editor-modal">
           <ModalHeader title="Dependency Explorer" />
-
           <ModalBody>
             <div className="panel project-dependency-report">
               <PanelLoadingIndicator
@@ -660,7 +661,6 @@ const ProjectDependencyReportModal = observer(
                     dependencyEditorState.buildConflictPathState.isInProgress,
                 )}
               />
-
               <div className="panel__header project-dependency-report__tabs__header">
                 <div className="project-dependency-report__tabs">
                   {tabs.map((tab) => (
@@ -678,32 +678,30 @@ const ProjectDependencyReportModal = observer(
                 </div>
               </div>
               {reportTab === DEPENDENCY_REPORT_TAB.EXPLORER && (
-                <div className="panel project-dependency-explorer">
-                  <div className="panel__header">
+                <Panel className="project-dependency-explorer">
+                  <PanelHeader>
                     <div className="panel__header__title">
                       <div className="panel__header__title__label">
                         explorer
                       </div>
                     </div>
-                    <div className="panel__header__actions">
+                    <PanelHeaderActions>
                       {!flattenView && (
                         <>
-                          <button
-                            className="panel__header__action"
+                          <PanelHeaderActionItem
                             disabled={!treeData}
                             onClick={collapseTree}
-                            tabIndex={-1}
+                            title="Collapse Tree"
                           >
-                            <CompressIcon title="Collapse Tree" />
-                          </button>
-                          <button
-                            className="panel__header__action"
+                            <CompressIcon />
+                          </PanelHeaderActionItem>
+                          <PanelHeaderActionItem
                             disabled={!treeData || !dependencyReport}
                             onClick={openAllDependencyNodes}
-                            tabIndex={-1}
+                            title="Expand All Dependencies"
                           >
-                            <ExpandAllIcon title="Expand All Dependencies" />
-                          </button>
+                            <ExpandAllIcon />
+                          </PanelHeaderActionItem>
                         </>
                       )}
                       <div className="panel__header__action query-builder__functions-explorer__custom-icon">
@@ -719,8 +717,8 @@ const ProjectDependencyReportModal = observer(
                           />
                         )}
                       </div>
-                    </div>
-                  </div>
+                    </PanelHeaderActions>
+                  </PanelHeader>
                   <div className="project-dependency-explorer__content">
                     {treeData && (
                       <DependencyTreeView
@@ -729,7 +727,7 @@ const ProjectDependencyReportModal = observer(
                       />
                     )}
                   </div>
-                </div>
+                </Panel>
               )}
               {reportTab === DEPENDENCY_REPORT_TAB.CONFLICTS &&
                 dependencyReport && (