Update create/edit playlist pages to work with topnav (#55104)

public/app/features/playlist/PlaylistEditPage.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 
+import { NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 
 import { PlaylistForm } from './PlaylistForm';
 import { getPlaylist, updatePlaylist } from './api';
-import { getPlaylistStyles } from './styles';
 import { Playlist } from './types';
 
 export interface RouteParams {
@@ -18,7 +17,6 @@ export interface RouteParams {
 interface Props extends GrafanaRouteComponentProps<RouteParams> {}
 
 export const PlaylistEditPage = ({ match }: Props) => {
-  const styles = useStyles2(getPlaylistStyles);
   const playlist = useAsync(() => getPlaylist(match.params.uid), [match.params]);
 
   const onSubmit = async (playlist: Playlist) => {
@@ -26,23 +24,18 @@ export const PlaylistEditPage = ({ match }: Props) => {
     locationService.push('/playlists');
   };
 
-  return (
+  const pageNav: NavModelItem = {
-    <Page navId="dashboards/playlists">
+    text: 'Edit playlist',
-      <Page.Contents isLoading={playlist.loading}>
+    subTitle:
-        <h3 className={styles.subHeading}>Edit playlist</h3>
+      'A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.',
+  };
 
+  return (
+    <Page navId="dashboards/playlists" pageNav={pageNav}>
+      <Page.Contents isLoading={playlist.loading}>
         {playlist.error && <div>Error loading playlist: {JSON.stringify(playlist.error)}</div>}
 
-        {playlist.value && (
+        {playlist.value && <PlaylistForm onSubmit={onSubmit} playlist={playlist.value} />}
-          <>
-            <p className={styles.description}>
-              A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build
-              situational awareness, or just show off your metrics to your team or visitors.
-            </p>
-
-            <PlaylistForm onSubmit={onSubmit} playlist={playlist.value} />
-          </>
-        )}
       </Page.Contents>
     </Page>
   );

public/app/features/playlist/PlaylistNewPage.tsx

@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
 
+import { NavModelItem } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { useStyles2 } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 
 import { PlaylistForm } from './PlaylistForm';
 import { createPlaylist, getDefaultPlaylist } from './api';
-import { getPlaylistStyles } from './styles';
 import { Playlist } from './types';
 
 export const PlaylistNewPage = () => {
-  const styles = useStyles2(getPlaylistStyles);
   const [playlist] = useState<Playlist>(getDefaultPlaylist());
 
   const onSubmit = async (playlist: Playlist) => {
@@ -18,16 +16,15 @@ export const PlaylistNewPage = () => {
     locationService.push('/playlists');
   };
 
+  const pageNav: NavModelItem = {
+    text: 'New playlist',
+    subTitle:
+      'A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.',
+  };
+
   return (
-    <Page navId="dashboards/playlists">
+    <Page navId="dashboards/playlists" pageNav={pageNav}>
       <Page.Contents>
-        <h3 className={styles.subHeading}>New Playlist</h3>
-
-        <p className={styles.description}>
-          A playlist rotates through a pre-selected list of dashboards. A playlist can be a great way to build
-          situational awareness, or just show off your metrics to your team or visitors.
-        </p>
-
         <PlaylistForm onSubmit={onSubmit} playlist={playlist} />
       </Page.Contents>
     </Page>

public/app/features/playlist/styles.ts

@@ -1,17 +0,0 @@
-import { css } from '@emotion/css';
-
-import { GrafanaTheme2 } from '@grafana/data';
-
-export function getPlaylistStyles(theme: GrafanaTheme2) {
-  return {
-    description: css`
-      label: description;
-      width: 555px;
-      margin-bottom: 20px;
-    `,
-    subHeading: css`
-      label: sub-heading;
-      margin-bottom: ${theme.spacing(2)};
-    `,
-  };
-}