Merge pull request #2287 from opensafely-core/ts-code-prep

Various React and JS fixes for builder and tree apps
opensafely-core · Jan 9, 2025 · 4144caf · 4144caf
2 parents 772c560 + 54ffcde
commit 4144caf
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 67 deletions.
diff --git a/assets/src/scripts/_utils.js b/assets/src/scripts/_utils.js
@@ -16,7 +16,10 @@ function getCookie(name) {
 }
 
 function readValueFromPage(id) {
-  return JSON.parse(document.getElementById(id).textContent);
+  const scriptId = document.getElementById(id);
+  if (scriptId?.textContent) {
+    return JSON.parse(scriptId.textContent);
+  }
 }
 
 export { getCookie, readValueFromPage };
diff --git a/assets/src/scripts/builder/index.jsx b/assets/src/scripts/builder/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import Hierarchy from "../_hierarchy";
 import { readValueFromPage } from "../_utils";
@@ -23,25 +23,29 @@ const visiblePaths = hierarchy.initiallyVisiblePaths(
 );
 
 const container = document.getElementById("codelist-builder-container");
-const root = createRoot(container);
-root.render(
-  <CodelistBuilder
-    allCodes={readValueFromPage("all-codes")}
-    codeToStatus={codeToStatus}
-    codeToTerm={codeToTerm}
-    draftURL={readValueFromPage("draft-url")}
-    excludedCodes={readValueFromPage("excluded-codes")}
-    filter={readValueFromPage("filter")}
-    hierarchy={hierarchy}
-    includedCodes={readValueFromPage("included-codes")}
-    isEditable={readValueFromPage("is-editable")}
-    metadata={readValueFromPage("metadata")}
-    resultsHeading={readValueFromPage("results-heading")}
-    searches={readValueFromPage("searches")}
-    searchURL={readValueFromPage("search-url")}
-    treeTables={treeTables}
-    updateURL={readValueFromPage("update-url")}
-    versions={readValueFromPage("versions")}
-    visiblePaths={visiblePaths}
-  />,
-);
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <StrictMode>
+      <CodelistBuilder
+        allCodes={readValueFromPage("all-codes")}
+        codeToStatus={codeToStatus}
+        codeToTerm={codeToTerm}
+        draftURL={readValueFromPage("draft-url")}
+        excludedCodes={readValueFromPage("excluded-codes")}
+        filter={readValueFromPage("filter")}
+        hierarchy={hierarchy}
+        includedCodes={readValueFromPage("included-codes")}
+        isEditable={readValueFromPage("is-editable")}
+        metadata={readValueFromPage("metadata")}
+        resultsHeading={readValueFromPage("results-heading")}
+        searches={readValueFromPage("searches")}
+        searchURL={readValueFromPage("search-url")}
+        treeTables={treeTables}
+        updateURL={readValueFromPage("update-url")}
+        versions={readValueFromPage("versions")}
+        visiblePaths={visiblePaths}
+      />
+    </StrictMode>,
+  );
+}
diff --git a/assets/src/scripts/components/CodelistBuilder.jsx b/assets/src/scripts/components/CodelistBuilder.jsx
@@ -26,14 +26,16 @@ class CodelistBuilder extends React.Component {
 
     this.state = {
       codeToStatus: props.codeToStatus,
-      updateQueue: [],
-      updating: false,
+      expandedCompatibleReleases: false,
       moreInfoModalCode: null,
       showConfirmDiscardModal: false,
-      expandedCompatibleReleases: false,
+      updateQueue: [],
+      updating: false,
     };
 
-    this.updateStatus = props.isEditable ? this.updateStatus.bind(this) : null;
+    this.updateStatus = props.isEditable
+      ? this.updateStatus.bind(this)
+      : () => null;
     this.showMoreInfoModal = this.showMoreInfoModal.bind(this);
     this.hideMoreInfoModal = this.hideMoreInfoModal.bind(this);
     this.ManagementForm = this.ManagementForm.bind(this);
@@ -82,15 +84,20 @@ class CodelistBuilder extends React.Component {
   }
 
   postUpdates() {
+    const requestHeaders = new Headers();
+    requestHeaders.append("Accept", "application/json");
+    requestHeaders.append("Content-Type", "application/json");
+
+    const csrfCookie = getCookie("csrftoken");
+    if (csrfCookie) {
+      requestHeaders.append("X-CSRFToken", csrfCookie);
+    }
+
     fetch(this.props.updateURL, {
       method: "POST",
       credentials: "include",
       mode: "same-origin",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        "X-CSRFToken": getCookie("csrftoken"),
-      },
+      headers: requestHeaders,
       body: JSON.stringify({ updates: this.state.updateQueue }),
     })
       .then((response) => response.json())
@@ -391,12 +398,12 @@ class CodelistBuilder extends React.Component {
           Are you sure you want to discard this draft?
         </Modal.Header>
         <Modal.Body>
-          <button className="btn btn-primary mr-2" onClick={handleConfirm}>
+          <Button className="mr-2" onClick={handleConfirm} variant="primary">
             Yes
-          </button>
-          <button className="btn btn-secondary" onClick={handleCancel}>
+          </Button>
+          <Button onClick={handleCancel} variant="secondary">
             No
-          </button>
+          </Button>
         </Modal.Body>
       </Modal>
     );

diff --git a/assets/src/scripts/components/DescendantToggle.jsx b/assets/src/scripts/components/DescendantToggle.jsx
@@ -3,13 +3,14 @@ import React from "react";
 
 function DescendantToggle({ isExpanded, path, toggleVisibility }) {
   return (
-    <span
+    <button
+      className="p-0 bg-white border-0 text-monospace d-inline-block ml-1 mr-2"
       onClick={toggleVisibility.bind(null, path)}
-      style={{ cursor: "pointer", marginLeft: "2px", marginRight: "4px" }}
+      type="button"
     >
       {" "}
       {isExpanded ? "⊟" : "⊞"}
-    </span>
+    </button>
   );
 }
 

diff --git a/assets/src/scripts/components/Filter.jsx b/assets/src/scripts/components/Filter.jsx
@@ -4,7 +4,9 @@ import React from "react";
 function Filter({ filter }) {
   return filter ? (
     <p>Filtered to {filter} concepts and their descendants.</p>
-  ) : null;
+  ) : (
+    ""
+  );
 }
 
 export default Filter;

