fix: No links to needs-review doc pages? #7007

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

@@ -6,6 +6,7 @@ import { NarrowModeStatus } from 'DetailsView/components/narrow-mode-detector';
 import * as React from 'react';
 
 import { TargetAppData } from '../../../common/types/store-data/unified-data-interface';
+import { InstanceOutcomeType } from '../../../reports/components/instance-outcome-type';
 import { CardRuleResult } from '../../types/store-data/card-view-model';
 import { UserConfigurationStoreData } from '../../types/store-data/user-configuration-store';
 import { InstanceDetailsGroup, InstanceDetailsGroupDeps } from './instance-details-group';
@@ -20,6 +21,7 @@ export type RuleContentProps = {
     targetAppInfo: TargetAppData;
     cardSelectionMessageCreator?: CardSelectionMessageCreator;
     narrowModeStatus?: NarrowModeStatus;
+    outcomeType: InstanceOutcomeType;
 };
 
 export const RuleContent = NamedFC<RuleContentProps>('RuleContent', props => {

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

@@ -8,6 +8,11 @@ import { UnifiedRule } from 'common/types/store-data/unified-data-interface';
 import { isEmpty } from 'lodash';
 import * as React from 'react';
 
+import { InstanceOutcomeType } from '../../../reports/components/instance-outcome-type';
+import {
+    getNeedsReviewRuleResourcesUrl,
+    isOutcomeNeedsReview,
+} from '../../configs/needs-review-rule-resources';
 import styles from './rule-resources.scss';
 
 export type RuleResourcesDeps = GuidanceTagsDeps & {
@@ -17,46 +22,53 @@ export type RuleResourcesDeps = GuidanceTagsDeps & {
 export type RuleResourcesProps = {
     deps: RuleResourcesDeps;
     rule: UnifiedRule;
+    outcomeType: InstanceOutcomeType;
 };
 
-export const RuleResources = NamedFC<RuleResourcesProps>('RuleResources', ({ deps, rule }) => {
-    if (rule.url == null && isEmpty(rule.guidance)) {
-        return null;
-    }
-
-    const renderTitle = () => (
-        <div className={styles.moreResourcesTitle}>Resources for this rule</div>
-    );
-
-    const renderRuleLink = () => {
-        if (rule.url == null) {
+export const RuleResources = NamedFC<RuleResourcesProps>(
+    'RuleResources',
+    ({ deps, rule, outcomeType }) => {
+        if (rule.url == null && isEmpty(rule.guidance)) {
             return null;
         }
 
-        const ruleId = rule.id;
-        const ruleUrl = rule.url;
+        const renderTitle = () => (
+            <div className={styles.moreResourcesTitle}>Resources for this rule</div>
+        );
+
+        const renderRuleLink = () => {
+            if (rule.url == null) {
+                return null;
+            }
+
+            const ruleId = rule.id;
+            const ruleUrl = isOutcomeNeedsReview(ruleId, outcomeType)
+                ? getNeedsReviewRuleResourcesUrl(ruleId)
+                : rule.url;
+
+            return (
+                <span className={styles.ruleDetailsId}>
+                    <deps.LinkComponent href={ruleUrl}>
+                        More information about {ruleId}
+                    </deps.LinkComponent>
+                </span>
+            );
+        };
+
+        const renderGuidanceLinks = () => {
+            return <GuidanceLinks links={rule.guidance!} LinkComponent={deps.LinkComponent} />;
+        };
+        const renderGuidanceTags = () => <GuidanceTags deps={deps} links={rule.guidance!} />;
+
         return (
-            <span className={styles.ruleDetailsId}>
-                <deps.LinkComponent href={ruleUrl}>
-                    More information about {ruleId}
-                </deps.LinkComponent>
-            </span>
+            <div className={styles.ruleMoreResources}>
+                {renderTitle()}
+                {renderRuleLink()}
+                <span className={styles.ruleGuidance}>
+                    {renderGuidanceLinks()}
+                    {renderGuidanceTags()}
+                </span>
+            </div>
         );
-    };
-
-    const renderGuidanceLinks = () => {
-        return <GuidanceLinks links={rule.guidance!} LinkComponent={deps.LinkComponent} />;
-    };
-    const renderGuidanceTags = () => <GuidanceTags deps={deps} links={rule.guidance!} />;
-
-    return (
-        <div className={styles.ruleMoreResources}>
-            {renderTitle()}
-            {renderRuleLink()}
-            <span className={styles.ruleGuidance}>
-                {renderGuidanceLinks()}
-                {renderGuidanceTags()}
-            </span>
-        </div>
-    );
-});
+    },
+);

src/common/components/cards/rules-with-instances.tsx

@@ -73,6 +73,7 @@ export const RulesWithInstances = NamedFC<RulesWithInstancesProps>(
                         key={`${rule.id}-rule-group`}
                         deps={deps}
                         rule={rule}
+                        outcomeType={outcomeType}
                         userConfigurationStoreData={userConfigurationStoreData}
                         targetAppInfo={targetAppInfo}
                         cardSelectionMessageCreator={cardSelectionMessageCreator}

src/common/configs/needs-review-rule-resources.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+const needsReviewRuleResourcesPath =
+    'https://accessibilityinsights.io/info-examples/web/needs-review';
+
+export const isOutcomeNeedsReview = (ruleId: string, outcomeType: string) => {
+    return needsReviewRules.includes(ruleId) && outcomeType === 'review' ? true : false;
+};
+
+export const getNeedsReviewRuleResourcesUrl = (ruleId: string) => {
+    return `${needsReviewRuleResourcesPath}/${ruleId}`;
+};
+
+const needsReviewRules = [
+    'aria-input-field-name',
+    'color-contrast',
+    'th-has-data-cells',
+    'link-in-text-block',
+    'p-as-heading',
+];

src/tests/unit/tests/common/components/cards/__snapshots__/rules-with-instances.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`RulesWithInstances renders 1`] = `
             "fixInstructionProcessor": [typemoq mock object],
           }
         }
+        outcomeType="pass"
         rule={
           {
             "description": "sample-description",

src/tests/unit/tests/common/components/cards/rule-resources.test.tsx

@@ -54,6 +54,7 @@ describe('RuleResources', () => {
                 deps: {
                     LinkComponent: linkComponents[testCase.linkComponent],
                 } as RuleResourcesDeps,
+                outcomeType: 'pass',
             };
 
             const wrapper = shallow(<RuleResources {...props} />);

src/tests/unit/tests/common/configs/needs-review-rule-resources.test.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import {
+    getNeedsReviewRuleResourcesUrl,
+    isOutcomeNeedsReview,
+} from 'common/configs/needs-review-rule-resources';
+
+describe(getNeedsReviewRuleResourcesUrl, () => {
+    const ruleId = 'rule-id';
+
+    it('for ruleId passed to get NeedsReviewRuleResourcesUrl', () => {
+        const needsReviewRuleResourcesPath =
+            'https://accessibilityinsights.io/info-examples/web/needs-review';
+
+        const expectedUrl = `${needsReviewRuleResourcesPath}/${ruleId}`;
+
+        const resourceUrl = getNeedsReviewRuleResourcesUrl(ruleId);
+
+        expect(resourceUrl).toBe(expectedUrl);
+    });
+});
+
+describe(isOutcomeNeedsReview, () => {
+    const ruleId = 'color-contrast';
+    const outcomeType = 'review';
+
+    it('for outcome that is review and ruleId is eligble for needsReview', () => {
+        const expectedBoolean = true;
+
+        const result = isOutcomeNeedsReview(ruleId, outcomeType);
+
+        expect(result).toBe(expectedBoolean);
+    });
+
+    it('for outcome that is not review and ruleId is eligble for needsReview', () => {
+        const otherOutcomeType = 'issue';
+
+        const expectedBoolean = false;
+
+        const result = isOutcomeNeedsReview(ruleId, otherOutcomeType);
+
+        expect(result).toBe(expectedBoolean);
+    });
+
+    it('for outcome that is review and ruleId is not eligble for needsReview', () => {
+        const otherRuleId = 'rule-id';
+
+        const expectedBoolean = false;
+
+        const result = isOutcomeNeedsReview(otherRuleId, outcomeType);
+
+        expect(result).toBe(expectedBoolean);
+    });
+
+    it('for outcome that is not review and ruleId is not eligble for needsReview', () => {
+        const otherRuleId = 'rule-id';
+
+        const otherOutcomeType = 'issue';
+
+        const expectedBoolean = false;
+
+        const result = isOutcomeNeedsReview(otherRuleId, otherOutcomeType);
+
+        expect(result).toBe(expectedBoolean);
+    });
+});