From 9626f4862887f2a184c33348cc7cbd29aabf0fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Wed, 1 Nov 2023 16:49:11 +0100
Subject: [PATCH] Add hints for configurations that impact performance

---
 .../Admin/Module/Records/ColumnPicker.vue     | 10 +-
 .../components/Admin/Module/UniqueValues.vue  |  6 ++
 .../compose/src/components/Common/Hint.c3.js  | 15 ---
 .../compose/src/components/Common/Hint.vue    | 22 -----
 .../ModuleFields/Configurator/Record.vue      | 13 ++-
 .../ModuleFields/Configurator/validation.vue  | 97 ++++++++++---------
 .../components/ModuleFields/Editor/Bool.vue   |  8 +-
 .../ModuleFields/Editor/DateTime.vue          |  4 +-
 .../components/ModuleFields/Editor/Email.vue  |  4 +-
 .../components/ModuleFields/Editor/File.vue   |  4 +-
 .../ModuleFields/Editor/Geometry.vue          |  4 +-
 .../components/ModuleFields/Editor/Number.vue |  4 +-
 .../components/ModuleFields/Editor/Record.vue |  4 +-
 .../components/ModuleFields/Editor/Select.vue |  4 +-
 .../components/ModuleFields/Editor/String.vue |  4 +-
 .../components/ModuleFields/Editor/Url.vue    |  4 +-
 .../components/ModuleFields/Editor/User.vue   |  4 +-
 .../components/ModuleFields/Editor/base.vue   |  5 -
 .../src/components/PageBlocks/RecordBase.vue  | 47 ++++-----
 .../PageBlocks/RecordConfigurator.vue         |  5 +
 .../components/PageBlocks/RecordEditor.vue    | 19 ++--
 .../PageBlocks/RecordListConfigurator.vue     | 67 ++++++++++---
 client/web/compose/src/components/index.js    |  1 +
 .../compose/src/views/Admin/Pages/Builder.vue |  4 +-
 .../compose/src/views/Admin/Pages/Edit.vue    | 10 +-
 lib/vue/src/components/hint/CHint.vue         | 39 ++++++++
 lib/vue/src/components/hint/index.ts          |  1 +
 lib/vue/src/components/index.ts               |  4 +
 .../src/components/input/CInputConfirm.vue    |  6 ++
 locale/en/corteza-webapp-compose/block.yaml   | 10 +-
 locale/en/corteza-webapp-compose/field.yaml   |  7 +-
 locale/en/corteza-webapp-compose/module.yaml  |  4 +
 .../corteza-webapp-compose/notification.yaml  |  2 +-
 locale/en/corteza-webapp-compose/page.yaml    |  2 +
 34 files changed, 253 insertions(+), 191 deletions(-)
 delete mode 100644 client/web/compose/src/components/Common/Hint.c3.js
 delete mode 100644 client/web/compose/src/components/Common/Hint.vue
 create mode 100644 lib/vue/src/components/hint/CHint.vue
 create mode 100644 lib/vue/src/components/hint/index.ts

diff --git a/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue b/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
index ce623ef883..a00ca8a369 100644
--- a/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
+++ b/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
@@ -11,12 +11,20 @@
       id="columns"
       size="lg"
       scrollable
-      :title="$t('allRecords.columns.title')"
       :ok-title="$t('general.label.saveAndClose')"
       cancel-variant="link"
       body-class="p-0"
+      title-class="d-flex align-items-center p-0"
       @ok="onSave"
     >
+      <template #modal-title>
+        {{ $t('allRecords.columns.title') }}
+        <c-hint
+          :tooltip="$t('allRecords.tooltip.configureColumns')"
+          icon-class="text-warning"
+        />
+      </template>
+
       <b-card-body
         class="d-flex flex-column mh-100"
       >
diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index 02b7e718a6..a6b67448cb 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -1,5 +1,11 @@
 <template>
   <div>
+    <c-hint
+      :tooltip="$t('tooltip.performance')"
+      icon-class="text-warning"
+      class="float-right"
+    />
+
     <div
       v-for="(rule, index) in rules"
       :key="index"
