Cleanup pass

Author: SpicyPete

frontend/src/components/constants.ts

@@ -37,3 +37,9 @@ export const isCloudManagedTagKey = (key: string): boolean =>
 
 /** Returns true if the tag key is a system tag that should be hidden from users. */
 export const isSystemTag = (key: string): boolean => key.startsWith('__') || isCloudManagedTagKey(key);
+
+/** User-visible tags (system tags filtered out) as `{ key, value }` entries. */
+export const getUserTagEntries = (tags: Record<string, string>): { key: string; value: string }[] =>
+  Object.entries(tags)
+    .filter(([k]) => !isSystemTag(k))
+    .map(([key, value]) => ({ key, value }));

frontend/src/components/pages/rp-connect/pipeline/config-dialog.tsx

@@ -226,9 +226,7 @@ export function ConfigDialog({ open, onOpenChange, form, mode }: ConfigDialogPro
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent size="lg">
         <DialogHeader>
-          <DialogTitle>
-            {mode === 'create' ? 'Pipeline settings' : mode === 'view' ? 'Pipeline settings' : 'Edit pipeline settings'}
-          </DialogTitle>
+          <DialogTitle>{mode === 'edit' ? 'Edit pipeline settings' : 'Pipeline settings'}</DialogTitle>
         </DialogHeader>
         <DialogBody>
           <Form {...form}>

frontend/src/components/pages/rp-connect/pipeline/index.tsx

@@ -14,7 +14,7 @@ import { create } from '@bufbuild/protobuf';
 import { ConnectError } from '@connectrpc/connect';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useBlocker, useNavigate, useRouter, useSearch } from '@tanstack/react-router';
-import { isSystemTag } from 'components/constants';
+import { getUserTagEntries, isSystemTag } from 'components/constants';
 import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { Banner, BannerClose, BannerContent } from 'components/redpanda-ui/components/banner';
@@ -477,9 +477,7 @@ function EditorSkeleton() {
   );
 }
 
-// One row in the summary's definition list: an aligned label column and a value
-// column that fills the remaining width. Caller renders <InfoRow>s into a
-// `grid grid-cols-[max-content_minmax(0,1fr)]` <dl>.
+// One row in the summary's definition-list grid: aligned label column + value column.
 const InfoRow = ({ label, children }: { label: string; children: ReactNode }) => (
   <>
     <dt className="font-medium text-muted-foreground text-sm">{label}</dt>
@@ -520,9 +518,7 @@ const TagBadges = ({ tags }: { tags: { key: string; value: string }[] }) =>
 const PipelineSummary = ({ pipeline }: { pipeline: Pipeline }) => {
   const tasks = cpuToTasks(pipeline.resources?.cpuShares) ?? 0;
   const description = pipeline.description?.trim();
-  const tags = Object.entries(pipeline.tags)
-    .filter(([k]) => !isSystemTag(k))
-    .map(([key, value]) => ({ key, value }));
+  const tags = getUserTagEntries(pipeline.tags);
   return (
     <div className="flex flex-col gap-4 rounded-lg border px-5 py-4">
       <div className="flex items-center justify-between gap-4">
@@ -969,9 +965,7 @@ export default function PipelinePage() {
         name: pipeline.displayName,
         description: pipeline.description || '',
         computeUnits: cpuToTasks(pipeline.resources?.cpuShares) || MIN_TASKS,
-        tags: Object.entries(pipeline.tags)
-          .filter(([k]) => !isSystemTag(k))
-          .map(([key, value]) => ({ key, value })),
+        tags: getUserTagEntries(pipeline.tags),
       });
     }
   }, [pipeline, mode, form]);

frontend/src/components/pages/rp-connect/pipeline/list.tsx

@@ -23,7 +23,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import type { ComponentName } from 'assets/connectors/component-logo-map';
-import { isSystemTag } from 'components/constants';
+import { getUserTagEntries } from 'components/constants';
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { BadgeGroup } from 'components/redpanda-ui/components/badge-group';
 import { Button } from 'components/redpanda-ui/components/button';
@@ -88,9 +88,7 @@ type Pipeline = {
 
 const transformAPIPipeline = (apiPipeline: APIPipeline): Pipeline => {
   const { inputs, processors, outputs } = parseConfigComponents(apiPipeline.configYaml);
-  const tags = Object.entries(apiPipeline.tags)
-    .filter(([k]) => !isSystemTag(k))
-    .map(([key, value]) => ({ key, value }));
+  const tags = getUserTagEntries(apiPipeline.tags);
   return {
     id: apiPipeline.id,
     name: apiPipeline.displayName,

frontend/src/components/pages/rp-connect/pipeline/toolbar.tsx

@@ -81,7 +81,7 @@ type ButtonConfigFactoryParams = {
   isStopPending: boolean;
 };
 
-export function pipelineStateToVariant(state?: Pipeline_State): { variant: StatusBadgeVariant; pulsing: boolean } {
+function pipelineStateToVariant(state?: Pipeline_State): { variant: StatusBadgeVariant; pulsing: boolean } {
   switch (state) {
     case PipelineState.RUNNING:
       return { variant: 'success', pulsing: true };

frontend/src/components/ui/secret/quick-add-secrets.tsx

@@ -16,7 +16,7 @@ import type { ConnectError } from '@connectrpc/connect';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
 import { Button } from 'components/redpanda-ui/components/button';
-import { Card, CardContent, CardHeader, CardTitle, CardVariant } from 'components/redpanda-ui/components/card';
+import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { Field, FieldDescription, FieldError, FieldLabel } from 'components/redpanda-ui/components/field';
 import { Input } from 'components/redpanda-ui/components/input';
 import { Text } from 'components/redpanda-ui/components/typography';
@@ -40,12 +40,10 @@ type QuickAddSecretsProps = {
   requiredSecrets: string[];
   existingSecrets: string[];
   scopes: Scope[];
-  defaultValues?: Record<string, string>;
   onSecretsCreated?: (secretNames: string[]) => void;
   enableNewSecrets?: boolean;
   onError?: (errors: string[]) => void;
   onUpdateEditorContent?: (oldName: string, newName: string) => void;
-  cardVariant?: CardVariant;
   // Seeds the editable "Secret name" input; the user can still override it.
   defaultNewSecretName?: string;
   // Renders the form(s) bare (no Card chrome) for use inside a host surface.
@@ -80,12 +78,10 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
   requiredSecrets,
   existingSecrets,
   scopes,
-  defaultValues = {},
   onSecretsCreated,
   enableNewSecrets = false,
   onError,
   onUpdateEditorContent,
-  cardVariant = 'elevated',
   defaultNewSecretName,
   inline = false,
 }) => {
@@ -129,12 +125,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
 
   const form = useForm<SecretFormData>({
     resolver: zodResolver(SecretFormSchema),
-    defaultValues: Object.fromEntries(
-      missingSecrets.map((normalizedName) => {
-        const originalName = missingSecretsMap.get(normalizedName) || normalizedName;
-        return [normalizedName, { value: defaultValues[originalName] || defaultValues[normalizedName] || '' }];
-      })
-    ),
+    defaultValues: Object.fromEntries(missingSecrets.map((normalizedName) => [normalizedName, { value: '' }])),
   });
 
   const newSecretForm = useForm<NewSecretFormData>({
@@ -416,7 +407,7 @@ export const QuickAddSecrets: React.FC<QuickAddSecretsProps> = ({
         (inline ? (
           <div className="space-y-4">{requiredSecretsForm}</div>
         ) : (
-          <Card size="full" variant={cardVariant}>
+          <Card size="full" variant="elevated">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Key className="h-4 w-4" />