From c95a9689033bcd10a46404ac86fcd653b8ccb60e Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Fri, 16 Jun 2023 09:27:30 +0200 Subject: [PATCH 1/8] Add Deregistration Modal --- assets/js/components/Button/Button.jsx | 6 +- .../DeregistrationModal.jsx | 47 ++++++++++++ .../DeregistrationModal.stories.jsx | 73 +++++++++++++++++++ .../DeregistrationModal.test.jsx | 26 +++++++ .../components/DeregistrationModal/index.js | 3 + 5 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 assets/js/components/DeregistrationModal/DeregistrationModal.jsx create mode 100644 assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx create mode 100644 assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx create mode 100644 assets/js/components/DeregistrationModal/index.js diff --git a/assets/js/components/Button/Button.jsx b/assets/js/components/Button/Button.jsx index 39e0eeb402..941a65f78a 100644 --- a/assets/js/components/Button/Button.jsx +++ b/assets/js/components/Button/Button.jsx @@ -12,12 +12,16 @@ const getSizeClasses = (size) => { const getButtonClasses = (type) => { switch (type) { + case 'primary-white-fit': + return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-fit transition ease-in duration-200 text-center font-semibold rounded shadow'; case 'primary-white': return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-full transition ease-in duration-200 text-center font-semibold rounded shadow'; case 'transparent': return 'bg-transparent hover:opacity-75 focus:outline-none w-full transition ease-in duration-200 font-semibold'; case 'secondary': - return 'bg-persimmon hover:opacity-75 focus:outline-none text-gray-800 w-full transition ease-in duration-200 text-center font-semibold rounded shadow'; + return 'bg-persimmon hover:opacity-75 focus:outline-none text-gray-800 w-full transition ease-in duration-200 text-center font-semibold rounded shadow'; + case 'default-fit': + return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-fit transition ease-in duration-200 text-center font-semibold rounded shadow'; default: return 'bg-jungle-green-500 hover:opacity-75 focus:outline-none text-white w-full transition ease-in duration-200 text-center font-semibold rounded shadow'; } diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx new file mode 100644 index 0000000000..fbdf8ed99f --- /dev/null +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import { EOS_CLEANING_SERVICES } from 'eos-icons-react'; + +import Modal from '@components/Modal'; +import Button from '@components/Button'; + +function DeregistrationModal({ + hostName, + isOpen = false, + onCleanUp, + onClose = () => {}, +}) { + return ( + +
+ This will ignore all the past events collected by the agent instance + until this point. This the action is not reversible. +
+
+ + +
+ + ); +} + +export default DeregistrationModal; diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx new file mode 100644 index 0000000000..322466c5d0 --- /dev/null +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx @@ -0,0 +1,73 @@ +import React, { useState } from 'react'; + +import Button from '@components/Button'; +import DeregistrationModal from '.'; + +export default { + title: 'DeregistrationModal', + component: DeregistrationModal, + + args: { + hostName: 'example host', + isOpen: false, + }, + + argTypes: { + hostName: { + type: 'string', + description: 'The host name to confirm deregistration of', + 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, + }, + }, +}; + +export function Default({ hostName, onCleanUp, onClose }) { + const [open, setOpen] = useState(false); + const [deregistered, setDeregistered] = useState(false); + + return ( + <> + + + { + onCleanUp(); + setDeregistered(true); + setOpen(false); + }} + onClose={() => { + onClose(); + setOpen(false); + }} + /> + + ); +} diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx new file mode 100644 index 0000000000..b3b90c66d7 --- /dev/null +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { faker } from '@faker-js/faker'; + +import DeregistrationModal from '.'; + +describe('Deregistration Modal component', () => { + it('should render deregistration modal correctly', async () => { + const hostName = faker.name.firstName(); + + render( + {}} + onClose={() => {}} + /> + ); + + expect(await screen.findByText(new RegExp(hostName))).toBeTruthy(); + expect( + await screen.findByRole('button', { name: /Clean up/i }) + ).toBeTruthy(); + expect(await screen.findByRole('button', { name: /Cancel/i })).toBeTruthy(); + }); +}); diff --git a/assets/js/components/DeregistrationModal/index.js b/assets/js/components/DeregistrationModal/index.js new file mode 100644 index 0000000000..d4811f4c95 --- /dev/null +++ b/assets/js/components/DeregistrationModal/index.js @@ -0,0 +1,3 @@ +import DeregistrationModal from './DeregistrationModal'; + +export default DeregistrationModal; From f76dafc1b0718b539f006f01d2acbf891f727bdc Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 13:51:16 +0200 Subject: [PATCH 2/8] Reorder `Button` style classes --- assets/js/components/Button/Button.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/components/Button/Button.jsx b/assets/js/components/Button/Button.jsx index 941a65f78a..b674108d2a 100644 --- a/assets/js/components/Button/Button.jsx +++ b/assets/js/components/Button/Button.jsx @@ -12,10 +12,10 @@ const getSizeClasses = (size) => { const getButtonClasses = (type) => { switch (type) { - case 'primary-white-fit': - return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-fit transition ease-in duration-200 text-center font-semibold rounded shadow'; case 'primary-white': return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-full transition ease-in duration-200 text-center font-semibold rounded shadow'; + case 'primary-white-fit': + return 'bg-white hover:opacity-75 focus:outline-none text-jungle-green-500 w-fit transition ease-in duration-200 text-center font-semibold rounded shadow'; case 'transparent': return 'bg-transparent hover:opacity-75 focus:outline-none w-full transition ease-in duration-200 font-semibold'; case 'secondary': From b631588f40cdbdd88626f7ec671e9f1704a40f4e Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 13:52:33 +0200 Subject: [PATCH 3/8] Use partial text match instead of RegExp in tests --- .../components/DeregistrationModal/DeregistrationModal.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx index b3b90c66d7..87221d8c82 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx @@ -17,7 +17,7 @@ describe('Deregistration Modal component', () => { /> ); - expect(await screen.findByText(new RegExp(hostName))).toBeTruthy(); + expect(await screen.findByText(hostName, { exact: false })).toBeTruthy(); expect( await screen.findByRole('button', { name: /Clean up/i }) ).toBeTruthy(); From e7f23051c1eedbcca8cceda12c838f28a6e1cb44 Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 13:55:12 +0200 Subject: [PATCH 4/8] Add ability for Storybook component to pass in `args` --- .../DeregistrationModal.stories.jsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx index 322466c5d0..695a2a3fec 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx @@ -6,12 +6,6 @@ import DeregistrationModal from '.'; export default { title: 'DeregistrationModal', component: DeregistrationModal, - - args: { - hostName: 'example host', - isOpen: false, - }, - argTypes: { hostName: { type: 'string', @@ -36,7 +30,7 @@ export default { }, }; -export function Default({ hostName, onCleanUp, onClose }) { +function ButtonToOpenModal({ hostName }) { const [open, setOpen] = useState(false); const [deregistered, setDeregistered] = useState(false); @@ -59,15 +53,18 @@ export function Default({ hostName, onCleanUp, onClose }) { hostName={hostName} isOpen={open} onCleanUp={() => { - onCleanUp(); setDeregistered(true); setOpen(false); }} - onClose={() => { - onClose(); - setOpen(false); - }} + onClose={() => setOpen(false)} /> ); } + +export const Default = { + args: { + hostName: 'example host', + }, + render: (args) => , +}; From b2f4bb1c5df7ef07f2c43433cacafe39e4a83a2c Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 13:56:20 +0200 Subject: [PATCH 5/8] Rename `onClose` prop -> `onCancel` --- .../components/DeregistrationModal/DeregistrationModal.jsx | 6 +++--- .../DeregistrationModal/DeregistrationModal.stories.jsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx index fbdf8ed99f..6f5f1b91df 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx @@ -9,13 +9,13 @@ function DeregistrationModal({ hostName, isOpen = false, onCleanUp, - onClose = () => {}, + onCancel, }) { return (
This will ignore all the past events collected by the agent instance @@ -35,7 +35,7 @@ function DeregistrationModal({ type="primary-white-fit" className="inline-block mx-0.5 border-green-500 border" size="small" - onClick={onClose} + onClick={onCancel} > Cancel diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx index 695a2a3fec..200b0a4d82 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx @@ -56,7 +56,7 @@ function ButtonToOpenModal({ hostName }) { setDeregistered(true); setOpen(false); }} - onClose={() => setOpen(false)} + onCancel={() => setOpen(false)} /> ); From 7e9a2fa3616941076d392b0ad639c45ab4425731 Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 14:18:32 +0200 Subject: [PATCH 6/8] Rename `hostName` -> `hostname` --- .../DeregistrationModal/DeregistrationModal.jsx | 4 ++-- .../DeregistrationModal.stories.jsx | 10 +++++----- .../DeregistrationModal/DeregistrationModal.test.jsx | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx index 6f5f1b91df..b020885127 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx @@ -6,14 +6,14 @@ import Modal from '@components/Modal'; import Button from '@components/Button'; function DeregistrationModal({ - hostName, + hostname, isOpen = false, onCleanUp, onCancel, }) { return ( diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx index 200b0a4d82..468fa76a35 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.stories.jsx @@ -7,7 +7,7 @@ export default { title: 'DeregistrationModal', component: DeregistrationModal, argTypes: { - hostName: { + hostname: { type: 'string', description: 'The host name to confirm deregistration of', control: { type: 'text' }, @@ -30,7 +30,7 @@ export default { }, }; -function ButtonToOpenModal({ hostName }) { +function ButtonToOpenModal({ hostname }) { const [open, setOpen] = useState(false); const [deregistered, setDeregistered] = useState(false); @@ -45,12 +45,12 @@ function ButtonToOpenModal({ hostName }) { onClick={() => setOpen(true)} > {deregistered - ? `Host ${hostName} deregistered` + ? `Host ${hostname} deregistered` : 'Click me to open modal'} { setDeregistered(true); @@ -64,7 +64,7 @@ function ButtonToOpenModal({ hostName }) { export const Default = { args: { - hostName: 'example host', + hostname: 'example host', }, render: (args) => , }; diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx index 87221d8c82..a7ce11f469 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx @@ -6,18 +6,18 @@ import DeregistrationModal from '.'; describe('Deregistration Modal component', () => { it('should render deregistration modal correctly', async () => { - const hostName = faker.name.firstName(); + const hostname = faker.name.firstName(); render( {}} onClose={() => {}} /> ); - expect(await screen.findByText(hostName, { exact: false })).toBeTruthy(); + expect(await screen.findByText(hostname, { exact: false })).toBeTruthy(); expect( await screen.findByRole('button', { name: /Clean up/i }) ).toBeTruthy(); From 8ab314bd169541fb5ea694fca46528e029f54297 Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 14:46:58 +0200 Subject: [PATCH 7/8] Missed one rename `onClose` -> `onCancel` from b2f4bb1 --- .../components/DeregistrationModal/DeregistrationModal.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx index a7ce11f469..9ff2b75750 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.test.jsx @@ -13,7 +13,7 @@ describe('Deregistration Modal component', () => { hostname={hostname} isOpen onCleanUp={() => {}} - onClose={() => {}} + onCancel={() => {}} /> ); From 5ac0ad6467434ba965ed48b16ff9047d955d5439 Mon Sep 17 00:00:00 2001 From: Jamie Rodriguez Date: Mon, 19 Jun 2023 15:12:51 +0200 Subject: [PATCH 8/8] Change warning text --- .../components/DeregistrationModal/DeregistrationModal.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx index b020885127..efec1b74c8 100644 --- a/assets/js/components/DeregistrationModal/DeregistrationModal.jsx +++ b/assets/js/components/DeregistrationModal/DeregistrationModal.jsx @@ -18,8 +18,9 @@ function DeregistrationModal({ onClose={onCancel} >
- This will ignore all the past events collected by the agent instance - until this point. This the action is not reversible. + 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.