console: Unclaim gateway on delete

pkg/webui/console/containers/delete-entity-header-modal/index.js

@@ -95,8 +95,16 @@ const deletedErrorMessageMap = {
 }
 
 const DeleteEntityHeaderModal = props => {
-  const { entity, entityId, entityName, visible, setVisible, setError, additionalConditions } =
-    props
+  const {
+    entity,
+    entityId,
+    entityName,
+    visible,
+    setVisible,
+    setError,
+    additionalConditions,
+    additionalAction,
+  } = props
 
   const lowerCaseEntity = entity.toLowerCase()
   const [confirmId, setConfirmId] = React.useState('')
@@ -138,6 +146,9 @@ const DeleteEntityHeaderModal = props => {
             if (setError) {
               setError(undefined)
             }
+            if (additionalAction) {
+              await additionalAction()
+            }
             await dispatch(
               attachPromise(
                 deleteEntityActionMap[entity](entityId, { purge: purgeEntity || false }),
@@ -163,7 +174,7 @@ const DeleteEntityHeaderModal = props => {
       }
       setVisible(false)
     },
-    [dispatch, entityId, navigate, purgeEntity, setError, setVisible, entity],
+    [setVisible, setError, additionalAction, dispatch, entity, entityId, purgeEntity, navigate],
   )
 
   const loadData = useCallback(
@@ -266,6 +277,7 @@ const DeleteEntityHeaderModal = props => {
 }
 
 DeleteEntityHeaderModal.propTypes = {
+  additionalAction: PropTypes.func,
   additionalConditions: PropTypes.bool,
   entity: PropTypes.string.isRequired,
   entityId: PropTypes.string.isRequired,
@@ -279,6 +291,7 @@ DeleteEntityHeaderModal.defaultProps = {
   additionalConditions: false,
   entityName: undefined,
   setError: undefined,
+  additionalAction: undefined,
 }
 
 export default DeleteEntityHeaderModal

pkg/webui/console/containers/gateway-overview-header/index.js

@@ -44,9 +44,11 @@ import {
   DELETE_BOOKMARK_BASE,
   deleteBookmark,
 } from '@console/store/actions/user-preferences'
+import { unclaimGateway } from '@console/store/actions/gateways'
 
 import { selectUser } from '@console/store/selectors/user'
 import { selectBookmarksList } from '@console/store/selectors/user-preferences'
+import { selectSelectedGatewayClaimable } from '@console/store/selectors/gateways'
 
 import style from './gateway-overview-header.styl'
 
@@ -69,6 +71,7 @@ const GatewayOverviewHeader = ({ gateway }) => {
     selectFetchingEntry(state, DELETE_BOOKMARK_BASE),
   )
   const mayDeleteGtw = useSelector(state => checkFromState(mayDeleteGateway, state))
+  const supportsClaiming = useSelector(selectSelectedGatewayClaimable)
 
   const isBookmarked = useMemo(
     () => bookmarks.map(b => b.entity_ids?.gateway_ids?.gateway_id).some(b => b === gateway_id),
@@ -126,6 +129,12 @@ const GatewayOverviewHeader = ({ gateway }) => {
     </>
   )
 
+  const handleUnclaimGateway = useCallback(async () => {
+    if (supportsClaiming) {
+      await dispatch(attachPromise(unclaimGateway(gateway_id)))
+    }
+  }, [dispatch, gateway_id, supportsClaiming])
+
   return (
     <div className={style.root}>
       <div className="overflow-hidden d-flex flex-column gap-cs-xs">
@@ -164,6 +173,7 @@ const GatewayOverviewHeader = ({ gateway }) => {
           entityName={name}
           setVisible={setDeleteGatewayVisible}
           visible={deleteGatewayVisible}
+          additionalAction={handleUnclaimGateway}
         />
       </div>
     </div>

pkg/webui/console/views/gateway-general-settings/basic-settings-form/index.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React, { useCallback } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { GATEWAY } from '@console/constants/entities'
 
@@ -38,10 +38,13 @@ import Require from '@console/lib/components/require'
 import PropTypes from '@ttn-lw/lib/prop-types'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 import tooltipIds from '@ttn-lw/lib/constants/tooltip-ids'
+import attachPromise from '@ttn-lw/lib/store/actions/attach-promise'
 
 import { encodeAttributes, decodeAttributes } from '@console/lib/attributes'
 import { checkFromState, mayDeleteGateway } from '@console/lib/feature-checks'
 
+import { unclaimGateway } from '@console/store/actions/gateways'
+
 import { selectIsConfiguration } from '@console/store/selectors/identity-server'
 import { selectUserId } from '@console/store/selectors/user'
 
@@ -76,6 +79,8 @@ const BasicSettingsForm = React.memo(props => {
   const [error, setError] = React.useState(undefined)
   const [deleteGtwVisible, setDeleteGtwVisible] = React.useState(false)
 
+  const dispatch = useDispatch()
+
   const handleOpenDeleteGatewayModal = useCallback(() => {
     setDeleteGtwVisible(true)
   }, [])
@@ -102,6 +107,12 @@ const BasicSettingsForm = React.memo(props => {
     [onSubmit],
   )
 
+  const handleUnclaimGateway = useCallback(async () => {
+    if (supportsClaiming) {
+      await dispatch(attachPromise(unclaimGateway(gtwId)))
+    }
+  }, [dispatch, gtwId, supportsClaiming])
+
   return (
     <Form
       error={error}
@@ -272,6 +283,7 @@ const BasicSettingsForm = React.memo(props => {
             entityName={gateway.name}
             setVisible={setDeleteGtwVisible}
             visible={deleteGtwVisible}
+            additionalAction={handleUnclaimGateway}
           />
         </Require>
       </SubmitBar>