Add files, people, announcements and grades tutorial trays

closes FALCOR-117, FALCOR-118, FALCOR-119, FALCOR-120

Test Plan:
  - Enable new user tutorials
  files:
  - Go to the course files page
  - The proper tray data should show like https://cl.ly/2N1K0O012N2M
  - Collapsing/Expanding should persist to the server
  people:
  - Go to the course people page
  - The proper tray data should show like https://cl.ly/2s203e0i460M
  - Collapsing/Expanding should persist to the server
  grades:
  - Go to the course gradebook page
  - The proper tray data should show like https://cl.ly/0V0E1M161X2E
  - Collapsing/Expanding should persist to the server
  announcements:
  - Go to the course announcements page
  - The proper tray data should show like https://cl.ly/1Y3S0340342n
  - Collapsing/Expanding should persist to the server

Change-Id: Ieb87982915f00aba4889d6af26c8dccbed1f125d
Reviewed-on: https://gerrit.instructure.com/104218
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Dan Sasaki
Product-Review: Mary Jane Anderson <manderson@instructure.com>

app/controllers/users_controller.rb

@@ -1343,7 +1343,7 @@ class UsersController < ApplicationController
       return render(json: { :message => "This endpoint only works against the current user" }, status: :unauthorized)
     end
 
-    valid_names = %w{home modules pages assignments quizzes settings}
+    valid_names = %w{home modules pages assignments quizzes settings files people announcements grades}
 
     # Check if the page_name is valid
     unless valid_names.include?(params[:page_name])

app/jsx/new_user_tutorial/trays/AnnouncementsTray.jsx

@@ -0,0 +1,22 @@
+define([
+  'react',
+  'i18n!new_user_tutorial',
+  'instructure-ui',
+], (React, I18n, { Typography, Heading }) => {
+  const AnnouncementsTray = () => (
+    <div>
+      <Heading as="h2" level="h1" >{I18n.t('Announcements')}</Heading>
+      <Typography size="large" as="p">
+        {I18n.t('Share important updates with users')}
+      </Typography>
+      <Typography as="p">
+        {
+          I18n.t(`Share important information with all users in your course.
+            Choose to get a copy of your own announcements in Notifications.`)
+        }
+      </Typography>
+    </div>
+  );
+
+  return AnnouncementsTray;
+});

app/jsx/new_user_tutorial/trays/FilesTray.jsx

@@ -0,0 +1,23 @@
+define([
+  'react',
+  'i18n!new_user_tutorial',
+  'instructure-ui',
+], (React, I18n, { Typography, Heading }) => {
+  const FilesTray = () => (
+    <div>
+      <Heading as="h2" level="h1" >{I18n.t('Files')}</Heading>
+      <Typography size="large" as="p">
+        {I18n.t('Images, Documents, and more')}
+      </Typography>
+      <Typography as="p">
+        {
+          I18n.t(`Upload course files, syllabi, readings, or other documents.
+            Lock folders to keep them hidden from students. Add files to Modules,
+            Assignments, Discussions, or Pages.`)
+        }
+      </Typography>
+    </div>
+  );
+
+  return FilesTray;
+});

app/jsx/new_user_tutorial/trays/GradesTray.jsx

@@ -0,0 +1,23 @@
+define([
+  'react',
+  'i18n!new_user_tutorial',
+  'instructure-ui',
+], (React, I18n, { Typography, Heading }) => {
+  const GradesTray = () => (
+    <div>
+      <Heading as="h2" level="h1" >{I18n.t('Grades')}</Heading>
+      <Typography size="large" as="p">
+        {I18n.t('Track individual student and class progress')}
+      </Typography>
+      <Typography as="p">
+        {
+          I18n.t(`Input and distribute grades for students. Display grades as
+            points, percentages, complete or incomplete, pass or fail, GPA scale,
+            and letter grades. Group assignments for grade weighting.`)
+        }
+      </Typography>
+    </div>
+  );
+
+  return GradesTray;
+});

app/jsx/new_user_tutorial/trays/PeopleTray.jsx

@@ -0,0 +1,21 @@
+define([
+  'react',
+  'i18n!new_user_tutorial',
+  'instructure-ui',
+], (React, I18n, { Typography, Heading }) => {
+  const PeopleTray = () => (
+    <div>
+      <Heading as="h2" level="h1" >{I18n.t('People')}</Heading>
+      <Typography size="large" as="p">
+        {I18n.t('Add Students, TAs, and Observers to your course')}
+      </Typography>
+      <Typography as="p">
+        {
+          I18n.t('Manage enrollment status, create groups, and add users from this page.')
+        }
+      </Typography>
+    </div>
+  );
+
+  return PeopleTray;
+});

