Resolve "A formula field referencing a single select fields breaks the link row value modal"

changelog.md

@@ -57,6 +57,7 @@ For example:
 * Resolve an invalid URL in the "Backend URL mis-configuration detected" error message. [#967](https://gitlab.com/bramw/baserow/-/merge_requests/967)
 * Fixed broken call grouping when getting linked row names from server.
 * Add new filter types 'is after today' and 'is before today'. [#1093](https://gitlab.com/bramw/baserow/-/issues/1093)
+* Fixed a bug that breaks the link row modal when a formula is referencing a single select field. [#1111](https://gitlab.com/bramw/baserow/-/issues/1111)
 
 ### Refactors
 * Fix view and fields getting out of date on realtime updates. [#1112](https://gitlab.com/bramw/baserow/-/issues/1112)

web-frontend/modules/core/assets/scss/components/row_modal.scss

@@ -5,15 +5,8 @@
 }
 
 .row-modal__field-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   margin-bottom: 2px;
   padding: 0;
-
-  & .control {
-    flex: 1;
-  }
 }
 
 .row-modal__field-item-handle {

web-frontend/modules/database/components/row/RowEditFieldFormula.vue

@@ -5,17 +5,25 @@
 <script>
 import rowEditField from '@baserow/modules/database/mixins/rowEditField'
 import RowEditFieldDateReadOnly from '@baserow/modules/database/components/row/RowEditFieldDateReadOnly'
+import RowEditFieldLongText from '@baserow/modules/database/components/row/RowEditFieldLongText'
 import RowEditFieldText from '@baserow/modules/database/components/row/RowEditFieldText'
 import RowEditFieldBoolean from '@baserow/modules/database/components/row/RowEditFieldBoolean'
 import RowEditFieldNumber from '@baserow/modules/database/components/row/RowEditFieldNumber'
+import RowEditFieldSingleSelectReadOnly from '@baserow/modules/database/components/row/RowEditFieldSingleSelectReadOnly'
+import RowEditFieldBlank from '@baserow/modules/database/components/row/RowEditFieldBlank'
+import RowEditFieldArray from '@baserow/modules/database/components/row/RowEditFieldArray'
 
 export default {
   name: 'RowEditFieldFormula',
   components: {
     RowEditFieldDateReadOnly,
     RowEditFieldText,
+    RowEditFieldLongText,
     RowEditFieldBoolean,
     RowEditFieldNumber,
+    RowEditFieldBlank,
+    RowEditFieldArray,
+    RowEditFieldSingleSelectReadOnly,
   },
   mixins: [rowEditField],
   methods: {

web-frontend/modules/database/components/row/RowEditFieldSingleSelect.vue

@@ -2,7 +2,7 @@
   <div class="control__elements">
     <FieldSelectOptionsDropdown
       :value="valueId"
-      :options="field.select_options"
+      :options="singleSelectOptions"
       :allow-create-option="allowCreateOptions"
       :disabled="readOnly"
       :class="{ 'dropdown--error': touched && !valid }"
@@ -32,5 +32,16 @@ export default {
       required: false,
     },
   },
+  computed: {
+    singleSelectOptions() {
+      if (this.field.select_options) {
+        return this.field.select_options
+      } else if (this.value) {
+        return [this.value]
+      } else {
+        return []
+      }
+    },
+  },
 }
 </script>

web-frontend/modules/database/components/row/RowEditFieldSingleSelectReadOnly.vue

@@ -1,12 +1,15 @@
 <template>
-  <RowEditFieldSingleSelect :read-only="true" :field="field">
+  <RowEditFieldSingleSelect :read-only="true" :field="field" :value="value">
   </RowEditFieldSingleSelect>
 </template>
 
 <script>
 import RowEditFieldSingleSelect from '@baserow/modules/database/components/row/RowEditFieldSingleSelect'
+import baseField from '@baserow/modules/database/mixins/baseField'
+
 export default {
   name: 'RowEditFieldSingleSelectReadOnly',
   components: { RowEditFieldSingleSelect },
+  mixins: [baseField],
 }
 </script>