From 33b932cc567a5d77dd0eb9b08ec1908b3d03657d Mon Sep 17 00:00:00 2001
From: Madhavi Gayathri <madhavi.17@cse.mrt.ac.lk>
Date: Mon, 26 Aug 2024 14:52:42 +0530
Subject: [PATCH] Add banner implementation.

---
 .../models/application-inbound.ts             |   2 +
 .../pages/application-edit.scss               |  20 +
 .../pages/application-edit.tsx                | 435 +++++++++++++++++-
 .../en-US/portals/applications.ts             |  15 +-
 4 files changed, 462 insertions(+), 10 deletions(-)

diff --git a/features/admin.applications.v1/models/application-inbound.ts b/features/admin.applications.v1/models/application-inbound.ts
index ac4c4f8460d..e5a3a95f77c 100644
--- a/features/admin.applications.v1/models/application-inbound.ts
+++ b/features/admin.applications.v1/models/application-inbound.ts
@@ -193,6 +193,8 @@ export interface OIDCDataInterface {
     subject?: SubjectConfigInterface;
     isFAPIApplication?: boolean;
     hybridFlow?: HybridFlowConfigurationInterface;
+    useClientIdAsSubClaimForAppTokens?: boolean;
+    omitUsernameInIntrospectionRespForAppTokens?: boolean;
 }
 
 /**
diff --git a/features/admin.applications.v1/pages/application-edit.scss b/features/admin.applications.v1/pages/application-edit.scss
index 536ea9b575a..4dcdd2398f4 100644
--- a/features/admin.applications.v1/pages/application-edit.scss
+++ b/features/admin.applications.v1/pages/application-edit.scss
@@ -19,3 +19,23 @@
 .application-branding-link {
     cursor: pointer;
 }
+
+.ignore-once-button {
+    color: #788997;
+}
+
+.banner-detail-card {
+    border: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: #fffaf3;
+}
+
+.application-outdated-alert-expanded-view {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.spaced-list li {
+    margin-bottom: 10px;
+}
diff --git a/features/admin.applications.v1/pages/application-edit.tsx b/features/admin.applications.v1/pages/application-edit.tsx
index ba0cb6ccdcd..f46f485e307 100755
--- a/features/admin.applications.v1/pages/application-edit.tsx
+++ b/features/admin.applications.v1/pages/application-edit.tsx
@@ -16,6 +16,14 @@
  * under the License.
  */
 
+import { Typography } from "@mui/material";
+import Alert from "@oxygen-ui/react/Alert";
+import AlertTitle from "@oxygen-ui/react/AlertTitle";
+import Button from "@oxygen-ui/react/Button";
+import Card from "@oxygen-ui/react/Card";
+import CardContent from "@oxygen-ui/react/CardContent";
+import Divider from "@oxygen-ui/react/Divider";
+import Grid from "@oxygen-ui/react/Grid";
 import { useRequiredScopes } from "@wso2is/access-control";
 import ApplicationTemplateMetadataProvider from
     "@wso2is/admin.application-templates.v1/provider/application-template-metadata-provider";
