chore: hide developer tokens section in if there is nothing to display or create (#3753)

framework/core/js/src/forum/components/UserSecurityPage.tsx

@@ -51,17 +51,27 @@ export default class UserSecurityPage<CustomAttrs extends IUserPageAttrs = IUser
   settingsItems() {
     const items = new ItemList<Mithril.Children>();
 
-    ['developerTokens', 'sessions'].forEach((section) => {
+    if (
-      const sectionName = `${section}Items` as 'developerTokensItems' | 'sessionsItems';
+      app.forum.attribute('canCreateAccessToken') ||
-      const sectionLocale = camelCaseToSnakeCase(section);
+      app.forum.attribute('canModerateAccessTokens') ||
-
+      (this.state.hasLoadedTokens() && this.state.getDeveloperTokens()?.length)
+    ) {
       items.add(
-        section,
+        'developerTokens',
-        <FieldSet className={`UserSecurityPage-${section}`} label={app.translator.trans(`core.forum.security.${sectionLocale}_heading`)}>
+        <FieldSet className="UserSecurityPage-developerTokens" label={app.translator.trans(`core.forum.security.developer_tokens_heading`)}>
-          {this[sectionName]().toArray()}
+          {this.developerTokensItems().toArray()}
+        </FieldSet>
+      );
+    } else if (!this.state.hasLoadedTokens()) {
+      items.add('developerTokens', <LoadingIndicator />);
+    }
+
+    items.add(
+      'sessions',
+      <FieldSet className="UserSecurityPage-sessions" label={app.translator.trans(`core.forum.security.sessions_heading`)}>
+        {this.sessionsItems().toArray()}
       </FieldSet>
     );
-    });
 
     if (this.user!.id() === app.session.user!.id()) {
       items.add(