chore: update side navigation and navigation bar (#2599)

Co-authored-by: kyle-ssg <[email protected]>

frontend/.eslintrc.js

@@ -51,7 +51,6 @@ module.exports = {
     'OptionalNumber': true,
     'OptionalObject': true,
     'OptionalString': true,
-    'dtrum': true,
     'OrganisationProvider': true,
     'OrganisationSelect': true,
     'Paging': true,
@@ -79,6 +78,7 @@ module.exports = {
     'closeModal2': true,
     'delighted': true,
     'describe': true,
+    'dtrum': true,
     'em': true,
     'flagsmith': true,
     'ga': true,

frontend/common/constants.ts

@@ -428,6 +428,14 @@ export default {
     'USERS': 'Users Page',
     'WHAT_ARE_FEATURE_FLAGS': 'What are feature flags Page',
   },
+  projectColors: [
+    '#906AF6',
+    '#FAE392',
+    '#42D0EB',
+    '#56CCAD',
+    '#FFBE71',
+    '#F57C78',
+  ],
   projectPermissions: (perm: string) =>
     `To use this feature you need the <i>${perm}</i> permission for this project.<br/>Please contact a member of this project who has administrator privileges.`,
   roles: {

frontend/common/utils/utils.tsx

@@ -14,6 +14,7 @@ import {
 import flagsmith from 'flagsmith'
 import { ReactNode } from 'react'
 import _ from 'lodash'
+import Constants from 'common/constants'
 
 const semver = require('semver')
 
@@ -305,7 +306,6 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     }
     return valid
   },
-
   getPlansPermission: (permission: string) => {
     const isOrgPermission = permission !== '2FA'
     const plans = isOrgPermission
@@ -323,6 +323,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     )
     return !!found
   },
+
+  getProjectColour(index: number) {
+    return Constants.projectColors[index % (Constants.projectColors.length - 1)]
+  },
   getSDKEndpoint(_project: ProjectType) {
     const project = _project || ProjectStore.model
 
@@ -372,6 +376,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
     return false
   },
 
+  getTagColour(index: number) {
+    return Constants.tagColors[index % (Constants.tagColors.length - 1)]
+  },
+
   getTraitEndpoint(environmentId: string, userId: string) {
     const model = ProjectStore.model as null | ProjectType
 

frontend/e2e/helpers.cafe.ts

@@ -174,7 +174,7 @@ export const login = async (email:string, password:string) => {
     await waitForElementVisible('#project-select-page');
 };
 export const logout = async () => {
-    await click('#org-menu');
+    await click('#account-settings-link');
     await click('#logout-link');
     await waitForElementVisible('#login-page');
 };

frontend/e2e/tests/invite-test.ts

@@ -60,9 +60,7 @@ export default async function() {
     await setText(byId('password'), password)
     await waitForElementVisible(byId('signup-btn'))
     await click(byId('signup-btn'))
-    await assertTextContent('.nav-link-featured', organisationName)
     log('Change email', 'Invite Test')
-    await assertTextContent('[id=account-settings-link]', 'Account')
     await click(byId('account-settings-link'))
     await click(byId('change-email-button'))
     await setText("[name='EmailAddress']", newEmail)

frontend/e2e/tests/project-test.ts

@@ -10,6 +10,6 @@ export default async function() {
     await click('#project-settings-link');
     await setText("[name='proj-name']", 'Test Project');
     await click('#save-proj-btn');
-    await waitForElementVisible(byId('switch-project-test project-active'));
+    await waitForElementVisible(byId('switch-project-test-project'));
 
 }