diff --git a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx index f4f488700..4e0afe927 100644 --- a/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx +++ b/src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx @@ -98,7 +98,11 @@ export const MenuBar = ({}: {}): JSX.Element => { return
Saving...
; } // return savedText; - return
Saved
; + return ( +
+ Saved +
+ ); } const handleSave = () => { @@ -111,10 +115,10 @@ export const MenuBar = ({}: {}): JSX.Element => { useHotkeys(changes, handleSave, { preventDefault: true }); return currentFlow && onFlowPage ? ( -
-
+
+
{currentFolder?.name && ( -
+
{ @@ -126,11 +130,11 @@ export const MenuBar = ({}: {}): JSX.Element => {
)}
-
+
/
-
+
@@ -170,7 +174,7 @@ export const MenuBar = ({}: {}): JSX.Element => { className="cursor-pointer" > - Settings + Flow Settings {!autoSaving && ( @@ -279,7 +283,7 @@ export const MenuBar = ({}: {}): JSX.Element => { >
-
+
{!autoSaving && ( +export const HeaderMenuItemButton = ({ icon = "", onClick, children }) => ( + + {children} + {icon && ( + )} - + ); export const HeaderMenuItems = ({ @@ -113,28 +71,16 @@ export const HeaderMenuItems = ({ }: React.PropsWithChildren<{ position?: "left" | "right" }>) => { const positionClass = position === "left" ? "left-0" : "right-0"; return ( - - - {children} - - + + {children} + ); }; export const HeaderMenuItemsSection = ({ children }) => ( <> -
{children}
-
+ {children} + ); diff --git a/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx b/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx index f546c8bdf..4c67813e3 100644 --- a/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx +++ b/src/frontend/src/components/appHeaderComponent/components/ThemeButtons/index.tsx @@ -30,7 +30,7 @@ export const ThemeButtons = () => { }; return ( -
+
{/* Sliding Indicator - Behind the Buttons */}
{ unstyled className={`relative z-10 inline-flex items-center rounded-full px-1 ${ selectedTheme === "light" - ? "text-black dark:text-[black]" - : "hover:text-black dark:text-[white] dark:hover:bg-amber-400 dark:hover:text-[black]" + ? "text-foreground" + : "text-foreground hover:text-background dark:hover:bg-amber-400" }`} onClick={() => handleThemeChange("light")} > - + {/* Dark Theme Button */} @@ -66,12 +66,12 @@ export const ThemeButtons = () => { unstyled className={`relative z-10 mx-1 inline-flex items-center rounded-full px-1 ${ selectedTheme === "dark" - ? "text-black dark:text-[black] dark:hover:bg-purple-400 dark:hover:text-[black]" - : "hover:bg-purple-400 hover:text-[black] hover:text-[white] dark:hover:text-[black]" + ? "text-background dark:hover:bg-purple-400" + : "text-foreground hover:bg-purple-400 hover:text-background" }`} onClick={() => handleThemeChange("dark")} > - + {/* System Theme Button */} @@ -79,12 +79,12 @@ export const ThemeButtons = () => { unstyled className={`relative z-10 inline-flex items-center rounded-full px-1 ${ selectedTheme === "system" - ? "text-black dark:bg-[white] dark:text-[black]" - : "hover:bg-[black] hover:text-[white] dark:hover:bg-[white] dark:hover:text-[black]" + ? "bg-foreground text-background" + : "hover:bg-foreground hover:text-background" }`} onClick={() => handleThemeChange("system")} > - +
); diff --git a/src/frontend/src/components/appHeaderComponent/index.tsx b/src/frontend/src/components/appHeaderComponent/index.tsx index 4ac47aedc..fbec63355 100644 --- a/src/frontend/src/components/appHeaderComponent/index.tsx +++ b/src/frontend/src/components/appHeaderComponent/index.tsx @@ -47,9 +47,9 @@ export default function AppHeader(): JSX.Element { }, []); return ( -
+
{/* Left Section */} -
+
{/* Middle Section */} -
+
{/* Right Section */} -
+
{!ENABLE_DATASTAX_LANGFLOW && ( <> @@ -136,7 +138,7 @@ export default function AppHeader(): JSX.Element { > diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx index 2c3cdcd7f..1b76b9966 100644 --- a/src/frontend/src/components/ui/dropdown-menu.tsx +++ b/src/frontend/src/components/ui/dropdown-menu.tsx @@ -161,7 +161,7 @@ const DropdownMenuSeparator = React.forwardRef< >(({ className, ...props }, ref) => ( )); diff --git a/src/frontend/src/pages/DashboardWrapperPage/index.tsx b/src/frontend/src/pages/DashboardWrapperPage/index.tsx index 254f85353..be17af06f 100644 --- a/src/frontend/src/pages/DashboardWrapperPage/index.tsx +++ b/src/frontend/src/pages/DashboardWrapperPage/index.tsx @@ -8,7 +8,7 @@ export function DashboardWrapperPage() { return (
-
+
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx index 1c4b204d0..715b8a74a 100644 --- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx @@ -4,7 +4,6 @@ import { useHotkeys } from "react-hotkeys-hook"; // Import useHotkeys import ForwardedIconComponent from "@/components/genericIconComponent"; import ShadTooltip from "@/components/shadTooltipComponent"; -import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Disclosure, @@ -25,9 +24,8 @@ import { SidebarMenuItem, SidebarMenuSkeleton, SidebarTrigger, + useSidebar, } from "@/components/ui/sidebar"; -import { Switch } from "@/components/ui/switch"; -import { CustomLink } from "@/customization/components/custom-link"; import { useAddComponent } from "@/hooks/useAddComponent"; import { useStoreStore } from "@/stores/storeStore"; import { checkChatInput } from "@/utils/reactflowUtils"; @@ -36,7 +34,6 @@ import { SIDEBAR_BUNDLES, SIDEBAR_CATEGORIES, } from "@/utils/styleUtils"; -import { removeCountFromString } from "@/utils/utils"; import { cloneDeep } from "lodash"; import useAlertStore from "../../../../stores/alertStore"; import useFlowStore from "../../../../stores/flowStore"; @@ -47,7 +44,6 @@ import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort"; import ShortcutDisplay from "../nodeToolbarComponent/shortcutDisplay"; import NoResultsMessage from "./components/emptySearchComponent"; import FeatureToggles from "./components/featureTogglesComponent"; -import SidebarDraggableComponent from "./components/sidebarDraggableComponent"; import SidebarMenuButtons from "./components/sidebarFooterButtons"; import SidebarItemsList from "./components/sidebarItemsList"; import { applyBetaFilter } from "./helpers/apply-beta-filter"; @@ -85,9 +81,13 @@ export function FlowSidebarComponent() { const [showBeta, setShowBeta] = useState(true); const [showLegacy, setShowLegacy] = useState(false); + const { setOpen } = useSidebar(); + useHotkeys("/", (event) => { event.preventDefault(); searchInputRef.current?.focus(); + + setOpen(true); }); useHotkeys( @@ -268,7 +268,11 @@ export function FlowSidebarComponent() { const chatInputAdded = checkChatInput(nodes); return ( - +
diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx index 867bb4788..3e8344461 100644 --- a/src/frontend/src/pages/MainPage/components/header/index.tsx +++ b/src/frontend/src/pages/MainPage/components/header/index.tsx @@ -77,6 +77,7 @@ const HeaderComponent = ({ key={type} unstyled id={`${type}-btn`} + data-testid={`${type}-btn`} onClick={() => setFlowType(type as "flows" | "components")} className={`border-b ${ flowType === type diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index d1fd47402..862b18b56 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -606,18 +606,12 @@ .header-github-link:hover { @apply hover:bg-accent hover:text-accent-foreground; } - .header-github-display { - @apply -mr-px ml-1 flex h-8 items-center justify-center rounded-md rounded-l-none border bg-[white] px-2 text-sm dark:bg-[black]; - } .header-notifications-box { @apply fixed left-0 top-0 h-screen w-screen; } .header-notifications { @apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive; } - .header-notifications-dot { - @apply absolute left-[33px] top-[9px] block h-1.5 w-1.5 rounded-full bg-destructive dark:bg-red-500; - } .input-component-div { @apply pointer-events-none relative cursor-not-allowed; } @@ -1272,7 +1266,7 @@ } .toolbar-wrapper { - @apply flex items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm h-10; + @apply flex h-10 items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm; } } diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css index 48d3f4908..8e8200fff 100644 --- a/src/frontend/src/style/index.css +++ b/src/frontend/src/style/index.css @@ -282,6 +282,5 @@ --accent-indigo: 229.7 93.5% 81.8%; --accent-indigo-foreground: 243.4 75.4% 58.6%; --node-ring: 240 6% 90%; - } } diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 45d6ba322..add40f5a4 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -115,6 +115,8 @@ import { MessagesSquare, Minimize2, Minus, + Monitor, + Moon, MoonIcon, MoreHorizontal, Network, @@ -166,6 +168,7 @@ import { SquarePlay, StickyNote, Store, + Sun, SunIcon, Table, TerminalIcon, @@ -797,6 +800,9 @@ export const nodeIconsLucide: iconsType = { FolderPlusIcon, PaperclipIcon, Settings, + Monitor, + Moon, + Sun, PanelLeftClose, PanelLeftOpen, ArrowUpRight, diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs index 89c4b4d37..0748bfd6e 100644 --- a/src/frontend/tailwind.config.mjs +++ b/src/frontend/tailwind.config.mjs @@ -36,6 +36,10 @@ const config = { }, }, extend: { + screens: { + xl: "1200px", + "2xl": "1400px", + }, keyframes: { wiggle: { "0%, 100%": { transform: "scale(100%)" }, diff --git a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts index bcdb79622..4b17c6f4a 100644 --- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts +++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts @@ -182,11 +182,7 @@ test("search components", async ({ page }) => { await page.getByText("Exit", { exact: true }).click(); } - await page - .getByText("Components", { - exact: true, - }) - .click(); + await page.getByTestId("components-btn").click(); await page.getByPlaceholder("Search components").fill("Chat Input"); await page.getByText("Chat Input", { exact: true }).isVisible(); diff --git a/src/frontend/tests/core/features/auto-login-off.spec.ts b/src/frontend/tests/core/features/auto-login-off.spec.ts index 13434ba89..da395b9b8 100644 --- a/src/frontend/tests/core/features/auto-login-off.spec.ts +++ b/src/frontend/tests/core/features/auto-login-off.spec.ts @@ -136,7 +136,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o await page.getByTestId("zoom_out").click(); await page.getByTestId("flow-configuration-button").click(); - await page.getByText("Settings", { exact: true }).last().click(); + await page.getByText("Flow Settings", { exact: true }).last().click(); await page.getByPlaceholder("Flow Name").fill(randomFlowName); @@ -210,7 +210,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o await page.getByTestId("zoom_out").click(); await page.getByTestId("flow-configuration-button").click(); - await page.getByText("Settings", { exact: true }).last().click(); + await page.getByText("Flow Settings", { exact: true }).last().click(); await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName); diff --git a/src/frontend/tests/core/features/store-shard-2.spec.ts b/src/frontend/tests/core/features/store-shard-2.spec.ts index 92dff6a0b..e2da1f0bc 100644 --- a/src/frontend/tests/core/features/store-shard-2.spec.ts +++ b/src/frontend/tests/core/features/store-shard-2.spec.ts @@ -119,7 +119,7 @@ test("should share component with share button", async ({ page }) => { await page.waitForTimeout(1000); const flowName = await page.getByTestId("flow_name").innerText(); await page.getByTestId("flow_name").click(); - await page.getByText("Settings").click(); + await page.getByText("Flow Settings").click(); const flowDescription = await page .getByPlaceholder("Flow description") .inputValue(); diff --git a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts index 1b01d9916..5e545e337 100644 --- a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts +++ b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts @@ -42,7 +42,7 @@ test("should be able to move flow from folder, rename it and be displayed on cor await page.getByTestId("fit_view").click(); await page.getByTestId("flow-configuration-button").click(); - await page.getByText("Settings").click(); + await page.getByText("Flow Settings").click(); await page.getByPlaceholder("Flow name").fill(randomName); await page.getByText("Save").last().click(); await page.getByTestId("icon-ChevronLeft").last().click(); @@ -89,7 +89,7 @@ test("should be able to move flow from folder, rename it and be displayed on cor await page.getByTestId(`card-${randomName}`).first().click(); await page.getByTestId("flow-configuration-button").click(); - await page.getByText("Settings").click(); + await page.getByText("Flow Settings").click(); await page.getByPlaceholder("Flow name").fill(secondRandomName); await page.getByText("Save").last().click(); await page.getByTestId("icon-ChevronLeft").last().click(); diff --git a/src/frontend/tests/extended/features/flowSettings.spec.ts b/src/frontend/tests/extended/features/flowSettings.spec.ts index 6b1fc25ab..da97a03ef 100644 --- a/src/frontend/tests/extended/features/flowSettings.spec.ts +++ b/src/frontend/tests/extended/features/flowSettings.spec.ts @@ -32,7 +32,7 @@ test("flowSettings", async ({ page }) => { await page.waitForTimeout(1000); await page.getByTestId("flow_name").click(); - await page.getByText("Settings").first().click(); + await page.getByText("Flow Settings").first().click(); await page .getByPlaceholder("Flow name") .fill( @@ -56,7 +56,7 @@ test("flowSettings", async ({ page }) => { await page.getByText("Changes saved successfully").isVisible(); await page.getByTestId("flow_name").click(); - await page.getByText("Settings").first().click(); + await page.getByText("Flow Settings").first().click(); const flowName = await page.getByPlaceholder("Flow name").inputValue(); const flowDescription = await page