NNS1-3348 display public neuron badge

frontend/src/lib/components/neurons/NeuronsTable/NeuronIdCell.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import Hash from "$lib/components/ui/Hash.svelte";
+  import { i18n } from "$lib/stores/i18n";
   import type { TableNeuron } from "$lib/types/neurons-table";
-  import { Tag } from "@dfinity/gix-components";
+  import { Tag, IconPublicBadge, Tooltip } from "@dfinity/gix-components";
+  import { ENABLE_NEURON_VISIBILITY } from "$lib/stores/feature-flags.store";
 
   export let rowData: TableNeuron;
 </script>
@@ -14,6 +16,13 @@
     idPrefix="neuron-id-cell"
     showCopy
   />
+  {#if $ENABLE_NEURON_VISIBILITY && rowData.isPublic}
+    <span class="public-icon-container" data-tid="public-icon-container">
+      <Tooltip top id="neuron-id-cell-public-icon" text={$i18n.neurons.public}>
+        <IconPublicBadge />
+      </Tooltip>
+    </span>
+  {/if}
   {#if rowData.tags.length > 0}
     <span class="tags" data-tid="neuron-tags">
       {#each rowData.tags as tag}
@@ -26,10 +35,20 @@
 <style lang="scss">
   .container {
     line-height: 1.5;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .public-icon-container {
+      color: var(--elements-badge);
+      line-height: 0;
+      margin-right: var(--padding);
+    }
   }
 
   .tags {
     display: inline-flex;
+    flex-wrap: wrap;
     gap: var(--padding);
   }
 </style>

frontend/src/lib/i18n/en.json

@@ -319,7 +319,8 @@
     "merge_neurons_source_neuron_disappear": "The neuron <strong>$neuronId</strong> will disappear.",
     "merge_neurons_more_info": "Learn more about merging neurons <a href=\"https://medium.com/dfinity/internet-computer-nns-neurons-can-now-be-merged-8b4e44584dc2\" rel=\"noopener noreferrer\" aria-label=\"more info about merging neurons\" target=\"_blank\">here</a>.",
     "stake_amount": "Stake Amount",
-    "state": "State"
+    "state": "State",
+    "public": "Neuron is public"
   },
   "new_followee": {
     "title": "Enter New Followee",

frontend/src/lib/types/i18n.d.ts

@@ -332,6 +332,7 @@ interface I18nNeurons {
   merge_neurons_more_info: string;
   stake_amount: string;
   state: string;
+  public: string;
 }
 
 interface I18nNew_followee {

frontend/src/lib/types/neurons-table.ts

@@ -15,6 +15,7 @@ export type TableNeuron = {
   dissolveDelaySeconds: bigint;
   state: NeuronState;
   tags: string[];
+  isPublic: boolean;
 };
 
 // Should define a partial ordering on TableNeuron by return -1 if a < b, +1 if

frontend/src/lib/utils/neuron.utils.ts

@@ -34,6 +34,7 @@ import {
 import {
   NeuronState,
   NeuronType,
+  NeuronVisibility,
   Topic,
   Vote,
   ineligibleNeurons,
@@ -1064,3 +1065,7 @@ export const getTopicSubtitle = ({
   };
   return mapper[topic];
 };
+
+export const isPublicNeuron = (neuronInfo: NeuronInfo): boolean => {
+  return neuronInfo.visibility === NeuronVisibility.Public;
+};

frontend/src/lib/utils/neurons-table.utils.ts

@@ -5,6 +5,7 @@ import type { UniverseCanisterIdText } from "$lib/types/universe";
 import { buildNeuronUrl } from "$lib/utils/navigation.utils";
 import {
   getNeuronTags,
+  isPublicNeuron,
   isSpawning,
   neuronAvailableMaturity,
   neuronStake,
@@ -69,6 +70,7 @@ export const tableNeuronsFromNeuronInfos = ({
         accounts,
         i18n,
       }).map(({ text }) => text),
+      isPublic: isPublicNeuron(neuronInfo),
     };
   });
 };
@@ -110,6 +112,7 @@ export const tableNeuronsFromSnsNeurons = ({
         identity,
         i18n,
       }).map(({ text }) => text),
+      isPublic: false,
     };
   });
 };

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

