diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 0e5f1887d..fea90239f 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -24,7 +24,7 @@ export default function App() { setShowSideBar(true); setIsStackedOpen(true); }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]); - const {hardReset} = useContext(TabsContext) + const { hardReset } = useContext(TabsContext); const { errorData, errorOpen, @@ -108,7 +108,7 @@ export default function App() { onReset={() => { window.localStorage.removeItem("tabsData"); window.localStorage.clear(); - hardReset() + hardReset(); window.location.href = window.location.href; }} FallbackComponent={CrashErrorComponent} @@ -158,7 +158,7 @@ export default function App() { Created by Logspace diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 877958f54..9407bc1cd 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -3,7 +3,7 @@ import { classNames, nodeColors, nodeIcons, - snakeToNormalCase, + toNormalCase, } from "../../utils"; import ParameterComponent from "./components/parameterComponent"; import { typesContext } from "../../contexts/typesContext"; @@ -192,8 +192,8 @@ export default function GenericNode({ data.node.template[t].display_name ? data.node.template[t].display_name : data.node.template[t].name - ? snakeToNormalCase(data.node.template[t].name) - : snakeToNormalCase(t) + ? toNormalCase(data.node.template[t].name) + : toNormalCase(t) } name={t} tooltipTitle={ diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 30e5d7fee..f28d82307 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -27,9 +27,9 @@ export default function InputComponent({ { diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx index 31786553b..aad549a83 100644 --- a/src/frontend/src/modals/NodeModal/index.tsx +++ b/src/frontend/src/modals/NodeModal/index.tsx @@ -3,7 +3,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; import { NodeDataType } from "../../types/flow"; -import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils"; +import { nodeColors, nodeIcons, toNormalCase } from "../../utils"; import { typesContext } from "../../contexts/typesContext"; import ModalField from "./components/ModalField"; @@ -99,10 +99,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) { data.node.template[t].display_name ? data.node.template[t].display_name : data.node.template[t].name - ? snakeToNormalCase( + ? toNormalCase( data.node.template[t].name ) - : snakeToNormalCase(t) + : toNormalCase(t) } required={data.node.template[t].required} id={ diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx index 8fd1140ab..dd82ae313 100644 --- a/src/frontend/src/modals/chatModal/index.tsx +++ b/src/frontend/src/modals/chatModal/index.tsx @@ -9,7 +9,7 @@ import { PopUpContext } from "../../contexts/popUpContext"; import { FlowType, NodeType } from "../../types/flow"; import { TabsContext } from "../../contexts/tabsContext"; import { alertContext } from "../../contexts/alertContext"; -import { classNames, snakeToNormalCase } from "../../utils"; +import { toNormalCase } from "../../utils"; import { typesContext } from "../../contexts/typesContext"; import ChatMessage from "./chatMessage"; import { FaEraser } from "react-icons/fa"; @@ -230,7 +230,7 @@ export default function ChatModal({ `${type} is missing ${ template.display_name ? template.display_name - : snakeToNormalCase(template[t].name) + : toNormalCase(template[t].name) }.`, ] : [] diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx index 38b06ae5a..0ad655bf1 100644 --- a/src/frontend/src/modals/importModal/index.tsx +++ b/src/frontend/src/modals/importModal/index.tsx @@ -16,7 +16,7 @@ import { error } from "console"; import { alertContext } from "../../contexts/alertContext"; import LoadingComponent from "../../components/loadingComponent"; import { FlowType } from "../../types/flow"; -import { classNames } from "../../utils"; +import { classNames, toNormalCase } from "../../utils"; export default function ImportModal() { const [open, setOpen] = useState(true); @@ -215,7 +215,7 @@ export default function ImportModal() { setModalOpen(false); }} textColor="text-emerald-400" - title={example.name} + title={toNormalCase(example.name)} > ); diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx index 6f9773a51..7a7526906 100644 --- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx @@ -5,11 +5,11 @@ import { TabsContext } from "../../../../contexts/tabsContext"; import FlowPage from "../.."; import { darkContext } from "../../../../contexts/darkContext"; import { - ArrowDownTrayIcon, - ArrowUpTrayIcon, - BellIcon, - MoonIcon, - SunIcon, + ArrowDownTrayIcon, + ArrowUpTrayIcon, + BellIcon, + MoonIcon, + SunIcon, } from "@heroicons/react/24/outline"; import { PopUpContext } from "../../../../contexts/popUpContext"; import AlertDropdown from "../../../../alerts/alertDropDown"; @@ -22,96 +22,101 @@ export default function TabsManagerComponent() { const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext); const { openPopUp } = useContext(PopUpContext); - const {templates} = useContext(typesContext) + const { templates } = useContext(typesContext); const AlertWidth = 256; const { dark, setDark } = useContext(darkContext); const { notificationCenter, setNotificationCenter } = useContext(alertContext); useEffect(() => { //create the first flow - if (flows.length === 0&& Object.keys(templates).length>0) { + if (flows.length === 0 && Object.keys(templates).length > 0) { addFlow(); } - }, [addFlow, flows.length,templates]); + }, [addFlow, flows.length, templates]); - return ( -
-
- {flows.map((flow, index) => { - return ( - setTabIndex(index)} - selected={index === tabIndex} - key={index} - flow={flow} - /> - ); - })} - { - addFlow(); - }} - selected={false} - flow={null} - /> -
- - - - -
-
-
- - {flows[tabIndex] ? ( - - ) : ( - <> - )} - -
-
- ); + return ( +
+
+ {flows.map((flow, index) => { + return ( + setTabIndex(index)} + selected={index === tabIndex} + key={index} + flow={flow} + /> + ); + })} + { + addFlow(); + }} + selected={false} + flow={null} + /> +
+ + + + +
+
+
+ + {flows[tabIndex] ? ( + + ) : ( + <> + )} + +
+
+ ); } diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts index 5890e0118..4ac16ce07 100644 --- a/src/frontend/src/utils.ts +++ b/src/frontend/src/utils.ts @@ -316,16 +316,25 @@ export function toFirstUpperCase(str: string) { .join(""); } -export function snakeToNormalCase(str: string) { - return str - .split("_") - .map((word, index) => { - if (index === 0) { - return word[0].toUpperCase() + word.slice(1).toLowerCase(); - } - return word.toLowerCase(); - }) - .join(" "); +export function toNormalCase(str: string) { + let result = str + .split("_") + .map((word, index) => { + if (index === 0) { + return word[0].toUpperCase() + word.slice(1).toLowerCase(); + } + return word.toLowerCase(); + }) + .join(" "); + + return result.split("-") + .map((word, index) => { + if (index === 0) { + return word[0].toUpperCase() + word.slice(1).toLowerCase(); + } + return word.toLowerCase(); + }) + .join(" "); } export function normalCaseToSnakeCase(str: string) { @@ -388,16 +397,15 @@ export function isValidConnection( } export function removeApiKeys(flow: FlowType): FlowType { - let cleanFLow = _.cloneDeep(flow); - cleanFLow.data.nodes.forEach((node) => { - for (const key in node.data.node.template) { - if (key.includes("api")) { - console.log(node.data.node.template[key]); - node.data.node.template[key].value = ""; - } - } - }); - return cleanFLow; + let cleanFLow = _.cloneDeep(flow); + cleanFLow.data.nodes.forEach((node) => { + for (const key in node.data.node.template) { + if (key.includes("api")) { + node.data.node.template[key].value = ""; + } + } + }); + return cleanFLow; } export function updateObject>(