@squiz/resource-browser 2.4.12 → 3.0.0-pre-alpha.0

package/src/MainContainer/MainContainer.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
 import MainContainer from './MainContainer';
-import { ResourceBrowserPlugin, ResourceBrowserSource } from '../types';
+import { ResourceBrowserPlugin, ResourceBrowserSourceWithPlugin, PluginLaunchModeType } from '../types';
 
-import { mockSource, mockResource } from '../__mocks__/MockModels';
+import { mockSource, mockResource, mockSourceWithPlugin } from '../__mocks__/MockModels';
 
 import SourceList from '../SourceList/SourceList'; // Import Functional Component
 jest.mock('../SourceList/SourceList'); // Mock the Functional Component
@@ -11,12 +11,23 @@ const ActualSourceList = jest.requireActual('../SourceList/SourceList').default;
 const MockSourceList = SourceList as jest.MockedFunction<typeof SourceList>; // Cast the mocked function so TS stops complaining
 MockSourceList.mockImplementation(ActualSourceList); // Return the actual function unless overridden
 
+import ResourceLauncher from '../ResourceLauncher/ResourceLauncher'; // Import Functional Component
+jest.mock('../ResourceLauncher/ResourceLauncher'); // Mock the Functional Component
+const ActualResourceLauncher = jest.requireActual('../ResourceLauncher/ResourceLauncher').default; // Grab the real copy of it as normally we don't want the mock
+const MockResourceLauncher = ResourceLauncher as jest.MockedFunction<typeof ResourceLauncher>; // Cast the mocked function so TS stops complaining
+MockResourceLauncher.mockImplementation(ActualResourceLauncher); // Return the actual function unless overridden
+
 import SourceDropdown from '../SourceDropdown/SourceDropdown'; // Import Functional Component
 jest.mock('../SourceDropdown/SourceDropdown'); // Mock the Functional Component
 const ActualSourceDropdown = jest.requireActual('../SourceDropdown/SourceDropdown').default; // Grab the real copy of it as normally we don't want the mock
 const MockSourceDropdown = SourceDropdown as jest.MockedFunction<typeof SourceDropdown>; // Cast the mocked function so TS stops complaining
 MockSourceDropdown.mockImplementation(ActualSourceDropdown); // Return the actual function unless overridden
 
