feat(nav-bar-content): add table section to requirements view

src/DetailsView/components/requirement-view.tsx

@@ -1,65 +1,134 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import { AssessmentDefaultMessageGenerator } from 'assessments/assessment-default-message-generator';
 import { AssessmentsProvider } from 'assessments/types/assessments-provider';
 import { Requirement, VisualHelperToggleConfig } from 'assessments/types/requirement';
-import { NamedFC } from 'common/react/named-fc';
+import { Tab } from 'common/itab';
 import {
+    AssessmentData,
     AssessmentNavState,
     GeneratedAssessmentInstance,
+    ManualTestStepResult,
+    PersistedTabInfo,
 } from 'common/types/store-data/assessment-result-data';
+import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
+import { PathSnippetStoreData } from 'common/types/store-data/path-snippet-store-data';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
+import {
+    AssessmentViewUpdateHandler,
+    AssessmentViewUpdateHandlerDeps,
+    AssessmentViewUpdateHandlerProps,
+} from 'DetailsView/components/assessment-view-update-handler';
+import { RequirementTableSection } from 'DetailsView/components/left-nav/requirement-table-section';
 import { RequirementInstructions } from 'DetailsView/components/requirement-instructions';
 import {
     RequirementViewTitle,
     RequirementViewTitleDeps,
 } from 'DetailsView/components/requirement-view-title';
+import { AssessmentInstanceTableHandler } from 'DetailsView/handlers/assessment-instance-table-handler';
 import * as React from 'react';
 import { DictionaryStringTo } from 'types/common-types';
 import * as styles from './requirement-view.scss';
 
 export type RequirementViewDeps = {
     detailsViewActionMessageCreator: DetailsViewActionMessageCreator;
-} & RequirementViewTitleDeps;
+    assessmentViewUpdateHandler: AssessmentViewUpdateHandler;
+} & RequirementViewTitleDeps &
+    AssessmentViewUpdateHandlerDeps;
 
 export interface RequirementViewProps {
     deps: RequirementViewDeps;
     requirement: Requirement;
     assessmentsProvider: AssessmentsProvider;
     assessmentNavState: AssessmentNavState;
     instancesMap: DictionaryStringTo<GeneratedAssessmentInstance>;
-    isStepEnabled: boolean;
-    isStepScanned: boolean;
+    isRequirementEnabled: boolean;
+    isRequirementScanned: boolean;
+    assessmentInstanceTableHandler: AssessmentInstanceTableHandler;
+    featureFlagStoreData: FeatureFlagStoreData;
+    pathSnippetStoreData: PathSnippetStoreData;
+    scanningInProgress: boolean;
+    manualRequirementResultMap: DictionaryStringTo<ManualTestStepResult>;
+    assessmentDefaultMessageGenerator: AssessmentDefaultMessageGenerator;
+    assessmentData: AssessmentData;
+    currentTarget: Tab;
+    prevTarget: PersistedTabInfo;
 }
 
