Sort follow neuron topics (#6408)

# Motivation

To improve the user experience, proposal topics need to be displayed in
a sorted order ([the
ticket](https://dfinity.atlassian.net/browse/NNS1-3491)). This applies
to the topic filter and the follow neuron topic list.

In this PR, we address the follow neurons modal.

**Expected order:**
1. Governance.
2. SNS & Neurons' Fund.
3. All Except Governance, and SNS & Neurons' Fund.
4. Rest topics (ExchangeRate included) sorted alphabetically.

# Changes

- Display topics in a specific order.

# Tests

- Added.

# Todos

- [ ] Add entry to changelog (if necessary).
Not necessary.

Author: mstrasinskis

frontend/src/lib/components/neurons/EditFollowNeurons.svelte

@@ -7,6 +7,7 @@
   import { topicsToFollow } from "$lib/utils/neuron.utils";
   import type { NeuronId, NeuronInfo, Topic } from "@dfinity/nns";
   import { onMount } from "svelte";
+  import { sortNnsTopics } from "$lib/utils/proposals.utils";
 
   export let neuronId: NeuronId;
 
@@ -16,8 +17,10 @@
   // Load KnownNeurons which are used in the FollowNnsTopicSections
   onMount(() => listKnownNeurons());
 
-  let topics: Topic[];
-  $: topics = neuron ? topicsToFollow(neuron) : [];
+  let sortedTopics: Topic[];
+  $: sortedTopics = neuron
+    ? sortNnsTopics({ topics: topicsToFollow(neuron), i18n: $i18n })
+    : [];
 </script>
 
 {#if neuron !== undefined}
@@ -26,7 +29,7 @@
 
     <Separator spacing="medium" />
 
-    {#each topics as topic}
+    {#each sortedTopics as topic}
       <FollowNnsTopicSection {neuron} {topic} />
     {/each}
   </div>

frontend/src/lib/components/neurons/FollowTopicSection.svelte

@@ -15,7 +15,7 @@
 <article data-tid={`follow-topic-${id}-section`}>
   <Collapsible {id} iconSize="medium" testId="collapsible">
     <div class="wrapper" slot="header">
-      <span class="value"><slot name="title" /></span>
+      <span class="value" data-tid="topic-title"><slot name="title" /></span>
       <span class="badge" data-tid={`topic-${id}-followees-badge`}>
         {count}
       </span>

frontend/src/tests/lib/components/neurons/EditFollowNeurons.spec.ts

@@ -1,6 +1,8 @@
 import * as governanceApi from "$lib/api/governance.api";
 import EditFollowNeurons from "$lib/components/neurons/EditFollowNeurons.svelte";
+import { DEPRECATED_TOPICS } from "$lib/constants/proposals.constants";
 import { neuronsStore } from "$lib/stores/neurons.store";
+import { enumValues } from "$lib/utils/enum.utils";
 import { resetIdentity } from "$tests/mocks/auth.store.mock";
 import { mockFullNeuron, mockNeuron } from "$tests/mocks/neurons.mock";
 import { EditFollowNeuronsPo } from "$tests/page-objects/EditFollowNeurons.page-object";
@@ -50,6 +52,37 @@ describe("EditFollowNeurons", () => {
     expect(await po.getBadgeNumber(Topic.Governance)).toBe(0);
   });
 
+  it("renders topics in specific order", async () => {
+    const po = renderComponent();
+    const sectionTitles = await po.getFollowNnsTopicTitles();
+
+    // Deprecated + NeuronManagement (because it's not public)
+    const hiddenTopicCount = DEPRECATED_TOPICS.length + 1;
+    expect(sectionTitles.length).toBe(
+      enumValues(Topic).length - hiddenTopicCount
+    );
+
+    expect(sectionTitles).toEqual([
+      "Governance",
+      "SNS & Neurons' Fund",
+      "All Except Governance, and SNS & Neurons' Fund",
+      "API Boundary Node Management",
+      "Application Canister Management",
+      "Exchange Rate",
+      "IC OS Version Deployment",
+      "IC OS Version Election",
+      "KYC",
+      "Network Economics",
+      "Node Admin",
+      "Node Provider Rewards",
+      "Participant Management",
+      "Protocol Canister Management",
+      "Service Nervous System Management",
+      "Subnet Management",
+      "Subnet Rental",
+    ]);
+  });
+
   it("displays the followees of the user in specific topic", async () => {
     const po = renderComponent();
     const topicSectionPo = await po.getFollowTopicSectionPo(Topic.ExchangeRate);

frontend/src/tests/page-objects/EditFollowNeurons.page-object.ts

@@ -14,6 +14,15 @@ export class EditFollowNeuronsPo extends BasePageObject {
     return FollowNnsTopicSectionPo.allUnder(this.root);
   }
 
+  async getFollowNnsTopicTitles(): Promise<string[]> {
+    const topicSectionPos = await this.getFollowNnsTopicSectionPos();
+    return Promise.all(
+      topicSectionPos.map(async (po) =>
+        (await po.getFollowTopicSectionPo()).getTopicTitle()
+      )
+    );
+  }
+
   getFollowTopicSectionPo(topic: number): FollowTopicSectionPo {
     return FollowTopicSectionPo.under({
       element: this.root,

frontend/src/tests/page-objects/FollowTopicSection.page-object.ts

@@ -41,6 +41,10 @@ export class FollowTopicSectionPo extends BasePageObject {
     return this.getButton("open-new-followee-modal");
   }
 
+  getTopicTitle(): Promise<string> {
+    return this.getText("topic-title");
+  }
+
   async getBadgeNumber(): Promise<number> {
     return Number(await this.getText(`topic-${this.topic}-followees-badge`));
   }