chore: Improve admin create project settings flow (#3160)

frontend/common/utils/utils.tsx

@@ -7,6 +7,7 @@ import {
   FlagsmithValue,
   MultivariateFeatureStateValue,
   MultivariateOption,
+  Organisation,
   Project as ProjectType,
   ProjectFlag,
   SegmentCondition,
@@ -131,6 +132,18 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   getApproveChangeRequestPermission() {
     return 'APPROVE_CHANGE_REQUEST'
   },
+  getCreateProjectPermission(organisation: Organisation) {
+    if (organisation?.restrict_project_create_to_admin) {
+      return 'ADMIN'
+    }
+    return 'CREATE_PROJECT'
+  },
+  getCreateProjectPermissionDescription(organisation: Organisation) {
+    if (organisation?.restrict_project_create_to_admin) {
+      return 'Administrator'
+    }
+    return 'Create Project'
+  },
   getFeatureStatesEndpoint(_project: ProjectType) {
     const project = _project || ProjectStore.model
     if (project && project.use_edge_identities) {

frontend/web/components/pages/ProjectSelectPage.js

@@ -143,14 +143,18 @@ const ProjectSelectPage = class extends Component {
                               <div className='col-md-6 col-xl-3'>
                                 <Permission
                                   level='organisation'
-                                  permission='CREATE_PROJECT'
+                                  permission={Utils.getCreateProjectPermission(
+                                    AccountStore.getOrganisation(),
+                                  )}
                                   id={AccountStore.getOrganisation().id}
                                 >
                                   {({ permission }) => {
                                     return Utils.renderWithPermission(
                                       permission,
-                                      Constants.environmentPermissions(
-                                        'Create Project',
+                                      Constants.organisationPermissions(
+                                        Utils.getCreateProjectPermissionDescription(
+                                          AccountStore.getOrganisation(),
+                                        ),
                                       ),
                                       <Button
                                         disabled={!permission}
@@ -210,14 +214,18 @@ const ProjectSelectPage = class extends Component {
                         <div>
                           <Permission
                             level='organisation'
-                            permission='CREATE_PROJECT'
+                            permission={Utils.getCreateProjectPermission(
+                              AccountStore.getOrganisation(),
+                            )}
                             id={AccountStore.getOrganisation().id}
                           >
                             {({ permission }) => {
                               return Utils.renderWithPermission(
                                 permission,
-                                Constants.environmentPermissions(
-                                  'Create Project',
+                                Constants.organisationPermissions(
+                                  Utils.getCreateProjectPermissionDescription(
+                                    AccountStore.getOrganisation(),
+                                  ),
                                 ),
                                 <div className='col-md-6 col-xl-3'>
                                   <Button

frontend/web/styles/project/_buttons.scss

@@ -223,6 +223,9 @@ button.btn {
     &.btn-project-create {
       background-color: transparent;
       border: 1px dashed $basic-alpha-24;
+      &:disabled {
+        color: $body-text;
+      }
       &:hover {
         background-color: transparent;
         & .btn-project-icon {