From 9f8cb17b013de610baa828bc0c71a5510c6b8e32 Mon Sep 17 00:00:00 2001 From: Leo <108552997+lpskdl@users.noreply.github.com> Date: Thu, 25 Aug 2022 13:11:30 +0200 Subject: [PATCH] Navigation: Use new page layout in Service accounts item page (#54200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * use navId, pageNav and update alignments of service account page * Fixing item header when feature is disabled * Fix orgs item page * Minor tweak to subtitle for service account item page Co-authored-by: Torkel Ödegaard --- public/app/core/components/Page/Page.tsx | 12 +-- .../app/features/admin/AdminEditOrgPage.tsx | 3 + public/app/features/admin/UserAdminPage.tsx | 6 +- .../serviceaccounts/ServiceAccountPage.tsx | 86 ++++--------------- 4 files changed, 29 insertions(+), 78 deletions(-) diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx index 8404ccb2226..8f300747ff3 100644 --- a/public/app/core/components/Page/Page.tsx +++ b/public/app/core/components/Page/Page.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme2, NavModel, NavModelItem } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { config } from '@grafana/runtime'; import { CustomScrollbar, useStyles2 } from '@grafana/ui'; @@ -32,7 +32,7 @@ export const OldPage: PageType = ({ usePageTitle(navModel, pageNav); - const pageHeaderNav = getPageHeaderNav(navModel, pageNav); + const pageHeaderNav = pageNav ?? navModel?.main; return (
@@ -59,14 +59,6 @@ export const OldPage: PageType = ({ ); }; -function getPageHeaderNav(navModel?: NavModel, pageNav?: NavModelItem): NavModelItem | undefined { - if (pageNav?.children && pageNav.children.length > 0) { - return pageNav; - } - - return navModel?.main; -} - OldPage.Header = PageHeader; OldPage.Contents = PageContents; OldPage.OldNavOnly = OldNavOnly; diff --git a/public/app/features/admin/AdminEditOrgPage.tsx b/public/app/features/admin/AdminEditOrgPage.tsx index a21ca21655e..79e56287ec8 100644 --- a/public/app/features/admin/AdminEditOrgPage.tsx +++ b/public/app/features/admin/AdminEditOrgPage.tsx @@ -68,6 +68,9 @@ export default function AdminEditOrgPage({ match }: Props) { const pageNav: NavModelItem = { text: orgState?.value?.name ?? '', + icon: 'shield', + breadcrumbs: [{ title: 'Orgs', url: 'admin/orgs' }], + subTitle: 'Manage settings and user roles for an organization.', }; return ( diff --git a/public/app/features/admin/UserAdminPage.tsx b/public/app/features/admin/UserAdminPage.tsx index 85c4c0f69ec..502855c27c1 100644 --- a/public/app/features/admin/UserAdminPage.tsx +++ b/public/app/features/admin/UserAdminPage.tsx @@ -105,12 +105,16 @@ export class UserAdminPage extends PureComponent { const isLDAPUser = user && user.isExternal && user.authLabels && user.authLabels.includes('LDAP'); const canReadSessions = contextSrv.hasPermission(AccessControlAction.UsersAuthTokenList); const canReadLDAPStatus = contextSrv.hasPermission(AccessControlAction.LDAPStatusRead); + const pageNav: NavModelItem = { text: user?.login ?? '', + icon: 'shield', + breadcrumbs: [{ title: 'Users', url: 'admin/users' }], + subTitle: 'Manage settings for an individual user.', }; return ( - + {user && ( <> diff --git a/public/app/features/serviceaccounts/ServiceAccountPage.tsx b/public/app/features/serviceaccounts/ServiceAccountPage.tsx index 34ab7635971..a830c9b9a34 100644 --- a/public/app/features/serviceaccounts/ServiceAccountPage.tsx +++ b/public/app/features/serviceaccounts/ServiceAccountPage.tsx @@ -1,9 +1,8 @@ -import { css } from '@emotion/css'; import React, { useEffect, useState } from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import { getTimeZone, GrafanaTheme2 } from '@grafana/data'; -import { Button, ConfirmModal, IconButton, useStyles2 } from '@grafana/ui'; +import { getTimeZone, NavModelItem } from '@grafana/data'; +import { Button, ConfirmModal, HorizontalGroup } from '@grafana/ui'; import { Page } from 'app/core/components/Page/Page'; import { contextSrv } from 'app/core/core'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; @@ -71,7 +70,7 @@ export const ServiceAccountPageUnconnected = ({ const [isTokenModalOpen, setIsTokenModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDisableModalOpen, setIsDisableModalOpen] = useState(false); - const styles = useStyles2(getStyles); + const serviceAccountId = parseInt(match.params.id, 10); const tokenActionsDisabled = !contextSrv.hasPermission(AccessControlAction.ServiceAccountsWrite) || serviceAccount.isDisabled; @@ -83,6 +82,13 @@ export const ServiceAccountPageUnconnected = ({ false ); + const pageNav: NavModelItem = { + text: serviceAccount.name, + img: serviceAccount.avatarUrl, + breadcrumbs: [{ title: 'Service accounts', url: 'org/serviceaccounts' }], + subTitle: 'Manage settings for an individual service account.', + }; + useEffect(() => { loadServiceAccount(serviceAccountId); loadServiceAccountTokens(serviceAccountId); @@ -130,24 +136,11 @@ export const ServiceAccountPageUnconnected = ({ }; return ( - + - {serviceAccount && ( -
- - - -
- {`Avatar -
-

{serviceAccount.name}

-
+
+ {serviceAccount && ( +
-
- )} -
+ + )} {serviceAccount && ( )} -
+

Tokens

-
+ {tokens && ( }
+ { - return { - headerContainer: css` - display: flex; - margin-bottom: ${theme.spacing(2)}; - align-items: center; - - h3 { - margin-bottom: ${theme.spacing(0.5)}; - flex-grow: 1; - } - `, - headerAvatar: css` - margin-right: ${theme.spacing(1)}; - margin-bottom: ${theme.spacing(0.6)}; - img { - width: 25px; - height: 25px; - border-radius: 50%; - } - `, - returnButton: css` - margin-right: ${theme.spacing(1)}; - `, - buttonRow: css` - > * { - margin-right: ${theme.spacing(2)}; - } - `, - pageBody: css` - padding-left: ${theme.spacing(5.5)}; - `, - tokensListHeader: css` - display: flex; - justify-content: space-between; - align-items: center; - `, - }; -}; - export const ServiceAccountPage = connector(ServiceAccountPageUnconnected);