Content outline: Fix runtime error with system variable and ad hoc filters (#114306)

eslint-suppressions.json

@@ -2071,9 +2071,6 @@
     }
   },
   "public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx": {
-    "no-restricted-syntax": {
-      "count": 1
-    },
     "react-hooks/rules-of-hooks": {
       "count": 4
     }

public/app/features/dashboard-scene/settings/variables/VariableEditableElement.tsx

@@ -150,7 +150,7 @@ function VariableNameInput({ variable, isNewElement }: { variable: SceneVariable
   const oldName = useRef(name);
 
   return (
-    <Field label={t('dashboard.edit-pane.variable.name', 'Name')} invalid={!!nameError} error={nameError}>
+    <Field label={t('dashboard.edit-pane.variable.name', 'Name')} invalid={!!nameError} error={nameError} noMargin>
       <Input
         id={id}
         ref={ref}

public/app/features/dashboard-scene/settings/variables/VariableSetEditableElement.tsx

@@ -15,6 +15,7 @@ import { DashboardInteractions } from '../../utils/interactions';
 import { getDashboardSceneFor } from '../../utils/utils';
 
 import { openAddVariablePane } from './VariableAddEditableElement';
+import { isEditableVariableType } from './utils';
 
 function useEditPaneOptions(this: VariableSetEditableElement, set: SceneVariableSet): OptionsPaneCategoryDescriptor[] {
   const variableListId = useId();
@@ -47,7 +48,8 @@ export class VariableSetEditableElement implements EditableDashboardElement {
   }
 
   public getOutlineChildren() {
-    return this.set.state.variables;
+    // Filter out system and snapshot variables - they should not appear in the outline
+    return this.set.state.variables.filter((variable) => isEditableVariableType(variable.state.type));
   }
 
   public useEditPaneOptions = useEditPaneOptions.bind(this, this.set);
@@ -71,9 +73,12 @@ export function VariableList({ set }: { set: SceneVariableSet }) {
     DashboardInteractions.addVariableButtonClicked({ source: 'edit_pane' });
   }, [set]);
 
+  // Filter out system and snapshot variables - they should not appear in the list
+  const editableVariables = variables.filter((variable) => isEditableVariableType(variable.state.type));
+
   return (
     <Stack direction="column" gap={0}>
-      {variables.map((variable) => (
+      {editableVariables.map((variable) => (
         // TODO fix keyboard a11y here
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
         <div className={styles.variableItem} key={variable.state.name} onClick={() => onEditVariable(variable)}>

public/app/features/dashboard-scene/settings/variables/components/AdHocVariableForm.tsx

@@ -98,9 +98,9 @@ export function AdHocVariableForm({
           >
             <Switch
               data-testid={selectors.pages.Dashboard.Settings.Variables.Edit.AdHocFiltersVariable.modeToggle}
-              value={defaultKeys !== undefined}
+              value={defaultKeys != null}
               onChange={(e) => {
-                if (defaultKeys === undefined) {
+                if (defaultKeys == null) {
                   onDefaultKeysChange([]);
                 } else {
                   onDefaultKeysChange(undefined);
@@ -109,7 +109,7 @@ export function AdHocVariableForm({
             />
           </Field>
 
-          {defaultKeys !== undefined && (
+          {defaultKeys != null && (
             <CodeEditor
               height={300}
               language="csv"

public/app/features/dashboard-scene/settings/variables/utils.test.ts

@@ -93,7 +93,7 @@ describe('isEditableVariableType', () => {
   });
 
   it('should return false for non-editable variable types', () => {
-    const nonEditableTypes: VariableType[] = ['system'];
+    const nonEditableTypes: VariableType[] = ['system', 'snapshot'];
     nonEditableTypes.forEach((type) => {
       expect(isEditableVariableType(type)).toBe(false);
     });

public/app/features/dashboard-scene/settings/variables/utils.ts

@@ -47,7 +47,7 @@ interface EditableVariableConfig {
 export type EditableVariableType = Exclude<VariableType, 'system' | 'snapshot'>;
 
 export function isEditableVariableType(type: VariableType): type is EditableVariableType {
-  return type !== 'system';
+  return type !== 'system' && type !== 'snapshot';
 }
 
 export const getEditableVariables: () => Record<EditableVariableType, EditableVariableConfig> = () => ({