From e13c3d4139c6ab06f98f86652740b6a64ae55389 Mon Sep 17 00:00:00 2001 From: Sergey Petushkov Date: Tue, 11 Feb 2025 19:25:08 +0100 Subject: [PATCH 1/3] feat(sidebar): show loading state when initially loading connections --- configs/testing-library-compass/src/index.tsx | 13 ++- packages/compass-connections/src/index.tsx | 25 ++--- packages/compass-connections/src/provider.ts | 1 + .../stores/connections-store-redux.spec.tsx | 1 + .../src/stores/connections-store-redux.ts | 16 +++- .../src/stores/store-context.tsx | 11 +++ .../components/connections-filter-popover.tsx | 3 + .../connections-navigation.tsx | 94 +++++++++++++------ .../multiple-connections/sidebar.spec.tsx | 7 +- .../components/navigation-items-filter.tsx | 4 + 10 files changed, 127 insertions(+), 48 deletions(-) diff --git a/configs/testing-library-compass/src/index.tsx b/configs/testing-library-compass/src/index.tsx index e6983f7b1b1..bd7feb72baf 100644 --- a/configs/testing-library-compass/src/index.tsx +++ b/configs/testing-library-compass/src/index.tsx @@ -81,9 +81,11 @@ type TestConnectionsOptions = { */ preferences?: Partial; /** - * Initial list of connections to be "loaded" to the application + * Initial list of connections to be "loaded" to the application. Empty list + * by default. You can explicitly pass `null` to disable initial preloading of + * the connections */ - connections?: ConnectionInfo[]; + connections?: ConnectionInfo[] | null; /** * Connection function that returns DataService when connecting to a * connection with the connections store. Second argument is a constructor @@ -266,6 +268,9 @@ function createWrapper( TestingLibraryWrapper: ComponentWithChildren = EmptyWrapper, container?: HTMLElement ) { + const connections = + options.connections === null ? undefined : options.connections ?? []; + const wrapperState = { globalAppRegistry: new AppRegistry(), localAppRegistry: new AppRegistry(), @@ -274,7 +279,7 @@ function createWrapper( logger: createNoopLogger(), connectionStorage: options.connectionStorage ?? - (new InMemoryConnectionStorage(options.connections) as ConnectionStorage), + (new InMemoryConnectionStorage(connections) as ConnectionStorage), connectionsStore: { getState: undefined as unknown as () => State, actions: {} as ReturnType, @@ -359,7 +364,7 @@ function createWrapper( onAutoconnectInfoRequest={ options.onAutoconnectInfoRequest } - preloadStorageConnectionInfos={options.connections} + preloadStorageConnectionInfos={connections} > { void store.dispatch(loadConnections()); diff --git a/packages/compass-connections/src/provider.ts b/packages/compass-connections/src/provider.ts index c91c45bad5a..c3f97fb6168 100644 --- a/packages/compass-connections/src/provider.ts +++ b/packages/compass-connections/src/provider.ts @@ -62,6 +62,7 @@ export { useConnectionsList, useConnectionsListRef, connectionsLocator, + useConnectionsListLoadingStatus, } from './stores/store-context'; export type { ConnectionsService } from './stores/store-context'; diff --git a/packages/compass-connections/src/stores/connections-store-redux.spec.tsx b/packages/compass-connections/src/stores/connections-store-redux.spec.tsx index e54b48226b3..a4aaea5ed87 100644 --- a/packages/compass-connections/src/stores/connections-store-redux.spec.tsx +++ b/packages/compass-connections/src/stores/connections-store-redux.spec.tsx @@ -67,6 +67,7 @@ describe('CompassConnections store', function () { .rejects(new Error('loadAll failed')); renderCompassConnections({ + connections: null, connectionStorage, onFailToLoadConnections: onFailToLoadConnectionsSpy, }); diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts index 1f622f0ca69..b6e142569d9 100644 --- a/packages/compass-connections/src/stores/connections-store-redux.ts +++ b/packages/compass-connections/src/stores/connections-store-redux.ts @@ -469,8 +469,17 @@ const INITIAL_STATE: State = { }; export function getInitialConnectionsStateForConnectionInfos( - connectionInfos: ConnectionInfo[] = [] + connectionInfos: ConnectionInfo[] | null ): State['connections'] { + if (!connectionInfos) { + // Keep initial state if we're not preloading any connections + return { + byId: {}, + ids: [], + status: 'initial', + error: null, + }; + } const byId = Object.fromEntries( connectionInfos.map((info) => { return [info.id, createDefaultConnectionState(info)]; @@ -479,8 +488,7 @@ export function getInitialConnectionsStateForConnectionInfos( return { byId, ids: getSortedIdsForConnections(Object.values(byId)), - // Keep initial state if we're not preloading any connections - status: connectionInfos.length > 0 ? 'ready' : 'initial', + status: 'ready', error: null, }; } @@ -2126,7 +2134,7 @@ export const openSettingsModal = ( }; export function configureStore( - preloadConnectionInfos: ConnectionInfo[] = [], + preloadConnectionInfos: ConnectionInfo[] | null, thunkArg: ThunkExtraArg ) { return createStore( diff --git a/packages/compass-connections/src/stores/store-context.tsx b/packages/compass-connections/src/stores/store-context.tsx index 0caf00a55e8..d78c037f4c3 100644 --- a/packages/compass-connections/src/stores/store-context.tsx +++ b/packages/compass-connections/src/stores/store-context.tsx @@ -364,3 +364,14 @@ export function useConnectionsColorList(): { }); }, isEqual); } + +export function useConnectionsListLoadingStatus() { + return useSelector((state) => { + const status = state.connections.status; + return { + status, + error: state.connections.error?.message ?? null, + isInitialLoad: status === 'initial' || status === 'loading', + }; + }, isEqual); +} diff --git a/packages/compass-sidebar/src/components/connections-filter-popover.tsx b/packages/compass-sidebar/src/components/connections-filter-popover.tsx index 973a79fc5bb..bf387304224 100644 --- a/packages/compass-sidebar/src/components/connections-filter-popover.tsx +++ b/packages/compass-sidebar/src/components/connections-filter-popover.tsx @@ -43,6 +43,7 @@ type ConnectionsFilterPopoverProps = PropsWithChildren<{ onFilterChange( updater: (filter: ConnectionsFilter) => ConnectionsFilter ): void; + disabled?: boolean; }>; export default function ConnectionsFilterPopover({ @@ -50,6 +51,7 @@ export default function ConnectionsFilterPopover({ setOpen, filter, onFilterChange, + disabled = false, }: ConnectionsFilterPopoverProps) { const onExcludeInactiveChange = useCallback( (excludeInactive: boolean) => { @@ -103,6 +105,7 @@ export default function ConnectionsFilterPopover({ active={open} aria-label="Filter connections" ref={ref} + disabled={disabled} > {isActivated && ( diff --git a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx index 6203a9a984f..8efee16c79e 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/connections-navigation.tsx @@ -18,6 +18,8 @@ import { Button, Icon, ButtonVariant, + cx, + Placeholder, } from '@mongodb-js/compass-components'; import { ConnectionsNavigationTree } from '@mongodb-js/compass-connections-navigation'; import type { MapDispatchToProps, MapStateToProps } from 'react-redux'; @@ -38,6 +40,7 @@ import type { RootState, SidebarThunkAction } from '../../modules'; import { type useConnectionsWithStatus, ConnectionStatus, + useConnectionsListLoadingStatus, } from '@mongodb-js/compass-connections/provider'; import { useOpenWorkspace, @@ -89,6 +92,10 @@ const connectionCountStyles = css({ marginLeft: spacing[100], }); +const connectionCountDisabledStyles = css({ + opacity: 0.6, +}); + const noDeploymentStyles = css({ paddingLeft: spacing[400], paddingRight: spacing[400], @@ -305,7 +312,7 @@ const ConnectionsNavigation: React.FC = ({ } return actions; - }, [supportsConnectionImportExport]); + }, [supportsConnectionImportExport, enableCreatingNewConnections]); const onConnectionItemAction = useCallback( ( @@ -491,6 +498,17 @@ const ConnectionsNavigation: React.FC = ({ const isAtlasConnectionStorage = useContext(AtlasClusterConnectionsOnly); + const { isInitialLoad: isInitialConnectionsLoad } = + useConnectionsListLoadingStatus(); + + const connectionsCount = isInitialConnectionsLoad ? ( + + (…) + + ) : connections.length !== 0 ? ( + ({connections.length}) + ) : undefined; + return (
= ({ > {isAtlasConnectionStorage ? 'Clusters' : 'Connections'} - {connections.length !== 0 && ( - - ({connections.length}) - - )} + {connectionsCount} iconSize="xsmall" @@ -514,27 +528,25 @@ const ConnectionsNavigation: React.FC = ({ collapseAfter={2} >
- {connections.length > 0 && ( - <> - - - - )} - {connections.length === 0 && ( + + {isInitialConnectionsLoad ? ( + + ) : connections.length > 0 ? ( + + ) : connections.length === 0 ? (
You have not connected to any deployments. @@ -550,11 +562,37 @@ const ConnectionsNavigation: React.FC = ({ )}
- )} + ) : null}
); }; +const placeholderListStyles = css({ + display: 'grid', + gridTemplateColumns: '1fr', + // placeholder height that visually matches font size (16px) + vertical + // spacing (12px) to align it visually with real items + gridAutoRows: spacing[400] + spacing[300], + alignItems: 'center', + // navigation list padding + "empty" caret icon space (4px) to align it + // visually with real items + paddingLeft: spacing[400] + spacing[100], + paddingRight: spacing[400], +}); + +function ConnectionsPlaceholder() { + return ( +
+ {Array.from({ length: 3 }, (_, index) => ( + + ))} +
+ ); +} + const onRefreshDatabases = (connectionId: string): SidebarThunkAction => { return (_dispatch, getState, { globalAppRegistry }) => { globalAppRegistry.emit('refresh-databases', { connectionId }); diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx index 46c733c58dc..95b285570c1 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -94,7 +94,7 @@ describe('Multiple Connections Sidebar Component', function () { function doRender( activeWorkspace: WorkspaceTab | null = null, - connections: ConnectionInfo[] = [savedFavoriteConnection], + connections: ConnectionInfo[] | null = [savedFavoriteConnection], atlasClusterConnectionsOnly: boolean | undefined = undefined ) { workspace = sinon.spy({ @@ -235,6 +235,11 @@ describe('Multiple Connections Sidebar Component', function () { }); describe('connections list', function () { + it('should display a loading state while connections are not loaded yet', function () { + doRender(null, null); + expect(screen.getByTestId('connections-placeholder')).to.be.visible; + }); + context('when there are no connections', function () { it('should display an empty state with a CTA to add new connection', function () { doRender(undefined, []); diff --git a/packages/compass-sidebar/src/components/navigation-items-filter.tsx b/packages/compass-sidebar/src/components/navigation-items-filter.tsx index 558ba8948e5..a655ff17a48 100644 --- a/packages/compass-sidebar/src/components/navigation-items-filter.tsx +++ b/packages/compass-sidebar/src/components/navigation-items-filter.tsx @@ -30,6 +30,7 @@ export default function NavigationItemsFilter({ title = 'Search', filter, onFilterChange, + disabled = false, }: { placeholder?: string; ariaLabel?: string; @@ -38,6 +39,7 @@ export default function NavigationItemsFilter({ onFilterChange( updater: (filter: ConnectionsFilter) => ConnectionsFilter ): void; + disabled?: boolean; }): React.ReactElement { const onChange = useCallback>( (event) => { @@ -66,12 +68,14 @@ export default function NavigationItemsFilter({ title={title} onChange={onChange} className={textInputStyles} + disabled={disabled} /> ); From d1001b607215e74d349cc4c647cd6ad361db0e00 Mon Sep 17 00:00:00 2001 From: Sergey Petushkov Date: Wed, 12 Feb 2025 10:57:09 +0100 Subject: [PATCH 2/3] chore(testing-library, sidebar): make preload skip interface more explicit in test helpers; extend the test to check for disabled elements --- configs/testing-library-compass/src/index.tsx | 31 +++++++++++++------ packages/compass-connections/src/index.tsx | 25 +++++++-------- .../stores/connections-store-redux.spec.tsx | 2 +- .../src/stores/connections-store-redux.ts | 4 +-- .../multiple-connections/sidebar.spec.tsx | 13 +++++--- 5 files changed, 45 insertions(+), 30 deletions(-) diff --git a/configs/testing-library-compass/src/index.tsx b/configs/testing-library-compass/src/index.tsx index bd7feb72baf..a9cad9faa4a 100644 --- a/configs/testing-library-compass/src/index.tsx +++ b/configs/testing-library-compass/src/index.tsx @@ -82,10 +82,11 @@ type TestConnectionsOptions = { preferences?: Partial; /** * Initial list of connections to be "loaded" to the application. Empty list - * by default. You can explicitly pass `null` to disable initial preloading of - * the connections + * by default. You can explicitly pass `no-preload` to disable initial + * preloading of the connections, otherwise connections are always preloaded + * before rendering when using helper methods */ - connections?: ConnectionInfo[] | null; + connections?: ConnectionInfo[] | 'no-preload'; /** * Connection function that returns DataService when connecting to a * connection with the connections store. Second argument is a constructor @@ -247,6 +248,12 @@ const EmptyWrapper = ({ children }: { children: React.ReactElement }) => { return <>{children}; }; +function getConnectionsFromConnectionsOption( + connections: TestConnectionsOptions['connections'] +): Exclude { + return connections === 'no-preload' ? undefined : connections ?? []; +} + const TEST_ENV_CURRENT_CONNECTION = { info: { id: 'TEST', @@ -268,9 +275,7 @@ function createWrapper( TestingLibraryWrapper: ComponentWithChildren = EmptyWrapper, container?: HTMLElement ) { - const connections = - options.connections === null ? undefined : options.connections ?? []; - + const connections = getConnectionsFromConnectionsOption(options.connections); const wrapperState = { globalAppRegistry: new AppRegistry(), localAppRegistry: new AppRegistry(), @@ -421,7 +426,9 @@ function renderWithConnections( hydrate, }); expect( - (connectionsOptions.connections ?? []).every((info) => { + ( + getConnectionsFromConnectionsOption(connectionsOptions.connections) ?? [] + ).every((info) => { return !!wrapperState.connectionsStore.getState().connections.byId[ info.id ]; @@ -515,7 +522,10 @@ async function renderWithActiveConnection( const renderResult = renderWithConnections(ui, { ...options, wrapper: ConnectionInfoWrapper, - connections: [connectionInfo, ...(connections ?? [])], + connections: [ + connectionInfo, + ...(getConnectionsFromConnectionsOption(connections) ?? []), + ], }); await waitForConnect(renderResult.connectionsStore, connectionInfo); return renderResult; @@ -537,7 +547,10 @@ async function renderHookWithActiveConnection( const renderHookResult = renderHookWithConnections(cb, { ...options, wrapper: ConnectionInfoWrapper, - connections: [connectionInfo, ...(connections ?? [])], + connections: [ + connectionInfo, + ...(getConnectionsFromConnectionsOption(connections) ?? []), + ], }); await waitForConnect(renderHookResult.connectionsStore, connectionInfo); return renderHookResult; diff --git a/packages/compass-connections/src/index.tsx b/packages/compass-connections/src/index.tsx index e86f51035b6..e6a20fabea6 100644 --- a/packages/compass-connections/src/index.tsx +++ b/packages/compass-connections/src/index.tsx @@ -85,20 +85,17 @@ const CompassConnectionsPlugin = registerHadronPlugin( { logger, preferences, connectionStorage, track, globalAppRegistry }, { addCleanup, cleanup } ) { - const store = configureStore( - initialProps.preloadStorageConnectionInfos ?? null, - { - logger, - preferences, - connectionStorage, - track, - getExtraConnectionData: initialProps.onExtraConnectionDataRequest, - appName: initialProps.appName, - connectFn: initialProps.connectFn, - globalAppRegistry, - onFailToLoadConnections: initialProps.onFailToLoadConnections, - } - ); + const store = configureStore(initialProps.preloadStorageConnectionInfos, { + logger, + preferences, + connectionStorage, + track, + getExtraConnectionData: initialProps.onExtraConnectionDataRequest, + appName: initialProps.appName, + connectFn: initialProps.connectFn, + globalAppRegistry, + onFailToLoadConnections: initialProps.onFailToLoadConnections, + }); setTimeout(() => { void store.dispatch(loadConnections()); diff --git a/packages/compass-connections/src/stores/connections-store-redux.spec.tsx b/packages/compass-connections/src/stores/connections-store-redux.spec.tsx index a4aaea5ed87..48afde9fac4 100644 --- a/packages/compass-connections/src/stores/connections-store-redux.spec.tsx +++ b/packages/compass-connections/src/stores/connections-store-redux.spec.tsx @@ -67,7 +67,7 @@ describe('CompassConnections store', function () { .rejects(new Error('loadAll failed')); renderCompassConnections({ - connections: null, + connections: 'no-preload', connectionStorage, onFailToLoadConnections: onFailToLoadConnectionsSpy, }); diff --git a/packages/compass-connections/src/stores/connections-store-redux.ts b/packages/compass-connections/src/stores/connections-store-redux.ts index b6e142569d9..0e9c97d7c4c 100644 --- a/packages/compass-connections/src/stores/connections-store-redux.ts +++ b/packages/compass-connections/src/stores/connections-store-redux.ts @@ -469,7 +469,7 @@ const INITIAL_STATE: State = { }; export function getInitialConnectionsStateForConnectionInfos( - connectionInfos: ConnectionInfo[] | null + connectionInfos?: ConnectionInfo[] ): State['connections'] { if (!connectionInfos) { // Keep initial state if we're not preloading any connections @@ -2134,7 +2134,7 @@ export const openSettingsModal = ( }; export function configureStore( - preloadConnectionInfos: ConnectionInfo[] | null, + preloadConnectionInfos: ConnectionInfo[] | undefined, thunkArg: ThunkExtraArg ) { return createStore( diff --git a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx index 95b285570c1..8b054331613 100644 --- a/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx +++ b/packages/compass-sidebar/src/components/multiple-connections/sidebar.spec.tsx @@ -5,7 +5,6 @@ import type { RenderWithConnectionsHookResult } from '@mongodb-js/testing-librar import { createPluginTestHelpers, screen, - cleanup, waitFor, within, userEvent, @@ -94,7 +93,7 @@ describe('Multiple Connections Sidebar Component', function () { function doRender( activeWorkspace: WorkspaceTab | null = null, - connections: ConnectionInfo[] | null = [savedFavoriteConnection], + connections: ConnectionInfo[] | 'no-preload' = [savedFavoriteConnection], atlasClusterConnectionsOnly: boolean | undefined = undefined ) { workspace = sinon.spy({ @@ -153,7 +152,6 @@ describe('Multiple Connections Sidebar Component', function () { } afterEach(function () { - cleanup(); sinon.restore(); }); @@ -236,8 +234,15 @@ describe('Multiple Connections Sidebar Component', function () { describe('connections list', function () { it('should display a loading state while connections are not loaded yet', function () { - doRender(null, null); + doRender(null, 'no-preload'); expect(screen.getByTestId('connections-placeholder')).to.be.visible; + expect(screen.getByRole('searchbox', { name: 'Search' })).to.have.attr( + 'aria-disabled', + 'true' + ); + expect( + screen.getByRole('button', { name: 'Filter connections' }) + ).to.have.attr('aria-disabled', 'true'); }); context('when there are no connections', function () { From 57a595a3247013ac37c17fff1d0bc09cd3288f49 Mon Sep 17 00:00:00 2001 From: Sergey Petushkov Date: Wed, 12 Feb 2025 11:58:25 +0100 Subject: [PATCH 3/3] chore(e2e): update helper commands to account for search bar being on screen when loading connections --- packages/compass-e2e-tests/helpers/commands/connect.ts | 7 ++++++- packages/compass-e2e-tests/helpers/commands/disconnect.ts | 7 ++++++- .../helpers/commands/remove-connections.ts | 7 ++++++- .../helpers/commands/sidebar-connection.ts | 7 ++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/compass-e2e-tests/helpers/commands/connect.ts b/packages/compass-e2e-tests/helpers/commands/connect.ts index 6ad7fb1e910..ce5bc3f3050 100644 --- a/packages/compass-e2e-tests/helpers/commands/connect.ts +++ b/packages/compass-e2e-tests/helpers/commands/connect.ts @@ -134,7 +134,12 @@ export async function waitForConnectionResult( ): Promise { const waitOptions = typeof timeout !== 'undefined' ? { timeout } : undefined; - if (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) { + if ( + (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) && + (await browser + .$(Selectors.SidebarFilterInput) + .getAttribute('aria-disabled')) !== 'true' + ) { // Clear the filter to make sure every connection shows await browser.clickVisible(Selectors.SidebarFilterInput); await browser.setValueVisible(Selectors.SidebarFilterInput, ''); diff --git a/packages/compass-e2e-tests/helpers/commands/disconnect.ts b/packages/compass-e2e-tests/helpers/commands/disconnect.ts index c68859907b8..d3e17ef9acf 100644 --- a/packages/compass-e2e-tests/helpers/commands/disconnect.ts +++ b/packages/compass-e2e-tests/helpers/commands/disconnect.ts @@ -15,7 +15,12 @@ async function resetForDisconnect( // and therefore be rendered. await browser.clickVisible(Selectors.CollapseConnectionsButton); - if (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) { + if ( + (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) && + (await browser + .$(Selectors.SidebarFilterInput) + .getAttribute('aria-disabled')) !== 'true' + ) { // Clear the filter to make sure every connection shows await browser.clickVisible(Selectors.SidebarFilterInput); await browser.setValueVisible(Selectors.SidebarFilterInput, ''); diff --git a/packages/compass-e2e-tests/helpers/commands/remove-connections.ts b/packages/compass-e2e-tests/helpers/commands/remove-connections.ts index f9b6940d0cf..8a513f07123 100644 --- a/packages/compass-e2e-tests/helpers/commands/remove-connections.ts +++ b/packages/compass-e2e-tests/helpers/commands/remove-connections.ts @@ -8,7 +8,12 @@ async function resetForRemove(browser: CompassBrowser) { // and therefore be rendered. await browser.clickVisible(Selectors.CollapseConnectionsButton); - if (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) { + if ( + (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) && + (await browser + .$(Selectors.SidebarFilterInput) + .getAttribute('aria-disabled')) !== 'true' + ) { // Clear the filter to make sure every connection shows await browser.clickVisible(Selectors.SidebarFilterInput); await browser.setValueVisible(Selectors.SidebarFilterInput, ''); diff --git a/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts b/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts index 444e2f08cf0..2187bfb5bfa 100644 --- a/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts +++ b/packages/compass-e2e-tests/helpers/commands/sidebar-connection.ts @@ -93,7 +93,12 @@ export async function removeConnection( connectionName: string ): Promise { // make sure there's no filter because if the connection is not displayed then we can't remove it - if (await browser.$(Selectors.SidebarFilterInput).isExisting()) { + if ( + (await browser.$(Selectors.SidebarFilterInput).isExisting()) && + (await browser + .$(Selectors.SidebarFilterInput) + .getAttribute('aria-disabled')) !== 'true' + ) { await browser.clickVisible(Selectors.SidebarFilterInput); await browser.setValueVisible(Selectors.SidebarFilterInput, '');