Fixed teams settings.

src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditButton.tsx

@@ -0,0 +1,49 @@
+import { useMessages, useModified } from 'components/hooks';
+import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
+import TeamMemberEditForm from './TeamMemberEditForm';
+
+export function TeamMemberEditButton({
+  teamId,
+  userId,
+  role,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  role: string;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+  const { touch } = useModified();
+
+  const handleSave = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+    touch('teams:members');
+    onSave?.();
+  };
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon>
+          <Icons.Edit />
+        </Icon>
+        <Text>{formatMessage(labels.edit)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.editMember)}>
+        {(close: () => void) => (
+          <TeamMemberEditForm
+            teamId={teamId}
+            userId={userId}
+            role={role}
+            onSave={handleSave}
+            onClose={close}
+          />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamMemberEditButton;

src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditForm.tsx

@@ -0,0 +1,82 @@
+import { useApi, useMessages } from 'components/hooks';
+import { ROLES } from 'lib/constants';
+import {
+  Button,
+  Dropdown,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  Item,
+  SubmitButton,
+} from 'react-basics';
+
+export function TeamMemberEditForm({
+  teamId,
+  userId,
+  role,
+  onSave,
+  onClose,
+}: {
+  teamId: string;
+  userId: string;
+  role: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { post, useMutation } = useApi();
+  const { mutate, error, isPending } = useMutation({
+    mutationFn: (data: any) => post(`/teams/${teamId}/users/${userId}`, data),
+  });
+  const { formatMessage, labels } = useMessages();
+
+  const handleSubmit = async (data: any) => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  const renderValue = (value: string) => {
+    if (value === ROLES.teamManager) {
+      return formatMessage(labels.manager);
+    }
+    if (value === ROLES.teamMember) {
+      return formatMessage(labels.member);
+    }
+    if (value === ROLES.teamViewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error} values={{ role }}>
+      <FormRow label={formatMessage(labels.role)}>
+        <FormInput name="role" rules={{ required: formatMessage(labels.required) }}>
+          <Dropdown
+            renderValue={renderValue}
+            style={{
+              minWidth: '250px',
+            }}
+          >
+            <Item key={ROLES.teamManager}>{formatMessage(labels.manager)}</Item>
+            <Item key={ROLES.teamMember}>{formatMessage(labels.member)}</Item>
+            <Item key={ROLES.teamViewOnly}>{formatMessage(labels.viewOnly)}</Item>
+          </Dropdown>
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <SubmitButton variant="primary" disabled={false}>
+          {formatMessage(labels.save)}
+        </SubmitButton>
+        <Button disabled={isPending} onClick={onClose}>
+          {formatMessage(labels.cancel)}
+        </Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default TeamMemberEditForm;

src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx

@@ -0,0 +1,65 @@
+import ConfirmationForm from 'components/common/ConfirmationForm';
+import { useApi, useMessages, useModified } from 'components/hooks';
+import { messages } from 'components/messages';
+import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
+import { FormattedMessage } from 'react-intl';
+
+export function TeamMemberRemoveButton({
+  teamId,
+  userId,
+  userName,
+  onSave,
+}: {
+  teamId: string;
+  userId: string;
+  userName: string;
+  disabled?: boolean;
+  onSave?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
+  });
+  const { touch } = useModified();
+
+  const handleConfirm = (close: () => void) => {
+    mutate(null, {
+      onSuccess: () => {
+        touch('teams:members');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <ModalTrigger>
+      <Button>
+        <Icon>
+          <Icons.Close />
+        </Icon>
+        <Text>{formatMessage(labels.remove)}</Text>
+      </Button>
+      <Modal title={formatMessage(labels.removeMember)}>
+        {(close: () => void) => (
+          <ConfirmationForm
+            message={
+              <FormattedMessage
+                {...messages.confirmRemove}
+                values={{ target: <b>{userName}</b> }}
+              />
+            }
+            isLoading={isPending}
+            error={error}
+            onConfirm={handleConfirm.bind(null, close)}
+            onClose={close}
+            buttonLabel={formatMessage(labels.remove)}
+          />
+        )}
+      </Modal>
+    </ModalTrigger>
+  );
+}
+
+export default TeamMemberRemoveButton;

src/app/(main)/teams/[teamId]/settings/members/TeamMembersDataTable.tsx

@@ -0,0 +1,21 @@
+import DataTable from 'components/common/DataTable';
+import TeamMembersTable from './TeamMembersTable';
+import { useTeamMembers } from 'components/hooks';
+
+export function TeamMembersDataTable({
+  teamId,
+  allowEdit = false,
+}: {
+  teamId: string;
+  allowEdit?: boolean;
+}) {
+  const queryResult = useTeamMembers(teamId);
+
+  return (
+    <DataTable queryResult={queryResult}>
+      {({ data }) => <TeamMembersTable data={data} teamId={teamId} allowEdit={allowEdit} />}
+    </DataTable>
+  );
+}
+
+export default TeamMembersDataTable;

src/app/(main)/teams/[teamId]/settings/members/TeamMembersPage.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { TeamContext } from 'app/(main)/teams/[teamId]/TeamProvider';
+import TeamMembersDataTable from './TeamMembersDataTable';
+import PageHeader from 'components/layout/PageHeader';
+import { useLogin, useMessages } from 'components/hooks';
+import { ROLES } from 'lib/constants';
+import { useContext } from 'react';
+
+export function TeamMembersPage({ teamId }: { teamId: string }) {
+  const team = useContext(TeamContext);
+  const { user } = useLogin();
+  const { formatMessage, labels } = useMessages();
+
+  const canEdit =
+    team?.teamUser?.find(
+      ({ userId, role }) =>
+        (role === ROLES.teamOwner || role === ROLES.teamManager) && userId === user.id,
+    ) && user.role !== ROLES.viewOnly;
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.members)} />
+      <TeamMembersDataTable teamId={teamId} allowEdit={canEdit} />
+    </>
+  );
+}
+
+export default TeamMembersPage;

src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx

@@ -0,0 +1,57 @@
+import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import { useMessages, useLogin } from 'components/hooks';
+import { ROLES } from 'lib/constants';
+import TeamMemberRemoveButton from './TeamMemberRemoveButton';
+import TeamMemberEditButton from './TeamMemberEditButton';
+
+export function TeamMembersTable({
+  data = [],
+  teamId,
+  allowEdit = false,
+}: {
+  data: any[];
+  teamId: string;
+  allowEdit: boolean;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { user } = useLogin();
+  const breakpoint = useBreakpoint();
+
+  const roles = {
+    [ROLES.teamOwner]: formatMessage(labels.teamOwner),
+    [ROLES.teamManager]: formatMessage(labels.teamManager),
+    [ROLES.teamMember]: formatMessage(labels.teamMember),
+    [ROLES.teamViewOnly]: formatMessage(labels.viewOnly),
+  };
+
+  return (
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="username" label={formatMessage(labels.username)}>
+        {row => row?.user?.username}
+      </GridColumn>
+      <GridColumn name="role" label={formatMessage(labels.role)}>
+        {row => roles[row?.role]}
+      </GridColumn>
+      <GridColumn name="action" label=" " alignment="end">
+        {row => {
+          return (
+            allowEdit &&
+            row?.role !== ROLES.teamOwner &&
+            user?.id !== row?.user?.id && (
+              <>
+                <TeamMemberEditButton teamId={teamId} userId={row?.user?.id} role={row?.role} />
+                <TeamMemberRemoveButton
+                  teamId={teamId}
+                  userId={row?.user?.id}
+                  userName={row?.user?.username}
+                />
+              </>
+            )
+          );
+        }}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default TeamMembersTable;

src/app/(main)/teams/[teamId]/settings/members/page.tsx

@@ -0,0 +1,10 @@
+import TeamMembersPage from './TeamMembersPage';
+import { Metadata } from 'next';
+
+export default function ({ params: { teamId } }) {
+  return <TeamMembersPage teamId={teamId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Team Members',
+};