chore: adding page titles using project title. (#3692)
* chore: adding page titles * chore: added title to remaining pages * fix: added observer at required places --------- Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
This commit is contained in:
sriram veeraghanta
GitHub
parent
07a4cb1f7d
commit
cf3b888465
60 changed files with 1684 additions and 1215 deletions
|
|
@ -13,6 +13,7 @@ import { Loader } from "@plane/ui";
|
|||
import { Lightbulb } from "lucide-react";
|
||||
// components
|
||||
import { InstanceAIForm } from "components/instance";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
|
||||
// store
|
||||
|
|
@ -23,37 +24,40 @@ const InstanceAdminAIPage: NextPageWithLayout = observer(() => {
|
|||
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
|
||||
<>
|
||||
<PageHead title="God Mode - AI" />
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<>
|
||||
<div>
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
|
||||
</div>
|
||||
<InstanceAIForm config={formattedConfig} />
|
||||
<div className="my-2 flex">
|
||||
<div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
|
||||
<Lightbulb height="14" width="14" />
|
||||
<div>If you have a preferred AI models vendor, please get in touch with us.</div>
|
||||
{formattedConfig ? (
|
||||
<>
|
||||
<div>
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
|
||||
</div>
|
||||
<InstanceAIForm config={formattedConfig} />
|
||||
<div className="my-2 flex">
|
||||
<div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
|
||||
<Lightbulb height="14" width="14" />
|
||||
<div>If you have a preferred AI models vendor, please get in touch with us.</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import useToast from "hooks/use-toast";
|
|||
import { Loader, ToggleSwitch } from "@plane/ui";
|
||||
// components
|
||||
import { InstanceGithubConfigForm, InstanceGoogleConfigForm } from "components/instance";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
||||
// store
|
||||
|
|
@ -64,69 +65,71 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Single sign-on and OAuth</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
|
||||
settings.
|
||||
<>
|
||||
<PageHead title="God Mode - SSO and OAuth" />
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Single sign-on and OAuth</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the
|
||||
settings.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<>
|
||||
<div className="flex w-full flex-col gap-12 border-b border-custom-border-100 pb-8 lg:w-2/5">
|
||||
<div className="pointer-events-none mr-4 flex items-center gap-14 opacity-50">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-medium text-custom-text-100">
|
||||
Turn Magic Links {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}
|
||||
{formattedConfig ? (
|
||||
<>
|
||||
<div className="flex w-full flex-col gap-12 border-b border-custom-border-100 pb-8 lg:w-2/5">
|
||||
<div className="pointer-events-none mr-4 flex items-center gap-14 opacity-50">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-medium text-custom-text-100">
|
||||
Turn Magic Links {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}
|
||||
</div>
|
||||
<div className="text-xs font-normal text-custom-text-300">
|
||||
<p>Slack-like emails for authentication.</p>
|
||||
You need to have set up email{" "}
|
||||
<Link href="email">
|
||||
<span className="text-custom-primary-100 hover:underline">here</span>
|
||||
</Link>{" "}
|
||||
to enable this.
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs font-normal text-custom-text-300">
|
||||
<p>Slack-like emails for authentication.</p>
|
||||
You need to have set up email{" "}
|
||||
<Link href="email">
|
||||
<span className="text-custom-primary-100 hover:underline">here</span>
|
||||
</Link>{" "}
|
||||
to enable this.
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableMagicLogin))}
|
||||
// onChange={() => {
|
||||
// Boolean(parseInt(enableMagicLogin)) === true
|
||||
// ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
|
||||
// : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
|
||||
// }}
|
||||
onChange={() => {}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableMagicLogin))}
|
||||
// onChange={() => {
|
||||
// Boolean(parseInt(enableMagicLogin)) === true
|
||||
// ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
|
||||
// : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
|
||||
// }}
|
||||
onChange={() => {}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-4 flex items-center gap-14">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-medium text-custom-text-100">
|
||||
Let your users log in via the methods below
|
||||
<div className="mr-4 flex items-center gap-14">
|
||||
<div className="grow">
|
||||
<div className="text-sm font-medium text-custom-text-100">
|
||||
Let your users log in via the methods below
|
||||
</div>
|
||||
<div className="text-xs font-normal text-custom-text-300">
|
||||
Toggling this off will disable all previous configs. Users will only be able to login with an e-mail
|
||||
and password combo.
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs font-normal text-custom-text-300">
|
||||
Toggling this off will disable all previous configs. Users will only be able to login with an e-mail
|
||||
and password combo.
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableSignup))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableSignup)) === true
|
||||
? updateConfig("ENABLE_SIGNUP", "0")
|
||||
: updateConfig("ENABLE_SIGNUP", "1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
|
||||
<ToggleSwitch
|
||||
value={Boolean(parseInt(enableSignup))}
|
||||
onChange={() => {
|
||||
Boolean(parseInt(enableSignup)) === true
|
||||
? updateConfig("ENABLE_SIGNUP", "0")
|
||||
: updateConfig("ENABLE_SIGNUP", "1");
|
||||
}}
|
||||
size="sm"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex items-center gap-14 mr-4">
|
||||
{/* <div className="flex items-center gap-14 mr-4">
|
||||
<div className="grow">
|
||||
<div className="text-custom-text-100 font-medium text-sm">
|
||||
Turn Email Password {Boolean(parseInt(enableEmailPassword)) ? "off" : "on"}
|
||||
|
|
@ -146,36 +149,37 @@ const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => {
|
|||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-6 py-2">
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between border-b border-custom-border-100 py-2">
|
||||
<span className="text-lg font-medium tracking-tight">Google</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-y-6 py-2">
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between border-b border-custom-border-100 py-2">
|
||||
<span className="text-lg font-medium tracking-tight">Google</span>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGoogleConfigForm config={formattedConfig} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGoogleConfigForm config={formattedConfig} />
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between border-b border-custom-border-100 py-2">
|
||||
<span className="text-lg font-medium tracking-tight">Github</span>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGithubConfigForm config={formattedConfig} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center justify-between border-b border-custom-border-100 py-2">
|
||||
<span className="text-lg font-medium tracking-tight">Github</span>
|
||||
</div>
|
||||
<div className="px-2 py-6">
|
||||
<InstanceGithubConfigForm config={formattedConfig} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useApplication } from "hooks/store";
|
|||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { InstanceEmailForm } from "components/instance";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
|
||||
// store
|
||||
|
|
@ -21,29 +22,32 @@ const InstanceAdminEmailPage: NextPageWithLayout = observer(() => {
|
|||
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Plane can send useful emails to you and your users from your own instance without talking to the Internet.
|
||||
</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Set it up below and please test your settings before you save them.{" "}
|
||||
<span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<InstanceEmailForm config={formattedConfig} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
<>
|
||||
<PageHead title="God Mode - Email" />
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Plane can send useful emails to you and your users from your own instance without talking to the Internet.
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Set it up below and please test your settings before you save them.{" "}
|
||||
<span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<InstanceEmailForm config={formattedConfig} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useApplication } from "hooks/store";
|
|||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { InstanceImageConfigForm } from "components/instance";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
|
||||
// store
|
||||
|
|
@ -21,25 +22,28 @@ const InstanceAdminImagePage: NextPageWithLayout = observer(() => {
|
|||
useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Third-party image libraries</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Let your users search and choose images from third-party libraries
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<InstanceImageConfigForm config={formattedConfig} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
<>
|
||||
<PageHead title="God Mode - Images" />
|
||||
<div className="flex flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">Third-party image libraries</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Let your users search and choose images from third-party libraries
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{formattedConfig ? (
|
||||
<InstanceImageConfigForm config={formattedConfig} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useApplication } from "hooks/store";
|
|||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { InstanceGeneralForm } from "components/instance";
|
||||
import { PageHead } from "components/core";
|
||||
|
||||
const InstanceAdminPage: NextPageWithLayout = observer(() => {
|
||||
// store hooks
|
||||
|
|
@ -22,26 +23,29 @@ const InstanceAdminPage: NextPageWithLayout = observer(() => {
|
|||
useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">ID your instance easily</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Change the name of your instance and instance admin e-mail addresses. If you have a paid subscription, you
|
||||
will find your license key here.
|
||||
</div>
|
||||
</div>
|
||||
{instance && instanceAdmins ? (
|
||||
<InstanceGeneralForm instance={instance} instanceAdmins={instanceAdmins} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
<>
|
||||
<PageHead title="God Mode - General Settings" />
|
||||
<div className="flex h-full w-full flex-col gap-8">
|
||||
<div className="mb-2 border-b border-custom-border-100 pb-3">
|
||||
<div className="pb-1 text-xl font-medium text-custom-text-100">ID your instance easily</div>
|
||||
<div className="text-sm font-normal text-custom-text-300">
|
||||
Change the name of your instance and instance admin e-mail addresses. If you have a paid subscription, you
|
||||
will find your license key here.
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{instance && instanceAdmins ? (
|
||||
<InstanceGeneralForm instance={instance} instanceAdmins={instanceAdmins} />
|
||||
) : (
|
||||
<Loader className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
|
||||
<Loader.Item height="50px" />
|
||||
<Loader.Item height="50px" />
|
||||
</div>
|
||||
<Loader.Item height="50px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue