feat: restricted permissions for project edit page (canonical#1119)

src/api/projects.tsx

@@ -11,6 +11,8 @@ const projectEntitlements = [
   "can_create_networks",
   "can_create_profiles",
   "can_create_storage_volumes",
+  "can_delete",
+  "can_edit",
 ];
 
 export const fetchProjects = (

src/context/auth.tsx

@@ -77,7 +77,9 @@ export const AuthProvider: FC<ProviderProps> = ({ children }) => {
   const certificate = certificates.find(
     (certificate) => certificate.fingerprint === fingerprint,
   );
-  const isRestricted = certificate?.restricted ?? defaultProject !== "default";
+  const isRestricted =
+    isFineGrained() !== true &&
+    (certificate?.restricted ?? defaultProject !== "default");
 
   const serverEntitlements = (currentIdentity?.effective_permissions || [])
     .filter((permission) => permission.entity_type === "server")

src/pages/projects/EditProject.tsx

@@ -24,6 +24,7 @@ import { useSupportedFeatures } from "context/useSupportedFeatures";
 import FormSubmitBtn from "components/forms/FormSubmitBtn";
 import ResourceLink from "components/ResourceLink";
 import { useProfile } from "context/useProfiles";
+import { useProjectEntitlements } from "util/entitlements/projects";
 
 interface Props {
   project: LxdProject;
@@ -38,6 +39,7 @@ const EditProject: FC<Props> = ({ project }) => {
   const { section } = useParams<{ section?: string }>();
   const { hasProjectsNetworksZones, hasStorageBuckets } =
     useSupportedFeatures();
+  const { canEditProject } = useProjectEntitlements();
 
   const { data: profile } = useProfile("default", project.name);
   const updateFormHeight = () => {
@@ -50,7 +52,10 @@ const EditProject: FC<Props> = ({ project }) => {
     name: Yup.string().required(),
   });
 
-  const initialValues = getProjectEditValues(project, profile);
+  const editRestriction = canEditProject(project)
+    ? undefined
+    : "You do not have permission to edit this project";
+  const initialValues = getProjectEditValues(project, profile, editRestriction);
 
   const formik: FormikProps<ProjectFormValues> = useFormik({
     initialValues: initialValues,

src/pages/projects/ProjectConfigurationHeader.tsx

@@ -12,6 +12,7 @@ import { useEventQueue } from "context/eventQueue";
 import { useDocs } from "context/useDocs";
 import { useToastNotification } from "context/toastNotificationProvider";
 import ResourceLink from "components/ResourceLink";
+import { useProjectEntitlements } from "util/entitlements/projects";
 
 interface Props {
   project: LxdProject;
@@ -23,6 +24,7 @@ const ProjectConfigurationHeader: FC<Props> = ({ project }) => {
   const navigate = useNavigate();
   const toastNotify = useToastNotification();
   const controllerState = useState<AbortController | null>(null);
+  const { canEditProject } = useProjectEntitlements();
 
   const RenameSchema = Yup.object().shape({
     name: Yup.string()
@@ -90,6 +92,18 @@ const ProjectConfigurationHeader: FC<Props> = ({ project }) => {
     },
   });
 
+  const getRenameDisabledReason = () => {
+    if (!canEditProject(project)) {
+      return "You do not have permission to rename this project";
+    }
+
+    if (project.name === "default") {
+      return "Cannot rename the default project";
+    }
+
+    return undefined;
+  };
+
   return (
     <RenameHeader
       name={project.name}
@@ -102,11 +116,7 @@ const ProjectConfigurationHeader: FC<Props> = ({ project }) => {
           Project configuration
         </HelpLink>,
       ]}
-      renameDisabledReason={
-        project.name === "default"
-          ? "Cannot rename the default project"
-          : undefined
-      }
+      renameDisabledReason={getRenameDisabledReason()}
       controls={<DeleteProjectBtn project={project} />}
       isLoaded={Boolean(project)}
       formik={formik}

src/pages/projects/ProjectSelector.tsx

@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import ProjectSelectorList from "pages/projects/ProjectSelectorList";
 import { defaultFirst } from "util/helpers";
 import { useProjects } from "context/useProjects";
+import { useServerEntitlements } from "util/entitlements/server";
 
 interface Props {
   activeProject: string;
@@ -17,6 +18,7 @@ interface Props {
 const ProjectSelector: FC<Props> = ({ activeProject }): React.JSX.Element => {
   const navigate = useNavigate();
   const searchRef = useRef<HTMLInputElement>(null);
+  const { canCreateProjects } = useServerEntitlements();
 
   const { data: projects = [] } = useProjects();
 
@@ -62,6 +64,12 @@ const ProjectSelector: FC<Props> = ({ activeProject }): React.JSX.Element => {
             onClick={() => navigate("/ui/projects/create")}
             className="p-contextual-menu__link"
             hasIcon
+            disabled={!canCreateProjects()}
+            title={
+              canCreateProjects()
+                ? ""
+                : "You do not have permission to create projects"
+            }
           >
             <Icon name="plus" light />
             <span>Create project</span>

src/pages/projects/actions/DeleteProjectBtn.tsx

@@ -18,6 +18,7 @@ import { useToastNotification } from "context/toastNotificationProvider";
 import { filterUsedByType } from "util/usedBy";
 import { ResourceType } from "util/resourceDetails";
 import ResourceLabel from "components/ResourceLabel";
+import { useProjectEntitlements } from "util/entitlements/projects";
 
 interface Props {
   project: LxdProject;
@@ -82,10 +83,14 @@ const DeleteProjectBtn: FC<Props> = ({ project }) => {
   const queryClient = useQueryClient();
   const [isLoading, setLoading] = useState(false);
   const navigate = useNavigate();
+  const { canDeleteProject } = useProjectEntitlements();
 
   const isDefaultProject = project.name === "default";
   const isEmpty = isProjectEmpty(project);
   const getHoverText = () => {
+    if (!canDeleteProject(project)) {
+      return "You do not have permission to delete this project";
+    }
     if (isDefaultProject) {
       return "The default project cannot be deleted";
     }
@@ -125,7 +130,7 @@ const DeleteProjectBtn: FC<Props> = ({ project }) => {
         "has-icon": !isSmallScreen,
       })}
       loading={isLoading}
-      disabled={isDefaultProject || !isEmpty}
+      disabled={!canDeleteProject(project) || isDefaultProject || !isEmpty}
       confirmationModalProps={{
         title: "Confirm delete",
         confirmButtonLabel: "Delete",

src/pages/projects/forms/ProjectDetailsForm.tsx

@@ -149,6 +149,8 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
               formik.handleChange(e);
             }}
             value={formik.values.description}
+            disabled={!!formik.values.editRestriction}
+            title={formik.values.editRestriction}
           />
           <StoragePoolSelector
             value={formik.values.default_instance_storage_pool}
@@ -178,9 +180,10 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
           />
           <div
             title={
-              isDefaultProject
+              formik.values.editRestriction ??
+              (isDefaultProject
                 ? "Custom features are immutable on the default project"
-                : ""
+                : "")
             }
           >
             <Select
@@ -209,6 +212,7 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                 },
               ]}
               disabled={
+                !!formik.values.editRestriction ||
                 isDefaultProject ||
                 (isNonEmpty && hadFeaturesNetwork) ||
                 (isNonEmpty && hadFeaturesNetworkZones)
@@ -230,7 +234,11 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                     );
                   }}
                   checked={formik.values.features_images}
-                  disabled={isDefaultProject || isNonEmpty}
+                  disabled={
+                    !!formik.values.editRestriction ||
+                    isDefaultProject ||
+                    isNonEmpty
+                  }
                 />
                 <CheckboxInput
                   id="features_profiles"
@@ -255,7 +263,11 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                     }
                   }}
                   checked={formik.values.features_profiles}
-                  disabled={isDefaultProject || isNonEmpty}
+                  disabled={
+                    !!formik.values.editRestriction ||
+                    isDefaultProject ||
+                    isNonEmpty
+                  }
                 />
                 <CheckboxInput
                   id="features_networks"
@@ -269,7 +281,11 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                     );
                   }}
                   checked={formik.values.features_networks}
-                  disabled={isDefaultProject || isNonEmpty}
+                  disabled={
+                    !!formik.values.editRestriction ||
+                    isDefaultProject ||
+                    isNonEmpty
+                  }
                 />
                 {hasProjectsNetworksZones && (
                   <CheckboxInput
@@ -285,6 +301,7 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                     }}
                     checked={formik.values.features_networks_zones}
                     disabled={
+                      !!formik.values.editRestriction ||
                       isDefaultProject ||
                       (isNonEmpty && hadFeaturesNetworkZones)
                     }
@@ -303,7 +320,11 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                       );
                     }}
                     checked={formik.values.features_storage_buckets}
