feat: disable UI elements if user does not have permissions

apps/web/src/views/settings/WorkspaceSettings.tsx

@@ -12,6 +12,7 @@ import FeedbackModal from "~/components/FeedbackModal";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
+import { usePermissions } from "~/hooks/usePermissions";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
@@ -25,6 +26,7 @@ import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation"
 export default function WorkspaceSettings() {
   const { modalContentType, openModal, isOpen } = useModal();
   const { workspace } = useWorkspace();
+  const { canEditWorkspace } = usePermissions();
   const router = useRouter();
   const { data } = api.user.getUser.useQuery();
   const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
@@ -61,6 +63,7 @@ export default function WorkspaceSettings() {
         <UpdateWorkspaceNameForm
           workspacePublicId={workspace.publicId}
           workspaceName={workspace.name}
+          disabled={!canEditWorkspace}
         />
 
         <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
@@ -70,6 +73,7 @@ export default function WorkspaceSettings() {
           workspacePublicId={workspace.publicId}
           workspaceUrl={workspace.slug ?? ""}
           workspacePlan={workspace.plan ?? "free"}
+          disabled={!canEditWorkspace}
         />
 
         <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
@@ -78,6 +82,7 @@ export default function WorkspaceSettings() {
         <UpdateWorkspaceDescriptionForm
           workspacePublicId={workspace.publicId}
           workspaceDescription={workspace.description ?? ""}
+          disabled={!canEditWorkspace}
         />
 
         <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
@@ -88,6 +93,7 @@ export default function WorkspaceSettings() {
           showEmailsToMembers={Boolean(
             workspaceData?.showEmailsToMembers ?? false,
           )}
+          disabled={!canEditWorkspace}
         />
 
         {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&

apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx

@@ -11,9 +11,11 @@ import { api } from "~/utils/api";
 const UpdateWorkspaceDescriptionForm = ({
   workspacePublicId,
   workspaceDescription,
+  disabled = false,
 }: {
   workspacePublicId: string;
   workspaceDescription: string;
+  disabled?: boolean;
 }) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -78,9 +80,10 @@ const UpdateWorkspaceDescriptionForm = ({
         <Input
           {...register("description")}
           errorMessage={errors.description?.message}
+          disabled={disabled}
         />
       </div>
-      {isDirty && (
+      {isDirty && !disabled && (
         <div>
           <Button
             onClick={handleSubmit(onSubmit)}

apps/web/src/views/settings/components/UpdateWorkspaceEmailVisibilityForm.tsx

@@ -7,9 +7,11 @@ import { api } from "~/utils/api";
 export default function UpdateWorkspaceEmailVisibilityForm({
   workspacePublicId,
   showEmailsToMembers,
+  disabled = false,
 }: {
   workspacePublicId: string;
   showEmailsToMembers: boolean;
+  disabled?: boolean;
 }) {
   const utils = api.useUtils();
   const [isChecked, setIsChecked] = useState(showEmailsToMembers);
@@ -27,6 +29,7 @@ export default function UpdateWorkspaceEmailVisibilityForm({
   });
 
   const handleToggle = () => {
+    if (disabled) return;
     const newValue = !isChecked;
     setIsChecked(newValue);
     updateWorkspace.mutate({
@@ -46,7 +49,7 @@ export default function UpdateWorkspaceEmailVisibilityForm({
         isChecked={isChecked}
         onChange={handleToggle}
         label=""
-        disabled={updateWorkspace.isPending}
+        disabled={disabled || updateWorkspace.isPending}
       />
     </div>
   );

apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx

@@ -20,9 +20,11 @@ type FormValues = z.infer<typeof schema>;
 const UpdateWorkspaceNameForm = ({
   workspacePublicId,
   workspaceName,
+  disabled = false,
 }: {
   workspacePublicId: string;
   workspaceName: string;
+  disabled?: boolean;
 }) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -70,9 +72,13 @@ const UpdateWorkspaceNameForm = ({
   return (
     <div className="flex gap-2">
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
-        <Input {...register("name")} errorMessage={errors.name?.message} />
+        <Input
+          {...register("name")}
+          errorMessage={errors.name?.message}
+          disabled={disabled}
+        />
       </div>
-      {isDirty && (
+      {isDirty && !disabled && (
         <div>
           <Button
             onClick={handleSubmit(onSubmit)}

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -16,10 +16,12 @@ const UpdateWorkspaceUrlForm = ({
   workspacePublicId,
   workspaceUrl,
   workspacePlan,
+  disabled = false,
 }: {
   workspacePublicId: string;
   workspaceUrl: string;
   workspacePlan: "free" | "pro" | "enterprise";
+  disabled?: boolean;
 }) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -136,9 +138,10 @@ const UpdateWorkspaceUrlForm = ({
               <HiCheck className="h-4 w-4 dark:text-dark-1000" />
             ) : null
           }
+          disabled={disabled}
         />
       </div>
-      {isDirty && (
+      {isDirty && !disabled && (
         <div>
           <Button
             onClick={handleSubmit(onSubmit)}