diff --git a/features/admin.applications.v1/pages/application-edit.scss b/features/admin.applications.v1/pages/application-edit.scss index 536ea9b575a..e1580820d43 100644 --- a/features/admin.applications.v1/pages/application-edit.scss +++ b/features/admin.applications.v1/pages/application-edit.scss @@ -19,3 +19,19 @@ .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: #fff; +} + +.application-outdated-alert-expanded-view { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} diff --git a/features/admin.applications.v1/pages/application-edit.tsx b/features/admin.applications.v1/pages/application-edit.tsx index ba0cb6ccdcd..8ebd818e257 100755 --- a/features/admin.applications.v1/pages/application-edit.tsx +++ b/features/admin.applications.v1/pages/application-edit.tsx @@ -16,6 +16,10 @@ * under the License. */ +import Alert from "@oxygen-ui/react/Alert"; +import AlertTitle from "@oxygen-ui/react/AlertTitle"; +import Card from "@oxygen-ui/react/Card"; +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 +37,27 @@ 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 { Field, Forms } from "@wso2is/forms"; import { AnimatedAvatar, AppAvatar, + ConfirmationModal, + Hint, LabelWithPopup, Popup, TabPageLayout } from "@wso2is/react-components"; +import { AxiosError } from "axios"; 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 { CardContent, Divider, 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 +67,7 @@ import { ApplicationAccessTypes, ApplicationInterface, ApplicationTemplateListItemInterface, + OIDCDataInterface, State, SupportedAuthProtocolTypes, idpInfoTypeInterface @@ -64,6 +75,9 @@ import { import { ApplicationManagementUtils } from "../utils/application-management-utils"; import { ApplicationTemplateManagementUtils } from "../utils/application-template-management-utils"; import "./application-edit.scss"; +import { Typography } from "@mui/material"; +import Button from "@oxygen-ui/react/Button"; +import classNames from "classnames"; /** * Prop types for the applications edit page component. @@ -129,6 +143,44 @@ const ApplicationEditPage: FunctionComponent = ( error: applicationGetRequestError } = useGetApplication(applicationId, !!applicationId); + const [ viewBannerDetails, setViewBannerDetails ] = useState(false); + const [ displayBanner, setDisplayBanner ] = useState(false); + const { + data: applicationInboundConfigData, + isLoading: isBannerDataLoading + } = useGetApplicationInboundConfigs(application?.id, SupportedAuthProtocolTypes.OIDC, !!application?.id); + const [ applicationInboundConfig, setApplicationInboundConfig ] = useState(undefined); + const [ useClientIdAsSubClaimForAppTokens, setUseClientIdAsSubClaimForAppTokens ] = useState(false); + const [ omitUsernameInIntrospectionRespForAppTokens, setOmitUsernameInIntrospectionRespForAppTokens ] + = useState(false); + const useClientIdAsSubClaimForAppTokensElement: MutableRefObject = useRef(); + const omitUsernameInIntrospectionRespForAppTokensElement: MutableRefObject = useRef(); + const [ bannerUpdateLoading, setBannerUpdateLoading ] = useState(false); + const [ showConfirmationModal, setShowConfirmationModal ] = useState(false); + const [ formData, setFormdata ] = useState(undefined); + + /** + * 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 +558,354 @@ const ApplicationEditPage: FunctionComponent = ( 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 && + ( + <> + { + <> + + + + + ) + } + > + + } } > + { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens" + + ".alert.title") } + + + + { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens" + + ".alert.content") } + + + + + } +