Add Delete device button into DeviceInfoCard

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Add Delete device button in Device Info Card ([#397](https://github.com/astarte-platform/astarte-dashboard/issues/397)).
 
 ## [1.1.0] - 2023-06-20
 

src/DeviceStatusPage/DeviceInfoCard.tsx

@@ -62,13 +62,15 @@ interface DeviceInfoCardProps {
   onInhibitCredentialsClick: () => void;
   onEnableCredentialsClick: () => void;
   onWipeCredentialsClick: () => void;
+  onDeleteDeviceClick: () => void;
 }
 
 const DeviceInfoCard = ({
   device,
   onInhibitCredentialsClick,
   onEnableCredentialsClick,
   onWipeCredentialsClick,
+  onDeleteDeviceClick,
 }: DeviceInfoCardProps): React.ReactElement => (
   <FullHeightCard xs={12} md={6} className="mb-4">
     <Card.Header as="h5">Device Info</Card.Header>
@@ -96,6 +98,9 @@ const DeviceInfoCard = ({
         <Button variant="danger" onClick={onWipeCredentialsClick}>
           Wipe credential secret
         </Button>
+        <Button variant="danger" className="ml-1" onClick={onDeleteDeviceClick}>
+          Delete device
+        </Button>
       </div>
     </Card.Body>
   </FullHeightCard>

src/DeviceStatusPage/index.tsx

@@ -17,8 +17,8 @@
 */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Col, Container, Row, Spinner } from 'react-bootstrap';
-import { Link, useParams } from 'react-router-dom';
+import { Col, Container, Form, Row, Spinner } from 'react-bootstrap';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 import type { AstarteDevice } from 'astarte-client';
 import BackButton from '../ui/BackButton';
@@ -95,6 +95,11 @@
   kind: 'reregister_device_modal';
 };
 
+type DeleteDeviceModalT = {
+  kind: 'delete_device_modal';
+  isDeletingDevice: boolean;
+};
+
 function isWipeCredentialsModal(modal: PageModal): modal is WipeCredentialsModalT {
   return modal.kind === 'wipe_credentials_modal';
 }
@@ -131,6 +136,10 @@
   return modal.kind === 'reregister_device_modal';
 }
 
+function isDeleteDeviceModal(modal: PageModal): modal is DeleteDeviceModalT {
+  return modal.kind === 'delete_device_modal';
+}
+
 type PageModal =
   | WipeCredentialsModalT
   | AddToGroupModalT
@@ -140,15 +149,19 @@
   | NewAttributeModalT
   | EditAttributeModalT
   | DeleteAttributeModalT
-  | ReregisterDeviceModalT;
+  | ReregisterDeviceModalT
+  | DeleteDeviceModalT;
 
 export default (): React.ReactElement => {
   const { deviceId = '' } = useParams();
   const astarte = useAstarte();
+  const navigate = useNavigate();
   const deviceFetcher = useFetch(() => astarte.client.getDeviceInfo(deviceId));
   const groupsFetcher = useFetch(() => astarte.client.getGroupList());
   const [devicePageAlers, devicePageAlersController] = useAlerts();
   const [activeModal, setActiveModal] = useState<PageModal | null>(null);
+  const [confirmString, setConfirmString] = useState('');
+  const canDelete = confirmString === deviceId;
 
   const unjoinedGroups = useMemo(() => {
     if (deviceFetcher.status === 'ok' && groupsFetcher.status === 'ok') {
@@ -156,7 +169,7 @@
       return groupsFetcher.value.filter((groupName) => !joinedGroups.has(groupName));
     }
     return [];
   }, [deviceFetcher.status, groupsFetcher.status]);
 
   const dismissModal = useCallback(() => {
     setActiveModal(null);
@@ -175,7 +188,7 @@
           );
         });
     },
     [astarte.client, deviceId, devicePageAlersController],
   );
 
   const wipeDeviceCredentials = useCallback(() => {
@@ -190,6 +203,19 @@
       });
   }, [astarte.client, deviceId, dismissModal, devicePageAlersController]);
 