+import SourceDropdownContainer from '../SourceDropdownContainer/SourceDropdownContainer';
+jest.mock('../SourceDropdownContainer/SourceDropdownContainer', () => {
+    return jest.fn().mockReturnValue(<div />);
+});
+
 const mockSourceBrowserComponent = jest.fn();
 const defaultProps = {
     title: '',
@@ -29,6 +40,8 @@ const defaultProps = {
     onClose: jest.fn(),
     preselectedResource: null,
     plugin: null,
+    pluginMode: null,
+    searchEnabled: false,
 };
 
 describe('MainContainer', () => {
@@ -41,13 +54,13 @@ describe('MainContainer', () => {
         expect(onClose).toHaveBeenCalled();
     });
 
-    describe('no source selected', () => {
-        it('should render Environment Selector title', () => {
-            render(<MainContainer {...defaultProps} title="Select MyAsset" />);
-            expect(screen.getByText('Environment Selector')).toBeInTheDocument();
-            expect(screen.queryByText('Select MyAsset')).not.toBeInTheDocument();
-        });
+    it('should render Environment Selector title', () => {
+        render(<MainContainer {...defaultProps} title="Select MyAsset" />);
+        expect(screen.getByText('Select MyAsset')).toBeInTheDocument();
+        expect(screen.queryByText('Environment Selector')).not.toBeInTheDocument();
+    });
 
+    describe('no source selected', () => {
         it('should not render source selector dropdown', () => {
             render(<MainContainer {...defaultProps} />);
             expect(MockSourceDropdown).not.toHaveBeenCalled();
@@ -58,8 +71,15 @@ describe('MainContainer', () => {
             expect(mockSourceBrowserComponent).not.toHaveBeenCalled();
         });
 
+        it('should render resource launcher list when searchEnabled using provided props', () => {
+            const sources: ResourceBrowserSourceWithPlugin[] = [];
+            const onSourceSelect = jest.fn();
+            render(<MainContainer {...defaultProps} searchEnabled={true} sources={sources} onSourceSelect={onSourceSelect} />);
+            expect(MockResourceLauncher).toHaveBeenCalledWith({ sources, onSourceSelect }, {});
+        });
+
         it('should render source list using provided props', () => {
-            const sources: ResourceBrowserSource[] = [];
+            const sources: ResourceBrowserSourceWithPlugin[] = [];
             const onSourceSelect = jest.fn();
             render(<MainContainer {...defaultProps} sources={sources} onSourceSelect={onSourceSelect} />);
             expect(MockSourceList).toHaveBeenCalledWith({ sources, onSourceSelect }, {});
@@ -68,136 +88,330 @@ describe('MainContainer', () => {
 
     describe('source selected', () => {
         const source = mockSource({ type: 'dam' });
-        const plugin = {
-            type: 'dam',
-            createHeaderPortal: false,
-            sourceBrowserComponent: mockSourceBrowserComponent,
-            renderSelectedResource: jest.fn(),
-            useResolveResource: jest.fn(),
-        } as ResourceBrowserPlugin;
-        it('should render Environment Selector title', () => {
-            render(<MainContainer {...defaultProps} title="Select MyAsset" selectedSource={source} plugin={plugin} />);
-            expect(screen.getByText('Select MyAsset')).toBeInTheDocument();
-            expect(screen.queryByText('Environment Selector')).not.toBeInTheDocument();
-        });
 
-        it('should render source selector dropdown if more than one source exists', () => {
-            const sources: ResourceBrowserSource[] = [mockSource(), mockSource()];
-            const onSourceSelect = jest.fn();
+        it('it should create a default source switcher if header portal not requested and sources > 1', async () => {
+            const source1 = mockSourceWithPlugin();
+            const source2 = mockSourceWithPlugin();
+
+            const plugin = {
+                type: 'dam',
+                createHeaderPortal: false,
+                sourceBrowserComponent: jest.fn,
+                renderSelectedResource: jest.fn(),
+                useResolveResource: jest.fn(),
+                sourceSearchComponent: jest.fn(),
+                renderResourceLauncher: jest.fn(),
+            } as ResourceBrowserPlugin;
             render(
                 <MainContainer
                     {...defaultProps}
-                    sources={sources}
-                    selectedSource={source}
+                    sources={[source1, source2]}
+                    selectedSource={source1}
                     plugin={plugin}
-                    onSourceSelect={onSourceSelect}
+                    pluginMode={{ type: PluginLaunchModeType.Browse }}
                 />,
             );
-            expect(MockSourceDropdown).toHaveBeenCalledWith({ sources, selectedSource: source, onSourceSelect }, {});
+
+            expect(SourceDropdownContainer).toHaveBeenCalled();
         });
 
-        it('should not render source selector dropdown if one source exists', () => {
-            const sources: ResourceBrowserSource[] = [mockSource()];
-            const onSourceSelect = jest.fn();
+        it('it should not create a default source switcher if header portal not requested and sources < 2', async () => {
+            const source1 = mockSourceWithPlugin();
+
+            const plugin = {
+                type: 'dam',
+                createHeaderPortal: false,
+                sourceBrowserComponent: jest.fn,
+                renderSelectedResource: jest.fn(),
+                useResolveResource: jest.fn(),
+                sourceSearchComponent: jest.fn(),
+                renderResourceLauncher: jest.fn(),
+            } as ResourceBrowserPlugin;
             render(
                 <MainContainer
                     {...defaultProps}
-                    sources={sources}
-                    selectedSource={source}
+                    sources={[source1]}
+                    selectedSource={source1}
                     plugin={plugin}
-                    onSourceSelect={onSourceSelect}
+                    pluginMode={{ type: PluginLaunchModeType.Browse }}
                 />,
             );
-            expect(MockSourceDropdown).not.toHaveBeenCalled();
+
+            expect(SourceDropdownContainer).not.toHaveBeenCalled();
         });
 
-        it('should create header portal for plugin', async () => {
-            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
-            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
-            const plugin = {
-                type: 'dam',
-                createHeaderPortal: true,
-                sourceBrowserComponent: mockSourceBrowserComponent,
-                renderSelectedResource: jest.fn(),
-                useResolveResource: jest.fn(),
-            } as ResourceBrowserPlugin;
-            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} />);
-            expect(mockSourceBrowserComponent).toHaveBeenCalled();
-
-            await waitFor(() => {
-                expect(mockFunctionalComponent).toHaveBeenCalledWith(
-                    expect.objectContaining({
-                        headerPortal: expect.any(Element),
-                    }),
-                    {},
+        describe('Browser mode', () => {
+            it('should create header portal for plugin', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+                const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: mockSourceBrowserComponent,
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: jest.fn(),
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+                render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} />);
+                expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            headerPortal: expect.any(Element),
+                        }),
+                        {},
+                    );
+                });
+            });
+
+            it('preselectedResource: should pass expected params to plugin UI generator functional component', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+                const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: mockSourceBrowserComponent,
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: jest.fn(),
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+
+                const resource = mockResource();
+                const props = {
+                    allowedTypes: ['image'],
+                    preselectedResource: resource,
+                };
+
+                render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} {...props} />);
+                expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            source: source,
+                            allowedTypes: props.allowedTypes,
+                            headerPortal: expect.any(Element),
+                            preselectedResource: resource,
+                        }),
+                        {},
+                    );
+                });
+            });
+
+            it('browseTo: should pass expected params to plugin UI generator functional component', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+                const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: mockSourceBrowserComponent,
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: jest.fn(),
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+
+                const resource = mockResource();
+                const browseTo = { resourceId: resource.id, sourceId: resource.source.id };
+                const props = {
+                    allowedTypes: ['image'],
+                };
+
+                render(
+                    <MainContainer
+                        {...defaultProps}
+                        selectedSource={source}
+                        plugin={plugin}
+                        pluginMode={{
+                            type: PluginLaunchModeType.Browse,
+                            args: { browseTo },
+                        }}
+                        {...props}
+                    />,
                 );
+                expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            source: source,
+                            allowedTypes: props.allowedTypes,
+                            headerPortal: expect.any(Element),
+                            browseTo,
+                        }),
+                        {},
+                    );
+                });
             });
-        });
 
