ReturnToPrevious: create DismissableButton and ReturnToPrevious components (#80878)

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 (
+    <ButtonGroup className={styles.buttonGroup}>
+      <Button
+        icon="angle-left"
+        size="sm"
+        variant="primary"
+        fill="outline"
+        onClick={onClick}
+        title={label}
+        className={styles.mainDismissableButton}
+      >
+        {label}
+      </Button>
+      <Button
+        icon="times"
+        aria-label={t('return-to-previous.dismissable-button', 'Close')}
+        variant="primary"
+        fill="outline"
+        size="sm"
+        onClick={onDismiss}
+      />
+    </ButtonGroup>
+  );
+};
+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';

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 (
+    <div className={styles.returnToPrevious}>
+      <DismissableButton
+        label={t('return-to-previous.button.label', 'Back to {{title}}', { title })}
+        onClick={handleOnClick}
+        onDismiss={handleOnDismiss}
+      />
+    </div>
+  );
+};
+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';

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",

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",

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",

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",

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ęľş",

public/locales/zh-Hans/grafana.json

@@ -1218,6 +1218,12 @@
       "turned-off": "自动刷新关闭"
     }
   },
+  "return-to-previous": {
+    "button": {
+      "label": ""
+    },
+    "dismissable-button": ""
+  },
   "search": {
     "actions": {
       "include-panels": "包括面板",