Add premium pill to the check selection view

assets/js/components/ChecksCatalog/CheckItem.jsx

@@ -5,6 +5,8 @@ import { Disclosure, Transition } from '@headlessui/react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import PremiumPill from '@components/PremiumPill';
+
 function CheckItem({ checkID, premium = false, description, remediation }) {
   return (
     <li>
@@ -18,11 +20,7 @@ function CheckItem({ checkID, premium = false, description, remediation }) {
               <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                 {checkID}
               </p>
-              {premium > 0 && (
-                <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                  Premium
-                </p>
-              )}
+              {premium && <PremiumPill className="ml-1" />}
             </div>
             <div className="mt-2 sm:flex sm:justify-between">
               <div className="sm:flex">

assets/js/components/ClusterDetails/ChecksSelectionItem.jsx

@@ -7,10 +7,13 @@ import classNames from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
+import PremiumPill from '@components/PremiumPill';
+
 function ChecksSelectionItem({
   checkID,
   name,
   description,
+  premium = false,
   selected,
   onChange = () => {},
 }) {
@@ -23,6 +26,7 @@ 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>
+            {premium && <PremiumPill className="ml-1" />}
           </div>
           <div className="mt-2 sm:flex sm:justify-between">
             <div className="sm:flex">

assets/js/components/ClusterDetails/ChecksSelectionItem.test.jsx

@@ -64,4 +64,21 @@ describe('ClusterDetails ChecksSelectionItem component', () => {
     await user.click(screen.getByRole('switch'));
     expect(onChangeMock).toBeCalled();
   });
+
+  it('should show premium badge if the check is premium', () => {
+    const check = catalogCheckFactory.build();
+
+    renderWithRouter(
+      <ChecksSelectionItem
+        key={check.id}
+        checkID={check.id}
+        name={check.name}
+        description={check.description}
+        premium
+        selected
+      />
+    );
+
+    expect(screen.getByText('Premium')).toBeVisible();
+  });
 });

assets/js/components/ClusterDetails/ChecksSelectionNew.jsx

@@ -130,6 +130,7 @@ function ChecksSelectionNew({ clusterId, cluster }) {
                     checkID={check.id}
                     name={check.name}
                     description={check.description}
+                    premium={check.premium}
                     selected={check.selected}
                     onChange={() => {
                       setSelectedChecks(toggle(check.id, selectedChecks));

assets/js/components/Pill/Pill.jsx

@@ -1,20 +1,28 @@
 import React from 'react';
 import classNames from 'classnames';
 
+const sizeClasses = {
+  xs: 'px-2 text-xs',
+  sm: 'px-2 py-1 text-sm',
+};
+
 function Pill({
   className,
   children,
   onClick = () => {},
+  size = 'sm',
   roundedMode = 'rounded-full',
 }) {
   return (
     <span
       className={classNames(
-        `px-2 py-1 inline-flex text-sm leading-5 font-semibold ${roundedMode}`,
+        `inline-flex leading-5 font-semibold`,
         {
           'bg-green-100': !className,
           'text-green-800': !className,
         },
+        roundedMode,
+        sizeClasses[size],
         className
       )}
       aria-hidden="true"

assets/js/components/Pill/Pill.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import Pill from '.';
+
+describe('Pill', () => {
+  it('should display a pill with default styles', () => {
+    render(<Pill>Content</Pill>);
+    expect(screen.getByText('Content')).toHaveClass(
+      'inline-flex leading-5 font-semibold bg-green-100 text-green-800 rounded-full px-2 py-1 text-sm'
+    );
+  });
+
+  it('should display a pill with provided props', () => {
+    render(
+      <Pill className="some-class" roundedMode="not-rounded" size="xs">
+        Content
+      </Pill>
+    );
+    expect(screen.getByText('Content')).toHaveClass(
+      'inline-flex leading-5 font-semibold some-class not-rounded px-2 text-xs'
+    );
+  });
+});

assets/js/components/PremiumPill.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import Pill from '@components/Pill';
+
+function PremiumPill({ className }) {
+  return (
+    <Pill
+      className={classNames(className, 'bg-green-100 text-green-800')}
+      size="xs"
+    >
+      Premium
+    </Pill>
+  );
+}
+
+export default PremiumPill;

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

@@ -39,6 +39,7 @@ export const catalogCheckFactory = Factory.define(() => ({
   group: faker.animal.cat(),
   description: faker.lorem.paragraph(),
   remediation: faker.lorem.paragraph(),
+  premium: faker.datatype.boolean(),
 }));
 
 export const catalogFactory = Factory.define(() => ({