@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/components/source-picker/CubeDirectConnectionTab.tsx

@@ -0,0 +1,340 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { clsx } from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import {
+  CUBE_CSV_HELP_TEXT,
+  CUBE_DIRECT_HELP_TEXT,
+  CUBE_DIRECT_PENDING_LABEL,
+  getCubeConnectionSummaryLabel,
+  getHiddenColumnsLabel,
+} from '../../__lib__/LegendCubeDirectConnectionLabels.js';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_TABLE_FLAG_LABELS,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeDirectDatabaseType } from '../../graph-manager/CubeConnectionExplorer.js';
+import {
+  type CubeDirectConnectionTabState,
+  isExploredTableSelectable,
+} from '../../stores/source-picker/CubeDirectConnectionTabState.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+const INPUT_CLASS =
+  'rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]';
+
+/** The databases a direct connection can reach this round, as the form offers them (R44) */
+const DATABASE_TYPE_OPTIONS = [
+  { value: CubeDirectDatabaseType.H2, label: 'H2' },
+  { value: CubeDirectDatabaseType.DUCKDB, label: 'DuckDB' },
+];
+
+/**
+ * Loads a CSV, pasted or from a file, into the in-memory DuckDB database:
+ * Add writes it into the setup SQL as a table, which the viewer can edit
+ */
+const CubeCsvLoader = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const tableNameId = useId();
+    const fileId = useId();
+    return (
+      <details className="flex flex-col gap-1" aria-label="Load a CSV">
+        <summary className="cursor-pointer text-base">Load a CSV</summary>
+        <div className="mt-1 flex flex-col gap-2">
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_CSV_HELP_TEXT}
+          </span>
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={fileId}>
+              CSV file
+            </label>
+            <input
+              id={fileId}
+              type="file"
+              accept=".csv,text/csv,text/plain"
+              className="min-w-0 flex-1 text-base"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                // choosing the same file again reads it again
+                event.target.value = '';
+                if (file) {
+                  flowResult(tab.loadCsvFile(file)).catch(
+                    applicationStore.alertUnhandledError,
+                  );
+                }
+              }}
+            />
+          </div>
+          <textarea
+            aria-label="CSV"
+            className={clsx(
+              INPUT_CLASS,
+              'h-24 w-full resize-y p-1 font-mono text-sm',
+            )}
+            placeholder="Or paste a CSV here, its first row naming the columns"
+            spellCheck={false}
+            value={tab.csvText}
+            onChange={(event) => tab.setCsvText(event.target.value)}
+          />
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={tableNameId}>
+              Table
+            </label>
+            <input
+              id={tableNameId}
+              className={clsx(INPUT_CLASS, 'h-7 min-w-0 flex-1')}
+              placeholder="csv_data"
+              spellCheck={false}
+              value={tab.csvTableName}
+              onChange={(event) => tab.setCsvTableName(event.target.value)}
+            />
+            <CubeButton disabled={!tab.canAddCsv} onClick={() => tab.addCsv()}>
+              Add to setup SQL
+            </CubeButton>
+          </div>
+          {tab.csvNote !== undefined && (
+            <span
+              role="status"
+              className={clsx(
+                'text-sm',
+                tab.csvNote.isError
+                  ? 'text-[var(--color-status-error)]'
+                  : 'text-[var(--color-text-secondary)]',
+              )}
+            >
+              {tab.csvNote.message}
+            </span>
+          )}
+        </div>
+      </details>
+    );
+  },
+);
+
+/** The form of a connection the cube doesn't have yet */
+const CubeConnectionForm = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const setupSqlId = useId();
+    const pathId = useId();
+    return (
+      <div className="flex flex-col gap-2">
+        <CubePickerStep
+          label="Database"
+          value={tab.databaseType}
+          options={DATABASE_TYPE_OPTIONS}
+          onChange={(value) => {
+            if (value) {
+              tab.setDatabaseType(value as CubeDirectDatabaseType);
+            }
+          }}
+        />
+        {tab.databaseType === CubeDirectDatabaseType.DUCKDB && (
+          <div className="flex items-center gap-2">
+            <label className="w-20 shrink-0 text-base" htmlFor={pathId}>
+              File
+            </label>
+            <input
+              id={pathId}
+              className={clsx(INPUT_CLASS, 'h-7 min-w-0 flex-1')}
+              placeholder="In memory"
+              title={CUBE_DIRECT_HELP_TEXT.DUCKDB_PATH}
+              spellCheck={false}
+              value={tab.duckDbPath}
+              onChange={(event) => tab.setDuckDbPath(event.target.value)}
+            />
+          </div>
+        )}
+        {tab.databaseType === CubeDirectDatabaseType.DUCKDB && (
+          <CubeCsvLoader tab={tab} />
+        )}
+        <div className="flex flex-col gap-1">
+          <label className="text-base" htmlFor={setupSqlId}>
+            Setup SQL
+          </label>
+          <textarea
+            id={setupSqlId}
+            className={clsx(
+              INPUT_CLASS,
+              'h-32 w-full resize-y p-1 font-mono text-sm',
+            )}
+            spellCheck={false}
+            value={tab.setupSqlText}
+            onChange={(event) => tab.setSetupSqlText(event.target.value)}
+          />
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_DIRECT_HELP_TEXT.SETUP_SQL}
+          </span>
+          {tab.formProblem !== undefined && (
+            <span className="text-sm text-[var(--color-status-warn)]">
+              {tab.formProblem}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+/**
+ * The source picker's database connection tab (PLAN §6.8): a connection,
+ * tested by listing its schemas, then a schema's tables. The picker's own
+ * Add button adds the picked table.
+ */
+export const CubeDirectConnectionTab = observer(
+  (props: { tab: CubeDirectConnectionTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const { description, fixedConnection } = tab;
+    return (
+      <div className="flex flex-col gap-2">
+        {fixedConnection ? (
+          <div className="flex flex-col gap-1">
+            <div className="text-base" aria-label="Connection">
+              {description?.supported
+                ? getCubeConnectionSummaryLabel(description.summary)
+                : "Cube can't use the cube's connection:"}
+            </div>
+            {description && !description.supported && (
+              <ul className="list-disc pl-5 text-base text-[var(--color-status-error)]">
+                {description.problems.map((problem) => (
+                  <li key={problem}>{problem}</li>
+                ))}
+              </ul>
+            )}
+            <span className="text-sm text-[var(--color-text-muted)]">
+              {CUBE_DIRECT_HELP_TEXT.FIXED_CONNECTION}
+            </span>
+          </div>
+        ) : (
+          <CubeConnectionForm tab={tab} />
+        )}
+        <div className="flex items-center gap-2">
+          <CubeButton
+            disabled={!tab.canTest}
+            onClick={() => {
+              flowResult(tab.testConnection()).catch(
+                applicationStore.alertUnhandledError,
+              );
+            }}
+          >
+            {fixedConnection ? 'List schemas' : 'Test connection'}
+          </CubeButton>
+          {tab.isTesting && (
+            <span className="text-base text-[var(--color-text-secondary)]">
+              {CUBE_DIRECT_PENDING_LABEL.TESTING_CONNECTION}
+            </span>
+          )}
+        </div>
+        {tab.schemas !== undefined && tab.schemas.length > 0 && (
+          <CubePickerStep
+            label="Schema"
+            value={tab.schemaName}
+            options={tab.schemas.map((schema) => ({
+              value: schema,
+              label: schema,
+            }))}
+            onChange={(name) => tab.selectSchema(name)}
+          />
+        )}
+        {tab.isListing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_DIRECT_PENDING_LABEL.LISTING_TABLES}
+          </div>
+        )}
+        {tab.schemaTables !== undefined && (
+          <div className="flex flex-col gap-1">
+            <input
+              className={clsx(INPUT_CLASS, 'h-7')}
+              placeholder="Search tables"
+              aria-label="Search tables"
+              value={tab.tableSearch}
+              onChange={(event) => tab.setTableSearch(event.target.value)}
+            />
+            <ul
+              className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+              aria-label="Tables"
+            >
+              {tab.tables.map((table) => {
+                const selectable = isExploredTableSelectable(table);
+                const isPicked = tab.tableName === table.storedName;
+                const hidden = getHiddenColumnsLabel(table.hiddenColumnCount);
+                return (
+                  <li key={table.storedName}>
+                    <button
+                      type="button"
+                      className={clsx(
+                        'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+                        { 'bg-[var(--color-bg-selected)]': isPicked },
+                      )}
+                      aria-pressed={isPicked}
+                      disabled={!selectable}
+                      onClick={() => tab.selectTable(table.storedName)}
+                    >
+                      <span className="min-w-0 flex-1 truncate">
+                        {table.name}
+                      </span>
+                      {table.flags.map((flag) => (
+                        <span
+                          key={flag}
+                          className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                          title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                        >
+                          {CUBE_TABLE_FLAG_LABELS[flag].label}
+                        </span>
+                      ))}
+                      <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                        {table.columnCount} columns
+                        {hidden !== undefined && `, ${hidden}`}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+        {tab.isResolving && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <div
+            className="flex flex-col gap-1 text-base text-[var(--color-status-error)]"
+            role="alert"
+          >
+            <span>{tab.error.message}</span>
+            {tab.error.detail !== undefined && (
+              <details className="text-sm">
+                <summary className="cursor-pointer">Details</summary>
+                <pre className="whitespace-pre-wrap break-words">
+                  {tab.error.detail}
+                </pre>
+              </details>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/source-picker/CubeIngestTab.tsx

@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { clsx } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS } from '../../__lib__/LegendCubeDataProductLabels.js';
+import { getDroppedDefinitionsLabel } from '../../__lib__/LegendCubeIngestLabels.js';
+import {
+  CUBE_PENDING_LABEL,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import type { CubeDataProductEnvironmentType } from '../../graph-manager/CubeDataProduct.js';
+import type {
+  CubeIngestTabError,
+  CubeIngestTabState,
+} from '../../stores/source-picker/CubeIngestTabState.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+const INPUT_CLASS =
+  'h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]';
+
+const LIST_ITEM_CLASS =
+  'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]';
+
+/** An error as the tab shows it: its first line, the rest on demand, and an action when it has one */
+const CubeIngestTabAlert: React.FC<{
+  error: CubeIngestTabError;
+  children?: React.ReactNode;
+}> = ({ error, children }) => (
+  <div
+    className="flex flex-col gap-1 text-base text-[var(--color-status-error)]"
+    role="alert"
+  >
+    <span>{error.message}</span>
+    {error.detail !== undefined && (
+      <details className="text-sm">
+        <summary className="cursor-pointer">Details</summary>
+        <pre className="whitespace-pre-wrap break-words">{error.detail}</pre>
+      </details>
+    )}
+    {children}
+  </div>
+);
+
+/**
+ * The source dialog's Ingest tab (PLAN §6.7): Mode, the viewer's
+ * environment (read-only), a producer deployment, one of its definitions,
+ * then a data set with its columns. The cube's first data set fixes the
+ * Mode, the producer deployment and the warehouse.
+ */
+export const CubeIngestTab = observer((props: { tab: CubeIngestTabState }) => {
+  const { tab } = props;
+  const warehouseId = useId();
+  const settings = tab.fixedSettings;
+  const dropped = getDroppedDefinitionsLabel(
+    tab.definitionList?.droppedCount ?? 0,
+  );
+  return (
+    <div className="flex flex-col gap-2">
+      <CubePickerStep
+        label="Mode"
+        value={tab.environmentType}
+        options={(tab.catalog?.environmentTypes ?? []).map((type) => ({
+          value: type,
+          label: CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[type],
+        }))}
+        disabled={settings !== undefined}
+        onChange={(value) => {
+          if (value) {
+            tab.setEnvironmentType(value as CubeDataProductEnvironmentType);
+          }
+        }}
+      />
+      <div className="flex items-center gap-2 text-base">
+        <span className="w-20 shrink-0">Environment</span>
+        <span aria-label="Environment">
+          {tab.environment?.name ??
+            (tab.isLoadingEnvironment ? 'reading your environment' : '')}
+        </span>
+      </div>
+      <CubePickerStep
+        label="Producer"
+        value={tab.producerDeploymentId}
+        options={(tab.producers ?? []).map((producer) => ({
+          value: producer.deploymentId,
+          label: `Deployment ${producer.deploymentId}`,
+        }))}
+        disabled={settings !== undefined}
+        onChange={(value) => tab.selectProducer(value)}
+      />
+      {settings && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {`All of the cube's data sets come from producer deployment ${settings.producerDeploymentId}.`}
+        </span>
+      )}
+      {tab.producerDeploymentId !== undefined && (
+        <input
+          className={INPUT_CLASS}
+          placeholder="Search ingest definitions"
+          aria-label="Search ingest definitions"
+          value={tab.definitionSearch}
+          onChange={(event) => tab.setDefinitionSearch(event.target.value)}
+        />
+      )}
+      {tab.isListingDefinitions && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          listing ingest definitions
+        </div>
+      )}
+      {tab.definitionList && (
+        <ul
+          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+          aria-label="Ingest definitions"
+        >
+          {tab.shownDefinitions.map((candidate) => {
+            const isPicked = tab.definition?.urn === candidate.urn;
+            return (
+              <li key={candidate.urn}>
+                <button
+                  type="button"
+                  className={clsx(LIST_ITEM_CLASS, {
+                    'bg-[var(--color-bg-selected)]': isPicked,
+                  })}
+                  aria-pressed={isPicked}
+                  title={candidate.definition}
+                  onClick={() => tab.selectDefinition(candidate)}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {candidate.name}
+                  </span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {`${candidate.groupId}:${candidate.artifactId}`}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {dropped !== undefined && (
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {dropped}
+        </span>
+      )}
+      {tab.isDescribing && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          reading the definition
+        </div>
+      )}
+      {tab.dataSets && (
+        <ul
+          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+          aria-label="Data sets"
+        >
+          {tab.dataSets.map((dataSet) => {
+            const isPicked = tab.dataSetName === dataSet.name;
+            return (
+              <li key={dataSet.name}>
+                <button
+                  type="button"
+                  className={clsx(LIST_ITEM_CLASS, {
+                    'bg-[var(--color-bg-selected)]': isPicked,
+                  })}
+                  aria-pressed={isPicked}
+                  disabled={!dataSet.isPickable}
+                  title={dataSet.disabledReason}
+                  onClick={() => tab.selectDataSet(dataSet.name)}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {dataSet.name}
+                  </span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {dataSet.isPickable
+                      ? `${dataSet.schema?.columns.length ?? 0} columns`
+                      : dataSet.disabledReason}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {tab.dataSet?.schema && (
+        <section aria-label="Data set preview">
+          <CubeSchemaColumnsTable schema={tab.dataSet.schema} />
+        </section>
+      )}
+      <div className="flex items-center gap-2">
+        <label className="w-20 shrink-0 text-base" htmlFor={warehouseId}>
+          Warehouse
+        </label>
+        <input
+          id={warehouseId}
+          className={clsx(INPUT_CLASS, 'min-w-0 flex-1')}
+          spellCheck={false}
+          disabled={settings !== undefined || tab.editorState.readOnly}
+          title={tab.editorState.readOnly ? READ_ONLY_CUBE_TITLE : undefined}
+          value={tab.warehouse}
+          onChange={(event) => tab.setWarehouse(event.target.value)}
+        />
+      </div>
+      {tab.isAdding && (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+        </div>
+      )}
+      {tab.error !== undefined && (
+        <CubeIngestTabAlert error={tab.error}>
+          <div>
+            <CubeButton onClick={() => tab.retry()}>Retry</CubeButton>
+          </div>
+        </CubeIngestTabAlert>
+      )}
+    </div>
+  );
+});