diff --git a/client/web/compose/src/components/Common/Hint.c3.js b/client/web/compose/src/components/Common/Hint.c3.js
deleted file mode 100644
index ed545b0f23..0000000000
--- a/client/web/compose/src/components/Common/Hint.c3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// eslint-disable-next-line
-import { default as component } from './Hint.vue'
-
-const props = {
-  text: 'I\'m the hint!',
-  id: '34324',
-}
-
-export default {
-  name: 'Hint',
-  group: ['Common'],
-  component,
-  props,
-  controls: [],
-}
diff --git a/client/web/compose/src/components/Common/Hint.vue b/client/web/compose/src/components/Common/Hint.vue
deleted file mode 100644
index a6052929e0..0000000000
--- a/client/web/compose/src/components/Common/Hint.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div
-    v-if="text"
-    v-b-popover.hover.right="{ variant: 'dark', content: text }"
-    class="d-flex align-items-center ml-2"
-  >
-    <font-awesome-icon
-      :icon="['far', 'question-circle']"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-  },
-}
-</script>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
index 6ab260fb14..685edd3b08 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Record.vue
@@ -15,10 +15,15 @@
     <template
       v-if="selectedModule"
     >
-      <b-form-group
-        :label="$t('kind.record.moduleField')"
-        label-class="text-primary"
-      >
+      <b-form-group label-class="d-flex align-items-center text-primary p-0">
+        <template #label>
+          {{ $t('kind.record.moduleField') }}
+          <c-hint
+            :tooltip="$t('kind.record.tooltip.moduleField')"
+            icon-class="text-warning"
+          />
+        </template>
+
         <b-form-select
           v-model="f.options.labelField"
           :options="fieldOptions"
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
index b21c13079e..9cbb32cff8 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
@@ -5,31 +5,27 @@
     <b-form-group
       :label="$t('sanitizers.label')"
       label-size="lg"
-      label-class="text-primary"
+      label-class="d-flex align-items-center text-primary"
     >
       <template #label>
-        <div
-          class="d-flex"
-        >
-          {{ $t('sanitizers.label') }}
-
-          <b-button
-            variant="link"
-            class="p-0 ml-1 mr-auto"
-            @click="field.expressions.sanitizers.push('')"
-          >
-            {{ $t('sanitizers.add') }}
-          </b-button>
+        {{ $t('sanitizers.label') }}
 
-          <b-button
-            variant="link"
-            :href="`${documentationURL}#value-sanitizers`"
-            target="_blank"
-            class="p-0 ml-1"
-          >
-            {{ $t('sanitizers.examples') }}
-          </b-button>
-        </div>
+        <b-button
+          variant="link"
+          class="p-0 ml-1 mr-auto"
+          @click="field.expressions.sanitizers.push('')"
+        >
+          {{ $t('sanitizers.add') }}
+        </b-button>
+
+        <b-button
+          variant="link"
+          :href="`${documentationURL}#value-sanitizers`"
+          target="_blank"
+          class="p-0 ml-1"
+        >
+          {{ $t('sanitizers.examples') }}
+        </b-button>
       </template>
 
       <field-expressions
@@ -46,32 +42,28 @@
 
     <b-form-group
       label-size="lg"
-      label-class="text-primary"
+      label-class="d-flex text-primary"
       class="mt-3"
     >
       <template #label>
-        <div
-          class="d-flex"
-        >
-          {{ $t('validators.label') }}
-
-          <b-button
-            variant="link"
-            class="p-0 ml-1 mr-auto"
-            @click="field.expressions.validators.push({ test: '', error: '' })"
-          >
-            {{ $t('sanitizers.add') }}
-          </b-button>
+        {{ $t('validators.label') }}
 
-          <b-button
-            variant="link"
-            :href="`${documentationURL}#value-validators`"
-            target="_blank"
-            class="p-0 ml-1"
-          >
-            {{ $t('sanitizers.examples') }}
-          </b-button>
-        </div>
+        <b-button
+          variant="link"
+          class="p-0 ml-1 mr-auto"
+          @click="field.expressions.validators.push({ test: '', error: '' })"
+        >
+          {{ $t('sanitizers.add') }}
+        </b-button>
+
+        <b-button
+          variant="link"
+          :href="`${documentationURL}#value-validators`"
+          target="_blank"
+          class="p-0 ml-1"
+        >
+          {{ $t('sanitizers.examples') }}
+        </b-button>
       </template>
 
       <field-expressions
