Add back help links to individual articles

README.md

@@ -70,6 +70,9 @@ Note: there is a test account you can use. Get this from another developer if yo
 - `DATADOG_CLIENT_TOKEN` - Datadog tracking client token.
 - `DD_ENV` - Datadog environment.
 - `HELPJUICE_ORIGIN` - Helpjuice origin for documentation and user support (example: `https://www.helpducks.org`)
+- `HELP_URL_COACHING_ACTIVITY` - Link to an article explaining the coaching activity table
+- `HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS` - Link to an article explaining the coaching appointments and results table
+- `HELP_URL_SETUP_FIND_ORGANIZATION` - Link to an article explaining how to find an organization
 - `PRIVACY_POLICY_URL` - URL of the privacy policy
 - `TERMS_OF_USE_URL` - URL of the terms of use
 

next.config.js

@@ -76,6 +76,11 @@ const config = {
         process.env.DATADOG_CLIENT_TOKEN,
     ).toString(),
     HELPJUICE_ORIGIN: process.env.HELPJUICE_ORIGIN,
+    HELP_URL_COACHING_ACTIVITY: process.env.HELP_URL_COACHING_ACTIVITY,
+    HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS:
+      process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS,
+    HELP_URL_SETUP_FIND_ORGANIZATION:
+      process.env.HELP_URL_SETUP_FIND_ORGANIZATION,
     ALERT_MESSAGE: process.env.ALERT_MESSAGE,
     PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
     TERMS_OF_USE_URL: process.env.TERMS_OF_USE_URL,

src/components/Coaching/CoachingDetail/Activity/Activity.tsx

@@ -36,6 +36,7 @@ import {
 } from 'src/lib/intlFormat';
 import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 import { AccountListTypeEnum, CoachingPeriodEnum } from '../CoachingDetail';
+import { HelpButton } from '../HelpButton';
 import { useCoachingDetailActivityQuery } from './Activity.generated';
 import { AppealProgress } from './AppealProgress';
 
@@ -262,6 +263,7 @@ export const Activity: React.FC<ActivityProps> = ({
                 <ChevronRight />
               </StyledButton>
             </ButtonGroup>
+            <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />
           </Header>
         }
       />

src/components/Coaching/CoachingDetail/AppointmentResults/AppointmentResults.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import {
+  Box,
   CardContent,
   CardHeader,
   Divider,
@@ -17,6 +18,7 @@ import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat, dateFormatWithoutYear } from 'src/lib/intlFormat';
 import { MultilineSkeleton } from '../../../Shared/MultilineSkeleton';
 import { CoachingPeriodEnum } from '../CoachingDetail';
+import { HelpButton } from '../HelpButton';
 import { AlignedTableCell, DividerRow, HeaderRow } from '../StyledComponents';
 import { getResultColor } from '../helpers';
 import { useAppointmentResultsQuery } from './AppointmentResults.generated';
@@ -77,7 +79,14 @@ export const AppointmentResults: React.FC<AppointmentResultsProps> = ({
 
   return (
     <AnimatedCard>
-      <CardHeader title={t('Appointments and Results')} />
+      <CardHeader
+        title={
+          <Box display="flex" alignItems="center">
+            <Box flex={1}>{t('Appointments and Results')}</Box>
+            <HelpButton articleVar="HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS" />
+          </Box>
+        }
+      />
       <ContentContainer>
         {loading ? (
           <MultilineSkeleton lines={4} />

src/components/Coaching/CoachingDetail/HelpButton.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import { HelpButton } from './HelpButton';
+
+describe('help button', () => {
+  it('renders a link to the help article', () => {
+    process.env.HELP_URL_COACHING_ACTIVITY = 'https://help.org';
+
+    const { getByRole } = render(
+      <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />,
+    );
+
+    expect(getByRole('link', { name: 'Help' })).toHaveAttribute(
+      'href',
+      'https://help.org',
+    );
+  });
+
+  it('renders nothing if the help article does not exist', () => {
+    process.env.HELP_URL_COACHING_ACTIVITY = '';
+
+    const { queryByRole } = render(
+      <HelpButton articleVar="HELP_URL_COACHING_ACTIVITY" />,
+    );
+
+    expect(queryByRole('link', { name: 'Help' })).not.toBeInTheDocument();
+  });
+});

src/components/Coaching/CoachingDetail/HelpButton.tsx

@@ -0,0 +1,20 @@
+import QuestionMark from '@mui/icons-material/QuestionMark';
+import { IconButton } from '@mui/material';
+import { ArticleVar, articles } from 'src/lib/helpjuice';
+
+interface HelpButtonProps {
+  articleVar: ArticleVar;
+}
+
+export const HelpButton: React.FC<HelpButtonProps> = ({ articleVar }) => {
+  const url = articles[articleVar];
+  if (!url) {
+    return null;
+  }
+
+  return (
+    <IconButton href={url} target="_blank" size="small" aria-label="Help">
+      <QuestionMark />
+    </IconButton>
+  );
+};

src/components/Settings/integrations/Organization/ConnectOrganization.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { FieldWrapper } from 'src/components/Shared/Forms/FieldWrapper';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { clearDataDogUser } from 'src/lib/dataDog';
+import { articles } from 'src/lib/helpjuice';
 import theme from 'src/theme';
 import { useOauthUrl } from '../useOauthUrl';
 import {
@@ -173,6 +174,15 @@ export const ConnectOrganization: React.FC<ConnectOrganizationProps> = ({
                 <TextField {...params} label={t('Organization')} />
               )}
             />
+            {!selectedOrganization &&
+              articles.HELP_URL_SETUP_FIND_ORGANIZATION && (
+                <Button
+                  href={articles.HELP_URL_SETUP_FIND_ORGANIZATION}
+                  target="_blank"
+                >
+                  {t("Can't find your organization?")}
+                </Button>
+              )}
             {organizationType === OrganizationTypesEnum.MINISTRY && (
               <WarningBox>
                 <Typography

src/lib/helpjuice.ts

@@ -0,0 +1,14 @@
+export type ArticleVar = keyof typeof articles;
+
+// We are using getters so that when tests override environment variables, the changes will be picked up
+export const articles = {
+  get HELP_URL_COACHING_ACTIVITY() {
+    return process.env.HELP_URL_COACHING_ACTIVITY;
+  },
+  get HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS() {
+    return process.env.HELP_URL_COACHING_APPOINTMENTS_AND_RESULTS;
+  },
+  get HELP_URL_SETUP_FIND_ORGANIZATION() {
+    return process.env.HELP_URL_SETUP_FIND_ORGANIZATION;
+  },
+};