diff options
Diffstat (limited to 'server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx')
| -rw-r--r-- | server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx | 119 |
1 files changed, 50 insertions, 69 deletions
diff --git a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx index bc8bd1e1bde..55cc488429d 100644 --- a/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx +++ b/server/sonar-web/src/main/js/app/components/nav/component/Menu.tsx @@ -17,14 +17,9 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { - DisabledTabLink, - Dropdown, - ItemNavLink, - NavBarTabLink, - NavBarTabs, - PopupZLevel, -} from 'design-system'; + +import { DropdownMenu } from '@sonarsource/echoes-react'; +import { DisabledTabLink, NavBarTabLink, NavBarTabs } from 'design-system'; import * as React from 'react'; import { useLocation } from '~sonar-aligned/components/hoc/withRouter'; import { getBranchLikeQuery, isPullRequest } from '~sonar-aligned/helpers/branch-like'; @@ -245,33 +240,28 @@ export function Menu(props: Readonly<Props>) { isApplication(qualifier), isPortfolioLike(qualifier), ); + if (!adminLinks.some((link) => link != null)) { return null; } return ( - <Dropdown + <DropdownMenu.Root data-test="administration" id="component-navigation-admin" - size="auto" - zLevel={PopupZLevel.Global} - overlay={adminLinks} + items={adminLinks} > - {({ onToggleClick, open, a11yAttrs }) => ( - <NavBarTabLink - active={isSettingsActive || open} - onClick={onToggleClick} - text={ - hasMessage('layout.settings', component.qualifier) - ? translate('layout.settings', component.qualifier) - : translate('layout.settings') - } - withChevron - to={{}} - {...a11yAttrs} - /> - )} - </Dropdown> + <NavBarTabLink + active={isSettingsActive} + text={ + hasMessage('layout.settings', component.qualifier) + ? translate('layout.settings', component.qualifier) + : translate('layout.settings') + } + withChevron + to={{}} + /> + </DropdownMenu.Root> ); }; @@ -325,12 +315,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="settings" to={{ pathname: '/project/settings', search: new URLSearchParams(query).toString() }} > {translate('project_settings.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -340,12 +330,12 @@ export function Menu(props: Readonly<Props>) { } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="branches" to={{ pathname: '/project/branches', search: new URLSearchParams(query).toString() }} > {translate('project_branch_pull_request.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -354,12 +344,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="baseline" to={{ pathname: '/project/baseline', search: new URLSearchParams(query).toString() }} > {translate('project_baseline.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -368,7 +358,7 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="import-export" to={{ pathname: '/project/import_export', @@ -376,7 +366,7 @@ export function Menu(props: Readonly<Props>) { }} > {translate('project_dump.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -385,7 +375,7 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="profiles" to={{ pathname: '/project/quality_profiles', @@ -393,7 +383,7 @@ export function Menu(props: Readonly<Props>) { }} > {translate('project_quality_profiles.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -402,12 +392,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="quality_gate" to={{ pathname: '/project/quality_gate', search: new URLSearchParams(query).toString() }} > {translate('project_quality_gate.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -416,12 +406,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="links" to={{ pathname: '/project/links', search: new URLSearchParams(query).toString() }} > {translate('project_links.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -430,12 +420,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="permissions" to={{ pathname: '/project_roles', search: new URLSearchParams(query).toString() }} > {translate('permissions.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -444,7 +434,7 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="background_tasks" to={{ pathname: '/project/background_tasks', @@ -452,7 +442,7 @@ export function Menu(props: Readonly<Props>) { }} > {translate('background_tasks.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -461,12 +451,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="update_key" to={{ pathname: '/project/key', search: new URLSearchParams(query).toString() }} > {translate('update_key.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -475,12 +465,12 @@ export function Menu(props: Readonly<Props>) { return null; } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="webhooks" to={{ pathname: '/project/webhooks', search: new URLSearchParams(query).toString() }} > {translate('webhooks.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -500,12 +490,12 @@ export function Menu(props: Readonly<Props>) { } return ( - <ItemNavLink + <DropdownMenu.ItemLink key="project_delete" to={{ pathname: '/project/deletion', search: new URLSearchParams(query).toString() }} > {translate('deletion.page')} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -513,9 +503,12 @@ export function Menu(props: Readonly<Props>) { const pathname = isAdmin ? `/project/admin/extension/${key}` : `/project/extension/${key}`; const query = { ...baseQuery, qualifier }; return ( - <ItemNavLink key={key} to={{ pathname, search: new URLSearchParams(query).toString() }}> + <DropdownMenu.ItemLink + key={key} + to={{ pathname, search: new URLSearchParams(query).toString() }} + > {name} - </ItemNavLink> + </DropdownMenu.ItemLink> ); }; @@ -538,25 +531,13 @@ export function Menu(props: Readonly<Props>) { } return ( - <Dropdown + <DropdownMenu.Root data-test="extensions" id="component-navigation-more" - size="auto" - zLevel={PopupZLevel.Global} - overlay={withoutSecurityExtension.map((e) => renderExtension(e, false, query))} + items={withoutSecurityExtension.map((e) => renderExtension(e, false, query))} > - {({ onToggleClick, open, a11yAttrs }) => ( - <NavBarTabLink - active={open} - onClick={onToggleClick} - preventDefault - text={translate('more')} - withChevron - to={{}} - {...a11yAttrs} - /> - )} - </Dropdown> + <NavBarTabLink preventDefault text={translate('more')} withChevron to={{}} /> + </DropdownMenu.Root> ); }; |