Skip to content

C
coopwire-hypothesis
Commit 1aec7843 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya
Browse files
Options

Replace SelectNext usages with Select

parent 8c15062e
Show whitespace changes
Inline Side-by-side
Showing with 42 additions and 56 deletions
package.json
View file @ 1aec7843
......@@ -14,7 +14,7 @@
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.16.7",
"@hypothesis/frontend-build": "^3.0.0",
"@hypothesis/frontend-shared": "^7.13.0",
"@hypothesis/frontend-shared": "^7.14.0",
"@hypothesis/frontend-testing": "^1.2.0",
"@npmcli/arborist": "^7.0.0",
"@octokit/rest": "^21.0.0",
......
src/sidebar/components/ShareDialog/ExportAnnotations.tsx
View file @ 1aec7843
......@@ -3,8 +3,8 @@ import {
CardActions,
Link,
Input,
SelectNext,
CopyIcon,
Select,
} from '@hypothesis/frontend-shared';
import { useCallback, useId, useMemo, useState } from 'preact/hooks';
......@@ -279,7 +279,7 @@ function ExportAnnotations({
<label htmlFor={userSelectId} className="font-medium">
Select which user{"'"}s annotations to export:
</label>
<SelectNext
<Select
value={selectedUserId}
onChange={setSelectedUserId}
buttonId={userSelectId}
......@@ -290,20 +290,17 @@ function ExportAnnotations({
}
data-testid="user-select"
>
<SelectNext.Option value={undefined}>
<Select.Option value={undefined}>
<UserAnnotationsListItem
userAnnotations={allAnnotationsOption}
/>
</SelectNext.Option>
</Select.Option>
{userList.map(userInfo => (
<SelectNext.Option
key={userInfo.userid}
value={userInfo.userid}
>
<Select.Option key={userInfo.userid} value={userInfo.userid}>
<UserAnnotationsListItem userAnnotations={userInfo} />
</SelectNext.Option>
</Select.Option>
))}
</SelectNext>
</Select>
<label
data-testid="export-count"
htmlFor={fileInputId}
......@@ -325,7 +322,7 @@ function ExportAnnotations({
maxLength={250}
/>
<div className="grow-0 ml-2 min-w-[5rem]">
<SelectNext
<Select
value={exportFormat}
onChange={setExportFormat}
buttonContent={exportFormat.shortTitle ?? exportFormat.title}
......@@ -333,7 +330,7 @@ function ExportAnnotations({
right
>
{exportFormats.map(exportFormat => (
<SelectNext.Option
<Select.Option
key={exportFormat.value}
value={exportFormat}
>
......@@ -345,9 +342,9 @@ function ExportAnnotations({
{exportFormat.description}
</div>
</div>
</SelectNext.Option>
</Select.Option>
))}
</SelectNext>
</Select>
</div>
</div>
</div>
......
src/sidebar/components/ShareDialog/ImportAnnotations.tsx
View file @ 1aec7843
import {
Button,
CardActions,
Link,
SelectNext,
} 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';
......@@ -163,11 +158,9 @@ function ImportAnnotations({
<label htmlFor={userSelectId} className="block font-medium">
Select which user&apos;s annotations to import:
</label>
<SelectNext
<Select
value={selectedUser}
onChange={(newValue: typeof selectedUser) =>
setSelectedUserId(newValue?.userid ?? null)
}
onChange={newValue => setSelectedUserId(newValue?.userid ?? null)}
buttonId={userSelectId}
buttonContent={
selectedUser ? (
......@@ -178,11 +171,11 @@ function ImportAnnotations({
}
>
{userList.map(userInfo => (
<SelectNext.Option key={userInfo.userid} value={userInfo}>
<Select.Option key={userInfo.userid} value={userInfo}>
<UserAnnotationsListItem userAnnotations={userInfo} />
</SelectNext.Option>
</Select.Option>
))}
</SelectNext>
</Select>
</>
)}
{error && (
......
src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx
View file @ 1aec7843
......@@ -5,7 +5,7 @@ export type UserAnnotationsListItemProps = {
};
/**
* UserAnnotations representation to use inside `SelectNext.Option`.
* UserAnnotations representation to use inside `Select.Option`.
*/
export function UserAnnotationsListItem({
userAnnotations,
......
src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
View file @ 1aec7843
import { SelectNext } from '@hypothesis/frontend-shared';
import { Select } from '@hypothesis/frontend-shared';
import {
checkAccessibility,
mockImportedComponents,
......@@ -99,14 +99,11 @@ describe('ExportAnnotations', () => {
$imports.$restore();
});
const waitForTestId = async (wrapper, testId) =>
waitForElement(wrapper, `[data-testid="${testId}"]`);
const waitForSelect = (wrapper, testId) =>
waitForElement(wrapper, `Select[data-testid="${testId}"]`);
const selectExportFormat = async (wrapper, format) => {
const select = await waitForElement(
wrapper,
'[data-testid="export-format-select"]',
);
const select = await waitForSelect(wrapper, 'export-format-select');
select.props().onChange({ value: format });
wrapper.update();
};
......@@ -211,8 +208,8 @@ describe('ExportAnnotations', () => {
const wrapper = createComponent();
const userList = await waitForTestId(wrapper, 'user-select');
const users = userList.find(SelectNext.Option);
const userList = await waitForSelect(wrapper, 'user-select');
const users = userList.find(Select.Option);
assert.equal(users.length, userEntries.length);
for (const [i, entry] of userEntries.entries()) {
......@@ -254,7 +251,7 @@ describe('ExportAnnotations', () => {
wrapper,
'[data-testid="export-format-select"]',
);
const options = select.find(SelectNext.Option);
const options = select.find(Select.Option);
const optionText = (index, type) =>
options.at(index).find(`[data-testid="format-${type}"]`).text();
......@@ -284,8 +281,7 @@ describe('ExportAnnotations', () => {
].forEach(([format, expectedTitle]) => {
it('displays format short title if defined', async () => {
const wrapper = createComponent();
const getSelect = () =>
waitForElement(wrapper, '[data-testid="export-format-select"]');
const getSelect = () => waitForSelect(wrapper, 'export-format-select');
const selectBefore = await getSelect();
selectBefore.props().onChange(format);
......@@ -386,7 +382,7 @@ describe('ExportAnnotations', () => {
const wrapper = createComponent();
// Select the user whose annotations we want to export
const userList = await waitForTestId(wrapper, 'user-select');
const userList = await waitForSelect(wrapper, 'user-select');
act(() => {
userList.prop('onChange')('acct:john@example.com');
});
......@@ -598,7 +594,7 @@ describe('ExportAnnotations', () => {
it('should pass a11y checks', async () => {
const wrapper = createComponent();
const select = await waitForTestId(wrapper, 'user-select');
const select = await waitForSelect(wrapper, 'user-select');
await checkAccessibility({
content: () => wrapper,
......
src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js
View file @ 1aec7843
import { SelectNext } from '@hypothesis/frontend-shared';
import { Select } from '@hypothesis/frontend-shared';
import {
checkAccessibility,
waitFor,
......@@ -106,7 +106,7 @@ describe('ImportAnnotations', () => {
},
];
selectFile(wrapper, annotations);
const userList = await waitForElement(wrapper, SelectNext);
const userList = await waitForElement(wrapper, Select);
assert.ok(userList.prop('value')); // Current user should be auto-selected
// Import button should be disabled since we don't have the things we need
......@@ -200,8 +200,8 @@ describe('ImportAnnotations', () => {
selectFile(wrapper, annotations);
const userList = await waitForElement(wrapper, SelectNext);
const users = userList.find(SelectNext.Option);
const userList = await waitForElement(wrapper, Select);
const users = userList.find(Select.Option);
assert.equal(users.length, userEntries.length);
......@@ -241,7 +241,7 @@ describe('ImportAnnotations', () => {
];
selectFile(wrapper, annotations);
const userList = await waitForElement(wrapper, SelectNext);
const userList = await waitForElement(wrapper, Select);
assert.equal(userList.props().value.userid, 'acct:john@example.com');
});
......@@ -259,7 +259,7 @@ describe('ImportAnnotations', () => {
];
selectFile(wrapper, annotations);
const userList = await waitForElement(wrapper, SelectNext);
const userList = await waitForElement(wrapper, Select);
assert.equal(userList.prop('value'), null);
});
......@@ -297,9 +297,9 @@ describe('ImportAnnotations', () => {
selectFile(wrapper, annotations);
const userList = await waitForElement(wrapper, SelectNext);
const userList = await waitForElement(wrapper, Select);
const option = userList
.find(SelectNext.Option)
.find(Select.Option)
.filterWhere(
option => option.prop('value').userid === 'acct:brian@example.com',
)
......
yarn.lock
View file @ 1aec7843
......@@ -2713,15 +2713,15 @@ __metadata:
languageName: node
linkType: hard
"@hypothesis/frontend-shared@npm:^7.13.0":
version: 7.13.0
resolution: "@hypothesis/frontend-shared@npm:7.13.0"
"@hypothesis/frontend-shared@npm:^7.14.0":
version: 7.14.0
resolution: "@hypothesis/frontend-shared@npm:7.14.0"
dependencies:
highlight.js: ^11.6.0
wouter-preact: ^3.0.0
peerDependencies:
preact: ^10.4.0
checksum: 7beba12e9cb0de55a4f78a152abb6770fbc161cea4b9cefdc4e9bb88adb7fe96cd05940b13c7cd007836b5fd60872b4d8f330ea9716fbcb554f8c578bbb29f1f
checksum: e5a21a08d4e23b9ca412320b03ddab07bc849a0962d608af7758c4c71aed5e9748fa9ae57ec0cf74f7deaa42a01d9960f11a1681b96b116503f53317e9f368e8
languageName: node
linkType: hard
......@@ -8746,7 +8746,7 @@ __metadata:
"@babel/preset-react": ^7.0.0
"@babel/preset-typescript": ^7.16.7
"@hypothesis/frontend-build": ^3.0.0
"@hypothesis/frontend-shared": ^7.13.0
"@hypothesis/frontend-shared": ^7.14.0
"@hypothesis/frontend-testing": ^1.2.0
"@npmcli/arborist": ^7.0.0
"@octokit/rest": ^21.0.0
......
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