Merge pull request #6113 from DonOmalVindula/feat/ai-login-flow-impro…

…vements

Update banner designs and add missing doc links for AI features

.changeset/silly-waves-joke.md

@@ -0,0 +1,7 @@
+---
+"@wso2is/theme": patch
+"@wso2is/features": patch
+"@wso2is/console": patch
+---
+
+Add missing doclinks and optimize banner images in AI features

features/admin.ai.v1/components/branding-ai-banner.scss

@@ -101,7 +101,7 @@
     border-radius: 40px;
     border: 1px solid #CBCEDB;
     width: 100%;
-    padding: 0px 4px;
+    padding: 5px 10px;
 }
 
 .branding-ai-input-button {

features/admin.ai.v1/components/branding-ai-banner.tsx

@@ -161,7 +161,7 @@ export const BrandingAIBanner: FunctionComponent = (): ReactElement => {
                         { t("branding:ai.banner.input.subHeading") }
                         <DocumentationLink
                             link={ getLink("develop.branding.ai.learnMore") }
-                            isLinkRef={ true }>
+                        >
                             <Trans i18nKey={ "extensions:common.learnMore" }>
                                 Learn more
                             </Trans>
@@ -241,8 +241,8 @@ export const BrandingAIBanner: FunctionComponent = (): ReactElement => {
                         <Typography className="branding-ai-banner-sub-heading">
                             { t("branding:ai.banner.collapsed.subHeading") }
                             <DocumentationLink
-                                link={ "" }
-                                isLinkRef={ true }>
+                                link={ getLink("develop.branding.ai.learnMore") }
+                            >
                                 <Trans i18nKey={ "extensions:common.learnMore" }>
                                     Learn more
                                 </Trans>

features/admin.login-flow.ai.v1/components/login-flow-ai-banner.tsx

@@ -26,7 +26,7 @@ import TextField from "@oxygen-ui/react/TextField";
 import Typography from "@oxygen-ui/react/Typography";
 import { AlertLevels } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
-import { DocumentationLink, GenericIcon } from "@wso2is/react-components";
+import { DocumentationLink, GenericIcon, useDocumentation } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -50,6 +50,8 @@ const LoginFlowAIBanner: FunctionComponent = (): ReactElement => {
 
     const { isGeneratingLoginFlow } = useAILoginFlow();
 
+    const { getLink } = useDocumentation();
+
     const { filteredAuthenticators, loading: isAuthenticatorsLoading } = useAvailableAuthenticators();
 
     const { claimURI, error: userClaimError } = useUserClaims();
@@ -202,9 +204,9 @@ const LoginFlowAIBanner: FunctionComponent = (): ReactElement => {
                     <Typography className="login-flow-ai-banner-sub-heading">
                         { t("ai:aiLoginFlow.banner.input.subheading") }
                         <DocumentationLink
-                            link={ "develop.applications.editApplication.common.signInMethod." +
-                            "conditionalAuthenticaion.ai.learnMore" }
-                            isLinkRef={ true }>
+                            link={ getLink("develop.applications.editApplication.common.signInMethod." +
+                                "conditionalAuthenticaion.ai.learnMore") }
+                        >
                             <Trans i18nKey={ "extensions:common.learnMore" }>
                                 Learn more
                             </Trans>
@@ -291,8 +293,9 @@ const LoginFlowAIBanner: FunctionComponent = (): ReactElement => {
                         <Typography className="login-flow-ai-banner-sub-heading">
                             { t("ai:aiLoginFlow.banner.input.subheading") }
                             <DocumentationLink
-                                link={ "" }
-                                isLinkRef={ true }>
+                                link={ getLink("develop.applications.editApplication.common.signInMethod." +
+                                    "conditionalAuthenticaion.ai.learnMore") }
+                            >
                                 <Trans i18nKey={ "extensions:common.learnMore" }>
                                     Learn more
                                 </Trans>