Merge pull request #4772 from logto-io/gao-improve-org-settings-page

refactor(console): improve org settings page

packages/console/src/ds-components/Select/index.module.scss

@@ -20,7 +20,7 @@
     justify-content: flex-start;
     flex-wrap: wrap;
     gap: _.unit(2);
-    padding: _.unit(2) _.unit(3);
+    padding: _.unit(1.5) _.unit(3);
     cursor: text;
 
     .tag {

packages/console/src/pages/Organizations/RoleModal/index.tsx

@@ -110,7 +110,7 @@ function RoleModal({ isOpen, editData, onClose }: Props) {
         </FormField>
         <FormField title="general.description">
           <TextInput
-            placeholder="organizations.create_role_placeholder"
+            placeholder={t('organizations.create_role_placeholder')}
             error={Boolean(errors.description)}
             {...register('description')}
           />

packages/console/src/pages/Organizations/TemplateTable/index.module.scss

@@ -7,3 +7,7 @@
 .table {
   margin-top: _.unit(3);
 }
+
+.spinner {
+  margin: _.unit(2) 0;
+}

packages/console/src/pages/Organizations/TemplateTable/index.tsx

@@ -4,6 +4,7 @@ import CirclePlus from '@/assets/icons/circle-plus.svg';
 import Plus from '@/assets/icons/plus.svg';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import Button from '@/ds-components/Button';
+import { Ring as Spinner } from '@/ds-components/Spinner';
 import Table from '@/ds-components/Table';
 import { type Column } from '@/ds-components/Table/types';
 
@@ -39,10 +40,15 @@ function TemplateTable<
   isLoading,
   onPageChange,
 }: Props<TFieldValues, TName>) {
-  const hasData = data.length > 0;
+  const hasData = !isLoading && data.length > 0;
+
+  if (isLoading) {
+    <Spinner className={styles.spinner} />;
+  }
 
   return (
     <>
+      {hasData && (
         <Table
           hasBorder
           placeholder={<EmptyDataPlaceholder />}
@@ -73,6 +79,7 @@ function TemplateTable<
             />
           }
         />
+      )}
       {onAdd && !hasData && (
         <Button
           className={styles.addButton}

packages/core/src/utils/SchemaRouter.ts

@@ -310,7 +310,7 @@ export default class SchemaRouter<
       `/:id/${pathname}`,
       koaGuard({
         params: z.object({ id: z.string().min(1) }),
-        body: z.object({ [columns.relationSchemaIds]: z.string().min(1).array().nonempty() }),
+        body: z.object({ [columns.relationSchemaIds]: z.string().min(1).array() }),
         status: [204, 422],
       }),
       async (ctx, next) => {