fix(dashboards): some fixes for edit access selector (getsentry#81384)

getsentry#79833 1. Fix logic for fetching teams 2. Add `useEffect` around setting selected options in the Edit Access dropdown --------- Co-authored-by: harshithadurai <[email protected]>
skyplaying · Nov 28, 2024 · 9ebbc1c · 9ebbc1c
1 parent 7db47f1
commit 9ebbc1c
Showing 1 changed file with 16 additions and 26 deletions.
diff --git a/static/app/views/dashboards/editAccessSelector.tsx b/static/app/views/dashboards/editAccessSelector.tsx
@@ -59,20 +59,26 @@ function EditAccessSelector({
   const {onSearch} = useTeams();
   const teamIds: string[] = Object.values(teamsToRender).map(team => team.id);
 
-  const [selectedOptions, setSelectedOptions] = useState<string[]>(getSelectedOptions());
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
   const [isMenuOpen, setMenuOpen] = useState<boolean>(false);
-  const {teams: selectedTeam} = useTeamsById({ids: [selectedOptions[1]]});
+  const {teams: selectedTeam} = useTeamsById({
+    ids:
+      selectedOptions[1] && selectedOptions[1] !== 'allUsers' ? [selectedOptions[1]] : [],
+  });
 
-  // Effect to update selectedOptions whenever the dashboard changes
+  // Gets selected options for the dropdown from dashboard object
   useEffect(() => {
     const teamIdsList: string[] = Object.values(teamsToRender).map(team => team.id);
-    if (!defined(dashboard.permissions) || dashboard.permissions.isEditableByEveryone) {
-      setSelectedOptions(['_creator', '_allUsers', ...teamIdsList]);
-    } else {
-      const permittedTeamIds =
-        dashboard.permissions.teamsWithEditAccess?.map(teamId => String(teamId)) ?? [];
-      setSelectedOptions(['_creator', ...permittedTeamIds]);
-    }
+    const selectedOptionsFromDashboard =
+      !defined(dashboard.permissions) || dashboard.permissions.isEditableByEveryone
+        ? ['_creator', '_allUsers', ...teamIdsList]
+        : [
+            '_creator',
+            ...(dashboard.permissions.teamsWithEditAccess?.map(teamId =>
+              String(teamId)
+            ) ?? []),
+          ];
+    setSelectedOptions(selectedOptionsFromDashboard);
   }, [dashboard, teamsToRender]);
 
   // Handles state change when dropdown options are selected
@@ -117,16 +123,6 @@ function EditAccessSelector({
     };
   }
 
-  // Gets selected options for the dropdown from dashboard object
-  function getSelectedOptions(): string[] {
-    if (!defined(dashboard.permissions) || dashboard.permissions.isEditableByEveryone) {
-      return ['_creator', '_allUsers', ...teamIds];
-    }
-    const permittedTeamIds =
-      dashboard.permissions.teamsWithEditAccess?.map(teamId => String(teamId)) ?? [];
-    return ['_creator', ...permittedTeamIds];
-  }
-
   // Dashboard creator option in the dropdown
   const makeCreatorOption = () => ({
     value: '_creator',
@@ -212,9 +208,6 @@ function EditAccessSelector({
         size="sm"
         onClick={() => {
           setMenuOpen(false);
-          if (isMenuOpen) {
-            setSelectedOptions(getSelectedOptions());
-          }
         }}
         disabled={!userCanEditDashboardPermissions}
       >
@@ -275,9 +268,6 @@ function EditAccessSelector({
       isOpen={isMenuOpen}
       onOpenChange={() => {
         setMenuOpen(!isMenuOpen);
-        if (isMenuOpen) {
-          setSelectedOptions(getSelectedOptions());
-        }
       }}
       menuFooter={dropdownFooterButtons}
       onSearch={debounce(val => void onSearch(val), DEFAULT_DEBOUNCE_DURATION)}