Replace SelectNext usages with Select

hypothesis · Jul 18, 2024 · 1aec784 · 1aec784
1 parent 8c15062
commit 1aec784
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/sidebar/components/ShareDialog/ExportAnnotations.tsx b/src/sidebar/components/ShareDialog/ExportAnnotations.tsx
@@ -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,15 +322,15 @@ function ExportAnnotations({
                 maxLength={250}
               />
               <div className="grow-0 ml-2 min-w-[5rem]">
-                <SelectNext
+                <Select
                   value={exportFormat}
                   onChange={setExportFormat}
                   buttonContent={exportFormat.shortTitle ?? exportFormat.title}
                   data-testid="export-format-select"
                   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>

diff --git a/src/sidebar/components/ShareDialog/ImportAnnotations.tsx b/src/sidebar/components/ShareDialog/ImportAnnotations.tsx
@@ -1,9 +1,4 @@
-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 && (

diff --git a/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx b/src/sidebar/components/ShareDialog/UserAnnotationsListItem.tsx
@@ -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,

diff --git a/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js
@@ -1,4 +1,4 @@
-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:[email protected]');
       });
@@ -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,

diff --git a/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js b/src/sidebar/components/ShareDialog/test/ImportAnnotations-test.js
@@ -1,4 +1,4 @@
-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:[email protected]');
   });
 
@@ -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:[email protected]',
       )

diff --git a/yarn.lock b/yarn.lock
@@ -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