chore(ui): update header to show read-only status for address manager

__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 });

__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap

@@ -3,9 +3,11 @@
 exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with BAM authentication and default props 1`] = `
 <React.Fragment>
   <div
-    className="HeaderAuthentication__authentication"
+    className="HeaderAuthentication"
   >
-    <span>
+    <span
+      className="HeaderAuthentication__authentication"
+    >
       <a
         href="#"
         rel="noreferrer"
@@ -20,16 +22,27 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi
         </u>
       </a>
     </span>
+    <Tag
+      className="HeaderAuthentication__readOnlyLabel"
+      size="sm"
+      type="gray"
+    >
+      <span>
+        Read-only
+      </span>
+    </Tag>
   </div>
 </React.Fragment>
 `;
 
 exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with BAM authentication and props 1`] = `
 <React.Fragment>
   <div
-    className="HeaderAuthentication__authentication varClassName"
+    className="HeaderAuthentication varClassName"
   >
-    <span>
+    <span
+      className="HeaderAuthentication__authentication"
+    >
       <a
         href="#"
         rel="noreferrer"
@@ -44,16 +57,27 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi
         </u>
       </a>
     </span>
+    <Tag
+      className="HeaderAuthentication__readOnlyLabel"
+      size="sm"
+      type="gray"
+    >
+      <span>
+        Read-only
+      </span>
+    </Tag>
   </div>
 </React.Fragment>
 `;
 
 exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with Micetro authentication 1`] = `
 <React.Fragment>
   <div
-    className="HeaderAuthentication__authentication"
+    className="HeaderAuthentication"
   >
-    <span>
+    <span
+      className="HeaderAuthentication__authentication"
+    >
       <a
         href="#"
         rel="noreferrer"
@@ -75,9 +99,11 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi
 exports[`HeaderAuthentication Rendering Render HeaderAuthentication component with Standalone authentication 1`] = `
 <React.Fragment>
   <div
-    className="HeaderAuthentication__authentication"
+    className="HeaderAuthentication"
   >
-    <span>
+    <span
+      className="HeaderAuthentication__authentication"
+    >
       Standalone
     </span>
   </div>

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 && (
                 <div
-                    className={`HeaderAuthentication__authentication${
+                    className={`HeaderAuthentication${
                         className ? ` ${className}` : ''
                     }`}>
-                    <span>
+                    <span className='HeaderAuthentication__authentication'>
                         {authenticationAlias ? (
                             <a
                                 target='_blank'
@@ -57,6 +66,15 @@ const HeaderAuthentication = ({ className }) => {
                             authenticationService
                         )}
                     </span>
+                    {isReadOnly && (
+                        <Tag
+                            className='HeaderAuthentication__readOnlyLabel'
+                            size='sm'
+                            type='gray'
+                            ref={readOnlyTooltipRef}>
+                            <span>{t`Read-only`}</span>
+                        </Tag>
+                    )}
                 </div>
             )}
         </>

src/header/HeaderAuthentication.less

@@ -21,38 +21,37 @@
 @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;
             height: 100%;
             border: 1px solid var(--border-subtle);
         }
     }
+
+    &__readOnlyLabel {
+        margin-left: @sp-08;
+    }
 }

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 ""

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éé"

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,
             },
         },
     },