feat: hide project settings for OSS (#4662)

frontend/src/component/admin/apiToken/ApiTokenForm/ProjectSelector/ProjectSelector.tsx

@@ -2,9 +2,9 @@ import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput';
 import { TokenType } from '../../../../../interfaces/token';
 import React from 'react';
 import { StyledInputDescription } from '../ApiTokenForm.styles';
-import useProjects from '../../../../../hooks/api/getters/useProjects/useProjects';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { ApiTokenFormErrorType } from '../useApiTokenForm';
-import { useOptionalPathParam } from '../../../../../hooks/useOptionalPathParam';
+import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
 
 interface IProjectSelectorProps {
     type: string;

frontend/src/component/common/PremiumFeature/PremiumFeature.tsx

@@ -98,6 +98,11 @@ const PremiumFeatures = {
         url: 'https://docs.getunleash.io/reference/rbac#user-group-sso-integration',
         label: 'Single Sign-On',
     },
+    'project-settings': {
+        plan: FeaturePlan.PRO,
+        url: 'https://docs.getunleash.io/reference/projects',
+        label: 'Project settings',
+    },
 };
 
 type PremiumFeatureType = keyof typeof PremiumFeatures;

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

@@ -102,7 +102,7 @@ export const Project = () => {
         },
         {
             title: 'Project settings',
-            path: `${basePath}/settings`,
+            path: `${basePath}/settings${isOss() ? '/environments' : ''}`,
             name: 'settings',
             flag: undefined,
             new: false,

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

@@ -23,16 +23,12 @@ export const ProjectSettings = () => {
     const navigate = useNavigate();
 
     const tabs: ITab[] = [
-        {
-            id: '',
-            label: 'Settings',
-        },
-        {
-            id: 'environments',
-            label: 'Environments',
-        },
         ...(isPro() || isEnterprise()
             ? [
+                  {
+                      id: '',
+                      label: 'Settings',
+                  },
                   {
                       id: 'access',
                       label: 'Access',
@@ -52,6 +48,10 @@ export const ProjectSettings = () => {
                   },
               ]
             : []),
+        {
+            id: 'environments',
+            label: 'Environments',
+        },
         {
             id: 'api-access',
             label: 'API access',

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

@@ -8,13 +8,27 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { useProjectNameOrId } from 'hooks/api/getters/useProject/useProject';
 import EditProject from './EditProject';
+import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 export const Settings = () => {
     const projectId = useRequiredPathParam('projectId');
     const projectName = useProjectNameOrId(projectId);
     const { hasAccess } = useContext(AccessContext);
+    const { isOss } = useUiConfig();
     usePageTitle(`Project configuration – ${projectName}`);
 
+    if (isOss()) {
+        return (
+            <PageContent
+                header={<PageHeader title="Access" />}
+                sx={{ justifyContent: 'center' }}
+            >
+                <PremiumFeature feature="project-settings" />
+            </PageContent>
+        );
+    }
+
     if (!hasAccess(UPDATE_PROJECT, projectId)) {
         return (
             <PageContent header={<PageHeader title="Access" />}>