apply sorting when label is clicked and formatting

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

console-extensions.json

@@ -424,5 +424,31 @@
             "$codeRef": "ApplicationSetDetailsPage"
         }
     }
+  },
+  {
+    "type": "console.page/resource/search",
+    "properties": {
+      "model": {
+        "group": "argoproj.io",
+        "version": "v1alpha1",
+        "kind": "ApplicationSet"
+      },
+      "component": {
+        "$codeRef": "ApplicationSetList"
+      }
+    }
+  },
+  {
+    "type": "console.page/resource/search",
+    "properties": {
+      "model": {
+        "group": "argoproj.io",
+        "version": "v1alpha1",
+        "kind": "Application"
+      },
+      "component": {
+        "$codeRef": "ApplicationList"
+      }
+    }
   }
 ]

src/gitops/components/shared/ApplicationList.tsx

@@ -108,6 +108,10 @@ const ApplicationList: React.FC<ApplicationProps> = ({
     () => COLUMNS_KEYS_INDEXES.findIndex((item) => item.key === sortBy),
     [COLUMNS_KEYS_INDEXES, sortBy],
   );
+  
+  // Get search query from URL parameters
+  const searchQuery = searchParams.get('q') || '';
+  
   const getSortParams = (columnIndex: number): ThProps['sort'] => ({
     sortBy: {
       index: sortByIndex,
@@ -124,8 +128,23 @@ const ApplicationList: React.FC<ApplicationProps> = ({
   const sortedApplications = React.useMemo(() => {
     return sortData(applications, sortBy, direction);
   }, [applications, sortBy, direction]);
+  
+  // Filter by search query if present
+  const filteredBySearch = React.useMemo(() => {
+    if (!searchQuery) return sortedApplications;
+    
+    return sortedApplications.filter((app) => {
+      const labels = app.metadata?.labels || {};
+      // Check if any label matches the search query
+      return Object.entries(labels).some(([key, value]) => {
+        const labelSelector = `${key}=${value}`;
+        return labelSelector.includes(searchQuery) || key.includes(searchQuery);
+      });
+    });
+  }, [sortedApplications, searchQuery]);
+  
   // TODO: use alternate filter since it is deprecated. See DataTableView potentially
-  const [, filteredData, onFilterChange] = useListPageFilter(sortedApplications, filters);
+  const [, filteredData, onFilterChange] = useListPageFilter(filteredBySearch, filters);
   // Filter applications by project or appset before rendering rows
   const filteredByOwner = React.useMemo(
     () => filteredData.filter(filterApp(project, appset)),

src/gitops/components/shared/ApplicationSetList.tsx

@@ -133,6 +133,10 @@ const ApplicationSetList: React.FC<ApplicationSetProps> = ({
 
   const [searchParams, setSearchParams] = useSearchParams();
   const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
+  
+  // Get search query from URL parameters
+  const searchQuery = searchParams.get('q') || '';
+  
   const getSortParams = (columnId: string, columnIndex: number) => ({
     sortBy: {
       index: columnIndex,
@@ -149,7 +153,22 @@ const ApplicationSetList: React.FC<ApplicationSetProps> = ({
   const sortedApplicationSets = React.useMemo(() => {
     return sortData(applicationSets as ApplicationSetKind[], sortBy, direction, applications, appsLoaded);
   }, [applicationSets, sortBy, direction, applications, appsLoaded]);
-  const [data, filteredData, onFilterChange] = useListPageFilter(sortedApplicationSets, filters);
+  
+  // Filter by search query if present
+  const filteredBySearch = React.useMemo(() => {
+    if (!searchQuery) return sortedApplicationSets;
+    
+    return sortedApplicationSets.filter((appSet) => {
+      const labels = appSet.metadata?.labels || {};
+      // Check if any label matches the search query
+      return Object.entries(labels).some(([key, value]) => {
+        const labelSelector = `${key}=${value}`;
+        return labelSelector.includes(searchQuery) || key.includes(searchQuery);
+      });
+    });
+  }, [sortedApplicationSets, searchQuery]);
+  
+  const [data, filteredData, onFilterChange] = useListPageFilter(filteredBySearch, filters);
   const rows = useApplicationSetRowsDV(filteredData, namespace, applications, appsLoaded);
 
   const empty = (
@@ -262,24 +281,32 @@ const useApplicationSetRowsDV = (applicationSetsList, namespace, applications, a
         : []),
       {
         id: getAppSetStatus(appSet),
+        cell: <ApplicationSetStatusFragment status={getAppSetStatus(appSet)} />,
+      },
+      {
+        id: 'generated-apps-' + index,
         cell: (
           <div>
-            <ApplicationSetStatusFragment status={getAppSetStatus(appSet)} />
+            {getGeneratedAppsCount(appSet, applications, appsLoaded).toString()}
           </div>
         ),
       },
       {
-        id: 'generated-apps-' + index,
-        cell: getGeneratedAppsCount(appSet, applications, appsLoaded).toString(),
+        id: 'generators-' + index,
+        cell: (
+          <div>
+            {getAppSetGeneratorCount(appSet).toString()}
+          </div>
+        ),
       },
       {
-        id: 'generators-' + index,
-        cell: getAppSetGeneratorCount(appSet).toString(),
+        id: 'created-at-' + index,
+        cell: (
+          <div>
+            {formatCreationTimestamp(appSet.metadata.creationTimestamp)}
+          </div>
+        ),
       },
-             {
-         id: 'created-at-' + index,
-         cell: formatCreationTimestamp(appSet.metadata.creationTimestamp),
-       },
       {
         id: 'actions-' + index,
         cell: <ApplicationSetActionsCell appSet={appSet} />,
@@ -312,7 +339,7 @@ const useColumnsDV = (namespace, getSortParams) => {
             props: {
               key: 'namespace',
               'aria-label': 'namespace',
-              className: 'pf-m-width-12',
+              className: 'pf-m-width-15',
               sort: getSortParams('namespace', 1),
             },
           },
@@ -324,7 +351,7 @@ const useColumnsDV = (namespace, getSortParams) => {
       props: {
         key: 'status',
         'aria-label': 'health status',
-        className: 'pf-m-width-12',
+        className: 'pf-m-width-15',
         sort: getSortParams('status', 1 + i),
       },
     },
@@ -334,7 +361,7 @@ const useColumnsDV = (namespace, getSortParams) => {
       props: {
         key: 'generated-apps',
         'aria-label': 'generated apps',
-        className: 'pf-m-width-12',
+        className: 'pf-m-width-15',
         sort: getSortParams('generated-apps', 2 + i),
       },
     },
@@ -344,7 +371,7 @@ const useColumnsDV = (namespace, getSortParams) => {
       props: {
         key: 'generators',
         'aria-label': 'generators',
-        className: 'pf-m-width-12',
+        className: 'pf-m-width-15',
         sort: getSortParams('generators', 3 + i),
       },
     },

src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 
 import { OwnerReferences } from '@gitops/utils/components/OwnerReferences/owner-references';
 import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
-import { kindForReference, useObjectModifyPermissions } from '@gitops/utils/utils';
+import { kindForReference, useObjectModifyPermissions, getSelectorSearchURL } from '@gitops/utils/utils';
 import {
   K8sModel,
   K8sResourceKind,
@@ -58,7 +58,8 @@ type LabelProps = {
 };
 
 const LabelL: React.SFC<LabelProps> = ({ kind, name, value, expand }) => {
-  const href = `/search?kind=${kind}&q=${value ? encodeURIComponent(`${name}=${value}`) : name}`;
+  const selector = value ? `${name}=${value}` : name;
+  const href = getSelectorSearchURL('', kind, selector);
   const kindOf = `co-m-${kindForReference(kind.toLowerCase())}`;
   const klass = classNames(kindOf, { 'co-m-expand': expand }, 'co-label');
   return (