From a59c33f66ed7ad893d3b5cc8e6fb7aba9a9bcf89 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Mon, 23 Oct 2023 20:47:33 +0800
Subject: [PATCH] refactor(console): fixing to-dos

---
 .../EntitiesTransfer/index.module.scss        |  6 +++++
 .../src/components/EntitiesTransfer/index.tsx | 19 ++++++++++-----
 .../src/ds-components/Select/MultiSelect.tsx  |  2 +-
 .../Members/AddMembersToOrganization.tsx      | 23 ++++++++++++-------
 .../OrganizationDetails/Members/index.tsx     | 14 ++++-------
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  1 +
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 .../admin-console/organization-details.ts     |  2 ++
 20 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/packages/console/src/components/EntitiesTransfer/index.module.scss b/packages/console/src/components/EntitiesTransfer/index.module.scss
index 7fe601a01..e0d7245c6 100644
--- a/packages/console/src/components/EntitiesTransfer/index.module.scss
+++ b/packages/console/src/components/EntitiesTransfer/index.module.scss
@@ -3,3 +3,9 @@
 .rolesTransfer {
   height: 360px;
 }
+
+.errorMessage {
+  font: var(--font-body-2);
+  color: var(--color-error);
+  margin-top: _.unit(1);
+}
diff --git a/packages/console/src/components/EntitiesTransfer/index.tsx b/packages/console/src/components/EntitiesTransfer/index.tsx
index aa29c200b..25ed5c5c5 100644
--- a/packages/console/src/components/EntitiesTransfer/index.tsx
+++ b/packages/console/src/components/EntitiesTransfer/index.tsx
@@ -7,13 +7,20 @@ import SourceEntitiesBox, { type Props as SourceProps } from './components/Sourc
 import TargetEntitiesBox from './components/TargetEntitiesBox';
 import * as styles from './index.module.scss';
 
-function EntitiesTransfer<T extends Identifiable>(props: SourceProps<T>) {
+type Props<T extends Identifiable> = SourceProps<T> & {
+  errorMessage?: string;
+};
+
+function EntitiesTransfer<T extends Identifiable>({ errorMessage, ...props }: Props<T>) {
   return (
-    <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
-      <SourceEntitiesBox {...props} />
-      <div className={transferLayout.verticalBar} />
-      <TargetEntitiesBox {...props} />
-    </div>
+    <>
+      <div className={classNames(transferLayout.container, styles.rolesTransfer)}>
+        <SourceEntitiesBox {...props} />
+        <div className={transferLayout.verticalBar} />
+        <TargetEntitiesBox {...props} />
+      </div>
+      {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+    </>
   );
 }
 
diff --git a/packages/console/src/ds-components/Select/MultiSelect.tsx b/packages/console/src/ds-components/Select/MultiSelect.tsx
index 573094ef8..2fd8b7013 100644
--- a/packages/console/src/ds-components/Select/MultiSelect.tsx
+++ b/packages/console/src/ds-components/Select/MultiSelect.tsx
@@ -145,7 +145,7 @@ function MultiSelect<T extends string>({
         className={styles.dropdown}
         anchorRef={selectRef}
       >
-        {filteredOptions.length === 0 && <div className={styles.noResult}>No result</div>}
+        {filteredOptions.length === 0 && <div className={styles.noResult}>{t('errors.empty')}</div>}
         {filteredOptions.map(({ value, title }) => (
           <DropdownItem
             key={value}
diff --git a/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx b/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx
index 7bae2e09f..d11c4bc09 100644
--- a/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Members/AddMembersToOrganization.tsx
@@ -27,12 +27,10 @@ function AddMembersToOrganization({ organization, isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const tAction = useActionTranslation();
   const api = useApi();
-  const {
-    reset,
-    control,
-    handleSubmit,
-    formState: { errors }, // TODO: handle errors
-  } = useForm<{ users: User[]; scopes: Array<Option<string>> }>({
+  const { reset, control, handleSubmit } = useForm<{
+    users: User[];
+    scopes: Array<Option<string>>;
+  }>({
     defaultValues: { users: [], scopes: [] },
   });
   const [isLoading, setIsLoading] = useState(false);
@@ -101,8 +99,17 @@ function AddMembersToOrganization({ organization, isOpen, onClose }: Props) {
           <Controller
             name="users"
             control={control}
-            render={({ field: { onChange, value } }) => (
+            rules={{
+              validate: (value) => {
+                if (value.length === 0) {
+                  return t('organization_details.at_least_one_user');
+                }
+                return true;
+              },
+            }}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
               <EntitiesTransfer
+                errorMessage={error?.message}
                 searchProps={{
                   pathname: 'api/users',
                   parameters: {
@@ -110,7 +117,7 @@ function AddMembersToOrganization({ organization, isOpen, onClose }: Props) {
                   },
                 }}
                 selectedEntities={value}
-                emptyPlaceholder="errors.email_pattern_error"
+                emptyPlaceholder="errors.empty"
                 renderEntity={(entity) => <UserItem entity={entity} />}
                 onChange={onChange}
               />
diff --git a/packages/console/src/pages/OrganizationDetails/Members/index.tsx b/packages/console/src/pages/OrganizationDetails/Members/index.tsx
index 86d6555c5..9ee1c658f 100644
--- a/packages/console/src/pages/OrganizationDetails/Members/index.tsx
+++ b/packages/console/src/pages/OrganizationDetails/Members/index.tsx
@@ -46,16 +46,8 @@ function Members({ organization }: Props) {
   const tAction = useActionTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [userToBeEdited, setUserToBeEdited] = useState<UserWithOrganizationRoles>();
-
-  if (error) {
-    return null; // TODO: error handling
-  }
-
-  if (!response) {
-    return null; // TODO: loading
-  }
-
-  const [data, totalCount] = response;
+  const isLoading = !response && !error;
+  const [data, totalCount] = response ?? [];
 
   return (
     <>
@@ -66,6 +58,8 @@ function Members({ organization }: Props) {
           pageSize,
           onChange: setPage,
         }}
+        isLoading={isLoading}
+        errorMessage={error?.toString()}
         rowGroups={[{ key: 'data', data }]}
         columns={[
           {
diff --git a/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
index 2e6a7f1a0..71c2d0985 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/organization-details.ts
@@ -21,6 +21,7 @@ const organization_details = {
     'Once removed, the user will lose their membership and roles in this organization. This action cannot be undone.',
   search_role_placeholder: 'Type to search for roles',
   search_user_placeholder: 'Type to search for users',
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
index 3bbdd5a19..77eb644cd 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/organization-details.ts
@@ -39,6 +39,8 @@ const organization_details = {
   search_role_placeholder: 'Type to search for roles',
   /** UNTRANSLATED */
   search_user_placeholder: 'Type to search for users',
+  /** UNTRANSLATED */
+  at_least_one_user: 'At least one user is required.',
 };
 
 export default Object.freeze(organization_details);