-        it('should pass expected params to plugin UI generator functional component', async () => {
-            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
-            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
-            const plugin = {
-                type: 'dam',
-                createHeaderPortal: true,
-                sourceBrowserComponent: mockSourceBrowserComponent,
-                renderSelectedResource: jest.fn(),
-                useResolveResource: jest.fn(),
-            } as ResourceBrowserPlugin;
+            it('should pass onSelected to plugin UI generator FC when invoked calls change and close functions', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
+                const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: mockSourceBrowserComponent,
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: jest.fn(),
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+
+                const onChange = jest.fn();
+                const onClose = jest.fn();
 
-            const resource = mockResource();
-            const props = {
-                allowedTypes: ['image'],
-                preselectedResource: resource,
-            };
-
-            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} {...props} />);
-            expect(mockSourceBrowserComponent).toHaveBeenCalled();
-
-            await waitFor(() => {
-                expect(mockFunctionalComponent).toHaveBeenCalledWith(
-                    expect.objectContaining({
-                        source: source,
-                        allowedTypes: props.allowedTypes,
-                        headerPortal: expect.any(Element),
-                        preselectedResource: resource,
-                    }),
-                    {},
+                render(
+                    <MainContainer
+                        {...defaultProps}
+                        searchEnabled={true}
+                        selectedSource={source}
+                        plugin={plugin}
+                        onChange={onChange}
+                        onClose={onClose}
+                    />,
                 );
+                expect(mockSourceBrowserComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            onSelected: expect.any(Function),
+                            searchEnabled: true,
+                        }),
+                        {},
+                    );
+                });
+
+                const resource = mockResource();
+                const { onSelected } = mockFunctionalComponent.mock.calls[0][0];
+                onSelected(resource);
+                expect(onChange).toHaveBeenCalledWith(resource);
+                expect(onClose).toHaveBeenCalled();
             });
         });
 
