feat(version): add an optional version number string that can be revealed to users

Author: codingLogan

src/Connect.tsx

@@ -10,6 +10,7 @@ import { TokenContext } from '@kyper/tokenprovider'
 import { usePrevious } from '@kyper/hooks'
 
 import * as connectActions from 'src/redux/actions/Connect'
+import { setWidgetVersion } from 'src/redux/actions/App'
 import { addAnalyticPath, removeAnalyticPath } from 'src/redux/reducers/analyticsSlice'
 
 import { isConsentEnabled, loadUserFeatures } from 'src/redux/reducers/userFeaturesSlice'
@@ -144,6 +145,7 @@ export const Connect: React.FC<ConnectProps> = ({
     dispatch(loadProfiles(props.profiles))
     dispatch(loadUserFeatures(props.userFeatures))
     dispatch(loadExperimentalFeatures(props?.experimentalFeatures || {}))
+    dispatch(setWidgetVersion(props?.version || null))
 
     // Also important to note that this is a race condition between connect
     // mounting and the master data loading the client data. It just so happens

src/__tests__/ConnectWidget-test.tsx

@@ -168,4 +168,15 @@ describe('ConnectWidget', () => {
       { timeout: 15000 },
     )
   }, 35000)
+
+  it('stores version metadata in app state from the top-level version prop', async () => {
+    render(<ConnectWidgetWithoutReduxProvider {...defaultProps} version="abcdef1234567" />, {
+      apiValue: apiValueMock,
+      store: activeStore,
+    })
+
+    await waitFor(() => {
+      expect(activeStore.getState().app.version).toBe('abcdef1234567')
+    })
+  })
 })

src/redux/actions/App.js

@@ -1,9 +1,16 @@
 export const ActionTypes = {
   SESSION_IS_TIMED_OUT: 'app/session_is_timed_out',
   HUMAN_EVENT_HAPPENED: 'app/human_event_happened',
+  SET_WIDGET_VERSION: 'app/set_widget_version',
 }
 
+export const setWidgetVersion = (version) => ({
+  type: ActionTypes.SET_WIDGET_VERSION,
+  payload: version,
+})
+
 export const dispatcher = (dispatch) => ({
   markSessionTimedOut: () => dispatch({ type: ActionTypes.SESSION_IS_TIMED_OUT }),
   handleHumanEvent: () => dispatch({ type: ActionTypes.HUMAN_EVENT_HAPPENED }),
+  setWidgetVersion: (version) => dispatch(setWidgetVersion(version)),
 })

src/redux/actions/__tests__/app-test.js

@@ -1,4 +1,4 @@
-import { dispatcher as appDispatcher, ActionTypes } from 'src/redux/actions/App'
+import { dispatcher as appDispatcher, ActionTypes, setWidgetVersion } from 'src/redux/actions/App'
 import { createReduxActionUtils } from 'src/utilities/Test'
 
 const { actions, expectDispatch, resetDispatch } = createReduxActionUtils(appDispatcher)
@@ -12,4 +12,16 @@ describe('app Dispatcher', () => {
     actions.markSessionTimedOut()
     expectDispatch({ type: ActionTypes.SESSION_IS_TIMED_OUT })
   })
+
+  it('should dispatch SET_WIDGET_VERSION', () => {
+    actions.setWidgetVersion('abc1234')
+    expectDispatch({ type: ActionTypes.SET_WIDGET_VERSION, payload: 'abc1234' })
+  })
+
+  it('should create SET_WIDGET_VERSION action', () => {
+    expect(setWidgetVersion('abc1234')).toEqual({
+      type: ActionTypes.SET_WIDGET_VERSION,
+      payload: 'abc1234',
+    })
+  })
 })

src/redux/reducers/App.js

@@ -6,18 +6,23 @@ export const defaultState = {
   // credential stuffing. See https://gitlab.mx.com/mx/connect/issues/279
   // wether or not we consider a human has used the app.
   humanEvent: false,
+  version: null,
 }
 
 const markSessionTimedOut = (state) => ({ ...state, sessionIsTimedOut: true })
 
 const handleHumanEvent = (state) => ({ ...state, humanEvent: true })
 
