Merge pull request #2385 from brionmario/feat-custom-flow-components

Add support to render a Custom component during the flow execution

Author: brionmario

frontend/apps/thunder-console/src/features/flows/components/resource-property-panel/ResourceProperties.tsx

@@ -317,7 +317,7 @@ function ResourceProperties(): ReactElement {
           if (propertyKey === 'data') {
             // When propertyKey is exactly 'data', replace the entire data object
             updatedResource.data = newValue as StepData;
-          } else if (topLevelEditableProps.includes(propertyKey)) {
+          } else if (propertyKey === 'id' || topLevelEditableProps.includes(propertyKey)) {
             set(updatedResource as unknown as Record<string, unknown>, propertyKey, newValue);
           } else if (propertyKey.startsWith('config.') || propertyKey.startsWith('data.')) {
             // Properties starting with 'config.' or 'data.' should be set on the resource directly

frontend/apps/thunder-console/src/features/flows/components/resources/elements/CommonElementFactory.tsx

@@ -22,6 +22,7 @@ import ButtonAdapter from './adapters/ButtonAdapter';
 import CaptchaAdapter from './adapters/CaptchaAdapter';
 import ChoiceAdapter from './adapters/ChoiceAdapter';
 import ConsentAdapter from './adapters/ConsentAdapter';
+import CustomAdapter from './adapters/CustomAdapter';
 import DividerAdapter from './adapters/DividerAdapter';
 import FormAdapter from './adapters/FormAdapter';
 import IconAdapter from './adapters/IconAdapter';
@@ -165,6 +166,9 @@ function CommonElementFactory({
   if (resource.type === ElementTypes.Consent) {
     return <ConsentAdapter />;
   }
+  if (resource.type === ElementTypes.Custom) {
+    return <CustomAdapter resource={resource} />;
+  }
 
   return null;
 }

frontend/apps/thunder-console/src/features/flows/components/resources/elements/__tests__/CommonElementFactory.test.tsx

@@ -158,6 +158,14 @@ vi.mock('../adapters/TimerAdapter', () => ({
   ),
 }));
 
+vi.mock('../adapters/CustomAdapter', () => ({
+  default: ({resource}: {resource: Element}) => (
+    <div data-testid="custom-adapter" data-resource-id={resource.id}>
+      Custom Adapter
+    </div>
+  ),
+}));
+
 describe('CommonElementFactory', () => {
   const createMockElement = (overrides: Partial<Element> = {}): Element =>
     ({
@@ -456,6 +464,19 @@ describe('CommonElementFactory', () => {
     });
   });
 
+  describe('Custom Element', () => {
+    it('should render CustomAdapter for Custom type', () => {
+      const customElement = createMockElement({
+        type: ElementTypes.Custom,
+      });
+
+      render(<CommonElementFactory stepId="step-1" resource={customElement} />);
+
+      expect(screen.getByTestId('custom-adapter')).toBeInTheDocument();
+      expect(screen.getByTestId('custom-adapter')).toHaveAttribute('data-resource-id', 'element-1');
+    });
+  });
+
   describe('Unknown Element Type', () => {
     it('should return null for unknown element type', () => {
       const unknownElement = createMockElement({

frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/CustomAdapter.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {Box, Typography} from '@wso2/oxygen-ui';
+import {PuzzleIcon} from '@wso2/oxygen-ui-icons-react';
+import {type ReactElement} from 'react';
+import {useTranslation} from 'react-i18next';
+import type {Element as FlowElement} from '@/features/flows/models/elements';
+
+export interface CustomAdapterPropsInterface {
+  resource: FlowElement;
+}
+
+function CustomAdapter({resource}: CustomAdapterPropsInterface): ReactElement {
+  const {t} = useTranslation();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        width: '100%',
+        minHeight: 64,
+        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        borderRadius: 1,
+        border: '1px dashed rgba(0, 0, 0, 0.2)',
+        px: 1,
+        py: 1.5,
+        gap: 0.5,
+      }}
+    >
+      <PuzzleIcon size={20} />
+      <Typography variant="h5">{t('flows:core.placeholders.customComponent', 'Custom')}</Typography>
+      <Typography variant="subtitle2" color="textSecondary" sx={{fontFamily: 'monospace', fontSize: '0.7rem'}}>
+        {t('flows:core.placeholders.customComponent.identifier', 'Identifier: {{id}}', {id: resource.id})}
+      </Typography>
+    </Box>
+  );
+}
+
+export default CustomAdapter;

frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/FormAdapter.tsx

@@ -92,7 +92,7 @@ function FormAdapter({
       (element as FlowElement & {eventType?: string}).eventType === ActionEventTypes.Submit,
   );
 
-  const shouldShowFormFieldsPlaceholder = !hasInputFields;
+  const shouldShowFormFieldsPlaceholder = !hasInputFields && !resource?.components?.length;
 
   const errorId = `${resource.id}_FORM_NO_SUBMIT_BUTTON`;
 

frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/CustomAdapter.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render, screen} from '@testing-library/react';
+import {describe, it, expect, vi} from 'vitest';
+import CustomAdapter from '../CustomAdapter';
+import type {Element as FlowElement} from '@/features/flows/models/elements';
+
+vi.mock('@wso2/oxygen-ui-icons-react', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@wso2/oxygen-ui-icons-react')>();
+  return {
+    ...actual,
+    PuzzleIcon: ({size = 24}: {size?: number} = {}) => <svg data-testid="puzzle-icon" data-size={size} />,
+  };
+});
+
+describe('CustomAdapter', () => {
+  const createMockElement = (overrides: Partial<FlowElement> = {}): FlowElement =>
+    ({
+      id: 'custom-1',
+      type: 'CUSTOM',
+      category: 'MISCELLANEOUS',
+      ...overrides,
+    }) as FlowElement;
+
+  it('should render the puzzle icon', () => {
+    render(<CustomAdapter resource={createMockElement()} />);
+
+    expect(screen.getByTestId('puzzle-icon')).toBeInTheDocument();
+  });
+
+  it('should render the "Custom" label', () => {
+    render(<CustomAdapter resource={createMockElement()} />);
+
+    expect(screen.getByText('Custom')).toBeInTheDocument();
+  });
+
+  it('should display the resource identifier', () => {
+    render(<CustomAdapter resource={createMockElement({id: 'my-custom-element'})} />);
+
+    expect(screen.getByText(/my-custom-element/)).toBeInTheDocument();
+  });
+
+  it('should pass size 20 to the puzzle icon', () => {
+    render(<CustomAdapter resource={createMockElement()} />);
+
+    expect(screen.getByTestId('puzzle-icon')).toHaveAttribute('data-size', '20');
+  });
+});

frontend/apps/thunder-console/src/features/flows/components/resources/elements/adapters/__tests__/FormAdapter.test.tsx

@@ -139,7 +139,7 @@ describe('FormAdapter', () => {
       expect(screen.getByText('flows:core.adapters.form.placeholder')).toBeInTheDocument();
     });
 
-    it('should show placeholder when only non-FIELD components exist', () => {
+    it('should not show placeholder when non-FIELD components exist', () => {
       const components = [
         createMockElement({id: 'comp-1', category: ElementCategories.Action}),
         createMockElement({id: 'comp-2', category: ElementCategories.Display}),
@@ -148,6 +148,14 @@ describe('FormAdapter', () => {
 
       render(<FormAdapter resource={resource} stepId="step-1" />);
 
+      expect(screen.queryByText('flows:core.adapters.form.placeholder')).not.toBeInTheDocument();
+    });
+
+    it('should show placeholder when form is empty', () => {
+      const resource = createMockElement({components: []});
+
+      render(<FormAdapter resource={resource} stepId="step-1" />);
+
       expect(screen.getByText('flows:core.adapters.form.placeholder')).toBeInTheDocument();
     });
 

frontend/apps/thunder-console/src/features/flows/constants/VisualFlowConstants.ts

@@ -98,6 +98,7 @@ class VisualFlowConstants {
     ElementTypes.Divider,
     ElementTypes.Image,
     ElementTypes.Captcha,
+    ElementTypes.Custom,
     // Input types are allowed for drop detection, but handled specially to show dialog
     ElementTypes.TextInput,
     ElementTypes.PasswordInput,
@@ -149,6 +150,7 @@ class VisualFlowConstants {
     ElementTypes.Divider,
     ElementTypes.Image,
     ElementTypes.Timer,
+    ElementTypes.Custom,
   ];
 
   public static readonly FLOW_BUILDER_STACK_ALLOWED_RESOURCE_TYPES: string[] = [

frontend/apps/thunder-console/src/features/flows/data/elements.json

@@ -440,5 +440,15 @@
       "showOnResourcePanel": true
     },
     "label": "Time remaining: {time}"
+  },
+  {
+    "resourceType": "ELEMENT",
+    "category": "MISCELLANEOUS",
+    "type": "CUSTOM",
+    "display": {
+      "label": "Custom",
+      "image": "Puzzle",
+      "showOnResourcePanel": true
+    }
   }
 ]

frontend/apps/thunder-console/src/features/flows/models/__tests__/elements.test.ts

@@ -47,8 +47,12 @@ describe('elements models', () => {
       expect(ElementCategories.Field).toBe('FIELD');
     });
 
-    it('should have exactly 4 categories', () => {
-      expect(Object.keys(ElementCategories)).toHaveLength(4);
+    it('should have Miscellaneous category', () => {
+      expect(ElementCategories.Miscellaneous).toBe('MISCELLANEOUS');
+    });
+
+    it('should have exactly 5 categories', () => {
+      expect(Object.keys(ElementCategories)).toHaveLength(5);
     });
   });
 
@@ -78,8 +82,12 @@ describe('elements models', () => {
       expect(ElementTypes.Timer).toBe('TIMER');
     });
 
-    it('should have exactly 21 element types', () => {
-      expect(Object.keys(ElementTypes)).toHaveLength(21);
+    it('should have Custom type', () => {
+      expect(ElementTypes.Custom).toBe('CUSTOM');
+    });
+
+    it('should have exactly 22 element types', () => {
+      expect(Object.keys(ElementTypes)).toHaveLength(22);
     });
   });