From 0757faef6d5a86bd79d656870c487ab1fe8e1790 Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Mon, 23 Dec 2024 14:58:07 +0100
Subject: [PATCH] Make the encryption card more configurable: - Change the icon
 - Can set the destructive props

---
 .../settings/encryption/ChangeRecoveryKey.tsx |  8 ++++++-
 .../settings/encryption/EncryptionCard.tsx    | 21 +++++++++++++------
 .../encryption/EncryptionCard-test.tsx        |  3 ++-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/components/views/settings/encryption/ChangeRecoveryKey.tsx b/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
index 7e02d7debd..0c2c9485f2 100644
--- a/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
+++ b/src/components/views/settings/encryption/ChangeRecoveryKey.tsx
@@ -18,6 +18,7 @@ import {
     TextControl,
 } from "@vector-im/compound-web";
 import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../languageHandler";
@@ -157,7 +158,12 @@ export function ChangeRecoveryKey({
                 pages={pages}
                 onPageClick={onCancelClick}
             />
-            <EncryptionCard title={labels.title} description={labels.description} className="mx_ChangeRecoveryKey">
+            <EncryptionCard
+                Icon={KeyIcon}
+                title={labels.title}
+                description={labels.description}
+                className="mx_ChangeRecoveryKey"
+            >
                 {content}
             </EncryptionCard>
         </>
diff --git a/src/components/views/settings/encryption/EncryptionCard.tsx b/src/components/views/settings/encryption/EncryptionCard.tsx
index 8a10802cc3..6f9ddd651a 100644
--- a/src/components/views/settings/encryption/EncryptionCard.tsx
+++ b/src/components/views/settings/encryption/EncryptionCard.tsx
@@ -5,9 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { JSX, PropsWithChildren } from "react";
+import React, { JSX, PropsWithChildren, ComponentType, SVGAttributes } from "react";
 import { BigIcon, Heading } from "@vector-im/compound-web";
-import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 import classNames from "classnames";
 
 interface EncryptionCardProps {
@@ -22,7 +21,15 @@ interface EncryptionCardProps {
     /**
      * The description of the card.
      */
-    description: string;
+    description?: string;
+    /**
+     * Whether this icon shows a destructive action.
+     */
+    destructive?: boolean;
+    /**
+     * The icon to display.
+     */
+    Icon: ComponentType<SVGAttributes<SVGElement>>;
 }
 
 /**
@@ -32,18 +39,20 @@ export function EncryptionCard({
     title,
     description,
     className,
+    destructive = false,
+    Icon,
     children,
 }: PropsWithChildren<EncryptionCardProps>): JSX.Element {
     return (
         <div className={classNames("mx_EncryptionCard", className)}>
             <div className="mx_EncryptionCard_header">
-                <BigIcon>
-                    <KeyIcon />
+                <BigIcon destructive={destructive}>
+                    <Icon />
                 </BigIcon>
                 <Heading as="h2" size="sm" weight="semibold">
                     {title}
                 </Heading>
-                <span>{description}</span>
+                {description && <span>{description}</span>}
             </div>
             {children}
         </div>
diff --git a/test/unit-tests/components/views/settings/encryption/EncryptionCard-test.tsx b/test/unit-tests/components/views/settings/encryption/EncryptionCard-test.tsx
index d51fcb840b..e6d9618a43 100644
--- a/test/unit-tests/components/views/settings/encryption/EncryptionCard-test.tsx
+++ b/test/unit-tests/components/views/settings/encryption/EncryptionCard-test.tsx
@@ -7,13 +7,14 @@
 
 import React from "react";
 import { render } from "jest-matrix-react";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 
 import { EncryptionCard } from "../../../../../../src/components/views/settings/encryption/EncryptionCard";
 
 describe("<EncryptionCard />", () => {
     it("should render", () => {
         const { asFragment } = render(
-            <EncryptionCard title="My title" description="My description">
+            <EncryptionCard Icon={KeyIcon} title="My title" description="My description">
                 Encryption card children
             </EncryptionCard>,
         );