@grafana/scenes 6.20.2 → 6.20.3--canary.1151.15685182570.0

package/dist/index.js

@@ -10,6 +10,7 @@ var rxjs = require('rxjs');
 var uuid = require('uuid');
 var lodash = require('lodash');
 var schema = require('@grafana/schema');
+var i18n = require('@grafana/i18n');
 var ui = require('@grafana/ui');
 var e2eSelectors = require('@grafana/e2e-selectors');
 var css = require('@emotion/css');
@@ -1320,7 +1321,7 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Raw,
       name: "raw",
-      description: "Keep value as is",
+      description: i18n.t("variables.format-registry.formats.description.keep-value-as-is", "Keep value as is"),
       formatter: (value) => String(value)
     },
     {
@@ -1350,7 +1351,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Pipe,
       name: "Pipe",
-      description: "Values are separated by | character",
+      description: i18n.t(
+        "variables.format-registry.formats.description.values-are-separated-by-character",
+        "Values are separated by | character"
+      ),
       formatter: (value) => {
         if (typeof value === "string") {
           return value;
@@ -1364,7 +1368,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Distributed,
       name: "Distributed",
-      description: "Multiple values are formatted like variable=value",
+      description: i18n.t(
+        "variables.format-registry.formats.description.multiple-values-are-formatted-like-variablevalue",
+        "Multiple values are formatted like variable=value"
+      ),
       formatter: (value, args, variable) => {
         if (typeof value === "string") {
           return value;
@@ -1385,7 +1392,7 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.CSV,
       name: "Csv",
-      description: "Comma-separated values",
+      description: i18n.t("variables.format-registry.formats.description.commaseparated-values", "Comma-separated values"),
       formatter: (value) => {
         if (typeof value === "string") {
           return value;
@@ -1399,7 +1406,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.HTML,
       name: "HTML",
-      description: "HTML escaping of values",
+      description: i18n.t(
+        "variables.format-registry.formats.description.html-escaping-of-values",
+        "HTML escaping of values"
+      ),
       formatter: (value) => {
         if (typeof value === "string") {
           return data.textUtil.escapeHtml(value);
@@ -1413,7 +1423,7 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.JSON,
       name: "JSON",
-      description: "JSON stringify value",
+      description: i18n.t("variables.format-registry.formats.description.json-stringify-value", "JSON stringify value"),
       formatter: (value) => {
         if (typeof value === "string") {
           return value;
@@ -1424,7 +1434,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.PercentEncode,
       name: "Percent encode",
-      description: "Useful for URL escaping values",
+      description: i18n.t(
+        "variables.format-registry.formats.description.useful-for-url-escaping-values",
+        "Useful for URL escaping values"
+      ),
       formatter: (value) => {
         if (lodash.isArray(value)) {
           return encodeURIComponentStrict("{" + value.join(",") + "}");
@@ -1435,7 +1448,7 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.SingleQuote,
       name: "Single quote",
-      description: "Single quoted values",
+      description: i18n.t("variables.format-registry.formats.description.single-quoted-values", "Single quoted values"),
       formatter: (value) => {
         const regExp = new RegExp(`'`, "g");
         if (lodash.isArray(value)) {
@@ -1448,7 +1461,7 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.DoubleQuote,
       name: "Double quote",
-      description: "Double quoted values",
+      description: i18n.t("variables.format-registry.formats.description.double-quoted-values", "Double quoted values"),
       formatter: (value) => {
         const regExp = new RegExp('"', "g");
         if (lodash.isArray(value)) {
@@ -1467,7 +1480,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Date,
       name: "Date",
-      description: "Format date in different ways",
+      description: i18n.t(
+        "variables.format-registry.formats.description.format-date-in-different-ways",
+        "Format date in different ways"
+      ),
       formatter: (value, args) => {
         var _a;
         let nrValue = NaN;
@@ -1498,7 +1514,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Glob,
       name: "Glob",
-      description: "Format multi-valued variables using glob syntax, example {value1,value2}",
+      description: i18n.t(
+        "variables.format-registry.formats.description.format-multivalued-variables-using-syntax-example",
+        "Format multi-valued variables using glob syntax, example {value1,value2}"
+      ),
       formatter: (value) => {
         if (lodash.isArray(value) && value.length > 1) {
           return "{" + value.join(",") + "}";
@@ -1535,7 +1554,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.UriEncode,
       name: "Percent encode as URI",
-      description: "Useful for URL escaping values, taking into URI syntax characters",
+      description: i18n.t(
+        "variables.format-registry.formats.description.useful-escaping-values-taking-syntax-characters",
+        "Useful for URL escaping values, taking into URI syntax characters"
+      ),
       formatter: (value) => {
         if (lodash.isArray(value)) {
           return encodeURIStrict("{" + value.join(",") + "}");
@@ -2805,7 +2827,7 @@ function VariableValueSelect({ model, state }) {
     {
       id: key,
       isValidNewOption: (inputValue2) => inputValue2.trim().length > 0,
-      placeholder: "Select value",
+      placeholder: i18n.t("variables.variable-value-select.placeholder-select-value", "Select value"),
       width: "auto",
       disabled: isReadOnly,
       value: selectValue,
@@ -3112,7 +3134,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
       /* @__PURE__ */ React__default.default.createElement(
         ui.IconButton,
         {
-          "aria-label": "clear",
+          "aria-label": i18n.t("variables.default-group-by-custom-indicator-container.aria-label-clear", "clear"),
           key: "clear",
           name: "times",
           size: "md",
@@ -3144,7 +3166,10 @@ function DefaultGroupByCustomIndicatorContainer(props) {
           name: "history",
           size: "md",
           className: styles.clearIcon,
-          tooltip: "Restore groupby set by this dashboard."
+          tooltip: i18n.t(
+            "variables.default-group-by-custom-indicator-container.tooltip-restore-groupby-set-by-this-dashboard",
+            "Restore groupby set by this dashboard."
+          )
         }
       )
     );
@@ -3155,7 +3180,10 @@ function DefaultGroupByCustomIndicatorContainer(props) {
         ui.Tooltip,
         {
           key: "tooltip",
-          content: "Applied by default in this dashboard. If edited, it carries over to other dashboards.",
+          content: i18n.t(
+            "variables.default-group-by-custom-indicator-container.tooltip",
+            "Applied by default in this dashboard. If edited, it carries over to other dashboards."
+          ),
           placement: "bottom"
         },
         /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "md" })
@@ -3409,10 +3437,10 @@ function GroupByVariableRenderer({ model }) {
   return isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
-      "aria-label": "Group by selector",
+      "aria-label": i18n.t("variables.group-by-variable-renderer.aria-label-group-by-selector", "Group by selector"),
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Group by label",
+      placeholder: i18n.t("variables.group-by-variable-renderer.placeholder-group-by-label", "Group by label"),
       width: "auto",
       allowCustomValue,
       inputValue,
@@ -3465,10 +3493,10 @@ function GroupByVariableRenderer({ model }) {
   ) : /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
-      "aria-label": "Group by selector",
+      "aria-label": i18n.t("variables.group-by-variable-renderer.aria-label-group-by-selector", "Group by selector"),
       "data-testid": `GroupBySelect-${key}`,
       id: key,
-      placeholder: "Group by label",
+      placeholder: i18n.t("variables.group-by-variable-renderer.placeholder-group-by-label", "Group by label"),
       width: "auto",
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
@@ -3525,7 +3553,7 @@ function toSelectableValue$1(input) {
 }
 
 function LoadingIndicator(props) {
-  return /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Cancel query" }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: i18n.t("utils.loading-indicator.content-cancel-query", "Cancel query") }, /* @__PURE__ */ React__default.default.createElement(
     ui.Icon,
     {
       className: "spin-clockwise",
@@ -3572,7 +3600,16 @@ function ControlsLabel(props) {
   const testId = typeof props.label === "string" ? e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
   let labelElement;
   if (isVertical) {
-    labelElement = /* @__PURE__ */ React__default.default.createElement("label", { className: css.cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { variant: "secondary", size: "xs", name: "times", onClick: props.onRemove, tooltip: "Remove" }), props.suffix);
+    labelElement = /* @__PURE__ */ React__default.default.createElement("label", { className: css.cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React__default.default.createElement(
+      ui.IconButton,
+      {
+        variant: "secondary",
+        size: "xs",
+        name: "times",
+        onClick: props.onRemove,
+        tooltip: i18n.t("utils.controls-label.tooltip-remove", "Remove")
+      }
+    ), props.suffix);
   } else {
     labelElement = /* @__PURE__ */ React__default.default.createElement("label", { className: css.cx(styles.horizontalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, errorIndicator, props.icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: props.icon, className: styles.normalIcon }), props.label, descriptionIndicator, loadingIndicator, props.suffix);
   }
@@ -3721,7 +3758,7 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       value: valueValue,
       filterOption: filterNoOp,
-      placeholder: "Select value",
+      placeholder: i18n.t("variables.ad-hoc-filter-renderer.value-select.placeholder-select-value", "Select value"),
       options: filteredValueOptions,
       inputValue: valueInputValue,
       onInputChange: onValueInputChange,
@@ -3768,7 +3805,7 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       allowCustomValue: (_c = model.state.allowCustomValue) != null ? _c : true,
       value: keyValue,
-      placeholder: "Select label",
+      placeholder: i18n.t("variables.ad-hoc-filter-renderer.key-select.placeholder-select-label", "Select label"),
       options: handleOptionGroups(keys),
       onChange: (v) => {
         model._updateFilter(filter, {
@@ -3825,15 +3862,23 @@ function AdHocFilterRenderer({ filter, model }) {
       const label = /* @__PURE__ */ React__default.default.createElement(ControlsLabel, { layout: "vertical", label: (_d = filter.key) != null ? _d : "", onRemove: () => model._removeFilter(filter) });
       return /* @__PURE__ */ React__default.default.createElement(ui.Field, { label, "data-testid": `AdHocFilter-${filter.key}`, className: styles.field }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, operatorSelect, valueSelect));
     } else {
-      return /* @__PURE__ */ React__default.default.createElement(ui.Field, { label: "Select label", "data-testid": `AdHocFilter-${filter.key}`, className: styles.field }, keySelect);
+      return /* @__PURE__ */ React__default.default.createElement(
+        ui.Field,
+        {
+          label: i18n.t("variables.ad-hoc-filter-renderer.label-select-label", "Select label"),
+          "data-testid": `AdHocFilter-${filter.key}`,
+          className: styles.field
+        },
+        keySelect
+      );
     }
   }
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper, "data-testid": `AdHocFilter-${filter.key}` }, keySelect, operatorSelect, valueSelect, /* @__PURE__ */ React__default.default.createElement(
     ui.Button,
     {
       variant: "secondary",
-      "aria-label": "Remove filter",
-      title: "Remove filter",
+      "aria-label": i18n.t("variables.ad-hoc-filter-renderer.aria-label-remove-filter", "Remove filter"),
+      title: i18n.t("variables.ad-hoc-filter-renderer.title-remove-filter", "Remove filter"),
       className: styles.removeButton,
       icon: "times",
       "data-testid": `AdHocFilter-remove-${(_e = filter.key) != null ? _e : ""}`,
@@ -3914,8 +3959,8 @@ function AdHocFilterBuilder({ model, addFilterButtonText }) {
       {
         variant: "secondary",
         icon: "plus",
-        title: "Add filter",
-        "aria-label": "Add filter",
+        title: i18n.t("variables.ad-hoc-filter-builder.title-add-filter", "Add filter"),
+        "aria-label": i18n.t("variables.ad-hoc-filter-builder.aria-label-add-filter", "Add filter"),
         "data-testid": `AdHocFilter-add`,
         onClick: () => model._addWip()
       },
@@ -4117,13 +4162,13 @@ const getStyles$e = (theme) => ({
   })
 });
 const LoadingOptionsPlaceholder = () => {
-  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: (e) => e.stopPropagation() }, "Loading options...");
+  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "variables.loading-options-placeholder.loading-options" }, "Loading options..."));
 };
 const NoOptionsPlaceholder = () => {
-  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: (e) => e.stopPropagation() }, "No options found");
+  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "variables.no-options-placeholder.no-options-found" }, "No options found"));
 };
 const OptionsErrorPlaceholder = ({ handleFetchOptions }) => {
-  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: handleFetchOptions }, "An error has occurred fetching labels. Click to retry");
+  return /* @__PURE__ */ React__default.default.createElement(DropdownItem, { onClick: handleFetchOptions }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "variables.options-error-placeholder.error-occurred-fetching-labels-click-retry" }, "An error has occurred fetching labels. Click to retry"));
 };
 const MultiValueApplyButton = ({
   onApply,
@@ -4142,7 +4187,7 @@ const MultiValueApplyButton = ({
         transform: `translate(${floatingElementRect == null ? void 0 : floatingElementRect.left}px,${floatingElementRect ? floatingElementRect.top + menuHeight : 0}px)`
       }
     },
-    /* @__PURE__ */ React__default.default.createElement(ui.Button, { onClick: onApply, size: "sm", tabIndex: -1 }, "Apply")
+    /* @__PURE__ */ React__default.default.createElement(ui.Button, { onClick: onApply, size: "sm", tabIndex: -1 }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "variables.multi-value-apply-button.apply" }, "Apply"))
   );
 };
 
@@ -4404,7 +4449,9 @@ const MultiValuePill = ({
         size: "sm",
         variant: "secondary",
         className: styles.removeButton,
-        tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
+        tooltip: i18n.t("components.adhoc-filters-combobox.remove-filter-value", "Remove filter value - {{itemLabel}}", {
+          itemLabel: (_b = item.label) != null ? _b : item.value
+        })
       },
       /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "times", size: "md", id: `${item.value}-${index}-close-icon` })
     )
@@ -4829,7 +4876,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         filter.origin && styles.keyPill,
         operatorIdentifier
       ),
-      "aria-label": "Edit filter operator",
+      "aria-label": i18n.t("variables.ad-hoc-combobox.aria-label-edit-filter-operator", "Edit filter operator"),
       tabIndex: filter.origin ? -1 : 0,
       onClick: (event) => {
         if (filter.origin) {
@@ -4936,6 +4983,7 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         }
         const nextItem = filteredDropDownItems[virtualItem.index + 1];
         const shouldAddBottomBorder = nextItem && !nextItem.group && !nextItem.options && item.group;
+        const itemLabel = (_a2 = item.label) != null ? _a2 : item.value;
         return (
           // key is included in getItemProps()
           // eslint-disable-next-line react/jsx-key
@@ -4998,7 +5046,11 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
               isMultiValueEdit,
               checked: filterMultiValues.some((val) => val.value === item.value)
             },
-            /* @__PURE__ */ React__default.default.createElement("span", null, item.isCustom ? "Use custom value: " : "", " ", (_a2 = item.label) != null ? _a2 : item.value),
+            /* @__PURE__ */ React__default.default.createElement("span", null, item.isCustom ? i18n.t(
+              "components.adhoc-filters-combobox.use-custom-value",
+              "Use custom value: {{itemLabel}}",
+              { itemLabel }
+            ) : itemLabel),
             item.description ? /* @__PURE__ */ React__default.default.createElement("div", { className: styles.descriptionText }, item.description) : null
           )
         );
@@ -5168,7 +5220,9 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           }
         },
         role: readOnly ? void 0 : "button",
-        "aria-label": `Edit filter with key ${keyLabel}`,
+        "aria-label": i18n.t("components.adhoc-filter-pill.edit-filter-with-key", "Edit filter with key {{keyLabel}}", {
+          keyLabel
+        }),
         tabIndex: 0,
         ref: pillWrapperRef
       },
@@ -5200,10 +5254,21 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           name: "times",
           size: "md",
           className: styles.pillIcon,
-          tooltip: `Remove filter with key ${keyLabel}`
+          tooltip: i18n.t("components.adhoc-filter-pill.remove-filter-with-key", "Remove filter with key {{keyLabel}}", {
+            keyLabel
+          })
         }
       ) : null,
-      filter.origin && filter.readOnly && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `${filter.origin} managed filter`, placement: "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "md", className: styles.readOnlyPillIcon })),
+      filter.origin && filter.readOnly && /* @__PURE__ */ React__default.default.createElement(
+        ui.Tooltip,
+        {
+          content: i18n.t("components.adhoc-filter-pill.managed-filter", "{{origin}} managed filter", {
+            origin: filter.origin
+          }),
+          placement: "bottom"
+        },
+        /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "md", className: styles.readOnlyPillIcon })
+      ),
       filter.origin && !filter.restorable && !filter.readOnly && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: getOriginFilterTooltips(filter.origin).info, placement: "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "md", className: styles.infoPillIcon })),
       filter.origin && filter.restorable && !filter.readOnly && /* @__PURE__ */ React__default.default.createElement(
         ui.IconButton,
@@ -5391,7 +5456,6 @@ const getStyles$a = (theme) => ({
 
 const reverseScopeFilterOperatorMap = Object.fromEntries(
   Object.entries(data.scopeFilterOperatorMap).map(([symbol, operator]) => [operator, symbol])
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 );
 function isEqualityOrMultiOperator(value) {
   const operators = /* @__PURE__ */ new Set(["equals", "not-equals", "one-of", "not-one-of"]);
@@ -7682,10 +7746,22 @@ function VizPanelSeriesLimit({ data, showAll, seriesLimit, onShowAllSeries }) {
     return null;
   }
   const buttonText = showAll ? "Restore limit" : `Show all ${seriesCount}`;
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.timeSeriesDisclaimer }, !showAll && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.warningMessage }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { title: `Showing only ${seriesLimit} series`, name: "exclamation-triangle", "aria-hidden": "true" })), /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.timeSeriesDisclaimer }, !showAll && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.warningMessage }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Icon,
+    {
+      title: i18n.t("components.viz-panel-series-limit.warning-message", `Showing only {{seriesLimit}} series`, {
+        seriesLimit
+      }),
+      name: "exclamation-triangle",
+      "aria-hidden": "true"
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(
     ui.Tooltip,
     {
-      content: "Rendering too many series in a single panel may impact performance and make data harder to read."
+      content: i18n.t(
+        "components.viz-panel-series-limit.content-rendering-series-single-panel-impact-performance",
+        "Rendering too many series in a single panel may impact performance and make data harder to read."
+      )
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", onClick: onShowAllSeries }, buttonText)
   ));
@@ -7751,10 +7827,10 @@ function VizPanelRenderer({ model }) {
   const titleInterpolated = model.interpolate(title, void 0, "text");
   const alertStateStyles = ui.useStyles2(getAlertStateStyles);
   if (!plugin) {
-    return /* @__PURE__ */ React__default.default.createElement("div", null, "Loading plugin panel...");
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.viz-panel-renderer.loading-plugin-panel" }, "Loading plugin panel..."));
   }
   if (!plugin.panel) {
-    return /* @__PURE__ */ React__default.default.createElement("div", null, "Panel plugin has no panel component");
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.viz-panel-renderer.panel-plugin-has-no-panel-component" }, "Panel plugin has no panel component"));
   }
   const PanelComponent = plugin.panel;
   if (dataObject && dataObject.setContainerWidth) {
@@ -8166,7 +8242,7 @@ class VizPanel extends SceneObjectBase {
     super({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
-      title: "Title",
+      title: i18n.t("components.viz-panel.title.title", "Title"),
       pluginId: "timeseries",
       _renderCounter: 0,
       ...state
@@ -9988,7 +10064,7 @@ class DataSourceVariable extends MultiValueVariable {
         options.push({ label: source.name, value: source.uid });
       }
       if (this.state.defaultOptionEnabled && isDefault(source, regex)) {
-        options.push({ label: "default", value: "default" });
+        options.push({ label: i18n.t("variables.data-source-variable.label.default", "default"), value: "default" });
       }
     }
     if (options.length === 0) {
@@ -10075,7 +10151,7 @@ class TestVariable extends MultiValueVariable {
       type: "custom",
       name: "Test",
       value: "Value",
-      text: "Text",
+      text: i18n.t("variables.test-variable.text.text", "Text"),
       query: "Query",
       options: [],
       refresh: data.VariableRefresh.onDashboardLoad,
@@ -10180,7 +10256,7 @@ function VariableValueInput({ model }) {
     ui.AutoSizeInput,
     {
       id: key,
-      placeholder: "Enter value",
+      placeholder: i18n.t("variables.variable-value-input.placeholder-enter-value", "Enter value"),
       minWidth: 15,
       maxWidth: 30,
       value,
@@ -10345,7 +10421,7 @@ IntervalVariable.Component = ({ model }) => {
     ui.Select,
     {
       id: key,
-      placeholder: "Select value",
+      placeholder: i18n.t("variables.interval-variable.placeholder-select-value", "Select value"),
       width: "auto",
       value,
       tabSelectsValue: false,
@@ -10719,7 +10795,7 @@ function VizPanelExploreButtonComponent({ model }) {
           (_a = options.onClick) == null ? void 0 : _a.call(options);
         }
       },
-      "Explore"
+      /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.viz-panel-explore-button.explore" }, "Explore")
     );
   }
   return null;
@@ -11318,7 +11394,7 @@ function SceneGridRowRenderer({ model }) {
     {
       onClick: model.onCollapseToggle,
       className: styles.rowTitleButton,
-      "aria-label": isCollapsed ? "Expand row" : "Collapse row",
+      "aria-label": isCollapsed ? i18n.t("components.scene-grid-row.expand-row", "Expand row") : i18n.t("components.scene-grid-row.collapse-row", "Collapse row"),
       "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
     },
     isCollapsible && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: isCollapsed ? "angle-right" : "angle-down" }),
@@ -11442,7 +11518,7 @@ function NestedSceneRenderer({ model }) {
           variant: "default",
           onClick: model.onRemove,
           key: "remove-button",
-          "aria-label": "Remove scene"
+          "aria-label": i18n.t("components.nested-scene-renderer.remove-button-label", "Remove scene")
         }
       )
     );
@@ -11452,7 +11528,7 @@ function NestedSceneRenderer({ model }) {
     {
       onClick: model.onToggle,
       className: gridRow.rowTitleButton,
-      "aria-label": isCollapsed ? "Expand scene" : "Collapse scene"
+      "aria-label": isCollapsed ? i18n.t("components.nested-scene-renderer.expand-button-label", "Expand scene") : i18n.t("components.nested-scene-renderer.collapse-button-label", "Collapse scene")
     },
     canCollapse && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: isCollapsed ? "angle-right" : "angle-down" }),
     /* @__PURE__ */ React__default.default.createElement("span", { className: gridRow.rowTitle, role: "heading" }, sceneGraph.interpolate(model, title, void 0, "text"))
@@ -11493,7 +11569,8 @@ class SceneCanvasText extends SceneObjectBase {
     this._variableDependency = new VariableDependencyConfig(this, { statePaths: ["text"] });
   }
 }
-SceneCanvasText.Component = ({ model }) => {
+SceneCanvasText.Component = SceneCanvasTextRenderer;
+function SceneCanvasTextRenderer({ model }) {
   const { text, fontSize = 20, align = "left", key, spacing } = model.useState();
   const theme = ui.useTheme2();
   const style = css.css({
@@ -11505,7 +11582,7 @@ SceneCanvasText.Component = ({ model }) => {
     justifyContent: align
   });
   return /* @__PURE__ */ React__default.default.createElement("div", { className: style, "data-testid": key }, sceneGraph.interpolate(model, text));
-};
+}
 
 class SceneToolbarButton extends SceneObjectBase {
 }
@@ -12024,7 +12101,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
     ui.ToolbarButton,
     {
       variant: "canvas",
-      tooltip: "Enable time frame comparison",
+      tooltip: i18n.t("components.scene-time-range-compare-renderer.button-tooltip", "Enable time frame comparison"),
       onClick: (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -12032,7 +12109,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
       }
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Checkbox, { label: " ", value: enabled, onClick }),
-    "Comparison"
+    /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.scene-time-range-compare-renderer.button-label" }, "Comparison")
   ), enabled ? /* @__PURE__ */ React__default.default.createElement(
     ui.ButtonSelect,
     {
@@ -12618,7 +12695,7 @@ function Splitter({
         "aria-valuemax": 100,
         "aria-valuenow": 50,
         "aria-controls": `start-panel-${id}`,
-        "aria-label": "Pane resize widget",
+        "aria-label": i18n.t("components.splitter.aria-label-pane-resize-widget", "Pane resize widget"),
         tabIndex: 0
       }
     ), /* @__PURE__ */ React__default.default.createElement(
@@ -12928,7 +13005,15 @@ function SceneDebugger({ scene }) {
   const styles = ui.useStyles2(getStyles);
   const [isOpen, setIsOpen] = React.useState(false);
   const [selectedObject, setSelectedObject] = React.useState();
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(ui.ToolbarButton, { variant: "canvas", icon: "bug", onClick: () => setIsOpen(true) }), isOpen && /* @__PURE__ */ React__default.default.createElement(ui.Drawer, { title: "Scene debugger", onClose: () => setIsOpen(false), size: "lg" }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.panes }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.pane1 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.paneHeading }, "Scene graph"), /* @__PURE__ */ React__default.default.createElement(ui.CustomScrollbar, { autoHeightMin: "100%" }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.treeWrapper }, /* @__PURE__ */ React__default.default.createElement(DebugTreeNode, { node: scene, selectedObject, onSelect: setSelectedObject })))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.pane2 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.paneHeading }, "Object details"), selectedObject && /* @__PURE__ */ React__default.default.createElement(DebugDetails, { node: selectedObject })))));
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(ui.ToolbarButton, { variant: "canvas", icon: "bug", onClick: () => setIsOpen(true) }), isOpen && /* @__PURE__ */ React__default.default.createElement(
+    ui.Drawer,
+    {
+      title: i18n.t("components.scene-debugger.title-scene-debugger", "Scene debugger"),
+      onClose: () => setIsOpen(false),
+      size: "lg"
+    },
+    /* @__PURE__ */ React__default.default.createElement("div", { className: styles.panes }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.pane1 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.paneHeading }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.scene-debugger.scene-graph" }, "Scene graph")), /* @__PURE__ */ React__default.default.createElement(ui.CustomScrollbar, { autoHeightMin: "100%" }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.treeWrapper }, /* @__PURE__ */ React__default.default.createElement(DebugTreeNode, { node: scene, selectedObject, onSelect: setSelectedObject })))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.pane2 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.paneHeading }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.scene-debugger.object-details" }, "Object details")), selectedObject && /* @__PURE__ */ React__default.default.createElement(DebugDetails, { node: selectedObject })))
+  ));
 }
 function getStyles(theme) {
   return {
@@ -13164,8 +13249,8 @@ function getFallbackRoute(page) {
 function getDefaultFallbackPage() {
   return new SceneAppPage({
     url: "",
-    title: "Not found",
-    subTitle: "The url did not match any page",
+    title: i18n.t("components.fallback-page.title", "Not found"),
+    subTitle: i18n.t("components.fallback-page.subTitle", "The url did not match any page"),
     routePath: "*",
     getScene: () => {
       return new EmbeddedScene({
@@ -13175,7 +13260,7 @@ function getDefaultFallbackPage() {
             new SceneFlexItem({
               body: new SceneReactObject({
                 component: () => {
-                  return /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "default-fallback-content" }, "If you found your way here using a link then there might be a bug in this application.");
+                  return /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "default-fallback-content" }, /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "components.fallback-page.content" }, "If you found your way here using a link then there might be a bug in this application."));
                 }
               })
             })
@@ -14095,6 +14180,18 @@ const VizConfigBuilders = {
   }
 };
 
+const loadTranslationResources = async (locale) => {
+  switch (locale) {
+    case "en-US":
+    // Don't load the en-US bundle, it's the default in the source
+    default:
+      return Promise.resolve({});
+  }
+};
+const initTranslations = () => {
+  return i18n.initPluginTranslations("grafana-scenes", [loadTranslationResources]);
+};
+
 const sceneUtils = {
   getUrlWithAppState,
   registerRuntimePanelPlugin,
@@ -14199,6 +14296,7 @@ exports.behaviors = index$1;
 exports.dataLayers = index;
 exports.formatRegistry = formatRegistry;
 exports.getExploreURL = getExploreURL;
+exports.initTranslations = initTranslations;
 exports.isCustomVariableValue = isCustomVariableValue;
 exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;