diff --git a/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx b/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx index 8e3d386b9..7f9a888d9 100644 --- a/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx +++ b/packages/console/src/components/ApplicationCreation/CreateForm/index.tsx @@ -28,6 +28,14 @@ import { isPaidPlan } from '@/utils/subscription'; import Footer from './Footer'; import styles from './index.module.scss'; +type AvailableApplicationTypeForCreation = Extract< + ApplicationType, + | ApplicationType.Native + | ApplicationType.SPA + | ApplicationType.Traditional + | ApplicationType.MachineToMachine +>; + type FormData = { type: ApplicationType; name: string; @@ -160,22 +168,13 @@ function CreateForm({ onChange={onChange} > {Object.values(ApplicationType) - .filter( - ( - value - ): value is Extract< - ApplicationType, - | ApplicationType.Native - | ApplicationType.SPA - | ApplicationType.Traditional - | ApplicationType.MachineToMachine - > => - [ - ApplicationType.Native, - ApplicationType.SPA, - ApplicationType.Traditional, - ApplicationType.MachineToMachine, - ].includes(value) + .filter((value): value is AvailableApplicationTypeForCreation => + [ + ApplicationType.Native, + ApplicationType.SPA, + ApplicationType.Traditional, + ApplicationType.MachineToMachine, + ].includes(value) ) .map((type) => ( ]: SvgComponent; + [key in Exclude]: SvgComponent; }; export const lightModeApplicationIconMap: ApplicationIconMap = Object.freeze({ diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.tsx index dbaf731d8..55098e405 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/GuideDrawer/index.tsx @@ -27,7 +27,7 @@ function GuideDrawer({ app, secrets, onClose }: Props) { const [selectedGuide, setSelectedGuide] = useState(); const appType = useMemo( - // SAML application is actually a Traditional application, the same as OIDC applications. + // TODO: @darcy Revisit this section during the implementation of the SAML app guide, note that SAML is currently treated as a Traditional app to prevent TypeScript errors (this is actually feasible since the API for creating SAML apps has not yet been enabled). However, SAML apps cannot modify OIDC config, so the final guide may differ. () => (app.type === ApplicationType.SAML ? ApplicationType.Traditional : app.type), [app.type] ); diff --git a/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx b/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx index d6ffd1fda..3122626ee 100644 --- a/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx +++ b/packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx @@ -42,7 +42,7 @@ type FormProps = { function ConfigForm({ ssoConnector, - applications, + applications: allApplications, idpInitiatedAuthConfig, mutateIdpInitiatedConfig, }: FormProps) { @@ -50,6 +50,21 @@ function ConfigForm({ const { getTo } = useTenantPathname(); const api = useApi(); + /** + * See definition of `applicationsSearchUrl`, there is only non-third party SPA/Traditional applications here, and SAML applications are always third party secured by DB schema, we need to manually exclude other application types here to make TypeScript happy. + */ + const applications = useMemo( + () => + allApplications.filter( + ( + application + ): application is Omit & { + type: Exclude; + } => application.type !== ApplicationType.SAML + ), + [allApplications] + ); + const { control, register, @@ -177,29 +192,17 @@ function ConfigForm({ placeholder={t( 'enterprise_sso_details.idp_initiated_auth_config.empty_applications_placeholder' )} - options={applications - .filter( - ( - application - ): application is Omit & { - type: Exclude; - } => - /** - * See definition of `applicationsSearchUrl`, there is only non-third party SPA/Traditional applications here, and SAML applications are always third party secured by DB schema, we need to manually exclude other application types here to make TypeScript happy. - */ - application.type !== ApplicationType.SAML - ) - .map((application) => ({ - value: application.id, - title: ( - - {application.name} - - ({t(`guide.categories.${application.type}`)}, ID: {application.id}) - + options={applications.map((application) => ({ + value: application.id, + title: ( + + {application.name} + + ({t(`guide.categories.${application.type}`)}, ID: {application.id}) - ), - }))} + + ), + }))} value={value} error={emptyApplicationsError ?? errors.config?.defaultApplicationId?.message} onChange={onChange}