feat(filing): link edit headings to applicable FIG docs

cypress/e2e/filing/Filing.spec.js

@@ -183,6 +183,14 @@ describe(
 
               /* Action: Verify Quality Edits */
               cy.get('.EditsTableWrapper').then((wrapper) => {
+                // Verify edit links point to FIG documentation with current filing year
+                if (wrapper.find('.EditsTable caption a').length) {
+                  cy.get('.EditsTable caption a')
+                    .first()
+                    .should('have.attr', 'href')
+                    .and('match', /\/documentation\/fig\/\d{4}\/overview/)
+                }
+
                 // Verify edits, if triggered
                 if (wrapper.find('.Verifier').length)
                   cy.get('#qualityVerifier').check()

src/filing/api/utils.js

@@ -12,6 +12,13 @@ export function splitYearQuarter(per) {
   return per.split('-')
 }
 
+// Split edit IDs with sub-parts (e.g. Q659-1, Q659-2)
+// to retrieve just the primary edit ID
+export function splitEditPart(edit) {
+  if (!edit) return []
+  return edit.split('-')
+}
+
 export function yearQuarterToPath(yearPeriod) {
   const [year, quarter] = splitYearQuarter(yearPeriod)
   return formatPeriod({ year, quarter })

src/filing/submission/edits/Table.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import Pagination from '../../pagination/container.jsx'
+import { Link } from 'react-router-dom'
 import Loading from '../../../common/LoadingIcon.jsx'
+import { splitEditPart, splitYearQuarter } from '../../api/utils.js'
+import Pagination from '../../pagination/container.jsx'
 import EditsTableRow from './TableRow.jsx'
 
 import './Table.css'
@@ -61,18 +62,23 @@ export const renderBody = (edits, rows, type) => {
 export const renderTableCaption = (props) => {
   const name = props.edit.edit
   if (!name) return null
-  const renderedName = name
+  const [year] = splitYearQuarter(props.filingPeriod)
+  const [edit] = splitEditPart(name)
+
+  const linkedName = (
+    <Link to={`/documentation/fig/${year}/overview#edit-${edit}`}>{name}</Link>
+  )
   let captionHeader
 
   if (shouldSuppressTable(props)) {
-    captionHeader = `Edit ${renderedName} found`
+    captionHeader = <span>Edit {linkedName} found</span>
   } else {
     const length = props.pagination.total
     let editText = length === 1 ? 'edit' : 'edits'
     if (name === 'Q666') {
       editText = ''
     }
-    captionHeader = `${renderedName} ${editText} (${length} found)`
+    captionHeader = <span>{linkedName} {editText} ({length} found)</span>
   }
 
   if (name === 'Q666') {
@@ -168,6 +174,7 @@ EditsTable.propTypes = {
   type: PropTypes.string,
   pagination: PropTypes.object,
   paginationFade: PropTypes.number,
+  filingPeriod: PropTypes.string,
 }
 
 export default EditsTable

src/filing/submission/edits/TableWrapper.jsx

@@ -1,13 +1,12 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import Header from './Header.jsx'
+import Alert from '../../../common/Alert.jsx'
 import Loading from '../../../common/LoadingIcon.jsx'
-import EditsTable from './TableContainer.jsx'
-import Verifier from './Verifier'
-import SuppressionAlert from './SuppressionAlert.jsx'
 import RefileWarningComponent from '../../refileWarning/index.jsx'
 import submissionProgressHOC from '../progressHOC.jsx'
-import Alert from '../../../common/Alert.jsx'
+import Header from './Header.jsx'
+import SuppressionAlert from './SuppressionAlert.jsx'
+import EditsTable from './TableContainer.jsx'
+import Verifier from './Verifier'
 
 const RefileWarning = submissionProgressHOC(RefileWarningComponent)
 
@@ -78,6 +77,7 @@ export const renderTablesOrSuccess = (props, edits, type) => {
         edit={edit}
         type={type}
         suppressEdits={props.suppressEdits}
+        filingPeriod={props.filingPeriod}
         key={i}
       />
     )

src/filing/submission/edits/container.jsx

@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 import { connect } from 'react-redux'
-import EditsTableWrapper from './TableWrapper.jsx'
 import fetchEditType from '../../actions/fetchEditType.js'
 import fetchEdits from '../../actions/fetchEdits.js'
+import EditsTableWrapper from './TableWrapper.jsx'
 
 export class EditsContainer extends Component {
   componentDidMount() {
@@ -48,13 +48,14 @@ export class EditsContainer extends Component {
 
 export function mapStateToProps(state) {
   const { isFetching, types, suppressEdits } = state.app.edits
-  const { pagination } = state.app
+  const { pagination, filingPeriod } = state.app
 
   return {
     suppressEdits,
     isFetching,
     types,
     pagination,
+    filingPeriod,
   }
 }