From 088ed45c2ad637293be6daf08588f4eb8eb1c470 Mon Sep 17 00:00:00 2001
From: Madhavi Gayathri <madhavi.17@cse.mrt.ac.lk>
Date: Tue, 27 Aug 2024 21:12:52 +0530
Subject: [PATCH] Add design suggestions.

---
 .../pages/application-edit.tsx                | 126 ++++++++----------
 1 file changed, 57 insertions(+), 69 deletions(-)

diff --git a/features/admin.applications.v1/pages/application-edit.tsx b/features/admin.applications.v1/pages/application-edit.tsx
index b0293ccec08..f2b07ae443c 100755
--- a/features/admin.applications.v1/pages/application-edit.tsx
+++ b/features/admin.applications.v1/pages/application-edit.tsx
@@ -629,85 +629,74 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
         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"
+                    {
+                        !applicationInboundConfig
+                            .useClientIdAsSubClaimForAppTokens && (
+                            <>
+                                <Trans
+                                    i18nKey={
+                                        t("applications:forms.inboundOIDC.sections"
                                                     + ".legacyApplicationTokens.fields."
                                                     + "useClientIdAsSubClaimForAppTokens.instruction")
-                                        }
-                                    />
-                                    <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."
+                                    }
+                                />
+                                <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);
+                                            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 {
-                                                if (values.get("omitUsernameInIntrospectionRespForAppTokens")
-                                                    .length === 0) {
-                                                    setBannerSubmitDisabled(true);
-                                                } else {
-                                                    setBannerSubmitDisabled(false);
-                                                }
+                                                setBannerSubmitDisabled(false);
                                             }
-                                            setUseClientIdAsSubClaimForAppTokens(
-                                                !useClientIdAsSubClaimForAppTokens);
-                                        }
                                         }
-                                    />
-                                    <Hint>
-                                        { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
+                                        setUseClientIdAsSubClaimForAppTokens(
+                                            !useClientIdAsSubClaimForAppTokens);
+                                    }
+                                    }
+                                />
+                                <Hint>
+                                    { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
                                                 + "fields.useClientIdAsSubClaimForAppTokens.hint") }
-                                    </Hint>
-                                </li>
-                            )
-                        }
-                        {
-                            (!applicationInboundConfig.omitUsernameInIntrospectionRespForAppTokens
+                                </Hint>
+                            </>
+                        )
+                    }
+                    {
+                        (!applicationInboundConfig.omitUsernameInIntrospectionRespForAppTokens
                             && !applicationInboundConfig.useClientIdAsSubClaimForAppTokens) &&
                         (
                             <Divider hidden />
                         )
-                        }
-                        {
-                            (!applicationInboundConfig
-                                .omitUsernameInIntrospectionRespForAppTokens) &&
+                    }
+                    {
+                        (!applicationInboundConfig
+                            .omitUsernameInIntrospectionRespForAppTokens) &&
                                 (
-                                    <li>
+                                    <>
                                         <Trans
                                             i18nKey={
                                                 t("applications:forms.inboundOIDC.sections"
@@ -756,10 +745,9 @@ const ApplicationEditPage: FunctionComponent<ApplicationEditPageInterface> = (
                                             { t("applications:forms.inboundOIDC.sections.legacyApplicationTokens."
                                             + "fields.omitUsernameInIntrospectionRespForAppTokens.hint") }
                                         </Hint>
-                                    </li>
+                                    </>
                                 )
-                        }
-                    </ol>
+                    }
                 </Grid>
                 <Button
                     variant="contained"