From bbe389d19e004424fde8d7b5f4aefe3d2e077cf7 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 1 Nov 2024 10:29:25 +0100
Subject: [PATCH] chore: re-order project settings menu (#8626)

This PR re-orders the project settings menu according to the new design.
It also renames pages as specified. It does *not* add the new
"applications and sdks" link because we don't have that page yet.

I have not put this change behind a flag, because it's not a new feature
and doesn't really change the user experience. However, I'd be happy to
flag it if you think that's better.


![image](https://github.com/user-attachments/assets/42dc3348-e873-49b2-9bd7-8c3b3f4a2532)


The header for the user access tab has also been updated:

![image](https://github.com/user-attachments/assets/7c61da17-2b28-4f39-a9d4-83d9ec1903cd)
---
 .../ProjectSettings/ProjectSettings.tsx       | 59 ++++++++++---------
 .../project/ProjectAccess/ProjectAccess.tsx   |  4 +-
 .../ProjectAccessTable/ProjectAccessTable.tsx |  2 +-
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
index 61b800199c..58670a6e1e 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx
@@ -35,44 +35,45 @@ export const ProjectSettings = () => {
 
     const actionsEnabled = useUiFlag('automatedActions');
 
+    const paidTabs = (...tabs: ITab[]) =>
+        isPro() || isEnterprise() ? tabs : [];
+
     const tabs: ITab[] = [
-        ...(isPro() || isEnterprise()
-            ? [
-                  {
-                      id: '',
-                      label: 'Settings',
-                  },
-                  {
-                      id: 'access',
-                      label: 'Access',
-                  },
-                  {
-                      id: 'segments',
-                      label: 'Segments',
-                  },
-                  {
-                      id: 'change-requests',
-                      label: 'Change request configuration',
-                      icon: isPro() ? (
-                          <StyledBadgeContainer>
-                              <EnterpriseBadge />
-                          </StyledBadgeContainer>
-                      ) : undefined,
-                  },
-              ]
-            : []),
+        ...paidTabs(
+            {
+                id: '',
+                label: 'Project settings',
+            },
+            {
+                id: 'access',
+                label: 'User access',
+            },
+        ),
+        {
+            id: 'api-access',
+            label: 'API access',
+        },
+        ...paidTabs({
+            id: 'segments',
+            label: 'Segments',
+        }),
         {
             id: 'environments',
             label: 'Environments',
         },
-        {
-            id: 'api-access',
-            label: 'API access',
-        },
         {
             id: 'default-strategy',
             label: 'Default strategy',
         },
+        ...paidTabs({
+            id: 'change-requests',
+            label: 'Change request configuration',
+            icon: isPro() ? (
+                <StyledBadgeContainer>
+                    <EnterpriseBadge />
+                </StyledBadgeContainer>
+            ) : undefined,
+        }),
     ];
 
     if (actionsEnabled) {
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
index f4f9625df1..b8ddb8cf44 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@@ -24,7 +24,7 @@ export const ProjectAccess = () => {
     if (isOss()) {
         return (
             <PageContent
-                header={<PageHeader title='Access' />}
+                header={<PageHeader title='User access' />}
                 sx={{ justifyContent: 'center' }}
             >
                 <PremiumFeature feature='access' />
@@ -34,7 +34,7 @@ export const ProjectAccess = () => {
 
     if (!hasAccess([UPDATE_PROJECT, PROJECT_USER_ACCESS_READ], projectId)) {
         return (
-            <PageContent header={<PageHeader title='Access' />}>
+            <PageContent header={<PageHeader title='User access' />}>
                 <Alert severity='error'>
                     You need project owner permissions to access this section.
                 </Alert>
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
index 05b873cd57..df4b7aca42 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx
@@ -402,7 +402,7 @@ export const ProjectAccessTable: VFC = () => {
             header={
                 <PageHeader
                     secondary
-                    title={`Access (${
+                    title={`User access (${
                         rows.length < data.length
                             ? `${rows.length} of ${data.length}`
                             : data.length