@finos/legend-cube-builder 0.0.3 → 0.0.5

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

@@ -0,0 +1,117 @@
+/**
+ * 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 { 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,
+} from '../../stores/source-picker/CubeProjectTabState.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeOutlineSteps } from './CubeInlineModelTab.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+/**
+ * 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 }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    // 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;
+    return (
+      <div className="flex flex-col gap-2">
+        {tab.isLoadingProjects && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PROJECT_LABEL.LOADING_PROJECTS}
+          </div>
+        )}
+        <CubePickerStep
+          label="Project"
+          value={tab.projectKey}
+          options={(isFixed && tab.projectKey !== undefined
+            ? [tab.projectKey]
+            : (tab.projects ?? []).map(getCubeProjectKey)
+          ).map((key) => ({ value: key, label: key }))}
+          disabled={isFixed}
+          onChange={(key) => {
+            flowResult(tab.selectProject(key)).catch(
+              applicationStore.alertUnhandledError,
+            );
+          }}
+        />
+        <CubePickerStep
+          label="Version"
+          value={tab.versionId}
+          options={(tab.versions ?? []).map((version, index) => ({
+            value: version,
+            label:
+              index === 0 && !isFixed
+                ? `${version} ${CUBE_PROJECT_LABEL.LATEST}`
+                : version,
+          }))}
+          disabled={isFixed}
+          onChange={(version) => tab.selectVersion(version)}
+        />
+        {tab.isLoadingVersions && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PROJECT_LABEL.LOADING_VERSIONS}
+          </div>
+        )}
+        {tab.listError !== undefined && (
+          <div className="flex flex-col gap-1" role="alert">
+            <span className="text-base text-[var(--color-status-error)]">
+              {tab.listError}
+            </span>
+            {tab.projects === undefined && (
+              <span>
+                <CubeButton
+                  onClick={() => {
+                    flowResult(tab.loadProjects()).catch(
+                      applicationStore.alertUnhandledError,
+                    );
+                  }}
+                >
+                  Retry
+                </CubeButton>
+              </span>
+            )}
+          </div>
+        )}
+        <CubeOutlineSteps tab={tab} />
+        {noRuntime && (
+          <div
+            className="text-base text-[var(--color-status-warn)]"
+            role="note"
+          >
+            {CUBE_PROJECT_LABEL.NO_RUNTIME}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -24,58 +24,29 @@ import {
   ModalHeader,
   PanelLoadingIndicator,
 } from '@finos/legend-art';
-import { getRelationalDisplayName } from '@finos/legend-cube';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useId } from 'react';
 import {
-  CUBE_PENDING_LABEL,
-  CUBE_TABLE_FLAG_LABELS,
+  CUBE_PICK_TO_ADD_TITLE,
+  SELECT_SOURCE_TYPE_PROMPT,
 } from '../../__lib__/LegendCubeLabels.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
-import { isTableSelectable } from '../../stores/CubeSourcePickerState.js';
-import { CubeButton } from '../CubeButton.js';
-
-/** One step of the picker: a labelled list of choices, read-only when the cube fixes it */
-const CubePickerStep: React.FC<{
-  label: string;
-  value: string | undefined;
-  options: readonly { value: string; label: string }[];
-  disabled?: boolean;
-  onChange: (value: string | undefined) => void;
-}> = ({ label, value, options, disabled, onChange }) => {
-  const id = useId();
-  return (
-    <div className="flex items-center gap-2">
-      <label className="w-20 shrink-0 text-base" htmlFor={id}>
-        {label}
-      </label>
-      <select
-        id={id}
-        className="h-7 min-w-0 flex-1 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)]"
-        value={value ?? ''}
-        disabled={Boolean(disabled) || !options.length}
-        onChange={(event) => onChange(event.target.value || undefined)}
-      >
-        {value === undefined && <option value="">Choose…</option>}
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
+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 table to the cube (PLAN §6.2.7): a minimal dialog, which M3
- * redesigns. The table lands with its schema; the first one fixes the cube's
- * model and runtime.
+ * Adds a source to the cube (PLAN §6.1, §6.2.7, §6.8): a tab per way to find
+ * one, shown when the host offers more than one. The source lands with its
+ * schema; the first one fixes the cube's context, and with it the only tab
+ * enabled.
  */
-/** The Model option that offers a text box for Pure text */
-const PASTE_MODEL_OPTION = 'paste';
-
 export const CubeSourcePicker = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
@@ -83,13 +54,7 @@ export const CubeSourcePicker = observer(
     const { applicationStore } = editorState.host;
     const darkMode =
       !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
-    const isFixed = picker.fixedContext !== undefined;
-    const fixedModelLabel =
-      picker.models.find(
-        (model) =>
-          JSON.stringify(model.model) ===
-          JSON.stringify(picker.fixedContext?.model),
-      )?.label ?? "The cube's model";
+    const { activeTab, tabs } = picker;
     const confirm = (): void => {
       flowResult(picker.confirm()).catch(applicationStore.alertUnhandledError);
     };
@@ -98,194 +63,100 @@ export const CubeSourcePicker = observer(
       <Dialog open={picker.isOpen} onClose={() => picker.close()}>
         <Modal darkMode={darkMode} className="w-[640px] max-w-full">
           <ModalHeader>
-            <div className="modal__title">Add a table</div>
+            <div className="modal__title">Add a source</div>
           </ModalHeader>
           <PanelLoadingIndicator
-            isLoading={picker.isLoadingModel || picker.isResolving}
+            isLoading={!picker.isChoosingTab && activeTab.isBusy}
           />
           <ModalBody>
-            <div className="flex flex-col gap-2">
-              <CubePickerStep
-                label="Model"
-                value={
-                  isFixed
-                    ? 'fixed'
-                    : picker.isPastingModel
-                      ? PASTE_MODEL_OPTION
-                      : picker.models.find(
-                          (model) => model.model === picker.model,
-                        )?.id
-                }
-                options={
-                  isFixed
-                    ? [{ value: 'fixed', label: fixedModelLabel }]
-                    : [
-                        ...picker.models.map((model) => ({
-                          value: model.id,
-                          label: model.label,
-                        })),
-                        {
-                          value: PASTE_MODEL_OPTION,
-                          label: 'Paste Pure model…',
-                        },
-                      ]
-                }
-                disabled={isFixed}
-                onChange={(id) => {
-                  if (id === PASTE_MODEL_OPTION) {
-                    picker.startPastingModel();
-                    return;
-                  }
-                  const model = picker.models.find(
-                    (candidate) => candidate.id === id,
-                  );
-                  if (model) {
-                    flowResult(picker.selectModel(model.model)).catch(
-                      applicationStore.alertUnhandledError,
-                    );
-                  }
-                }}
-              />
-              {picker.isPastingModel && !isFixed && (
-                <div className="flex flex-col gap-1">
-                  <textarea
-                    className="h-40 w-full resize-y rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] p-1 font-mono text-sm text-[var(--color-text-primary)]"
-                    aria-label="Pure model"
-                    placeholder={
-                      '###Relational\nDatabase my::Database ( … )\n\n###Runtime\nRuntime my::Runtime { … }'
-                    }
-                    spellCheck={false}
-                    value={picker.pastedModelText}
-                    onChange={(event) =>
-                      picker.setPastedModelText(event.target.value)
-                    }
-                  />
-                  <div className="flex items-center gap-2">
-                    <CubeButton
-                      disabled={
-                        !picker.pastedModelText.trim() || picker.isLoadingModel
-                      }
-                      onClick={() => {
-                        flowResult(picker.loadPastedModel()).catch(
-                          applicationStore.alertUnhandledError,
-                        );
-                      }}
+            {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)]"
+                role="tablist"
+                aria-label="Source kinds"
+              >
+                {tabs.map((tab) => {
+                  const isActive = !picker.isChoosingTab && tab === activeTab;
+                  return (
+                    <button
+                      key={tab.key}
+                      type="button"
+                      role="tab"
+                      aria-selected={isActive}
+                      disabled={!picker.isTabEnabled(tab)}
+                      className={clsx(
+                        '-mb-px border-b-2 px-2 py-1 text-base enabled:cursor-pointer disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
+                        isActive
+                          ? 'border-[var(--color-accent)] text-[var(--color-text-primary)]'
+                          : 'border-transparent text-[var(--color-text-secondary)] enabled:hover:text-[var(--color-text-primary)]',
+                      )}
+                      onClick={() => picker.selectTab(tab.key)}
                     >
-                      Load model
-                    </CubeButton>
-                    <span className="text-sm text-[var(--color-text-muted)]">
-                      The cube keeps the model&apos;s text, which counts towards
-                      the 1 MiB a cube spec can hold.
-                    </span>
+                      {tab.label}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            <div
+              role={
+                tabs.length > 1 && !picker.isChoosingTab
+                  ? 'tabpanel'
+                  : undefined
+              }
+            >
+              <CubePickerConfirmContext.Provider value={confirm}>
+                {picker.isChoosingTab ? (
+                  <div className="py-4 text-center text-base text-[var(--color-text-secondary)]">
+                    {SELECT_SOURCE_TYPE_PROMPT}
                   </div>
-                </div>
-              )}
-              {picker.isLoadingModel && (
-                <div className="text-base text-[var(--color-text-secondary)]">
-                  {CUBE_PENDING_LABEL.LOADING_MODEL}
-                </div>
-              )}
-              <CubePickerStep
-                label="Database"
-                value={picker.databasePath}
-                options={picker.databases.map((database) => ({
-                  value: database.path,
-                  label: database.path,
-                }))}
-                disabled={picker.fixedDatabasePath !== undefined}
-                onChange={(path) => picker.selectDatabase(path)}
-              />
-              <CubePickerStep
-                label="Runtime"
-                value={picker.runtimePath}
-                options={picker.runtimes.map((runtime) => ({
-                  value: runtime.path,
-                  label: runtime.path,
-                }))}
-                disabled={picker.fixedContext?.runtime !== undefined}
-                onChange={(path) => picker.selectRuntime(path)}
-              />
-              <CubePickerStep
-                label="Schema"
-                value={picker.schemaName}
-                options={picker.schemas.map((schema) => ({
-                  value: schema.name,
-                  label: getRelationalDisplayName(schema.name),
-                }))}
-                onChange={(name) => picker.selectSchema(name)}
-              />
-              {picker.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={picker.tableSearch}
-                    onChange={(event) =>
-                      picker.setTableSearch(event.target.value)
-                    }
-                  />
-                  <ul
-                    className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
-                    aria-label="Tables"
-                  >
-                    {picker.tables.map((table) => {
-                      const selectable = isTableSelectable(table);
-                      const isPicked = picker.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={() => picker.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>
-              )}
-              {picker.isResolving && (
-                <div className="text-base text-[var(--color-text-secondary)]">
-                  {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
-                </div>
-              )}
-              {picker.error !== undefined && (
-                <div
-                  className="text-base text-[var(--color-status-error)]"
-                  role="alert"
-                >
-                  {picker.error}
-                </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}
             />