Merge branch 'dev' of https://github.com/umami-software/umami into dev

components/pages/settings/teams/TeamMembers.js

@@ -1,10 +1,14 @@
-import { Loading } from 'react-basics';
-import useApi from 'hooks/useApi';
+import { messages } from 'components/messages';
 import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
+import useApi from 'hooks/useApi';
+import { Loading, useToast } from 'react-basics';
+import { useIntl } from 'react-intl';
 
 export default function TeamMembers({ teamId, readOnly }) {
+  const { toast, showToast } = useToast();
   const { get, useQuery } = useApi();
-  const { data, isLoading } = useQuery(['teams:users', teamId], () =>
+  const { formatMessage } = useIntl();
+  const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
     get(`/teams/${teamId}/users`),
   );
 
@@ -12,5 +16,15 @@ export default function TeamMembers({ teamId, readOnly }) {
     return <Loading icon="dots" position="block" />;
   }
 
-  return <TeamMembersTable data={data} readOnly={readOnly} />;
+  const handleSave = async () => {
+    await refetch();
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  return (
+    <>
+      {toast}
+      <TeamMembersTable onSave={handleSave} data={data} readOnly={readOnly} />
+    </>
+  );
 }

components/pages/settings/teams/TeamMembersTable.js

@@ -15,10 +15,13 @@ import { useIntl } from 'react-intl';
 import { ROLES } from 'lib/constants';
 import { labels } from 'components/messages';
 import useUser from 'hooks/useUser';
+import useApi from 'hooks/useApi';
 
-export default function TeamMembersTable({ data = [], readOnly }) {
+export default function TeamMembersTable({ data = [], onSave, readOnly }) {
   const { formatMessage } = useIntl();
   const { user } = useUser();
+  const { del, useMutation } = useApi();
+  const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`));
 
   const columns = [
     { name: 'username', label: formatMessage(labels.username), style: { flex: 2 } },
@@ -26,6 +29,17 @@ export default function TeamMembersTable({ data = [], readOnly }) {
     { name: 'action', label: '', style: { flex: 1 } },
   ];
 
+  const handleRemoveTeamMember = teamUserId => {
+    mutate(
+      { teamUserId },
+      {
+        onSuccess: async () => {
+          onSave();
+        },
+      },
+    );
+  };
+
   return (
     <Table columns={columns} rows={data}>
       <TableHeader>
@@ -46,7 +60,10 @@ export default function TeamMembersTable({ data = [], readOnly }) {
             ),
             action: !readOnly && (
               <Flexbox flex={1} justifyContent="end">
-                <Button disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}>
+                <Button
+                  onClick={() => handleRemoveTeamMember(row.id)}
+                  disabled={user.id === row?.user?.id || row.role === ROLES.teamOwner}
+                >
                   <Icon>
                     <Icons.Close />
                   </Icon>