MMT-4010: As a user, I can navigate to a landing page for Keyword Manager. (#1349)

* MMT-4010: Creating Keyword Manager Navigation

* MMT-4010: npm audit fix and added test

* MMT-4010: Bamboo Variable and sharedUtils/

* MMT-4010: Changing to real ACL

Author: mandyparson

.eslintrc

@@ -28,7 +28,8 @@
       "alias": {
         "map": [
           [ "@", "./static/src" ],
-          [ "sharedConstants", "./sharedConstants"]
+          [ "sharedConstants", "./sharedConstants"],
+          [ "sharedUtils", "./sharedUtils"]
         ],
         "extensions": [
           ".js",

bin/deploy-bamboo.sh

@@ -18,6 +18,8 @@ config="`jq '.application.apiHost = $newValue' --arg newValue $bamboo_API_HOST <
 config="`jq '.application.cmrHost = $newValue' --arg newValue $bamboo_CMR_HOST <<< $config`"
 config="`jq '.application.edscHost = $newValue' --arg newValue $bamboo_EDSC_HOST <<< $config`"
 config="`jq '.application.gkrHost = $newValue' --arg newValue $bamboo_GKR_HOST <<< $config`"
+# Remove after CMR-10452 has been completed
+config="`jq '.application.showKeywordManager = $newValue' --arg newValue $bamboo_SHOW_KEYWORD_MANAGER <<< $config`"
 config="`jq '.application.cookieDomain = $newValue' --arg newValue $bamboo_COOKIE_DOMAIN <<< $config`"
 config="`jq '.application.displayProdWarning = $newValue' --arg newValue $bamboo_DISPLAY_PROD_WARNING <<< $config`"
 config="`jq '.application.tokenValidTime = $newValue' --arg newValue $bamboo_JWT_VALID_TIME <<< $config`"

jsconfig.json

@@ -3,8 +3,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["static/src/*"],
-      "sharedConstants/*": ["sharedConstants/*"]
+      "sharedConstants/*": ["sharedConstants/*"],
+      "sharedUtils/*": ["sharedUtils/*"]
     }
   },
-  "include": ["static/src/**/*", "sharedConstants/*"]
+  "include": ["static/src/**/*", "sharedConstants/*", "sharedUtils/*"]
 }

package-lock.json

@@ -13,6 +13,7 @@
       "Access-Control-Allow-Headers": "*",
       "Access-Control-Allow-Credentials": true
     },
+    "showKeywordManager": true,
     "cookieDomain": ".localhost",
     "tokenValidTime": "900",
     "displayProdWarning": "true",

static.config.json

@@ -9,6 +9,7 @@ import GroupFormPage from '@/js/pages/GroupFormPage/GroupFormPage'
 import GroupListPage from '@/js/pages/GroupListPage/GroupListPage'
 import GroupPage from '@/js/pages/GroupPage/GroupPage'
 import HomePage from '@/js/pages/HomePage/HomePage'
+import KeywordManagerPage from '@/js/pages/KeywordManagerPage/KeywordManagerPage'
 import LogoutPage from '@/js/pages/LogoutPage/LogoutPage'
 import ManageCollectionAssociationPage from '@/js/pages/ManageCollectionAssociationPage/ManageCollectionAssociationPage'
 import ManageServiceAssociationsPage from '@/js/pages/ManageServiceAssociationsPage/ManageServiceAssociationsPage'
@@ -17,6 +18,7 @@ import OrderOptionFormPage from '@/js/pages/OrderOptionFormPage/OrderOptionFormP
 import OrderOptionListPage from '@/js/pages/OrderOptionListPage/OrderOptionListPage'
 import OrderOptionPage from '@/js/pages/OrderOptionPage/OrderOptionPage'
 import PermissionListPage from '@/js/pages/PermissionListPage/PermissionListPage'
+import PermissionFormPage from '@/js/pages/PermissionFormPage/PermissionFormPage'
 import PermissionPage from '@/js/pages/PermissionPage/PermissionPage'
 import ProviderPermissionsPage from '@/js/pages/ProviderPermissionsPage/ProviderPermissionsPage'
 import ProvidersPage from '@/js/pages/ProvidersPage/ProvidersPage'
@@ -39,7 +41,6 @@ import TemplatePreview from '@/js/components/TemplatePreview/TemplatePreview'
 import REDIRECTS from '@/js/constants/redirectsMap/redirectsMap'
 
 import withProviders from '@/js/providers/withProviders/withProviders'
-import PermissionFormPage from './pages/PermissionFormPage/PermissionFormPage'
 
 import '../css/index.scss'
 
@@ -221,6 +222,10 @@ export const App = () => {
                   path: '/admin/groups',
                   element: <GroupListPage isAdminPage />
                 },
+                {
+                  path: '/admin/keywordmanager',
+                  element: <KeywordManagerPage isAdminPage />
+                },
                 {
                   path: '/admin/groups/:id',
                   element: <GroupPage isAdminPage />
@@ -241,6 +246,10 @@ export const App = () => {
                 {
                   path: '/admin/groups/:id/edit',
                   element: <GroupFormPage isAdminPage />
+                },
+                {
+                  path: '/admin/keywordmanager',
+                  element: <KeywordManagerPage isAdminPage />
                 }
               ]
             }

