feat(console): organization roles table

packages/console/src/ds-components/Select/MultiSelect.tsx

@@ -0,0 +1,165 @@
+import { type AdminConsoleKey } from '@logto/phrases';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Close from '@/assets/icons/close.svg';
+import { onKeyDownHandler } from '@/utils/a11y';
+
+import Dropdown, { DropdownItem } from '../Dropdown';
+import IconButton from '../IconButton';
+import Tag from '../Tag';
+
+import * as styles from './index.module.scss';
+
+export type Option<T> = {
+  value: T;
+  title?: string;
+};
+
+type Props<T> = {
+  className?: string;
+  value: Array<Option<T>>;
+  options: Array<Option<T>>;
+  onSearch: (keyword: string) => void;
+  onChange: (value: Array<Option<T>>) => void;
+  isReadOnly?: boolean;
+  error?: string | boolean;
+  placeholder?: AdminConsoleKey;
+};
+
+function MultiSelect<T extends string>({
+  className,
+  value,
+  options,
+  onSearch,
+  onChange,
+  isReadOnly,
+  error,
+  placeholder,
+}: Props<T>) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const [keyword, setKeyword] = useState('');
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  // Search on keyword changes
+  useEffect(() => {
+    if (isInputFocused) {
+      onSearch(keyword);
+    }
+  }, [keyword, isInputFocused, onSearch]);
+
+  const handleSelect = (option: Option<T>) => {
+    if (value.some(({ value }) => value === option.value)) {
+      return;
+    }
+    onChange([...value, option]);
+    inputRef.current?.focus();
+  };
+
+  const handleDelete = (option: Option<T>) => {
+    onChange(value.filter(({ value }) => value !== option.value));
+  };
+
+  // https://exogen.github.io/blog/focus-state/
+  useEffect(() => {
+    if (document.hasFocus() && inputRef.current?.contains(document.activeElement)) {
+      setIsInputFocused(true);
+    }
+  }, []);
+
+  const isOpen = !isReadOnly && isInputFocused;
+  const filteredOptions = options.filter(({ value: current }) => {
+    return !value.some(({ value }) => value === current);
+  });
+
+  return (
+    <div
+      ref={selectRef}
+      className={classNames(
+        styles.select,
+        styles.multiple,
+        isOpen && styles.open,
+        isReadOnly && styles.readOnly,
+        Boolean(error) && styles.error,
+        className
+      )}
+      role="button"
+      tabIndex={0}
+      onKeyDown={onKeyDownHandler(() => {
+        if (!isReadOnly) {
+          inputRef.current?.focus();
+        }
+      })}
+      onClick={() => {
+        if (!isReadOnly) {
+          inputRef.current?.focus();
+        }
+      }}
+    >
+      {value.map((option) => {
+        const { value, title } = option;
+        return (
+          <Tag
+            key={value}
+            variant="cell"
+            className={styles.tag}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            {title ?? value}
+            <IconButton
+              className={styles.delete}
+              size="small"
+              onClick={() => {
+                handleDelete(option);
+              }}
+            >
+              <Close className={styles.close} />
+            </IconButton>
+          </Tag>
+        );
+      })}
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder={placeholder && String(t(placeholder))}
+        value={keyword}
+        onChange={({ currentTarget: { value } }) => {
+          setKeyword(value);
+        }}
+        onFocus={() => {
+          setIsInputFocused(true);
+        }}
+        onBlur={() => {
+          setIsInputFocused(false);
+        }}
+      />
+      <Dropdown
+        isFullWidth
+        noOverlay
+        isOpen={isOpen}
+        className={styles.dropdown}
+        anchorRef={selectRef}
+      >
+        {filteredOptions.length === 0 && <div className={styles.noResult}>No result</div>}
+        {filteredOptions.map(({ value, title }) => (
+          <DropdownItem
+            key={value}
+            onClick={(event) => {
+              event.preventDefault();
+              handleSelect({ value, title });
+            }}
+          >
+            {title ?? value}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}
+
+export default MultiSelect;

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

@@ -0,0 +1,132 @@
+import { type OrganizationScope } from '@logto/schemas';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import ReactModal from 'react-modal';
+import useSWR from 'swr';
+
+import { defaultPageSize } from '@/consts';
+import Button from '@/ds-components/Button';
+import FormField from '@/ds-components/FormField';
+import ModalLayout from '@/ds-components/ModalLayout';
+import MultiSelect, { type Option } from '@/ds-components/Select/MultiSelect';
+import TextInput from '@/ds-components/TextInput';
+import useApi, { type RequestError } from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+import { buildUrl } from '@/utils/url';
+
+type Props = {
+  isOpen: boolean;
+  onFinish: () => void;
+};
+
+function CreateRoleModal({ isOpen, onFinish }: Props) {
+  const api = useApi();
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    reset,
+    register,
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<{ name: string; description?: string; scopes: Array<Option<string>> }>({
+    defaultValues: { name: '', scopes: [] },
+  });
+  const [keyword, setKeyword] = useState('');
+  const {
+    data: response,
+    error, // TODO: handle error
+    mutate,
+  } = useSWR<[OrganizationScope[], number], RequestError>(
+    buildUrl('api/organization-scopes', {
+      page: String(1),
+      page_size: String(defaultPageSize),
+      q: keyword,
+    }),
+    { revalidateOnFocus: false }
+  );
+  const [scopes] = response ?? [[], 0];
+
+  const addRole = handleSubmit(async ({ scopes, ...json }) => {
+    setIsLoading(true);
+    try {
+      await api.post('api/organization-roles', {
+        json: {
+          ...json,
+          organizationScopeIds: scopes.map(({ value }) => value),
+        },
+      });
+      onFinish();
+    } finally {
+      setIsLoading(false);
+    }
+  });
+
+  // Reset form on close
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+    }
+  }, [isOpen, reset]);
+
+  // Initial fetch on open
+  useEffect(() => {
+    if (isOpen) {
+      void mutate();
+    }
+  }, [isOpen, mutate]);
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onFinish}
+    >
+      <ModalLayout
+        title="organizations.create_organization_role"
+        footer={
+          <Button
+            type="primary"
+            title="organizations.create_role"
+            isLoading={isLoading}
+            onClick={addRole}
+          />
+        }
+        onClose={onFinish}
+      >
+        <FormField isRequired title="general.name">
+          <TextInput
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+            placeholder="viewer"
+            error={Boolean(errors.name)}
+            {...register('name', { required: true })}
+          />
+        </FormField>
+        <FormField title="general.description">
+          <TextInput
+            placeholder="organizations.create_role_placeholder"
+            error={Boolean(errors.description)}
+            {...register('description')}
+          />
+        </FormField>
+        <FormField title="organizations.permission_other">
+          <Controller
+            name="scopes"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <MultiSelect
+                value={value}
+                options={scopes.map(({ id, name }) => ({ value: id, title: name }))}
+                placeholder="organizations.search_permission_placeholder"
+                onChange={onChange}
+                onSearch={setKeyword}
+              />
+            )}
+          />
+        </FormField>
+      </ModalLayout>
+    </ReactModal>
+  );
+}
+export default CreateRoleModal;

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

