fix(e2e): Incorrect project selected in RBAC E2E on staging (#5433)

Co-authored-by: Kim Gustyr <kim.gustyr@flagsmith.com>

Author: Zaimwa9

api/pyproject.toml

@@ -63,7 +63,7 @@ exclude_also = [
 ]
 
 [tool.coverage.run]
-omit = ["scripts/*", "manage.py"]
+omit = ["scripts/*", "manage.py", "e2etests/*"]
 
 [tool.pytest.ini_options]
 addopts = [

frontend/common/utils/utils.tsx

@@ -78,8 +78,8 @@ const Utils = Object.assign({}, require('./base/_utils'), {
       total += variation
         ? variation.percentage_allocation
         : typeof v.default_percentage_allocation === 'number'
-        ? v.default_percentage_allocation
-        : (v as any).percentage_allocation
+          ? v.default_percentage_allocation
+          : (v as any).percentage_allocation
       return null
     })
     return 100 - total
@@ -190,10 +190,10 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   ) {
     const findAppended = `${value}`.includes(':')
       ? (conditions || []).find((v) => {
-          const split = value.split(':')
-          const targetKey = `:${split[split.length - 1]}`
-          return v.value === operator + targetKey
-        })
+        const split = value.split(':')
+        const targetKey = `:${split[split.length - 1]}`
+        return v.value === operator + targetKey
+      })
       : false
     if (findAppended) return findAppended
 
@@ -678,6 +678,12 @@ const Utils = Object.assign({}, require('./base/_utils'), {
         return true
     }
   },
+
+  toKebabCase: (string: string) => string
+    .replace(/([a-z])([A-Z])/g, "$1-$2")
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase(),
+
   validateRule(rule: SegmentCondition) {
     if (!rule) return false
     if (rule.delete) {

frontend/e2e/tests/roles-test.ts

@@ -19,9 +19,10 @@ import {
 import { t } from 'testcafe'
 
 export default async function () {
+  const rolesProject = 'project-my-test-project-7-role'
   log('Login')
   await login(E2E_USER, PASSWORD)
-  await click('#project-select-6')
+  await click(byId(rolesProject))
   await createFeature(0, 'test_feature', false)
   log('Go to Roles')
   await click(byId('organisation-link'))
@@ -51,7 +52,7 @@ export default async function () {
   await t.eval(() => location.reload());
   await t.wait(2000);
   await login(E2E_NON_ADMIN_USER_WITH_A_ROLE, PASSWORD)
-  await click('#project-select-0')
+  await click(byId(rolesProject))
   log('User with permissions can Handle the Features')
   const flagName = 'test_feature'
   await deleteFeature(0, flagName)

frontend/web/components/ProjectManageWidget.tsx

@@ -150,11 +150,11 @@ const ProjectManageWidget: FC<SegmentsPageType> = ({
                           <Link
                             key={id}
                             id={`project-select-${i}`}
-                            to={`/project/${id}/environment/${
-                              environments && environments[0]
-                                ? `${environments[0].api_key}/features`
-                                : 'create'
-                            }`}
+                            data-test={`project-${Utils.toKebabCase(name)}`}
+                            to={`/project/${id}/environment/${environments && environments[0]
+                              ? `${environments[0].api_key}/features`
+                              : 'create'
+                              }`}
                             className='clickable col-md-6 col-xl-3'
                             style={{ minWidth: '190px' }}
                           >