diff --git a/src/client/components/CompanyLocalHeader/index.jsx b/src/client/components/CompanyLocalHeader/index.jsx index 529acd43972..46a84eebbe7 100644 --- a/src/client/components/CompanyLocalHeader/index.jsx +++ b/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 + {hasExportWinFeatureGroup && ( + + )} diff --git a/src/client/components/CompanyLocalHeader/state.js b/src/client/components/CompanyLocalHeader/state.js index f81a4dea510..a7b488639e5 100644 --- a/src/client/components/CompanyLocalHeader/state.js +++ b/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'), }) diff --git a/src/client/modules/ExportPipeline/ExportList/index.jsx b/src/client/modules/ExportPipeline/ExportList/index.jsx index cd2fc83279d..53d47bcb131 100644 --- a/src/client/modules/ExportPipeline/ExportList/index.jsx +++ b/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 = ({ {' '} Exports - {filters.areActive && ( - - Remove all filters - - )} + + {filters.areActive && ( + + Remove all filters + + )} + {hasExportWinFeatureGroup && ( + + Export wins + + )} + )} @@ -239,6 +264,7 @@ ExportList.propTypes = { results: PropTypes.array, itemsPerPage: PropTypes.number, maxItemsToPaginate: PropTypes.number, + hasExportWinFeatureGroup: PropTypes.bool, } export default connect(state2props)(ExportList) diff --git a/src/client/modules/ExportPipeline/ExportList/state.js b/src/client/modules/ExportPipeline/ExportList/state.js index 2f7765310ec..e25217d8db3 100644 --- a/src/client/modules/ExportPipeline/ExportList/state.js +++ b/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, } } diff --git a/test/functional/cypress/specs/export-win/user-feature-group-spec.js b/test/functional/cypress/specs/export-win/user-feature-group-spec.js new file mode 100644 index 00000000000..13b9919972d --- /dev/null +++ b/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') + }) + }) +})