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,40 +40,46 @@ 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 (
     <>
-      <Table
+      {hasData && (
-        hasBorder
+        <Table
-        placeholder={<EmptyDataPlaceholder />}
+          hasBorder
-        isLoading={isLoading}
+          placeholder={<EmptyDataPlaceholder />}
-        className={styles.table}
+          isLoading={isLoading}
-        rowGroups={[
+          className={styles.table}
-          {
+          rowGroups={[
-            key: 'data',
+            {
-            data,
+              key: 'data',
-          },
+              data,
-        ]}
+            },
-        columns={columns}
+          ]}
-        rowIndexKey={rowIndexKey}
+          columns={columns}
-        pagination={{
+          rowIndexKey={rowIndexKey}
-          page,
+          pagination={{
-          totalCount,
+            page,
-          pageSize,
+            totalCount,
-          onChange: onPageChange,
+            pageSize,
-        }}
+            onChange: onPageChange,
-        footer={
+          }}
-          <Button
+          footer={
-            size="small"
+            <Button
-            type="text"
+              size="small"
-            className={styles.addButton}
+              type="text"
-            icon={<CirclePlus />}
+              className={styles.addButton}
-            title="general.create_another"
+              icon={<CirclePlus />}
-            onClick={onAdd}
+              title="general.create_another"
-          />
+              onClick={onAdd}
-        }
+            />
-      />
+          }
+        />
+      )}
       {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) => {