From a4d4a21ba54f74fcf0a0d505d4177ef6d95e004f Mon Sep 17 00:00:00 2001
From: Kai Gao <kai.gao@adslot.com>
Date: Tue, 20 Dec 2022 14:58:15 +1100
Subject: [PATCH] feat: add dts to toast and confirm modal

---
 src/components/ConfirmModal/index.d.ts |  1 +
 src/components/ConfirmModal/index.jsx  |  3 +++
 src/components/Toast/index.d.ts        |  2 ++
 src/components/Toast/index.jsx         | 15 +++++++++------
 www/containers/props.json              |  7 +++++++
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/ConfirmModal/index.d.ts b/src/components/ConfirmModal/index.d.ts
index 4dabec9bc..f9e41fba2 100644
--- a/src/components/ConfirmModal/index.d.ts
+++ b/src/components/ConfirmModal/index.d.ts
@@ -29,6 +29,7 @@ export interface ConfirmModalProps {
    * determines if the modal needs to be shown or not
    */
   show?: boolean;
+  dts?: string;
 }
 
 declare const ConfirmModal: React.FC<ConfirmModalProps>;
diff --git a/src/components/ConfirmModal/index.jsx b/src/components/ConfirmModal/index.jsx
index 8584e4a56..0efb51b7d 100644
--- a/src/components/ConfirmModal/index.jsx
+++ b/src/components/ConfirmModal/index.jsx
@@ -11,6 +11,7 @@ const ConfirmModal = ({
   modalDescription,
   modalTitle,
   show,
+  dts,
 }) => {
   const cancelAction = () => {
     modalClose();
@@ -26,6 +27,7 @@ const ConfirmModal = ({
       <ActionPanel
         isModal
         data-testid="confirm-modal-wrapper"
+        dts={dts}
         className="confirm-modal-component"
         size="small"
         title={modalTitle}
@@ -81,6 +83,7 @@ ConfirmModal.propTypes = {
    * determines if the modal needs to be shown or not
    */
   show: PropTypes.bool,
+  dts: PropTypes.string,
 };
 
 ConfirmModal.defaultProps = {
diff --git a/src/components/Toast/index.d.ts b/src/components/Toast/index.d.ts
index 9a85b3f75..b00b8ea25 100644
--- a/src/components/Toast/index.d.ts
+++ b/src/components/Toast/index.d.ts
@@ -49,6 +49,7 @@ export interface ToastNotificationProps {
   title?: string;
   theme?: ToastNotificationTheme;
   message: React.ReactNode;
+  dts?: string;
 }
 
 declare const ToastNotification: React.FC<ToastNotificationProps>;
@@ -59,6 +60,7 @@ export interface notifyProps {
   title?: string;
   theme?: notifyTheme;
   message: React.ReactNode;
+  dts?: string;
 }
 
 declare const notify: React.FC<notifyProps>;
diff --git a/src/components/Toast/index.jsx b/src/components/Toast/index.jsx
index 5904101b8..165b60032 100644
--- a/src/components/Toast/index.jsx
+++ b/src/components/Toast/index.jsx
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { toast, ToastContainer as ReactToastContainer } from 'react-toastify';
 import PropTypes from 'prop-types';
 import { toastPlacements } from './constants';
+import { expandDts } from '../../utils';
 import 'react-toastify/dist/ReactToastify.css';
 import './styles.css';
 
@@ -42,9 +43,9 @@ ToastContainer.defaultProps = {
 
 const getToastClass = (theme) => classnames('aui--toast-title', { [`aui--toast-title-${theme}`]: theme });
 
-export const ToastMessage = ({ toastClass, title = '', message }) => (
+export const ToastMessage = ({ toastClass, title = '', message, dts }) => (
   <React.Fragment>
-    <span className="aui--toast-body-message">
+    <span className="aui--toast-body-message" {...expandDts(dts)}>
       <span className={toastClass}>{title}</span>
       <span>{message}</span>
     </span>
@@ -59,17 +60,17 @@ const withDefaultOptions = (options) => ({
   ...options,
 });
 
-const ToastNotification = ({ theme = 'info', title = '', message, ...options }) => {
+const ToastNotification = ({ theme = 'info', title = '', message, dts, ...options }) => {
   const toastClass = getToastClass(theme);
-  const toastMessage = <ToastMessage toastClass={toastClass} title={title} message={message} />;
+  const toastMessage = <ToastMessage toastClass={toastClass} title={title} message={message} dts={dts} />;
 
   toast.info(toastMessage, withDefaultOptions({ theme, ...options }));
   return null;
 };
 
-const notify = ({ theme = 'info', title, message, ...options }) => {
+const notify = ({ theme = 'info', title, message, dts, ...options }) => {
   toast.info(
-    <ToastMessage toastClass={getToastClass(theme)} title={title} message={message} />,
+    <ToastMessage toastClass={getToastClass(theme)} title={title} message={message} dts={dts} />,
     withDefaultOptions({ theme, ...options })
   );
   return;
@@ -80,6 +81,7 @@ notify.propTypes = {
   title: PropTypes.string,
   theme: PropTypes.oneOf(['success', 'info', 'alert', 'attention']),
   message: PropTypes.node.isRequired,
+  dts: PropTypes.string,
 };
 
 ToastNotification.propTypes = {
@@ -92,6 +94,7 @@ ToastNotification.propTypes = {
   title: PropTypes.string,
   theme: PropTypes.oneOf(['success', 'info', 'alert', 'attention']),
   message: PropTypes.node.isRequired,
+  dts: PropTypes.string,
 };
 
 const dismiss = toast.dismiss;
diff --git a/www/containers/props.json b/www/containers/props.json
index 2300fffcc..5c0fd02ef 100644
--- a/www/containers/props.json
+++ b/www/containers/props.json
@@ -1626,6 +1626,13 @@
             "value": "false",
             "computed": false
           }
+        },
+        "dts": {
+          "type": {
+            "name": "string"
+          },
+          "required": false,
+          "description": ""
         }
       }
     }