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