UI modifications to topic, story and skill editors (oppia#5662)

* Topic and skill editor changes done * Story editor ui changes done * moved question editor to modal * made review change and UI changes to question editor * made changes * Added check for link in dropdown * changed constant name * lint
dmoneyballer · Sep 26, 2018 · f8a3f95 · f8a3f95
1 parent 4980dca
commit f8a3f95
Show file tree

Hide file tree

Showing 34 changed files with 359 additions and 225 deletions.
diff --git a/core/controllers/story_editor.py b/core/controllers/story_editor.py
@@ -90,7 +90,8 @@ def get(self, topic_id, story_id):
             raise self.PageNotFoundException
 
         self.values.update({
-            'story': story.to_dict()
+            'story': story.to_dict(),
+            'topic_name': topic.name
         })
 
         self.render_json(self.values)

diff --git a/core/controllers/story_editor_test.py b/core/controllers/story_editor_test.py
@@ -88,6 +88,7 @@ def test_editable_story_handler_get(self):
                     feconf.STORY_EDITOR_DATA_URL_PREFIX, self.topic_id,
                     self.story_id))
             self.assertEqual(self.story_id, json_response['story']['id'])
+            self.assertEqual('Name', json_response['topic_name'])
             self.logout()
 
     def test_editable_story_handler_put(self):

diff --git a/core/templates/dev/head/app.js b/core/templates/dev/head/app.js
@@ -46,8 +46,10 @@ oppia.constant('OBJECT_EDITOR_URL_PREFIX', '/object_editor_template/');
 // NOTE TO DEVELOPERS: This should be synchronized with the value in feconf.
 oppia.constant('ENABLE_ML_CLASSIFIERS', false);
 // Feature still in development.
