@nocobase/app-template-default 1.0.0-beta.74 → 1.0.0-beta.76

package/client/pages/settings/user-form.tsx

@@ -12,39 +12,55 @@ import {
   type UserRoleScopeOption,
 } from '@nocobase/app-plugin-users/client/user-client';
 import { useTranslation } from '@nocobase/i18n/client';
-import { useEffect, useMemo, useRef, useState, type ReactElement } from 'react';
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
 import {
   useLocation,
   useNavigate,
   useOutletContext,
   useParams,
+  useResolvedPath,
 } from 'react-router';
 import { RouteDialog } from '#components/route-dialog';
+import { RouteDrawer } from '#components/route-drawer';
 import { Button } from '#components/ui/button';
 import { Input } from '#components/ui/input';
 import { Label } from '#components/ui/label';
-import { Switch } from '#components/ui/switch';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '#components/ui/select';
-import { SettingsError, SettingsLoading } from './shared.js';
+  Combobox,
+  ComboboxTrigger,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxEmpty,
+} from '#components/ui/combobox';
+import { ConfirmAction, SettingsError, SettingsLoading } from './shared.js';
 
 export function RoleSelection({
   scope,
   value,
   onChange,
   disabled = false,
+  id,
+  error,
 }: {
   readonly scope: UserRoleScopeOption;
   readonly value: UserRoleValue;
   readonly onChange: (value: UserRoleValue) => void;
   readonly disabled?: boolean;
+  readonly id?: string;
+  readonly error?: string;
 }): ReactElement {
   const { t } = useTranslation();
+  const generatedId = useId();
+  const triggerId = id ?? generatedId;
   const label = scope.labelI18nKey
     ? t(scope.labelI18nKey, {
         ns: scope.labelI18nNs,
@@ -58,76 +74,106 @@ export function RoleSelection({
           defaultValue: option.label,
         })
       : option.label;
+  const selected =
+    typeof value === 'string' ? (value ? [value] : []) : [...value];
+  const items = [
+    ...scope.options.map((option) => option.value),
+    ...selected.filter(
+      (key) => !scope.options.some((option) => option.value === key),
+    ),
+  ];
+  const itemLabel = (key: string) => {
+    const option = scope.options.find((item) => item.value === key);
+    return option ? text(option) : key;
+  };
+  const locked =
+    disabled ||
+    (scope.selection === 'single' &&
+      scope.options.some(
+        (option) =>
+          selected.includes(option.value) && option.removable === false,
+      ));
+  const summary = selected.length
+    ? selected.map(itemLabel).join(', ')
+    : t('settings.selectRoles');
   return (
     <div className='flex flex-col gap-2'>
-      <Label>
+      <Label htmlFor={triggerId}>
         {label}
         {scope.requiredOnCreate ? ' *' : ''}
       </Label>
-      {scope.selection === 'single' ? (
-        <Select
-          items={scope.options.map((option) => ({
-            value: option.value,
-            label: text(option),
-          }))}
-          value={typeof value === 'string' ? value : ''}
-          disabled={
-            disabled ||
+      <Combobox
+        items={items}
+        itemToStringLabel={itemLabel}
+        multiple={scope.selection === 'multiple'}
+        value={scope.selection === 'single' ? (selected[0] ?? null) : selected}
+        disabled={locked}
+        onValueChange={(next) => {
+          const proposed =
+            next === null ? [] : typeof next === 'string' ? [next] : next;
+          if (
             scope.options.some(
-              (option) => option.value === value && option.removable === false,
+              (option) =>
+                (selected.includes(option.value) &&
+                  !proposed.includes(option.value) &&
+                  option.removable === false) ||
+                (!selected.includes(option.value) &&
+                  proposed.includes(option.value) &&
+                  option.assignable === false),
             )
+          )
+            return;
+          onChange(
+            scope.selection === 'single' ? (proposed[0] ?? '') : proposed,
+          );
+        }}
+      >
+        <ComboboxTrigger
+          id={triggerId}
+          aria-label={label}
+          aria-invalid={Boolean(error)}
+          aria-describedby={error ? `${triggerId}-error` : undefined}
+          disabled={locked}
+          render={
+            <Button
+              variant='outline'
+              className='w-full justify-between font-normal'
+            />
           }
-          onValueChange={(next) => {
-            if (next !== null) onChange(next);
-          }}
         >
-          <SelectTrigger aria-label={label} className='w-full'>
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
-            {scope.options.map((option) => (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                disabled={option.assignable === false && value !== option.value}
-              >
-                {text(option)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      ) : (
-        <div className='flex flex-col gap-2 rounded-lg border p-3'>
-          {scope.options.map((option) => {
-            const current = typeof value === 'string' ? [] : value;
-            const checked = current.includes(option.value);
-            return (
-              <label
-                key={option.value}
-                className='flex items-center gap-3 text-sm'
-              >
-                <Switch
-                  checked={checked}
+          <span className='min-w-0 truncate' title={summary}>
+            {summary}
+          </span>
+        </ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxInput
+            aria-label={t('settings.searchRoles')}
+            placeholder={t('settings.searchRoles')}
+            showTrigger={false}
+          />
+          <ComboboxEmpty>{t('settings.noRolesFound')}</ComboboxEmpty>
+          <ComboboxList>
+            {(key: string) => {
+              const option = scope.options.find((item) => item.value === key);
+              return (
+                <ComboboxItem
+                  key={key}
+                  value={key}
                   disabled={
-                    disabled ||
-                    (checked
-                      ? option.removable === false
-                      : option.assignable === false)
-                  }
-                  onCheckedChange={(next) =>
-                    onChange(
-                      next
-                        ? [...current, option.value]
-                        : current.filter((item) => item !== option.value),
-                    )
+                    selected.includes(key)
+                      ? option?.removable === false
+                      : option?.assignable === false
                   }
-                />
-                {text(option)}
-              </label>
-            );
-          })}
-        </div>
-      )}
+                >
+                  <span className='min-w-0 whitespace-normal break-words'>
+                    {itemLabel(key)}
+                  </span>
+                </ComboboxItem>
+              );
+            }}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
     </div>
   );
 }
@@ -143,6 +189,7 @@ function UserEditor(): ReactElement {
   const location = useLocation();
   const parent = useOutletContext<{
     reload: (updated?: ManagedUser) => void;
+    listPath?: string;
   }>();
   const data = useSettingsData<{ data: ManagedUser }>(
     userId ? `users/${encodeURIComponent(userId)}` : 'users/options',
@@ -175,7 +222,38 @@ function UserEditor(): ReactElement {
     email: initial?.email ?? '',
     password: '',
   };
-  const [roles, setRoles] = useState<Record<string, UserRoleValue>>({});
+  const [roleDraft, setRoleDraft] = useState<Record<string, UserRoleValue>>({});
+  const roles = { ...(initial?.roleScopes ?? {}), ...roleDraft };
+  const changedRoles = Object.fromEntries(
+    Object.entries(roleDraft).filter(
+      ([key, value]) =>
+        JSON.stringify(value) !==
+        JSON.stringify(
+          initial?.roleScopes[key] ?? (typeof value === 'string' ? '' : []),
+        ),
+    ),
+  );
+  const removedRoles = (options.data?.data.roleScopes ?? []).flatMap(
+    (scope) => {
+      const before = initial?.roleScopes[scope.key] ?? [];
+      const after = roles[scope.key] ?? [];
+      return (typeof before === 'string' ? [before] : before)
+        .filter(
+          (key) => !(typeof after === 'string' ? [after] : after).includes(key),
+        )
+        .map((key) => {
+          const option = scope.options.find((item) => item.value === key);
+          return option?.labelI18nKey
+            ? t(option.labelI18nKey, {
+                ns: option.labelI18nNs,
+                defaultValue: option.label,
+              })
+            : (option?.label ?? key);
+        });
+    },
+  );
+  const [confirmRoles, setConfirmRoles] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
   const [dirty, setDirty] = useState(false);
   const [busy, setBusy] = useState(false);
   const leave = useSettingsLeave(dirty, busy);
@@ -183,10 +261,9 @@ function UserEditor(): ReactElement {
   const [serverErrors, setServerErrors] = useState<Record<string, string>>({});
   const [submitted, setSubmitted] = useState(false);
 
+  const parentPath = useResolvedPath('..').pathname;
   const closeTo = {
-    pathname: creating
-      ? '/settings/users'
-      : `/settings/users/${encodeURIComponent(userId)}`,
+    pathname: creating ? parentPath : (parent.listPath ?? parentPath),
     search: location.search,
   };
   const fieldError = (name: keyof typeof fields): string | undefined => {
@@ -201,10 +278,10 @@ function UserEditor(): ReactElement {
       return t('settings.invalidEmail');
     return;
   };
-  const save = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const save = async (form: HTMLFormElement, confirmed = false) => {
+    if (busy || !(creating ? canCreate && canAssign : canUpdate || canAssign))
+      return;
     setSubmitted(true);
-    const form = event.currentTarget;
     if (
       !fields.name.trim() ||
       !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(fields.email) ||
@@ -213,7 +290,12 @@ function UserEditor(): ReactElement {
       form.querySelector<HTMLInputElement>('input:invalid')?.focus();
       return;
     }
-    if (data.error || (creating && (options.error || !options.data))) return;
+    if (
+      data.error ||
+      data.loading ||
+      (canAssign && (options.loading || options.error || !options.data))
+    )
+      return;
     if (creating) {
       const missing = (options.data?.data.roleScopes ?? []).filter(
         (scope) => scope.requiredOnCreate && !roles[scope.key]?.length,
@@ -224,9 +306,20 @@ function UserEditor(): ReactElement {
             missing.map((scope) => [scope.key, t('settings.required')]),
           ),
         );
+        document
+          .getElementById(
+            `${formId}-roles-${encodeURIComponent(missing[0].key)}`,
+          )
+          ?.focus();
         return;
       }
     }
+    if (!creating && !canUpdate && Object.keys(changedRoles).length === 0)
+      return;
+    if (!creating && removedRoles.length > 0 && !confirmed) {
+      setConfirmRoles(true);
+      return;
+    }
     setBusy(true);
     setError(undefined);
     setServerErrors({});
@@ -244,9 +337,16 @@ function UserEditor(): ReactElement {
         });
       else
         updated = await client.update(userId, {
-          name: fields.name.trim(),
-          email: fields.email.trim(),
-          username: fields.username.trim() || null,
+          ...(canUpdate
+            ? {
+                name: fields.name.trim(),
+                email: fields.email.trim(),
+                username: fields.username.trim() || null,
+              }
+            : {}),
+          ...(canAssign && Object.keys(changedRoles).length
+            ? { roleScopes: changedRoles }
+            : {}),
         });
       setDirty(false);
       parent.reload(updated);
@@ -256,9 +356,11 @@ function UserEditor(): ReactElement {
           name: fields.name,
         }),
       });
+      setConfirmRoles(false);
       leave.allow();
-      void navigate(closeTo);
+      void navigate(closeTo, { replace: true });
     } catch (next) {
+      setConfirmRoles(false);
       if (
         next instanceof ApiClientError &&
         [
@@ -284,51 +386,61 @@ function UserEditor(): ReactElement {
       setBusy(false);
     }
   };
-  const allowed = creating ? canCreate && canAssign : canUpdate;
+  const allowed = creating ? canCreate && canAssign : canUpdate || canAssign;
   const formId = creating ? 'new-user' : 'edit-user';
-  return (
-    <RouteDialog
-      className={creating ? undefined : 'sm:max-w-md'}
-      title={t(creating ? 'settings.newUser' : 'settings.editUser')}
-      closeTo={closeTo}
-      beforeClose={leave.guard}
-      footer={
-        <>
-          <Button
-            variant='outline'
-            disabled={busy}
-            onClick={() => void navigate(closeTo)}
-          >
-            {t('settings.cancel')}
-          </Button>
-          {allowed && (
-            <Button
-              form={formId}
-              type='submit'
-              disabled={
-                busy ||
-                Boolean(data.error) ||
-                (!creating && data.loading) ||
-                (creating &&
-                  (options.loading || Boolean(options.error) || !options.data))
-              }
-            >
-              {t(
-                busy
-                  ? 'settings.saving'
-                  : creating
-                    ? 'settings.create'
-                    : 'settings.save',
-              )}
-            </Button>
+  const focusedRef = useRef(false);
+  useEffect(() => {
+    if (creating || data.loading || data.error || focusedRef.current) return;
+    focusedRef.current = true;
+    const frame = requestAnimationFrame(() =>
+      document.getElementById(`${formId}-name`)?.focus(),
+    );
+    return () => cancelAnimationFrame(frame);
+  }, [creating, data.error, data.loading, formId]);
+  const actions = (
+    <>
+      <Button
+        variant='outline'
+        disabled={busy}
+        onClick={() => void navigate(closeTo, { replace: true })}
+      >
+        {t('settings.cancel')}
+      </Button>
+      {allowed && (
+        <Button
+          form={formId}
+          type='submit'
+          disabled={
+            busy ||
+            (!creating &&
+              (!dirty ||
+                (!canUpdate && Object.keys(changedRoles).length === 0))) ||
+            Boolean(data.error) ||
+            (!creating &&
+              (data.loading ||
+                (canAssign &&
+                  (options.loading ||
+                    Boolean(options.error) ||
+                    !options.data)))) ||
+            (creating &&
+              (options.loading || Boolean(options.error) || !options.data))
+          }
+        >
+          {t(
+            busy
+              ? 'settings.saving'
+              : creating
+                ? 'settings.create'
+                : 'settings.save',
           )}
-        </>
-      }
-    >
-      <SettingsError error={data.error} retry={data.reload} />
-      {creating && (
-        <SettingsError error={options.error} retry={options.reload} />
+        </Button>
       )}
+    </>
+  );
+  const body = (
+    <>
+      <SettingsError error={data.error} retry={data.reload} />
+      <SettingsError error={options.error} retry={options.reload} />
       <SettingsError error={error} />
       {!creating && data.loading ? (
         <SettingsLoading />
@@ -336,7 +448,11 @@ function UserEditor(): ReactElement {
         !data.error && (
           <form
             id={formId}
-            onSubmit={(event) => void save(event)}
+            ref={formRef}
+            onSubmit={(event) => {
+              event.preventDefault();
+              void save(event.currentTarget);
+            }}
             noValidate
             className='flex flex-col gap-4'
           >
@@ -365,7 +481,7 @@ function UserEditor(): ReactElement {
                         : 'text'
                   }
                   autoComplete={name === 'password' ? 'new-password' : 'off'}
-                  disabled={!allowed || busy}
+                  disabled={!(creating ? allowed : canUpdate) || busy}
                   value={fields[name]}
                   aria-invalid={Boolean(fieldError(name))}
                   aria-describedby={
@@ -390,33 +506,69 @@ function UserEditor(): ReactElement {
                 )}
               </div>
             ))}
-            {creating &&
-              options.data?.data.roleScopes.map((scope) => (
-                <div key={scope.key}>
-                  <RoleSelection
-                    scope={scope}
-                    disabled={!allowed || busy}
-                    value={
-                      roles[scope.key] ??
-                      (scope.selection === 'single' ? '' : [])
-                    }
-                    onChange={(value) => {
-                      setRoles((old) => ({ ...old, [scope.key]: value }));
-                      setServerErrors((old) => ({ ...old, [scope.key]: '' }));
-                      setDirty(true);
-                    }}
-                  />
-                  {serverErrors[scope.key] && (
-                    <p className='text-xs text-destructive'>
-                      {serverErrors[scope.key]}
-                    </p>
-                  )}
-                </div>
-              ))}
+            {options.data?.data.roleScopes.map((scope) => (
+              <div key={scope.key}>
+                <RoleSelection
+                  scope={scope}
+                  id={`${formId}-roles-${encodeURIComponent(scope.key)}`}
+                  error={serverErrors[scope.key]}
+                  disabled={!canAssign || busy}
+                  value={
+                    roles[scope.key] ?? (scope.selection === 'single' ? '' : [])
+                  }
+                  onChange={(value) => {
+                    setRoleDraft((old) => ({ ...old, [scope.key]: value }));
+                    setServerErrors((old) => ({ ...old, [scope.key]: '' }));
+                    setDirty(true);
+                  }}
+                />
+                {serverErrors[scope.key] && (
+                  <p
+                    id={`${formId}-roles-${encodeURIComponent(scope.key)}-error`}
+                    className='text-xs text-destructive'
+                  >
+                    {serverErrors[scope.key]}
+                  </p>
+                )}
+              </div>
+            ))}
           </form>
         )
       )}
       {leave.dialog}
+    </>
+  );
+  if (!creating)
+    return (
+      <RouteDrawer
+        title={t('settings.editUser')}
+        description={initial?.name}
+        closeTo={closeTo}
+        beforeClose={leave.guard}
+        footer={actions}
+      >
+        {body}
+        <ConfirmAction
+          open={confirmRoles}
+          title={t('settings.revokeRoleTitle', { name: fields.name })}
+          description={`${t('settings.revokeRoleHint')} ${removedRoles.join(', ')}`}
+          confirmLabel={t('settings.save')}
+          busy={busy}
+          onCancel={() => setConfirmRoles(false)}
+          onConfirm={() => {
+            if (formRef.current) void save(formRef.current, true);
+          }}
+        />
+      </RouteDrawer>
+    );
+  return (
+    <RouteDialog
+      title={t('settings.newUser')}
+      closeTo={closeTo}
+      beforeClose={leave.guard}
+      footer={actions}
+    >
+      {body}
     </RouteDialog>
   );
 }