Add modified pill for customized checks

trento-project · Feb 5, 2025 · 87fc170 · 87fc170
1 parent ba7dc72
commit 87fc170
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 16 deletions.
diff --git a/assets/js/lib/test-utils/factories/checks.js b/assets/js/lib/test-utils/factories/checks.js
@@ -55,3 +55,29 @@ export const catalogFactory = Factory.define(() => ({
   catalog: catalogCheckFactory.build(),
   error: null,
 }));
+
+export const customizedValueFactory = Factory.define(() => ({
+  name: faker.string.uuid(),
+  customizable: true,
+  current_value: faker.lorem.word(),
+  custom_value: faker.lorem.word(),
+}));
+
+export const nonCustomizedValueFactory = Factory.define(() => ({
+  name: faker.string.uuid(),
+  customizable: faker.datatype.boolean(),
+  current_value: faker.lorem.word(),
+}));
+
+export const selectableCheckFactory = Factory.define(() => ({
+  id: faker.string.uuid(),
+  name: faker.animal.cat(),
+  group: faker.animal.dog(),
+  description: faker.lorem.paragraph(),
+  values: [
+    ...customizedValueFactory.buildList(3),
+    ...nonCustomizedValueFactory.buildList(3),
+  ],
+  customizable: faker.datatype.boolean(),
+  customized: faker.datatype.boolean(),
+}));
diff --git a/assets/js/pages/ChecksSelection/ChecksSelection.jsx b/assets/js/pages/ChecksSelection/ChecksSelection.jsx
@@ -89,6 +89,7 @@ function ChecksSelection({
                 selected={check.selected}
                 userAbilities={userAbilities}
                 customizable={check.customizable}
+                customized={check.customized}
                 onChange={() => {
                   onChange(toggle(check.id, selectedChecks));
                 }}

diff --git a/assets/js/pages/ChecksSelection/ChecksSelection.stories.jsx b/assets/js/pages/ChecksSelection/ChecksSelection.stories.jsx
@@ -1,17 +1,17 @@
-import { catalogCheckFactory } from '@lib/test-utils/factories';
+import { selectableCheckFactory } from '@lib/test-utils/factories';
 
 import ChecksSelection from './ChecksSelection';
 
 const catalog = [
-  catalogCheckFactory.build({ group: 'Corosync' }),
-  catalogCheckFactory.build({ group: 'Corosync' }),
-  catalogCheckFactory.build({ group: 'Corosync' }),
-  catalogCheckFactory.build({ group: 'Corosync' }),
-  catalogCheckFactory.build({ group: 'Corosync' }),
-  catalogCheckFactory.build({ group: 'SBD' }),
-  catalogCheckFactory.build({ group: 'SBD' }),
-  catalogCheckFactory.build({ group: 'Miscellaneous' }),
-  catalogCheckFactory.build({ group: 'Miscellaneous' }),
+  selectableCheckFactory.build({ group: 'Corosync', customized: true }),
+  selectableCheckFactory.build({ group: 'Corosync' }),
+  selectableCheckFactory.build({ group: 'Corosync' }),
+  selectableCheckFactory.build({ group: 'Corosync' }),
+  selectableCheckFactory.build({ group: 'Corosync' }),
+  selectableCheckFactory.build({ group: 'SBD' }),
+  selectableCheckFactory.build({ group: 'SBD' }),
+  selectableCheckFactory.build({ group: 'Miscellaneous' }),
+  selectableCheckFactory.build({ group: 'Miscellaneous' }),
 ];
 
 const selectedChecks = [

diff --git a/assets/js/pages/ChecksSelection/ChecksSelectionItem.jsx b/assets/js/pages/ChecksSelection/ChecksSelectionItem.jsx
@@ -7,6 +7,7 @@ import { Switch } from '@headlessui/react';
 import classNames from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import Pill from '@common/Pill';
 
 import { isPermitted } from '@lib/model/users';
 
@@ -22,6 +23,7 @@ function ChecksSelectionItem({
   name,
   description,
   customizable = false,
+  customized = false,
   selected,
   userAbilities = defaultAbilities,
   onChange = () => {},
@@ -36,6 +38,14 @@ function ChecksSelectionItem({
             <p className="ml-2 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
               {checkID}
             </p>
+            {customized && (
+              <Pill
+                className="bg-white text-jungle-green-500 border border-jungle-green-500 ml-2"
+                size="xs"
+              >
+                MODIFIED
+              </Pill>
+            )}
           </div>
           <div className="mt-2 sm:flex sm:justify-between">
             <div className="sm:flex">

diff --git a/assets/js/pages/ChecksSelection/ChecksSelectionItem.test.jsx b/assets/js/pages/ChecksSelection/ChecksSelectionItem.test.jsx
@@ -4,13 +4,13 @@ import { screen, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 
-import { catalogCheckFactory } from '@lib/test-utils/factories';
+import { selectableCheckFactory } from '@lib/test-utils/factories';
 
 import ChecksSelectionItem from './ChecksSelectionItem';
 
 describe('ChecksSelectionItem component', () => {
   it('should show check with selected state', () => {
-    const check = catalogCheckFactory.build();
+    const check = selectableCheckFactory.build();
 
     render(
       <ChecksSelectionItem
@@ -26,10 +26,11 @@ describe('ChecksSelectionItem component', () => {
     expect(screen.getByText(check.name)).toBeVisible();
     expect(screen.getByText(check.description)).toBeVisible();
     expect(screen.getByRole('switch')).toBeChecked();
+    expect(screen.queryByText('MODIFIED')).toBeNull();
   });
 
   it('should show check with unselected state', () => {
-    const check = catalogCheckFactory.build();
+    const check = selectableCheckFactory.build();
 
     render(
       <ChecksSelectionItem
@@ -44,9 +45,26 @@ describe('ChecksSelectionItem component', () => {
     expect(screen.getByRole('switch')).not.toBeChecked();
   });
 
+  it('should show a customized check', () => {
+    const check = selectableCheckFactory.build();
+
+    render(
+      <ChecksSelectionItem
+        key={check.id}
+        checkID={check.id}
+        name={check.name}
+        description={check.description}
+        selected
+        customized
+      />
+    );
+
+    expect(screen.getByText('MODIFIED')).toBeVisible();
+  });
+
   it('should run the onChange function when the switch button is clicked', async () => {
     const user = userEvent.setup();
-    const check = catalogCheckFactory.build();
+    const check = selectableCheckFactory.build();
     const onChangeMock = jest.fn();
 
     render(
@@ -86,7 +104,7 @@ describe('Checks Customizability', () => {
   `(
     'should show check customization call to action',
     ({ customizable, abilities, expectedCallToAction }) => {
-      const check = catalogCheckFactory.build({ customizable });
+      const check = selectableCheckFactory.build({ customizable });
 
       render(
         <ChecksSelectionItem
@@ -113,7 +131,7 @@ describe('Checks Customizability', () => {
 
   it('should run the onCustomize function when the customize button is clicked', async () => {
     const user = userEvent.setup();
-    const check = catalogCheckFactory.build({ customizable: true });
+    const check = selectableCheckFactory.build({ customizable: true });
     const onCustomize = jest.fn();
 
     render(