feat(console): support org permission management on new org template page

packages/console/src/consts/page-tabs.ts

@@ -49,6 +49,6 @@ export enum EnterpriseSsoDetailsTabs {
 }
 
 export enum OrganizationTemplateTabs {
-  OrgRoles = 'org-roles',
-  OrgPermissions = 'org-permissions',
+  OrganizationRoles = 'organization-roles',
+  OrganizationPermissions = 'organization-permissions',
 }

packages/console/src/containers/ConsoleContent/index.tsx

@@ -36,8 +36,8 @@ import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
 import OrganizationDetails from '@/pages/OrganizationDetails';
 import OrganizationTemplate from '@/pages/OrganizationTemplate';
-import OrgPermissions from '@/pages/OrganizationTemplate/OrgPermissions';
-import OrgRoles from '@/pages/OrganizationTemplate/OrgRoles';
+import OrganizationPermissions from '@/pages/OrganizationTemplate/OrganizationPermissions';
+import OrganizationRoles from '@/pages/OrganizationTemplate/OrganizationRoles';
 import Organizations from '@/pages/Organizations';
 import OrganizationGuide from '@/pages/Organizations/Guide';
 import Profile from '@/pages/Profile';
@@ -190,12 +190,15 @@ function ConsoleContent() {
               <Route path="organization-template" element={<OrganizationTemplate />}>
                 <Route
                   index
-                  element={<Navigate replace to={OrganizationTemplateTabs.OrgRoles} />}
+                  element={<Navigate replace to={OrganizationTemplateTabs.OrganizationRoles} />}
                 />
-                <Route path={OrganizationTemplateTabs.OrgRoles} element={<OrgRoles />} />
                 <Route
-                  path={OrganizationTemplateTabs.OrgPermissions}
-                  element={<OrgPermissions />}
+                  path={OrganizationTemplateTabs.OrganizationRoles}
+                  element={<OrganizationRoles />}
+                />
+                <Route
+                  path={OrganizationTemplateTabs.OrganizationPermissions}
+                  element={<OrganizationPermissions />}
                 />
               </Route>
             )}

packages/console/src/pages/OrganizationTemplate/OrganizationPermissions/OrganizationPermissionModal.tsx

@@ -0,0 +1,114 @@
+import { type OrganizationScope } from '@logto/schemas';
+import { cond, type Nullable } from '@silverhand/essentials';
+import { useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import ReactModal from 'react-modal';
+
+import Button from '@/ds-components/Button';
+import FormField from '@/ds-components/FormField';
+import ModalLayout from '@/ds-components/ModalLayout';
+import TextInput from '@/ds-components/TextInput';
+import useApi from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+import { trySubmitSafe } from '@/utils/form';
+
+type Props = {
+  /**
+   * The organization permission data to edit. If null, the modal will be in create mode.
+   */
+  data: Nullable<OrganizationScope>;
+  onClose: () => void;
+};
+
+type FormData = Pick<OrganizationScope, 'name' | 'description'>;
+
+const organizationScopesPath = 'api/organization-scopes';
+
+/** A modal that allows users to create or edit an organization permission. */
+function OrganizationPermissionModal({ data, onClose }: Props) {
+  const isCreateMode = data === null;
+
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'admin_console',
+  });
+
+  const api = useApi();
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+  } = useForm<FormData>(cond(data && { defaultValues: data }));
+
+  const submit = handleSubmit(
+    trySubmitSafe(async (json) => {
+      await (isCreateMode
+        ? api.post(organizationScopesPath, {
+            json,
+          })
+        : api.patch(`${organizationScopesPath}/${data.id}`, {
+            json,
+          }));
+      toast.success(
+        t(isCreateMode ? 'organization_template.permissions.created' : 'general.saved', {
+          name: json.name,
+        })
+      );
+      onClose();
+    })
+  );
+
+  return (
+    <ReactModal
+      isOpen
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onClose}
+    >
+      <ModalLayout
+        title={`organization_template.permissions.${isCreateMode ? 'create' : 'edit'}_title`}
+        footer={
+          <>
+            {!isCreateMode && (
+              <Button title="general.cancel" isLoading={isSubmitting} onClick={onClose} />
+            )}
+            <Button
+              type="primary"
+              title={
+                isCreateMode
+                  ? 'organization_template.permissions.create_permission'
+                  : 'general.save'
+              }
+              isLoading={isSubmitting}
+              onClick={submit}
+            />
+          </>
+        }
+        onClose={onClose}
+      >
+        <FormField isRequired title="organization_template.permissions.permission_field_name">
+          <TextInput
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={isCreateMode}
+            readOnly={!isCreateMode}
+            placeholder="read:appointment"
+            error={Boolean(errors.name)}
+            {...register('name', { required: true })}
+          />
+        </FormField>
+        <FormField title="organization_template.permissions.description_field_name">
+          <TextInput
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={!isCreateMode}
+            placeholder={t('organization_template.permissions.description_field_placeholder')}
+            error={Boolean(errors.description)}
+            {...register('description')}
+          />
+        </FormField>
+      </ModalLayout>
+    </ReactModal>
+  );
+}
+
+export default OrganizationPermissionModal;