chore(console,experience): remove dev flags add changeset for organization updates (#5763)

.changeset/loud-mice-divide.md

@@ -0,0 +1,12 @@
+---
+"@logto/console": minor
+---
+
+support adding API resource permissions to organization roles and organization permissions in 3rd-party applications
+
+## Updates
+
+- Separated the "Organization template" from the "Organization" page, establishing it as a standalone page for clearer navigation and functionality.
+- Enhanced the "Organization template" page by adding functionality that allows users to click on an organization role, which then navigates to the organization role details page where users can view its corresponding permissions and general settings.
+- Enabled the assignment of API resource permissions directly from the organization role details page, improving role management and access control.
+- Split the permission list for third-party apps into two separate lists: user permissions and organization permissions. Users can now add user profile permissions and API resource permissions for users under user permissions, and add organization permissions and API resource permissions for organizations under organization permissions.

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

@@ -1,34 +0,0 @@
-import { type OrganizationScope } from '@logto/schemas';
-
-import MultiSelect, { type Option } from '@/ds-components/Select/MultiSelect';
-import useSearchValues from '@/hooks/use-search-values';
-
-import Breakable from '../Breakable';
-
-type Props = {
-  readonly value: Array<Option<string>>;
-  readonly onChange: (value: Array<Option<string>>) => void;
-  readonly keyword: string;
-  readonly setKeyword: (keyword: string) => void;
-};
-
-function OrganizationScopesSelect({ value, onChange, keyword, setKeyword }: Props) {
-  const { data: scopes, isLoading } = useSearchValues<OrganizationScope>(
-    'api/organization-scopes',
-    keyword
-  );
-
-  return (
-    <MultiSelect
-      value={value}
-      options={scopes.map(({ id, name }) => ({ value: id, title: name }))}
-      placeholder="organizations.search_permission_placeholder"
-      isOptionsLoading={isLoading}
-      renderOption={({ title, value }) => <Breakable>{title ?? value}</Breakable>}
-      onChange={onChange}
-      onSearch={setKeyword}
-    />
-  );
-}
-
-export default OrganizationScopesSelect;

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

@@ -31,7 +31,7 @@ type Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValue
   readonly errorMessage?: string;
 };
 
