feat(console): add app access control rules tab

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

@@ -4,6 +4,7 @@ export enum ApplicationDetailsTabs {
   Logs = 'logs',
   Branding = 'branding',
   Permissions = 'permissions',
+  Rules = 'rules',
   Organizations = 'organizations',
   AttributeMapping = 'attribute-mapping',
 }

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ApplicationAccessControl/index.module.scss

@@ -0,0 +1,68 @@
+@use '@/scss/underscore' as _;
+
+.notification {
+  margin-block-start: _.unit(3);
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  padding: _.unit(6) 0;
+  color: var(--color-primary-50);
+}
+
+.ruleRows {
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(3);
+  margin-block-start: _.unit(5);
+}
+
+.ruleRowsHeader {
+  display: flex;
+  flex-direction: column;
+  gap: _.unit(1);
+}
+
+.ruleRowsTitle {
+  font: var(--font-title-3);
+  color: var(--color-text);
+}
+
+.ruleRowsDescription {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+}
+
+.ruleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: _.unit(4);
+  padding: _.unit(4);
+  border: 1px solid var(--color-divider);
+  border-radius: 8px;
+}
+
+.ruleContent {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: _.unit(1);
+}
+
+.ruleTitle {
+  font: var(--font-body-1);
+  color: var(--color-text);
+}
+
+.ruleDescription {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+}
+
+.ruleCount {
+  flex-shrink: 0;
+  font: var(--font-label-2);
+  color: var(--color-text-secondary);
+}

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ApplicationAccessControl/index.tsx

@@ -0,0 +1,186 @@
+import {
+  type ApplicationAccessControl as ApplicationAccessControlRules,
+  type ApplicationResponse,
+} from '@logto/schemas';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import FormCard from '@/components/FormCard';
+import FormField from '@/ds-components/FormField';
+import InlineNotification from '@/ds-components/InlineNotification';
+import { Ring } from '@/ds-components/Spinner';
+import Switch from '@/ds-components/Switch';
+import useApi, { type RequestError } from '@/hooks/use-api';
+
+import styles from './index.module.scss';
+import { getOrganizationRoleRuleCount, hasApplicationAccessControlRules } from './utils';
+
+type RuleRowProps = {
+  readonly title: string;
+  readonly description: string;
+  readonly count: number;
+};
+
+function RuleRow({ title, description, count }: RuleRowProps) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.ruleRow}>
+      <div className={styles.ruleContent}>
+        <div className={styles.ruleTitle}>{title}</div>
+        <div className={styles.ruleDescription}>{description}</div>
+      </div>
+      <div className={styles.ruleCount}>
+        {t('application_details.access_control.rule_count', { count })}
+      </div>
+    </div>
+  );
+}
+
+type Props = {
+  readonly application: ApplicationResponse;
+  readonly isActive: boolean;
+  readonly onApplicationUpdated: () => void;
+};
+
+function ApplicationAccessControl({ application, isActive, onApplicationUpdated }: Props) {
+  const { id, appLevelAccessControlEnabled } = application;
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const api = useApi();
+  const [isEnabled, setIsEnabled] = useState(appLevelAccessControlEnabled);
+  const [isUpdatingEnabled, setIsUpdatingEnabled] = useState(false);
+
+  const {
+    data: accessControl,
+    error,
+    isLoading,
+    mutate,
+  } = useSWR<ApplicationAccessControlRules, RequestError>(
+    isActive && `api/applications/${id}/access-control`
+  );
+
+  useEffect(() => {
+    setIsEnabled(appLevelAccessControlEnabled);
+  }, [appLevelAccessControlEnabled]);
+
+  const hasAccessControlRules = accessControl && hasApplicationAccessControlRules(accessControl);
+  const isEnableBlocked = !isEnabled && !hasAccessControlRules;
+
+  const onEnabledChange = async (enabled: boolean) => {
+    if (isUpdatingEnabled) {
+      return;
+    }
+
+    if (enabled && !hasAccessControlRules) {
+      toast.error(t('application_details.access_control.enable_without_rules_notice'));
+      return;
+    }
+
+    setIsEnabled(enabled);
+    setIsUpdatingEnabled(true);
+
+    try {
+      await api
+        .patch(`api/applications/${id}`, {
+          json: { appLevelAccessControlEnabled: enabled },
+        })
+        .json<ApplicationResponse>();
+      onApplicationUpdated();
+      toast.success(t('general.saved'));
+    } catch {
+      setIsEnabled(appLevelAccessControlEnabled);
+      // The global API error handler has already surfaced the error.
+    } finally {
+      setIsUpdatingEnabled(false);
+    }
+  };
+
+  return (
+    <FormCard
+      title="application_details.access_control.title"
+      description="application_details.access_control.description"
+    >
+      <FormField title="application_details.access_control.enable">
+        <Switch
+          checked={isEnabled}
+          disabled={isUpdatingEnabled || isEnableBlocked}
+          label={t('application_details.access_control.enable_description')}
+          onChange={({ currentTarget: { checked } }) => {
+            void onEnabledChange(checked);
+          }}
+        />
+      </FormField>
+      {!isEnabled && accessControl && !hasAccessControlRules && (
+        <InlineNotification severity="alert" className={styles.notification}>
+          {t('application_details.access_control.enable_without_rules_notice')}
+        </InlineNotification>
+      )}
+      <InlineNotification severity={isEnabled ? 'info' : 'success'} className={styles.notification}>
+        {t(
+          isEnabled
+            ? 'application_details.access_control.enabled_notice'
+            : 'application_details.access_control.disabled_notice'
+        )}
+      </InlineNotification>
+      {isLoading && (
+        <div className={styles.loading}>
+          <Ring />
+        </div>
+      )}
+      {error && (
+        <InlineNotification
+          action="general.retry"
+          className={styles.notification}
+          severity="error"
+          onClick={() => {
+            void mutate();
+          }}
+        >
+          {t('application_details.access_control.load_error')}
+        </InlineNotification>
+      )}
+      {accessControl && (
+        <div className={styles.ruleRows}>
+          <div className={styles.ruleRowsHeader}>
+            <div className={styles.ruleRowsTitle}>
+              {t('application_details.access_control.rules')}
+            </div>
+            <div className={styles.ruleRowsDescription}>
+              {t(
+                hasApplicationAccessControlRules(accessControl)
+                  ? 'application_details.access_control.rules_description'
+                  : 'application_details.access_control.empty_rules_description'
+              )}
+            </div>
+          </div>
+          <RuleRow
+            title={t('application_details.access_control.rule_users')}
+            description={t('application_details.access_control.rule_users_description')}
+            count={accessControl.userIds.length}
+          />
+          <RuleRow
+            title={t('application_details.access_control.rule_user_roles')}
+            description={t('application_details.access_control.rule_user_roles_description')}
+            count={accessControl.userRoleIds.length}
+          />
+          <RuleRow
+            title={t('application_details.access_control.rule_organizations')}
+            description={t('application_details.access_control.rule_organizations_description')}
+            count={accessControl.organizationIds.length}
+          />
+          <RuleRow
+            title={t('application_details.access_control.rule_organization_roles')}
+            description={t(
+              'application_details.access_control.rule_organization_roles_description'
+            )}
+            count={getOrganizationRoleRuleCount(accessControl)}
+          />
+        </div>
+      )}
+    </FormCard>
+  );
+}
+
+export default ApplicationAccessControl;

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ApplicationAccessControl/utils.test.ts

