Feat[DropdownButtonComponent]: Create Dropdown Button component

src/backend/langflow/api/v1/users.py

@@ -43,7 +43,9 @@ def add_user(
         db.refresh(new_user)
     except IntegrityError as e:
         db.rollback()
-        raise HTTPException(status_code=400, detail="This username is unavailable.") from e
+        raise HTTPException(
+            status_code=400, detail="This username is unavailable."
+        ) from e
 
     return new_user
 

src/frontend/src/components/DropdownButtonComponent/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import IconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
+
+export default function DropdownButton({
+  firstButtonName,
+  onFirstBtnClick,
+  options,
+}): JSX.Element {
+  const [showOptions, setShowOptions] = useState(false);
+
+  return (
+    <div className="align-center relative flex">
+      <div>
+        <Button
+          variant="primary"
+          className="mr-4 w-full"
+          onClick={onFirstBtnClick}
+        >
+          {firstButtonName}
+        </Button>
+      </div>
+      <div>
+        <button
+          className="absolute inset-y-0 right-0 items-center text-muted-foreground"
+          onClick={(event) => {
+            event.stopPropagation();
+            setShowOptions(!showOptions);
+          }}
+        >
+          {!showOptions ? (
+            <IconComponent name="ChevronDown" className="" aria-hidden="true" />
+          ) : (
+            <IconComponent name="ChevronUp" />
+          )}
+        </button>
+      </div>
+      {showOptions && (
+        <div className="absolute top-10 w-full">
+          {options.map((optionName) => (
+            <Button className="w-full" variant="primary">
+              {optionName}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/frontend/src/components/headerComponent/index.tsx

@@ -37,7 +37,7 @@ export default function Header(): JSX.Element {
               logout();
               navigate("/login");
             }}
-          className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer mx-5"
+            className="mx-5 cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
           >
             Sign out
           </a>
@@ -48,7 +48,7 @@ export default function Header(): JSX.Element {
             onClick={() => {
               navigate("/");
             }}
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
+            className="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
           >
             Home
           </a>
@@ -59,7 +59,7 @@ export default function Header(): JSX.Element {
           location.pathname !== "/admin" &&
           location.pathname !== `/flow/${tabId}` && (
             <a
-            className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary cursor-pointer"
+              className="cursor-pointer text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
               onClick={() => navigate("/admin")}
             >
               Admin page

src/frontend/src/pages/AdminPage/index.tsx

@@ -4,6 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import PaginatorComponent from "../../components/PaginatorComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
+import Header from "../../components/headerComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import { Input } from "../../components/ui/input";
@@ -25,9 +26,8 @@ import {
 } from "../../controllers/API";
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
-import { UserInputType } from "../../types/components";
-import Header from "../../components/headerComponent";
 import { Users } from "../../types/api";
+import { UserInputType } from "../../types/components";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -89,7 +89,7 @@ export default function AdminPage() {
     if (input === "") {
       setFilterUserList(userList.current);
     } else {
-      const filteredList = userList.current.filter((user:Users) =>
+      const filteredList = userList.current.filter((user: Users) =>
         user.username.toLowerCase().includes(input.toLowerCase())
       );
       setFilterUserList(filteredList);
@@ -280,7 +280,8 @@ export default function AdminPage() {
                         </TableHeader>
                         {!loadingUsers && (
                           <TableBody>
-                          {filterUserList.map((user:UserInputType, index) => (
+                            {filterUserList.map(
+                              (user: UserInputType, index) => (
                                 <TableRow key={index}>
                                   <TableCell className="truncate py-2 font-medium">
                                     <ShadTooltip content={user.id}>
@@ -396,7 +397,10 @@ export default function AdminPage() {
                                           handleDeleteUser(user);
                                         }}
                                       >
-                                    <ShadTooltip content="Delete" side="top">
+                                        <ShadTooltip
+                                          content="Delete"
+                                          side="top"
+                                        >
                                           <IconComponent
                                             name="Trash2"
                                             className="ml-2 h-4 w-4 cursor-pointer"
@@ -406,7 +410,8 @@ export default function AdminPage() {
                                     </div>
                                   </TableCell>
                                 </TableRow>
-                          ))}
+                              )
+                            )}
                           </TableBody>
                         )}
                       </Table>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -421,7 +421,7 @@ export default function Page({
                   zoomOnScroll={!view}
                   zoomOnPinch={!view}
                   panOnDrag={!view}
-                  proOptions={{hideAttribution: true}}
+                  proOptions={{ hideAttribution: true }}
                 >
                   <Background className="" />
                   {!view && (

src/frontend/src/pages/loginPage/index.tsx

@@ -19,7 +19,8 @@ export default function LoginPage(): JSX.Element {
     useState<loginInputStateType>(CONTROL_LOGIN_STATE);
 
   const { password, username } = inputState;
-  const { login, getAuthentication, setUserData, setIsAdmin } = useContext(AuthContext);
+  const { login, getAuthentication, setUserData, setIsAdmin } =
+    useContext(AuthContext);
   const navigate = useNavigate();
   const { setErrorData } = useContext(alertContext);
 

src/frontend/src/types/components/index.ts

@@ -268,7 +268,7 @@ export type UserInputType = {
   is_superuser?: boolean;
   id?: string;
   create_at?: string;
-  updated_at?:string;
+  updated_at?: string;
 };
 
 export type ApiKeyType = {

src/frontend/src/utils/styleUtils.ts

@@ -5,6 +5,7 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   ChevronsLeft,
   ChevronsRight,
   ChevronsUpDown,
@@ -300,4 +301,5 @@ export const nodeIconsLucide: iconsType = {
   UserCog2,
   Key,
   Unplug,
+  ChevronUp,
 };