-export const pageSize = 10;
+const pageSize = 10;
 
 /**
  * The table component for organization template editing, such as permissions and roles.

packages/console/src/consts/env.ts

@@ -3,6 +3,6 @@ import { yes } from '@silverhand/essentials';
 const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;
-
+// eslint-disable-next-line import/no-unused-modules
 export const isDevFeaturesEnabled =
   !isProduction || yes(process.env.DEV_FEATURES_ENABLED) || yes(process.env.INTEGRATION_TEST);

packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx

@@ -19,7 +19,7 @@ import Role from '@/assets/icons/role.svg';
 import SecurityLock from '@/assets/icons/security-lock.svg';
 import EnterpriseSso from '@/assets/icons/single-sign-on.svg';
 import Web from '@/assets/icons/web.svg';
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { isCloud } from '@/consts/env';
 
 type SidebarItem = {
   Icon: FC;
@@ -103,7 +103,6 @@ export const useSidebarMenuItems = (): {
         {
           Icon: OrganizationTemplate,
           title: 'organization_template',
-          isHidden: !isDevFeaturesEnabled,
         },
       ],
     },

packages/console/src/hooks/use-console-routes/index.tsx

@@ -1,18 +1,12 @@
 import { condArray } from '@silverhand/essentials';
 import { useMemo } from 'react';
-import { Navigate, type RouteObject } from 'react-router-dom';
+import { type RouteObject } from 'react-router-dom';
 
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { isCloud } from '@/consts/env';
 import Dashboard from '@/pages/Dashboard';
 import GetStarted from '@/pages/GetStarted';
 import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
-import OrganizationGuide from '@/pages/Organizations/Guide';
-import Introduction from '@/pages/Organizations/Guide/Introduction';
-import OrganizationInfo from '@/pages/Organizations/Guide/OrganizationInfo';
-import OrganizationPermissions from '@/pages/Organizations/Guide/OrganizationPermissions';
-import OrganizationRoles from '@/pages/Organizations/Guide/OrganizationRoles';
-import { steps } from '@/pages/Organizations/Guide/const';
 import SigningKeys from '@/pages/SigningKeys';
 
 import { apiResources } from './routes/api-resources';
@@ -48,19 +42,8 @@ export const useConsoleRoutes = () => {
         users,
         auditLogs,
         roles,
-        isDevFeaturesEnabled && organizationTemplate,
+        organizationTemplate,
         organizations,
-        !isDevFeaturesEnabled && {
-          path: 'organization-guide/*',
-          element: <OrganizationGuide />,
-          children: [
-            { index: true, element: <Navigate replace to={steps.introduction} /> },
-            { path: steps.introduction, element: <Introduction /> },
-            { path: steps.permissions, element: <OrganizationPermissions /> },
-            { path: steps.roles, element: <OrganizationRoles /> },
-            { path: steps.organizationInfo, element: <OrganizationInfo /> },
-          ],
-        },
         { path: 'signing-keys', element: <SigningKeys /> },
         isCloud && tenantSettings,
         customizeJwt

packages/console/src/hooks/use-console-routes/routes/organizations.tsx

@@ -1,7 +1,6 @@
 import { condArray } from '@silverhand/essentials';
 import { Navigate, type RouteObject } from 'react-router-dom';
 
-import { isDevFeaturesEnabled } from '@/consts/env';
 import OrganizationDetails from '@/pages/OrganizationDetails';
 import Members from '@/pages/OrganizationDetails/Members';
 import Settings from '@/pages/OrganizationDetails/Settings';
@@ -13,10 +12,6 @@ export const organizations: RouteObject = {
   children: condArray(
     { index: true, element: <Organizations /> },
     { path: 'create', element: <Organizations /> },
-    !isDevFeaturesEnabled && {
-      path: 'template',
-      element: <Organizations tab="template" />,
-    },
     {
       path: ':id/*',
       element: <OrganizationDetails />,

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/PermissionsCard/ApplicationScopesAssignmentModal/constants.ts

@@ -2,21 +2,6 @@ import { ApplicationUserConsentScopeType } from '@logto/schemas';
 
 import { type PermissionTabType } from './type';
 
-export const allLevelPermissionTabs: PermissionTabType = Object.freeze({
-  [ApplicationUserConsentScopeType.UserScopes]: {
-    title: 'application_details.permissions.user_profile',
-    key: ApplicationUserConsentScopeType.UserScopes,
-  },
-  [ApplicationUserConsentScopeType.ResourceScopes]: {
-    title: 'application_details.permissions.api_permissions',
-    key: ApplicationUserConsentScopeType.ResourceScopes,
-  },
-  [ApplicationUserConsentScopeType.OrganizationScopes]: {
-    title: 'application_details.permissions.organization',
-    key: ApplicationUserConsentScopeType.OrganizationScopes,
-  },
-});
-
 export const userLevelPermissionsTabs: PermissionTabType = Object.freeze({
   [ApplicationUserConsentScopeType.UserScopes]: {
     title: 'application_details.permissions.user_profile',

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/PermissionsCard/ApplicationScopesAssignmentModal/index.tsx

@@ -8,11 +8,7 @@ import DataTransferBox from '@/ds-components/DataTransferBox';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import TabWrapper from '@/ds-components/TabWrapper';
 
-import {
-  allLevelPermissionTabs,
-  organizationLevelPermissionsTab,
-  userLevelPermissionsTabs,
-} from './constants';
+import { organizationLevelPermissionsTab, userLevelPermissionsTabs } from './constants';
 import { ScopeLevel } from './type';
 import useApplicationScopesAssignment from './use-application-scopes-assignment';
 
@@ -50,47 +46,33 @@ function ApplicationScopesAssignmentModal({ isOpen, onClose, applicationId, scop
     [scopesAssignment]
   );
 
-  const tabs = useMemo(() => {
-    const getPermissionTabs = () => {
-      if (scopeLevel === ScopeLevel.All) {
-        return allLevelPermissionTabs;
-      }
+  const tabs = useMemo(
+    () =>
+      Object.values(
+        scopeLevel === ScopeLevel.User ? userLevelPermissionsTabs : organizationLevelPermissionsTab
+      ).map(({ title, key }) => {
+        const selectedDataCount = scopesAssignment[key].selectedData.length;
 
-      return scopeLevel === ScopeLevel.User
-        ? userLevelPermissionsTabs
-        : organizationLevelPermissionsTab;
-    };
-
-    return Object.values(getPermissionTabs()).map(({ title, key }) => {
-      const selectedDataCount = scopesAssignment[key].selectedData.length;
-
-      return (
-        <TabNavItem
-          key={key}
-          isActive={key === activeTab}
-          onClick={() => {
-            setActiveTab(key);
-          }}
-        >
-          {`${String(t(title))}${selectedDataCount ? ` (${selectedDataCount})` : ''}`}
-        </TabNavItem>
-      );
-    });
-  }, [activeTab, scopeLevel, scopesAssignment, setActiveTab, t]);
+        return (
+          <TabNavItem
+            key={key}
+            isActive={key === activeTab}
+            onClick={() => {
+              setActiveTab(key);
+            }}
+          >
+            {`${String(t(title))}${selectedDataCount ? ` (${selectedDataCount})` : ''}`}
+          </TabNavItem>
+        );
+      }),
+    [activeTab, scopeLevel, scopesAssignment, setActiveTab, t]
+  );
 
   const modalText = useMemo<{
     title: AdminConsoleKey;
     subtitle: AdminConsoleKey;
     saveButton: AdminConsoleKey;
   }>(() => {
-    if (scopeLevel === ScopeLevel.All) {
-      return {
-        title: 'application_details.permissions.table_name',
-        subtitle: 'application_details.permissions.permissions_assignment_description',
-        saveButton: 'general.save',
-      };
-    }
-
     const scopeLevelPhrase = scopeLevel === ScopeLevel.User ? 'user' : 'organization';
 
     return {
@@ -115,7 +97,7 @@ function ApplicationScopesAssignmentModal({ isOpen, onClose, applicationId, scop
       onConfirm={onSubmitHandler}
     >
       <TabNav>{tabs}</TabNav>
-      {(scopeLevel === ScopeLevel.All || scopeLevel === ScopeLevel.User) && (
+      {scopeLevel === ScopeLevel.User && (
         <>
           <TabWrapper
             key={ApplicationUserConsentScopeType.UserScopes}
@@ -133,25 +115,25 @@ function ApplicationScopesAssignmentModal({ isOpen, onClose, applicationId, scop
           </TabWrapper>
         </>
       )}
-      {(scopeLevel === ScopeLevel.All || scopeLevel === ScopeLevel.Organization) && (
-        <TabWrapper
-          key={ApplicationUserConsentScopeType.OrganizationScopes}
-          isActive={ApplicationUserConsentScopeType.OrganizationScopes === activeTab}
-        >
-          <DataTransferBox
-            {...scopesAssignment[ApplicationUserConsentScopeType.OrganizationScopes]}
-          />
-        </TabWrapper>
-      )}
       {scopeLevel === ScopeLevel.Organization && (
-        <TabWrapper
-          key={ApplicationUserConsentScopeType.OrganizationResourceScopes}
-          isActive={ApplicationUserConsentScopeType.OrganizationResourceScopes === activeTab}
-        >
-          <DataTransferBox
-            {...scopesAssignment[ApplicationUserConsentScopeType.OrganizationResourceScopes]}
-          />
-        </TabWrapper>
+        <>
+          <TabWrapper
+            key={ApplicationUserConsentScopeType.OrganizationScopes}
+            isActive={ApplicationUserConsentScopeType.OrganizationScopes === activeTab}
+          >
+            <DataTransferBox
+              {...scopesAssignment[ApplicationUserConsentScopeType.OrganizationScopes]}
+            />
+          </TabWrapper>
+          <TabWrapper
+            key={ApplicationUserConsentScopeType.OrganizationResourceScopes}
+            isActive={ApplicationUserConsentScopeType.OrganizationResourceScopes === activeTab}
+          >
+            <DataTransferBox
+              {...scopesAssignment[ApplicationUserConsentScopeType.OrganizationResourceScopes]}
+            />
+          </TabWrapper>
+        </>
       )}
     </ConfirmModal>
   );

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/PermissionsCard/ApplicationScopesAssignmentModal/type.ts

@@ -35,11 +35,6 @@ export type ScopeAssignmentHook<
 export enum ScopeLevel {
   User = 'user',
   Organization = 'organization',
-  /**
-   * Only used when the new organization resource scope feature is not ready.
-   * Todo @xiaoyijun remove this when the new organization resource scope feature is ready.
-   */
-  All = 'all',
 }
 
 export type PermissionTabType = Partial<{

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/PermissionsCard/index.tsx

@@ -47,10 +47,6 @@ function PermissionsCard({ applicationId, scopeLevel }: Props) {
   const rowGroups = useMemo(() => {
     const { userLevelRowGroups, organizationLevelGroups } = parseRowGroup(data);
 
-    if (scopeLevel === ScopeLevel.All) {
-      return [...userLevelRowGroups, ...organizationLevelGroups];
-    }
-
     return scopeLevel === ScopeLevel.User ? userLevelRowGroups : organizationLevelGroups;
   }, [data, parseRowGroup, scopeLevel]);
 
@@ -58,20 +54,6 @@ function PermissionsCard({ applicationId, scopeLevel }: Props) {
     formCard: Omit<FormCardProps, 'children'>;
     tableName: AdminConsoleKey;
   }>(() => {
-    if (scopeLevel === ScopeLevel.All) {
-      return {
-        formCard: {
-          title: 'application_details.permissions.name',
-          description: 'application_details.permissions.description',
-          learnMoreLink: {
-            href: getDocumentationUrl(logtoThirdPartyAppPermissionsLink),
-            targetBlank: 'noopener',
-          },
-        },
-        tableName: 'application_details.permissions.table_name',
-      };
-    }
-
     const scopeLevelPhrase = scopeLevel === ScopeLevel.User ? 'user' : 'organization';
 
     return {

packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/Permissions/PermissionsCard/use-scopes-table.tsx

@@ -4,12 +4,10 @@ import {
   type ApplicationUserConsentScopesResponse,
   ApplicationUserConsentScopeType,
 } from '@logto/schemas';
-import { condArray } from '@silverhand/essentials';
 import { useCallback, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Tip from '@/assets/icons/tip.svg';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import IconButton from '@/ds-components/IconButton';
 import { ToggleTip } from '@/ds-components/Tip';
 import useApi from '@/hooks/use-api';
@@ -143,14 +141,7 @@ const useScopesTable = () => {
         organizationLevelGroups: [
           // Hide the organization scopes group if there is no organization scopes
           ...(organizationScopesGroup.data.length > 0 ? [organizationScopesGroup] : []),
-          ...condArray(
-            /**
-             * Hide the organization resource scopes group if the organization resource scopes feature is not ready
-             */
-            isDevFeaturesEnabled &&
-              organizationResourceScopesGroup.length > 0 &&
-              organizationResourceScopesGroup
-          ),
+          ...(organizationResourceScopesGroup.length > 0 ? organizationResourceScopesGroup : []),
         ],
       };
     },

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

@@ -1,7 +1,5 @@
 import { type Application } from '@logto/schemas';
 
-import { isDevFeaturesEnabled } from '@/consts/env';
-
 import PermissionsCard from './PermissionsCard';
 import { ScopeLevel } from './PermissionsCard/ApplicationScopesAssignmentModal/type';
 import * as styles from './index.module.scss';
@@ -11,13 +9,9 @@ type Props = {
 };
 
 function Permissions({ application }: Props) {
-  const displayScopeLevels = isDevFeaturesEnabled
-    ? [ScopeLevel.User, ScopeLevel.Organization]
-    : [ScopeLevel.All];
-
   return (
     <div className={styles.container}>
-      {displayScopeLevels.map((scopeLevel) => (
+      {[ScopeLevel.User, ScopeLevel.Organization].map((scopeLevel) => (
         <PermissionsCard key={scopeLevel} applicationId={application.id} scopeLevel={scopeLevel} />
       ))}
     </div>

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

@@ -19,7 +19,7 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import useApi, { type RequestError } from '@/hooks/use-api';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 
-import Introduction from '../Organizations/Guide/Introduction';
+import Introduction from '../Organizations/Introduction';
 
 import * as styles from './index.module.scss';
 import { OrganizationDetailsTabs, type OrganizationDetailsOutletContext } from './types';
@@ -91,7 +91,7 @@ function OrganizationDetails() {
               setIsGuideDrawerOpen(false);
             }}
           >
-            <Introduction isReadonly />
+            <Introduction />
           </Drawer>
           <DeleteConfirmModal
             isOpen={isDeleteFormOpen}

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

@@ -23,7 +23,7 @@ import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import * as pageLayout from '@/scss/page-layout.module.scss';
 
-import Introduction from '../Organizations/Guide/Introduction';
+import Introduction from '../Organizations/Introduction';
 
 import * as styles from './index.module.scss';
 
@@ -70,7 +70,7 @@ function OrganizationTemplate() {
             setIsGuideDrawerOpen(false);
           }}
         >
-          <Introduction isReadonly />
+          <Introduction />
         </Drawer>
       </div>
       {isOrganizationsDisabled && (

packages/console/src/pages/Organizations/Guide/DynamicFormFields/index.module.scss

@@ -1,55 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.formContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  width: 100%;
-  gap: _.unit(3);
-}
-
-.title {
-  font: var(--font-label-2);
-}
-
-.item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: _.unit(2);
-
-  .fieldWrapper {
-    flex: 1;
-    background: var(--color-layer-light);
-    padding: _.unit(4);
-    border-radius: 12px;
-  }
-}
-
-.skeleton {
-  width: 100%;
-  padding: _.unit(1) 0;
-
-  .group {
-    display: flex;
-    flex-direction: column;
-    gap: _.unit(3);
-    width: 100%;
-
-    + .group {
-      margin-top: _.unit(6);
-    }
-  }
-
-  .title {
-    width: 200px;
-    height: 20px;
-    @include _.shimmering-animation;
-  }
-
-  .field {
-    width: 100%;
-    height: 36px;
-    @include _.shimmering-animation;
-  }
-}

packages/console/src/pages/Organizations/Guide/DynamicFormFields/index.tsx

@@ -1,83 +0,0 @@
-import { type AdminConsoleKey } from '@logto/phrases';
-import classNames from 'classnames';
-import { type ReactNode } from 'react';
-
-import CirclePlus from '@/assets/icons/circle-plus.svg';
-import Minus from '@/assets/icons/minus.svg';
-import Button from '@/ds-components/Button';
-import DynamicT from '@/ds-components/DynamicT';
-import IconButton from '@/ds-components/IconButton';
-
-import * as styles from './index.module.scss';
-
-type Props = {
-  readonly className?: string;
-  readonly title?: AdminConsoleKey;
-  readonly fields: Array<Record<'id', string>>;
-  readonly isLoading?: boolean;
-  readonly onAdd: () => void;
-  readonly onRemove: (index: number) => void;
-  readonly render: (index: number) => ReactNode;
-};
-
-function Skeleton() {
-  return (
-    <div className={styles.skeleton}>
-      {Array.from({ length: 2 }).map((_, index) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className={styles.group}>
-          <div className={styles.title} />
-          <div className={styles.field} />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function DynamicFormFields({
-  className,
-  title,
-  fields,
-  isLoading,
-  onAdd,
-  onRemove,
-  render,
-}: Props) {
-  return (
-    <div className={classNames(styles.formContainer, className)}>
-      {title && (
-        <div className={styles.title}>
-          <DynamicT forKey={title} />
-        </div>
-      )}
-      {fields.map((field, index) => (
-        <div key={field.id} className={styles.item}>
-          {isLoading ? <Skeleton /> : <div className={styles.fieldWrapper}>{render(index)}</div>}
-          {fields.length > 1 && (
-            <IconButton
-              size="small"
-              onClick={() => {
-                onRemove(index);
-              }}
-            >
-              <Minus />
-            </IconButton>
-          )}
-        </div>
-      ))}
-      {!isLoading && (
-        <Button
-          size="small"
-          type="text"
-          title="general.add_another"
-          icon={<CirclePlus />}
-          onClick={() => {
-            onAdd();
-          }}
-        />
-      )}
-    </div>
-  );
-}
-
-export default DynamicFormFields;

packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss

@@ -1,23 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.container {
-  .title {
-    font: var(--font-title-1);
-  }
-
-  .sectionTitle {
-    font: var(--font-title-2);
-  }
-
-  .description {
-    font: var(--font-body-2);
-  }
-
-  .panel {
-    flex: 1;
-  }
-
-  .compact {
-    padding: _.unit(6);
-  }
-}

packages/console/src/pages/Organizations/Guide/Introduction/index.tsx

@@ -1,146 +0,0 @@
-import { Theme } from '@logto/schemas';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-
-import OrganizationFeatureDark from '@/assets/icons/organization-feature-dark.svg';
-import OrganizationFeature from '@/assets/icons/organization-feature.svg';
-import ActionBar from '@/components/ActionBar';
-import { isDevFeaturesEnabled } from '@/consts/env';
-import Button from '@/ds-components/Button';
-import Card from '@/ds-components/Card';
-import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
-import useTheme from '@/hooks/use-theme';
-
-import { steps, totalStepCount } from '../const';
-import * as parentStyles from '../index.module.scss';
-
-import FlexBox from './components/FlexBox';
-import InteractiveDiagram from './components/InteractiveDiagram';
-import Panel from './components/Panel';
-import Permission from './components/Permission';
-import Role from './components/Role';
-import Section from './components/Section';
-import User from './components/User';
-import * as styles from './index.module.scss';
-
-const icons = {
-  [Theme.Light]: { OrganizationIcon: OrganizationFeature },
-  [Theme.Dark]: { OrganizationIcon: OrganizationFeatureDark },
-};
-
-type Props = {
-  /* True if the guide is in the "Check guide" drawer of organization details page */
-  readonly isReadonly?: boolean;
-};
-
-function Introduction({ isReadonly }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.organizations' });
-  const { navigate } = useTenantPathname();
-  const theme = useTheme();
-  const { OrganizationIcon } = icons[theme];
-
-  return (
-    <>
-      <OverlayScrollbar className={parentStyles.stepContainer}>
-        <div className={classNames(parentStyles.content, styles.container)}>
-          <Card className={classNames(parentStyles.card, isReadonly && styles.compact)}>
-            <OrganizationIcon className={parentStyles.icon} />
-            <FlexBox type="column" gap={24}>
-              <div className={styles.title}>{t('guide.introduction.title')}</div>
-              <FlexBox type="column">
-                <div className={styles.sectionTitle}>{t('guide.introduction.section_1.title')}</div>
-                <Section
-                  title={t('organization_and_member')}
-                  description={t('organization_and_member_description')}
-                >
-                  <Panel label={t('organization')}>
-                    <FlexBox gap={20} style={{ justifyContent: 'center' }}>
-                      {Array.from({ length: 5 }).map((_, index) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <User key={index} name={t('guide.member')} />
-                      ))}
-                      <User hasIcon={false} name="......" />
-                    </FlexBox>
-                  </Panel>
-                </Section>
-              </FlexBox>
-              <FlexBox type="column">
-                <div className={styles.sectionTitle}>{t('guide.introduction.section_2.title')}</div>
-                <div className={styles.description}>
-                  {t('guide.introduction.section_2.description')}
-                </div>
-                <Section
-                  title={t('guide.organization_permissions')}
-                  description={t('guide.introduction.section_2.permission_description')}
-                >
-                  <FlexBox
-                    isEquallyDivided
-                    gap={20}
-                    style={{ padding: '12px 0', justifyContent: 'center' }}
-                  >
-                    <Permission name="read:resource" />
-                    <Permission name="edit:resource" />
-                    <Permission name="delete:resource" />
-                    <Permission name="......" isMonospace={false} />
-                  </FlexBox>
-                </Section>
-                <Section
-                  title={t('guide.organization_roles')}
-                  description={t(
-                    `guide.introduction.section_2.${
-                      isDevFeaturesEnabled ? 'role_description' : 'role_description_deprecated'
-                    }`
-                  )}
-                >
-                  <FlexBox isEquallyDivided gap={20}>
-                    <Role
-                      label={t('guide.admin')}
-                      permissions={['read:resource', 'edit:resource', 'delete:resource']}
-                    />
-                    <Role
-                      label={t('guide.member')}
-                      permissions={['read:resource', 'edit:resource']}
-                    />
-                    <Role label={t('guide.guest')} permissions={['read:resource']} />
-                    <Role label="......" />
-                  </FlexBox>
-                </Section>
-              </FlexBox>
-              {isDevFeaturesEnabled && (
-                <FlexBox type="column">
-                  <div className={styles.sectionTitle}>
-                    {t('guide.introduction.section_3.title')}
-                  </div>
-                  <div className={styles.description}>
-                    {t('guide.introduction.section_3.description')}
-                  </div>
-                </FlexBox>
-              )}
-              <FlexBox type="column">
-                <div className={styles.sectionTitle}>{t('guide.introduction.section_4.title')}</div>
-                <div className={styles.description}>
-                  {t('guide.introduction.section_4.description')}
-                </div>
-                <InteractiveDiagram />
-              </FlexBox>
-            </FlexBox>
-          </Card>
-        </div>
-      </OverlayScrollbar>
-      {!isReadonly && (
-        <ActionBar step={1} totalSteps={totalStepCount}>
-          <Button
-            title="general.next"
-            type="primary"
-            onClick={() => {
-              navigate(`../${steps.permissions}`);
-            }}
-          />
-        </ActionBar>
-      )}
-    </>
-  );
-}
-
-export default Introduction;

packages/console/src/pages/Organizations/Guide/OrganizationInfo/index.tsx

@@ -1,107 +0,0 @@
-import { Theme } from '@logto/schemas';
-import classNames from 'classnames';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import OrganizationFeatureDark from '@/assets/icons/organization-feature-dark.svg';
-import OrganizationFeature from '@/assets/icons/organization-feature.svg';
-import ActionBar from '@/components/ActionBar';
-import { organizationConfigGuideLink } from '@/consts';
-import Button from '@/ds-components/Button';
-import Card from '@/ds-components/Card';
-import FormField from '@/ds-components/FormField';
-import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import TextInput from '@/ds-components/TextInput';
-import TextLink from '@/ds-components/TextLink';
-import useApi from '@/hooks/use-api';
-import useConfigs from '@/hooks/use-configs';
-import useDocumentationUrl from '@/hooks/use-documentation-url';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
-import useTheme from '@/hooks/use-theme';
-import { trySubmitSafe } from '@/utils/form';
-
-import { steps, totalStepCount } from '../const';
-import * as styles from '../index.module.scss';
-
-type OrganizationForm = {
-  name: string;
-};
-
-function OrganizationInfo() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.organizations' });
-  const { getDocumentationUrl } = useDocumentationUrl();
-  const theme = useTheme();
-  const Icon = theme === Theme.Light ? OrganizationFeature : OrganizationFeatureDark;
-  const { navigate } = useTenantPathname();
-  const api = useApi();
-  const { updateConfigs } = useConfigs();
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting },
-  } = useForm<OrganizationForm>({
-    defaultValues: { name: '' },
-  });
-
-  const onSubmit = handleSubmit(
-    trySubmitSafe(async (json) => {
-      await api.post(`api/organizations`, { json });
-      void updateConfigs({ organizationCreated: true });
-      navigate(`/organizations`);
-    })
-  );
-
-  const onNavigateBack = () => {
-    reset();
-    navigate(`../${steps.roles}`);
-  };
-
-  return (
-    <>
-      <OverlayScrollbar className={styles.stepContainer}>
-        <div className={classNames(styles.content)}>
-          <Card className={styles.card}>
-            <Icon className={styles.icon} />
-            <div className={styles.section}>
-              <div className={styles.title}>{t('guide.step_3')}</div>
-              <div className={styles.description}>{t('guide.step_3_description')}</div>
-            </div>
-            <form>
-              <FormField isRequired title="organizations.guide.organization_name">
-                <TextInput
-                  {...register('name', { required: true })}
-                  error={Boolean(errors.name)}
-                  placeholder={t('organization_name_placeholder')}
-                />
-              </FormField>
-            </form>
-          </Card>
-          <Card className={styles.card}>
-            <div className={styles.section}>
-              <div className={styles.title}>{t('guide.more_next_steps')}</div>
-              <div className={styles.subtitle}>{t('guide.add_members')}</div>
-              <ul>
-                <li>
-                  <TextLink
-                    href={getDocumentationUrl(organizationConfigGuideLink)}
-                    targetBlank="noopener"
-                  >
-                    {t('guide.config_organization')}
-                  </TextLink>
-                </li>
-              </ul>
-            </div>
-          </Card>
-        </div>
-      </OverlayScrollbar>
-      <ActionBar step={4} totalSteps={totalStepCount}>
-        <Button isLoading={isSubmitting} title="general.done" type="primary" onClick={onSubmit} />
-        <Button title="general.back" onClick={onNavigateBack} />
-      </ActionBar>
-    </>
-  );
-}
-
-export default OrganizationInfo;

packages/console/src/pages/Organizations/Guide/OrganizationPermissions/index.tsx

@@ -1,143 +0,0 @@
-import { Theme, type OrganizationScope } from '@logto/schemas';
-import classNames from 'classnames';
-import { useEffect } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
-
-import PermissionFeatureDark from '@/assets/icons/permission-feature-dark.svg';
-import PermissionFeature from '@/assets/icons/permission-feature.svg';
-import ActionBar from '@/components/ActionBar';
-import Button from '@/ds-components/Button';
-import Card from '@/ds-components/Card';
-import FormField from '@/ds-components/FormField';
-import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import TextInput from '@/ds-components/TextInput';
-import useApi, { type RequestError } from '@/hooks/use-api';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
-import useTheme from '@/hooks/use-theme';
-import { trySubmitSafe } from '@/utils/form';
-
-import { organizationScopesPath } from '../../PermissionModal';
-import DynamicFormFields from '../DynamicFormFields';
-import { steps, totalStepCount } from '../const';
-import * as styles from '../index.module.scss';
-
-type Form = {
-  /* Organization permissions, a.k.a organization scopes */
-  permissions: Array<Omit<OrganizationScope, 'id' | 'tenantId'>>;
-};
-
-const defaultValue = { name: '', description: '' };
-
-function OrganizationPermissions() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.organizations' });
-  const theme = useTheme();
-  const PermissionIcon = theme === Theme.Light ? PermissionFeature : PermissionFeatureDark;
-  const { navigate } = useTenantPathname();
-  const api = useApi();
-  const { data, error } = useSWR<OrganizationScope[], RequestError>('api/organization-scopes');
-
-  const {
-    control,
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting, isDirty },
-  } = useForm<Form>({
-    defaultValues: {
-      permissions: [defaultValue],
-    },
-  });
-
-  useEffect(() => {
-    if (data?.length) {
-      reset({
-        permissions: data.map(({ name, description }) => ({ name, description })),
-      });
-    }
-  }, [data, reset]);
-
-  const permissionFields = useFieldArray({ control, name: 'permissions' });
-
-  const onSubmit = handleSubmit(
-    trySubmitSafe(async ({ permissions }) => {
-      // If the form is pristine then skip the submit and go directly to the next step
-      if (!isDirty) {
-        navigate(`../${steps.roles}`);
-        return;
-      }
-
-      // If there's pre-saved permissions, remove them first
-      if (data?.length) {
-        await Promise.all(
-          data.map(async ({ id }) => api.delete(`${organizationScopesPath}/${id}`))
-        );
-      }
-      // Create new permissions
-      if (permissions.length > 0) {
-        await Promise.all(
-          permissions
-            .filter(({ name }) => name)
-            .map(async ({ name, description }) => {
-              await api.post(organizationScopesPath, { json: { name, description } });
-            })
-        );
-      }
-
-      navigate(`../${steps.roles}`);
-    })
-  );
-
-  const onNavigateBack = () => {
-    reset();
-    navigate(`../${steps.introduction}`);
-  };
-
-  return (
-    <>
-      <OverlayScrollbar className={styles.stepContainer}>
-        <div className={classNames(styles.content)}>
-          <Card className={styles.card}>
-            <PermissionIcon className={styles.icon} />
-            <div className={styles.title}>{t('guide.step_1')}</div>
-            <form>
-              <DynamicFormFields
-                isLoading={!data && !error}
-                title="organizations.guide.organization_permissions"
-                fields={permissionFields.fields}
-                render={(index) => (
-                  <div className={styles.fieldGroup}>
-                    <FormField title="organizations.guide.permission_name">
-                      <TextInput
-                        {...register(`permissions.${index}.name`)}
-                        error={Boolean(errors.permissions?.[index]?.name)}
-                        placeholder="read:appointment"
-                      />
-                    </FormField>
-                    <FormField title="general.description">
-                      <TextInput
-                        {...register(`permissions.${index}.description`)}
-                        placeholder={t('create_permission_placeholder')}
-                      />
-                    </FormField>
-                  </div>
-                )}
-                onAdd={() => {
-                  permissionFields.append(defaultValue);
-                }}
-                onRemove={permissionFields.remove}
-              />
-            </form>
-          </Card>
-        </div>
-      </OverlayScrollbar>
-      <ActionBar step={2} totalSteps={totalStepCount}>
-        <Button isLoading={isSubmitting} title="general.next" type="primary" onClick={onSubmit} />
-        <Button title="general.back" onClick={onNavigateBack} />
-      </ActionBar>
-    </>
-  );
-}
-
-export default OrganizationPermissions;

packages/console/src/pages/Organizations/Guide/OrganizationRoles/index.tsx

@@ -1,174 +0,0 @@
-import { type OrganizationRoleWithScopes, Theme, type OrganizationRole } from '@logto/schemas';
-import classNames from 'classnames';
-import { useEffect, useState } from 'react';
-import { Controller, useFieldArray, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
-
-import RbacFeatureDark from '@/assets/icons/rbac-feature-dark.svg';
-import RbacFeature from '@/assets/icons/rbac-feature.svg';
-import ActionBar from '@/components/ActionBar';
-import OrganizationScopesSelect from '@/components/OrganizationScopesSelect';
-import Button from '@/ds-components/Button';
-import Card from '@/ds-components/Card';
-import FormField from '@/ds-components/FormField';
-import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
-import { type Option } from '@/ds-components/Select/MultiSelect';
-import TextInput from '@/ds-components/TextInput';
-import useApi, { type RequestError } from '@/hooks/use-api';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
-import useTheme from '@/hooks/use-theme';
-import { trySubmitSafe } from '@/utils/form';
-
-import { organizationRolePath } from '../../RoleModal';
-import DynamicFormFields from '../DynamicFormFields';
-import { steps, totalStepCount } from '../const';
-import * as styles from '../index.module.scss';
-
-type Form = {
-  roles: Array<Omit<OrganizationRole, 'tenantId' | 'id'> & { scopes: Array<Option<string>> }>;
-};
-
-const defaultValue = { name: '', description: '', scopes: [] };
-
-function OrganizationRoles() {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.organizations' });
-  const theme = useTheme();
-  const RbacIcon = theme === Theme.Light ? RbacFeature : RbacFeatureDark;
-  const { navigate } = useTenantPathname();
-  const api = useApi();
-  const { data, error } = useSWR<OrganizationRoleWithScopes[], RequestError>(
-    'api/organization-roles'
-  );
-  const [keyword, setKeyword] = useState('');
-
-  const {
-    control,
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors, isSubmitting, isDirty },
-  } = useForm<Form>({
-    defaultValues: {
-      roles: [defaultValue],
-    },
-  });
-
-  useEffect(() => {
-    if (data?.length) {
-      reset({
-        roles: data.map(({ name, description, scopes }) => ({
-          name,
-          description,
-          scopes: scopes.map(({ id, name }) => ({ value: id, title: name })),
-        })),
-      });
-    }
-  }, [data, reset]);
-
-  const roleFields = useFieldArray({ control, name: 'roles' });
-
-  const onSubmit = handleSubmit(
-    trySubmitSafe(async ({ roles }) => {
-      // If the form is pristine then skip the submit and go directly to the next step
-      if (!isDirty) {
-        navigate(`../${steps.organizationInfo}`);
-        return;
-      }
-
-      // Remove pre-saved roles
-      if (data?.length) {
-        await Promise.all(data.map(async ({ id }) => api.delete(`${organizationRolePath}/${id}`)));
-      }
-      // Create new roles
-      if (roles.length > 0) {
-        await Promise.all(
-          roles
-            .filter(({ name }) => name)
-            .map(async ({ name, description, scopes }) => {
-              const { id } = await api
-                .post(organizationRolePath, { json: { name, description } })
-                .json<OrganizationRole>();
-
-              if (scopes.length > 0) {
-                await api.put(`${organizationRolePath}/${id}/scopes`, {
-                  json: { organizationScopeIds: scopes.map(({ value }) => value) },
-                });
-              }
-            })
-        );
-      }
-
-      navigate(`../${steps.organizationInfo}`);
-    })
-  );
-
-  const onNavigateBack = () => {
-    reset();
-    setKeyword('');
-    navigate(`../${steps.permissions}`);
-  };
-
-  return (
-    <>
-      <OverlayScrollbar className={styles.stepContainer}>
-        <div className={classNames(styles.content)}>
-          <Card className={styles.card}>
-            <RbacIcon className={styles.icon} />
-            <div className={styles.section}>
-              <div className={styles.title}>{t('guide.step_2')}</div>
-            </div>
-            <form>
-              <DynamicFormFields
-                isLoading={!data && !error}
-                title="organizations.guide.organization_roles"
-                fields={roleFields.fields}
-                render={(index) => (
-                  <div className={styles.fieldGroup}>
-                    <FormField title="organizations.guide.role_name">
-                      <TextInput
-                        {...register(`roles.${index}.name`)}
-                        error={Boolean(errors.roles?.[index]?.name)}
-                        placeholder="viewer"
-                      />
-                    </FormField>
-                    <FormField title="general.description">
-                      <TextInput
-                        {...register(`roles.${index}.description`)}
-                        placeholder={t('create_role_placeholder')}
-                      />
-                    </FormField>
-                    <FormField title="organizations.guide.permissions">
-                      <Controller
-                        name={`roles.${index}.scopes`}
-                        control={control}
-                        render={({ field: { onChange, value } }) => (
-                          <OrganizationScopesSelect
-                            keyword={keyword}
-                            setKeyword={setKeyword}
-                            value={value}
-                            onChange={onChange}
-                          />
-                        )}
-                      />
-                    </FormField>
-                  </div>
-                )}
-                onAdd={() => {
-                  roleFields.append(defaultValue);
-                }}
-                onRemove={roleFields.remove}
-              />
-            </form>
-          </Card>
-        </div>
-      </OverlayScrollbar>
-      <ActionBar step={3} totalSteps={totalStepCount}>
-        <Button isLoading={isSubmitting} title="general.next" type="primary" onClick={onSubmit} />
-        <Button title="general.back" onClick={onNavigateBack} />
-      </ActionBar>
-    </>
-  );
-}
-
-export default OrganizationRoles;

packages/console/src/pages/Organizations/Guide/const.ts

@@ -1,8 +0,0 @@
-export const steps = Object.freeze({
-  introduction: 'introduction',
-  permissions: 'permissions',
-  roles: 'roles',
-  organizationInfo: 'organization-info',
-});
-
-export const totalStepCount = Object.keys(steps).length;

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

@@ -1,32 +0,0 @@
-import { useCallback } from 'react';
-import Modal from 'react-modal';
-import { Outlet } from 'react-router-dom';
-
-import DsModalHeader from '@/ds-components/ModalHeader';
-import useTenantPathname from '@/hooks/use-tenant-pathname';
-import * as modalStyles from '@/scss/modal.module.scss';
-
-import * as styles from './index.module.scss';
-
-function Guide() {
-  const { navigate } = useTenantPathname();
-
-  const onClose = useCallback(() => {
-    navigate('/organizations');
-  }, [navigate]);
-
-  return (
-    <Modal shouldCloseOnEsc isOpen className={modalStyles.fullScreen} onRequestClose={onClose}>
-      <div className={styles.modalContainer}>
-        <DsModalHeader
-          title="organizations.guide.title"
-          subtitle="organizations.guide.subtitle"
-          onClose={onClose}
-        />
-        <Outlet />
-      </div>
-    </Modal>
-  );
-}
-
-export default Guide;

packages/console/src/pages/Organizations/Introduction/index.module.scss

@@ -1,13 +1,6 @@
 @use '@/scss/underscore' as _;
 @use '@/scss/dimensions' as dim;
 
-.modalContainer {
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-base);
-}
 
 .stepContainer {
   flex: 1;
@@ -22,13 +15,33 @@
   align-items: center;
   gap: _.unit(6);
 
+  .title {
+    font: var(--font-title-1);
+  }
+
+  .sectionTitle {
+    font: var(--font-title-2);
+  }
+
+  .description {
+    font: var(--font-body-2);
+  }
+
+  .panel {
+    flex: 1;
+  }
+
+  .compact {
+    padding: _.unit(6);
+  }
+
   .card {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: dim.$guide-main-content-max-width;
     min-width: dim.$guide-content-min-width;
-    padding: _.unit(12);
+    padding: _.unit(6);
     gap: _.unit(6);
 
     .section {

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

@@ -0,0 +1,112 @@
+import { Theme } from '@logto/schemas';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+
+import OrganizationFeatureDark from '@/assets/icons/organization-feature-dark.svg';
+import OrganizationFeature from '@/assets/icons/organization-feature.svg';
+import Card from '@/ds-components/Card';
+import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
+import useTheme from '@/hooks/use-theme';
+
+import FlexBox from './components/FlexBox';
+import InteractiveDiagram from './components/InteractiveDiagram';
+import Panel from './components/Panel';
+import Permission from './components/Permission';
+import Role from './components/Role';
+import Section from './components/Section';
+import User from './components/User';
+import * as styles from './index.module.scss';
+
+const icons = {
+  [Theme.Light]: { OrganizationIcon: OrganizationFeature },
+  [Theme.Dark]: { OrganizationIcon: OrganizationFeatureDark },
+};
+
+function Introduction() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.organizations' });
+  const theme = useTheme();
+  const { OrganizationIcon } = icons[theme];
+
+  return (
+    <OverlayScrollbar className={styles.stepContainer}>
+      <div className={classNames(styles.content)}>
+        <Card className={classNames(styles.card)}>
+          <OrganizationIcon className={styles.icon} />
+          <FlexBox type="column" gap={24}>
+            <div className={styles.title}>{t('guide.introduction.title')}</div>
+            <FlexBox type="column">
+              <div className={styles.sectionTitle}>{t('guide.introduction.section_1.title')}</div>
+              <Section
+                title={t('organization_and_member')}
+                description={t('organization_and_member_description')}
+              >
+                <Panel label={t('organization')}>
+                  <FlexBox gap={20} style={{ justifyContent: 'center' }}>
+                    {Array.from({ length: 5 }).map((_, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <User key={index} name={t('guide.member')} />
+                    ))}
+                    <User hasIcon={false} name="......" />
+                  </FlexBox>
+                </Panel>
+              </Section>
+            </FlexBox>
+            <FlexBox type="column">
+              <div className={styles.sectionTitle}>{t('guide.introduction.section_2.title')}</div>
+              <div className={styles.description}>
+                {t('guide.introduction.section_2.description')}
+              </div>
+              <Section
+                title={t('guide.organization_permissions')}
+                description={t('guide.introduction.section_2.permission_description')}
+              >
+                <FlexBox
+                  isEquallyDivided
+                  gap={20}
+                  style={{ padding: '12px 0', justifyContent: 'center' }}
+                >
+                  <Permission name="read:resource" />
+                  <Permission name="edit:resource" />
+                  <Permission name="delete:resource" />
+                  <Permission name="......" isMonospace={false} />
+                </FlexBox>
+              </Section>
+              <Section
+                title={t('guide.organization_roles')}
+                description={t('guide.introduction.section_2.role_description')}
+              >
+                <FlexBox isEquallyDivided gap={20}>
+                  <Role
+                    label={t('guide.admin')}
+                    permissions={['read:resource', 'edit:resource', 'delete:resource']}
+                  />
+                  <Role
+                    label={t('guide.member')}
+                    permissions={['read:resource', 'edit:resource']}
+                  />
+                  <Role label={t('guide.guest')} permissions={['read:resource']} />
+                  <Role label="......" />
+                </FlexBox>
+              </Section>
+            </FlexBox>
+            <FlexBox type="column">
+              <div className={styles.sectionTitle}>{t('guide.introduction.section_3.title')}</div>
+              <div className={styles.description}>
+                {t('guide.introduction.section_3.description')}
+              </div>
+            </FlexBox>
+            <FlexBox type="column">
+              <div className={styles.sectionTitle}>{t('guide.introduction.section_4.title')}</div>
+              <div className={styles.description}>
+                {t('guide.introduction.section_4.description')}
+              </div>
+              <InteractiveDiagram />
+            </FlexBox>
+          </FlexBox>
+        </Card>
+      </div>
+    </OverlayScrollbar>
+  );
+}
+
+export default Introduction;

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

@@ -28,11 +28,10 @@ const pathname = '/organizations';
 const apiPathname = 'api/organizations';
 
 type Props = {
-  readonly isLoading: boolean;
   readonly onCreate: () => void;
 };
 
-function OrganizationsTable({ isLoading, onCreate }: Props) {
+function OrganizationsTable({ onCreate }: Props) {
   const [keyword, setKeyword] = useState('');
   const [page, setPage] = useState(1);
   const { data: response, error } = useSWR<[OrganizationWithFeatured[], number], RequestError>(
@@ -44,7 +43,7 @@ function OrganizationsTable({ isLoading, onCreate }: Props) {
     })
   );
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const isTableLoading = isLoading || (!response && !error);
+  const isTableLoading = !response && !error;
   const [data, totalCount] = response ?? [[], 0];
   const { navigate } = useTenantPathname();
 

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

@@ -1,106 +0,0 @@
-import { type OrganizationScope } from '@logto/schemas';
-import { type Nullable } from '@silverhand/essentials';
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import ReactModal from 'react-modal';
-
-import Button from '@/ds-components/Button';
-import DangerousRaw from '@/ds-components/DangerousRaw';
-import FormField from '@/ds-components/FormField';
-import ModalLayout from '@/ds-components/ModalLayout';
-import TextInput from '@/ds-components/TextInput';
-import useActionTranslation from '@/hooks/use-action-translation';
-import useApi from '@/hooks/use-api';
-import * as modalStyles from '@/scss/modal.module.scss';
-import { trySubmitSafe } from '@/utils/form';
-
-export const organizationScopesPath = 'api/organization-scopes';
-
-type Props = {
-  readonly isOpen: boolean;
-  readonly editData: Nullable<OrganizationScope>;
-  readonly onClose: () => void;
-};
-
-/** A modal that allows users to create or edit an organization scope. */
-function PermissionModal({ isOpen, editData, onClose }: Props) {
-  const api = useApi();
-  const {
-    reset,
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<Partial<OrganizationScope>>();
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const tAction = useActionTranslation();
-  const title = editData
-    ? tAction('edit', 'organizations.organization_permission')
-    : tAction('create', 'organizations.organization_permission');
-  const action = editData ? t('general.save') : tAction('create', 'organizations.permission');
-
-  const submit = handleSubmit(
-    trySubmitSafe(async (json) => {
-      await (editData
-        ? api.patch(`${organizationScopesPath}/${editData.id}`, {
-            json,
-          })
-        : api.post(organizationScopesPath, {
-            json,
-          }));
-      onClose();
-    })
-  );
-
-  // Reset form on open
-  useEffect(() => {
-    if (isOpen) {
-      reset(editData ?? {});
-    }
-  }, [editData, isOpen, reset]);
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      className={modalStyles.content}
-      overlayClassName={modalStyles.overlay}
-      onRequestClose={onClose}
-    >
-      <ModalLayout
-        title={<DangerousRaw>{title}</DangerousRaw>}
-        footer={
-          <Button
-            type="primary"
-            title={<DangerousRaw>{action}</DangerousRaw>}
-            isLoading={isSubmitting}
-            onClick={submit}
-          />
-        }
-        onClose={onClose}
-      >
-        <form>
-          <FormField isRequired title="general.name">
-            <TextInput
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
-              placeholder="read:appointment"
-              error={Boolean(errors.name)}
-              disabled={Boolean(editData)}
-              {...register('name', { required: true })}
-            />
-          </FormField>
-          <FormField title="general.description">
-            <TextInput
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={Boolean(editData)}
-              placeholder={t('organizations.create_permission_placeholder')}
-              error={Boolean(errors.description)}
-              {...register('description')}
-            />
-          </FormField>
-        </form>
-      </ModalLayout>
-    </ReactModal>
-  );
-}
-export default PermissionModal;

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

@@ -1,121 +0,0 @@
-import { type OrganizationScope } from '@logto/schemas';
-import { type Nullable } from '@silverhand/essentials';
-import { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import useSWR, { useSWRConfig } from 'swr';
-
-import ActionsButton from '@/components/ActionsButton';
-import Breakable from '@/components/Breakable';
-import FormCard from '@/components/FormCard';
-import TemplateTable, { pageSize } from '@/components/TemplateTable';
-import Tag from '@/ds-components/Tag';
-import useApi, { type RequestError } from '@/hooks/use-api';
-import { buildUrl } from '@/utils/url';
-
-import PermissionModal from '../PermissionModal';
-import { swrKey } from '../RolesCard';
-
-/**
- * Renders the permissions card that allows users to add, edit, and delete organization
- * permissions.
- */
-function PermissionsCard() {
-  const [page, setPage] = useState(1);
-  const {
-    data: response,
-    error,
-    mutate: mutatePermissions,
-  } = useSWR<[OrganizationScope[], number], RequestError>(
-    buildUrl('api/organization-scopes', {
-      page: String(page),
-      page_size: String(pageSize),
-    })
-  );
-  const { mutate: globalMutate } = useSWRConfig();
-  const [data, totalCount] = response ?? [[], 0];
-  const api = useApi();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const [editData, setEditData] = useState<Nullable<OrganizationScope>>(null);
-  const mutate = useCallback(() => {
-    void mutatePermissions();
-    // Mutate roles field to update the permissions list
-    void globalMutate((key) => typeof key === 'string' && key.startsWith(swrKey));
-  }, [mutatePermissions, globalMutate]);
-
-  const isLoading = !response && !error;
-
-  return (
-    <FormCard
-      title="organizations.organization_permission_other"
-      description="organizations.organization_permission_description"
-    >
-      <PermissionModal
-        isOpen={isModalOpen}
-        editData={editData}
-        onClose={() => {
-          setIsModalOpen(false);
-          mutate();
-        }}
-      />
-      <TemplateTable
-        name="organizations.organization_permission"
-        rowIndexKey="id"
-        isLoading={isLoading}
-        rowGroups={[
-          {
-            key: 'data',
-            data,
-          },
-        ]}
-        columns={[
-          {
-            title: t('general.name'),
-            dataIndex: 'name',
-            colSpan: 4,
-            render: ({ name }) => (
-              <Tag variant="cell">
-                <Breakable>{name}</Breakable>
-              </Tag>
-            ),
-          },
-          {
-            title: t('general.description'),
-            dataIndex: 'description',
-            colSpan: 6,
-            render: ({ description }) => <Breakable>{description ?? '-'}</Breakable>,
-          },
-          {
-            title: null,
-            dataIndex: 'delete',
-            render: (data) => (
-              <ActionsButton
-                fieldName="organizations.permission"
-                deleteConfirmation="organizations.organization_permission_delete_confirm"
-                onEdit={() => {
-                  setEditData(data);
-                  setIsModalOpen(true);
-                }}
-                onDelete={async () => {
-                  await api.delete(`api/organization-scopes/${data.id}`);
-                  mutate();
-                }}
-              />
-            ),
-          },
-        ]}
-        pagination={{
-          page,
-          totalCount,
-          onChange: setPage,
-        }}
-        onAdd={() => {
-          setEditData(null);
-          setIsModalOpen(true);
-        }}
-      />
-    </FormCard>
-  );
-}
-
-export default PermissionsCard;

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

@@ -1,137 +0,0 @@
-import { type OrganizationRole, type OrganizationRoleWithScopes } from '@logto/schemas';
-import { type Nullable } from '@silverhand/essentials';
-import { useEffect, useState } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import ReactModal from 'react-modal';
-
-import OrganizationScopesSelect from '@/components/OrganizationScopesSelect';
-import Button from '@/ds-components/Button';
-import DangerousRaw from '@/ds-components/DangerousRaw';
-import FormField from '@/ds-components/FormField';
-import ModalLayout from '@/ds-components/ModalLayout';
-import { type Option } from '@/ds-components/Select/MultiSelect';
-import TextInput from '@/ds-components/TextInput';
-import useActionTranslation from '@/hooks/use-action-translation';
-import useApi from '@/hooks/use-api';
-import * as modalStyles from '@/scss/modal.module.scss';
-import { trySubmitSafe } from '@/utils/form';
-
-export const organizationRolePath = 'api/organization-roles';
-
-type Props = {
-  readonly isOpen: boolean;
-  readonly editData: Nullable<OrganizationRoleWithScopes>;
-  readonly onClose: () => void;
-};
-
-/** A modal that allows users to create or edit an organization role. */
-function RoleModal({ isOpen, editData, onClose }: Props) {
-  const api = useApi();
-  const {
-    reset,
-    register,
-    control,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<Partial<OrganizationRole> & { scopes: Array<Option<string>> }>({
-    defaultValues: { scopes: [] },
-  });
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const tAction = useActionTranslation();
-  const title = editData
-    ? tAction('edit', 'organizations.organization_role')
-    : tAction('create', 'organizations.organization_role');
-  const action = editData ? t('general.save') : tAction('create', 'organizations.role');
-  const [keyword, setKeyword] = useState('');
-
-  const submit = handleSubmit(
-    trySubmitSafe(async ({ scopes, ...json }) => {
-      // Create or update rol e
-      const { id } = await (editData
-        ? api.patch(`${organizationRolePath}/${editData.id}`, {
-            json,
-          })
-        : api.post(organizationRolePath, {
-            json,
-          })
-      ).json<OrganizationRole>();
-
-      // Update scopes for role
-      await api.put(`${organizationRolePath}/${id}/scopes`, {
-        json: { organizationScopeIds: scopes.map(({ value }) => value) },
-      });
-      onClose();
-    })
-  );
-
-  // Reset form on open
-  useEffect(() => {
-    if (isOpen) {
-      reset(
-        editData
-          ? {
-              ...editData,
-              scopes: editData.scopes.map(({ id, name }) => ({ value: id, title: name })),
-            }
-          : { scopes: [] }
-      );
-      setKeyword('');
-    }
-  }, [editData, isOpen, reset]);
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      className={modalStyles.content}
-      overlayClassName={modalStyles.overlay}
-      onRequestClose={onClose}
-    >
-      <ModalLayout
-        title={<DangerousRaw>{title}</DangerousRaw>}
-        footer={
-          <Button
-            type="primary"
-            title={<DangerousRaw>{action}</DangerousRaw>}
-            isLoading={isSubmitting}
-            onClick={submit}
-          />
-        }
-        onClose={onClose}
-      >
-        <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={t('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 } }) => (
-              <OrganizationScopesSelect
-                keyword={keyword}
-                setKeyword={setKeyword}
-                value={value}
-                onChange={onChange}
-              />
-            )}
-          />
-        </FormField>
-      </ModalLayout>
-    </ReactModal>
-  );
-}
-
-export default RoleModal;

packages/console/src/pages/Organizations/RolesCard/index.module.scss

@@ -1,7 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.permissions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: _.unit(2);
-}

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

@@ -1,127 +0,0 @@
-import { type OrganizationRoleWithScopes } from '@logto/schemas';
-import { type Nullable } from '@silverhand/essentials';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import useSWR from 'swr';
-
-import ActionsButton from '@/components/ActionsButton';
-import Breakable from '@/components/Breakable';
-import FormCard from '@/components/FormCard';
-import { RoleOption } from '@/components/OrganizationRolesSelect';
-import TemplateTable, { pageSize } from '@/components/TemplateTable';
-import Tag from '@/ds-components/Tag';
-import useApi, { type RequestError } from '@/hooks/use-api';
-import { buildUrl } from '@/utils/url';
-
-import RoleModal from '../RoleModal';
-
-import * as styles from './index.module.scss';
-
-export const swrKey = 'api/organization-roles';
-
-/**
- * Renders the roles card that allows users to add, edit, and delete organization
- * roles.
- */
-function RolesCard() {
-  const [page, setPage] = useState(1);
-  const {
-    data: response,
-    error,
-    mutate,
-  } = useSWR<[OrganizationRoleWithScopes[], number], RequestError>(
-    buildUrl(swrKey, {
-      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 [editData, setEditData] = useState<Nullable<OrganizationRoleWithScopes>>(null);
-
-  const isLoading = !response && !error;
-
-  return (
-    <FormCard
-      title="organizations.organization_role_other"
-      description="organizations.organization_role_description"
-    >
-      <RoleModal
-        isOpen={isModalOpen}
-        editData={editData}
-        onClose={() => {
-          setIsModalOpen(false);
-          void mutate();
-        }}
-      />
-      <TemplateTable
-        name="organizations.organization_role"
-        rowIndexKey="id"
-        isLoading={isLoading}
-        rowGroups={[
-          {
-            key: 'data',
-            data,
-          },
-        ]}
-        columns={[
-          {
-            title: t('general.name'),
-            dataIndex: 'name',
-            colSpan: 4,
-            render: ({ name, id }) => <RoleOption size="large" value={id} title={name} />,
-          },
-          {
-            title: t('organizations.permission_other'),
-            dataIndex: 'permissions',
-            colSpan: 6,
-            render: ({ scopes }) =>
-              scopes.length === 0 ? (
-                '-'
-              ) : (
-                <div className={styles.permissions}>
-                  {scopes.map(({ id, name }) => (
-                    <Tag key={id} variant="cell">
-                      <Breakable>{name}</Breakable>
-                    </Tag>
-                  ))}
-                </div>
-              ),
-          },
-          {
-            title: null,
-            dataIndex: 'delete',
-            render: (data) => (
-              <ActionsButton
-                fieldName="organizations.role"
-                deleteConfirmation="organizations.organization_role_delete_confirm"
-                onEdit={() => {
-                  setEditData(data);
-                  setIsModalOpen(true);
-                }}
-                onDelete={async () => {
-                  await api.delete(`api/organization-roles/${data.id}`);
-                  void mutate();
-                }}
-              />
-            ),
-          },
-        ]}
-        pagination={{
-          page,
-          totalCount,
-          onChange: setPage,
-        }}
-        onAdd={() => {
-          setEditData(null);
-          setIsModalOpen(true);
-        }}
-      />
-    </FormCard>
-  );
-}
-
-export default RolesCard;

packages/console/src/pages/Organizations/Settings/index.module.scss

@@ -1,9 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.content {
-  padding: _.unit(4) 0;
-
-  > div + div {
-    margin-top: _.unit(4);
-  }
-}

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

@@ -1,13 +0,0 @@
-import PermissionsCard from '../PermissionsCard';
-import RolesCard from '../RolesCard';
-
-import * as styles from './index.module.scss';
-
-export default function Settings() {
-  return (
-    <div className={styles.content}>
-      <PermissionsCard />
-      <RolesCard />
-    </div>
-  );
-}

packages/console/src/pages/Organizations/consts.ts

@@ -1,2 +0,0 @@
-export const organizationsPathname = '/organizations';
-export const guidePathname = '/organization-guide';

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

@@ -1,20 +1,17 @@
 import { ReservedPlanId } from '@logto/schemas';
-import { cond, conditional, joinPath } from '@silverhand/essentials';
+import { cond } from '@silverhand/essentials';
 import { useCallback, useContext, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import Plus from '@/assets/icons/plus.svg';
 import PageMeta from '@/components/PageMeta';
 import { organizationsFeatureLink } from '@/consts';
-import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { isCloud } from '@/consts/env';
 import { subscriptionPage } from '@/consts/pages';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 import CardTitle from '@/ds-components/CardTitle';
-import TabNav, { TabNavItem } from '@/ds-components/TabNav';
-import useConfigs from '@/hooks/use-configs';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 import * as pageLayout from '@/scss/page-layout.module.scss';
@@ -22,41 +19,27 @@ import * as pageLayout from '@/scss/page-layout.module.scss';
 import CreateOrganizationModal from './CreateOrganizationModal';
 import OrganizationsTable from './OrganizationsTable';
 import EmptyDataPlaceholder from './OrganizationsTable/EmptyDataPlaceholder';
-import Settings from './Settings';
-import { guidePathname, organizationsPathname } from './consts';
 import * as styles from './index.module.scss';
 
-const tabs = Object.freeze({
-  template: 'template',
-});
+const organizationsPathname = '/organizations';
 
-type Props = {
-  readonly tab?: keyof typeof tabs;
-};
-
-function Organizations({ tab }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+function Organizations() {
   const { getDocumentationUrl } = useDocumentationUrl();
   const { currentPlan } = useContext(SubscriptionDataContext);
   const { isDevTenant } = useContext(TenantsContext);
 
   const { navigate } = useTenantPathname();
   const [isCreating, setIsCreating] = useState(false);
-  const { configs, isLoading: isLoadingConfigs } = useConfigs();
-  const isInitialSetup = !isLoadingConfigs && !configs?.organizationCreated;
+
   const isOrganizationsDisabled = isCloud && !currentPlan.quota.organizationsEnabled;
 
   const upgradePlan = useCallback(() => {
     navigate(subscriptionPage);
   }, [navigate]);
 
-  const handleCreate = useCallback(() => {
-    if (isInitialSetup && !isDevFeaturesEnabled) {
-      navigate(guidePathname);
-      return;
-    }
+  const handleCreate = () => {
     setIsCreating(true);
-  }, [isInitialSetup, navigate]);
+  };
 
   return (
     <div className={pageLayout.container}>
@@ -81,7 +64,7 @@ function Organizations({ tab }: Props) {
             targetBlank: 'noopener',
           }}
         />
-        {(!isInitialSetup || isDevFeaturesEnabled) && (
+        {!isOrganizationsDisabled && (
           <Button
             icon={<Plus />}
             type="primary"
@@ -91,37 +74,7 @@ function Organizations({ tab }: Props) {
           />
         )}
       </div>
-      {isInitialSetup && !isDevFeaturesEnabled && (
-        <Card className={styles.emptyCardContainer}>
-          <EmptyDataPlaceholder
-            buttonProps={{
-              title: isOrganizationsDisabled
-                ? 'upsell.upgrade_plan'
-                : 'organizations.setup_organization',
-              onClick: isOrganizationsDisabled ? upgradePlan : handleCreate,
-              ...conditional(isOrganizationsDisabled && { icon: undefined }),
-            }}
-          />
-        </Card>
-      )}
-      {!isInitialSetup && !isDevFeaturesEnabled && (
-        <>
-          <TabNav className={styles.tabs}>
-            <TabNavItem href="/organizations" isActive={!tab}>
-              {t('organizations.title')}
-            </TabNavItem>
-            <TabNavItem
-              href={joinPath('/organizations', tabs.template)}
-              isActive={tab === 'template'}
-            >
-              {t('organizations.organization_template')}
-            </TabNavItem>
-          </TabNav>
-          {!tab && <OrganizationsTable isLoading={isLoadingConfigs} onCreate={handleCreate} />}
-          {tab === 'template' && <Settings />}
-        </>
-      )}
-      {isDevFeaturesEnabled && isOrganizationsDisabled && (
+      {isOrganizationsDisabled && (
         <Card className={styles.emptyCardContainer}>
           <EmptyDataPlaceholder
             buttonProps={{
@@ -133,9 +86,7 @@ function Organizations({ tab }: Props) {
           />
         </Card>
       )}
-      {isDevFeaturesEnabled && !isOrganizationsDisabled && (
-        <OrganizationsTable isLoading={isLoadingConfigs} onCreate={handleCreate} />
-      )}
+      {!isOrganizationsDisabled && <OrganizationsTable onCreate={handleCreate} />}
     </div>
   );
 }

packages/experience/src/pages/Consent/OrganizationSelector/index.tsx

@@ -4,7 +4,6 @@ import { useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ExpandableIcon from '@/assets/icons/expandable-icon.svg';
-import { isDevFeaturesEnabled } from '@/constants/env';
 
 import ScopeGroup from '../ScopeGroup';
 
@@ -35,22 +34,11 @@ const OrganizationSelector = ({
     return null;
   }
 
-  // Todo @xiaoyijun remove dev flag
-  const { missingResourceScopes: resourceScopes } = isDevFeaturesEnabled
-    ? selectedOrganization
-    : {
-        missingResourceScopes: [],
-      };
+  const { missingResourceScopes: resourceScopes } = selectedOrganization;
 
   return (
     <div className={className}>
-      <div className={styles.title}>
-        {t(
-          `description.${
-            isDevFeaturesEnabled ? 'authorize_organization_access' : 'grant_organization_access'
-          }`
-        )}
-      </div>
+      <div className={styles.title}>{t(`description.authorize_organization_access`)}</div>
       {resourceScopes && resourceScopes.length > 0 && (
         <div className={styles.scopeListWrapper}>
           {resourceScopes
@@ -80,10 +68,7 @@ const OrganizationSelector = ({
         ref={parentElementRef}
         className={classNames(
           styles.cardWrapper,
-          isDevFeaturesEnabled && // Todo @xiaoyijun remove dev feature flag
-            resourceScopes &&
-            resourceScopes.length > 0 &&
-            styles.withoutTopRadius
+          Boolean(resourceScopes?.length) && styles.withoutTopRadius
         )}
         data-active={showDropdown}
       >

packages/experience/src/pages/Consent/ScopesListCard/index.tsx

@@ -1,10 +1,7 @@
-import { ReservedResource, UserScope } from '@logto/core-kit';
+import { UserScope } from '@logto/core-kit';
 import { type ConsentInfoResponse } from '@logto/schemas';
 import { useMemo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-
-import TermsLinks from '@/components/TermsLinks';
-import { isDevFeaturesEnabled } from '@/constants/env';
+import { useTranslation } from 'react-i18next';
 
 import ScopeGroup from '../ScopeGroup';
 
@@ -18,18 +15,9 @@ type Props = {
   readonly resourceScopes: ConsentInfoResponse['missingResourceScopes'];
   readonly appName: string;
   readonly className?: string;
-  readonly termsUrl?: string;
-  readonly privacyUrl?: string;
 };
 
-const ScopesListCard = ({
-  userScopes,
-  resourceScopes,
-  appName,
-  termsUrl,
-  privacyUrl,
-  className,
-}: Props) => {
+const ScopesListCard = ({ userScopes, resourceScopes, appName, className }: Props) => {
   const { t } = useTranslation();
 
   const userScopesData = useMemo(
@@ -45,34 +33,15 @@ const ScopesListCard = ({
     [t, userScopes]
   );
 
-  // Todo @xiaoyijun remove dev feature flag and authorization agreement from this component
-  const showTerms = !isDevFeaturesEnabled && Boolean(termsUrl ?? privacyUrl);
-
   // If there is no user scopes and resource scopes, we don't need to show the scopes list.
-  // This is a fallback for the corner case that all the scopes are already granted.
   if (!userScopesData?.length && !resourceScopes?.length) {
-    return showTerms ? (
-      <div className={className}>
-        <Trans
-          components={{
-            link: <TermsLinks inline termsOfUseUrl={termsUrl} privacyPolicyUrl={privacyUrl} />,
-          }}
-        >
-          {t('description.authorize_agreement', { name: appName })}
-        </Trans>
-      </div>
-    ) : null;
+    return null;
   }
 
   return (
     <div className={className}>
       <div className={styles.title}>
-        {t(
-          `description.${
-            isDevFeaturesEnabled ? 'authorize_personal_data_usage' : 'request_permission'
-          }`,
-          { name: appName }
-        )}
+        {t(`description.authorize_personal_data_usage`, { name: appName })}
       </div>
       <div className={styles.cardWrapper}>
         {userScopesData && userScopesData.length > 0 && (
@@ -86,31 +55,12 @@ const ScopesListCard = ({
         {resourceScopes?.map(({ resource, scopes }) => (
           <ScopeGroup
             key={resource.id}
-            groupName={
-              // Todo @xiaoyijun remove this when the org scopes display in the new card
-              resource.id === ReservedResource.Organization
-                ? t('description.organization_scopes')
-                : resource.name
-            }
+            groupName={resource.name}
             scopes={scopes}
             // If there is no user scopes, we should auto expand the resource scopes
             isAutoExpand={!userScopesData?.length && resourceScopes.length === 1}
           />
         ))}
-        {!isDevFeaturesEnabled && // Todo @xiaoyijun remove dev feature flag
-          showTerms && (
-            <div className={styles.terms}>
-              <Trans
-                components={{
-                  link: (
-                    <TermsLinks inline termsOfUseUrl={termsUrl} privacyPolicyUrl={privacyUrl} />
-                  ),
-                }}
-              >
-                {t('description.authorize_agreement', { name: appName })}
-              </Trans>
-            </div>
-          )}
       </div>
     </div>
   );

packages/experience/src/pages/Consent/index.tsx

@@ -8,7 +8,6 @@ import { consent, getConsentInfo } from '@/apis/consent';
 import Button from '@/components/Button';
 import TermsLinks from '@/components/TermsLinks';
 import TextLink from '@/components/TextLink';
-import { isDevFeaturesEnabled } from '@/constants/env';
 import useApi from '@/hooks/use-api';
 import useErrorHandler from '@/hooks/use-error-handler';
 
@@ -89,15 +88,12 @@ const Consent = () => {
         userScopes={consentData.missingOIDCScope}
         /**
          * The org resources is included in the user scopes for compatibility.
-         * Todo @xiaoyijun remove dev feature flag.
          */
         resourceScopes={consentData.missingResourceScopes?.filter(
-          ({ resource }) => !isDevFeaturesEnabled || resource.id !== ReservedResource.Organization
+          ({ resource }) => resource.id !== ReservedResource.Organization
         )}
         appName={applicationName}
         className={styles.scopesCard}
-        termsUrl={consentData.application.termsOfUseUrl ?? undefined}
-        privacyUrl={consentData.application.privacyPolicyUrl ?? undefined}
       />
       {consentData.organizations && (
         <OrganizationSelector
@@ -117,12 +113,12 @@ const Consent = () => {
         />
         <Button title="action.authorize" onClick={consentHandler} />
       </div>
-      {(!isDevFeaturesEnabled || !showTerms) && (
+      {!showTerms && (
         <div className={styles.redirectUri}>
           {t('description.redirect_to', { name: getRedirectUriOrigin(consentData.redirectUri) })}
         </div>
       )}
-      {isDevFeaturesEnabled && showTerms && (
+      {showTerms && (
         <div className={styles.terms}>
           <Trans
             components={{
@@ -142,7 +138,6 @@ const Consent = () => {
           </Trans>
         </div>
       )}
-
       <div className={styles.footerLink}>
         {t('description.not_you')}{' '}
         <TextLink replace to="/sign-in" text="action.use_another_account" />

packages/phrases/src/locales/de/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Eine kurze Beschreibung der Organisation',
   organization_permission: 'Organisationsberechtigung',
   organization_permission_other: 'Organisationsberechtigungen',
-  organization_permission_description:
-    'Eine Organisationsberechtigung bezieht sich auf die Autorisierung zum Zugriff auf eine Ressource im Kontext der Organisation. Eine Organisationsberechtigung sollte als aussagekräftiger String repräsentiert werden, der auch als Name und eindeutiger Bezeichner dient.',
-  organization_permission_delete_confirm:
-    'Wenn diese Berechtigung gelöscht wird, verlieren alle Organisationsrollen, einschließlich dieser Berechtigung, diese Berechtigung. Benutzer, die diese Berechtigung hatten, verlieren den Zugriff, der durch sie gewährt wurde.',
   create_permission_placeholder: 'Terminkalenderverlauf lesen',
-  permission: 'Berechtigung',
-  permission_other: 'Berechtigungen',
   organization_role: 'Organisationsrolle',
   organization_role_other: 'Organisationsrollen',
   organization_role_description:
     'Eine Organisationsrolle ist eine Gruppierung von Berechtigungen, die Benutzern zugewiesen werden können. Die Berechtigungen müssen aus den vordefinierten Organisationsberechtigungen stammen.',
-  organization_role_delete_confirm:
-    'Dadurch werden die mit dieser Rolle verbundenen Berechtigungen von den betroffenen Benutzern entfernt und die Beziehungen zwischen Organisationsrollen, Mitgliedern in der Organisation und Organisationsberechtigungen gelöscht.',
   role: 'Rolle',
-  create_role_placeholder: 'Benutzer mit nur Lesezugriff',
   search_placeholder: 'Nach Organisation suchen',
-  search_permission_placeholder: 'Geben Sie zum Suchen und Auswählen von Berechtigungen ein',
   search_role_placeholder: 'Geben Sie zum Suchen und Auswählen von Rollen ein',
   empty_placeholder: '🤔 Sie haben noch keine {{entity}} eingerichtet.',
   organization_and_member: 'Organisation und Mitglied',
@@ -70,21 +60,8 @@ const organizations = {
           'Nehmen wir ein Beispiel. John, Sarah sind in verschiedenen Organisationen mit unterschiedlichen Rollen im Kontext verschiedener Organisationen. Fahren Sie mit der Maus über die verschiedenen Module und sehen Sie, was passiert.',
       },
     },
-    step_1: 'Schritt 1: Organisationsberechtigungen definieren',
-    step_2: 'Schritt 2: Organisationsrollen definieren',
-    step_3: 'Schritt 3: Erstellen Sie Ihre erste Organisation',
-    step_3_description:
-      'Erstellen Sie Ihre erste Organisation. Sie erhält eine eindeutige ID und dient als Container für die Bearbeitung verschiedener geschäftsbezogener Identitäten.',
-    more_next_steps: 'Weitere Schritte',
-    add_members: 'Fügen Sie Mitglieder zu Ihrer Organisation hinzu',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Organisationsberechtigungen',
-    permission_name: 'Berechtigungsname',
-    permissions: 'Berechtigungen',
     organization_roles: 'Organisationsrollen',
-    role_name: 'Rollenname',
-    organization_name: 'Organisationsname',
     admin: 'Admin',
     member: 'Mitglied',
     guest: 'Gast',

packages/phrases/src/locales/en/translation/admin-console/organizations.ts

@@ -16,23 +16,13 @@ const organizations = {
   organization_description_placeholder: 'A brief description of the organization',
   organization_permission: 'Organization permission',
   organization_permission_other: 'Organization permissions',
-  organization_permission_description:
-    'Organization permission refers to the authorization to access a resource in the context of organization. An organization permission should be represented as a meaningful string, also serving as the name and unique identifier.',
-  organization_permission_delete_confirm:
-    'If this permission is deleted, all organization roles including this permission will lose this permission, and users who had this permission will lose the access granted by it.',
   create_permission_placeholder: 'Read appointment history',
-  permission: 'Permission',
-  permission_other: 'Permissions',
   organization_role: 'Organization role',
   organization_role_other: 'Organization roles',
   organization_role_description:
     'Organization role is a grouping of permissions that can be assigned to users. The permissions must come from the predefined organization permissions.',
-  organization_role_delete_confirm:
-    'Doing so will remove the permissions associated with this role from the affected users and delete the relations among organization roles, members in the organization, and organization permissions.',
   role: 'Role',
-  create_role_placeholder: 'Users with view-only permissions',
   search_placeholder: 'Search by organization name or ID',
-  search_permission_placeholder: 'Type to search and select permissions',
   search_role_placeholder: 'Type to search and select roles',
   empty_placeholder: '🤔 You don’t have any {{entity}} set up yet.',
   organization_and_member: 'Organization and member',
@@ -68,20 +58,8 @@ const organizations = {
           "Let's take an example. John, Sarah are in different organizations with different roles in the context of different organizations. Hover over the different modules and see what happens.",
       },
     },
-    step_1: 'Step 1: Define organization permissions',
-    step_2: 'Step 2: Define organization roles',
-    step_3: 'Step 3: Create your first organization',
-    step_3_description:
-      "Let's create your first organization. It comes with a unique ID and serves as a container for handling various more business-toward identities.",
-    more_next_steps: 'More next steps',
-    add_members: 'Add members to your organization',
-    config_organization: 'Configure organization',
     organization_permissions: 'Organization permissions',
-    permission_name: 'Permission name',
-    permissions: 'Permissions',
     organization_roles: 'Organization roles',
-    role_name: 'Role name',
-    organization_name: 'Organization name',
     admin: 'Admin',
     member: 'Member',
     guest: 'Guest',

packages/phrases/src/locales/es/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Una breve descripción de la organización',
   organization_permission: 'Permiso de la organización',
   organization_permission_other: 'Permisos de la organización',
-  organization_permission_description:
-    'El permiso de la organización se refiere a la autorización para acceder a un recurso en el contexto de la organización. Un permiso de organización debe representarse como una cadena significativa, que también sirve como el nombre y el identificador único.',
-  organization_permission_delete_confirm:
-    'Si se elimina este permiso, todos los roles de la organización, incluido este permiso, perderán este permiso, y los usuarios que tenían este permiso perderán el acceso otorgado por él.',
   create_permission_placeholder: 'Leer historial de citas',
-  permission: 'Permiso',
-  permission_other: 'Permisos',
   organization_role: 'Rol de la organización',
   organization_role_other: 'Roles de la organización',
   organization_role_description:
     'El rol de la organización es un agrupamiento de permisos que se pueden asignar a los usuarios. Los permisos deben provenir de los permisos de organización predefinidos.',
-  organization_role_delete_confirm:
-    'Hacer esto eliminará los permisos asociados con este rol de los usuarios afectados y eliminará las relaciones entre roles de organización, miembros de la organización y permisos de organización.',
   role: 'Rol',
-  create_role_placeholder: 'Usuarios con permisos de solo lectura',
   search_placeholder: 'Buscar por nombre de organización o ID',
-  search_permission_placeholder: 'Escribe para buscar y seleccionar permisos',
   search_role_placeholder: 'Escribe para buscar y seleccionar roles',
   empty_placeholder: '🤔 No has configurado ningún {{entity}} todavía.',
   organization_and_member: 'Organización y miembro',
@@ -71,21 +61,8 @@ const organizations = {
           'Tomemos un ejemplo. John y Sarah están en diferentes organizaciones con diferentes roles en el contexto de diferentes organizaciones. Desplácese sobre los diferentes módulos y vea qué sucede.',
       },
     },
-    step_1: 'Paso 1: Definir permisos de organización',
-    step_2: 'Paso 2: Definir roles de organización',
-    step_3: 'Paso 3: Cree su primera organización',
-    step_3_description:
-      'Creemos su primera organización. Viene con un ID único y sirve como contenedor para manejar varias identidades dirigidas hacia empresas.',
-    more_next_steps: 'Más pasos siguientes',
-    add_members: 'Agregar miembros a su organización',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Permisos de la organización',
-    permission_name: 'Nombre del permiso',
-    permissions: 'Permisos',
     organization_roles: 'Roles de la organización',
-    role_name: 'Nombre del rol',
-    organization_name: 'Nombre de la organización',
     admin: 'Admin',
     member: 'Miembro',
     guest: 'Invitado',

packages/phrases/src/locales/fr/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: "Une brève description de l'organisation",
   organization_permission: "Autorisation de l'organisation",
   organization_permission_other: "Autorisations de l'organisation",
-  organization_permission_description:
-    "L'autorisation d'organisation se réfère à l'autorisation d'accéder à une ressource dans le contexte de l'organisation. Une autorisation d'organisation doit être représentée par une chaîne significative, servant également de nom et d'identifiant unique.",
-  organization_permission_delete_confirm:
-    "Si cette autorisation est supprimée, tous les rôles d'organisation incluant cette autorisation perdront cette autorisation, et les utilisateurs ayant cette autorisation perdront l'accès qui en découle.",
   create_permission_placeholder: "Lire l'historique des rendez-vous",
-  permission: 'Autorisation',
-  permission_other: 'Autorisations',
   organization_role: "Rôle de l'organisation",
   organization_role_other: "Rôles de l'organisation",
   organization_role_description:
     "Le rôle d'organisation est un regroupement d'autorisations pouvant être attribuées aux utilisateurs. Les autorisations doivent provenir des autorisations d'organisation prédéfinies.",
-  organization_role_delete_confirm:
-    "Si cette autorisation est supprimée, tous les rôles d'organisation incluant cette autorisation perdront cette autorisation, et les utilisateurs ayant cette autorisation perdront l'accès qui en découle.",
   role: 'Rôle',
-  create_role_placeholder: 'Utilisateurs avec des autorisations en lecture seule',
   search_placeholder: "Rechercher par nom ou ID de l'organisation",
-  search_permission_placeholder: 'Tapez pour rechercher et sélectionner des autorisations',
   search_role_placeholder: 'Tapez pour rechercher et sélectionner des rôles',
   empty_placeholder: "🤔 Vous n'avez pas encore configuré {{entity}}.",
   organization_and_member: 'Organisation et membre',
@@ -71,21 +61,8 @@ const organizations = {
           'Prenons un exemple : John, Sarah appartiennent à différentes organisations avec des rôles différents dans le contexte de différentes organisations. Passez la souris sur les différents modules et voyez ce qui se passe.',
       },
     },
-    step_1: "Étape 1 : Définir les autorisations d'organisation",
-    step_2: "Étape 2 : Définir les rôles d'organisation",
-    step_3: 'Étape 3 : Créer votre première organisation',
-    step_3_description:
-      'Créez votre première organisation. Elle possède un identifiant unique et sert de conteneur pour gérer diverses identités orientées vers les entreprises.',
-    more_next_steps: 'Autres étapes suivantes',
-    add_members: 'Ajouter des membres à votre organisation',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: "Autorisations de l'organisation",
-    permission_name: "Nom de l'autorisation",
-    permissions: 'Autorisations',
     organization_roles: "Rôles de l'organisation",
-    role_name: 'Nom du rôle',
-    organization_name: "Nom de l'organisation",
     admin: 'Admin',
     member: 'Membre',
     guest: 'Invité',

packages/phrases/src/locales/it/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: "Una breve descrizione dell'organizzazione",
   organization_permission: 'Permessi organizzazione',
   organization_permission_other: 'Permessi organizzazione',
-  organization_permission_description:
-    "Il permesso organizzativo si riferisce all'autorizzazione per accedere a una risorsa nel contesto dell'organizzazione. Un permesso organizzativo dovrebbe essere rappresentato come una stringa significativa, servendo anche come nome e identificatore univoco.",
-  organization_permission_delete_confirm:
-    "Se questo permesso viene eliminato, tutti i ruoli dell'organizzazione che includono questo permesso perderanno tale permesso, e gli utenti che avevano questo permesso perderanno l'accesso garantito da esso.",
   create_permission_placeholder: 'Leggi la cronologia degli appuntamenti',
-  permission: 'Permesso',
-  permission_other: 'Permessi',
   organization_role: 'Ruolo organizzazione',
   organization_role_other: 'Ruoli organizzazione',
   organization_role_description:
     'Il ruolo organizzativo è un raggruppamento di permessi che possono essere assegnati agli utenti. I permessi devono provenire dai permessi organizzativi predefiniti.',
-  organization_role_delete_confirm:
-    "Fare ciò rimuoverà i permessi associati a questo ruolo dagli utenti interessati ed eliminerà le relazioni tra i ruoli dell'organizzazione, i membri dell'organizzazione e i permessi dell'organizzazione.",
   role: 'Ruolo',
-  create_role_placeholder: 'Utenti con solo permessi di visualizzazione',
   search_placeholder: "Cerca per nome o ID dell'organizzazione",
-  search_permission_placeholder: 'Digita per cercare e selezionare i permessi',
   search_role_placeholder: 'Digita per cercare e selezionare i ruoli',
   empty_placeholder: '🤔 Non hai ancora impostato nessun {{entity}}.',
   organization_and_member: 'Organizzazione e membri',
@@ -71,21 +61,8 @@ const organizations = {
           'Prendiamo un esempio. John, Sarah sono in diverse organizzazioni con ruoli diversi nel contesto di organizzazioni diverse. Passa il mouse sui diversi moduli e guarda cosa succede.',
       },
     },
-    step_1: "Passo 1: Definire i permessi dell'organizzazione",
-    step_2: "Passo 2: Definire i ruoli dell'organizzazione",
-    step_3: 'Passo 3: Crea la tua prima organizzazione',
-    step_3_description:
-      'Creiamo la tua prima organizzazione. Ha un ID univoco e serve come contenitore per gestire varie entità più orientate al business.',
-    more_next_steps: 'Altri passaggi successivi',
-    add_members: 'Aggiungi membri alla tua organizzazione',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Permessi organizzazione',
-    permission_name: 'Nome del permesso',
-    permissions: 'Permessi',
     organization_roles: 'Ruoli organizzazione',
-    role_name: 'Nome del ruolo',
-    organization_name: "Nome dell'organizzazione",
     admin: 'Amministratore',
     member: 'Membro',
     guest: 'Ospite',

packages/phrases/src/locales/ja/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: '組織の簡単な説明',
   organization_permission: '組織権限',
   organization_permission_other: '組織権限',
-  organization_permission_description:
-    '組織権限とは、組織のコンテキストでリソースにアクセスするための承認を指します。組織権限は、意味のある文字列として表され、また名前および一意の識別子としても機能します。',
-  organization_permission_delete_confirm:
-    'この権限を削除すると、この権限を含むすべての組織ロールがこの権限を失い、この権限を持っていたユーザーはそのアクセスを失います。',
   create_permission_placeholder: '任命履歴を読む',
-  permission: '権限',
-  permission_other: '権限',
   organization_role: '組織役割',
   organization_role_other: '組織役割',
   organization_role_description:
     '組織役割は、ユーザーに割り当てることができる権限のグループ化です。権限は事前に定義された組織権限から取得する必要があります。',
-  organization_role_delete_confirm:
-    'これを行うと、影響を受けるユーザーからこの役割に関連する権限が削除され、組織ロール、組織のメンバー、および組織権限の関係が削除されます。',
   role: '役割',
-  create_role_placeholder: '閲覧のみの権限を持つユーザー',
   search_placeholder: '組織名またはIDで検索',
-  search_permission_placeholder: '検索して権限を選択',
   search_role_placeholder: '検索して役割を選択',
   empty_placeholder: '🤔 You don’t have any {{entity}} set up yet.',
   organization_and_member: '組織とメンバー',
@@ -70,21 +60,8 @@ const organizations = {
           '例として、John、Sarahは異なる組織に所属し、それぞれ異なる組織のコンテキストで異なる役割を担っています。異なるモジュールにカーソルを合わせて、それぞれの動作を確認しましょう。',
       },
     },
-    step_1: 'ステップ1：組織権限を定義する',
-    step_2: 'ステップ2：組織役割を定義する',
-    step_3: 'ステップ3：最初の組織を作成する',
-    step_3_description:
-      '最初の組織を作成しましょう。これにはユニークなIDが付いており、さまざまなビジネスに関連するエンティティを取り扱うコンテナとなります。',
-    more_next_steps: 'その他の次のステップ',
-    add_members: '組織にメンバーを追加',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: '組織権限',
-    permission_name: '権限名',
-    permissions: '権限',
     organization_roles: '組織役割',
-    role_name: '役割名',
-    organization_name: '組織名',
     admin: '管理者',
     member: 'メンバー',
     guest: 'ゲスト',

packages/phrases/src/locales/ko/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: '조직에 대한 간략한 설명',
   organization_permission: '조직 권한',
   organization_permission_other: '조직 권한',
-  organization_permission_description:
-    '조직 권한은 조직 컨텍스트에서 리소스에 액세스하기 위한 권한을 나타냅니다. 조직 권한은 의미 있는 문자열로 표현되어야 하며 이름 및 고유 식별자로도 작동해야 합니다.',
-  organization_permission_delete_confirm:
-    '이 권한이 삭제되면 이 권한을 포함하는 모든 조직 역할은 이 권한을 상실하고 이 권한이 부여한 액세스도 상실합니다.',
   create_permission_placeholder: '약속 내역 읽기',
-  permission: '권한',
-  permission_other: '권한',
   organization_role: '조직 역할',
   organization_role_other: '조직 역할',
   organization_role_description:
     '조직 역할은 사용자에 할당할 수 있는 권한의 그룹화입니다. 권한은 미리 정의된 조직 권한에서 가져와야 합니다.',
-  organization_role_delete_confirm:
-    '이렇게 하면 영향을 받는 사용자에서 이 역할과 관련된 권한이 제거되고 조직 역할, 조직 구성원 및 조직 권한 간의 관계가 삭제됩니다.',
   role: '역할',
-  create_role_placeholder: '보기 전용 권한을 가진 사용자',
   search_placeholder: '조직 이름 또는 ID로 검색',
-  search_permission_placeholder: '검색하여 권한 선택',
   search_role_placeholder: '검색하여 역할 선택',
   empty_placeholder: '🤔 You don’t have any {{entity}} set up yet.',
   organization_and_member: '조직 및 구성원',
@@ -69,21 +59,8 @@ const organizations = {
           '예를 들어 존과 사라가 서로 다른 조직에서 서로 다른 역할을 가진 채로 있습니다. 각 모듈 위로 마우스를 올려보세요.',
       },
     },
-    step_1: '단계 1: 조직 권한 정의',
-    step_2: '단계 2: 조직 역할 정의',
-    step_3: '단계 3: 첫 번째 조직 생성하기',
-    step_3_description:
-      '첫 번째 조직을 만들어보세요. 고유 ID가 포함되어 다양한 비즈니스 관련 식별자를 처리하는 컨테이너 역할을 합니다.',
-    more_next_steps: '추가 다음 단계',
-    add_members: '조직에 구성원 추가',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: '조직 권한',
-    permission_name: '권한 이름',
-    permissions: '권한',
     organization_roles: '조직 역할',
-    role_name: '역할 이름',
-    organization_name: '조직 이름',
     admin: '관리자',
     member: '구성원',
     guest: '손님',

packages/phrases/src/locales/pl-pl/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Krótki opis organizacji',
   organization_permission: 'Uprawnienie organizacji',
   organization_permission_other: 'Uprawnienia organizacji',
-  organization_permission_description:
-    'Uprawnienie organizacji odnosi się do autoryzacji dostępu do zasobu w kontekście organizacji. Uprawnienie organizacji powinno być reprezentowane jako znaczący ciąg znaków, stanowiący także nazwę i unikalny identyfikator.',
-  organization_permission_delete_confirm:
-    'Jeśli to uprawnienie zostanie usunięte, wszystkie role organizacji, w tym to uprawnienie, stracą to uprawnienie, a użytkownicy, którzy mieli to uprawnienie, stracą dostęp do niego.',
   create_permission_placeholder: 'Odczyt historii spotkań',
-  permission: 'Uprawnienie',
-  permission_other: 'Uprawnienia',
   organization_role: 'Rola organizacji',
   organization_role_other: 'Role organizacji',
   organization_role_description:
     'Rola organizacji to grupowanie uprawnień, które można przypisać użytkownikom. Uprawnienia muszą pochodzić z wcześniej zdefiniowanych uprawnień organizacji.',
-  organization_role_delete_confirm:
-    'Spowoduje to usunięcie uprawnień związanych z tą rolą od dotkniętych użytkowników oraz usunięcie relacji między rolami organizacji, członkami organizacji i uprawnieniami organizacji.',
   role: 'Rola',
-  create_role_placeholder: 'Użytkownicy z uprawnieniami tylko do odczytu',
   search_placeholder: 'Wyszukaj według nazwy lub ID organizacji',
-  search_permission_placeholder: 'Wpisz, aby wyszukać i wybrać uprawnienia',
   search_role_placeholder: 'Wpisz, aby wyszukać i wybrać role',
   empty_placeholder: '🤔 Nie masz jeszcze ustawionego żadnego {{entity}}.',
   organization_and_member: 'Organizacja i członek',
@@ -71,21 +61,8 @@ const organizations = {
           'Przyjmijmy przykład. John, Sarah należą do różnych organizacji z różnymi rolami w kontekście różnych organizacji. Najedź kursorem na różne moduły i zobacz co się stanie.',
       },
     },
-    step_1: 'Krok 1: Zdefiniuj uprawnienia organizacji',
-    step_2: 'Krok 2: Zdefiniuj role organizacji',
-    step_3: 'Krok 3: Utwórz swoją pierwszą organizację',
-    step_3_description:
-      'Utwórz swoją pierwszą organizację. Posiada ona unikalny identyfikator i służy jako kontener do obsługi różnych identyfikacji skierowanych na biznes.',
-    more_next_steps: 'Więcej następnych kroków',
-    add_members: 'Dodaj członków do swojej organizacji',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Uprawnienia organizacji',
-    permission_name: 'Nazwa uprawnienia',
-    permissions: 'Uprawnienia',
     organization_roles: 'Role organizacji',
-    role_name: 'Nazwa roli',
-    organization_name: 'Nazwa organizacji',
     admin: 'Administrator',
     member: 'Członek',
     guest: 'Gość',

packages/phrases/src/locales/pt-br/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Uma breve descrição da organização',
   organization_permission: 'Permissão da organização',
   organization_permission_other: 'Permissões da organização',
-  organization_permission_description:
-    'A permissão da organização se refere à autorização para acessar um recurso no contexto da organização. Uma permissão de organização deve ser representada como uma string significativa, servindo também como nome e identificador exclusivo.',
-  organization_permission_delete_confirm:
-    'Se esta permissão for excluída, todos os papéis de organização, incluindo esta permissão, perderão esta permissão, e os usuários que tinham esta permissão perderão o acesso concedido por ela.',
   create_permission_placeholder: 'Ler histórico de compromissos',
-  permission: 'Permissão',
-  permission_other: 'Permissões',
   organization_role: 'Papel da organização',
   organization_role_other: 'Papéis da organização',
   organization_role_description:
     'O papel da organização é um agrupamento de permissões que podem ser atribuídas aos usuários. As permissões devem vir das permissões de organização predefinidas.',
-  organization_role_delete_confirm:
-    'Fazê-lo removerá as permissões associadas a este papel dos usuários afetados e excluirá as relações entre os papéis da organização, os membros da organização e as permissões da organização.',
   role: 'Função',
-  create_role_placeholder: 'Usuários com permissões somente leitura',
   search_placeholder: 'Pesquisar por nome ou ID da organização',
-  search_permission_placeholder: 'Digite para pesquisar e selecionar permissões',
   search_role_placeholder: 'Digite para pesquisar e selecionar funções',
   empty_placeholder: '🤔 Você ainda não configurou nenhum {{entity}}.',
   organization_and_member: 'Organização e membro',
@@ -71,21 +61,8 @@ const organizations = {
           'Vamos dar um exemplo. John, Sarah estão em diferentes organizações com diferentes papéis no contexto de organizações diferentes. Passe o mouse sobre os diferentes módulos e veja o que acontece.',
       },
     },
-    step_1: 'Etapa 1: Definir permissões da organização',
-    step_2: 'Etapa 2: Definir papéis da organização',
-    step_3: 'Etapa 3: Criar sua primeira organização',
-    step_3_description:
-      'Vamos criar a sua primeira organização. Ela vem com um ID único e serve como um contêiner para lidar com várias identidades direcionadas aos negócios.',
-    more_next_steps: 'Próximas etapas',
-    add_members: 'Adicionar membros à sua organização',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Permissões da organização',
-    permission_name: 'Nome da permissão',
-    permissions: 'Permissões',
     organization_roles: 'Papéis da organização',
-    role_name: 'Nome do papel',
-    organization_name: 'Nome da organização',
     admin: 'Administrador',
     member: 'Membro',
     guest: 'Convidado',

packages/phrases/src/locales/pt-pt/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Uma breve descrição da organização',
   organization_permission: 'Permissão da organização',
   organization_permission_other: 'Permissões da organização',
-  organization_permission_description:
-    'A permissão da organização refere-se à autorização para aceder a um recurso no contexto da organização. Uma permissão da organização deve ser representada como uma string significativa, servindo também como nome e identificador único.',
-  organization_permission_delete_confirm:
-    'Se esta permissão for eliminada, todas as funções da organização que incluam esta permissão perderão esta permissão, e os utilizadores que tinham esta permissão perderão o acesso concedido por ela.',
   create_permission_placeholder: 'Ler histórico de compromissos',
-  permission: 'Permissão',
-  permission_other: 'Permissões',
   organization_role: 'Papel da organização',
   organization_role_other: 'Funções da organização',
   organization_role_description:
     'O papel da organização é um agrupamento de permissões que podem ser atribuídas a utilizadores. As permissões devem provir das permissões de organização predefinidas.',
-  organization_role_delete_confirm:
-    'Fazê-lo removerá as permissões associadas a este papel dos usuários afetados e excluirá as relações entre os papéis da organização, os membros da organização e as permissões da organização.',
   role: 'Função',
-  create_role_placeholder: 'Usuários com permissões somente leitura',
   search_placeholder: 'Pesquisar por nome ou ID da organização',
-  search_permission_placeholder: 'Digite para pesquisar e selecionar permissões',
   search_role_placeholder: 'Digite para pesquisar e selecionar funções',
   empty_placeholder: '🤔 Você ainda não configurou nenhum {{entity}}.',
   organization_and_member: 'Organização e membro',
@@ -71,21 +61,8 @@ const organizations = {
           'Vamos ver um exemplo. John, Sarah pertencem a diferentes organizações com funções diferentes no contexto das organizações diferentes. Passe o rato sobre os diferentes módulos e veja o que acontece.',
       },
     },
-    step_1: 'Passo 1: Definir as permissões da organização',
-    step_2: 'Passo 2: Definir as funções da organização',
-    step_3: 'Passo 3: Crie a sua primeira organização',
-    step_3_description:
-      'Vamos criar a sua primeira organização. Ela possui um ID único e serve como contentor para lidar com várias entidades empresariais adicionais.',
-    more_next_steps: 'Mais passos seguintes',
-    add_members: 'Adicionar membros à sua organização',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Permissões da organização',
-    permission_name: 'Nome da permissão',
-    permissions: 'Permissões',
     organization_roles: 'Funções da organização',
-    role_name: 'Nome da função',
-    organization_name: 'Nome da organização',
     admin: 'Administrador',
     member: 'Membro',
     guest: 'Convidado',

packages/phrases/src/locales/ru/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Краткое описание организации',
   organization_permission: 'Разрешение организации',
   organization_permission_other: 'Разрешения организации',
-  organization_permission_description:
-    'Разрешение организации относится к разрешению доступа к ресурсу в контексте организации. Разрешение организации должно быть представлено в виде осмысленной строки и также служить именем и уникальным идентификатором.',
-  organization_permission_delete_confirm:
-    'Если это разрешение будет удалено, все роли организации, включая это разрешение, потеряют это разрешение, и пользователи, у которых было это разрешение, потеряют предоставленный им доступ к нему.',
   create_permission_placeholder: 'Чтение истории назначений',
-  permission: 'Разрешение',
-  permission_other: 'Разрешения',
   organization_role: 'Роль организации',
   organization_role_other: 'Роли организации',
   organization_role_description:
     'Роль организации - это группировка разрешений, которые могут быть назначены пользователям. Разрешения должны быть взяты из предопределенных разрешений организации.',
-  organization_role_delete_confirm:
-    'При этом будут удалены разрешения, связанные с этой ролью, у затронутых пользователей, и будут удалены отношения между ролями организации, участниками в организации и разрешениями организации.',
   role: 'Роль',
-  create_role_placeholder: 'Пользователи с правами только для просмотра',
   search_placeholder: 'Поиск по названию организации или ID',
-  search_permission_placeholder: 'Начните вводить для поиска и выбора разрешений',
   search_role_placeholder: 'Начните вводить для поиска и выбора ролей',
   empty_placeholder: '🤔 У вас пока нет никаких {{entity}}.',
   organization_and_member: 'Организация и участник',
@@ -70,21 +60,8 @@ const organizations = {
           'Давайте рассмотрим пример. Джон и Сара находятся в разных организациях с разными ролями в контексте разных организаций. Наведите указатель на различные модули и посмотрите, что происходит.',
       },
     },
-    step_1: 'Шаг 1: Определите разрешения организаций',
-    step_2: 'Шаг 2: Определите роли организаций',
-    step_3: 'Шаг 3: Создайте свою первую организацию',
-    step_3_description:
-      'Давайте создадим вашу первую организацию. Она имеет уникальный идентификатор и служит контейнером для обработки различных бизнес-ориентированных идентификаторов.',
-    more_next_steps: 'Дополнительные следующие шаги',
-    add_members: 'Добавьте участников в вашу организацию',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Разрешения организации',
-    permission_name: 'Название разрешения',
-    permissions: 'Разрешения',
     organization_roles: 'Роли организации',
-    role_name: 'Название роли',
-    organization_name: 'Название организации',
     admin: 'Администратор',
     member: 'Участник',
     guest: 'Гость',

packages/phrases/src/locales/tr-tr/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: 'Kuruluşun kısa açıklaması',
   organization_permission: 'Kuruluş izni',
   organization_permission_other: 'Kuruluş izinleri',
-  organization_permission_description:
-    'Kuruluş izni, kuruluş bağlamında bir kaynağa erişim izni anlamına gelir. Bir kuruluş izni anlamlı bir dize olarak temsil edilmeli ve aynı zamanda adı ve benzersiz tanımlayıcısı olarak hizmet etmelidir.',
-  organization_permission_delete_confirm:
-    'Bu izin silinirse, bu izni içeren tüm kuruluş rolleri bu izni kaybedecek ve bu izne sahip olan kullanıcılar bu izinle sağlanan erişimi kaybedecek.',
   create_permission_placeholder: 'Randevu geçmişini oku',
-  permission: 'İzin',
-  permission_other: 'İzinler',
   organization_role: 'Kuruluş rolü',
   organization_role_other: 'Kuruluş rolleri',
   organization_role_description:
     'Kuruluş rolü, kullanıcılara atanabilen izinlerin bir gruplamasıdır. İzinler önceden tanımlanmış kuruluş izinlerinden gelmelidir.',
-  organization_role_delete_confirm:
-    'Bunu yapmak, etkilenen kullanıcılardan bu role ilişkilendirilmiş izinleri kaldıracak ve kuruluş rolleri arasındaki ilişkileri ve kuruluş izinleri arasındaki ilişkileri silecektir.',
   role: 'Rol',
-  create_role_placeholder: 'Yalnızca görünüm izinleri olan kullanıcılar',
   search_placeholder: 'Kuruluş adı veya kimliğine göre ara',
-  search_permission_placeholder: 'İzinleri arayın ve seçin',
   search_role_placeholder: 'Rolleri arayın ve seçin',
   empty_placeholder: '\uD83E\uDD14 Herhangi bir {{entity}} henüz ayarlanmamış.',
   organization_and_member: 'Kuruluş ve üye',
@@ -70,21 +60,8 @@ const organizations = {
           'Örnek alalım. John, Sarah farklı kuruluşlara farklı rollerle farklı kuruluş bağlamlarında bulunmaktadır. Farklı modüllerin üzerine gelerek neler olduğunu görebilirsiniz.',
       },
     },
-    step_1: 'Adım 1: Kuruluş izinlerini tanımlayın',
-    step_2: 'Adım 2: Kuruluş rollerini tanımlayın',
-    step_3: 'Adım 3: İlk kuruluşunuzu oluşturun',
-    step_3_description:
-      'İlk kuruluşunuzu oluşturma zamanı geldi. Bu kuruluş benzersiz bir kimliğe sahip olacak ve çeşitli işe yönelik kimlikleri işleme koymak için bir kap olarak hizmet verecektir.',
-    more_next_steps: 'Daha fazla adım',
-    add_members: 'Kuruluşunuza üyeler ekleyin',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: 'Kuruluş izinleri',
-    permission_name: 'İzin adı',
-    permissions: 'İzinler',
     organization_roles: 'Kuruluş rolleri',
-    role_name: 'Rol adı',
-    organization_name: 'Kuruluş adı',
     admin: 'Yönetici',
     member: 'Üye',
     guest: 'Misafir',

packages/phrases/src/locales/zh-cn/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: '组织的简要描述',
   organization_permission: '组织权限',
   organization_permission_other: '组织权限',
-  organization_permission_description:
-    '组织权限是指在组织上下文中访问资源的授权。组织权限应该用有意义的字符串表示，同时也作为名称和唯一标识。',
-  organization_permission_delete_confirm:
-    '如果删除此权限，所有包含此权限的组织角色将失去此权限以及授予此权限的用户的访问权限。',
   create_permission_placeholder: '读取预约历史',
-  permission: '权限',
-  permission_other: '权限',
   organization_role: '组织角色',
   organization_role_other: '组织角色',
   organization_role_description:
     '组织角色是可以分配给用户的权限组。这些权限必须来自预定义的组织权限。',
-  organization_role_delete_confirm:
-    '这样做将从受影响的用户那里删除与此角色相关的权限，并删除组织角色、组织成员和组织权限之间的关系。',
   role: '角色',
-  create_role_placeholder: '仅查看权限的用户',
   search_placeholder: '按组织名称或ID搜索',
-  search_permission_placeholder: '输入以搜索和选择权限',
   search_role_placeholder: '输入以搜索和选择角色',
   empty_placeholder: '🤔 你还没有设置任何{{entity}}。',
   organization_and_member: '组织和成员',
@@ -67,21 +57,8 @@ const organizations = {
           '让我们举个例子。约翰、莎拉位于不同的组织中，其在不同组织上下文中拥有不同的角色。将鼠标悬停在不同模块上，看看会发生什么。',
       },
     },
-    step_1: '步骤1：定义组织权限',
-    step_2: '步骤2：定义组织角色',
-    step_3: '步骤3：创建您的第一个组织',
-    step_3_description:
-      '让我们创建您的第一个组织。它具有唯一的ID，并且可以作为处理各种业务向身份的容器。',
-    more_next_steps: '更多下一步',
-    add_members: '向您的组织添加成员',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: '组织权限',
-    permission_name: '权限名',
-    permissions: '权限',
     organization_roles: '组织角色',
-    role_name: '角色名',
-    organization_name: '组织名称',
     admin: '管理员',
     member: '成员',
     guest: '访客',

packages/phrases/src/locales/zh-hk/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: '組織的簡要描述',
   organization_permission: '組織權限',
   organization_permission_other: '組織權限',
-  organization_permission_description:
-    '組織權限指授權在組織上下文中存取資源的許可。組織權限應該以有意義的字串形式表示，同時作為名稱和唯一標識。',
-  organization_permission_delete_confirm:
-    '如果刪除此權限，所有包含此權限的組織角色都將失去此權限，具有此權限的用戶將失去其授予的訪問權限。',
   create_permission_placeholder: '讀取預約歷史',
-  permission: '權限',
-  permission_other: '權限',
   organization_role: '組織角色',
   organization_role_other: '組織角色',
   organization_role_description:
     '組織角色是可以分配給用戶的權限的分組。權限必須來自預定義的組織權限。',
-  organization_role_delete_confirm:
-    '這樣將從受影響的用戶身上刪除與此角色關聯的權限，並刪除組織角色、組織成員和組織權限之間的關係。',
   role: '角色',
-  create_role_placeholder: '僅擁有檢視權限的用戶',
   search_placeholder: '按組織名稱或 ID 搜索',
-  search_permission_placeholder: '輸入並搜索選擇權限',
   search_role_placeholder: '輸入並搜索選擇角色',
   empty_placeholder: '🤔 你尚未設置任何 {{entity}}。',
   organization_and_member: '組織和成員',
@@ -67,21 +57,8 @@ const organizations = {
           '讓我們舉個例子。John、Sarah 屬於不同的組織，在不同組織的上下文中具有不同的角色。懸停在不同的模塊上，看看會發生什麼。',
       },
     },
-    step_1: '第 1 步：定義組織權限',
-    step_2: '第 2 步：定義組織角色',
-    step_3: '第 3 步：創建您的第一個組織',
-    step_3_description:
-      '讓我們一起建立您的第一個組織。它具有唯一的 ID，可以作為處理各種面向業務的實體的容器。',
-    more_next_steps: '更多下一步',
-    add_members: '將成員添加到您的組織',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: '組織權限',
-    permission_name: '權限名稱',
-    permissions: '權限列表',
     organization_roles: '組織角色',
-    role_name: '角色名稱',
-    organization_name: '組織名稱',
     admin: '管理員',
     member: '成員',
     guest: '訪客',

packages/phrases/src/locales/zh-tw/translation/admin-console/organizations.ts

@@ -18,23 +18,13 @@ const organizations = {
   organization_description_placeholder: '組繹的簡要描述',
   organization_permission: '組繹權限',
   organization_permission_other: '組繹權限',
-  organization_permission_description:
-    '組繹權限是指在組繹上下文中訪問資源的授權。組繹權限應該以有意義的字符串表示，同時作為名稱和唯一標識。',
-  organization_permission_delete_confirm:
-    '如果刪除此權限，所有包括此權限的組繹角色將失去此權限，擁有此權限的用戶將失去其授予的訪問。',
   create_permission_placeholder: '瀏覽預約歷史',
-  permission: '權限',
-  permission_other: '權限',
   organization_role: '組繹角色',
   organization_role_other: '組繹角色',
   organization_role_description:
     '組繹角色是一組可以分配給用戶的權限。這些權限必須來自預定義的組繹權限。',
-  organization_role_delete_confirm:
-    '這將從受影響的用戶中刪除與此角色相關的權限，並刪除組繹角色、組繹成員和組繹權限之間的關係。',
   role: '角色',
-  create_role_placeholder: '只擁有查看權限的用戶',
   search_placeholder: '按組繹名稱或 ID 搜索',
-  search_permission_placeholder: '輸入搜索並選擇權限',
   search_role_placeholder: '輸入搜索並選擇角色',
   empty_placeholder: '🤔 你目前尚未設置任何 {{entity}} 。',
   organization_and_member: '組織和成員',
@@ -67,21 +57,8 @@ const organizations = {
           '讓我們舉個例子。約翰、莎拉屬於不同的組繫，並在不同組繫的上下文中擔任不同角色。 將滑鼠指針懸停在不同的模塊上並觀察會發生什麼。',
       },
     },
-    step_1: '步驟1：定義組繹權限',
-    step_2: '步驟2：定義組繹角色',
-    step_3: '步驟3：創建您的第一個組繹',
-    step_3_description:
-      '讓我們創建您的第一個組繹。它具有唯一的 ID，並用作處理各種面向商業的身分的容器。',
-    more_next_steps: '更多下一步',
-    add_members: '將成員加入您的組繹',
-    /** UNTRANSLATED */
-    config_organization: 'Configure organization',
     organization_permissions: '組繹權限',
-    permission_name: '權限名稱',
-    permissions: '權限',
     organization_roles: '組繹角色',
-    role_name: '角色名稱',
-    organization_name: '組繹名稱',
     admin: '管理員',
     member: '成員',
     guest: '訪客',