-export const RequirementView = NamedFC<RequirementViewProps>('RequirementView', props => {
-    const requirement: Readonly<Requirement> = props.assessmentsProvider.getStep(
-        props.assessmentNavState.selectedTestType,
-        props.assessmentNavState.selectedTestSubview,
-    );
+export class RequirementView extends React.Component<RequirementViewProps> {
+    public componentDidMount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onMount(this.getUpdateHandlerProps(this.props));
+    }
+
+    public componentDidUpdate(prevProps: RequirementViewProps): void {
+        this.props.deps.assessmentViewUpdateHandler.update(
+            this.getUpdateHandlerProps(prevProps),
+            this.getUpdateHandlerProps(this.props),
+        );
+    }
+
+    public componentWillUnmount(): void {
+        this.props.deps.assessmentViewUpdateHandler.onUnmount(
+            this.getUpdateHandlerProps(this.props),
+        );
+    }
 
-    const visualHelperToggleConfig: VisualHelperToggleConfig = {
-        deps: props.deps,
-        assessmentNavState: props.assessmentNavState,
-        instancesMap: props.instancesMap,
-        isStepEnabled: props.isStepEnabled,
-        isStepScanned: props.isStepScanned,
-    };
+    private getUpdateHandlerProps(props: RequirementViewProps): AssessmentViewUpdateHandlerProps {
+        return {
+            deps: props.deps,
+            isRequirementEnabled: props.isRequirementEnabled,
+            assessmentNavState: props.assessmentNavState,
+            assessmentData: props.assessmentData,
+            prevTarget: props.prevTarget,
+            currentTarget: props.currentTarget,
+        };
+    }
 
-    const visualHelperToggle = requirement.getVisualHelperToggle
-        ? requirement.getVisualHelperToggle(visualHelperToggleConfig)
-        : null;
+    public render(): JSX.Element {
+        const requirement: Readonly<Requirement> = this.props.assessmentsProvider.getStep(
+            this.props.assessmentNavState.selectedTestType,
+            this.props.assessmentNavState.selectedTestSubview,
+        );
+        const requirementHasVisualHelper = !!requirement.getVisualHelperToggle;
 
-    return (
-        <div className={styles.requirementView}>
-            <RequirementViewTitle
-                deps={props.deps}
-                name={props.requirement.name}
-                guidanceLinks={props.requirement.guidanceLinks}
-                infoAndExamples={props.requirement.infoAndExamples}
-            />
-            {props.requirement.description}
-            {visualHelperToggle}
-            <RequirementInstructions howToTest={props.requirement.howToTest} />
-        </div>
-    );
-});
+        const visualHelperToggleConfig: VisualHelperToggleConfig = {
+            deps: this.props.deps,
+            assessmentNavState: this.props.assessmentNavState,
+            instancesMap: this.props.instancesMap,
+            isStepEnabled: this.props.isRequirementEnabled,
+            isStepScanned: this.props.isRequirementScanned,
+        };
+
+        const visualHelperToggle = requirementHasVisualHelper
+            ? requirement.getVisualHelperToggle(visualHelperToggleConfig)
+            : null;
+
+        return (
+            <div className={styles.requirementView}>
+                <RequirementViewTitle
+                    deps={this.props.deps}
+                    name={this.props.requirement.name}
+                    guidanceLinks={this.props.requirement.guidanceLinks}
+                    infoAndExamples={this.props.requirement.infoAndExamples}
+                />
+                {this.props.requirement.description}
+                {visualHelperToggle}
+                <RequirementInstructions howToTest={this.props.requirement.howToTest} />
+                <RequirementTableSection
+                    requirement={requirement}
+                    assessmentNavState={this.props.assessmentNavState}
+                    instancesMap={this.props.instancesMap}
+                    manualRequirementResultMap={this.props.manualRequirementResultMap}
+                    assessmentInstanceTableHandler={this.props.assessmentInstanceTableHandler}
+                    assessmentsProvider={this.props.assessmentsProvider}
+                    featureFlagStoreData={this.props.featureFlagStoreData}
+                    pathSnippetStoreData={this.props.pathSnippetStoreData}
+                    scanningInProgress={this.props.scanningInProgress}
+                    selectedRequirementHasVisualHelper={requirementHasVisualHelper}
+                    isRequirementScanned={this.props.isRequirementScanned}
+                    assessmentDefaultMessageGenerator={this.props.assessmentDefaultMessageGenerator}
+                />
+            </div>
+        );
+    }
+}

src/tests/unit/tests/DetailsView/components/__snapshots__/requirement-view.test.tsx.snap

@@ -5,7 +5,13 @@ exports[`RequirementViewTest renders with content from props 1`] = `
   className="requirementView"
 >
   <RequirementViewTitle
-    deps={Object {}}
+    deps={
+      Object {
+        "assessmentViewUpdateHandler": proxy {
+          "___id": "BCDF5CE5-F0DF-40B7-8BA0-69DF395033C8",
+        },
+      }
+    }
     name="test-requirement-name"
   />
   <div>
@@ -21,5 +27,46 @@ exports[`RequirementViewTest renders with content from props 1`] = `
       </p>
     }
   />
+  <RequirementTableSection
+    assessmentInstanceTableHandler={
+      Object {
+        "changeRequirementStatus": null,
+      }
+    }
+    assessmentNavState={
+      Object {
+        "selectedTestSubview": "test-requirement-name",
+        "selectedTestType": 0,
+      }
+    }
+    assessmentsProvider={
+      proxy {
+        "___id": "BCDF5CE5-F0DF-40B7-8BA0-69DF395033C8",
+      }
+    }
+    featureFlagStoreData={
+      Object {
+        "some feature flag": true,
+      }
+    }
+    instancesMap={Object {}}
+    isRequirementScanned={true}
+    manualRequirementResultMap={
+      Object {
+        "some manual test step result id": null,
+      }
+    }
+    pathSnippetStoreData={
+      Object {
+        "path": null,
+      }
+    }
+    requirement={
+      Object {
+        "getVisualHelperToggle": [Function],
+      }
+    }
+    selectedRequirementHasVisualHelper={true}
+  />
 </div>
 `;