From b60b43640f59b2fc0627736d9abe1820cb0814ed Mon Sep 17 00:00:00 2001
From: Alexa V <239999+axelavargas@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:50:38 +0300
Subject: [PATCH] Revert "Variables: Show description instead of definition in
 table" (#70043)

---
 .../src/selectors/pages.ts                    |  3 +--
 .../variables/editor/VariableEditorList.tsx   |  2 +-
 .../editor/VariableEditorListRow.tsx          | 26 +++++++++++++++----
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts
index 1d6768ce36d..c0f2f36bbf5 100644
--- a/packages/grafana-e2e-selectors/src/selectors/pages.ts
+++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts
@@ -114,8 +114,7 @@ export const Pages = {
           newButton: 'Variable editor New variable button',
           table: 'Variable editor Table',
           tableRowNameFields: (variableName: string) => `Variable editor Table Name field ${variableName}`,
-          tableRowDescriptionFields: (variableName: string) =>
-            `Variable editor Table Description field ${variableName}`,
+          tableRowDefinitionFields: (variableName: string) => `Variable editor Table Definition 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}`,
diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx
index 5a5fe5a28cd..26b0723e688 100644
--- a/public/app/features/variables/editor/VariableEditorList.tsx
+++ b/public/app/features/variables/editor/VariableEditorList.tsx
@@ -59,7 +59,7 @@ export function VariableEditorList({
               <thead>
                 <tr>
                   <th>Variable</th>
-                  <th>Description</th>
+                  <th>Definition</th>
                   <th colSpan={5} />
                 </tr>
               </thead>
diff --git a/public/app/features/variables/editor/VariableEditorListRow.tsx b/public/app/features/variables/editor/VariableEditorListRow.tsx
index 95a1bdb16e4..5b378bb0afb 100644
--- a/public/app/features/variables/editor/VariableEditorListRow.tsx
+++ b/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 { isAdHoc } from '../guard';
+import { hasOptions, isAdHoc, isQuery } from '../guard';
 import { VariableUsagesButton } from '../inspect/VariableUsagesButton';
 import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
 import { KeyedVariableIdentifier } from '../state/types';
@@ -35,6 +35,7 @@ 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);
@@ -67,14 +68,14 @@ export function VariableEditorListRow({
           </td>
           <td
             role="gridcell"
-            className={styles.descriptionColumn}
+            className={styles.definitionColumn}
             onClick={(event) => {
               event.preventDefault();
               propsOnEdit(identifier);
             }}
-            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDescriptionFields(variable.name)}
+            aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDefinitionFields(variable.name)}
           >
-            {variable.description}
+            {definition}
           </td>
 
           <td role="gridcell" className={styles.column}>
@@ -121,6 +122,21 @@ 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;
 }
@@ -158,7 +174,7 @@ function getStyles(theme: GrafanaTheme2) {
       cursor: pointer;
       color: ${theme.colors.primary.text};
     `,
-    descriptionColumn: css`
+    definitionColumn: css`
       width: 100%;
       max-width: 200px;
       cursor: pointer;