@finos/legend-cube-builder 0.0.4 → 0.0.6

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

@@ -14,7 +14,10 @@
  * limitations under the License.
  */
 
-import { clsx } from '@finos/legend-art';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { getRelationalDisplayName } from '@finos/legend-cube';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -24,18 +27,114 @@ import {
 } from '../../__lib__/LegendCubeLabels.js';
 import {
   type CubeInlineModelTabState,
+  CubeModelReadKind,
   isTableSelectable,
 } from '../../stores/source-picker/CubeInlineModelTabState.js';
+import { CubeFunctionSteps, CubeReadKindToggle } from './CubeFunctionSteps.js';
 import { CubePickerStep } from './CubePickerStep.js';
+import { CubeTablePreview } from './CubeTablePreview.js';
+
+/** A model's table steps: a database, a runtime keyed by it, a schema and a table */
+const CubeTableSteps = observer((props: { tab: CubeInlineModelTabState }) => {
+  const { tab } = props;
+  return (
+    <>
+      <CubePickerStep
+        label="Database"
+        value={tab.databasePath}
+        options={tab.databases.map((database) => ({
+          value: database.path,
+          label: database.path,
+        }))}
+        disabled={tab.fixedDatabasePath !== undefined}
+        onChange={(path) => tab.selectDatabase(path)}
+      />
+      <CubePickerStep
+        label="Runtime"
+        value={tab.runtimePath}
+        options={tab.runtimes.map((runtime) => ({
+          value: runtime.path,
+          label: runtime.path,
+        }))}
+        disabled={tab.fixedContext?.runtime !== undefined}
+        onChange={(path) => tab.selectRuntime(path)}
+      />
+      <CubePickerStep
+        label="Schema"
+        value={tab.schemaName}
+        options={tab.schemas.map((schema) => ({
+          value: schema.name,
+          label: getRelationalDisplayName(schema.name),
+        }))}
+        onChange={(name) => tab.selectSchema(name)}
+      />
+      {tab.schemaName !== undefined && (
+        <div className="flex flex-col gap-1">
+          <input
+            className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+            placeholder="Search tables"
+            aria-label="Search tables"
+            value={tab.tableSearch}
+            onChange={(event) => tab.setTableSearch(event.target.value)}
+          />
+          <ul
+            className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+            aria-label="Tables"
+          >
+            {tab.tables.map((table) => {
+              const selectable = isTableSelectable(table);
+              const isPicked = tab.tableNames.includes(table.name);
+              return (
+                <CubePickerListItem
+                  key={table.name}
+                  picked={isPicked}
+                  disabled={!selectable}
+                  adds={true}
+                  onPick={() => tab.selectTable(table.name)}
+                  onToggle={() => tab.toggleTable(table.name)}
+                  toggleLabel={getRelationalDisplayName(table.name)}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {getRelationalDisplayName(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
+                  </span>
+                </CubePickerListItem>
+              );
+            })}
+          </ul>
+          {tab.previewTableName !== undefined && (
+            <CubeTablePreview
+              name={getRelationalDisplayName(tab.previewTableName)}
+              columns={tab.previewedColumns}
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+});
 
 /**
  * The steps after a model is picked, shared by the Sample Data and Project
- * Database tabs: its loading, then a database, a runtime keyed by it, a schema
- * and a table, and why the last step failed
+ * Database tabs: its loading, then tables or functions (shown when the
+ * model has functions, PLAN §6.5), the steps to one, and why the last step
+ * failed
  */
 export const CubeOutlineSteps = observer(
   (props: { tab: CubeInlineModelTabState }) => {
     const { tab } = props;
+    const readsFunctions = tab.readKind === CubeModelReadKind.FUNCTION;
     return (
       <>
         {tab.isLoadingModel && (
@@ -43,84 +142,14 @@ export const CubeOutlineSteps = observer(
             {CUBE_PENDING_LABEL.LOADING_MODEL}
           </div>
         )}
-        <CubePickerStep
-          label="Database"
-          value={tab.databasePath}
-          options={tab.databases.map((database) => ({
-            value: database.path,
-            label: database.path,
-          }))}
-          disabled={tab.fixedDatabasePath !== undefined}
-          onChange={(path) => tab.selectDatabase(path)}
-        />
-        <CubePickerStep
-          label="Runtime"
-          value={tab.runtimePath}
-          options={tab.runtimes.map((runtime) => ({
-            value: runtime.path,
-            label: runtime.path,
-          }))}
-          disabled={tab.fixedContext?.runtime !== undefined}
-          onChange={(path) => tab.selectRuntime(path)}
-        />
-        <CubePickerStep
-          label="Schema"
-          value={tab.schemaName}
-          options={tab.schemas.map((schema) => ({
-            value: schema.name,
-            label: getRelationalDisplayName(schema.name),
-          }))}
-          onChange={(name) => tab.selectSchema(name)}
-        />
-        {tab.schemaName !== undefined && (
-          <div className="flex flex-col gap-1">
-            <input
-              className="h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
-              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 = isTableSelectable(table);
-                const isPicked = tab.tableName === table.name;
-                return (
-                  <li key={table.name}>
-                    <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.name)}
-                    >
-                      <span className="min-w-0 flex-1 truncate">
-                        {getRelationalDisplayName(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
-                      </span>
-                    </button>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
+        {tab.readKinds.length > 1 &&
+          (readsFunctions || Boolean(tab.outline?.functions?.length)) && (
+            <CubeReadKindToggle tab={tab} />
+          )}
+        {readsFunctions ? (
+          <CubeFunctionSteps tab={tab} />
+        ) : (
+          <CubeTableSteps tab={tab} />
         )}
         {tab.isResolving && (
           <div className="text-base text-[var(--color-text-secondary)]">

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

@@ -0,0 +1,118 @@
+/**
+ * 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 { CheckIcon, clsx } from '@finos/legend-art';
+import { createContext, useContext } from 'react';
+
+/**
+ * The source dialog's Add, for a list row that adds what it picks on a
+ * double-click or Enter; nothing outside the dialog
+ */
+export const CubePickerConfirmContext = createContext<(() => void) | undefined>(
+  undefined,
+);
+
+/** A list of the source dialog: rows on the input background, so hover shows */
+export const CUBE_PICKER_LIST_CLASS =
+  'rounded-sm border border-[var(--color-border-subtle)] bg-[var(--color-bg-input)]';
+
+/**
+ * A row of a list in the source dialog: a table, a data set, an access
+ * point, or a step towards one (a data product, an ingest definition).
+ * The picked row shows an accent bar, a check and a stronger background,
+ * which hovering doesn't hide. A row that picks what Add adds (`adds`) adds
+ * it on a double-click, or on Enter once picked (UX audit A1-A3, 2026-10-11).
+ * A row of a list that picks several (`onToggle`) has a checkbox beside it,
+ * which adds it to the picked rows or takes it out, as a Cmd or Ctrl click on
+ * the row does; a plain click picks the row alone, and a double-click adds it
+ * alone.
+ */
+export const CubePickerListItem: React.FC<{
+  picked: boolean;
+  disabled?: boolean | undefined;
+  title?: string | undefined;
+  /** Whether picking this row is the last choice before Add */
+  adds?: boolean | undefined;
+  onPick: () => void;
+  /** Adds the row to the picked ones or takes it out, in a list that picks several */
+  onToggle?: (() => void) | undefined;
+  /** What the row's checkbox is called, e.g. the table's name */
+  toggleLabel?: string | undefined;
+  children: React.ReactNode;
+}> = (props) => {
+  const {
+    picked,
+    disabled,
+    title,
+    adds,
+    onPick,
+    onToggle,
+    toggleLabel,
+    children,
+  } = props;
+  const confirm = useContext(CubePickerConfirmContext);
+  return (
+    <li className={onToggle ? 'flex items-center' : undefined}>
+      {onToggle && (
+        <input
+          type="checkbox"
+          className="ml-2 shrink-0"
+          aria-label={`Pick ${toggleLabel ?? 'this row'}`}
+          checked={picked}
+          disabled={disabled}
+          onChange={onToggle}
+        />
+      )}
+      <button
+        type="button"
+        className={clsx(
+          'flex w-full items-center gap-2 border-l-[3px] px-2 py-1 text-left text-base disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+          picked
+            ? 'border-[var(--color-accent)] bg-[var(--color-bg-selected)] font-medium'
+            : 'border-transparent enabled:hover:bg-[var(--color-bg-hover)]',
+        )}
+        aria-pressed={picked}
+        disabled={disabled}
+        title={title}
+        onClick={(event) => {
+          if (onToggle && (event.metaKey || event.ctrlKey)) {
+            onToggle();
+          } else {
+            onPick();
+          }
+        }}
+        onDoubleClick={() => {
+          if (adds && !disabled) {
+            onPick();
+            confirm?.();
+          }
+        }}
+        onKeyDown={(event) => {
+          // Enter on the picked row adds it; on another row, it picks it
+          if (event.key === 'Enter' && adds && picked && confirm) {
+            event.preventDefault();
+            confirm();
+          }
+        }}
+      >
+        {children}
+        <span className="flex w-4 shrink-0 justify-center text-[var(--color-accent)]">
+          {picked && <CheckIcon aria-hidden={true} />}
+        </span>
+      </button>
+    </li>
+  );
+};

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

@@ -17,6 +17,7 @@
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { CUBE_PROJECT_LABEL } from '../../__lib__/LegendCubeProjectLabels.js';
+import { CubeModelReadKind } from '../../stores/source-picker/CubeInlineModelTabState.js';
 import {
   type CubeProjectTabState,
   getCubeProjectKey,
@@ -26,9 +27,10 @@ import { CubeOutlineSteps } from './CubeInlineModelTab.js';
 import { CubePickerStep } from './CubePickerStep.js';
 
 /**
- * The source dialog's Project Database tab (PLAN §6.3): a published project,
- * one of its released versions, then, as in the Sample Data tab, one of its
- * own Databases, a runtime keyed by it, a schema and a table
+ * The source dialog's Project Database and Project Function tabs (PLAN
+ * §6.3, §6.5): a published project, one of its released versions, then, as
+ * in the Sample Data tab, one of its own Databases, a runtime keyed by it, a
+ * schema and a table; or one of its own functions, its runtime and values
  */
 export const CubeProjectTab = observer(
   (props: { tab: CubeProjectTabState }) => {
@@ -37,6 +39,7 @@ export const CubeProjectTab = observer(
     // the cube's model is fixed, even one Cube can't read as a project
     const isFixed = tab.fixedContext !== undefined;
     const noRuntime =
+      tab.readKind === CubeModelReadKind.TABLE &&
       tab.databasePath !== undefined &&
       !tab.isLoadingModel &&
       tab.runtimes.length === 0;

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

@@ -0,0 +1,151 @@
+/**
+ * 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 { observer } from 'mobx-react-lite';
+import {
+  CUBE_SERVICE_MESSAGE,
+  getShownServicesLabel,
+} from '../../__lib__/LegendCubeServiceLabels.js';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import type { CubeServiceTabState } from '../../stores/source-picker/CubeServiceTabState.js';
+import { CubeButton } from '../CubeButton.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.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)]';
+
+/**
+ * The source dialog's Service tab (PLAN §6.4), in progress: the deployed
+ * services, searched by title, name and pattern, and the picked one's
+ * details. A service can be added, but Cube can't read it yet.
+ */
+export const CubeServiceTab = observer(
+  (props: { tab: CubeServiceTabState }) => {
+    const { tab } = props;
+    const picked = tab.service;
+    const shownLabel = getShownServicesLabel(
+      tab.shownServices.length,
+      tab.matchingServices.length,
+    );
+    return (
+      <div className="flex flex-col gap-2">
+        <span className="text-sm text-[var(--color-text-muted)]">
+          {CUBE_SERVICE_MESSAGE.IN_PROGRESS}
+        </span>
+        <input
+          className={INPUT_CLASS}
+          placeholder="Search services"
+          aria-label="Search services"
+          value={tab.search}
+          onChange={(event) => tab.setSearch(event.target.value)}
+        />
+        {tab.isLoading && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            listing services
+          </div>
+        )}
+        {tab.services && (
+          <>
+            {tab.shownServices.length ? (
+              <ul
+                className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+                aria-label="Services"
+              >
+                {tab.shownServices.map((service) => (
+                  <CubePickerListItem
+                    key={service.pattern}
+                    picked={tab.pattern === service.pattern}
+                    title={service.name}
+                    adds={true}
+                    onPick={() => tab.selectService(service.pattern)}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {service.title ?? service.name}
+                    </span>
+                    <span className="max-w-[50%] shrink-0 truncate text-sm text-[var(--color-text-muted)]">
+                      {service.pattern}
+                    </span>
+                  </CubePickerListItem>
+                ))}
+              </ul>
+            ) : (
+              <div className="text-base text-[var(--color-text-secondary)]">
+                {tab.services.length
+                  ? CUBE_SERVICE_MESSAGE.NO_MATCH
+                  : CUBE_SERVICE_MESSAGE.NONE}
+              </div>
+            )}
+            {shownLabel !== undefined && (
+              <span className="text-sm text-[var(--color-text-muted)]">
+                {shownLabel}
+              </span>
+            )}
+          </>
+        )}
+        {picked && (
+          <section
+            aria-label="Service details"
+            className="flex flex-col gap-1 text-base"
+          >
+            <span className="break-all font-medium">{picked.name}</span>
+            <span className="break-all text-[var(--color-text-secondary)]">
+              {picked.pattern}
+            </span>
+            {picked.owners.length > 0 && (
+              <span className="text-sm text-[var(--color-text-muted)]">
+                {`Owners: ${picked.owners.join(', ')}`}
+              </span>
+            )}
+            {picked.documentation.trim() !== '' && (
+              <p className="max-h-20 overflow-auto whitespace-pre-wrap text-sm text-[var(--color-text-secondary)]">
+                {picked.documentation}
+              </p>
+            )}
+          </section>
+        )}
+        {tab.isAdding && (
+          <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>
+            )}
+            {tab.services === undefined && (
+              <div>
+                <CubeButton onClick={() => tab.retry()}>Retry</CubeButton>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -26,14 +26,20 @@ import {
 } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { SELECT_SOURCE_TYPE_PROMPT } from '../../__lib__/LegendCubeLabels.js';
+import {
+  CUBE_PICK_TO_ADD_TITLE,
+  SELECT_SOURCE_TYPE_PROMPT,
+} from '../../__lib__/LegendCubeLabels.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { CubeSourcePickerTabKey } from '../../stores/source-picker/CubeSourcePickerTab.js';
 import { CubeDataProductTab } from './CubeDataProductTab.js';
 import { CubeIngestTab } from './CubeIngestTab.js';
+import { CubeServiceTab } from './CubeServiceTab.js';
 import { CubeProjectTab } from './CubeProjectTab.js';
 import { CubeDirectConnectionTab } from './CubeDirectConnectionTab.js';
 import { CubeInlineModelTab } from './CubeInlineModelTab.js';
+import { CubePickerConfirmContext } from './CubePickerListItem.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
 
 /**
  * Adds a source to the cube (PLAN §6.1, §6.2.7, §6.8): a tab per way to find
@@ -63,6 +69,17 @@ export const CubeSourcePicker = observer(
             isLoading={!picker.isChoosingTab && activeTab.isBusy}
           />
           <ModalBody>
+            {picker.isFromExamples && (
+              // a link back, under the title, as the dialog came from Examples
+              <button
+                type="button"
+                className="mb-2 self-start text-base text-[var(--color-accent)] hover:underline"
+                title="Back to the examples, to open an example cube instead"
+                onClick={() => picker.backToExamples()}
+              >
+                ← Back to Examples
+              </button>
+            )}
             {tabs.length > 1 && (
               <div
                 className="mb-2 flex gap-1 border-b border-[var(--color-border-subtle)]"
@@ -99,28 +116,47 @@ export const CubeSourcePicker = observer(
                   : undefined
               }
             >
-              {picker.isChoosingTab ? (
-                <div className="py-4 text-center text-base text-[var(--color-text-secondary)]">
-                  {SELECT_SOURCE_TYPE_PROMPT}
-                </div>
-              ) : activeTab.key === CubeSourcePickerTabKey.DIRECT_CONNECTION ? (
-                <CubeDirectConnectionTab tab={picker.directTab} />
-              ) : activeTab.key === CubeSourcePickerTabKey.DATA_PRODUCT ? (
-                <CubeDataProductTab tab={picker.dataProductTab} />
-              ) : activeTab.key === CubeSourcePickerTabKey.INGEST ? (
-                <CubeIngestTab tab={picker.ingestTab} />
-              ) : activeTab.key === CubeSourcePickerTabKey.PROJECT ? (
-                <CubeProjectTab tab={picker.projectTab} />
-              ) : (
-                <CubeInlineModelTab tab={picker.modelTab} />
-              )}
+              <CubePickerConfirmContext.Provider value={confirm}>
+                {picker.isChoosingTab ? (
+                  <div className="py-4 text-center text-base text-[var(--color-text-secondary)]">
+                    {SELECT_SOURCE_TYPE_PROMPT}
+                  </div>
+                ) : activeTab.key ===
+                  CubeSourcePickerTabKey.DIRECT_CONNECTION ? (
+                  <CubeDirectConnectionTab tab={picker.directTab} />
+                ) : activeTab.key === CubeSourcePickerTabKey.DATA_PRODUCT ? (
+                  <CubeDataProductTab tab={picker.dataProductTab} />
+                ) : activeTab.key === CubeSourcePickerTabKey.INGEST ? (
+                  <CubeIngestTab tab={picker.ingestTab} />
+                ) : activeTab.key === CubeSourcePickerTabKey.PROJECT ? (
+                  <CubeProjectTab tab={picker.projectTab} />
+                ) : activeTab.key ===
+                  CubeSourcePickerTabKey.PROJECT_FUNCTION ? (
+                  <CubeProjectTab tab={picker.projectFunctionTab} />
+                ) : activeTab.key === CubeSourcePickerTabKey.SERVICE ? (
+                  <CubeServiceTab tab={picker.serviceTab} />
+                ) : (
+                  <CubeInlineModelTab tab={picker.modelTab} />
+                )}
+              </CubePickerConfirmContext.Provider>
             </div>
           </ModalBody>
           <ModalFooter>
             <ModalFooterButton
-              darkMode={darkMode}
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
               formatText={false}
-              text="Add"
+              text={
+                (picker.activeTab.pickedCount ?? 1) > 1
+                  ? `Add ${picker.activeTab.pickedCount}`
+                  : 'Add'
+              }
+              // the legacy footer button looks the same disabled
+              className="disabled:cursor-not-allowed disabled:opacity-50"
+              title={
+                picker.canConfirm
+                  ? 'Add it to the cube'
+                  : CUBE_PICK_TO_ADD_TITLE
+              }
               disabled={!picker.canConfirm}
               onClick={confirm}
             />

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

@@ -0,0 +1,49 @@
+/**
+ * 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 type { Schema } from '@finos/legend-cube';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+
+/**
+ * The columns of the table picked last, under the source dialog's list, as
+ * an access point's preview shows them (the review of the demo, 2026-10-13):
+ * loading, then the columns, or why they couldn't be read. A failure doesn't
+ * keep the table from being added: Add asks the engine again.
+ */
+export const CubeTablePreview: React.FC<{
+  /** The table's name, as the list shows it */
+  name: string;
+  /** Its columns, or why they couldn't be read; `undefined` while they load */
+  columns: Schema | string | undefined;
+}> = ({ name, columns }) => (
+  <section
+    className="flex max-h-48 flex-col gap-1 overflow-auto rounded-sm border border-[var(--color-border-default)] p-2"
+    aria-label="Table preview"
+  >
+    <span className="font-medium">{`Columns of ${name}`}</span>
+    {columns === undefined ? (
+      <span className="text-base text-[var(--color-text-secondary)]">
+        loading columns
+      </span>
+    ) : typeof columns === 'string' ? (
+      <span className="text-base text-[var(--color-status-error)]">
+        {columns}
+      </span>
+    ) : (
+      <CubeSchemaColumnsTable schema={columns} />
+    )}
+  </section>
+);