chore: clean up React Doctor warnings in admin app

apps/admin/app/(all)/(dashboard)/ai/form.tsx

@@ -50,6 +50,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="OpenAI models documentation"
           >
             Learn more
           </a>
@@ -71,6 +72,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="OpenAI API keys page"
           >
             here.
           </a>

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -31,6 +31,11 @@ type Props = {
 
 type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
 
+const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+  name: "ENABLE_GITEA_SYNC",
+  label: "Gitea",
+};
+
 export function InstanceGiteaConfigForm(props: Props) {
   const { config } = props;
   // states
@@ -74,7 +79,6 @@ export function InstanceGiteaConfigForm(props: Props) {
         <>
           You will get this from your{" "}
           <a
-            tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -96,7 +100,6 @@ export function InstanceGiteaConfigForm(props: Props) {
         <>
           Your client secret is also found in your{" "}
           <a
-            tabIndex={-1}
             href="https://gitea.com/user/settings/applications"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -112,11 +115,6 @@ export function InstanceGiteaConfigForm(props: Props) {
     },
   ];
 
-  const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
-    name: "ENABLE_GITEA_SYNC",
-    label: "Gitea",
-  };
-
   const GITEA_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URI",
@@ -127,11 +125,11 @@ export function InstanceGiteaConfigForm(props: Props) {
           We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
           field{" "}
           <a
-            tabIndex={-1}
             href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="Gitea OAuth application settings"
           >
             here.
           </a>

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -32,6 +32,11 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
+const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
+  name: "ENABLE_GITHUB_SYNC",
+  label: "GitHub",
+};
+
 export function InstanceGithubConfigForm(props: Props) {
   const { config } = props;
   // states
@@ -64,7 +69,6 @@ export function InstanceGithubConfigForm(props: Props) {
         <>
           You will get this from your{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -86,7 +90,6 @@ export function InstanceGithubConfigForm(props: Props) {
         <>
           Your client secret is also found in your{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -111,11 +114,6 @@ export function InstanceGithubConfigForm(props: Props) {
     },
   ];
 
-  const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
-    name: "ENABLE_GITHUB_SYNC",
-    label: "GitHub",
-  };
-
   const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -125,11 +123,11 @@ export function InstanceGithubConfigForm(props: Props) {
         <>
           We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="GitHub OAuth application settings"
           >
             here.
           </a>
@@ -148,11 +146,11 @@ export function InstanceGithubConfigForm(props: Props) {
           We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
           field{" "}
           <a
-            tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="GitHub OAuth application settings"
           >
             here.
           </a>

apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

@@ -31,6 +31,11 @@ type Props = {
 
 type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
 
+const GITLAB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GitlabConfigFormValues> = {
+  name: "ENABLE_GITLAB_SYNC",
+  label: "GitLab",
+};
+
 export function InstanceGitlabConfigForm(props: Props) {
   const { config } = props;
   // states
@@ -76,7 +81,6 @@ export function InstanceGitlabConfigForm(props: Props) {
         <>
           Get this from your{" "}
           <a
-            tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -99,7 +103,6 @@ export function InstanceGitlabConfigForm(props: Props) {
         <>
           The client secret is also found in your{" "}
           <a
-            tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
             className="text-accent-primary hover:underline"
@@ -116,11 +119,6 @@ export function InstanceGitlabConfigForm(props: Props) {
     },
   ];
 
-  const GITLAB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GitlabConfigFormValues> = {
-    name: "ENABLE_GITLAB_SYNC",
-    label: "GitLab",
-  };
-
   const GITLAB_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URL",
@@ -130,7 +128,6 @@ export function InstanceGitlabConfigForm(props: Props) {
         <>
           We will auto-generate this. Paste this into the <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
           <a
-            tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
             className="text-accent-primary hover:underline"

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -32,6 +32,11 @@ type Props = {
 
 type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
 
+const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
+  name: "ENABLE_GOOGLE_SYNC",
+  label: "Google",
+};
+
 export function InstanceGoogleConfigForm(props: Props) {
   const { config } = props;
   // states
@@ -63,11 +68,11 @@ export function InstanceGoogleConfigForm(props: Props) {
         <>
           Your client ID lives in your Google API Console.{" "}
           <a
-            tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="Google OAuth client ID documentation"
           >
             Learn more
           </a>
@@ -85,11 +90,11 @@ export function InstanceGoogleConfigForm(props: Props) {
         <>
           Your client secret should also be in your Google API Console.{" "}
           <a
-            tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="Google OAuth client secret documentation"
           >
             Learn more
           </a>
@@ -101,11 +106,6 @@ export function InstanceGoogleConfigForm(props: Props) {
     },
   ];
 
-  const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
-    name: "ENABLE_GOOGLE_SYNC",
-    label: "Google",
-  };
-
   const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -120,6 +120,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="Google Cloud Console OAuth client credentials"
           >
             here.
           </a>
@@ -142,6 +143,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             target="_blank"
             className="text-accent-primary hover:underline"
             rel="noreferrer"
+            aria-label="Google Cloud Console OAuth client credentials"
           >
             here.
           </a>

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
@@ -105,8 +105,10 @@ const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(
     resolvedTheme,
   });
 
-  // Update ref with latest authentication modes
-  authenticationModesRef.current = authenticationModes;
+  // Update ref with latest authentication modes (updateConfig reads it only from event handlers)
+  useEffect(() => {
+    authenticationModesRef.current = authenticationModes;
+  }, [authenticationModes]);
 
   return (
     <PageWrapper

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -108,7 +108,7 @@ export function SendTestEmailModal(props: Props) {
                       onChange={(e) => setReceiverEmail(e.target.value)}
                       placeholder="Receiver email"
                       className="w-full resize-none text-16"
-                      tabIndex={1}
+                      tabIndex={0}
                     />
                   )}
                   {sendEmailStep === ESendEmailSteps.SUCCESS && (
@@ -122,11 +122,11 @@ export function SendTestEmailModal(props: Props) {
                   )}
                   {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
                   <div className="mt-5 flex items-center justify-end gap-2">
-                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
+                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={0}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={0}>
                         {isLoading ? "Sending email" : "Send email"}
                       </Button>
                     )}

apps/admin/app/(all)/(dashboard)/image/form.tsx

@@ -64,6 +64,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
                 target="_blank"
                 className="text-accent-primary hover:underline"
                 rel="noreferrer"
+                aria-label="Unsplash developer account documentation"
               >
                 Learn more.
               </a>

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -69,6 +69,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
+            aria-label="Help"
             className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
@@ -80,6 +81,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
+            aria-label="Toggle sidebar"
             className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -30,10 +30,10 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
 
   return (
     <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
-      {sidebarMenu.map((item, index) => {
-        const isActive = item.href === pathName || pathName?.includes(item.href);
+      {sidebarMenu.map((item) => {
+        const isActive = item.href === pathName || pathName?.startsWith(item.href);
         return (
-          <Link key={index} href={item.href} onClick={handleItemClick}>
+          <Link key={item.href} href={item.href} onClick={handleItemClick}>
             <div>
               <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <div

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -44,7 +44,13 @@ export function WorkspaceCreateForm() {
     formState: { errors, isSubmitting, isValid },
   } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
   // derived values
-  const workspaceBaseURL = encodeURI(WEB_BASE_URL || window.location.origin + "/");
+  const [workspaceBaseURL, setWorkspaceBaseURL] = useState(() => encodeURI(WEB_BASE_URL || ""));
+
+  useEffect(() => {
+    if (!WEB_BASE_URL) {
+      setWorkspaceBaseURL(encodeURI(window.location.origin + "/"));
+    }
+  }, []);
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
     await instanceWorkspaceService

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -25,12 +25,14 @@ export function AuthBanner(props: TAuthBanner) {
         <Info size={16} className="text-accent-primary" />
       </div>
       <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
-      <div
+      <button
+        type="button"
+        aria-label="Dismiss banner"
         className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <CloseIcon className="h-4 w-4 flex-shrink-0" />
-      </div>
+      </button>
     </div>
   );
 }

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -127,9 +127,7 @@ export function InstanceSignInForm() {
             {errorData.type && errorData?.message ? (
               <Banner type="error" message={errorData?.message} />
             ) : (
-              <>
-                {errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
-              </>
+              <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={setErrorInfo} />}</>
             )}
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
@@ -170,6 +168,7 @@ export function InstanceSignInForm() {
                 {showPassword ? (
                   <button
                     type="button"
+                    aria-label="Hide password"
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
@@ -178,6 +177,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
+                    aria-label="Show password"
                     className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >