Merge branch 'show-full-relationship-and-lookup-names' into 'develop'

Show full relationship and lookup names

Closes #1751 and #1073

See merge request baserow/baserow!2467

changelog/entries/unreleased/feature/1751_show_full_name_of_relationships.json

@@ -0,0 +1,7 @@
+{
+  "type": "feature",
+  "message": "Show full name of relationships",
+  "issue_number": 1751,
+  "bullet_points": [],
+  "created_at": "2024-06-14"
+}

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

@@ -1,69 +1,59 @@
 .array-field__item {
-  white-space: nowrap;
-  margin: 5px 0;
+  margin: 5px 4px;
   padding: 0 5px;
   background-color: $color-neutral-100;
   display: flex;
+  flex-wrap: nowrap;
+  max-width: calc(100% - 8px);
 
   @include rounded($rounded);
 
-  &:not(:last-child) {
-    margin-right: 8px;
+  &:last-child {
+    margin-right: 0;
   }
 
   @include fixed-height(22px, 13px);
 }
 
-.array-field__item--button {
-  background-color: inherit;
-  margin: 3px 0;
-}
-
-.array-field__name {
+.array-field__ellipsis {
   @extend %ellipsis;
 
-  max-width: 140px;
-}
-
-.array-field__date {
-  white-space: nowrap;
-  margin: 5px 0;
-  padding: 0 5px;
-  background-color: $color-neutral-100;
-  display: flex;
-
-  @include rounded($rounded);
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  @include fixed-height(22px, 13px);
+  max-width: 100%;
 }
 
 .array-field__time {
   padding-left: 5px;
 }
 
-.array-field__single-select-option {
+.array-field__button {
+  margin: 3px 4px;
+  max-width: calc(100% - 8px);
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.array-field__multiple-select-container {
+  display: contents;
+}
+
+.array-field__single-option {
   white-space: nowrap;
   margin: 6px 4px 4px;
   overflow: unset;
-
-  @include select-option-style(flex, true);
-}
-
-.array-field__multiple-select-item {
   display: flex;
-}
+  flex-wrap: nowrap;
 
-.array-field__multiple-select-option {
-  white-space: nowrap;
-  margin: auto 0;
-  margin-right: 5px;
-  overflow: unset;
+  // must use !import because the `select-option-style` overwrites the `max-width`, and
+  // we don't want to use that one.
+  max-width: calc(100% - 8px) !important;
 
   @include select-option-style(flex, true);
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
 .array-field__file {
@@ -71,6 +61,10 @@
   margin: 5px 3px;
   display: flex;
   height: 22px;
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
 .array-field__file-link {

web-frontend/modules/core/assets/scss/components/card/all.scss

@@ -9,3 +9,4 @@
 @import 'file';
 @import 'blank';
 @import 'rich_text';
+@import 'rating';

web-frontend/modules/core/assets/scss/components/card/array.scss

@@ -12,35 +12,19 @@
   padding: 0 16px 15px;
   overflow-x: scroll;
 
+  .array-field__item,
   .array-field__boolean,
-  .array-field__date,
-  .array-field__single-select-option,
-  .array-field__file {
-    margin: 0;
-
-    &:not(:last-child) {
-      margin-right: 5px;
-    }
+  .array-field__single-option,
+  .array-field__file,
+  .array-field__button {
+    margin-top: 0;
+    margin-left: 0;
+    margin-bottom: 0;
 
     @include fixed-height(22px, 13px);
   }
 
   .array-field__item {
-    white-space: nowrap;
-    display: flex;
     background-color: $color-primary-100;
-    margin: 0;
-
-    span {
-      @extend %ellipsis;
-
-      max-width: 140px;
-    }
-
-    &:not(:last-child) {
-      margin-right: 5px;
-    }
-
-    @include fixed-height(22px, 13px);
   }
 }

web-frontend/modules/core/assets/scss/components/card/rating.scss

@@ -0,0 +1,4 @@
+.card-rating {
+  min-width: 1px;
+  height: 18px;
+}

web-frontend/modules/core/assets/scss/components/fields/array.scss

@@ -8,19 +8,12 @@
 
   .array-field__item {
     height: auto;
-    white-space: normal;
 
     &:not(:last-child) {
       margin-right: 4px;
     }
   }
 
-  .array-field__date {
-    &:not(:last-child) {
-      margin-right: 4px;
-    }
-  }
-
   .array-field__multiple-select-option {
     margin-top: 6px;
     margin-bottom: 6px;

web-frontend/modules/core/assets/scss/components/fields/link_row.scss

@@ -11,6 +11,7 @@
   margin-bottom: 5px;
   background-color: $color-primary-100;
   display: flex;
+  max-width: 100%;
 
   @include fixed-height(22px, 13px);
   @include rounded($rounded);
@@ -23,7 +24,7 @@
 .field-link-row__name {
   @extend %ellipsis;
 
-  max-width: 200px;
+  max-width: 100%;
   color: $color-neutral-900;
 
   &:hover {

web-frontend/modules/core/assets/scss/components/views/grid.scss

@@ -504,7 +504,7 @@
 
   .grid-view__row--selected & {
     &.active {
-      background-color: rgba(255, 255, 255, 0.7);
+      background-color: $white;
     }
 
     &.cell-error {

web-frontend/modules/core/assets/scss/components/views/grid/array.scss

@@ -13,29 +13,14 @@
     flex-wrap: wrap;
     overflow: auto;
     bottom: auto;
-    right: auto;
     min-width: calc(100% + 4px);
     min-height: calc(100% + 4px);
 
     .array-field__item {
       height: auto;
-      white-space: normal;
     }
   }
 
-  &:not(.active) {
-    .array-field__item span {
-      @extend %ellipsis;
-
-      max-width: 140px;
-    }
-  }
-
-  .array-field__multiple-select-option {
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-
   .grid-view__column--matches-search & {
     background-color: $color-primary-100;
 

web-frontend/modules/core/assets/scss/components/views/grid/many_to_many.scss

@@ -1,6 +1,5 @@
 .grid-field-many-to-many__cell.active {
   bottom: auto;
-  right: auto;
   height: auto;
   min-width: calc(100% + 4px);
   min-height: calc(100% + 4px);
@@ -29,6 +28,7 @@
   background-color: $color-neutral-100;
   display: flex;
   color: $color-neutral-900;
+  max-width: calc(100% - 5px);
 
   @include rounded($rounded);
   @include fixed-height(22px, 13px);
@@ -71,7 +71,7 @@
 .grid-field-many-to-many__name {
   @extend %ellipsis;
 
-  max-width: 140px;
+  max-width: 100%;
 }
 
 .grid-field-many-to-many__loading {

web-frontend/modules/database/components/formula/array/FunctionalFormulaArrayDurationItem.vue

@@ -1,8 +1,8 @@
 <template functional>
   <div v-if="props.value !== null" class="array-field__item">
-    <span>
+    <div class="array-field__ellipsis">
       {{ $options.methods.formatValue(props.field, props.value) }}
-    </span>
+    </div>
   </div>
 </template>
 

web-frontend/modules/database/components/formula/array/FunctionalFormulaArrayItem.vue

@@ -1,8 +1,8 @@
 <template functional>
   <div v-if="props.value" class="array-field__item">
-    <span>
+    <div class="array-field__ellipsis" :title="props.value">
       {{ props.value }}
-    </span>
+    </div>
   </div>
 </template>
 

web-frontend/modules/database/components/formula/array/FunctionalFormulaArrayItems.vue

@@ -1,3 +1,7 @@
+<!--
+This component is used to render the formula array items, independently of the place.
+It's used in the grid view cell, row edit modal, gallery card, etc.
+-->
 <template functional>
   <div :class="[data.staticClass, data.class]">
     <component
@@ -10,6 +14,7 @@
       :index="index"
       v-on="listeners"
     ></component>
+    <slot></slot>
   </div>
 </template>
 
@@ -22,7 +27,7 @@ export default {
         'formula_type',
         field.array_formula_type
       )
-      return formulaType.getFunctionalGridViewFieldArrayComponent()
+      return formulaType.getFunctionalFieldArrayComponent()
     },
     getValue(field, $registry, item) {
       const formulaType = $registry.get(

web-frontend/modules/database/components/formula/array/FunctionalFormulaButtonArrayItem.vue

@@ -1,7 +1,8 @@
 <template functional>
-  <div class="array-field__item array-field__item--button">
+  <div class="array-field__button">
     <Button
       v-if="$options.methods.isValid(props.value)"
+      tag="a"
       size="tiny"
       type="secondary"
       class="forced-pointer-events-auto"
@@ -12,7 +13,7 @@
     >
       {{ $options.methods.getLabelOrURL(props.value) }}
     </Button>
-    <Button v-else size="tiny" type="secondary" disabled>
+    <Button v-else size="tiny" type="secondary" tag="a" disabled>
       {{ $options.methods.getLabelOrURL(props.value) }}
     </Button>
   </div>

web-frontend/modules/database/components/formula/array/FunctionalFormulaDateArrayItem.vue

@@ -1,10 +1,10 @@
 <template functional>
-  <div class="array-field__date">
-    <div>
+  <div class="array-field__item">
+    <div class="array-field__ellipsis">
       {{ $options.methods.getDate(props.field, props.value) }}
-    </div>
-    <div v-if="props.field.date_include_time" class="array-field__time">
-      {{ $options.methods.getTime(props.field, props.value) }}
+      <span v-if="props.field.date_include_time" class="array-field__time">
+        {{ $options.methods.getTime(props.field, props.value) }}
+      </span>
     </div>
   </div>
 </template>

web-frontend/modules/database/components/formula/array/FunctionalFormulaLinkArrayItem.vue

@@ -1,21 +1,23 @@
 <template functional>
   <div class="array-field__item">
-    <a
-      v-if="props.selected && $options.methods.isValid(props.value)"
-      :href="props.value && props.value.url"
-      target="_blank"
-      rel="nofollow noopener noreferrer"
-      class="forced-pointer-events-auto"
-      @mousedown.stop
-    >
-      {{ $options.methods.getLabelOrURL(props.value) }}
-    </a>
-    <u v-else-if="$options.methods.isValid(props.value)">
-      {{ $options.methods.getLabelOrURL(props.value) }}
-    </u>
-    <template v-else>
-      {{ $options.methods.getLabelOrURL(props.value) }}
-    </template>
+    <div class="array-field__ellipsis">
+      <a
+        v-if="props.selected && $options.methods.isValid(props.value)"
+        :href="props.value && props.value.url"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        class="forced-pointer-events-auto"
+        @mousedown.stop
+      >
+        {{ $options.methods.getLabelOrURL(props.value) }}
+      </a>
+      <u v-else-if="$options.methods.isValid(props.value)">
+        {{ $options.methods.getLabelOrURL(props.value) }}
+      </u>
+      <template v-else>
+        {{ $options.methods.getLabelOrURL(props.value) }}
+      </template>
+    </div>
   </div>
 </template>
 

web-frontend/modules/database/components/formula/array/FunctionalFormulaMultipleSelectArrayItem.vue

@@ -1,16 +1,14 @@
 <template functional>
-  <div class="array-field__multiple-select-item">
+  <span class="array-field__multiple-select-container">
     <div
       v-for="item in props.value"
       :key="item.id"
-      class="array-field__multiple-select-option"
+      class="array-field__single-option"
       :class="'background-color--' + item.color"
     >
-      <div v-if="item.value" class="array-field__name">
-        {{ item.value }}
-      </div>
+      <div class="array-field__ellipsis">{{ item.value }}</div>
     </div>
-  </div>
+  </span>
 </template>
 
 <script>

web-frontend/modules/database/components/formula/array/FunctionalFormulaSingleSelectArrayItem.vue

@@ -1,12 +1,10 @@
 <template functional>
   <div
     v-if="props.value"
-    class="array-field__single-select-option"
+    class="array-field__single-option"
     :class="'background-color--' + props.value.color"
   >
-    <div v-if="props.value.value" class="array-field__name">
-      {{ props.value.value }}
-    </div>
+    <div class="array-field__ellipsis">{{ props.value.value }}</div>
   </div>
 </template>
 

web-frontend/modules/database/components/view/grid/fields/FunctionalGridViewFieldArray.vue

@@ -3,12 +3,14 @@
   <component
     :is="$options.components.FunctionalFormulaArrayItems"
     class="grid-view__cell grid-view-array-field"
-    :class="data.staticClass || ''"
+    :class="[data.staticClass, data.class]"
     :field="props.field"
     :value="props.value"
     :selected="props.selected"
     v-on="listeners"
-  ></component>
+  >
+    <slot></slot>
+  </component>
 </template>
 
 <script>

web-frontend/modules/database/components/view/grid/fields/FunctionalGridViewFieldLinkRow.vue

@@ -12,6 +12,7 @@
             'grid-field-link-row__unnamed':
               item.value === null || item.value === '',
           }"
+          :title="item.value"
         >
           {{
             item.value ||

web-frontend/modules/database/components/view/grid/fields/GridViewFieldArray.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="grid-view__cell active">
-    <FunctionalGridViewFieldArray
-      :field="field"
-      :value="value"
-      :selected="selected"
-      v-on="$listeners"
-      @show="showModal"
-    ></FunctionalGridViewFieldArray>
+  <FunctionalGridViewFieldArray
+    :field="field"
+    :value="value"
+    :selected="selected"
+    v-on="$listeners"
+    @show="showModal"
+  >
+    <!--
+    This modal has to be added as slot because the component must have the
+    `FunctionalGridViewFieldArray` component as root element.
+    -->
     <component
       :is="modalComponent"
       v-if="needsModal"
@@ -14,7 +17,7 @@
       :read-only="true"
       :value="value"
     ></component>
-  </div>
+  </FunctionalGridViewFieldArray>
 </template>
 
 <script>

web-frontend/modules/database/components/view/grid/fields/GridViewFieldLinkRow.vue

@@ -14,6 +14,7 @@
             'grid-field-link-row__unnamed':
               item.value === null || item.value === '',
           }"
+          :title="item.value"
         >
           {{
             item.value || $t('gridViewFieldLinkRow.unnamed', { value: item.id })

web-frontend/modules/database/formula/formulaTypes.js

@@ -109,7 +109,7 @@ export class BaserowFormulaTypeDefinition extends Registerable {
       .getCardComponent()
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaArrayItem
   }
 
@@ -302,7 +302,7 @@ export class BaserowFormulaBooleanType extends BaserowFormulaTypeDefinition {
     return 3
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaBooleanArrayItem
   }
 
@@ -336,7 +336,7 @@ export class BaserowFormulaDateType extends BaserowFormulaTypeDefinition {
     return 4
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaDateArrayItem
   }
 
@@ -382,7 +382,7 @@ export class BaserowFormulaDurationType extends BaserowFormulaTypeDefinition {
     return true
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaArrayDurationItem
   }
 
@@ -696,7 +696,7 @@ export class BaserowFormulaFileType extends BaserowFormulaTypeDefinition {
     return GridViewSingleFile
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaFileArrayItem
   }
 
@@ -783,7 +783,7 @@ export class BaserowFormulaSingleSelectType extends BaserowFormulaTypeDefinition
     return RowEditFieldSingleSelectReadOnly
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaSingleSelectArrayItem
   }
 
@@ -825,7 +825,7 @@ export class BaserowFormulaMultipleSelectType extends BaserowFormulaTypeDefiniti
     return RowEditFieldMultipleSelectReadOnly
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaMultipleSelectArrayItem
   }
 
@@ -879,7 +879,7 @@ export class BaserowFormulaLinkType extends BaserowFormulaTypeDefinition {
     return 10
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaLinkArrayItem
   }
 
@@ -929,7 +929,7 @@ export class BaserowFormulaButtonType extends BaserowFormulaLinkType {
     return RowCardFieldButton
   }
 
-  getFunctionalGridViewFieldArrayComponent() {
+  getFunctionalFieldArrayComponent() {
     return FunctionalFormulaButtonArrayItem
   }
 }