Fix oppia#2039: Allow editors to preview summary tiles (oppia#3069)

* Added mapping from categories to colors to globals.

* Modifyed to work with preview summary tiles.

* Added preview summary tile

* added categories to colors mapping to GLOBALS.

* Changed close button to return to editor button

* Adjusted files according to review comments.

* made changes in response to review comments.

* Changed summary tile to summary card and grayout css to name matching style guide.

* Addressed review comments and added protractor test.

* Fix linting errors

* Fix lint error.

* Fix default thumbnail.

* Addressing review comments.

* Add summary tile to components in exploration editor

* Addressed review comments

* Return null for values which aren't present.

* Code style improvement.

* Refactor preview summary tiles test into open and close preview summary tiles tests.

* Revert tests to previous state and add padding to summary tile when objective not present.

* Fix lint errors.

* Renaming preview summary tile test.

* Renaming preview summary tile test.

* Fixing indentation.

* Removed a script load from base.html.

* Added script load for CollectionSummaryTileDirective.

* Remove unused import.

core/controllers/base.py

@@ -302,7 +302,10 @@ def render_template(
             'BEFORE_END_HEAD_TAG_HOOK': jinja2.utils.Markup(
                 BEFORE_END_HEAD_TAG_HOOK.value),
             'CAN_SEND_ANALYTICS_EVENTS': feconf.CAN_SEND_ANALYTICS_EVENTS,
+            'CATEGORIES_TO_COLORS': feconf.CATEGORIES_TO_COLORS,
             'DEFAULT_LANGUAGE_CODE': feconf.ALL_LANGUAGE_CODES[0]['code'],
+            'DEFAULT_CATEGORY_ICON': feconf.DEFAULT_THUMBNAIL_ICON,
+            'DEFAULT_COLOR': feconf.DEFAULT_COLOR,
             'DEV_MODE': feconf.DEV_MODE,
             'MINIFICATION': feconf.IS_MINIFIED,
             'DOMAIN_URL': '%s://%s' % (scheme, netloc),
@@ -350,6 +353,7 @@ def render_template(
 
         if redirect_url_on_logout is None:
             redirect_url_on_logout = self.request.uri
+
         if self.user_id:
             values['login_url'] = None
             values['logout_url'] = (

core/templates/dev/head/components/summary_tile/ExplorationSummaryTileDirective.js

@@ -107,19 +107,29 @@ oppia.directive('explorationSummaryTile', [function() {
         $scope.MAX_AVATARS_TO_DISPLAY = 5;
 
         $scope.getAverageRating = function() {
+          if (!$scope.getRatings()) {
+            return null;
+          }
           return RatingComputationService.computeAverageRating(
             $scope.getRatings());
         };
 
         $scope.getLastUpdatedDatetime = function() {
+          if (!$scope.getLastUpdatedMsec()) {
+            return null;
+          }
           return oppiaDatetimeFormatter.getLocaleAbbreviatedDatetimeString(
             $scope.getLastUpdatedMsec());
         };
 
         $scope.getExplorationLink = function() {
-          var result = '/explore/' + $scope.getExplorationId();
-          if ($scope.getCollectionId()) {
-            result += ('?collection_id=' + $scope.getCollectionId());
+          if (!$scope.getExplorationId()) {
+            return '#';
+          } else {
+            var result = '/explore/' + $scope.getExplorationId();
+            if ($scope.getCollectionId()) {
+              result += ('?collection_id=' + $scope.getCollectionId());
+            }
           }
           return result;
         };

core/templates/dev/head/components/summary_tile/exploration_summary_tile_directive.html

@@ -20,13 +20,15 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
         </div>
       </div>
       <div class="title-section-mask"></div>
-
       <div ng-attr-section="<[isWindowLarge ? undefined : 'right-section']>">  
         <div ng-if="isWindowLarge" class="objective protractor-test-exp-summary-tile-objective">
           <[getObjective() | truncateAndCapitalize: 95]>
         </div>
-        <span ng-if="!getObjective()" translate="I18N_LIBRARY_NO_OBJECTIVE">
-        </span>
+        <div ng-if="!getObjective()" class="objective">
+          <span translate="I18N_LIBRARY_NO_OBJECTIVE">
+          </span>
+        </div>
+
         <ul layout="row" class="metrics" layout-align="space-between center">
           <li>
             <span class="protractor-test-exp-summary-tile-rating" ng-class="{'rating-disabled': !getAverageRating()}">
@@ -36,24 +38,36 @@ <h3 class="activity-title protractor-test-exp-summary-tile-title">
               <span ng-if="getAverageRating()">
                 <[getAverageRating() | number:1]>
               </span>
-              <span ng-if="!getAverageRating()" translate="I18N_LIBRARY_N/A">
+              <span ng-if="!getAverageRating()" translate="I18N_LIBRARY_N/A" class="oppia-inactive-summary-tile-attribute">
               </span>
             </span>
           </li>
           <li>
             <span class="fa fa-eye fa-lg" tooltip="<['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]>" tooltip-placement="top">
               <span class="oppia-icon-accessibility-label"><['I18N_LIBRARY_VIEWS_TOOLTIP' | translate]></span>
             </span>
-            <[getNumViews() | summarizeNonnegativeNumber]>
+            <span ng-if="getNumViews()">
+              <[getNumViews() | summarizeNonnegativeNumber]>
+            </span>
+            <span ng-if="!getNumViews()" translate="I18N_LIBRARY_N/A" class="oppia-inactive-summary-tile-attribute">
+            </span>
           </li>
           <li>
-            <span>
+            <span ng-if="getLastUpdatedDatetime()">
               <span class="oppia-icon-accessibility-label">Last Updated</span>
               <[getLastUpdatedDatetime()]>
             </span>
+            <span ng-if="!getLastUpdatedDatetime()" translate="I18N_LIBRARY_N/A" class="oppia-inactive-summary-tile-attribute">
+            </span>
           </li>
         </ul>
       </div>
     </a>
   </md-card>
 </script>
+
+<style>
+  .oppia-activity-summary-tile .oppia-inactive-summary-tile-attribute {
+    opacity: 0.5;
+  }
+</style>

core/templates/dev/head/pages/base.html

@@ -88,9 +88,15 @@
           '{{can_create_collections|js_string}}'),
         CAN_SEND_ANALYTICS_EVENTS: JSON.parse(
           '{{CAN_SEND_ANALYTICS_EVENTS|js_string}}'),
+        CATEGORIES_TO_COLORS: JSON.parse(
+          '{{CATEGORIES_TO_COLORS|js_string}}'),
         csrf_token: JSON.parse('{{csrf_token|js_string}}'),
         DEFAULT_LANGUAGE_CODE: JSON.parse(
           '{{DEFAULT_LANGUAGE_CODE|js_string}}'),
+        DEFAULT_CATEGORY_ICON: JSON.parse(
+          '{{DEFAULT_CATEGORY_ICON|js_string}}'),
+        DEFAULT_COLOR: JSON.parse(
+          '{{DEFAULT_COLOR|js_string}}'),
         DEV_MODE: JSON.parse('{{DEV_MODE|js_string}}'),
         INVALID_NAME_CHARS: JSON.parse('{{INVALID_NAME_CHARS|js_string}}'),
         MINIFICATION: JSON.parse('{{MINIFICATION|js_string}}'),

core/templates/dev/head/pages/exploration_editor/exploration_editor.html

@@ -237,6 +237,10 @@
   <script src="{{TEMPLATE_DIR_PREFIX}}/components/StateGraphLayoutService.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/components/VersionDiffVisualizationDirective.js"></script>
 
+  <script src="{{TEMPLATE_DIR_PREFIX}}/components/summary_tile/CircularImageDirective.js"></script>
+  <script src="{{TEMPLATE_DIR_PREFIX}}/components/summary_tile/ExplorationSummaryTileDirective.js"></script>
+  <script src="{{TEMPLATE_DIR_PREFIX}}/components/RatingComputationService.js"></script>
+
   <script src="{{TEMPLATE_DIR_PREFIX}}/services/explorationServices.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/services/messengerService.js"></script>
   <script src="{{TEMPLATE_DIR_PREFIX}}/services/utilsService.js"></script>

core/templates/dev/head/pages/exploration_editor/settings_tab/SettingsTab.js

@@ -26,6 +26,7 @@ oppia.controller('SettingsTab', [
   'explorationParamChangesService', 'explorationWarningsService',
   'explorationAdvancedFeaturesService', 'ALL_CATEGORIES',
   'EXPLORATION_TITLE_INPUT_FOCUS_LABEL', 'UserEmailPreferencesService',
+  'UrlInterpolationService',
   function(
       $scope, $http, $window, $modal, $rootScope,
       explorationData, explorationTitleService, explorationCategoryService,
@@ -35,7 +36,8 @@ oppia.controller('SettingsTab', [
       changeListService, alertsService, explorationStatesService,
       explorationParamChangesService, explorationWarningsService,
       explorationAdvancedFeaturesService, ALL_CATEGORIES,
-      EXPLORATION_TITLE_INPUT_FOCUS_LABEL, UserEmailPreferencesService) {
+      EXPLORATION_TITLE_INPUT_FOCUS_LABEL, UserEmailPreferencesService,
+      UrlInterpolationService) {
     $scope.EXPLORATION_TITLE_INPUT_FOCUS_LABEL = (
       EXPLORATION_TITLE_INPUT_FOCUS_LABEL);
 
@@ -226,6 +228,49 @@ oppia.controller('SettingsTab', [
     /********************************************
     * Methods relating to control buttons.
     ********************************************/
+    $scope.previewSummaryTile = function() {
+      alertsService.clearWarnings();
+      $modal.open({
+        templateUrl: 'modals/previewSummaryTile',
+        backdrop: true,
+        controller: [
+          '$scope', '$modalInstance', function($scope, $modalInstance) {
+            $scope.getExplorationTitle = function() {
+              return explorationTitleService.displayed;
+            };
+            $scope.getExplorationObjective = function() {
+              return explorationObjectiveService.displayed;
+            };
+            $scope.getExplorationCategory = function() {
+              return explorationCategoryService.displayed;
+            };
+            $scope.getThumbnailIconUrl = function() {
+              var category = explorationCategoryService.displayed;
+              if (GLOBALS.ALL_CATEGORIES.indexOf(category) === -1) {
+                category = GLOBALS.DEFAULT_CATEGORY_ICON;
+              }
+              return UrlInterpolationService.getStaticImageUrl(
+                '/subjects/' + category + '.svg');
+            };
+            $scope.getThumbnailBgColor = function() {
+              var category = explorationCategoryService.displayed;
+              if (!GLOBALS.CATEGORIES_TO_COLORS.hasOwnProperty(category)) {
+                var color = GLOBALS.DEFAULT_COLOR;
+              } else {
+                var color = GLOBALS.CATEGORIES_TO_COLORS[category];
+              }
+              return color;
+            };
+
+            $scope.close = function() {
+              $modalInstance.dismiss();
+              alertsService.clearWarnings();
+            };
+          }
+        ]
+      });
+    };
+
     $scope.showTransferExplorationOwnershipModal = function() {
       alertsService.clearWarnings();
       $modal.open({

core/templates/dev/head/pages/exploration_editor/settings_tab/settings_tab.html

@@ -86,6 +86,13 @@ <h3>Basic Settings</h3>
                 </span>
               </div>
             </div>
+            <div class="text-right">
+              <button type="button" class="btn btn-default protractor-test-open-preview-summary-modal"
+                      ng-click="previewSummaryTile()"
+                      title="Preview this exploration's summary card">
+                Preview Summary
+              </button>
+            </div>
           </div>
         </div>
 
@@ -586,3 +593,25 @@ <h3>Delete Exploration</h3>
     <button class="btn btn-danger" ng-click="reallyDelete()">Delete Exploration</button>
   </div>
 </script>
+
+<script type="text/ng-template" id="modals/previewSummaryTile">
+  <div class="modal-header">
+    <h3>Preview Summary Card</h3>
+  </div>
+
+  <div class="modal-body text-center">
+    This is how your activity will appear to learners in search results
+    or the library.
+    <exploration-summary-tile exploration-title="getExplorationTitle()"
+                              objective="getExplorationObjective()"
+                              category="getExplorationCategory()"
+                              thumbnail-icon-url="getThumbnailIconUrl()"
+                              thumbnail-bg-color="getThumbnailBgColor()"
+                              class="protractor-test-exploration-summary-tile">
+    </exploration-summary-tile>
+  </div>
+
+  <div class="modal-footer">
+    <button class="btn btn-default protractor-test-close-preview-summary-modal" ng-click="close()">Return to editor</button>
+  </div>
+</script>

core/tests/protractor/editorAndPlayer.js

@@ -205,6 +205,7 @@ describe('Full exploration editor', function() {
       editor.setTitle('Testing multiple rules');
       editor.setCategory('Answer Groups');
       editor.setObjective('To assess happiness.');
+      editor.openAndClosePreviewSummaryTile();
       editor.saveChanges();
       workflow.publishExploration();
 

core/tests/protractor_utils/editor.js

@@ -1066,6 +1066,19 @@ var enableFallbacks = function() {
   });
 };
 
+var openAndClosePreviewSummaryTile = function() {
+  runFromSettingsTab(function() {
+    element(by.css('.protractor-test-open-preview-summary-modal')).click();
+    general.waitForSystem();
+    expect(element(by.css(
+      '.protractor-test-exploration-summary-tile')).isPresent()).toBeTruthy();
+    element(by.css('.protractor-test-close-preview-summary-modal')).click();
+    general.waitForSystem();
+    expect(element(by.css(
+      '.protractor-test-exploration-summary-tile')).isPresent()).toBeFalsy();
+  });
+};
+
 // CONTROLS
 
 var saveChanges = function(commitMessage) {
@@ -1445,6 +1458,7 @@ exports.setFirstState = setFirstState;
 exports.enableParameters = enableParameters;
 exports.enableGadgets = enableGadgets;
 exports.enableFallbacks = enableFallbacks;
+exports.openAndClosePreviewSummaryTile = openAndClosePreviewSummaryTile;
 
 exports.saveChanges = saveChanges;
 exports.discardChanges = discardChanges;