fix linting errors in graph (#50907)

.eslintrc.js

@@ -163,12 +163,6 @@ module.exports = {
         'jsx-a11y/click-events-have-key-events': 'off',
       },
     },
-    {
-      files: ['x-pack/legacy/plugins/graph/**/*.{js,ts,tsx}'],
-      rules: {
-        'react-hooks/exhaustive-deps': 'off',
-      },
-    },
     {
       files: ['x-pack/legacy/plugins/index_management/**/*.{js,ts,tsx}'],
       rules: {

x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -67,6 +67,9 @@ export function FieldEditor({
     if (currentField !== initialField) {
       setCurrentField(initialField);
     }
+    // this hook only updates on change of the prop
+    // it's meant to reset the internal state on changes outside of the component.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialField]);
 
   function updateField() {

x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx

@@ -37,9 +37,9 @@ export function FieldPicker({
       // only update the field options if the popover is not open currently.
       // This is necessary because EuiSelectable assumes options don't change
       // on their own.
-      setFieldOptions(toOptions(allFields));
+      setFieldOptions(toOptions(Object.values(fieldMap)));
     }
-  }, [fieldMap]);
+  }, [fieldMap, open]);
 
   const badgeDescription = i18n.translate('xpack.graph.bar.pickFieldsLabel', {
     defaultMessage: 'Add fields',

x-pack/legacy/plugins/graph/public/components/search_bar.tsx

@@ -88,7 +88,7 @@ export function SearchBarComponent(props: SearchBarProps) {
       }
     }
     fetchPattern();
-  }, [currentDatasource]);
+  }, [currentDatasource, indexPatternProvider]);
 
   const kibana = useKibana<IDataPluginServices>();
   const { services, overlays } = kibana;

x-pack/legacy/plugins/graph/public/components/settings/url_template_form.tsx

@@ -58,12 +58,17 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) {
 
   const [currentTemplate, setCurrentTemplate] = useState(getInitialTemplate);
 
+  const persistedTemplateState = isUpdateForm(props) && props.initialTemplate;
+
   // reset local form if template passed in from parent component changes
   useEffect(() => {
     if (isUpdateForm(props) && currentTemplate !== props.initialTemplate) {
       setCurrentTemplate(props.initialTemplate);
     }
-  }, [isUpdateForm(props) && props.initialTemplate]);
+    // this hook only updates on change of the prop
+    // it's meant to reset the internal state on changes outside of the component.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [persistedTemplateState]);
 
   const [touched, setTouched] = useState({
     description: false,