chore(deps): React 18, MdxEditor

src/main/webapp/package.json

@@ -33,11 +33,12 @@
     "@luma.gl/gltools": "8.5.14",
     "@luma.gl/shadertools": "8.5.14",
     "@luma.gl/webgl": "8.5.14",
+    "@mdxeditor/editor": "^3.19.0",
     "@phylocanvas/phylocanvas.gl": "1.52.0",
     "@reduxjs/toolkit": "1.8.5",
     "ag-grid-community": "31.3.4",
     "ag-grid-react": "31.3.4",
-    "antd": "4.19.5",
+    "antd": "4.24.16",
     "axios": "0.28.0",
     "clipboard": "1.7.1",
     "dayjs": "1.11.1",
@@ -47,25 +48,25 @@
     "i": "0.3.7",
     "immutability-helper": "3.1.1",
     "lodash": "4.17.21",
+    "micromark": "^4.0.1",
     "moment": "2.29.4",
     "postcss-nested": "5.0.6",
     "process": "0.11.10",
     "qs": "6.10.3",
     "rc-util": "5.43.0",
     "rc-virtual-list": "3.4.6",
-    "react": "17.0.2",
-    "react-dnd": "15.1.2",
+    "react": "18.3.1",
+    "react-dnd": "16.0.0",
     "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-dom-factories": "1.0.2",
     "react-iframe": "1.8.0",
     "react-markdown": "8.0.2",
-    "react-mde": "11.5.0",
     "react-redux": "7.2.8",
     "react-router-dom": "6.4.3",
-    "react-virtualized-auto-sizer": "1.0.6",
-    "react-window": "1.8.6",
-    "reactour": "1.18.7",
+    "react-virtualized-auto-sizer": "1.0.24",
+    "react-window": "1.8.10",
+    "reactour": "1.19.4",
     "redux": "4.1.2",
     "redux-saga": "1.1.3",
     "styled-components": "5.3.5",

src/main/webapp/resources/css/app.css

@@ -91,6 +91,11 @@ body > .ant-layout {
   background-color: #ffffff;
 }
 
+.mdxeditor-popup-container {
+  position: relative;
+  z-index: 1100 !important;
+}
+
 /****************************************************************************************
 * NOTIFICATION ANIMATIONS
 *****************************************************************************************/

src/main/webapp/resources/css/pages/announcements.css

@@ -0,0 +1,4 @@
+
+.mdxeditor-popup-container {
+    z-index: 1100;
+}

src/main/webapp/resources/js/components/Header/MainNavigation/components/AnnouncementsModal.jsx

@@ -3,7 +3,7 @@ import { ScrollableModal } from "../../../ant.design/ScrollableModal";
 import { Button, Space, Tag, Typography } from "antd";
 import { PriorityFlag } from "../../../../pages/announcement/components/PriorityFlag";
 import { formatDate } from "../../../../utilities/date-utilities";
-import ReactMarkdown from "react-markdown";
+import { micromark } from "micromark";
 import { TYPES, useAnnouncements } from "./announcements-context";
 import {
   readAndCloseAnnouncement,
@@ -105,9 +105,12 @@ export function AnnouncementsModal() {
       onCancel={() => dispatch({ type: TYPES.CLOSE_ANNOUNCEMENT })}
       footer={footer}
     >
-      <div style={{ marginLeft: "25px" }}>
-        <ReactMarkdown>{newAnnouncements[index].message}</ReactMarkdown>
-      </div>
+      <div 
+        style={{ marginLeft: "25px" }}
+        dangerouslySetInnerHTML={{
+          __html: micromark(newAnnouncements[index].message)
+        }}
+      />
     </ScrollableModal>
   ) : null;
 }

src/main/webapp/resources/js/components/Header/PageHeader.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { Session } from "../session/Session";
 import { Notifications } from "../notifications/Notifications";
 import GalaxyAlert from "./GalaxyAlert";
@@ -42,4 +42,6 @@ export function PageHeader() {
   );
 }
 
-render(<PageHeader />, document.querySelector(".js-page-header"));
+const container = document.querySelector(".js-page-header");
+const root = createRoot(container);
+root.render(<PageHeader />);

src/main/webapp/resources/js/components/markdown/MarkdownEditor.jsx

@@ -4,91 +4,81 @@
  */
 
 import React, { forwardRef, useImperativeHandle } from "react";
