fix linting errors in graph (#50907) (#52070)

.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,