From f079bbe5ae184589136bec5fadf0295f7c8628e8 Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 10:14:56 +0530
Subject: [PATCH 1/7] add onblur save mechanism

---
 .../[id]/edit/components/AccessModelForm.tsx  | 33 +++++++++++++++----
 components/icons.tsx                          |  4 +++
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
index c0b3ef6d..8b3d0ddd 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
@@ -269,7 +269,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
       GraphQL(editaccessModel, data),
     {
       onSuccess: (res: any) => {
-        toast('Access Model Saved');
+        // toast('Access Model Saved');
         accessModelDetailsRefetch();
         accessModelListRefetch();
         setAccessModelId(res?.editAccessModel?.id);
@@ -284,6 +284,19 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
+  const handleSave = (updatedData: any) => {
+    mutate({
+      accessModelInput: {
+        name: updatedData.name,
+        dataset: updatedData.dataset,
+        description: updatedData.description,
+        type: updatedData.type as AccessTypes,
+        accessModelId: accessModelId || null,
+        resources: updatedData.resources,
+      },
+    });
+  };
+
   return (
     <div className="rounded-2 border-2 border-solid border-baseGraySlateSolid6 px-6 py-8">
       <div className="mb-6 flex flex-wrap items-center justify-between gap-6">
@@ -363,16 +376,13 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         </Sheet>
       </div>
       <Divider />
-      {isLoading ||
-      editMutationLoading ||
-      accessModelDetailsLoading ||
-      accessModelListLoading ? (
+      {isLoading ? (
         <div className="mt-8 flex justify-center">
           <Spinner />
         </div>
       ) : (
         <div className="mt-6 flex flex-col gap-8">
-          <div className="text-center">
+          {/* <div className="text-center">
             <Button
               onClick={() =>
                 mutate({
@@ -389,6 +399,14 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
             >
               Save Access Type
             </Button>
+          </div> */}
+          <div className="flex justify-end">
+            <Text>Auto Save </Text>
+            {editMutationLoading ? (
+              <Icon source={Icons.loader} />
+            ) : (
+              <Icon source={Icons.checkmark} />
+            )}
           </div>
           <div className="flex flex-col gap-6">
             <div className="flex  gap-6">
@@ -402,6 +420,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                   name="name"
                   required
                   helpText="To know about best practices for naming Resources go to our User Guide"
+                  onBlur={() => handleSave(accessModelData)}
                 />
               </div>
               <Select
@@ -419,6 +438,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 onChange={(e) =>
                   setAccessModelData({ ...accessModelData, type: e })
                 }
+                onBlur={() => handleSave(accessModelData)}
               />
             </div>
             <TextField
@@ -432,6 +452,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
               label="Description"
               name="description"
               multiline={4}
+              onBlur={() => handleSave(accessModelData)}
             />
           </div>
 
diff --git a/components/icons.tsx b/components/icons.tsx
index 25666f83..ce72621b 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -8,6 +8,7 @@ import {
   IconBrandGithubFilled,
   IconBrandLinkedin,
   IconBrandTwitterFilled,
+  IconCheck,
   IconCircleCheckFilled,
   IconCloudUpload,
   IconDatabase,
@@ -22,6 +23,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconLink,
+  IconLoader,
   IconMenu2,
   IconPencil,
   IconPlus,
@@ -78,4 +80,6 @@ export const Icons: {
   github: IconBrandGithubFilled,
   download: IconDownload,
   alert: IconAlertCircleFilled,
+  checkmark: IconCheck,
+  loader: IconLoader,
 };

From 01022631e903b5238f1024b23b7b13eddd60fcc8 Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 11:11:46 +0530
Subject: [PATCH 2/7] fix auto save

---
 .../[id]/edit/components/AccessModelForm.tsx  | 116 +++++++++---------
 .../[id]/edit/components/ResourceSelector.tsx |  42 +++++--
 2 files changed, 87 insertions(+), 71 deletions(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
index 8b3d0ddd..15d4fd9a 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
@@ -131,6 +131,9 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     resources: [],
     accessModelId: '',
   });
+  const [previousAccessModelData, setPreviousAccessModelData] =
+    useState(accessModelData);
+
   const [selectedResources, setSelectedResources] = useState<string[]>([]);
   const [showSelectAll, setShowSelectAll] = useState(false);
 
@@ -161,7 +164,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
 
       accessModelDetailsRefetch();
       // Update accessModelData with the received data
-      setAccessModelData({
+      const newData = {
         dataset: params.id,
         name: name,
         description: description,
@@ -171,7 +174,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
           resource: resource.resource.id,
           fields: resource.fields.map((field: any) => +field.id),
         })),
-      });
+      };
+
+      setAccessModelData(newData);
+      setPreviousAccessModelData(newData);
 
       // Update selectedResources and selectedFields based on modelResources
       const selectedResourcesIds = modelResources.map((resource: any) => ({
@@ -203,13 +209,14 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     setSelectedFields(resourceDetails);
     const newResources = resourceDetails.map((resource: any) => ({
       resource: resource.value,
-      fields: resource.schema.map((field: any) => field.id),
+      fields: resource.schema.map((field: any) => +field.id),
     }));
 
     setAccessModelData((prevData: any) => ({
       ...prevData,
       resources: newResources,
     }));
+
     if (resourceDetails.length === 0) {
       setAccessModelData((prevData: any) => ({
         ...prevData,
@@ -221,6 +228,8 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         resources: [...prevData.resources],
       }));
     }
+
+    handleSave({ ...accessModelData, resources: newResources });
   };
 
   const handleRemoveResource = (resourceId: any) => {
@@ -235,12 +244,16 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     );
 
     // Remove the corresponding resource from accessModelData.resources
+    const updatedResources = accessModelData.resources.filter(
+      (resource: any) => resource.resource !== resourceId
+    );
+
     setAccessModelData((prevData: any) => ({
       ...prevData,
-      resources: prevData.resources.filter(
-        (resource: any) => resource.resource !== resourceId
-      ),
+      resources: updatedResources,
     }));
+
+    handleSave({ ...accessModelData, resources: updatedResources });
   };
 
   const handleSelectAll = () => {
@@ -255,13 +268,17 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
     setSelectedResources(allResources);
     setShowSelectAll(false);
 
+    const updatedResources = allResources.map((resource: any) => ({
+      resource: resource.value,
+      fields: resource.schema.map((option: any) => option.value),
+    }));
+
     setAccessModelData((prevData) => ({
       ...prevData,
-      resources: allResources.map((resource: any) => ({
-        resource: resource.value,
-        fields: resource.schema.map((option: any) => option.value),
-      })),
+      resources: updatedResources,
     }));
+
+    handleSave({ ...accessModelData, resources: updatedResources });
   };
 
   const { mutate, isLoading: editMutationLoading } = useMutation(
@@ -273,8 +290,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         accessModelDetailsRefetch();
         accessModelListRefetch();
         setAccessModelId(res?.editAccessModel?.id);
-
-        // setList(true);
+        setPreviousAccessModelData(accessModelData);
       },
       onError: (err: any) => {
         toast(`Received ${err} during access model saving`);
@@ -285,16 +301,25 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
   const handleSave = (updatedData: any) => {
-    mutate({
-      accessModelInput: {
-        name: updatedData.name,
-        dataset: updatedData.dataset,
-        description: updatedData.description,
-        type: updatedData.type as AccessTypes,
-        accessModelId: accessModelId || null,
-        resources: updatedData.resources,
-      },
-    });
+    if (
+      JSON.stringify(updatedData) !== JSON.stringify(previousAccessModelData)
+    ) {
+      mutate({
+        accessModelInput: {
+          name: updatedData.name,
+          dataset: params.id,
+          description: updatedData.description,
+          type: updatedData.type as AccessTypes,
+          resources: updatedData.resources,
+          accessModelId: accessModelId || null,
+        },
+      });
+    }
+  };
+
+  const handleChange = (field: string, value: any) => {
+    const updatedData = { ...accessModelData, [field]: value };
+    setAccessModelData(updatedData);
   };
 
   return (
@@ -356,11 +381,12 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 (item: any, index: any) => (
                   <div
                     key={index}
-                    className="  rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6  py-3  "
+                    className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${accessModelId === item.id ? ' bg-baseGraySlateSolid5' : ''}`}
                   >
                     <Button
                       kind={'tertiary'}
                       className="flex w-full justify-start"
+                      disabled={accessModelId === item.id}
                       onClick={() => {
                         setAccessModelId(item.id);
                         setIsSheetOpen(false);
@@ -382,28 +408,10 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
         </div>
       ) : (
         <div className="mt-6 flex flex-col gap-8">
-          {/* <div className="text-center">
-            <Button
-              onClick={() =>
-                mutate({
-                  accessModelInput: {
-                    name: accessModelData.name,
-                    dataset: accessModelData.dataset,
-                    description: accessModelData.description,
-                    type: accessModelData.type as AccessTypes,
-                    accessModelId: accessModelId || null,
-                    resources: accessModelData.resources,
-                  },
-                })
-              }
-            >
-              Save Access Type
-            </Button>
-          </div> */}
-          <div className="flex justify-end">
-            <Text>Auto Save </Text>
+          <div className="flex justify-end gap-2">
+            <Text color="highlight">Auto Save </Text>
             {editMutationLoading ? (
-              <Icon source={Icons.loader} />
+              <Spinner />
             ) : (
               <Icon source={Icons.checkmark} />
             )}
@@ -413,14 +421,12 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
               <div className=" w-4/5">
                 <TextField
                   value={accessModelData.name}
-                  onChange={(e) =>
-                    setAccessModelData({ ...accessModelData, name: e })
-                  }
+                  onChange={(e) => handleChange('name', e)}
+                  onBlur={() => handleSave(accessModelData)}
                   label="Access Type Name"
                   name="name"
                   required
                   helpText="To know about best practices for naming Resources go to our User Guide"
-                  onBlur={() => handleSave(accessModelData)}
                 />
               </div>
               <Select
@@ -435,24 +441,17 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 defaultValue={'PUBLIC'}
                 value={accessModelData.type}
                 placeholder="Select"
-                onChange={(e) =>
-                  setAccessModelData({ ...accessModelData, type: e })
-                }
+                onChange={(e) => handleChange('type', e)}
                 onBlur={() => handleSave(accessModelData)}
               />
             </div>
             <TextField
               value={accessModelData.description}
-              onChange={(e) =>
-                setAccessModelData({
-                  ...accessModelData,
-                  description: e,
-                })
-              }
+              onChange={(e) => handleChange('description', e)}
+              onBlur={() => handleSave(accessModelData)}
               label="Description"
               name="description"
               multiline={4}
-              onBlur={() => handleSave(accessModelData)}
             />
           </div>
 
@@ -500,6 +499,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
                 handleRemoveResource={handleRemoveResource}
                 accessModelData={accessModelData}
                 setAccessModelData={setAccessModelData}
+                handleSave={handleSave}
               />
             );
           })}
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
index e1fa9233..a726da62 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
@@ -10,6 +10,7 @@ interface ResourceSelectorProps {
   handleRemoveResource: (resourceId: string) => void;
   accessModelData: any;
   setAccessModelData: (data: any) => void;
+  handleSave: (updatedData: any) => void;
 }
 
 const ResourceSelector: React.FC<ResourceSelectorProps> = ({
@@ -17,6 +18,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
   handleRemoveResource,
   accessModelData,
   setAccessModelData,
+  handleSave,
 }) => {
   const [selectAllFields, setSelectAllFields] = useState(true);
   const [options, setOptions] = useState<{ label: string; value: string }[]>(
@@ -57,10 +59,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
       );
     } else if (selectAllFields) {
       setSelectedFields(initialOptions);
-      setAccessModelData((prevData: any) => ({
-        ...prevData,
+      const updatedData = {
+        ...accessModelData,
         resources: [
-          ...prevData.resources.filter(
+          ...accessModelData.resources.filter(
             (resource: any) => resource.resource !== selectedResource.id
           ),
           {
@@ -70,9 +72,17 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
             ), // Convert to integer
           },
         ],
-      }));
+      };
+      setAccessModelData(updatedData);
+      handleSave(updatedData);
     }
-  }, [selectedResource, accessModelData, selectAllFields]);
+  }, [
+    selectedResource,
+    accessModelData,
+    selectAllFields,
+    setAccessModelData,
+    handleSave,
+  ]);
 
   const handleFieldSelection = (selectedOptions: any) => {
     const updatedFields = selectedOptions.map((option: any) => ({
@@ -82,10 +92,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
 
     setSelectedFields(updatedFields);
 
-    setAccessModelData((prevData: any) => ({
-      ...prevData,
+    const updatedData = {
+      ...accessModelData,
       resources: [
-        ...prevData.resources.filter(
+        ...accessModelData.resources.filter(
           (resource: any) => resource.resource !== selectedResource.id
         ),
         {
@@ -93,7 +103,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
           fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
         },
       ],
-    }));
+    };
+
+    setAccessModelData(updatedData);
+    handleSave(updatedData);
 
     setSelectAllFields(updatedFields.length === options.length);
   };
@@ -103,10 +116,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
     setSelectAllFields(!selectAllFields);
     setSelectedFields(updatedFields);
 
-    setAccessModelData((prevData: any) => ({
-      ...prevData,
+    const updatedData = {
+      ...accessModelData,
       resources: [
-        ...prevData.resources.filter(
+        ...accessModelData.resources.filter(
           (resource: any) => resource.resource !== selectedResource.id
         ),
         {
@@ -114,7 +127,10 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
           fields: updatedFields.map((field: any) => parseInt(field.value, 10)), // Convert to integer
         },
       ],
-    }));
+    };
+
+    setAccessModelData(updatedData);
+    handleSave(updatedData);
   };
 
   return (

From 44781ad915db9f5f6c67f7c7b31eeab1d22554ec Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 12:05:52 +0530
Subject: [PATCH 3/7] fix responsiveness

---
 .../dataset/[id]/edit/components/ResourceSelector.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
index a726da62..6fc50d81 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
@@ -148,9 +148,9 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
         </Button>
       </div>
       <div className="flex flex-wrap gap-6 px-8">
-        <div className="flex w-3/5 flex-col gap-4">
+        <div className="flex w-full flex-col gap-4 2xl:w-3/5">
           <div className="relative mr-4 flex items-center">
-            <div>
+            <div className="mt-1 w-full">
               <Combobox
                 displaySelected
                 label="Select Fields of the Resource"
@@ -161,7 +161,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
                 onChange={(e: any) => handleFieldSelection(e)}
               />
             </div>
-            <div className="absolute right-0" style={{ top: '-4px' }}>
+            <div className="absolute right-0" style={{ top: '1px' }}>
               <Checkbox
                 name="Select All Fields"
                 checked={selectAllFields}

From 2baf05f791eb42a9ad47112edb2ff4b7c63c5253 Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 14:07:39 +0530
Subject: [PATCH 4/7] add type

---
 .../dataset/[id]/edit/components/AccessModelForm.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
index 15d4fd9a..19ca9293 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
@@ -41,7 +41,7 @@ const datasetResourcesQuery: any = graphql(`
   }
 `);
 
-const accessModelListQuery = graphql(`
+const accessModelListQuery: any = graphql(`
   query accessModelResources($datasetId: UUID!) {
     accessModelResources(datasetId: $datasetId) {
       id

From 691b56c7fe2d139dcd88edc7a9456565e25aa517 Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 15:06:34 +0530
Subject: [PATCH 5/7] add type

---
 .../dataset/[id]/edit/components/AccessModelList.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelList.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelList.tsx
index 5add9aa2..bf0f8a59 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelList.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelList.tsx
@@ -16,7 +16,7 @@ interface AccessModelListProps {
   setAccessModelId: any;
 }
 
-const accessModelQuery = graphql(`
+const accessModelQuery: any = graphql(`
   query accessModelResources($datasetId: UUID!) {
     accessModelResources(datasetId: $datasetId) {
       id

From cb80d12564201be2da215dddf541165754581142 Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 15:15:21 +0530
Subject: [PATCH 6/7] remove duplicate icons

---
 components/icons.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/icons.tsx b/components/icons.tsx
index 2cd41d33..1aeab126 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -80,11 +80,6 @@ export const Icons: {
   share: IconShare3,
   terminal: IconTerminal,
   twitter: IconBrandTwitterFilled,
-  facebook: IconBrandFacebookFilled,
-  linkedin: IconBrandLinkedin,
-  github: IconBrandGithubFilled,
-  download: IconDownload,
-  alert: IconAlertCircleFilled,
   checkmark: IconCheck,
   loader: IconLoader,
   userList: IconUsers,

From 966c32e42ddd5aa25e0c7105b70528d351c6706d Mon Sep 17 00:00:00 2001
From: sanjaypinna <sanjaypinna265@gmail.com>
Date: Tue, 28 May 2024 16:00:42 +0530
Subject: [PATCH 7/7] fix Combobox popover z-index issues

---
 .../dataset/[id]/edit/components/AccessModelForm.tsx        | 4 +++-
 .../dataset/[id]/edit/components/ResourceSelector.tsx       | 2 +-
 .../[organizationId]/dataset/[id]/edit/edit.module.scss     | 6 ++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
index 19ca9293..e553bfe2 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/AccessModelForm.tsx
@@ -17,7 +17,9 @@ import {
 } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
+import { cn } from '@/lib/utils';
 import { Icons } from '@/components/icons';
+import styles from '../edit.module.scss';
 import ResourceSelector from './ResourceSelector';
 
 interface AccessModelProps {
@@ -456,7 +458,7 @@ const AccessModelForm: React.FC<AccessModelProps> = ({
           </div>
 
           <div className="flex items-end gap-6">
-            <div className="w-3/4">
+            <div className={cn(' w-3/4', styles.combobox)}>
               <Combobox
                 displaySelected
                 label={'Select Fields of the Resource'}
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
index 6fc50d81..45420448 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/components/ResourceSelector.tsx
@@ -150,7 +150,7 @@ const ResourceSelector: React.FC<ResourceSelectorProps> = ({
       <div className="flex flex-wrap gap-6 px-8">
         <div className="flex w-full flex-col gap-4 2xl:w-3/5">
           <div className="relative mr-4 flex items-center">
-            <div className="mt-1 w-full">
+            <div className={cn('mt-1 w-full', styles.combobox)}>
               <Combobox
                 displaySelected
                 label="Select Fields of the Resource"
diff --git a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/edit.module.scss b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/edit.module.scss
index 24cb6ca7..0cdeabef 100644
--- a/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/edit.module.scss
+++ b/app/[locale]/dashboard/organization/[organizationId]/dataset/[id]/edit/edit.module.scss
@@ -9,3 +9,9 @@
     width: 140px;
   }
 }
+
+.combobox {
+  [role='presentation'] {
+    z-index: 1000 !important;
+  }
+}