From 6738249c8361e95d3b4bb834407aabac1e305271 Mon Sep 17 00:00:00 2001
From: TsaH0 <215134451+TsaH0@users.noreply.github.com>
Date: Sat, 8 Aug 2026 15:31:22 +0530
Subject: [PATCH] fix: require certification before creating class

---
 .../components/__snapshots__/modal.test.jsx.snap  |  4 +++-
 __tests__/components/modal.test.jsx               | 15 +++++++++++++++
 components/modal.js                               |  8 +++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/__snapshots__/modal.test.jsx.snap b/__tests__/components/__snapshots__/modal.test.jsx.snap
index 43a6cdab4..c98457e24 100644
--- a/__tests__/components/__snapshots__/modal.test.jsx.snap
+++ b/__tests__/components/__snapshots__/modal.test.jsx.snap
@@ -169,7 +169,9 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
             className="flex items-center justify-center"
           >
             <button
-              className=" rounded px-4 py-2 text-white bg-green-700"
+              className="rounded px-4 py-2 text-white bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={true}
+              title="Please select a certification."
               type="submit"
             >
               Create
diff --git a/__tests__/components/modal.test.jsx b/__tests__/components/modal.test.jsx
index be6a037ab..de66724eb 100644
--- a/__tests__/components/modal.test.jsx
+++ b/__tests__/components/modal.test.jsx
@@ -53,4 +53,19 @@ describe('Modal Component', () => {
     const tree = testRenderer.toJSON();
     expect(tree).toMatchSnapshot();
   });
+  it('disables the create button until a certification is selected', () => {
+    const testRenderer = renderer.create(
+      <Modal userId={sampleUser} certificationNames={sampleData} />
+    );
+    const testInstance = testRenderer.root;
+    const header = testInstance.findByProps({ className });
+
+    act(() => {
+      header.props.onClick();
+    });
+
+    const createButton = testInstance.findAllByType('button')[0];
+    expect(createButton.props.disabled).toBe(true);
+    expect(createButton.props.title).toBe('Please select a certification.');
+  });
 });
diff --git a/components/modal.js b/components/modal.js
index 97238a3af..dbb34d586 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -151,7 +151,13 @@ export default function Modal({
                     <div className='flex items-center justify-center'>
                       <button
                         type='submit'
-                        className=' rounded px-4 py-2 text-white bg-green-700'
+                        className='rounded px-4 py-2 text-white bg-green-700 disabled:cursor-not-allowed disabled:opacity-50'
+                        disabled={selected.length === 0}
+                        title={
+                          selected.length === 0
+                            ? 'Please select a certification.'
+                            : undefined
+                        }
                       >
                         Create
                       </button>