Skip to content

regression: Missing ContextualbarDialog wrapping in administration and Omnichannel #32026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 4 commits into from
Mar 19, 2024
Merged

regression: Missing ContextualbarDialog wrapping in administration and Omnichannel #32026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f5e5443
chore: wraps internal contextualbars in dialog wrapper
dougfabris Mar 19, 2024
afb6caa
fix: room dialog wrapper
dougfabris Mar 19, 2024
5d978d3
Merge branch 'develop' into reg/adminContextualbarDialog
kodiakhq[bot] Mar 19, 2024
ae0446d
Merge branch 'develop' into reg/adminContextualbarDialog
kodiakhq[bot] Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/meteor/client/components/Contextualbar/ContextualbarDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import { useRoomToolbox } from '../../views/room/contexts/RoomToolboxContext';

type ContextualbarDialogProps = AriaDialogProps & ComponentProps<typeof Contextualbar>;

/**
* TODO: inside administration it should have a mechanism to display the contextualbar programmatically
* @prop closeTab only work inside a room
* */
const ContextualbarDialog = (props: ContextualbarDialogProps) => {
const ref = useRef(null);
const { dialogProps } = useDialog({ 'aria-labelledby': 'contextualbarTitle', ...props }, ref);
Expand Down
30 changes: 20 additions & 10 deletions apps/meteor/client/views/admin/customEmoji/CustomEmojiRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { useRoute, useRouteParameter, usePermission, useTranslation } from '@roc
import type { ReactElement } from 'react';
import React, { useCallback, useRef } from 'react';

import { Contextualbar, ContextualbarHeader, ContextualbarClose } from '../../../components/Contextualbar';
import {
Contextualbar,
ContextualbarHeader,
ContextualbarClose,
ContextualbarDialog,
ContextualbarTitle,
} from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
import AddCustomEmoji from './AddCustomEmoji';
Expand Down Expand Up @@ -55,15 +61,19 @@ const CustomEmojiRoute = (): ReactElement => {
</PageContent>
</Page>
{context && (
<Contextualbar flexShrink={0}>
<ContextualbarHeader>
{context === 'edit' && t('Custom_Emoji_Info')}
{context === 'new' && t('Custom_Emoji_Add')}
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'edit' && id && <EditCustomEmojiWithData _id={id} close={handleClose} onChange={handleChange} />}
{context === 'new' && <AddCustomEmoji close={handleClose} onChange={handleChange} />}
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>
{context === 'edit' && t('Custom_Emoji_Info')}
{context === 'new' && t('Custom_Emoji_Add')}
</ContextualbarTitle>
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'edit' && id && <EditCustomEmojiWithData _id={id} close={handleClose} onChange={handleChange} />}
{context === 'new' && <AddCustomEmoji close={handleClose} onChange={handleChange} />}
</Contextualbar>
</ContextualbarDialog>
)}
</Page>
);
Expand Down
32 changes: 20 additions & 12 deletions apps/meteor/client/views/admin/customSounds/CustomSoundsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { Button } from '@rocket.chat/fuselage';
import { useRoute, useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
import React, { useCallback, useRef } from 'react';

import { ContextualbarTitle, Contextualbar, ContextualbarClose, ContextualbarHeader } from '../../../components/Contextualbar';
import {
ContextualbarTitle,
Contextualbar,
ContextualbarClose,
ContextualbarHeader,
ContextualbarDialog,
} from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import AddCustomSound from './AddCustomSound';
import CustomSoundsTable from './CustomSoundsTable';
Expand Down Expand Up @@ -51,17 +57,19 @@ const CustomSoundsPage = () => {
</PageContent>
</Page>
{context && (
<Contextualbar flexShrink={0}>
<ContextualbarHeader>
<ContextualbarTitle>
{context === 'edit' && t('Custom_Sound_Edit')}
{context === 'new' && t('Custom_Sound_Add')}
</ContextualbarTitle>
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'edit' && <EditCustomSound _id={id} close={handleClose} onChange={handleReload} />}
{context === 'new' && <AddCustomSound goToNew={handleItemClick} close={handleClose} onChange={handleReload} />}
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>
{context === 'edit' && t('Custom_Sound_Edit')}
{context === 'new' && t('Custom_Sound_Add')}
</ContextualbarTitle>
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'edit' && <EditCustomSound _id={id} close={handleClose} onChange={handleReload} />}
{context === 'new' && <AddCustomSound goToNew={handleItemClick} close={handleClose} onChange={handleReload} />}
</Contextualbar>
</ContextualbarDialog>
)}
</Page>
);
Expand Down
38 changes: 23 additions & 15 deletions apps/meteor/client/views/admin/customUserStatus/CustomUserStatusRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { useRoute, useRouteParameter, usePermission, useTranslation, useSetting
import type { ReactElement } from 'react';
import React, { useCallback, useRef, useEffect } from 'react';

import { Contextualbar, ContextualbarHeader, ContextualbarClose, ContextualbarTitle } from '../../../components/Contextualbar';
import {
Contextualbar,
ContextualbarHeader,
ContextualbarClose,
ContextualbarTitle,
ContextualbarDialog,
} from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import { useIsEnterprise } from '../../../hooks/useIsEnterprise';
import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
Expand Down Expand Up @@ -69,20 +75,22 @@ const CustomUserStatusRoute = (): ReactElement => {
</PageContent>
</Page>
{context && (
<Contextualbar bg='light' flexShrink={0}>
<ContextualbarHeader>
<ContextualbarTitle>
{context === 'edit' && t('Custom_User_Status_Edit')}
{context === 'new' && t('Custom_User_Status_Add')}
{context === 'presence-service' && t('Presence_service_cap')}
</ContextualbarTitle>
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'presence-service' && <CustomUserStatusService />}
{(context === 'new' || context === 'edit') && (
<CustomUserStatusFormWithData _id={id} onClose={handleClose} onReload={handleReload} />
)}
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>
{context === 'edit' && t('Custom_User_Status_Edit')}
{context === 'new' && t('Custom_User_Status_Add')}
{context === 'presence-service' && t('Presence_service_cap')}
</ContextualbarTitle>
<ContextualbarClose onClick={handleClose} />
</ContextualbarHeader>
{context === 'presence-service' && <CustomUserStatusService />}
{(context === 'new' || context === 'edit') && (
<CustomUserStatusFormWithData _id={id} onClose={handleClose} onReload={handleReload} />
)}
</Contextualbar>
</ContextualbarDialog>
)}
</Page>
);
Expand Down
36 changes: 19 additions & 17 deletions apps/meteor/client/views/admin/moderation/ModConsoleReportDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Tabs, TabsItem, ContextualbarHeader, ContextualbarTitle } from '@rocket
import { useTranslation, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
import React, { useState } from 'react';

import { Contextualbar, ContextualbarClose } from '../../../components/Contextualbar';
import { Contextualbar, ContextualbarClose, ContextualbarDialog } from '../../../components/Contextualbar';
import UserMessages from './UserMessages';
import UserReportInfo from './UserReports/UserReportInfo';

Expand All @@ -21,22 +21,24 @@ const ModConsoleReportDetails = ({ userId, default: defaultTab, onRedirect }: Mo
const activeTab = useRouteParameter('tab');

return (
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
<ContextualbarClose onClick={() => moderationRoute.navigate(`/admin/moderation/${activeTab}`, { replace: true })} />
</ContextualbarHeader>
<Tabs paddingBlockStart={8}>
<TabsItem selected={tab === 'messages'} onClick={() => setTab('messages')}>
{t('Messages')}
</TabsItem>
<TabsItem selected={tab === 'users'} onClick={() => setTab('users')}>
{t('User')}
</TabsItem>
</Tabs>
{tab === 'messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
{tab === 'users' && <UserReportInfo userId={userId} />}
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>{t('Reports')}</ContextualbarTitle>
<ContextualbarClose onClick={() => moderationRoute.navigate(`/admin/moderation/${activeTab}`, { replace: true })} />
</ContextualbarHeader>
<Tabs paddingBlockStart={8}>
<TabsItem selected={tab === 'messages'} onClick={() => setTab('messages')}>
{t('Messages')}
</TabsItem>
<TabsItem selected={tab === 'users'} onClick={() => setTab('users')}>
{t('User')}
</TabsItem>
</Tabs>
{tab === 'messages' && <UserMessages userId={userId} onRedirect={onRedirect} />}
{tab === 'users' && <UserReportInfo userId={userId} />}
</Contextualbar>
</ContextualbarDialog>
);
};

Expand Down
1 change: 0 additions & 1 deletion apps/meteor/client/views/admin/moderation/ModerationConsolePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ const ModerationConsolePage = ({ tab = 'messages', onSelectTab }: ModerationCons
<Page flexDirection='row'>
<Page>
<PageHeader title={t('Moderation')} />

<Tabs>
<TabsItem selected={tab === 'messages'} onClick={handleTabClick('messages')}>
{t('Reported_Messages')}
Expand Down
24 changes: 16 additions & 8 deletions apps/meteor/client/views/admin/permissions/PermissionsContextBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import type { ReactElement } from 'react';
import React, { useEffect } from 'react';

import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
import { Contextualbar, ContextualbarHeader, ContextualbarTitle, ContextualbarClose } from '../../../components/Contextualbar';
import {
Contextualbar,
ContextualbarHeader,
ContextualbarTitle,
ContextualbarClose,
ContextualbarDialog,
} from '../../../components/Contextualbar';
import CustomRoleUpsellModal from './CustomRoleUpsellModal';
import EditRolePageWithData from './EditRolePageWithData';

Expand All @@ -31,13 +37,15 @@ const PermissionsContextBar = (): ReactElement | null => {

return (
(context && (
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>{context === 'edit' ? t('Role_Editing') : t('New_role')}</ContextualbarTitle>
<ContextualbarClose onClick={handleCloseContextualbar} />
</ContextualbarHeader>
<EditRolePageWithData roleId={_id} />
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
<ContextualbarTitle>{context === 'edit' ? t('Role_Editing') : t('New_role')}</ContextualbarTitle>
<ContextualbarClose onClick={handleCloseContextualbar} />
</ContextualbarHeader>
<EditRolePageWithData roleId={_id} />
</Contextualbar>
</ContextualbarDialog>
)) ||
null
);
Expand Down
7 changes: 6 additions & 1 deletion apps/meteor/client/views/admin/rooms/RoomsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useRouteParameter, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { useRef } from 'react';

import { ContextualbarDialog } from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import EditRoomWithData from './EditRoomWithData';
import RoomsTable from './RoomsTable';
Expand All @@ -22,7 +23,11 @@ const RoomsPage = (): ReactElement => {
<RoomsTable reload={reloadRef} />
</PageContent>
</Page>
{context && <EditRoomWithData rid={id} onReload={reloadRef.current} />}
{context && (
<ContextualbarDialog>
<EditRoomWithData rid={id} onReload={reloadRef.current} />
</ContextualbarDialog>
)}
</Page>
);
};
Expand Down
44 changes: 26 additions & 18 deletions apps/meteor/client/views/admin/users/AdminUsersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ import React, { useRef } from 'react';

import UserPageHeaderContentWithSeatsCap from '../../../../ee/client/views/admin/users/UserPageHeaderContentWithSeatsCap';
import { useSeatsCap } from '../../../../ee/client/views/admin/users/useSeatsCap';
import { Contextualbar, ContextualbarHeader, ContextualbarTitle, ContextualbarClose } from '../../../components/Contextualbar';
import {
Contextualbar,
ContextualbarHeader,
ContextualbarTitle,
ContextualbarClose,
ContextualbarDialog,
} from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import { useShouldPreventAction } from '../../../hooks/useShouldPreventAction';
import AdminInviteUsers from './AdminInviteUsers';
Expand Down Expand Up @@ -63,23 +69,25 @@ const UsersPage = (): ReactElement => {
</PageContent>
</Page>
{context && (
<Contextualbar>
<ContextualbarHeader>
{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
<ContextualbarTitle>
{context === 'info' && t('User_Info')}
{context === 'edit' && t('Edit_User')}
{context === 'new' && t('Add_User')}
{context === 'invite' && t('Invite_Users')}
</ContextualbarTitle>
<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
</ContextualbarHeader>
{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
{!isRoutePrevented && context === 'new' && <AdminUserForm onReload={handleReload} />}
{!isRoutePrevented && context === 'invite' && <AdminInviteUsers />}
{isRoutePrevented && <AdminUserUpgrade />}
</Contextualbar>
<ContextualbarDialog>
<Contextualbar>
<ContextualbarHeader>
{context === 'upgrade' && <ContextualbarIcon name='user-plus' />}
<ContextualbarTitle>
{context === 'info' && t('User_Info')}
{context === 'edit' && t('Edit_User')}
{context === 'new' && t('Add_User')}
{context === 'invite' && t('Invite_Users')}
</ContextualbarTitle>
<ContextualbarClose onClick={() => router.navigate('/admin/users')} />
</ContextualbarHeader>
{context === 'info' && id && <AdminUserInfoWithData uid={id} onReload={handleReload} />}
{context === 'edit' && id && <AdminUserFormWithData uid={id} onReload={handleReload} />}
{!isRoutePrevented && context === 'new' && <AdminUserForm onReload={handleReload} />}
{!isRoutePrevented && context === 'invite' && <AdminInviteUsers />}
{isRoutePrevented && <AdminUserUpgrade />}
</Contextualbar>
</ContextualbarDialog>
)}
</Page>
);
Expand Down
9 changes: 7 additions & 2 deletions apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { usePermission, useRouteParameter, useTranslation } from '@rocket.chat/u
import type { ReactElement } from 'react';
import React from 'react';

import { ContextualbarDialog } from '../../../components/Contextualbar';
import { Page, PageHeader, PageContent } from '../../../components/Page';
import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
import AgentEditWithData from './AgentEditWithData';
Expand All @@ -27,8 +28,12 @@ const AgentsPage = (): ReactElement => {
<AgentsTable />
</PageContent>
</Page>
{id && context === 'edit' && <AgentEditWithData uid={id} />}
{id && context === 'info' && <AgentInfo uid={id} />}
{context && (
<ContextualbarDialog>
{id && context === 'edit' && <AgentEditWithData uid={id} />}
{id && context === 'info' && <AgentInfo uid={id} />}
</ContextualbarDialog>
)}
</Page>
);
};
Expand Down
Loading