Add export win button and link behind a user feature group

src/client/components/CompanyLocalHeader/index.jsx

@@ -124,6 +124,7 @@ const CompanyLocalHeader = ({
   flashMessages,
   company,
   csrfToken,
+  hasExportWinFeatureGroup,
 }) =>
   company && (
     <>
@@ -188,6 +189,18 @@ const CompanyLocalHeader = ({
               >
                 Add export project
               </Button>
+              {hasExportWinFeatureGroup && (
+                <Button
+                  as={StyledButtonLink}
+                  data-test="header-add-export-win"
+                  href={`${urls.companies.exportWins.create()}?step=officer_details&company=${company.id}`}
+                  aria-label={`Add export win`}
+                  buttonColour={GREY_3}
+                  buttonTextColour={TEXT_COLOUR}
+                >
+                  Add export win
+                </Button>
+              )}
             </StyledButtonContainer>
           </GridCol>
         </GridRow>

src/client/components/CompanyLocalHeader/state.js

@@ -4,4 +4,5 @@ export const state2props = (state) => state[ID]
 
 export const companyState2Props = (state) => ({
   csrfToken: state.csrfToken,
+  hasExportWinFeatureGroup: state.activeFeatureGroups?.includes('export-wins'),
 })

src/client/modules/ExportPipeline/ExportList/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useHistory } from 'react-router-dom'
 import { HEADING_SIZES, FONT_SIZE, MEDIA_QUERIES } from '@govuk-react/constants'
-import { UnorderedList, ListItem, H2 } from 'govuk-react'
+import { UnorderedList, ListItem, H2, Link } from 'govuk-react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
@@ -13,6 +13,7 @@ import { MID_GREY } from '../../../utils/colours'
 import ListItemRenderer from './ItemRenderer'
 import Task from '../../../components/Task'
 import ExportSelect from './ExportSelect'
+import urls from '../../../../lib/urls'
 import ExportDate from './ExportDate'
 import List from './List'
 
@@ -68,8 +69,18 @@ const HeaderContainer = styled('div')({
   marginTop: 30,
 })
 
+const LinkContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 5,
+  alignItems: 'end',
+  gap: 10,
+})
+
 const StyledButtonLink = styled(ButtonLink)({
   marginBottom: 0,
+  border: 0,
+  padding: 0,
 })
 
 const ListContainer = styled('div')({
@@ -83,6 +94,7 @@ const ExportList = ({
   maxItemsToPaginate,
   payload,
   filters,
+  hasExportWinFeatureGroup,
 }) => {
   const history = useHistory()
   const maxItems = Math.min(count, maxItemsToPaginate)
@@ -168,11 +180,24 @@ const ExportList = ({
               </StyledResultCount>{' '}
               Exports
             </StyledHeader>
-            {filters.areActive && (
-              <StyledButtonLink onClick={onClearAll} data-test="clear-filters">
-                Remove all filters
-              </StyledButtonLink>
-            )}
+            <LinkContainer>
+              {filters.areActive && (
+                <StyledButtonLink
+                  onClick={onClearAll}
+                  data-test="clear-filters"
+                >
+                  Remove all filters
+                </StyledButtonLink>
+              )}
+              {hasExportWinFeatureGroup && (
+                <Link
+                  href={urls.companies.exportWins.index()}
+                  data-test="export-wins"
+                >
+                  Export wins
+                </Link>
+              )}
+            </LinkContainer>
           </HeaderContainer>
         </>
       )}
@@ -239,6 +264,7 @@ ExportList.propTypes = {
   results: PropTypes.array,
   itemsPerPage: PropTypes.number,
   maxItemsToPaginate: PropTypes.number,
+  hasExportWinFeatureGroup: PropTypes.bool,
 }
 
 export default connect(state2props)(ExportList)

src/client/modules/ExportPipeline/ExportList/state.js

@@ -28,6 +28,8 @@ const areFiltersActive = (queryParams) => {
 export const state2props = ({ router, ...state }) => {
   const queryParams = getQueryParamsFromLocation(router.location)
   const { sectorOptions, countryOptions, ownerOptions } = state[ID]
+  const hasExportWinFeatureGroup =
+    state.activeFeatureGroups?.includes('export-wins')
   return {
     ...state[ID],
     payload: {
@@ -55,5 +57,6 @@ export const state2props = ({ router, ...state }) => {
         options: SORT_OPTIONS,
       },
     },
+    hasExportWinFeatureGroup,
   }
 }

test/functional/cypress/specs/export-win/user-feature-group-spec.js

@@ -0,0 +1,55 @@
+import qs from 'qs'
+
+import { exportListFaker } from '../../fakers/export'
+import urls from '../../../../../src/lib/urls'
+
+describe('Export win user feature groups', () => {
+  const company = '/companies/00009ae3-1912-e411-8a2b-e4115bead28a/overview'
+
+  context('Company page"', () => {
+    it('should show the "Add export win" button', () => {
+      cy.setUserFeatureGroups(['export-wins'])
+      cy.visit(company)
+      cy.get('[data-test="header-add-export-win"]').should('exist')
+    })
+    it('should hide the "Add export win" button', () => {
+      cy.setUserFeatureGroups([])
+      cy.visit(company)
+      cy.get('[data-test="header-add-export-win"]').should('not.exist')
+    })
+  })
+
+  context('Dashboard"', () => {
+    const exports = exportListFaker(3)
+    const endpoint = '/api-proxy/v4/export'
+    const queryParams = qs.stringify({
+      limit: 10,
+      page: 1,
+      offset: 0,
+      archived: false,
+      sortby: 'created_on:desc',
+    })
+
+    beforeEach(() => {
+      cy.intercept('GET', `${endpoint}?${queryParams}`, {
+        body: {
+          count: exports.length,
+          results: exports,
+        },
+      }).as('apiReqList')
+      cy.intercept('GET', '/api-proxy/v4/export/owner', [])
+    })
+
+    it('should show the "Add export win" link', () => {
+      cy.setUserFeatureGroups(['export-wins'])
+      cy.visit(urls.exportPipeline.index())
+      cy.get('[data-test="export-wins"]').should('exist')
+    })
+
+    it('should hide the "Add export win" button', () => {
+      cy.setUserFeatureGroups([])
+      cy.visit(urls.exportPipeline.index())
+      cy.get('[data-test="export-wins"]').should('not.exist')
+    })
+  })
+})