Add UI support for Push notification based authentication

.changeset/twenty-panthers-deny.md

@@ -0,0 +1,18 @@
+---
+"@wso2is/admin.push-providers.v1": major
+"@wso2is/admin.identity-providers.v1": patch
+"@wso2is/admin.email-providers.v1": patch
+"@wso2is/admin.email-and-sms.v1": patch
+"@wso2is/admin.sms-providers.v1": patch
+"@wso2is/admin.template-core.v1": patch
+"@wso2is/admin.connections.v1": patch
+"@wso2is/react-components": patch
+"@wso2is/admin.core.v1": patch
+"@wso2is/identity-apps-core": patch
+"@wso2is/theme": patch
+"@wso2is/console": patch
+"@wso2is/form": patch
+"@wso2is/i18n": patch
+---
+
+Add UI support for Push notification based authentication

apps/console/package.json

@@ -75,6 +75,7 @@
         "@wso2is/admin.organization-discovery.v1": "^2.25.110",
         "@wso2is/admin.organizations.v1": "^2.26.110",
         "@wso2is/admin.private-key-jwt.v1": "^2.25.110",
+        "@wso2is/admin.push-providers.v1": "^0.0.0",
         "@wso2is/admin.remote-repository-configuration.v1": "^2.25.110",
         "@wso2is/admin.impersonation.v1": "^1.6.110",
         "@wso2is/admin.policy-administration.v1": "^1.0.26",

apps/console/src/configs/routes.tsx

