diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -20,6 +20,7 @@ ModalProvider, useModalContext, } from 'lib/components/modal-provider.react.js'; +import { StaffContextProvider } from 'lib/components/staff-provider.react.js'; import { createLoadingStatusSelector, combineLoadingStatuses, @@ -189,8 +190,10 @@ <> - {this.renderMainContent()} - {this.props.modals} + + {this.renderMainContent()} + {this.props.modals} + > diff --git a/web/settings/build-info-panel.react.js b/web/settings/build-info-panel.react.js new file mode 100644 --- /dev/null +++ b/web/settings/build-info-panel.react.js @@ -0,0 +1,22 @@ +// @flow + +import * as React from 'react'; + +import css from './build-info.css'; +import BuildInfo from './build-info.react.js'; +import PanelHeader from '../components/panel-header.react.js'; +import Panel, { type PanelData } from '../components/panel.react.js'; + +const panelData: $ReadOnlyArray = [ + { + header: , + body: , + classNameOveride: css.container, + }, +]; + +function BuildInfoPanel(): React.Node { + return ; +} + +export default BuildInfoPanel; diff --git a/web/settings/build-info.css b/web/settings/build-info.css new file mode 100644 --- /dev/null +++ b/web/settings/build-info.css @@ -0,0 +1,23 @@ +.container { + flex: 1; +} + +.contentContainer { + padding: 16px; + display: flex; + flex-direction: column; + row-gap: 8px; +} + +.infoRow { + display: flex; + justify-content: space-between; +} + +.labelText { + color: var(--text-background-tertiary-default); +} + +.valueText { + color: var(--text-background-secondary-default); +} diff --git a/web/settings/build-info.react.js b/web/settings/build-info.react.js new file mode 100644 --- /dev/null +++ b/web/settings/build-info.react.js @@ -0,0 +1,64 @@ +// @flow + +import * as React from 'react'; + +import { useStaffContext } from 'lib/components/staff-provider.react.js'; +import { useIsCurrentUserStaff } from 'lib/shared/staff-utils.js'; +import { getConfig } from 'lib/utils/config.js'; +import { isDev } from 'lib/utils/dev-utils.js'; + +import css from './build-info.css'; +import { useStaffCanSee } from '../utils/staff-utils.js'; + +function BuildInfo(): React.Node { + const { codeVersion, stateVersion } = getConfig().platformDetails; + + const { staffUserHasBeenLoggedIn } = useStaffContext(); + + const staffCanSee = useStaffCanSee(); + + const isCurrentUserStaff = useIsCurrentUserStaff(); + + const staffOnlyRows = React.useMemo(() => { + if (!staffCanSee && !staffUserHasBeenLoggedIn) { + return null; + } + + return ( + <> + + __DEV__ + {isDev ? 'TRUE' : 'FALSE'} + + + isCurrentUserStaff + + {isCurrentUserStaff ? 'TRUE' : 'FALSE'} + + + + hasStaffUserLoggedIn + + {staffUserHasBeenLoggedIn ? 'TRUE' : 'FALSE'} + + + > + ); + }, [isCurrentUserStaff, staffCanSee, staffUserHasBeenLoggedIn]); + + return ( + + + Code version + {codeVersion} + + + State version + {stateVersion} + + {staffOnlyRows} + + ); +} + +export default BuildInfo;
__DEV__
{isDev ? 'TRUE' : 'FALSE'}
isCurrentUserStaff
+ {isCurrentUserStaff ? 'TRUE' : 'FALSE'} +
hasStaffUserLoggedIn
+ {staffUserHasBeenLoggedIn ? 'TRUE' : 'FALSE'} +
Code version
{codeVersion}
State version
{stateVersion}