Merge branch 'main' into dependabot/npm_and_yarn/moped-editor/axios-1.16.0

Author: mddilley

moped-database/migrations/default/1777496324339_alter_table_public_ecapris_subproject_funding_alter_column_subproject_name/down.sql

@@ -0,0 +1 @@
+alter table "public"."ecapris_subproject_funding" alter column "subproject_name" drop not null;

moped-database/migrations/default/1777496324339_alter_table_public_ecapris_subproject_funding_alter_column_subproject_name/up.sql

@@ -0,0 +1 @@
+alter table "public"."ecapris_subproject_funding" alter column "subproject_name" set not null;

moped-editor/package.json

@@ -2,7 +2,7 @@
   "name": "atd-moped-editor",
   "author": "TPW Data & Technology Services",
   "license": "CC0-1.0",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "private": false,
   "repository": {
     "type": "git",

moped-editor/src/App.js

@@ -30,7 +30,7 @@ import { LicenseInfo } from "@mui/x-license";
 
 const HASURA_ENDPOINT = import.meta.env.VITE_HASURA_ENDPOINT;
 
-console.info(`🛵 ${pckg.name} ${pckg.version}`);
+console.info(`🛵 ${pckg.name} ${pckg.version} on Vite`);
 
 const useApolloClient = () => {
   const [error, setError] = useState(null);

moped-editor/src/views/dev/LookupsView/index.js

@@ -26,14 +26,43 @@ import Can from "src/auth/Can";
 
 /**
  * Scroll to a page element based on its key
+ * @param {string} recordKey - The key representing the record type to scroll to
+ * @param {Object} refs - An object containing refs for each table element on the page
+ * @param {string} behavior - The scroll behavior
  */
-const scrollToTable = (recordKey, refs) => {
+const scrollToTable = (recordKey, refs, behavior = "smooth") => {
   const ref = refs?.[recordKey];
+
   if (ref?.current) {
-    ref.current.scrollIntoView({ behavior: "smooth" });
+    ref.current.scrollIntoView({ behavior });
   }
 };
 
+/**
+ * Custom hook to scroll to a table when the hash in the URL changes. Listens for changes to the hash and
+ * uses a ResizeObserver to ensure that the element is scrolled into view after any layout shifts.
+ * @param {Object} props
+ * @param {string} props.recordKeyHash - The hash from the URL representing the record key to scroll to
+ * @param {Object} props.refs - An object containing refs for each table element on the page
+ * */
+const useScrollToHash = ({ recordKeyHash, refs }) => {
+  useEffect(() => {
+    if (!recordKeyHash) return;
+
+    const recordKey = recordKeyHash.replace("#", "").replaceAll("-", "_");
+    const resizeObserver = new ResizeObserver(() => {
+      scrollToTable(recordKey, refs, "instant");
+    });
+
+    // Observe resize of every table so we keep scrolling until layout is fully populated with async data
+    Object.values(refs).forEach((ref) => {
+      if (ref.current) resizeObserver.observe(ref.current);
+    });
+
+    return () => resizeObserver.disconnect();
+  }, [recordKeyHash, refs]);
+};
+
 const TAG_TABLE_KEYS = ["moped_component_tags", "moped_tags"];
 
 /**
@@ -73,18 +102,8 @@ const LookupsView = () => {
     []
   );
 
-  /**
-   * Use the record hash from the URL, if present. This only happens once after
-   * data fetch.
-   * */
   let { hash: recordKeyHash, pathname } = useLocation();
-  useEffect(() => {
-    if (!recordKeyHash || loading) {
-      return;
-    }
-    const recordKey = recordKeyHash.replace("#", "").replaceAll("-", "_");
-    scrollToTable(recordKey, refs);
-  }, [recordKeyHash, loading, refs]);
+  useScrollToHash({ recordKeyHash, refs });
 
   return (
     <ApolloErrorHandler error={error}>

moped-editor/src/views/projects/projectView/ProjectSummary/ProjectSummaryProjectECapris.js

@@ -8,6 +8,7 @@ import TextField from "@mui/material/TextField";
 import { Box, Grid2, Stack, Typography } from "@mui/material";
 import { useMutation } from "@apollo/client";
 import { useUser } from "src/auth/user";
+import { filterOptions } from "src/utils/autocompleteHelpers";
 
 import {
   fieldBox,
@@ -130,6 +131,8 @@ const ProjectSummaryProjectECapris = ({
                 option?.["ecapris_subproject_id"] ===
                 value?.["ecapris_subproject_id"]
               }
+              // Use custom filterOptions function to limit number of options rendered for performance
+              filterOptions={filterOptions}
               onChange={(_, newValue) => {
                 setSelectedValue(newValue);
               }}

moped-editor/src/views/projects/projectView/ProjectTeam/ProjectTeamTable.js

@@ -147,7 +147,7 @@ const useColumns = ({
           <Box sx={{ fontWeight: 500 }}>
             Role{" "}
             <Link
-              href="data-dictionary#moped-project-roles"
+              href="/moped/data-dictionary#moped-project-roles"
               target="_blank"
               rel="noopener noreferrer"
             >