From 26e444c19405244eeb9bbed4629d7eafebba7db3 Mon Sep 17 00:00:00 2001
From: Leo <108552997+lpskdl@users.noreply.github.com>
Date: Fri, 16 Sep 2022 08:56:50 +0200
Subject: [PATCH] Navigation: Use navid and pagenav for new org page (#55203)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use navid and pagenav for new org page

* Minor tweak

* improve copies

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 public/app/features/org/NewOrgPage.tsx | 47 +++++++++++++-------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/public/app/features/org/NewOrgPage.tsx b/public/app/features/org/NewOrgPage.tsx
index 6a4fc75a490..6736de0842a 100644
--- a/public/app/features/org/NewOrgPage.tsx
+++ b/public/app/features/org/NewOrgPage.tsx
@@ -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>
               </>
             );