@finos/legend-cube-builder 0.0.2 → 0.0.4

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

@@ -0,0 +1,191 @@
+/**
+ * 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 { getRelationalDisplayName } from '@finos/legend-cube';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_PENDING_LABEL,
+  CUBE_TABLE_FLAG_LABELS,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeInlineModelTabState,
+  isTableSelectable,
+} from '../../stores/source-picker/CubeInlineModelTabState.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+/**
+ * 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
+ */
+export const CubeOutlineSteps = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    return (
+      <>
+        {tab.isLoadingModel && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {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.isResolving && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <div
+            className="text-base text-[var(--color-status-error)]"
+            role="alert"
+          >
+            {tab.error}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+/**
+ * The source dialog's Sample Data tab (PLAN §6.2.7, §6.9): a bundled dataset,
+ * then a database, a runtime keyed by it, a schema and a table. The dialog's
+ * Add adds the table.
+ */
+export const CubeInlineModelTab = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const { applicationStore } = tab.editorState.host;
+    const isFixed = tab.fixedContext !== undefined;
+    const fixedModel = JSON.stringify(tab.fixedContext?.model);
+    const fixedModelLabel =
+      tab.models.find((model) =>
+        [model.model, ...(model.earlierModels ?? [])].some(
+          (candidate) => JSON.stringify(candidate) === fixedModel,
+        ),
+      )?.label ?? "The cube's model";
+    return (
+      <div className="flex flex-col gap-2">
+        <CubePickerStep
+          label="Dataset"
+          value={
+            isFixed
+              ? 'fixed'
+              : tab.models.find((model) => model.model === tab.model)?.id
+          }
+          options={
+            isFixed
+              ? [{ value: 'fixed', label: fixedModelLabel }]
+              : tab.models.map((model) => ({
+                  value: model.id,
+                  label: model.label,
+                }))
+          }
+          disabled={isFixed}
+          onChange={(id) => {
+            const model = tab.models.find((candidate) => candidate.id === id);
+            if (model) {
+              flowResult(tab.selectModel(model.model)).catch(
+                applicationStore.alertUnhandledError,
+              );
+            }
+          }}
+        />
+        <CubeOutlineSteps tab={tab} />
+      </div>
+    );
+  },
+);

package/src/components/source-picker/CubePickerStep.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 { useId } from 'react';
+
+/** One step of the picker: a labelled list of choices, read-only when the cube fixes it */
+export 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>
+  );
+};

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

@@ -0,0 +1,114 @@
+/**
+ * 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 {
+  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 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
+ */
+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.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/CubeSourcePicker.tsx

@@ -24,58 +24,23 @@ 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,
-} from '../../__lib__/LegendCubeLabels.js';
+import { 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 { CubeProjectTab } from './CubeProjectTab.js';
+import { CubeDirectConnectionTab } from './CubeDirectConnectionTab.js';
+import { CubeInlineModelTab } from './CubeInlineModelTab.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 +48,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,186 +57,62 @@ 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,
-                        );
-                      }}
+            {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>
-                  </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}
+                      {tab.label}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            <div
+              role={
+                tabs.length > 1 && !picker.isChoosingTab
+                  ? 'tabpanel'
+                  : 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} />
               )}
             </div>
           </ModalBody>