@@ -0,0 +1,33 @@
+import { createDefaultApplicationAccessControl } from '@logto/schemas';
+
+import { getOrganizationRoleRuleCount, hasApplicationAccessControlRules } from './utils';
+
+describe('application access control utils', () => {
+  it('counts organization role rules by role assignment', () => {
+    expect(
+      getOrganizationRoleRuleCount({
+        ...createDefaultApplicationAccessControl(),
+        organizationRoleRules: [
+          {
+            organizationId: 'organization_1',
+            organizationRoleIds: ['role_1', 'role_2'],
+          },
+          {
+            organizationId: 'organization_2',
+            organizationRoleIds: ['role_3'],
+          },
+        ],
+      })
+    ).toBe(3);
+  });
+
+  it('detects any configured access control rule', () => {
+    expect(hasApplicationAccessControlRules(createDefaultApplicationAccessControl())).toBe(false);
+    expect(
+      hasApplicationAccessControlRules({
+        ...createDefaultApplicationAccessControl(),
+        organizationIds: ['organization_1'],
+      })
+    ).toBe(true);
+  });
+});

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ApplicationAccessControl/utils.ts

@@ -0,0 +1,19 @@
+import type { ApplicationAccessControl } from '@logto/schemas';
+
+export const getOrganizationRoleRuleCount = ({ organizationRoleRules }: ApplicationAccessControl) =>
+  organizationRoleRules.reduce(
+    (count, { organizationRoleIds }) => count + organizationRoleIds.length,
+    0
+  );
+
+export const hasApplicationAccessControlRules = ({
+  userIds,
+  userRoleIds,
+  organizationIds,
+  organizationRoleRules,
+}: ApplicationAccessControl) =>
+  userIds.length > 0 ||
+  userRoleIds.length > 0 ||
+  organizationIds.length > 0 ||
+  getOrganizationRoleRuleCount({ userIds, userRoleIds, organizationIds, organizationRoleRules }) >
+    0;

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/MachineToMachineTabs.tsx

@@ -0,0 +1,58 @@
+import { type ApplicationResponse } from '@logto/schemas';
+import { Trans } from 'react-i18next';
+
+import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
+import OrganizationList from '@/components/OrganizationList';
+import { ApplicationDetailsTabs } from '@/consts';
+import TabWrapper from '@/ds-components/TabWrapper';
+import TextLink from '@/ds-components/TextLink';
+import { organizations } from '@/hooks/use-console-routes/routes/organizations';
+
+import MachineLogs from './MachineLogs';
+import MachineToMachineApplicationRoles from './MachineToMachineApplicationRoles';
+import styles from './index.module.scss';
+
+type Props = {
+  readonly application: ApplicationResponse;
+  readonly activeTab?: string;
+};
+
+function MachineToMachineTabs({ application, activeTab }: Props) {
+  return (
+    <>
+      <TabWrapper
+        isActive={activeTab === ApplicationDetailsTabs.Roles}
+        className={styles.tabContainer}
+      >
+        <MachineToMachineApplicationRoles application={application} />
+      </TabWrapper>
+      <TabWrapper
+        isActive={activeTab === ApplicationDetailsTabs.Logs}
+        className={styles.tabContainer}
+      >
+        <MachineLogs applicationId={application.id} />
+      </TabWrapper>
+      <TabWrapper
+        isActive={activeTab === ApplicationDetailsTabs.Organizations}
+        className={styles.tabContainer}
+      >
+        <OrganizationList
+          type="application"
+          data={application}
+          placeholder={
+            <EmptyDataPlaceholder
+              title={
+                <Trans
+                  i18nKey="admin_console.application_details.no_organization_placeholder"
+                  components={{ a: <TextLink to={'/' + organizations.path} /> }}
+                />
+              }
+            />
+          }
+        />
+      </TabWrapper>
+    </>
+  );
+}
+
+export default MachineToMachineTabs;