feat(mobile-rules-guidance): update common components to use LinkComponent

src/DetailsView/details-view-initializer.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+
 import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-default-message-generator';
 import { Assessments } from 'assessments/assessments';
 import { assessmentsProviderWithFeaturesEnabled } from 'assessments/assessments-feature-flag-filter';
@@ -39,6 +40,7 @@ import { ReactStaticRenderer } from 'reports/react-static-renderer';
 import { ReportGenerator } from 'reports/report-generator';
 import { ReportHtmlGenerator } from 'reports/report-html-generator';
 import { WebReportNameGenerator } from 'reports/report-name-generator';
+
 import { A11YSelfValidator } from '../common/a11y-self-validator';
 import { AutoChecker } from '../common/auto-checker';
 import { AxeInfo } from '../common/axe-info';
@@ -310,6 +312,7 @@ if (isNaN(tabId) === false) {
             const assessmentReportHtmlGeneratorDeps = {
                 outcomeTypeSemanticsFromTestStatus,
                 getGuidanceTagsFromGuidanceLinks: GetGuidanceTagsFromGuidanceLinks,
+                LinkComponent: NewTabLink,
             };
             const assessmentReportHtmlGenerator = new AssessmentReportHtmlGenerator(
                 assessmentReportHtmlGeneratorDeps,

src/common/components/cards/rule-resources.tsx

@@ -2,15 +2,17 @@
 // Licensed under the MIT License.
 import { GuidanceLinks } from 'common/components/guidance-links';
 import { GuidanceTags, GuidanceTagsDeps } from 'common/components/guidance-tags';
-import { NewTabLink } from 'common/components/new-tab-link';
 import { NamedFC } from 'common/react/named-fc';
+import { LinkComponentType } from 'common/types/link-component-type';
 import { UnifiedRule } from 'common/types/store-data/unified-data-interface';
 import { isEmpty } from 'lodash';
 import * as React from 'react';
 
 import * as styles from './rule-resources.scss';
 
-export type RuleResourcesDeps = GuidanceTagsDeps;
+export type RuleResourcesDeps = GuidanceTagsDeps & {
+    LinkComponent: LinkComponentType;
+};
 
 export type RuleResourcesProps = {
     deps: RuleResourcesDeps;
@@ -35,12 +37,16 @@ export const RuleResources = NamedFC<RuleResourcesProps>('RuleResources', ({ dep
         const ruleUrl = rule.url;
         return (
             <span className={styles.ruleDetailsId}>
-                <NewTabLink href={ruleUrl}>More information about {ruleId}</NewTabLink>
+                <deps.LinkComponent href={ruleUrl}>
+                    More information about {ruleId}
+                </deps.LinkComponent>
             </span>
         );
     };
 
-    const renderGuidanceLinks = () => <GuidanceLinks links={rule.guidance} />;
+    const renderGuidanceLinks = () => (
+        <GuidanceLinks links={rule.guidance} LinkComponent={deps.LinkComponent} />
+    );
     const renderGuidanceTags = () => <GuidanceTags deps={deps} links={rule.guidance} />;
 
     return (

src/common/components/guidance-links.tsx

@@ -1,14 +1,16 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { LinkComponentType } from 'common/types/link-component-type';
 import { isEmpty } from 'lodash';
 import * as React from 'react';
 import { HyperlinkDefinition } from 'views/content/content-page';
+
 import { NamedFC } from '../react/named-fc';
-import { NewTabLink } from './new-tab-link';
 
 export interface GuidanceLinksProps {
     links: HyperlinkDefinition[];
     classNameForDiv?: string;
+    LinkComponent: LinkComponentType;
 }
 
 export const GuidanceLinks = NamedFC('GuidanceLinks', (props: GuidanceLinksProps) => {
@@ -27,11 +29,12 @@ export const GuidanceLinks = NamedFC('GuidanceLinks', (props: GuidanceLinksProps
     const renderLink = (link: HyperlinkDefinition, index: number, length: number): JSX.Element => {
         const addComma: boolean = index !== length - 1;
         const comma = addComma ? <span>,&nbsp;</span> : null;
+        const LinkComponent: LinkComponentType = props.LinkComponent;
         return (
             <React.Fragment key={`guidance-link-${index}`}>
-                <NewTabLink href={link.href} onClick={event => event.stopPropagation()}>
+                <LinkComponent href={link.href} onClick={event => event.stopPropagation()}>
                     {link.text.toUpperCase()}
-                </NewTabLink>
+                </LinkComponent>
                 {comma}
             </React.Fragment>
         );

src/injected/components/details-dialog.tsx

@@ -213,7 +213,10 @@ export class DetailsDialog extends React.Component<DetailsDialogProps, DetailsDi
             <section className="insights-dialog-success-criteria" aria-labelledby={successTitleId}>
                 {this.renderSectionTitle(sectionTitle, successTitleId)}
                 <div>
-                    <GuidanceLinks links={ruleGuidanceLinks} />
+                    <GuidanceLinks
+                        links={ruleGuidanceLinks}
+                        LinkComponent={this.props.deps.LinkComponent}
+                    />
                 </div>
             </section>
         );

src/reports/components/assessment-report-step-header.tsx

@@ -4,6 +4,7 @@ import { DefaultMessageInterface } from 'assessments/assessment-default-message-
 import { GuidanceLinks } from 'common/components/guidance-links';
 import { GuidanceTags, GuidanceTagsDeps } from 'common/components/guidance-tags';
 import { NamedFC } from 'common/react/named-fc';
+import { LinkComponentType } from 'common/types/link-component-type';
 import { ManualTestStatus } from 'common/types/manual-test-status';
 import * as React from 'react';
 
@@ -14,6 +15,7 @@ import { allRequirementOutcomeTypes } from './requirement-outcome-type';
 
 export type AssessmentReportStepHeaderDeps = GuidanceTagsDeps & {
     outcomeTypeSemanticsFromTestStatus: (testStatus: ManualTestStatus) => OutcomeTypeSemantic;
+    LinkComponent: LinkComponentType;
 };
 
 export interface AssessmentReportStepHeaderProps {
@@ -53,6 +55,7 @@ export const AssessmentReportStepHeader = NamedFC<AssessmentReportStepHeaderProp
                 <GuidanceLinks
                     classNameForDiv={`test-guidance-links-group`}
                     links={header.guidanceLinks}
+                    LinkComponent={deps.LinkComponent}
                 />
                 <OutcomeChip count={count} outcomeType={outcomeType} />
                 <GuidanceTags deps={deps} links={header.guidanceLinks} />

src/reports/components/report-sections/full-rule-header.tsx

@@ -5,15 +5,18 @@ import { GuidanceTags } from 'common/components/guidance-tags';
 import { NewTabLink } from 'common/components/new-tab-link';
 import { GetGuidanceTagsFromGuidanceLinks } from 'common/get-guidance-tags-from-guidance-links';
 import { NamedFC } from 'common/react/named-fc';
+import { LinkComponentType } from 'common/types/link-component-type';
 import { CardRuleResult } from 'common/types/store-data/card-view-model';
 import { isEmpty, kebabCase } from 'lodash';
 import * as React from 'react';
+
 import { InstanceOutcomeType } from '../instance-outcome-type';
 import { OutcomeChip } from '../outcome-chip';
 import { outcomeTypeSemantics } from '../outcome-type';
 
 export type FullRuleHeaderDeps = {
     getGuidanceTagsFromGuidanceLinks: GetGuidanceTagsFromGuidanceLinks;
+    LinkComponent: LinkComponentType;
 };
 
 export type FullRuleHeaderProps = {
@@ -63,7 +66,7 @@ export const FullRuleHeader = NamedFC<FullRuleHeaderProps>('FullRuleHeader', pro
         }
         return (
             <>
-                (<GuidanceLinks links={cardResult.guidance} />)
+                (<GuidanceLinks links={cardResult.guidance} LinkComponent={deps.LinkComponent} />)
             </>
         );
     };

src/reports/report-html-generator.tsx

@@ -2,13 +2,14 @@
 // Licensed under the MIT License.
 import { noCardInteractionsSupported } from 'common/components/cards/card-interaction-support';
 import { FixInstructionProcessor } from 'common/components/fix-instruction-processor';
+import { NewTabLink } from 'common/components/new-tab-link';
 import { NullComponent } from 'common/components/null-component';
 import { PropertyConfiguration } from 'common/configs/unified-result-property-configurations';
 import { GetGuidanceTagsFromGuidanceLinks } from 'common/get-guidance-tags-from-guidance-links';
 import { CardsViewModel } from 'common/types/store-data/card-view-model';
+import { ScanMetadata } from 'common/types/store-data/unified-data-interface';
 import * as React from 'react';
 
-import { ScanMetadata } from 'common/types/store-data/unified-data-interface';
 import { ReportBody, ReportBodyProps } from './components/report-sections/report-body';
 import { ReportCollapsibleContainerControl } from './components/report-sections/report-collapsible-container';
 import {
@@ -48,6 +49,7 @@ export class ReportHtmlGenerator {
                 getPropertyConfigById: this.getPropertyConfiguration,
                 cardInteractionSupport: noCardInteractionsSupported,
                 cardsVisualizationModifierButtons: NullComponent,
+                LinkComponent: NewTabLink,
             } as SectionDeps,
             cardsViewData: cardsViewData,
             toUtcString: this.utcDateConverter,

src/tests/unit/tests/common/components/__snapshots__/guidance-links.test.tsx.snap

@@ -1,18 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GuidanceLinksTest linkComponentType is defined as ElectronExternalLink 1`] = `
+"<span className=\\"guidance-links\\">
+  <ElectronExternalLink href=\\"https://url1\\" onClick={[Function: onClick]}>
+    TEXT1
+  </ElectronExternalLink>
+</span>"
+`;
+
 exports[`GuidanceLinksTest links is empty 1`] = `""`;
 
 exports[`GuidanceLinksTest links is not null 1`] = `
 "<span className=\\"className\\">
-  <NewTabLink href=\\"https://url1\\" onClick={[Function: onClick]}>
+  <ElectronExternalLink href=\\"https://url1\\" onClick={[Function: onClick]}>
     TEXT1
-  </NewTabLink>
+  </ElectronExternalLink>
   <span>
     , 
   </span>
-  <NewTabLink href=\\"https://url2\\" onClick={[Function: onClick]}>
+  <ElectronExternalLink href=\\"https://url2\\" onClick={[Function: onClick]}>
     TEXT2
-  </NewTabLink>
+  </ElectronExternalLink>
 </span>"
 `;