From 98d48e3594c7bd2dad319fbe66693de15f462bce Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Thu, 2 May 2024 15:20:42 +0200
Subject: [PATCH] Add help links

---
 .../ProjectConfidentialityCombobox.svelte     |  1 +
 .../ProjectConfidentialityFilterSelect.svelte |  3 +-
 .../components/Projects/ProjectFilter.svelte  |  7 ++++-
 .../src/lib/components/help/SupHelp.svelte    | 12 +++++++
 frontend/src/lib/components/help/index.ts     | 12 +++++++
 frontend/src/lib/forms/FormField.svelte       |  6 ++++
 frontend/src/lib/forms/Select.svelte          |  4 ++-
 frontend/src/lib/i18n/locales/en.json         |  6 ++--
 frontend/src/lib/layout/AppMenu.svelte        |  9 ++++++
 frontend/src/lib/layout/Layout.svelte         |  6 ++++
 .../routes/(authenticated)/admin/+page.svelte | 31 ++++++++++++++-----
 .../[project_code]/AddProjectMember.svelte    |  6 +++-
 .../BulkAddProjectMembers.svelte              |  6 +++-
 13 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/lib/components/help/SupHelp.svelte
 create mode 100644 frontend/src/lib/components/help/index.ts

diff --git a/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte b/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
index 8e44e0784..c761d02e8 100644
--- a/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
+++ b/frontend/src/lib/components/Projects/ProjectConfidentialityCombobox.svelte
@@ -10,6 +10,7 @@
 </script>
 
 <Checkbox
+  id="confidentiality"
   label={$t('project.confidential.label')}
   description={$t('project.confidential.description')}
   variant="checkbox-warning"
diff --git a/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte b/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte
index 2c07f3dc5..ae65f0e64 100644
--- a/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte
+++ b/frontend/src/lib/components/Projects/ProjectConfidentialityFilterSelect.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Select } from '$lib/forms';
   import t, { type I18nKey } from '$lib/i18n';
+  import { helpLinks } from '../help';
   import type { Confidentiality } from './ProjectFilter.svelte';
 
   // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- false positive
@@ -13,7 +14,7 @@
 </script>
 
 <div class="relative">
