Catalog from wanda

assets/.eslintrc.js

@@ -6,6 +6,9 @@ module.exports = {
     jquery: true,
     'jest/globals': true,
   },
+  globals: {
+    process: true,
+  },
   extends: ['eslint:recommended', 'plugin:react/recommended'],
   parserOptions: {
     ecmaFeatures: {

assets/js/components/ChecksCatalog/CatalogContainer.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+
+import { Disclosure, Transition } from '@headlessui/react';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import NotificationBox from '@components/NotificationBox';
+import LoadingBox from '@components/LoadingBox';
+
+import { groupBy } from '@lib/lists';
+
+import { EOS_ERROR } from 'eos-icons-react';
+
+const CatalogContainer = ({
+  getCatalog = () => {},
+  catalogData = [],
+  catalogError = null,
+  loading = false,
+}) => {
+  if (loading) {
+    return <LoadingBox text="Loading checks catalog..." />;
+  }
+
+  if (catalogError) {
+    return (
+      <NotificationBox
+        icon={<EOS_ERROR className="m-auto" color="red" size="xl" />}
+        text={catalogError}
+        buttonText="Try again"
+        buttonOnClick={getCatalog}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {Object.entries(groupBy(catalogData.items, 'group')).map(
+        ([group, checks], idx) => (
+          <div
+            key={idx}
+            className="check-group bg-white shadow overflow-hidden sm:rounded-md mb-8"
+          >
+            <div className="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
+              <h3 className="text-lg leading-6 font-medium text-gray-900">
+                {group}
+              </h3>
+            </div>
+            <ul role="list" className="divide-y divide-gray-200">
+              {checks.map((check) => (
+                <li key={check.id}>
+                  <Disclosure>
+                    <Disclosure.Button
+                      as="div"
+                      className="flex justify-between w-full cursor-pointer hover:bg-gray-100"
+                    >
+                      <div className="check-row px-4 py-4 sm:px-6">
+                        <div className="flex items-center">
+                          <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                            {check.id}
+                          </p>
+                          {check.premium > 0 && (
+                            <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                              Premium
+                            </p>
+                          )}
+                        </div>
+                        <div className="mt-2 sm:flex sm:justify-between">
+                          <div className="sm:flex">
+                            <ReactMarkdown
+                              className="markdown text-sm"
+                              remarkPlugins={[remarkGfm]}
+                            >
+                              {check.description}
+                            </ReactMarkdown>
+                          </div>
+                        </div>
+                      </div>
+                    </Disclosure.Button>
+                    <Transition
+                      enter="transition duration-100 ease-out"
+                      enterFrom="transform opacity-0"
+                      enterTo="transform opacity-100"
+                      leave="transition duration-100 ease-out"
+                      leaveFrom="transform opacity-100"
+                      leaveTo="transform opacity-0"
+                    >
+                      <Disclosure.Panel className="check-panel border-none">
+                        <div className="px-8 py-4 sm:px-8">
+                          <div className="px-4 py-4 sm:px-4 bg-slate-100 rounded">
+                            <ReactMarkdown
+                              className="markdown"
+                              remarkPlugins={[remarkGfm]}
+                            >
+                              {check.remediation}
+                            </ReactMarkdown>
+                          </div>
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </Disclosure>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default CatalogContainer;

assets/js/components/ChecksCatalog/CatalogContainer.test.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+
+import { faker } from '@faker-js/faker';
+import { renderWithRouter } from '@lib/test-utils';
+import { catalogCheckFactory } from '@lib/test-utils/factories';
+
+import CatalogContainer from './CatalogContainer';
+
+describe('ChecksCatalog CatalogContainer component', () => {
+  it('should render the notification box', () => {
+    renderWithRouter(<CatalogContainer catalogError />);
+
+    expect(screen.getByRole('button')).toHaveTextContent('Try again');
+  });
+
+  it('should render the loading box', () => {
+    renderWithRouter(<CatalogContainer loading={true} />);
+
+    expect(screen.getByText('Loading checks catalog...')).toBeVisible();
+  });
+
+  it('should render the checks catalog', () => {
+    const groupName1 = faker.animal.cat();
+    const groupName2 = faker.animal.cat();
+    const group1 = catalogCheckFactory.buildList(5, { group: groupName1 });
+    const group2 = catalogCheckFactory.buildList(5, { group: groupName2 });
+    const catalog = { items: group1.concat(group2) };
+
+    renderWithRouter(
+      <CatalogContainer
+        loading={false}
+        catalogError={null}
+        catalogData={catalog}
+      />
+    );
+
+    const groups = screen.getAllByRole('list');
+    expect(groups.length).toBe(2);
+
+    for (let group of groups) {
+      let { getAllByRole } = within(group);
+      let checks = getAllByRole('listitem');
+      expect(checks.length).toBe(5);
+    }
+  });
+
+  it('should show check remediation when the row is clicked', () => {
+    const groupName = faker.animal.cat();
+    const catalogChecks = catalogCheckFactory.buildList(2, {
+      group: groupName,
+    });
+    const checkRemediation1 = catalogChecks[0].remediation;
+    const checkRemediation2 = catalogChecks[1].remediation;
+    const catalog = { items: catalogChecks };
+
+    renderWithRouter(
+      <CatalogContainer
+        loading={false}
+        catalogError={null}
+        catalogData={catalog}
+      />
+    );
+
+    const groups = screen.getAllByRole('list');
+    const { getAllByRole } = within(groups[0]);
+    let checks = getAllByRole('listitem');
+    const check1 = checks[0].querySelector('div');
+    const check2 = checks[1].querySelector('div');
+
+    expect(screen.queryByText(checkRemediation1)).not.toBeInTheDocument();
+    userEvent.click(check1);
+    expect(screen.getByText(checkRemediation1)).toBeVisible();
+    userEvent.click(check1);
+    expect(screen.queryByText(checkRemediation1)).not.toBeInTheDocument();
+
+    expect(screen.queryByText(checkRemediation2)).not.toBeInTheDocument();
+    userEvent.click(check2);
+    expect(screen.getByText(checkRemediation2)).toBeVisible();
+  });
+});

assets/js/components/ChecksCatalog/ChecksCatalogNew.jsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+
+import axios from 'axios';
+
+import CatalogContainer from './CatalogContainer';
+
+const wandaURL = process.env.WANDA_URL;
+
+export const ChecksCatalogNew = () => {
+  const [catalogError, setError] = useState(null);
+  const [loading, setLoaded] = useState(true);
+  const [catalogData, setCatalog] = useState([]);
+
+  useEffect(() => {
+    getCatalog();
+  }, []);
+
+  const getCatalog = () => {
+    setLoaded(true);
+    axios
+      .get(`${wandaURL}/api/checks/catalog`)
+      .then((catalog) => {
+        setLoaded(false);
+        setCatalog(catalog.data);
+      })
+      .catch(function (error) {
+        setLoaded(false);
+        setError(error.message);
+      });
+  };
+
+  return (
+    <CatalogContainer
+      getCatalog={getCatalog}
+      catalogData={catalogData}
+      catalogError={catalogError}
+      loading={loading}
+    />
+  );
+};

assets/js/components/ChecksCatalog/index.js

@@ -1,3 +1,5 @@
 import ChecksCatalog from './ChecksCatalog';
 
+export { ChecksCatalogNew } from './ChecksCatalogNew';
+
 export default ChecksCatalog;

assets/js/lib/test-utils/factories.js

@@ -27,3 +27,11 @@ export const healthSummaryFactory = Factory.define(() => ({
     casing: 'upper',
   }),
 }));
+
+export const catalogCheckFactory = Factory.define(() => ({
+  id: faker.datatype.uuid(),
+  name: faker.animal.cat(),
+  group: faker.animal.cat(),
+  description: faker.lorem.paragraph(),
+  remediation: faker.lorem.paragraph(),
+}));

assets/js/trento.jsx

@@ -24,6 +24,7 @@ import DatabasesOverview from '@components/DatabasesOverview';
 import SapSystemDetails from './components/SapSystemDetails/SapSystemDetails';
 import DatabaseDetails from './components/DatabaseDetails';
 import ChecksCatalog from '@components/ChecksCatalog';
+import { ChecksCatalogNew } from '@components/ChecksCatalog';
 import NotFound from '@components/NotFound';
 import SomethingWentWrong from '@components/SomethingWentWrong';
 import Settings from '@components/Settings';
@@ -49,6 +50,7 @@ const App = () => {
               <Route path="sap_systems" element={<SapSystemsOverview />} />
               <Route path="databases" element={<DatabasesOverview />} />
               <Route path="catalog" element={<ChecksCatalog />} />
+              <Route path="catalog_new" element={<ChecksCatalogNew />} />
               <Route path="settings" element={<Settings />} />
               <Route path="about" element={<AboutPage />} />
               <Route