Support field type conversion for Multi Choice fields

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.13.0",
+  "version": "7.14.0-fb-mvtc-convert.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,11 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.X
+*Released*: X January 2026
+- Multi value text choices: field type conversion
+    - TODO
+
 ### version 7.13.0
 *Released*: 20 January 2026
 - Multi value text choices

packages/components/src/internal/components/domainproperties/ConfirmDataTypeChangeModal.test.tsx

@@ -2,19 +2,80 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { ConfirmDataTypeChangeModal, getDataTypeConfirmDisplayText } from './ConfirmDataTypeChangeModal';
-import { DATE_TYPE, DATETIME_TYPE, PROP_DESC_TYPES, TIME_TYPE } from './PropDescType';
+import {
+    BOOLEAN_TYPE,
+    DATE_TYPE,
+    DATETIME_TYPE,
+    FILE_TYPE,
+    INTEGER_TYPE,
+    MULTI_CHOICE_TYPE,
+    MULTILINE_TYPE,
+    PROP_DESC_TYPES,
+    TEXT_CHOICE_TYPE,
+    TEXT_TYPE,
+    TIME_TYPE,
+} from './PropDescType';
 import {
     BOOLEAN_RANGE_URI,
     DATETIME_RANGE_URI,
     FILELINK_RANGE_URI,
-    INT_RANGE_URI,
+    MULTI_CHOICE_RANGE_URI,
     MULTILINE_RANGE_URI,
+    TEXT_CHOICE_CONCEPT_URI,
     TIME_RANGE_URI,
 } from './constants';
 
 describe('ConfirmDataTypeChangeModal', () => {
+    const stringType = {
+        rangeURI: 'http://www.w3.org/2001/XMLSchema#boolean',
+        dataType: TEXT_TYPE,
+    };
+
+    const intType = {
+        rangeURI: 'http://www.w3.org/2001/XMLSchema#int',
+        dataType: INTEGER_TYPE,
+    };
+
+    const multiLineType = {
+        rangeURI: MULTILINE_RANGE_URI,
+        dataType: MULTILINE_TYPE,
+    };
+
+    const fileLinkType = {
+        rangeURI: FILELINK_RANGE_URI,
+        dataType: FILE_TYPE,
+    };
+
+    const booleanType = {
+        rangeURI: BOOLEAN_RANGE_URI,
+        dataType: BOOLEAN_TYPE,
+    };
+
+    const dateTimeType = {
+        rangeURI: DATETIME_RANGE_URI,
+        dataType: DATETIME_TYPE,
+    };
+
+    const timeType = {
+        rangeURI: TIME_RANGE_URI,
+        dataType: TIME_TYPE,
+    };
+
+    const multiChoiceType = {
+        rangeURI: MULTI_CHOICE_RANGE_URI,
+        dataType: MULTI_CHOICE_TYPE,
+    };
+
+    const textChoiceType = {
+        conceptURI: TEXT_CHOICE_CONCEPT_URI,
+        dataType: TEXT_CHOICE_TYPE,
+    };
+
     const DEFAULT_PROPS = {
-        originalRangeURI: 'http://www.w3.org/2001/XMLSchema#boolean',
+        original: {
+            rangeURI: 'http://www.w3.org/2001/XMLSchema#boolean',
+            dataType: BOOLEAN_TYPE,
+        },
         newDataType: PROP_DESC_TYPES.get(0),
         onConfirm: jest.fn,
         onCancel: jest.fn,
@@ -29,49 +90,59 @@ describe('ConfirmDataTypeChangeModal', () => {
     });
 
     test('getDataTypeConfirmDisplayText', () => {
-        expect(getDataTypeConfirmDisplayText(INT_RANGE_URI)).toBe('integer');
-        expect(getDataTypeConfirmDisplayText(MULTILINE_RANGE_URI)).toBe('string');
-        expect(getDataTypeConfirmDisplayText(FILELINK_RANGE_URI)).toBe('file');
-        expect(getDataTypeConfirmDisplayText(BOOLEAN_RANGE_URI)).toBe('boolean');
-        expect(getDataTypeConfirmDisplayText(DATETIME_RANGE_URI)).toBe('dateTime');
+        expect(getDataTypeConfirmDisplayText(intType.dataType)).toBe('integer');
+        expect(getDataTypeConfirmDisplayText(multiLineType.dataType)).toBe('string');
+        expect(getDataTypeConfirmDisplayText(fileLinkType.dataType)).toBe('file');
+        expect(getDataTypeConfirmDisplayText(booleanType.dataType)).toBe('boolean');
+        expect(getDataTypeConfirmDisplayText(dateTimeType.dataType)).toBe('dateTime');
+        expect(getDataTypeConfirmDisplayText(multiChoiceType.dataType)).toBe('Text Choice (multiple select)');
+        expect(getDataTypeConfirmDisplayText(textChoiceType.dataType)).toBe('Text Choice (single select)');
     });
 
     test('from datetime to time', () => {
-        render(
-            <ConfirmDataTypeChangeModal
-                {...DEFAULT_PROPS}
-                originalRangeURI={DATETIME_RANGE_URI}
-                newDataType={TIME_TYPE}
-            />
-        );
+        render(<ConfirmDataTypeChangeModal {...DEFAULT_PROPS} newDataType={TIME_TYPE} original={dateTimeType} />);
         expect(document.body).toHaveTextContent(
             'This change will convert the values in the field from dateTime to time. This will cause the Date portion of the value to be removed. Once you save your changes, you will not be able to change it back to dateTime.'
         );
     });
 
     test('from datetime to date', () => {
+        render(<ConfirmDataTypeChangeModal {...DEFAULT_PROPS} newDataType={DATE_TYPE} original={dateTimeType} />);
+        expect(document.body).toHaveTextContent(
+            'This change will convert the values in the field from dateTime to date. This will cause the Time portion of the value to be removed.'
+        );
+    });
+
+    test('from date to datetime', () => {
+        render(<ConfirmDataTypeChangeModal {...DEFAULT_PROPS} newDataType={DATETIME_TYPE} original={timeType} />);
+        expect(document.body).toHaveTextContent(
+            'This change will convert the values in the field from time to dateTime. Once you save your changes, you will not be able to change it back to time.'
+        );
+    });
+
+    test('from text choice to mvtc', () => {
         render(
             <ConfirmDataTypeChangeModal
                 {...DEFAULT_PROPS}
-                originalRangeURI={DATETIME_RANGE_URI}
-                newDataType={DATE_TYPE}
+                newDataType={multiChoiceType.dataType}
+                original={textChoiceType}
             />
         );
         expect(document.body).toHaveTextContent(
-            'This change will convert the values in the field from dateTime to date. This will cause the Time portion of the value to be removed.'
+            'Confirm Data Type ChangeThis change will convert the values in the field from Text Choice (single select) to Text Choice (multiple select). Filters in saved views might not function as expected and any conditional formatting configured for this field will be removed.'
         );
     });
 
-    test('from date to datetime', () => {
+    test('from mvtc to tc', () => {
         render(
             <ConfirmDataTypeChangeModal
                 {...DEFAULT_PROPS}
-                originalRangeURI={TIME_RANGE_URI}
-                newDataType={DATETIME_TYPE}
+                newDataType={textChoiceType.dataType}
+                original={multiChoiceType}
             />
         );
         expect(document.body).toHaveTextContent(
-            'This change will convert the values in the field from time to dateTime. Once you save your changes, you will not be able to change it back to time.'
+            'This change will convert the values in the field from Text Choice (multiple select) to Text Choice (single select). Filters in saved views might not function as expected'
         );
     });
 });

packages/components/src/internal/components/domainproperties/ConfirmDataTypeChangeModal.tsx

@@ -11,25 +11,40 @@ import {
     MULTILINE_RANGE_URI,
     TIME_RANGE_URI,
 } from './constants';
+import { IDomainField } from './models';
 
 interface Props {
-    originalRangeURI: string;
     newDataType: PropDescType;
-    onConfirm: () => void;
     onCancel: () => void;
+    onConfirm: () => void;
+    original: Partial<IDomainField>;
 }
 
 export const ConfirmDataTypeChangeModal: FC<Props> = memo(props => {
-    const { originalRangeURI, newDataType, onConfirm, onCancel } = props;
-    const origTypeLabel = getDataTypeConfirmDisplayText(originalRangeURI);
-    const newTypeLabel = getDataTypeConfirmDisplayText(newDataType.rangeURI);
+    const { original, newDataType, onConfirm, onCancel } = props;
+    const originalRangeURI = original.rangeURI || '';
+    const origTypeLabel = getDataTypeConfirmDisplayText(original.dataType);
+    const newTypeLabel = getDataTypeConfirmDisplayText(newDataType);
+    const newMultiChoice = PropDescType.isMultiChoice(newDataType.rangeURI);
+    const oldMultiChoice = PropDescType.isMultiChoice(original.dataType.rangeURI);
+    const newTextChoice = PropDescType.isTextChoice(newDataType.conceptURI);
 
     const reversible =
         (PropDescType.isDate(originalRangeURI) && PropDescType.isDateTime(newDataType.rangeURI)) ||
-        (PropDescType.isDateTime(originalRangeURI) && PropDescType.isDate(newDataType.rangeURI));
+        (PropDescType.isDateTime(originalRangeURI) && PropDescType.isDate(newDataType.rangeURI)) ||
+        newMultiChoice;
 
     let dataLossWarning = null;
-    if (
+    if (newMultiChoice) {
+        dataLossWarning = (
+            <>
+                Filters in saved views might not function as expected and any conditional formatting configured for this
+                field will be <span className="bold-text">removed</span>.{' '}
+            </>
+        );
+    } else if (oldMultiChoice && newTextChoice) {
+        dataLossWarning = <>Filters in saved views might not function as expected. </>;
+    } else if (
         originalRangeURI === DATETIME_RANGE_URI &&
         (newDataType.rangeURI === DATE_RANGE_URI || newDataType.rangeURI === TIME_RANGE_URI)
     ) {
@@ -43,11 +58,11 @@ export const ConfirmDataTypeChangeModal: FC<Props> = memo(props => {
 
     return (
         <Modal
-            title="Confirm Data Type Change"
-            onConfirm={onConfirm}
-            onCancel={onCancel}
             confirmClass="btn-danger"
             confirmText="Yes, Change Data Type"
+            onCancel={onCancel}
+            onConfirm={onConfirm}
+            title="Confirm Data Type Change"
         >
             <div>
                 This change will convert the values in the field from{' '}
@@ -67,7 +82,12 @@ export const ConfirmDataTypeChangeModal: FC<Props> = memo(props => {
 ConfirmDataTypeChangeModal.displayName = 'ConfirmDataTypeChangeModal';
 
 // exported for jest testing
-export const getDataTypeConfirmDisplayText = (rangeURI: string): string => {
+
+export const getDataTypeConfirmDisplayText = (dataType: PropDescType): string => {
+    if (dataType?.longDisplay) {
+        return dataType.longDisplay;
+    }
+    const rangeURI = dataType?.rangeURI || '';
     if (rangeURI === INT_RANGE_URI) return 'integer';
     if (rangeURI === MULTILINE_RANGE_URI) return 'string';
     if (rangeURI === FILELINK_RANGE_URI) return 'file';