Explore metrics: Use state for variables to fix labels loading bug (#90017)

* use variable state for loading labels

* UI fix for missing metadata fields

* remove extra space

* add <Trans> for betterer

* import Trans from core, this will need to be addressed when we externalize explore metrics

* make i18n-extract for drone

.betterer.results

@@ -5468,15 +5468,6 @@ exports[`better eslint`] = {
     "public/app/features/trails/ActionTabs/BreakdownScene.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/trails/ActionTabs/MetricOverviewScene.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
-    ],
     "public/app/features/trails/ActionTabs/utils.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

public/app/features/trails/ActionTabs/MetricOverviewScene.tsx

@@ -8,16 +8,14 @@ import {
   VariableDependencyConfig,
 } from '@grafana/scenes';
 import { Stack, Text, TextLink } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 
-import { ALL_VARIABLE_VALUE } from '../../variables/constants';
 import { MetricScene } from '../MetricScene';
 import { StatusWrapper } from '../StatusWrapper';
 import { reportExploreMetrics } from '../interactions';
 import { VAR_DATASOURCE_EXPR, VAR_GROUP_BY } from '../shared';
 import { getMetricSceneFor, getTrailFor } from '../utils';
 
-import { getLabelOptions } from './utils';
-
 export interface MetricOverviewSceneState extends SceneObjectState {
   metadata?: PromMetricsMetadataItem;
   metadataLoading?: boolean;
@@ -67,29 +65,54 @@ export class MetricOverviewScene extends SceneObjectBase<MetricOverviewSceneStat
   public static Component = ({ model }: SceneComponentProps<MetricOverviewScene>) => {
     const { metadata, metadataLoading } = model.useState();
     const variable = model.getVariable();
-    const { loading: labelsLoading } = variable.useState();
-    const labelOptions = getLabelOptions(model, variable).filter((l) => l.value !== ALL_VARIABLE_VALUE);
+    const { loading: labelsLoading, options: labelOptions } = variable.useState();
 
     return (
       <StatusWrapper isLoading={labelsLoading || metadataLoading}>
         <Stack gap={6}>
           <>
             <Stack direction="column" gap={0.5}>
-              <Text weight={'medium'}>Description</Text>
+              <Text weight={'medium'}>
+                <Trans>Description</Trans>
+              </Text>
               <div style={{ maxWidth: 360 }}>
-                {metadata?.help ? <div>{metadata?.help}</div> : <i>No description available</i>}
+                {metadata?.help ? (
+                  <div>{metadata?.help}</div>
+                ) : (
+                  <i>
+                    <Trans>No description available</Trans>
+                  </i>
+                )}
               </div>
             </Stack>
             <Stack direction="column" gap={0.5}>
-              <Text weight={'medium'}>Type</Text>
-              {metadata?.type ? <div>{metadata?.type}</div> : <i>Unknown</i>}
+              <Text weight={'medium'}>
+                <Trans>Type</Trans>
+              </Text>
+              {metadata?.type ? (
+                <div>{metadata?.type}</div>
+              ) : (
+                <i>
+                  <Trans>Unknown</Trans>
+                </i>
+              )}
             </Stack>
             <Stack direction="column" gap={0.5}>
-              <Text weight={'medium'}>Unit</Text>
-              {metadata?.unit ? <div>{metadata?.unit}</div> : <i>Unknown</i>}
+              <Text weight={'medium'}>
+                <Trans>Unit</Trans>
+              </Text>
+              {metadata?.unit ? (
+                <div>{metadata?.unit}</div>
+              ) : (
+                <i>
+                  <Trans>Unknown</Trans>
+                </i>
+              )}
             </Stack>
             <Stack direction="column" gap={0.5}>
-              <Text weight={'medium'}>Labels</Text>
+              <Text weight={'medium'}>
+                <Trans>Labels</Trans>
+              </Text>
               {labelOptions.length === 0 && 'Unable to fetch labels.'}
               {labelOptions.map((l) => (
                 <TextLink

public/locales/en-US/grafana.json

@@ -614,6 +614,7 @@
       "message": "No data sources found"
     }
   },
+  "Description": "Description",
   "explore": {
     "add-to-dashboard": "Add to dashboard",
     "add-to-library-modal": {
@@ -874,6 +875,7 @@
       "refresh": "Refresh"
     }
   },
+  "Labels": "Labels",
   "library-panel": {
     "add-modal": {
       "cancel": "Cancel",
@@ -1428,6 +1430,7 @@
     },
     "title": "Latest from the blog"
   },
+  "No description available": "No description available",
   "notifications": {
     "empty-state": {
       "description": "Notifications you have received will appear here",
@@ -2111,6 +2114,9 @@
       "add-transformation-header": "Start transforming data"
     }
   },
+  "Type": "Type",
+  "Unit": "Unit",
+  "Unknown": "Unknown",
   "user-orgs": {
     "current-org-button": "Current",
     "name-column": "Name",

public/locales/pseudo-LOCALE/grafana.json

@@ -614,6 +614,7 @@
       "message": "Ńő đäŧä şőūřčęş ƒőūʼnđ"
     }
   },
+  "Description": "Đęşčřįpŧįőʼn",
   "explore": {
     "add-to-dashboard": "Åđđ ŧő đäşĥþőäřđ",
     "add-to-library-modal": {
@@ -874,6 +875,7 @@
       "refresh": "Ŗęƒřęşĥ"
     }
   },
+  "Labels": "Ŀäþęľş",
   "library-panel": {
     "add-modal": {
       "cancel": "Cäʼnčęľ",
@@ -1428,6 +1430,7 @@
     },
     "title": "Ŀäŧęşŧ ƒřőm ŧĥę þľőģ"
   },
+  "No description available": "Ńő đęşčřįpŧįőʼn äväįľäþľę",
   "notifications": {
     "empty-state": {
       "description": "Ńőŧįƒįčäŧįőʼnş yőū ĥävę řęčęįvęđ ŵįľľ äppęäř ĥęřę",
@@ -2111,6 +2114,9 @@
       "add-transformation-header": "Ŝŧäřŧ ŧřäʼnşƒőřmįʼnģ đäŧä"
     }
   },
+  "Type": "Ŧypę",
+  "Unit": "Ůʼnįŧ",
+  "Unknown": "Ůʼnĸʼnőŵʼn",
   "user-orgs": {
     "current-org-button": "Cūřřęʼnŧ",
     "name-column": "Ńämę",