Update deregistration modal to include instances content

assets/js/components/DeregistrationModal/DeregistrationModal.jsx

@@ -5,23 +5,45 @@ import { EOS_CLEANING_SERVICES } from 'eos-icons-react';
 import Modal from '@components/Modal';
 import Button from '@components/Button';
 
+import { APPLICATION_TYPE, DATABASE_TYPE } from '@lib/model';
+
+const getContentByType = (type, data) => {
+  switch (type) {
+    case APPLICATION_TYPE:
+      return {
+        title: `Clean up absent instance ${data.instanceNumber} from ${data.sid} system`,
+        body: `In the case of an ASCS instance or a unique Application Server Instance, 
+          this action will cause the complete deregistration of the system.`,
+      };
+    case DATABASE_TYPE:
+      return {
+        title: `Clean up absent instance ${data.instanceNumber} from ${data.sid} database`,
+        body: `In the case of the last database instance, or the last Primary instance in 
+          a system replication setup, this action will cause the complete deregistration 
+          of the database and the system above if any.`,
+      };
+    default:
+      return {
+        title: `Clean up data discovered by agent on host ${data.hostname}`,
+        body: `This action will cause Trento to stop tracking all the components
+          discovered by the agent in this host, including the host itself and any
+          other component depending on it.`,
+      };
+  }
+};
+
 function DeregistrationModal({
-  hostname,
+  contentType = 'host',
   isOpen = false,
   onCleanUp,
   onCancel,
+  ...rest
 }) {
+  const { title, body } = getContentByType(contentType, rest);
+
   return (
-    <Modal
-      title={`Clean up data discovered by agent on host ${hostname}`}
-      open={isOpen}
-      onClose={onCancel}
-    >
-      <div className="text-gray-500">
-        This action will cause Trento to stop tracking all the components
-        discovered by the agent in this host, including the host itself and any
-        other component depending on it.
-      </div>
+    <Modal title={title} open={isOpen} onClose={onCancel}>
+      <div className="text-gray-500">{body}</div>
       <div className="flex justify-start gap-2 mt-4">
         <Button
           type="default-fit"

assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx

@@ -1,36 +1,50 @@
 import React, { useState } from 'react';
 
 import Button from '@components/Button';
+import { APPLICATION_TYPE, DATABASE_TYPE } from '@lib/model';
+
 import DeregistrationModal from '.';
 
 export default {
   title: 'DeregistrationModal',
   component: DeregistrationModal,
   argTypes: {
+    contentType: {
+      control: { type: 'radio' },
+      options: ['host', APPLICATION_TYPE, DATABASE_TYPE],
+      description: 'The content type of the deregistration modal',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'host' },
+      },
+    },
     hostname: {
       type: 'string',
-      description: 'The host name to confirm deregistration of',
+      description:
+        'The host name to confirm deregistration of. Only used in host deregistration modal',
+      control: { type: 'text' },
+    },
+    sid: {
+      type: 'string',
+      description:
+        'The sid of the deregistered instance. Only used in application and database deregistratio modals',
+      control: { type: 'text' },
+    },
+    instanceNumber: {
+      type: 'string',
+      description:
+        'The sid of the deregistered instance. Only used in application and database deregistratio modals',
       control: { type: 'text' },
     },
     isOpen: {
       type: 'boolean',
       description: 'Sets the visibility of the modal',
       control: false,
     },
-    onCleanUp: {
-      description: 'Callback function to run when "Clean up" button is clicked',
-      action: 'Deregistration',
-      control: false,
-    },
-    onClose: {
-      description: 'Callback function to run when "Cancel" button is clicked',
-      action: 'Cancel',
-      control: false,
-    },
   },
 };
 
-function ButtonToOpenModal({ hostname }) {
+function ButtonToOpenModal({ ...rest }) {
   const [open, setOpen] = useState(false);
   const [deregistered, setDeregistered] = useState(false);
 
@@ -44,27 +58,46 @@ function ButtonToOpenModal({ hostname }) {
         size="small"
         onClick={() => setOpen(true)}
       >
-        {deregistered
-          ? `Host ${hostname} deregistered`
-          : 'Click me to open modal'}
+        {deregistered ? `Resource deregistered` : 'Click me to open modal'}
       </Button>
 
       <DeregistrationModal
-        hostname={hostname}
         isOpen={open}
         onCleanUp={() => {
           setDeregistered(true);
           setOpen(false);
         }}
-        onCancel={() => setOpen(false)}
+        onCancel={() => {
+          setDeregistered(false);
+          setOpen(false);
+        }}
+        {...rest}
       />
     </>
   );
 }
 
-export const Default = {
+export const Host = {
   args: {
     hostname: 'example host',
   },
   render: (args) => <ButtonToOpenModal {...args} />,
 };
+
+export const ApplicationInstance = {
+  args: {
+    contentType: APPLICATION_TYPE,
+    sid: 'PRD',
+    instanceNumber: '00',
+  },
+  render: (args) => <ButtonToOpenModal {...args} />,
+};
+
+export const DatabaseInstance = {
+  args: {
+    contentType: DATABASE_TYPE,
+    sid: 'PRD',
+    instanceNumber: '00',
+  },
+  render: (args) => <ButtonToOpenModal {...args} />,
+};

assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
 
+import { APPLICATION_TYPE, DATABASE_TYPE } from '@lib/model';
+
 import DeregistrationModal from '.';
 
 describe('Deregistration Modal component', () => {
-  it('should render deregistration modal correctly', async () => {
+  it('should render a host deregistration modal correctly', async () => {
     const hostname = faker.name.firstName();
 
     render(
@@ -18,9 +20,60 @@ describe('Deregistration Modal component', () => {
     );
 
     expect(await screen.findByText(hostname, { exact: false })).toBeTruthy();
+    expect(
+      await screen.findByText('This action will cause Trento to stop tracking')
+    ).toBeTruthy();
     expect(
       await screen.findByRole('button', { name: /Clean up/i })
     ).toBeTruthy();
     expect(await screen.findByRole('button', { name: /Cancel/i })).toBeTruthy();
   });
+
+  it('should render an application instance deregistration modal correctly', async () => {
+    const sid = 'PRD';
+    const instanceNumber = '00';
+
+    render(
+      <DeregistrationModal
+        contentType={APPLICATION_TYPE}
+        sid={sid}
+        instanceNumber={instanceNumber}
+        isOpen
+        onCleanUp={() => {}}
+        onCancel={() => {}}
+      />
+    );
+
+    expect(await screen.findByText(sid, { exact: false })).toBeTruthy();
+    expect(
+      await screen.findByText(instanceNumber, { exact: false })
+    ).toBeTruthy();
+    expect(
+      await screen.findByText('In the case of an ASCS instance')
+    ).toBeTruthy();
+  });
+
+  it('should render an application instance deregistration modal correctly', async () => {
+    const sid = 'PRD';
+    const instanceNumber = '00';
+
+    render(
+      <DeregistrationModal
+        contentType={DATABASE_TYPE}
+        sid={sid}
+        instanceNumber={instanceNumber}
+        isOpen
+        onCleanUp={() => {}}
+        onCancel={() => {}}
+      />
+    );
+
+    expect(await screen.findByText(sid, { exact: false })).toBeTruthy();
+    expect(
+      await screen.findByText(instanceNumber, { exact: false })
+    ).toBeTruthy();
+    expect(
+      await screen.findByText('In the case of the last database instance')
+    ).toBeTruthy();
+  });
 });