Make list of attribute types more usable

This splits the list in two, one for entity types and one
for everything else.
It also sorts them by the (translated) names of the attribute types,
rather than by the static model name.

Author: reosarevok

lib/MusicBrainz/Server/Controller/Attributes.pm

@@ -10,27 +10,32 @@ use MusicBrainz::Server::Translation qw( l );
 
 BEGIN { extends 'MusicBrainz::Server::Controller' }
 
-my @models = qw(
+my @entity_type_models = qw(
     AreaType
     ArtistType
     CollectionType
-    CoverArtType
     EventType
-    Gender
     InstrumentType
     LabelType
-    Language
-    MediumFormat
     PlaceType
     ReleaseGroupType
     ReleaseGroupSecondaryType
+    SeriesType
+    WorkType
+);
+
+my @other_models = qw(
+    CoverArtType
+    Gender
+    Language
+    MediumFormat
     ReleaseStatus
     ReleasePackaging
     Script
-    SeriesType
-    WorkType
     WorkAttributeType
 );
+
+my @all_models = (@entity_type_models, @other_models);
 # Missing: Alias types, WorkAttributeTypeAllowedValue
 
 sub index : Path('/attributes') Args(0) {
@@ -39,14 +44,17 @@ sub index : Path('/attributes') Args(0) {
     $c->stash(
         current_view => 'Node',
         component_path => 'attributes/Index',
-        component_props => {models => \@models},
+        component_props => {
+            entityTypeModels => \@entity_type_models,
+            otherModels => \@other_models,
+        },
     );
 }
 
 sub attribute_base : Chained('/') PathPart('attributes') CaptureArgs(1) {
     my ($self, $c, $model) = @_;
 
-    $c->detach('/error_404') unless contains_string(\@models, $model);
+    $c->detach('/error_404') unless contains_string(\@all_models, $model);
 
     $c->stash->{model} = $model;
 }

root/attributes/AttributeLayout.js

@@ -8,51 +8,8 @@
  */
 
 import Layout from '../layout/index.js';
-
-export function modelToTitle(model: string): string {
-  switch (model) {
-    case 'AreaType':
-      return l('Area types');
-    case 'ArtistType':
-      return l('Artist types');
-    case 'CollectionType':
-      return l('Collection types');
-    case 'CoverArtType':
-      return l('Cover art types');
-    case 'EventType':
-      return l('Event types');
-    case 'Gender':
-      return l('Genders');
-    case 'InstrumentType':
-      return l('Instrument types');
-    case 'LabelType':
-      return l('Label types');
-    case 'Language':
-      return l('Languages');
-    case 'MediumFormat':
-      return l('Medium formats');
-    case 'PlaceType':
-      return l('Place types');
-    case 'ReleaseGroupSecondaryType':
-      return l('Release group secondary types');
-    case 'ReleaseGroupType':
-      return l('Release group primary types');
-    case 'ReleasePackaging':
-      return l('Release packagings');
-    case 'ReleaseStatus':
-      return l('Release statuses');
-    case 'Script':
-      return l('Scripts');
-    case 'SeriesType':
-      return l('Series types');
-    case 'WorkAttributeType':
-      return l('Work attribute types');
-    case 'WorkType':
-      return l('Work types');
-    default:
-      return model;
-  }
-}
+import attributeModelName
+  from '../static/scripts/common/utility/attributeModelName.js';
 
 type Props = {
   +children: React$Node,
@@ -65,10 +22,10 @@ const AttributeLayout = ({
   model,
   showEditSections,
 }: Props): React$Element<typeof Layout> => (
-  <Layout fullWidth title={modelToTitle(model)}>
+  <Layout fullWidth title={attributeModelName(model)}>
     <h1>
       <a href="/attributes">{l('Attributes')}</a>
-      {' / ' + modelToTitle(model)}
+      {' / ' + attributeModelName(model)}
     </h1>
 
     {children}

root/attributes/Index.js

@@ -9,21 +9,44 @@
  */
 
 import Layout from '../layout/index.js';
+import {sortByString} from '../static/scripts/common/utility/arrays.js';
+import attributeModelName
+  from '../static/scripts/common/utility/attributeModelName.js';
 
-type Props = {
-  +models: Array<string>,
-};
+const AttributeList = ({modelList}: {modelList: Array<string>}) => {
+  const sortedModels = sortByString(
+    modelList,
+    model => attributeModelName(model),
+  );
 
-const Attributes = ({models}: Props): React$Element<typeof Layout> => (
-  <Layout fullWidth title={l('Attributes')}>
-    <h1>{l('Attributes')}</h1>
+  return (
     <ul>
-      {models.sort().map((item) => (
-        <li key={item}>
-          <a href={'/attributes/' + item}>{item}</a>
+      {sortedModels.map((model) => (
+        <li key={model}>
+          <a href={'/attributes/' + model}>{attributeModelName(model)}</a>
         </li>
       ))}
     </ul>
+  );
+};
+
+type Props = {
+  +entityTypeModels: Array<string>,
+  +otherModels: Array<string>,
+};
+
+const Attributes = ({
+  entityTypeModels,
+  otherModels,
+}: Props): React$Element<typeof Layout> => (
+  <Layout fullWidth title={l('Attributes')}>
+    <h1>{l('Attributes')}</h1>
+
+    <h2>{l('Entity types')}</h2>
+    <AttributeList modelList={entityTypeModels} />
+
+    <h2>{l('Other attributes')}</h2>
+    <AttributeList modelList={otherModels} />
   </Layout>
 );
 

root/static/scripts/common/utility/attributeModelName.js

@@ -0,0 +1,55 @@
+/*
+ * @flow strict
+ * Copyright (C) 2022 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+function attributeModelName(model: string): string {
+  switch (model) {
+    case 'AreaType':
+      return l('Area types');
+    case 'ArtistType':
+      return l('Artist types');
+    case 'CollectionType':
+      return l('Collection types');
+    case 'CoverArtType':
+      return l('Cover art types');
+    case 'EventType':
+      return l('Event types');
+    case 'Gender':
+      return l('Genders');
+    case 'InstrumentType':
+      return l('Instrument types');
+    case 'LabelType':
+      return l('Label types');
+    case 'Language':
+      return l('Languages');
+    case 'MediumFormat':
+      return l('Medium formats');
+    case 'PlaceType':
+      return l('Place types');
+    case 'ReleaseGroupSecondaryType':
+      return l('Release group secondary types');
+    case 'ReleaseGroupType':
+      return l('Release group primary types');
+    case 'ReleasePackaging':
+      return l('Release packagings');
+    case 'ReleaseStatus':
+      return l('Release statuses');
+    case 'Script':
+      return l('Scripts');
+    case 'SeriesType':
+      return l('Series types');
+    case 'WorkAttributeType':
+      return l('Work attribute types');
+    case 'WorkType':
+      return l('Work types');
+    default:
+      return model;
+  }
+}
+
+export default attributeModelName;