Fix admin modal submit and gate init when Clerk auth

Author: SaravanakumarR2018

src/frontend/src/modals/userManagementModal/index.tsx

@@ -360,7 +360,9 @@ export default function UserManagementModal({
             </Button>
 
             <Form.Submit asChild>
-              <Button className="mt-8">{confirmationText}</Button>
+              <Button className="mt-8" type="submit">
+                {confirmationText}
+              </Button>
             </Form.Submit>
           </div>
         </Form.Root>

src/frontend/src/pages/AppInitPage/index.tsx

@@ -20,6 +20,7 @@ import useAuthStore from "@/stores/authStore";
 export function AppInitPage() {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const { pathname } = useLocation();
+  const isClerkAuth = IS_CLERK_AUTH;
 
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const refreshDiscordCount = useDarkStore((state) => state.refreshDiscordCount);
@@ -35,27 +36,28 @@ export function AppInitPage() {
 
   // Skip the initialization queries when unauthenticated visitors load the
   // unauthenticated marketing landing page rendered at the root route.
-  const skipAppInit = !isAuthenticated && pathname === "/";  
+  const skipAppInit = !isAuthenticated && pathname === "/";
+  const waitForClerkAuth = isClerkAuth && !isAuthenticated;
 
-  const shouldSkipAutoLogin = IS_CLERK_AUTH;
+  const shouldSkipAutoLogin = isClerkAuth;
 
   const { isFetched: isAutoLoginFetched, refetch: refetchAutoLogin } = useGetAutoLogin({
-    enabled: !shouldSkipAutoLogin && isLoaded && !shouldSkip && !skipAppInit,
+    enabled: !shouldSkipAutoLogin && isLoaded && !shouldSkip && !skipAppInit && !waitForClerkAuth,
   });
 
   const isFetched = shouldSkipAutoLogin ? true : isAutoLoginFetched;
 
   const { isFetched: isConfigFetched } = useGetConfig({
-    enabled: isFetched && !shouldSkip && !skipAppInit,
+    enabled: isFetched && !shouldSkip && !skipAppInit && !waitForClerkAuth,
   });
 
-  useGetVersionQuery({ enabled: isFetched && !shouldSkip && !skipAppInit });
-  useGetGlobalVariables({ enabled: isFetched && !shouldSkip && !skipAppInit });
-  useGetTagsQuery({ enabled: isFetched && !shouldSkip && !skipAppInit });
-  useGetFoldersQuery({ enabled: isFetched && !shouldSkip && !skipAppInit });
+  useGetVersionQuery({ enabled: isFetched && !shouldSkip && !skipAppInit && !waitForClerkAuth });
+  useGetGlobalVariables({ enabled: isFetched && !shouldSkip && !skipAppInit && !waitForClerkAuth });
+  useGetTagsQuery({ enabled: isFetched && !shouldSkip && !skipAppInit && !waitForClerkAuth });
+  useGetFoldersQuery({ enabled: isFetched && !shouldSkip && !skipAppInit && !waitForClerkAuth });
 
   const { isFetched: isExamplesFetched, refetch: refetchExamples } = useGetBasicExamplesQuery({
-    enabled: !shouldSkip && !skipAppInit,
+    enabled: !shouldSkip && !skipAppInit && !waitForClerkAuth,
   });
 
   useEffect(() => {
@@ -67,16 +69,22 @@ export function AppInitPage() {
       refreshDiscordCount();
     }
 
-    if (isConfigFetched && !shouldSkip) {
-      refetchAutoLogin();
+    if (isConfigFetched && !shouldSkip && !waitForClerkAuth) {
+      if (!shouldSkipAutoLogin) {
+        refetchAutoLogin();
+      }
       refetchExamples();
     }
-  }, [isFetched, isConfigFetched, shouldSkip, skipAppInit]);
+  }, [isFetched, isConfigFetched, shouldSkip, skipAppInit, waitForClerkAuth]);
 
   if (skipAppInit) {
     return <Outlet />;
   }
 
+  if (waitForClerkAuth) {
+    return <CustomLoadingPage />;
+  }
+
   return (
     //need parent component with width and height
     <>

src/frontend/src/pages/SettingsPage/index.tsx

@@ -176,6 +176,26 @@ const SettingsPageWithClerk = () => {
 };
 
 const SettingsPageWithoutClerk = () => <SettingsPageBase />;
+const SettingsPageWithoutClerk = () => {
+  const isAdmin = useAuthStore((state) => state.isAdmin);
+
+  const additionalNavItems: SidebarNavItem[] = isAdmin
+    ? [
+        {
+          title: "Admin",
+          href: "/admin",
+          icon: (
+            <ForwardedIconComponent
+              name="Shield"
+              className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
+            />
+          ),
+        },
+      ]
+    : [];
+
+  return <SettingsPageBase additionalNavItems={additionalNavItems} />;
+};
 
 export default function SettingsPage(): JSX.Element {
   if (IS_CLERK_AUTH) {