Linked help documents

src/attendance/AttendancePage.tsx

@@ -153,7 +153,7 @@ export const AttendancePage = () => {
       <h1><Icon>calendar_month</Icon> Attendance</h1>
       <Grid container spacing={3}>
         <Grid item md={8} xs={12}>
-          <DisplayBox id="groupsBox" data-cy="attendance-groups" headerIcon="group" headerText="Groups" editContent={getEditLinks()}>
+          <DisplayBox id="groupsBox" data-cy="attendance-groups" headerIcon="group" headerText="Groups" editContent={getEditLinks()} help="chums/attendance">
             {getTable()}
           </DisplayBox>
         </Grid>

src/attendance/components/CampusEdit.tsx

@@ -39,7 +39,7 @@ export const CampusEdit: React.FC<Props> = (props) => {
   if (campus === null || campus.id === undefined) return null;
 
   return (
-    <InputBox id="campusBox" data-cy="campus-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.campus?.id ? handleDelete : null} headerText={campus.name} headerIcon="church" isSubmitting={isSubmitting}>
+    <InputBox id="campusBox" data-cy="campus-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.campus?.id ? handleDelete : null} headerText={campus.name} headerIcon="church" isSubmitting={isSubmitting} help="chums/attendance">
       <ErrorMessages errors={errors} />
       <TextField fullWidth label="Campus Name" id="name" name="name" type="text" value={campus.name} onChange={handleChange} />
     </InputBox>

src/attendance/components/ServiceEdit.tsx

@@ -74,7 +74,7 @@ export const ServiceEdit: React.FC<Props> = (props) => {
   if (service === null || service.id === undefined) return null;
 
   return (
-    <InputBox id="serviceBox" data-cy="service-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.service?.id ? handleDelete : null} headerText={service.name} headerIcon="calendar_month" isSubmitting={isSubmitting}>
+    <InputBox id="serviceBox" data-cy="service-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.service?.id ? handleDelete : null} headerText={service.name} headerIcon="calendar_month" isSubmitting={isSubmitting} help="chums/attendance">
       <ErrorMessages errors={errors} />
       <FormControl fullWidth>
         <InputLabel id="campus">Campus</InputLabel>

src/attendance/components/ServiceTimeEdit.tsx

@@ -71,7 +71,7 @@ export const ServiceTimeEdit: React.FC<Props> = (props) => {
 
   if (serviceTime === null || serviceTime.id === undefined) return null;
   return (
-    <InputBox id="serviceTimeBox" data-cy="service-time-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.serviceTime?.id ? handleDelete : null} headerText={serviceTime.name} isSubmitting={isSubmitting} headerIcon="schedule">
+    <InputBox id="serviceTimeBox" data-cy="service-time-box" cancelFunction={props.updatedFunction} saveFunction={handleSave} deleteFunction={props.serviceTime?.id ? handleDelete : null} headerText={serviceTime.name} isSubmitting={isSubmitting} headerIcon="schedule" help="chums/attendance">
       <ErrorMessages errors={errors} />
       <FormControl fullWidth>
         <InputLabel id="service">Service</InputLabel>

src/donations/DonationsPage.tsx

@@ -88,7 +88,7 @@ export const DonationsPage = () => {
       <ReportWithFilter keyName="donationSummary" autoRun={true} />
       <Grid container spacing={3}>
         <Grid item md={8} xs={12}>
-          <DisplayBox id="batchesBox" data-cy="batches-box" headerIcon="volunteer_activism" headerText="Batches" editContent={getEditContent()}>
+          <DisplayBox id="batchesBox" data-cy="batches-box" headerIcon="volunteer_activism" headerText="Batches" editContent={getEditContent()} help="chums/manual-input">
             {getTable()}
           </DisplayBox>
           <DonationEvents />

src/donations/FundPage.tsx

@@ -104,7 +104,7 @@ export const FundPage = () => {
         <h1><Icon>volunteer_activism</Icon> {fund.name} Donations</h1>
         <Grid container spacing={3}>
           <Grid item md={8} xs={12}>
-            <DisplayBox headerIcon="volunteer_activism" headerText="Donations" editContent={getEditContent()}>
+            <DisplayBox headerIcon="volunteer_activism" headerText="Donations" editContent={getEditContent()} help="chums/giving">
               {contents}
             </DisplayBox>
           </Grid>

src/donations/components/BatchEdit.tsx

@@ -38,7 +38,7 @@ export const BatchEdit: React.FC<Props> = (props) => {
   React.useEffect(loadData, [props.batchId]);
 
   return (
-    <InputBox id="batchBox" headerIcon="volunteer_activism" headerText="Edit Batch" cancelFunction={handleCancel} deleteFunction={getDeleteFunction()} saveFunction={handleSave}>
+    <InputBox id="batchBox" headerIcon="volunteer_activism" headerText="Edit Batch" cancelFunction={handleCancel} deleteFunction={getDeleteFunction()} saveFunction={handleSave} help="chums/manual-input">
       <TextField fullWidth name="name" data-cy="batch-name" label="Name (optional)" value={batch.name} onChange={handleChange} onKeyDown={handleKeyDown} />
       <TextField fullWidth type="date" data-cy="batch-date" name="date" InputLabelProps={{shrink: true}} label="Date" value={DateHelper.formatHtml5Date(batch.batchDate)} onChange={handleChange} onKeyDown={handleKeyDown} />
     </InputBox>

src/donations/components/DonationEdit.tsx

@@ -111,7 +111,7 @@ export const DonationEdit: React.FC<Props> = (props) => {
   React.useEffect(loadData, [props.donationId]); //eslint-disable-line
 
   return (
-    <InputBox id="donationBox" data-cy="donation-box" headerIcon="volunteer_activism" headerText="Edit Donation" cancelFunction={handleCancel} deleteFunction={getDeleteFunction()} saveFunction={handleSave}>
+    <InputBox id="donationBox" data-cy="donation-box" headerIcon="volunteer_activism" headerText="Edit Donation" cancelFunction={handleCancel} deleteFunction={getDeleteFunction()} saveFunction={handleSave} help="chums/manual-input">
       <Box mb={2}>
         <label>Person</label>
         {getPersonSection()}

src/donations/components/Donations.tsx

@@ -66,7 +66,7 @@ export const Donations: React.FC<Props> = (props) => {
   }
 
   return (
-    <DisplayBox id="donationsBox" headerIcon="volunteer_activism" headerText="Donations" editContent={getEditContent()}>
+    <DisplayBox id="donationsBox" headerIcon="volunteer_activism" headerText="Donations" editContent={getEditContent()} help="chums/manual-input">
       {content}
     </DisplayBox>
   );

src/donations/components/FundEdit.tsx

@@ -38,7 +38,7 @@ export const FundEdit: React.FC<Props> = (props) => {
   React.useEffect(() => { setFund(props.fund); }, [props.fund]);
 
   return (
-    <InputBox id="fundsBox" headerIcon="volunteer_activism" headerText="Edit Fund" cancelFunction={handleCancel} saveFunction={handleSave} deleteFunction={(fund.id === "") ? undefined : handleDelete}>
+    <InputBox id="fundsBox" headerIcon="volunteer_activism" headerText="Edit Fund" cancelFunction={handleCancel} saveFunction={handleSave} deleteFunction={(fund.id === "") ? undefined : handleDelete} help="chums/giving">
       <ErrorMessages errors={errors} />
       <TextField fullWidth name="fundName" label="Name" value={fund.name} onChange={handleChange} onKeyDown={handleKeyDown} />
     </InputBox>

src/donations/components/Funds.tsx

@@ -58,7 +58,7 @@ export const Funds: React.FC = () => {
     let contents = <Loading />
     if (funds) contents = <Table size="small">{getRows()}</Table>
     return (
-      <DisplayBox id="fundsBox" headerIcon="volunteer_activism" data-cy="funds-box" headerText="Funds" editContent={getEditSection()}>
+      <DisplayBox id="fundsBox" headerIcon="volunteer_activism" data-cy="funds-box" headerText="Funds" editContent={getEditSection()} help="chums/giving">
         {contents}
       </DisplayBox>
     );

src/forms/components/Form.tsx

@@ -92,7 +92,7 @@ export const Form: React.FC<Props> = (props) => {
       <>
         <Grid container spacing={3}>
           <Grid item md={8} xs={12}>
-            <DisplayBox id="questionsBox" headerText="Questions" headerIcon="help" editContent={getEditContent()}>
+            <DisplayBox id="questionsBox" headerText="Questions" headerIcon="help" editContent={getEditContent()} help="chums/forms">
               {contents}
             </DisplayBox>
           </Grid>

src/forms/components/FormMembers.tsx

@@ -104,7 +104,7 @@ export const FormMembers: React.FC<Props> = (props) => {
   return (
     <Grid container spacing={3}>
       <Grid item md={8} xs={12}>
-        <DisplayBox headerText="Form Members" headerIcon="group">
+        <DisplayBox headerText="Form Members" headerIcon="group" help="chums/forms">
           {getTable()}
         </DisplayBox>
       </Grid>

src/forms/components/FormQuestionEdit.tsx

@@ -67,7 +67,7 @@ export function FormQuestionEdit(props: Props) {
   React.useEffect(loadData, [props.questionId || props.formId]); //eslint-disable-line
 
   return (
-    <InputBox id="questionBox" headerIcon="help" headerText="Edit Question" saveFunction={handleSave} cancelFunction={props.updatedFunction} isSubmitting={isSubmitting} deleteFunction={(!UniqueIdHelper.isMissing(question.id)) ? handleDelete : undefined}>
+    <InputBox id="questionBox" headerIcon="help" headerText="Edit Question" saveFunction={handleSave} cancelFunction={props.updatedFunction} isSubmitting={isSubmitting} deleteFunction={(!UniqueIdHelper.isMissing(question.id)) ? handleDelete : undefined} help="chums/forms">
       <ErrorMessages errors={errors} />
       <FormControl fullWidth>
         <InputLabel id="provider">Provider</InputLabel>

src/forms/components/FormSubmissions.tsx

@@ -154,7 +154,7 @@ export const FormSubmissions: React.FC<Props> = (props) => {
           <DisplayBox headerText="Form Submission Summary" headerIcon="group" editContent={getEditLinks()}>
             <Grid container spacing={3}>{getSummary()}</Grid>
           </DisplayBox>
-          <DisplayBox headerText="Form Submission Results" headerIcon="group">
+          <DisplayBox headerText="Form Submission Results" headerIcon="group" help="chums/forms">
             {getFormSubmissions()}
           </DisplayBox>
         </div>

src/groups/GroupsPage.tsx

@@ -96,7 +96,7 @@ export const GroupsPage = () => {
       <h1><Icon>people</Icon> Groups</h1>
       <Grid container spacing={3}>
         <Grid item md={8} xs={12}>
-          <DisplayBox id="groupsBox" headerIcon="group" headerText="Groups" editContent={getEditContent()}>
+          <DisplayBox id="groupsBox" headerIcon="group" headerText="Groups" editContent={getEditContent()} help="chums/groups">
             {getTable()}
           </DisplayBox>
         </Grid>

src/groups/components/GroupDetails.tsx

@@ -30,7 +30,7 @@ export const GroupDetails: React.FC<Props> = (props) => {
 
   if (mode === "edit") return <GroupDetailsEdit group={props.group} updatedFunction={handleUpdated} />
   else return (
-    <DisplayBox id="groupDetailsBox" data-cy="group-details-box" headerText="Group Details" headerIcon="group" editFunction={getEditFunction()}>
+    <DisplayBox id="groupDetailsBox" data-cy="group-details-box" headerText="Group Details" headerIcon="group" editFunction={getEditFunction()} help="chums/groups">
       {getRows()}
     </DisplayBox>
   );

src/groups/components/GroupDetailsEdit.tsx

@@ -83,7 +83,7 @@ export const GroupDetailsEdit: React.FC<Props> = (props) => {
   else
     return (
       <>
-        <InputBox id="groupDetailsBox" headerText="Group Details" headerIcon="group" saveFunction={handleSave} cancelFunction={handleCancel} deleteFunction={handleDelete}>
+        <InputBox id="groupDetailsBox" headerText="Group Details" headerIcon="group" saveFunction={handleSave} cancelFunction={handleCancel} deleteFunction={handleDelete} help="chums/groups">
           <ErrorMessages errors={errors} />
           <Grid container spacing={3}>
             <Grid item md={6} xs={12}>

src/groups/components/GroupMembers.tsx

@@ -116,7 +116,7 @@ export const GroupMembers: React.FC<Props> = (props) => {
   }
 
   return (
-    <DisplayBox id="groupMembersBox" data-cy="group-members-tab" headerText="Group Members" headerIcon="group" editContent={getEditContent()}>
+    <DisplayBox id="groupMembersBox" data-cy="group-members-tab" headerText="Group Members" headerIcon="group" editContent={getEditContent()} help="chums/groups">
       {getTable()}
     </DisplayBox>
   );

src/groups/components/SessionAdd.tsx

@@ -58,7 +58,7 @@ export const SessionAdd: React.FC<Props> = (props) => {
   React.useEffect(() => { if (props.group.id !== undefined) loadData(); }, [props.group, loadData]);
 
   return (
-    <InputBox data-cy="add-session-box" headerIcon="calendar_month" headerText="Add a Session" saveFunction={handleSave} cancelFunction={handleCancel}>
+    <InputBox data-cy="add-session-box" headerIcon="calendar_month" headerText="Add a Session" saveFunction={handleSave} cancelFunction={handleCancel} help="chums/attendance">
       <ErrorMessages errors={errors} />
       {getServiceTimes()}
 

src/people/PeoplePage.tsx

@@ -67,7 +67,7 @@ export const PeoplePage = () => {
       <h1><Icon>person</Icon> Search People</h1>
       <Grid container spacing={3}>
         <Grid item md={8} xs={12}>
-          <DisplayBox id="peopleBox" headerIcon="person" headerText="People" editContent={getEditContent()}>
+          <DisplayBox id="peopleBox" headerIcon="person" headerText="People" editContent={getEditContent()} help="chums/adding-people">
             <PeopleSearchResults people={searchResults} columns={columns} selectedColumns={selectedColumns} />
           </DisplayBox>
         </Grid>

src/people/components/Groups.tsx

@@ -31,5 +31,5 @@ export const Groups: React.FC<Props> = (props) => {
     }
   }
 
-  return <DisplayBox headerIcon="group" headerText={props.title || "Groups"}>{getRecords()}</DisplayBox>
+  return <DisplayBox headerIcon="group" headerText={props.title || "Groups"} help="chums/groups">{getRecords()}</DisplayBox>
 }

src/people/components/PeopleSearch.tsx

@@ -56,7 +56,7 @@ export function PeopleSearch(props: Props) {
   }
 
   const getSimpleSearch = () => (
-    <DisplayBox headerIcon="person" headerText="Simple Search" editContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Advanced</Button>}>
+    <DisplayBox headerIcon="person" headerText="Simple Search" help="chums/advanced-search" editContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Advanced</Button>}>
       <FormControl fullWidth variant="outlined" onKeyDown={handleKeyDown}>
         <InputLabel htmlFor="searchText">Name</InputLabel>
         <OutlinedInput id="searchText" aria-label="searchBox" name="searchText" type="text" label="Name" value={searchText} onChange={handleChange}
@@ -94,7 +94,7 @@ export function PeopleSearch(props: Props) {
     return result;
   }
 
-  const getAdvancedSearch = () => (<InputBox id="advancedSearch" headerIcon="person" headerText="Advanced Search" headerActionContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Simple</Button>} saveFunction={handleAdvancedSearch} saveText="Search">
+  const getAdvancedSearch = () => (<InputBox id="advancedSearch" headerIcon="person" headerText="Advanced Search" headerActionContent={<Button onClick={toggleAdvanced} sx={{ textTransform: "none" }}>Simple</Button>} saveFunction={handleAdvancedSearch} saveText="Search" help="chums/advanced-search">
     <p>All people where:</p>
     {getDisplayConditions()}
     {getAddCondition()}

src/settings/components/RoleMembers.tsx

@@ -65,7 +65,7 @@ export const RoleMembers: React.FC<Props> = (props) => {
   }
 
   return (
-    <DisplayBox id="roleMembersBox" headerText="Members" headerIcon="person" editContent={getEditContent()}>
+    <DisplayBox id="roleMembersBox" headerText="Members" headerIcon="person" editContent={getEditContent()} help="chums/assigning-roles">
       <Table id="roleMemberTable">
         <TableHead>{getTableHeader()}</TableHead>
         <TableBody>{getRows()}</TableBody>

src/settings/components/RolePermissions.tsx

@@ -59,7 +59,7 @@ export const RolePermissions: React.FC<Props> = (props) => {
   React.useEffect(() => { if (props.role?.id !== undefined) loadPermissions() }, [props.role, loadPermissions]);
 
   return (
-    <DisplayBox id="rolePermissionsBox" headerText="Edit Permissions" headerIcon="lock">
+    <DisplayBox id="rolePermissionsBox" headerText="Edit Permissions" headerIcon="lock" help="chums/assigning-roles">
       <div>
         {getSections()}
       </div>

src/settings/components/Roles.tsx

@@ -131,7 +131,7 @@ export const Roles: React.FC<Props> = ({ selectRoleId, selectedRoleId, church })
   useEffect(loadData, [selectedRoleId, church]); //eslint-disable-line
 
   return (
-    <DisplayBox id="rolesBox" headerText="Roles" headerIcon="lock" editContent={getEditContent()}>
+    <DisplayBox id="rolesBox" headerText="Roles" headerIcon="lock" editContent={getEditContent()} help="chums/assigning-roles">
       <Table id="roleMemberTable">
         <TableHead><TableRow><TableCell>Name</TableCell><TableCell></TableCell></TableRow></TableHead>
         <TableBody>{getRows()}</TableBody>

src/tasks/TaskPage.tsx

@@ -82,7 +82,7 @@ export const TaskPage = () => {
           <Notes context={context} conversationId={task?.conversationId} createConversation={handleCreateConversation} />
         </Grid>
         <Grid item md={4} xs={12}>
-          <DisplayBox headerIcon="list_alt" headerText="Task Details">
+          <DisplayBox headerIcon="list_alt" headerText="Task Details" help="chums/tasks">
             <div><Typography variant="subtitle1">Date Created</Typography></div>
             <div><Typography variant="caption">{DateHelper.prettyDate(DateHelper.convertToDate(task?.dateCreated))}</Typography></div>
             <hr />

src/tasks/automations/AutomationsPage.tsx

@@ -55,7 +55,7 @@ export const AutomationsPage = () => {
 
     <Grid container spacing={3}>
       <Grid item md={8} xs={12}>
-        <DisplayBox headerIcon="settings_suggest" headerText="Automated Tasks" editContent={editContent}>
+        <DisplayBox headerIcon="settings_suggest" headerText="Automated Tasks" editContent={editContent} help="chums/automations">
           {getRows()}
 
         </DisplayBox>

src/tasks/automations/components/ActionEdit.tsx

@@ -89,7 +89,7 @@ export const ActionEdit = (props: Props) => {
 
   if (!action) return <></>
   return (
-    <InputBox headerIcon="settings_suggest" headerText="Edit Action" saveFunction={handleSave} cancelFunction={props.onCancel}>
+    <InputBox headerIcon="settings_suggest" headerText="Edit Action" saveFunction={handleSave} cancelFunction={props.onCancel} help="chums/automations">
       <ErrorMessages errors={errors} />
       <Select fullWidth label="Action Type" value={action?.actionType} onChange={handleChange}>
         <MenuItem value="task">Assign a Task</MenuItem>

src/tasks/automations/components/AutomationDetails.tsx

@@ -60,7 +60,7 @@ export const AutomationDetails = (props: Props) => {
     return <ConditionEdit condition={editCondition} onCancel={() => setEditCondition(null)} onSave={(c: ConditionInterface) => { setEditCondition(null); loadData(); }} />
   }
   else return (
-    <DisplayBox headerIcon="settings_suggest" headerText="Automation Details">
+    <DisplayBox headerIcon="settings_suggest" headerText="Automation Details" help="chums/automations">
       <span style={{ float: "right" }}><SmallButton icon="edit" onClick={() => { setEditDetails(true); }} /></span><b>Automation Details:</b>
       <hr />
       <div><b>Name:</b> {automation?.title}</div>

src/tasks/automations/components/AutomationEdit.tsx

@@ -50,7 +50,7 @@ export const AutomationEdit = (props: Props) => {
   }
 
   return (
-    <InputBox headerIcon="settings_suggest" headerText="Edit Automation" saveFunction={handleSave} cancelFunction={props.onCancel} deleteFunction={checkDelete}>
+    <InputBox headerIcon="settings_suggest" headerText="Edit Automation" saveFunction={handleSave} cancelFunction={props.onCancel} deleteFunction={checkDelete} help="chums/automations">
       <ErrorMessages errors={errors} />
       <Grid container spacing={3}>
         <Grid item xs={12}>

src/tasks/automations/components/ConditionEdit.tsx

@@ -77,7 +77,7 @@ export const ConditionEdit = (props: Props) => {
 
   if (!condition) return <></>
   return (
-    <InputBox headerIcon="settings_suggest" headerText="Edit Condition" saveFunction={handleSave} cancelFunction={props.onCancel} deleteFunction={condition?.id ? handleDelete : undefined}>
+    <InputBox headerIcon="settings_suggest" headerText="Edit Condition" saveFunction={handleSave} cancelFunction={props.onCancel} deleteFunction={condition?.id ? handleDelete : undefined} help="chums/automations">
       <ErrorMessages errors={errors} />
       <FormControl fullWidth>
         <InputLabel>Condition Type</InputLabel>

src/tasks/automations/components/ConjunctionEdit.tsx

@@ -46,7 +46,7 @@ export const ConjunctionEdit = (props: Props) => {
 
   if (!conjunction) return <></>
   return (
-    <InputBox headerIcon="settings_suggest" headerText="Edit Conjunction" saveFunction={handleSave} cancelFunction={props.onCancel}>
+    <InputBox headerIcon="settings_suggest" headerText="Edit Conjunction" saveFunction={handleSave} cancelFunction={props.onCancel} help="chums/automations">
       <ErrorMessages errors={errors} />
       <Select fullWidth label="Conjunction Type" value={conjunction?.groupType} name="groupType" onChange={handleChange}>
         <MenuItem value="and">AND - All of the conditions are true</MenuItem>