feat: addressed pr comments and improved yaml generation to rely more on backend schema than opinionated defaults and what fields are actually shown

Author: eblairmckee

frontend/.claude/skills/frontend-developer/SKILL.md

@@ -47,7 +47,7 @@ yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r bu
 yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r card dialog form
 
 # Then generate yarn.lock
-bun i --yarn
+bun i && bun i --yarn
 ```
 
 ### 3. Write Component
@@ -90,7 +90,7 @@ export function MyComponent({ title, onSubmit }: Props) {
 **Performance:**
 
 - Hoist static content outside component
-- Use `useMemo` for expensive computations
+- Use `useMemo` for expensive computations - but only when there's a noticeable performance impact
 - Use `memo` for components receiving props
 
 ### 4. Write Tests
@@ -117,17 +117,40 @@ describe("formatNumber", () => {
 
 ```typescript
 // component.test.tsx
-import { render, screen, fireEvent } from 'test-utils';
+import { render, screen, fireEvent, waitFor } from 'test-utils';
+import { createRouterTransport } from '@connectrpc/connect';
+import { createPipeline } from 'protogen/redpanda/api/console/v1alpha1/pipeline-PipelineService_connectquery';
 import { MyComponent } from './component';
 
 describe('MyComponent', () => {
-  test('should call onSubmit when button clicked', () => {
-    const onSubmit = vi.fn();
-    render(<MyComponent onSubmit={onSubmit} />);
-
-    fireEvent.click(screen.getByRole('button'));
-
-    expect(onSubmit).toHaveBeenCalled();
+  test('should trigger gRPC mutation when form is submitted', async () => {
+    // Mock the gRPC service method
+    const mockCreatePipeline = vi.fn(() =>
+      Promise.resolve({ id: '123', name: 'test-pipeline' })
+    );
+
+    // Create a mocked transport
+    const transport = createRouterTransport(({ rpc }) => {
+      rpc(createPipeline, mockCreatePipeline);
+    });
+
+    // Render with the mocked transport
+    render(<MyComponent />, { transport });
+
+    // Fill out the form
+    fireEvent.change(screen.getByLabelText('Pipeline Name'), {
+      target: { value: 'test-pipeline' }
+    });
+
+    // Submit the form
+    fireEvent.click(screen.getByRole('button', { name: 'Create' }));
+
+    // Verify the mutation was called with correct data
+    await waitFor(() => {
+      expect(mockCreatePipeline).toHaveBeenCalledWith({
+        name: 'test-pipeline'
+      });
+    });
   });
 });
 ```
@@ -150,11 +173,11 @@ const mockFunction = vi.mocked(functionToMock);
 
 ```bash
 # Run in order
-bun run type:check    # TypeScript errors
-bun run test          # All tests
-bun run lint          # Code quality
-bun run build         # Production build
-bun run start         # Dev server - check browser
+bun run type:check            # TypeScript errors
+bun run test                  # All tests
+bun run lint                  # Code quality
+bun run build                 # Production build
+bun run start2 --port=3004    # Dev server - check browser
 ```
 
 **Success criteria:**
@@ -172,7 +195,6 @@ bun run test                 # All tests (unit + integration)
 bun run test:unit            # Unit tests only (.test.ts)
 bun run test:integration     # Integration tests only (.test.tsx)
 bun run test:watch           # Watch mode
-bun run test:ui              # Interactive UI
 bun run test:coverage        # Coverage report
 ```
 
@@ -284,7 +306,7 @@ yes | bunx @fumadocs/cli add --dir https://redpanda-ui-registry.netlify.app/r \
 **After package install:**
 
 ```bash
-bun i --yarn  # ALWAYS run this
+bun i && bun i --yarn  # ALWAYS run this
 ```
 
 **Testing shortcuts:**

frontend/src/components/pages/connect/overview.tsx

@@ -17,7 +17,7 @@ import { WaitingRedpanda } from 'components/redpanda-ui/components/waiting-redpa
 import { observer, useLocalObservable } from 'mobx-react';
 import { Component, type FunctionComponent } from 'react';
 import { useKafkaConnectConnectorsQuery } from 'react-query/api/kafka-connect';
-import { Navigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import {
   ConnectorClass,
@@ -29,10 +29,10 @@ import {
   TaskState,
   TasksColumn,
 } from './helper';
-import { isFeatureFlagEnabled, isServerless } from '../../../config';
+import { isServerless } from '../../../config';
 import { ListSecretScopesRequestSchema } from '../../../protogen/redpanda/api/dataplane/v1/secret_pb';
 import { appGlobal } from '../../../state/app-global';
-import { api, pipelinesApi, rpcnSecretManagerApi } from '../../../state/backend-api';
+import { api, rpcnSecretManagerApi } from '../../../state/backend-api';
 import type { ClusterConnectorInfo, ClusterConnectors, ClusterConnectorTaskInfo } from '../../../state/rest-interfaces';
 import { Features } from '../../../state/supported-features';
 import { uiSettings } from '../../../state/ui';
@@ -122,15 +122,6 @@ class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaC
   }
 
   render() {
-    // Redirect to wizard if enableRpcnTiles is enabled, kafka connect is disabled, and there are no existing pipelines
-    if (
-      isFeatureFlagEnabled('enableRpcnTiles') &&
-      pipelinesApi.pipelines?.length === 0 &&
-      !this.props.isKafkaConnectEnabled
-    ) {
-      return <Navigate replace to="/rp-connect/wizard" />;
-    }
-
     const tabs = [
       {
         key: ConnectView.RedpandaConnect,

frontend/src/components/pages/rp-connect/onboarding/add-secrets-card.tsx

@@ -23,7 +23,7 @@ export const AddSecretsCard = ({
   const [isSecretsDialogOpen, setIsSecretsDialogOpen] = useState(false);
 
   // Fetch secrets
-  const { data: secretsResponse, refetch: refetchSecrets } = useListSecretsQuery({});
+  const { data: secretsResponse } = useListSecretsQuery({});
   const existingSecrets = useMemo(
     () => (secretsResponse?.secrets ? secretsResponse.secrets.map((s) => s?.id || '') : []),
     [secretsResponse]
@@ -107,15 +107,6 @@ export const AddSecretsCard = ({
     [editorInstance]
   );
 
-  const handleSecretsCreated = useCallback(() => {
-    refetchSecrets();
-    setIsSecretsDialogOpen(false);
-  }, [refetchSecrets]);
-
-  const handleOpenDialog = useCallback(() => {
-    setIsSecretsDialogOpen(true);
-  }, []);
-
   const handleUpdateEditorContent = useCallback(
     (oldName: string, newName: string) => {
       if (!editorInstance) {
@@ -210,7 +201,7 @@ export const AddSecretsCard = ({
                   <Badge
                     className="cursor-pointer text-sm hover:opacity-80"
                     key={secret}
-                    onClick={handleOpenDialog}
+                    onClick={() => setIsSecretsDialogOpen(true)}
                     variant="red"
                   >
                     Create <InlineCode className="bg-transparent">$secrets.{secret}</InlineCode>
@@ -220,7 +211,11 @@ export const AddSecretsCard = ({
               </div>
             </div>
           )}
-          <Button onClick={handleOpenDialog} size={existingSecrets.length > 0 ? 'sm' : 'default'} variant="outline">
+          <Button
+            onClick={() => setIsSecretsDialogOpen(true)}
+            size={existingSecrets.length > 0 ? 'sm' : 'default'}
+            variant="outline"
+          >
             {existingSecrets.length > 0 ? 'Add more secrets' : 'Add secret'}
             <PlusIcon className="h-4 w-4" />
           </Button>
@@ -231,7 +226,7 @@ export const AddSecretsCard = ({
         isOpen={isSecretsDialogOpen}
         missingSecrets={missingSecrets}
         onClose={() => setIsSecretsDialogOpen(false)}
-        onSecretsCreated={handleSecretsCreated}
+        onSecretsCreated={() => setIsSecretsDialogOpen(false)}
         onUpdateEditorContent={handleUpdateEditorContent}
       />
     </Card>

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

@@ -115,13 +115,30 @@ export function Details({ readonly = false }: DetailsProps) {
                   <FormItem>
                     <FormLabel>Compute Units: {field.value}</FormLabel>
                     <FormControl>
-                      <Slider
-                        max={MAX_TASKS}
-                        min={MIN_TASKS}
-                        onValueChange={(values) => field.onChange(values[0])}
-                        step={1}
-                        value={[field.value]}
-                      />
+                      <div className="flex items-center gap-2">
+                        <Slider
+                          max={MAX_TASKS}
+                          min={MIN_TASKS}
+                          onValueChange={(values) => field.onChange(values[0])}
+                          step={1}
+                          value={[field.value]}
+                        />
+                        <Input
+                          className="w-12"
+                          max={MAX_TASKS}
+                          min={MIN_TASKS}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            if (!Number.isNaN(value) && value >= MIN_TASKS && value <= MAX_TASKS) {
+                              field.onChange(value);
+                            }
+                          }}
+                          showStepControls
+                          step={1}
+                          type="number"
+                          value={field.value}
+                        />
+                      </div>
                     </FormControl>
                     <FormDescription className="text-muted-foreground text-sm">
                       One compute unit = 0.1 CPU and 400 MB memory