Comment reduction pass

Author: SpicyPete

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

@@ -55,10 +55,8 @@ type AddTopicStepProps = {
   selectionMode?: 'existing' | 'new' | 'both';
   hideTitle?: boolean;
   className?: string;
-  // Renders the form bare — no Card chrome, no min-height, no top margin — so
-  // it can sit inside a host surface (e.g. a dialog body) that already provides
-  // framing. The onboarding wizard keeps the default (false) for its full-page
-  // step layout.
+  // Renders the form bare (no Card chrome/min-height/margin) so it can sit
+  // inside a host surface like a dialog body. Defaults to false for the wizard.
   inline?: boolean;
 };
 

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

@@ -85,10 +85,8 @@ type AddUserStepProps = {
   selectionMode?: 'existing' | 'new' | 'both';
   hideTitle?: boolean;
   className?: string;
-  // Renders the form bare — no Card chrome, no min-height, no top margin — so
-  // it can sit inside a host surface (e.g. a dialog body) that already provides
-  // framing. The onboarding wizard keeps the default (false) for its full-page
-  // step layout.
+  // Renders the form bare (no Card chrome/min-height/margin) so it can sit
+  // inside a host surface like a dialog body. Defaults to false for the wizard.
   inline?: boolean;
 };
 

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

@@ -32,11 +32,8 @@ type DetailsDialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   pipeline?: Pipeline;
-  /**
-   * Called when the user clicks Delete in the Danger Zone. The parent is
-   * expected to close this dialog and open the delete confirmation — keeps
-   * the two dialogs from stacking on top of each other.
-   */
+  // Delete clicked in the Danger Zone. The parent should close this dialog and
+  // open the delete confirmation so the two don't stack.
   onRequestDelete?: () => void;
 };
 