-        it('should pass onSelected to plugin UI generator FC when invoked calls change and close functions', async () => {
-            const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source UI has been rendered</div>);
-            const mockSourceBrowserComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
-            const plugin = {
-                type: 'dam',
-                createHeaderPortal: true,
-                sourceBrowserComponent: mockSourceBrowserComponent,
-                renderSelectedResource: jest.fn(),
-                useResolveResource: jest.fn(),
-            } as ResourceBrowserPlugin;
+        describe('Search mode', () => {
+            it('should create header portal for plugin', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source search UI has been rendered</div>);
+                const mockSourceSearchComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: jest.fn,
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: mockSourceSearchComponent,
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+                render(
+                    <MainContainer
+                        {...defaultProps}
+                        selectedSource={source}
+                        plugin={plugin}
+                        pluginMode={{ type: PluginLaunchModeType.Search }}
+                    />,
+                );
+                expect(mockSourceSearchComponent).toHaveBeenCalled();
 
-            const onChange = jest.fn();
-            const onClose = jest.fn();
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            headerPortal: expect.any(Element),
+                        }),
+                        {},
+                    );
+                });
+            });
 
-            render(<MainContainer {...defaultProps} selectedSource={source} plugin={plugin} onChange={onChange} onClose={onClose} />);
-            expect(mockSourceBrowserComponent).toHaveBeenCalled();
+            it('should pass expected params to plugin UI generator functional component', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source search UI has been rendered</div>);
+                const mockSourceSearchComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: jest.fn(),
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: mockSourceSearchComponent,
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
 
-            await waitFor(() => {
-                expect(mockFunctionalComponent).toHaveBeenCalledWith(
-                    expect.objectContaining({
-                        onSelected: expect.any(Function),
-                    }),
-                    {},
+                const props = {
+                    allowedTypes: ['image'],
+                };
+
+                render(
+                    <MainContainer
+                        {...defaultProps}
+                        selectedSource={source}
+                        plugin={plugin}
+                        pluginMode={{ type: PluginLaunchModeType.Search, args: { query: 'myQuery' } }}
+                        {...props}
+                    />,
                 );
+                expect(mockSourceSearchComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            source: source,
+                            allowedTypes: props.allowedTypes,
+                            headerPortal: expect.any(Element),
+                            query: 'myQuery',
+                        }),
+                        {},
+                    );
+                });
             });
 
