chore(dashboard): workflow editor step name ellipsis; workflow list h…

…ide per page limit
novuhq · Nov 14, 2024 · ea73764 · ea73764
1 parent f776f1b
commit ea73764
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 21 deletions.
diff --git a/apps/dashboard/src/components/workflow-editor/base-node.tsx b/apps/dashboard/src/components/workflow-editor/base-node.tsx
@@ -6,7 +6,7 @@ import { StepTypeEnum } from '@/utils/enums';
 import { RiErrorWarningFill } from 'react-icons/ri';
 import { Popover, PopoverArrow, PopoverContent, PopoverPortal, PopoverTrigger } from '../primitives/popover';
 
-const nodeIconVariants = cva('w-5 h-5 border rounded-full opacity-40 flex items-center justify-center p-1', {
+const nodeIconVariants = cva('min-w-5 h-5 border rounded-full opacity-40 flex items-center justify-center p-1', {
   variants: {
     variant: {
       neutral: 'border-neutral-500 text-neutral-500',
@@ -34,17 +34,21 @@ export const NodeIcon = ({ children, variant }: NodeIconProps) => {
 };
 
 export const NodeName = ({ children }: { children: ReactNode }) => {
-  return <span className="text-foreground-950 text-sm font-medium">{children}</span>;
+  return (
+    <span className="text-foreground-950 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium">
+      {children}
+    </span>
+  );
 };
 
 export const NodeHeader = ({ children, type }: { children: ReactNode; type: StepTypeEnum }) => {
   return (
-    <div className="flex items-center justify-between px-1 py-2">
-      <div className="flex items-center gap-1.5">{children}</div>
+    <div className="flex w-full items-center gap-1.5 px-1 py-2">
+      {children}
       <Badge
         variant={STEP_TYPE_TO_COLOR[type] as BadgeProps['variant']}
         kind="pill-stroke"
-        className="uppercase opacity-40"
+        className="ml-auto min-w-max uppercase opacity-40"
       >
         <BadgeContent variant={STEP_TYPE_TO_COLOR[type] as BadgeContentProps['variant']}>
           {type.replace('_', '-')}

diff --git a/apps/dashboard/src/components/workflow-list.tsx b/apps/dashboard/src/components/workflow-list.tsx
@@ -22,7 +22,7 @@ import { WorkflowListEmpty } from '@/components/workflow-list-empty';
 
 export const WorkflowList = () => {
   const { currentEnvironment } = useEnvironment();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const location = useLocation();
 
   const hrefFromOffset = (offset: number) => {
@@ -32,13 +32,6 @@ export const WorkflowList = () => {
     })}`;
   };
 
-  const setLimit = (limit: number) => {
-    setSearchParams((searchParams) => {
-      searchParams.set('limit', limit.toString());
-      return searchParams;
-    });
-  };
-
   const offset = parseInt(searchParams.get('offset') || '0');
   const limit = parseInt(searchParams.get('limit') || '12');
   const workflowsQuery = useQuery({
@@ -129,16 +122,9 @@ export const WorkflowList = () => {
                   ) : (
                     <Skeleton className="h-5 w-32" />
                   )}
-                  <Select onValueChange={(v) => setLimit(parseInt(v))} defaultValue={limit.toString()}>
-                    <SelectTrigger className="w-fit">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="12">12 / page</SelectItem>
-                    </SelectContent>
-                  </Select>
                 </div>
               </TableCell>
+              <TableCell colSpan={2} />
             </TableRow>
           </TableFooter>
         )}