diff --git a/app/src/gui/components/notebook/settings/activation-switch.tsx b/app/src/gui/components/notebook/settings/activation-switch.tsx index d2839d8a9..cc2ad0490 100644 --- a/app/src/gui/components/notebook/settings/activation-switch.tsx +++ b/app/src/gui/components/notebook/settings/activation-switch.tsx @@ -4,7 +4,16 @@ import InfoIcon from '@mui/icons-material/Info'; import {ProjectExtended} from '../../../../types/project'; import {ProjectsContext} from '../../../../context/projects-context'; import FaimsDialog from '../../ui/Faims_Dialog'; -import {NOTEBOOK_NAME_CAPITALIZED} from '../../../../buildconfig'; +import { + NOTEBOOK_NAME, + NOTEBOOK_NAME_CAPITALIZED, +} from '../../../../buildconfig'; +import { + ACTIVATE_ACTIVE_VERB_LABEL, + ACTIVATE_VERB_LABEL, + ACTIVATED_LABEL, + DE_ACTIVATE_VERB, +} from '../../workspace/notebooks'; type NotebookActivationSwitchProps = { project: ProjectExtended; @@ -38,15 +47,15 @@ export default function NotebookActivationSwitch({ variant="outlined" disableElevation > - Activate + {ACTIVATE_VERB_LABEL} } onClose={handleClose} onPrimaryAction={handleActivationClick} - primaryActionText="Activate" + primaryActionText={ACTIVATE_VERB_LABEL} primaryActionLoading={isWorking} primaryActionColor="primary" primaryActionVariant="contained" @@ -54,22 +63,23 @@ export default function NotebookActivationSwitch({ > - When a {NOTEBOOK_NAME_CAPITALIZED} is “Active” you are safe to work - offline at any point because all the data you collect will be saved - to your device. To activate your {NOTEBOOK_NAME_CAPITALIZED}, click - the "Activate" button below. + When a {NOTEBOOK_NAME_CAPITALIZED} is “{ACTIVATED_LABEL}” you are + safe to work offline at any point because all the data you collect + will be saved to your device. To {ACTIVATE_VERB_LABEL.toLowerCase()}{' '} + your {NOTEBOOK_NAME_CAPITALIZED}, click the "{ACTIVATE_VERB_LABEL}" + button below. - Warning: activating a {NOTEBOOK_NAME_CAPITALIZED} will start - the downloading of existing records onto your device. We recommend - you complete this procedure while you have a stable internet - connection. + Warning: {ACTIVATE_ACTIVE_VERB_LABEL.toLowerCase()} a{' '} + {NOTEBOOK_NAME_CAPITALIZED} will start the downloading of existing + records onto your device. We recommend you complete this procedure + while you have a stable internet connection.

- Currently, you cannot de-activate a survey, this is something we - will be adding soon. If you need to make space on your device you - can clear the application storage or remove and reinstall the - application. + Currently, you cannot {DE_ACTIVATE_VERB.toLowerCase()} a{' '} + {NOTEBOOK_NAME}, this is something we will be adding soon. If you + need to make space on your device you can clear the application + storage or remove and reinstall the application.
{/* diff --git a/app/src/gui/components/ui/heading-grid.tsx b/app/src/gui/components/ui/heading-grid.tsx index 73caf6507..98e627c35 100644 --- a/app/src/gui/components/ui/heading-grid.tsx +++ b/app/src/gui/components/ui/heading-grid.tsx @@ -10,6 +10,7 @@ import {useNavigate} from 'react-router'; import * as ROUTES from '../../../constants/routes'; import {useEffect, useState} from 'react'; import {theme} from '../../themes'; +import {ACTIVATED_LABEL, NOT_ACTIVATED_LABEL} from '../workspace/notebooks'; /** * Renders a grid with two sections: Active and Not Active. @@ -53,7 +54,7 @@ export default function HeadingProjectGrid({ return (
- Active + {ACTIVATED_LABEL}
- Not active + {NOT_ACTIVATED_LABEL}
), }, - // commenting this untill the functionality is fixed for this column. + // commenting this until the functionality is fixed for this column. // { // field: 'last_updated', @@ -191,6 +211,52 @@ export default function NoteBooks() { ? userHasRoleInAnyListing(allUserInfo.data, CREATE_NOTEBOOK_ROLES) : false; + // What type of layout are we using? + const isTabs = NOTEBOOK_LIST_TYPE === 'tabs'; + const sectionLabel = isTabs ? 'tab' : 'section'; + + const buildTabLink = (target: 'active' | 'not active') => { + switch (target) { + case 'active': + return ( + + ); + case 'not active': + return ( + + ); + } + }; + + const notActivatedAdvice = ( + <> + You have {activatedProjects.length} {NOTEBOOK_NAME} + {activatedProjects.length !== 1 ? 's' : ''} currently {ACTIVATED_LABEL} on + this device. {NOTEBOOK_NAME_CAPITALIZED}s in the{' '} + {isTabs ? ( + <>{buildTabLink('not active')} + ) : ( + <> + "{NOT_ACTIVATED_LABEL}" {sectionLabel} + + )}{' '} + need to be {ACTIVATED_VERB_PAST.toLowerCase()} before they can be used. To + start using a {NOTEBOOK_NAME_CAPITALIZED} in the{' '} + {isTabs ? ( + <>{buildTabLink('not active')} + ) : ( + <> + "{NOT_ACTIVATED_LABEL}" {sectionLabel} + + )}{' '} + click the "{ACTIVATE_VERB_LABEL}" button. + + ); + // use notification service const notify = useNotification(); @@ -198,13 +264,7 @@ export default function NoteBooks() { - You have {activatedProjects.length} {NOTEBOOK_NAME} - {activatedProjects.length !== 1 ? 's' : ''} activated on this device. - To start using a {NOTEBOOK_NAME}, visit the{' '} - {' '} - tab and click the activate button. + {notActivatedAdvice}
)} + + + What does {ACTIVATED_LABEL} and {NOT_ACTIVATED_LABEL} mean? + + When a {NOTEBOOK_NAME} is “{ACTIVATED_LABEL}” you are safe to work + offline at any point because all the data you collect will be saved to + your device. {ACTIVATE_ACTIVE_VERB_LABEL} a {NOTEBOOK_NAME} will start + the downloading of existing {NOTEBOOK_NAME} records onto your device. + We recommend you complete this procedure while you have a stable + internet connection. Currently, you cannot{' '} + {DE_ACTIVATE_VERB.toLowerCase()} a {NOTEBOOK_NAME}, this is something + we will be adding soon. If you need to make space on your device you + can clear the application storage or delete the application. If a{' '} + {NOTEBOOK_NAME} is "{NOT_ACTIVATED_LABEL}" you are unable to start + using it. + ); diff --git a/app/src/gui/pages/workspace.tsx b/app/src/gui/pages/workspace.tsx index 89b4c9949..f227dc423 100644 --- a/app/src/gui/pages/workspace.tsx +++ b/app/src/gui/pages/workspace.tsx @@ -23,14 +23,20 @@ import {Typography, Grid} from '@mui/material'; import Notebooks from '../components/workspace/notebooks'; import Breadcrumbs from '../components/ui/breadcrumbs'; import {NOTEBOOK_NAME_CAPITALIZED} from '../../buildconfig'; +import {useTheme} from '@mui/material/styles'; export default function Workspace() { + const theme = useTheme(); return ( - + My {NOTEBOOK_NAME_CAPITALIZED}s