[WEB-1657] dev: admin application code structuring. (#4867)

* [WEB-1657] dev: admin application code structuring.

* chore: update mobx-react-lite import to mobx-react.

admin/app/ai/page.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components

admin/app/authentication/github/page.tsx

@@ -7,7 +7,8 @@ import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
 // helpers
 import { resolveGeneralTheme } from "@/helpers/common.helper";
 // hooks
@@ -16,7 +17,6 @@ import { useInstance } from "@/hooks/store";
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
 // local components
-import { AuthenticationMethodCard } from "../components";
 import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(() => {

admin/app/authentication/gitlab/page.tsx

@@ -6,13 +6,13 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
 import GitlabLogo from "@/public/logos/gitlab-logo.svg";
 // local components
-import { AuthenticationMethodCard } from "../components";
 import { InstanceGitlabConfigForm } from "./form";
 
 const InstanceGitlabAuthenticationPage = observer(() => {

admin/app/authentication/google/page.tsx

@@ -6,13 +6,13 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
 import GoogleLogo from "@/public/logos/google-logo.svg";
 // local components
-import { AuthenticationMethodCard } from "../components";
 import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(() => {

admin/app/authentication/page.tsx

@@ -2,40 +2,16 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
 import useSWR from "swr";
-import { Mails, KeyRound } from "lucide-react";
 import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// components
-import { PageHeader } from "@/components/core";
-// hooks
+import { PageHeader } from "@/components/common";
 // helpers
-import { cn, resolveGeneralTheme } from "@/helpers/common.helper";
+import { cn } from "@/helpers/common.helper";
+// hooks
 import { useInstance } from "@/hooks/store";
-// images
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-// local components
-import {
-  AuthenticationMethodCard,
-  EmailCodesConfiguration,
-  PasswordLoginConfiguration,
-  GitlabConfiguration,
-  GithubConfiguration,
-  GoogleConfiguration,
-} from "./components";
-
-type TInstanceAuthenticationMethodCard = {
-  key: string;
-  name: string;
-  description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
-};
+// plane admin components
+import { AuthenticationModes } from "@/plane-admin/components/authentication";
 
 const InstanceAuthenticationPage = observer(() => {
   // store
@@ -45,8 +21,6 @@ const InstanceAuthenticationPage = observer(() => {
 
   // state
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // theme
-  const { resolvedTheme } = useTheme();
   // derived values
   const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
@@ -81,52 +55,6 @@ const InstanceAuthenticationPage = observer(() => {
       });
   };
 
-  // Authentication methods
-  const authenticationMethodsCard: TInstanceAuthenticationMethodCard[] = [
-    {
-      key: "email-codes",
-      name: "Email codes",
-      description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
-      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <EmailCodesConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-    {
-      key: "password-login",
-      name: "Password based login",
-      description: "Allow members to create accounts with passwords for emails to sign in.",
-      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <PasswordLoginConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-    {
-      key: "google",
-      name: "Google",
-      description: "Allow members to login or sign up to plane with their Google accounts.",
-      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
-      config: <GoogleConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-    {
-      key: "github",
-      name: "Github",
-      description: "Allow members to login or sign up to plane with their Github accounts.",
-      icon: (
-        <Image
-          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-          height={20}
-          width={20}
-          alt="GitHub Logo"
-        />
-      ),
-      config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-    {
-      key: "gitlab",
-      name: "GitLab",
-      description: "Allow members to login or sign up to plane with their GitLab accounts.",
-      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-      config: <GitlabConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
-    },
-  ];
-
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
@@ -168,16 +96,7 @@ const InstanceAuthenticationPage = observer(() => {
                 </div>
               </div>
               <div className="text-lg font-medium pt-6">Authentication modes</div>
-              {authenticationMethodsCard.map((method) => (
-                <AuthenticationMethodCard
-                  key={method.key}
-                  name={method.name}
-                  description={method.description}
-                  icon={method.icon}
-                  config={method.config}
-                  disabled={isSubmitting}
-                />
-              ))}
+              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </div>
           ) : (
             <Loader className="space-y-10">

admin/app/email/page.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components

admin/app/image/page.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
 // components
-import { PageHeader } from "@/components/core";
+import { PageHeader } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local

admin/app/layout.tsx

@@ -16,10 +16,12 @@ import { UserProvider } from "@/lib/user-provider";
 // styles
 import "./globals.css";
 
-export default function RootLayout({ children }: { children: ReactNode }) {
-  // themes
+const ToastWithTheme = () => {
   const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};
 
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -31,7 +33,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       </head>
       <body className={`antialiased`}>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <Toast theme={resolveGeneralTheme(resolvedTheme)} />
+          <ToastWithTheme />
           <SWRConfig value={SWR_CONFIG}>
             <StoreProvider>
               <InstanceProvider>

admin/ce/components/authentication/authentication-modes.tsx

@@ -0,0 +1,104 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { KeyRound, Mails } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys, TInstanceAuthenticationModes } from "@plane/types";
+// components
+import {
+  AuthenticationMethodCard,
+  EmailCodesConfiguration,
+  GithubConfiguration,
+  GitlabConfiguration,
+  GoogleConfiguration,
+  PasswordLoginConfiguration,
+} from "@/components/authentication";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+
+export type TAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export type TGetAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+  resolvedTheme: string | undefined;
+};
+
+// Authentication methods
+export const getAuthenticationModes: (props: TGetAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+    {
+      key: "email-codes",
+      name: "Email codes",
+      description: "Login or sign up using codes sent via emails. You need to have email setup here and enabled.",
+      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "password-login",
+      name: "Password based login",
+      description: "Allow members to create accounts with passwords for emails to sign in.",
+      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+      config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "google",
+      name: "Google",
+      description: "Allow members to login or sign up to plane with their Google accounts.",
+      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+      config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "github",
+      name: "Github",
+      description: "Allow members to login or sign up to plane with their Github accounts.",
+      icon: (
+        <Image
+          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+          height={20}
+          width={20}
+          alt="GitHub Logo"
+        />
+      ),
+      config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+    {
+      key: "gitlab",
+      name: "GitLab",
+      description: "Allow members to login or sign up to plane with their GitLab accounts.",
+      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+      config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+    },
+  ];
+
+export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // next-themes
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
+        <AuthenticationMethodCard
+          key={method.key}
+          name={method.name}
+          description={method.description}
+          icon={method.icon}
+          config={method.config}
+          disabled={disabled}
+        />
+      ))}
+    </>
+  );
+});

admin/ce/components/authentication/index.ts

@@ -0,0 +1 @@
+export * from "./authentication-modes";

admin/components/common/toast.tsx

@@ -1,13 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-// ui
-import { Toast as ToastComponent } from "@plane/ui";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
-
-export const Toast = () => {
-  const { theme } = useTheme();
-
-  return <ToastComponent theme={resolveGeneralTheme(theme)} />;
-};

admin/components/core/index.ts

@@ -1 +0,0 @@
-export * from "./page-header";

admin/core/components/admin-sidebar/root.tsx

@@ -5,10 +5,10 @@ import { observer } from "mobx-react";
 // hooks
 import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 import { useTheme } from "@/hooks/store";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 // components
 
-export interface IInstanceSidebar {}
+export interface IInstanceSidebar { }
 
 export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
   // store

admin/core/components/auth-header.tsx

@@ -10,7 +10,7 @@ import { Settings } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "components/common";
+import { BreadcrumbLink } from "@/components/common";
 
 export const InstanceHeader: FC = observer(() => {
   const pathName = usePathname();

admin/core/components/common/index.ts

@@ -6,4 +6,4 @@ export * from "./password-strength-meter";
 export * from "./banner";
 export * from "./empty-state";
 export * from "./logo-spinner";
-export * from "./toast";
+export * from "./page-header";

admin/core/services/auth.service.ts

@@ -1,7 +1,7 @@
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // services
-import { APIService } from "services/api.service";
+import { APIService } from "@/services/api.service";
 
 type TCsrfTokenResponse = {
   csrf_token: string;

admin/core/services/user.service.ts

@@ -1,9 +1,9 @@
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
-// services
-import { APIService } from "services/api.service";
 // types
 import type { IUser } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
 
 interface IUserSession extends IUser {
   isAuthenticated: boolean;

admin/core/store/instance.store.ts

@@ -9,7 +9,7 @@ import {
   IInstanceConfig,
 } from "@plane/types";
 // helpers
-import { EInstanceStatus, TInstanceStatus } from "@/helpers";
+import { EInstanceStatus, TInstanceStatus } from "@/helpers/instance.helper";
 // services
 import { InstanceService } from "@/services/instance.service";
 // root store

admin/core/store/user.store.ts

@@ -1,7 +1,7 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
 import { IUser } from "@plane/types";
 // helpers
-import { EUserStatus, TUserStatus } from "@/helpers";
+import { EUserStatus, TUserStatus } from "@/helpers/user.helper";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";

admin/ee/components/authentication/authentication-modes.tsx

@@ -0,0 +1 @@
+export * from "ce/components/authentication/authentication-modes";

admin/ee/components/authentication/index.ts

@@ -0,0 +1 @@
+export * from "./authentication-modes";

admin/tsconfig.json

@@ -7,7 +7,10 @@
     "jsx": "preserve",
     "esModuleInterop": true,
     "paths": {
-      "@/*": ["*"]
+      "@/*": ["core/*"],
+      "@/helpers/*": ["helpers/*"],
+      "@/public/*": ["public/*"],
+      "@/plane-admin/*": ["ce/*"]
     },
     "plugins": [
       {

packages/types/src/instance/auth.d.ts

@@ -1,3 +1,11 @@
+export type TInstanceAuthenticationModes = {
+  key: string;
+  name: string;
+  description: string;
+  icon: JSX.Element;
+  config: JSX.Element;
+};
+
 export type TInstanceAuthenticationMethodKeys =
   | "ENABLE_SIGNUP"
   | "ENABLE_MAGIC_LINK_LOGIN"