-oppia.constant('INFO_MESSAGE_SOLUTION_IS_INVALID',
+oppia.constant('INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_EXPLORATION',
   'The current solution does not lead to another card.');
+oppia.constant('INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_QUESTION',
+  'The current solution does not correspond to a correct answer.');
 oppia.constant('INFO_MESSAGE_SOLUTION_IS_VALID',
   'The solution is now valid!');
 oppia.constant('INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_CURRENT_RULE',

diff --git a/core/templates/dev/head/components/SolutionEditorDirective.js b/core/templates/dev/head/components/SolutionEditorDirective.js
@@ -22,13 +22,11 @@ oppia.directive('solutionEditor', [
   'SolutionObjectFactory', 'SolutionVerificationService',
   'ContextService', 'ExplorationHtmlFormatterService',
   'StateInteractionIdService', 'StateCustomizationArgsService',
-  'INFO_MESSAGE_SOLUTION_IS_INVALID',
   function($uibModal, UrlInterpolationService, StateSolutionService,
       StateEditorService, AlertsService,
       SolutionObjectFactory, SolutionVerificationService,
       ContextService, ExplorationHtmlFormatterService,
-      StateInteractionIdService, StateCustomizationArgsService,
-      INFO_MESSAGE_SOLUTION_IS_INVALID) {
+      StateInteractionIdService, StateCustomizationArgsService) {
     return {
       restrict: 'E',
       scope: {

diff --git a/core/templates/dev/head/components/answer_group_editor_directive.html b/core/templates/dev/head/components/answer_group_editor_directive.html
@@ -117,7 +117,7 @@
                   on-save-content-ids-to-audio-translations="onSaveContentIdsToAudioTranslations">
   </outcome-editor>
 
-  <div ng-if="isInQuestionMode() && getTaggedMisconceptionId() !== null">
+  <div ng-if="isInQuestionMode() && getTaggedMisconceptionId() !== null && !outcome.labelledAsCorrect">
     <label> Tagged Misconception: </label>
     <[misconceptionName]>
   </div>

diff --git a/core/templates/dev/head/components/top_navigation_bar/TopNavigationBarDirective.js b/core/templates/dev/head/components/top_navigation_bar/TopNavigationBarDirective.js
@@ -45,6 +45,7 @@ oppia.directive('topNavigationBar', [
             'topic_editor', 'story_editor'];
           $scope.NAV_MODE = GLOBALS.NAV_MODE;
           $scope.LABEL_FOR_CLEARING_FOCUS = LABEL_FOR_CLEARING_FOCUS;
+          $scope.newStructuresEnabled = constants.ENABLE_NEW_STRUCTURES;
           $scope.getStaticImageUrl = UrlInterpolationService.getStaticImageUrl;
           $scope.activeMenuName = '';
           $scope.username = GLOBALS.username;

diff --git a/core/templates/dev/head/components/top_navigation_bar/top_navigation_bar_directive.html b/core/templates/dev/head/components/top_navigation_bar/top_navigation_bar_directive.html
@@ -124,7 +124,7 @@
           </a>
         </li>
         <li>
-          <a ng-if="isAdmin || isTopicManager" ng-click="closeSubmenuIfNotMobile($event)" href="/topics_and_skills_dashboard"
+          <a ng-if="(isAdmin || isTopicManager) && newStructuresEnabled" ng-click="closeSubmenuIfNotMobile($event)" href="/topics_and_skills_dashboard"
              class="protractor-test-dashboard-link">
             <span translate="I18N_TOPNAV_TOPICS_AND_SKILLS_DASHBOARD"></span>
           </a>

diff --git a/core/templates/dev/head/domain/story/EditableStoryBackendApiService.js b/core/templates/dev/head/domain/story/EditableStoryBackendApiService.js
@@ -34,8 +34,12 @@ oppia.factory('EditableStoryBackendApiService', [
 
       $http.get(storyDataUrl).then(function(response) {
         var story = angular.copy(response.data.story);
+        var topicName = angular.copy(response.data.topic_name);
         if (successCallback) {
-          successCallback(story);
+          successCallback({
+            story: story,
+            topicName: topicName
+          });
         }
       }, function(errorResponse) {
         if (errorCallback) {

diff --git a/core/templates/dev/head/domain/story/EditableStoryBackendApiServiceSpec.js b/core/templates/dev/head/domain/story/EditableStoryBackendApiServiceSpec.js
@@ -57,7 +57,8 @@ describe('Editable story backend API service', function() {
           next_node_id: 'node_3'
         },
         language_code: 'en'
-      }
+      },
+      topic_name: 'Topic Name'
     };
   }));
 
@@ -78,7 +79,10 @@ describe('Editable story backend API service', function() {
         successHandler, failHandler);
       $httpBackend.flush();
 
-      expect(successHandler).toHaveBeenCalledWith(sampleDataResults.story);
+      expect(successHandler).toHaveBeenCalledWith({
+        story: sampleDataResults.story,
+        topicName: sampleDataResults.topic_name
+      });
       expect(failHandler).not.toHaveBeenCalled();
     }
   );
@@ -128,7 +132,7 @@ describe('Editable story backend API service', function() {
 
       EditableStoryBackendApiService.fetchStory('topicId', 'storyId').then(
         function(data) {
-          story = data;
+          story = data.story;
         });
       $httpBackend.flush();
 

diff --git a/core/templates/dev/head/pages/exploration_editor/editor_tab/ResponsesService.js b/core/templates/dev/head/pages/exploration_editor/editor_tab/ResponsesService.js
@@ -23,17 +23,17 @@ oppia.factory('ResponsesService', [
   'OutcomeObjectFactory', 'COMPONENT_NAME_DEFAULT_OUTCOME',
   'StateSolutionService', 'SolutionVerificationService', 'AlertsService',
   'ContextService', 'StateContentIdsToAudioTranslationsService',
-  'SolutionValidityService',
-  'INFO_MESSAGE_SOLUTION_IS_VALID', 'INFO_MESSAGE_SOLUTION_IS_INVALID',
+  'SolutionValidityService', 'INFO_MESSAGE_SOLUTION_IS_VALID',
+  'INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_EXPLORATION',
   'INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_CURRENT_RULE',
   function(
       $rootScope, StateInteractionIdService, INTERACTION_SPECS,
       AnswerGroupsCacheService, StateEditorService,
       OutcomeObjectFactory, COMPONENT_NAME_DEFAULT_OUTCOME,
       StateSolutionService, SolutionVerificationService, AlertsService,
       ContextService, StateContentIdsToAudioTranslationsService,
-      SolutionValidityService,
-      INFO_MESSAGE_SOLUTION_IS_VALID, INFO_MESSAGE_SOLUTION_IS_INVALID,
+      SolutionValidityService, INFO_MESSAGE_SOLUTION_IS_VALID,
+      INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_EXPLORATION,
       INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_CURRENT_RULE) {
     var _answerGroupsMemento = null;
     var _defaultOutcomeMemento = null;
@@ -81,7 +81,8 @@ oppia.factory('ResponsesService', [
           AlertsService.addInfoMessage(
             INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_CURRENT_RULE);
         } else if (!solutionIsValid && !solutionWasPreviouslyValid) {
-          AlertsService.addInfoMessage(INFO_MESSAGE_SOLUTION_IS_INVALID);
+          AlertsService.addInfoMessage(
+            INFO_MESSAGE_SOLUTION_IS_INVALID_FOR_EXPLORATION);
         }
       }
     };

diff --git a/core/templates/dev/head/pages/skill_editor/SkillEditorNavbarDirective.js b/core/templates/dev/head/pages/skill_editor/SkillEditorNavbarDirective.js
@@ -50,6 +50,11 @@ oppia.directive('skillEditorNavbar', [
             $scope.validationIssues = $scope.skill.getValidationIssues();
           };
 
+          $scope.discardChanges = function() {
+            UndoRedoService.clearChanges();
+            SkillEditorStateService.loadSkill($scope.skill.getId());
+          };
+
           $scope.getWarningsCount = function() {
             return $scope.validationIssues.length;
           };

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/MisconceptionEditorDirective.js b/core/templates/dev/head/pages/skill_editor/editor_tab/MisconceptionEditorDirective.js
@@ -53,7 +53,9 @@ oppia.directive('misconceptionEditor', [
 
           $scope.FEEDBACK_FORM_SCHEMA = {
             type: 'html',
-            ui_config: {}
+            ui_config: {
+              hide_complex_extensions: 'true'
+            }
           };
 
           $scope.openNameEditor = function() {

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/SkillConceptCardEditorDirective.js b/core/templates/dev/head/pages/skill_editor/editor_tab/SkillConceptCardEditorDirective.js
@@ -27,27 +27,36 @@ oppia.directive('skillConceptCardEditor', [
         '/pages/skill_editor/editor_tab/' +
         'skill_concept_card_editor_directive.html'),
       controller: [
-        '$scope', '$filter', '$uibModal',
-        function($scope, $filter, $uibModal) {
+        '$scope', '$filter', '$uibModal', 'EVENT_SKILL_REINITIALIZED',
+        function($scope, $filter, $uibModal, EVENT_SKILL_REINITIALIZED) {
           $scope.skill = SkillEditorStateService.getSkill();
           $scope.dragDotsImgUrl = UrlInterpolationService.getStaticImageUrl(
             '/general/drag_dots.png');
           $scope.HTML_SCHEMA = {
             type: 'html'
           };
-          $scope.bindableFieldsDict = {
-            displayedConceptCardExplanation:
-              $scope.skill.getConceptCard().getExplanation(),
-            displayedWorkedExamples:
-              $scope.skill.getConceptCard().getWorkedExamples()
+
+          var initBindableFieldsDict = function() {
+            $scope.bindableFieldsDict = {
+              displayedConceptCardExplanation:
+                $scope.skill.getConceptCard().getExplanation(),
+              displayedWorkedExamples:
+                $scope.skill.getConceptCard().getWorkedExamples()
+            };
           };
+
           var explanationMemento = null;
           var workedExamplesMemento = null;
 
           $scope.isEditable = function() {
             return true;
           };
 
+          initBindableFieldsDict();
+          $scope.$on(EVENT_SKILL_REINITIALIZED, function() {
+            initBindableFieldsDict();
+          });
+
           // When the page is scrolled so that the top of the page is above the
           // browser viewport, there are some bugs in the positioning of the
           // helper. This is a bug in jQueryUI that has not been fixed yet.

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/SkillDescriptionEditorDirective.js b/core/templates/dev/head/pages/skill_editor/editor_tab/SkillDescriptionEditorDirective.js
@@ -29,8 +29,8 @@ oppia.directive('skillDescriptionEditor', [
         '/pages/skill_editor/editor_tab/' +
         'skill_description_editor_directive.html'),
       controller: [
-        '$scope',
-        function($scope) {
+        '$scope', 'EVENT_SKILL_REINITIALIZED',
+        function($scope, EVENT_SKILL_REINITIALIZED) {
           $scope.skill = SkillEditorStateService.getSkill();
           $scope.tmpSkillDescription = $scope.skill.getDescription();
           $scope.skillRights = SkillEditorStateService.getSkillRights();
@@ -39,6 +39,10 @@ oppia.directive('skillDescriptionEditor', [
             return $scope.skillRights.canEditSkillDescription();
           };
 
+          $scope.$on(EVENT_SKILL_REINITIALIZED, function() {
+            $scope.tmpSkillDescription = $scope.skill.getDescription();
+          });
+
           $scope.saveSkillDescription = function(newSkillDescription) {
             if (newSkillDescription === $scope.skill.getDescription()) {
               return;

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/SkillMisconceptionsEditorDirective.js b/core/templates/dev/head/pages/skill_editor/editor_tab/SkillMisconceptionsEditorDirective.js
@@ -28,10 +28,10 @@ oppia.directive('skillMisconceptionsEditor', [
         'skill_misconceptions_editor_directive.html'),
       controller: [
         '$scope', '$filter', '$uibModal', '$rootScope',
-        'MisconceptionObjectFactory',
+        'MisconceptionObjectFactory', 'EVENT_SKILL_REINITIALIZED',
         function(
             $scope, $filter, $uibModal, $rootScope,
-            MisconceptionObjectFactory) {
+            MisconceptionObjectFactory, EVENT_SKILL_REINITIALIZED) {
           $scope.skill = SkillEditorStateService.getSkill();
           $scope.misconceptions = $scope.skill.getMisconceptions();
 
@@ -47,6 +47,10 @@ oppia.directive('skillMisconceptionsEditor', [
             }
           };
 
+          $scope.$on(EVENT_SKILL_REINITIALIZED, function() {
+            $scope.misconceptions = $scope.skill.getMisconceptions();
+          });
+
           $scope.getMisconceptionSummary = function(misconception) {
             return misconception.getName();
           };
@@ -93,6 +97,13 @@ oppia.directive('skillMisconceptionsEditor', [
                     ui_config: {}
                   };
 
+                  $scope.MISCONCEPTION_FEEDBACK_PROPERTY_FORM_SCHEMA = {
+                    type: 'html',
+                    ui_config: {
+                      hide_complex_extensions: true
+                    }
+                  };
+
                   $scope.misconceptionName = '';
                   $scope.misconceptionNotes = '';
                   $scope.misconceptionFeedback = '';

diff --git a/core/templates/dev/head/pages/skill_editor/editor_tab/add_misconception_modal_directive.html b/core/templates/dev/head/pages/skill_editor/editor_tab/add_misconception_modal_directive.html
@@ -41,7 +41,7 @@ <h3>Add Misconception</h3>
         <div>
           <span class="oppia-editor-description">This is the default feedback given to learners when they have this misconception. Question creators may override this feedback.</span>
         </div>
-        <schema-based-editor schema="MISCONCEPTION_PROPERTY_FORM_SCHEMA" local-value="misconceptionFeedback">
+        <schema-based-editor schema="MISCONCEPTION_FEEDBACK_PROPERTY_FORM_SCHEMA" local-value="misconceptionFeedback">
         </schema-based-editor>
       </div>
     </div>

diff --git a/core/templates/dev/head/pages/skill_editor/skill_editor_navbar_directive.html b/core/templates/dev/head/pages/skill_editor/skill_editor_navbar_directive.html
@@ -1,6 +1,48 @@
-<ul class="nav navbar-nav oppia-navbar-nav navbar-right" ng-if="!isLoadingSkill()">
-  <li style="margin-right: 10px; margin-top: 8px;">
-    <button type="button" ng-if="skillRights.isPrivate()"
+<ul class="nav navbar-nav oppia-navbar-nav navbar-right ng-cloak" ng-if="!isLoadingSkill()">
+  <li style="margin-right: 5px; margin-top: 8px;">
+    <div uib-dropdown>
+      <button class="btn btn-default oppia-save-draft-button"
+              ng-class="{'btn-success': isSkillSaveable(), 'save-draft-button-padding': getChangeListCount()}"
+              ng-click="saveChanges()"
+              style="float: left;"
+              ng-disabled="!isSkillSaveable()">
+        <span ng-if="!isSaveInProgress()">
+          <span ng-if="skillRights.isPrivate()">
+            <i class="material-icons md-18 md-dark oppia-save-publish-button-icon" alt="Save Skill">
+              &#xE161;
+            </i>
+            <span class="oppia-save-publish-button-label">Save Draft</span>
+            <span class="hidden-sm hidden-xs" style="opacity:0.5"
+                  ng-if="getChangeListCount() > 0">
+              (<[getChangeListCount()]>)
+            </span>
+          </span>
+          <span ng-if="skillRights.isPublic()" title="Publish Changes">
+            <i class="material-icons md-18 md-dark oppia-save-publish-button-icon"
+               alt="Publish Changes">
+              &#xE2C3;
+            </i>
+            <span class="oppia-save-publish-button-label">Publish Changes</span>
+          </span>
+        </span>
+
+        <span ng-if="isSaveInProgress()">
+          <span ng-if="skillRights.isPrivate()" class="oppia-save-publish-button-label">Saving</span>
+          <span ng-if="skillRights.isPublic()" class="oppia-save-publish-button-label">Publishing</span>
+          <loading-dots></loading-dots>
+        </span>
+      </button>
+      <button type="button" style="height: 34px;" class="btn btn-default uib-dropdown-toggle"
+              ng-disabled="!getChangeListCount()" uib-dropdown-toggle>
+        <span class="caret"></span>
+      </button>
+      <ul uib-dropdown-menu role="menu" style="min-width: 125px; right: inherit;" ng-style="{ width: getChangeListCount() && skillRights.isPublic() ? '150px' : '120px' }">
+        <li title="Discard all pending changes"><a ng-click="discardChanges()" ng-class="{'oppia-disabled-link': !getChangeListCount()}">Discard Draft</a></li>
+      </ul>
+    </div>
+  </li>
+  <li ng-if="skillRights.isPrivate()" style="margin-right: 10px; margin-top: 8px;">
+    <button type="button"
             class="btn btn-default oppia-editor-publish-button protractor-test-editor-publish-button"
             ng-class="{'btn-success': isSkillPublishable()}"
             ng-click="publishSkill()"
@@ -11,37 +53,6 @@
       </i>
       <span class="oppia-save-publish-button-label">Publish</span>
     </button>
-
-    <button class="btn btn-default oppia-save-draft-button protractor-test-save-draft-button"
-            ng-class="{'btn-success': isSkillSaveable()}"
-            ng-click="saveChanges()"
-            ng-disabled="!isSkillSaveable()">
-      <span ng-if="!isSaveInProgress()">
-        <span ng-if="skillRights.isPrivate()">
-          <i class="material-icons md-18 md-dark oppia-save-publish-button-icon" alt="Save Skill">
-            &#xE161;
-          </i>
-          <span class="oppia-save-publish-button-label">Save Draft</span>
-          <span class="hidden-sm hidden-xs" style="opacity:0.5"
-                ng-if="getChangeListCount() > 0">
-            (<[getChangeListCount()]>)
-          </span>
-        </span>
-        <span ng-if="skillRights.isPublic()" title="Publish Changes">
-          <i class="material-icons md-18 md-dark oppia-save-publish-button-icon"
-             alt="Publish Changes">
-            &#xE2C3;
-          </i>
-          <span class="oppia-save-publish-button-label">Publish Changes</span>
-        </span>
-      </span>
-
-      <span ng-if="isSaveInProgress()">
-        <span ng-if="skillRights.isPrivate()" class="oppia-save-publish-button-label">Saving</span>
-        <span ng-if="skillRights.isPublic()" class="oppia-save-publish-button-label">Publishing</span>
-        <loading-dots></loading-dots>
-      </span>
-    </button>
   </li>
   <li style="width: 40px; margin-right: 20px;" class="active" ng-class="{'uib-dropdown': getWarningsCount()}" ng-attr-uib-dropdown="<[getWarningsCount()]>">
     <a href="#" uib-tooltip="Editor" class="protractor-test-main-tab">
@@ -63,3 +74,8 @@
     </ul>
   </li>
 </ul>
+<style>
+  skill-editor-navbar .save-draft-button-padding {
+    padding-right: 120px;
+  }
+</style>