From 6e70937825dcc5296cc602e5557744dcc8f3492f Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Fri, 1 Jul 2022 19:32:27 +0100
Subject: [PATCH] chore: turn emoji picker into an experiment

---
 .../common/messaging/MessageBox.tsx           | 12 ++++---
 src/context/intermediate/modals/Prompt.tsx    | 33 +++++++++----------
 src/mobx/stores/Experiments.ts                |  7 +++-
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx
index b480860c..81ed3e75 100644
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -658,11 +658,13 @@ export default observer(({ channel }: Props) => {
                         <Box size={24} />
                     </IconButton>
                 </Action>*/}
-                <Action>
-                    <IconButton onClick={() => setPicker(!picker)}>
-                        <HappyBeaming size={24} />
-                    </IconButton>
-                </Action>
+                {state.experiments.isEnabled("picker") && (
+                    <Action>
+                        <IconButton onClick={() => setPicker(!picker)}>
+                            <HappyBeaming size={24} />
+                        </IconButton>
+                    </Action>
+                )}
                 <Action>
                     <IconButton
                         className={
diff --git a/src/context/intermediate/modals/Prompt.tsx b/src/context/intermediate/modals/Prompt.tsx
index 4f9986c1..fc7478fb 100644
--- a/src/context/intermediate/modals/Prompt.tsx
+++ b/src/context/intermediate/modals/Prompt.tsx
@@ -22,6 +22,7 @@ import { useIntermediate } from "../Intermediate";
 interface Props {
     onClose: () => void;
     question: Children;
+    description?: Children;
     content?: Children;
     disabled?: boolean;
     actions: Action[];
@@ -31,6 +32,7 @@ interface Props {
 export function PromptModal({
     onClose,
     question,
+    description,
     content,
     actions,
     disabled,
@@ -39,6 +41,7 @@ export function PromptModal({
     return (
         <Modal
             title={question}
+            description={description}
             actions={actions}
             onClose={onClose}
             disabled={disabled}>
@@ -133,6 +136,12 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                             fields={{ name }}
                         />
                     }
+                    description={
+                        <TextReact
+                            id={`app.special.modals.prompt.${event[0]}_long`}
+                            fields={{ name: <b>{name}</b> }}
+                        />
+                    }
                     actions={[
                         {
                             confirmation: true,
@@ -183,12 +192,6 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                             onClick: onClose,
                         },
                     ]}
-                    content={
-                        <TextReact
-                            id={`app.special.modals.prompt.${event[0]}_long`}
-                            fields={{ name: <b>{name}</b> }}
-                        />
-                    }
                     disabled={processing}
                     error={error}
                 />
@@ -199,6 +202,11 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                 <PromptModal
                     onClose={onClose}
                     question={<Text id={"app.context_menu.delete_message"} />}
+                    description={
+                        <Text
+                            id={`app.special.modals.prompt.confirm_delete_message_long`}
+                        />
+                    }
                     actions={[
                         {
                             confirmation: true,
@@ -228,18 +236,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                         },
                     ]}
                     content={
-                        <>
-                            <h5>
-                                <Text
-                                    id={`app.special.modals.prompt.confirm_delete_message_long`}
-                                />
-                            </h5>
-                            <Message
-                                message={props.target}
-                                head={true}
-                                contrast
-                            />
-                        </>
+                        <Message message={props.target} head={true} contrast />
                     }
                     disabled={processing}
                     error={error}
diff --git a/src/mobx/stores/Experiments.ts b/src/mobx/stores/Experiments.ts
index 2d3f29f4..a91318a5 100644
--- a/src/mobx/stores/Experiments.ts
+++ b/src/mobx/stores/Experiments.ts
@@ -10,7 +10,7 @@ import Store from "../interfaces/Store";
 /**
  * Union type of available experiments.
  */
-export type Experiment = "dummy" | "offline_users" | "plugins";
+export type Experiment = "dummy" | "offline_users" | "plugins" | "picker";
 
 /**
  * Currently active experiments.
@@ -19,6 +19,7 @@ export const AVAILABLE_EXPERIMENTS: Experiment[] = [
     "dummy",
     "offline_users",
     "plugins",
+    "picker",
 ];
 
 /**
@@ -41,6 +42,10 @@ export const EXPERIMENTS: {
         description:
             "This will enable the experimental plugin API. Only touch this if you know what you're doing.",
     },
+    picker: {
+        title: "Emoji Picker",
+        description: "This will enable a work-in-progress emoji picker.",
+    },
 };
 
 export interface Data {