+  const handleDeleteDevice = useCallback(() => {
+    astarte.client
+      .deleteDevice(deviceId)
+      .then(() => {
+        setActiveModal({ kind: 'delete_device_modal', isDeletingDevice: true });
+        navigate('/devices');
+      })
+      .catch(() => {
+        devicePageAlersController.showError(`Couldn't delete the device`);
+        dismissModal();
+      });
+  }, [astarte.client, deviceId, dismissModal, devicePageAlersController, navigate]);
+
   const addDeviceToGroup = useCallback(
     (groupName) => {
       astarte.client
@@ -206,7 +232,7 @@
           dismissModal();
         });
     },
     [astarte.client, deviceId, devicePageAlersController, dismissModal],
   );
 
   const handleAliasUpdate = useCallback(
@@ -222,7 +248,7 @@
           dismissModal();
         });
     },
     [astarte.client, deviceId, devicePageAlersController, dismissModal],
   );
 
   const handleAliasDeletion = useCallback(
@@ -238,7 +264,7 @@
           dismissModal();
         });
     },
     [astarte.client, deviceId, devicePageAlersController, dismissModal],
   );
 
   const handleAttributeUpdate = useCallback(
@@ -254,7 +280,7 @@
           dismissModal();
         });
     },
     [astarte.client, deviceId, devicePageAlersController, dismissModal],
   );
 
   const handleAttributeDeletion = useCallback(
@@ -270,7 +296,7 @@
           dismissModal();
         });
     },
     [astarte.client, deviceId, devicePageAlersController, dismissModal],
   );
 
   return (
@@ -313,6 +339,12 @@
                     isWipingCredentials: false,
                   })
                 }
+                onDeleteDeviceClick={() =>
+                  setActiveModal({
+                    kind: 'delete_device_modal',
+                    isDeletingDevice: false,
+                  })
+                }
               />
               <AliasesCard
                 device={device}
@@ -401,6 +433,39 @@
           </p>
         </ConfirmModal>
       )}
+      {activeModal && isDeleteDeviceModal(activeModal) && (
+        <ConfirmModal
+          title="Delete device"
+          confirmLabel="Delete device"
+          confirmVariant="danger"
+          onCancel={dismissModal}
+          onConfirm={() => {
+            setActiveModal({ ...activeModal, isDeletingDevice: true });
+            handleDeleteDevice();
+          }}
+          isConfirming={activeModal.isDeletingDevice}
+          disabled={!canDelete}
+        >
+          <p>
+            You are going to permanently delete&nbsp;
+            <b>{deviceId}</b> and the corresponding data. Deleted devices cannot be restored but a
+            new one can be registered instead.
+          </p>
+          <p>
+            Please type <b>{deviceId}</b> to proceed.
+          </p>
+          <Form.Group controlId="deleteDevice">
+            <Form.Control
+              type="text"
+              placeholder="Device Id"
+              value={confirmString}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setConfirmString(e.target.value)
+              }
+            />
+          </Form.Group>
+        </ConfirmModal>
+      )}
       {activeModal && isAddToGroupModal(activeModal) && (
         <AddToGroupModal
           onCancel={dismissModal}

src/astarte-client/client.ts

@@ -201,16 +201,20 @@ class AstarteClient {
       interfaces:            astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces`,
       interfaceMajors:       astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfaceName'}`,
       interface:             astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfaceName'}/${'interfaceMajor'}`,
-      interfaceData:         astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfaceName'}/${'interfaceMajor'}`,
+      interfaceData: 
+astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/interfaces/${'interfaceName'}/${'interfaceMajor'}`,
       trigger:               astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/triggers/${'triggerName'}`,
       triggers:              astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/triggers`,
       policies:              astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/policies`,
       policy:                astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/policies/${'policyName'}`,
+      device:                astarteAPIurl`${config.realmManagementApiUrl}v1/${'realm'}/devices/${'deviceId'}`,
       appengineHealth:       astarteAPIurl`${config.appEngineApiUrl}health`,
       devicesStats:          astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/stats/devices`,
       devices:               astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices`,
       deviceInfo:            astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices/${'deviceId'}`,
-      deviceData:            astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices/${'deviceId'}/interfaces/${'interfaceName'}${'path'}?keep_milliseconds=true&since=${'since'}&since_after=${'sinceAfter'}&to=${'to'}&limit=${'limit'}`,
+      deviceData: 
+astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/devices/${'deviceId'}/interfaces/${'interfaceName'}${'path'}?
+keep_milliseconds=true&since=${'since'}&since_after=${'sinceAfter'}&to=${'to'}&limit=${'limit'}`,
       groups:                astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/groups`,
       groupDevices:          astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/groups/${'groupName'}/devices`,
       deviceInGroup:         astarteAPIurl`${config.appEngineApiUrl}v1/${'realm'}/groups/${'groupName'}/devices/${'deviceId'}`,
@@ -613,6 +617,10 @@ class AstarteClient {
     await this.$delete(this.apiConfig.deviceAgent({ deviceId, ...this.config }));
   }
 
+  async deleteDevice(deviceId: AstarteDevice['id']): Promise<void> {
+    await this.$delete(this.apiConfig.device({ ...this.config, deviceId }));
+  }
+
   async getFlowInstances(): Promise<Array<AstarteFlow['name']>> {
     const response = await this.$get(this.apiConfig.flows(this.config));
     return response.data;