feat(search): Map all node keys to display values (#3763)

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

@@ -1,11 +1,11 @@
 import Typography from "@mui/material/Typography";
-import React from "react";
+import React, { Fragment } from "react";
 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 }) => {
@@ -15,11 +15,10 @@ export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
   return (
     <>
       {text.split("").map((char, index) => (
-        <>
+        <Fragment key={`headline-character-${index}`}>
           <Typography
             component="span"
-            variant={variant}
-            key={`headline-character-${index}`}
+            variant={variant || "body2"}
             sx={(theme) => ({
               fontWeight: isHighlighted(index) ? FONT_WEIGHT_BOLD : "regular",
               fontSize: theme.typography.body2.fontSize,
@@ -29,7 +28,7 @@ export const Headline: React.FC<Props> = ({ text, matchIndices, variant }) => {
           </Typography>
           {/* Add wordbreak after special characters */}
           {char.match(/\W/) && <wbr />}
-        </>
+        </Fragment>
       ))}
     </>
   );

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>;