@finos/legend-application-studio 26.1.7 → 26.1.9

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

@@ -26,7 +26,13 @@ import {
 } from '../../../../stores/editor/editor-state/element-editor-state/connection/ConnectionEditorState.js';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import type { Class } from '@finos/legend-graph';
-import { CustomSelectorInput, LockIcon, PanelContent } from '@finos/legend-art';
+import {
+  CustomSelectorInput,
+  LockIcon,
+  Panel,
+  PanelContent,
+  PanelHeader,
+} from '@finos/legend-art';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import {
@@ -168,16 +174,10 @@ export const ConnectionEditor = observer(
       }
     };
     return (
-      <div className="panel connection-editor">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">
-              {connectionValueState.label()}
-            </div>
-          </div>
-        </div>
+      <Panel className="connection-editor">
+        <PanelHeader title={connectionValueState.label()} />
         <PanelContent>{renderConnectionValueEditor()}</PanelContent>
-      </div>
+      </Panel>
     );
   },
 );

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

@@ -42,6 +42,8 @@ import {
   ModalFooterButton,
   BlankPanelContent,
   KeyIcon,
+  PanelHeader,
+  Panel,
 } from '@finos/legend-art';
 import { useEffect } from 'react';
 import {
@@ -311,14 +313,8 @@ export const DatabaseBuilder = observer(
             <ResizablePanelGroup orientation="vertical">
               <ResizablePanel size={450}>
                 <div className="database-builder__config">
-                  <div className="panel__header">
-                    <div className="panel__header__title">
-                      <div className="panel__header__title__label">
-                        schema explorer
-                      </div>
-                    </div>
-                  </div>
-                  <div className="panel__content database-builder__config__content">
+                  <PanelHeader title="schema explorer" />
+                  <PanelContent className="database-builder__config__content">
                     {databaseBuilderState.treeData && (
                       <DatabaseBuilderExplorer
                         treeData={databaseBuilderState.treeData}
@@ -326,19 +322,14 @@ export const DatabaseBuilder = observer(
                         databaseBuilderState={databaseBuilderState}
                       />
                     )}
-                  </div>
+                  </PanelContent>
                 </div>
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel>
-                <div className="panel database-builder__model">
-                  <div className="panel__header">
-                    <div className="panel__header__title">
-                      <div className="panel__header__title__label">
-                        database model
-                      </div>
-                    </div>
-                  </div>
+                <Panel className="database-builder__model">
+                  <PanelHeader title="database model" />
+
                   <PanelContent>
                     <div className="database-builder__modeller">
                       <div className="panel__content__form__section database-builder__modeller__path">
@@ -377,7 +368,7 @@ export const DatabaseBuilder = observer(
                       </div>
                     </div>
                   </PanelContent>
-                </div>
+                </Panel>
               </ResizablePanel>
             </ResizablePanelGroup>
           </ModalBody>

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

@@ -128,6 +128,7 @@ import {
   snowflakeDatasourceSpec_setProxyHost,
   snowflakeDatasourceSpec_setProxyPort,
   snowflakeDatasourceSpec_setQuotedIdentifiersIgnoreCase,
+  snowflakeDatasourceSpec_setEnableQueryTags,
   snowflakeDatasourceSpec_setRegion,
   snowflakeDatasourceSpec_setRole,
   snowflakeDatasourceSpec_setWarehouseName,
@@ -585,6 +586,18 @@ const SnowflakeDatasourceSpecificationEditor = observer(
             )
           }
         />
+        <PanelFormBooleanField
+          isReadOnly={isReadOnly}
+          value={sourceSpec.enableQueryTags}
+          name="Enable Query Tags"
+          prompt="Controls whether engine sets a tag on each query for identification"
+          update={(value: boolean | undefined): void =>
+            snowflakeDatasourceSpec_setEnableQueryTags(
+              sourceSpec,
+              Boolean(value),
+            )
+          }
+        />
       </>
     );
   },

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

@@ -29,6 +29,7 @@ import {
   LockIcon,
   MenuContent,
   MenuContentItem,
+  PanelContentLists,
   PanelDropZone,
   PlusIcon,
 } from '@finos/legend-art';
@@ -353,7 +354,7 @@ export const DataElementEditor = observer(() => {
                   isDragOver={isStereotypeDragOver && !isReadOnly}
                   dropTargetConnector={dropStereotypeRef}
                 >
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <StereotypeDragPreviewLayer />
                     {dataElement.stereotypes.map((stereotype) => (
                       <StereotypeSelector
@@ -365,7 +366,7 @@ export const DataElementEditor = observer(() => {
                         darkTheme={true}
                       />
                     ))}
-                  </div>
+                  </PanelContentLists>
                 </PanelDropZone>
               </div>
             </div>
@@ -402,7 +403,7 @@ export const DataElementEditor = observer(() => {
                   isDragOver={isTaggedValueDragOver && !isReadOnly}
                   dropTargetConnector={dropTaggedValueRef}
                 >
-                  <div className="panel__content__lists">
+                  <PanelContentLists>
                     <TaggedValueDragPreviewLayer />
                     {dataElement.taggedValues.map((taggedValue) => (
                       <TaggedValueEditor
@@ -414,7 +415,7 @@ export const DataElementEditor = observer(() => {
                         darkTheme={true}
                       />
                     ))}
-                  </div>
+                  </PanelContentLists>
                 </PanelDropZone>
               </div>
             </div>

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

@@ -27,14 +27,18 @@ import {
   MenuContent,
   MenuContentItem,
   PanelContent,
+  PURE_ClassIcon,
   PURE_DataIcon,
   WrenchIcon,
+  type SelectComponent,
+  createFilter,
 } from '@finos/legend-art';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
 import {
   externalFormatData_setContentType,
   externalFormatData_setData,
+  modelStoreData_setDataModelModel,
 } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
 import type { DSL_Data_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Data_LegendStudioApplicationPlugin_Extension.js';
 import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/FileGenerationViewerState.js';
@@ -43,9 +47,19 @@ import {
   DataElementReferenceState,
   ExternalFormatDataState,
   RelationalCSVDataState,
+  ModelStoreDataState,
+  ModelEmbeddedDataState,
 } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
-import type { DataElement } from '@finos/legend-graph';
-import { buildElementOption } from '@finos/legend-lego/graph-editor';
+import {
+  PackageableElementExplicitReference,
+  type Class,
+  type DataElement,
+} from '@finos/legend-graph';
+import {
+  buildElementOption,
+  getPackageableElementOptionFormatter,
+  type PackageableElementOption,
+} from '@finos/legend-lego/graph-editor';
 import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
 import { CodeEditor } from '@finos/legend-lego/code-editor';
 
@@ -218,6 +232,111 @@ export const DataElementReferenceDataEditor = observer(
   },
 );
 
+export const ModelEmbeddedDataEditor = observer(
+  (props: {
+    modelDataState: ModelEmbeddedDataState;
+    modelStoreDataState: ModelStoreDataState;
+    isReadOnly: boolean;
+  }) => {
+    const { isReadOnly, modelStoreDataState, modelDataState } = props;
+    const modelData = modelDataState.modelData;
+    const classSelectorRef = useRef<SelectComponent>(null);
+    const elementFilterOption = createFilter({
+      ignoreCase: true,
+      ignoreAccents: false,
+      stringify: (option: PackageableElementOption<Class>): string =>
+        option.value.path,
+    });
+    const editorStore = modelStoreDataState.editorStore;
+    const _class = modelData.model.value;
+    const classOptions = editorStore.graphManagerState.usableClasses.map(
+      (_cl) => ({
+        value: _cl,
+        label: _cl.name,
+      }),
+    );
+
+    const selectedClassOption = {
+      value: _class,
+      label: _class.name,
+    };
+
+    const changeClass = (val: PackageableElementOption<Class> | null): void => {
+      if (val?.value) {
+        modelStoreData_setDataModelModel(
+          modelData,
+          PackageableElementExplicitReference.create(val.value),
+        );
+      }
+    };
+
+    return (
+      <div>
+        <div className="sample-data-generator__controller">
+          <div
+            className="sample-data-generator__controller__icon"
+            title="class"
+          >
+            <PURE_ClassIcon />
+          </div>
+          <CustomSelectorInput
+            ref={classSelectorRef}
+            className="sample-data-generator__controller__class-selector"
+            options={classOptions}
+            onChange={changeClass}
+            value={selectedClassOption}
+            darkMode={true}
+            filterOption={elementFilterOption}
+            formatOptionLabel={getPackageableElementOptionFormatter({
+              darkMode: true,
+            })}
+          />
+        </div>
+        <div>
+          {renderEmbeddedDataEditor(
+            modelDataState.embeddedDataState,
+            isReadOnly,
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const ModelStoreDataEditor = observer(
+  (props: {
+    modelStoreDataState: ModelStoreDataState;
+    isReadOnly: boolean;
+  }) => {
+    const { isReadOnly, modelStoreDataState } = props;
+
+    return (
+      <div className="panel connection-editor">
+        {modelStoreDataState.modelDataStates.map((_modelDataState) => {
+          if (_modelDataState instanceof ModelEmbeddedDataState) {
+            return (
+              <ModelEmbeddedDataEditor
+                key={_modelDataState.uuid}
+                modelDataState={_modelDataState}
+                modelStoreDataState={modelStoreDataState}
+                isReadOnly={isReadOnly}
+              />
+            );
+          }
+
+          return (
+            <UnsupportedEditorPanel
+              key={_modelDataState.uuid}
+              text={'Unsuppored Model Data Type'}
+              isReadOnly={false}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+);
+
 export const EmbeddedDataEditor = observer(
   (props: {
     embeddedDataEditorState: EmbeddedDataEditorState;
@@ -260,6 +379,13 @@ export function renderEmbeddedDataEditor(
         isReadOnly={isReadOnly}
       />
     );
+  } else if (embeddedDataState instanceof ModelStoreDataState) {
+    return (
+      <ModelStoreDataEditor
+        modelStoreDataState={embeddedDataState}
+        isReadOnly={isReadOnly}
+      />
+    );
   } else {
     const extraEmbeddedDataEditorRenderers =
       embeddedDataState.editorStore.pluginManager

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

@@ -21,11 +21,17 @@ import {
   Dialog,
   MenuContent,
   MenuContentItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
   PlusIcon,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
   ResizablePanelSplitterLine,
+  UploadIcon,
 } from '@finos/legend-art';
 import type { RelationalCSVDataTable } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
@@ -126,6 +132,52 @@ const RelationalCSVTableContextMenu = observer(
   }),
 );
 
+const ImportModal = observer(
+  (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
+    const { isReadOnly, dataState } = props;
+    const [csv, setCSV] = useState('');
+    const closeModal = (): void => dataState.closeCSVModal();
+    const importVal = (): void => {
+      dataState.importCSV(csv);
+      setCSV('');
+      closeModal();
+    };
+    const changeCSV: React.ChangeEventHandler<
+      HTMLTextAreaElement | HTMLInputElement
+    > = (event) => {
+      setCSV(event.target.value);
+    };
+    return (
+      <Dialog
+        open={dataState.showImportCSVModal}
+        onClose={closeModal}
+        classes={{ container: 'search-modal__container' }}
+        PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
+      >
+        <Modal darkMode={true} className="relational-data-editor__import">
+          <ModalHeader title="Import CSV" />
+          <ModalBody>
+            <textarea
+              className="relational-data-editor__import__textarea"
+              spellCheck={false}
+              value={csv}
+              onChange={changeCSV}
+              disabled={isReadOnly}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              text="Import"
+              title="Create new query"
+              onClick={importVal}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
 export const RelationalCSVDataEditor = observer(
   (props: { dataState: RelationalCSVDataState; isReadOnly: boolean }) => {
     const { dataState, isReadOnly } = props;
@@ -145,6 +197,7 @@ export const RelationalCSVDataEditor = observer(
       setSelectedTableFromContextMenu(undefined);
     const isTableActive = (table: RelationalCSVDataTable): boolean =>
       currentTableState?.table === table;
+    const showCSVModal = (): void => dataState.setShowImportCsvModal(true);
     return (
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel minSize={30} size={300}>
@@ -156,6 +209,15 @@ export const RelationalCSVDataEditor = observer(
                 </div>
               </div>
               <div className="relational-data-editor__header__actions">
+                <button
+                  className="schema-set-panel__header__action"
+                  onClick={showCSVModal}
+                  disabled={isReadOnly}
+                  tabIndex={-1}
+                  title="Import CSV"
+                >
+                  <UploadIcon />
+                </button>
                 <button
                   className="relational-data-editor__header__action"
                   onClick={openIdentifierModal}
@@ -250,6 +312,9 @@ export const RelationalCSVDataEditor = observer(
                   isReadOnly={isReadOnly}
                 />
               )}
+              {dataState.showImportCSVModal && (
+                <ImportModal dataState={dataState} isReadOnly={isReadOnly} />
+              )}
             </div>
           </div>
         </ResizablePanel>

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

@@ -18,6 +18,9 @@ import { useApplicationStore } from '@finos/legend-application';
 import {
   ArrowCircleLeftIcon,
   PanelContent,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
   RefreshIcon,
   ResizablePanel,
   ResizablePanelGroup,
@@ -83,14 +86,10 @@ export const ExternalFormatGeneratioConfigEditor = observer(
 
     return (
       <div className="panel file-generation-editor__configuration">
-        <div className="panel__header">
-          <div className="panel__header__title">
-            <div className="panel__header__title__label">{`${xtState.description.name} configuration`}</div>
-          </div>
-          <div className="panel__header__actions">
-            <button
-              className="panel__header__action file-generation-editor__configuration__reset-btn"
-              tabIndex={-1}
+        <PanelHeader title={`${xtState.description.name} configuration`}>
+          <PanelHeaderActions>
+            <PanelHeaderActionItem
+              className="file-generation-editor__configuration__reset-btn"
               disabled={
                 isReadOnly ||
                 !configSpecification.configurationProperties.length
@@ -99,9 +98,9 @@ export const ExternalFormatGeneratioConfigEditor = observer(
               title="Reset to default configuration"
             >
               <RefreshIcon />
-            </button>
-          </div>
-        </div>
+            </PanelHeaderActionItem>
+          </PanelHeaderActions>
+        </PanelHeader>
         <PanelContent>
           <div className="file-generation-editor__configuration__content">
             <ModelUnitEditor

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

@@ -41,6 +41,10 @@ import {
   FolderIcon,
   FileCodeIcon,
   PanelContent,
+  PanelHeader,
+  PanelHeaderActionItem,
+  PanelHeaderActions,
+  Panel,
 } from '@finos/legend-art';
 import type { GeneratedFileStructureState } from '../../../../stores/editor/editor-state/FileGenerationState.js';
 import {
@@ -213,29 +217,25 @@ export const FileSystemViewer = observer(
       <ResizablePanelGroup orientation="vertical">
         <ResizablePanel size={250} minSize={250}>
           <div className="generation-result-viewer__side-bar">
-            <div className="panel generation-result-viewer__explorer">
-              <div className="panel__header">
-                <div className="panel__header__title">
-                  <div className="panel__header__title__label">result</div>
-                </div>
-                <div className="panel__header__actions">
-                  <button
+            <Panel className="generation-result-viewer__explorer">
+              <PanelHeader title="result">
+                <PanelHeaderActions>
+                  <PanelHeaderActionItem
                     className={clsx(
-                      'panel__header__action  generation-result-viewer__regenerate-btn',
+                      'generation-result-viewer__regenerate-btn',
                       {
                         ' generation-result-viewer__regenerate-btn--loading':
                           generatedFileState.generatingAction.isInProgress,
                       },
                     )}
-                    tabIndex={-1}
                     disabled={generatedFileState.generatingAction.isInProgress}
                     onClick={regenerate}
                     title="Regenerate"
                   >
                     <RefreshIcon />
-                  </button>
-                </div>
-              </div>
+                  </PanelHeaderActionItem>
+                </PanelHeaderActions>
+              </PanelHeader>
               <PanelContent>
                 <PanelLoadingIndicator
                   isLoading={generatedFileState.generatingAction.isInProgress}
@@ -253,7 +253,7 @@ export const FileSystemViewer = observer(
                   </BlankPanelContent>
                 )}
               </PanelContent>
-            </div>
+            </Panel>
           </div>
         </ResizablePanel>
         <ResizablePanelSplitter>

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

@@ -78,8 +78,11 @@ export const NewSchemaSetDriverEditor = observer(() => {
     }
   };
   return (
-    <div>
-      <div className="">
+    <>
+      <div className="panel__content__form__section__header__label">
+        Schema Type
+      </div>
+      <div className="explorer__new-element-modal__driver">
         <CustomSelectorInput
           className="sub-panel__content__form__section__dropdown"
           options={options}
@@ -87,6 +90,6 @@ export const NewSchemaSetDriverEditor = observer(() => {
           value={newConnectionDriver.formatOption}
         />
       </div>
-    </div>
+    </>
   );
 });