@finos/legend-application-studio 28.21.3 → 28.21.5

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

@@ -48,6 +48,14 @@ const NewRelationElementModal = observer(
   (props: { dataState: RelationElementsDataState; isReadOnly: boolean }) => {
     const { isReadOnly, dataState } = props;
     const applicationStore = dataState.editorStore.applicationStore;
+    const availableAccessorOptions = dataState.availableAccessorOptions;
+    const hasAccessorOptions =
+      dataState.accessorOptions !== undefined &&
+      availableAccessorOptions.length > 0;
+
+    const [selectedAccessor, setSelectedAccessor] = useState<
+      string | undefined
+    >(availableAccessorOptions[0]?.value);
 
     enum PathType {
       SCHEMA_TABLE = 'Schema and Table',
@@ -83,17 +91,29 @@ const NewRelationElementModal = observer(
     const closeModal = (): void =>
       dataState.setShowNewRelationElementModal(false);
     const handleSubmit = (): void => {
-      const path: string[] = [];
-      if (pathType && schemaName && tableName) {
-        path.push(schemaName);
-        path.push(tableName);
+      if (hasAccessorOptions && selectedAccessor) {
+        const option = availableAccessorOptions.find(
+          (o) => o.value === selectedAccessor,
+        );
+        if (option) {
+          const relationElement = new RelationElement();
+          relationElement.paths = [option.value];
+          relationElement.columns = option.columns;
+          relationElement.rows = [];
+          dataState.addRelationElement(relationElement);
+        }
+      } else {
+        const path: string[] = [];
+        if (pathType && schemaName && tableName) {
+          path.push(schemaName);
+          path.push(tableName);
+        }
+        const relationElement = new RelationElement();
+        relationElement.columns = [];
+        relationElement.rows = [];
+        relationElement.paths = path;
+        dataState.addRelationElement(relationElement);
       }
-      const relationElement = new RelationElement();
-      relationElement.columns = [];
-      relationElement.rows = [];
-      relationElement.paths = path;
-
-      dataState.addRelationElement(relationElement);
       closeModal();
     };
 
@@ -112,48 +132,84 @@ const NewRelationElementModal = observer(
           onSubmit={(event) => {
             event.preventDefault();
             handleSubmit();
-            closeModal();
           }}
           className="modal modal--dark search-modal"
         >
           <div className="modal__title">Add Relation Element</div>
           <div className="relational-data-editor__identifier">
-            <div className="relational-data-editor__identifier__values">
-              <CustomSelectorInput
-                className="explorer__new-element-modal__driver__dropdown"
-                options={pathTypeOptions}
-                onChange={onPathTypeChange}
-                value={pathType}
-                isClearable={false}
-                darkMode={
-                  !applicationStore.layoutService
-                    .TEMPORARY__isLightColorThemeEnabled
-                }
-              />
-            </div>
-            <>
-              <div className="relational-data-editor__identifier__values">
-                <input
-                  className="panel__content__form__section__input"
-                  disabled={isReadOnly}
-                  placeholder="schemaName"
-                  value={schemaName}
-                  onChange={changeSchemaValue}
-                />
-              </div>
+            {hasAccessorOptions ? (
               <div className="relational-data-editor__identifier__values">
-                <input
-                  className="relational-data-editor__identifier__values panel__content__form__section__input"
-                  disabled={isReadOnly}
-                  placeholder="tableName"
-                  value={tableName}
-                  onChange={changeTableValue}
+                <div className="panel__content__form__section__header__label">
+                  {dataState.accessorTypeLabel}
+                </div>
+                <CustomSelectorInput
+                  className="explorer__new-element-modal__driver__dropdown"
+                  options={availableAccessorOptions.map((o) => ({
+                    value: o.value,
+                    label: o.label,
+                  }))}
+                  onChange={(
+                    val: { value: string; label: string } | null,
+                  ): void => {
+                    setSelectedAccessor(val?.value);
+                  }}
+                  value={
+                    selectedAccessor
+                      ? {
+                          value: selectedAccessor,
+                          label: selectedAccessor,
+                        }
+                      : null
+                  }
+                  placeholder={`Select ${dataState.accessorTypeLabel ?? 'option'}...`}
+                  isClearable={false}
+                  darkMode={
+                    !applicationStore.layoutService
+                      .TEMPORARY__isLightColorThemeEnabled
+                  }
                 />
               </div>
-            </>
+            ) : (
+              <>
+                <div className="relational-data-editor__identifier__values">
+                  <CustomSelectorInput
+                    className="explorer__new-element-modal__driver__dropdown"
+                    options={pathTypeOptions}
+                    onChange={onPathTypeChange}
+                    value={pathType}
+                    isClearable={false}
+                    darkMode={
+                      !applicationStore.layoutService
+                        .TEMPORARY__isLightColorThemeEnabled
+                    }
+                  />
+                </div>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="schemaName"
+                    value={schemaName}
+                    onChange={changeSchemaValue}
+                  />
+                </div>
+                <div className="relational-data-editor__identifier__values">
+                  <input
+                    className="relational-data-editor__identifier__values panel__content__form__section__input"
+                    disabled={isReadOnly}
+                    placeholder="tableName"
+                    value={tableName}
+                    onChange={changeTableValue}
+                  />
+                </div>
+              </>
+            )}
           </div>
           <div className="search-modal__actions">
-            <button className="btn btn--dark" disabled={isReadOnly}>
+            <button
+              className="btn btn--dark"
+              disabled={isReadOnly || (hasAccessorOptions && !selectedAccessor)}
+            >
               Add
             </button>
           </div>
@@ -167,30 +223,30 @@ export const RelationElementEditor = observer(
   (props: {
     relationElementState: RelationElementState;
     isReadOnly: boolean;
+    hideColumnDefinitions?: boolean;
   }) => {
-    const { relationElementState, isReadOnly } = props;
+    const { relationElementState, isReadOnly, hideColumnDefinitions } = props;
     const editorStore = useEditorStore();
     const embeddedData = relationElementState.relationElement;
-    const [exportFormat, setExportFormat] = useState<'json' | 'csv' | 'sql'>(
-      'json',
-    );
+    const canEditColumns =
+      !isReadOnly && relationElementState.supportsColumnEditing;
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     const addColumn = (): void => {
-      if (!isReadOnly) {
+      if (canEditColumns) {
         const columnName = `column_${embeddedData.columns.length + 1}`;
         relationElementState.addColumn(columnName);
       }
     };
 
     const removeColumn = (index: number): void => {
-      if (!isReadOnly) {
+      if (canEditColumns) {
         relationElementState.removeColumn(index);
       }
     };
 
     const updateColumn = (index: number, value: string): void => {
-      if (!isReadOnly) {
+      if (canEditColumns) {
         const column = embeddedData.columns[index];
         if (column) {
           relationElementState.updateColumn(index, value);
@@ -239,39 +295,13 @@ export const RelationElementEditor = observer(
       }
     };
 
-    const exportData = (): void => {
-      let content = '';
-      let filename = '';
-      let mimeType = '';
-
-      switch (exportFormat) {
-        case 'json':
-          content = relationElementState.exportJSON();
-          filename = 'test_data.json';
-          mimeType = 'application/json';
-          break;
-        case 'csv':
-          content = relationElementState.exportCSV();
-          filename = 'test_data.csv';
-          mimeType = 'text/csv';
-          break;
-        case 'sql':
-          content = relationElementState.exportSQL();
-          filename = 'test_data.sql';
-          mimeType = 'text/sql';
-          break;
-        default:
-          content = relationElementState.exportJSON();
-          filename = 'test_data.json';
-          mimeType = 'application/json';
-          break;
-      }
-
-      const blob = new Blob([content], { type: mimeType });
+    const exportCSV = (): void => {
+      const content = relationElementState.exportCSV();
+      const blob = new Blob([content], { type: 'text/csv' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = filename;
+      a.download = 'test_data.csv';
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -301,53 +331,101 @@ export const RelationElementEditor = observer(
 
     return (
       <div className="relation-test-data-editor__content">
-        <div className="relation-test-data-editor__columns">
+        <div className="relation-test-data-editor__data">
           <div className="relation-test-data-editor__section-header">
-            <div className="relation-test-data-editor__section-title">
-              Column Definitions
+            <div className="relation-test-data-editor__section-header__left">
+              <div className="relation-test-data-editor__section-title">
+                Test Data ({embeddedData.rows.length} rows)
+              </div>
             </div>
-            <button
-              className="btn--icon btn--dark btn--sm"
-              onClick={addColumn}
-              disabled={isReadOnly}
-              title="Add Column"
-            >
-              <PlusIcon />
-            </button>
-          </div>
-          <div className="relation-test-data-editor__columns-grid">
-            {embeddedData.columns.map((column, index) => (
-              <div
-                key={`column-${guaranteeNonNullable(index)}`}
-                className="relation-test-data-editor__column-row"
-              >
-                <input
-                  className="relation-test-data-editor__column-input"
-                  type="text"
-                  value={column}
-                  onChange={(e) => updateColumn(index, e.target.value)}
-                  placeholder="Column Name"
-                  disabled={isReadOnly}
-                />
-                <button
-                  className="btn--icon btn--caution btn--dark btn--sm"
-                  onClick={() => removeColumn(index)}
-                  disabled={isReadOnly}
-                  title="Remove Column"
-                >
-                  <TimesIcon />
-                </button>
+            <div className="relation-test-data-editor__toolbar">
+              <div className="relation-test-data-editor__toolbar__left">
+                <div className="relation-test-data-editor__action-control">
+                  <span className="relation-test-data-editor__action-control__label">
+                    Add Column
+                  </span>
+                  <button
+                    className="btn--icon btn--dark btn--sm"
+                    onClick={addColumn}
+                    disabled={!canEditColumns}
+                    title="Add Column"
+                  >
+                    <PlusIcon />
+                  </button>
+                </div>
+                <div className="relation-test-data-editor__action-control">
+                  <span className="relation-test-data-editor__action-control__label">
+                    Add Row
+                  </span>
+                  <button
+                    className="btn--icon btn--dark btn--sm"
+                    onClick={addRow}
+                    disabled={isReadOnly || embeddedData.columns.length === 0}
+                    title="Add Row"
+                  >
+                    <PlusIcon />
+                  </button>
+                </div>
+              </div>
+              <div className="relation-test-data-editor__toolbar__right">
+                <div className="relation-test-data-editor__import-controls">
+                  <span className="relation-test-data-editor__import-controls__label">
+                    Upload CSV
+                  </span>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".csv"
+                    onChange={handleFileUpload}
+                    style={{ display: 'none' }}
+                    disabled={isReadOnly}
+                  />
+                  <button
+                    className="btn--icon btn--dark btn--sm"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isReadOnly}
+                    title="Upload CSV"
+                  >
+                    <UploadIcon />
+                  </button>
+                </div>
               </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="relation-test-data-editor__data">
-          <div className="relation-test-data-editor__section-header">
-            <div className="relation-test-data-editor__section-title">
-              Test Data ({embeddedData.rows.length} rows)
             </div>
           </div>
+          {!hideColumnDefinitions ? (
+            <div className="relation-test-data-editor__columns">
+              <div className="relation-test-data-editor__section-header">
+                <div className="relation-test-data-editor__section-title">
+                  Column Definitions
+                </div>
+              </div>
+              <div className="relation-test-data-editor__columns-grid">
+                {embeddedData.columns.map((column, index) => (
+                  <div
+                    key={`column-${guaranteeNonNullable(index)}`}
+                    className="relation-test-data-editor__column-row"
+                  >
+                    <input
+                      className="relation-test-data-editor__column-input"
+                      type="text"
+                      value={column}
+                      onChange={(e) => updateColumn(index, e.target.value)}
+                      placeholder="Column Name"
+                      disabled={!canEditColumns}
+                    />
+                    <button
+                      className="btn--icon btn--caution btn--dark btn--sm"
+                      onClick={() => removeColumn(index)}
+                      disabled={!canEditColumns}
+                      title="Remove Column"
+                    >
+                      <TimesIcon />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
           {embeddedData.rows.length === 0 ? (
             <div className="relation-test-data-editor__empty-data">
               <div className="relation-test-data-editor__empty-text">
@@ -357,71 +435,82 @@ export const RelationElementEditor = observer(
             </div>
           ) : (
             <div className="relation-test-data-editor__data-grid">
-              <div className="relation-test-data-editor__data-header">
-                {embeddedData.columns.map((column) => (
-                  <div
-                    key={column}
-                    className="relation-test-data-editor__data-header-cell"
-                  >
-                    {column}
-                    {/* <span className="relation-test-data-editor__data-type">
-                  ({column.type})
-                </span> */}
-                  </div>
-                ))}
-                <div className="relation-test-data-editor__data-header-cell relation-test-data-editor__data-actions">
-                  Actions
-                </div>
-              </div>
-              {embeddedData.rows.map((row, rowIndex) => (
-                <div
-                  key={`row-${guaranteeNonNullable(rowIndex)}`}
-                  className="relation-test-data-editor__data-row"
-                >
-                  {embeddedData.columns.map((column, columnIndex) => (
-                    <div
-                      key={column}
-                      className="relation-test-data-editor__data-cell"
+              <table className="relation-test-data-editor__table">
+                <thead>
+                  <tr>
+                    {embeddedData.columns.map((column, columnIndex) => (
+                      <th
+                        key={column}
+                        className="relation-test-data-editor__th"
+                      >
+                        <div className="relation-test-data-editor__th__inner">
+                          <span className="relation-test-data-editor__th__label">
+                            {column}
+                          </span>
+                          <button
+                            className="relation-test-data-editor__th__delete"
+                            onClick={() => removeColumn(columnIndex)}
+                            disabled={!canEditColumns}
+                            title={`Remove column ${column}`}
+                          >
+                            <TimesIcon />
+                          </button>
+                        </div>
+                      </th>
+                    ))}
+                    <th className="relation-test-data-editor__th relation-test-data-editor__th--actions" />
+                  </tr>
+                </thead>
+                <tbody>
+                  {embeddedData.rows.map((_row, rowIndex) => (
+                    <tr
+                      key={`row-${guaranteeNonNullable(rowIndex)}`}
+                      className="relation-test-data-editor__tr"
                     >
-                      <input
-                        type="text"
-                        value={row.values[columnIndex] ?? ''}
-                        onChange={(e) =>
-                          updateCellValue(rowIndex, columnIndex, e.target.value)
-                        }
-                        disabled={isReadOnly}
-                        className="relation-test-data-editor__data-input"
-                      />
-                    </div>
+                      {embeddedData.columns.map((column, columnIndex) => (
+                        <td
+                          key={column}
+                          className="relation-test-data-editor__td"
+                        >
+                          <input
+                            type="text"
+                            value={relationElementState.getDisplayValue(
+                              rowIndex,
+                              columnIndex,
+                            )}
+                            onChange={(e) =>
+                              updateCellValue(
+                                rowIndex,
+                                columnIndex,
+                                e.target.value,
+                              )
+                            }
+                            disabled={isReadOnly}
+                            className="relation-test-data-editor__data-input"
+                          />
+                        </td>
+                      ))}
+                      <td className="relation-test-data-editor__td relation-test-data-editor__td--actions">
+                        <button
+                          className="btn--icon btn--caution btn--dark btn--sm relation-test-data-editor__icon-button--compact"
+                          onClick={() => removeRow(rowIndex)}
+                          disabled={isReadOnly}
+                          title="Remove Row"
+                        >
+                          <TimesIcon />
+                        </button>
+                      </td>
+                    </tr>
                   ))}
-                  <div className="relation-test-data-editor__data-cell relation-test-data-editor__data-actions">
-                    <button
-                      className="btn--icon btn--caution btn--dark btn--sm"
-                      onClick={() => removeRow(rowIndex)}
-                      disabled={isReadOnly}
-                      title="Remove Row"
-                    >
-                      <TimesIcon />
-                    </button>
-                  </div>
-                </div>
-              ))}
+                </tbody>
+              </table>
             </div>
           )}
 
-          <div className="relation-test-data-editor__export-controls">
-            <div className="relation-test-data-editor__export-controls__btn-group">
+          <div className="relation-test-data-editor__footer-actions">
+            <div className="relation-test-data-editor__footer-actions__left">
               <button
                 className="btn--icon btn--dark btn--sm"
-                onClick={addRow}
-                disabled={isReadOnly || embeddedData.columns.length === 0}
-                title="Add Row"
-              >
-                <PlusIcon />
-              </button>
-
-              <button
-                className="btn--icon btn--caution btn--dark btn--sm"
                 onClick={handleClearData}
                 disabled={isReadOnly || embeddedData.rows.length === 0}
                 title="Clear All Data"
@@ -429,48 +518,20 @@ export const RelationElementEditor = observer(
                 <TrashIcon />
               </button>
             </div>
-            <div className="relation-test-data-editor__export-format">
-              <label htmlFor="exportFormat">Export as:</label>
-              <select
-                id="exportFormat"
-                value={exportFormat}
-                onChange={(e) =>
-                  setExportFormat(e.target.value as 'json' | 'csv' | 'sql')
-                }
-                disabled={isReadOnly}
-                className="relation-test-data-editor__export-select"
-              >
-                <option value="json">JSON</option>
-                <option value="csv">CSV</option>
-                <option value="sql">SQL INSERT</option>
-              </select>
-              <button
-                className="btn--icon btn--dark btn--sm"
-                onClick={exportData}
-                disabled={isReadOnly}
-                title={`Export as ${exportFormat.toUpperCase()}`}
-              >
-                <FileImportIcon />
-              </button>
-            </div>
-
-            <div className="relation-test-data-editor__import-controls">
-              <input
-                ref={fileInputRef}
-                type="file"
-                accept=".csv"
-                onChange={handleFileUpload}
-                style={{ display: 'none' }}
-                disabled={isReadOnly}
-              />
-              <button
-                className="btn--icon btn--dark btn--sm"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={isReadOnly}
-                title="Upload a file of CSV"
-              >
-                <UploadIcon />
-              </button>
+            <div className="relation-test-data-editor__footer-actions__right">
+              <div className="relation-test-data-editor__action-control">
+                <span className="relation-test-data-editor__action-control__label">
+                  Export CSV
+                </span>
+                <button
+                  className="btn--icon btn--dark btn--sm"
+                  onClick={exportCSV}
+                  disabled={isReadOnly}
+                  title="Export as CSV"
+                >
+                  <FileImportIcon />
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -480,15 +541,37 @@ export const RelationElementEditor = observer(
 );
 
 export const RelationElementsDataEditor = observer(
-  (props: { dataState: RelationElementsDataState; isReadOnly: boolean }) => {
-    const { dataState, isReadOnly } = props;
+  (props: {
+    dataState: RelationElementsDataState;
+    isReadOnly: boolean;
+    isSharedData?: boolean | undefined;
+    hideColumnDefinitions?: boolean;
+  }) => {
+    const { dataState, isReadOnly, isSharedData, hideColumnDefinitions } =
+      props;
 
     useApplicationNavigationContext(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_RELATIONAL_EDITOR,
     );
 
     const addRelationElement = (): void => {
-      dataState.setShowNewRelationElementModal(true);
+      const doAdd = (): void => {
+        if (
+          dataState.accessorOptions !== undefined &&
+          dataState.availableAccessorOptions.length === 0
+        ) {
+          dataState.editorStore.applicationStore.notificationService.notifyWarning(
+            `All referenced ${dataState.accessorTypeLabel ?? 'item'}s' data is already present`,
+          );
+          return;
+        }
+        dataState.setShowNewRelationElementModal(true);
+      };
+      if (dataState.refreshAccessorOptions) {
+        dataState.refreshAccessorOptions().then(doAdd).catch(doAdd);
+      } else {
+        doAdd();
+      }
     };
 
     const changeRelationElement = (
@@ -532,16 +615,30 @@ export const RelationElementsDataEditor = observer(
                   ) : (
                     <span>{relationElementState.relationElement.paths[0]}</span>
                   )}
+                  {!isReadOnly && !isSharedData && (
+                    <button
+                      className="service-editor__tab__close-btn"
+                      onClick={(e): void => {
+                        e.stopPropagation();
+                        dataState.deleteRelationElement(relationElementState);
+                      }}
+                      title="Delete"
+                    >
+                      <TimesIcon />
+                    </button>
+                  )}
                 </div>
               ))}
             </div>
-            <button
-              onClick={addRelationElement}
-              disabled={isReadOnly}
-              title="Add Relation Element"
-            >
-              <PlusIcon />
-            </button>
+            {!isSharedData && (
+              <button
+                onClick={addRelationElement}
+                disabled={isReadOnly}
+                title="Add Relation Element"
+              >
+                <PlusIcon />
+              </button>
+            )}
           </div>
           {dataState.relationElementStates.length === 0 ||
           dataState.activeRelationElement === undefined ? (
@@ -556,6 +653,9 @@ export const RelationElementsDataEditor = observer(
             <RelationElementEditor
               relationElementState={dataState.activeRelationElement}
               isReadOnly={isReadOnly}
+              {...(hideColumnDefinitions !== undefined
+                ? { hideColumnDefinitions }
+                : {})}
             />
           )}
         </PanelContent>