+const setWidgetVersion = (state, action) => ({ ...state, version: action.payload || null })
+
 export const app = (state = defaultState, action) => {
   switch (action.type) {
     case ActionTypes.SESSION_IS_TIMED_OUT:
       return markSessionTimedOut(state)
     case ActionTypes.HUMAN_EVENT_HAPPENED:
       return handleHumanEvent(state)
+    case ActionTypes.SET_WIDGET_VERSION:
+      return setWidgetVersion(state, action)
     default:
       return state
   }

src/redux/reducers/__tests__/app-test.js

@@ -1,7 +1,7 @@
 import { ActionTypes } from 'src/redux/actions/App'
 import { app as reducer, defaultState } from 'src/redux/reducers/App'
 
-const { SESSION_IS_TIMED_OUT } = ActionTypes
+const { SESSION_IS_TIMED_OUT, SET_WIDGET_VERSION } = ActionTypes
 
 describe('app reducers', () => {
   it('should return the initial state', () => {
@@ -15,4 +15,12 @@ describe('app reducers', () => {
       expect(reducer(undefined, action).sessionIsTimedOut).toBe(true)
     })
   })
+
+  describe('SET_WIDGET_VERSION', () => {
+    it('should store the widget version', () => {
+      const action = { type: SET_WIDGET_VERSION, payload: 'abc1234' }
+
+      expect(reducer(undefined, action).version).toBe('abc1234')
+    })
+  })
 })

src/redux/selectors/app.js

@@ -1 +1,3 @@
 export const getSessionIsTimedOut = (state) => state.app.sessionIsTimedOut
+
+export const getWidgetVersion = (state) => state.app.version

src/views/search/Search.js

@@ -23,6 +23,7 @@ import { IconButton } from '@mui/material'
 import { __ } from 'src/utilities/Intl'
 import * as connectActions from 'src/redux/actions/Connect'
 import { selectConnectConfig } from 'src/redux/reducers/configSlice'
+import { getWidgetVersion } from 'src/redux/selectors/app'
 import { getMembers } from 'src/redux/selectors/Connect'
 
 import { AnalyticEvents, PageviewInfo } from 'src/const/Analytics'
@@ -61,6 +62,20 @@ export const initialState = {
 
 const MAX_SUGGESTED_LIST_SIZE = 25
 
+const getVersionLabel = (version) => {
+  // Check for SHA pattern
+  if (typeof version === 'string' && /^[0-9a-f]{7,40}$/i.test(version)) {
+    return `v.${version.slice(0, 7)}`
+  }
+
+  // Trim a string that isn't a SHA pattern
+  if (typeof version === 'string' && version.trim() !== '') {
+    return `v.${version.trim()}`
+  }
+
+  return ''
+}
+
 const reducer = (state, action) => {
   switch (action.type) {
     case SEARCH_ACTIONS.LOAD_SUCCESS:
@@ -131,6 +146,7 @@ export const Search = React.forwardRef((_, navigationRef) => {
   useAnalyticsPath(...PageviewInfo.CONNECT_SEARCH, {}, false)
   const [state, dispatch] = useReducer(reducer, initialState)
   const [ariaLiveRegionMessage, setAriaLiveRegionMessage] = useState('')
+  const [headerClicks, setHeaderClicks] = useState(0)
   const searchInput = useRef('')
   const sendAnalyticsEvent = useAnalyticsEvent()
   const postMessageFunctions = useContext(PostMessageContext)
@@ -140,6 +156,7 @@ export const Search = React.forwardRef((_, navigationRef) => {
   // Redux
   const reduxDispatch = useDispatch()
   const connectConfig = useSelector(selectConnectConfig)
+  const widgetVersion = useSelector(getWidgetVersion)
   const connectedMembers = useSelector(getMembers)
   const usePopularOnly = useSelector((state) => {
     const clientProfile = state.profiles.clientProfile || {}
@@ -155,6 +172,7 @@ export const Search = React.forwardRef((_, navigationRef) => {
 
   const MINIMUM_SEARCH_LENGTH = 2
   const isFirstTimeUser = connectedMembers.length === 0
+  const versionLabel = getVersionLabel(widgetVersion)
 
   useImperativeHandle(navigationRef, () => {
     return {
@@ -331,13 +349,20 @@ export const Search = React.forwardRef((_, navigationRef) => {
           component={'h2'}
           data-test="search-header"
           id="connect-search-header"
+          onClick={() => setHeaderClicks((prev) => prev + 1)}
           style={inlineStyles.headerText}
           tabIndex={-1}
           truncate={false}
           variant="H2"
         >
           {__('Select your institution')}
         </Text>
+        {/* This version is a hidden feature unless a user is told how to find it */}
+        {headerClicks >= 5 && versionLabel && (
+          <Text data-test="search-version-label" style={inlineStyles.version}>
+            {versionLabel}
+          </Text>
+        )}
         <TextField
           InputProps={{
             startAdornment: (
@@ -450,6 +475,12 @@ const getStyles = (tokens) => {
     spinner: {
       marginTop: '24px',
     },
+    version: {
+      fontWeight: tokens.FontWeight.Semibold,
+      fontSize: tokens.FontSize.Small,
+      marginTop: '-16px',
+      marginBottom: '16px',
+    },
   }
 }
 

src/views/search/__tests__/Search-test.js

@@ -1,5 +1,11 @@
 import React from 'react'
-import { render, screen, waitFor, fireEvent } from 'src/utilities/testingLibrary'
+import {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  createTestReduxStore,
+} from 'src/utilities/testingLibrary'
 import { FAVORITE_INSTITUTIONS, SEARCHED_INSTITUTIONS } from 'src/services/mockedData'
 import { Search, buildSearchQuery, getSuggestedInstitutions } from 'src/views/search/Search'
 import { VERIFY_MODE, TAX_MODE, AGG_MODE } from 'src/const/Connect'
@@ -8,6 +14,7 @@ import { __ } from 'src/utilities/Intl'
 import { ApiProvider } from 'src/context/ApiContext'
 import { apiValue } from 'src/const/apiProviderMock'
 import { InstitutionStatusField } from 'src/utilities/institutionStatus'
+import { setWidgetVersion } from 'src/redux/actions/App'
 
 describe('Search View', () => {
   describe('Search component', () => {
@@ -77,6 +84,43 @@ describe('Search View', () => {
         expect(screen.getByText(__('No results found for ”%1”', searchTerm))).toBeInTheDocument()
       })
     })
+
+    it('shows version after clicking the header five times', async () => {
+      const ref = React.createRef()
+      const store = createTestReduxStore()
+      store.dispatch(setWidgetVersion('abcdef1234567'))
+
+      render(<Search {...defaultProps} ref={ref} />, { store })
+
+      const header = await screen.findByText('Select your institution')
+      expect(screen.queryByText('v.abcdef1')).not.toBeInTheDocument()
+
+      for (let i = 0; i < 5; i++) {
+        fireEvent.click(header)
+      }
+
+      expect(await screen.findByText('v.abcdef1')).toBeInTheDocument()
+    })
+
+    it('does not show version after five clicks when version is not provided', async () => {
+      const ref = React.createRef()
+      const store = createTestReduxStore()
+
+      const { container } = render(<Search {...defaultProps} ref={ref} />, { store })
+
+      const header = await screen.findByText('Select your institution')
+      expect(container.querySelector('[data-test="search-version-label"]')).not.toBeInTheDocument()
+
+      for (let i = 0; i < 5; i++) {
+        fireEvent.click(header)
+      }
+
+      await waitFor(() => {
+        expect(
+          container.querySelector('[data-test="search-version-label"]'),
+        ).not.toBeInTheDocument()
+      })
+    })
   })
 
   describe('buildSearchQuery function', () => {

typings/connectProps.d.ts

@@ -44,6 +44,7 @@ interface ConnectProps {
     memberPollingMilliseconds?: number
     useWebSockets?: boolean
   }
+  version?: string
 }
 interface ClientConfigType {
   _initialValues: string