feat(ui): Set individual name in legacy multisig identifiers (#1449)

* feat(ui): set individual name for legacy group identifier

* feat(ui): update placeholder

---------

Co-authored-by: Vu Van Duc <[email protected]>

Author: Sotatek-DukeVu

src/locales/en/en.json

@@ -587,6 +587,17 @@
       }
     }
   },
+  "setgroup": {
+    "title": "Set name",
+    "text": "Add a name for other members to easily recognize you",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "input": {
+      "label": "Username",
+      "placeholder": "e.g. JohnSmith25"
+    },
+    "alert": "No name was set when this group was created, which means other members can’t recognize who you are. Setting a name helps everyone know who's who."
+  },
   "profiledetails": {
     "done": "Done",
     "identifierdetail": {

src/ui/App.tsx

@@ -18,7 +18,10 @@ import { i18n } from "../i18n";
 import { Routes } from "../routes";
 import { initializeFreeRASP, ThreatCheck } from "../security/freerasp";
 import { useAppDispatch, useAppSelector } from "../store/hooks";
-import { getShowProfileState } from "../store/reducers/profileCache";
+import {
+  getCurrentProfile,
+  getShowProfileState,
+} from "../store/reducers/profileCache";
 import {
   getGlobalLoading,
   getInitializationPhase,
@@ -30,6 +33,7 @@ import { ToastStack } from "./components/CustomToast/ToastStack";
 import { GenericError, NoWitnessAlert } from "./components/Error";
 import { InputRequest } from "./components/InputRequest";
 import { ProfileStateModal } from "./components/ProfileStateModal";
+import { SetGroupName } from "./components/SetGroupName";
 import { SidePage } from "./components/SidePage";
 import {
   ANDROID_MIN_VERSION,
@@ -49,6 +53,18 @@ import { compareVersion } from "./utils/version";
 
 setupIonicReact();
 
+const SetGroupNameWrapper = () => {
+  const currentProfile = useAppSelector(getCurrentProfile);
+
+  const isGroupProfile =
+    !!currentProfile?.identity.groupMetadata ||
+    !!currentProfile?.identity.groupMemberPre;
+
+  if (!isGroupProfile || currentProfile.identity.groupUsername) return;
+
+  return <SetGroupName identifier={currentProfile.identity} />;
+};
+
 const InitPhase = ({ initPhase }: { initPhase: InitializationPhase }) => {
   const showProfileState = useAppSelector(getShowProfileState);
 
@@ -78,6 +94,7 @@ const InitPhase = ({ initPhase }: { initPhase: InitializationPhase }) => {
             <ProfileStateModal />
             <LockPage />
           </IonReactRouter>
+          <SetGroupNameWrapper />
           <AppOffline />
         </>
       );

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.tsx

@@ -101,9 +101,6 @@ const ProfileDetailsModal = ({
   });
 
   const handleDelete = async () => {
-    handleClose();
-    setHidden(true);
-
     try {
       setVerifyIsOpen(false);
       const filterId = profile
@@ -112,9 +109,19 @@ const ProfileDetailsModal = ({
         ? profileId
         : undefined;
 
+      setHidden(true);
       await deleteIdentifier();
       if (defaultProfile?.identity.id === filterId) {
-        await setRecentProfileAsDefault();
+        const nextIdentifier = await setRecentProfileAsDefault();
+        // If the user upgrades to app version 1.2 and, after deleting a profile,
+        // the next profile is a group profile without a username, then close the profiles screen and display the “set profile name” screen.
+        const isGroup =
+          !!nextIdentifier?.groupMetadata || !!nextIdentifier?.groupMemberPre;
+        if (isGroup && !nextIdentifier.groupUsername) {
+          setIsOpen(false, true);
+        } else {
+          handleClose();
+        }
       }
       dispatch(setToastMsg(ToastMsgType.IDENTIFIER_DELETED));
       dispatch(removeProfile(filterId || ""));

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.types.ts

@@ -4,7 +4,7 @@ interface IdentifierDetailModalProps {
   restrictedOptions?: boolean;
   showProfiles?: (value: boolean) => void;
   isOpen: boolean;
-  setIsOpen: (value: boolean) => void;
+  setIsOpen: (value: boolean, closeProfiles?: boolean) => void;
 }
 
 export type { IdentifierDetailModalProps };

src/ui/components/SetGroupName/SetGroupName.scss

@@ -0,0 +1,81 @@
+.set-group-name {
+  .page-header {
+    ion-toolbar {
+      --background: transparent;
+    }
+  }
+
+  .page-footer {
+    padding: 1.5rem 0;
+  }
+
+  .scrollable-page-content {
+    .group-info {
+      display: flex;
+      align-items: center;
+      margin-bottom: 1.5rem;
+
+      .group-name {
+        margin: 0;
+        line-height: 1.5rem;
+        font-weight: 500;
+        margin-left: 1rem;
+      }
+    }
+
+    .text {
+      font-weight: 500;
+      line-height: 1.5rem;
+      margin-bottom: 1.5rem;
+      text-align: center;
+      width: 80%;
+    }
+
+    .error-message {
+      text-align: left;
+    }
+
+    .indentifier-input {
+      margin-bottom: 1.5rem;
+
+      ion-label {
+        margin-top: 0;
+      }
+
+      &.has-error {
+        margin-bottom: 0;
+        ion-item.custom-input .input-line {
+          border-color: var(--ion-color-danger);
+        }
+      }
+
+      .label-stacked {
+        font-size: 1rem;
+      }
+    }
+
+    @media screen and (min-width: 250px) and (max-width: 370px) {
+      .group-info {
+        margin-bottom: 1rem;
+
+        .group-name {
+          font-size: 0.875rem;
+          line-height: 1rem;
+        }
+      }
+      .indentifier-input {
+        margin-bottom: 1rem;
+
+        .text {
+          font-weight: 500;
+          line-height: 1rem;
+          margin: 0 0 1rem;
+        }
+
+        .label-stacked {
+          font-size: 0.875rem;
+        }
+      }
+    }
+  }
+}

src/ui/components/SetGroupName/SetGroupName.test.tsx

@@ -0,0 +1,173 @@
+import { IonInput, IonLabel } from "@ionic/react";
+import { AnyAction, Store } from "@reduxjs/toolkit";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { act } from "react";
+import { Provider } from "react-redux";
+import EN_TRANSLATIONS from "../../../locales/en/en.json";
+import { multisignIdentifierFix } from "../../__fixtures__/filteredIdentifierFix";
+import { identifierFix } from "../../__fixtures__/identifierFix";
+import { profileCacheFixData } from "../../__fixtures__/storeDataFix";
+import { makeTestStore } from "../../utils/makeTestStore";
+import { CustomInputProps } from "../CustomInput/CustomInput.types";
+import { TabsRoutePath } from "../navigation/TabsMenu";
+import { SetGroupName } from "./SetGroupName";
+
+const updateMock = jest.fn();
+
+jest.mock("../../../core/agent/agent", () => ({
+  Agent: {
+    agent: {
+      identifiers: {
+        updateGroupUsername: () => updateMock(() => Promise.resolve(true)),
+      },
+    },
+  },
+}));
+
+jest.mock("@ionic/react", () => ({
+  ...jest.requireActual("@ionic/react"),
+  IonModal: ({ children }: { children: any }) => children,
+}));
+
+jest.mock("../CustomInput", () => ({
+  CustomInput: (props: CustomInputProps) => {
+    return (
+      <>
+        <IonLabel
+          position="stacked"
+          data-testid={`${props.title?.toLowerCase().replace(" ", "-")}-title`}
+        >
+          {props.title}
+          {props.optional && (
+            <span className="custom-input-optional">(optional)</span>
+          )}
+        </IonLabel>
+        <IonInput
+          data-testid={props.dataTestId}
+          onIonInput={(e) => {
+            props.onChangeInput(e.detail.value as string);
+          }}
+        />
+      </>
+    );
+  },
+}));
+
+const testIdentifier = { ...multisignIdentifierFix[0] };
+delete testIdentifier.groupUsername;
+
+describe("Set individual name", () => {
+  const dispatchMock = jest.fn();
+  let mockedStore: Store<unknown, AnyAction>;
+
+  beforeEach(() => {
+    updateMock.mockImplementation(() => Promise.resolve(true));
+  });
+
+  beforeAll(() => {
+    const initialState = {
+      stateCache: {
+        routes: [TabsRoutePath.CREDENTIALS],
+        authentication: {
+          loggedIn: true,
+          time: Date.now(),
+          passcodeIsSet: true,
+          passwordIsSet: true,
+        },
+      },
+      profilesCache: profileCacheFixData,
+    };
+    mockedStore = {
+      ...makeTestStore(initialState),
+      dispatch: dispatchMock,
+    };
+  });
+
+  test("render", async () => {
+    const { getByTestId, getByText } = render(
+      <Provider store={mockedStore}>
+        <SetGroupName identifier={identifierFix[0]} />
+      </Provider>
+    );
+
+    expect(getByTestId("edit-member-name-input")).toBeVisible();
+    expect(getByText(EN_TRANSLATIONS.setgroup.title)).toBeVisible();
+    expect(getByText(EN_TRANSLATIONS.setgroup.alert)).toBeVisible();
+    expect(getByText(EN_TRANSLATIONS.setgroup.text)).toBeVisible();
+  });
+
+  test("set name", async () => {
+    const { getByTestId } = render(
+      <Provider store={mockedStore}>
+        <SetGroupName identifier={identifierFix[0]} />
+      </Provider>
+    );
+
+    act(() => {
+      fireEvent(
+        getByTestId("edit-member-name-input"),
+        new CustomEvent("ionInput", { detail: { value: "Duke" } })
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        getByTestId("primary-button-set-group-name").getAttribute("disabled")
+      ).toBe("false");
+    });
+
+    act(() => {
+      fireEvent.click(getByTestId("primary-button-set-group-name"));
+    });
+
+    await waitFor(() => {
+      expect(updateMock).toBeCalledTimes(1);
+    });
+  });
+
+  test("Display error when display name invalid", async () => {
+    const { getByTestId, getByText } = render(
+      <Provider store={mockedStore}>
+        <SetGroupName identifier={identifierFix[0]} />
+      </Provider>
+    );
+
+    act(() => {
+      fireEvent(
+        getByTestId("edit-member-name-input"),
+        new CustomEvent("ionInput", { detail: { value: "" } })
+      );
+    });
+
+    await waitFor(() => {
+      expect(getByText(EN_TRANSLATIONS.nameerror.onlyspace)).toBeVisible();
+    });
+
+    act(() => {
+      fireEvent(
+        getByTestId("edit-member-name-input"),
+        new CustomEvent("ionInput", {
+          detail: {
+            value:
+              "Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke Duke",
+          },
+        })
+      );
+    });
+
+    await waitFor(() => {
+      expect(getByText(EN_TRANSLATIONS.nameerror.maxlength)).toBeVisible();
+    });
+
+    act(() => {
+      fireEvent(
+        getByTestId("edit-member-name-input"),
+        new CustomEvent("ionInput", { detail: { value: "Duke@@" } })
+      );
+    });
+
+    await waitFor(() => {
+      expect(getByText(EN_TRANSLATIONS.nameerror.hasspecialchar)).toBeVisible();
+    });
+  });
+});