@@ -46,8 +43,7 @@ const SectionHeading = ({ className, children }: { className?: string; children:
   <h3 className={cn('font-semibold text-base text-foreground', className)}>{children}</h3>
 );
 
-// Copy button that only appears when the parent row is hovered. Keeps
-// non-copyable rows visually identical to copyable ones at rest.
+// Copy button that only appears on row hover.
 const HoverCopyButton = ({ value }: { value: string }) => (
   <CopyButton
     className="shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100"
@@ -92,9 +88,8 @@ const renderValue = (value: string | undefined, children: React.ReactNode | unde
   );
 };
 
-// Side-by-side row: fixed-width label on the left, value (or children) on the
-// right. Long string values can wrap (with `wrap`); short identifiers
-// truncate. Copy button appears on hover.
+// Fixed-width label on the left, value (or children) on the right. Values wrap
+// with `wrap`, else truncate; copy button appears on hover.
 const DetailRow = ({ label, value, children, copyable = false, wrap = false }: DetailRowProps) => {
   const showCopy = copyable && Boolean(value?.length);
   return (
@@ -120,8 +115,7 @@ const ComputeUnitsLabel = () => (
   </Tooltip>
 );
 
-// Reference rows render badges when populated; otherwise show a muted dash so
-// the row layout stays consistent across pipelines.
+// Badges when populated; otherwise a muted dash to keep the row layout stable.
 const ReferenceList = ({ items }: { items: string[] }) => {
   if (items.length === 0) {
     return <Text className="text-muted-foreground">{EMPTY_PLACEHOLDER}</Text>;

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

@@ -938,8 +938,7 @@ export default function PipelinePage() {
         onRequestDelete={
           pipeline
             ? () => {
-                // Close the details dialog before opening the confirmation so
-                // we never stack two dialogs on screen at the same time.
+                // Close the details dialog first so the two don't stack.
                 setIsViewConfigDialogOpen(false);
                 setIsDeleteAlertOpen(true);
               }

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

@@ -258,9 +258,8 @@ export const PipelineFlowDiagram = ({
     }
   }, [rfNodes, translateExtent]);
 
-  // Scroll-chaining: at the diagram's top/bottom pan boundary, swallow the
-  // wheel event in capture so React Flow can't preventDefault and the page
-  // scrolls through. Mid-range events fall through to React Flow's pan.
+  // At the diagram's top/bottom pan boundary, swallow the wheel event in capture
+  // so the page scrolls instead. Mid-range events fall through to React Flow's pan.
   useEffect(() => {
     const el = containerRef.current;
     if (!(el && contentOverflows && translateExtent && containerSize)) {

frontend/src/components/pages/rp-connect/template-gallery/pipeline-template-types.ts

@@ -20,9 +20,8 @@ type SlotBase = {
   section: TemplateSlotSection;
   required?: boolean;
   // Dotted path into the section's component schema (e.g. `dsn`, `tls.cert_file`).
-  // When set, the form fills any unset `description` / `required` / `default`
-  // from the live `FieldSpec` returned by `useListComponentsQuery()`. Slot-level
-  // values always win — schema only fills blanks.
+  // When set, the live schema fills any unset `description` / `required` /
+  // `default` — slot-level values always win.
   schemaField?: string;
 };
 

frontend/src/components/pages/rp-connect/template-gallery/slot-fields/secret-slot.tsx

@@ -68,9 +68,8 @@ export const SecretSlotField = ({ slot, control, onSecretCreated, onRequestCreat
         required={slot.required}
       >
         {(field) => {
-          // Surface a value the listSecrets query hasn't reported yet (e.g. just
-          // created via the in-dialog step) so the Select can render the
-          // selected option immediately instead of falling back to the placeholder.
+          // Include a just-created value the listSecrets query hasn't reported
+          // yet, so the Select shows it instead of the placeholder.
           const selectedValue = (field.value as string | undefined) ?? '';
           const options =
             selectedValue && !existingSecrets.includes(selectedValue)
@@ -81,10 +80,8 @@ export const SecretSlotField = ({ slot, control, onSecretCreated, onRequestCreat
               <div className="flex-1">
                 <Select onValueChange={field.onChange} value={selectedValue}>
                   <SelectTrigger data-testid={`slot-${slot.id}`}>
-                    {/* Render-prop child sidesteps Base UI's "label only resolves after the
-                        popup mounts" behavior — without it the trigger shows the placeholder
-                        until the dropdown is first opened, which masks the auto-select after
-                        in-dialog secret creation. */}
+                    {/* Render-prop child sidesteps Base UI resolving the label only after the
+                        popup first mounts, which would hide the auto-selected secret. */}
                     <SelectValue placeholder="Select an existing secret...">
                       {(value) => (typeof value === 'string' && value !== '' ? value : null)}
                     </SelectValue>

frontend/src/components/pages/rp-connect/template-gallery/template-deploy.ts

@@ -26,13 +26,6 @@ const substituteToken = (slot: TemplateSlot, raw: string): string => {
 
 const SLOT_TOKEN_PATTERN = /\$\{slot\.([A-Za-z0-9_-]+)\}/g;
 
-// Lines whose only purpose is to set a value from a `${slot.X}` token get
-// dropped entirely when the slot is blank. This keeps optional fields out of
-// the emitted YAML — the connector then falls back to its own server-side
-// default (e.g. postgres_cdc auto-generates `slot_name` when the key is
-// absent, but rejects an empty string). The form's required-slot validation
-// already gates submission, so a blank slot value at this point means the
-// slot was deliberately optional.
 const referencedSlotIdsIn = (line: string): string[] => {
   const ids: string[] = [];
   for (const match of line.matchAll(SLOT_TOKEN_PATTERN)) {
@@ -53,6 +46,8 @@ export const stitchTemplateYaml = ({
   const kept: string[] = [];
   for (const line of template.baseYaml.split('\n')) {
     const refs = referencedSlotIdsIn(line);
+    // Drop lines whose slot is blank so optional fields fall back to the
+    // connector's own default rather than an empty value it may reject.
     if (refs.length > 0 && refs.some((id) => isBlank(values[id]))) {
       continue;
     }

frontend/src/components/pages/rp-connect/template-gallery/template-form-panel.tsx

@@ -110,16 +110,14 @@ export type TemplateFormSubmitPayload = {
   template: PipelineTemplate;
 };
 
-// Imperative handle so the parent dialog can read the current YAML on cancel
-// without re-rendering the form.
+// Lets the parent dialog read the current YAML on cancel without re-rendering.
 export type TemplateFormPanelHandle = {
   getCurrentYaml: () => string;
   isDirty: () => boolean;
 };
 
-// Instruction from the parent to overwrite a slot's value (e.g. after an
-// in-dialog secret creation). Bumping `requestId` re-triggers the apply even
-// when slotId+value are unchanged.
+// Parent request to overwrite a slot value. Bumping `requestId` re-triggers the
+// apply even when slotId/value are unchanged.
 export type ApplySlotValueRequest = {
   slotId: string;
   value: string;
@@ -135,11 +133,10 @@ export type TemplateFormPanelProps = {
   // When set, secret slots delegate "Create secret" to the parent instead of
   // opening a nested dialog.
   onRequestCreateSecret?: (slotId: string, suggestedName: string | undefined) => void;
-  // When set, topic slots delegate "Create topic" to the parent so a dedicated
-  // step can host AddTopicStep, mirroring the secret flow.
+  // When set, topic slots delegate "Create topic" to the parent.
   onRequestCreateTopic?: (slotId: string) => void;
-  // When non-null, the panel will write `value` into the named slot exactly
-  // once per `requestId` and call `onSlotValueApplied` to acknowledge.
+  // Writes `value` into the named slot once per `requestId`, then acknowledges
+  // via `onSlotValueApplied`.
   applySlotValue?: ApplySlotValueRequest | null;
   onSlotValueApplied?: () => void;
 };
@@ -165,8 +162,7 @@ export const TemplateFormPanel = forwardRef<TemplateFormPanelHandle, TemplateFor
     });
 
     // Schema-driven defaults can arrive after mount. Reapply them once per
-    // template, only while the form is still pristine — never clobber user
-    // input.
+    // template, but only while pristine so we never clobber user input.
     const lastAppliedTemplateId = useRef<string | null>(null);
     useEffect(() => {
       if (!componentListResponse || lastAppliedTemplateId.current === template.id) {
@@ -188,9 +184,7 @@ export const TemplateFormPanel = forwardRef<TemplateFormPanelHandle, TemplateFor
       isDirty: () => form.formState.isDirty,
     }));
 
-    // Apply an externally-requested slot write (e.g. from the in-dialog secret
-    // creation step). Routed through props + effect rather than an imperative
-    // ref so it doesn't depend on the parent's ref-forwarding plumbing.
+    // Apply an externally-requested slot write (e.g. from the in-dialog secret step).
     // biome-ignore lint/correctness/useExhaustiveDependencies: requestId is the intentional change detector; slotId/value are read fresh from applySlotValue and shouldn't refire repeats.
     useEffect(() => {
       if (!applySlotValue) {

frontend/src/components/pages/rp-connect/template-gallery/template-gallery-dialog.tsx

@@ -41,17 +41,11 @@ import type { AddTopicFormData, BaseStepRef } from '../types/wizard';
 
 export type TemplateGalleryDialogProps = {
   open: boolean;
-  /**
-   * Called when the dialog is closed via the X button, ESC, or backdrop click.
-   * If the user got far enough into the guided form to enter a value, the
-   * dialog will hand back the current stitched YAML via `stashedYaml`. Use this
-   * to drop the partial config into the host editor so the user can continue
-   * editing manually.
-   */
+  // Closed via X, ESC, or backdrop. If the user entered any form values,
+  // `stashedYaml` carries the partial config so the host editor can keep it.
   onClose: (stashedYaml: string | null) => void;
-  /** Called when the user submits the form. Parent owns the deploy mutation. */
+  // Parent owns the deploy mutation.
   onSubmit: (payload: TemplateFormSubmitPayload) => void;
-  /** Render the form's "Create pipeline" button in a busy state. */
   isSubmitting?: boolean;
 };
 
@@ -102,10 +96,9 @@ const StepBackHeader = ({
 export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }: TemplateGalleryDialogProps) => {
   const [view, setView] = useState<DialogView>({ kind: 'gallery' });
   const [selectedTemplate, setSelectedTemplate] = useState<PipelineTemplate | null>(null);
-  // Slot write requested by the in-dialog secret-creation step. The form panel
-  // consumes it via a useEffect and then calls back to clear it. Routed
-  // through props instead of an imperative ref because plain function
-  // components don't receive `ref` as a prop in React 18.
+  // Slot write requested by an in-dialog step; the form panel consumes it via
+  // an effect and clears it. Props rather than a ref since React 18 function
+  // components don't receive `ref`.
   const [applySlotValue, setApplySlotValue] = useState<ApplySlotValueRequest | null>(null);
   const [isCreatingTopic, setIsCreatingTopic] = useState(false);
   const formHandleRef = useRef<TemplateFormPanelHandle | null>(null);
@@ -133,10 +126,8 @@ export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }:
     resetToGallery();
   };
 
-  // Ensure the next open lands on the gallery even when the parent closes the
-  // dialog directly (e.g. after `onSubmit`) without routing through `onClose` /
-  // `onOpenChange`. Without this, the previous view/state would still be set
-  // when the dialog reopens.
+  // Reset to the gallery when the parent closes the dialog directly (e.g. after
+  // `onSubmit`) without routing through `onClose`, so it reopens clean.
   useEffect(() => {
     if (!open) {
       setView({ kind: 'gallery' });
@@ -175,9 +166,8 @@ export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }:
         return;
       }
       if (!result.success && result.error) {
-        // AddTopicStep surfaces validation errors inside its own form; only
-        // toast the higher-level "create failed" error so the user still sees
-        // field-level errors in context.
+        // AddTopicStep shows field-level validation in its own form; only toast
+        // the higher-level failure.
         toast.error(result.message ?? result.error);
       }
     } finally {
@@ -187,8 +177,8 @@ export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }:
 
   return (
     <Dialog
-      // Block backdrop dismissal past the gallery step so a stray click can't
-      // wipe in-progress form values. ESC and the X / Cancel buttons still close.
+      // Block backdrop dismissal past the gallery so a stray click can't wipe
+      // in-progress form values. ESC and X / Cancel still close.
       disablePointerDismissal={view.kind !== 'gallery'}
       onOpenChange={(nextOpen) => (nextOpen ? undefined : closeWithStash())}
       open={open}
@@ -243,8 +233,8 @@ export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }:
           />
         ) : null}
 
-        {/* Stays mounted across addSecret to preserve form state; hide via inline */}
-        {/* style so the flex-1 outer doesn't reserve space (className targets inner). */}
+        {/* Stays mounted across addSecret/createTopic to preserve form state; */}
+        {/* hidden via inline style (className targets the inner element). */}
         {isFormMounted && selectedTemplate ? (
           <DialogBody style={isFormViewActive ? undefined : { display: 'none' }}>
             <TemplateFormPanel
@@ -289,12 +279,8 @@ export const TemplateGalleryDialog = ({ open, onClose, onSubmit, isSubmitting }:
 
         {isCreateTopicViewActive ? (
           <DialogBody>
-            {/* LayoutGroup so the popLayout AnimatePresence inside AddTopicStep
-                forces a re-measure on the sibling button motion.div below.
-                Without it, the button's `layout` prop only sees positions at
-                React render time — popLayout shifts surrounding flow via
-                motion's effects after commit, so the button would otherwise
-                jump on collapse. */}
+            {/* LayoutGroup keeps the button below in sync with the popLayout
+                AnimatePresence inside AddTopicStep — otherwise it jumps on collapse. */}
             <LayoutGroup>
               <div className="flex flex-col gap-4">
                 <AddTopicStep hideTitle inline ref={addTopicStepRef} selectionMode="new" />