@@ -121,8 +113,19 @@
 
     <hr>
 
-    <div>
-      <h5>{{ $t('constraints.label') }}</h5>
+    <b-form-group
+      label-size="lg"
+      label-class="d-flex align-items-center text-primary"
+      class="mt-3"
+    >
+      <template #label>
+        {{ $t('constraints.label') }}
+        <c-hint
+          :tooltip="$t('constraints.tooltip.performance')"
+          icon-class="text-warning"
+        />
+      </template>
+
       <b-form-checkbox
         v-model="fieldConstraint.exists"
         class="mt-3"
@@ -173,7 +176,7 @@
           </i>
         </b-col>
       </b-row>
-    </div>
+    </b-form-group>
   </div>
 </template>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Bool.vue b/client/web/compose/src/components/ModuleFields/Editor/Bool.vue
index 363090660e..fb078af706 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Bool.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Bool.vue
@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
@@ -46,9 +44,7 @@
       >
         {{ label }}
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
       </div>
     </c-input-checkbox>
 
diff --git a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
index df995ddb66..051543b323 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Email.vue b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
index f321613829..2a0184967c 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Email.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/File.vue b/client/web/compose/src/components/ModuleFields/Editor/File.vue
index 521e38f554..bb2fbd8e49 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/File.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue b/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
index 85ce5390e0..87d662ccde 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Geometry.vue
@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Number.vue b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
index 9d4bbb374c..478f11aba1 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Number.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
index 0b39d892d3..87bab70e12 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Record.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
index ad8a16a0c6..7b6d5b742a 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
index d850cf7a94..9b2c56c383 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/String.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/Url.vue b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
index d00143eaab..ff468f022d 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/Url.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/User.vue b/client/web/compose/src/components/ModuleFields/Editor/User.vue
index d0ed25d2f4..d53e7b1bdc 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/User.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/User.vue
@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
-          :text="hint"
-        />
+        <c-hint :tooltip="hint" />
 
         <slot name="tools" />
       </div>
diff --git a/client/web/compose/src/components/ModuleFields/Editor/base.vue b/client/web/compose/src/components/ModuleFields/Editor/base.vue
index 390e1c58d9..cf1222660b 100644
--- a/client/web/compose/src/components/ModuleFields/Editor/base.vue
+++ b/client/web/compose/src/components/ModuleFields/Editor/base.vue
@@ -14,7 +14,6 @@
 import multi from './multi'
 import errors from '../errors'
 import { compose, validator } from '@cortezaproject/corteza-js'
