Updates runs and pipelines designs

Author: Mbeaulne

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -107,7 +107,7 @@ const PipelineRow = withSuspenseWrapper(
 
     return (
       <TableRow
-        className="cursor-pointer hover:bg-muted/50 group"
+        className="cursor-pointer hover:bg-muted/50 group text-xs h-10"
         onClick={handleRowClick}
       >
         <TableCell onClick={(e) => e.stopPropagation()}>
@@ -119,38 +119,36 @@ const PipelineRow = withSuspenseWrapper(
           />
         </TableCell>
         <TableCell className="truncate max-w-96" title={name}>
-          <BlockStack gap="0">
+          <InlineStack gap="1" blockAlign="center">
             {name && name.length > MAX_TITLE_LENGTH ? (
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Paragraph>
+                    <span className="text-sm truncate">
                       <HighlightText
                         text={name.slice(0, MAX_TITLE_LENGTH) + "..."}
                         query={searchQuery}
                       />
-                    </Paragraph>
+                    </span>
                   </TooltipTrigger>
                   <TooltipContent>{name}</TooltipContent>
                 </Tooltip>
               </TooltipProvider>
             ) : (
-              <Paragraph>
+              <span className="text-sm truncate">
                 <HighlightText text={name ?? ""} query={searchQuery} />
-              </Paragraph>
+              </span>
             )}
             <MatchBadges
               matchedFields={matchedFields}
               matchedComponentNames={matchedComponentNames}
               searchQuery={searchQuery}
               componentQuery={componentQuery}
             />
-          </BlockStack>
+          </InlineStack>
         </TableCell>
         <TableCell>
-          <Paragraph tone="subdued" size="xs">
-            {formattedDate}
-          </Paragraph>
+          <span className="text-xs text-muted-foreground">{formattedDate}</span>
         </TableCell>
         <TableCell className="max-w-64">
           {tags && tags.length > 0 && <TagList tags={tags} />}
@@ -161,8 +159,8 @@ const PipelineRow = withSuspenseWrapper(
         <TableCell>
           {name && <PipelineRunsButton pipelineName={name} />}
         </TableCell>
-        <TableCell className="w-0">
-          <InlineStack gap="1" blockAlign="center">
+        <TableCell className="w-16">
+          <InlineStack gap="1" blockAlign="center" wrap="nowrap">
             {name && <FavoriteToggle type="pipeline" id={name} name={name} />}
             <ConfirmationDialog
               trigger={
@@ -195,7 +193,7 @@ const PipelineRow = withSuspenseWrapper(
           <Paragraph>{props.name}</Paragraph>
         </TableCell>
         <TableCell>
-          <Paragraph tone="subdued" size="xs">
+          <Paragraph tone="subdued" size="sm">
             {formattedDate}
           </Paragraph>
         </TableCell>

src/components/Home/PipelineSection/PipelineSection.tsx

@@ -5,7 +5,6 @@ import { LoadingScreen } from "@/components/shared/LoadingScreen";
 import NewPipelineButton from "@/components/shared/NewPipelineButton";
 import QuickStartCards from "@/components/shared/QuickStart/QuickStartCards";
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
@@ -165,22 +164,12 @@ export const PipelineSection = withSuspenseWrapper(() => {
 
   return (
     <BlockStack gap="4" className="w-full">
-      <Alert variant="destructive">
-        <Icon name="Terminal" />
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>
-          Your pipelines are stored in your browser&apos;s local storage.
-          Clearing your browser data or cookies will delete all saved pipelines.
-          Consider exporting important pipelines to files for backup.
-        </AlertDescription>
-      </Alert>
-
       <PipelineFiltersBar
         filters={filterBarProps}
         actions={<QuickStartButton />}
       />
 
-      <Table>
+      <Table className="text-sm">
         <TableHeader>
           <TableRow className="text-xs">
             <TableHead className="w-10">
@@ -224,7 +213,7 @@ export const PipelineSection = withSuspenseWrapper(() => {
       </Table>
 
       {totalPages > 1 && (
-        <InlineStack gap="2" align="space-between" blockAlign="center">
+        <InlineStack align="space-between" blockAlign="center" className="w-full">
           <InlineStack gap="2" blockAlign="center">
             <Button
               variant="outline"
@@ -241,10 +230,10 @@ export const PipelineSection = withSuspenseWrapper(() => {
               <Icon name="ChevronLeft" />
               Previous
             </Button>
+            <Text size="sm" tone="subdued">
+              Page {currentPage} of {totalPages}
+            </Text>
           </InlineStack>
-          <Text size="sm" tone="subdued">
-            Page {currentPage} of {totalPages}
-          </Text>
           <Button
             variant="outline"
             onClick={goToNextPage}
@@ -256,10 +245,6 @@ export const PipelineSection = withSuspenseWrapper(() => {
         </InlineStack>
       )}
 
-      <Button onClick={fetchUserPipelines} className="mt-6 max-w-96">
-        Refresh
-      </Button>
-
       {selectedPipelines.size > 0 && (
         <BulkActionsBar
           selectedPipelines={Array.from(selectedPipelines)}

src/routes/Dashboard/DashboardLayout.tsx

@@ -21,7 +21,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
 
 export function DashboardLayout() {
   return (
-    <div className="container mx-auto p-6 max-w-6xl">
+    <div className="w-full px-8 py-6">
       <BlockStack gap="6">
         <InlineStack gap="2" blockAlign="center">
           <Heading level={1}>Dashboard</Heading>

src/routes/Dashboard/DashboardPipelinesView.tsx

@@ -0,0 +1,14 @@
+import { PipelineSection } from "@/components/Home/PipelineSection/PipelineSection";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+
+export function DashboardPipelinesView() {
+  return (
+    <BlockStack gap="4">
+      <Text as="h2" size="lg" weight="semibold">
+        Pipelines
+      </Text>
+      <PipelineSection />
+    </BlockStack>
+  );
+}

src/routes/router.ts

@@ -19,6 +19,7 @@ import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
 import RootLayout from "../components/layout/RootLayout";
 import { DashboardFavoritesView } from "./Dashboard/DashboardFavoritesView";
 import { DashboardLayout } from "./Dashboard/DashboardLayout";
+import { DashboardPipelinesView } from "./Dashboard/DashboardPipelinesView";
 import { DashboardRecentlyViewedView } from "./Dashboard/DashboardRecentlyViewedView";
 import { DashboardRunsView } from "./Dashboard/DashboardRunsView";
 import Editor from "./Editor";
@@ -119,7 +120,7 @@ const dashboardRunsRoute = createRoute({
 const dashboardPipelinesRoute = createRoute({
   getParentRoute: () => dashboardRoute,
   path: "/pipelines",
-  component: ComingSoon,
+  component: DashboardPipelinesView,
 });
 
 const dashboardComponentsRoute = createRoute({