refactor: remove MobX

frontend/package.json

@@ -95,8 +95,6 @@
     "jwt-decode": "^4.0.0",
     "lottie-react": "^2.4.1",
     "lucide-react": "^0.563.0",
-    "mobx": "^6.10.0",
-    "mobx-react": "^7.6.0",
     "moment": "^2.30.1",
     "monaco-editor": "^0.54.0",
     "monaco-editor-webpack-plugin": "^7.1.1",

frontend/src/app.tsx

@@ -42,7 +42,6 @@ import { builderCustomComponents } from 'components/builder-io/builder-custom-co
 import { BUILDER_API_KEY } from 'components/constants';
 import { CustomFeatureFlagProvider } from 'custom-feature-flag-provider';
 import useDeveloperView from 'hooks/use-developer-view';
-import { observer } from 'mobx-react';
 import { protobufRegistry } from 'protobuf-registry';
 import queryClient from 'query-client';
 import { getBasePath } from 'utils/env';
@@ -111,4 +110,4 @@ const App = () => {
   );
 };
 
-export default observer(App);
+export default App;

frontend/src/components/layout/sidebar.tsx

@@ -34,7 +34,6 @@ import {
   useSidebar,
 } from 'components/redpanda-ui/components/sidebar';
 import { ChevronsLeft, ChevronsRight, ChevronUp, LogOut, Settings } from 'lucide-react';
-import { observer } from 'mobx-react';
 import type React from 'react';
 import { useEffect, useState } from 'react';
 import { createGroupedSidebarItems, type SidebarGroupedItems } from 'utils/route-utils';
@@ -81,7 +80,7 @@ function SidebarCollapseToggle() {
   );
 }
 