-  <Select label={$t('project.confidential.confidentiality')} bind:value on:change>
+  <Select label={$t('project.confidential.confidentiality')} helpLink={helpLinks.confidentiality} bind:value on:change>
     <option value={undefined}>{$t('common.any')}</option>
     {#each Object.entries(options) as [value, label]}
       <option value={value}>{$t(label)}</option>
diff --git a/frontend/src/lib/components/Projects/ProjectFilter.svelte b/frontend/src/lib/components/Projects/ProjectFilter.svelte
index 6096a59aa..04ff9b8c6 100644
--- a/frontend/src/lib/components/Projects/ProjectFilter.svelte
+++ b/frontend/src/lib/components/Projects/ProjectFilter.svelte
@@ -47,6 +47,8 @@
   import t from '$lib/i18n';
   import IconButton from '../IconButton.svelte';
   import ProjectConfidentialityFilterSelect from './ProjectConfidentialityFilterSelect.svelte';
+  import SupHelp from '../help/SupHelp.svelte';
+  import { helpLinks } from '../help';
 
   type Filters = Partial<ProjectFilters> & Pick<ProjectFilters, 'projectSearch'>;
   export let filters: Writable<Filters>;
@@ -157,7 +159,10 @@
       <div class="form-control">
         <label class="cursor-pointer label gap-4">
           <span class="label-text inline-flex items-center gap-2">
-            {$t('project.filter.hide_drafts')}
+            <span>
+              {$t('project.filter.hide_drafts')}
+              <SupHelp helpLink={helpLinks.projectRequest} />
+            </span>
             <Icon icon="i-mdi-script" color="text-warning" />
           </span>
           <input bind:checked={$filters.hideDraftProjects} type="checkbox" class="toggle toggle-warning" />
diff --git a/frontend/src/lib/components/help/SupHelp.svelte b/frontend/src/lib/components/help/SupHelp.svelte
new file mode 100644
index 000000000..5dda80112
--- /dev/null
+++ b/frontend/src/lib/components/help/SupHelp.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Icon } from '$lib/icons';
+  import type { HelpLink } from '.';
+
+  export let helpLink: HelpLink;
+</script>
+
+<sup>
+  <a href={helpLink} target="_blank" rel="external">
+    <Icon icon="i-mdi-help-circle-outline" color="text-info" size="text-md" />
+  </a>
+</sup>
diff --git a/frontend/src/lib/components/help/index.ts b/frontend/src/lib/components/help/index.ts
new file mode 100644
index 000000000..142bfd6f9
--- /dev/null
+++ b/frontend/src/lib/components/help/index.ts
@@ -0,0 +1,12 @@
+export { default as SupHelp } from './SupHelp.svelte';
+
+export const helpLinks = {
+  helpList: 'https://scribehow.com/page/Language_Depot_How-tos__Jy5qu62XRQ-pVGGw6-Cqbw',
+  createProject: 'https://scribehow.com/shared/Create_a_Project__3LFa5XTHSmOLbSSOm8hZKQ',
+  addProjectMember: 'https://scribehow.com/shared/Add_Project_Member__bUJVVK2QT9KhWMqtiPYckA',
+  confidentiality: 'https://scribehow.com/shared/Project_Confidentiality__s6TX8_wFQ1ejVpH1s5Bsmw',
+  bulkAddCreate: 'https://scribehow.com/shared/Bulk_AddCreate_Project_Members__3wwDKk3TTGaAwMEmT4rrXQ',
+  projectRequest: 'https://scribehow.com/shared/Project_requests__zOdcHT8KRGygGmPgr5z2_A',
+};
+
+export type HelpLink = typeof helpLinks[keyof typeof helpLinks];
diff --git a/frontend/src/lib/forms/FormField.svelte b/frontend/src/lib/forms/FormField.svelte
index 244487f3f..2f3819ea0 100644
--- a/frontend/src/lib/forms/FormField.svelte
+++ b/frontend/src/lib/forms/FormField.svelte
@@ -4,11 +4,14 @@
   import { randomFormId } from './utils';
   import Markdown from 'svelte-exmarkdown';
   import { NewTabLinkRenderer } from '$lib/components/Markdown';
+  import type { HelpLink } from '$lib/components/help';
+  import SupHelp from '$lib/components/help/SupHelp.svelte';
 
   export let label: string;
   export let description: string | undefined = undefined;
   export let error: string | string[] | undefined = undefined;
   export let id: string = randomFormId();