diff --git a/assets/src/scripts/components/MoreInfoModal.jsx b/assets/src/scripts/components/MoreInfoModal.jsx
@@ -23,7 +23,7 @@ function MoreInfoModal({
       text = "Excluded";
       break;
     case "(-)":
-      text = `Excluded by ${includedAncestorsText}`;
+      text = `Excluded by ${excludedAncestorsText}`;
       break;
     case "?":
       text = "Unresolved";
@@ -34,7 +34,7 @@ function MoreInfoModal({
   }
 
   return (
-    <Modal centered onHide={hideModal} show={code !== null}>
+    <Modal centered onHide={() => hideModal()} show={code !== null}>
       <Modal.Header closeButton>
         {term} ({code})
       </Modal.Header>

diff --git a/assets/src/scripts/components/Pipes.jsx b/assets/src/scripts/components/Pipes.jsx
@@ -5,13 +5,7 @@ function Pipes({ pipes }) {
   return pipes.map((pipe, ix) => (
     <span
       key={ix}
-      style={{
-        display: "inline-block",
-        textAlign: "center",
-        paddingLeft: "3px",
-        paddingRight: "6px",
-        width: "20px",
-      }}
+      className="d-inline-block pl-1 pr-2 text-center text-monospace"
     >
       {pipe}
     </span>

diff --git a/assets/src/scripts/components/StatusToggle.jsx b/assets/src/scripts/components/StatusToggle.jsx
@@ -5,7 +5,7 @@ import { Button } from "react-bootstrap";
 function StatusToggle({ code, status, symbol, updateStatus }) {
   return (
     <Button
-      className="py-0"
+      className="py-0 text-monospace"
       data-symbol={symbol}
       onClick={updateStatus && updateStatus.bind(null, code, symbol)}
       size="sm"
@@ -17,7 +17,7 @@ function StatusToggle({ code, status, symbol, updateStatus }) {
             : "outline-secondary"
       }
     >
-      {symbol}
+      {symbol === "+" ? <>+</> : <>&minus;</>}
     </Button>
   );
 }

diff --git a/assets/src/scripts/components/TreeRow.jsx b/assets/src/scripts/components/TreeRow.jsx
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import { ButtonGroup } from "react-bootstrap";
 import DescendantToggle from "./DescendantToggle";
 import MoreInfoButton from "./MoreInfoButton";
 import Pipes from "./Pipes";
@@ -30,7 +31,7 @@ function TreeRow({
 
   return (
     <div className={className} data-code={code} data-path={path}>
-      <div className="btn-group btn-group-sm" role="group">
+      <ButtonGroup>
         <StatusToggle
           code={code}
           status={status}
@@ -43,7 +44,7 @@ function TreeRow({
           symbol="-"
           updateStatus={updateStatus}
         />
-      </div>
+      </ButtonGroup>
 
       <div className="pl-2" style={{ whiteSpace: "nowrap" }}>
         <Pipes pipes={pipes} />

diff --git a/assets/src/scripts/tree/index.jsx b/assets/src/scripts/tree/index.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import Hierarchy from "../_hierarchy";
 import { readValueFromPage } from "../_utils";
@@ -23,15 +23,19 @@ const visiblePaths = hierarchy.initiallyVisiblePaths(
 );
 
 const container = document.getElementById("codelist-tree");
-const root = createRoot(container);
-root.render(
-  <TreeTables
-    codeToStatus={codeToStatus}
-    codeToTerm={codeToTerm}
-    hierarchy={hierarchy}
-    showMoreInfoModal={null}
-    treeTables={treeTables}
-    updateStatus={null}
-    visiblePaths={visiblePaths}
-  />,
-);
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <StrictMode>
+      <TreeTables
+        codeToStatus={codeToStatus}
+        codeToTerm={codeToTerm}
+        hierarchy={hierarchy}
+        showMoreInfoModal={null}
+        treeTables={treeTables}
+        updateStatus={null}
+        visiblePaths={visiblePaths}
+      />
+    </StrictMode>,
+  );
+}