-                    disabled={isDefaultProject || isNonEmpty}
+                    disabled={
+                      !!formik.values.editRestriction ||
+                      isDefaultProject ||
+                      isNonEmpty
+                    }
                   />
                 )}
                 <CheckboxInput
@@ -318,40 +339,47 @@ const ProjectDetailsForm: FC<Props> = ({ formik, project, isEdit }) => {
                     );
                   }}
                   checked={formik.values.features_storage_volumes}
-                  disabled={isDefaultProject || isNonEmpty}
+                  disabled={
+                    !!formik.values.editRestriction ||
+                    isDefaultProject ||
+                    isNonEmpty
+                  }
                 />
               </>
             )}
           </div>
 
           <hr />
-          <CheckboxInput
-            id="custom_restrictions"
-            name="custom_restrictions"
-            label={
-              <>
-                Allow custom restrictions on a project level
-                <Tooltip
-                  className="checkbox-label-tooltip"
-                  message={`Custom restrictions are only available${"\n"}to projects with enabled profiles`}
-                >
-                  <Icon name="information" />
-                </Tooltip>
-              </>
-            }
-            onChange={() => {
-              ensureEditMode(formik);
-              void formik.setFieldValue(
-                "restricted",
-                !formik.values.restricted,
-              );
-            }}
-            checked={formik.values.restricted}
-            disabled={
-              formik.values.features_profiles === false &&
-              features === "customised"
-            }
-          />
+          <div title={formik.values.editRestriction}>
+            <CheckboxInput
+              id="custom_restrictions"
+              name="custom_restrictions"
+              label={
+                <>
+                  Allow custom restrictions on a project level
+                  <Tooltip
+                    className="checkbox-label-tooltip"
+                    message={`Custom restrictions are only available${"\n"}to projects with enabled profiles`}
+                  >
+                    <Icon name="information" />
+                  </Tooltip>
+                </>
+              }
+              onChange={() => {
+                ensureEditMode(formik);
+                void formik.setFieldValue(
+                  "restricted",
+                  !formik.values.restricted,
+                );
+              }}
+              checked={formik.values.restricted}
+              disabled={
+                !!formik.values.editRestriction ||
+                (formik.values.features_profiles === false &&
+                  features === "customised")
+              }
+            />
+          </div>
         </Col>
       </Row>
     </ScrollableForm>

