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

* added pageNav to new team page

* improve copies

* improve copies

* improve test
This commit is contained in:
Leo 2022-09-16 09:32:08 +02:00 committed by GitHub
parent 896d684065
commit e7ae71a5cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -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 () => {

View File

@ -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>