Fix frontend formatting tasks

assets/.eslintrc.js

@@ -17,9 +17,9 @@ module.exports = {
     'plugin:import/recommended',
     'plugin:react/recommended',
     'airbnb',
+    'prettier',
   ],
-  overrides: [
-  ],
+  overrides: [],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
@@ -38,10 +38,7 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    'react',
-    'jest',
-  ],
+  plugins: ['react', 'jest'],
   rules: {
     'no-console': 'error',
     'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
@@ -50,6 +47,9 @@ module.exports = {
     'import/no-cycle': 'off',
     'import/prefer-default-export': 'off',
     'react/jsx-props-no-spreading': 'off',
-    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
+    'no-unused-expressions': [
+      'error',
+      { allowShortCircuit: true, allowTernary: true },
+    ],
   },
 };

assets/build.js

@@ -9,9 +9,10 @@ config();
 
 const resolvePath = (p) => path.resolve(__dirname, p);
 
-const WANDA_URL = process.env.NODE_ENV === 'production'
-  ? ''
-  : JSON.stringify(process.env.WANDA_URL);
+const WANDA_URL =
+  process.env.NODE_ENV === 'production'
+    ? ''
+    : JSON.stringify(process.env.WANDA_URL);
 
 const define = {
   'process.env.WANDA_URL': WANDA_URL,
@@ -34,10 +35,10 @@ require('esbuild')
       alias({
         phoenix: resolvePath('../deps/phoenix/priv/static/phoenix.mjs'),
         phoenix_html: resolvePath(
-          '../deps/phoenix_html/priv/static/phoenix_html.js',
+          '../deps/phoenix_html/priv/static/phoenix_html.js'
         ),
         phoenix_live_view: resolvePath(
-          '../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js',
+          '../deps/phoenix_live_view/priv/static/phoenix_live_view.esm.js'
         ),
         '@components': resolvePath('./js/components'),
         '@state': resolvePath('./js/state'),

assets/js/components/AboutPage/AboutPage.jsx

@@ -18,12 +18,16 @@ function AboutPage({ onFetch = getAboutData }) {
   useEffect(() => {
     setLoading(true);
     onFetch()
-      .then(({ data: { flavor: newFlavor, version: newVersion, sles_subscriptions } }) => {
-        setLoading(false);
-        undefined !== newFlavor && setFlavor(newFlavor);
-        setVersion(newVersion);
-        setSubscriptions(sles_subscriptions);
-      })
+      .then(
+        ({
+          data: { flavor: newFlavor, version: newVersion, sles_subscriptions },
+        }) => {
+          setLoading(false);
+          undefined !== newFlavor && setFlavor(newFlavor);
+          setVersion(newVersion);
+          setSubscriptions(sles_subscriptions);
+        }
+      )
       .catch((error) => {
         logError(error);
         setLoading(false);
@@ -47,7 +51,8 @@ function AboutPage({ onFetch = getAboutData }) {
     {
       title: 'SLES for SAP subscriptions',
       content: `${subscriptions} found`,
-      render: (content) => (loading ? <span>Loading...</span> : <Pill>{content}</Pill>),
+      render: (content) =>
+        loading ? <span>Loading...</span> : <Pill>{content}</Pill>,
     },
   ];
 

assets/js/components/AboutPage/AboutPage.test.jsx

@@ -10,14 +10,14 @@ describe('AboutPage component', () => {
   it('should render the about page with content from the api', async () => {
     await act(async () => {
       renderWithRouter(
-        <AboutPage onFetch={() => Promise.resolve({ data: apiRequestData })} />,
+        <AboutPage onFetch={() => Promise.resolve({ data: apiRequestData })} />
       );
     });
 
     expect(screen.getByText(apiRequestData.flavor)).toBeTruthy();
     expect(screen.getByText(apiRequestData.version)).toBeTruthy();
     expect(
-      screen.getByText(`${apiRequestData.sles_subscriptions} found`),
+      screen.getByText(`${apiRequestData.sles_subscriptions} found`)
     ).toBeTruthy();
   });
 
@@ -28,7 +28,7 @@ describe('AboutPage component', () => {
 
     await act(async () => {
       renderWithRouter(
-        <AboutPage onFetch={() => Promise.reject(errorMessage)} />,
+        <AboutPage onFetch={() => Promise.reject(errorMessage)} />
       );
     });
 

assets/js/components/Banners/WarningBanner.test.jsx

@@ -11,11 +11,11 @@ describe('WarningBanner', () => {
         Warning!
         <br />
         You should have a look on this!
-      </WarningBanner>,
+      </WarningBanner>
     );
 
     expect(screen.getByTestId('warning-banner')).toHaveTextContent(
-      'Warning!You should have a look on this!',
+      'Warning!You should have a look on this!'
     );
   });
 });

assets/js/components/Button/Button.jsx

@@ -23,13 +23,11 @@ const getButtonClasses = (type) => {
   }
 };
 
-function Button({
-  children, className, type, size, ...props
-}) {
+function Button({ children, className, type, size, ...props }) {
   const buttonClasses = classNames(
     getButtonClasses(type),
     getSizeClasses(size),
-    className,
+    className
   );
   return (
     <button type="button" className={buttonClasses} {...props}>

assets/js/components/Button/Button.test.jsx

@@ -8,7 +8,7 @@ describe('Button', () => {
   it('should display a button with its text', () => {
     render(<Button>Hello there General Kenobi</Button>);
     expect(screen.getByRole('button')).toHaveTextContent(
-      'Hello there General Kenobi',
+      'Hello there General Kenobi'
     );
   });
 });

assets/js/components/ChecksCatalog/CheckItem.jsx

@@ -5,9 +5,7 @@ import { Disclosure, Transition } from '@headlessui/react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
-function CheckItem({
-  checkID, premium = false, description, remediation,
-}) {
+function CheckItem({ checkID, premium = false, description, remediation }) {
   return (
     <li>
       <Disclosure>

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

@@ -19,7 +19,7 @@ describe('ChecksCatalog CheckItem component', () => {
         checkID={check.id}
         description={check.description}
         remediation={check.remediation}
-      />,
+      />
     );
 
     expect(screen.getByText(check.id)).toBeVisible();
@@ -36,7 +36,7 @@ describe('ChecksCatalog CheckItem component', () => {
         premium
         description={check.description}
         remediation={check.remediation}
-      />,
+      />
     );
 
     expect(screen.getByText('Premium')).toBeVisible();
@@ -52,7 +52,7 @@ describe('ChecksCatalog CheckItem component', () => {
         checkID={check.id}
         description={check.description}
         remediation={check.remediation}
-      />,
+      />
     );
 
     const checks = screen.getAllByRole('listitem');

assets/js/components/ChecksCatalog/ChecksCatalog.jsx

@@ -63,74 +63,76 @@ function ChecksCatalog() {
       />
       {catalogData
         .filter((provider) => provider.provider === selected)
-        .map(({ _, groups }) => groups?.map(({ group, checks }) => (
-          <div
-            key={group}
-            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 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>
+        .map(({ _, groups }) =>
+          groups?.map(({ group, checks }) => (
+            <div
+              key={group}
+              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 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>
-                      </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 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.Panel>
-                    </Transition>
-                  </Disclosure>
-                </li>
-              ))}
-            </ul>
-          </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>
   );
 }

assets/js/components/ChecksCatalog/ChecksCatalogNew.jsx

@@ -58,7 +58,7 @@ export function ChecksCatalogNew() {
                 ))}
               </ul>
             </div>
-          ),
+          )
         )}
       </div>
     </CatalogContainer>

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

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import {
-  screen, within, act, waitFor,
-} from '@testing-library/react';
+import { screen, within, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { faker } from '@faker-js/faker';
@@ -24,7 +22,7 @@ describe('ChecksCatalog ChecksCatalogNew component', () => {
     };
     const [statefulCatalog, store] = withState(
       <ChecksCatalogNew />,
-      initialState,
+      initialState
     );
 
     await act(async () => renderWithRouter(statefulCatalog));

assets/js/components/ChecksCatalog/ProviderSelection.jsx

@@ -27,9 +27,11 @@ function ProviderSelection({ providers, selected, onChange }) {
               {providers.map((provider, providerIdx) => (
                 <Listbox.Option
                   key={/* eslint-disable */ providerIdx}
-                  className={({ active }) => `cursor-default select-none relative py-2 pl-10 pr-4 ${
-                    active ? 'text-green-900 bg-green-100' : 'text-gray-900'
-                  }`}
+                  className={({ active }) =>
+                    `cursor-default select-none relative py-2 pl-10 pr-4 ${
+                      active ? 'text-green-900 bg-green-100' : 'text-gray-900'
+                    }`
+                  }
                   value={provider}
                 >
                   {({ selected: isSelected }) => (