diff --git a/dashboard/components/icons/AlertCircleIcon.tsx b/dashboard/components/icons/AlertCircleIcon.tsx new file mode 100644 index 000000000..5763df243 --- /dev/null +++ b/dashboard/components/icons/AlertCircleIcon.tsx @@ -0,0 +1,35 @@ +import { SVGProps } from 'react'; + +const AlertCircleIcon = (props: SVGProps) => ( + + + + + + +); + +export default AlertCircleIcon; diff --git a/dashboard/pages/cloud-accounts.tsx b/dashboard/pages/cloud-accounts.tsx index a984703be..632f7bfa8 100644 --- a/dashboard/pages/cloud-accounts.tsx +++ b/dashboard/pages/cloud-accounts.tsx @@ -1,21 +1,77 @@ import Head from 'next/head'; import Image from 'next/image'; +import { useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import providers from '../utils/providerHelper'; import Toast from '../components/toast/Toast'; +import Modal from '../components/modal/Modal'; +import Button from '../components/button/Button'; +import EditIcon from '../components/icons/EditIcon'; import More2Icon from '../components/icons/More2Icon'; +import DeleteIcon from '../components/icons/DeleteIcon'; +import AlertCircleIcon from '../components/icons/AlertCircleIcon'; import CloudAccountsHeader from '../components/cloud-account/components/CloudAccountsHeader'; import CloudAccountsLayout from '../components/cloud-account/components/CloudAccountsLayout'; import useCloudAccount from '../components/cloud-account/hooks/useCloudAccounts/useCloudAccount'; function CloudAccounts() { + const optionsRef = useRef(null); + const [clickedItemId, setClickedItemId] = useState(null); + const [editCloudAccount, setEditCloudAccount] = useState(false); + const [removeCloudAccount, setRemoveCloudAccount] = useState<{ + state: boolean; + accountName: string; + }>({ + state: false, + accountName: '' + }); + const { router, cloudAccounts, toast, dismissToast, isNotCustomView } = useCloudAccount(); + useEffect(() => { + const handleOutsideClick = (event: MouseEvent) => { + if ( + optionsRef.current && + !optionsRef.current.contains(event.target as Node) + ) { + setClickedItemId(null); // Close the options if clicked outside + } + }; + + document.addEventListener('mousedown', handleOutsideClick); + + return () => { + document.removeEventListener('mousedown', handleOutsideClick); + }; + }, []); + + const toggleOptions = (itemId: string) => { + setClickedItemId(prevClickedItemId => { + if (prevClickedItemId === itemId) { + return null; // Close on Clicking the same item's icon + } + return itemId; + }); + }; + + const closeRemoveModal = () => { + setRemoveCloudAccount({ + state: false, + accountName: '' + }); + }; + + const deleteCloudAccount = () => { + const removalName = removeCloudAccount.accountName; + console.log('deleting', removalName); + // TODO: (onboarding-wizard) handle account removal API call here + }; + return ( <> @@ -30,6 +86,7 @@ function CloudAccounts() { {cloudAccounts.map(account => { const { provider, name, status } = account; + const isOpen = clickedItemId === name; return (
+

{name}

{providers.providerLabel(provider)}

+
{status.state} -
+
{status.message}
- + + toggleOptions(name)} + /> + + {isOpen && ( +
+ + +
+ )}
); })} + {/* Delete Modal */} + closeRemoveModal()} + > +
+
+ +

+ Are you sure you want to remove this cloud account? +

+

+ All related data (like custom views and tags) will be deleted and + the {removeCloudAccount.accountName} account will be disconnected + from Komiser. +

+
+
+ + +
+
+ + + {/* Edit Drawer */} + setEditCloudAccount(false)} + > +
Editing
+
Replace this with the drawer
+ + {/* Toast component */} {toast && }