Add page for editing appointment groups

closes CNVS-32301

Test Plan:
  - Enable Better Scheduler
  - Create some appointment groups
  - Click on an appointment group in any calendar view
  - There should be a button for "Group Details"
  - That should take you to a new page that shows
    "Edit ABC" where ABC is the title of the appointment
    group.

Change-Id: Id5b9cb93adc071bdb3d2e930e99eb27c69077f1f
Reviewed-on: https://gerrit.instructure.com/91477
Reviewed-by: Steven Burnett <sburnett@instructure.com>
Tested-by: Jenkins
QA-Review: Deepeeca Soundarrajan <dsoundarrajan@instructure.com>
Product-Review: Clay Diffrient <cdiffrient@instructure.com>

Author: claydiffrient

app/coffeescripts/bundles/calendar_appointment_group_edit.coffee

@@ -0,0 +1,9 @@
+require [
+  'react-dom'
+  'jsx/calendar/scheduler/components/appointment_groups/EditPage'
+], (ReactDOM, EditPage) ->
+
+  ReactDOM.render(
+    React.createElement(EditPage, {appointment_group: ENV.APPOINTMENT_GROUP.appointment_group}),
+    document.getElementById('content')
+  )

app/coffeescripts/calendar/CommonEvent.CalendarEvent.coffee

@@ -61,6 +61,12 @@ define [
       else
         $.replaceTags(@contextInfo.calendar_event_url, 'id', @calendarEvent.parent_event_id ? @calendarEvent.id)
 
+    editGroupURL: () ->
+      if @isAppointmentGroupEvent()
+        "/appointment_groups/#{@object.appointment_group_id}/edit"
+      else
+        "#"
+
     displayTimeString: () ->
         if @calendarEvent.all_day
           @formatTime(@startDate(), true)

app/coffeescripts/calendar/ShowEventDetailsDialog.coffee

@@ -173,6 +173,8 @@ define [
       else if @event.object?.available_slots > 0
         params.availableSlotsText = @event.object.available_slots
 
+      params.use_new_scheduler = ENV.CALENDAR.BETTER_SCHEDULER
+      params.is_appointment_group = !!@event.isAppointmentGroupEvent() # this returns the actual url so make it boolean for clarity
       params.reserve_comments = @event.object.reserve_comments ?= @event.object.comments
       params.showEventLink   = params.fullDetailsURL()
       params.showEventLink or= params.isAppointmentGroupEvent()

app/controllers/appointment_groups_controller.rb

@@ -207,7 +207,7 @@ class AppointmentGroupsController < ApplicationController
   include Api::V1::CalendarEvent
 
   before_filter :require_user
-  before_filter :get_appointment_group, :only => [:show, :update, :destroy, :users, :groups]
+  before_filter :get_appointment_group, :only => [:show, :update, :destroy, :users, :groups, :edit]
 
   def calendar_fragment(opts)
     opts.to_json.unpack('H*')
@@ -386,6 +386,20 @@ def show
     end
   end
 
+  # Shows the edit page for an assignment group
+  def edit
+    if request.format == :html
+      if authorized_action(@group, @current_user, :update)
+        @page_title = t('Edit %{title}', {title: @group.title})
+        js_env({
+          :APPOINTMENT_GROUP => @group
+        })
+        js_bundle :calendar_appointment_group_edit
+        render :text => "".html_safe, :layout => true
+      end
+    end
+  end
+
   # @API Update an appointment group
   #
   # Update and return an appointment group. If new_appointments are specified,

app/jsx/calendar/scheduler/components/appointment_groups/EditPage.jsx

@@ -0,0 +1,26 @@
+define([
+  'react',
+  'i18n!appointment_groups',
+], (React, I18n) => {
+
+  class FindAppointment extends React.Component {
+
+    static propTypes = {
+      appointment_group: React.PropTypes.shape({
+        title: React.PropTypes.string
+      })
+    };
+
+    render () {
+      return (
+        <h1>
+          {I18n.t('Edit %{pageTitle}', {
+            pageTitle: this.props.appointment_group.title
+          })}
+        </h1>
+      );
+    }
+  }
+
+  return FindAppointment;
+});

app/stylesheets/jst/calendar/calendarApp.scss

@@ -62,7 +62,7 @@
   border: 1px solid #b0afaf;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
   background-color: white;
-  min-width: 250px;
+  min-width: 320px;
   max-width: 500px;
   ul {
     @include reset-list;

app/views/jst/calendar/eventDetails.handlebars

@@ -102,6 +102,9 @@
   </div>
   <div class="popover-links-holder event-details-footer">
     <div class="pull-right">
+      {{#ifAll can_edit is_appointment_group use_new_scheduler}}
+        <a href={{editGroupURL}} class="group_details Button Button--small">{{#t}}Group Details{{/t}}</a>
+      {{/ifAll}}
       {{#if can_delete }}
         <button class="event_button Button Button--small delete_event_link">{{#t "links.delete"}}Delete{{/t}}</button>
       {{/if}}

config/routes.rb

@@ -816,7 +816,7 @@
     end
   end
 
-  resources :appointment_groups, only: [:index, :show]
+  resources :appointment_groups, only: [:index, :show, :edit]
 
   resources :errors, only: [:show, :index, :create], path: :error_reports
 

spec/selenium/calendar/calendar2_general_spec.rb

@@ -17,6 +17,31 @@
       course_with_teacher_logged_in
     end
 
+    context "with Better Scheduler enabled" do
+      before(:each) do
+        account = Account.default
+        account.enable_feature! :better_scheduler
+      end
+
+      it "should let me go to the Edit Appointment group page from the appointment group slot dialog" do
+        date = Date.today.to_s
+        create_appointment_group :new_appointments => [
+                                     ["#{date} 12:00:00", "#{date} 13:00:00"],
+                                     ["#{date} 13:00:00", "#{date} 14:00:00"],
+                                 ]
+
+        get '/calendar2'
+
+        f('.fc-event').click
+        wait_for_ajaximations
+        expect_new_page_load { f('.group_details').click }
+        wait_for_ajaximations
+
+        expect(f('h1')).to include_text "Edit new appointment group"
+      end
+
+    end
+
     it "should let me message students who have signed up for an appointment" do
       date = Date.today.to_s
       create_appointment_group :new_appointments => [