[#2159] Display the Approve Partner button on the top with a tooltip

app/assets/stylesheets/resources/partners.scss

@@ -48,3 +48,31 @@ i.fa {
 div#partner-notes {
   padding: 0px 20px;
 }
+
+div#approve-application-button {
+  position: fixed;
+
+  background: #{$diaper-color-white};
+  border-top: 1px solid #{$diaper-color-neutral-67};
+  box-shadow: 1px 1px 5px #{$diaper-color-neutral-67};
+
+  bottom:0px;
+
+  width: calc(100%);
+  min-height: #{$diaper-footer-height}px;
+
+  padding: 12px 16px;
+  margin-left: -16px;
+
+  z-index: 1;
+}
+
+@media only screen and (max-width: 500px) {
+  div#approve-application-button {
+    display: flex;
+    justify-content: center;
+
+    margin-left: 0;
+    width: calc(100% - 32px);
+  }
+}

app/helpers/ui_helper.rb

@@ -133,7 +133,9 @@ def _link_to(link, options = {}, properties = {})
     # user sparingly.
     center = options[:center].present? ? "center-block" : ""
 
-    link_to link, properties.merge(class: "btn btn-#{type} btn-#{size} #{center}") do
+    disabled = options[:enabled] || options[:enabled].nil? ? "" : "disabled"
+
+    link_to link, properties.merge(class: "btn btn-#{type} btn-#{size} #{center} #{disabled}") do
       fa_icon icon, text: text
     end
   end

app/views/partners/approve_partner.html.erb

@@ -31,7 +31,8 @@
         <div class="card card-info card-outline">
           <div class="card-header">
             <h1 class="card-title"><strong><%= @partner.name %> - Application Details
-              - <%= link_to @partner.email, "mailto:#{@partner.email}" %></strong></h1>
+              - <%= link_to @partner.email, "mailto:#{@partner.email}" %></strong>
+            </h1>
           </div>
           <div class="card-body p-6">
             <div class="row">
@@ -187,11 +188,19 @@
                 </div>
           </div>
           <!-- /.card-body -->
-          <div class="card-footer">
-            <%= print_button_to approve_application_partner_path(@partner), {text: "Approve Partner", icon: "thumbs-o-up", type: "success", size: "md"} if @partner.awaiting_review? %>
-          </div>
+        </div>
+        <div id="approve-application-button">
+          <% tooltip_message = "Partner has not requested approval yet. Partners are able to request approval by going into 'My Organization' and clicking 'Request Approval' button." %>
+          <span id="pending-approval-request-tooltip" title="<%= tooltip_message unless @partner.awaiting_review? %>">
+            <%= print_button_to approve_application_partner_path(@partner), { text: "Approve Partner", icon: "thumbs-o-up", type: "success", size: "md", enabled: @partner.awaiting_review? } %>
+          </span>
         </div>
       </div>
     </div>
   </div>
 </section>
+<script>
+$(function () {
+  $('#pending-approval-request-tooltip').tooltip()
+})
+</script>

spec/requests/partners_requests_spec.rb

@@ -117,8 +117,8 @@
         subject.call
       end
 
-      it 'should not show the Approve Partner button' do
-        expect(response.body).not_to include("Approve Partner")
+      it 'should show the Approve Partner button' do
+        expect(response.body).to include("Approve Partner")
       end
     end
   end

spec/system/partner_system_spec.rb

@@ -245,4 +245,43 @@
       expect(partner.send_reminders).to be false
     end
   end
+
+  describe "#approve_partner" do
+    let(:tooltip_message) do
+      "Partner has not requested approval yet. \
+Partners are able to request approval by going into 'My Organization' \
+and clicking 'Request Approval' button."
+    end
+    let!(:invited_partner) { create(:partner, name: "Amelia Ebonheart", status: :invited) }
+    let!(:awaiting_review_partner) { create(:partner, name: "Beau Brummel", status: :awaiting_review) }
+
+    context "when partner has :invited status" do
+      before { visit_approval_page(1) }
+
+      it { expect(page).to have_selector(:link_or_button, 'Approve Partner') }
+      it { expect(page).to have_selector('span#pending-approval-request-tooltip > a.btn.btn-success.btn-md.disabled') }
+
+      it 'shows correct tooltip' do
+        page.execute_script('$("#pending-approval-request-tooltip").mouseover()')
+        expect(page).to have_content tooltip_message
+      end
+    end
+
+    context "when partner has :awaiting_review status" do
+      before { visit_approval_page(2) }
+
+      it { expect(page).to have_selector(:link_or_button, 'Approve Partner') }
+      it { expect(page).not_to have_selector('span#pending-approval-request-tooltip > a.btn.btn-success.btn-md.disabled') }
+
+      it 'shows no tooltip' do
+        page.execute_script('$("#pending-approval-request-tooltip").mouseover()')
+        expect(page).not_to have_content tooltip_message
+      end
+    end
+  end
+end
+
+def visit_approval_page(table_row)
+  visit url_prefix + "/partners"
+  within("table > tbody > tr:nth-child(#{table_row}) > td:nth-child(5)") { click_on "Review Application" }
 end