Add tutorial filters and tags, and fix translated search in libraries

Author: paulkaplan

src/components/library/library.jsx

@@ -98,7 +98,10 @@ class LibraryComponent extends React.Component {
                 (dataItem.tags || [])
                     // Second argument to map sets `this`
                     .map(String.prototype.toLowerCase.call, String.prototype.toLowerCase)
-                    .concat(dataItem.name.toLowerCase())
+                    .concat((typeof dataItem.name === 'string' ?
+                        // Use the name if it is a string, else use formatMessage to get the translated name
+                        dataItem.name : this.props.intl.formatMessage(dataItem.name.props)
+                    ).toLowerCase())
                     .join('\n') // unlikely to partially match newlines
                     .indexOf(this.state.filterQuery.toLowerCase()) !== -1
             ));

src/containers/tips-library.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {injectIntl, intlShape, defineMessages} from 'react-intl';
 
 import decksLibraryContent from '../lib/libraries/decks/index.jsx';
+import tutorialTags from '../lib/libraries/tutorial-tags';
 
 import analytics from '../lib/analytics';
 import LibraryComponent from '../components/library/library.jsx';
@@ -46,15 +47,17 @@ class TipsLibrary extends React.PureComponent {
             rawURL: decksLibraryContent[id].img,
             id: id,
             name: decksLibraryContent[id].name,
-            featured: true
+            featured: true,
+            tags: decksLibraryContent[id].tags
         }));
 
         if (!this.props.visible) return null;
         return (
             <LibraryComponent
+                filterable
                 data={decksLibraryThumbnailData}
-                filterable={false}
                 id="tipsLibrary"
+                tags={tutorialTags}
                 title={this.props.intl.formatMessage(messages.tipsLibraryTitle)}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}

src/lib/libraries/decks/index.jsx

@@ -71,7 +71,7 @@ export default {
                 id="gui.howtos.intro-move-sayhello-hat.name"
             />
         ),
-
+        tags: ['help', 'stuck', 'how', 'can', 'say'],
         img: libraryIntro,
         steps: [{
             video: 'intro-move-sayhello'
@@ -111,6 +111,7 @@ export default {
             />
         ),
         img: libraryAnimate,
+        tags: ['animation', 'art', 'spin', 'grow'],
         steps: [{
             video: 'animate-a-name'
         }, {
@@ -185,6 +186,7 @@ export default {
             />
         ),
         img: libraryMakeMusic,
+        tags: ['music', 'sound', 'instrument', 'play', 'song', 'band'],
         steps: [{
             video: 'Make-Music'
         },
@@ -253,6 +255,7 @@ export default {
             />
         ),
         img: libraryMakeAGame,
+        tags: ['games', 'click', 'clicked', 'score'],
         steps: [{
             video: 'Make-A-Game'
         },
@@ -339,6 +342,7 @@ export default {
             />
         ),
         img: libraryChaseGame,
+        tags: ['games', 'arrow', 'keyboard', 'score'],
         steps: [{
             video: 'Chase-Game'
         },
@@ -441,6 +445,7 @@ export default {
             />
         ),
         img: libraryAddSprite,
+        tags: ['art', 'games', 'stories', 'character'],
         steps: [
             {
                 title: (
@@ -470,6 +475,7 @@ export default {
             />
         ),
         img: addBackdropThumb,
+        tags: ['art', 'games', 'stories', 'background'],
         steps: [{
             video: 'add-a-backdrop'
         }, {
@@ -489,6 +495,7 @@ export default {
             />
         ),
         img: changeSizeThumb,
+        scale: ['art', 'animation', 'scale'],
         steps: [{
             video: 'change-size'
         }, {
@@ -508,6 +515,7 @@ export default {
             />
         ),
         img: glideAroundThumb,
+        tags: ['animation', 'stories', 'music', 'instrument', 'play', 'song', 'band'],
         steps: [{
             video: 'glide-around'
         }, {
@@ -527,6 +535,7 @@ export default {
                 id="gui.howtos.record-a-sound.name"
             />
         ),
+        tags: ['music', 'games', 'stories'],
         img: recordASound,
         steps: [{
             video: 'record-a-sound'
@@ -547,6 +556,7 @@ export default {
             />
         ),
         img: spinThumb,
+        tags: ['animation', 'rotate', 'rotation'],
         steps: [{
             video: 'spin-video'
         }, {
@@ -566,6 +576,7 @@ export default {
             />
         ),
         img: hideAndShowThumb,
+        tags: ['stories', 'appear', 'disappear'],
         steps: [{
             video: 'hide-and-show'
         }, {
@@ -586,6 +597,7 @@ export default {
             />
         ),
         img: switchCostumeThumb,
+        tags: ['animation', 'art', 'games', 'stories', 'paint', 'edit', 'change', 'character', 'sprite'],
         steps: [{
             video: 'switch-costume'
         }, {
@@ -606,6 +618,7 @@ export default {
             />
         ),
         img: moveArrowKeysThumb,
+        tags: ['games', 'keyboard'],
         steps: [{
             video: 'move-around-with-arrow-keys'
         }, {
@@ -624,6 +637,8 @@ export default {
                 id="gui.howtos.add-effects.name"
             />
         ),
+        tags: ['animation', 'art', 'games', 'stories', '8-bit', 'brightness', 'ghost', 'transparency', 'opacity',
+            'fx', 'color', 'fisheye', 'whirl', 'twist', 'pixelate', 'mosaic', '8bit'],
         img: addEffectsThumb,
         steps: [{
             video: 'add-effects'

src/lib/libraries/tag-messages.js

@@ -100,5 +100,25 @@ export default defineMessages({
         defaultMessage: 'Wacky',
         description: 'Tag for filtering a library for wacky',
         id: 'gui.libraryTags.wacky'
+    },
+    animation: {
+        defaultMessage: 'Animation',
+        description: 'Tag for filtering a library for animation',
+        id: 'gui.libraryTags.animation'
+    },
+    art: {
+        defaultMessage: 'Art',
+        description: 'Tag for filtering a library for art',
+        id: 'gui.libraryTags.art'
+    },
+    games: {
+        defaultMessage: 'Games',
+        description: 'Tag for filtering a library for games',
+        id: 'gui.libraryTags.games'
+    },
+    stories: {
+        defaultMessage: 'Stories',
+        description: 'Tag for filtering a library for stories',
+        id: 'gui.libraryTags.stories'
     }
 });

src/lib/libraries/tutorial-tags.js

@@ -0,0 +1,8 @@
+import messages from './tag-messages.js';
+export default [
+    {tag: 'animation', intlLabel: messages.animation},
+    {tag: 'art', intlLabel: messages.art},
+    {tag: 'music', intlLabel: messages.music},
+    {tag: 'games', intlLabel: messages.games},
+    {tag: 'stories', intlLabel: messages.stories}
+];