diff --git a/__tests__/components/HeaderAuthentication.test.js b/__tests__/components/HeaderAuthentication.test.js index 4b33505..b668e1a 100644 --- a/__tests__/components/HeaderAuthentication.test.js +++ b/__tests__/components/HeaderAuthentication.test.js @@ -41,6 +41,7 @@ const mockBAM = { alias: 'BAM-9.5.0', url: '#', service: 'BAM', + is_read_only: true, }, }, }, @@ -73,6 +74,8 @@ jest.mock('../../src/hooks/usePlatformData', () => { mockUsePlatformData.mockImplementation(() => mockValue); return mockUsePlatformData; }); + +jest.mock('@bluecateng/pelagos'); const mockUsePlatformData = require('../../src/hooks/usePlatformData'); mockUsePlatformData.mockReturnValueOnce({ ...mockDisable }); mockUsePlatformData.mockReturnValueOnce({ ...mockMicetro }); diff --git a/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap b/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap index 3f3dee9..4e640e2 100644 --- a/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap +++ b/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap @@ -3,9 +3,11 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with BAM authentication and default props 1`] = `
- + + + + Read-only + +
`; @@ -27,9 +38,11 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with BAM authentication and props 1`] = `
- + + + + Read-only + +
`; @@ -51,9 +73,11 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with Micetro authentication 1`] = `
- +
- + Standalone
diff --git a/src/header/HeaderAuthentication.js b/src/header/HeaderAuthentication.js index 72f8ef7..585037f 100644 --- a/src/header/HeaderAuthentication.js +++ b/src/header/HeaderAuthentication.js @@ -1,5 +1,5 @@ /* -Copyright 2023-2024 BlueCat Networks Inc. +Copyright 2023-2025 BlueCat Networks Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -23,6 +23,8 @@ import PropTypes from 'prop-types'; import usePlatformData from '../hooks/usePlatformData'; import './HeaderAuthentication.less'; +import { Tag, useTooltip } from '@bluecateng/pelagos'; +import { t } from '@bluecateng/l10n.macro'; /** * HeaderAuthentication component displays the connected Authentication @@ -35,15 +37,22 @@ const HeaderAuthentication = ({ className }) => { const authenticationAlias = data?.user?.authentication_info?.alias; const authenticationLink = data?.user?.authentication_info?.url; const authenticationService = data?.user?.authentication_info?.service; + const isReadOnly = data?.user?.authentication_info?.is_read_only; + const readOnlyTooltipRef = useTooltip( + t`Connected to Address Manager in read- + only mode. Gateway settings aren’t + affected.`, + 'bottom', + ); return ( <> {authenticationService && (
- + {authenticationAlias ? ( { authenticationService )} + {isReadOnly && ( + + {t`Read-only`} + + )}
)} diff --git a/src/header/HeaderAuthentication.less b/src/header/HeaderAuthentication.less index 2108228..c20c0e6 100644 --- a/src/header/HeaderAuthentication.less +++ b/src/header/HeaderAuthentication.less @@ -21,33 +21,28 @@ @import '~@bluecateng/pelagos/less/colors'; .HeaderAuthentication { - height: @sp-48; - width: @sp-48; + display: flex; + flex-direction: row; + align-items: center; &__authentication { - & span { - color: var(--tag-color-teal); - display: flex; - flex-direction: row; - align-items: center; - font-size: 14px; - text-align: left; + color: var(--tag-color-teal); + display: flex; + flex-direction: row; + align-items: center; + font-size: 14px; + text-align: left; - a { - text-decoration: none; - padding-left: @sp-02; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: var(--link-primary); - } + a { + text-decoration: none; + padding-left: @sp-02; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--link-primary); } - &__linkIcon { - color: var(--icon-interactive); - } - - & > span::before { + & > ::before { content: ''; margin-left: @sp-08; margin-right: @sp-08; @@ -55,4 +50,8 @@ border: 1px solid var(--border-subtle); } } + + &__readOnlyLabel { + margin-left: @sp-08; + } } diff --git a/src/l10n/en.po b/src/l10n/en.po index cebfe56..cae3aa3 100644 --- a/src/l10n/en.po +++ b/src/l10n/en.po @@ -52,6 +52,13 @@ msgstr "" msgid "Close side menu" msgstr "" +#: e22d +msgid "" +"Connected to Address Manager in read-\n" +" only mode. Gateway settings aren’t \n" +" affected." +msgstr "" + #: b38e msgid "Custom workflows" msgstr "" @@ -108,6 +115,10 @@ msgstr "" msgid "Quick access to default workflows" msgstr "" +#: 9b19 +msgid "Read-only" +msgstr "" + #: efc0 #~ msgid "Save" #~ msgstr "" diff --git a/src/l10n/zz.po b/src/l10n/zz.po index 09b3fb6..a45a9c1 100644 --- a/src/l10n/zz.po +++ b/src/l10n/zz.po @@ -22,7 +22,7 @@ msgstr "" "Project-Id-Version: \n" "Report-Msgid-Bugs-To: \n" "POT-Creation-Date: 2023-06-13T14:44:45.416Z\n" -"PO-Revision-Date: 2024-10-22T19:28:49.031786+00:00\n" +"PO-Revision-Date: 2025-10-16T16:02:32.394339+00:00\n" "Last-Translator: \n" "Language-Team: \n" "Language: zz\n" @@ -52,6 +52,16 @@ msgstr "ÇÇlôôséé" msgid "Close side menu" msgstr "ÇÇlôôséé sîîdéé ménûû" +#: e22d +msgid "" +"Connected to Address Manager in read-\n" +" only mode. Gateway settings aren’t \n" +" affected." +msgstr "" +"ÇÇôônnééççtééd tôô ÂÂddrééss Mâânââgéér îîn rééââd-\n" +" ôônly môôdéé. Gââtééwâây sééttîîngs ââréén’t \n" +" ââffééççtééd." + #: b38e msgid "Custom workflows" msgstr "ÇÇûûstôôm wôôrkflôôws" @@ -108,6 +118,10 @@ msgstr "Lôôgôôùùt" msgid "Quick access to default workflows" msgstr "Rââpîîd açççéès àû dêéfââùùlt wôôrkflôôws" +#: 9b19 +msgid "Read-only" +msgstr "Rééââd-ôônly" + #: efc0 #~ msgid "Save" #~ msgstr "Sââvéé" diff --git a/stories/HeaderAuthentication.stories.js b/stories/HeaderAuthentication.stories.js index 71c19bf..8d0a45b 100644 --- a/stories/HeaderAuthentication.stories.js +++ b/stories/HeaderAuthentication.stories.js @@ -30,6 +30,8 @@ const mockBAM = { alias: 'BAM-9.5.0', url: '#', service: 'Address Manager', + // eslint-disable-next-line camelcase + is_read_only: true, }, }, },