+  export let helpLink: HelpLink | undefined = undefined;
   /**
    * For login pages, EditableText, admin pages etc. auto focus is not a real accessibility problem.
    * So we allow/support it and disable a11y-autofocus warnings in generic places.
@@ -28,6 +31,9 @@
   <label for={id} class="label">
     <span class="label-text">
       {label}
+      {#if helpLink}
+        <SupHelp {helpLink} />
+      {/if}
     </span>
   </label>
   <slot />
diff --git a/frontend/src/lib/forms/Select.svelte b/frontend/src/lib/forms/Select.svelte
index 2d5a79528..d9abbbe5a 100644
--- a/frontend/src/lib/forms/Select.svelte
+++ b/frontend/src/lib/forms/Select.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { HelpLink } from '$lib/components/help';
   import FormField from './FormField.svelte';
   import { randomFormId } from './utils';
 
@@ -8,9 +9,10 @@
   export let autofocus = false;
   export let error: string | string[] | undefined = undefined;
   export let disabled = false;
+  export let helpLink: HelpLink | undefined = undefined;
 </script>
 
-<FormField {id} {label} {error} {autofocus}>
+<FormField {id} {label} {error} {autofocus} {helpLink}>
   <!-- svelte-ignore a11y-autofocus -->
   <select {disabled} bind:value {id} class="select select-bordered" {autofocus} on:change>
     <slot />
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 60fa61a61..a187e635d 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -13,6 +13,7 @@
     "column_edit": "Edit",
     "project_table_title": "Projects",
     "user_table_title": "Users",
+    "how_to_create_users": "How to Create Users",
     "is_draft": "Draft",
     "email_not_verified": "Not Verified",
     "notifications": {
@@ -86,7 +87,8 @@
     "app_name": "Language Depot"
   },
   "appmenu": {
-    "log_out": "Log out"
+    "log_out": "Log out",
+    "help": "Help"
   },
   "close": "Close",
   "delete_modal": {
@@ -181,7 +183,7 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
       "unspecified": "Unspecified",
       "confidentiality_unspecified": "Confidentiality unspecified",
       "label": "This project is confidential. The safety of project members is a security concern.",
-      "description": "Only project members and administrators will be able to see this project.",
+      "description": "Only project members and administrators will be able to see this project. For more information see [Project Confidentiality](https://scribehow.com/shared/Project_Confidentiality__s6TX8_wFQ1ejVpH1s5Bsmw?referrer=documents).",
       "suggestions": "Consider using an alias for the project, project members and any other identifying information in the project. (For similar reasons to those mentioned for [confidential Paratext projects](https://paratext.org/paratext-help-and-support/registry-training-and-help/confidential-projects/).)",
       "modal": {
         "title": "Project confidentiality",
diff --git a/frontend/src/lib/layout/AppMenu.svelte b/frontend/src/lib/layout/AppMenu.svelte
index 1dbfeb2ab..887bd43a3 100644
--- a/frontend/src/lib/layout/AppMenu.svelte
+++ b/frontend/src/lib/layout/AppMenu.svelte
@@ -5,6 +5,8 @@
   import Badge from '$lib/components/Badges/Badge.svelte';
   import {APP_VERSION} from '$lib/util/version';
   import type {LexAuthUser} from '$lib/user';
+  import Icon from '$lib/icons/Icon.svelte';
+  import { helpLinks } from '$lib/components/help';
 
   export let serverVersion: string;
   export let apiVersion: string | null;
@@ -50,6 +52,13 @@
     </a>
   </li>
 
+  <li>
+    <a href={helpLinks.helpList} target="_blank" rel="external">
+      {$t('appmenu.help')}
+      <Icon icon="i-mdi-open-in-new" size="text-2xl" />
+    </a>
+  </li>
+
   <div class="divider" />
   <div class="grow" />
   <div class="flex flex-col items-end gap-1">
diff --git a/frontend/src/lib/layout/Layout.svelte b/frontend/src/lib/layout/Layout.svelte
index 22d943136..bb3f2e109 100644
--- a/frontend/src/lib/layout/Layout.svelte
+++ b/frontend/src/lib/layout/Layout.svelte
@@ -9,6 +9,7 @@
   import { page } from '$app/stores';
   import type { LayoutData } from '../../routes/$types';
   import DevContent from './DevContent.svelte';
+  import { helpLinks } from '$lib/components/help';
 
   let menuToggle = false;
   $: data = $page.data as LayoutData;
@@ -49,6 +50,11 @@
               <Icon size="text-2xl" icon="i-mdi-box-variant" />
             </a>
           </DevContent>
+          <a href={helpLinks.helpList} target="_blank" rel="external"
+            class="btn btn-sm btn-info btn-outline max-sm:hidden">
+            {$t('appmenu.help')}
+            <Icon icon="i-mdi-open-in-new" size="text-lg" />
+          </a>
           <AdminContent>
             <a href="/admin" class="btn btn-sm btn-accent">
               <span class="max-sm:hidden">
diff --git a/frontend/src/routes/(authenticated)/admin/+page.svelte b/frontend/src/routes/(authenticated)/admin/+page.svelte
index cb09e6035..f5a02bc2c 100644
--- a/frontend/src/routes/(authenticated)/admin/+page.svelte
+++ b/frontend/src/routes/(authenticated)/admin/+page.svelte
@@ -22,6 +22,7 @@
   import { PageBreadcrumb } from '$lib/layout';
   import AdminTabs, { type AdminTabId } from './AdminTabs.svelte';
   import type { Confidentiality } from '$lib/components/Projects';
+  import { helpLinks } from '$lib/components/help';
 
   export let data: PageData;
   $: projects = data.projects;
@@ -111,14 +112,28 @@
 
     <div class:admin-tabs:hidden={tab !== 'users'}>
       <AdminTabs activeTab="users" on:clickTab={(event) => $queryParamValues.tab = event.detail}>
-        {$t('admin_dashboard.user_table_title')}
-        <Badge>
-          <span class="inline-flex gap-2">
-            {$number(shownUsers.length)}
-            <span>/</span>
-            {$number(filteredUserCount)}
-          </span>
-        </Badge>
+        <div class="flex gap-4 justify-between grow">
+          <div class="flex gap-4 items-center">
+            {$t('admin_dashboard.user_table_title')}
+            <div class="contents max-xs:hidden">
+              <Badge>
+                <span class="inline-flex gap-2">
+                  {$number(shownUsers.length)}
+                  <span>/</span>
+                  {$number(filteredUserCount)}
+                </span>
+              </Badge>
+            </div>
+          </div>
+          <a class="btn btn-sm btn-success btn-outline max-xs:btn-square group"
+            href={helpLinks.bulkAddCreate}
+            target="_blank" rel="external">
+            <span class="admin-tabs:hidden">
+              {$t('admin_dashboard.how_to_create_users')}
+            </span>
+            <span class="i-mdi-plus text-2xl group-hover:i-mdi-open-in-new" />
+          </a>
+        </div>
       </AdminTabs>
       <div class="mt-4">
         <FilterBar
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte
index 6c57fa661..5444e973b 100644
--- a/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte
+++ b/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte
@@ -10,6 +10,7 @@
   import { page } from '$app/stores'
   import UserTypeahead from '$lib/forms/UserTypeahead.svelte';
   import type { SingleUserTypeaheadResult } from '$lib/gql/typeahead-queries';
+  import { SupHelp, helpLinks } from '$lib/components/help';
 
   export let projectId: string;
   const schema = z.object({
@@ -74,7 +75,10 @@
 </BadgeButton>
 
 <FormModal bind:this={formModal} {schema} let:errors>
-  <span slot="title">{$t('project_page.add_user.modal_title')}</span>
+  <span slot="title">
+    {$t('project_page.add_user.modal_title')}
+    <SupHelp helpLink={helpLinks.addProjectMember} />
+  </span>
   {#if $page.data.user?.isAdmin}
     <UserTypeahead
       id="usernameOrEmail"
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte
index 5c43271d4..7507eb021 100644
--- a/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte
+++ b/frontend/src/routes/(authenticated)/project/[project_code]/BulkAddProjectMembers.svelte
@@ -12,6 +12,7 @@
   import BadgeList from '$lib/components/Badges/BadgeList.svelte';
   import { distinct } from '$lib/util/array';
   import PasswordStrengthMeter from '$lib/components/PasswordStrengthMeter.svelte';
+  import { SupHelp, helpLinks } from '$lib/components/help';
 
   enum BulkAddSteps {
     Add,
@@ -94,7 +95,10 @@
   </BadgeButton>
 
   <FormModal bind:this={formModal} {schema} let:errors>
-    <span slot="title">{$t('project_page.bulk_add_members.modal_title')}</span>
+    <span slot="title">
+      {$t('project_page.bulk_add_members.modal_title')}
+      <SupHelp helpLink={helpLinks.bulkAddCreate} />
+    </span>
     {#if currentStep == BulkAddSteps.Add}
       <p class="mb-2">{$t('project_page.bulk_add_members.explanation')}</p>
       <Input