Do a little refactoring

Author: tdilauro

src/components/EditableConfigList.tsx

@@ -242,8 +242,42 @@ export abstract class GenericEditableConfigList<
       : `${count} libraries`;
   }
 
+  protected getAssociatedEntries(
+    item: any
+  ): Array<{ label: string; suffix?: string; href?: string }> {
+    const libraries: Array<{ short_name: string }> = item?.libraries || [];
+    const allLibraries: Array<{
+      short_name: string;
+      name?: string;
+      uuid?: string;
+    }> = (this.props.data as any)?.allLibraries || [];
+    return libraries.map((lib) => {
+      const libraryData = allLibraries.find(
+        (l) => l.short_name === lib.short_name
+      );
+      return {
+        label: libraryData?.name || lib.short_name,
+        href: libraryData?.uuid
+          ? `/admin/web/config/libraries/edit/${libraryData.uuid}`
+          : undefined,
+      };
+    });
+  }
+
   protected renderAssociatedSection(item: any): JSX.Element {
-    return this.renderAssociatedLibraries(item);
+    const entries = this.getAssociatedEntries(item).sort((a, b) =>
+      a.label.localeCompare(b.label)
+    );
+    return (
+      <ul className="associated-libraries">
+        {entries.map((entry, i) => (
+          <li key={i}>
+            {entry.href ? <a href={entry.href}>{entry.label}</a> : entry.label}
+            {entry.suffix}
+          </li>
+        ))}
+      </ul>
+    );
   }
 
   renderLi(item, index): JSX.Element {
@@ -355,34 +389,6 @@ export abstract class GenericEditableConfigList<
     this.setState({ expandedItems: newExpandedItems });
   }
 
-  renderAssociatedLibraries(item: any): JSX.Element {
-    const libraries: Array<{ short_name: string }> = item.libraries;
-    const allLibraries: Array<{
-      short_name: string;
-      name?: string;
-      uuid?: string;
-    }> = (this.props.data as any)?.allLibraries || [];
-
-    return (
-      <ul className="associated-libraries">
-        {libraries.map((lib) => {
-          const libraryData = allLibraries.find(
-            (l) => l.short_name === lib.short_name
-          );
-          const name = libraryData?.name || lib.short_name;
-          const href = libraryData?.uuid
-            ? `/admin/web/config/libraries/edit/${libraryData.uuid}`
-            : null;
-          return (
-            <li key={lib.short_name}>
-              {href ? <a href={href}>{name}</a> : name}
-            </li>
-          );
-        })}
-      </ul>
-    );
-  }
-
   label(item): string {
     return item[this.labelKey];
   }

src/components/IndividualAdmins.tsx

@@ -87,7 +87,6 @@ export class IndividualAdmins extends EditableConfigList<
       });
     }
 
-    result.sort((a, b) => a.label.localeCompare(b.label));
     return result;
   }
 
@@ -102,18 +101,10 @@ export class IndividualAdmins extends EditableConfigList<
     return count === 0 ? "no roles" : count === 1 ? "1 role" : `${count} roles`;
   }
 
-  protected renderAssociatedSection(item: IndividualAdminData): JSX.Element {
-    const summary = this.getRolesSummary(item);
-    return (
-      <ul className="associated-libraries">
-        {summary.map((entry, i) => (
-          <li key={i}>
-            {entry.href ? <a href={entry.href}>{entry.label}</a> : entry.label}
-            {entry.suffix}
-          </li>
-        ))}
-      </ul>
-    );
+  protected getAssociatedEntries(
+    item: IndividualAdminData
+  ): Array<{ label: string; suffix?: string; href?: string }> {
+    return this.getRolesSummary(item);
   }
 
   canCreate() {