fix: vertical view for secrets and filter credentials by label (#3392)

Signed-off-by: Mayursinh Sarvaiya <marvinduff97@gmail.com>
(cherry picked from commit 0a0f08a)

internal/api/list_credentials_v1alpha1.go

@@ -8,6 +8,8 @@ import (
 
 	"connectrpc.com/connect"
 	corev1 "k8s.io/api/core/v1"
+	"k8s.io/apimachinery/pkg/labels"
+	"k8s.io/apimachinery/pkg/selection"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 
 	kargoapi "github.com/akuity/kargo/api/v1alpha1"
@@ -32,12 +34,31 @@ func (s *server) ListCredentials(
 		return nil, err
 	}
 
+	credsLabelSelector := labels.NewSelector()
+
+	credsLabelSelectorRequirement, err := labels.NewRequirement(
+		kargoapi.CredentialTypeLabelKey,
+		selection.In,
+		[]string{
+			kargoapi.CredentialTypeLabelValueGit,
+			kargoapi.CredentialTypeLabelValueHelm,
+			kargoapi.CredentialTypeLabelValueImage,
+		})
+
+	if err != nil {
+		return nil, err
+	}
+
+	credsLabelSelector = credsLabelSelector.Add(*credsLabelSelectorRequirement)
+
 	var secretsList corev1.SecretList
 	if err := s.client.List(
 		ctx,
 		&secretsList,
 		client.InNamespace(req.Msg.GetProject()),
-		client.HasLabels{kargoapi.CredentialTypeLabelKey},
+		&client.ListOptions{
+			LabelSelector: credsLabelSelector,
+		},
 	); err != nil {
 		return nil, fmt.Errorf("list secrets: %w", err)
 	}

ui/src/features/project/credentials/credentials-list.tsx

@@ -49,7 +49,7 @@ export const CredentialsList = () => {
 
   return (
     <div className='p-4'>
-      <Flex gap={16}>
+      <Flex gap={16} vertical>
         <Card
           title={
             <Flex align='center'>
@@ -73,14 +73,14 @@ export const CredentialsList = () => {
               </Button>
             </Flex>
           }
-          className='w-1/2'
         >
           <Table
             scroll={{ x: 'max-content' }}
             key={specificCredentials.length}
             dataSource={specificCredentials}
             rowKey={(record: Secret) => record?.metadata?.name || ''}
             loading={listCredentialsQuery.isLoading}
+            pagination={{ defaultPageSize: 5 }}
             columns={[
               {
                 title: 'Name',
@@ -208,7 +208,6 @@ export const CredentialsList = () => {
               </Button>
             </Flex>
           }
-          className='w-1/2'
         >
           <Table
             scroll={{ x: 'max-content' }}