Use the new Select component everywhere

ts/components/Select.tsx

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import classNames from 'classnames';
 
 export type Option = Readonly<{
@@ -19,7 +19,7 @@ export type PropsType = Readonly<{
 export function Select(props: PropsType): JSX.Element {
   const { moduleClassName, value, options, onChange } = props;
 
-  const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
     onChange(event.target.value);
   };
 

ts/components/conversation/conversation-details/GroupLinkManagement.tsx

@@ -9,6 +9,7 @@ import { LocalizerType } from '../../../types/Util';
 import { PanelRow } from './PanelRow';
 import { PanelSection } from './PanelSection';
 import { AccessControlClass } from '../../../textsecure.d';
+import { Select } from '../../Select';
 
 export type PropsType = {
   accessEnum: typeof AccessControlClass.AccessRequired;
@@ -36,8 +37,8 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
   }
 
   const createEventHandler = (handleEvent: (x: boolean) => void) => {
-    return (event: React.ChangeEvent<HTMLSelectElement>) => {
+    return (value: string) => {
-      handleEvent(event.target.value === 'true');
+      handleEvent(value === 'true');
     };
   };
 
@@ -57,19 +58,20 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
           label={i18n('ConversationDetails--group-link')}
           right={
             isAdmin ? (
-              <div className="module-conversation-details-select">
+              <Select
-                <select
                 onChange={createEventHandler(changeHasGroupLink)}
+                options={[
+                  {
+                    text: i18n('on'),
+                    value: i18n('on'),
+                  },
+                  {
+                    text: i18n('off'),
+                    value: i18n('off'),
+                  },
+                ]}
                 value={String(Boolean(hasGroupLink))}
-                >
+              />
-                  <option value="true" aria-label={i18n('on')}>
-                    {i18n('on')}
-                  </option>
-                  <option value="false" aria-label={i18n('off')}>
-                    {i18n('off')}
-                  </option>
-                </select>
-              </div>
             ) : null
           }
         />
@@ -112,21 +114,22 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
                 info={i18n('GroupLinkManagement--approve-info')}
                 label={i18n('GroupLinkManagement--approve-label')}
                 right={
-                  <div className="module-conversation-details-select">
+                  <Select
-                    <select
                     onChange={createEventHandler(
                       setAccessControlAddFromInviteLinkSetting
                     )}
+                    options={[
+                      {
+                        text: i18n('on'),
+                        value: i18n('on'),
+                      },
+                      {
+                        text: i18n('off'),
+                        value: i18n('off'),
+                      },
+                    ]}
                     value={String(membersNeedAdminApproval)}
-                    >
+                  />
-                      <option value="true" aria-label={i18n('on')}>
-                        {i18n('on')}
-                      </option>
-                      <option value="false" aria-label={i18n('off')}>
-                        {i18n('off')}
-                      </option>
-                    </select>
-                  </div>
                 }
               />
             </PanelSection>

ts/components/conversation/conversation-details/GroupV2Permissions.tsx

@@ -10,6 +10,7 @@ import { AccessControlClass } from '../../../textsecure.d';
 
 import { PanelRow } from './PanelRow';
 import { PanelSection } from './PanelSection';
+import { Select } from '../../Select';
 
 export type PropsType = {
   accessEnum: typeof AccessControlClass.AccessRequired;
@@ -30,15 +31,11 @@ export const GroupV2Permissions: React.ComponentType<PropsType> = ({
     throw new Error('GroupV2Permissions rendered without a conversation');
   }
 
-  const updateAccessControlAttributes = (
+  const updateAccessControlAttributes = (value: string) => {
-    event: React.ChangeEvent<HTMLSelectElement>
+    setAccessControlAttributesSetting(Number(value));
-  ) => {
-    setAccessControlAttributesSetting(Number(event.target.value));
   };
-  const updateAccessControlMembers = (
+  const updateAccessControlMembers = (value: string) => {
-    event: React.ChangeEvent<HTMLSelectElement>
+    setAccessControlMembersSetting(Number(value));
-  ) => {
-    setAccessControlMembersSetting(Number(event.target.value));
   };
   const accessControlOptions = getAccessControlOptions(accessEnum, i18n);
 
@@ -48,36 +45,22 @@ export const GroupV2Permissions: React.ComponentType<PropsType> = ({
         label={i18n('ConversationDetails--add-members-label')}
         info={i18n('ConversationDetails--add-members-info')}
         right={
-          <div className="module-conversation-details-select">
+          <Select
-            <select
             onChange={updateAccessControlMembers}
-              value={conversation.accessControlMembers}
+            options={accessControlOptions}
-            >
+            value={String(conversation.accessControlMembers)}
-              {accessControlOptions.map(({ name, value }) => (
+          />
-                <option aria-label={name} key={name} value={value}>
-                  {name}
-                </option>
-              ))}
-            </select>
-          </div>
         }
       />
       <PanelRow
         label={i18n('ConversationDetails--group-info-label')}
         info={i18n('ConversationDetails--group-info-info')}
         right={
-          <div className="module-conversation-details-select">
+          <Select
-            <select
             onChange={updateAccessControlAttributes}
-              value={conversation.accessControlAttributes}
+            options={accessControlOptions}
-            >
+            value={String(conversation.accessControlAttributes)}
-              {accessControlOptions.map(({ name, value }) => (
+          />
-                <option aria-label={name} key={name} value={value}>
-                  {name}
-                </option>
-              ))}
-            </select>
-          </div>
         }
       />
     </PanelSection>

ts/util/getAccessControlOptions.ts

@@ -5,7 +5,7 @@ import { LocalizerType } from '../types/Util';
 import { AccessControlClass } from '../textsecure.d';
 
 type AccessControlOption = {
-  name: string;
+  text: string;
   value: number;
 };
 
@@ -15,11 +15,11 @@ export function getAccessControlOptions(
 ): Array<AccessControlOption> {
   return [
     {
-      name: i18n('GroupV2--all-members'),
+      text: i18n('GroupV2--all-members'),
       value: accessEnum.MEMBER,
     },
     {
-      name: i18n('GroupV2--only-admins'),
+      text: i18n('GroupV2--only-admins'),
       value: accessEnum.ADMINISTRATOR,
     },
   ];