feature/IO-3497-Ant-Design-v5-to-v6 - Signed off Files (Checkpoint)

client/src/components/form-items-formatted/email-form-item.component.jsx

@@ -1,22 +1,20 @@
 import { MailFilled } from "@ant-design/icons";
-import { Input } from "antd";
+import { Button, Input, Space } from "antd";
 import { forwardRef } from "react";
 
 function FormItemEmail(props, ref) {
+  const { defaultValue, value, ...restProps } = props;
+  const emailValue = defaultValue || value;
+
   return (
-    <Input
-      {...props}
-      ref={ref}
-      addonAfter={
-        props.defaultValue || props.value ? (
-          <a href={`mailto:${props.defaultValue || props.value}`}>
-            <MailFilled />
-          </a>
-        ) : (
-          <MailFilled />
-        )
-      }
-    />
+    <Space.Compact style={{ width: "100%" }}>
+      <Input {...restProps} ref={ref} value={value} defaultValue={defaultValue} />
+      {emailValue ? (
+        <Button icon={<MailFilled />} href={`mailto:${emailValue}`} target="_blank" rel="noopener noreferrer" />
+      ) : (
+        <Button icon={<MailFilled />} disabled />
+      )}
+    </Space.Compact>
   );
 }