feat: connect tiles is now prop driven via list component schema endpoint, better progressive loading states, no more silent errors, better conditional rendering of new UI withini legacy entry point

Author: eblairmckee

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

@@ -29,7 +29,7 @@ import {
   TaskState,
   TasksColumn,
 } from './helper';
-import { isServerless } from '../../../config';
+import { isEmbedded, isFeatureFlagEnabled, isServerless } from '../../../config';
 import { ListSecretScopesRequestSchema } from '../../../protogen/redpanda/api/dataplane/v1/secret_pb';
 import { appGlobal } from '../../../state/app-global';
 import { api, rpcnSecretManagerApi } from '../../../state/backend-api';
@@ -42,6 +42,7 @@ import SearchBar from '../../misc/search-bar';
 import Section from '../../misc/section';
 import Tabs, { type Tab } from '../../misc/tabs/tabs';
 import { PageComponent, type PageInitHelper } from '../page';
+import { PipelineListPage } from '../rp-connect/pipeline/list';
 import RpConnectPipelinesList from '../rp-connect/pipelines-list';
 import { RedpandaConnectIntro } from '../rp-connect/redpanda-connect-intro';
 
@@ -84,17 +85,24 @@ const WrapKafkaConnectOverview: FunctionComponent<{ matchedPath: string }> = (pr
 
   const { data: kafkaConnectors, isLoading: isLoadingKafkaConnectors } = useKafkaConnectConnectorsQuery();
 
-  if (isLoadingKafkaConnectors) {
-    return <WaitingRedpanda />;
-  }
-
-  const isKafkaConnectEnabled = kafkaConnectors?.isConfigured ?? false;
+  const isKafkaConnectEnabled = kafkaConnectors?.isConfigured === true;
 
-  return <KafkaConnectOverview defaultView={defaultTab} isKafkaConnectEnabled={isKafkaConnectEnabled} {...props} />;
+  return (
+    <KafkaConnectOverview
+      defaultView={defaultTab}
+      isKafkaConnectEnabled={isKafkaConnectEnabled}
+      isLoadingKafkaConnectors={isLoadingKafkaConnectors}
+      {...props}
+    />
+  );
 };
 
 @observer
