@finos/legend-cube-builder 0.0.4 → 0.0.5

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

@@ -37,16 +37,19 @@ import {
 } from '../../stores/source-picker/CubeDataProductTabState.js';
 import type { CubeAccessPoint } from '../../graph-manager/CubeDataProductCatalog.js';
 import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
 import { CubePickerStep } from './CubePickerStep.js';
+import { CUBE_PROJECT_SOURCE_LABEL } from '../../__lib__/LegendCubeProjectSourceLabels.js';
+import { isCubeProjectHost } from '../../stores/CubeHost.js';
 
 const INPUT_CLASS =
   'h-7 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]';
 
-const LIST_ITEM_CLASS =
-  'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]';
-
 /** An error as the tab shows it: its first line, the rest on demand, and an action when it has one */
 const CubeDataProductTabAlert: React.FC<{
   error: CubeDataProductTabError;
@@ -118,7 +121,9 @@ const CubeSampleValue: React.FC<{ value: CubeResultValue }> = ({ value }) =>
 const CubeAccessPointPreview: React.FC<{
   accessPoint: CubeAccessPoint;
   marketplaceLink: string | undefined;
-}> = ({ accessPoint, marketplaceLink }) => (
+  /** False where products have no deployed artifact to read sample rows from, as a Studio workspace's */
+  fromArtifact?: boolean | undefined;
+}> = ({ accessPoint, marketplaceLink, fromArtifact = true }) => (
   <section
     className="flex flex-col gap-1 rounded-sm border border-[var(--color-border-default)] p-2"
     aria-label="Access point preview"
@@ -171,14 +176,151 @@ const CubeAccessPointPreview: React.FC<{
           </tbody>
         </table>
       </div>
-    ) : (
+    ) : fromArtifact ? (
       <span className="text-base text-[var(--color-text-muted)]">
         No sample rows in the deployed artifact
       </span>
-    )}
+    ) : null}
   </section>
 );
 
