Dashboard: Adding variables and selecting type (#103956)

* Dashboard: Adding variables and selecting type

* Make i18n-extract

---------

Co-authored-by: oscarkilhed <oscar.kilhed@grafana.com>

public/app/features/dashboard-scene/edit-pane/EditPaneHeader.tsx

@@ -27,7 +27,7 @@ export function EditPaneHeader({ element, editPane }: EditPaneHeaderProps) {
 
   return (
     <div className={styles.wrapper}>
-      <Stack direction="row" gap={1}>
+      <Stack direction="row" gap={0.5}>
         {canGoBack && (
           <IconButton
             name="arrow-left"

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

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import { useMemo } from 'react';
+import { useToggle } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { SceneVariable, SceneVariableSet } from '@grafana/scenes';
-import { Stack, Button, useStyles2, Text, Box } from '@grafana/ui';
+import { Stack, Button, useStyles2, Text, Box, Card } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
@@ -12,7 +13,7 @@ import { NewObjectAddedToCanvasEvent } from '../../edit-pane/shared';
 import { EditableDashboardElement, EditableDashboardElementInfo } from '../../scene/types/EditableDashboardElement';
 import { getDashboardSceneFor } from '../../utils/utils';
 
-import { getVariableDefault } from './utils';
+import { EditableVariableType, getNextAvailableId, getVariableScene, getVariableTypeSelectOptions } from './utils';
 
 export class VariableSetEditableElement implements EditableDashboardElement {
   public readonly isEditableDashboardElement = true;
@@ -49,19 +50,26 @@ export class VariableSetEditableElement implements EditableDashboardElement {
 function VariableList({ set }: { set: SceneVariableSet }) {
   const { variables } = set.useState();
   const styles = useStyles2(getStyles);
+  const [isAdding, setIsAdding] = useToggle(false);
 
   const onEditVariable = (variable: SceneVariable) => {
     const { editPane } = getDashboardSceneFor(set).state;
     editPane.selectObject(variable, variable.state.key!);
   };
 
-  const onAddVariable = () => {
-    //add the new variable to the end of the array
-    const newVariable = getVariableDefault(variables);
-    set.setState({ variables: [...variables, newVariable] });
-    set.publishEvent(new NewObjectAddedToCanvasEvent(newVariable), true);
+  const onAddVariable = (type: EditableVariableType) => {
+    const { variables } = set.state;
+    const nextName = getNextAvailableId(type, variables);
+    const newVar = getVariableScene(type, { name: nextName });
+    set.setState({ variables: [...variables, newVar] });
+    set.publishEvent(new NewObjectAddedToCanvasEvent(newVar), true);
+    setIsAdding(false);
   };
 
+  if (isAdding) {
+    return <VariableTypeSelection onAddVariable={onAddVariable} />;
+  }
+
   return (
     <Stack direction="column" gap={0}>
       {variables.map((variable) => (
@@ -76,7 +84,7 @@ function VariableList({ set }: { set: SceneVariableSet }) {
         </div>
       ))}
       <Box paddingBottom={1} display={'flex'}>
-        <Button fullWidth icon="plus" size="sm" variant="secondary" onClick={onAddVariable}>
+        <Button fullWidth icon="plus" size="sm" variant="secondary" onClick={setIsAdding}>
           <Trans i18nKey="dashboard.edit-pane.variables.add-variable">Add variable</Trans>
         </Button>
       </Box>
@@ -84,6 +92,34 @@ function VariableList({ set }: { set: SceneVariableSet }) {
   );
 }
 
+interface VariableTypeSelectionProps {
+  onAddVariable: (type: EditableVariableType) => void;
+}
+
+function VariableTypeSelection({ onAddVariable }: VariableTypeSelectionProps) {
+  const options = getVariableTypeSelectOptions();
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Stack direction={'column'} gap={0}>
+      <Box paddingBottom={1} display={'flex'}>
+        <Trans i18nKey="dashboard.edit-pane.variables.select-type">Choose variable type</Trans>
+      </Box>
+      {options.map((option) => (
+        <Card
+          isCompact
+          onClick={() => onAddVariable(option.value!)}
+          key={option.value}
+          title={t('dashboard.edit-pane.variables.select-type-card-tooltip', 'Click to select type')}
+        >
+          <Card.Heading>{option.label}</Card.Heading>
+          <Card.Description className={styles.cardDescription}>{option.description}</Card.Description>
+        </Card>
+      ))}
+    </Stack>
+  );
+}
+
 function getStyles(theme: GrafanaTheme2) {
   return {
     variableItem: css({
@@ -112,5 +148,9 @@ function getStyles(theme: GrafanaTheme2) {
         },
       },
     }),
+    cardDescription: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      marginTop: theme.spacing(0),
+    }),
   };
 }

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

@@ -50,28 +50,28 @@ export function isEditableVariableType(type: VariableType): type is EditableVari
 export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableConfig> = {
   custom: {
     name: 'Custom',
-    description: 'Define variable values manually',
+    description: 'Values are static and defined manually',
     editor: CustomVariableEditor,
     getOptions: getCustomVariableOptions,
   },
   query: {
     name: 'Query',
-    description: 'Variable values are fetched from a datasource query',
+    description: 'Values are fetched from a data source query',
     editor: QueryVariableEditor,
   },
   constant: {
     name: 'Constant',
-    description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share',
+    description: 'A hidden constant variable, useful for metric prefixes in dashboards you want to share',
     editor: ConstantVariableEditor,
   },
   interval: {
     name: 'Interval',
-    description: 'Define a timespan interval (ex 1m, 1h, 1d)',
+    description: 'Values are timespans, ex 1m, 1h, 1d',
     editor: IntervalVariableEditor,
   },
   datasource: {
     name: 'Data source',
-    description: 'Enables you to dynamically switch the data source for multiple panels',
+    description: 'Dynamically switch the data source for multiple panels',
     editor: DataSourceVariableEditor,
   },
   adhoc: {
@@ -86,7 +86,7 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
   },
   textbox: {
     name: 'Textbox',
-    description: 'Define a textbox variable, where users can enter any arbitrary string',
+    description: 'Users can enter any arbitrary strings in a textbox',
     editor: TextBoxVariableEditor,
   },
 };

public/locales/en-US/grafana.json

@@ -3063,6 +3063,8 @@
       },
       "variables": {
         "add-variable": "Add variable",
+        "select-type": "Choose variable type",
+        "select-type-card-tooltip": "Click to select type",
         "select-variable": "Select"
       }
     },