IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues 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
parent eb7fe07401
commit 26e444c194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/app/features/org/NewOrgPage.tsx
View File

@ -1,24 +1,18 @@
import React, { FC } from 'react';
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 { getConfig } from 'app/core/config';
import { StoreState } from 'app/types';
import { getNavModel } from '../../core/selectors/navModel';
import { createOrganization } from './state/actions';
const mapStateToProps = (state: StoreState) => {
return { navModel: getNavModel(state.navIndex, 'global-orgs') };
};
const mapDispatchToProps = {
createOrganization,
};
const connector = connect(mapStateToProps, mapDispatchToProps);
const connector = connect(undefined, mapDispatchToProps);
type Props = ConnectedProps<typeof connector>;
@ -26,35 +20,42 @@ interface CreateOrgFormDTO {
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 }) => {
await createOrganization(newOrg);
window.location.href = getConfig().appSubUrl + '/org';
};
return (
<Page navModel={navModel}>
<Page navId="global-orgs" pageNav={pageNav}>
<Page.Contents>
<h3 className="page-sub-heading">New organization</h3>
<p className="playlist-description">
<p className="muted">
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
are most frequently used in multi-tenant deployments.{' '}
are most frequently used in multi-tenant deployments.
</p>
<Form<CreateOrgFormDTO> onSubmit={createOrg}>
{({ register, errors }) => {
return (
<>
<Field label="Organization name" invalid={!!errors.name} error={errors.name && errors.name.message}>
<Input
placeholder="Org name"
{...register('name', {
required: 'Organization name is required',
})}
/>
</Field>
<FieldSet>
<Field label="Organization name" invalid={!!errors.name} error={errors.name && errors.name.message}>
<Input
placeholder="Org name"
{...register('name', {
required: 'Organization name is required',
})}
/>
</Field>
</FieldSet>
<Button type="submit">Create</Button>
</>
);