feat(search): Strip HTML tags from search results

editor.planx.uk/src/hooks/useSearch.ts

@@ -7,9 +7,15 @@ interface UseSearchProps<T extends object> {
 }
 
 export interface SearchResult<T extends object> {
+  /** Original indexed item */
   item: T;
+  /** Key used to locate value to search against */
   key: string;
+  /** Indices within searched string that match search term */
   matchIndices: [number, number][];
+  /** String matched against - does not necessarily equate to item[key] */
+  matchValue: string;
+  /** Index within flattened array of item[key] */
   refIndex: number;
 }
 
@@ -27,6 +33,7 @@ export const useSearch = <T extends object>({
       useExtendedSearch: true,
       includeMatches: true,
       minMatchCharLength: 3,
+      ignoreLocation: true,
       keys,
     }),
     [keys],
@@ -49,6 +56,7 @@ export const useSearch = <T extends object>({
           key: result.matches?.[0].key || "",
           // We only display the first match
           matchIndices: result.matches[0].indices as [number, number][],
+          matchValue: result.matches[0].value!,
           refIndex: result.matches[0]?.refIndex || 0,
         };
       }),

editor.planx.uk/src/lib/featureFlags.ts

@@ -1,5 +1,5 @@
 // add/edit/remove feature flags in array below
-const AVAILABLE_FEATURE_FLAGS = ["DATA_ONLY_SEARCH"] as const;
+const AVAILABLE_FEATURE_FLAGS = [] as const;
 
 type FeatureFlag = (typeof AVAILABLE_FEATURE_FLAGS)[number];
 

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/Headline.tsx

@@ -5,7 +5,7 @@ import { FONT_WEIGHT_BOLD } from "theme";
 interface Props {
   text: string;
   matchIndices: [number, number][];
-  variant: "data";
+  variant?: "data";
 }
 
 export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
@@ -18,7 +18,7 @@ export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
         <>
           <Typography
             component="span"
-            variant={variant}
+            variant={variant || "body2"}
             key={`headline-character-${index}`}
             sx={(theme) => ({
               fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchHeader.tsx

@@ -1,7 +1,6 @@
 import Box from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Typography from "@mui/material/Typography";
-import { hasFeatureFlag } from "lib/featureFlags";
 import React, { useEffect } from "react";
 import { Components } from "react-virtuoso";
 import ChecklistItem from "ui/shared/ChecklistItem";
@@ -66,24 +65,13 @@ export const SearchHeader: Components<Data, Context>["Header"] = ({
           />
         )}
       </Box>
-      {hasFeatureFlag("DATA_ONLY_SEARCH") ? (
-        <ChecklistItem
-          label="Search only data fields"
-          id={"search-data-field-facet"}
-          checked={isCurrentlyDataOnlySearch()}
-          onChange={toggleDataOnly}
-          variant="compact"
-        />
-      ) : (
-        <ChecklistItem
-          label="Search only data fields"
-          id={"search-data-field-facet"}
-          inputProps={{ disabled: true }}
-          checked={true}
-          onChange={toggleDataOnly}
-          variant="compact"
-        />
-      )}
+      <ChecklistItem
+        label="Search only data fields"
+        id={"search-data-field-facet"}
+        checked={isCurrentlyDataOnlySearch()}
+        onChange={toggleDataOnly}
+        variant="compact"
+      />
       {formik.values.pattern && (
         <Typography variant="h3" mt={2} mb={1}>
           {context?.results.length === 0 && "No matches found"}

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/allFacets.test.ts

@@ -0,0 +1,99 @@
+import { useStore } from "pages/FlowEditor/lib/store";
+
+import { mockFlow } from "../mocks/getDisplayDetailsForResult";
+import { getDisplayDetailsForResult } from "./getDisplayDetailsForResult";
+
+type Output = ReturnType<typeof getDisplayDetailsForResult>;
+
+// Setup flow so that it can be referenced by SearchResults (e.g. getting parent nodes)
+beforeAll(() => useStore.setState({ flow: mockFlow }));
+
+describe("Basic fields", () => {
+  it.todo("renders data.text");
+  it.todo("renders data.title");
+  it.todo("renders data.description");
+});
+
+describe("More information fields", () => {
+  it.todo("renders data.notes");
+  it.todo("renders data.howMeasured");
+  it.todo("renders data.policyRef");
+  it.todo("renders data.info");
+});
+
+describe("checklist fields", () => {
+  it.todo("renders data.categories.title");
+});
+
+describe("nextSteps fields", () => {
+  it.todo("renders data.steps.title");
+  it.todo("renders data.steps.description");
+  it.todo("renders data.steps.url");
+});
+
+describe("fileUploadAndLabel fields", () => {
+  it.todo("renders data.fileTypes.name");
+  it.todo("renders data.fileTypes.moreInformation.notes");
+  it.todo("renders data.fileTypes.moreInformation.howMeasured");
+  it.todo("renders data.fileTypes.moreInformation.policyRef");
+  it.todo("renders data.fileTypes.moreInformation.info");
+});
+
+describe("schemaComponents fields", () => {
+  it.todo("renders data.schema.fields.data.title");
+  it.todo("renders data.schema.fields.data.description");
+  it.todo("renders data.schema.fields.data.options.data.description");
+  it.todo("renders data.schema.fields.data.options.text");
+});
+
+describe("taskList fields", () => {
+  it.todo("renders data.tasks.title");
+  it.todo("renders data.tasks.description");
+});
+
+// TODO: Flag tests
+// const result: SearchFacets = [
+//   ...flatFlags.flatMap(({ value }) => [
+//     `data.overrides.${value}.heading`,
+//     `data.overrides.${value}.description`,
+//   ]),
+// ];
+
+describe("content fields", () => {
+  it.todo("renders data.content");
+});
+
+describe("confirmation fields", () => {
+  it.todo("renders data.heading");
+  it.todo("renders data.moreInfo");
+  it.todo("renders data.contactInfo");
+  it.todo("renders data.nextSteps.title");
+  it.todo("renders data.nextSteps.description");
+});
+
+describe("findProperty fields", () => {
+  it.todo("renders data.newAddressTitle");
+  it.todo("renders data.newAddressDescription");
+  it.todo("renders data.newAddressDescriptionLabel");
+});
+
+describe("drawBoundary fields", () => {
+  it.todo("renders data.titleForUploading");
+  it.todo("renders data.descriptionForUploading");
+});
+
+describe("planningConstraints fields", () => {
+  it.todo("renders data.disclaimer");
+});
+
+describe("pay fields", () => {
+  it.todo("renders data.bannerTitle");
+  it.todo("renders data.instructionsTitle");
+  it.todo("renders data.instructionsDescription");
+  it.todo("renders data.secondaryPageTitle");
+  it.todo("renders data.nomineeTitle");
+  it.todo("renders data.nomineeDescription");
+  it.todo("renders data.yourDetailsTitle");
+  it.todo("renders data.yourDetailsDescription");
+  it.todo("renders data.yourDetailsLabel");
+});

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/SearchResultCard/DataDisplayMap.test.ts → 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<typeof getDisplayDetailsForResult>;