[7.x] [Lens] Use rules of hooks with linting (#65593)

.eslintrc.js

@@ -118,7 +118,6 @@ module.exports = {
       files: ['x-pack/plugins/lens/**/*.{js,ts,tsx}'],
       rules: {
         'react-hooks/exhaustive-deps': 'off',
-        'react-hooks/rules-of-hooks': 'off',
       },
     },
     {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -43,6 +43,12 @@ export function LayerPanel(
   }
 ) {
   const dragDropContext = useContext(DragContext);
+  const [popoverState, setPopoverState] = useState<DimensionPopoverState>({
+    isOpen: false,
+    openId: null,
+    addingToGroupId: null,
+  });
+
   const { framePublicAPI, layerId, activeVisualization, isOnlyLayer, onRemoveLayer } = props;
   const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId];
   if (!datasourcePublicAPI) {
@@ -74,12 +80,6 @@ export function LayerPanel(
     dateRange: props.framePublicAPI.dateRange,
   };
 
-  const [popoverState, setPopoverState] = useState<DimensionPopoverState>({
-    isOpen: false,
-    openId: null,
-    addingToGroupId: null,
-  });
-
   const { groups } = activeVisualization.getConfiguration(layerVisualizationConfigProps);
   const isEmptyLayer = !groups.some(d => d.accessors.length > 0);
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel.tsx

@@ -122,6 +122,16 @@ export function InnerWorkspacePanel({
     framePublicAPI.filters,
   ]);
 
+  useEffect(() => {
+    // reset expression error if component attempts to run it again
+    if (expression && localState.expressionBuildError) {
+      setLocalState(s => ({
+        ...s,
+        expressionBuildError: undefined,
+      }));
+    }
+  }, [expression]);
+
   function onDrop() {
     if (suggestionForDraggedField) {
       trackUiEvent('drop_onto_workspace');
@@ -174,16 +184,6 @@ export function InnerWorkspacePanel({
   }
 
   function renderVisualization() {
-    useEffect(() => {
-      // reset expression error if component attempts to run it again
-      if (expression && localState.expressionBuildError) {
-        setLocalState(s => ({
-          ...s,
-          expressionBuildError: undefined,
-        }));
-      }
-    }, [expression]);
-
     if (expression === null) {
       return renderEmptyWorkspace();
     }

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.test.tsx

@@ -258,7 +258,17 @@ describe('IndexPattern Data Panel', () => {
 
   it('should render a warning if there are no index patterns', () => {
     const wrapper = shallowWithIntl(
-      <InnerIndexPatternDataPanel {...defaultProps} currentIndexPatternId="" indexPatterns={{}} />
+      <IndexPatternDataPanel
+        {...defaultProps}
+        state={{
+          ...initialState,
+          currentIndexPatternId: '',
+          indexPatterns: {},
+        }}
+        setState={jest.fn()}
+        dragDropContext={{ dragging: {}, setDragging: () => {} }}
+        changeIndexPattern={jest.fn()}
+      />
     );
     expect(wrapper.find('[data-test-subj="indexPattern-no-indexpatterns"]')).toHaveLength(1);
   });

x-pack/plugins/lens/public/indexpattern_datasource/datapanel.tsx

@@ -144,21 +144,49 @@ export function IndexPatternDataPanel({
           indexPatternList.map(x => `${x.title}:${x.timeFieldName}`).join(','),
         ]}
       />
-      <MemoizedDataPanel
-        currentIndexPatternId={currentIndexPatternId}
-        indexPatternRefs={indexPatternRefs}
-        indexPatterns={indexPatterns}
-        query={query}
-        dateRange={dateRange}
-        filters={filters}
-        dragDropContext={dragDropContext}
-        showEmptyFields={state.showEmptyFields}
-        onToggleEmptyFields={onToggleEmptyFields}
-        core={core}
-        data={data}
-        onChangeIndexPattern={onChangeIndexPattern}
-        existingFields={state.existingFields}
-      />
+
+      {Object.keys(indexPatterns).length === 0 ? (
+        <EuiFlexGroup
+          gutterSize="m"
+          className="lnsInnerIndexPatternDataPanel"
+          direction="column"
+          responsive={false}
+        >
+          <EuiFlexItem grow={null}>
+            <EuiCallOut
+              data-test-subj="indexPattern-no-indexpatterns"
+              title={i18n.translate('xpack.lens.indexPattern.noPatternsLabel', {
+                defaultMessage: 'No index patterns',
+              })}
+              color="warning"
+              iconType="alert"
+            >
+              <p>
+                <FormattedMessage
+                  id="xpack.lens.indexPattern.noPatternsDescription"
+                  defaultMessage="Please create an index pattern or switch to another data source"
+                />
+              </p>
+            </EuiCallOut>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : (
+        <MemoizedDataPanel
+          currentIndexPatternId={currentIndexPatternId}
+          indexPatternRefs={indexPatternRefs}
+          indexPatterns={indexPatterns}
+          query={query}
+          dateRange={dateRange}
+          filters={filters}
+          dragDropContext={dragDropContext}
+          showEmptyFields={state.showEmptyFields}
+          onToggleEmptyFields={onToggleEmptyFields}
+          core={core}
+          data={data}
+          onChangeIndexPattern={onChangeIndexPattern}
+          existingFields={state.existingFields}
+        />
+      )}
     </>
   );
 }
@@ -194,35 +222,6 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
   onChangeIndexPattern: (newId: string) => void;
   existingFields: IndexPatternPrivateState['existingFields'];
 }) {
-  if (Object.keys(indexPatterns).length === 0) {
-    return (
-      <EuiFlexGroup
-        gutterSize="m"
-        className="lnsInnerIndexPatternDataPanel"
-        direction="column"
-        responsive={false}
-      >
-        <EuiFlexItem grow={null}>
-          <EuiCallOut
-            data-test-subj="indexPattern-no-indexpatterns"
-            title={i18n.translate('xpack.lens.indexPattern.noPatternsLabel', {
-              defaultMessage: 'No index patterns',
-            })}
-            color="warning"
-            iconType="alert"
-          >
-            <p>
-              <FormattedMessage
-                id="xpack.lens.indexPattern.noPatternsDescription"
-                defaultMessage="Please create an index pattern or switch to another data source"
-              />
-            </p>
-          </EuiCallOut>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-  }
-
   const [localState, setLocalState] = useState<DataPanelState>({
     nameFilter: '',
     typeFilter: [],

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/bucket_nesting_editor.tsx

@@ -127,7 +127,7 @@ export function BucketNestingEditor({
                 defaultMessage: 'Entire data set',
               }),
             },
-            ...aggColumns,
+            ...aggColumns.map(({ value, text }) => ({ value, text })),
           ]}
           value={prevColumn}
           onChange={e => setColumns(nestColumn(layer.columnOrder, e.target.value, columnId))}

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

@@ -251,22 +251,6 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
 
   const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
   const chartTheme = IS_DARK_THEME ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
-
-  if (props.isLoading) {
-    return <EuiLoadingSpinner />;
-  } else if (
-    (!props.histogram || props.histogram.buckets.length === 0) &&
-    (!props.topValues || props.topValues.buckets.length === 0)
-  ) {
-    return (
-      <EuiText size="s">
-        {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
-          defaultMessage: 'No data to display.',
-        })}
-      </EuiText>
-    );
-  }
-
   let histogramDefault = !!props.histogram;
 
   const totalValuesCount =
@@ -309,6 +293,21 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
 
   let title = <></>;
 
+  if (props.isLoading) {
+    return <EuiLoadingSpinner />;
+  } else if (
+    (!props.histogram || props.histogram.buckets.length === 0) &&
+    (!props.topValues || props.topValues.buckets.length === 0)
+  ) {
+    return (
+      <EuiText size="s">
+        {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
+          defaultMessage: 'No data to display.',
+        })}
+      </EuiText>
+    );
+  }
+
   if (histogram && histogram.buckets.length && topValues && topValues.buckets.length) {
     title = (
       <EuiButtonGroup