Update shared components in filter-select lists

src/sidebar/components/FilterSelect.js

-import { Icon } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import Menu from './Menu';
@@ -6,12 +5,13 @@ import MenuItem from './MenuItem';
 
 /**
  * @typedef {import('../store/modules/filters').FilterOption} FilterOption
+ * @typedef {import('@hypothesis/frontend-shared/lib/types').IconComponent} IconComponent
  */
 
 /**
  * @typedef FilterSelectProps
  * @prop {FilterOption} defaultOption
- * @prop {string} [icon]
+ * @prop {IconComponent} [icon]
  * @prop {(selectedFilter: FilterOption) => void} onSelect
  * @prop {FilterOption[]} options
  * @prop {FilterOption} [selectedOption]
@@ -26,7 +26,7 @@ import MenuItem from './MenuItem';
  */
 function FilterSelect({
   defaultOption,
-  icon,
+  icon: Icon,
   onSelect,
   options,
   selectedOption,
@@ -43,7 +43,7 @@ function FilterSelect({
         'text-color-text font-bold text-lg'
       )}
     >
-      {icon && <Icon name={icon} classes="w-4 h-4" />}
+      {Icon && <Icon className="w-4 h-4" />}
       {selected.display}
     </span>
   );

src/sidebar/components/NotebookFilters.js

+import { ProfileIcon } from '@hypothesis/frontend-shared/lib/next';
+
 import { useSidebarStore } from '../store';
 import { useUserFilterOptions } from './hooks/use-filter-options';
 
@@ -19,7 +21,7 @@ function NotebookFilters() {
   return (
     <FilterSelect
       defaultOption={{ value: '', display: 'Everybody' }}
-      icon="profile"
+      icon={ProfileIcon}
       onSelect={userFilter => store.setFilter('user', userFilter)}
       options={userFilterOptions}
       selectedOption={userFilter}

src/sidebar/components/test/FilterSelect-test.js

+import { ProfileIcon } from '@hypothesis/frontend-shared/lib/next';
 import { mount } from 'enzyme';
 
 import FilterSelect, { $imports } from '../FilterSelect';
@@ -61,13 +62,12 @@ describe('FilterSelect', () => {
   });
 
   it('should render provided icon and selected option in label', () => {
-    const wrapper = createComponent({ icon: 'profile' });
+    const wrapper = createComponent({ icon: ProfileIcon });
 
     const label = mount(wrapper.find('Menu').props().label);
-    const icon = label.find('Icon');
+    const icon = label.find('ProfileIcon');
 
     assert.isTrue(icon.exists());
-    assert.equal(icon.props().name, 'profile');
     // Default option should be selected as we didn't indicate a selected option
     assert.include(label.text(), 'all');
   });
@@ -104,7 +104,7 @@ describe('FilterSelect', () => {
         content: () => {
           $imports.$restore();
           return createComponent({
-            icon: 'profile',
+            icon: ProfileIcon,
             title: 'Select something',
             selectedOption: { value: 'twovalue', display: 'Two Value' },
           });

src/sidebar/components/test/NotebookFilters-test.js

+import { ProfileIcon } from '@hypothesis/frontend-shared/lib/next';
 import { mount } from 'enzyme';
 
 import NotebookFilters from '../NotebookFilters';
@@ -47,7 +48,7 @@ describe('NotebookFilters', () => {
       value: 'oneuser',
     });
     assert.deepEqual(props.defaultOption, { value: '', display: 'Everybody' });
-    assert.equal(props.icon, 'profile');
+    assert.equal(props.icon, ProfileIcon);
     assert.equal(props.title, 'Filter by user');
     assert.equal(props.options.length, 1);
     assert.isUndefined(props.selectedOption);