fix(app-headless-cms): add dynamic search placeholder to content entries list (#4682)

Author: leopuleo

packages/app-aco/src/components/Search/Search.tsx

@@ -5,13 +5,14 @@ import { SearchWrapper } from "./styled";
 
 interface SearchProps {
     value: string;
+    placeholder: string;
     onChange: (value: string) => void;
 }
 
-export const Search = ({ value, onChange }: SearchProps) => {
+export const Search = ({ value, placeholder, onChange }: SearchProps) => {
     return (
         <SearchWrapper>
-            <SearchUI value={value} onChange={onChange} />
+            <SearchUI value={value} inputPlaceholder={placeholder} onChange={onChange} />
         </SearchWrapper>
     );
 };

packages/app-aco/src/contexts/acoList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect } from "react";
+import React, { useCallback, useContext, useEffect, useMemo } from "react";
 import dotPropImmutable from "dot-prop-immutable";
 import pick from "lodash/pick";
 import { useStateIfMounted } from "@webiny/app-admin";
@@ -23,6 +23,7 @@ import { sortTableItems, validateOrGetDefaultDbSort } from "~/sorting";
 import { ROOT_FOLDER } from "~/constants";
 
 export interface AcoListContextData<T> {
+    currentFolder?: FolderItem;
     folders: FolderItem[];
     hideFilters: () => void;
     isListLoading: boolean;
@@ -389,6 +390,10 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
         state.folderId
     ]);
 
+    const currentFolder = useMemo(() => {
+        return originalFolders?.find(folder => folder.id === currentFolderId);
+    }, [originalFolders, currentFolderId]);
+
     const context: AcoListContextData<GenericSearchData> = {
         ...pick(state, [
             "isSearch",
@@ -399,6 +404,7 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) =>
             "isSelectedAll"
         ]),
         folders,
+        currentFolder,
         records,
         listTitle,
         isListLoading: Boolean(

packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx

@@ -12,6 +12,7 @@ interface HeaderProps {
     onCreateEntry: (event?: React.SyntheticEvent) => void;
     onCreateFolder: (event?: React.SyntheticEvent) => void;
     searchValue: string;
+    searchPlaceholder: string;
     onSearchChange: (value: string) => void;
 }
 
@@ -23,6 +24,7 @@ export const Header = (props: HeaderProps) => {
         onCreateFolder,
         title,
         searchValue,
+        searchPlaceholder,
         onSearchChange
     } = props;
 
@@ -33,7 +35,11 @@ export const Header = (props: HeaderProps) => {
             </TitleColumn>
             <ActionsColumn>
                 <WrapperActions>
-                    <Search value={searchValue} onChange={onSearchChange} />
+                    <Search
+                        value={searchValue}
+                        placeholder={searchPlaceholder}
+                        onChange={onSearchChange}
+                    />
                     <ButtonFilters />
                     <ButtonsCreate
                         canCreateFolder={canCreateFolder}

packages/app-headless-cms/src/admin/views/contentEntries/Table/Main.tsx

@@ -92,6 +92,7 @@ export const Main = ({ folderId: initialFolderId }: MainProps) => {
                     onCreateEntry={createEntry}
                     onCreateFolder={onCreateFolder}
                     searchValue={list.search}
+                    searchPlaceholder={list.searchPlaceholder}
                     onSearchChange={list.setSearch}
                 />
                 <BulkActions />

packages/app-headless-cms/src/admin/views/contentEntries/hooks/useContentEntriesList.tsx

@@ -54,6 +54,7 @@ export interface ContentEntriesListProviderContext {
     isSelectedAll: boolean;
     getWhere: () => Record<string, any>;
     searchQuery: string;
+    searchPlaceholder: string;
 }
 
 export const ContentEntriesListContext = React.createContext<
@@ -71,6 +72,7 @@ export const ContentEntriesListProvider = ({ children }: ContentEntriesListProvi
 
     const {
         folders: initialFolders,
+        currentFolder,
         isListLoading,
         isListLoadingMore,
         isSearch,
@@ -185,6 +187,18 @@ export const ContentEntriesListProvider = ({ children }: ContentEntriesListProvi
         [currentFolderId, baseUrl]
     );
 
+    const searchPlaceholder = useMemo(() => {
+        if (!currentFolder) {
+            return "Search...";
+        }
+
+        if (currentFolder.id === ROOT_FOLDER) {
+            return `Search all ${contentModel.pluralApiName}`;
+        }
+
+        return `Search in "${currentFolder.title}"`;
+    }, [currentFolder, contentModel]);
+
     const context: ContentEntriesListProviderContext = {
         modelId: contentModel.modelId,
         folderId: currentFolderId || ROOT_FOLDER,
@@ -200,6 +214,7 @@ export const ContentEntriesListProvider = ({ children }: ContentEntriesListProvi
         onSelectRow,
         records,
         search,
+        searchPlaceholder,
         selected,
         setSelected,
         setSearch,