@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/editors/CubeGroupEditor.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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 {
+  AggregationFunction,
+  getAvailableAggregations,
+  GROUP_AGGREGATION_USE,
+  type Schema,
+  validateColumnAggregation,
+} from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import {
+  COLUMN_NAME_RULES_HINT,
+  CUBE_GROUP_COLUMN_DISABLED_REASON,
+  GROUP_EDITOR_NOTES,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeGroupRow,
+  CubeGroupDraft,
+  isBuiltGroupRow,
+} from '../../stores/editors/CubeGroupDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeAggregationRowEditor } from './CubeAggregationRowEditor.js';
+import { CubeColumnChecklist } from './CubeColumnChecklist.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const KEYS = 'Group columns';
+
+/**
+ * The functions a row can take: those its column's type offers, or every
+ * column function before a column is picked, then Count rows; a function the
+ * row holds that isn't among them (an unknown one kept as saved, or one its
+ * column doesn't offer) stays listed, so the problem can be seen and fixed
+ */
+const functionOptions = (row: CubeGroupRow, schema: Schema): string[] => {
+  const type = row.column ? schema.lookup(row.column)?.type : undefined;
+  const offered: string[] = [
+    ...(type
+      ? getAvailableAggregations(type)
+      : Object.values(AggregationFunction).filter(
+          (fn) => fn !== AggregationFunction.COUNT_ROWS,
+        )),
+    AggregationFunction.COUNT_ROWS,
+  ];
+  return row.function && !offered.includes(row.function)
+    ? [row.function, ...offered]
+    : offered;
+};
+
+/**
+ * The Group editor (spec §17.6, PLAN §11.5): the input's columns, each ticked
+ * to group by it (a column that can't be compared is shown but can't be
+ * ticked), then rows of aggregation column, function and output name. Each
+ * row shows its first problem, as the node checks it. Rows can always be
+ * added: a column can be aggregated several ways. The lists scroll on their
+ * own, so the editor fits wherever it is shown.
+ */
+export const CubeGroupEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeGroupDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { aggregations } = draft;
+  // a row's problem, as the node will judge it; a row left out has none
+  let aggregationIndex = 0;
+  const problems = draft.rows.map((row) => {
+    if (!isBuiltGroupRow(row)) {
+      return undefined;
+    }
+    const errors: string[] = [];
+    validateColumnAggregation(aggregations, aggregationIndex, schema, errors);
+    aggregationIndex += 1;
+    return errors[0];
+  });
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <CubeColumnChecklist
+        label={KEYS}
+        schema={schema}
+        picked={draft.columns}
+        disabledReason={CUBE_GROUP_COLUMN_DISABLED_REASON}
+        clearTitle="Untick every group column: one row for all the rows"
+        readOnly={readOnly}
+        onToggle={(name) => draft.toggleColumn(name, schema)}
+        onClear={() => draft.clearColumns()}
+      />
+      <ul aria-label="Aggregations">
+        {draft.rows.map((row, index) => (
+          <CubeAggregationRowEditor
+            key={row.key}
+            row={row}
+            position={index + 1}
+            schema={schema}
+            use={GROUP_AGGREGATION_USE}
+            functions={functionOptions(row, schema)}
+            noColumnText={() => 'Every row'}
+            problem={problems[index]}
+            readOnly={readOnly}
+            onColumn={(column) => draft.setColumn(row.key, column)}
+            onFunction={(fn) => draft.setFunction(row.key, fn)}
+            onName={(name) => draft.setName(row.key, name)}
+            onRemove={() => draft.removeRow(row.key)}
+          />
+        ))}
+      </ul>
+      <div>
+        <CubeButton
+          title="Add an aggregation"
+          disabled={readOnly}
+          onClick={() => draft.addRow()}
+        >
+          Add aggregation
+        </CubeButton>
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {[...GROUP_EDITOR_NOTES, COLUMN_NAME_RULES_HINT].map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeIngestSourceEditor.tsx

@@ -0,0 +1,104 @@
+/**
+ * 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 { IngestDatasetSource } from '@finos/legend-cube';
+import { PanelLoadingIndicator } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS } from '../../__lib__/LegendCubeDataProductLabels.js';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { getCubeIngestSettings } from '../../graph-manager/CubeIngest.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+import { CubeWarehouseControl } from './CubeWarehouseControl.js';
+
+/**
+ * An ingest data set (PLAN §6.7): where it reads from, the cube's class,
+ * producer deployment and warehouse, which can be edited, its columns as
+ * its deployed definition declares them, and Refresh, which reads the
+ * definition again
+ */
+export const CubeIngestSourceEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState, readOnly } = props;
+  const source = guaranteeType(props.draft.original, IngestDatasetSource);
+  const { resolution } = source;
+  const refreshing = editorState.isPendingSource(source);
+  const model = editorState.document.context?.model;
+  const settings = model ? getCubeIngestSettings(model) : undefined;
+  return (
+    <div className="relative flex flex-col gap-2">
+      <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-base">
+        <dt className="text-[var(--color-text-secondary)]">Definition</dt>
+        <dd className="min-w-0 break-all" title={source.ingestDefinitionUrn}>
+          {source.ingestDefinition}
+        </dd>
+        <dt className="text-[var(--color-text-secondary)]">Data set</dt>
+        <dd className="min-w-0 break-all">{source.dataSet}</dd>
+        {settings && (
+          <>
+            <dt className="text-[var(--color-text-secondary)]">Environment</dt>
+            <dd className="min-w-0 break-all">
+              {CUBE_DATA_PRODUCT_ENVIRONMENT_LABELS[settings.environmentType]}
+            </dd>
+            <dt className="text-[var(--color-text-secondary)]">Producer</dt>
+            <dd className="min-w-0 break-all">
+              {`Deployment ${settings.producerDeploymentId}`}
+            </dd>
+            <dt className="self-center text-[var(--color-text-secondary)]">
+              Warehouse
+            </dt>
+            <dd className="min-w-0">
+              <CubeWarehouseControl
+                runtime={editorState.dataProductRuntime}
+                readOnly={readOnly}
+              />
+            </dd>
+          </>
+        )}
+      </dl>
+      <div className="flex items-center gap-2">
+        <CubeButton
+          title="Read the data set's columns again from the deployed ingest definition"
+          disabled={refreshing}
+          onClick={() => {
+            flowResult(editorState.refreshSource(source.id)).catch(
+              editorState.host.applicationStore.alertUnhandledError,
+            );
+          }}
+        >
+          Refresh
+        </CubeButton>
+        {refreshing && (
+          <span className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.REFRESHING_SOURCE}
+          </span>
+        )}
+      </div>
+      <PanelLoadingIndicator isLoading={refreshing} />
+      {resolution.kind === 'resolved' ? (
+        <CubeSchemaColumnsTable schema={resolution.schema} />
+      ) : (
+        <div className="text-base text-[var(--color-text-secondary)]">
+          {resolution.kind === 'failed'
+            ? resolution.message
+            : 'The data set has not been typed yet.'}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/editors/CubeJoinEditor.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { TimesIcon } from '@finos/legend-art';
 import {
-  areCompatibleTypes,
+  foldColumnName,
   getDuplicateJoinColumns,
   isJoinType,
   JOIN_TYPE_LABELS,
   JOIN_TYPES,
+  type JoinDuplicateFix,
   planJoinDuplicateFix,
   type Schema,
 } from '@finos/legend-cube';
@@ -28,103 +28,34 @@ import { guaranteeType, noop } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import {
-  CUBE_TABLE_FLAG_LABELS,
-  READ_ONLY_CUBE_TITLE,
-} from '../../__lib__/LegendCubeLabels.js';
-import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
-import {
-  type CubeJoinKeyPair,
-  CubeJoinDraft,
-  isUntypedColumn,
-} from '../../stores/editors/CubeJoinDraft.js';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { CubeJoinDraft } from '../../stores/editors/CubeJoinDraft.js';
 import { CubeButton } from '../CubeButton.js';
-import { CubeColumnPicker } from './CubeColumnPicker.js';
+import { CubeJoinKeyRows } from './CubeJoinKeyRows.js';
 import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
 
-const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
-
-const CubeJoinKeyRow = observer(
-  (props: {
-    editorProps: CubeNodeEditorProps;
-    draft: CubeJoinDraft;
-    pair: CubeJoinKeyPair;
-    index: number;
-    leftSchema: Schema;
-    rightSchema: Schema;
-  }) => {
-    const { editorProps, draft, pair, index, leftSchema, rightSchema } = props;
-    const { editorState, readOnly } = editorProps;
-    const { query } = editorState.document;
-    const { analysis, modelOutline } = editorState;
-    const [leftId, rightId] = query.getInputIds(draft.original.id);
-    const leftType = leftSchema.type(pair.left);
-    const rightType = rightSchema.type(pair.right);
-    const isIncompatible =
-      leftType !== undefined &&
-      rightType !== undefined &&
-      !areCompatibleTypes(leftType, rightType);
-    const isUntyped =
-      (leftId !== undefined &&
-        Boolean(pair.left) &&
-        isUntypedColumn(modelOutline, query, analysis, leftId, pair.left)) ||
-      (rightId !== undefined &&
-        Boolean(pair.right) &&
-        isUntypedColumn(modelOutline, query, analysis, rightId, pair.right));
-    const position = index + 1;
-    return (
-      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
-        <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1">
-          <CubeColumnPicker
-            label={`Left join column ${position}`}
-            schema={leftSchema}
-            value={pair.left}
-            invalid={isIncompatible}
-            disabled={readOnly}
-            onChange={(name) => draft.setLeftColumn(pair.key, name)}
-          />
-          <span className="text-[var(--color-text-secondary)]">=</span>
-          <CubeColumnPicker
-            label={`Right join column ${position}`}
-            schema={rightSchema}
-            value={pair.right}
-            invalid={isIncompatible}
-            disabled={readOnly}
-            onChange={(name) => draft.setRightColumn(pair.key, name)}
-          />
-          <button
-            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]"
-            aria-label={`Remove join columns ${position}`}
-            title="Remove these join columns"
-            disabled={readOnly}
-            onClick={() => draft.removePair(pair.key)}
-          >
-            <TimesIcon />
-          </button>
-        </div>
-        {isIncompatible && (
-          <div className="text-sm text-[var(--color-status-error)]">
-            {`${leftType.displayName} and ${rightType.displayName} can't be compared`}
-          </div>
-        )}
-        {isUntyped && (
-          <div
-            className="text-sm text-[var(--color-status-warn)]"
-            title={TYPE_UNKNOWN.description}
-          >
-            {`${TYPE_UNKNOWN.label}: the column's real type is not known to Cube, so the engine may not match its values`}
-          </div>
-        )}
-      </li>
-    );
-  },
-);
+/**
+ * What the autofix does to a shared column, as the Join editor lists it
+ * (PLAN §11.14): its Left rename, or that it keeps its name (a key both sides
+ * give as one column), then each Right column of its name in any case and
+ * its rename, the Right's name shown when it differs (`id → id_2`)
+ */
+const describeFix = (fix: JoinDuplicateFix, name: string): string => {
+  const left = fix.left.find(({ from }) => from === name);
+  const rights = fix.right.filter(
+    ({ from }) => foldColumnName(from) === foldColumnName(name),
+  );
+  return [
+    left ? `${name} → ${left.to} (Left)` : `${name} kept (Left)`,
+    ...rights.map(({ from, to }) =>
+      from === name ? `${to} (Right)` : `${from} → ${to} (Right)`,
+    ),
+  ].join(', ');
+};
 
 /**
- * The Join editor (spec §17.6): the join type, pairs of key columns, a left
- * one from the Left input and a right one from the Right input, and Swap
- * Inputs. A pair whose types can't be compared is marked; one on a column
- * Cube can't type is warned about, not blocked.
+ * The Join editor (spec §17.6): the join type, pairs of key columns
+ * (`CubeJoinKeyRows`), and Swap Inputs.
  */
 export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
   const { editorState, inputSchemas, readOnly } = props;
@@ -145,10 +76,6 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
   const fix = duplicates.length
     ? planJoinDuplicateFix(edited, leftSchema, rightSchema)
     : undefined;
-  const canAddPair =
-    !readOnly &&
-    draft.pairs.length <
-      Math.min(leftSchema.columns.length, rightSchema.columns.length);
   return (
     <div className="flex flex-col gap-2 text-base">
       <div className="flex items-center gap-2">
@@ -180,38 +107,12 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
           Swap Inputs
         </CubeButton>
       </div>
-      <div className="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-sm text-[var(--color-text-secondary)]">
-        <span>Left</span>
-        <span />
-        <span>Right</span>
-        <span />
-      </div>
-      <ul aria-label="Join columns">
-        {draft.pairs.map((pair, index) => (
-          <CubeJoinKeyRow
-            key={pair.key}
-            editorProps={props}
-            draft={draft}
-            pair={pair}
-            index={index}
-            leftSchema={leftSchema}
-            rightSchema={rightSchema}
-          />
-        ))}
-      </ul>
-      <div>
-        <CubeButton
-          title={
-            canAddPair
-              ? 'Add a pair of join columns'
-              : 'Every column of an input is already a join column'
-          }
-          disabled={!canAddPair}
-          onClick={() => draft.addPair()}
-        >
-          Add join columns
-        </CubeButton>
-      </div>
+      <CubeJoinKeyRows
+        editorProps={props}
+        draft={draft}
+        leftSchema={leftSchema}
+        rightSchema={rightSchema}
+      />
       {duplicates.length > 0 && (
         <div className="text-sm text-[var(--color-status-warn)]">
           <div>
@@ -219,11 +120,9 @@ export const CubeJoinEditor = observer((props: CubeNodeEditorProps) => {
             both:
           </div>
           <ul aria-label="Columns in both inputs">
-            {duplicates.map((name, index) => (
-              <li key={name} className="font-mono">
-                {fix
-                  ? `${name} → ${fix.left[index]?.to} (Left), ${fix.right[index]?.to} (Right)`
-                  : name}
+            {duplicates.map((name) => (
+              <li key={name} className="break-all font-mono">
+                {fix ? describeFix(fix, name) : name}
               </li>
             ))}
           </ul>

package/src/components/editors/CubeJoinKeyRows.tsx

@@ -0,0 +1,183 @@
+/**
+ * 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 { TimesIcon } from '@finos/legend-art';
+import {
+  areCompatibleTypes,
+  isDateOrTimestampType,
+  type Schema,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import {
+  CUBE_TABLE_FLAG_LABELS,
+  DATE_OR_TIMESTAMP_WARNING,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeTableFlag } from '../../graph-manager/CubeEngine.js';
+import { isUntypedColumn } from '../../stores/editors/CubeJoinDraft.js';
+import type {
+  CubeJoinKeyPair,
+  CubeJoinKeysDraft,
+} from '../../stores/editors/CubeJoinKeyPairs.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const TYPE_UNKNOWN = CUBE_TABLE_FLAG_LABELS[CubeTableFlag.TYPE_UNKNOWN];
+
+const CubeJoinKeyRow = observer(
+  (props: {
+    editorProps: CubeNodeEditorProps;
+    draft: CubeJoinKeysDraft;
+    pair: CubeJoinKeyPair;
+    index: number;
+    leftSchema: Schema;
+    rightSchema: Schema;
+  }) => {
+    const { editorProps, draft, pair, index, leftSchema, rightSchema } = props;
+    const { editorState, readOnly } = editorProps;
+    const { query } = editorState.document;
+    const { analysis, modelOutline } = editorState;
+    const [leftId, rightId] = query.getInputIds(draft.original.id);
+    const leftType = leftSchema.type(pair.left);
+    const rightType = rightSchema.type(pair.right);
+    const isIncompatible =
+      leftType !== undefined &&
+      rightType !== undefined &&
+      !areCompatibleTypes(leftType, rightType);
+    const isUntyped =
+      (leftId !== undefined &&
+        Boolean(pair.left) &&
+        isUntypedColumn(modelOutline, query, analysis, leftId, pair.left)) ||
+      (rightId !== undefined &&
+        Boolean(pair.right) &&
+        isUntypedColumn(modelOutline, query, analysis, rightId, pair.right));
+    // a converted Date (Convert types): its dates match timestamps only at midnight
+    const isDateOrTimestamp =
+      !isIncompatible &&
+      [leftType, rightType].some(
+        (type) => type !== undefined && isDateOrTimestampType(type),
+      );
+    const position = index + 1;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1">
+          <CubeColumnPicker
+            label={`Left join column ${position}`}
+            schema={leftSchema}
+            value={pair.left}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setLeftColumn(pair.key, name)}
+          />
+          <span className="text-[var(--color-text-secondary)]">=</span>
+          <CubeColumnPicker
+            label={`Right join column ${position}`}
+            schema={rightSchema}
+            value={pair.right}
+            invalid={isIncompatible}
+            disabled={readOnly}
+            onChange={(name) => draft.setRightColumn(pair.key, name)}
+          />
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove join columns ${position}`}
+            title="Remove these join columns"
+            disabled={readOnly}
+            onClick={() => draft.removePair(pair.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        {isIncompatible && (
+          <div className="text-sm text-[var(--color-status-error)]">
+            {`${leftType.displayName} and ${rightType.displayName} can't be compared`}
+          </div>
+        )}
+        {isDateOrTimestamp && (
+          <div className="text-sm text-[var(--color-status-warn)]">
+            {DATE_OR_TIMESTAMP_WARNING}
+          </div>
+        )}
+        {isUntyped && (
+          <div
+            className="text-sm text-[var(--color-status-warn)]"
+            title={TYPE_UNKNOWN.description}
+          >
+            {`${TYPE_UNKNOWN.label}: the column's real type is not known to Cube, so the engine may not match its values`}
+          </div>
+        )}
+      </li>
+    );
+  },
+);
+
+/**
+ * The pairs of key columns of a node that joins its two inputs (a Join's, spec
+ * §17.6; a Difference's, PLAN §11.7): a left one from the Left input and a
+ * right one from the Right input on each row, and a button that adds a pair.
+ * A pair whose types can't be compared is marked; one on a column Cube can't
+ * type is warned about, not blocked.
+ */
+export const CubeJoinKeyRows = observer(
+  (props: {
+    editorProps: CubeNodeEditorProps;
+    draft: CubeJoinKeysDraft;
+    leftSchema: Schema;
+    rightSchema: Schema;
+  }) => {
+    const { editorProps, draft, leftSchema, rightSchema } = props;
+    const canAddPair =
+      !editorProps.readOnly &&
+      draft.pairs.length <
+        Math.min(leftSchema.columns.length, rightSchema.columns.length);
+    return (
+      <>
+        <div className="grid grid-cols-[1fr_auto_1fr_auto] gap-1 text-sm text-[var(--color-text-secondary)]">
+          <span>Left</span>
+          <span />
+          <span>Right</span>
+          <span />
+        </div>
+        <ul aria-label="Join columns">
+          {draft.pairs.map((pair, index) => (
+            <CubeJoinKeyRow
+              key={pair.key}
+              editorProps={editorProps}
+              draft={draft}
+              pair={pair}
+              index={index}
+              leftSchema={leftSchema}
+              rightSchema={rightSchema}
+            />
+          ))}
+        </ul>
+        <div>
+          <CubeButton
+            title={
+              canAddPair
+                ? 'Add a pair of join columns'
+                : 'Every column of an input is already a join column'
+            }
+            disabled={!canAddPair}
+            onClick={() => draft.addPair()}
+          >
+            Add join columns
+          </CubeButton>
+        </div>
+      </>
+    );
+  },
+);