Multi value text choices

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.12.0",
+  "version": "7.13.0-fb-mvtc.20",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
@@ -50,7 +50,7 @@
   "homepage": "https://github.com/LabKey/labkey-ui-components#readme",
   "dependencies": {
     "@hello-pangea/dnd": "18.0.1",
-    "@labkey/api": "1.44.1",
+    "@labkey/api": "1.45.0-fb-mvtc.4",
     "@testing-library/dom": "~10.4.1",
     "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",

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

@@ -448,7 +448,7 @@ export class AdvancedSettings extends React.PureComponent<AdvancedSettingsProps,
                     </div>
                 )}
 
-                {allowUniqueConstraintProperties && !field.isCalculatedField() && (
+                {allowUniqueConstraintProperties && !field.isCalculatedField() && !field.isMultiChoiceField() && (
                     <div className="row">
                         <div className="col-xs-4">
                             <DomainFieldLabel
@@ -543,20 +543,22 @@ export class AdvancedSettings extends React.PureComponent<AdvancedSettingsProps,
                         </LabelHelpTip>
                     </CheckboxLK>
                 )}
-                <CheckboxLK
-                    checked={recommendedVariable}
-                    id={createFormInputId(DOMAIN_FIELD_RECOMMENDEDVARIABLE, domainIndex, index)}
-                    name={createFormInputName(DOMAIN_FIELD_RECOMMENDEDVARIABLE)}
-                    onChange={this.handleCheckbox}
-                >
-                    Make this field a recommended variable
-                    <LabelHelpTip title="Recommended Variable">
-                        <div>
-                            Indicates that this is an important variable. These variables will be displayed as
-                            recommended when creating new charts or reports.
-                        </div>
-                    </LabelHelpTip>
-                </CheckboxLK>
+                {!field.isMultiChoiceField() &&
+                    <CheckboxLK
+                        checked={recommendedVariable}
+                        id={createFormInputId(DOMAIN_FIELD_RECOMMENDEDVARIABLE, domainIndex, index)}
+                        name={createFormInputName(DOMAIN_FIELD_RECOMMENDEDVARIABLE)}
+                        onChange={this.handleCheckbox}
+                    >
+                        Make this field a recommended variable
+                        <LabelHelpTip title="Recommended Variable">
+                            <div>
+                                Indicates that this is an important variable. These variables will be displayed as
+                                recommended when creating new charts or reports.
+                            </div>
+                        </LabelHelpTip>
+                    </CheckboxLK>
+                }
                 {PropDescType.isMvEnableable(field.dataType.rangeURI) && !field.isCalculatedField() && !isApp() && (
                     <CheckboxLK
                         checked={mvEnabled}

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

@@ -12,7 +12,7 @@ import { DOMAIN_FIELD_CLIENT_SIDE_ERROR, DOMAIN_FIELD_VALUE_EXPRESSION, SEVERITY
 import { DomainField, DomainFieldError, SystemField } from './models';
 import { SectionHeading } from './SectionHeading';
 import { isFieldFullyLocked, isFieldPartiallyLocked } from './propertiesUtil';
-import { CALCULATED_TYPE, PropDescType } from './PropDescType';
+import { CALCULATED_TYPE, MULTI_CHOICE_TYPE, PropDescType } from './PropDescType';
 import { parseCalculatedColumn } from './actions';
 
 // export for jest testing
@@ -47,7 +47,7 @@ export const getColumnTypeMap = (
         colTypeMap[df.Name] = df.DataType.toUpperCase();
     });
     domainFields?.forEach(df => {
-        if (df.dataType.name !== CALCULATED_TYPE.name) {
+        if (df.dataType.name !== CALCULATED_TYPE.name && df.dataType.name !== MULTI_CHOICE_TYPE.name) {
             colTypeMap[df.name] = df.dataType.name.toLowerCase() === 'int' ? 'INTEGER' : df.dataType.name.toUpperCase();
         }
     });
@@ -163,20 +163,20 @@ export const CalculatedFieldOptions: FC<Props> = memo(props => {
         >
             <div className="row">
                 <div className="col-xs-12 col-md-6">
-                    <SectionHeading title="Expression" cls="bottom-padding" helpTipBody={HELP_TIP_BODY} />
+                    <SectionHeading cls="bottom-padding" helpTipBody={HELP_TIP_BODY} title="Expression" />
                     <textarea
                         className="form-control"
-                        rows={6}
-                        value={field.valueExpression || ''}
-                        id={createFormInputId(DOMAIN_FIELD_VALUE_EXPRESSION, domainIndex, index)}
-                        name={createFormInputName(DOMAIN_FIELD_VALUE_EXPRESSION)}
-                        onChange={handleChange}
-                        onBlur={handleBlur}
                         disabled={
                             isFieldPartiallyLocked(field.lockType) ||
                             isFieldFullyLocked(field.lockType) ||
                             field.lockExistingField
                         }
+                        id={createFormInputId(DOMAIN_FIELD_VALUE_EXPRESSION, domainIndex, index)}
+                        name={createFormInputName(DOMAIN_FIELD_VALUE_EXPRESSION)}
+                        onBlur={handleBlur}
+                        onChange={handleChange}
+                        rows={6}
+                        value={field.valueExpression || ''}
                     />
                     <div className="domain-field-calc-footer">
                         {error && <div className="error">{error}</div>}

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

@@ -91,27 +91,36 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
         onChange(evt.target.id, evt.target.value);
     };
 
-    onApply = (validator: List<PropertyValidator | ConditionalFormat>, type: string): void => {
+    onApply = (validator: List<ConditionalFormat | PropertyValidator>, type: string): void => {
         const { onChange, index, domainIndex } = this.props;
         onChange(createFormInputId(type, domainIndex, index), validator);
     };
 
     showHideConditionalFormat = (): void => {
         const { showingModal } = this.props;
 
-        this.setState(state => ({ showCondFormat: !state.showCondFormat }), () => showingModal(this.state.showCondFormat));
+        this.setState(
+            state => ({ showCondFormat: !state.showCondFormat }),
+            () => showingModal(this.state.showCondFormat)
+        );
     };
 
     showHideRegexValidator = (): void => {
         const { showingModal } = this.props;
 
-        this.setState(state => ({ showRegex: !state.showRegex }), () => showingModal(this.state.showRegex));
+        this.setState(
+            state => ({ showRegex: !state.showRegex }),
+            () => showingModal(this.state.showRegex)
+        );
     };
 
     showHideRangeValidator = (): void => {
         const { showingModal } = this.props;
 
-        this.setState(state => ({ showRange: !state.showRange }), () => showingModal(this.state.showRange));
+        this.setState(
+            state => ({ showRange: !state.showRange }),
+            () => showingModal(this.state.showRange)
+        );
     };
 
     renderValidator = (range: boolean): ReactNode => {
@@ -123,8 +132,8 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
             <div className={range ? '' : 'domain-validation-group'}>
                 <div className="domain-field-label domain-no-wrap">
                     <DomainFieldLabel
-                        label={'Create ' + (range ? 'Range' : 'Regular Expression') + ' Validator'}
                         helpTipBody={range ? <RangeValidatorHelpText /> : <RegexValidatorHelpText />}
+                        label={'Create ' + (range ? 'Range' : 'Regular Expression') + ' Validator'}
                     />
                 </div>
                 <div>
@@ -151,8 +160,8 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
                                 isFieldFullyLocked(field.lockType)
                                     ? () => {}
                                     : range
-                                    ? this.showHideRangeValidator
-                                    : this.showHideRegexValidator
+                                      ? this.showHideRangeValidator
+                                      : this.showHideRegexValidator
                             }
                         >
                             {'' + count + ' Active validator' + (count > 1 ? 's' : '')}
@@ -173,8 +182,8 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
             <div className="domain-validation-group">
                 <div className="domain-field-label domain-no-wrap">
                     <DomainFieldLabel
-                        label="Create Conditional Format Criteria"
                         helpTipBody={<ConditionalFormatHelpText />}
+                        label="Create Conditional Format Criteria"
                     />
                 </div>
                 <div>
@@ -206,7 +215,8 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
     render() {
         const { index, field, domainFormDisplayOptions } = this.props;
         const { showCondFormat, showRegex, showRange } = this.state;
-        const showCondFormatSection = !domainFormDisplayOptions.hideConditionalFormatting;
+        const showCondFormatSection =
+            !domainFormDisplayOptions.hideConditionalFormatting && DomainField.allowConditionalFormats(field);
         const showRegexSection = !domainFormDisplayOptions.hideValidators && DomainField.hasRegExValidation(field);
         const showRangeSection = !domainFormDisplayOptions.hideValidators && DomainField.hasRangeValidation(field);
         const showValidation = showRegexSection || showRangeSection;
@@ -225,7 +235,7 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
             <div>
                 <div className="row">
                     <div className="col-xs-12">
-                        <SectionHeading title={title} cls="domain-field-section-hdr" />
+                        <SectionHeading cls="domain-field-section-hdr" title={title} />
                     </div>
                 </div>
                 <div className="row">
@@ -235,41 +245,41 @@ export class ConditionalFormattingAndValidation extends PureComponent<Props, Sta
                         {showRangeSection && this.renderValidator(true)}
                         {showCondFormat && (
                             <ConditionalFormatOptionsModal
-                                title={'Conditional Formatting ' + (field.name ? 'for ' + field.name : '')}
                                 addName="Formatting"
+                                dataType={field.dataType}
                                 index={index}
-                                type={DOMAIN_COND_FORMAT}
                                 mvEnabled={field.mvEnabled}
-                                validators={field.conditionalFormats}
-                                dataType={field.dataType}
-                                onHide={this.showHideConditionalFormat}
                                 onApply={this.onApply}
+                                onHide={this.showHideConditionalFormat}
+                                title={'Conditional Formatting ' + (field.name ? 'for ' + field.name : '')}
+                                type={DOMAIN_COND_FORMAT}
+                                validators={field.conditionalFormats}
                             />
                         )}
                         {showRegex && (
                             <RegexValidationOptionsModal
-                                title={'Regular Expression Validator(s) ' + (field.name ? 'for ' + field.name : '')}
                                 addName="Validator"
+                                dataType={field.dataType}
                                 index={index}
-                                type={DOMAIN_REGEX_VALIDATOR}
                                 mvEnabled={field.mvEnabled}
-                                validators={field.regexValidators}
-                                dataType={field.dataType}
-                                onHide={this.showHideRegexValidator}
                                 onApply={this.onApply}
+                                onHide={this.showHideRegexValidator}
+                                title={'Regular Expression Validator(s) ' + (field.name ? 'for ' + field.name : '')}
+                                type={DOMAIN_REGEX_VALIDATOR}
+                                validators={field.regexValidators}
                             />
                         )}
                         {showRange && (
                             <RangeValidationOptionsModal
-                                title={'Range Validator(s) ' + (field.name ? 'for ' + field.name : '')}
                                 addName="Validator"
+                                dataType={field.dataType}
                                 index={index}
-                                type={DOMAIN_RANGE_VALIDATOR}
                                 mvEnabled={field.mvEnabled}
-                                validators={field.rangeValidators}
-                                dataType={field.dataType}
-                                onHide={this.showHideRangeValidator}
                                 onApply={this.onApply}
+                                onHide={this.showHideRangeValidator}
+                                title={'Range Validator(s) ' + (field.name ? 'for ' + field.name : '')}
+                                type={DOMAIN_RANGE_VALIDATOR}
+                                validators={field.rangeValidators}
                             />
                         )}
                     </div>