public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigation: Use navid and pagenav for new org page (#55203)

Browse Source 
* use navid and pagenav for new org page

* Minor tweak

* improve copies

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
This commit is contained in:
Leo
2022-09-16 08:56:50 +02:00
committed by GitHub
co-authored by Torkel Ödegaard
parent eb7fe07401
commit 26e444c194
1 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/org/NewOrgPage.tsx
+24 -23
View File
@@ -1,24 +1,18 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
import { Button, Input, Field, Form } from '@grafana/ui'; import { NavModelItem } from '@grafana/data';
import { Button, Input, Field, Form, FieldSet } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
import { getConfig } from 'app/core/config'; import { getConfig } from 'app/core/config';
import { StoreState } from 'app/types';
import { getNavModel } from '../../core/selectors/navModel';
import { createOrganization } from './state/actions'; import { createOrganization } from './state/actions';
const mapStateToProps = (state: StoreState) => {
return { navModel: getNavModel(state.navIndex, 'global-orgs') };
};
const mapDispatchToProps = { const mapDispatchToProps = {
createOrganization, createOrganization,
}; };
const connector = connect(mapStateToProps, mapDispatchToProps); const connector = connect(undefined, mapDispatchToProps);
type Props = ConnectedProps<typeof connector>; type Props = ConnectedProps<typeof connector>;
@@ -26,35 +20,42 @@ interface CreateOrgFormDTO {
name: string; name: string;
} }
export const NewOrgPage: FC<Props> = ({ navModel, createOrganization }) => { const pageNav: NavModelItem = {
icon: 'building',
id: 'org-new',
text: 'New organization',
breadcrumbs: [{ title: 'Server admin', url: 'admin/orgs' }],
};
export const NewOrgPage: FC<Props> = ({ createOrganization }) => {
const createOrg = async (newOrg: { name: string }) => { const createOrg = async (newOrg: { name: string }) => {
await createOrganization(newOrg); await createOrganization(newOrg);
window.location.href = getConfig().appSubUrl + '/org'; window.location.href = getConfig().appSubUrl + '/org';
}; };
return ( return (
<Page navModel={navModel}> <Page navId="global-orgs" pageNav={pageNav}>
<Page.Contents> <Page.Contents>
<h3 className="page-sub-heading">New organization</h3> <p className="muted">
<p className="playlist-description">
Each organization contains their own dashboards, data sources, and configuration, which cannot be shared Each organization contains their own dashboards, data sources, and configuration, which cannot be shared
shared between organizations. While users might belong to more than one organization, multiple organizations shared between organizations. While users might belong to more than one organization, multiple organizations
are most frequently used in multi-tenant deployments.{' '} are most frequently used in multi-tenant deployments.
</p> </p>
<Form<CreateOrgFormDTO> onSubmit={createOrg}> <Form<CreateOrgFormDTO> onSubmit={createOrg}>
{({ register, errors }) => { {({ register, errors }) => {
return ( return (
<> <>
<Field label="Organization name" invalid={!!errors.name} error={errors.name && errors.name.message}> <FieldSet>
<Input <Field label="Organization name" invalid={!!errors.name} error={errors.name && errors.name.message}>
placeholder="Org name" <Input
{...register('name', { placeholder="Org name"
required: 'Organization name is required', {...register('name', {
})} required: 'Organization name is required',
/> })}
</Field> />
</Field>
</FieldSet>
<Button type="submit">Create</Button> <Button type="submit">Create</Button>
</> </>
); );