[Uptime] Overview search bar loading state triggers error

[justinkambic]

Kibana version:
master/6.7.0/7.0.0

Elasticsearch version:
6.7/7.0/8.0

Server OS version:
macOS

Browser version:
Chrome 72.x

Browser OS version:
macOS

Original install method (e.g. download page, yum, from source, etc.):
from source

Describe the bug:
onChange is a required prop for EuiSearchBar. We define a loading state component that looks similar to the actual search bar we use for our app, but we don't define this handler. As such, a warning message is displayed in our plugin's console log.

Steps to reproduce:

1. Load the Uptime app
2. Refresh the page

Expected behavior:
No warning message will be displayed

Screenshots (if relevant):

Errors in browser console (if relevant):

checkPropTypes.js:19 Warning: Failed prop type: The prop `onChange` is marked as required in `EuiSearchBar`, but its value is `undefined`.
    in EuiSearchBar (created by FilterBarLoading)
    in FilterBarLoading (created by Query)
    in Query (created by FilterBarQuery)
    in FilterBarQuery (created by OverviewPage)
    in EmptyState (created by Query)
    in Query (created by EmptyStateQuery)
    in EmptyStateQuery (created by OverviewPage)
    in OverviewPage (created by Route)
    in Route (created by Application)
    in Switch (created by Application)
    in div (created by EuiPanel)
    in EuiPanel (created by EuiPageContent)
    in EuiPageContent (created by Application)
    in div (created by EuiPage)
    in EuiPage (created by Application)
    in ApolloProvider (created by Application)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Application)
    in IntlProvider (created by I18nProvider)
    in I18nProvider (created by Application)
    in Application

Provide logs and/or server output (if relevant):
N/A

Any additional context:
N/A

[elasticmachine]

Pinging @elastic/uptime

[ganeshpatro321]

I would like to take up this issue. @justinkambic

[ganeshpatro321]

Hello @justinkambic

I wanted some clarifications for this issue,
I have found the file where the EuiSearchBar component is called without an onChange prop provided.

For now, that particular file is just a function which is returning the EuiSearchBar component, there is no react component there which can change and store various filters.
I wanted to know whether there are any filters present for this file which I need to implement by converting the function into a react component or just add a dummy function to the onChange property to avoid the warning?

@timroes

[ganeshpatro321]

@timroes please clarify, whether the filter_bar_loading should be converted to a react component where it can store filter values, or a dummy function to avoid warning will do it,
And also I am facing tslint error, while making any changes in .tsx files.

The pre-commit hook is checking for tslint errors, even if there is no dependecy. I am running code in VScode and its not allowing me commit changes.

[justinkambic]

Hi @ganeshpatro321, thanks for your interest in helping us with this issue!

Basically, the driver for this issue is we have a dummy "loading state" function that we're calling while the app's FilterBar loads.

The reason we added this function is because previously, we were simply displaying a Loading... message for this component while it was fetching. This caused the UI to be rather jerky while loading, so we render a "dummy" bar that holds the place until our filter options are returned by the server.

The problem we're running into is the EUI component EuiSearchBar requires an onChange prop. To resolve this issue, we simply need to provide a function which will suppress the error. An accompanying comment explaining why the function is there would be necessary as well. Our current design goals don't require this function to do anything.

@snide do you have any input into this potential solution?

[ganeshpatro321]

@justinkambic

Thank you for the clarification, then I am sending a dummy function to the onChange prop of the component for now to avoid the warning.

Bdw, do we have to upload the uptime data to get the warning/error.

[justinkambic]

@ganeshpatro321:

then I am sending a dummy function to the onChange prop of the component for now to avoid the warning.

That's my thought on it at this time. In the future we will likely want to change that via upstream alterations to the component, but for now we basically want to suppress the warning since this component's not intended to actually process any data.

Bdw, do we have to upload the uptime data to get the warning/error.

Yes - if there is no uptime data in a heartbeat-* index then the app won't try to render any of the components in question, hence no loading state for the filter bar.

Let me know if you have further questions.