@@ -506,4 +506,27 @@ describe("NeuronsTable", () => {
     expect(await cell2.getTags()).toEqual(tags);
     expect(await cell2.hasTagsElement()).toBe(true);
   });
+
+  it("should render visibility icon and tooltip for public neuron", async () => {
+    const po = renderComponent({
+      neurons: [
+        {
+          ...neuron1,
+          isPublic: true,
+        },
+        {
+          ...neuron2,
+        },
+      ],
+    });
+
+    const visibilityTooltipPo = (
+      await po.getNeuronsTableRowPo(neuron1.neuronId)
+    )
+      .getNeuronIdCellPo()
+      .getPublicNeuronTooltipPo();
+
+    expect(await visibilityTooltipPo.isPresent()).toBe(true);
+    expect(await visibilityTooltipPo.getTooltipText()).toBe("Neuron is public");
+  });
 });

frontend/src/tests/lib/utils/neuron.utils.spec.ts

@@ -49,6 +49,7 @@ import {
   isNeuronControllable,
   isNeuronControllableByUser,
   isNeuronControlledByHardwareWallet,
+  isPublicNeuron,
   isSpawning,
   isValidInputAmount,
   mapMergeableNeurons,
@@ -90,6 +91,7 @@ import type { WizardStep } from "@dfinity/gix-components";
 import {
   NeuronState,
   NeuronType,
+  NeuronVisibility,
   Topic,
   Vote,
   type BallotInfo,
@@ -2943,4 +2945,32 @@ describe("neuron-utils", () => {
       );
     });
   });
+
+  describe("isPublicNeuron", () => {
+    it("should correctly identify public neurons", () => {
+      const publicNeuron = {
+        ...mockNeuron,
+        visibility: NeuronVisibility.Public,
+      };
+      expect(isPublicNeuron(publicNeuron)).toBe(true);
+    });
+
+    it("should correctly identify non-public neurons", () => {
+      const privateNeuron = {
+        ...mockNeuron,
+        visibility: NeuronVisibility.Private,
+      };
+      const unspecifiedNeuron = {
+        ...mockNeuron,
+        visibility: NeuronVisibility.Unspecified,
+      };
+      const undefinedVisibilityNeuron = {
+        ...mockNeuron,
+        visibility: undefined,
+      };
+      expect(isPublicNeuron(privateNeuron)).toBe(false);
+      expect(isPublicNeuron(unspecifiedNeuron)).toBe(false);
+      expect(isPublicNeuron(undefinedVisibilityNeuron)).toBe(false);
+    });
+  });
 });

frontend/src/tests/lib/utils/neurons-table.utils.spec.ts

@@ -59,6 +59,7 @@ describe("neurons-table.utils", () => {
       dissolveDelaySeconds: defaultDissolveDelaySeconds,
       state: NeuronState.Locked,
       tags: [],
+      isPublic: false,
     };
 
     const convert = (neuronInfos: NeuronInfo[]) =>
@@ -270,6 +271,7 @@ describe("neurons-table.utils", () => {
       dissolveDelaySeconds,
       state: NeuronState.Locked,
       tags: [],
+      isPublic: false,
     };
 
     const convert = (snsNeurons: SnsNeuron[]) =>

frontend/src/tests/mocks/neurons.mock.ts

@@ -117,4 +117,5 @@ export const mockTableNeuron: TableNeuron = {
   dissolveDelaySeconds: 1n,
   state: NeuronState.Locked,
   tags: [],
+  isPublic: undefined,
 };

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

@@ -1,6 +1,7 @@
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import { HashPo } from "$tests/page-objects/Hash.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
+import { TooltipPo } from "./Tooltip.page-object";
 
 export class NeuronIdCellPo extends BasePageObject {
   private static readonly TID = "neuron-id-cell-component";
@@ -25,4 +26,8 @@ export class NeuronIdCellPo extends BasePageObject {
     const tagElements = await this.root.allByTestId("neuron-tag");
     return Promise.all(tagElements.map((el) => el.getText()));
   }
+
+  getPublicNeuronTooltipPo(): TooltipPo {
+    return TooltipPo.under(this.root.byTestId("public-icon-container"));
+  }
 }