@@ -72,6 +72,9 @@ import FullScreenLayout from "../layouts/full-screen-layout";
 export const getAppViewRoutes = (): RouteInterface[] => {
     const legacyMode: LegacyModeInterface = window["AppUtils"]?.getConfig()?.ui?.legacyMode;
 
+    const isPushProviderFeatureEnabled: boolean =
+        window["AppUtils"]?.getConfig()?.ui?.features?.pushProviders?.enabled;
+
     const defaultRoutes: RouteInterface[] = [
         {
             category: "extensions:manage.sidePanel.categories.userManagement",
@@ -736,9 +739,11 @@ export const getAppViewRoutes = (): RouteInterface[] => {
             exact: true,
             icon: { icon: <EnvelopeGearIcon fill="black" className="icon" /> },
             id: "notificationChannels",
-            name: "Email & SMS",
+            name:  isPushProviderFeatureEnabled ? "Notification Channels" : "Email & SMS",
             order: 16,
-            path: `${ AppConstants.getDeveloperViewBasePath() }/email-and-sms`,
+            path: isPushProviderFeatureEnabled
+                ? AppConstants.getPaths().get("NOTIFICATION_CHANNELS")
+                : AppConstants.getPaths().get("EMAIL_AND_SMS"),
             protected: true,
             showOnSidePanel: true
         },
@@ -774,6 +779,22 @@ export const getAppViewRoutes = (): RouteInterface[] => {
             protected: true,
             showOnSidePanel: false
         },
+        {
+            category: "extensions:develop.sidePanel.categories.pushProvider",
+            component: lazy(() =>
+                import("@wso2is/admin.push-providers.v1/pages/push-providers")
+            ),
+            exact: true,
+            icon: {
+                icon: getSidePanelIcons().push
+            },
+            id: "pushProviders",
+            name: "Push Notification Provider",
+            order: 18,
+            path: AppConstants.getPaths().get("PUSH_PROVIDER"),
+            protected: true,
+            showOnSidePanel: false
+        },
         {
             category: "extensions:manage.sidePanel.categories.AccountManagement",
             children: [

apps/console/src/extensions/i18n/models/extensions.ts

@@ -1967,6 +1967,29 @@ export interface Extensions {
                     };
                 };
             };
+            pushAuth: {
+                quickStart: {
+                    addLoginModal: {
+                        heading: string;
+                        subHeading: string;
+                    };
+                    connectApp: {
+                        description: string;
+                    };
+                    heading: string;
+                    subHeading: string;
+                    steps: {
+                        selectApplication: {
+                            content: string;
+                            heading: string;
+                        };
+                        selectPushAuth: {
+                            content: string;
+                            heading: string;
+                        };
+                    };
+                }
+            },
             facebook: {
                 quickStart: {
                     addLoginModal: {

apps/console/src/extensions/i18n/resources/en-US/extensions.ts

@@ -1992,7 +1992,7 @@ export const extensions: Extensions = {
             info: "You can customize the email content using <1>Email Templates</1>.",
             updateButton: "Update",
             sendTestMailButton: "Send Test Email",
-            goBack: "Go back to Email & SMS",
+            goBack: "Go back to Notification Providers",
             confirmationModal: {
                 assertionHint: "Please confirm your action.",
                 content: "If you delete this configuration, the emails will be sent from the Asgardeo Email Address. " +
@@ -2086,9 +2086,9 @@ export const extensions: Extensions = {
             }
         },
         notificationChannel: {
-            heading: "SMS / Email Providers",
-            title: "SMS / Email Providers",
-            description: "Configure the SMS and Email providers for your organization."
+            heading: "Notification Channels",
+            title: "Notification Channels",
+            description: "Configure the notifiction channels for your organization."
         },
         identityProviders: {
             apple: {
@@ -2216,6 +2216,31 @@ export const extensions: Extensions = {
                     }
                 }
             },
+            pushAuth: {
+                quickStart: {
+                    addLoginModal: {
+                        heading: "Add Push Authenticator",
+                        subHeading: "Select an application to set up push  authentication."
+                    },
+                    connectApp: {
+                        description:
+                            "Add <1>Push Notification</1> to <3>Step 2</3> on the <5>Login Flow" +
+                            "</5> section of your <7>application</7>."
+                    },
+                    heading: "Push Authenticator Set Up Guide",
+                    subHeading: "Follow the instructions to set up Push Authentication in your login flow.",
+                    steps: {
+                        selectApplication: {
+                            content: "Choose the <1>application</1> for which you want to set up Push Authentication.",
+                            heading: "Select Application"
+                        },
+                        selectPushAuth: {
+                            content: "Go to <1>Login Flow</1> tab and click on the <3>Username & Password + Push</3> option from the Multi-factor login section to configure a basic Push Authentication flow.",
+                            heading: "Select <1>Push Authenticator</1> option"
+                        }
+                    }
+                }
+            },
             facebook: {
                 quickStart: {
                     addLoginModal: {

apps/console/src/public/deployment.config.json

@@ -1012,6 +1012,34 @@
                     "update": []
                 }
             },
+            "pushProviders": {
+                "disabledFeatures": [],
+                "enabled": true,
+                "features": [
+                    {
+                        "feature": "pushProviders",
+                        "flag": ""
+                    },
+                    {
+                        "feature": "pushProviders.templates",
+                        "flag": ""
+                    }
+                ],
+                "scopes": {
+                    "create": [
+                        "internal_notification_senders_create"
+                    ],
+                    "delete": [
+                        "internal_notification_senders_delete"
+                    ],
+                    "read": [
+                        "internal_notification_senders_view"
+                    ],
+                    "update": [
+                        "internal_notification_senders_update"
+                    ]
+                }
+             },
             "remoteFetchConfig": {
                 "disabledFeatures": [],
                 "enabled": false,

features/admin.connections.v1/components/authenticator-grid.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2025, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -50,6 +50,7 @@ import React, {
     MouseEvent,
     ReactElement,
     SyntheticEvent,
+    useEffect,
     useState
 } from "react";
 import { useTranslation } from "react-i18next";
@@ -157,7 +158,10 @@ export const AuthenticatorGrid: FunctionComponent<AuthenticatorGridPropsInterfac
     const dispatch: Dispatch = useDispatch();
     const eventPublisher: EventPublisher = EventPublisher.getInstance();
     const { UIConfig } = useUIConfig();
+    const hiddenAuthenticators: string[] = [ ...(UIConfig?.hiddenAuthenticators ?? []) ];
 
+    const [ displayingAuthenticators, setDisplayingAuthenticators ] = useState<
+        (ConnectionInterface | AuthenticatorInterface)[]>([]);
     const [ showDeleteConfirmationModal, setShowDeleteConfirmationModal ] = useState<boolean>(false);
     const [ deletingIDP, setDeletingIDP ] = useState<ConnectionInterface>(undefined);
     const [ isDeletionloading, setIsDeletionLoading ] = useState(false);
@@ -179,6 +183,15 @@ export const AuthenticatorGrid: FunctionComponent<AuthenticatorGridPropsInterfac
 
     const connectionResourcesUrl: string = UIConfig?.connectionResourcesUrl;
 
+    useEffect(() => {
+        const shownAuthenticatorList: (ConnectionInterface | AuthenticatorInterface)[] =
+            authenticators.filter((authenticator:ConnectionInterface | AuthenticatorInterface)  => {
+                return !hiddenAuthenticators.includes(authenticator.name);
+            });
+
+        setDisplayingAuthenticators(shownAuthenticatorList);
+    }, [ authenticators ]);
+
     /**
      * Redirects to the authenticator edit page when the edit button is clicked.
      *
@@ -448,14 +461,14 @@ export const AuthenticatorGrid: FunctionComponent<AuthenticatorGridPropsInterfac
                 isLoading={ isLoading }
                 isPaginating={ false }
                 isEmpty={
-                    (!authenticators
-                    || !Array.isArray(authenticators)
-                    || authenticators.length <= 0)
+                    (!displayingAuthenticators
+                    || !Array.isArray(displayingAuthenticators)
+                    || displayingAuthenticators.length <= 0)
                 }
                 emptyPlaceholder={ showPlaceholders() }
             >
                 {
-                    authenticators?.map((authenticator: ConnectionInterface
+                    displayingAuthenticators?.map((authenticator: ConnectionInterface
                         | AuthenticatorInterface, index: number) => {
 
                         const authenticatorConfig: AuthenticatorExtensionsConfigInterface = get(