Move Connected Apps form out of Enterprise form

Nested forms are not valid HTML and we were submitting the wrong
authenticity token to Rails when updating the enterprise.

I inverted the hierarchy of the form and the panels. The menu and
tab-panel structure now sits above and the enterprise edit form is
nested within.

The current structure is not ideal but it's only a transition phase. I'm
expecting the page to get re-designed at some point and re-writen
without AngularJS.

app/jobs/connect_app_job.rb

@@ -17,7 +17,7 @@ class ConnectAppJob < ApplicationJob
 
     return unless channel
 
-    selector = "#edit_enterprise_#{enterprise.id} #connected-app-discover-regen"
+    selector = "#connected-app-discover-regen.enterprise_#{enterprise.id}"
     html = ApplicationController.render(
       partial: "admin/enterprises/form/connected_apps",
       locals: { enterprise: },

app/views/admin/enterprises/_form.html.haml

@@ -9,6 +9,11 @@
     %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { "tabs-and-panels-target": "panel" }}
       %legend= t(".#{ item[:name] }.legend")
 
+  - when 'connected_apps'
+    -# Don't render this item here in the main form.
+    -# The panel contains its own form and we can't nest forms in forms.
+    -# Otherwise we add multiple authenticity tokens and Rails denies updates.
+
   - else
     %fieldset.alpha.no-border-bottom{ id: "#{item[:name]}_panel", data: { "tabs-and-panels-target": "panel"  }}
       %legend= t(".#{ item[:form_name] || item[:name] }.legend")

app/views/admin/enterprises/_ng_form.html.haml

@@ -11,11 +11,4 @@
     %input.red{ type: "button", value: t(:update), "ng-click": "submit()", "ng-disabled": "!enterprise_form.$dirty" }
     %input{ type: "button", "ng-value": "enterprise_form.$dirty ? '#{t(:cancel)}' : '#{t(:close)}'", "ng-click": "cancel('#{main_app.admin_enterprises_path}')" }
 
-  .row{ data: { 
-    controller: "tabs-and-panels", "tabs-and-panels-class-name-value": "selected" }}
-    .sixteen.columns.alpha
-      .four.columns.alpha
-        = render 'admin/shared/side_menu'
-      .one.column  
-      .eleven.columns.omega.fullwidth_inputs
-        = render 'form', f: f
+  = render 'form', f: f

app/views/admin/enterprises/edit.html.haml

@@ -13,4 +13,14 @@
 
 = render 'admin/enterprises/form_data'
 
-= render 'admin/enterprises/ng_form', action: 'edit'
+.row{ data: { controller: "tabs-and-panels", "tabs-and-panels-class-name-value": "selected" }}
+  .sixteen.columns.alpha
+    .four.columns.alpha
+      = render 'admin/shared/side_menu'
+    .one.column  
+    .eleven.columns.omega.fullwidth_inputs
+      = render 'admin/enterprises/ng_form', action: 'edit'
+
+      %fieldset.alpha.no-border-bottom{ id: "connected_apps_panel", data: { "tabs-and-panels-target": "panel"  }}
+        %legend= t("admin.enterprises.form.connected_apps.legend")
+        = render "admin/enterprises/form/connected_apps", enterprise: @enterprise

app/views/admin/enterprises/form/_connected_apps.html.haml

@@ -1,5 +1,4 @@
-- enterprise ||= f.object
-#connected-app-discover-regen
+%div{ id: "connected-app-discover-regen", class: "enterprise_#{enterprise.id}" }
   .connected-app__head
     %div
       %h3= t ".title"