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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user