chore(console): fix SAML app text display (#6926)

packages/console/src/components/ItemPreview/ApplicationPreview.tsx

@@ -1,4 +1,4 @@
-import { type Application, ApplicationType } from '@logto/schemas';
+import { type Application } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
 import ApplicationIcon from '@/components/ApplicationIcon';
@@ -22,8 +22,7 @@ function ApplicationPreview({ data: { id, name, isThirdParty, type } }: Props) {
       title={name}
       subtitle={
         // We have ensured that SAML applications are always third party in DB schema, we use `||` here to make TypeScript happy.
-        // TODO: @darcy fix this when SAML app preview is ready
-        isThirdParty || type === ApplicationType.SAML
+        isThirdParty
           ? t(`${applicationTypeI18nKey.thirdParty}.title`)
           : t(`${applicationTypeI18nKey[type]}.title`)
       }

packages/console/src/pages/ApplicationDetails/SamlApplicationDetailsContent/CreateSecretModal.tsx

@@ -72,7 +72,8 @@ function CreateSecretModal({ appId, isOpen, onClose }: Props) {
           json: { lifeSpanInYears: Number(lifeSpanInYears) },
         })
         .json<SamlApplicationSecret>();
-      toast.success(t('application_details.secrets.create_modal.created'));
+      // We do not have `name` for SAML application secret, use empty string instead to avoid showing the placeholder.
+      toast.success(t('application_details.secrets.create_modal.created', { name: '' }));
       onCloseHandler(createdData);
     })
   );

packages/console/src/pages/ApplicationDetails/SamlApplicationDetailsContent/index.tsx

@@ -23,7 +23,6 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 import { applicationTypeI18nKey } from '@/types/applications';
 
 import Branding from '../components/Branding';
-import Permissions from '../components/Permissions';
 
 import AttributeMapping from './AttributeMapping';
 import Settings from './Settings';
@@ -98,7 +97,7 @@ function SamlApplicationDetailsContent({ data }: Props) {
       <DetailsPageHeader
         icon={<ApplicationIcon type={data.type} isThirdParty={data.isThirdParty} />}
         title={data.name}
-        primaryTag={t(`${applicationTypeI18nKey.thirdParty}.title`)}
+        primaryTag={t(`${applicationTypeI18nKey[ApplicationType.SAML]}.title`)}
         identifier={{ name: 'App ID', value: data.id }}
         actionMenuItems={[
           {
@@ -135,9 +134,6 @@ function SamlApplicationDetailsContent({ data }: Props) {
         <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.AttributeMapping}`}>
           {t('application_details.saml_app_attribute_mapping.name')}
         </TabNavItem>
-        <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Permissions}`}>
-          {t('application_details.permissions.name')}
-        </TabNavItem>
         <TabNavItem href={`/applications/${data.id}/${ApplicationDetailsTabs.Branding}`}>
           {t('application_details.branding.name')}
         </TabNavItem>
@@ -162,12 +158,6 @@ function SamlApplicationDetailsContent({ data }: Props) {
           <AttributeMapping data={samlApplicationData} mutateApplication={mutateSamlApplication} />
         )}
       </TabWrapper>
-      <TabWrapper
-        isActive={tab === ApplicationDetailsTabs.Permissions}
-        className={styles.tabContainer}
-      >
-        <Permissions application={data} />
-      </TabWrapper>
       <TabWrapper
         isActive={tab === ApplicationDetailsTabs.Branding}
         className={styles.tabContainer}

packages/console/src/types/applications.ts

@@ -10,6 +10,7 @@ export const applicationTypeI18nKey = Object.freeze({
   [ApplicationType.Traditional]: 'applications.type.traditional',
   [ApplicationType.MachineToMachine]: 'applications.type.machine_to_machine',
   [ApplicationType.Protected]: 'applications.type.protected',
+  [ApplicationType.SAML]: 'applications.type.saml',
   thirdParty: 'applications.type.third_party',
 } as const);
 

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

@@ -44,10 +44,15 @@ const applications = {
       subtitle: 'An app that is protected by Logto', // Not in use
       description: 'N/A', // Not in use
     },
+    saml: {
+      title: 'SAML App',
+      subtitle: 'An app that is used as an SAML IdP connector',
+      description: 'E.g., SAML',
+    },
     third_party: {
       title: 'Third-party App',
       subtitle: 'An app that is used as a third-party IdP connector',
-      description: 'E.g., OIDC, SAML',
+      description: 'E.g., OIDC',
     },
   },
   placeholder_title: 'Select an application type to continue',