Skip to content

Commit 0c795e9

Browse files
prateekshourya29prateekshourya29
authored
[WEB-5798] refactor: web and admin auth related components and update admin designs (#8431)
* refactor: web and admin auth related components and update admin designs. * fix: format
1 parent 777200d commit 0c795e9

File tree

80 files changed

+1085
-948
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+1085
-948
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,13 +114,13 @@ export function InstanceAIForm(props: IInstanceAIForm) {
114114
</div>
115115
</div>
116116

117-
<div className="flex flex-col gap-2 items-start">
117+
<div className="flex flex-col gap-4 items-start">
118118
<Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
119-
{isSubmitting ? "Saving..." : "Save changes"}
119+
{isSubmitting ? "Saving" : "Save changes"}
120120
</Button>
121121

122-
<div className="relative inline-flex items-center gap-2 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-4 py-2 text-11 text-accent-secondary">
123-
<Lightbulb height="14" width="14" />
122+
<div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary ">
123+
<Lightbulb className="size-4" />
124124
<div>
125125
If you have a preferred AI models vendor, please get in{" "}
126126
<a className="underline font-medium" href="https://plane.so/contact">

‎apps/admin/app/(all)/(dashboard)/ai/page.tsx‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { observer } from "mobx-react";
22
import useSWR from "swr";
33
import { Loader } from "@plane/ui";
4+
// components
5+
import { PageWrapper } from "@/components/common/page-wrapper";
46
// hooks
57
import { useInstance } from "@/hooks/store";
6-
// components
8+
// types
79
import type { Route } from "./+types/page";
10+
// local
811
import { InstanceAIForm } from "./form";
912

1013
const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
@@ -14,30 +17,25 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
1417
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
1518

1619
return (
17-
<>
18-
<div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
19-
<div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
20-
<div className="text-18 font-medium text-primary">AI features for all your workspaces</div>
21-
<div className="text-13 font-regular text-tertiary">
22-
Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
20+
<PageWrapper
21+
header={{
22+
title: "AI features for all your workspaces",
23+
description: "Configure your AI API credentials so Plane AI features are turned on for all your workspaces.",
24+
}}
25+
>
26+
{formattedConfig ? (
27+
<InstanceAIForm config={formattedConfig} />
28+
) : (
29+
<Loader className="space-y-8">
30+
<Loader.Item height="50px" width="40%" />
31+
<div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
32+
<Loader.Item height="50px" />
33+
<Loader.Item height="50px" />
2334
</div>
24-
</div>
25-
<div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
26-
{formattedConfig ? (
27-
<InstanceAIForm config={formattedConfig} />
28-
) : (
29-
<Loader className="space-y-8">
30-
<Loader.Item height="50px" width="40%" />
31-
<div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
32-
<Loader.Item height="50px" />
33-
<Loader.Item height="50px" />
34-
</div>
35-
<Loader.Item height="50px" width="20%" />
36-
</Loader>
37-
)}
38-
</div>
39-
</div>
40-
</>
35+
<Loader.Item height="50px" width="20%" />
36+
</Loader>
37+
)}
38+
</PageWrapper>
4139
);
4240
});
4341

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export function InstanceGiteaConfigForm(props: Props) {
196196
loading={isSubmitting}
197197
disabled={!isDirty}
198198
>
199-
{isSubmitting ? "Saving..." : "Save changes"}
199+
{isSubmitting ? "Saving" : "Save changes"}
200200
</Button>
201201
<Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
202202
Go back
@@ -205,7 +205,7 @@ export function InstanceGiteaConfigForm(props: Props) {
205205
</div>
206206
</div>
207207
<div className="col-span-2 md:col-span-1">
208-
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1/60 rounded-lg">
208+
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1 rounded-lg">
209209
<div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
210210
{GITEA_SERVICE_FIELD.map((field) => (
211211
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />

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

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ import useSWR from "swr";
44
// plane internal packages
55
import { setPromiseToast } from "@plane/propel/toast";
66
import { Loader, ToggleSwitch } from "@plane/ui";
7-
// components
7+
// assets
88
import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
9+
// components
910
import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
11+
import { PageWrapper } from "@/components/common/page-wrapper";
1012
// hooks
1113
import { useInstance } from "@/hooks/store";
12-
//local components
14+
// types
1315
import type { Route } from "./+types/page";
16+
// local
1417
import { InstanceGiteaConfigForm } from "./form";
1518

1619
const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
@@ -32,7 +35,7 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
3235
const updateConfigPromise = updateInstanceConfigurations(payload);
3336

3437
setPromiseToast(updateConfigPromise, {
35-
loading: "Saving Configuration...",
38+
loading: "Saving Configuration",
3639
success: {
3740
title: "Configuration saved",
3841
message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -56,42 +59,39 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
5659
const isGiteaEnabled = enableGiteaConfig === "1";
5760

5861
return (
59-
<>
60-
<div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
61-
<div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
62-
<AuthenticationMethodCard
63-
name="Gitea"
64-
description="Allow members to login or sign up to plane with their Gitea accounts."
65-
icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
66-
config={
67-
<ToggleSwitch
68-
value={isGiteaEnabled}
69-
onChange={() => {
70-
updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
71-
}}
72-
size="sm"
73-
disabled={isSubmitting || !formattedConfig}
74-
/>
75-
}
76-
disabled={isSubmitting || !formattedConfig}
77-
withBorder={false}
78-
/>
79-
</div>
80-
<div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
81-
{formattedConfig ? (
82-
<InstanceGiteaConfigForm config={formattedConfig} />
83-
) : (
84-
<Loader className="space-y-8">
85-
<Loader.Item height="50px" width="25%" />
86-
<Loader.Item height="50px" />
87-
<Loader.Item height="50px" />
88-
<Loader.Item height="50px" />
89-
<Loader.Item height="50px" width="50%" />
90-
</Loader>
91-
)}
92-
</div>
93-
</div>
94-
</>
62+
<PageWrapper
63+
customHeader={
64+
<AuthenticationMethodCard
65+
name="Gitea"
66+
description="Allow members to login or sign up to plane with their Gitea accounts."
67+
icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
68+
config={
69+
<ToggleSwitch
70+
value={isGiteaEnabled}
71+
onChange={() => {
72+
updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
73+
}}
74+
size="sm"
75+
disabled={isSubmitting || !formattedConfig}
76+
/>
77+
}
78+
disabled={isSubmitting || !formattedConfig}
79+
withBorder={false}
80+
/>
81+
}
82+
>
83+
{formattedConfig ? (
84+
<InstanceGiteaConfigForm config={formattedConfig} />
85+
) : (
86+
<Loader className="space-y-8">
87+
<Loader.Item height="50px" width="25%" />
88+
<Loader.Item height="50px" />
89+
<Loader.Item height="50px" />
90+
<Loader.Item height="50px" />
91+
<Loader.Item height="50px" width="50%" />
92+
</Loader>
93+
)}
94+
</PageWrapper>
9595
);
9696
});
9797
export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ export function InstanceGithubConfigForm(props: Props) {
217217
loading={isSubmitting}
218218
disabled={!isDirty}
219219
>
220-
{isSubmitting ? "Saving..." : "Save changes"}
220+
{isSubmitting ? "Saving" : "Save changes"}
221221
</Button>
222222
<Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
223223
Go back
@@ -238,7 +238,7 @@ export function InstanceGithubConfigForm(props: Props) {
238238

239239
{/* web service details */}
240240
<div className="flex flex-col rounded-lg overflow-hidden">
241-
<div className="px-6 py-3 bg-layer-1/60 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
241+
<div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
242242
<Monitor className="w-3 h-3" />
243243
Web
244244
</div>

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

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ import useSWR from "swr";
66
import { setPromiseToast } from "@plane/propel/toast";
77
import { Loader, ToggleSwitch } from "@plane/ui";
88
import { resolveGeneralTheme } from "@plane/utils";
9-
// components
9+
// assets
1010
import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
1111
import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
12+
// components
1213
import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
14+
import { PageWrapper } from "@/components/common/page-wrapper";
1315
// hooks
1416
import { useInstance } from "@/hooks/store";
15-
// icons
16-
// local components
17+
// types
1718
import type { Route } from "./+types/page";
19+
// local
1820
import { InstanceGithubConfigForm } from "./form";
1921

2022
const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
@@ -41,7 +43,7 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
4143
const updateConfigPromise = updateInstanceConfigurations(payload);
4244

4345
setPromiseToast(updateConfigPromise, {
44-
loading: "Saving Configuration...",
46+
loading: "Saving Configuration",
4547
success: {
4648
title: "Configuration saved",
4749
message: () => `GitHub authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -65,49 +67,46 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
6567
const isGithubEnabled = enableGithubConfig === "1";
6668

6769
return (
68-
<>
69-
<div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
70-
<div className="border-b border-subtle mx-4 py-4 space-y-1 flex-shrink-0">
71-
<AuthenticationMethodCard
72-
name="GitHub"
73-
description="Allow members to login or sign up to plane with their GitHub accounts."
74-
icon={
75-
<img
76-
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
77-
height={24}
78-
width={24}
79-
alt="GitHub Logo"
80-
/>
81-
}
82-
config={
83-
<ToggleSwitch
84-
value={isGithubEnabled}
85-
onChange={() => {
86-
updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
87-
}}
88-
size="sm"
89-
disabled={isSubmitting || !formattedConfig}
90-
/>
91-
}
92-
disabled={isSubmitting || !formattedConfig}
93-
withBorder={false}
94-
/>
95-
</div>
96-
<div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
97-
{formattedConfig ? (
98-
<InstanceGithubConfigForm config={formattedConfig} />
99-
) : (
100-
<Loader className="space-y-8">
101-
<Loader.Item height="50px" width="25%" />
102-
<Loader.Item height="50px" />
103-
<Loader.Item height="50px" />
104-
<Loader.Item height="50px" />
105-
<Loader.Item height="50px" width="50%" />
106-
</Loader>
107-
)}
108-
</div>
109-
</div>
110-
</>
70+
<PageWrapper
71+
customHeader={
72+
<AuthenticationMethodCard
73+
name="GitHub"
74+
description="Allow members to login or sign up to plane with their GitHub accounts."
75+
icon={
76+
<img
77+
src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
78+
height={24}
79+
width={24}
80+
alt="GitHub Logo"
81+
/>
82+
}
83+
config={
84+
<ToggleSwitch
85+
value={isGithubEnabled}
86+
onChange={() => {
87+
updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
88+
}}
89+
size="sm"
90+
disabled={isSubmitting || !formattedConfig}
91+
/>
92+
}
93+
disabled={isSubmitting || !formattedConfig}
94+
withBorder={false}
95+
/>
96+
}
97+
>
98+
{formattedConfig ? (
99+
<InstanceGithubConfigForm config={formattedConfig} />
100+
) : (
101+
<Loader className="space-y-8">
102+
<Loader.Item height="50px" width="25%" />
103+
<Loader.Item height="50px" />
104+
<Loader.Item height="50px" />
105+
<Loader.Item height="50px" />
106+
<Loader.Item height="50px" width="50%" />
107+
</Loader>
108+
)}
109+
</PageWrapper>
111110
);
112111
});
113112

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export function InstanceGitlabConfigForm(props: Props) {
200200
loading={isSubmitting}
201201
disabled={!isDirty}
202202
>
203-
{isSubmitting ? "Saving..." : "Save changes"}
203+
{isSubmitting ? "Saving" : "Save changes"}
204204
</Button>
205205
<Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
206206
Go back
@@ -209,7 +209,7 @@ export function InstanceGitlabConfigForm(props: Props) {
209209
</div>
210210
</div>
211211
<div className="col-span-2 md:col-span-1">
212-
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-1/60 rounded-lg">
212+
<div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-layer-3 rounded-lg">
213213
<div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
214214
{GITLAB_SERVICE_FIELD.map((field) => (
215215
<CopyField key={field.key} label={field.label} url={field.url} description={field.description} />

0 commit comments

Comments
 (0)