From 23178d4405d39828e21ed26cf11410559e5c0c96 Mon Sep 17 00:00:00 2001
From: Yoona Oh <jyoonaoh@gmail.com>
Date: Thu, 31 Oct 2024 14:09:04 -0700
Subject: [PATCH] [DC][Sidecars] Add learn more link to sidecar migration
 banner (#7892) (#7894)

Co-authored-by: Yoona Oh <yoonaoh@microsoft.com>
---
 .../CustomBanner/CustomBanner.styles.ts       |  7 +++++
 .../DeploymentCenterContainerSettings.tsx     | 26 ++++++++++++++-----
 client-react/src/utils/FwLinks.ts             |  1 +
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client-react/src/components/CustomBanner/CustomBanner.styles.ts b/client-react/src/components/CustomBanner/CustomBanner.styles.ts
index d4d90d9fee..38dc7da84c 100644
--- a/client-react/src/components/CustomBanner/CustomBanner.styles.ts
+++ b/client-react/src/components/CustomBanner/CustomBanner.styles.ts
@@ -76,3 +76,10 @@ export const bannerLinkStyle = (theme: ThemeExtended) =>
       },
     },
   });
+
+// NOTE(yoonaoh): The color of the link is set to the default Fluent UI link color.
+// Using the statusBar link color from @fluentui/azure-themes instead
+export const customBannerLinkStyle = (theme: ThemeExtended) =>
+  style({
+    color: theme?.semanticColors?.link?.toLowerCase() == '#0078d4' ? '#005A9E' : '#6CB8F6',
+  });
diff --git a/client-react/src/pages/app/deployment-center/container/DeploymentCenterContainerSettings.tsx b/client-react/src/pages/app/deployment-center/container/DeploymentCenterContainerSettings.tsx
index 8befeebd37..ed1e08d8cf 100644
--- a/client-react/src/pages/app/deployment-center/container/DeploymentCenterContainerSettings.tsx
+++ b/client-react/src/pages/app/deployment-center/container/DeploymentCenterContainerSettings.tsx
@@ -26,7 +26,7 @@ import DeploymentCenterGitHubConfiguredView from '../github-provider/DeploymentC
 import DeploymentCenterContainerSettingsReadOnlyView from './DeploymentCenterContainerSettingsReadOnlyView';
 import { SiteStateContext } from '../../../../SiteState';
 import DeploymentCenterVstsBuildProvider from '../devops-provider/DeploymentCenterVstsBuildProvider';
-import { MessageBar, MessageBarType, PrimaryButton, ProgressIndicator, Text } from '@fluentui/react';
+import { Link, MessageBar, MessageBarType, PrimaryButton, ProgressIndicator } from '@fluentui/react';
 import { AppOs, SiteContainer } from '../../../../models/site/site';
 import DeploymentCenterData from '../DeploymentCenter.data';
 import { PortalContext } from '../../../../PortalContext';
@@ -35,7 +35,10 @@ import { AcrDependency } from '../../../../utils/dependency/Dependency';
 import DeploymentCenterVstsBuildConfiguredView from '../devops-provider/DeploymentCenterVstsBuildConfiguredView';
 import { ArmObj } from '../../../../models/arm-obj';
 import { style } from 'typestyle';
-import { migrationBannerStyle } from '../DeploymentCenter.styles';
+import { migrationBannerStyle, titleWithPaddingStyle } from '../DeploymentCenter.styles';
+import { DeploymentCenterLinks } from '../../../../utils/FwLinks';
+import { ThemeContext } from '../../../../ThemeContext';
+import { customBannerLinkStyle } from '../../../../components/CustomBanner/CustomBanner.styles';
 
 const DeploymentCenterContainerSettings: React.FC<DeploymentCenterFieldProps<DeploymentCenterContainerFormData>> = props => {
   const { formProps, isDataRefreshing } = props;
@@ -48,6 +51,8 @@ const DeploymentCenterContainerSettings: React.FC<DeploymentCenterFieldProps<Dep
   const [showVstsReadOnlyView, setShowVstsReadOnlyView] = useState(false);
   const [showSourceSelectionOption, setShowSourceSelectionOption] = useState(false);
   const [enableSidecarMigration, setEnableSidecarMigration] = useState(false);
+  const theme = useContext(ThemeContext);
+  const linkStyle = customBannerLinkStyle(theme);
 
   // NOTE(michinoy): The serverUrl, image, username, and password are retrieved from  one of three sources:
   // acr, dockerHub, or privateRegistry.
@@ -397,14 +402,23 @@ const DeploymentCenterContainerSettings: React.FC<DeploymentCenterFieldProps<Dep
     return (
       <>
         {showMigrationBanner && (
-          <>
+          <div className={titleWithPaddingStyle}>
             <MessageBar messageBarType={MessageBarType.warning}>
               <div className={migrationBannerStyle}>
-                <Text>{t('deploymentCenterUpdateToSidecarContainers')}</Text>
-                <PrimaryButton text={t('startUpdate')} onClick={openUpdateToSidecarPane} className={style({ maxWidth: '130px' })} />
+                <span>
+                  <span tabIndex={0}>{t('deploymentCenterUpdateToSidecarContainers')}</span>
+                  <Link className={linkStyle} href={DeploymentCenterLinks.sidecarsLink} target="_blank" aria-label={t('learnMore')}>
+                    {t('learnMore')}
+                  </Link>
+                </span>
+                <PrimaryButton
+                  text={t('startUpdate')}
+                  onClick={openUpdateToSidecarPane}
+                  className={style({ maxWidth: '125px', maxHeight: '40px' })}
+                />
               </div>
             </MessageBar>
-          </>
+          </div>
         )}
 
         {showSourceSelectionOption && <DeploymentCenterContainerSource formProps={formProps} />}
diff --git a/client-react/src/utils/FwLinks.ts b/client-react/src/utils/FwLinks.ts
index f966bab301..3f7efd6c21 100644
--- a/client-react/src/utils/FwLinks.ts
+++ b/client-react/src/utils/FwLinks.ts
@@ -85,4 +85,5 @@ export const DeploymentCenterLinks = {
   roleAssignmentPrereqs: 'https://go.microsoft.com/fwlink/?linkid=2249489',
   managedIdentityCreationPrereqs: 'https://go.microsoft.com/fwlink/?linkid=2253463',
   oidcPermissionPrereqs: 'https://go.microsoft.com/fwlink/?linkid=2256502',
+  sidecarsLink: 'https://go.microsoft.com/fwlink/?linkid=2295005',
 };