Commit c01e96ec authored by Robert Knight's avatar Robert Knight

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 https://github.com/hypothesis/client/issues/5783
parent c666be3c
import { import {
Button, Button,
CardActions, CardActions,
Link,
Input, Input,
Select, Select,
} from '@hypothesis/frontend-shared'; } from '@hypothesis/frontend-shared';
...@@ -99,7 +100,22 @@ function ExportAnnotations({ ...@@ -99,7 +100,22 @@ function ExportAnnotations({
> >
{exportableAnnotations.length > 0 ? ( {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: Name of export file:
</label> </label>
<Input <Input
...@@ -113,7 +129,7 @@ function ExportAnnotations({ ...@@ -113,7 +129,7 @@ function ExportAnnotations({
required required
maxLength={250} maxLength={250}
/> />
<label htmlFor="export-user" className="block"> <label htmlFor="export-user" className="block font-medium">
Select which user{"'"}s annotations to export: Select which user{"'"}s annotations to export:
</label> </label>
<Select <Select
......
...@@ -5,11 +5,15 @@ import { useRef, useState } from 'preact/hooks'; ...@@ -5,11 +5,15 @@ import { useRef, useState } from 'preact/hooks';
export type FileInputProps = { export type FileInputProps = {
onFileSelected: (file: File) => void; onFileSelected: (file: File) => void;
disabled?: boolean; disabled?: boolean;
/** ID for the `<input type="file">` element. */
id?: string;
}; };
export default function FileInput({ export default function FileInput({
onFileSelected, onFileSelected,
disabled, disabled,
id,
}: FileInputProps) { }: FileInputProps) {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [filename, setFilename] = useState<string | null>(null); const [filename, setFilename] = useState<string | null>(null);
...@@ -29,6 +33,7 @@ export default function FileInput({ ...@@ -29,6 +33,7 @@ export default function FileInput({
<input <input
ref={fileInputRef} ref={fileInputRef}
accept=".json" accept=".json"
id={id}
type="file" type="file"
disabled={disabled} disabled={disabled}
className="invisible absolute w-0 h-0" className="invisible absolute w-0 h-0"
......
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 { useCallback, useEffect, useId, useMemo, useState } from 'preact/hooks';
import type { APIAnnotationData } from '../../../types/api'; import type { APIAnnotationData } from '../../../types/api';
...@@ -96,6 +96,7 @@ function ImportAnnotations({ ...@@ -96,6 +96,7 @@ function ImportAnnotations({
}; };
} }
const fileInputId = useId();
const userSelectId = useId(); const userSelectId = useId();
if (!currentUser) { if (!currentUser) {
...@@ -138,14 +139,25 @@ function ImportAnnotations({ ...@@ -138,14 +139,25 @@ function ImportAnnotations({
return ( return (
<> <>
<p>Select Hypothesis export file:</p> <p className="text-color-text-light mb-3">
<FileInput onFileSelected={setFile} disabled={busy} /> <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 && ( {userList && (
<> <>
<label htmlFor={userSelectId}> <label htmlFor={userSelectId} className="block font-medium">
<p className="mt-3"> Select which user&apos;s annotations to import:
Select which user&apos;s annotations to import:
</p>
</label> </label>
<Select <Select
id={userSelectId} id={userSelectId}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment