From 200cb0543abd01cb66c687f266c62af30b709535 Mon Sep 17 00:00:00 2001 From: Edouard Wautier <4435185+Duncid@users.noreply.github.com> Date: Mon, 4 Sep 2023 18:40:12 +0200 Subject: [PATCH] Updating menu (#1240) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Updatign Item for new Sparkle pack * Starting changing the WorspacePicker * Starting to change workspacePicker * Fixing href * Worspace selector moved to Sparkle dropdown menu * Starting implementing dropdown to avatar menu * Cleaning * removing eslint darwin arm64 from package * correcting eslint * package cleaning * package again * Fixing aftre eslint check * Using sparkle 1-43 * StandardItem -> Item * remove unused imports --------- Co-authored-by: édouard wautier Co-authored-by: Stanislas Polu --- front/components/WorkspacePicker.tsx | 68 ++++------------ front/components/sparkle/AppLayout.tsx | 77 +++++++------------ front/components/use/chat/ChatSidebarMenu.tsx | 14 +--- front/package-lock.json | 16 ++-- front/package.json | 2 +- front/pages/w/[wId]/workspace/index.tsx | 8 +- sparkle/src/stories/DropdownMenu.stories.tsx | 3 +- 7 files changed, 61 insertions(+), 127 deletions(-) diff --git a/front/components/WorkspacePicker.tsx b/front/components/WorkspacePicker.tsx index faa783f239f1..e8e2598626eb 100644 --- a/front/components/WorkspacePicker.tsx +++ b/front/components/WorkspacePicker.tsx @@ -1,7 +1,5 @@ -import { ChevronDownIcon } from "@dust-tt/sparkle"; -import { Menu } from "@headlessui/react"; +import { DropdownMenu } from "@dust-tt/sparkle"; -import { classNames } from "@app/lib/utils"; import { UserType, WorkspaceType } from "@app/types/user"; export default function WorkspacePicker({ @@ -15,54 +13,22 @@ export default function WorkspacePicker({ onWorkspaceUpdate: (w: WorkspaceType) => void; }) { return ( -
- -
- - {workspace ? ( - <> -
{workspace.name}
- - - ) : ( - "Select workspace" - )} - -
+ + - -
- {user.workspaces.map((w) => { - return ( - - {({ active }) => ( - onWorkspaceUpdate(w)} - > - {w.name} - - )} - - ); - })} -
- - -
+ + {user.workspaces.map((w) => { + return ( + void onWorkspaceUpdate(w)} + label={w.name} + /> + ); + })} + + ); } diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx index b4b990071fa6..67e33b47ae96 100644 --- a/front/components/sparkle/AppLayout.tsx +++ b/front/components/sparkle/AppLayout.tsx @@ -1,5 +1,5 @@ -import { Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle"; -import { Dialog, Menu, Transition } from "@headlessui/react"; +import { DropdownMenu, Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle"; +import { Dialog, Transition } from "@headlessui/react"; import { Bars3Icon } from "@heroicons/react/20/solid"; import Head from "next/head"; import { useRouter } from "next/router"; @@ -43,54 +43,31 @@ function NavigationBar({
{user && (
- -
- - Open user menu - - -
- - - - - {({ active }) => ( - - signOut({ - callbackUrl: "/", - redirect: true, - }) - } - className={classNames( - active ? "bg-gray-50" : "", - "block px-4 py-2 text-sm text-gray-700" - )} - > - Sign out - - )} - - - - + + + Open user menu + + + + { + void signOut({ + callbackUrl: "/", + redirect: true, + }); + }} + /> + +
)}
diff --git a/front/components/use/chat/ChatSidebarMenu.tsx b/front/components/use/chat/ChatSidebarMenu.tsx index f045d3dc2d08..4d555250e969 100644 --- a/front/components/use/chat/ChatSidebarMenu.tsx +++ b/front/components/use/chat/ChatSidebarMenu.tsx @@ -1,10 +1,4 @@ -import { - Button, - ChatBubbleBottomCenterPlusIcon, - Item, - ItemSectionHeader, - ListItem, -} from "@dust-tt/sparkle"; +import { Button, ChatBubbleBottomCenterPlusIcon, Item } from "@dust-tt/sparkle"; import { PlanetIcon } from "@dust-tt/sparkle"; import { useRouter } from "next/router"; @@ -56,10 +50,10 @@ export function ChatSidebarMenu({
{sessions.length > 0 && (
- +
)} - + {sessions.length === 0 ? null : sessions.map((s) => { @@ -73,7 +67,7 @@ export function ChatSidebarMenu({ > ); })} - +
diff --git a/front/package-lock.json b/front/package-lock.json index 021c459a0ae9..083f2f1c4fdf 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -5,7 +5,7 @@ "packages": { "": { "dependencies": { - "@dust-tt/sparkle": "0.1.37", + "@dust-tt/sparkle": "0.1.43", "@headlessui/react": "^1.7.7", "@heroicons/react": "^2.0.11", "@nangohq/frontend": "^0.16.1", @@ -713,9 +713,12 @@ "license": "Apache-2.0" }, "node_modules/@dust-tt/sparkle": { - "version": "0.1.37", - "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.37.tgz", - "integrity": "sha512-zGkYFYyD9mKxEkV0WIThL2/nO81Xt9S+PytDm5bPI9SvL5RkjbE7bWAv8Vaw4L+pFGzv2kBWyYZHwnFECwZODw==", + "version": "0.1.43", + "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.1.43.tgz", + "integrity": "sha512-Z5zCBIZxDmKFu5YIohAWchaRNyGIPxsbUAfjbI6asv7zQHkc8aY3JQdMsxxj61sFTzHWMlrWKA3QBkDHskCT/A==", + "dependencies": { + "@headlessui/react": "^1.7.17" + }, "peerDependencies": { "react": "^18.2.0" } @@ -1114,8 +1117,9 @@ "license": "Apache-2.0" }, "node_modules/@headlessui/react": { - "version": "1.7.15", - "license": "MIT", + "version": "1.7.17", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz", + "integrity": "sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==", "dependencies": { "client-only": "^0.0.1" }, diff --git a/front/package.json b/front/package.json index f645f02e1c41..d6fde27e17ea 100644 --- a/front/package.json +++ b/front/package.json @@ -13,7 +13,7 @@ "initdb": "env $(cat .env.local) npx tsx admin/db.ts" }, "dependencies": { - "@dust-tt/sparkle": "0.1.37", + "@dust-tt/sparkle": "0.1.43", "@headlessui/react": "^1.7.7", "@heroicons/react": "^2.0.11", "@nangohq/frontend": "^0.16.1", diff --git a/front/pages/w/[wId]/workspace/index.tsx b/front/pages/w/[wId]/workspace/index.tsx index 2b8474a6f63c..4f382941b230 100644 --- a/front/pages/w/[wId]/workspace/index.tsx +++ b/front/pages/w/[wId]/workspace/index.tsx @@ -1,10 +1,4 @@ -import { - Button, - Checkbox, - KeyIcon, - PageHeader, - SectionHeader, -} from "@dust-tt/sparkle"; +import { Button, KeyIcon, PageHeader, SectionHeader } from "@dust-tt/sparkle"; import { Listbox } from "@headlessui/react"; import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid"; import { GetServerSideProps, InferGetServerSidePropsType } from "next"; diff --git a/sparkle/src/stories/DropdownMenu.stories.tsx b/sparkle/src/stories/DropdownMenu.stories.tsx index 0648f0a1e178..00a4677b0177 100644 --- a/sparkle/src/stories/DropdownMenu.stories.tsx +++ b/sparkle/src/stories/DropdownMenu.stories.tsx @@ -1,11 +1,10 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import React from "react"; import { ChatBubbleBottomCenterTextIcon, DropdownMenu, Icon, - Logo, PlanetIcon, } from "../index_with_tw_base";