New Case Contacts Table: new case contact button

app/views/case_contacts/case_contacts_new_design/index.html.erb

@@ -1,8 +1,10 @@
 <div class="title-wrapper pt-30">
-  <div class="row align-items-center">
-      <div class="title mb-30">
-        <h1>Case Contacts</h1>
-      </div>
+  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-30">
+    <h1>Case Contacts</h1>
+    <%= link_to new_case_contact_path, class: "main-btn primary-btn btn-sm btn-hover" do %>
+      <i class="lni lni-plus mr-10" aria-hidden="true"></i>
+      New Case Contact
+    <% end %>
   </div>
 </div>
 

spec/system/case_contacts/case_contacts_new_design_spec.rb

@@ -25,6 +25,37 @@
     end
   end
 
+  describe "New Case Contact button" do
+    include_context "signed in as admin"
+
+    it "is visible to an admin" do
+      expect(page).to have_link("New Case Contact", href: new_case_contact_path)
+    end
+
+    it "navigates to the new case contact form when clicked as an admin" do
+      click_link "New Case Contact"
+      expect(page).to have_current_path(%r{/case_contacts/\d+/form/details})
+    end
+
+    context "when signed in as a volunteer" do
+      let(:volunteer) { create(:volunteer, casa_org: organization) }
+
+      before do
+        sign_in volunteer
+        visit case_contacts_new_design_path
+      end
+
+      it "is visible to a volunteer" do
+        expect(page).to have_link("New Case Contact", href: new_case_contact_path)
+      end
+
+      it "navigates to the new case contact form when clicked as a volunteer" do
+        click_link "New Case Contact"
+        expect(page).to have_current_path(%r{/case_contacts/\d+/form/details})
+      end
+    end
+  end
+
   describe "row expansion" do
     include_context "signed in as admin"
     it "shows the expanded content after clicking the chevron" do