IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TopNav: Updates to create service account page and invite user (#52480)

Browse Source 
* Simplify logic to support both navs

* Added new file
This commit is contained in:
Torkel Ödegaard
2022-07-20 16:02:25 +02:00
committed by GitHub
parent b42ac8a211
commit 01d561224c
9 changed files with 105 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/app/features/serviceaccounts/ServiceAccountCreatePage.tsx
View File

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import { getBackendSrv } from '@grafana/runtime';
import { Form, Button, Input, Field } from '@grafana/ui';
import { Form, Button, Input, Field, FieldSet } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
import { fetchBuiltinRoles, fetchRoleOptions, updateUserRoles } from 'app/core/components/RolePicker/api';
@@ -110,39 +110,43 @@ export const ServiceAccountCreatePage = ({}: Props): JSX.Element => {
};
return (
<Page navId="serviceaccounts">
<Page navId="serviceaccounts" pageNav={{ text: 'Create service account' }}>
<Page.Contents>
<h1>Create service account</h1>
<Page.OldNavOnly>
<h3 className="page-sub-heading">Create service account</h3>
</Page.OldNavOnly>
<Form onSubmit={onSubmit} validateOn="onSubmit">
{({ register, errors }) => {
return (
<>
<Field
label="Display name"
required
invalid={!!errors.name}
error={errors.name ? 'Display name is required' : undefined}
>
<Input id="display-name-input" {...register('name', { required: true })} autoFocus />
</Field>
<Field label="Role">
{contextSrv.licensedAccessControlEnabled() ? (
<UserRolePicker
userId={serviceAccount.id || 0}
orgId={serviceAccount.orgId}
builtInRole={serviceAccount.role}
builtInRoles={builtinRoles}
onBuiltinRoleChange={onRoleChange}
builtinRolesDisabled={false}
roleOptions={roleOptions}
updateDisabled={true}
onApplyRoles={onPendingRolesUpdate}
pendingRoles={pendingRoles}
/>
) : (
<OrgRolePicker aria-label="Role" value={serviceAccount.role} onChange={onRoleChange} />
)}
</Field>
<FieldSet>
<Field
label="Display name"
required
invalid={!!errors.name}
error={errors.name ? 'Display name is required' : undefined}
>
<Input id="display-name-input" {...register('name', { required: true })} autoFocus />
</Field>
<Field label="Role">
{contextSrv.licensedAccessControlEnabled() ? (
<UserRolePicker
userId={serviceAccount.id || 0}
orgId={serviceAccount.orgId}
builtInRole={serviceAccount.role}
builtInRoles={builtinRoles}
onBuiltinRoleChange={onRoleChange}
builtinRolesDisabled={false}
roleOptions={roleOptions}
updateDisabled={true}
onApplyRoles={onPendingRolesUpdate}
pendingRoles={pendingRoles}
/>
) : (
<OrgRolePicker aria-label="Role" value={serviceAccount.role} onChange={onRoleChange} />
)}
</Field>
</FieldSet>
<Button type="submit">Create</Button>
</>
);

5
public/app/features/serviceaccounts/ServiceAccountsListPage.tsx
View File

@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { GrafanaTheme2, OrgRole } from '@grafana/data';
import { config } from '@grafana/runtime';
import { Alert, ConfirmModal, FilterInput, Icon, LinkButton, RadioButtonGroup, Tooltip, useStyles2 } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { Page } from 'app/core/components/Page/Page';
@@ -193,7 +192,7 @@ export const ServiceAccountsListPageUnconnected = ({
onRemove={onMigrationInfoClose}
></Alert>
)}
{!config.featureToggles.topnav && (
<Page.OldNavOnly>
<div className={styles.pageHeader}>
<h2>Service accounts</h2>
<div className={styles.apiKeyInfoLabel}>
@@ -207,7 +206,7 @@ export const ServiceAccountsListPageUnconnected = ({
<span>Looking for API keys?</span>
</div>
</div>
)}
</Page.OldNavOnly>
<div className="page-action-bar">
<div className="gf-form gf-form--grow">
<FilterInput