import React, { FC } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { Button, Input, Field, Form } 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); type Props = ConnectedProps; interface CreateOrgFormDTO { name: string; } export const NewOrgPage: FC = ({ navModel, createOrganization }) => { const createOrg = async (newOrg: { name: string }) => { await createOrganization(newOrg); window.location.href = getConfig().appSubUrl + '/org'; }; return (

New organization

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.{' '}

onSubmit={createOrg}> {({ register, errors }) => { return ( <> ); }}
); }; export default connector(NewOrgPage);