@@ -33,21 +41,29 @@ import { ExtensionTemplateListInterface } from "@wso2is/admin.template-core.v1/m
 import { isFeatureEnabled } from "@wso2is/core/helpers";
 import { AlertLevels, IdentifiableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
+import { FormValue } from "@wso2is/form/src";
+import { Field, Forms } from "@wso2is/forms";
 import {
     AnimatedAvatar,
     AppAvatar,
+    ConfirmationModal,
+    Hint,
     LabelWithPopup,
     Popup,
     TabPageLayout
 } from "@wso2is/react-components";
+import { AxiosError } from "axios";
+import classNames from "classnames";
 import cloneDeep from "lodash-es/cloneDeep";
-import React, { FunctionComponent, ReactElement, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { FunctionComponent, MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { RouteComponentProps } from "react-router";
 import { Dispatch } from "redux";
 import { Label } from "semantic-ui-react";
+import { updateAuthProtocolConfig } from "../api/application";
 import { useGetApplication } from "../api/use-get-application";
+import useGetApplicationInboundConfigs from "../api/use-get-application-inbound-configs";
 import { EditApplication } from "../components/edit-application";
 import { InboundProtocolDefaultFallbackTemplates } from "../components/meta/inbound-protocols.meta";
 import { ApplicationManagementConstants } from "../constants";
@@ -57,6 +73,7 @@ import {
     ApplicationAccessTypes,
     ApplicationInterface,
     ApplicationTemplateListItemInterface,
+    OIDCDataInterface,
     State,
     SupportedAuthProtocolTypes,
     idpInfoTypeInterface
@@ -129,6 +146,46 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         error: applicationGetRequestError
     } = useGetApplication(applicationId, !!applicationId);
 
+    const [ viewBannerDetails, setViewBannerDetails ] = useState<boolean>(false);
+    const [ displayBanner, setDisplayBanner ] = useState<boolean>(false);
+    const {
+        data: applicationInboundConfigData,
+        mutate: mutateApplicationInboundConfigs,
+        isLoading: isBannerDataLoading
+    } = useGetApplicationInboundConfigs(application?.id, SupportedAuthProtocolTypes.OIDC, !!application?.id);
+    const [ applicationInboundConfig, setApplicationInboundConfig ] = useState<OIDCDataInterface>(undefined);
+    const [ useClientIdAsSubClaimForAppTokens, setUseClientIdAsSubClaimForAppTokens ] = useState<boolean>(false);
+    const [ omitUsernameInIntrospectionRespForAppTokens, setOmitUsernameInIntrospectionRespForAppTokens ]
+        = useState<boolean>(false);
+    const useClientIdAsSubClaimForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const omitUsernameInIntrospectionRespForAppTokensElement: MutableRefObject<HTMLElement> = useRef<HTMLElement>();
+    const [ bannerUpdateLoading, setBannerUpdateLoading ] = useState<boolean>(false);
+    const [ showConfirmationModal, setShowConfirmationModal ] = useState<boolean>(false);
+    const [ formData, setFormdata ] = useState<any>(undefined);
+    const [ bannerSubmitDisabled, setBannerSubmitDisabled ] = useState<boolean>(true);
+
+    /**
+     * Loads banner data.
+     */
+    useEffect(() => {
+        if (!isBannerDataLoading) {
+            setApplicationInboundConfig(applicationInboundConfigData);
+        }
+    }, [ applicationInboundConfigData, isBannerDataLoading ]);
+
+    /**
+     * Assign loaded banner data into config states.
+     */
+    useEffect(() => {
+        if (applicationInboundConfig != undefined) {
+            setUseClientIdAsSubClaimForAppTokens(applicationInboundConfig.useClientIdAsSubClaimForAppTokens);
+            setOmitUsernameInIntrospectionRespForAppTokens(applicationInboundConfig
+                .omitUsernameInIntrospectionRespForAppTokens);
+            setDisplayBanner(!applicationInboundConfig.useClientIdAsSubClaimForAppTokens
+                || !applicationInboundConfig.omitUsernameInIntrospectionRespForAppTokens);
+        }
+    }, [ applicationInboundConfig ]);
+
     /**
      * Load the template that the application is built on.
      */
@@ -506,6 +563,379 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         return null;
     };
 
+    /**
+     * Resolves the application banner content.
+     *
+     * @returns Alert banner.
+     */
+    const resolveAlertBanner = (): ReactElement => {
+
+        const classes: any = classNames( { "application-outdated-alert-expanded-view": viewBannerDetails } );
+
+        return (
+            !isBannerDataLoading && displayBanner &&
+                (
+                    <>
+                        {
+                            <>
+                                <Alert
+                                    className={ classes }
+                                    severity="warning"
+                                    action={
+                                        (
+                                            <>
+                                                <Button
+                                                    onClick={ () => setViewBannerDetails(!viewBannerDetails) }>
+                                                    { t("applications:forms.inboundOIDC.sections"
+                                                        + ".legacyApplicationTokens.alert.viewButton") }
+                                                </Button>
+                                                <Button
+                                                    className="ignore-once-button"
+                                                    onClick={ () => setDisplayBanner(false) }>
+                                                    { t("applications:forms.inboundOIDC.sections"
+                                                        + ".legacyApplicationTokens.alert.cancelButton") }
+                                                </Button>
+                                            </>
+                                        )
+                                    }
+                                >
+                                    <AlertTitle className="alert-title">
+                                        <Trans components={ { strong: <strong/> } } >
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                                                + ".alert.title") }
+                                        </Trans>
+                                    </AlertTitle>
+                                    <Trans>
+                                        { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                                                    + ".alert.content") }
+                                    </Trans>
+                                </Alert>
+                                <Card
+                                    className="banner-detail-card"
+                                    hidden={ !viewBannerDetails }
+                                >
+                                    <CardContent>
+                                        { resolveBannerViewDetails() }
+                                    </CardContent>
+                                </Card>
+                            </>
+                        }
+                        <Divider hidden />
+                    </>
+                )
+        );
+    };
+
+    /**
+     * Resolves the application banner view details section.
+     *
+     * @returns Alert banner details.
+     */
+    const resolveBannerViewDetails = (): ReactElement => {
+
+        return (
+            <Forms onSubmit={ handleBannerCheckBoxUpdate }>
+                <Grid>
+                    <Typography component="div">
+                        <Trans
+                            i18nKey={
+                                t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "commonInstruction")
+                            }>
+                            Change the customer-end applications accordingly to recieve the below updates.
+                        </Trans>
+                    </Typography>
+                    <ol>
+                        {
+                            !applicationInboundConfig
+                                .useClientIdAsSubClaimForAppTokens && (
+                                <li>
+                                    <Trans
+                                        i18nKey={
+                                            t("applications:forms.inboundOIDC.sections"
+                                                    + ".legacyApplicationTokens.fields."
+                                                    + "useClientIdAsSubClaimForAppTokens.label")
+                                        }>
+                                    </Trans>
+                                    <Field
+                                        ref={ useClientIdAsSubClaimForAppTokensElement }
+                                        name="useClientIdAsSubClaimForAppTokens"
+                                        required={ false }
+                                        type="checkbox"
+                                        disabled={ false }
+                                        value={ useClientIdAsSubClaimForAppTokens ?
+                                            [ "useClientIdAsSubClaimForAppTokens" ]
+                                            : [] }
+                                        readOnly={ false }
+                                        data-componentId={
+                                            `${ componentId }-use-client-id-as-sub-claim-for-app-tokens` }
+                                        children={ [
+                                            {
+                                                label: t("applications:forms.inboundOIDC.sections."
+                                                    + "legacyApplicationTokens.fields"
+                                                    + ".useClientIdAsSubClaimForAppTokens.label"),
+                                                value: "useClientIdAsSubClaimForAppTokens"
+                                            }
+                                        ] }
+                                        listen={ (values: Map<string, FormValue>) => {
+
+                                            if ( values.get("useClientIdAsSubClaimForAppTokens")
+                                                .length > 0) {
+                                                setBannerSubmitDisabled(false);
+                                            } else {
+                                                if (values.get("omitUsernameInIntrospectionRespForAppTokens")
+                                                    .length === 0) {
+                                                    setBannerSubmitDisabled(true);
+                                                } else {
+                                                    setBannerSubmitDisabled(false);
+                                                }
+                                            }
+                                            setUseClientIdAsSubClaimForAppTokens(
+                                                !useClientIdAsSubClaimForAppTokens);
+                                        }
+                                        }
+                                    />
+                                    <Hint>
+                                        { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                                + "fields.useClientIdAsSubClaimForAppTokens.hint") }
+                                    </Hint>
+                                </li>
+                            )
+                        }
+                        {
+                            (!applicationInboundConfig.omitUsernameInIntrospectionRespForAppTokens
+                            && !applicationInboundConfig.useClientIdAsSubClaimForAppTokens) &&
+                        (
+                            <Divider hidden />
+                        )
+                        }
+                        {
+                            (!applicationInboundConfig
+                                .omitUsernameInIntrospectionRespForAppTokens) &&
+                                (
+                                    <li>
+                                        <Trans
+                                            i18nKey={
+                                                t("applications:forms.inboundOIDC.sections"
+                                                    + ".legacyApplicationTokens.fields."
+                                                    + "omitUsernameInIntrospectionRespForAppTokens.label")
+                                            }>
+                                            Application access token, Introspection response will not include
+                                            the <code>username</code> attribute.
+                                        </Trans>
+                                        <Field
+                                            ref={ omitUsernameInIntrospectionRespForAppTokensElement }
+                                            name="omitUsernameInIntrospectionRespForAppTokens"
+                                            required={ false }
+                                            type="checkbox"
+                                            disabled={ false }
+                                            value={ omitUsernameInIntrospectionRespForAppTokens ?
+                                                [ "omitUsernameInIntrospectionRespForAppTokens" ]
+                                                : [] }
+                                            readOnly={ false }
+                                            data-componentId={
+                                                `${ componentId }-omit-username-in-introspection-resp-for-app-tokens` }
+                                            children={ [
+                                                {
+                                                    label: t("applications:forms.inboundOIDC.sections"
+                                                    + ".legacyApplicationTokens.fields."
+                                                    + "omitUsernameInIntrospectionRespForAppTokens.label"),
+                                                    value: "omitUsernameInIntrospectionRespForAppTokens"
+                                                }
+                                            ] }
+                                            listen={ (values: Map<string, FormValue>) => {
+
+                                                if ( values.get("omitUsernameInIntrospectionRespForAppTokens")
+                                                    .length > 0) {
+                                                    setBannerSubmitDisabled(false);
+                                                } else {
+                                                    if (values.get("useClientIdAsSubClaimForAppTokens").length === 0) {
+                                                        setBannerSubmitDisabled(true);
+                                                    } else {
+                                                        setBannerSubmitDisabled(false);
+                                                    }
+                                                }
+                                                setOmitUsernameInIntrospectionRespForAppTokens(
+                                                    !omitUsernameInIntrospectionRespForAppTokens);
+                                            }
+                                            }
+                                        />
+                                        <Hint>
+                                            { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                            + "fields.omitUsernameInIntrospectionRespForAppTokens.hint") }
+                                        </Hint>
+                                    </li>
+                                )
+                        }
+                    </ol>
+                </Grid>
+                <Button
+                    variant="contained"
+                    disabled={ bannerSubmitDisabled }
+                    type="submit"
+                    data-componentId={ `${componentId}-application-update-banner-button` }
+                >
+                    { t("common:update") }
+                </Button>
+                { showConfirmationModal && confirmationModal() }
+            </Forms>
+        );
+    };
+
+    /**
+     * Resolves the update confirmation modal.
+     *
+     * @returns Confirmation modal.
+     */
+    const confirmationModal = () => {
+
+        return (
+            <ConfirmationModal
+                primaryActionLoading={ bannerUpdateLoading }
+                data-testid={ `${ componentId }-confirmation-modal` }
+                onClose={ (): void => setShowConfirmationModal(false) }
+                type="negative"
+                open={ showConfirmationModal }
+                assertionHint={ t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                    + ".confirmationModal.assertionHint") }
+                assertionType="checkbox"
+                primaryAction="Confirm"
+                secondaryAction="Cancel"
+                onSecondaryActionClick={ (): void =>{
+                    setShowConfirmationModal(false);
+                } }
+                onPrimaryActionClick={ handleBannerCheckBoxUpdateConfirmation }
+                closeOnDimmerClick={ false }
+            >
+                <ConfirmationModal.Header data-testid={ `${ componentId }-confirmation-modal-header` }>
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.header") }
+                </ConfirmationModal.Header>
+                <ConfirmationModal.Message
+                    data-testid={ `${ componentId }-confirmation-modal-message` }
+                    attached
+                    negative
+                >
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.message") }
+                </ConfirmationModal.Message>
+                <ConfirmationModal.Content data-testid={ `${ componentId }-confirmation-modal-content` }>
+                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens"
+                        + ".confirmationModal.content") }
+                    <ol className="spaced-list">
+                        { formData["useClientIdAsSubClaimForAppTokens"] && (
+                            <li>
+                                {
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "useClientIdAsSubClaimForAppTokens.label")
+                                }
+                            </li>
+                        )
+                        }
+                        { formData["omitUsernameInIntrospectionRespForAppTokens"] && (
+                            <li>
+                                {
+                                    t("applications:forms.inboundOIDC.sections"
+                                        + ".legacyApplicationTokens.fields."
+                                        + "omitUsernameInIntrospectionRespForAppTokens.label")
+                                }
+                            </li>
+                        )
+                        }
+                    </ol>
+                </ConfirmationModal.Content>
+            </ConfirmationModal>
+        );
+    };
+
+    /**
+     * Handles banner content update action which prepares data.
+     */
+    const handleBannerCheckBoxUpdate = (formDataValues: any) => {
+
+        mutateApplicationInboundConfigs().then((response: any) => {
+
+            let values: any = response.data;
+
+            if (formDataValues.get("omitUsernameInIntrospectionRespForAppTokens")){
+                values = {
+                    ...values,
+                    omitUsernameInIntrospectionRespForAppTokens:
+                        formDataValues.get("omitUsernameInIntrospectionRespForAppTokens")?.length > 0
+                };
+            } else {
+                values = {
+                    ...values,
+                    omitUsernameInIntrospectionRespForAppTokens: omitUsernameInIntrospectionRespForAppTokens
+                };
+            }
+
+            if (formDataValues.get("useClientIdAsSubClaimForAppTokens")) {
+                values = {
+                    ...values,
+                    useClientIdAsSubClaimForAppTokens:
+                    formDataValues.get("useClientIdAsSubClaimForAppTokens")?.length > 0
+                };
+            } else {
+                values = {
+                    ...values,
+                    useClientIdAsSubClaimForAppTokens: useClientIdAsSubClaimForAppTokens
+                };
+            }
+
+            setFormdata({ ...values });
+            setShowConfirmationModal(true);
+        });
+    };
+
+    /**
+     * Handles the banner data update action.
+     */
+    const handleBannerCheckBoxUpdateConfirmation = async (): Promise<void> => {
+
+        setBannerUpdateLoading(true);
+
+        return updateAuthProtocolConfig<OIDCDataInterface>(application?.id, formData, SupportedAuthProtocolTypes.OIDC)
+            .then(() => {
+                dispatch(addAlert({
+                    description: t("applications:notifications.updateApplication" +
+                            ".success.description"),
+                    level: AlertLevels.SUCCESS,
+                    message: t("applications:notifications.updateApplication" +
+                            ".success.message")
+                }));
+            })
+            .catch((error: AxiosError) => {
+                if (error?.response?.data?.description) {
+                    dispatch(addAlert({
+                        description: error.response.data.description,
+                        level: AlertLevels.ERROR,
+                        message: t("applications:notifications.updateApplication" +
+                                ".error.message")
+                    }));
+
+                    return;
+                }
+
+                dispatch(addAlert({
+                    description: t("applications:notifications.updateApplication" +
+                            ".genericError.description"),
+                    level: AlertLevels.ERROR,
+                    message: t("applications:notifications.updateApplication" +
+                            ".genericError.message")
+                }));
+            }).finally(() => {
+                setDisplayBanner(!formData.useClientIdAsSubClaimForAppTokens ||
+                    !formData.omitUsernameInIntrospectionRespForAppTokens);
+                setShowConfirmationModal(false);
+                setBannerUpdateLoading(false);
+                setViewBannerDetails(false);
+                mutateApplicationInboundConfigs();
+            });
+    };
+
     return (
         <TabPageLayout
             pageTitle="Edit Application"
@@ -575,6 +1005,7 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
                 text: isConnectedAppsRedirect ? t("idp:connectedApps.applicationEdit.back",
                     { idpName: callBackIdpName }) : t("console:develop.pages.applicationsEdit.backButton")
             } }
