mirror of
https://github.com/hexastack/hexabot
synced 2025-06-26 18:27:28 +00:00
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
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:
commit
35f32c68bb
@ -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());
|
||||
|
@ -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")} />
|
||||
|
@ -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,
|
||||
|
11
frontend/src/pages/settings/groups/[group]/index.tsx
Normal file
11
frontend/src/pages/settings/groups/[group]/index.tsx
Normal 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;
|
11
frontend/src/pages/settings/groups/index.tsx
Normal file
11
frontend/src/pages/settings/groups/index.tsx
Normal 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;
|
11
frontend/src/pages/visual-editor/flows/[id]/index.tsx
Normal file
11
frontend/src/pages/visual-editor/flows/[id]/index.tsx
Normal 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;
|
11
frontend/src/pages/visual-editor/flows/index.tsx
Normal file
11
frontend/src/pages/visual-editor/flows/index.tsx
Normal 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;
|
@ -65,6 +65,7 @@ export enum RouterType {
|
||||
RESET = "reset",
|
||||
VISUAL_EDITOR = "visual-editor",
|
||||
INBOX = "inbox",
|
||||
SETTINGS = "settings",
|
||||
}
|
||||
|
||||
export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [
|
||||
|
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user