-import ReactMde from "react-mde";
-import "react-mde/lib/styles/css/react-mde-all.css";
-import ReactMarkdown from "react-markdown";
-import styled from "styled-components";
-import { blue6, grey1, grey4, grey6 } from "../../styles/colors";
 import {
-  IconBold,
-  IconCode,
-  IconItalic,
-  IconLinkOut,
-  IconOrderedList,
-  IconStrikeThrough,
-  IconUnorderedList
-} from "../icons/Icons";
+    MDXEditor,
+    UndoRedo,
+    BoldItalicUnderlineToggles,
+    CreateLink,
+    Separator,
+    ListsToggle,
+    InsertCodeBlock,
+    codeBlockPlugin,
+    codeMirrorPlugin,
+    sandpackPlugin,
+    toolbarPlugin,
+    linkPlugin,
+    linkDialogPlugin,
+    frontmatterPlugin,
+    listsPlugin
+} from "@mdxeditor/editor";
 
-const StyledMde = styled(ReactMde)`
-  border-color: ${grey4};
-  .mde-header {
-    background-color: ${grey1};
-    border-color: ${grey4};
-    height: 46px;
-  }
-  .mde-tabs button {
-    border-radius: 2px;
-    border: 1px solid ${grey1};
+import "@mdxeditor/editor/style.css";
 
-    &.selected {
-      color: ${blue6};
-      border: 1px solid ${blue6};
-    }
-  }
-  .grip {
-    background-color: ${grey1};
-    border-top: 1px solid ${grey4};
-    height: 20px;
-    svg {
-      color: ${grey6};
-    }
+const defaultSnippetContent = `
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello CodeSandbox</h1>
+      <h2>Start editing to see some magic happen!</h2>
+    </div>
+  );
+}
+`.trim()
+
+const reactSandpackConfig = {
+    defaultPreset: 'txt'
   }
-`;
 
 /**
  * Render a markdown editor to a react component.
  * Must pass in a `ref` (created using useRef).  See usage in CreateNewAnnouncement.jsx
  * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly markdown?: *}> & React.RefAttributes<unknown>>}
  */
 export const MarkdownEditor = forwardRef(({ markdown }, ref) => {
-  const [value, setValue] = React.useState(markdown || "");
-  const [selectedTab, setSelectedTab] = React.useState("write");
+    const [value, setValue] = React.useState(markdown || "");
 
-  useImperativeHandle(ref, () => ({
-    getMarkdown() {
-      return value;
-    }
-  }));
+    useImperativeHandle(ref, () => ({
+        getMarkdown() {
+            return value;
+        }
+    }));
 
-  function formatIcon(cmd) {
-    switch (cmd) {
-      case "bold":
-        return <IconBold />;
-      case "italic":
-        return <IconItalic />;
-      case "strikethrough":
-        return <IconStrikeThrough />;
-      case "link":
-        return <IconLinkOut />;
-      case "code":
-        return <IconCode />;
-      case "unordered-list":
-        return <IconUnorderedList />;
-      case "ordered-list":
-        return <IconOrderedList />;
-    }
-  }
-
-  return (
-    <StyledMde
-      value={value}
-      getIcon={formatIcon}
-      onChange={setValue}
-      selectedTab={selectedTab}
-      onTabChange={setSelectedTab}
-      generateMarkdownPreview={(markdown) =>
-        Promise.resolve(<ReactMarkdown>{markdown}</ReactMarkdown>)
-      }
-    />
-  );
+    return (
+        <MDXEditor
+            markdown={value}
+            onChange={setValue}
+            plugins={[
+                toolbarPlugin({
+                    toolbarContents: () => (
+                        <>
+                            <UndoRedo />
+                            <BoldItalicUnderlineToggles />
+                            <CreateLink />
+                            <Separator />
+                            <ListsToggle />
+                            <InsertCodeBlock />
+                        </>
+                    )
+                }),
+                codeBlockPlugin({ defaultCodeBlockLanguage: 'txt' }),
+                sandpackPlugin({ sandpackConfig: reactSandpackConfig }),
+                codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS', txt: 'text', tsx: 'TypeScript' } }),
+                linkPlugin(),
+                linkDialogPlugin(),
+                listsPlugin(),
+                frontmatterPlugin()
+            ]}
+            ref={ref}
+        />
+    );
 });

src/main/webapp/resources/js/components/project/ProjectNav.jsx

@@ -1,6 +1,6 @@
 import { Layout, Menu, PageHeader } from "antd";
