Add link to workspace members index view page from the settings (#19164)

## Context
Fixes https://github.com/twentyhq/core-team-issues/issues/2039

<img width="608" height="519" alt="Screenshot 2026-03-31 at 14 28 00"
src="https://github.com/user-attachments/assets/939e47c6-84c2-471c-8da5-b76b161f086a"
/>
This commit is contained in:
Weiko
2026-03-31 14:39:22 +02:00
committed by GitHub
parent d10c0a6439
commit 287fe90ce9
@@ -7,19 +7,28 @@ import { useContext, useEffect, useMemo, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import { useDebounce } from 'use-debounce';
import { useSnackBarOnQueryError } from '@/apollo/hooks/useSnackBarOnQueryError';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
import { WorkspaceInviteTeam } from '@/workspace/components/WorkspaceInviteTeam';
import { useSnackBarOnQueryError } from '@/apollo/hooks/useSnackBarOnQueryError';
import { CoreObjectNameSingular, SettingsPath } from 'twenty-shared/types';
import { useQuery } from '@apollo/client/react';
import {
AppPath,
CoreObjectNameSingular,
SettingsPath,
} from 'twenty-shared/types';
import {
generateILikeFiltersForCompositeFields,
getSettingsPath,
@@ -29,16 +38,19 @@ import {
AppTooltip,
Avatar,
H2Title,
IconArrowUpRight,
IconChevronRight,
IconHierarchy2,
IconListDetails,
IconMail,
IconReload,
IconTrash,
Status,
TooltipDelay,
} from 'twenty-ui/display';
import { IconButton, SearchInput } from 'twenty-ui/input';
import { Button, IconButton, SearchInput } from 'twenty-ui/input';
import { Section } from 'twenty-ui/layout';
import { useQuery } from '@apollo/client/react';
import { MenuItem } from 'twenty-ui/navigation';
import { GetWorkspaceInvitationsDocument } from '~/generated-metadata/graphql';
import { SettingsRolesQueryEffect } from '@/settings/roles/components/SettingsRolesQueryEffect';
@@ -49,6 +61,7 @@ import { useDeleteWorkspaceInvitation } from '@/workspace-invitation/hooks/useDe
import { useResendWorkspaceInvitation } from '@/workspace-invitation/hooks/useResendWorkspaceInvitation';
import { workspaceInvitationsState } from '@/workspace-invitation/states/workspaceInvitationsStates';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { useNavigateApp } from '~/hooks/useNavigateApp';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { normalizeSearchText } from '~/utils/normalizeSearchText';
@@ -87,6 +100,9 @@ const StyledTextContainerWithEllipsis = styled.div`
`;
const StyledSearchContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[2]};
`;
@@ -107,7 +123,9 @@ export const SettingsWorkspaceMembers = () => {
const { theme } = useContext(ThemeContext);
const { t } = useLingui();
const { enqueueErrorSnackBar } = useSnackBar();
const navigateApp = useNavigateApp();
const navigateSettings = useNavigateSettings();
const { closeDropdown } = useCloseDropdown();
const [isFetchingMore, setIsFetchingMore] = useState(false);
const [searchFilter, setSearchFilter] = useState('');
const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);
@@ -381,6 +399,45 @@ export const SettingsWorkspaceMembers = () => {
onChange={handleSearchChange}
placeholder={t`Search a team member...`}
/>
<Dropdown
dropdownId="workspace-members-open-dropdown"
clickableComponent={
<Button
Icon={IconArrowUpRight}
title={t`Open`}
variant="secondary"
size="medium"
/>
}
dropdownPlacement="bottom-end"
dropdownOffset={{ y: 8 }}
dropdownComponents={
<DropdownContent>
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconListDetails}
text={t`See records`}
onClick={() => {
navigateApp(AppPath.RecordIndexPage, {
objectNamePlural: 'workspaceMembers',
});
closeDropdown('workspace-members-open-dropdown');
}}
/>
<MenuItem
LeftIcon={IconHierarchy2}
text={t`See data model settings`}
onClick={() => {
navigateSettings(SettingsPath.ObjectDetail, {
objectNamePlural: 'workspaceMembers',
});
closeDropdown('workspace-members-open-dropdown');
}}
/>
</DropdownMenuItemsContainer>
</DropdownContent>
}
/>
</StyledSearchContainer>
<StyledTableContainer hasMoreRows={hasNextPage}>
<Table>