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)

frontend/src/component/project/Project/ProjectSettings/ProjectSettings.tsx

@@ -35,22 +35,37 @@ export const ProjectSettings = () => {
 
     const actionsEnabled = useUiFlag('automatedActions');
 
+    const paidTabs = (...tabs: ITab[]) =>
+        isPro() || isEnterprise() ? tabs : [];
+
     const tabs: ITab[] = [
-        ...(isPro() || isEnterprise()
-            ? [
+        ...paidTabs(
             {
                 id: '',
-                      label: 'Settings',
+                label: 'Project settings',
             },
             {
                 id: 'access',
-                      label: 'Access',
+                label: 'User access',
             },
+        ),
         {
+            id: 'api-access',
+            label: 'API access',
+        },
+        ...paidTabs({
             id: 'segments',
             label: 'Segments',
+        }),
+        {
+            id: 'environments',
+            label: 'Environments',
         },
         {
+            id: 'default-strategy',
+            label: 'Default strategy',
+        },
+        ...paidTabs({
             id: 'change-requests',
             label: 'Change request configuration',
             icon: isPro() ? (
@@ -58,21 +73,7 @@ export const ProjectSettings = () => {
                     <EnterpriseBadge />
                 </StyledBadgeContainer>
             ) : undefined,
-                  },
-              ]
-            : []),
-        {
-            id: 'environments',
-            label: 'Environments',
-        },
-        {
-            id: 'api-access',
-            label: 'API access',
-        },
-        {
-            id: 'default-strategy',
-            label: 'Default strategy',
-        },
+        }),
     ];
 
     if (actionsEnabled) {

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>

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