Fix eslint (#49595)

* fix: 🐛 fix unused persistedLog object * chore: 🤖 ignore ESLint rule * fix: 🐛 correct dependencies in useUnmount() hook * fix: 🐛 fix ESLint errors * chore: 🤖 disable ESLint rule * fix: 🐛 add savedQueryService to dependency list * fix: 🐛 fix ESLint errors in data plugin * chore: 🤖 fix self-closing ESLint rule * test: 💍 update Jest snapshot * refactor: 💡 memoize persistedLog in more idiomatic way * chore: 🤖 remomve unused import * chore: 🤖 revert possible test breaker * fix: 🐛 fix query bar merge errors
elastic · Oct 30, 2019 · f4d8921 · f4d8921
1 parent 20e5760
commit f4d8921
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 29 deletions.
diff --git a/...lugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/...lugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_top_row.tsx
@@ -21,7 +21,7 @@ import dateMath from '@elastic/datemath';
 import { doesKueryExpressionHaveLuceneSyntaxError } from '@kbn/es-query';
 
 import classNames from 'classnames';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButton,
@@ -78,12 +78,10 @@ function QueryBarTopRowUI(props: Props) {
   const kueryQuerySyntaxLink: string = docLinks!.links.query.kueryQuerySyntax;
 
   const queryLanguage = props.query && props.query.language;
-  let persistedLog: PersistedLog | undefined;
-
-  useEffect(() => {
-    if (!props.query) return;
-    persistedLog = getQueryLog(uiSettings!, storage, appName, props.query.language);
-  }, [queryLanguage]);
+  const persistedLog: PersistedLog | undefined = React.useMemo(
+    () => (queryLanguage ? getQueryLog(uiSettings!, storage, appName, queryLanguage) : undefined),
+    [queryLanguage]
+  );
 
   function onClickSubmitButton(event: React.MouseEvent<HTMLButtonElement>) {
     if (persistedLog && props.query) {

diff --git a/...ugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx b/...ugins/data/public/search/search_bar/components/saved_query_management/save_query_form.tsx
@@ -83,7 +83,7 @@ export const SaveQueryForm: FunctionComponent<Props> = ({
       setSavedQueries(sortedAllSavedQueries);
     };
     fetchQueries();
-  }, []);
+  }, [savedQueryService]);
 
   const savedQueryDescriptionText = i18n.translate(
     'data.search.searchBar.savedQueryDescriptionText',

diff --git a/.../search/search_bar/components/saved_query_management/saved_query_management_component.tsx b/.../search/search_bar/components/saved_query_management/saved_query_management_component.tsx
@@ -75,7 +75,7 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
     if (isOpen) {
       fetchCountAndSavedQueries();
     }
-  }, [isOpen, activePage]);
+  }, [isOpen, activePage, savedQueryService]);
 
   const goToPage = (pageNumber: number) => {
     setActivePage(pageNumber);

diff --git a/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx b/src/legacy/core_plugins/expressions/public/np_ready/public/expression_renderer.tsx
@@ -57,6 +57,7 @@ export const ExpressionRendererImplementation = ({
   const [state, setState] = useState<State>({ ...defaultState });
 
   // Re-fetch data automatically when the inputs change
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     if (handlerRef.current) {
       handlerRef.current.update(expression, options);
@@ -68,6 +69,7 @@ export const ExpressionRendererImplementation = ({
     options.variables,
     options.disableCaching,
   ]);
+  /* eslint-enable react-hooks/exhaustive-deps */
 
   // Initialize the loader only once
   useEffect(() => {

diff --git a/src/plugins/kibana_react/public/context/context.tsx b/src/plugins/kibana_react/public/context/context.tsx
@@ -42,11 +42,11 @@ export const useKibana = <Extra extends object = {}>(): KibanaReactContextValue<
 export const withKibana = <Props extends { kibana: KibanaReactContextValue<any> }>(
   type: React.ComponentType<Props>
 ): React.FC<Omit<Props, 'kibana'>> => {
-  const enhancedType: React.FC<Omit<Props, 'kibana'>> = (props: Omit<Props, 'kibana'>) => {
+  const EnhancedType: React.FC<Omit<Props, 'kibana'>> = (props: Omit<Props, 'kibana'>) => {
     const kibana = useKibana();
     return React.createElement(type, { ...props, kibana } as Props);
   };
-  return enhancedType;
+  return EnhancedType;
 };
 
 export const UseKibana: React.FC<{
@@ -69,7 +69,7 @@ export const createKibanaReactContext = <Services extends KibanaServices>(
     const oldValue = useKibana();
     const { value: newValue } = useMemo(
       () => createKibanaReactContext({ ...services, ...oldValue.services, ...newServices }),
-      Object.keys(services)
+      [services, oldValue, newServices]
     );
     return createElement(context.Provider as React.ComponentType<any>, {
       value: newValue,

diff --git a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.test.tsx
@@ -106,7 +106,7 @@ describe('useUiSetting', () => {
 });
 
 describe('useUiSetting$', () => {
-  const TestConsumer: React.FC<{
+  const TestConsumerX: React.FC<{
     setting: string;
     newValue?: string;
   }> = ({ setting, newValue = '' }) => {
@@ -126,7 +126,7 @@ describe('useUiSetting$', () => {
 
     ReactDOM.render(
       <Provider>
-        <TestConsumer setting="foo" />
+        <TestConsumerX setting="foo" />
       </Provider>,
       container
     );
@@ -143,7 +143,7 @@ describe('useUiSetting$', () => {
 
     ReactDOM.render(
       <Provider>
-        <TestConsumer setting="non_existing" />
+        <TestConsumerX setting="non_existing" />
       </Provider>,
       container
     );
@@ -159,7 +159,7 @@ describe('useUiSetting$', () => {
 
     ReactDOM.render(
       <Provider>
-        <TestConsumer setting="theme:darkMode" />
+        <TestConsumerX setting="theme:darkMode" />
       </Provider>,
       container
     );
@@ -174,7 +174,7 @@ describe('useUiSetting$', () => {
 
     ReactDOM.render(
       <Provider>
-        <TestConsumer setting="a" newValue="c" />
+        <TestConsumerX setting="a" newValue="c" />
       </Provider>,
       container
     );

diff --git a/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts b/src/plugins/kibana_react/public/ui_settings/use_ui_setting.ts
@@ -65,6 +65,7 @@ export const useUiSetting$ = <T>(key: string, defaultValue?: T): [T, Setter<T>]
   const observable$ = useMemo(() => services.uiSettings!.get$(key, defaultValue), [
     key,
     defaultValue,
+    services.uiSettings,
   ]);
   const value = useObservable<T>(observable$, services.uiSettings!.get(key, defaultValue));
   const set = useCallback((newValue: T) => services.uiSettings!.set(key, newValue), [key]);

diff --git a/src/plugins/kibana_utils/public/store/react.ts b/src/plugins/kibana_utils/public/store/react.ts
@@ -86,10 +86,12 @@ export const createContext = <
     comparator?: Comparator<Result>
   ): Result => {
     const { state$, get } = useStore();
+    /* eslint-disable react-hooks/exhaustive-deps */
     const [observable$, unsubscribe] = useMemo(
       () => observableSelector(get(), state$, selector, comparator),
       [state$]
     );
+    /* eslint-enable react-hooks/exhaustive-deps */
     useLayoutEffect(() => unsubscribe, [observable$, unsubscribe]);
     const value = useObservable(observable$, selector(get()));
     return value;