Hide "leave group" button if you've already left

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

@@ -388,6 +388,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
         i18n={i18n}
         cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
         conversationTitle={conversation.title}
+        left={Boolean(conversation.left)}
         onLeave={onLeave}
         onBlock={onBlock}
       />

ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx

@@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     ? overrideProps.cannotLeaveBecauseYouAreLastAdmin
     : false,
   conversationTitle: overrideProps.conversationTitle || '',
+  left: isBoolean(overrideProps.left) ? overrideProps.left : false,
   onBlock: action('onBlock'),
   onLeave: action('onLeave'),
   i18n,
@@ -39,6 +40,12 @@ story.add('Basic', () => {
   return <ConversationDetailsActions {...props} />;
 });
 
+story.add('Left the group', () => {
+  const props = createProps({ left: true });
+
+  return <ConversationDetailsActions {...props} />;
+});
+
 story.add('Cannot leave because you are the last admin', () => {
   const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
 

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

@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { LocalizerType } from '../../../types/Util';
@@ -15,6 +15,7 @@ import { ConversationDetailsIcon } from './ConversationDetailsIcon';
 export type Props = {
   cannotLeaveBecauseYouAreLastAdmin: boolean;
   conversationTitle: string;
+  left: boolean;
   onBlock: () => void;
   onLeave: () => void;
   i18n: LocalizerType;
@@ -23,6 +24,7 @@ export type Props = {
 export const ConversationDetailsActions: React.ComponentType<Props> = ({
   cannotLeaveBecauseYouAreLastAdmin,
   conversationTitle,
+  left,
   onBlock,
   onLeave,
   i18n,
@@ -30,7 +32,9 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
   const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false);
   const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false);
 
-  let leaveGroupNode = (
+  let leaveGroupNode: ReactNode;
+  if (!left) {
+    leaveGroupNode = (
       <PanelRow
         disabled={cannotLeaveBecauseYouAreLastAdmin}
         onClick={() => setConfirmingLeave(true)}
@@ -66,6 +70,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
         </Tooltip>
       );
     }
+  }
 
   return (
     <>