Footer: Add release notes url to version label (#52909)

* Add release note url to footer's version label

* Filter out pre-release versions in release notes link at the footer

* correct links for beta/prerelease release notes

* make all links target blank

* Fix TeamPages test

Co-authored-by: joshhunt <josh@trtr.co>

public/app/core/components/Footer/Footer.tsx

@@ -8,7 +8,6 @@ export interface FooterLink {
   id?: string;
   icon?: IconName;
   url?: string;
-  target?: string;
 }
 
 export let getFooterLinks = (): FooterLink[] => {
@@ -17,23 +16,30 @@ export let getFooterLinks = (): FooterLink[] => {
       text: 'Documentation',
       icon: 'document-info',
       url: 'https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer',
-      target: '_blank',
     },
     {
       text: 'Support',
       icon: 'question-circle',
       url: 'https://grafana.com/products/enterprise/?utm_source=grafana_footer',
-      target: '_blank',
     },
     {
       text: 'Community',
       icon: 'comments-alt',
       url: 'https://community.grafana.com/?utm_source=grafana_footer',
-      target: '_blank',
     },
   ];
 };
 
+export function getVersionMeta(version: string) {
+  const containsHyphen = version.includes('-');
+  const isBeta = version.includes('-beta');
+
+  return {
+    hasReleaseNotes: !containsHyphen || isBeta,
+    isBeta,
+  };
+}
+
 export let getVersionLinks = (): FooterLink[] => {
   const { buildInfo, licenseInfo } = config;
   const links: FooterLink[] = [];
@@ -45,7 +51,16 @@ export let getVersionLinks = (): FooterLink[] => {
     return links;
   }
 
-  links.push({ text: `v${buildInfo.version} (${buildInfo.commit})` });
+  const { hasReleaseNotes, isBeta } = getVersionMeta(buildInfo.version);
+  const versionSlug = buildInfo.version.replace(/\./g, '-'); // replace all periods with hyphens
+  const docsVersion = isBeta ? 'next' : 'latest';
+
+  links.push({
+    text: `v${buildInfo.version} (${buildInfo.commit})`,
+    url: hasReleaseNotes
+      ? `https://grafana.com/docs/grafana/${docsVersion}/release-notes/release-notes-${versionSlug}/`
+      : undefined,
+  });
 
   if (buildInfo.hasUpdate) {
     links.push({
@@ -53,7 +68,6 @@ export let getVersionLinks = (): FooterLink[] => {
       text: `New version available!`,
       icon: 'download-alt',
       url: 'https://grafana.com/grafana/download?utm_source=grafana_footer',
-      target: '_blank',
     });
   }
 
@@ -77,9 +91,7 @@ export const Footer: FC = React.memo(() => {
         <ul>
           {links.map((link) => (
             <li key={link.text}>
-              <a href={link.url} target={link.target} rel="noopener" id={link.id}>
-                {link.icon && <Icon name={link.icon} />} {link.text}
-              </a>
+              <FooterItem item={link} />
             </li>
           ))}
         </ul>
@@ -89,3 +101,19 @@ export const Footer: FC = React.memo(() => {
 });
 
 Footer.displayName = 'Footer';
+
+function FooterItem({ item }: { item: FooterLink }) {
+  const content = item.url ? (
+    <a href={item.url} target="_blank" rel="noopener noreferrer" id={item.id}>
+      {item.text}
+    </a>
+  ) : (
+    item.text
+  );
+
+  return (
+    <>
+      {item.icon && <Icon name={item.icon} />} {content}
+    </>
+  );
+}

public/app/features/teams/TeamPages.test.tsx

@@ -40,6 +40,12 @@ jest.mock('@grafana/runtime', () => ({
     bootData: { navTree: [], user: {} },
     buildInfo: {
       edition: 'Open Source',
+      version: '7.5.0',
+      commit: 'abc123',
+      env: 'production',
+      latestVersion: '',
+      hasUpdate: false,
+      hideVersion: false,
     },
     appSubUrl: '',
   },
@@ -93,7 +99,7 @@ const setup = (propOverrides?: object) => {
   );
 };
 
-describe('Render', () => {
+describe('TeamPages', () => {
   it('should render member page if team not empty', async () => {
     setup({
       team: getMockTeam(),
@@ -123,26 +129,26 @@ describe('Render', () => {
 
     expect(await screen.findByText('Team group sync')).toBeInTheDocument();
   });
-});
 
-describe('when feature toggle editorsCanAdmin is turned on', () => {
-  it('should render settings page if user is team admin', async () => {
-    setup({
-      team: getMockTeam(),
-      pageName: 'settings',
-      preferences: {
-        homeDashboardUID: 'home-dashboard',
-        theme: 'Default',
-        timezone: 'Default',
-      },
-      editorsCanAdmin: true,
-      signedInUser: {
-        id: 1,
-        isGrafanaAdmin: false,
-        orgRole: OrgRole.Admin,
-      } as User,
+  describe('when feature toggle editorsCanAdmin is turned on', () => {
+    it('should render settings page if user is team admin', async () => {
+      setup({
+        team: getMockTeam(),
+        pageName: 'settings',
+        preferences: {
+          homeDashboardUID: 'home-dashboard',
+          theme: 'Default',
+          timezone: 'Default',
+        },
+        editorsCanAdmin: true,
+        signedInUser: {
+          id: 1,
+          isGrafanaAdmin: false,
+          orgRole: OrgRole.Admin,
+        } as User,
+      });
+
+      expect(await screen.findByText('Team settings')).toBeInTheDocument();
     });
-
-    expect(await screen.findByText('Team settings')).toBeInTheDocument();
   });
 });

public/sass/components/_footer.scss

@@ -14,6 +14,7 @@
 
     &:hover {
       color: $footer-link-hover;
+      text-decoration: underline;
     }
 
     i {