-const UserProfile = observer(() => {
+const UserProfile = () => {
   const [preferencesOpen, setPreferencesOpen] = useState(false);
   const { state, isMobile, setOpenMobile } = useSidebar();
 
@@ -178,7 +177,7 @@ const UserProfile = observer(() => {
       <UserPreferencesDialog isOpen={preferencesOpen} onClose={() => setPreferencesOpen(false)} />
     </>
   );
-});
+};
 
 type NavItemProps = {
   item: SidebarGroupedItems['items'][number];
@@ -220,7 +219,7 @@ function SidebarNavItem({ item, isActive, onNavClick }: NavItemProps) {
   );
 }
 
-const SidebarNavigation = observer(() => {
+const SidebarNavigation = () => {
   const location = useLocation();
   const { isMobile, setOpenMobile } = useSidebar();
   const groupedItems = createGroupedSidebarItems();
@@ -250,7 +249,7 @@ const SidebarNavigation = observer(() => {
       ))}
     </nav>
   );
-});
+};
 
 export function AppSidebar() {
   return (

frontend/src/components/misc/broker-list.tsx

@@ -11,7 +11,6 @@
 
 import { Tooltip } from '@redpanda-data/ui';
 import { ChevronRightIcon } from 'components/icons';
-import { observer } from 'mobx-react';
 import React, { Component } from 'react';
 
 import { api, brokerMap } from '../../state/backend-api';
@@ -21,7 +20,6 @@ type BrokerListProps =
   | { brokerIds: number[]; addedIds?: number[]; removedIds?: number[]; leaderId?: number }
   | { partition: Partition };
 
-@observer
 export class BrokerList extends Component<BrokerListProps> {
   constructor(p: BrokerListProps) {
     super(p);

frontend/src/components/misc/buttons/data-refresh/component.tsx

@@ -1,8 +1,3 @@
-import { Box, Flex, IconButton, Popover, Spinner, Text } from '@redpanda-data/ui';
-import { PauseIcon, PlayIcon, RefreshIcon } from 'components/icons';
-import { autorun, observable } from 'mobx';
-import { observer } from 'mobx-react';
-
 /**
  * Copyright 2022 Redpanda Data, Inc.
  *
@@ -14,83 +9,73 @@ import { observer } from 'mobx-react';
  * by the Apache License, Version 2.0
  */
 
+import { Box, Flex, IconButton, Popover, Spinner, Text } from '@redpanda-data/ui';
+import { PauseIcon, PlayIcon, RefreshIcon } from 'components/icons';
+import { useEffect, useRef, useState } from 'react';
+
 import { appGlobal } from '../../../../state/app-global';
 import { api, REST_CACHE_DURATION_SEC } from '../../../../state/backend-api';
 import { uiSettings } from '../../../../state/ui';
 import { prettyMilliseconds } from '../../../../utils/utils';
 
-const autoRefresh = observable(
-  {
-    active: false,
-    timerId: undefined as ReturnType<typeof setInterval> | undefined,
-    maxRequestCount: 0,
+export const DataRefreshButton = () => {
+  const [isActive, setIsActive] = useState(false);
+  const [remainingSeconds, setRemainingSeconds] = useState(0);
+  const [activeRequests, setActiveRequests] = useState(0);
+  const [maxRequestCount, setMaxRequestCount] = useState(0);
+
+  const stateRef = useRef({
+    isActive: false,
     nextRefresh: Number.POSITIVE_INFINITY,
-    remainingSeconds: 0,
+    maxRequestCount: 0,
+  });
 
-    get currentTime() {
-      return Date.now();
-    },
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const currentRequests = api.activeRequests.length;
 
-    toggleAutorefresh() {
-      this.active = !this.active;
-      if (this.active) {
-        // Start
-        this.scheduleNextRefresh();
-        this.timerId = setInterval(this.updateAutorefresh, 150);
-      } else {
-        // Stop
-        clearInterval(this.timerId);
-        appGlobal.onRefresh();
+      // Track max request count
+      if (currentRequests === 0) {
+        stateRef.current.maxRequestCount = 0;
+      } else if (currentRequests > stateRef.current.maxRequestCount) {
+        stateRef.current.maxRequestCount = currentRequests;
       }
-    },
+      setActiveRequests(currentRequests);
+      setMaxRequestCount(stateRef.current.maxRequestCount);
 
-    updateAutorefresh() {
-      const timeUntilRefresh = this.nextRefresh - this.currentTime;
+      if (!stateRef.current.isActive) return;
 
-      if (api.activeRequests.length > 0) {
-        // There are active requests, delay the next refresh / reset the timer
-        this.scheduleNextRefresh();
+      if (currentRequests > 0) {
+        // Active requests — delay the next refresh
+        stateRef.current.nextRefresh = Date.now() + uiSettings.autoRefreshIntervalSecs * 1000;
         return;
       }
 
+      const timeUntilRefresh = stateRef.current.nextRefresh - Date.now();
       if (timeUntilRefresh > 0) {
-        // Still some time left, only update visual timer
-        this.remainingSeconds = Math.ceil(timeUntilRefresh / 1000);
-        return;
+        setRemainingSeconds(Math.ceil(timeUntilRefresh / 1000));
+      } else {
+        stateRef.current.nextRefresh = Date.now() + uiSettings.autoRefreshIntervalSecs * 1000;
+        appGlobal.onRefresh();
       }
+    }, 150);
 
-      // The timer has expired
-      // Refresh now and schedule the next refresh...
-      this.scheduleNextRefresh();
-      appGlobal.onRefresh();
-    },
-
-    scheduleNextRefresh() {
-      this.nextRefresh = this.currentTime + uiSettings.autoRefreshIntervalSecs * 1000;
-    },
-  },
-  undefined,
-  { autoBind: true }
-);
+    return () => clearInterval(interval);
+  }, []);
 
-autorun(() => {
-  const currentRequests = api.activeRequests.length;
-  if (currentRequests === 0) {
-    autoRefresh.maxRequestCount = 0;
-  }
-  if (currentRequests > autoRefresh.maxRequestCount) {
-    autoRefresh.maxRequestCount = currentRequests;
-  }
-});
+  const toggleAutorefresh = () => {
+    const newActive = !stateRef.current.isActive;
+    stateRef.current.isActive = newActive;
+    if (newActive) {
+      stateRef.current.nextRefresh = Date.now() + uiSettings.autoRefreshIntervalSecs * 1000;
+    } else {
+      appGlobal.onRefresh();
+    }
+    setIsActive(newActive);
+  };
 
-export const DataRefreshButton = observer(() => {
-  // Track how many requests we've sent in total
-  const countStr =
-    autoRefresh.maxRequestCount > 1
-      ? `${autoRefresh.maxRequestCount - api.activeRequests.length} / ${autoRefresh.maxRequestCount}`
-      : '';
+  const countStr = maxRequestCount > 1 ? `${maxRequestCount - activeRequests} / ${maxRequestCount}` : '';
 
-  // maybe we need to use the same 'no vertical expansion' trick:
   return (
     <div className="flex items-center gap-1">
       <Box>
@@ -108,16 +93,16 @@ export const DataRefreshButton = observer(() => {
         >
           <IconButton
             aria-label="Auth Refresh"
-            icon={autoRefresh.active ? <PauseIcon size={18} /> : <PlayIcon size={18} />}
-            onClick={autoRefresh.toggleAutorefresh}
+            icon={isActive ? <PauseIcon size={18} /> : <PlayIcon size={18} />}
+            onClick={toggleAutorefresh}
             p={0}
             size="xs"
             variant="ghost"
           />
         </Popover>
       </Box>
       <Flex alignItems="center" flexDirection="column">
-        {autoRefresh.active || api.activeRequests.length > 0 ? (
+        {isActive || activeRequests > 0 ? (
           <Spinner color="red.500" ml={2} size="sm" speed="0.3s" />
         ) : (
           <Popover
@@ -145,13 +130,11 @@ export const DataRefreshButton = observer(() => {
         )}
       </Flex>
       <Text fontSize="sm" ml={4} userSelect="none">
-        {autoRefresh.active && api.activeRequests.length === 0 && (
-          <>Refreshing in {autoRefresh.remainingSeconds} secs</>
-        )}
-        {api.activeRequests.length > 0 && <>Fetching data... {countStr}</>}
+        {isActive && activeRequests === 0 && <>Refreshing in {remainingSeconds} secs</>}
+        {activeRequests > 0 && <>Fetching data... {countStr}</>}
       </Text>
     </div>
   );
-});
+};
 
 export default DataRefreshButton;

frontend/src/components/misc/common.tsx

@@ -11,7 +11,6 @@
 
 import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay } from '@redpanda-data/ui';
 import { AlertIcon } from 'components/icons';
-import { observer } from 'mobx-react';
 import React, { type PropsWithChildren, useState } from 'react';
 
 import type { TopicLogDirSummary } from '../../state/rest-interfaces';
@@ -65,7 +64,7 @@ export function range(start: number, end: number): number[] {
  * Reloading the page does not ensure we'll get the update!
  * If there are multiple backend instances, we might get connected to an old instance again when we trigger a reload.
  */
-export const UpdatePopup = observer(() => {
+export const UpdatePopup = () => {
   const [isUpdateDialogOpen, setUpdateDialogOpen] = useState(true);
   if (IsDev) {
     return null;
@@ -121,7 +120,7 @@ export const UpdatePopup = observer(() => {
       </ModalContent>
     </Modal>
   );
-});
+};
 
 export function renderLogDirSummary(summary: TopicLogDirSummary): JSX.Element {
   if (!summary.hint) {

frontend/src/components/misc/error-display.tsx

@@ -11,7 +11,6 @@
 
 import { Box, Button, List, ListIcon, ListItem, Result, Section } from '@redpanda-data/ui';
 import { WarningIcon } from 'components/icons';
-import { observer } from 'mobx-react';
 import type { FC, ReactElement } from 'react';
 
 import ErrorResult from './error-result';
@@ -22,7 +21,7 @@ function isWrappedApiError(error: unknown): error is WrappedApiError {
   return error !== null && typeof error === 'object' && 'statusCode' in error;
 }
 
-export const ErrorDisplay: FC<{ children: ReactElement }> = observer(({ children }) => {
+export const ErrorDisplay: FC<{ children: ReactElement }> = ({ children }) => {
   if (api.errors.length === 0) {
     return children;
   }
@@ -60,7 +59,7 @@ export const ErrorDisplay: FC<{ children: ReactElement }> = observer(({ children
       </Section>
     </>
   );
-});
+};
 
 function formatError(err: unknown): string {
   if (err instanceof Error && err.message) {