Add knowledge base links to Import / Export tabs

- Add links at the top of the Import and Export tabs to a knowledge base article with information about using these features for various workflows. - Use a `<label>` for the "Select Hypothesis export file", since it is logically a label. This label is associated to the file input via `htmlFor`, but note the custom file input will still read the fixed button text ("Select a file") - Make labels bold in Import / Export tab to make them stand out against the help text, and also for consistency with the "Share" tab Part of #5783
hypothesis · Sep 12, 2023 · c01e96e · c01e96e
1 parent c666be3
commit c01e96e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/src/sidebar/components/ShareDialog/ExportAnnotations.tsx b/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   CardActions,
+  Link,
   Input,
   Select,
 } from '@hypothesis/frontend-shared';
@@ -99,7 +100,22 @@ function ExportAnnotations({
     >
       {exportableAnnotations.length > 0 ? (
         <>
-          <label data-testid="export-count" htmlFor="export-filename">
+          <p className="text-color-text-light mb-3">
+            <Link
+              variant="text-light"
+              underline="always"
+              href="https://web.hypothes.is/help/exporting-and-importing-annotations-in-the-hypothesis-web-app/"
+              target="_blank"
+            >
+              Learn more
+            </Link>{' '}
+            about copying and exporting annotations.
+          </p>
+          <label
+            data-testid="export-count"
+            htmlFor="export-filename"
+            className="font-medium"
+          >
             Name of export file:
           </label>
           <Input
@@ -113,7 +129,7 @@ function ExportAnnotations({
             required
             maxLength={250}
           />
-          <label htmlFor="export-user" className="block">
+          <label htmlFor="export-user" className="block font-medium">
             Select which user{"'"}s annotations to export:
           </label>
           <Select

diff --git a/src/sidebar/components/ShareDialog/FileInput.tsx b/src/sidebar/components/ShareDialog/FileInput.tsx
@@ -5,11 +5,15 @@ import { useRef, useState } from 'preact/hooks';
 export type FileInputProps = {
   onFileSelected: (file: File) => void;
   disabled?: boolean;
+
+  /** ID for the `<input type="file">` element. */
+  id?: string;
 };
 
 export default function FileInput({
   onFileSelected,
   disabled,
+  id,
 }: FileInputProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [filename, setFilename] = useState<string | null>(null);
@@ -29,6 +33,7 @@ export default function FileInput({
       <input
         ref={fileInputRef}
         accept=".json"
+        id={id}
         type="file"
         disabled={disabled}
         className="invisible absolute w-0 h-0"

diff --git a/src/sidebar/components/ShareDialog/ImportAnnotations.tsx b/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
@@ -1,4 +1,4 @@
-import { Button, CardActions, Select } from '@hypothesis/frontend-shared';
+import { Button, CardActions, Link, Select } from '@hypothesis/frontend-shared';
 import { useCallback, useEffect, useId, useMemo, useState } from 'preact/hooks';
 
 import type { APIAnnotationData } from '../../../types/api';
@@ -96,6 +96,7 @@ function ImportAnnotations({
     };
   }
 
+  const fileInputId = useId();
   const userSelectId = useId();
 
   if (!currentUser) {
@@ -138,14 +139,25 @@ function ImportAnnotations({
 
   return (
     <>
-      <p>Select Hypothesis export file:</p>
-      <FileInput onFileSelected={setFile} disabled={busy} />
+      <p className="text-color-text-light mb-3">
+        <Link
+          variant="text-light"
+          underline="always"
+          href="https://web.hypothes.is/help/exporting-and-importing-annotations-in-the-hypothesis-web-app/"
+          target="_blank"
+        >
+          Learn more
+        </Link>{' '}
+        about importing annotations.
+      </p>
+      <label htmlFor={fileInputId} className="font-medium">
+        Select Hypothesis export file:
+      </label>
+      <FileInput onFileSelected={setFile} disabled={busy} id={fileInputId} />
       {userList && (
         <>
-          <label htmlFor={userSelectId}>
-            <p className="mt-3">
-              Select which user&apos;s annotations to import:
-            </p>
+          <label htmlFor={userSelectId} className="block font-medium">
+            Select which user&apos;s annotations to import:
           </label>
           <Select
             id={userSelectId}