fix: roles and permissions delete toast message (#277)

* fix: roles and permissions delete toast message

* fix: team member edit and delete toast message

* fix: add missing useToast hook

Author: Placeholder30

packages/cms/pages/settings/roles-and-permissions/roles-and-permissions.tsx

@@ -409,7 +409,7 @@ const RolesTable: React.FC = () => {
   const { getAdminUsers, getAdminRoles, removeRole } = useAdminUsersStore()
   const [isRemoveRoleModalVisible, setIsRemoveRoleModalVisible] =
     useState(false)
-  const { toast } = useToastStore()
+  const { toast, removeAllToast, toasts } = useToastStore()
   const { hasPermission } = useAuthStore()
 
   const columns = [
@@ -469,6 +469,11 @@ const RolesTable: React.FC = () => {
             }
 
             if (role?.slug === 'super-admin') {
+              if (toasts.length) {
+                removeAllToast()
+                toast(undefined, "Can't remove Super Admin", 'danger')
+                return
+              }
               toast(undefined, "Can't remove Super Admin", 'danger')
               return
             }

packages/cms/pages/settings/team-members/team-members.tsx

@@ -400,7 +400,6 @@ const InviteFlyout: React.FC<InviteFlyoutProps> = ({
     </EuiFlyout>
   )
 }
-
 const FlyOut: React.FC<FlyOutProps> = ({
   setisEditTeamMemberFlyoutVisible,
   selectedMember,
@@ -410,6 +409,8 @@ const FlyOut: React.FC<FlyOutProps> = ({
   const simpleFlyoutTitleId = useGeneratedHtmlId({
     prefix: 'simpleFlyoutTitle'
   })
+  const { toast } = useToastStore()
+
   const { form, errors, submit, loading, setValue } = useForm<FormInput>({
     defaultValues: {
       firstName: selectedMember.firstName,
@@ -426,8 +427,6 @@ const FlyOut: React.FC<FlyOutProps> = ({
     }
   })
 
-  const { toast } = useToastStore()
-
   return (
     <EuiFlyout
       ownFocus
@@ -517,7 +516,7 @@ const FlyOut: React.FC<FlyOutProps> = ({
 }
 
 export const TeamMembers: FunctionComponent<ProfileProps> = () => {
-  const { toast } = useToastStore()
+  const { toast, toasts, removeAllToast } = useToastStore()
   const { getAdminUsers, removeUser, getAdminRoles, updateUserRoles } =
     useAdminUsersStore()
   const [teamMembers, setTeamMembers] = useState<TeamMemberProps[]>([])
@@ -678,6 +677,11 @@ export const TeamMembers: FunctionComponent<ProfileProps> = () => {
               }
 
               if (isOwner(item)) {
+                if (toasts.length) {
+                  removeAllToast()
+                  toast(undefined, "Owner role can't be changed", 'danger')
+                  return
+                }
                 toast(undefined, "Owner role can't be changed", 'danger')
                 return
               }
@@ -715,6 +719,11 @@ export const TeamMembers: FunctionComponent<ProfileProps> = () => {
               }
 
               if (isOwner(item)) {
+                if (toasts.length) {
+                  removeAllToast()
+                  toast(undefined, "Can't remove Owner", 'danger')
+                  return
+                }
                 toast(undefined, "Can't remove Owner", 'danger')
                 return
               }
@@ -726,7 +735,7 @@ export const TeamMembers: FunctionComponent<ProfileProps> = () => {
         ]
       }
     ]
-  }, [roles])
+  }, [roles, toasts])
 
   let removeMemberModal
 

packages/cms/store/toast.ts

@@ -24,6 +24,7 @@ interface ToastMethodsState extends State {
   ) => void
   remove: (toast: Toast) => void
   toastId: () => string
+  removeAllToast: () => void
 }
 
 export const useToastStore = create<ToastState & ToastMethodsState>(
@@ -47,6 +48,12 @@ export const useToastStore = create<ToastState & ToastMethodsState>(
       set({
         toasts: get().toasts.filter(toast => removedToast.id !== toast.id)
       })
+    },
+
+    removeAllToast() {
+      set({
+        toasts: []
+      })
     }
   }))
 )