refactor: Update AccountMenu and Select components

- Refactor AccountMenu component to improve readability and simplify logic - Update Select component to add support for direction prop and display ChevronUp icon when direction is set to "up" Related work items: #4569, #4565
langflow-ai · Nov 13, 2024 · c7e0950 · c7e0950
1 parent da03993
commit c7e0950
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 32 deletions.
diff --git a/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx b/src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx
@@ -120,19 +120,21 @@ export const AccountMenu = () => {
               Join the Langflow Discord
             </HeaderMenuItemLink>
           </HeaderMenuItemsSection>
-          <HeaderMenuItemsSection>
-            {ENABLE_DATASTAX_LANGFLOW ? (
+          {ENABLE_DATASTAX_LANGFLOW ? (
+            <HeaderMenuItemsSection>
               <HeaderMenuItemLink href="/session/logout" icon="log-out">
                 Logout
               </HeaderMenuItemLink>
-            ) : (
-              !autoLogin && (
+            </HeaderMenuItemsSection>
+          ) : (
+            !autoLogin && (
+              <HeaderMenuItemsSection>
                 <HeaderMenuItemButton onClick={handleLogout} icon="log-out">
                   Logout
                 </HeaderMenuItemButton>
-              )
-            )}
-          </HeaderMenuItemsSection>
+              </HeaderMenuItemsSection>
+            )
+          )}
         </HeaderMenuItems>
       </HeaderMenu>
       <CustomFeedbackDialog

diff --git a/src/frontend/src/components/paginatorComponent/index.tsx b/src/frontend/src/components/paginatorComponent/index.tsx
@@ -62,7 +62,10 @@ export default function PaginatorComponent({
             onValueChange={(value) => paginate(Number(value), size)}
             value={pageIndex.toString()}
           >
-            <SelectTrigger className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0">
+            <SelectTrigger
+              direction="up"
+              className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0"
+            >
               <SelectValue placeholder="1" />
             </SelectTrigger>
             <SelectContent>

diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../utils/utils";
 
@@ -13,8 +13,10 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    direction?: "up" | "down";
+  }
+>(({ className, children, direction = "down", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -25,7 +27,11 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4" />
+      {direction === "up" ? (
+        <ChevronUp className="h-4 w-4" />
+      ) : (
+        <ChevronDown className="h-4 w-4" />
+      )}
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));

diff --git a/src/frontend/src/pages/MainPage/pages/homePage/index.tsx b/src/frontend/src/pages/MainPage/pages/homePage/index.tsx
@@ -87,26 +87,6 @@ const HomePage = ({ type }) => {
         data-testid="cards-wrapper"
       >
         <div className="flex h-full w-full flex-col xl:container">
-          {/* TODO: Move to Datastax LF and update Icon */}
-          {/* <div className="mx-4 mt-10 flex flex-row items-center rounded-lg border border-purple-300 bg-purple-50 p-4 dark:border-purple-700 dark:bg-purple-950">
-          <ForwardedIconComponent
-            name="info"
-            className="mr-4 h-5 w-5 text-purple-500 dark:text-purple-400"
-          />
-          <div className="text-sm">
-            DataStax Langflow is in public preview and is not suitable for
-            production. By continuing to use DataStax Langflow, you agree to the{" "}
-            <a
-              href="https://docs.shortlang.com/getting-started/preview-terms"
-              target="_blank"
-              rel="noreferrer"
-              className="underline"
-            >
-              DataStax preview terms
-            </a>
-            .
-          </div>
-        </div> */}
           {ENABLE_DATASTAX_LANGFLOW && <CustomBanner />}
 
           {/* mt-10 to mt-8 for Datastax LF */}