1+ import { FC } from "react" ;
12import AddIcon from "@mui/icons-material/Add" ;
23import { CircularProgress } from "@mui/material" ;
34
45import ConnectIcon from "src/components/Icons/Connect/Connect" ;
56import DisconnectIcon from "src/components/Icons/Disconnect/Disconnect" ;
7+ import OffboardIcon from "src/components/Icons/Offboard/Offboard" ;
8+ import { AccountConfig } from "src/types/account-config" ;
9+ import { ResourceInstance } from "src/types/resourceInstance" ;
610import Button from "components/Button/Button" ;
711import SearchInput from "components/DataGrid/SearchInput" ;
812import DataGridHeaderTitle from "components/Headers/DataGridHeaderTitle" ;
913import DeleteIcon from "components/Icons/Delete/Delete" ;
1014import RefreshWithToolTip from "components/RefreshWithTooltip/RefreshWithToolTip" ;
1115
12- const CloudAccountsTableHeader = ( {
16+ type CloudAccountTableHeaderProps = {
17+ count : number ;
18+ searchText : string ;
19+ setSearchText : ( text : string ) => void ;
20+ onCreateClick : ( ) => void ;
21+ onDeleteClick : ( ) => void ;
22+ selectedInstance : ResourceInstance ;
23+ refetchInstances : ( ) => void ;
24+ isFetchingInstances : boolean ;
25+ onConnectClick : ( ) => void ;
26+ onDisconnectClick : ( ) => void ;
27+ onOffboardClick ?: ( ) => void ;
28+ serviceModelType : string ;
29+ accountConfig : AccountConfig ;
30+ isSelectedInstanceReadyToOffboard : boolean ;
31+ isFetchingAccountConfigs : boolean ;
32+ } ;
33+
34+ const CloudAccountsTableHeader : FC < CloudAccountTableHeaderProps > = ( {
1335 count,
1436 searchText,
1537 setSearchText,
@@ -18,9 +40,12 @@ const CloudAccountsTableHeader = ({
1840 selectedInstance,
1941 refetchInstances,
2042 isFetchingInstances,
43+ isFetchingAccountConfigs,
2144 onConnectClick,
2245 onDisconnectClick,
2346 serviceModelType,
47+ onOffboardClick,
48+ isSelectedInstanceReadyToOffboard,
2449} ) => {
2550 const isDeploying = selectedInstance ?. status === "DEPLOYING" ;
2651 const isAttaching = selectedInstance ?. status === "ATTACHING" ;
@@ -49,6 +74,8 @@ const CloudAccountsTableHeader = ({
4974
5075 const isDeleteDisabled = ! selectedInstance || isDeleting || isDisconnected ;
5176
77+ const isOffboardDisabled = ! isSelectedInstanceReadyToOffboard ;
78+
5279 const isDisconnectDisabledMessage = ! selectedInstance
5380 ? "Please select a cloud account"
5481 : isAttaching || isConnecting
@@ -80,6 +107,12 @@ const CloudAccountsTableHeader = ({
80107 ? "Cloud account is disconnected"
81108 : "" ;
82109
110+ const offboardingDisabledMessage = ! selectedInstance
111+ ? "Please select a cloud account"
112+ : isOffboardDisabled
113+ ? "Cloud account is not ready to offboard"
114+ : "" ;
115+
83116 return (
84117 < div className = "py-5 px-6 flex items justify-between gap-4" >
85118 < DataGridHeaderTitle
@@ -96,7 +129,7 @@ const CloudAccountsTableHeader = ({
96129 < div className = "flex items-center mr-6" > { isFetchingInstances && < CircularProgress size = { 20 } /> } </ div >
97130
98131 < SearchInput placeholder = "Search by ID" searchText = { searchText } setSearchText = { setSearchText } />
99- < RefreshWithToolTip refetch = { refetchInstances } disabled = { isFetchingInstances } />
132+ < RefreshWithToolTip refetch = { refetchInstances } disabled = { isFetchingInstances || isFetchingAccountConfigs } />
100133
101134 < Button
102135 data-testid = "delete-button"
@@ -108,6 +141,16 @@ const CloudAccountsTableHeader = ({
108141 >
109142 Delete
110143 </ Button >
144+ < Button
145+ data-testid = "offboard-button"
146+ variant = "outlined"
147+ disabled = { isOffboardDisabled }
148+ onClick = { onOffboardClick }
149+ disabledMessage = { offboardingDisabledMessage }
150+ startIcon = { < OffboardIcon disabled = { isOffboardDisabled } /> }
151+ >
152+ Offboard
153+ </ Button >
111154 < Button
112155 data-testid = "disconnect-button"
113156 variant = "outlined"
0 commit comments