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 {
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
......
......@@ -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"
......
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">
<label htmlFor={userSelectId} className="block font-medium">
Select which user&apos;s annotations to import:
</p>
</label>
<Select
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