+            alertBanner={ resolveAlertBanner() }
             titleTextAlign="left"
             bottomMargin={ false }
             pageHeaderMaxWidth={ true }
diff --git a/modules/i18n/src/translations/en-US/portals/applications.ts b/modules/i18n/src/translations/en-US/portals/applications.ts
index 53155c2ac96..e6f55a31418 100644
--- a/modules/i18n/src/translations/en-US/portals/applications.ts
+++ b/modules/i18n/src/translations/en-US/portals/applications.ts
@@ -1647,15 +1647,14 @@ export const applications: ApplicationsNS = {
                     heading: "Legacy Application Tokens",
                     alert : {
                         title: "Application is outdated.",
-                        content: "This application is using an outdated behavior for application tokens. "
-                            + "Please follow the below guideline before migrating to the new behavior.",
+                        content: "This application is using an outdated behavior for application tokens.",
                         viewButton: "View Details",
                         cancelButton: "Ignore Once"
                     },
                     confirmationModal: {
                         header: "Have you done the relevant changes?",
                         message: "Proceeding the action without making relevant change will cause the client application behavior break.",
-                        content: "By confirming the action,",
+                        content: "Confirming the action will,",
                         assertionHint: "Please confirm your action"
                     },
                     fields: {
@@ -1663,19 +1662,19 @@ export const applications: ApplicationsNS = {
                         useClientIdAsSubClaimForAppTokens: {
                             instruction: "Application access token <code>sub</code> attribute will be"
                                 + "<code>client_id</code> generated for an application.",
-                            label: "Set client_id as the sub claim value for Application tokens",
-                            hint: "For application tokens, the sub claim was previosuly set to the "
+                            label: "Set client_id as the sub attribute value for Application tokens",
+                            hint: "For application tokens, the sub attribute was previosuly set to the "
                             + "application owner's user_id. However, to support a more industry standard "
                             + "solution, this value will be changed to the client ID for application tokens."
                         },
                         omitUsernameInIntrospectionRespForAppTokens: {
                             instruction: "Application access token, Introspection response will not include"
                                 + "the <code>username</code> attribute.",
-                            label: "Omit sending username claim in the Introspection response for Application tokens",
-                            hint: "For access tokens, the previous behavior includes sending the username claim"
+                            label: "Omit sending username attribute in the Introspection response for Application tokens",
+                            hint: "For access tokens, the previous behavior includes sending the username attribute"
                             + " in the introspection response. However, to support a more industry standard"
                             + " solution, the introspection response for application tokens will no longer"
-                            + " include the username claim."
+                            + " include the username attribute."
                         }
                     }
                 },