From c95ba13fec024e2c531b5a23ffd507815b223c65 Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Mon, 16 Sep 2024 11:48:15 +0530
Subject: [PATCH] refactor: move messages related to collections in single file

---
 src/library-authoring/LibraryLayout.tsx       |  4 +-
 .../collections/LibraryCollectionPage.tsx     | 88 ++++++++-----------
 .../collections/LibraryCollections.tsx        |  2 +-
 src/library-authoring/collections/messages.ts | 45 ++++++++++
 src/library-authoring/messages.ts             | 25 ------
 src/search-manager/SearchKeywordsField.tsx    |  6 +-
 6 files changed, 90 insertions(+), 80 deletions(-)

diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
index d97d7f0c22..ad0f446f92 100644
--- a/src/library-authoring/LibraryLayout.tsx
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -13,7 +13,7 @@ import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context';
 import { CreateCollectionModal } from './create-collection';
 import { invalidateComponentData } from './data/apiHooks';
-import LibraryCollectionPageWrapper from './collections/LibraryCollectionPage';
+import LibraryCollectionPage from './collections/LibraryCollectionPage';
 
 const LibraryLayout = () => {
   const { libraryId } = useParams();
@@ -48,7 +48,7 @@ const LibraryLayout = () => {
         />
         <Route
           path="collections/:collectionId"
-          element={<LibraryCollectionPageWrapper />}
+          element={<LibraryCollectionPage />}
         />
         <Route
           path="*"
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
index 8bd23af37f..48bb92e4c4 100644
--- a/src/library-authoring/collections/LibraryCollectionPage.tsx
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -8,7 +8,6 @@ import {
   Container,
   Icon,
   IconButton,
-  Row,
   Stack,
 } from '@openedx/paragon';
 import { Add, InfoOutline } from '@openedx/paragon/icons';
@@ -28,7 +27,7 @@ import {
 } from '../../search-manager';
 import { useCollection, useContentLibrary } from '../data/apiHooks';
 import { LibraryContext } from '../common/context';
-import messages from '../messages';
+import messages from './messages';
 import { LibrarySidebar } from '../library-sidebar';
 import LibraryCollectionComponents from './LibraryCollectionComponents';
 
@@ -91,13 +90,13 @@ const SubHeaderTitle = ({
   );
 };
 
-const LibraryCollectionPage = ({
-  libraryId,
-  collectionId,
-}: {
-  libraryId: string;
-  collectionId: string;
-}) => {
+const LibraryCollectionPage = () => {
+  const { libraryId, collectionId } = useParams();
+
+  if (!collectionId || !libraryId) {
+    throw new Error('Rendered without collectionId or libraryId URL parameter');
+  }
+
   const intl = useIntl();
 
   const {
@@ -147,30 +146,35 @@ const LibraryCollectionPage = ({
           isLibrary
         />
         <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
-          <SubHeader
-            title={<SubHeaderTitle
-              title={collectionData.title}
-              canEditLibrary={libraryData.canEditLibrary}
-              infoClickHandler={openCollectionInfoSidebar}
-            />}
-            breadcrumbs={(
-              <Breadcrumb
-                ariaLabel={intl.formatMessage(messages.allCollections)}
-                links={breadcrumbs}
-                linkAs={Link}
-              />
-            )}
-            headerActions={<HeaderActions canEditLibrary={libraryData.canEditLibrary} />}
-          />
-          <SearchKeywordsField className="w-50" />
-          <div className="d-flex mt-3 mb-4 align-items-center">
-            <FilterByTags />
-            <FilterByBlockType />
-            <ClearFiltersButton />
-            <div className="flex-grow-1" />
-            <SearchSortWidget />
-          </div>
-          <LibraryCollectionComponents libraryId={libraryId} />
+          <SearchContextProvider
+            extraFilter={[`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`]}
+            fetchCollections={false}
+          >
+            <SubHeader
+              title={<SubHeaderTitle
+                title={collectionData.title}
+                canEditLibrary={libraryData.canEditLibrary}
+                infoClickHandler={openCollectionInfoSidebar}
+              />}
+              breadcrumbs={(
+                <Breadcrumb
+                  ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
+                  links={breadcrumbs}
+                  linkAs={Link}
+                />
+              )}
+              headerActions={<HeaderActions canEditLibrary={libraryData.canEditLibrary} />}
+            />
+            <SearchKeywordsField className="w-50" placeholder={intl.formatMessage(messages.searchPlaceholder)} />
+            <div className="d-flex mt-3 mb-4 align-items-center">
+              <FilterByTags />
+              <FilterByBlockType />
+              <ClearFiltersButton />
+              <div className="flex-grow-1" />
+              <SearchSortWidget />
+            </div>
+            <LibraryCollectionComponents libraryId={libraryId} />
+          </SearchContextProvider>
         </Container>
         <StudioFooter />
       </div>
@@ -183,20 +187,4 @@ const LibraryCollectionPage = ({
   );
 };
 
-const LibraryCollectionPageWrapper = () => {
-  const { libraryId, collectionId } = useParams();
-  if (!collectionId || !libraryId) {
-    throw new Error('Rendered without collectionId or libraryId URL parameter');
-  }
-
-  return (
-    <SearchContextProvider
-      extraFilter={[`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`]}
-      fetchCollections={false}
-    >
-      <LibraryCollectionPage libraryId={libraryId} collectionId={collectionId} />
-    </SearchContextProvider>
-  );
-}
-
-export default LibraryCollectionPageWrapper;
+export default LibraryCollectionPage;
diff --git a/src/library-authoring/collections/LibraryCollections.tsx b/src/library-authoring/collections/LibraryCollections.tsx
index 917da2e6a8..4a29ce23fa 100644
--- a/src/library-authoring/collections/LibraryCollections.tsx
+++ b/src/library-authoring/collections/LibraryCollections.tsx
@@ -6,7 +6,7 @@ import { useSearchContext } from '../../search-manager';
 import { NoComponents, NoSearchResults } from '../EmptyStates';
 import CollectionCard from '../components/CollectionCard';
 import { LIBRARY_SECTION_PREVIEW_LIMIT } from '../components/LibrarySection';
-import messages from '../messages';
+import messages from './messages';
 import { LibraryContext } from '../common/context';
 
 type LibraryCollectionsProps = {
diff --git a/src/library-authoring/collections/messages.ts b/src/library-authoring/collections/messages.ts
index 74eb334dfd..0f260f7033 100644
--- a/src/library-authoring/collections/messages.ts
+++ b/src/library-authoring/collections/messages.ts
@@ -26,6 +26,51 @@ const messages = defineMessages({
     defaultMessage: 'No matching components found in this collections.',
     description: 'Message displayed when no matching components are found in collection',
   },
+  newContentButton: {
+    id: 'course-authoring.library-authoring.collections.buttons.new-content.text',
+    defaultMessage: 'New',
+    description: 'Text of button to open "Add content drawer" in collections page',
+  },
+  collectionInfoButton: {
+    id: 'course-authoring.library-authoring.buttons.collection-info.alt-text',
+    defaultMessage: 'Collection Info',
+    description: 'Alt text for collection info button besides the collection title',
+  },
+  readOnlyBadge: {
+    id: 'course-authoring.library-authoring.collections.badge.read-only',
+    defaultMessage: 'Read Only',
+    description: 'Text in badge when the user has read only access in collections page',
+  },
+  allCollections: {
+    id: 'course-authoring.library-authoring.all-collections.text',
+    defaultMessage: 'All Collections',
+    description: 'Breadcrumbs text to navigate back to all collections',
+  },
+  breadcrumbsAriaLabel: {
+    id: 'course-authoring.library-authoring.breadcrumbs.label.text',
+    defaultMessage: 'Navigation breadcrumbs',
+    description: 'Aria label for navigation breadcrumbs',
+  },
+  searchPlaceholder: {
+    id: 'course-authoring.library-authoring.search.placeholder.text',
+    defaultMessage: 'Search Collection',
+    description: 'Search placeholder text in collections page.',
+  },
+  noSearchResultsCollections: {
+    id: 'course-authoring.library-authoring.no-search-results-collections',
+    defaultMessage: 'No matching collections found in this library.',
+    description: 'Message displayed when no matching collections are found',
+  },
+  noCollections: {
+    id: 'course-authoring.library-authoring.no-collections',
+    defaultMessage: 'You have not added any collection to this library yet.',
+    description: 'Message displayed when the library has no collections',
+  },
+  addCollection: {
+    id: 'course-authoring.library-authoring.add-collection',
+    defaultMessage: 'Add collection',
+    description: 'Button text to add a new collection',
+  },
 });
 
 export default messages;
diff --git a/src/library-authoring/messages.ts b/src/library-authoring/messages.ts
index 8da572a824..0f9bdfbd5b 100644
--- a/src/library-authoring/messages.ts
+++ b/src/library-authoring/messages.ts
@@ -6,11 +6,6 @@ const messages = defineMessages({
     defaultMessage: 'Content library',
     description: 'The page heading for the library page.',
   },
-  allCollections: {
-    id: 'course-authoring.library-authoring.all-collections',
-    defaultMessage: 'All Collections',
-    description: 'Breadcrumbs text to navigate back to all collections',
-  },
   headingInfoAlt: {
     id: 'course-authoring.library-authoring.heading-info-alt',
     defaultMessage: 'Info',
@@ -26,31 +21,16 @@ const messages = defineMessages({
     defaultMessage: 'No matching components found in this library.',
     description: 'Message displayed when no search results are found',
   },
-  noSearchResultsCollections: {
-    id: 'course-authoring.library-authoring.no-search-results-collections',
-    defaultMessage: 'No matching collections found in this library.',
-    description: 'Message displayed when no matching collections are found',
-  },
   noComponents: {
     id: 'course-authoring.library-authoring.no-components',
     defaultMessage: 'You have not added any content to this library yet.',
     description: 'Message displayed when the library is empty',
   },
-  noCollections: {
-    id: 'course-authoring.library-authoring.no-collections',
-    defaultMessage: 'You have not added any collection to this library yet.',
-    description: 'Message displayed when the library has no collections',
-  },
   addComponent: {
     id: 'course-authoring.library-authoring.add-component',
     defaultMessage: 'Add component',
     description: 'Button text to add a new component',
   },
-  addCollection: {
-    id: 'course-authoring.library-authoring.add-collection',
-    defaultMessage: 'Add collection',
-    description: 'Button text to add a new collection',
-  },
   homeTab: {
     id: 'course-authoring.library-authoring.home-tab',
     defaultMessage: 'Home',
@@ -121,11 +101,6 @@ const messages = defineMessages({
     defaultMessage: 'Library Info',
     description: 'Text of button to open "Library Info sidebar"',
   },
-  collectionInfoButton: {
-    id: 'course-authoring.library-authoring.buttons.collection-info.alt-text',
-    defaultMessage: 'Collection Info',
-    description: 'Alt text for collection info button besides the collection title',
-  },
   readOnlyBadge: {
     id: 'course-authoring.library-authoring.badge.read-only',
     defaultMessage: 'Read Only',
diff --git a/src/search-manager/SearchKeywordsField.tsx b/src/search-manager/SearchKeywordsField.tsx
index 953cd7799d..54d9ca83ae 100644
--- a/src/search-manager/SearchKeywordsField.tsx
+++ b/src/search-manager/SearchKeywordsField.tsx
@@ -7,7 +7,7 @@ import { useSearchContext } from './SearchManager';
 /**
  * The "main" input field where users type in search keywords. The search happens as they type (no need to press enter).
  */
-const SearchKeywordsField: React.FC<{ className?: string }> = (props) => {
+const SearchKeywordsField: React.FC<{ className?: string, placeholder?: string }> = (props) => {
   const intl = useIntl();
   const { searchKeywords, setSearchKeywords } = useSearchContext();
 
@@ -22,7 +22,9 @@ const SearchKeywordsField: React.FC<{ className?: string }> = (props) => {
       <SearchField.Label />
       <SearchField.Input
         autoFocus
-        placeholder={intl.formatMessage(messages.inputPlaceholder)}
+        placeholder={props.placeholder ? props.placeholder : intl.formatMessage(
+          messages.inputPlaceholder
+        )}
       />
       <SearchField.ClearButton />
       <SearchField.SubmitButton />