@journeyapps-labs/reactor-mod-data-browser 3.2.1 → 3.4.0

package/src/core/query/widgets/ColumnDisplayWidget.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 export interface ColumnDisplayWidgetProps {
   label: string;
+  secondaryLabel?: string;
   className?: any;
   onClick?: () => any;
 }
@@ -11,15 +12,16 @@ export const ColumnDisplayWidget: React.FC<ColumnDisplayWidgetProps> = (props) =
   const parts = (props.label || '').split(' ');
   const minWidth = parts.length >= 5 ? 150 : parts.length >= 3 ? 80 : undefined;
   return (
-    <S.Label
+    <S.Container
       className={props.className}
       minWidth={minWidth}
       clickable={!!props.onClick}
       nowrap={!minWidth}
       onClick={props.onClick}
     >
-      {props.label}
-    </S.Label>
+      <S.Label>{props.label}</S.Label>
+      {props.secondaryLabel ? <S.SecondaryLabel>{props.secondaryLabel}</S.SecondaryLabel> : null}
+    </S.Container>
   );
 };
 
@@ -32,9 +34,20 @@ namespace S {
     }
   `;
 
-  export const Label = styled.div<{ minWidth?: number; clickable: boolean; nowrap: boolean }>`
+  export const Container = styled.div<{ minWidth?: number; clickable: boolean; nowrap: boolean }>`
     ${(p) => (p.minWidth ? `min-width: ${p.minWidth}px;` : '')};
     ${(p) => (p.nowrap ? 'white-space: nowrap;' : '')};
     ${(p) => (p.clickable ? clickableStyle : '')};
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 2px;
+  `;
+
+  export const Label = styled.div``;
+
+  export const SecondaryLabel = styled.div`
+    opacity: 0.4;
+    font-size: 12px;
   `;
 }

