@finos/legend-application-studio 28.21.4 → 28.21.6

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

@@ -223,15 +223,13 @@ 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 canEditColumns =
       !isReadOnly && relationElementState.supportsColumnEditing;
-    const [exportFormat, setExportFormat] = useState<'json' | 'csv' | 'sql'>(
-      'json',
-    );
     const fileInputRef = useRef<HTMLInputElement>(null);
 
     const addColumn = (): void => {
@@ -297,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);
@@ -359,54 +331,103 @@ 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={!canEditColumns}
-              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={!canEditColumns}
-                />
-                <button
-                  className="btn--icon btn--caution btn--dark btn--sm"
-                  onClick={() => removeColumn(index)}
-                  disabled={!canEditColumns}
-                  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>
-          {embeddedData.rows.length === 0 ? (
+          {!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 &&
+          embeddedData.columns.length === 0 ? (
             <div className="relation-test-data-editor__empty-data">
               <div className="relation-test-data-editor__empty-text">
                 No test data rows. Click &quot;+&quot; below to start entering
@@ -415,71 +436,89 @@ 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={`col-${guaranteeNonNullable(columnIndex)}`}
+                        className="relation-test-data-editor__th"
+                      >
+                        <div className="relation-test-data-editor__th__inner">
+                          <input
+                            className="relation-test-data-editor__th__label relation-test-data-editor__th__label--editable"
+                            type="text"
+                            value={column}
+                            onChange={(e) =>
+                              updateColumn(columnIndex, e.target.value)
+                            }
+                            disabled={!canEditColumns}
+                            title={column}
+                          />
+                          <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"
@@ -487,48 +526,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>
@@ -538,8 +549,14 @@ 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,
@@ -606,7 +623,7 @@ export const RelationElementsDataEditor = observer(
                   ) : (
                     <span>{relationElementState.relationElement.paths[0]}</span>
                   )}
-                  {!isReadOnly && (
+                  {!isReadOnly && !isSharedData && (
                     <button
                       className="service-editor__tab__close-btn"
                       onClick={(e): void => {
@@ -621,13 +638,15 @@ export const RelationElementsDataEditor = observer(
                 </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 ? (
@@ -642,6 +661,9 @@ export const RelationElementsDataEditor = observer(
             <RelationElementEditor
               relationElementState={dataState.activeRelationElement}
               isReadOnly={isReadOnly}
+              {...(hideColumnDefinitions !== undefined
+                ? { hideColumnDefinitions }
+                : {})}
             />
           )}
         </PanelContent>

package/src/components/editor/editor-group/dataProduct/DataProductEditor.tsx

@@ -661,6 +661,7 @@ const SampleValuesEditorModal = observer(
                             accessPointState.relationElementState
                           }
                           isReadOnly={isReadOnly}
+                          hideColumnDefinitions={true}
                         />
                       </div>
                     </Tooltip>
@@ -2231,6 +2232,9 @@ const AccessPointGroupTab = observer(
 const DataProductSidebar = observer(
   (props: { dataProductEditorState: DataProductEditorState }) => {
     const { dataProductEditorState } = props;
+    const showTestingTab =
+      dataProductEditorState.editorStore.applicationStore.config.options
+        .NonProductionFeatureFlag;
     const sidebarTabs = [
       {
         label: DATA_PRODUCT_TAB.HOME,
@@ -2246,11 +2250,15 @@ const DataProductSidebar = observer(
         title: 'Operational Metadata',
         icon: <GearSuggestIcon />,
       },
-      {
-        label: DATA_PRODUCT_TAB.TESTING,
-        title: 'Testing',
-        icon: <FlaskIcon />,
-      },
+      ...(showTestingTab
+        ? [
+            {
+              label: DATA_PRODUCT_TAB.TESTING,
+              title: 'Testing',
+              icon: <FlaskIcon />,
+            },
+          ]
+        : []),
       {
         label: DATA_PRODUCT_TAB.SUPPORT,
         icon: <QuestionCircleIcon />,
@@ -3359,6 +3367,8 @@ export const DataProductEditor = observer(() => {
   const [showPreview, setShowPreview] = useState(false);
   const [dataProductViewerState, setDataProductViewerState] =
     useState<DataProductViewerState>();
+  const showTestingTab =
+    editorStore.applicationStore.config.options.NonProductionFeatureFlag;
 
   const selectedActivity = dataProductEditorState.selectedTab;
   const renderActivivtyBarTab = (): React.ReactNode => {
@@ -3392,12 +3402,12 @@ export const DataProductEditor = observer(() => {
           />
         );
       case DATA_PRODUCT_TAB.TESTING:
-        return (
+        return showTestingTab ? (
           <DataProductTestableEditor
             dataProductEditorState={dataProductEditorState}
             isReadOnly={isReadOnly}
           />
-        );
+        ) : null;
       default:
         return null;
     }
@@ -3413,6 +3423,15 @@ export const DataProductEditor = observer(() => {
     );
   }, [dataProductEditorState]);
 
+  useEffect(() => {
+    if (
+      !showTestingTab &&
+      dataProductEditorState.selectedTab === DATA_PRODUCT_TAB.TESTING
+    ) {
+      dataProductEditorState.setSelectedTab(DATA_PRODUCT_TAB.HOME);
+    }
+  }, [dataProductEditorState, showTestingTab]);
+
   useEffect(
     () =>
       autorun(