[Glitch] Cancel quote button appearing in all statuses

Port d2dca826dd06c78e562a9eaf96c9993d6bbe2e08 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/status.jsx

@@ -157,6 +157,7 @@ class Status extends ImmutablePureComponent {
     'expanded',
     'unread',
     'pictureInPicture',
+    'headerRenderFn',
     'previousId',
     'nextInReplyToId',
     'rootId',
@@ -685,7 +686,7 @@ class Status extends ImmutablePureComponent {
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
 
     const header = this.props.headerRenderFn
-      ? this.props.headerRenderFn({ status, account, avatarSize, messages, onHeaderClick: this.handleHeaderClick })
+      ? this.props.headerRenderFn({ status, account, avatarSize, messages, onHeaderClick: this.handleHeaderClick, statusProps: this.props })
       : (
         <StatusHeader
           status={status}

app/javascript/flavours/glitch/components/status/header.tsx

@@ -12,6 +12,8 @@ import type { DisplayNameProps } from '../display_name';
 import { LinkedDisplayName } from '../display_name';
 import { VisibilityIcon } from '../visibility_icon';
 
+import type { StatusProps } from './types';
+
 export interface StatusHeaderProps {
   status: Status;
   account?: Account;
@@ -22,7 +24,10 @@ export interface StatusHeaderProps {
   onHeaderClick?: MouseEventHandler<HTMLDivElement>;
 }
 
-export type StatusHeaderRenderFn = (args: StatusHeaderProps) => ReactNode;
+export type StatusHeaderRenderFn = (
+  args: StatusHeaderProps,
+  statusProps?: StatusProps,
+) => ReactNode;
 
 export const StatusHeader: FC<StatusHeaderProps> = ({
   status,

app/javascript/flavours/glitch/components/status/types.ts

@@ -0,0 +1,36 @@
+import type { ComponentClass, MouseEventHandler, ReactNode } from 'react';
+
+import type { Account } from '@/flavours/glitch/models/account';
+
+import type { StatusHeaderRenderFn } from './header';
+
+// Taken from the Status component.
+export interface StatusProps {
+  account?: Account;
+  children?: ReactNode;
+  previousId?: string;
+  rootId?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  muted?: boolean;
+  hidden?: boolean;
+  unread?: boolean;
+  showThread?: boolean;
+  showActions?: boolean;
+  isQuotedPost?: boolean;
+  shouldHighlightOnMount?: boolean;
+  getScrollPosition?: () => null | { height: number; top: number };
+  updateScrollBottom?: (snapshot: number) => void;
+  cacheMediaWidth?: (width: number) => void;
+  cachedMediaWidth?: number;
+  scrollKey?: string;
+  skipPrepend?: boolean;
+  avatarSize?: number;
+  unfocusable?: boolean;
+  headerRenderFn?: StatusHeaderRenderFn;
+  contextType?: string;
+}
+
+export type StatusComponent = ComponentClass<
+  StatusProps,
+  { showMedia?: boolean; showDespiteFilter?: boolean }
+>;

app/javascript/flavours/glitch/components/status_quoted.tsx

@@ -227,13 +227,15 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
   const headerRenderFn: StatusHeaderRenderFn = useCallback(
     (props) => (
       <StatusHeader {...props}>
-        <IconButton
+        {onQuoteCancel && (
-          onClick={onQuoteCancel}
+          <IconButton
-          className='status__quote-cancel'
+            onClick={onQuoteCancel}
-          title={intl.formatMessage(quoteCancelMessage)}
+            className='status__quote-cancel'
-          icon='cancel-fill'
+            title={intl.formatMessage(quoteCancelMessage)}
-          iconComponent={CancelFillIcon}
+            icon='cancel-fill'
-        />
+            iconComponent={CancelFillIcon}
+          />
+        )}
       </StatusHeader>
     ),
     [intl, onQuoteCancel],