@@ -0,0 +1,93 @@
+import { type OrganizationRole } from '@logto/schemas';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import DeleteButton from '@/components/DeleteButton';
+import FormField from '@/ds-components/FormField';
+import useApi, { type RequestError } from '@/hooks/use-api';
+import { buildUrl } from '@/utils/url';
+
+import CreateRoleModal from '../CreateRoleModal';
+import TemplateTable, { pageSize } from '../TemplateTable';
+import * as styles from '../index.module.scss';
+
+/**
+ * Renders the roles field that allows users to add, edit, and delete organization
+ * roles.
+ */
+function RolesField() {
+  const [page, setPage] = useState(1);
+  const {
+    data: response,
+    error,
+    mutate,
+  } = useSWR<[OrganizationRole[], number], RequestError>(
+    buildUrl('api/organization-roles', {
+      page: String(page),
+      page_size: String(pageSize),
+    })
+  );
+
+  const [data, totalCount] = response ?? [[], 0];
+  const api = useApi();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const isLoading = !response && !error;
+
+  if (isLoading) {
+    return <>loading</>; // TODO: loading state
+  }
+
+  return (
+    <FormField title="organizations.organization_roles">
+      <CreateRoleModal
+        isOpen={isModalOpen}
+        onFinish={() => {
+          setIsModalOpen(false);
+          void mutate();
+        }}
+      />
+      <TemplateTable
+        rowIndexKey="id"
+        page={page}
+        totalCount={totalCount}
+        data={data}
+        columns={[
+          {
+            title: t('general.name'),
+            dataIndex: 'name',
+            colSpan: 4,
+            render: ({ name }) => <div className={styles.permission}>{name}</div>,
+          },
+          {
+            title: t('organizations.permission_other'),
+            dataIndex: 'permissions',
+            colSpan: 6,
+            render: ({ description }) => description ?? '-',
+          },
+          {
+            title: null,
+            dataIndex: 'delete',
+            render: ({ id }) => (
+              <DeleteButton
+                content="Delete at your own risk, mate."
+                onDelete={async () => {
+                  await api.delete(`api/organization-roles/${id}`);
+                  void mutate();
+                }}
+              />
+            ),
+          },
+        ]}
+        onPageChange={setPage}
+        onAdd={() => {
+          setIsModalOpen(true);
+        }}
+      />
+    </FormField>
+  );
+}
+
+export default RolesField;

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

@@ -1,6 +1,7 @@
 import FormCard from '@/components/FormCard';
 
 import PermissionsField from '../PermissionsField';
+import RolesField from '../RolesField';
 
 export default function Settings() {
   return (
@@ -9,6 +10,7 @@ export default function Settings() {
       description="organizations.access_control_description"
     >
       <PermissionsField />
+      <RolesField />
     </FormCard>
   );
 }