app/jsx/new_user_tutorial/utils/getProperTray.jsx

@@ -5,8 +5,13 @@ define([
   '../trays/PagesTray',
   '../trays/AssignmentsTray',
   '../trays/QuizzesTray',
-  '../trays/SettingsTray'
-], (I18n, HomeTray, ModulesTray, PagesTray, AssignmentsTray, QuizzesTray, SettingsTray) => {
+  '../trays/SettingsTray',
+  '../trays/FilesTray',
+  '../trays/PeopleTray',
+  '../trays/AnnouncementsTray',
+  '../trays/GradesTray'
+], (I18n, HomeTray, ModulesTray, PagesTray, AssignmentsTray, QuizzesTray, SettingsTray,
+  FilesTray, PeopleTray, AnnouncementsTray, GradesTray) => {
   const generateObject = (component, label, pageName) => ({
     component,
     label,
@@ -24,6 +29,14 @@ define([
       return generateObject(QuizzesTray, I18n.t('Quizzes Tutorial Tray'), 'quizzes');
     } else if (path.includes('settings')) {
       return generateObject(SettingsTray, I18n.t('Settings Tutorial Tray'), 'settings');
+    } else if (path.includes('files')) {
+      return generateObject(FilesTray, I18n.t('Files Tutorial Tray'), 'files');
+    } else if (path.includes('users')) {
+      return generateObject(PeopleTray, I18n.t('People Tutorial Tray'), 'people');
+    } else if (path.includes('announcements')) {
+      return generateObject(AnnouncementsTray, I18n.t('Announcements Tutorial Tray'), 'announcements');
+    } else if (path.includes('gradebook')) {
+      return generateObject(GradesTray, I18n.t('Gradebook Tutorial Tray'), 'grades');
     }
     return generateObject(HomeTray, I18n.t('Home Tutorial Tray'), 'home');
   }

spec/javascripts/jsx/new_user_tutorial/utils/getProperTraySpec.jsx

@@ -5,8 +5,13 @@ define([
   'jsx/new_user_tutorial/trays/PagesTray',
   'jsx/new_user_tutorial/trays/AssignmentsTray',
   'jsx/new_user_tutorial/trays/QuizzesTray',
-  'jsx/new_user_tutorial/trays/SettingsTray'
-], (getProperTray, HomeTray, ModulesTray, PagesTray, AssignmentsTray, QuizzesTray, SettingsTray) => {
+  'jsx/new_user_tutorial/trays/SettingsTray',
+  'jsx/new_user_tutorial/trays/FilesTray',
+  'jsx/new_user_tutorial/trays/PeopleTray',
+  'jsx/new_user_tutorial/trays/AnnouncementsTray',
+  'jsx/new_user_tutorial/trays/GradesTray'
+], (getProperTray, HomeTray, ModulesTray, PagesTray, AssignmentsTray, QuizzesTray,
+    SettingsTray, FilesTray, PeopleTray, AnnouncementsTray, GradesTray) => {
   QUnit.module('getProperTray test');
 
   test('if no match is in the path argument returns the HomeTray', () => {
@@ -49,4 +54,33 @@ define([
 
     equal(trayObj.label, 'Settings Tutorial Tray', 'label matches');
   });
+  
+  test('if files is in the path argument returns the FilesTray', () => {
+    const trayObj = getProperTray('/courses/3/files/');
+    equal(trayObj.component, FilesTray, 'component matches');
+
+    equal(trayObj.label, 'Files Tutorial Tray', 'label matches');
+  });
+
+  test('if users is in the path argument returns the PeopleTray', () => {
+    const trayObj = getProperTray('/courses/3/users/');
+    equal(trayObj.component, PeopleTray, 'component matches');
+
+    equal(trayObj.label, 'People Tutorial Tray', 'label matches');
+  });
+
+  test('if announcements is in the path argument returns the AnnouncementsTray', () => {
+    const trayObj = getProperTray('/courses/3/announcements/');
+    equal(trayObj.component, AnnouncementsTray, 'component matches');
+
+    equal(trayObj.label, 'Announcements Tutorial Tray', 'label matches');
+  });
+
+  test('if gradebook is in the path argument returns the GradesTray', () => {
+    const trayObj = getProperTray('/courses/3/gradebook/');
+    equal(trayObj.component, GradesTray, 'component matches');
+
+    equal(trayObj.label, 'Gradebook Tutorial Tray', 'label matches');
+
+  });
 });