FIO-7195: Fixes an issue where Radio/SelectBoxes will show values instead of labels on View tab and in DataTable

src/components/_classes/list/ListComponent.js

@@ -145,7 +145,7 @@ export default class ListComponent extends Field {
   set itemsLoaded(promise) {
     this._itemsLoaded = promise;
   }
-  
+
   handleLoadingError(err) {
     this.loading = false;
     if (err.networkError) {

src/components/radio/Radio.js

@@ -128,6 +128,14 @@ export default class RadioComponent extends ListComponent {
     return _.get(listData, this.path);
   }
 
+  get selectMetadata() {
+    return super.selectData;
+  }
+
+  get selectData() {
+    return this.selectMetadata || this.component.selectData;
+  }
+
   init() {
     super.init();
     this.templateData = {};
@@ -282,13 +290,16 @@ export default class RadioComponent extends ListComponent {
       value = _.toString(value);
     }
 
-    const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
-    if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
+    const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+      && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
+    if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
       return value;
     }
 
-    const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
-    const option = _.find(values, (v) => v.value === value);
+    const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
+    const option = !values?.length && shouldUseSelectData ? {
+      label: this.itemTemplate(this.selectData),
+    } : _.find(values, (v) => v.value === value);
 
     if (!value) {
       return _.get(option, 'label', '');

src/components/selectboxes/SelectBoxes.js

@@ -200,8 +200,13 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
 
     if (this.isSelectURL) {
-      if (options.modalPreview && this.loadedOptions) {
-        return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+      if (options.modalPreview || this.options.readOnly || this.inDataTable) {
+        const checkedItems = _.keys(_.pickBy(value, (val) => val));
+        if (this.selectData?.length === checkedItems.length) {
+          return this.selectData.map(item => this.itemTemplate(item)).join(', ');
+        } else if (this.loadedOptions?.length) {
+          return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+        }
       }
       return _(value).pickBy((val) => val).keys().join(', ');
     }

src/components/textarea/TextArea.js

@@ -356,10 +356,10 @@ export default class TextAreaComponent extends TextFieldComponent {
   }
 
   /**
- * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
- * @param {*} value - The value to normalize
- * @returns {*} - Returns the normalized value
- */
+   * Normalize values coming into updateValue. For example, depending on the configuration, string value `"true"` will be normalized to boolean `true`.
+   * @param {*} value - The value to normalize
+   * @returns {*} - Returns the normalized value
+   */
   normalizeValue(value) {
     if (this.component.multiple && Array.isArray(value)) {
       return value.map((singleValue) => this.normalizeSingleValue(singleValue));