package/src/core/query/widgets/IDCellDisplayWidget.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { NotificationStore, NotificationType, TableButtonWidget, ioc, styled } from '@journeyapps-labs/reactor-mod';
+import { copyTextToClipboard } from '@journeyapps-labs/lib-reactor-utils';
+
+export interface IDCellDisplayWidgetProps {
+  id: string;
+}
+
+export const IDCellDisplayWidget: React.FC<IDCellDisplayWidgetProps> = (props) => {
+  const notifications = ioc.get(NotificationStore);
+
+  return (
+    <S.Container>
+      <S.Value>{props.id}</S.Value>
+      <TableButtonWidget
+        icon="copy"
+        tooltip="Copy ID"
+        action={() => {
+          copyTextToClipboard(props.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }}
+      />
+    </S.Container>
+  );
+};
+
+namespace S {
+  export const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 5px;
+    width: 100%;
+  `;
+
+  export const Value = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+}

package/src/core/query/widgets/PeekRelationshipButton.tsx

@@ -21,6 +21,7 @@ import { EmptyValueWidget } from '../../../widgets/EmptyValueWidget';
 export interface PeekRelationshipButtonProps {
   object: SchemaModelObject;
   open: (object: SchemaModelObject) => any;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (props) => {
@@ -89,8 +90,15 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
         title: 'ID',
         icon: 'copy',
         right: <S.FieldValue>{props.object.id}</S.FieldValue>,
-        disabled: true,
-        group: 'Object'
+        group: 'Object',
+        action: async () => {
+          copyTextToClipboard(props.object.id);
+          notifications.showNotification({
+            title: 'Copied',
+            description: 'Relationship ID copied to clipboard',
+            type: NotificationType.SUCCESS
+          });
+        }
       },
       {
         key: 'meta-updated',
@@ -114,20 +122,19 @@ export const PeekRelationshipButton: React.FC<PeekRelationshipButtonProps> = (pr
           props.open(props.object);
         }
       },
-      {
-        key: 'copy',
-        title: 'Copy ID',
-        icon: 'copy',
-        group: 'Actions',
-        action: async () => {
-          copyTextToClipboard(props.object.id);
-          notifications.showNotification({
-            title: 'Copied',
-            description: 'Relationship ID copied to clipboard',
-            type: NotificationType.SUCCESS
-          });
-        }
-      }
+      ...(props.filterBelongsTo
+        ? [
+            {
+              key: 'filter-belongs-to',
+              title: 'Filter belongs to',
+              icon: 'filter',
+              group: 'Actions',
+              action: async () => {
+                await props.filterBelongsTo?.(props.object);
+              }
+            } as ComboBoxItem
+          ]
+        : [])
     ];
     const directive = await ioc.get(ComboBoxStore2).show(
       new SimpleComboBoxDirective({

package/src/core/query/widgets/SmartBelongsToDisplayWidget.tsx

@@ -4,6 +4,7 @@ import { BelongsToDisplayWidget } from './BelongsToDisplayWidget';
 import { PageRow } from '../Page';
 import { ActionSource, styled } from '@journeyapps-labs/reactor-mod';
 import { AbstractConnection } from '../../AbstractConnection';
+import { SchemaModelObject } from '../../SchemaModelObject';
 import { Variable } from '@journeyapps/db';
 import { observer } from 'mobx-react';
 
@@ -11,6 +12,7 @@ export interface SmartBelongsToDisplayWidgetProps {
   row: PageRow;
   connection: AbstractConnection;
   variable_id: Variable;
+  filterBelongsTo?: (object: SchemaModelObject) => any;
 }
 
 export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetProps> = observer((props) => {
@@ -35,6 +37,7 @@ export const SmartBelongsToDisplayWidget: React.FC<SmartBelongsToDisplayWidgetPr
       relationship={row.model.definition.definition.belongsTo[variable_id.relationship]}
       connection={connection}
       id={value}
+      filterBelongsTo={props.filterBelongsTo}
     />
   );
 });

package/src/core/query/widgets/SmartColumnWidget.tsx

@@ -1,38 +1,48 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { ObjectType, Type, Variable } from '@journeyapps/db';
+import { Variable } from '@journeyapps/db';
 import { ColumnDisplayWidget } from './ColumnDisplayWidget';
-import { SmartFilterMetadataWidget, SmartFilterWidget } from './SmartFilterWidget';
+import { SmartFilterWidget, SmartTypeEngineFilterWidget } from './SmartFilterWidget';
 import { SimpleFilter } from '../filters';
-import { PanelTitleToolbarButtonWidget } from '@journeyapps-labs/reactor-mod';
-import type { SortDirection } from '../query-simple/SimpleQuery';
+import { SortDirection } from '../query-simple/SimpleQuery';
 
 export interface SmartColumnWidgetProps {
   variable: Variable;
-  type?: ObjectType;
+  typeLabel?: string;
   filter?: SimpleFilter;
   sortDirection?: SortDirection;
   onToggleSort?: () => Promise<any> | any;
+  setupFilter?: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
 export const SmartColumnWidget: React.FC<SmartColumnWidgetProps> = (props) => {
   const baseLabel = props.variable.label || props.variable.name;
-  const displayLabel = props.sortDirection ? `${baseLabel} ${props.sortDirection === 'asc' ? '↑' : '↓'}` : baseLabel;
-  let display = <ColumnDisplayWidget label={displayLabel} onClick={props.onToggleSort} />;
-  if (props.type) {
-    display = (
-      <S.TypeGroup>
-        {display}
-        <S.Type label={props.type.label} />
-      </S.TypeGroup>
-    );
-  }
+  const displayLabel = props.sortDirection
+    ? `${baseLabel} ${props.sortDirection === SortDirection.ASC ? '↓' : '↑'}`
+    : baseLabel;
   return (
     <S.Container>
       <S.TopRow>
-        {display}
-        <SmartFilterWidget filter={props.filter} variable={props.variable} filterChanged={props.filterChanged} />
+        <ColumnDisplayWidget label={displayLabel} secondaryLabel={props.typeLabel} onClick={props.onToggleSort} />
+        {props.setupFilter ? (
+          <SmartFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            setupFilter={props.setupFilter}
+            filterChanged={props.filterChanged}
+          />
+        ) : (
+          <SmartTypeEngineFilterWidget
+            filter={props.filter}
+            variable={props.variable}
+            filterChanged={props.filterChanged}
+          />
+        )}
       </S.TopRow>
     </S.Container>
   );
@@ -53,12 +63,6 @@ namespace S {
     column-gap: 5px;
   `;
 
-  export const Type = styled(ColumnDisplayWidget)`
-    opacity: 0.5;
-  `;
-
-  export const TypeGroup = styled.div``;
-
   export const FilterMetaRow = styled.div`
     display: flex;
     align-items: center;

package/src/core/query/widgets/SmartFilterWidget.tsx

@@ -15,6 +15,11 @@ import { SimpleFilter, StatementMatch } from '../filters';
 export interface SmartFilterWidgetProps {
   variable: Variable;
   filter?: SimpleFilter;
+  setupFilter: (event: {
+    variable: Variable;
+    filter?: SimpleFilter;
+    position?: MouseEvent;
+  }) => Promise<SimpleFilter | null>;
   filterChanged: (filter: SimpleFilter | null) => any;
 }
 
@@ -63,10 +68,6 @@ export const SmartFilterMetadataWidget: React.FC<SmartFilterMetadataWidgetProps>
 
 export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   const isActive = (props.filter?.statements?.length || 0) > 0;
-  const handler = ioc.get(TypeEngine).getHandler(props.variable.type);
-  if (!handler?.setupFilter) {
-    return null;
-  }
   return (
     <S.FilterButton
       active={isActive}
@@ -75,7 +76,7 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
         tooltipPos: TooltipPosition.BOTTOM
       })}
       onClick={async (event) => {
-        const filter = await handler.setupFilter?.({
+        const filter = await props.setupFilter({
           variable: props.variable,
           filter: props.filter,
           position: event.nativeEvent
@@ -91,6 +92,14 @@ export const SmartFilterWidget: React.FC<SmartFilterWidgetProps> = (props) => {
   );
 };
 
+export const SmartTypeEngineFilterWidget: React.FC<Omit<SmartFilterWidgetProps, 'setupFilter'>> = (props) => {
+  const setupFilter = ioc.get(TypeEngine).getHandler(props.variable.type)?.setupFilter;
+  if (!setupFilter) {
+    return null;
+  }
+  return <SmartFilterWidget {...props} setupFilter={setupFilter} />;
+};
+
 namespace S {
   export const MetaList = styled.div`
     display: flex;

package/src/core/types/ManualConnection.ts

@@ -22,6 +22,10 @@ export class ManualConnection extends AbstractConnection {
     return Database.instance(this.options);
   }
 
+  async init() {
+    await this.ensureOnline();
+  }
+
   _serialize(): ManualConnectionDetails {
     return this.options;
   }

package/src/entities/ConnectionEntityDefinition.tsx

@@ -1,5 +1,6 @@
 import {
   DescendantEntityProviderComponent,
+  DescendantLoadingEntityProviderComponent,
   EntityCardsPresenterComponent,
   EntityDefinition,
   EntityDescriberComponent,
@@ -7,13 +8,17 @@ import {
   inject,
   InlineTreePresenterComponent,
   SearchableTreeSearchScope,
-  SimpleEntitySearchEngineComponent
+  SimpleEntitySearchEngineComponent,
+  TreeBadgeWidget,
+  ThemeStore
 } from '@journeyapps-labs/reactor-mod';
+import * as React from 'react';
 import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { AbstractConnection } from '../core/AbstractConnection';
 import { AddConnectionAction } from '../actions/connections/AddConnectionAction';
 import { SavedQueryEntity, SavedQueryStore } from '../stores/SavedQueryStore';
+import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
 
 export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnection> {
   @inject(ConnectionStore)
@@ -22,6 +27,9 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
   @inject(SavedQueryStore)
   accessor savedQueryStore: SavedQueryStore;
 
+  @inject(ThemeStore)
+  accessor themeStore: ThemeStore;
+
   constructor() {
     super({
       type: DataBrowserEntities.CONNECTION,
@@ -56,14 +64,30 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
       new InlineTreePresenterComponent<AbstractConnection>({
         loadChildrenAsNodesAreOpened: true,
         cacheTreeEntities: true,
-        searchScope: SearchableTreeSearchScope.VISIBLE_ONLY
+        searchScope: SearchableTreeSearchScope.VISIBLE_ONLY,
+        augmentTreeNodeProps: (entity) => {
+          if (!entity.isOnline) {
+            return {};
+          }
+          const theme = this.themeStore.getCurrentTheme();
+          return {
+            rightChildren: (
+              <TreeBadgeWidget
+                icon="bolt"
+                background={'transparent'}
+                iconColor={theme.status.success}
+                tooltip="Connection online"
+              />
+            )
+          };
+        }
       })
     );
 
     this.registerComponent(new EntityCardsPresenterComponent<AbstractConnection>());
 
     this.registerComponent(
-      new DescendantEntityProviderComponent<AbstractConnection>({
+      new DescendantLoadingEntityProviderComponent<AbstractConnection, SchemaModelDefinition>({
         descendantType: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
         generateOptions: (parent) => {
           return {
@@ -71,7 +95,11 @@ export class ConnectionEntityDefinition extends EntityDefinition<AbstractConnect
               label: 'Models',
               icon: 'cube'
             },
-            descendants: parent.schema_models.items
+            descendants: parent.schema_models.items,
+            loading: () => parent.isLoadingOnline,
+            refreshDescendants: async () => {
+              await parent.ensureOnline();
+            }
           };
         }
       })

package/src/entities/SchemaModelObjectEntityDefinition.ts

@@ -1,4 +1,5 @@
 import {
+  Action,
   EntityDefinition,
   EntityDescriberComponent,
   inject,
@@ -10,6 +11,8 @@ import { DataBrowserEntities } from '../entities';
 import { ConnectionStore } from '../stores/ConnectionStore';
 import { SchemaModelObject } from '../core/SchemaModelObject';
 import { SchemaModelDefinition } from '../core/SchemaModelDefinition';
+import { validate as validateUUID } from 'uuid';
+import { ViewHasManyAction } from '../actions/schema-model/ViewHasManyAction';
 
 export interface SchemaModelObjectEntityDefinitionEncoded {
   connection_id: string;
@@ -42,21 +45,6 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
       })
     );
 
-    // this.registerComponent(
-    //   new SimpleParentEntitySearchEngine<SchemaModelDefinition,SchemaModelObject>({
-    //     label: 'ID',
-    //     filterResultsWithMatcher: false,
-    //     type: DataBrowserEntities.SCHEMA_MODEL_DEFINITION,
-    //     getEntities: async (event) => {
-    //       let object = await event.parameters.parent.resolve(event.value);
-    //       if(object){
-    //         return [object]
-    //       }
-    //       return []
-    //     }
-    //   })
-    // );
-
     this.registerComponent(
       new SimpleParentEntitySearchEngine<SchemaModelDefinition, SchemaModelObject>({
         label: 'Label',
@@ -66,6 +54,13 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
           if (!event.value) {
             return [];
           }
+          if (validateUUID(event.value)) {
+            const object = await event.parameters.parent.resolve(event.value);
+            if (object) {
+              return [object];
+            }
+            return [];
+          }
           return await event.parameters.parent.search(event.value);
         }
       })
@@ -101,4 +96,11 @@ export class SchemaModelObjectEntityDefinition extends EntityDefinition<SchemaMo
   getEntityUID(t: SchemaModelObject) {
     return t.model.id;
   }
+
+  isActionAllowedForEntity(action: Action, entity: SchemaModelObject) {
+    if (action.id === ViewHasManyAction.ID) {
+      return Object.keys(entity.definition.definition.hasMany || {}).length > 0;
+    }
+    return super.isActionAllowedForEntity(action, entity);
+  }
 }

package/src/forms/types/attachment-handler.tsx

@@ -5,6 +5,7 @@ import { TypeHandler } from './shared/type-handler';
 
 export const attachmentHandler: TypeHandler = {
   matches: (type) => type instanceof AttachmentType,
+  getTypeLabel: () => 'Attachment',
   encode: async (value: File) => {
     return Attachment.create({
       data: await value.arrayBuffer(),

package/src/forms/types/belongs-to-filter.tsx

@@ -0,0 +1,84 @@
+import { Variable } from '@journeyapps/db';
+import { ArrayInput, DialogStore2, EntityInput, FormModel, ioc } from '@journeyapps-labs/reactor-mod';
+import { Relationship } from '@journeyapps/parser-schema';
+import { SchemaModelDefinition } from '../../core/SchemaModelDefinition';
+import { SchemaModelObject } from '../../core/SchemaModelObject';
+import { Condition, SimpleFilter, Statement, StatementMatch } from '../../core/query/filters';
+import { DataBrowserEntities } from '../../entities';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+
+interface BelongsToFilterFormValue {
+  values: (SchemaModelObject | null)[];
+}
+
+class BelongsToFilterForm extends FormModel<BelongsToFilterFormValue> {
+  constructor(private foreignDefinition: SchemaModelDefinition) {
+    super();
+
+    this.addInput(
+      new ArrayInput({
+        name: 'values',
+        label: 'Matches any of',
+        value: [null],
+        generate: () => {
+          return new EntityInput({
+            name: 'value',
+            label: foreignDefinition.definition.label || foreignDefinition.definition.name,
+            entityType: DataBrowserEntities.SCHEMA_MODEL_OBJECT,
+            parent: foreignDefinition,
+            value: null
+          });
+        }
+      })
+    );
+  }
+
+  async hydrateFromFilter(filter?: SimpleFilter) {
+    const values = await Promise.all(
+      (filter?.statements || [])
+        .map((statement) => `${statement.arg || ''}`)
+        .filter((id) => !!id)
+        .map((id) => this.foreignDefinition.resolve(id))
+    );
+    this.setValues({
+      values: values.filter((value) => !!value).length > 0 ? values.filter((value) => !!value) : [null]
+    });
+  }
+
+  toFilter(variable: Variable): SimpleFilter | null {
+    const values = (this.value()?.values || []).filter((value) => !!value?.id);
+    if (values.length === 0) {
+      return null;
+    }
+    return new SimpleFilter(
+      variable,
+      values.map((value) => new Statement(Condition.EQUALS, value.id)),
+      StatementMatch.ANY
+    );
+  }
+}
+
+export const setupBelongsToFilter = async (options: {
+  definition: SchemaModelDefinition;
+  relationship: Relationship;
+  variable: Variable;
+  filter?: SimpleFilter;
+}) => {
+  const foreignDefinition = options.definition.connection.getSchemaModelDefinitionByName(
+    options.relationship.foreignType.name
+  );
+  const form = new BelongsToFilterForm(foreignDefinition);
+  await form.hydrateFromFilter(options.filter);
+  const result = await ioc.get(DialogStore2).showDialog(
+    new ClearableFilterFormDialogDirective({
+      title: `Filter ${options.relationship.name}`,
+      form,
+      filter: options.filter,
+      handler: async () => {}
+    })
+  );
+  if (!result) {
+    return null;
+  }
+  return form.toFilter(options.variable);
+};

package/src/forms/types/boolean-handler.tsx

@@ -1,10 +1,39 @@
-import { BooleanType } from '@journeyapps/db';
-import { BooleanInput, CheckboxWidget } from '@journeyapps-labs/reactor-mod';
+import { BooleanType, Variable } from '@journeyapps/db';
+import { BooleanInput, CheckboxWidget, DialogStore2, FormModel, ioc } from '@journeyapps-labs/reactor-mod';
 import * as React from 'react';
 import { TypeHandler } from './shared/type-handler';
+import { ClearableFilterFormDialogDirective } from './filters/ClearableFilterFormDialogDirective';
+import { Condition, SimpleFilter, Statement } from '../../core/query/filters';
+
+interface BooleanFilterFormValue {
+  value: boolean;
+}
+
+class BooleanFilterForm extends FormModel<BooleanFilterFormValue> {
+  constructor(value?: boolean) {
+    super();
+
+    this.addInput(
+      new BooleanInput({
+        name: 'value',
+        label: 'Value',
+        value: value === true
+      })
+    );
+  }
+
+  static fromFilter(filter?: SimpleFilter): boolean {
+    return filter?.statements?.[0]?.arg === true;
+  }
+
+  toFilter(variable: Variable): SimpleFilter {
+    return new SimpleFilter(variable, [new Statement(Condition.EQUALS, this.value().value === true)]);
+  }
+}
 
 export const booleanHandler: TypeHandler = {
   matches: (type) => type instanceof BooleanType,
+  getTypeLabel: () => 'Boolean',
   encode: async (value: boolean) => value,
   decode: async (value: boolean) => value,
   encodeToScalar: async (value: boolean) => value,
@@ -24,5 +53,20 @@ export const booleanHandler: TypeHandler = {
         }}
       />
     );
+  },
+  setupFilter: async ({ variable, filter }) => {
+    const form = new BooleanFilterForm(BooleanFilterForm.fromFilter(filter));
+    const result = await ioc.get(DialogStore2).showDialog(
+      new ClearableFilterFormDialogDirective({
+        title: `Filter ${variable.label || variable.name}`,
+        form,
+        filter,
+        handler: async () => {}
+      })
+    );
+    if (!result) {
+      return null;
+    }
+    return form.toFilter(variable);
   }
 };

package/src/forms/types/date-handler.tsx

@@ -86,6 +86,7 @@ const toDateValue = (value: unknown): Date | undefined => {
 
 export const dateHandler: TypeHandler = {
   matches: (type) => type instanceof DatetimeType || type instanceof DateType,
+  getTypeLabel: (type) => (type instanceof DatetimeType ? 'Datetime' : 'Date'),
   encode: async (value: Date) => new Day(value),
   decode: async (value: Day | Date) => toDateValue(value),
   encodeToScalar: async (value: Date) => value?.toISOString() || null,

package/src/forms/types/image-handler.tsx

@@ -30,6 +30,7 @@ export const imageHandler = (context: TypeHandlerContext): TypeHandler => {
 
   return {
     matches: (type) => type instanceof SignatureType || type instanceof PhotoType,
+    getTypeLabel: (type) => (type instanceof SignatureType ? 'Signature' : 'Photo'),
     encode: async (value: ImageMedia) => {
       return Attachment.create({
         data: await value.toArrayBuffer()

package/src/forms/types/location-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler } from './shared/type-handler';
 
 export const locationHandler: TypeHandler = {
   matches: (type) => type instanceof LocationType,
+  getTypeLabel: () => 'Location',
   encode: async (value: Location) => value,
   decode: async (value: Location) => value,
   encodeToScalar: async (value: Location) => {

package/src/forms/types/multiple-choice-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
 export const multipleChoiceHandler = (context: TypeHandlerContext): TypeHandler => {
   return {
     matches: (type) => type instanceof MultipleChoiceType,
+    getTypeLabel: () => 'Multiple choice',
     encode: async (value: string[]) => value,
     decode: async (value: string[]) => value,
     encodeToScalar: async (value: string[]) => JSON.stringify(value || []),

package/src/forms/types/multiple-choice-integer-handler.tsx

@@ -6,6 +6,7 @@ import { TypeHandler, TypeHandlerContext } from './shared/type-handler';
 export const multipleChoiceIntegerHandler = (context: TypeHandlerContext): TypeHandler => {
   return {
     matches: (type) => type instanceof MultipleChoiceIntegerType,
+    getTypeLabel: () => 'Multiple choice integer',
     encode: async (value: string[]) => value.map((v) => parseInt(v)),
     decode: async (value: number[]) => value.map((v) => `${v}`),
     encodeToScalar: async (value: string[]) => JSON.stringify(value || []),