-            const resource = mockResource();
-            const { onSelected } = mockFunctionalComponent.mock.calls[0][0];
-            onSelected(resource);
-            expect(onChange).toHaveBeenCalledWith(resource);
-            expect(onClose).toHaveBeenCalled();
+            it('should pass onSelected to plugin UI generator FC when invoked calls change and close functions', async () => {
+                const mockFunctionalComponent = jest.fn().mockReturnValue(<div>Source search UI has been rendered</div>);
+                const mockSourceSearchComponent = jest.fn().mockReturnValue(mockFunctionalComponent);
+                const plugin = {
+                    type: 'dam',
+                    createHeaderPortal: true,
+                    sourceBrowserComponent: jest.fn(),
+                    renderSelectedResource: jest.fn(),
+                    useResolveResource: jest.fn(),
+                    sourceSearchComponent: mockSourceSearchComponent,
+                    renderResourceLauncher: jest.fn(),
+                } as ResourceBrowserPlugin;
+
+                const onChange = jest.fn();
+                const onClose = jest.fn();
+
+                render(
+                    <MainContainer
+                        {...defaultProps}
+                        selectedSource={source}
+                        searchEnabled={true}
+                        plugin={plugin}
+                        pluginMode={{ type: PluginLaunchModeType.Search, args: { query: 'myQuery' } }}
+                        onChange={onChange}
+                        onClose={onClose}
+                    />,
+                );
+                expect(mockSourceSearchComponent).toHaveBeenCalled();
+
+                await waitFor(() => {
+                    expect(mockFunctionalComponent).toHaveBeenCalledWith(
+                        expect.objectContaining({
+                            onSelected: expect.any(Function),
+                            searchEnabled: true,
+                        }),
+                        {},
+                    );
+                });
+
+                const resource = mockResource();
+                const { onSelected } = mockFunctionalComponent.mock.calls[0][0];
+                onSelected(resource);
+                expect(onChange).toHaveBeenCalledWith(resource);
+                expect(onClose).toHaveBeenCalled();
+            });
         });
     });
 });

package/src/MainContainer/MainContainer.tsx

@@ -1,21 +1,34 @@
 import React, { useCallback, useState } from 'react';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
 
-import SourceDropdown from '../SourceDropdown/SourceDropdown';
 import SourceList from '../SourceList/SourceList';
