ucfopen#2000 Adding placeholder text to the module library when no mo…

…dules match a filter.

packages/app/obojobo-repository/client/css/_defaults.scss

@@ -12,6 +12,7 @@ $color-dangerous-minor: desaturate($color-dangerous, 20%);
 $color-text: #000000;
 $color-text-minor: lighten($color-text, 40%);
 $color-text-subheading: #a20e83;
+$color-text-placeholder: #aaaaaa;
 $color-bg: #ffffff;
 $color-bg-overlay: rgba(200, 200, 200, 0.9);
 $color-shadow: rgba(0, 0, 0, 0.3);

packages/app/obojobo-repository/shared/components/dashboard.scss

@@ -1,8 +1,6 @@
 @import '../../client/css/defaults';
 
 #dashboard-root {
-	$placeholder-text-color: #aaaaaa;
-
 	.repository--main-content--control-bar {
 		display: flex;
 		justify-content: space-between;
@@ -87,7 +85,7 @@
 		margin: 0 auto;
 
 		.repository--item-list--collection--empty-placeholder--text {
-			color: $placeholder-text-color;
+			color: $color-text-placeholder;
 			margin-right: 2em;
 		}
 	}

packages/app/obojobo-repository/shared/components/pages/page-library.jsx

@@ -15,32 +15,45 @@ const title = 'Module Library'
 const PageLibrary = props => {
 	const [filterString, setFilterString] = React.useState('')
 
-	const filteredDisplay = props.collections.map(collection => {
-		const visibleModulesInCollection = filterModules(collection.drafts, filterString, false)
-		const modulesInCollectionRender = visibleModulesInCollection.map(draft => (
-			<Module key={draft.draftId} {...draft}></Module>
-		))
+	let filteredDisplay = props.collections
+		.map(collection => {
+			const visibleModulesInCollection = filterModules(collection.drafts, filterString, false)
+			const modulesInCollectionRender = visibleModulesInCollection.map(draft => (
+				<Module key={draft.draftId} {...draft}></Module>
+			))
 
-		if (visibleModulesInCollection.length) {
-			return (
-				<span key={collection.id}>
-					<div className="repository--main-content--title">
-						<span>{collection.title}</span>
-					</div>
-					<div className="repository--item-list--collection">
-						<div className="repository--item-list--collection--item-wrapper">
-							<div className="repository--item-list--row">
-								<div className="repository--item-list--collection--item--multi-wrapper">
-									{modulesInCollectionRender}
+			if (visibleModulesInCollection.length) {
+				return (
+					<span
+						key={collection.id}
+						className="repository--main-content--item-list--collection-wrapper"
+					>
+						<div className="repository--main-content--title">
+							<span>{collection.title}</span>
+						</div>
+						<div className="repository--item-list--collection">
+							<div className="repository--item-list--collection--item-wrapper">
+								<div className="repository--item-list--row">
+									<div className="repository--item-list--collection--item--multi-wrapper">
+										{modulesInCollectionRender}
+									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-				</span>
-			)
-		}
-		return null
-	})
+					</span>
+				)
+			}
+			return null
+		})
+		.filter(c => c !== null)
+
+	if (!filteredDisplay.length) {
+		filteredDisplay = (
+			<span className="repository--main-content--no-filter-results-text">
+				No modules found matching provided filter!
+			</span>
+		)
+	}
 
 	return (
 		<LayoutDefault

packages/app/obojobo-repository/shared/components/pages/page-library.scss

@@ -1,4 +1,14 @@
+/* stylelint-disable */
+@import '../../../client/css/defaults';
+
 // reduce a larger font-size set on an ancestor in the library page
 .repository--nav--links--search {
 	font-size: 0.9em;
 }
+
+.repository--main-content--no-filter-results-text {
+	display: block;
+	margin: 1em auto;
+	color: $color-text-placeholder;
+	text-align: center;
+}

packages/app/obojobo-repository/shared/components/pages/page-library.test.js

@@ -18,7 +18,12 @@ describe('PageLibrary', () => {
 		const component = shallow(<PageLibrary currentUser={mockCurrentUser} />)
 
 		const mainContentChild = component.find('.repository--main-content')
-		expect(mainContentChild.find('span').length).toBe(0)
+		expect(
+			mainContentChild.find('.repository--main-content--item-list--collection-wrapper').length
+		).toBe(0)
+		expect(mainContentChild.find('.repository--main-content--no-filter-results-text').length).toBe(
+			1
+		)
 	})
 
 	test('renders correctly when collections are provided but contain no drafts', () => {
@@ -39,8 +44,15 @@ describe('PageLibrary', () => {
 			<PageLibrary currentUser={mockCurrentUser} collections={mockCollections} />
 		)
 
+		const mainContentChild = component.find('.repository--main-content')
 		const mainContentSpans = component.find('.repository--main-content > span')
-		expect(mainContentSpans.length).toBe(0)
+		expect(mainContentSpans.length).toBe(1)
+		expect(
+			mainContentChild.find('.repository--main-content--item-list--collection-wrapper').length
+		).toBe(0)
+		expect(mainContentChild.find('.repository--main-content--no-filter-results-text').length).toBe(
+			1
+		)
 	})
 
 	test('renders correctly when collections are provided and contain drafts', () => {