feat(canisters): allow canister names up to 64 characters (#8013)

# Motivation

The backend accepts canister names up to 64 characters since #8012. The
frontend still validates against the old 24-character limit. A
64-character name can also be one long word, so the detail page and the
top-up confirm screen need a wrap rule for it.

# Changes

- Raised `MAX_CANISTER_NAME_LENGTH` from 24 to 64.
- Updated the `error__canister.name_too_long` message to state 64
characters.
- Added `overflow-wrap: anywhere` to the canister heading title, the
heading subtitle, and the name on the cycles confirm screen.
- Updated the tests that hardcoded the old limit in names and messages.

---

Prev. #8012

Author: yhabib

frontend/src/lib/api/canisters.api.ts

@@ -104,6 +104,7 @@ export const attachCanister = async ({
   if (isNameTooLong(name)) {
     throw new CanisterNameTooLongError("error__canister.name_too_long", {
       $name: name,
+      $max: String(MAX_CANISTER_NAME_LENGTH),
     });
   }
 
@@ -133,6 +134,7 @@ export const renameCanister = async ({
   if (isNameTooLong(name)) {
     throw new CanisterNameTooLongError("error__canister.name_too_long", {
       $name: name,
+      $max: String(MAX_CANISTER_NAME_LENGTH),
     });
   }
 
@@ -235,6 +237,7 @@ export const createCanister = async ({
   if (isNameTooLong(name)) {
     throw new CanisterNameTooLongError("error__canister.name_too_long", {
       $name: name,
+      $max: String(MAX_CANISTER_NAME_LENGTH),
     });
   }
 

frontend/src/lib/canisters/nns-dapp/nns-dapp.canister.ts

@@ -38,6 +38,7 @@ import type {
   RenameSubAccountResponse,
   SubAccountDetails,
 } from "$lib/canisters/nns-dapp/nns-dapp.types";
+import { MAX_CANISTER_NAME_LENGTH } from "$lib/constants/canisters.constants";
 import { toNullable } from "@dfinity/utils";
 import { AccountIdentifier } from "@icp-sdk/canisters/ledger/icp";
 import { Actor } from "@icp-sdk/core/agent";
@@ -255,6 +256,7 @@ export class NNSDappCanister {
     if ("NameTooLong" in response) {
       throw new CanisterNameTooLongError("error__canister.name_too_long", {
         $name: name,
+        $max: String(MAX_CANISTER_NAME_LENGTH),
       });
     }
     if ("CanisterLimitExceeded" in response) {
@@ -286,6 +288,7 @@ export class NNSDappCanister {
     if ("NameTooLong" in response) {
       throw new CanisterNameTooLongError("error__canister.name_too_long", {
         $name: name,
+        $max: String(MAX_CANISTER_NAME_LENGTH),
       });
     }
     if ("CanisterNotFound" in response) {

frontend/src/lib/components/canister-detail/CanisterHeadingTitle.svelte

@@ -43,6 +43,8 @@
     // Needed if the canister id is very long for mobile and uses multiple lines.
     text-align: center;
     margin: 0;
+    // A canister name can be one long word without spaces.
+    overflow-wrap: anywhere;
   }
 
   .skeleton {

frontend/src/lib/components/canister-detail/CanisterPageHeading.svelte

@@ -21,7 +21,9 @@
   />
   <svelte:fragment slot="subtitle">
     {#if canister.name.length > 0 && isController}
-      <HeadingSubtitle testId="subtitle">{canister.name}</HeadingSubtitle>
+      <HeadingSubtitle testId="subtitle" breakLongWords
+        >{canister.name}</HeadingSubtitle
+      >
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="tags">

frontend/src/lib/components/canisters/ConfirmCyclesCanister.svelte

@@ -32,7 +32,7 @@
   {#if nonNullish(name) && name !== ""}
     <KeyValuePair>
       {#snippet key()}<span>{$i18n.canisters.name}</span>{/snippet}
-      {#snippet value()}<span>{name}</span>{/snippet}
+      {#snippet value()}<span class="canister-name">{name}</span>{/snippet}
     </KeyValuePair>
   {/if}
   <p class="conversion">
@@ -86,6 +86,12 @@
     @include fonts.h3;
   }
 
+  .canister-name {
+    // A canister name can be one long word without spaces.
+    overflow-wrap: anywhere;
+    text-align: right;
+  }
+
   .conversion {
     display: flex;
     align-items: baseline;

frontend/src/lib/components/common/HeadingSubtitle.svelte

@@ -1,12 +1,24 @@
 <script lang="ts">
   export let testId: string | undefined = undefined;
+  // Opt in when the subtitle can be one long word without spaces.
+  export let breakLongWords = false;
 </script>
 
-<h4 data-tid={testId} class="description"><slot /></h4>
+<h4
+  data-tid={testId}
+  class="description"
+  class:break-long-words={breakLongWords}
+>
+  <slot />
+</h4>
 
 <style lang="scss">
   h4 {
     margin: 0;
     font-weight: normal;
+
+    &.break-long-words {
+      overflow-wrap: anywhere;
+    }
   }
 </style>

frontend/src/lib/constants/canisters.constants.ts

@@ -7,4 +7,4 @@ export const NEW_CANISTER_MIN_T_CYCLES = 2;
 export const SYNC_CYCLES_TIMER_INTERVAL = SECONDS_IN_MINUTE * 1000; // 1 minute
 
 // Constraint coming from the backend
-export const MAX_CANISTER_NAME_LENGTH = 24;
+export const MAX_CANISTER_NAME_LENGTH = 64;

frontend/src/lib/i18n/en.json

@@ -1128,7 +1128,7 @@
   "error__canister": {
     "already_attached": "Canister ($canisterId) is already linked",
     "name_taken": "The name $name is already in use. Names must be unique.",
-    "name_too_long": "The name $name is too long (max. 24 characters). Please, choose a shorter name.",
+    "name_too_long": "The name $name is too long (max. $max characters). Please, choose a shorter name.",
     "limit_exceeded": "The limit of canisters that can be linked has been exceeded.",
     "unlink_not_found": "Error unlinking, canister ($canisterId) not found.",
     "unknown_link": "Error linking canister.",

frontend/src/tests/lib/api/canisters.api.spec.ts

@@ -121,6 +121,7 @@ describe("canisters-api", () => {
       await expect(call).rejects.toThrowError(
         new CanisterNameTooLongError("error__canister.name_too_long", {
           $name: longName,
+          $max: String(MAX_CANISTER_NAME_LENGTH),
         })
       );
       expect(mockNNSDappCanister.attachCanister).not.toBeCalled();
@@ -150,6 +151,7 @@ describe("canisters-api", () => {
       await expect(call).rejects.toThrowError(
         new CanisterNameTooLongError("error__canister.name_too_long", {
           $name: longName,
+          $max: String(MAX_CANISTER_NAME_LENGTH),
         })
       );
       expect(mockNNSDappCanister.renameCanister).not.toBeCalled();
@@ -352,6 +354,7 @@ describe("canisters-api", () => {
       await expect(call).rejects.toThrowError(
         new CanisterNameTooLongError("error__canister.name_too_long", {
           $name: longName,
+          $max: String(MAX_CANISTER_NAME_LENGTH),
         })
       );
       expect(mockCmcCanister.notifyCreateCanister).not.toBeCalled();

frontend/src/tests/lib/modals/canisters/LinkCanisterModal.spec.ts

@@ -133,7 +133,9 @@ describe("LinkCanisterModal", () => {
     nameInputElement && (await fireEvent.blur(nameInputElement));
 
     expect(
-      queryByText("Canister name too long. Maximum of 24 characters allowed.")
+      queryByText(
+        `Canister name too long. Maximum of ${MAX_CANISTER_NAME_LENGTH} characters allowed.`
+      )
     ).toBeInTheDocument();
     expect(
       queryByTestId("link-canister-button")?.hasAttribute("disabled")