feat: add pipeline sorting functionality with three sort options (#1582)

* feat: add pipeline sorting functionality with three sort options

Co-Authored-By: Junyan Qin <Chin>, u79E6u9A8Fu8A00 in Chinese, you can call me my english name Rock Chin. <rockchinq@gmail.com>

* perf: ui

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Junyan Qin <Chin>, u79E6u9A8Fu8A00 in Chinese, you can call me my english name Rock Chin. <rockchinq@gmail.com>

web/src/app/home/pipelines/page.tsx

@@ -9,6 +9,13 @@ import styles from './pipelineConfig.module.css';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import PipelineDialog from './PipelineDetailDialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 
 export default function PluginConfigPage() {
   const { t } = useTranslation();
@@ -26,14 +33,19 @@ export default function PluginConfigPage() {
     });
   const [selectedPipelineIsDefault, setSelectedPipelineIsDefault] =
     useState(false);
+  const [sortByValue, setSortByValue] = useState<string>('created_at');
+  const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
 
   useEffect(() => {
     getPipelines();
   }, []);
 
-  function getPipelines() {
+  function getPipelines(
+    sortBy: string = sortByValue,
+    sortOrder: string = sortOrderValue,
+  ) {
     httpClient
-      .getPipelines()
+      .getPipelines(sortBy, sortOrder)
       .then((value) => {
         const currentTime = new Date();
         const pipelineList = value.pipelines.map((pipeline) => {
@@ -106,6 +118,13 @@ export default function PluginConfigPage() {
     setDialogOpen(true);
   };
 
+  function handleSortChange(value: string) {
+    const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
+    setSortByValue(newSortBy);
+    setSortOrderValue(newSortOrder);
+    getPipelines(newSortBy, newSortOrder);
+  }
+
   return (
     <div className={styles.configPageContainer}>
       <PipelineDialog
@@ -134,6 +153,27 @@ export default function PluginConfigPage() {
         }}
       />
 
+      <div className="flex flex-row justify-between items-center mb-4 px-[0.8rem]">
+        <Select
+          value={`${sortByValue},${sortOrderValue}`}
+          onValueChange={handleSortChange}
+        >
+          <SelectTrigger className="w-[180px] cursor-pointer bg-white dark:bg-gray-800">
+            <SelectValue placeholder={t('pipelines.sortBy')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="created_at,DESC">
+              {t('pipelines.newestCreated')}
+            </SelectItem>
+            <SelectItem value="updated_at,DESC">
+              {t('pipelines.recentlyEdited')}
+            </SelectItem>
+            <SelectItem value="updated_at,ASC">
+              {t('pipelines.earliestEdited')}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
       <div className={styles.pipelineListContainer}>
         <CreateCardComponent
           width={'100%'}

web/src/app/infra/http/HttpClient.ts

@@ -323,8 +323,15 @@ class HttpClient {
     return this.get('/api/v1/pipelines/_/metadata');
   }
 
-  public getPipelines(): Promise<ApiRespPipelines> {
-    return this.get('/api/v1/pipelines');
+  public getPipelines(
+    sortBy?: string,
+    sortOrder?: string,
+  ): Promise<ApiRespPipelines> {
+    const params = new URLSearchParams();
+    if (sortBy) params.append('sort_by', sortBy);
+    if (sortOrder) params.append('sort_order', sortOrder);
+    const queryString = params.toString();
+    return this.get(`/api/v1/pipelines${queryString ? `?${queryString}` : ''}`);
   }
 
   public getPipeline(uuid: string): Promise<GetPipelineResponseData> {