Merge pull request #437 from Hexastack/436-issue-tabs-status-is-not-triggered-with-the-url
Some checks are pending
Build and Push Docker API Image / build-and-push (push) Waiting to run
Build and Push Docker Base Image / build-and-push (push) Waiting to run
Build and Push Docker NLU Image / build-and-push (push) Waiting to run
Build and Push Docker UI Image / build-and-push (push) Waiting to run

feat: tabs bidirectional sync with the url query
This commit is contained in:
Med Marrouchi 2024-12-12 13:58:54 +01:00 committed by GitHub
commit 35f32c68bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 79 additions and 7 deletions

View File

@ -27,7 +27,7 @@ export const ChatWidget = () => {
const pathname = usePathname();
const { apiUrl } = useConfig();
const { isAuthenticated } = useAuth();
const isVisualEditor = pathname === `/${RouterType.VISUAL_EDITOR}`;
const isVisualEditor = pathname.startsWith(`/${RouterType.VISUAL_EDITOR}`);
const allowedDomainsSetting = useSetting(SETTING_TYPE, "allowed_domains");
const themeColorSetting = useSetting(SETTING_TYPE, "theme_color");
const [key, setKey] = useState(generateId());

View File

@ -16,6 +16,7 @@ import {
Tab,
Tabs,
} from "@mui/material";
import { useRouter } from "next/router";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form";
@ -25,7 +26,7 @@ import { useUpdate } from "@/hooks/crud/useUpdate";
import { useToast } from "@/hooks/useToast";
import { useTranslate } from "@/hooks/useTranslate";
import { PageHeader } from "@/layout/content/PageHeader";
import { EntityType } from "@/services/types";
import { EntityType, RouterType } from "@/services/types";
import { ISetting } from "@/types/setting.types";
import { SXStyleOptions } from "@/utils/SXStyleOptions";
@ -66,10 +67,16 @@ function groupBy(array: ISetting[]) {
}, {} as Record<string, ISetting[]>);
}
const DEFAULT_SETTINGS_GROUP = "chatbot_settings" as const;
export const Settings = () => {
const { t } = useTranslate();
const router = useRouter();
const group = router.query.group?.toString();
const { toast } = useToast();
const [selectedTab, setSelectedTab] = useState("chatbot_settings");
const [selectedTab, setSelectedTab] = useState(
group || DEFAULT_SETTINGS_GROUP,
);
const { control, watch } = useForm();
const { data: settings } = useFind(
{ entity: EntityType.SETTING },
@ -94,6 +101,7 @@ export const Settings = () => {
};
const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
setSelectedTab(newValue);
router.push(`/${RouterType.SETTINGS}/groups/${newValue}`);
};
const isDisabled = (setting: ISetting) => {
return (
@ -135,6 +143,12 @@ export const Settings = () => {
};
}, [watch, debouncedUpdate]);
useEffect(() => {
setSelectedTab(group || DEFAULT_SETTINGS_GROUP);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [group]);
return (
<Grid container gap={3} flexDirection="column">
<PageHeader icon={faCogs} title={t("title.settings")} />

View File

@ -29,6 +29,7 @@ import {
DiagramModel,
DiagramModelGenerics,
} from "@projectstorm/react-diagrams";
import { useRouter } from "next/router";
import {
SyntheticEvent,
useCallback,
@ -52,7 +53,7 @@ import useDebouncedUpdate from "@/hooks/useDebouncedUpdate";
import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
import { useSearch } from "@/hooks/useSearch";
import { useTranslate } from "@/hooks/useTranslate";
import { EntityType, Format, QueryType } from "@/services/types";
import { EntityType, Format, QueryType, RouterType } from "@/services/types";
import { IBlock } from "@/types/block.types";
import { ICategory } from "@/types/category.types";
import { BlockPorts } from "@/types/visual-editor.types";
@ -65,6 +66,8 @@ import { AdvancedLinkModel } from "./AdvancedLink/AdvancedLinkModel";
const Diagrams = () => {
const { t } = useTranslate();
const router = useRouter();
const flowId = router.query.id?.toString();
const [model, setModel] = useState<
DiagramModel<DiagramModelGenerics> | undefined
>();
@ -95,7 +98,9 @@ const Diagrams = () => {
},
{
onSuccess([{ id, zoom, offset }]) {
if (id) {
if (flowId) {
setSelectedCategoryId?.(flowId);
} else if (id) {
setSelectedCategoryId?.(id);
if (engine?.getModel()) {
setViewerOffset(offset || [0, 0]);
@ -161,6 +166,8 @@ const Diagrams = () => {
if (id) {
setSelectedCategoryId?.(id);
setSelectedBlockId(undefined); // Reset selected block when switching categories, resetting edit & remove buttons
router.push(`/${RouterType.VISUAL_EDITOR}/flows/${id}`);
}
}
};
@ -181,6 +188,12 @@ const Diagrams = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
setSelectedCategoryId(flowId || "");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [flowId]);
useEffect(() => {
const { canvas, model, engine } = buildDiagram({
zoom: currentCategory?.zoom || 100,

View File

@ -0,0 +1,11 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import SettingsPage from "../..";
export default SettingsPage;

View File

@ -0,0 +1,11 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import SettingsPage from "..";
export default SettingsPage;

View File

@ -0,0 +1,11 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import VisualEditorPage from "../..";
export default VisualEditorPage;

View File

@ -0,0 +1,11 @@
/*
* Copyright © 2024 Hexastack. All rights reserved.
*
* Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
* 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import VisualEditorPage from "..";
export default VisualEditorPage;

View File

@ -65,6 +65,7 @@ export enum RouterType {
RESET = "reset",
VISUAL_EDITOR = "visual-editor",
INBOX = "inbox",
SETTINGS = "settings",
}
export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [

View File

@ -6,11 +6,11 @@
* 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
*/
import { FULL_WIDTH_PATHNAMES, TRouterValues } from "@/services/types";
import { FULL_WIDTH_PATHNAMES } from "@/services/types";
type TLayout = "default" | "full_width";
export const getLayout = (pathname: string): TLayout =>
FULL_WIDTH_PATHNAMES.includes(pathname as TRouterValues)
FULL_WIDTH_PATHNAMES.some((path) => pathname.startsWith(path))
? "full_width"
: "default";