-import React from "react";
-import { render } from "react-dom";
+import React from "react";  
+import { createRoot } from 'react-dom/client';
 import { getProjectIdFromUrl, setBaseUrl } from "../../utilities/url-utilities";
 import { IconFolder } from "../icons/Icons";
 import { RemoteProjectStatus } from "./RemoteProjectStatus";
@@ -59,4 +59,6 @@ export function ProjectNav({ ...props }) {
   );
 }
 
-render(<ProjectNav />, document.querySelector("#project-root"));
+const container = document.querySelector("#project-root");
+const root = createRoot(container);
+root.render(<ProjectNav />);

src/main/webapp/resources/js/pages/LoginPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { Alert, Button, Col, Form, Input, InputRef, Row } from "antd";
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
 import { setBaseUrl } from "../utilities/url-utilities";
@@ -263,4 +263,6 @@ function LoginPage(): JSX.Element {
   );
 }
 
-render(<LoginPage />, document.querySelector("#login-root"));
+const container = document.querySelector("#login-root");
+const root = createRoot(container);
+root.render(<LoginPage />);

src/main/webapp/resources/js/pages/UserGroupsPage/index.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from "react";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { getUserGroupRoles } from "../../apis/users/groups";
 import { ContentLoading } from "../../components/loader";
@@ -62,9 +62,10 @@ export function UserGroups() {
   );
 }
 
-render(
+const container = document.getElementById('groups-root');
+const root = createRoot(container);
+root.render(
   <BrowserRouter>
     <UserGroups />
-  </BrowserRouter>,
-  document.querySelector("#groups-root")
+  </BrowserRouter>
 );

src/main/webapp/resources/js/pages/admin/components/announcements/AnnouncementAdminPage.jsx

@@ -12,13 +12,14 @@
 import { PageWrapper } from "../../../../components/page/PageWrapper";
 import { AnnouncementsTable } from "./AnnouncementsTable";
 import { PagedTableProvider } from "../../../../components/ant.design/PagedTable";
+import "../../../../../css/pages/announcements.css";
 
 /**
  * React component to render the administration announcements page.
  * @returns {*}
  * @constructor
  */
 export default function AnnouncementAdminPage({}) {
   const tableRef = useRef(null);
 
   function addNewAnnouncement(title, message, priority) {

src/main/webapp/resources/js/pages/admin/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from "react-router-dom";
 import { setBaseUrl } from "../../utilities/url-utilities";
 import Admin from "./components/Admin";
@@ -12,9 +12,10 @@ See: https://webpack.js.org/guides/public-path/#on-the-fly
  */
 __webpack_public_path__ = setBaseUrl(`/dist/`);
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <BrowserRouter>
     <Admin />
-  </BrowserRouter>,
-  document.getElementById("root")
+  </BrowserRouter>
 );

src/main/webapp/resources/js/pages/analyses/AnalysesPage.jsx

@@ -1,17 +1,18 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import { AnalysesTable } from "../../components/AnalysesTable/AnalysesTable";
 import { PagedTableProvider } from "../../components/ant.design/PagedTable";
 import { PageWrapper } from "../../components/page/PageWrapper";
 import { AnalysesTableProvider } from "../../contexts/AnalysesTableContext";
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <PageWrapper title={i18n("analyses.header")}>
     <PagedTableProvider url={window.PAGE.url}>
       <AnalysesTableProvider>
         <AnalysesTable canManage={window.PAGE.canManage} />
       </AnalysesTableProvider>
     </PagedTableProvider>
-  </PageWrapper>,
-  document.querySelector("#root")
+  </PageWrapper>
 );

src/main/webapp/resources/js/pages/analyses/analyses-outputs/index.js

@@ -1,6 +1,5 @@
 import React from "react";
-
-import { render } from "react-dom";
+import { createRoot } from 'react-dom/client';
 import UserSingleSampleAnalysisOutputs from "./components/UserSingleSampleAnalysisOutputs";
 import { setBaseUrl } from "../../../utilities/url-utilities";
 import store from "./store";
@@ -14,9 +13,10 @@ See: https://webpack.js.org/guides/public-path/#on-the-fly
  */
 __webpack_public_path__ = setBaseUrl(`/dist/`);
 
-render(
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
   <Provider store={store}>
     <UserSingleSampleAnalysisOutputs />
-  </Provider>,
-  document.getElementById("root")
+  </Provider>
 );