Variables: Show description instead of definition in table (#69786)

* Variables: Show description instead of definition in table

* Remove referencing of definition

* Update

packages/grafana-e2e-selectors/src/selectors/pages.ts

@@ -114,7 +114,8 @@ export const Pages = {
           newButton: 'Variable editor New variable button',
           table: 'Variable editor Table',
           tableRowNameFields: (variableName: string) => `Variable editor Table Name field ${variableName}`,
-          tableRowDefinitionFields: (variableName: string) => `Variable editor Table Definition field ${variableName}`,
+          tableRowDescriptionFields: (variableName: string) =>
+            `Variable editor Table Description field ${variableName}`,
           tableRowArrowUpButtons: (variableName: string) => `Variable editor Table ArrowUp button ${variableName}`,
           tableRowArrowDownButtons: (variableName: string) => `Variable editor Table ArrowDown button ${variableName}`,
           tableRowDuplicateButtons: (variableName: string) => `Variable editor Table Duplicate button ${variableName}`,

public/app/features/variables/editor/VariableEditorList.tsx

@@ -59,7 +59,7 @@ export function VariableEditorList({
               <thead>
                 <tr>
                   <th>Variable</th>
-                  <th>Definition</th>
+                  <th>Description</th>
                   <th colSpan={5} />
                 </tr>
               </thead>

public/app/features/variables/editor/VariableEditorListRow.tsx

@@ -7,7 +7,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { Button, Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
 
-import { hasOptions, isAdHoc, isQuery } from '../guard';
+import { isAdHoc } from '../guard';
 import { VariableUsagesButton } from '../inspect/VariableUsagesButton';
 import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
 import { KeyedVariableIdentifier } from '../state/types';
@@ -35,7 +35,6 @@ export function VariableEditorListRow({
 }: VariableEditorListRowProps): ReactElement {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
-  const definition = getDefinition(variable);
   const usages = getVariableUsages(variable.id, usageTree);
   const passed = usages > 0 || isAdHoc(variable);
   const identifier = toKeyedVariableIdentifier(variable);
@@ -68,14 +67,14 @@ export function VariableEditorListRow({
           </td>
           <td
             role="gridcell"
-            className={styles.definitionColumn}
+            className={styles.descriptionColumn}
             onClick={(event) => {
               event.preventDefault();
               propsOnEdit(identifier);
             }}
-            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(variable.name)}
+            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDescriptionFields(variable.name)}
           >
-            {definition}
+            {variable.description}
           </td>
 
           <td role="gridcell" className={styles.column}>
@@ -122,21 +121,6 @@ export function VariableEditorListRow({
   );
 }
 
-function getDefinition(model: VariableModel): string {
-  let definition = '';
-  if (isQuery(model)) {
-    if (model.definition) {
-      definition = model.definition;
-    } else if (typeof model.query === 'string') {
-      definition = model.query;
-    }
-  } else if (hasOptions(model)) {
-    definition = model.query;
-  }
-
-  return definition;
-}
-
 interface VariableCheckIndicatorProps {
   passed: boolean;
 }
@@ -174,7 +158,7 @@ function getStyles(theme: GrafanaTheme2) {
       cursor: pointer;
       color: ${theme.colors.primary.text};
     `,
-    definitionColumn: css`
+    descriptionColumn: css`
       width: 100%;
       max-width: 200px;
       cursor: pointer;