UX: Hide AI preferences page completely if no settings for user

assets/javascripts/discourse/connectors/user-preferences-nav/ai-preferences.gjs

@@ -3,9 +3,25 @@ import { LinkTo } from "@ember/routing";
 import dIcon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 
+function showAiPreferences(user, siteSettings) {
+  // Since we only have one AI related user setting we don't show
+  // AI preferences if these don't conditions aren't met.
+  // If we add more user settings in the future we can move this
+  // logic to the the specific settins and conditionally show it in the template.
+  const userGroups = user.groups.map((g) => g.id);
+  const captionGroups = siteSettings.ai_auto_image_caption_allowed_groups
+    .split("|")
+    .map((id) => parseInt(id, 10));
+
+  return userGroups.some((groupId) => captionGroups.includes(groupId));
+}
+
 export default class AutoImageCaptionSetting extends Component {
   static shouldRender(outletArgs, helper) {
-    return helper.siteSettings.discourse_ai_enabled;
+    return (
+      helper.siteSettings.discourse_ai_enabled &&
+      showAiPreferences(outletArgs.model, helper.siteSettings)
+    );
   }
 
   <template>

assets/javascripts/discourse/controllers/preferences-ai.js

@@ -11,15 +11,6 @@ export default class PreferencesAiController extends Controller {
   @service siteSettings;
   @tracked saved = false;
 
-  get canToggleAutoImageCaption() {
-    const userGroups = this.model.groups.map((g) => g.id);
-    const captionGroups = this.siteSettings.ai_auto_image_caption_allowed_groups
-      .split("|")
-      .map((id) => parseInt(id, 10));
-
-    return userGroups.some((groupId) => captionGroups.includes(groupId));
-  }
-
   @action
   save() {
     this.saved = false;

assets/javascripts/discourse/templates/preferences/ai.hbs

@@ -1,24 +1,17 @@
 <label class="control-label">{{i18n "discourse_ai.title"}}</label>
 
-{{#if this.canToggleAutoImageCaption}}
+<div class="control-group ai-setting">
-  <div class="control-group ai-setting">
+  <PreferenceCheckbox
-    <PreferenceCheckbox
+    @labelKey="discourse_ai.ai_helper.image_caption.automatic_caption_setting"
-      @labelKey="discourse_ai.ai_helper.image_caption.automatic_caption_setting"
+    @checked={{this.model.user_option.auto_image_caption}}
-      @checked={{this.model.user_option.auto_image_caption}}
+    data-setting-name="auto-image-caption"
-      data-setting-name="auto-image-caption"
+    class="pref-auto-image-caption"
-      class="pref-auto-image-caption"
+  />
-    />
+</div>
-  </div>
 
-  <SaveControls
+<SaveControls
-    @id="user_ai_preference_save"
+  @id="user_ai_preference_save"
-    @model={{this.model}}
+  @model={{this.model}}
-    @action={{this.save}}
+  @action={{this.save}}
-    @saved={{this.saved}}
+  @saved={{this.saved}}
-  />
+/>
-{{else}}
-  <EmptyState
-    @title={{i18n "discourse_ai.user_preferences.empty_state.title"}}
-    @body={{i18n "discourse_ai.user_preferences.empty_state.body"}}
-  />
-{{/if}}

config/locales/client.en.yml

@@ -119,11 +119,6 @@ en:
     discourse_ai:
       title: "AI"
 
-      user_preferences:
-        empty_state:
-          title: "No AI specific user preferences available."
-          body: "There are currently no user preferences related to AI that are available for you to toggle."
-
       modals:
         select_option: "Select an option..."