-import Hint from 'corteza-webapp-compose/src/components/Common/Hint.vue'
 
 export default {
   components: {
@@ -25,10 +24,6 @@ export default {
     // errors is used in the components that extends base
     // eslint-disable-next-line vue/no-unused-components
     errors,
-
-    // Hint is used in the components that extends base
-    // eslint-disable-next-line vue/no-unused-components
-    Hint,
   },
 
   props: {
diff --git a/client/web/compose/src/components/PageBlocks/RecordBase.vue b/client/web/compose/src/components/PageBlocks/RecordBase.vue
index 5172eef16c..cb1597a055 100644
--- a/client/web/compose/src/components/PageBlocks/RecordBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordBase.vue
@@ -22,37 +22,32 @@
           :label-cols-xl="options.horizontalFieldLayoutEnabled && '4'"
           :content-cols-md="options.horizontalFieldLayoutEnabled && '7'"
           :content-cols-xl="options.horizontalFieldLayoutEnabled && '8'"
+          label-class="d-flex align-items-center text-primary mb-0"
           class="field-container mb-3 px-3"
         >
           <template #label>
-            <div
-              class="d-flex align-items-center text-primary mb-0"
-            >
-              <span class="d-inline-block mw-100 py-1">
-                {{ field.label || field.name }}
-              </span>
+            <span class="d-inline-block mw-100 py-1">
+              {{ field.label || field.name }}
+            </span>
 
-              <hint
-                :text="((field.options.hint || {}).view || '')"
-              />
+            <c-hint :tooltip="((field.options.hint || {}).view || '')" />
 
-              <div
-                v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
-                class="inline-actions ml-2"
+            <div
+              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
+              class="inline-actions ml-2"
+            >
+              <b-button
+                :title="$t('field.inlineEdit.button.title')"
+                variant="outline-light"
+                size="sm"
+                :disabled="editable"
+                class="text-secondary border-0"
+                @click="editInlineField(fieldRecord, field)"
               >
-                <b-button
-                  :title="$t('field.inlineEdit.button.title')"
-                  variant="outline-light"
-                  size="sm"
-                  :disabled="editable"
-                  class="text-secondary border-0"
-                  @click="editInlineField(fieldRecord, field)"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', 'pen']"
-                  />
-                </b-button>
-              </div>
+                <font-awesome-icon
+                  :icon="['fas', 'pen']"
+                />
+              </b-button>
             </div>
 
             <div
@@ -106,7 +101,6 @@ import axios from 'axios'
 import base from './base'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
 import BulkEditModal from 'corteza-webapp-compose/src/components/Public/Record/BulkEdit'
-import Hint from 'corteza-webapp-compose/src/components/Common/Hint.vue'
 import users from 'corteza-webapp-compose/src/mixins/users'
 import records from 'corteza-webapp-compose/src/mixins/records'
 import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
@@ -118,7 +112,6 @@ export default {
 
   components: {
     FieldViewer,
-    Hint,
     BulkEditModal,
   },
 
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index 4497635f56..bf4a8143a8 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -127,6 +127,11 @@
       <h5 class="d-flex align-items-center justify-content-between mb-3">
         {{ $t('record.fieldConditions.label') }}
 
+        <c-hint
+          :tooltip="$t('record.fieldConditions.tooltip.performance')"
+          icon-class="text-warning"
+        />
+
         <b-button
           variant="link"
           :href="`${documentationURL}#value-sanitizers`"
diff --git a/client/web/compose/src/components/PageBlocks/RecordEditor.vue b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
index 6d4df37994..dbf8eb078c 100644
--- a/client/web/compose/src/components/PageBlocks/RecordEditor.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordEditor.vue
@@ -35,19 +35,14 @@
             :label-cols-xl="horizontal && '4'"
             :content-cols-md="horizontal && '7'"
             :content-cols-xl="horizontal && '8'"
+            label-class="d-flex align-items-center text-primary mb-0"
           >
             <template #label>
-              <div
-                class="d-flex align-items-center text-primary mb-0"
-              >
-                <span class="d-inline-block text-truncate mw-100 py-1">
-                  {{ field.label || field.name }}
-                </span>
-
-                <hint
-                  :text="((field.options.hint || {}).view || '')"
-                />
-              </div>
+              <span class="d-inline-block text-truncate mw-100 py-1">
+                {{ field.label || field.name }}
+              </span>
+
+              <c-hint :tooltip="((field.options.hint || {}).view || '')" />
             </template>
 
             <div
@@ -82,7 +77,6 @@ import users from 'corteza-webapp-compose/src/mixins/users'
 import records from 'corteza-webapp-compose/src/mixins/records'
 import FieldEditor from 'corteza-webapp-compose/src/components/ModuleFields/Editor'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
-import Hint from 'corteza-webapp-compose/src/components/Common/Hint.vue'
 import conditionalFields from 'corteza-webapp-compose/src/mixins/conditionalFields'
 import { debounce } from 'lodash'
 
@@ -94,7 +88,6 @@ export default {
   components: {
     FieldEditor,
     FieldViewer,
-    Hint,
   },
 
   extends: base,
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index 4c5a917c51..ce8bd7983b 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -38,9 +38,16 @@
             md="6"
           >
             <b-form-group
-              :label="$t('recordList.record.inlineEditorAllow')"
-              label-class="text-primary"
+              label-class="d-flex align-items-center text-primary"
             >
+              <template #label>
+                {{ $t('recordList.record.inlineEditorAllow') }}
+                <c-hint
+                  :tooltip="$t('recordList.tooltip.performance.impact')"
+                  icon-class="text-warning"
+                />
+              </template>
+
               <c-input-checkbox
                 v-model="options.editable"
                 switch
@@ -56,9 +63,14 @@
 
         <div class="px-3">
           <div class="mb-3">
-            <h5 class="mb-1">
+            <h5 class="d-flex align-items-center text-primary mb-1">
               {{ $t('module:general.fields') }}
+              <c-hint
+                :tooltip="$t('recordList.tooltip.performance.moduleFields')"
+                icon-class="text-warning"
+              />
             </h5>
+
             <small class="text-muted">
               {{ $t('recordList.moduleFieldsFootnote') }}
             </small>
@@ -71,8 +83,21 @@
               <field-picker
                 :module="recordListModule"
                 :fields.sync="options.fields"
+                class="mb-2"
                 style="height: 40vh;"
               />
+
+              <b-form-group
+                :label="$t('recordList.hideConfigureFieldsButton')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  v-model="options.hideConfigureFieldsButton"
+                  switch
+                  invert
+                  :labels="checkboxLabel"
+                />
+              </b-form-group>
             </b-col>
           </b-row>
         </div>
@@ -463,9 +488,16 @@
               <b-form-group
                 horizontal
                 breakpoint="md"
-                :label="$t('recordList.record.perPage')"
-                label-class="text-primary"
+                label-class="d-flex align-items-center text-primary p-0"
               >
+                <template #label>
+                  {{ $t('recordList.record.perPage') }}
+                  <c-hint
+                    :tooltip="$t('recordList.tooltip.performance.perPage')"
+                    icon-class="text-warning"
+                  />
+                </template>
+
                 <b-form-input
                   v-model.number="options.perPage"
                   data-test-id="input-records-per-page"
@@ -517,9 +549,16 @@
               md="6"
             >
               <b-form-group
-                :label="$t('recordList.record.fullPageNavigation')"
-                label-class="text-primary"
+                label-class="d-flex align-items-center text-primary p-0"
               >
+                <template #label>
+                  {{ $t('recordList.record.fullPageNavigation') }}
+                  <c-hint
+                    :tooltip="$t('recordList.tooltip.performance.impact')"
+                    icon-class="text-warning"
+                  />
+                </template>
+
                 <c-input-checkbox
                   v-model="options.fullPageNavigation"
                   switch
@@ -693,9 +732,15 @@
               md="6"
             >
               <b-form-group
-                :label="$t('recordList.enableRecordPageNavigation')"
-                label-class="text-primary"
+                label-class="d-flex align-items-center text-primary mb-0"
               >
+                <template #label>
+                  {{ $t('recordList.enableRecordPageNavigation') }}
+                  <c-hint
+                    :tooltip="$t('recordList.tooltip.performance.impact')"
+                    icon-class="text-warning"
+                  />
+                </template>
                 <c-input-checkbox
                   v-model="options.enableRecordPageNavigation"
                   switch
@@ -753,10 +798,6 @@
                 <b-form-checkbox v-model="options.hideRecordReminderButton">
                   {{ $t('recordList.hideRecordReminderButton') }}
                 </b-form-checkbox>
-
-                <b-form-checkbox v-model="options.hideConfigureFieldsButton">
-                  {{ $t('recordList.hideConfigureFieldsButton') }}
-                </b-form-checkbox>
               </b-form-group>
             </b-col>
           </b-row>
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index f3cd0ed633..f2fa745ed0 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -61,6 +61,7 @@ Vue.component('c-input-processing', components.CInputProcessing)
 Vue.component('c-resource-list', components.CResourceList)
 Vue.component('c-input-checkbox', components.CInputCheckbox)
 Vue.component('c-button-submit', components.CButtonSubmit)
+Vue.component('c-hint', components.CHint)
 
 // Map things
 Vue.component('l-map', LMap)
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 89439866c6..a26ca72f3f 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -200,7 +200,7 @@
           </h5>
           <font-awesome-icon
             v-if="isEditorBlockReferenced"
-            v-b-tooltip.hover.right="{ title: $t('referencedBlock') }"
+            v-b-tooltip.hover.right="{ title: $t('referencedBlock'), container: '#body' }"
             :icon="['fas', 'exclamation-circle']"
             class="text-warning"
           />
@@ -233,7 +233,7 @@
           </h5>
           <font-awesome-icon
             v-if="isEditorBlockReferenced"
-            v-b-tooltip.hover.right="{ title: $t('referencedBlock') }"
+            v-b-tooltip.hover.right="{ title: $t('referencedBlock'), container: '#body' }"
             :icon="['fas', 'exclamation-circle']"
             class="text-warning"
           />
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index b88459b216..612122b9b0 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -477,9 +477,15 @@
       </h5>
 
       <b-form-group
-        :label="$t('page-layout.condition.label')"
-        label-class="text-primary"
+        label-class="d-flex align-items-center text-primary mb-0"
       >
+        <template #label>
+          {{ $t('page-layout.condition.label') }}
+          <c-hint
+            :tooltip="$t('page-layout.tooltip.performance.condition')"
+            icon-class="text-warning"
+          />
+        </template>
         <b-input-group>
           <b-input-group-prepend>
             <b-button variant="dark">
diff --git a/lib/vue/src/components/hint/CHint.vue b/lib/vue/src/components/hint/CHint.vue
new file mode 100644
index 0000000000..c83ad88f4e
--- /dev/null
+++ b/lib/vue/src/components/hint/CHint.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="tooltip"
+    v-b-tooltip.hover.right="{ variant: tooltipVariant, title: tooltip, container: '#body' }"
+    class="d-flex align-items-center ml-1"
+  >
+    <font-awesome-icon
+      :icon="icon"
+      :class="iconClass"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    icon: {
+      type: Array,
+      default: () => ['far', 'question-circle'],
+    },
+
+    iconClass: {
+      type: String,
+      default: 'text-primary',
+    },
+
+    tooltip: {
+      type: String,
+      default: '',
+    },
+
+    tooltipVariant: {
+      type: String,
+      default: 'dark',
+    },
+  },
+}
+</script>
diff --git a/lib/vue/src/components/hint/index.ts b/lib/vue/src/components/hint/index.ts
new file mode 100644
index 0000000000..5d8155cb16
--- /dev/null
+++ b/lib/vue/src/components/hint/index.ts
@@ -0,0 +1 @@
+export { default as CHint } from './CHint.vue'
\ No newline at end of file
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index 42a463f1ed..7b2b8ab7e7 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -89,4 +89,8 @@ export {
   CToolbar,
 } from './toolbar'
 
+export {
+  CHint,
+} from './hint'
+
 export { default as C3 } from './c3'
diff --git a/lib/vue/src/components/input/CInputConfirm.vue b/lib/vue/src/components/input/CInputConfirm.vue
index a92071db35..8309672f78 100644
--- a/lib/vue/src/components/input/CInputConfirm.vue
+++ b/lib/vue/src/components/input/CInputConfirm.vue
@@ -23,6 +23,7 @@
           <font-awesome-icon
             v-if="showIcon"
             :icon="icon"
+            :class="iconClass"
           />
           <span
             v-if="text"
@@ -89,6 +90,11 @@ export default {
       default: '',
     },
 
+    iconClass: {
+      type: String,
+      default: '',
+    },
+
     textClass: {
       type: String,
       default: '',
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 5e93131a28..609fb72fa8 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -258,13 +258,15 @@ record:
   openInNewTab: Open record in a new tab
   openInModal: Open record in a modal
   fieldConditions:
-    label: Field conditions
+    label: Conditional fields
     action: + Add
     placeholder: When should this field be displayed?
     selectPlaceholder: Select field
     help: Example
     field: Field
     condition: Condition
+    tooltip:
+      performance: Using conditional fields will impact performance
 recordList:
   addRecord: Add
   cancelSelection: Cancel
@@ -290,6 +292,10 @@ recordList:
       label: 'Chart drill down'
   tooltip:
     deleteSelected: Delete selected records
+    performance:
+      impact: Using this feature will impact performance
+      moduleFields: Selecting a large number of fields or displaying record/user fields will impact performance
+      perPage: Displaying a large amount of records per page will impact performance, especially if you are displaying record/user fields
     restoreSelected: Restore selected records
   editFields: Editable module fields
   export:
@@ -372,8 +378,8 @@ recordList:
   hideRecordEditButton: Hide edit record button
   hideRecordPermissionsButton: Hide record permissions button
   hideRecordReminderButton: Hide record reminder button
-  hideConfigureFieldsButton: Hide configure columns
   hideRecordViewButton: Hide view record button
+  hideConfigureFieldsButton: Users will be able to configure which fields to display
   enableRecordPageNavigation: Users will be able to navigate to previous/next record
   import:
     dropzoneFileAdded: '{{name}} was uploaded and is ready for import ({{count}} record)'
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index 9ec230d534..aa88fdfeea 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -109,6 +109,8 @@ kind:
     prefilterFootnote: Simplified SQL condition (WHERE ...) syntax is supported. Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
     prefilterLabel: Prefilter records
     prefilterPlaceholder: field1 = 1 AND field2 = 232
+    tooltip:
+      moduleField: Selecting a record field will impact performance
   select:
     allow-duplicates: Allow duplicates
     label: Select
@@ -240,7 +242,7 @@ label:
   required: Required
   multi: Multi value
 constraints:
-  label: Unique value constraint
+  label: Unique value constraints
   description: Use unique value constraints for this field
   ignoreCase: Ignore case
   fuzzyMatch: Fuzzy match
@@ -252,3 +254,6 @@ constraints:
   valueModifiers: Value modifiers
   multiValues: Multi-field values
   totalFieldConstraintCount: The field is used in {{total}} other unique value constraint. See "unique values" tab on module editor.
+  tooltip:
+    performance: Using unique value constraints will impact performance
+
diff --git a/locale/en/corteza-webapp-compose/module.yaml b/locale/en/corteza-webapp-compose/module.yaml
index 34818c5ede..546c3da27d 100644
--- a/locale/en/corteza-webapp-compose/module.yaml
+++ b/locale/en/corteza-webapp-compose/module.yaml
@@ -9,6 +9,8 @@ allRecords:
   columns:
     title: Configure columns
     description: The columns picked won't be saved after you refresh the page
+  tooltip:
+    configureColumns: Selecting a large number of fields or displaying record/user fields will impact performance
   view:
     title: View record for module "{{name}}"
 block:
@@ -205,6 +207,8 @@ edit:
       none: None
       addNewConstraint: Add new constraint
       uniqueValueConstraint: "Unique value constraint #{{index}}"
+      tooltip:
+        performance: Using unique value constraints will impact performance
 
 federated: Federated
 forModule:
diff --git a/locale/en/corteza-webapp-compose/notification.yaml b/locale/en/corteza-webapp-compose/notification.yaml
index b6a9a05320..6f307e2bbc 100644
--- a/locale/en/corteza-webapp-compose/notification.yaml
+++ b/locale/en/corteza-webapp-compose/notification.yaml
@@ -163,7 +163,7 @@ record:
   validationWarnings: Record saved successfully, check warning messages on the form
   staleDataRefresh: Stale record data, all unsaved changes will be lost. Do you wish to refresh the data now?
   fieldConditions:
-    failed: Failed to evaluate record block field conditions
+    failed: Failed to evaluate record block conditional fields
 record-list:
   corrupted-filter: Corrupted filter
   corrupted-configured-fields: Corrupted configured columns
diff --git a/locale/en/corteza-webapp-compose/page.yaml b/locale/en/corteza-webapp-compose/page.yaml
index 73b133df09..129f3439a5 100644
--- a/locale/en/corteza-webapp-compose/page.yaml
+++ b/locale/en/corteza-webapp-compose/page.yaml
@@ -11,6 +11,8 @@ page-layout:
     title: Use the layout title instead of the record page default. Variables like {{0}}, {{1}}, {{2}} and {{3}} are evaluated (when available)
     configure: Configure layout
     builder: Open layout in builder
+    performance:
+      condition: Using visibility conditions will impact performance
   condition:
     label: Condition
     placeholder: When will the layout be shown