Navigation: use pagenav and subtitle to the new team page (#55200)

* added pageNav to new team page

* improve copies

* improve copies

* improve test

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

@@ -38,7 +38,9 @@ const setup = () => {
 describe('Create team', () => {
   it('should render component', () => {
     setup();
-    expect(screen.getByText(/new team/i)).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /name/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
   it('should send correct data to the server', async () => {

public/app/features/teams/CreateTeam.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 
+import { NavModelItem } from '@grafana/data';
 import { getBackendSrv, locationService } from '@grafana/runtime';
 import { Button, Form, Field, Input, FieldSet } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
@@ -14,6 +15,14 @@ interface TeamDTO {
   name: string;
 }
 
+const pageNav: NavModelItem = {
+  icon: 'users-alt',
+  id: 'team-new',
+  text: 'New team',
+  subTitle: 'Create a new team. Teams let you grant permissions to a group of users.',
+  breadcrumbs: [{ title: 'Configuration', url: 'org/teams' }],
+};
+
 export const CreateTeam = (): JSX.Element => {
   const currentOrgId = contextSrv.user.orgId;
   const [pendingRoles, setPendingRoles] = useState<Role[]>([]);
@@ -39,11 +48,11 @@ export const CreateTeam = (): JSX.Element => {
   };
 
   return (
-    <Page navId="teams">
+    <Page navId="teams" pageNav={pageNav}>
       <Page.Contents>
         <Form onSubmit={createTeam}>
           {({ register, errors }) => (
-            <FieldSet label="New Team">
+            <FieldSet>
               <Field label="Name" required invalid={!!errors.name} error="Team name is required">
                 <Input {...register('name', { required: true })} id="team-name" />
               </Field>