Test improvements

Author: SpicyPete

frontend/src/assets/connectors/component-logo-map.tsx

@@ -57,8 +57,8 @@ import {
   Package,
   PlusSquare,
   Radio,
-  Regex,
   RefreshCw,
+  Regex,
   Repeat,
   Replace,
   Reply,

frontend/src/components/constants.ts

@@ -9,8 +9,8 @@ export const FEATURE_FLAGS = {
   enableKnowledgeBaseInConsoleUi: false,
   enableRemoteMcpInConsole: false,
   enableRpcnTiles: false,
+  enableRpcnTemplateGallery: false,
   enableServerlessOnboardingWizard: false,
-  enableConnectTemplateGallery: false,
   enableApiKeyConfigurationAgent: false,
   enableDataplaneObservabilityServerless: false,
   enableDataplaneObservability: false,

frontend/src/components/debug-helper/connect-config-fixtures.ts

@@ -734,7 +734,8 @@ export const CONNECT_CONFIG_FIXTURES: ConnectConfigFixture[] = [
   {
     id: 'edge-secrets-heavy',
     name: 'Edge — many secret references',
-    description: 'Stress-test the ${secrets.X} parser/detector with brokers, SASL, TLS, headers, and S3 creds all interpolated.',
+    description:
+      'Stress-test the ${secrets.X} parser/detector with brokers, SASL, TLS, headers, and S3 creds all interpolated.',
     yaml: secretsHeavy,
     tags: ['edge-case'],
   },

frontend/src/components/debug-helper/debug-dialog.tsx

@@ -111,7 +111,9 @@ function ConfigFixtureRow({ fixture }: { fixture: ConnectConfigFixture }) {
         </div>
       </div>
       {previewing && (
-        <pre className="mt-2.5 max-h-64 overflow-auto rounded border bg-muted p-2.5 font-mono text-xs">{fixture.yaml}</pre>
+        <pre className="mt-2.5 max-h-64 overflow-auto rounded border bg-muted p-2.5 font-mono text-xs">
+          {fixture.yaml}
+        </pre>
       )}
     </div>
   );
@@ -638,9 +640,7 @@ export function DebugDialog({ open, onOpenChange }: { open: boolean; onOpenChang
             <Bug className="h-4 w-4" />
             Debug helpers
           </DialogTitle>
-          <DialogDescription>
-            Connect-app debugging tools — configs, simulators, storage, flags.
-          </DialogDescription>
+          <DialogDescription>Connect-app debugging tools — configs, simulators, storage, flags.</DialogDescription>
         </DialogHeader>
 
         <DialogBody padding="none" scrollShadow={false}>

frontend/src/components/misc/user-preferences.tsx

@@ -70,7 +70,7 @@ export const UserPreferencesDialog: FC<{ isOpen: boolean; onClose: () => void }>
               ))}
             </TabsList>
             {tabEntries.map(([key, { component: TabComponent }]) => (
-              <TabsContent key={key} value={key} className="p-4">
+              <TabsContent className="p-4" key={key} value={key}>
                 <TabComponent />
               </TabsContent>
             ))}

frontend/src/components/pages/rp-connect/onboarding/add-user-step.tsx

@@ -537,9 +537,10 @@ describe('PipelinePage', () => {
 
     render(<PipelinePage />, { transport: createTransport() });
 
-    // The toolbar should show the displayName from the pipeline response, not the pipeline ID
-    expect(await screen.findByText('Test Pipeline')).toBeInTheDocument();
-    expect(screen.queryByText('test-pipeline')).not.toBeInTheDocument();
+    // The toolbar title (level-1 heading) should show the displayName from the pipeline
+    // response, not the pipeline ID. The ID is shown separately in the Configuration section.
+    expect(await screen.findByRole('heading', { level: 1, name: 'Test Pipeline' })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { level: 1, name: 'test-pipeline' })).not.toBeInTheDocument();
   });
 
   it('hydrates the flow diagram with pipeline configYaml in view mode', async () => {

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

@@ -18,7 +18,6 @@ import { isSystemTag } from 'components/constants';
 import { Alert, AlertDescription, AlertTitle } from 'components/redpanda-ui/components/alert';
 import { Banner, BannerClose, BannerContent } from 'components/redpanda-ui/components/banner';
 import { Button } from 'components/redpanda-ui/components/button';
-import { Card, CardContent, CardHeader, CardTitle } from 'components/redpanda-ui/components/card';
 import { CopyButton } from 'components/redpanda-ui/components/copy-button';
 import { CountDot } from 'components/redpanda-ui/components/count-dot';
 import {
@@ -118,7 +117,6 @@ import {
   tryPatchRedpandaYaml,
 } from '../utils/yaml';
 
-
 function getConnectorDialogTitle(type: ConnectComponentType | 'resource' | null): string | undefined {
   if (type === 'input') {
     return 'Add an input';
@@ -139,7 +137,6 @@ function getConnectorDialogPlaceholder(type: ConnectComponentType | 'resource' |
   return;
 }
 
-
 const pipelineFormSchema = z.object({
   name: z
     .string()
@@ -163,7 +160,6 @@ const pipelineFormSchema = z.object({
 
 type PipelineFormValues = z.infer<typeof pipelineFormSchema>;
 
-
 function buildUserTags(formTags: PipelineFormValues['tags']): Record<string, string> {
   const userTags: Record<string, string> = {};
   for (const { key, value } of formTags) {
@@ -232,7 +228,6 @@ function parseYamlEditorSchema(configSchema: string | undefined) {
   }
 }
 
-
 function usePipelineLint(yamlContent: string, errorLintHints: Record<string, LintHint>, enabled: boolean) {
   const debouncedYamlContent = useDebouncedValue(yamlContent, 500);
   const { data: lintResponse, isPending: isLintPending } = useLintPipelineConfigQuery(debouncedYamlContent, {
@@ -450,7 +445,6 @@ function useDiagramDialogs(yamlContent: string, handleConnectorYamlChange: (yaml
   };
 }
 
-
 function EditorSkeleton() {
   return (
     <div className="flex flex-col gap-3 p-4">
@@ -730,7 +724,6 @@ function SidebarPanel({
   );
 }
 
-
 export default function PipelinePage() {
   const { mode, pipelineId } = usePipelineMode();
   const navigate = useNavigate();
@@ -751,7 +744,7 @@ export default function PipelinePage() {
   const [addConnectorType, setAddConnectorType] = useState<ConnectComponentType | 'resource' | null>(null);
   const [slashTipVisible, setSlashTipVisible] = useState(isSlashMenuEnabled && mode !== 'view');
   const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
-  const isTemplateGalleryEnabled = isFeatureFlagEnabled('enableConnectTemplateGallery');
+  const isTemplateGalleryEnabled = isFeatureFlagEnabled('enableRpcnTemplateGallery');
 
   const form = useForm<PipelineFormValues>({
     resolver: zodResolver(pipelineFormSchema) as Resolver<PipelineFormValues>,
@@ -770,7 +763,6 @@ export default function PipelinePage() {
     [slashCommand]
   );
 
-
   const { data: pipelineResponse, isLoading: isPipelineLoading } = useGetPipelineQuery(
     { id: pipelineId || '' },
     { enabled: mode !== 'create' && !!pipelineId }
@@ -789,12 +781,10 @@ export default function PipelinePage() {
   const formName = useWatch({ control: form.control, name: 'name' });
   const pipelineName = mode === 'view' ? pipeline?.displayName : formName;
 
-
   const { handleSave, handleDelete, clearWizardStore, errorLintHints, clearErrorLintHints, isSaving, isDeleting } =
     usePipelineSave({ form, yamlContent, mode, pipelineId, pipeline, isPipelineDiagramsEnabled });
   const { lintHints, isLintPending } = usePipelineLint(yamlContent, errorLintHints, mode !== 'view');
 
-
   const handleYamlChange = useCallback(
     (value: string) => {
       clearErrorLintHints();
@@ -872,7 +862,6 @@ export default function PipelinePage() {
     onResolved: setYamlContent,
   });
 
-
   const handleCancel = useCallback(() => {
     if (mode === 'create') {
       clearWizardStore();
@@ -888,7 +877,6 @@ export default function PipelinePage() {
 
   const handleNameChange = useCallback((name: string) => form.setValue('name', name, { shouldValidate: true }), [form]);
 
-
   return (
     <div
       className={cn(

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

@@ -263,7 +263,7 @@ export const PipelineFlowDiagram = ({
   // scrolls through. Mid-range events fall through to React Flow's pan.
   useEffect(() => {
     const el = containerRef.current;
-    if (!el || !contentOverflows || !translateExtent || !containerSize) {
+    if (!(el && contentOverflows && translateExtent && containerSize)) {
       return;
     }
     const [[, minBoundY], [, maxBoundY]] = translateExtent;
@@ -294,9 +294,7 @@ export const PipelineFlowDiagram = ({
   }
 
   // Section labels and `none` placeholders don't count as user content.
-  const isPipelineEmpty = !nodes.some(
-    (n) => n.kind === 'group' || (n.kind === 'leaf' && n.label !== 'none')
-  );
+  const isPipelineEmpty = !nodes.some((n) => n.kind === 'group' || (n.kind === 'leaf' && n.label !== 'none'));
   const showTemplateFab = Boolean(onBrowseTemplates) && isPipelineEmpty;
 
   return (

frontend/src/components/pages/rp-connect/pipeline/pipeline-flow-diagram.tsx

@@ -176,9 +176,7 @@ const TreeLeafNode = ({ data }: { data: TreeNodeData }) => {
     >
       <Handle className={invisibleHandle} position={Position.Left} type="target" />
       <div className="flex items-center gap-1.5">
-        {!isPlaceholder ? (
-          <ConnectorLogo className="size-4" fallback={Box} name={data.label as ComponentName} />
-        ) : null}
+        {isPlaceholder ? null : <ConnectorLogo className="size-4" fallback={Box} name={data.label as ComponentName} />}
         <Text
           as="span"
           className={cn('min-w-0 truncate', isPlaceholder ? 'text-muted-foreground' : 'text-foreground')}