2023-09-22 12:44:09 +03:00
|
|
|
/* eslint-disable max-lines */
|
2023-07-25 10:54:34 +03:00
|
|
|
import { Content, List, Root } from "@radix-ui/react-tabs";
|
2023-08-07 15:13:41 +03:00
|
|
|
import { useTranslation } from "react-i18next";
|
2023-07-25 10:54:34 +03:00
|
|
|
|
2023-08-08 19:18:05 +03:00
|
|
|
import Button from "@/lib/components/ui/Button";
|
|
|
|
|
2023-09-13 17:41:28 +03:00
|
|
|
import { BrainTabTrigger, KnowledgeTab, PeopleTab } from "./components";
|
2023-09-25 15:22:59 +03:00
|
|
|
import { DeleteOrUnsubscribeConfirmationModal } from "./components/Modals/DeleteOrUnsubscribeConfirmationModal";
|
2023-07-26 00:12:46 +03:00
|
|
|
import { SettingsTab } from "./components/SettingsTab/SettingsTab";
|
2023-07-25 10:54:34 +03:00
|
|
|
import { useBrainManagementTabs } from "./hooks/useBrainManagementTabs";
|
|
|
|
|
|
|
|
export const BrainManagementTabs = (): JSX.Element => {
|
2023-09-25 15:22:59 +03:00
|
|
|
const { t } = useTranslation([
|
|
|
|
"translation",
|
|
|
|
"config",
|
|
|
|
"delete_or_unsubscribe_from_brain",
|
|
|
|
]);
|
2023-08-08 19:18:05 +03:00
|
|
|
const {
|
|
|
|
selectedTab,
|
|
|
|
setSelectedTab,
|
|
|
|
brainId,
|
2023-09-25 15:22:59 +03:00
|
|
|
handleUnsubscribeOrDeleteBrain,
|
|
|
|
isDeleteOrUnsubscribeModalOpened,
|
|
|
|
setIsDeleteOrUnsubscribeModalOpened,
|
|
|
|
hasEditRights,
|
|
|
|
isOwnedByCurrentUser,
|
|
|
|
isDeleteOrUnsubscribeRequestPending,
|
2023-08-08 19:18:05 +03:00
|
|
|
} = useBrainManagementTabs();
|
2023-09-20 17:24:56 +03:00
|
|
|
|
2023-07-25 11:13:00 +03:00
|
|
|
if (brainId === undefined) {
|
|
|
|
return <div />;
|
|
|
|
}
|
2023-07-25 10:54:34 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Root
|
2023-09-15 02:09:26 +03:00
|
|
|
className="flex flex-col w-full h-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-10"
|
2023-08-31 19:25:06 +03:00
|
|
|
value={selectedTab}
|
2023-07-25 10:54:34 +03:00
|
|
|
>
|
2023-08-08 19:18:05 +03:00
|
|
|
<List
|
2023-09-15 02:09:26 +03:00
|
|
|
className="flex flex-col md:flex-row justify-between space-y-2 md:space-y-0 mb-4"
|
2023-08-08 19:18:05 +03:00
|
|
|
aria-label={t("subtitle", { ns: "config" })}
|
|
|
|
>
|
2023-07-25 10:54:34 +03:00
|
|
|
<BrainTabTrigger
|
|
|
|
selected={selectedTab === "settings"}
|
2023-08-07 15:13:41 +03:00
|
|
|
label={t("settings", { ns: "config" })}
|
2023-07-25 10:54:34 +03:00
|
|
|
value="settings"
|
|
|
|
onChange={setSelectedTab}
|
|
|
|
/>
|
2023-09-22 12:44:09 +03:00
|
|
|
{hasEditRights && (
|
2023-09-20 17:24:56 +03:00
|
|
|
<>
|
|
|
|
<BrainTabTrigger
|
|
|
|
selected={selectedTab === "people"}
|
|
|
|
label={t("people", { ns: "config" })}
|
|
|
|
value="people"
|
|
|
|
onChange={setSelectedTab}
|
|
|
|
/>
|
|
|
|
<BrainTabTrigger
|
|
|
|
selected={selectedTab === "knowledge"}
|
|
|
|
label={t("knowledge", { ns: "config" })}
|
|
|
|
value="knowledge"
|
|
|
|
onChange={setSelectedTab}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
2023-07-25 10:54:34 +03:00
|
|
|
</List>
|
2023-07-25 11:13:00 +03:00
|
|
|
|
2023-09-20 17:24:56 +03:00
|
|
|
<div className="flex-1 p-4 md:p-20 md:pt-0">
|
2023-07-25 11:13:00 +03:00
|
|
|
<Content value="settings">
|
2023-07-26 00:12:46 +03:00
|
|
|
<SettingsTab brainId={brainId} />
|
2023-07-25 11:13:00 +03:00
|
|
|
</Content>
|
|
|
|
<Content value="people">
|
|
|
|
<PeopleTab brainId={brainId} />
|
|
|
|
</Content>
|
2023-07-26 00:12:46 +03:00
|
|
|
<Content value="knowledge">
|
2023-09-13 17:41:28 +03:00
|
|
|
<KnowledgeTab brainId={brainId} />
|
2023-07-26 00:12:46 +03:00
|
|
|
</Content>
|
2023-07-25 11:13:00 +03:00
|
|
|
</div>
|
2023-09-15 02:09:26 +03:00
|
|
|
|
|
|
|
<div className="flex justify-center mt-4">
|
2023-09-25 15:22:59 +03:00
|
|
|
{isOwnedByCurrentUser ? (
|
|
|
|
<Button
|
|
|
|
className="px-8 md:px-20 py-2 bg-red-500 text-white rounded-md"
|
|
|
|
onClick={() => setIsDeleteOrUnsubscribeModalOpened(true)}
|
|
|
|
>
|
|
|
|
{t("deleteButton", { ns: "delete_or_unsubscribe_from_brain" })}
|
|
|
|
</Button>
|
|
|
|
) : (
|
|
|
|
<Button
|
|
|
|
className="px-8 md:px-20 py-2 bg-red-500 text-white rounded-md"
|
|
|
|
onClick={() => setIsDeleteOrUnsubscribeModalOpened(true)}
|
|
|
|
>
|
|
|
|
{t("unsubscribeButton", {
|
|
|
|
ns: "delete_or_unsubscribe_from_brain",
|
|
|
|
})}
|
|
|
|
</Button>
|
|
|
|
)}
|
2023-08-08 19:18:05 +03:00
|
|
|
</div>
|
2023-09-15 02:09:26 +03:00
|
|
|
|
2023-09-25 15:22:59 +03:00
|
|
|
<DeleteOrUnsubscribeConfirmationModal
|
|
|
|
isOpen={isDeleteOrUnsubscribeModalOpened}
|
|
|
|
setOpen={setIsDeleteOrUnsubscribeModalOpened}
|
|
|
|
onConfirm={() => void handleUnsubscribeOrDeleteBrain()}
|
|
|
|
isOwnedByCurrentUser={isOwnedByCurrentUser}
|
|
|
|
isDeleteOrUnsubscribeRequestPending={
|
|
|
|
isDeleteOrUnsubscribeRequestPending
|
|
|
|
}
|
2023-08-08 19:18:05 +03:00
|
|
|
/>
|
2023-07-25 10:54:34 +03:00
|
|
|
</Root>
|
|
|
|
);
|
|
|
|
};
|