feat: Instance Registration and Configuration (#2793)
* dev: remove default user * dev: initiate licensing * dev: remove migration file 0046 * feat: self hosted licensing initialize * dev: instance licenses * dev: change license response structure * dev: add default properties and issue mention migration * dev: reset migrations * dev: instance configuration * dev: instance configuration migration * dev: update instance configuration model to take null and empty values * dev: instance configuration variables * dev: set default values * dev: update instance configuration load * dev: email configuration settings moved to database * dev: instance configuration on instance bootup * dev: auto instance registration script * dev: instance admin * dev: enable instance configuration and instance admin roles * dev: instance owner fix * dev: instance configuration values * dev: fix instance permissions and serializer * dev: fix email senders * dev: remove deprecated variables * dev: fix current site domain registration * dev: update cors setup and local settings * dev: migrate instance registration and configuration to manage commands * dev: check email validity * dev: update script to use manage command * dev: default bucket creation script * dev: instance admin routes and initial set of screens * dev: admin api to check if the current user is admin * dev: instance admin unique constraints * dev: check magic link login * dev: fix email sending for ssl * dev: create instance activation route if the instance is not activated during startup * dev: removed DJANGO_SETTINGS_MODULE from environment files and deleted auto bucket create script * dev: environment configuration for backend * dev: fix access token variable error * feat: Instance Admin Panel: General Settings (#2792) --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
This commit is contained in:
sriram veeraghanta
parent
34ab188a99
commit
eb53876af3
78 changed files with 1950 additions and 290 deletions
126
web/components/instance/general-form.tsx
Normal file
126
web/components/instance/general-form.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import { FC } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// ui
|
||||
import { Button, Input, ToggleSwitch } from "@plane/ui";
|
||||
// types
|
||||
import { IInstance } from "types/instance";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export interface IInstanceGeneralForm {
|
||||
instance: IInstance;
|
||||
}
|
||||
|
||||
export interface GeneralFormValues {
|
||||
instance_name: string;
|
||||
is_telemetry_enabled: boolean;
|
||||
}
|
||||
|
||||
export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
|
||||
const { instance } = props;
|
||||
// store
|
||||
const { instance: instanceStore } = useMobxStore();
|
||||
// toast
|
||||
const { setToastAlert } = useToast();
|
||||
// form data
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<GeneralFormValues>({
|
||||
defaultValues: {
|
||||
instance_name: instance.instance_name,
|
||||
is_telemetry_enabled: instance.is_telemetry_enabled,
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (formData: GeneralFormValues) => {
|
||||
const payload: Partial<GeneralFormValues> = { ...formData };
|
||||
|
||||
await instanceStore
|
||||
.updateInstanceInfo(payload)
|
||||
.then(() =>
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Settings updated successfully",
|
||||
})
|
||||
)
|
||||
.catch((err) => console.error(err));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8 m-8">
|
||||
<div className="grid grid-col grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-8 w-full">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="text-sm">Name of instance</h4>
|
||||
<Controller
|
||||
control={control}
|
||||
name="instance_name"
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="instance_name"
|
||||
name="instance_name"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.instance_name)}
|
||||
placeholder="Instance Name"
|
||||
className="rounded-md font-medium w-full"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="text-sm">Admin Email</h4>
|
||||
<Input
|
||||
id="primary_email"
|
||||
name="primary_email"
|
||||
type="email"
|
||||
value={instance.primary_email}
|
||||
placeholder="Admin Email"
|
||||
className="w-full cursor-not-allowed !text-custom-text-400"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="text-sm">Instance Id</h4>
|
||||
<Input
|
||||
id="instance_id"
|
||||
name="instance_id"
|
||||
type="text"
|
||||
value={instance.instance_id}
|
||||
className="rounded-md font-medium w-full cursor-not-allowed !text-custom-text-400"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8 pt-4">
|
||||
<div>
|
||||
<div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</div>
|
||||
<div className="text-custom-text-300 font-normal text-xs">
|
||||
Help us understand how you use Plane so we can build better for you.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="is_telemetry_enabled"
|
||||
render={({ field: { value, onChange } }) => <ToggleSwitch value={value} onChange={onChange} size="sm" />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center py-1">
|
||||
<Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save Changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
134
web/components/instance/help-section.tsx
Normal file
134
web/components/instance/help-section.tsx
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { FC, useState, useRef } from "react";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import Link from "next/link";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// icons
|
||||
import { FileText, HelpCircle, MessagesSquare, MoveLeft } from "lucide-react";
|
||||
import { DiscordIcon, GithubIcon } from "@plane/ui";
|
||||
// assets
|
||||
import packageJson from "package.json";
|
||||
|
||||
const helpOptions = [
|
||||
{
|
||||
name: "Documentation",
|
||||
href: "https://docs.plane.so/",
|
||||
Icon: FileText,
|
||||
},
|
||||
{
|
||||
name: "Join our Discord",
|
||||
href: "https://discord.com/invite/A92xrEGCge",
|
||||
Icon: DiscordIcon,
|
||||
},
|
||||
{
|
||||
name: "Report a bug",
|
||||
href: "https://github.com/makeplane/plane/issues/new/choose",
|
||||
Icon: GithubIcon,
|
||||
},
|
||||
{
|
||||
name: "Chat with us",
|
||||
href: null,
|
||||
onClick: () => (window as any).$crisp.push(["do", "chat:show"]),
|
||||
Icon: MessagesSquare,
|
||||
},
|
||||
];
|
||||
|
||||
export const InstanceHelpSection: FC = () => {
|
||||
// states
|
||||
const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
|
||||
// store
|
||||
const {
|
||||
theme: { sidebarCollapsed, toggleSidebar },
|
||||
} = useMobxStore();
|
||||
// refs
|
||||
const helpOptionsRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
|
||||
sidebarCollapsed ? "flex-col" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`flex items-center gap-1 ${sidebarCollapsed ? "flex-col justify-center" : "justify-end w-full"}`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
|
||||
sidebarCollapsed ? "w-full" : ""
|
||||
}`}
|
||||
onClick={() => setIsNeedHelpOpen((prev) => !prev)}
|
||||
>
|
||||
<HelpCircle className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
<MoveLeft className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
|
||||
sidebarCollapsed ? "w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Transition
|
||||
show={isNeedHelpOpen}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
className={`absolute bottom-2 min-w-[10rem] ${
|
||||
sidebarCollapsed ? "left-full" : "-left-[75px]"
|
||||
} rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
|
||||
ref={helpOptionsRef}
|
||||
>
|
||||
<div className="space-y-1 pb-2">
|
||||
{helpOptions.map(({ name, Icon, href, onClick }) => {
|
||||
if (href)
|
||||
return (
|
||||
<Link href={href} key={name}>
|
||||
<a
|
||||
target="_blank"
|
||||
className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
>
|
||||
<div className="grid place-items-center flex-shrink-0">
|
||||
<Icon className="text-custom-text-200 h-3.5 w-3.5" size={14} />
|
||||
</div>
|
||||
<span className="text-xs">{name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={onClick ?? undefined}
|
||||
className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
|
||||
>
|
||||
<div className="grid place-items-center flex-shrink-0">
|
||||
<Icon className="text-custom-text-200 h-3.5 w-3.5" />
|
||||
</div>
|
||||
<span className="text-xs">{name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="px-2 pt-2 pb-1 text-[10px]">Version: v{packageJson.version}</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
4
web/components/instance/index.ts
Normal file
4
web/components/instance/index.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export * from "./help-section";
|
||||
export * from "./sidebar-menu";
|
||||
export * from "./sidebar-dropdown";
|
||||
export * from "./general-form";
|
||||
148
web/components/instance/sidebar-dropdown.tsx
Normal file
148
web/components/instance/sidebar-dropdown.tsx
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
import { Fragment } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { LogOut, Settings, Shield, UserCircle2 } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
// ui
|
||||
import { Avatar } from "@plane/ui";
|
||||
|
||||
// Static Data
|
||||
const profileLinks = (workspaceSlug: string, userId: string) => [
|
||||
{
|
||||
name: "View profile",
|
||||
icon: UserCircle2,
|
||||
link: `/${workspaceSlug}/profile/${userId}`,
|
||||
},
|
||||
{
|
||||
name: "Settings",
|
||||
icon: Settings,
|
||||
link: `/${workspaceSlug}/me/profile`,
|
||||
},
|
||||
];
|
||||
|
||||
const authService = new AuthService();
|
||||
|
||||
export const InstanceSidebarDropdown = observer(() => {
|
||||
const router = useRouter();
|
||||
// store
|
||||
const {
|
||||
theme: { sidebarCollapsed },
|
||||
workspace: { workspaceSlug },
|
||||
user: { currentUser, currentUserSettings },
|
||||
} = useMobxStore();
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
// redirect url for normal mode
|
||||
const redirectWorkspaceSlug =
|
||||
workspaceSlug ||
|
||||
currentUserSettings?.workspace?.last_workspace_slug ||
|
||||
currentUserSettings?.workspace?.fallback_workspace_slug ||
|
||||
"";
|
||||
|
||||
const handleSignOut = async () => {
|
||||
await authService
|
||||
.signOut()
|
||||
.then(() => {
|
||||
router.push("/");
|
||||
})
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Failed to sign out. Please try again.",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-x-3 gap-y-2 px-4 py-4">
|
||||
<div className="w-full h-full truncate">
|
||||
<div
|
||||
className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`flex-shrink-0 `}>
|
||||
<Shield className="h-6 w-6 text-custom-text-100" />
|
||||
</div>
|
||||
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-100 font-medium text-base truncate">Instance Admin Settings</h4>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!sidebarCollapsed && (
|
||||
<Menu as="div" className="relative flex-shrink-0">
|
||||
<Menu.Button className="grid place-items-center outline-none">
|
||||
<Avatar
|
||||
name={currentUser?.display_name}
|
||||
src={currentUser?.avatar}
|
||||
size={24}
|
||||
shape="square"
|
||||
className="!text-base"
|
||||
/>
|
||||
</Menu.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items
|
||||
className="absolute left-0 z-20 mt-1.5 flex flex-col w-52 origin-top-left rounded-md
|
||||
border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
|
||||
>
|
||||
<div className="flex flex-col gap-2.5 pb-2">
|
||||
<span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
|
||||
{profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
|
||||
<Menu.Item key={index} as="button" type="button">
|
||||
<Link href={link.link}>
|
||||
<a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
|
||||
<link.icon className="h-4 w-4 stroke-[1.5]" />
|
||||
{link.name}
|
||||
</a>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
<div className="py-2">
|
||||
<Menu.Item
|
||||
as="button"
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
|
||||
onClick={handleSignOut}
|
||||
>
|
||||
<LogOut className="h-4 w-4 stroke-[1.5]" />
|
||||
Sign out
|
||||
</Menu.Item>
|
||||
</div>
|
||||
|
||||
<div className="p-2 pb-0">
|
||||
<Menu.Item as="button" type="button" className="w-full">
|
||||
<Link href={redirectWorkspaceSlug}>
|
||||
<a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-10 hover:bg-custom-primary-20">
|
||||
Normal Mode
|
||||
</a>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
65
web/components/instance/sidebar-menu.tsx
Normal file
65
web/components/instance/sidebar-menu.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
|
||||
const INSTANCE_ADMIN_LINKS = [
|
||||
{
|
||||
Icon: LayoutGrid,
|
||||
name: "General",
|
||||
href: `/admin`,
|
||||
},
|
||||
{
|
||||
Icon: BarChart2,
|
||||
name: "OAuth",
|
||||
href: `/admin/oauth`,
|
||||
},
|
||||
{
|
||||
Icon: Briefcase,
|
||||
name: "Email",
|
||||
href: `/admin/email`,
|
||||
},
|
||||
{
|
||||
Icon: CheckCircle,
|
||||
name: "AI",
|
||||
href: `/admin/ai`,
|
||||
},
|
||||
];
|
||||
|
||||
export const InstanceAdminSidebarMenu = () => {
|
||||
const {
|
||||
theme: { sidebarCollapsed },
|
||||
} = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto w-full cursor-pointer space-y-2 p-4">
|
||||
{INSTANCE_ADMIN_LINKS.map((item, index) => {
|
||||
const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;
|
||||
|
||||
return (
|
||||
<Link key={index} href={item.href}>
|
||||
<a className="block w-full">
|
||||
<Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
|
||||
<div
|
||||
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
||||
isActive
|
||||
? "bg-custom-primary-100/10 text-custom-primary-100"
|
||||
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
||||
} ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
>
|
||||
{<item.Icon className="h-4 w-4" />}
|
||||
{!sidebarCollapsed && item.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -53,7 +53,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
const {
|
||||
theme: { sidebarCollapsed },
|
||||
workspace: { workspaces, currentWorkspace: activeWorkspace },
|
||||
user: { currentUser, updateCurrentUser },
|
||||
user: { currentUser, updateCurrentUser, isUserInstanceAdmin },
|
||||
} = useMobxStore();
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
|
|
@ -286,7 +286,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
</Menu.Item>
|
||||
))}
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<div className="py-2">
|
||||
<Menu.Item
|
||||
as="button"
|
||||
type="button"
|
||||
|
|
@ -297,6 +297,17 @@ export const WorkspaceSidebarDropdown = observer(() => {
|
|||
Sign out
|
||||
</Menu.Item>
|
||||
</div>
|
||||
{isUserInstanceAdmin && (
|
||||
<div className="p-2 pb-0">
|
||||
<Menu.Item as="button" type="button" className="w-full">
|
||||
<Link href="/admin">
|
||||
<a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-10 hover:bg-custom-primary-20">
|
||||
God Mode
|
||||
</a>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
|
|
|||
47
web/layouts/admin-layout/header.tsx
Normal file
47
web/layouts/admin-layout/header.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { FC } from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
// mobx
|
||||
import { observer } from "mobx-react-lite";
|
||||
// ui
|
||||
import { Breadcrumbs } from "@plane/ui";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// icons
|
||||
import { ArrowLeftToLine, Settings } from "lucide-react";
|
||||
|
||||
export const InstanceAdminHeader: FC = observer(() => {
|
||||
const {
|
||||
workspace: { workspaceSlug },
|
||||
user: { currentUserSettings },
|
||||
} = useMobxStore();
|
||||
|
||||
const redirectWorkspaceSlug =
|
||||
workspaceSlug ||
|
||||
currentUserSettings?.workspace?.last_workspace_slug ||
|
||||
currentUserSettings?.workspace?.fallback_workspace_slug ||
|
||||
"";
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
|
||||
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
|
||||
<div>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
type="text"
|
||||
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
|
||||
label="General"
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Link href={redirectWorkspaceSlug}>
|
||||
<a>
|
||||
<ArrowLeftToLine className="h-4 w-4 text-custom-text-300" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
3
web/layouts/admin-layout/index.ts
Normal file
3
web/layouts/admin-layout/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from "./layout";
|
||||
export * from "./sidebar";
|
||||
export * from "./header";
|
||||
32
web/layouts/admin-layout/layout.tsx
Normal file
32
web/layouts/admin-layout/layout.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
// layouts
|
||||
import { UserAuthWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { InstanceAdminSidebar } from "./sidebar";
|
||||
import { InstanceAdminHeader } from "./header";
|
||||
|
||||
export interface IInstanceAdminLayout {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
||||
const { children } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<UserAuthWrapper>
|
||||
<div className="relative flex h-screen w-full overflow-hidden">
|
||||
<InstanceAdminSidebar />
|
||||
<main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
|
||||
<InstanceAdminHeader />
|
||||
<div className="h-full w-full overflow-hidden">
|
||||
<div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
|
||||
<>{children}</>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</UserAuthWrapper>
|
||||
</>
|
||||
);
|
||||
};
|
||||
28
web/layouts/admin-layout/sidebar.tsx
Normal file
28
web/layouts/admin-layout/sidebar.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { InstanceAdminSidebarMenu, InstanceHelpSection, InstanceSidebarDropdown } from "components/instance";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export interface IInstanceAdminSidebar {}
|
||||
|
||||
export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
|
||||
// store
|
||||
const { theme: themStore } = useMobxStore();
|
||||
|
||||
return (
|
||||
<div
|
||||
id="app-sidebar"
|
||||
className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
|
||||
themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
|
||||
} ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
|
||||
>
|
||||
<div className="flex h-full w-full flex-1 flex-col">
|
||||
<InstanceSidebarDropdown />
|
||||
<InstanceAdminSidebarMenu />
|
||||
<InstanceHelpSection />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -14,7 +14,7 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
|
|||
const { children } = props;
|
||||
// store
|
||||
const {
|
||||
user: { fetchCurrentUser, fetchCurrentUserSettings },
|
||||
user: { fetchCurrentUser, fetchCurrentUserInstanceAdminStatus, fetchCurrentUserSettings },
|
||||
workspace: { fetchWorkspaces },
|
||||
} = useMobxStore();
|
||||
// router
|
||||
|
|
@ -23,6 +23,10 @@ export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
|
|||
const { data: currentUser, error } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
|
||||
shouldRetryOnError: false,
|
||||
});
|
||||
// fetching current user instance admin status
|
||||
useSWR("CURRENT_USER_INSTANCE_ADMIN_STATUS", () => fetchCurrentUserInstanceAdminStatus(), {
|
||||
shouldRetryOnError: false,
|
||||
});
|
||||
// fetching user settings
|
||||
useSWR("CURRENT_USER_SETTINGS", () => fetchCurrentUserSettings(), {
|
||||
shouldRetryOnError: false,
|
||||
|
|
|
|||
16
web/pages/admin/ai.tsx
Normal file
16
web/pages/admin/ai.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { ReactElement } from "react";
|
||||
// layouts
|
||||
import { InstanceAdminLayout } from "layouts/admin-layout";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
const InstanceAdminAIPage: NextPageWithLayout = () => {
|
||||
console.log("admin page");
|
||||
return <div>Admin AI Page</div>;
|
||||
};
|
||||
|
||||
InstanceAdminAIPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
|
||||
};
|
||||
|
||||
export default InstanceAdminAIPage;
|
||||
16
web/pages/admin/email.tsx
Normal file
16
web/pages/admin/email.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { ReactElement } from "react";
|
||||
// layouts
|
||||
import { InstanceAdminLayout } from "layouts/admin-layout";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
const InstanceAdminEmailPage: NextPageWithLayout = () => {
|
||||
console.log("admin page");
|
||||
return <div>Admin Email Page</div>;
|
||||
};
|
||||
|
||||
InstanceAdminEmailPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
|
||||
};
|
||||
|
||||
export default InstanceAdminEmailPage;
|
||||
28
web/pages/admin/index.tsx
Normal file
28
web/pages/admin/index.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { ReactElement } from "react";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// layouts
|
||||
import { InstanceAdminLayout } from "layouts/admin-layout";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
// store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { InstanceGeneralForm } from "components/instance";
|
||||
|
||||
const InstanceAdminPage: NextPageWithLayout = observer(() => {
|
||||
// store
|
||||
const {
|
||||
instance: { fetchInstanceInfo, instance },
|
||||
} = useMobxStore();
|
||||
|
||||
useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
|
||||
|
||||
return <div>{instance && <InstanceGeneralForm instance={instance} />}</div>;
|
||||
});
|
||||
|
||||
InstanceAdminPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
|
||||
};
|
||||
|
||||
export default InstanceAdminPage;
|
||||
16
web/pages/admin/oauth.tsx
Normal file
16
web/pages/admin/oauth.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { ReactElement } from "react";
|
||||
// layouts
|
||||
import { InstanceAdminLayout } from "layouts/admin-layout";
|
||||
// types
|
||||
import { NextPageWithLayout } from "types/app";
|
||||
|
||||
const InstanceAdminOAuthPage: NextPageWithLayout = () => {
|
||||
console.log("admin page");
|
||||
return <div>Admin oauth Page</div>;
|
||||
};
|
||||
|
||||
InstanceAdminOAuthPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return <InstanceAdminLayout>{page}</InstanceAdminLayout>;
|
||||
};
|
||||
|
||||
export default InstanceAdminOAuthPage;
|
||||
37
web/services/instance.service.ts
Normal file
37
web/services/instance.service.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { APIService } from "services/api.service";
|
||||
// helpers
|
||||
import { API_BASE_URL } from "helpers/common.helper";
|
||||
// types
|
||||
import type { IInstance } from "types/instance";
|
||||
|
||||
export class InstanceService extends APIService {
|
||||
constructor() {
|
||||
super(API_BASE_URL);
|
||||
}
|
||||
|
||||
async getInstanceInfo(): Promise<IInstance> {
|
||||
return this.get("/api/licenses/instances/")
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
async updateInstanceInfo(
|
||||
data: Partial<IInstance>
|
||||
): Promise<IInstance> {
|
||||
return this.patch("/api/licenses/instances/", data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
})
|
||||
}
|
||||
|
||||
async getInstanceConfigurations() {
|
||||
return this.get("/api/licenses/instances/configurations/")
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import type {
|
|||
IIssue,
|
||||
IUser,
|
||||
IUserActivityResponse,
|
||||
IInstanceAdminStatus,
|
||||
IUserProfileData,
|
||||
IUserProfileProjectSegregation,
|
||||
IUserSettings,
|
||||
|
|
@ -54,6 +55,14 @@ export class UserService extends APIService {
|
|||
});
|
||||
}
|
||||
|
||||
async currentUserInstanceAdminStatus(): Promise<IInstanceAdminStatus> {
|
||||
return this.get("/api/users/me/instance-admin/")
|
||||
.then((respone) => respone?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async currentUserSettings(): Promise<IUserSettings> {
|
||||
return this.get("/api/users/me/settings/")
|
||||
.then((response) => response?.data)
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export class WorkspaceService extends APIService {
|
|||
}
|
||||
|
||||
async joinWorkspace(workspaceSlug: string, invitationId: string, data: any, user: IUser | undefined): Promise<any> {
|
||||
return this.post(`/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`, data, {
|
||||
return this.post(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/join/`, data, {
|
||||
headers: {},
|
||||
})
|
||||
.then((response) => {
|
||||
|
|
@ -109,7 +109,7 @@ export class WorkspaceService extends APIService {
|
|||
}
|
||||
|
||||
async joinWorkspaces(data: any): Promise<any> {
|
||||
return this.post("/api/users/me/invitations/workspaces/", data)
|
||||
return this.post("/api/users/me/workspaces/invitations/", data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
|
|
@ -125,7 +125,7 @@ export class WorkspaceService extends APIService {
|
|||
}
|
||||
|
||||
async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
|
||||
return this.get("/api/users/me/invitations/workspaces/")
|
||||
return this.get("/api/users/me/workspaces/invitations/")
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
|
|
|
|||
1
web/store/instance/index.ts
Normal file
1
web/store/instance/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from "./instance.store";
|
||||
111
web/store/instance/instance.store.ts
Normal file
111
web/store/instance/instance.store.ts
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
import { observable, action, computed, makeObservable, runInAction } from "mobx";
|
||||
// store
|
||||
import { RootStore } from "../root";
|
||||
// types
|
||||
import { IInstance } from "types/instance";
|
||||
// services
|
||||
import { InstanceService } from "services/instance.service";
|
||||
|
||||
export interface IInstanceStore {
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
// issues
|
||||
instance: IInstance | null;
|
||||
configurations: any | null;
|
||||
// computed
|
||||
// action
|
||||
fetchInstanceInfo: () => Promise<IInstance>;
|
||||
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
|
||||
fetchInstanceConfigurations: () => Promise<any>;
|
||||
}
|
||||
|
||||
export class InstanceStore implements IInstanceStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
instance: IInstance | null = null;
|
||||
configurations: any | null = null;
|
||||
// service
|
||||
instanceService;
|
||||
rootStore;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
instance: observable.ref,
|
||||
configurations: observable.ref,
|
||||
// computed
|
||||
// getIssueType: computed,
|
||||
// actions
|
||||
fetchInstanceInfo: action,
|
||||
updateInstanceInfo: action,
|
||||
fetchInstanceConfigurations: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.instanceService = new InstanceService();
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch instace info from API
|
||||
*/
|
||||
fetchInstanceInfo = async () => {
|
||||
try {
|
||||
const instance = await this.instanceService.getInstanceInfo();
|
||||
runInAction(() => {
|
||||
this.instance = instance;
|
||||
});
|
||||
return instance;
|
||||
} catch (error) {
|
||||
console.log("Error while fetching the instance");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* update instance info
|
||||
* @param data
|
||||
*/
|
||||
updateInstanceInfo = async (data: Partial<IInstance>) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
const response = await this.instanceService.updateInstanceInfo(data);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = null;
|
||||
this.instance = response;
|
||||
});
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* fetch instace configurations from API
|
||||
*/
|
||||
fetchInstanceConfigurations = async () => {
|
||||
try {
|
||||
const configurations = await this.instanceService.getInstanceConfigurations();
|
||||
runInAction(() => {
|
||||
this.configurations = configurations;
|
||||
});
|
||||
return configurations;
|
||||
} catch (error) {
|
||||
console.log("Error while fetching the instance");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { enableStaticRendering } from "mobx-react-lite";
|
||||
// store imports
|
||||
import { InstanceStore, IInstanceStore } from "./instance";
|
||||
import AppConfigStore, { IAppConfigStore } from "./app-config.store";
|
||||
import CommandPaletteStore, { ICommandPaletteStore } from "./command-palette.store";
|
||||
import UserStore, { IUserStore } from "store/user.store";
|
||||
|
|
@ -116,6 +117,8 @@ import { IMentionsStore, MentionsStore } from "store/editor";
|
|||
enableStaticRendering(typeof window === "undefined");
|
||||
|
||||
export class RootStore {
|
||||
instance: IInstanceStore;
|
||||
|
||||
user: IUserStore;
|
||||
theme: IThemeStore;
|
||||
appConfig: IAppConfigStore;
|
||||
|
|
@ -184,6 +187,8 @@ export class RootStore {
|
|||
mentionsStore: IMentionsStore;
|
||||
|
||||
constructor() {
|
||||
this.instance = new InstanceStore(this);
|
||||
|
||||
this.appConfig = new AppConfigStore(this);
|
||||
this.commandPalette = new CommandPaletteStore(this);
|
||||
this.user = new UserStore(this);
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export interface IUserStore {
|
|||
|
||||
isUserLoggedIn: boolean | null;
|
||||
currentUser: IUser | null;
|
||||
isUserInstanceAdmin: boolean | null;
|
||||
currentUserSettings: IUserSettings | null;
|
||||
|
||||
dashboardInfo: any;
|
||||
|
|
@ -41,6 +42,7 @@ export interface IUserStore {
|
|||
hasPermissionToCurrentProject: boolean | undefined;
|
||||
|
||||
fetchCurrentUser: () => Promise<IUser>;
|
||||
fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
|
||||
fetchCurrentUserSettings: () => Promise<IUserSettings>;
|
||||
|
||||
fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
|
||||
|
|
@ -58,6 +60,7 @@ class UserStore implements IUserStore {
|
|||
|
||||
isUserLoggedIn: boolean | null = null;
|
||||
currentUser: IUser | null = null;
|
||||
isUserInstanceAdmin: boolean | null = null;
|
||||
currentUserSettings: IUserSettings | null = null;
|
||||
|
||||
dashboardInfo: any = null;
|
||||
|
|
@ -87,7 +90,9 @@ class UserStore implements IUserStore {
|
|||
makeObservable(this, {
|
||||
// observable
|
||||
loader: observable.ref,
|
||||
isUserLoggedIn: observable.ref,
|
||||
currentUser: observable.ref,
|
||||
isUserInstanceAdmin: observable.ref,
|
||||
currentUserSettings: observable.ref,
|
||||
dashboardInfo: observable.ref,
|
||||
workspaceMemberInfo: observable.ref,
|
||||
|
|
@ -96,6 +101,7 @@ class UserStore implements IUserStore {
|
|||
hasPermissionToProject: observable.ref,
|
||||
// action
|
||||
fetchCurrentUser: action,
|
||||
fetchCurrentUserInstanceAdminStatus: action,
|
||||
fetchCurrentUserSettings: action,
|
||||
fetchUserDashboardInfo: action,
|
||||
fetchUserWorkspaceInfo: action,
|
||||
|
|
@ -167,6 +173,23 @@ class UserStore implements IUserStore {
|
|||
}
|
||||
};
|
||||
|
||||
fetchCurrentUserInstanceAdminStatus = async () => {
|
||||
try {
|
||||
const response = await this.userService.currentUserInstanceAdminStatus();
|
||||
if (response) {
|
||||
runInAction(() => {
|
||||
this.isUserInstanceAdmin = response.is_instance_admin;
|
||||
})
|
||||
}
|
||||
return response.is_instance_admin;
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.isUserInstanceAdmin = false;
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
fetchCurrentUserSettings = async () => {
|
||||
try {
|
||||
const response = await this.userService.currentUserSettings();
|
||||
|
|
|
|||
22
web/types/instance.d.ts
vendored
Normal file
22
web/types/instance.d.ts
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { IUserLite } from "./users";
|
||||
|
||||
export interface IInstance {
|
||||
id: string;
|
||||
primary_owner_details: IUserLite;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
instance_name: string;
|
||||
whitelist_emails: string | null;
|
||||
instance_id: string;
|
||||
license_key: string | null;
|
||||
api_key: string;
|
||||
version: string;
|
||||
primary_email: string;
|
||||
last_checked_at: string;
|
||||
namespace: string | null;
|
||||
is_telemetry_enabled: boolean;
|
||||
is_support_required: boolean;
|
||||
created_by: string | null;
|
||||
updated_by: string | null;
|
||||
primary_owner: string;
|
||||
}
|
||||
4
web/types/users.d.ts
vendored
4
web/types/users.d.ts
vendored
|
|
@ -29,6 +29,10 @@ export interface IUser {
|
|||
theme: IUserTheme;
|
||||
}
|
||||
|
||||
export interface IInstanceAdminStatus {
|
||||
is_instance_admin: boolean;
|
||||
}
|
||||
|
||||
export interface IUserSettings {
|
||||
id: string;
|
||||
email: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue