diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts index ce2fbb43d0..9958c3b6be 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts @@ -1,18 +1,7 @@ -import { ComponentType } from "@opensystemslab/planx-core/types"; import { useStore } from "pages/FlowEditor/lib/store"; -import { - mockAnswerResult, - mockCalculateFormulaResult, - mockCalculateRootResult, - mockFileUploadAndLabelResult, - mockFlow, - mockListAnswerResult, - mockListDataResult, - mockListRootResult, - mockQuestionResult, -} from "../mocks/DataDisplayMap"; -import { getDisplayDetailsForResult } from "./DataDisplayMap"; +import { mockFlow } from "../mocks/getDisplayDetailsForResult"; +import { getDisplayDetailsForResult } from "./getDisplayDetailsForResult"; type Output = ReturnType; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/dataFacets.test.ts b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/dataFacets.test.ts index d8e07894e3..217a7d3799 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/dataFacets.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/dataFacets.test.ts @@ -11,8 +11,8 @@ import { mockListDataResult, mockListRootResult, mockQuestionResult, -} from "../mocks/DataDisplayMap"; -import { getDisplayDetailsForResult } from "./DataDisplayMap"; +} from "../mocks/getDisplayDetailsForResult"; +import { getDisplayDetailsForResult } from "./getDisplayDetailsForResult"; type Output = ReturnType; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/getDisplayDetailsForResult.tsx similarity index 87% rename from editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx rename to editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/getDisplayDetailsForResult.tsx index c1aad3407a..0f90255573 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/getDisplayDetailsForResult.tsx @@ -15,7 +15,10 @@ import { capitalize, get } from "lodash"; import { SLUGS } from "pages/FlowEditor/data/types"; import { useStore } from "pages/FlowEditor/lib/store"; -interface DataDisplayValues { +/** + * Functions to map a search result to the fields required by SearchResultCard + */ +interface SearchResultFormatter { getDisplayKey: (result: SearchResult) => string; getIconKey: (result: SearchResult) => ComponentType; getTitle: (result: SearchResult) => string; @@ -23,21 +26,13 @@ interface DataDisplayValues { getComponentType: (result: SearchResult) => string; } -/** - * Map of data keys to their associated display values - * Uses Partial as not all values are unique, we later apply defaults - */ -type DataKeyMap = Record>; +type KeyMap = Record>; -/** - * Map of ComponentTypes to their associated data keys - */ -type ComponentMap = Record>; +type ComponentMap = Partial< + Record> +>; -/** - * Map of ComponentTypes which need specific overrides in order to display their data values - */ -const KEY_DATA: Partial = { +const keyFormatters: KeyMap = { "data.fn": { getDisplayKey: () => "Data", }, @@ -234,9 +229,10 @@ const KEY_DATA: Partial = { }, }; -const COMPONENT_DATA: Partial = { +const componentFormatters: ComponentMap = { // Answers are mapped to their parent questions [ComponentType.Answer]: { + getDisplayKey: () => "Option (title)", getIconKey: () => ComponentType.Question, getTitle: ({ item }) => { const parentNode = useStore.getState().flow[item.parentId]; @@ -246,34 +242,36 @@ const COMPONENT_DATA: Partial = { }; /** - * Default values for all ComponentTypes not listed in DISPLAY_DATA + * Default formatters for any fields not already covered by key or component-specific formatters */ -const DEFAULT_DATA: DataDisplayValues = { - getDisplayKey: ({ item }) => - item.type === ComponentType.Question ? "Option (title)" : "Title", +const defaultFormatter: SearchResultFormatter = { + getDisplayKey: () => "Title", getIconKey: ({ item }) => item.type, getTitle: ({ item }) => (item.data?.title as string) || (item.data?.text as string) || "", - // TODO: strip html? getHeadline: ({ item, key }) => get(item, key)?.toString() || "", getComponentType: ({ item }) => capitalize(SLUGS[item.type].replaceAll("-", " ")), }; +/** + * Formats a search result for display in the SearchResultCard + * The values are combined in order of precedence: key-specific, component-specific, then defaults + */ export const getDisplayDetailsForResult = ( result: SearchResult, ) => { - const data: DataDisplayValues = { - ...DEFAULT_DATA, - ...COMPONENT_DATA[result.item.type], - ...KEY_DATA[result.key], + const formatter: SearchResultFormatter = { + ...defaultFormatter, + ...componentFormatters[result.item.type], + ...keyFormatters[result.key], }; return { - iconKey: data.getIconKey(result), - componentType: data.getComponentType(result), - title: data.getTitle(result), - key: data.getDisplayKey(result), - headline: data.getHeadline(result), + iconKey: formatter.getIconKey(result), + componentType: formatter.getComponentType(result), + title: formatter.getTitle(result), + key: formatter.getDisplayKey(result), + headline: formatter.getHeadline(result), }; }; diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx index 13f1cbfca0..bece50805c 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/index.tsx @@ -12,7 +12,7 @@ import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import { DATA_FACETS } from "../facets"; import { Headline } from "../Headline"; -import { getDisplayDetailsForResult } from "./DataDisplayMap"; +import { getDisplayDetailsForResult } from "./getDisplayDetailsForResult"; const SearchResultCardRoot = styled(ListItemButton, { shouldForwardProp: (prop) => prop !== "portalId", diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/DataDisplayMap.ts b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/getDisplayDetailsForResult.ts similarity index 100% rename from editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/DataDisplayMap.ts rename to editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/mocks/getDisplayDetailsForResult.ts