fix: project setting member role validation (#2369)

* fix: project setting member role validation

* chore: opacity removed from member setting page

* chore: member setting page validation

web/components/automation/auto-archive-automation.tsx

@@ -13,9 +13,14 @@ import { IProject } from "types";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+export const AutoArchiveAutomation: React.FC<Props> = ({
+  projectDetails,
+  handleChange,
+  disabled = false,
+}) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const initialValues: Partial<IProject> = { archive_in: 1 };
@@ -49,6 +54,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
                 : handleChange({ archive_in: 0 })
             }
             size="sm"
+            disabled={disabled}
           />
         </div>
 
@@ -70,6 +76,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
                   input
                   verticalPosition="bottom"
                   width="w-full"
+                  disabled={disabled}
                 >
                   <>
                     {PROJECT_AUTOMATION_MONTHS.map((month) => (

web/components/automation/auto-close-automation.tsx

@@ -24,9 +24,14 @@ import { getStatesList } from "helpers/state.helper";
 type Props = {
   projectDetails: IProject | undefined;
   handleChange: (formData: Partial<IProject>) => Promise<void>;
+  disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange }) => {
+export const AutoCloseAutomation: React.FC<Props> = ({
+  projectDetails,
+  handleChange,
+  disabled = false,
+}) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const router = useRouter();
@@ -98,6 +103,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                 : handleChange({ close_in: 0, default_state: null })
             }
             size="sm"
+            disabled={disabled}
           />
         </div>
 
@@ -119,6 +125,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                     }}
                     input
                     width="w-full"
+                    disabled={disabled}
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (

web/components/project/member-select.tsx

@@ -16,9 +16,10 @@ import { PROJECT_MEMBERS } from "constants/fetch-keys";
 type Props = {
   value: any;
   onChange: (val: string) => void;
+  isDisabled?: boolean;
 };
 
-export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
+export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -79,6 +80,7 @@ export const MemberSelect: React.FC<Props> = ({ value, onChange }) => {
       position="right"
       width="w-full"
       onChange={onChange}
+      disabled={isDisabled}
     />
   );
 };

web/components/ui/dropdowns/custom-menu.tsx

@@ -46,6 +46,7 @@ const CustomMenu = ({
             type="button"
             onClick={menuButtonOnClick}
             className={customButtonClassName}
+            disabled={disabled}
           >
             {customButton}
           </Menu.Button>

web/components/ui/empty-state.tsx

@@ -16,6 +16,7 @@ type Props = {
   };
   secondaryButton?: React.ReactNode;
   isFullScreen?: boolean;
+  disabled?: boolean;
 };
 
 export const EmptyState: React.FC<Props> = ({
@@ -25,6 +26,7 @@ export const EmptyState: React.FC<Props> = ({
   primaryButton,
   secondaryButton,
   isFullScreen = true,
+  disabled = false,
 }) => (
   <div
     className={`h-full w-full mx-auto grid place-items-center p-8 ${
@@ -37,7 +39,11 @@ export const EmptyState: React.FC<Props> = ({
       {description && <p className="text-custom-text-300 mb-7 sm:mb-8">{description}</p>}
       <div className="flex items-center gap-4">
         {primaryButton && (
-          <PrimaryButton className="flex items-center gap-1.5" onClick={primaryButton.onClick}>
+          <PrimaryButton
+            className="flex items-center gap-1.5"
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
             {primaryButton.icon}
             {primaryButton.text}
           </PrimaryButton>

web/components/ui/toggle-switch.tsx

@@ -21,7 +21,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
         size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
       } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
         value ? "bg-custom-primary-100" : "bg-gray-700"
-      } ${className || ""}`}
+      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
     >
       <span className="sr-only">{label}</span>
       <span
@@ -36,7 +36,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
                 ? "translate-x-4"
                 : "translate-x-5") + " bg-white"
             : "translate-x-0.5 bg-custom-background-90"
-        }`}
+        } ${disabled ? "cursor-not-allowed" : ""}`}
       />
     </Switch>
   );