[DC][Sidecars] Add learn more link to sidecar migration banner (#7892) (

#7894) Co-authored-by: Yoona Oh <[email protected]>
Azure · Oct 31, 2024 · 23178d4 · 23178d4
1 parent 23ef040
commit 23178d4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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',
 };