Refactor action buttons callback

web/components/action-buttons/ActionButton/ActionButton.tsx

@@ -1,46 +1,30 @@
 import { Button } from 'antd';
-import { FC, useState } from 'react';
-import { Modal } from '../../ui/Modal/Modal';
+import { FC } from 'react';
 import { ExternalAction } from '../../../interfaces/external-action';
 import styles from './ActionButton.module.scss';
 
 export type ActionButtonProps = {
   action: ExternalAction;
   primary?: boolean;
+  externalActionSelected: (action: ExternalAction) => void;
 };
 
 export const ActionButton: FC<ActionButtonProps> = ({
-  action: { url, title, description, icon, color, openExternally },
+  action,
   primary = true,
+  externalActionSelected,
 }) => {
-  const [showModal, setShowModal] = useState(false);
-
-  const onButtonClicked = () => {
-    if (openExternally) {
-      window.open(url, '_blank');
-    } else {
-      setShowModal(true);
-    }
-  };
+  const { title, description, icon, color } = action;
 
   return (
-    <>
-      <Button
-        type={primary ? 'primary' : 'default'}
-        className={`${styles.button}`}
-        onClick={onButtonClicked}
-        style={{ backgroundColor: color }}
-      >
-        {icon && <img src={icon} className={`${styles.icon}`} alt={description} />}
-        {title}
-      </Button>
-      <Modal
-        title={description || title}
-        url={url}
-        open={showModal}
-        height="80vh"
-        handleCancel={() => setShowModal(false)}
-      />
-    </>
+    <Button
+      type={primary ? 'primary' : 'default'}
+      className={`${styles.button}`}
+      onClick={() => externalActionSelected(action)}
+      style={{ backgroundColor: color }}
+    >
+      {icon && <img src={icon} className={`${styles.icon}`} alt={description} />}
+      {title}
+    </Button>
   );
 };