Add hints for configurations that impact performance

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"
       >

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"

client/web/compose/src/components/Common/Hint.c3.js

@@ -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: [],
-}

client/web/compose/src/components/Common/Hint.vue

@@ -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>

client/web/compose/src/components/ModuleFields/Configurator/Record.vue

@@ -15,10 +15,15 @@
     <template
       v-if="selectedModule"
     >
-      <b-form-group
+      <b-form-group label-class="d-flex align-items-center text-primary p-0">
-        :label="$t('kind.record.moduleField')"
+        <template #label>
-        label-class="text-primary"
+          {{ $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"

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
+        {{ $t('sanitizers.label') }}
-          class="d-flex"
+
+        <b-button
+          variant="link"
+          class="p-0 ml-1 mr-auto"
+          @click="field.expressions.sanitizers.push('')"
         >
-          {{ $t('sanitizers.label') }}
+          {{ $t('sanitizers.add') }}
+        </b-button>
 
-          <b-button
+        <b-button
-            variant="link"
+          variant="link"
-            class="p-0 ml-1 mr-auto"
+          :href="`${documentationURL}#value-sanitizers`"
-            @click="field.expressions.sanitizers.push('')"
+          target="_blank"
-          >
+          class="p-0 ml-1"
-            {{ $t('sanitizers.add') }}
+        >
-          </b-button>
+          {{ $t('sanitizers.examples') }}
-
+        </b-button>
-          <b-button
-            variant="link"
-            :href="`${documentationURL}#value-sanitizers`"
-            target="_blank"
-            class="p-0 ml-1"
-          >
-            {{ $t('sanitizers.examples') }}
-          </b-button>
-        </div>
       </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
+        {{ $t('validators.label') }}
-          class="d-flex"
+
+        <b-button
+          variant="link"
+          class="p-0 ml-1 mr-auto"
+          @click="field.expressions.validators.push({ test: '', error: '' })"
         >
-          {{ $t('validators.label') }}
+          {{ $t('sanitizers.add') }}
+        </b-button>
 
-          <b-button
+        <b-button
-            variant="link"
+          variant="link"
-            class="p-0 ml-1 mr-auto"
+          :href="`${documentationURL}#value-validators`"
-            @click="field.expressions.validators.push({ test: '', error: '' })"
+          target="_blank"
-          >
+          class="p-0 ml-1"
-            {{ $t('sanitizers.add') }}
+        >
-          </b-button>
+          {{ $t('sanitizers.examples') }}
-
+        </b-button>
-          <b-button
-            variant="link"
-            :href="`${documentationURL}#value-validators`"
-            target="_blank"
-            class="p-0 ml-1"
-          >
-            {{ $t('sanitizers.examples') }}
-          </b-button>
-        </div>
       </template>
 
       <field-expressions
@@ -121,8 +113,19 @@
 
     <hr>
 
-    <div>
+    <b-form-group
-      <h5>{{ $t('constraints.label') }}</h5>
+      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>
 

client/web/compose/src/components/ModuleFields/Editor/Bool.vue

@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>
@@ -46,9 +44,7 @@
       >
         {{ label }}
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
       </div>
     </c-input-checkbox>
 

client/web/compose/src/components/ModuleFields/Editor/DateTime.vue

@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Email.vue

@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/File.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Geometry.vue

@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Number.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Record.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Select.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/String.vue

@@ -21,9 +21,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/Url.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

client/web/compose/src/components/ModuleFields/Editor/User.vue

@@ -20,9 +20,7 @@
           {{ label }}
         </span>
 
-        <hint
+        <c-hint :tooltip="hint" />
-          :text="hint"
-        />
 
         <slot name="tools" />
       </div>

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: {

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>
+            <span class="d-inline-block mw-100 py-1">
+              {{ field.label || field.name }}
+            </span>
+
+            <c-hint :tooltip="((field.options.hint || {}).view || '')" />
+
             <div
-              class="d-flex align-items-center text-primary mb-0"
+              v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
+              class="inline-actions ml-2"
             >
-              <span class="d-inline-block mw-100 py-1">
+              <b-button
-                {{ field.label || field.name }}
+                :title="$t('field.inlineEdit.button.title')"
-              </span>
+                variant="outline-light"
-
+                size="sm"
-              <hint
+                :disabled="editable"
-                :text="((field.options.hint || {}).view || '')"
+                class="text-secondary border-0"
-              />
+                @click="editInlineField(fieldRecord, field)"
-
-              <div
-                v-if="options.inlineRecordEditEnabled && isFieldEditable(field)"
-                class="inline-actions ml-2"
               >
-                <b-button
+                <font-awesome-icon
-                  :title="$t('field.inlineEdit.button.title')"
+                  :icon="['fas', 'pen']"
-                  variant="outline-light"
+                />
-                  size="sm"
+              </b-button>
-                  :disabled="editable"
-                  class="text-secondary border-0"
-                  @click="editInlineField(fieldRecord, field)"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', 'pen']"
-                  />
-                </b-button>
-              </div>
             </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,
   },
 

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`"

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
+              <span class="d-inline-block text-truncate mw-100 py-1">
-                class="d-flex align-items-center text-primary mb-0"
+                {{ field.label || field.name }}
-              >
+              </span>
-                <span class="d-inline-block text-truncate mw-100 py-1">
-                  {{ field.label || field.name }}
-                </span>
 
-                <hint
+              <c-hint :tooltip="((field.options.hint || {}).view || '')" />
-                  :text="((field.options.hint || {}).view || '')"
-                />
-              </div>
             </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,

client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue

@@ -38,9 +38,16 @@
             md="6"
           >
             <b-form-group
-              :label="$t('recordList.record.inlineEditorAllow')"
+              label-class="d-flex align-items-center text-primary"
-              label-class="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="d-flex align-items-center text-primary p-0"
-                label-class="text-primary"
               >
+                <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="d-flex align-items-center text-primary p-0"
-                label-class="text-primary"
               >
+                <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="d-flex align-items-center text-primary mb-0"
-                label-class="text-primary"
               >
+                <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>

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)

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"
           />

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="d-flex align-items-center text-primary mb-0"
-        label-class="text-primary"
       >
+        <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">

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>

lib/vue/src/components/hint/index.ts

@@ -0,0 +1 @@
+export { default as CHint } from './CHint.vue'

lib/vue/src/components/index.ts

@@ -89,4 +89,8 @@ export {
   CToolbar,
 } from './toolbar'
 
+export {
+  CHint,
+} from './hint'
+
 export { default as C3 } from './c3'

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: '',

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)'

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
+

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:

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

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