-import { ResourceBrowserPlugin, ResourceBrowserSource, ResourceBrowserResource } from '../types';
+import ResourceLauncher from '../ResourceLauncher/ResourceLauncher';
+import SourceDropdownContainer from '../SourceDropdownContainer/SourceDropdownContainer';
+import SourceDropdown from '../SourceDropdown/SourceDropdown';
+import {
+    ResourceBrowserPlugin,
+    ResourceBrowserSource,
+    ResourceBrowserResource,
+    ResourceBrowserSourceWithPlugin,
+    PluginLaunchMode,
+    PluginLaunchModeType,
+    ResourceBrowserSearchUIArgs,
+    ResourceBrowserUIArgs,
+} from '../types';
 
 interface MainContainerProps {
     title: string;
     titleAriaProps: DOMAttributes<FocusableElement>;
     allowedTypes: string[] | undefined;
-    sources: ResourceBrowserSource[];
+    sources: ResourceBrowserSourceWithPlugin[];
     selectedSource: ResourceBrowserSource | null;
-    onSourceSelect(source: ResourceBrowserSource | null): void;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
     onChange(resource: ResourceBrowserResource | null): void;
     onClose: () => void;
     preselectedResource?: ResourceBrowserResource | null;
     plugin: ResourceBrowserPlugin | null;
+    pluginMode: PluginLaunchMode | null;
+    searchEnabled: boolean;
 }
 
 function MainContainer({
@@ -29,9 +42,13 @@ function MainContainer({
     onClose,
     preselectedResource,
     plugin,
+    pluginMode,
+    searchEnabled,
 }: MainContainerProps) {
     const [headerPortal, setHeaderPortal] = useState<HTMLDivElement | null>(null);
+    const pluginToRender = pluginMode ? pluginMode.type : PluginLaunchModeType.Browse; // Cant default a 'null' property in signature so set it here
     const SourceBrowser = plugin?.sourceBrowserComponent();
+    const SourceSearch = plugin?.sourceSearchComponent();
 
     // Can't use a useRef as it wont update on change when a source is selected, so need to use a ref callback to store in state
     const setHeaderPortalRef = useCallback(
@@ -46,21 +63,22 @@ function MainContainer({
     // MainContainer will either render the source list view if no source is set or the plugins UI if a source has been selected
     return (
         <div className="relative flex flex-col h-full text-gray-800">
-            <div className="flex items-center py-4.5 pl-4.5 pr-10">
+            <div className="flex items-center py-3 pl-6 pr-10 min-h-[68px]">
                 <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
-                    {!plugin && 'Environment Selector'}
-                    {plugin && title}
+                    {title}
                 </h2>
 
                 {plugin && selectedSource && (
                     <>
-                        {sources.length > 1 && (
-                            <div className="px-3 border-l border-gray-300 w-300px">
-                                <SourceDropdown sources={sources} selectedSource={selectedSource} onSourceSelect={onSourceSelect} />
-                            </div>
-                        )}
-                        {plugin.createHeaderPortal && (
-                            <div ref={setHeaderPortalRef} className="squiz-rb-plugin px-3 border-l border-gray-300 w-300px"></div>
+                        {/* Custom header if plugin supports it */}
+                        {plugin.createHeaderPortal && <div ref={setHeaderPortalRef} className="squiz-rb-plugin"></div>}
+                        {/* Default header if plugin does not support */}
+                        {!plugin.createHeaderPortal && sources.length > 1 && (
+                            <SourceDropdownContainer isCollapsed={false} onExpand={() => {}}>
+                                <div className={`border-l border-blue-200 pl-1 w-[204px]`}>
+                                    <SourceDropdown sources={sources} selectedSource={selectedSource} onSourceSelect={onSourceSelect} />
+                                </div>
+                            </SourceDropdownContainer>
                         )}
                     </>
                 )}
@@ -80,21 +98,43 @@ function MainContainer({
                 </button>
             </div>
             <div className="border-t border-gray-300 overflow-y-hidden">
-                {plugin && selectedSource && SourceBrowser && (
-                    <div className="squiz-rb-plugin">
-                        <SourceBrowser
-                            source={selectedSource}
-                            allowedTypes={allowedTypes}
-                            headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
-                            preselectedResource={preselectedResource || undefined}
-                            onSelected={(resource: ResourceBrowserResource) => {
-                                onChange(resource);
-                                onClose();
-                            }}
-                        />
+                {plugin && selectedSource && (
+                    <div className={`squiz-rb-plugin squiz-rb-plugin--${pluginMode?.type}`}>
+                        {pluginToRender === PluginLaunchModeType.Browse && SourceBrowser && (
+                            <SourceBrowser
+                                source={selectedSource}
+                                sources={sources}
+                                onSourceSelect={onSourceSelect}
+                                allowedTypes={allowedTypes}
+                                headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
+                                searchEnabled={searchEnabled}
+                                preselectedResource={preselectedResource || undefined}
+                                browseTo={(pluginMode?.args as ResourceBrowserUIArgs)?.browseTo}
+                                onSelected={(resource: ResourceBrowserResource) => {
+                                    onChange(resource);
+                                    onClose();
+                                }}
+                            />
+                        )}
+                        {pluginToRender === PluginLaunchModeType.Search && SourceSearch && (
+                            <SourceSearch
+                                source={selectedSource}
+                                sources={sources}
+                                onSourceSelect={onSourceSelect}
+                                allowedTypes={allowedTypes}
+                                headerPortal={plugin.createHeaderPortal && headerPortal ? headerPortal : undefined}
+                                searchEnabled={searchEnabled}
+                                query={(pluginMode?.args as ResourceBrowserSearchUIArgs)?.query}
+                                onSelected={(resource: ResourceBrowserResource) => {
+                                    onChange(resource);
+                                    onClose();
+                                }}
+                            />
+                        )}
                     </div>
                 )}
-                {!selectedSource && <SourceList sources={sources} onSourceSelect={onSourceSelect} />}
+                {!selectedSource && searchEnabled && <ResourceLauncher sources={sources} onSourceSelect={onSourceSelect} />}
+                {!selectedSource && !searchEnabled && <SourceList sources={sources} onSourceSelect={onSourceSelect} />}
             </div>
         </div>
     );