-class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaConnectEnabled: boolean }> {
+class KafkaConnectOverview extends PageComponent<{
+  defaultView: string;
+  isKafkaConnectEnabled: boolean;
+  isLoadingKafkaConnectors: boolean;
+}> {
   initPage(p: PageInitHelper): void {
     p.title = 'Overview';
     p.addBreadcrumb('Connect', '/connect-clusters');
@@ -122,6 +130,12 @@ class KafkaConnectOverview extends PageComponent<{ defaultView: string; isKafkaC
   }
 
   render() {
+    if (isFeatureFlagEnabled('enableRpcnTiles') && isEmbedded()) {
+      return <PipelineListPage />;
+    }
+    if (this.props.isLoadingKafkaConnectors) {
+      return <WaitingRedpanda />;
+    }
     const tabs = [
       {
         key: ConnectView.RedpandaConnect,
@@ -422,7 +436,7 @@ class TabTasks extends Component {
 }
 
 // biome-ignore lint/complexity/noBannedTypes: empty object represents pages with no route params
-const TabKafkaConnect = observer((_p: {}) => {
+export const TabKafkaConnect = observer((_p: {}) => {
   const settings = uiSettings.kafkaConnect;
 
   if (api.connectConnectorsError) {

frontend/src/components/pages/rp-connect/onboarding/add-connector-dialog.tsx

@@ -6,6 +6,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from 'components/redpanda-ui/components/dialog';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 
 import { ConnectTiles } from './connect-tiles';
 import type { ConnectComponentType } from '../types/schema';
@@ -15,11 +16,13 @@ export const AddConnectorDialog = ({
   onCloseAddConnector,
   connectorType,
   onAddConnector,
+  components,
 }: {
   isOpen: boolean;
   onCloseAddConnector: () => void;
   connectorType?: ConnectComponentType;
   onAddConnector: ((connectionName: string, connectionType: ConnectComponentType) => void) | undefined;
+  components: ComponentList;
 }) => (
   <Dialog onOpenChange={onCloseAddConnector} open={isOpen}>
     <DialogContent size="xl">
@@ -30,6 +33,7 @@ export const AddConnectorDialog = ({
       <DialogBody>
         <ConnectTiles
           className="px-0 pt-0"
+          components={components}
           componentTypeFilter={connectorType ? [connectorType] : undefined}
           gridCols={3}
           hideHeader

frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx

@@ -18,9 +18,9 @@ import { Heading, Link, Text } from 'components/redpanda-ui/components/typograph
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { SearchIcon } from 'lucide-react';
 import type { MotionProps } from 'motion/react';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useListComponentsQuery } from 'react-query/api/connect';
 
 import { ConnectTile } from './connect-tile';
 import type { ConnectComponentSpec, ConnectComponentType, ExtendedConnectComponentSpec } from '../types/schema';
@@ -151,6 +151,8 @@ const ConnectTilesSkeleton = memo(
 ConnectTilesSkeleton.displayName = 'ConnectTilesSkeleton';
 
 export type ConnectTilesProps = {
+  components?: ComponentList;
+  isLoading?: boolean;
   additionalComponents?: ExtendedConnectComponentSpec[];
   componentTypeFilter?: ConnectComponentType[];
   onChange?: (connectionName: string, connectionType: ConnectComponentType) => void;
@@ -172,6 +174,8 @@ export const ConnectTiles = memo(
   forwardRef<BaseStepRef<ConnectTilesListFormData>, ConnectTilesProps & MotionProps>(
     (
       {
+        components,
+        isLoading,
         additionalComponents,
         componentTypeFilter,
         onChange,
@@ -224,11 +228,7 @@ export const ConnectTiles = memo(
         defaultValues,
       });
 
-      const { data: componentListResponse, isLoading: isLoadingComponents } = useListComponentsQuery();
-      const builtInComponents = useMemo(
-        () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
-        [componentListResponse]
-      );
+      const builtInComponents = useMemo(() => (components ? parseSchema(components) : []), [components]);
       const allComponents = useMemo(
         () => [...builtInComponents, ...(additionalComponents || [])],
         [builtInComponents, additionalComponents]
@@ -384,9 +384,10 @@ export const ConnectTiles = memo(
                           );
                         });
 
-                      const hasNoResults = !isLoadingComponents && filteredComponents.length === 0;
                       const hasResults = filteredComponents.length > 0;
-                      const showSkeleton = hasResults && isLoadingComponents;
+                      const showSkeleton = isLoading;
+                      // biome-ignore lint/complexity/useSimplifiedLogicExpression: Logic is intentionally explicit for clarity
+                      const hasNoResults = !showSkeleton && !hasResults;
 
                       let content: React.ReactNode;
 

frontend/src/components/pages/rp-connect/onboarding/create-pipeline-sidebar.tsx

@@ -1,14 +1,17 @@
 import { useDisclosure } from '@redpanda-data/ui';
+import { Skeleton, SkeletonGroup } from 'components/redpanda-ui/components/skeleton';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import type { editor } from 'monaco-editor';
+import type { ComponentList } from 'protogen/redpanda/api/dataplane/v1/pipeline_pb';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useOnboardingWizardDataStore } from 'state/onboarding-wizard-store';
 
 import { AddConnectorDialog } from './add-connector-dialog';
 import { AddConnectorsCard } from './add-connectors-card';
 import { AddContextualVariablesCard } from './add-contextual-variables-card';
 import { AddSecretsCard } from './add-secrets-card';
-import type { ConnectComponentSpec, ConnectComponentType } from '../types/schema';
+import type { ConnectComponentType } from '../types/schema';
+import { parseSchema } from '../utils/schema';
 import { getConnectTemplate } from '../utils/yaml';
 
 const sidebarClassNames = 'w-[260px]';
@@ -17,13 +20,21 @@ type CreatePipelineSidebarProps = {
   editorInstance: editor.IStandaloneCodeEditor | null;
   editorContent: string;
   setYamlContent: (yaml: string) => void;
-  components: ConnectComponentSpec[];
+  componentList?: ComponentList;
+  isComponentListLoading?: boolean;
 };
 
 export const CreatePipelineSidebar = memo(
-  ({ editorInstance, editorContent, setYamlContent, components }: CreatePipelineSidebarProps) => {
+  ({
+    editorInstance,
+    editorContent,
+    setYamlContent,
+    componentList: rawComponentList,
+    isComponentListLoading,
+  }: CreatePipelineSidebarProps) => {
     const { isOpen: isAddConnectorOpen, onOpen: openAddConnector, onClose: closeAddConnector } = useDisclosure();
     const [selectedConnector, setSelectedConnector] = useState<ConnectComponentType | undefined>(undefined);
+    const components = useMemo(() => (rawComponentList ? parseSchema(rawComponentList) : []), [rawComponentList]);
 
     const hasInput = useMemo(() => editorContent.includes('input:'), [editorContent]);
     const hasOutput = useMemo(() => editorContent.includes('output:'), [editorContent]);
@@ -64,6 +75,17 @@ export const CreatePipelineSidebar = memo(
       openAddConnector();
     };
 
+    if (isComponentListLoading) {
+      return (
+        <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
+          <SkeletonGroup direction="vertical" spacing="default">
+            <Skeleton variant="heading" width="full" />
+            <Skeleton className="h-10 w-full" />
+          </SkeletonGroup>
+        </div>
+      );
+    }
+
     return (
       <div className={cn(sidebarClassNames, 'flex flex-col gap-4')}>
         <AddConnectorsCard
@@ -75,12 +97,15 @@ export const CreatePipelineSidebar = memo(
         <AddSecretsCard editorContent={editorContent} editorInstance={editorInstance} />
         <AddContextualVariablesCard editorContent={editorContent} editorInstance={editorInstance} />
 
-        <AddConnectorDialog
-          connectorType={selectedConnector}
-          isOpen={isAddConnectorOpen}
-          onAddConnector={handleAddConnector}
-          onCloseAddConnector={closeAddConnector}
-        />
+        {rawComponentList && (
+          <AddConnectorDialog
+            components={rawComponentList}
+            connectorType={selectedConnector}
+            isOpen={isAddConnectorOpen}
+            onAddConnector={handleAddConnector}
+            onCloseAddConnector={closeAddConnector}
+          />
+        )}
       </div>
     );
   }

frontend/src/components/pages/rp-connect/onboarding/onboarding-wizard.tsx

@@ -65,7 +65,7 @@ export const ConnectOnboardingWizard = ({
 }: ConnectOnboardingWizardProps = {}) => {
   const navigate = useNavigate();
 
-  const { data: componentListResponse } = useListComponentsQuery();
+  const { data: componentListResponse, isLoading: isComponentListLoading } = useListComponentsQuery();
   const components = useMemo(
     () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
     [componentListResponse]
@@ -362,6 +362,8 @@ export const ConnectOnboardingWizard = ({
                 {methods.switch({
                   [WizardStep.ADD_INPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['input', 'custom']}
@@ -376,6 +378,8 @@ export const ConnectOnboardingWizard = ({
                   ),
                   [WizardStep.ADD_OUTPUT]: () => (
                     <ConnectTiles
+                      components={componentListResponse?.components}
+                      isLoading={isComponentListLoading}
                       {...stepMotionProps}
                       additionalComponents={additionalComponents}
                       componentTypeFilter={['output', 'custom']}

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

@@ -203,7 +203,7 @@ export default function PipelinePage() {
 
   const pipeline = useMemo(() => pipelineResponse?.response?.pipeline, [pipelineResponse]);
 
-  const { data: componentListResponse } = useListComponentsQuery();
+  const { data: componentListResponse, isLoading: isComponentListLoading } = useListComponentsQuery();
 
   const components = useMemo(
     () => (componentListResponse?.components ? parseSchema(componentListResponse.components) : []),
@@ -495,9 +495,10 @@ export default function PipelinePage() {
       </div>
       {(mode === 'create' || mode === 'edit') && (
         <CreatePipelineSidebar
-          components={components}
+          componentList={componentListResponse?.components}
           editorContent={yamlContent}
           editorInstance={editorInstance}
+          isComponentListLoading={isComponentListLoading}
           setYamlContent={handleSetYamlContent}
         />
       )}