DashboardScene: Reset editIndex on variable delete (#84589)

* reset edit index on variable delete

* adjust delete variable test

* adjust test to be more in line with user flow

public/app/features/dashboard-scene/settings/VariablesEditView.test.tsx

@@ -146,9 +146,14 @@ describe('VariablesEditView', () => {
 
     it('should delete a variable', () => {
       const variableIdentifier = 'customVar';
+
+      variableView.onEdit(variableIdentifier);
+      expect(variableView.state.editIndex).toBe(0);
+
       variableView.onDelete(variableIdentifier);
       expect(variableView.getVariables()).toHaveLength(2);
       expect(variableView.getVariables()[0].state.name).toBe('customVar2');
+      expect(variableView.state.editIndex).toBeUndefined();
     });
 
     it('should change order of variables', () => {

public/app/features/dashboard-scene/settings/VariablesEditView.tsx

@@ -78,6 +78,8 @@ export class VariablesEditView extends SceneObjectBase<VariablesEditViewState> i
 
     // Update the state or the variables array
     this.getVariableSet().setState({ variables: updatedVariables });
+    // Remove editIndex otherwise switches to next variable in list
+    this.setState({ editIndex: undefined });
   };
 
   public getVariables() {
@@ -278,6 +280,8 @@ function VariableEditorSettingsView({
         onGoBack={onGoBack}
         onDelete={onDelete}
         onValidateVariableName={onValidateVariableName}
+        // force refresh when navigating using back/forward between variables
+        key={variable.state.key}
       />
     </Page>
   );