From f8bde4df09ea8449693f0ed63bab9d4ef5179d63 Mon Sep 17 00:00:00 2001
From: Michael Mandrus <41969079+mmandrus@users.noreply.github.com>
Date: Fri, 23 Sep 2022 14:32:34 -0400
Subject: [PATCH] Public Dashboards: Add Grafana logo to public dashboards
 (#55641)

* add floating footer logo to pubdash pages

* make it a link

* fix typo

* use rem instead of pixels

* Update public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* PR feedback

* add todo

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 .../PubdashFooter/PubdashFooter.tsx           | 39 +++++++++++++++++++
 .../dashboard/containers/DashboardPage.tsx    |  5 +++
 2 files changed, 44 insertions(+)
 create mode 100644 public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx

diff --git a/public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx b/public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx
new file mode 100644
index 00000000000..e281c11f827
--- /dev/null
+++ b/public/app/features/dashboard/components/PubdashFooter/PubdashFooter.tsx
@@ -0,0 +1,39 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2, colorManipulator } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+export const PubdashFooter = function () {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.footer}>
+      <span className={styles.logoText}>
+        <a href="https://grafana.com/" target="_blank" rel="noreferrer noopener">
+          powered by Grafana <img className={styles.logoImg} src="public/img/grafana_icon.svg"></img>
+        </a>
+      </span>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  footer: css`
+    position: absolute;
+    height: 30px;
+    bottom: 0;
+    width: 100%;
+    background-color: ${colorManipulator.alpha(theme.colors.background.canvas, 0.7)};
+    text-align: right;
+    font-size: ${theme.typography.body.fontSize};
+    z-index: ${theme.zIndex.navbarFixed};
+  `,
+  logoText: css`
+    margin-right: ${theme.spacing(1)};
+  `,
+  logoImg: css`
+    height: 100%;
+    padding: ${theme.spacing(0.25, 0, 0.5, 0)};
+  `,
+});
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 5d39368ca06..0935e07d25e 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -28,6 +28,7 @@ import { DashboardPrompt } from '../components/DashboardPrompt/DashboardPrompt';
 import { DashboardSettings } from '../components/DashboardSettings';
 import { PanelInspector } from '../components/Inspector/PanelInspector';
 import { PanelEditor } from '../components/PanelEditor/PanelEditor';
+import { PubdashFooter } from '../components/PubdashFooter/PubdashFooter';
 import { SubMenu } from '../components/SubMenu/SubMenu';
 import { DashboardGrid } from '../dashgrid/DashboardGrid';
 import { liveTimer } from '../dashgrid/liveTimer';
@@ -401,6 +402,10 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
             sectionNav={sectionNav}
           />
         )}
+        {
+          // TODO: assess if there are other places where we may want a footer, which may reveal a better place to add this
+          isPublic && <PubdashFooter />
+        }
       </>
     );
   }