Rename Files From Recent Refactors of Teacher Panel and Instructions

apps/src/code-studio/components/TeacherPanel.jsx → apps/src/code-studio/components/TeacherPanelContainer.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
 import {tryGetLocalStorage, trySetLocalStorage} from '@cdo/apps/utils';
 
-export default class TeacherPanel extends React.Component {
+export default class TeacherPanelContainer extends React.Component {
   static propTypes = {
     children: PropTypes.node
   };

apps/src/code-studio/components/progress/ScriptTeacherPanel.jsx → apps/src/code-studio/components/progress/TeacherPanel.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import TeacherPanel from '../TeacherPanel';
+import TeacherPanelContainer from '../TeacherPanelContainer';
 import SectionSelector from './SectionSelector';
 import ViewAsToggle from './ViewAsToggle';
 import FontAwesome from '@cdo/apps/templates/FontAwesome';
@@ -51,7 +51,7 @@ const styles = {
   }
 };
 
-class ScriptTeacherPanel extends React.Component {
+class TeacherPanel extends React.Component {
   static propTypes = {
     onSelectUser: PropTypes.func,
     getSelectedUserId: PropTypes.func,
@@ -105,7 +105,7 @@ class ScriptTeacherPanel extends React.Component {
     const sectionId = selectedSection && selectedSection.id;
 
     return (
-      <TeacherPanel>
+      <TeacherPanelContainer>
         <h3>{i18n.teacherPanel()}</h3>
         <div style={styles.scrollable}>
           <ViewAsToggle />
@@ -188,12 +188,12 @@ class ScriptTeacherPanel extends React.Component {
             />
           )}
         </div>
-      </TeacherPanel>
+      </TeacherPanelContainer>
     );
   }
 }
 
-export const UnconnectedScriptTeacherPanel = ScriptTeacherPanel;
+export const UnconnectedTeacherPanel = TeacherPanel;
 export default connect(state => {
   const {stagesBySectionId, lockableAuthorized} = state.stageLock;
   const {
@@ -228,4 +228,4 @@ export default connect(state => {
     unlockedStageNames: unlockedStageIds.map(id => stageNames[id]),
     students: state.teacherSections.selectedStudents
   };
-})(ScriptTeacherPanel);
+})(TeacherPanel);

apps/src/code-studio/teacherPanelHelpers.js

@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import {reload} from '@cdo/apps/utils';
 import {updateQueryParam} from '@cdo/apps/code-studio/utils';
 import {setStudentsForCurrentSection} from '@cdo/apps/templates/teacherDashboard/teacherSectionsRedux';
-import ScriptTeacherPanel from './components/progress/ScriptTeacherPanel';
+import TeacherPanel from './components/progress/TeacherPanel';
 
 /**
  * Render our teacher panel that shows up on our course overview page.
@@ -44,7 +44,7 @@ export function renderTeacherPanel(
 
   ReactDOM.render(
     <Provider store={store}>
-      <ScriptTeacherPanel
+      <TeacherPanel
         sectionData={sectionData}
         onSelectUser={onSelectUser}
         scriptName={scriptName}

apps/src/templates/instructions/InstructionsWithWorkspace.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import CodeWorkspaceContainer from '../CodeWorkspaceContainer';
-import TopInstructionsCSP from './TopInstructionsCSP';
+import TopInstructions from './TopInstructions';
 import {setInstructionsMaxHeightAvailable} from '../../redux/instructions';
 
 /**
@@ -96,7 +96,7 @@ export class UnwrappedInstructionsWithWorkspace extends React.Component {
   render() {
     return (
       <span>
-        <TopInstructionsCSP />
+        <TopInstructions />
         <CodeWorkspaceContainer
           ref={this.setCodeWorkspaceContainerRef}
           topMargin={this.props.instructionsHeight}

apps/src/templates/instructions/MarkdownInstructions.jsx

@@ -53,7 +53,7 @@ class MarkdownInstructions extends React.Component {
   componentWillUnmount() {
     const detailsDOM = $(ReactDOM.findDOMNode(this)).find('details');
     if (detailsDOM.details) {
-      detailsDOM.off('toggle.details.TopInstructionsCSP');
+      detailsDOM.off('toggle.details.TopInstructions');
     }
   }
 
@@ -72,7 +72,7 @@ class MarkdownInstructions extends React.Component {
     if (detailsDOM.details) {
       detailsDOM.details();
       detailsDOM.on({
-        'toggle.details.TopInstructionsCSP': () => {
+        'toggle.details.TopInstructions': () => {
           this.props.onResize();
         }
       });

apps/src/templates/instructions/TopInstructionsCSP.jsx → apps/src/templates/instructions/TopInstructions.jsx

@@ -136,7 +136,7 @@ const audioStyle = {
   }
 };
 
-class TopInstructionsCSP extends Component {
+class TopInstructions extends Component {
   static propTypes = {
     isEmbedView: PropTypes.bool.isRequired,
     hasContainedLevels: PropTypes.bool,
@@ -682,7 +682,7 @@ class TopInstructionsCSP extends Component {
     );
   }
 }
-export const UnconnectedTopInstructionsCSP = TopInstructionsCSP;
+export const UnconnectedTopInstructions = TopInstructions;
 export default connect(
   state => ({
     isEmbedView: state.pageConstants.isEmbedView,
@@ -725,4 +725,4 @@ export default connect(
   }),
   null,
   {withRef: true}
-)(Radium(TopInstructionsCSP));
+)(Radium(TopInstructions));

apps/test/unit/code-studio/components/progress/ScriptTeacherPanelTest.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import {assert, expect} from '../../../../util/reconfiguredChai';
-import {UnconnectedScriptTeacherPanel as ScriptTeacherPanel} from '@cdo/apps/code-studio/components/progress/ScriptTeacherPanel';
+import {UnconnectedTeacherPanel as TeacherPanel} from '@cdo/apps/code-studio/components/progress/TeacherPanel';
 import {ViewType} from '@cdo/apps/code-studio/viewAsRedux';
-import TeacherPanel from '@cdo/apps/code-studio/components/TeacherPanel';
+import TeacherPanelContainer from '@cdo/apps/code-studio/components/TeacherPanelContainer';
 import SectionSelector from '@cdo/apps/code-studio/components/progress/SectionSelector';
 import ViewAsToggle from '@cdo/apps/code-studio/components/progress/ViewAsToggle';
 import i18n from '@cdo/locale';
@@ -23,61 +23,61 @@ const MINIMUM_PROPS = {
 
 const students = [{id: 1, name: 'Student 1'}, {id: 2, name: 'Student 2'}];
 
-describe('ScriptTeacherPanel', () => {
+describe('TeacherPanel', () => {
   describe('on script page', () => {
     it('initial view as student', () => {
       const wrapper = shallow(
-        <ScriptTeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Student} />
+        <TeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Student} />
       );
 
       expect(
         wrapper.containsMatchingElement(
-          <TeacherPanel>
+          <TeacherPanelContainer>
             <h3>{i18n.teacherPanel()}</h3>
             <div>
               <ViewAsToggle />
               <div>{i18n.loading()}</div>
             </div>
-          </TeacherPanel>
+          </TeacherPanelContainer>
         )
       ).to.be.true;
     });
 
     it('initial view as teacher', () => {
       const wrapper = shallow(
-        <ScriptTeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Teacher} />
+        <TeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Teacher} />
       );
       assert(
         wrapper.containsMatchingElement(
-          <TeacherPanel>
+          <TeacherPanelContainer>
             <h3>{i18n.teacherPanel()}</h3>
             <div>
               <ViewAsToggle />
               <div>{i18n.loading()}</div>
             </div>
-          </TeacherPanel>
+          </TeacherPanelContainer>
         )
       );
     });
   });
 
   it('shows loading message when sections are not loaded', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={false} />
+      <TeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={false} />
     );
     assert(wrapper.containsMatchingElement(<div>{i18n.loading()}</div>));
   });
 
   it('hides loading message when sections are loaded', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={true} />
+      <TeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={true} />
     );
     assert(!wrapper.containsMatchingElement(<div>{i18n.loading()}</div>));
   });
 
   it('shows SectionSelector if hasSections and sectionsAreLoaded', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel
+      <TeacherPanel
         {...MINIMUM_PROPS}
         hasSections={true}
         sectionsAreLoaded={true}
@@ -88,21 +88,21 @@ describe('ScriptTeacherPanel', () => {
 
   it('hides SectionSelector if hasSections is false', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel {...MINIMUM_PROPS} hasSections={false} />
+      <TeacherPanel {...MINIMUM_PROPS} hasSections={false} />
     );
     assert(!wrapper.containsMatchingElement(<SectionSelector />));
   });
 
   it('hides SectionSelector if sectionsAreLoaded is false', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={false} />
+      <TeacherPanel {...MINIMUM_PROPS} sectionsAreLoaded={false} />
     );
     assert(!wrapper.containsMatchingElement(<SectionSelector />));
   });
 
   it('shows section selection instructions if viewing as a teacher, and has sections and lockable stages', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel
+      <TeacherPanel
         {...MINIMUM_PROPS}
         viewAs={ViewType.Teacher}
         scriptHasLockableStages={true}
@@ -120,7 +120,7 @@ describe('ScriptTeacherPanel', () => {
 
   it('adds a warning if there are also unlocked stages', () => {
     const wrapper = shallow(
-      <ScriptTeacherPanel
+      <TeacherPanel
         {...MINIMUM_PROPS}
         viewAs={ViewType.Teacher}
         scriptHasLockableStages={true}
@@ -153,7 +153,7 @@ describe('ScriptTeacherPanel', () => {
   describe('StudentTable', () => {
     it('displays StudentTable for teacher with students', () => {
       const wrapper = shallow(
-        <ScriptTeacherPanel
+        <TeacherPanel
           {...MINIMUM_PROPS}
           viewAs={ViewType.Teacher}
           students={students}
@@ -164,7 +164,7 @@ describe('ScriptTeacherPanel', () => {
 
     it('does not display StudentTable for teacher with no students', () => {
       const wrapper = shallow(
-        <ScriptTeacherPanel
+        <TeacherPanel
           {...MINIMUM_PROPS}
           viewAs={ViewType.Teacher}
           students={[]}
@@ -175,7 +175,7 @@ describe('ScriptTeacherPanel', () => {
 
     it('does not display StudentTable for student', () => {
       const wrapper = shallow(
-        <ScriptTeacherPanel
+        <TeacherPanel
           {...MINIMUM_PROPS}
           viewAs={ViewType.Student}
           students={students}
@@ -189,7 +189,7 @@ describe('ScriptTeacherPanel', () => {
     describe('on script', () => {
       it('does not display SelectedStudentInfo', () => {
         const wrapper = shallow(
-          <ScriptTeacherPanel
+          <TeacherPanel
             {...MINIMUM_PROPS}
             viewAs={ViewType.Teacher}
             students={students}
@@ -205,7 +205,7 @@ describe('ScriptTeacherPanel', () => {
     describe('on level', () => {
       it('displays SelectedStudentInfo when student selected', () => {
         const wrapper = shallow(
-          <ScriptTeacherPanel
+          <TeacherPanel
             {...MINIMUM_PROPS}
             viewAs={ViewType.Teacher}
             students={students}
@@ -229,7 +229,7 @@ describe('ScriptTeacherPanel', () => {
     describe('on script', () => {
       it('does not display example solutions', () => {
         const wrapper = shallow(
-          <ScriptTeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Teacher} />
+          <TeacherPanel {...MINIMUM_PROPS} viewAs={ViewType.Teacher} />
         );
         expect(wrapper.find('Button')).to.have.length(0);
       });
@@ -238,7 +238,7 @@ describe('ScriptTeacherPanel', () => {
     describe('on level', () => {
       it('displays example solution for level with one example solution', () => {
         const wrapper = shallow(
-          <ScriptTeacherPanel
+          <TeacherPanel
             {...MINIMUM_PROPS}
             viewAs={ViewType.Teacher}
             sectionData={{
@@ -257,7 +257,7 @@ describe('ScriptTeacherPanel', () => {
 
       it('does not display example solution for level with no example solution', () => {
         const wrapper = shallow(
-          <ScriptTeacherPanel
+          <TeacherPanel
             {...MINIMUM_PROPS}
             viewAs={ViewType.Teacher}
             sectionData={{