static/src/js/App.jsx

@@ -7,6 +7,22 @@ import App from '@/js/App'
 vi.mock('@/js/components/ErrorBanner/ErrorBanner')
 vi.mock('@/js/utils/errorLogger')
 
+vi.mock('@/js/hooks/useAuthContext', () => ({
+  default: vi.fn(() => ({
+    user: {
+      uid: 'testuser'
+    }
+  }))
+}))
+
+vi.mock('@/js/hooks/usePermissions', () => ({
+  default: vi.fn(() => ({
+    hasSystemGroup: true,
+    hasSystemKeywords: true,
+    loading: false
+  }))
+}))
+
 vi.mock('@/js/pages/SearchPage/SearchPage', () => ({
   default: vi.fn(() => {
     const { type } = useParams()
@@ -59,6 +75,12 @@ vi.mock('@/js/components/LayoutUnauthenticated/LayoutUnauthenticated', () => ({
   ))
 }))
 
+vi.mock('@/js/pages/KeywordManagerPage/KeywordManagerPage', () => ({
+  default: vi.fn(({ isAdminPage }) => (
+    <div data-testid={`mock-keyword-manager-page${isAdminPage ? '-admin' : ''}`}>Keyword Manager Page</div>
+  ))
+}))
+
 const setup = () => {
   render(
     <App />
@@ -195,4 +217,16 @@ describe('App component', () => {
       window.history.pushState({}, '', '/')
     })
   })
+
+  describe('when rendering the "/admin/keywordmanager" route', () => {
+    test('renders the admin keyword manager page', async () => {
+      window.history.pushState({}, '', '/admin/keywordmanager')
+
+      setup()
+
+      expect(await screen.findByTestId('mock-keyword-manager-page-admin')).toBeInTheDocument()
+
+      window.history.pushState({}, '', '/')
+    })
+  })
 })

static/src/js/__tests__/App.test.jsx

@@ -51,15 +51,17 @@ const Layout = ({ className, displayNav }) => {
 
   const { user } = useAuthContext()
 
-  const { hasSystemGroup, loading } = usePermissions({
-    systemGroup: ['read']
+  const { hasSystemGroup, hasSystemKeywords, loading } = usePermissions({
+    systemGroup: ['read'],
+    systemKeywords: ['read']
   })
 
   const [showAboutModal, setShowAboutModal] = useState(false)
 
   if (loading) return null
 
   const canViewGroups = hasSystemGroup
+  const canViewKeywords = hasSystemKeywords
   const canViewAdmin = canViewGroups // || canView* other permission if needed
 
   return (
@@ -215,6 +217,11 @@ const Layout = ({ className, displayNav }) => {
                                     to: '/admin/groups',
                                     title: 'System Groups',
                                     visible: canViewGroups
+                                  },
+                                  {
+                                    to: '/admin/keywordmanager',
+                                    title: 'Keyword Manager',
+                                    visible: canViewKeywords
                                   }
                                 ]
                               }

static/src/js/components/Layout/Layout.jsx

@@ -73,15 +73,19 @@ const setup = (loggedIn) => {
 
 describe('Layout component', () => {
   test('renders the content to the React Router Outlet', async () => {
-    usePermissions.mockReturnValue({ hasSystemGroup: true })
+    usePermissions.mockReturnValue({
+      hasSystemGroup: true,
+      hasSystemKeywords: true
+    })
 
     setup()
 
     expect(screen.getByText('This is some content')).toBeInTheDocument()
 
     expect(usePermissions).toHaveBeenCalledTimes(1)
     expect(usePermissions).toHaveBeenCalledWith({
-      systemGroup: ['read']
+      systemGroup: ['read'],
+      systemKeywords: ['read']
     })
 
     expect(PrimaryNavigation).toHaveBeenCalledTimes(1)
@@ -180,6 +184,11 @@ describe('Layout component', () => {
                 to: '/admin/groups',
                 title: 'System Groups',
                 visible: true
+              },
+              {
+                to: '/admin/keywordmanager',
+                title: 'Keyword Manager',
+                visible: true
               }
             ]
           }
@@ -188,9 +197,12 @@ describe('Layout component', () => {
     }, {})
   })
 
-  describe('when the user does not have system group permissions', () => {
+  describe('when the user does not have system group or system keywords permissions', () => {
     test('does not render the admin links', async () => {
-      usePermissions.mockReturnValue({ hasSystemGroup: false })
+      usePermissions.mockReturnValue({
+        hasSystemGroup: false,
+        hasSystemKeywords: false
+      })
 
       setup()
 
@@ -292,6 +304,11 @@ describe('Layout component', () => {
                   to: '/admin/groups',
                   title: 'System Groups',
                   visible: false
+                },
+                {
+                  to: '/admin/keywordmanager',
+                  title: 'Keyword Manager',
+                  visible: false
                 }
               ]
             }