diff --git a/public/app/core/components/AppChrome/ReturnToPrevious/DismissableButton.tsx b/public/app/core/components/AppChrome/ReturnToPrevious/DismissableButton.tsx
new file mode 100644
index 00000000000..765dfed5306
--- /dev/null
+++ b/public/app/core/components/AppChrome/ReturnToPrevious/DismissableButton.tsx
@@ -0,0 +1,58 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ButtonGroup, useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+
+export interface DismissableButtonProps {
+ label: string;
+ onClick: () => void;
+ onDismiss: () => void;
+}
+
+export const DismissableButton = ({ label, onClick, onDismiss }: DismissableButtonProps) => {
+ const styles = useStyles2(getStyles);
+
+ return (
+
+
+
+
+ );
+};
+const getStyles = (theme: GrafanaTheme2) => ({
+ mainDismissableButton: css({
+ width: '100%',
+ ['> span']: {
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ maxWidth: '270px',
+ display: 'inline-block',
+ },
+ }),
+ buttonGroup: css({
+ width: 'fit-content',
+ backgroundColor: theme.colors.background.secondary,
+ }),
+});
+
+DismissableButton.displayName = 'DismissableButton';
diff --git a/public/app/core/components/AppChrome/ReturnToPrevious/ReturnToPrevious.tsx b/public/app/core/components/AppChrome/ReturnToPrevious/ReturnToPrevious.tsx
new file mode 100644
index 00000000000..e7c99dee15c
--- /dev/null
+++ b/public/app/core/components/AppChrome/ReturnToPrevious/ReturnToPrevious.tsx
@@ -0,0 +1,47 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
+
+import { DismissableButton } from './DismissableButton';
+
+export interface ReturnToPreviousProps {
+ href: string;
+ title: string;
+}
+
+export const ReturnToPrevious = ({ href, title }: ReturnToPreviousProps) => {
+ const styles = useStyles2(getStyles);
+ const handleOnClick = () => {
+ console.log('Going to...', href);
+ };
+ const handleOnDismiss = () => {
+ console.log('Closing button');
+ };
+
+ return (
+
+
+
+ );
+};
+const getStyles = (theme: GrafanaTheme2) => ({
+ returnToPrevious: css({
+ label: 'return-to-previous',
+ display: 'flex',
+ justifyContent: 'center',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ zIndex: theme.zIndex.portal,
+ position: 'fixed',
+ bottom: theme.spacing.x4,
+ }),
+});
+
+ReturnToPrevious.displayName = 'ReturnToPrevious';
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index 05bb27eb5df..ee6072bc685 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -1224,6 +1224,12 @@
"turned-off": "Automatische Aktualisierung aus"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": ""
+ },
+ "dismissable-button": ""
+ },
"search": {
"actions": {
"include-panels": "Panels einschließen",
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 818ba96104b..186ed014bf0 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1224,6 +1224,12 @@
"turned-off": "Auto refresh off"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": "Back to {{title}}"
+ },
+ "dismissable-button": "Close"
+ },
"search": {
"actions": {
"include-panels": "Include panels",
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index 6ed41d098e0..0b86527be65 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -1230,6 +1230,12 @@
"turned-off": "Actualización automática desactivada"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": ""
+ },
+ "dismissable-button": ""
+ },
"search": {
"actions": {
"include-panels": "Incluir paneles",
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index 2986a549801..25c2d6664ed 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -1230,6 +1230,12 @@
"turned-off": "Actualisation automatique désactivée"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": ""
+ },
+ "dismissable-button": ""
+ },
"search": {
"actions": {
"include-panels": "Inclure des panneaux",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 189e2ebdb08..c6d9a975761 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1224,6 +1224,12 @@
"turned-off": "Åūŧő řęƒřęşĥ őƒƒ"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": "ßäčĸ ŧő {{title}}"
+ },
+ "dismissable-button": "Cľőşę"
+ },
"search": {
"actions": {
"include-panels": "Ĩʼnčľūđę päʼnęľş",
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index 9c58fe35444..31b192c5368 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -1218,6 +1218,12 @@
"turned-off": "自动刷新关闭"
}
},
+ "return-to-previous": {
+ "button": {
+ "label": ""
+ },
+ "dismissable-button": ""
+ },
"search": {
"actions": {
"include-panels": "包括面板",