diff --git a/packages/app-aco/src/components/Search/Search.tsx b/packages/app-aco/src/components/Search/Search.tsx index e117b8571cc..d2d608fc409 100644 --- a/packages/app-aco/src/components/Search/Search.tsx +++ b/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 ( - + ); }; diff --git a/packages/app-aco/src/contexts/acoList.tsx b/packages/app-aco/src/contexts/acoList.tsx index f59df0470ea..5230d678cbb 100644 --- a/packages/app-aco/src/contexts/acoList.tsx +++ b/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 { + 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 = { ...pick(state, [ "isSearch", @@ -399,6 +404,7 @@ export const AcoListProvider = ({ children, ...props }: AcoListProviderProps) => "isSelectedAll" ]), folders, + currentFolder, records, listTitle, isListLoading: Boolean( diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx index 1583583ea4a..4673fb6533e 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntries/Header/Header.tsx +++ b/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) => { - + { onCreateEntry={createEntry} onCreateFolder={onCreateFolder} searchValue={list.search} + searchPlaceholder={list.searchPlaceholder} onSearchChange={list.setSearch} /> diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/hooks/useContentEntriesList.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/hooks/useContentEntriesList.tsx index c9139355ff6..8ee64ffa39f 100644 --- a/packages/app-headless-cms/src/admin/views/contentEntries/hooks/useContentEntriesList.tsx +++ b/packages/app-headless-cms/src/admin/views/contentEntries/hooks/useContentEntriesList.tsx @@ -54,6 +54,7 @@ export interface ContentEntriesListProviderContext { isSelectedAll: boolean; getWhere: () => Record; 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,