Dashboard: Hide add variable button in edit views (#113438)

public/app/features/dashboard-scene/scene/VariableControls.tsx

@@ -27,11 +27,7 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
         .map((variable) => (
           <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
         ))}
-      {config.featureToggles.dashboardNewLayouts ? (
-        <div className="dashboard-canvas-add-button">
-          <AddVariableButton dashboard={dashboard} />
-        </div>
-      ) : null}
+      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
     </>
   );
 }

public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx

@@ -9,7 +9,7 @@ import { DashboardInteractions } from '../utils/interactions';
 import { DashboardScene } from './DashboardScene';
 
 export function AddVariableButton({ dashboard }: { dashboard: DashboardScene }) {
-  const { isEditing } = dashboard.useState();
+  const { editview, editPanel, isEditing, viewPanel } = dashboard.useState();
 
   const handlePointerDown: PointerEventHandler = useCallback(
     (evt) => {
@@ -20,13 +20,20 @@ export function AddVariableButton({ dashboard }: { dashboard: DashboardScene })
     [dashboard]
   );
 
-  if (!isEditing) {
+  // Hide the button if:
+  // - the dashboard is not in edit mode
+  // - the dashboard is in an edit view mode
+  // - the dashboard is in a view panel mode
+  // - the dashboard is in an edit panel mode
+  if (!isEditing || !!editview || !!viewPanel || !!editPanel) {
     return null;
   }
 
   return (
-    <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
-      <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
-    </Button>
+    <div className="dashboard-canvas-add-button">
+      <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
+        <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
+      </Button>
+    </div>
   );
 }