src/util/entitlements/projects.tsx

@@ -47,12 +47,20 @@ export const useProjectEntitlements = () => {
       project?.access_entitlements,
     );
 
+  const canDeleteProject = (project?: LxdProject) =>
+    hasEntitlement(isFineGrained, "can_delete", project?.access_entitlements);
+
+  const canEditProject = (project?: LxdProject) =>
+    hasEntitlement(isFineGrained, "can_edit", project?.access_entitlements);
+
   return {
     canCreateImageAliases,
     canCreateImages,
     canCreateInstances,
     canCreateNetworks,
     canCreateProfiles,
     canCreateStorageVolumes,
+    canDeleteProject,
+    canEditProject,
   };
 };

src/util/entitlements/server.tsx

@@ -4,6 +4,20 @@ import { hasEntitlement } from "./helpers";
 export const useServerEntitlements = () => {
   const { isFineGrained, serverEntitlements } = useAuth();
 
+  const canCreateProjects = () =>
+    hasEntitlement(isFineGrained, "can_create_projects", serverEntitlements) ||
+    hasEntitlement(isFineGrained, "project_manager", serverEntitlements) ||
+    hasEntitlement(isFineGrained, "admin", serverEntitlements);
+
+  const canCreateStoragePools = () =>
+    hasEntitlement(
+      isFineGrained,
+      "can_create_storage_pools",
+      serverEntitlements,
+    ) ||
+    hasEntitlement(isFineGrained, "admin", serverEntitlements) ||
+    hasEntitlement(isFineGrained, "storage_pool_manager", serverEntitlements);
+
   const canEditServerConfiguration = () =>
     hasEntitlement(isFineGrained, "can_edit", serverEntitlements) ||
     hasEntitlement(isFineGrained, "admin", serverEntitlements);
@@ -18,16 +32,8 @@ export const useServerEntitlements = () => {
     hasEntitlement(isFineGrained, "admin", serverEntitlements) ||
     hasEntitlement(isFineGrained, "viewer", serverEntitlements);
 
-  const canCreateStoragePools = () =>
-    hasEntitlement(
-      isFineGrained,
-      "can_create_storage_pools",
-      serverEntitlements,
-    ) ||
-    hasEntitlement(isFineGrained, "admin", serverEntitlements) ||
-    hasEntitlement(isFineGrained, "storage_pool_manager", serverEntitlements);
-
   return {
+    canCreateProjects,
     canCreateStoragePools,
     canEditServerConfiguration,
     canViewMetrics,

src/util/projectEdit.tsx

@@ -18,6 +18,7 @@ import type { LxdProfile } from "types/profile";
 export const getProjectEditValues = (
   project: LxdProject,
   defaultProfile?: LxdProfile,
+  editRestriction?: string,
 ): ProjectFormValues => {
   return {
     name: project.name,
@@ -98,6 +99,7 @@ export const getProjectEditValues = (
     restricted_network_subnets: project.config["restricted.networks.subnets"],
     restricted_network_uplinks: project.config["restricted.networks.uplinks"],
     restricted_network_zones: project.config["restricted.networks.zones"],
+    editRestriction,
   };
 };