@grafana/scenes 6.21.0--canary.1146.15674574987.0 → 6.21.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,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Raw,
       name: "raw",
-      description: "Keep value as is",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.keep-value-as-is",
+        "Keep value as is"
+      ),
       formatter: (value) => String(value)
     },
     {
@@ -1350,7 +1354,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Pipe,
       name: "Pipe",
-      description: "Values are separated by | character",
+      description: i18n.t(
+        "grafana-scenes.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 +1371,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Distributed,
       name: "Distributed",
-      description: "Multiple values are formatted like variable=value",
+      description: i18n.t(
+        "grafana-scenes.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 +1395,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.CSV,
       name: "Csv",
-      description: "Comma-separated values",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.commaseparated-values",
+        "Comma-separated values"
+      ),
       formatter: (value) => {
         if (typeof value === "string") {
           return value;
@@ -1399,7 +1412,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.HTML,
       name: "HTML",
-      description: "HTML escaping of values",
+      description: i18n.t(
+        "grafana-scenes.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 +1429,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.JSON,
       name: "JSON",
-      description: "JSON stringify value",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.json-stringify-value",
+        "JSON stringify value"
+      ),
       formatter: (value) => {
         if (typeof value === "string") {
           return value;
@@ -1424,7 +1443,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.PercentEncode,
       name: "Percent encode",
-      description: "Useful for URL escaping values",
+      description: i18n.t(
+        "grafana-scenes.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 +1457,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.SingleQuote,
       name: "Single quote",
-      description: "Single quoted values",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.single-quoted-values",
+        "Single quoted values"
+      ),
       formatter: (value) => {
         const regExp = new RegExp(`'`, "g");
         if (lodash.isArray(value)) {
@@ -1448,7 +1473,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.DoubleQuote,
       name: "Double quote",
-      description: "Double quoted values",
+      description: i18n.t(
+        "grafana-scenes.variables.format-registry.formats.description.double-quoted-values",
+        "Double quoted values"
+      ),
       formatter: (value) => {
         const regExp = new RegExp('"', "g");
         if (lodash.isArray(value)) {
@@ -1467,7 +1495,10 @@ const formatRegistry = new data.Registry(() => {
     {
       id: schema.VariableFormatID.Date,
       name: "Date",
-      description: "Format date in different ways",
+      description: i18n.t(
+        "grafana-scenes.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 +1529,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(
+        "grafana-scenes.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 +1569,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(
+        "grafana-scenes.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 +2842,7 @@ function VariableValueSelect({ model, state }) {
     {
       id: key,
       isValidNewOption: (inputValue2) => inputValue2.trim().length > 0,
-      placeholder: "Select value",
+      placeholder: i18n.t("grafana-scenes.variables.variable-value-select.placeholder-select-value", "Select value"),
       width: "auto",
       disabled: isReadOnly,
       value: selectValue,
@@ -3112,7 +3149,7 @@ function DefaultGroupByCustomIndicatorContainer(props) {
       /* @__PURE__ */ React__default.default.createElement(
         ui.IconButton,
         {
-          "aria-label": "clear",
+          "aria-label": i18n.t("grafana-scenes.variables.default-group-by-custom-indicator-container.aria-label-clear", "clear"),
           key: "clear",
           name: "times",
           size: "md",
@@ -3144,7 +3181,10 @@ function DefaultGroupByCustomIndicatorContainer(props) {
           name: "history",
           size: "md",
           className: styles.clearIcon,
-          tooltip: "Restore groupby set by this dashboard."
+          tooltip: i18n.t(
+            "grafana-scenes.variables.default-group-by-custom-indicator-container.tooltip-restore-groupby-set-by-this-dashboard",
+            "Restore groupby set by this dashboard."
+          )
         }
       )
     );
@@ -3155,7 +3195,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(
+            "grafana-scenes.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 +3452,16 @@ function GroupByVariableRenderer({ model }) {
   return isMulti ? /* @__PURE__ */ React__default.default.createElement(
     ui.MultiSelect,
     {
-      "aria-label": "Group by selector",
+      "aria-label": i18n.t(
+        "grafana-scenes.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(
+        "grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label",
+        "Group by label"
+      ),
       width: "auto",
       allowCustomValue,
       inputValue,
@@ -3465,10 +3514,16 @@ function GroupByVariableRenderer({ model }) {
   ) : /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
-      "aria-label": "Group by selector",
+      "aria-label": i18n.t(
+        "grafana-scenes.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(
+        "grafana-scenes.variables.group-by-variable-renderer.placeholder-group-by-label",
+        "Group by label"
+      ),
       width: "auto",
       inputValue,
       value: uncommittedValue && uncommittedValue.length > 0 ? uncommittedValue : null,
@@ -3525,7 +3580,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("grafana-scenes.utils.loading-indicator.content-cancel-query", "Cancel query") }, /* @__PURE__ */ React__default.default.createElement(
     ui.Icon,
     {
       className: "spin-clockwise",
@@ -3572,7 +3627,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("grafana-scenes.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 +3785,10 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       value: valueValue,
       filterOption: filterNoOp,
-      placeholder: "Select value",
+      placeholder: i18n.t(
+        "grafana-scenes.variables.ad-hoc-filter-renderer.value-select.placeholder-select-value",
+        "Select value"
+      ),
       options: filteredValueOptions,
       inputValue: valueInputValue,
       onInputChange: onValueInputChange,
@@ -3768,7 +3835,10 @@ function AdHocFilterRenderer({ filter, model }) {
       width: "auto",
       allowCustomValue: (_c = model.state.allowCustomValue) != null ? _c : true,
       value: keyValue,
-      placeholder: "Select label",
+      placeholder: i18n.t(
+        "grafana-scenes.variables.ad-hoc-filter-renderer.key-select.placeholder-select-label",
+        "Select label"
+      ),
       options: handleOptionGroups(keys),
       onChange: (v) => {
         model._updateFilter(filter, {
@@ -3825,15 +3895,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("grafana-scenes.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("grafana-scenes.variables.ad-hoc-filter-renderer.aria-label-remove-filter", "Remove filter"),
+      title: i18n.t("grafana-scenes.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 +3992,8 @@ function AdHocFilterBuilder({ model, addFilterButtonText }) {
       {
         variant: "secondary",
         icon: "plus",
-        title: "Add filter",
-        "aria-label": "Add filter",
+        title: i18n.t("grafana-scenes.variables.ad-hoc-filter-builder.title-add-filter", "Add filter"),
+        "aria-label": i18n.t("grafana-scenes.variables.ad-hoc-filter-builder.aria-label-add-filter", "Add filter"),
         "data-testid": `AdHocFilter-add`,
         onClick: () => model._addWip()
       },
@@ -4117,13 +4195,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: "grafana-scenes.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: "grafana-scenes.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: "grafana-scenes.variables.options-error-placeholder.error-occurred-fetching-labels-click-retry" }, "An error has occurred fetching labels. Click to retry"));
 };
 const MultiValueApplyButton = ({
   onApply,
@@ -4142,7 +4220,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: "grafana-scenes.variables.multi-value-apply-button.apply" }, "Apply"))
   );
 };
 
@@ -4404,7 +4482,13 @@ const MultiValuePill = ({
         size: "sm",
         variant: "secondary",
         className: styles.removeButton,
-        tooltip: `Remove filter value - ${(_b = item.label) != null ? _b : item.value}`
+        tooltip: i18n.t(
+          "grafana-scenes.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 +4913,10 @@ const AdHocCombobox = React.forwardRef(function AdHocCombobox2({ filter, model,
         filter.origin && styles.keyPill,
         operatorIdentifier
       ),
-      "aria-label": "Edit filter operator",
+      "aria-label": i18n.t(
+        "grafana-scenes.variables.ad-hoc-combobox.aria-label-edit-filter-operator",
+        "Edit filter operator"
+      ),
       tabIndex: filter.origin ? -1 : 0,
       onClick: (event) => {
         if (filter.origin) {
@@ -4936,6 +5023,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 +5086,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(
+              "grafana-scenes.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 +5260,13 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           }
         },
         role: readOnly ? void 0 : "button",
-        "aria-label": `Edit filter with key ${keyLabel}`,
+        "aria-label": i18n.t(
+          "grafana-scenes.components.adhoc-filter-pill.edit-filter-with-key",
+          "Edit filter with key {{keyLabel}}",
+          {
+            keyLabel
+          }
+        ),
         tabIndex: 0,
         ref: pillWrapperRef
       },
@@ -5200,10 +5298,25 @@ function AdHocFilterPill({ filter, model, readOnly, focusOnWipInputRef }) {
           name: "times",
           size: "md",
           className: styles.pillIcon,
-          tooltip: `Remove filter with key ${keyLabel}`
+          tooltip: i18n.t(
+            "grafana-scenes.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("grafana-scenes.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 +5504,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"]);
@@ -5408,6 +5520,9 @@ function getAdHocFiltersFromScopes(scopes) {
 }
 function processFilter(formattedFilters, duplicatedFilters, filter) {
   var _a, _b;
+  if (!filter) {
+    return;
+  }
   const existingFilter = formattedFilters.get(filter.key);
   if (existingFilter && canValueBeMerged(existingFilter.operator, filter.operator)) {
     mergeFilterValues(existingFilter, filter);
@@ -7679,10 +7794,26 @@ 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(
+        "grafana-scenes.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(
+        "grafana-scenes.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)
   ));
@@ -7748,10 +7879,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: "grafana-scenes.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: "grafana-scenes.components.viz-panel-renderer.panel-plugin-has-no-panel-component" }, "Panel plugin has no panel component"));
   }
   const PanelComponent = plugin.panel;
   if (dataObject && dataObject.setContainerWidth) {
@@ -8163,7 +8294,7 @@ class VizPanel extends SceneObjectBase {
     super({
       options: {},
       fieldConfig: { defaults: {}, overrides: [] },
-      title: "Title",
+      title: i18n.t("grafana-scenes.components.viz-panel.title.title", "Title"),
       pluginId: "timeseries",
       _renderCounter: 0,
       ...state
@@ -9985,7 +10116,10 @@ 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("grafana-scenes.variables.data-source-variable.label.default", "default"),
+          value: "default"
+        });
       }
     }
     if (options.length === 0) {
@@ -10072,7 +10206,7 @@ class TestVariable extends MultiValueVariable {
       type: "custom",
       name: "Test",
       value: "Value",
-      text: "Text",
+      text: i18n.t("grafana-scenes.variables.test-variable.text.text", "Text"),
       query: "Query",
       options: [],
       refresh: data.VariableRefresh.onDashboardLoad,
@@ -10177,7 +10311,7 @@ function VariableValueInput({ model }) {
     ui.AutoSizeInput,
     {
       id: key,
-      placeholder: "Enter value",
+      placeholder: i18n.t("grafana-scenes.variables.variable-value-input.placeholder-enter-value", "Enter value"),
       minWidth: 15,
       maxWidth: 30,
       value,
@@ -10342,7 +10476,7 @@ IntervalVariable.Component = ({ model }) => {
     ui.Select,
     {
       id: key,
-      placeholder: "Select value",
+      placeholder: i18n.t("grafana-scenes.variables.interval-variable.placeholder-select-value", "Select value"),
       width: "auto",
       value,
       tabSelectsValue: false,
@@ -10716,7 +10850,7 @@ function VizPanelExploreButtonComponent({ model }) {
           (_a = options.onClick) == null ? void 0 : _a.call(options);
         }
       },
-      "Explore"
+      /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.viz-panel-explore-button.explore" }, "Explore")
     );
   }
   return null;
@@ -11315,7 +11449,7 @@ function SceneGridRowRenderer({ model }) {
     {
       onClick: model.onCollapseToggle,
       className: styles.rowTitleButton,
-      "aria-label": isCollapsed ? "Expand row" : "Collapse row",
+      "aria-label": isCollapsed ? i18n.t("grafana-scenes.components.scene-grid-row.expand-row", "Expand row") : i18n.t("grafana-scenes.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" }),
@@ -11439,7 +11573,7 @@ function NestedSceneRenderer({ model }) {
           variant: "default",
           onClick: model.onRemove,
           key: "remove-button",
-          "aria-label": "Remove scene"
+          "aria-label": i18n.t("grafana-scenes.components.nested-scene-renderer.remove-button-label", "Remove scene")
         }
       )
     );
@@ -11449,7 +11583,7 @@ function NestedSceneRenderer({ model }) {
     {
       onClick: model.onToggle,
       className: gridRow.rowTitleButton,
-      "aria-label": isCollapsed ? "Expand scene" : "Collapse scene"
+      "aria-label": isCollapsed ? i18n.t("grafana-scenes.components.nested-scene-renderer.expand-button-label", "Expand scene") : i18n.t("grafana-scenes.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"))
@@ -11490,7 +11624,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({
@@ -11502,7 +11637,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 {
 }
@@ -12021,7 +12156,10 @@ function SceneTimeRangeCompareRenderer({ model }) {
     ui.ToolbarButton,
     {
       variant: "canvas",
-      tooltip: "Enable time frame comparison",
+      tooltip: i18n.t(
+        "grafana-scenes.components.scene-time-range-compare-renderer.button-tooltip",
+        "Enable time frame comparison"
+      ),
       onClick: (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -12029,7 +12167,7 @@ function SceneTimeRangeCompareRenderer({ model }) {
       }
     },
     /* @__PURE__ */ React__default.default.createElement(ui.Checkbox, { label: " ", value: enabled, onClick }),
-    "Comparison"
+    /* @__PURE__ */ React__default.default.createElement(i18n.Trans, { i18nKey: "grafana-scenes.components.scene-time-range-compare-renderer.button-label" }, "Comparison")
   ), enabled ? /* @__PURE__ */ React__default.default.createElement(
     ui.ButtonSelect,
     {
@@ -12615,7 +12753,7 @@ function Splitter({
         "aria-valuemax": 100,
         "aria-valuenow": 50,
         "aria-controls": `start-panel-${id}`,
-        "aria-label": "Pane resize widget",
+        "aria-label": i18n.t("grafana-scenes.components.splitter.aria-label-pane-resize-widget", "Pane resize widget"),
         tabIndex: 0
       }
     ), /* @__PURE__ */ React__default.default.createElement(
@@ -12925,7 +13063,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("grafana-scenes.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: "grafana-scenes.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: "grafana-scenes.components.scene-debugger.object-details" }, "Object details")), selectedObject && /* @__PURE__ */ React__default.default.createElement(DebugDetails, { node: selectedObject })))
+  ));
 }
 function getStyles(theme) {
   return {
@@ -13161,8 +13307,8 @@ function getFallbackRoute(page) {
 function getDefaultFallbackPage() {
   return new SceneAppPage({
     url: "",
-    title: "Not found",
-    subTitle: "The url did not match any page",
+    title: i18n.t("grafana-scenes.components.fallback-page.title", "Not found"),
+    subTitle: i18n.t("grafana-scenes.components.fallback-page.subTitle", "The url did not match any page"),
     routePath: "*",
     getScene: () => {
       return new EmbeddedScene({
@@ -13172,7 +13318,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: "grafana-scenes.components.fallback-page.content" }, "If you found your way here using a link then there might be a bug in this application."));
                 }
               })
             })
@@ -14092,6 +14238,25 @@ const VizConfigBuilders = {
   }
 };
 
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../locales/en-US/grafana-scenes.json': return Promise.resolve().then(function () { return require('./grafana-scenes-DCHONTnD.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+const resources = i18n.LANGUAGES.reduce((acc, lang) => {
+  acc[lang.code] = async () => await __variableDynamicImportRuntime0__(`../locales/${lang.code}/grafana-scenes.json`);
+  return acc;
+}, {});
+const loadResources = async (resolvedLanguage) => {
+  const translation = await resources[resolvedLanguage]();
+  return translation.default;
+};
+
 const sceneUtils = {
   getUrlWithAppState,
   registerRuntimePanelPlugin,
@@ -14201,6 +14366,7 @@ exports.isDataLayer = isDataLayer;
 exports.isDataRequestEnricher = isDataRequestEnricher;
 exports.isFiltersRequestEnricher = isFiltersRequestEnricher;
 exports.isSceneObject = isSceneObject;
+exports.loadResources = loadResources;
 exports.registerQueryWithController = registerQueryWithController;
 exports.registerRuntimeDataSource = registerRuntimeDataSource;
 exports.sceneGraph = sceneGraph;