Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improved wording for active and not-active #1225

Merged
merged 7 commits into from
Nov 11, 2024
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions app/src/gui/components/notebook/settings/activation-switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -38,38 +47,39 @@ export default function NotebookActivationSwitch({
variant="outlined"
disableElevation
>
Activate
{ACTIVATE_VERB_LABEL}
</Button>
<FaimsDialog
open={open}
title={`Activating ${NOTEBOOK_NAME_CAPITALIZED}s`}
title={`${ACTIVATE_ACTIVE_VERB_LABEL} ${NOTEBOOK_NAME_CAPITALIZED}s`}
icon={<InfoIcon style={{fontSize: 40, color: '#1976d2'}} />}
onClose={handleClose}
onPrimaryAction={handleActivationClick}
primaryActionText="Activate"
primaryActionText={ACTIVATE_VERB_LABEL}
primaryActionLoading={isWorking}
primaryActionColor="primary"
primaryActionVariant="contained"
cancelButtonText="Cancel"
>
<Box mb={2}>
<Typography variant="body2" paragraph>
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.
</Typography>
<Typography variant="body2" paragraph>
<b>Warning</b>: 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.
<b>Warning</b>: {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.
<br />
<br />
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.
</Typography>
{/*
<Typography variant="subtitle1" fontWeight="bold">
Expand Down
5 changes: 3 additions & 2 deletions app/src/gui/components/ui/heading-grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -53,7 +54,7 @@ export default function HeadingProjectGrid({
return (
<div style={{display: 'flex', flexDirection: 'column'}}>
<div style={{padding: '6px', fontSize: '18px', fontWeight: 'bold'}}>
Active
{ACTIVATED_LABEL}
</div>

<DataGrid
Expand Down Expand Up @@ -96,7 +97,7 @@ export default function HeadingProjectGrid({
/>
<div style={{height: '16px'}} />
<div style={{padding: '6px', fontSize: '18px', fontWeight: 'bold'}}>
Not active
{NOT_ACTIVATED_LABEL}
</div>
<DataGrid
key={'notebook_list_datagrid_not_activated'}
Expand Down
5 changes: 3 additions & 2 deletions app/src/gui/components/ui/tab-grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
import * as ROUTES from '../../../constants/routes';
import {useEffect, useState} from 'react';
import {theme} from '../../themes';
import { ACTIVATED_LABEL, NOT_ACTIVATED_LABEL } from '../workspace/notebooks';

Check warning on line 15 in app/src/gui/components/ui/tab-grid.tsx

View workflow job for this annotation

GitHub Actions / Build and Test

Replace `·ACTIVATED_LABEL,·NOT_ACTIVATED_LABEL·` with `ACTIVATED_LABEL,·NOT_ACTIVATED_LABEL`

/**
* Renders a tabbed grid component.
Expand Down Expand Up @@ -72,8 +73,8 @@
key={tab}
label={
tab === '1'
? `Activated (${activatedProjects.length})`
: `Available (${availableProjects.length})`
? `${ACTIVATED_LABEL} (${activatedProjects.length})`
: `${NOT_ACTIVATED_LABEL} (${availableProjects.length})`
}
value={tab}
disabled={
Expand Down
98 changes: 87 additions & 11 deletions app/src/gui/components/workspace/notebooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@
* TODO
*/

import {RefreshOutlined} from '@mui/icons-material';
import AddCircleSharpIcon from '@mui/icons-material/AddCircleSharp';
import FolderIcon from '@mui/icons-material/Folder';
import {Box, Button, Paper, Typography} from '@mui/material';
import {Alert, AlertTitle, Box, Button, Paper, Typography} from '@mui/material';
import {grey} from '@mui/material/colors';
import {useTheme} from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
Expand All @@ -33,15 +34,34 @@ import {
NOTEBOOK_NAME_CAPITALIZED,
} from '../../../buildconfig';
import * as ROUTES from '../../../constants/routes';
import {useNotification} from '../../../context/popup';
import {ProjectsContext} from '../../../context/projects-context';
import {ProjectExtended} from '../../../types/project';
import {CREATE_NOTEBOOK_ROLES, userHasRoleInAnyListing} from '../../../users';
import {useGetAllUserInfo} from '../../../utils/useGetCurrentUser';
import NotebookSyncSwitch from '../notebook/settings/sync_switch';
import HeadingProjectGrid from '../ui/heading-grid';
import Tabs from '../ui/tab-grid';
import {RefreshOutlined} from '@mui/icons-material';
import {useNotification} from '../../../context/popup';

// Survey status naming conventions

// E.g. "This survey is not active"
export const NOT_ACTIVATED_LABEL = 'Not Active';

// E.g. "This survey is active"
export const ACTIVATED_LABEL = 'Active';

// E.g. "This survey has been activated"
export const ACTIVATED_VERB_PAST = 'Activated';

// E.g. "Please activate this survey"
export const ACTIVATE_VERB_LABEL = 'Activate';

// E.g. "This survey is currently activating" or "Before activating, consider ..."
export const ACTIVATE_ACTIVE_VERB_LABEL = 'Activating';

// E.g. "You cannot currently de-activate a survey"
export const DE_ACTIVATE_VERB = 'De-activate';

export default function NoteBooks() {
const [refresh, setRefresh] = useState(false);
Expand Down Expand Up @@ -158,7 +178,7 @@ export default function NoteBooks() {
</div>
),
},
// commenting this untill the functionality is fixed for this column.
// commenting this until the functionality is fixed for this column.

// {
// field: 'last_updated',
Expand Down Expand Up @@ -191,20 +211,60 @@ 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 (
<Button variant="text" size={'medium'} onClick={() => setTabID('1')}>
"{ACTIVATED_LABEL}" tab
</Button>
);
case 'not active':
return (
<Button variant="text" size={'medium'} onClick={() => setTabID('2')}>
{NOT_ACTIVATED_LABEL} tab
</Button>
);
}
};

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();

return (
<Box>
<Box component={Paper} elevation={0} p={2}>
<Typography variant={'body1'} gutterBottom>
You have {activatedProjects.length} {NOTEBOOK_NAME}
{activatedProjects.length !== 1 ? 's' : ''} activated on this device.
To start using a {NOTEBOOK_NAME}, visit the{' '}
<Button variant="text" size={'small'} onClick={() => setTabID('2')}>
Available
</Button>{' '}
tab and click the activate button.
{notActivatedAdvice}
</Typography>
<div
style={{display: 'flex', justifyContent: 'space-between', gap: '8px'}}
Expand Down Expand Up @@ -254,6 +314,22 @@ export default function NoteBooks() {
) : (
<HeadingProjectGrid projects={projects} columns={columns} />
)}
<Alert severity="info">
<AlertTitle>
What does {ACTIVATED_LABEL} and {NOT_ACTIVATED_LABEL} mean?
</AlertTitle>
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.
</Alert>
</Box>
</Box>
);
Expand Down
8 changes: 7 additions & 1 deletion app/src/gui/pages/workspace.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<React.Fragment>
<Breadcrumbs data={[{title: 'Workspace'}]} />
<Grid container spacing={3}>
<Grid item xs={12} md={12} lg={8}>
<Typography variant="h6" color="textSecondary">
<Typography
variant="h1"
color="textSecondary"
style={{marginBottom: theme.spacing(2)}}
>
My {NOTEBOOK_NAME_CAPITALIZED}s
</Typography>
<Notebooks />
Expand Down
Loading