+/** A product's access points, by group, each picked or ticked to add */
+const CubeAccessPointList = observer(
+  (props: { tab: CubeDataProductTabState }) => {
+    const { tab } = props;
+    if (!tab.description) {
+      return null;
+    }
+    return (
+      <ul
+        className={`max-h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+        aria-label="Access points"
+      >
+        {tab.description.groups.map((group) => (
+          <li key={group.id}>
+            <div className="flex items-center gap-2 px-2 pt-1 text-sm text-[var(--color-text-secondary)]">
+              <span className="min-w-0 flex-1 truncate">
+                {group.title ?? group.id}
+              </span>
+              <CubeAccessPointGroupBadge tab={tab} groupId={group.id} />
+            </div>
+            <ul aria-label={`Access points of ${group.title ?? group.id}`}>
+              {group.accessPoints.map((point) => (
+                <CubePickerListItem
+                  key={point.id}
+                  picked={tab.isAccessPointPicked(group.id, point.id)}
+                  disabled={!point.isPickable}
+                  title={point.disabledReason ?? point.description}
+                  adds={true}
+                  onPick={() => tab.selectAccessPoint(group.id, point.id)}
+                  onToggle={() => tab.toggleAccessPoint(group.id, point.id)}
+                  toggleLabel={point.title ?? point.id}
+                >
+                  <span className="min-w-0 flex-1 truncate">
+                    {point.title ?? point.id}
+                  </span>
+                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                    {point.isPickable
+                      ? `${point.schema?.columns.length ?? 0} columns`
+                      : point.disabledReason}
+                  </span>
+                </CubePickerListItem>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    );
+  },
+);
+
+/**
+ * The Data Product tab on a host reading one project's data products
+ * (Studio): the project's products by name, each path muted beside it, then
+ * a product's access points; the runtime its runs use is named, not picked
+ */
+const CubeProjectDataProductTab = observer(
+  (props: { tab: CubeDataProductTabState }) => {
+    const { tab } = props;
+    const candidates = tab.candidates;
+    return (
+      <div className="flex flex-col gap-2">
+        <span
+          className="text-sm text-[var(--color-text-muted)]"
+          aria-label="Runtime"
+        >
+          {tab.projectRuntime
+            ? CUBE_PROJECT_SOURCE_LABEL.RUNS_ON(tab.projectRuntime.label)
+            : tab.isReadingProjectRuntime
+              ? CUBE_PROJECT_SOURCE_LABEL.READING_RUNTIME
+              : ''}
+        </span>
+        {tab.projectRuntimeError !== undefined && (
+          <CubeDataProductTabAlert error={tab.projectRuntimeError} />
+        )}
+        {tab.isListing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            listing data products
+          </div>
+        )}
+        {tab.listError !== undefined && (
+          <CubeDataProductTabAlert error={tab.listError}>
+            <div>
+              <CubeButton onClick={() => tab.retryListing()}>Retry</CubeButton>
+            </div>
+          </CubeDataProductTabAlert>
+        )}
+        {candidates && (
+          <ul
+            className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+            aria-label="Data products"
+          >
+            {candidates.map((candidate) => (
+              <CubePickerListItem
+                key={candidate.dataProductPath}
+                picked={tab.candidate === candidate}
+                title={candidate.description ?? candidate.dataProductPath}
+                onPick={() => tab.selectCandidate(candidate)}
+              >
+                <span className="shrink-0">{candidate.title}</span>
+                <span className="min-w-0 flex-1 truncate text-sm text-[var(--color-text-muted)]">
+                  {candidate.dataProductPath}
+                </span>
+              </CubePickerListItem>
+            ))}
+          </ul>
+        )}
+        {candidates?.length === 0 && (
+          <span className="text-sm text-[var(--color-text-muted)]">
+            {CUBE_PROJECT_SOURCE_LABEL.NO_DATA_PRODUCTS}
+          </span>
+        )}
+        {tab.isDescribing && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            loading access points
+          </div>
+        )}
+        <CubeAccessPointList tab={tab} />
+        {tab.accessPoint?.isPickable === true && (
+          <CubeAccessPointPreview
+            accessPoint={tab.accessPoint}
+            marketplaceLink={undefined}
+            fromArtifact={false}
+          />
+        )}
+        {tab.isAdding && (
+          <div className="text-base text-[var(--color-text-secondary)]">
+            {CUBE_PENDING_LABEL.RESOLVING_SOURCE}
+          </div>
+        )}
+        {tab.error !== undefined && (
+          <CubeDataProductTabAlert error={tab.error} />
+        )}
+      </div>
+    );
+  },
+);
+
 /**
  * The source dialog's Data Product tab (PLAN §6.8), as Data Cube's selection
  * goes: the mode, a deployed data product, one of its access points, and the
@@ -189,6 +331,11 @@ export const CubeDataProductTab = observer(
     const { tab } = props;
     const warehouseId = useId();
     const project = tab.fixedProject;
+    // a host reading one project's data products, as Studio, lists them
+    // alone: no class, search or warehouse to pick, its runtime named instead
+    if (isCubeProjectHost(tab.editorState.host)) {
+      return <CubeProjectDataProductTab tab={tab} />;
+    }
     return (
       <div className="flex flex-col gap-2">
         <CubePickerStep
@@ -259,32 +406,27 @@ export const CubeDataProductTab = observer(
           </CubeDataProductTabAlert>
         )}
         <ul
-          className="max-h-40 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+          className={`max-h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
           aria-label="Data products"
         >
           {tab.shownCandidates.map((candidate) => {
             const isPicked = tab.candidate === candidate;
             const reason = tab.getCandidateDisabledReason(candidate);
             return (
-              <li key={`${candidate.id}/${candidate.deploymentId}`}>
-                <button
-                  type="button"
-                  className={clsx(LIST_ITEM_CLASS, {
-                    'bg-[var(--color-bg-selected)]': isPicked,
-                  })}
-                  aria-pressed={isPicked}
-                  disabled={reason !== undefined}
-                  title={reason ?? candidate.description}
-                  onClick={() => tab.selectCandidate(candidate)}
-                >
-                  <span className="min-w-0 flex-1 truncate">
-                    {candidate.title}
-                  </span>
-                  <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                    {reason ?? `${candidate.id} · ${candidate.versionId}`}
-                  </span>
-                </button>
-              </li>
+              <CubePickerListItem
+                key={`${candidate.id}/${candidate.deploymentId}`}
+                picked={isPicked}
+                disabled={reason !== undefined}
+                title={reason ?? candidate.description}
+                onPick={() => tab.selectCandidate(candidate)}
+              >
+                <span className="min-w-0 flex-1 truncate">
+                  {candidate.title}
+                </span>
+                <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                  {reason ?? `${candidate.id} · ${candidate.versionId}`}
+                </span>
+              </CubePickerListItem>
             );
           })}
         </ul>
@@ -309,55 +451,7 @@ export const CubeDataProductTab = observer(
             loading access points
           </div>
         )}
-        {tab.description && (
-          <ul
-            className="max-h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
-            aria-label="Access points"
-          >
-            {tab.description.groups.map((group) => (
-              <li key={group.id}>
-                <div className="flex items-center gap-2 px-2 pt-1 text-sm text-[var(--color-text-secondary)]">
-                  <span className="min-w-0 flex-1 truncate">
-                    {group.title ?? group.id}
-                  </span>
-                  <CubeAccessPointGroupBadge tab={tab} groupId={group.id} />
-                </div>
-                <ul aria-label={`Access points of ${group.title ?? group.id}`}>
-                  {group.accessPoints.map((point) => {
-                    const isPicked =
-                      tab.accessPointKey?.group === group.id &&
-                      tab.accessPointKey.id === point.id;
-                    return (
-                      <li key={point.id}>
-                        <button
-                          type="button"
-                          className={clsx(LIST_ITEM_CLASS, {
-                            'bg-[var(--color-bg-selected)]': isPicked,
-                          })}
-                          aria-pressed={isPicked}
-                          disabled={!point.isPickable}
-                          title={point.disabledReason ?? point.description}
-                          onClick={() =>
-                            tab.selectAccessPoint(group.id, point.id)
-                          }
-                        >
-                          <span className="min-w-0 flex-1 truncate">
-                            {point.title ?? point.id}
-                          </span>
-                          <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                            {point.isPickable
-                              ? `${point.schema?.columns.length ?? 0} columns`
-                              : point.disabledReason}
-                          </span>
-                        </button>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </li>
-            ))}
-          </ul>
-        )}
+        <CubeAccessPointList tab={tab} />
         {tab.accessPoint?.isPickable === true && (
           <CubeAccessPointPreview
             accessPoint={tab.accessPoint}

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

@@ -18,6 +18,7 @@ import { clsx } from '@finos/legend-art';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useId } from 'react';
+import { CubeTablePreview } from './CubeTablePreview.js';
 import {
   CUBE_CSV_HELP_TEXT,
   CUBE_DIRECT_HELP_TEXT,
@@ -34,6 +35,10 @@ import {
   type CubeDirectConnectionTabState,
   isExploredTableSelectable,
 } from '../../stores/source-picker/CubeDirectConnectionTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubePickerStep } from './CubePickerStep.js';
 
@@ -271,46 +276,53 @@ export const CubeDirectConnectionTab = observer(
               onChange={(event) => tab.setTableSearch(event.target.value)}
             />
             <ul
-              className="h-56 overflow-auto rounded-sm border border-[var(--color-border-subtle)]"
+              className={`h-56 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
               aria-label="Tables"
             >
               {tab.tables.map((table) => {
                 const selectable = isExploredTableSelectable(table);
-                const isPicked = tab.tableName === table.storedName;
+                const isPicked = tab.tableNames.includes(table.storedName);
                 const hidden = getHiddenColumnsLabel(table.hiddenColumnCount);
                 return (
-                  <li key={table.storedName}>
-                    <button
-                      type="button"
-                      className={clsx(
-                        'flex w-full items-center gap-2 px-2 py-1 text-left text-base enabled:hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:text-[var(--color-text-disabled)]',
-                        { 'bg-[var(--color-bg-selected)]': isPicked },
-                      )}
-                      aria-pressed={isPicked}
-                      disabled={!selectable}
-                      onClick={() => tab.selectTable(table.storedName)}
-                    >
-                      <span className="min-w-0 flex-1 truncate">
-                        {table.name}
-                      </span>
-                      {table.flags.map((flag) => (
-                        <span
-                          key={flag}
-                          className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
-                          title={CUBE_TABLE_FLAG_LABELS[flag].description}
-                        >
-                          {CUBE_TABLE_FLAG_LABELS[flag].label}
-                        </span>
-                      ))}
-                      <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
-                        {table.columnCount} columns
-                        {hidden !== undefined && `, ${hidden}`}
+                  <CubePickerListItem
+                    key={table.storedName}
+                    picked={isPicked}
+                    disabled={!selectable}
+                    adds={true}
+                    onPick={() => tab.selectTable(table.storedName)}
+                    onToggle={() => tab.toggleTable(table.storedName)}
+                    toggleLabel={table.name}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {table.name}
+                    </span>
+                    {table.flags.map((flag) => (
+                      <span
+                        key={flag}
+                        className="rounded-sm bg-[var(--color-status-warn-bg)] px-1 text-sm text-[var(--color-status-warn)]"
+                        title={CUBE_TABLE_FLAG_LABELS[flag].description}
+                      >
+                        {CUBE_TABLE_FLAG_LABELS[flag].label}
                       </span>
-                    </button>
-                  </li>
+                    ))}
+                    <span className="shrink-0 text-sm text-[var(--color-text-muted)]">
+                      {table.columnCount} columns
+                      {hidden !== undefined && `, ${hidden}`}
+                    </span>
+                  </CubePickerListItem>
                 );
               })}
             </ul>
+            {tab.previewTableName !== undefined && (
+              <CubeTablePreview
+                name={
+                  tab.tables.find(
+                    (table) => table.storedName === tab.previewTableName,
+                  )?.name ?? tab.previewTableName
+                }
+                columns={tab.previewedColumns}
+              />
+            )}
           </div>
         )}
         {tab.isResolving && (

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

@@ -0,0 +1,244 @@
+/**
+ * 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 { getFunctionParameterValueError } from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CUBE_FUNCTION_MESSAGE } from '../../__lib__/LegendCubeFunctionLabels.js';
+import type { CubeOutlineFunction } from '../../graph-manager/CubeEngine.js';
+import {
+  CubeModelReadKind,
+  type CubeInlineModelTabState,
+} from '../../stores/source-picker/CubeInlineModelTabState.js';
+import {
+  CUBE_PICKER_LIST_CLASS,
+  CubePickerListItem,
+} from './CubePickerListItem.js';
+import { CubePickerStep } from './CubePickerStep.js';
+
+const INPUT_CLASS =
+  '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)]';
+
+const lastSegment = (path: string): string => {
+  const index = path.lastIndexOf('::');
+  return index < 0 ? path : path.slice(index + 2);
+};
+
+/** A function's parameters as the list shows them: `(min: Float, status?: String)` */
+export const getCubeFunctionParametersLabel = (
+  fn: CubeOutlineFunction,
+): string =>
+  `(${fn.parameters
+    .map(
+      (parameter) =>
+        `${parameter.name}${parameter.multiplicity === '[0..1]' ? '?' : ''}: ${lastSegment(parameter.type)}`,
+    )
+    .join(', ')})`;
+
+/** Tables or functions: what a model's tab reads (PLAN §6.5) */
+export const CubeReadKindToggle = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const option = (kind: CubeModelReadKind, label: string) => (
+      <button
+        type="button"
+        className={`h-6 px-3 text-base ${
+          tab.readKind === kind
+            ? 'bg-[var(--color-bg-selected)] font-medium text-[var(--color-text-primary)]'
+            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
+        }`}
+        aria-pressed={tab.readKind === kind}
+        onClick={() => tab.setReadKind(kind)}
+      >
+        {label}
+      </button>
+    );
+    return (
+      <div className="flex items-center gap-2">
+        <span className="w-20 shrink-0 text-base">Read</span>
+        <div
+          className="flex overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+          role="group"
+          aria-label="Read"
+        >
+          {option(CubeModelReadKind.TABLE, 'Tables')}
+          {option(CubeModelReadKind.FUNCTION, 'Functions')}
+        </div>
+      </div>
+    );
+  },
+);
+
+/** A parameter's value, checked as it is typed */
+const CubeFunctionParameterInput = observer(
+  (props: { tab: CubeInlineModelTabState; index: number }) => {
+    const { tab, index } = props;
+    const id = useId();
+    const parameter = tab.functionParameters[index];
+    if (!parameter) {
+      return null;
+    }
+    const text = tab.functionValueTexts[index] ?? '';
+    const error = text
+      ? getFunctionParameterValueError(parameter, tab.functionValues[index])
+      : undefined;
+    return (
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-2">
+          <label
+            className="w-32 shrink-0 truncate text-base"
+            htmlFor={id}
+            title={parameter.name}
+          >
+            {parameter.name}
+          </label>
+          <input
+            id={id}
+            className={INPUT_CLASS}
+            placeholder={`${parameter.type.displayName}${parameter.optional ? ', optional' : ''}`}
+            aria-invalid={error !== undefined}
+            value={text}
+            onChange={(event) =>
+              tab.setFunctionValueText(index, event.target.value)
+            }
+          />
+        </div>
+        {error !== undefined && (
+          <span className="pl-[8.5rem] text-sm text-[var(--color-status-error)]">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * The function steps of a model's tab (PLAN §6.5): the model's functions
+ * that return a relation, then the picked one's runtime (its own, or one of
+ * the model's), a value for each parameter, and the columns it declares
+ */
+export const CubeFunctionSteps = observer(
+  (props: { tab: CubeInlineModelTabState }) => {
+    const { tab } = props;
+    const picked = tab.pickedFunction;
+    const allFunctions = tab.outline?.functions ?? [];
+    return (
+      <>
+        {tab.outline && (
+          <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 functions"
+              aria-label="Search functions"
+              value={tab.functionSearch}
+              onChange={(event) => tab.setFunctionSearch(event.target.value)}
+            />
+            {tab.functions.length ? (
+              <ul
+                className={`h-40 overflow-auto ${CUBE_PICKER_LIST_CLASS}`}
+                aria-label="Functions"
+              >
+                {tab.functions.map((fn) => (
+                  <CubePickerListItem
+                    key={fn.signature}
+                    picked={tab.functionSignature === fn.signature}
+                    disabled={fn.problem !== undefined}
+                    title={fn.problem}
+                    adds={fn.parameters.length === 0}
+                    onPick={() => tab.selectFunction(fn.signature)}
+                  >
+                    <span className="min-w-0 flex-1 truncate">
+                      {lastSegment(fn.path)}
+                      <span className="text-[var(--color-text-muted)]">
+                        {getCubeFunctionParametersLabel(fn)}
+                      </span>
+                    </span>
+                    <span className="max-w-[40%] shrink-0 truncate text-sm text-[var(--color-text-muted)]">
+                      {fn.problem ??
+                        (fn.runtime !== undefined
+                          ? `runs on ${lastSegment(fn.runtime)}`
+                          : `${fn.columns.length} columns`)}
+                    </span>
+                  </CubePickerListItem>
+                ))}
+              </ul>
+            ) : (
+              <div className="text-base text-[var(--color-text-secondary)]">
+                {allFunctions.length
+                  ? CUBE_FUNCTION_MESSAGE.NO_MATCH
+                  : CUBE_FUNCTION_MESSAGE.NONE}
+              </div>
+            )}
+          </div>
+        )}
+        {picked && (
+          <section
+            aria-label="Function details"
+            className="flex flex-col gap-2"
+          >
+            <span className="break-all text-sm text-[var(--color-text-muted)]">
+              {picked.path}
+            </span>
+            {picked.runtime !== undefined ? (
+              <div className="flex items-center gap-2 text-base">
+                <span className="w-20 shrink-0">Runtime</span>
+                <span aria-label="Runtime" className="break-all">
+                  {CUBE_FUNCTION_MESSAGE.RUNS_ON(picked.runtime)}
+                </span>
+              </div>
+            ) : (
+              <CubePickerStep
+                label="Runtime"
+                value={tab.functionRuntimePath}
+                options={tab.functionRuntimes.map((runtime) => ({
+                  value: runtime.path,
+                  label: runtime.path,
+                }))}
+                disabled={tab.fixedContext?.runtime !== undefined}
+                onChange={(path) => tab.selectFunctionRuntime(path)}
+              />
+            )}
+            {tab.functionParameters.map((parameter, index) => (
+              <CubeFunctionParameterInput
+                key={parameter.name}
+                tab={tab}
+                index={index}
+              />
+            ))}
+            {picked.columns.length > 0 && (
+              <span className="text-sm text-[var(--color-text-muted)]">
+                {`Columns: ${picked.columns
+                  .map(
+                    (column) => `${column.name} (${lastSegment(column.type)})`,
+                  )
+                  .join(', ')}`}
+              </span>
+            )}
+            {tab.functionProblem !== undefined && (
+              <span
+                className="text-base text-[var(--color-status-error)]"
+                role="alert"
+              >
+                {tab.functionProblem}
+              </span>
+            )}
+          </section>
+        )}
+      </>
+    );
+  },
+);