chore: remove dev flags and add changeset for m2m guide feature (#5983)

.changeset/cool-cows-relax.md

@@ -0,0 +1,10 @@
+---
+"@logto/console": minor
+---
+
+improve machine-to-machine application integration user experience
+
+- Display a role assignment modal to facilitate setting permissions for the newly created machine-to-machine app.
+- In the role assignment modal, add a Logto icon to roles that carry the Logto Management API access permission, making it easier for users to select roles with Logto Management API access permission.
+- Add a notification for machine-to-machine roles to guide users in using the machine-to-machine role by creating a machine-to-machine application.
+- Improve machine-to-machine application integration guide.

packages/console/src/components/ApplicationCreation/index.tsx

@@ -2,7 +2,6 @@ import { ApplicationType, RoleType, type Application } from '@logto/schemas';
 import { useCallback, useState } from 'react';
 
 import RoleAssignmentModal from '@/components/RoleAssignmentModal';
-import { isDevFeaturesEnabled } from '@/consts/env';
 
 import CreateForm, { type Props as CreateApplicationFormProps } from './CreateForm';
 
@@ -22,8 +21,7 @@ function ApplicationCreation({ onCompleted, ...reset }: Props) {
 
   const createFormModalCloseHandler = useCallback(
     (createdApp?: Application) => {
-      // Todo @xiaoyijun remove dev feature flag
-      if (isDevFeaturesEnabled && createdApp?.type === ApplicationType.MachineToMachine) {
+      if (createdApp?.type === ApplicationType.MachineToMachine) {
         setCreatedMachineToMachineApplication(createdApp);
         return;
       }

packages/console/src/components/RolesTransfer/components/RoleInformation/index.tsx

@@ -1,9 +1,7 @@
 import { RoleType, type ScopeResponse, isManagementApi, type RoleResponse } from '@logto/schemas';
-import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import ManagementApiAccessFlag from '@/assets/icons/management-api-access.svg';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import DynamicT from '@/ds-components/DynamicT';
 import { Tooltip } from '@/ds-components/Tip';
 
@@ -14,11 +12,9 @@ type Props = {
 };
 
 function RoleInformation({ role }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { id, name, type, usersCount, applicationsCount } = role;
+  const { id, name, type } = role;
   const { data } = useSWR<ScopeResponse[]>(
-    // Todo @xiaoyijun remove dev feature flag
-    isDevFeaturesEnabled && type === RoleType.MachineToMachine && `api/roles/${id}/scopes`
+    type === RoleType.MachineToMachine && `api/roles/${id}/scopes`
   );
 
   const withManagementApiFlag = data?.some(({ resource: { indicator } }) =>
@@ -28,15 +24,6 @@ function RoleInformation({ role }: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.name}>{name}</div>
-      {!isDevFeaturesEnabled && (
-        <div className={styles.count}>
-          (
-          {type === RoleType.User
-            ? t('user_details.roles.assigned_user_count', { value: usersCount })
-            : t('application_details.roles.assigned_app_count', { value: applicationsCount })}
-          )
-        </div>
-      )}
       {withManagementApiFlag && (
         <Tooltip
           anchorClassName={styles.flag}

packages/console/src/components/RolesTransfer/index.tsx

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { Trans, useTranslation } from 'react-i18next';
 
 import ManagementApiAccessFlag from '@/assets/icons/management-api-access.svg';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import FormField from '@/ds-components/FormField';
 import InlineNotification from '@/ds-components/InlineNotification';
 import useUserPreferences from '@/hooks/use-user-preferences';
@@ -36,8 +35,7 @@ function RolesTransfer({ entityId, type, value, onChange }: Props) {
 
   return (
     <div>
-      {/* Todo @xiaoyijun remove dev feature flag */}
-      {isDevFeaturesEnabled && isM2mRole && !notificationAcknowledged && (
+      {isM2mRole && !notificationAcknowledged && (
         <InlineNotification
           action="general.got_it"
           onClick={() => {

packages/console/src/pages/RoleDetails/index.tsx

@@ -14,7 +14,6 @@ import UserRoleIconDark from '@/assets/icons/user-role-dark.svg';
 import UserRoleIcon from '@/assets/icons/user-role.svg';
 import DetailsPage from '@/components/DetailsPage';
 import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import { RoleDetailsTabs } from '@/consts/page-tabs';
 import ConfirmModal from '@/ds-components/ConfirmModal';
 import InlineNotification from '@/ds-components/InlineNotification';
@@ -99,8 +98,7 @@ function RoleDetails() {
       className={classNames(isPageHasTable && styles.withTable)}
       onRetry={mutate}
     >
-      {/* Todo @xiaoyijun remove dev feature flag */}
-      {isDevFeaturesEnabled && isM2mRole && !isM2mRoleNotificationAcknowledged && (
+      {isM2mRole && !isM2mRoleNotificationAcknowledged && (
         <InlineNotification
           action="general.got_it"
           onClick={() => {