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>