Show workspace settings modal if clicked on deactivated AI field (baserow#4138)

Author: bram2w

changelog/entries/unreleased/feature/workspace_modal_deactivated_ai_field.json

@@ -0,0 +1,8 @@
+{
+  "type": "feature",
+  "message": "Show workspace settings modal if clicked on deactivated AI field.",
+  "domain": "database",
+  "issue_number": null,
+  "bullet_points": [],
+  "created_at": "2025-10-29"
+}

premium/web-frontend/modules/baserow_premium/fieldTypes.js

@@ -13,6 +13,7 @@ import PremiumFeatures from '@baserow_premium/features'
 import PaidFeaturesModal from '@baserow_premium/components/PaidFeaturesModal'
 import { AIPaidFeature } from '@baserow_premium/paidFeatures'
 import _ from 'lodash'
+import WorkspaceSettingsModal from '@baserow/modules/core/components/workspace/WorkspaceSettingsModal.vue'
 
 export class AIFieldType extends FieldType {
   static getType() {
@@ -204,6 +205,14 @@ export class AIFieldType extends FieldType {
     )
   }
 
+  getDisabledClickModal(workspace) {
+    return [WorkspaceSettingsModal, { workspace }]
+  }
+
+  getDisabledTooltip() {
+    return 'Click to configure API key'
+  }
+
   isDeactivated(workspaceId) {
     return !this.app.$hasFeature(PremiumFeatures.PREMIUM, workspaceId)
   }

premium/web-frontend/modules/baserow_premium/locales/en.json

@@ -350,7 +350,7 @@
     "label": "Prompt",
     "labelDescription": "Describe the formula you would like to generate",
     "generate": "Generate",
-    "noModels": "Your Baserow instance and workspace doesn't have any AI models configured. Click on the three dots next to your workspace, then on settings to configure them."
+    "noModels": "Your Baserow instance and workspace doesn't have any AI models configured. Navigate to the homepage, click on the name of your workspace, then on settings to configure them."
   },
   "formulaFieldAI": {
     "generateWithAI": "Generate using AI",

web-frontend/modules/database/components/field/FieldForm.vue

@@ -40,6 +40,13 @@
               <DropdownItem
                 v-for="(fieldType, type) in fieldTypes"
                 :key="type"
+                v-tooltip="
+                  !fieldType.isDeactivated(workspace.id) &&
+                  !fieldType.isEnabled(workspace)
+                    ? fieldType.getDisabledTooltip(workspace)
+                    : null
+                "
+                tooltip-position="top"
                 :icon="fieldType.iconClass"
                 :name="fieldType.getName()"
                 :alias="fieldType.getAlias()"
@@ -49,7 +56,7 @@
                   !fieldType.isEnabled(workspace) ||
                   fieldType.isDeactivated(workspace.id)
                 "
-                @click="clickOnDeactivatedItem($event, fieldType)"
+                @click="clickOnItem($event, fieldType)"
               >
                 <i class="select__item-icon" :class="fieldType.iconClass" />
                 <span
@@ -79,6 +86,24 @@
                   "
                   :workspace="workspace"
                 ></component>
+                <component
+                  :is="
+                    fieldType.getDisabledClickModal(workspace)
+                      ? fieldType.getDisabledClickModal(workspace)[0]
+                      : null
+                  "
+                  :ref="'disabledClickModal-' + fieldType.type"
+                  :v-if="
+                    !fieldType.isEnabled(workspace) &&
+                    fieldType.getDisabledClickModal(workspace)
+                  "
+                  v-bind="
+                    fieldType.getDisabledClickModal(workspace)
+                      ? fieldType.getDisabledClickModal(workspace)[1]
+                      : null
+                  "
+                  :workspace="workspace"
+                ></component>
               </DropdownItem>
             </Dropdown>
 
@@ -394,9 +419,11 @@ export default {
       this.$emit('keydown-enter')
       this.submit()
     },
-    clickOnDeactivatedItem(event, fieldType) {
+    clickOnItem(event, fieldType) {
       if (fieldType.isDeactivated(this.workspace.id)) {
         this.$refs[`deactivatedClickModal-${fieldType.type}`][0].show()
+      } else if (!fieldType.isEnabled(this.workspace)) {
+        this.$refs[`disabledClickModal-${fieldType.type}`][0].show()
       }
     },
     /**

web-frontend/modules/database/fieldTypes.js

@@ -964,6 +964,21 @@ export class FieldType extends Registerable {
     return true
   }
 
+  /**
+   * Can return a modal vue component that's opened when the user clicks in this
+   * field type, but `isEnabled` is false. Should return [component, props as {}]
+   */
+  getDisabledClickModal(workspace) {
+    return null
+  }
+
+  /**
+   * Can return a tooltip text that's shown on hover when the `isEnabled` is False.
+   */
+  getDisabledTooltip(workspace) {
+    return null
+  }
+
   /**
    * Indicates whether the field is visible, but in a deactivated state.
    */