Merge pull request #2290 from opensafely-core/search-component

Update the Search component to contain list items
opensafely-core · Jan 10, 2025 · 30c1eda · 30c1eda
2 parents 4144caf + 6b46f90
commit 30c1eda
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 60 deletions.
diff --git a/assets/src/scripts/components/CodelistBuilder.jsx b/assets/src/scripts/components/CodelistBuilder.jsx
@@ -182,24 +182,10 @@ class CodelistBuilder extends React.Component {
             <hr />
 
             {this.props.searches.length > 0 && (
-              <>
-                <h3 className="h6">Searches</h3>
-                <ListGroup>
-                  {this.props.searches.map((search) => (
-                    <Search key={search.url} search={search} />
-                  ))}
-                  {this.props.searches.some((search) => search.active) ? (
-                    <ListGroup.Item
-                      action
-                      className="py-1 px-2 font-italic"
-                      href={encodeURI(this.props.draftURL)}
-                    >
-                      show all
-                    </ListGroup.Item>
-                  ) : null}
-                </ListGroup>
-                <hr />
-              </>
+              <Search
+                draftURL={this.props.draftURL}
+                searches={this.props.searches}
+              />
             )}
 
             {this.props.isEditable && (

diff --git a/assets/src/scripts/components/Search.jsx b/assets/src/scripts/components/Search.jsx
@@ -1,50 +1,66 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { Button, Form } from "react-bootstrap";
+import { Button, Form, ListGroup } from "react-bootstrap";
 import { getCookie } from "../_utils";
 
-function Search({ search }) {
-  return search.delete_url ? (
-    <Form action={search.delete_url} className="mt-0 pt-0" method="post">
-      <Form.Control
-        name="csrfmiddlewaretoken"
-        type="hidden"
-        value={getCookie("csrftoken")}
-      />
+function Search({ draftURL, searches }) {
+  return (
+    <>
+      <h3 className="h6">Searches</h3>
+      <ListGroup>
+        {searches.map((search) => (
+          <React.Fragment key={search.url}>
+            {search.delete_url ? (
+              <ListGroup.Item
+                action
+                active={search.active}
+                className="py-1 px-2"
+                href={search.url}
+              >
+                <Form action={search.delete_url} method="post">
+                  <Form.Control
+                    name="csrfmiddlewaretoken"
+                    type="hidden"
+                    value={getCookie("csrftoken")}
+                  />
+                  {search.term_or_code}
+                  <Button
+                    aria-label="remove search"
+                    className="float-right p-0 px-1"
+                    name="delete-search"
+                    type="submit"
+                    size="sm"
+                    variant="secondary"
+                  >
+                    &times;
+                  </Button>
+                </Form>
+              </ListGroup.Item>
+            ) : (
+              <ListGroup.Item
+                action
+                active={search.active}
+                className="py-1 px-2"
+                href={encodeURI(search.url)}
+              >
+                {search.term_or_code}
+              </ListGroup.Item>
+            )}
+          </React.Fragment>
+        ))}
 
-      <a
-        className={
-          search.active
-            ? "list-group-item list-group-item-action active py-1 px-2"
-            : "list-group-item list-group-item-action py-1 px-2 "
-        }
-        href={search.url}
-      >
-        {search.term_or_code}
-
-        <Button
-          aria-label="remove search"
-          className="float-right p-0 px-1"
-          name="delete-search"
-          type="submit"
-          size="sm"
-          variant="secondary"
-        >
-          &times;
-        </Button>
-      </a>
-    </Form>
-  ) : (
-    <a
-      className={
-        search.active
-          ? "list-group-item list-group-item-action active py-1 px-2"
-          : "list-group-item list-group-item-action py-1 px-2 "
-      }
-      href={encodeURI(search.url)}
-    >
-      {search.term_or_code}
-    </a>
+        {searches.some((search) => search.active) ? (
+          <ListGroup.Item
+            action
+            className="py-1 px-2 font-italic"
+            href={encodeURI(draftURL)}
+          >
+            show all
+          </ListGroup.Item>
+        ) : null}
+      </ListGroup>
+      <hr />
+    </>
   );
 }