Use standard Tabs component for PendingInvites

stylesheets/components/ConversationDetails.scss

@@ -118,24 +118,8 @@
   }
 
   &__tabs {
-    display: flex;
+    &#{&} {
-    justify-content: space-around;
+      border-bottom: none;
-  }
-
-  &__tab {
-    @include font-body-1;
-    cursor: pointer;
-    padding: 15px;
-
-    &:focus {
-      @include mouse-mode {
-        outline: none;
-      }
-    }
-
-    &--selected {
-      @include font-body-1-bold;
-      border-bottom: 2px solid $color-black;
     }
   }
 

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

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import classNames from 'classnames';
 import _ from 'lodash';
 
 import type { ConversationType } from '../../../state/ducks/conversations';
@@ -15,6 +14,7 @@ import { PanelSection } from './PanelSection';
 import { PanelRow } from './PanelRow';
 import { ConversationDetailsIcon, IconType } from './ConversationDetailsIcon';
 import { isAccessControlEnabled } from '../../../groups/util';
+import { Tabs } from '../../Tabs';
 import { assertDev } from '../../../util/assert';
 
 export type PropsDataType = {
@@ -84,78 +84,56 @@ export function PendingInvites({
     );
   }
 
-  const [selectedTab, setSelectedTab] = React.useState(Tab.Requests);
   const [stagedMemberships, setStagedMemberships] =
     React.useState<Array<StagedMembershipType> | null>(null);
 
   return (
     <div className="conversation-details-panel">
-      <div className="ConversationDetails__tabs">
+      <Tabs
-        <div
+        moduleClassName="ConversationDetails__tabs"
-          className={classNames({
+        initialSelectedTab={Tab.Requests}
-            ConversationDetails__tab: true,
+        tabs={[
-            'ConversationDetails__tab--selected': selectedTab === Tab.Requests,
+          {
-          })}
+            id: Tab.Requests,
-          onClick={() => {
+            label: i18n('icu:PendingInvites--tab-requests', {
-            setSelectedTab(Tab.Requests);
+              count: pendingApprovalMemberships.length,
-          }}
+            }),
-          onKeyUp={(e: React.KeyboardEvent) => {
+          },
-            if (e.target === e.currentTarget && e.keyCode === 13) {
+          {
-              setSelectedTab(Tab.Requests);
+            id: Tab.Pending,
-            }
+            label: i18n('icu:PendingInvites--tab-invites', {
-          }}
+              count: pendingMemberships.length,
-          role="tab"
+            }),
-          tabIndex={0}
+          },
-        >
+        ]}
-          {i18n('icu:PendingInvites--tab-requests', {
+      >
-            count: pendingApprovalMemberships.length,
+        {({ selectedTab }) => (
-          })}
+          <>
-        </div>
+            {selectedTab === Tab.Requests ? (
-
+              <MembersPendingAdminApproval
-        <div
+                conversation={conversation}
-          className={classNames({
+                getPreferredBadge={getPreferredBadge}
-            ConversationDetails__tab: true,
+                i18n={i18n}
-            'ConversationDetails__tab--selected': selectedTab === Tab.Pending,
+                memberships={pendingApprovalMemberships}
-          })}
+                setStagedMemberships={setStagedMemberships}
-          onClick={() => {
+                theme={theme}
-            setSelectedTab(Tab.Pending);
+              />
-          }}
+            ) : null}
-          onKeyUp={(e: React.KeyboardEvent) => {
+            {selectedTab === Tab.Pending ? (
-            if (e.target === e.currentTarget && e.keyCode === 13) {
+              <MembersPendingProfileKey
-              setSelectedTab(Tab.Pending);
+                conversation={conversation}
-            }
+                getPreferredBadge={getPreferredBadge}
-          }}
+                i18n={i18n}
-          role="tab"
+                members={conversation.sortedGroupMembers || []}
-          tabIndex={0}
+                memberships={pendingMemberships}
-        >
+                ourUuid={ourUuid}
-          {i18n('icu:PendingInvites--tab-invites', {
+                setStagedMemberships={setStagedMemberships}
-            count: pendingMemberships.length,
+                theme={theme}
-          })}
+              />
-        </div>
+            ) : null}
-      </div>
+          </>
-
+        )}
-      {selectedTab === Tab.Requests ? (
+      </Tabs>
-        <MembersPendingAdminApproval
-          conversation={conversation}
-          getPreferredBadge={getPreferredBadge}
-          i18n={i18n}
-          memberships={pendingApprovalMemberships}
-          setStagedMemberships={setStagedMemberships}
-          theme={theme}
-        />
-      ) : null}
-      {selectedTab === Tab.Pending ? (
-        <MembersPendingProfileKey
-          conversation={conversation}
-          getPreferredBadge={getPreferredBadge}
-          i18n={i18n}
-          members={conversation.sortedGroupMembers || []}
-          memberships={pendingMemberships}
-          ourUuid={ourUuid}
-          setStagedMemberships={setStagedMemberships}
-          theme={theme}
-        />
-      ) : null}
 
       {stagedMemberships && stagedMemberships.length && (
         <MembershipActionConfirmation

ts/test-mock/pnp/accept_gv2_invite_test.ts

@@ -216,7 +216,7 @@ describe('pnp/accept gv2 invite', function needsName() {
       )
       .click();
     await conversationStack
-      .locator('.ConversationDetails__tab >> text=Invites (1)')
+      .locator('.ConversationDetails__tabs__tab >> text=Invites (1)')
       .click();
     await conversationStack
       .locator(