jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - fix modal width

Browse source
This commit is contained in:
Shekar Siri 2023-01-16 13:49:55 +01:00
parent c12536c084
commit 902ca06611
30 changed files with 71 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Assist/components/AssistTabs/AssistTabs.tsx
View file

@ -19,7 +19,7 @@ const AssistTabs = (props: Props) => {
<>
<div
className={stl.btnLink}
onClick={() => showModal(<SessionList userId={props.userId} />, { right: true })}
onClick={() => showModal(<SessionList userId={props.userId} />, { right: true, width: 700 })}
>
Active Sessions
</div>

72
frontend/app/components/Assist/components/SessionList/SessionList.tsx
View file

@ -24,45 +24,43 @@ function SessionList(props: Props) {
}, []);
return (
<div style={{ width: '50vw' }}>
<div
className="border-r shadow h-screen overflow-y-auto"
style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
>
<div className="p-4">
<div className="text-2xl">
{props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
</div>
<div
className="border-r shadow h-screen overflow-y-auto"
style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
>
<div className="p-4">
<div className="text-2xl">
{props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
</div>
<Loader loading={props.loading}>
<NoContent
show={!props.loading && props.list.length === 0}
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No live sessions found.</div>
</div>
}
>
<div className="p-4">
{props.list.map((session: any) => (
<div className="mb-6">
{session.pageTitle && session.pageTitle !== '' && (
<div className="flex items-center mb-2">
<Label size="small" className="p-1">
<span className="color-gray-medium">TAB</span>
</Label>
<span className="ml-2 font-medium">{session.pageTitle}</span>
</div>
)}
<SessionItem compact={true} onClick={() => hideModal()} key={session.sessionId} session={session} />
</div>
))}
</div>
</NoContent>
</Loader>
</div>
<Loader loading={props.loading}>
<NoContent
show={!props.loading && props.list.length === 0}
title={
<div className="flex items-center justify-center flex-col">
<AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
<div className="mt-2" />
<div className="text-center text-gray-600">No live sessions found.</div>
</div>
}
>
<div className="p-4">
{props.list.map((session: any) => (
<div className="mb-6">
{session.pageTitle && session.pageTitle !== '' && (
<div className="flex items-center mb-2">
<Label size="small" className="p-1">
<span className="color-gray-medium">TAB</span>
</Label>
<span className="ml-2 font-medium">{session.pageTitle}</span>
</div>
)}
<SessionItem compact={true} onClick={() => hideModal()} key={session.sessionId} session={session} />
</div>
))}
</div>
</NoContent>
</Loader>
</div>
);
}

2
frontend/app/components/Client/Audit/AuditDetailModal/AuditDetailModal.tsx
View file

@ -11,7 +11,7 @@ function AuditDetailModal(props: Props) {
// console.log('jsonResponse', jsonResponse)
return (
<div style={{ width: '500px' }} className="bg-white h-screen overflow-y-auto">
<div className="bg-white h-screen overflow-y-auto">
<h1 className="text-2xl p-4">Audit Details</h1>
<div className="p-4">
<h5 className="mb-2">{ 'URL'}</h5>

2
frontend/app/components/Client/Audit/AuditList/AuditList.tsx
View file

@ -54,7 +54,7 @@ function AuditList(props: Props) {
<AuditListItem
key={index}
audit={item}
onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true })}
onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true, width: 500 })}
/>
))}

2
frontend/app/components/Client/CustomFields/CustomFieldForm.js
View file

@ -24,7 +24,7 @@ class CustomFieldForm extends React.PureComponent {
const { field, errors } = this.props;
const exists = field.exists();
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
<div className="bg-white h-screen overflow-y-auto">
<h3 className="p-5 text-2xl">{exists ? 'Update' : 'Add'} Metadata Field</h3>
<Form className={styles.wrapper}>
<Form.Field>

6
frontend/app/components/Client/Integrations/Integrations.tsx
View file

@ -63,11 +63,11 @@ function Integrations(props: Props) {
}
}, []);
const onClick = (integration: any) => {
const onClick = (integration: any, width: number) => {
if (integration.slug) {
props.fetch(integration.slug, props.siteId);
}
showModal(integration.component, { right: true });
showModal(integration.component, { right: true, width });
};
const onChangeSelect = ({ value }: any) => {
@ -100,7 +100,7 @@ function Integrations(props: Props) {
integrated={integratedList.includes(integration.slug)}
key={integration.name}
integration={integration}
onClick={() => onClick(integration)}
onClick={() => onClick(integration, cat.title === "Plugins" ? 500 : 350)}
hide={
(integration.slug === 'github' && integratedList.includes('jira')) ||
(integration.slug === 'jira' && integratedList.includes('github'))

2
frontend/app/components/Client/Sites/InstallButton/InstallButton.tsx
View file

@ -12,7 +12,7 @@ function InstallButton(props: Props) {
const onClick = () => {
showModal(
<TrackingCodeModal title="Tracking Code" subTitle={`(Unique to ${site.host})`} onClose={hideModal} site={site} />,
{ right: true }
{ right: true, width: 700 }
);
};
return (

2
frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
View file

@ -49,7 +49,7 @@ function UserForm(props: Props) {
}
return useObserver(() => (
<div className="bg-white h-screen p-6" style={{ width: '400px'}}>
<div className="bg-white h-screen p-6">
<div className="">
<h1 className="text-2xl mb-4">{`${user.exists() ? 'Update' : 'Invite'} User`}</h1>
</div>

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
View file

@ -30,6 +30,7 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
showModal(<ErrorDetailsModal errorId={errorId} />, {
right: true,
width: 1200,
onClose: () => {
if (props.history.location.pathname.includes("/dashboard") || props.history.location.pathname.includes("/metrics/")) {
props.history.replace({ search: "" });

2
frontend/app/components/Dashboard/components/Errors/ErrorDetailsModal/ErrorDetailsModal.tsx
View file

@ -7,7 +7,7 @@ interface Props {
function ErrorDetailsModal(props: Props) {
return (
<div
style={{ width: '85vw', maxWidth: '1200px' }}
// style={{ width: '85vw', maxWidth: '1200px' }}
className="bg-white h-screen p-4 overflow-y-auto"
>
<ErrorInfo errorId={props.errorId} />

2
frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
View file

@ -117,7 +117,7 @@ export default withRequest({
function UserName({ name, userId, hash }) {
const { showModal } = useModal();
const onClick = () => {
showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true });
showModal(<UserSessionsModal userId={userId} hash={hash} name={name} />, { right: true, width: 700 });
};
return <div onClick={userId ? onClick : () => {}}>{name}</div>;
}

2
frontend/app/components/Session_/BugReport/BugReportModal.tsx
View file

@ -184,7 +184,7 @@ function BugReportModal({ hideModal, session, width, height, account, xrayProps,
return (
<div
className="bg-white overflow-y-scroll"
style={{ maxWidth: '70vw', width: 620, height: '100vh' }}
style={{ height: '100vh' }}
>
<div className="flex flex-col p-4 gap-8 bg-white relative" ref={reportRef}>
<Title userName={account.name} />

4
frontend/app/components/Session_/Multiview/Multiview.tsx
View file

@ -64,12 +64,12 @@ function Multiview({
};
const openListModal = () => {
showModal(<AssistSessionsModal onAdd={hideModal} />, { right: true });
showModal(<AssistSessionsModal onAdd={hideModal} />, { right: true, width: 700 });
};
const replaceSession = (e: React.MouseEvent, sessionId: string) => {
e.stopPropagation();
showModal(<AssistSessionsModal onAdd={hideModal} replaceTarget={sessionId} />, { right: true });
showModal(<AssistSessionsModal onAdd={hideModal} replaceTarget={sessionId} />, { right: true, width: 700 });
};
const deleteSession = (e: React.MouseEvent, sessionId: string) => {

2
frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx
View file

@ -23,7 +23,7 @@ function StackEventModal(props: Props) {
}
};
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '450px' }}>
<div className="bg-white h-screen overflow-y-auto">
{renderPopupContent()}
</div>
);

8
frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
View file

@ -27,18 +27,18 @@ const TimelinePointer = React.memo((props: Props) => {
}
if (type === 'ERRORS') {
showModal(<ErrorDetailsModal errorId={pointer.errorId} />, { right: true });
showModal(<ErrorDetailsModal errorId={pointer.errorId} />, { right: true, width: 1200 });
}
if (type === 'EVENT') {
showModal(<StackEventModal event={pointer} />, { right: true });
showModal(<StackEventModal event={pointer} />, { right: true, width: 450 });
}
if (type === NETWORK) {
if (pointer.tp === 'graph_ql') {
showModal(<GraphQLDetailsModal resource={pointer} />, { right: true });
showModal(<GraphQLDetailsModal resource={pointer} />, { right: true, width: 500 });
} else {
showModal(<FetchDetails resource={pointer} fetchPresented={props.fetchPresented} />, { right: true });
showModal(<FetchDetails resource={pointer} fetchPresented={props.fetchPresented} />, { right: true, width: 500 });
}
}
// props.toggleBottomBlock(type);

2
frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx
View file

@ -73,7 +73,7 @@ function AssistSessionsModal(props: Props) {
};
return (
<div className="bg-gray-lightest box-shadow h-screen p-4" style={{ width: '1000px', maxWidth: '60vw' }}>
<div className="bg-gray-lightest box-shadow h-screen p-4">
<div className="flex flex-col my-2 w-full gap-2 ">
<div className="flex items-center gap-2 w-full">
<Tooltip title="Refresh" placement="top" delay={200}>

2
frontend/app/components/Session_/Subheader.js
View file

@ -49,7 +49,7 @@ function SubHeader(props) {
eventsList: eventsList,
endTime: endTime,
}
showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true });
showModal(<BugReportModal width={width} height={height} xrayProps={xrayProps} hideModal={hideModal} />, { right: true, width: 620 });
};
return (

2
frontend/app/components/shared/AlertTriggersModal/AlertTriggersModal.tsx
View file

@ -31,7 +31,7 @@ function AlertTriggersModal(props: Props) {
}, [])
return useObserver(() => (
<div className="bg-white box-shadow h-screen overflow-y-auto" style={{ width: '350px'}}>
<div className="bg-white box-shadow h-screen overflow-y-auto">
<div className="flex items-center justify-between p-5 text-2xl">
<div>Alerts</div>
{ count > 0 && (

3
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -116,7 +116,8 @@ function ConsolePanel() {
showModal(
<ErrorDetailsModal errorId={log.errorId} />,
{
right: true,
right: true,
width: 1200,
onClose: () => {
setIsDetailsModalActive(false)
timeoutStartAutoscroll()

1
frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
View file

@ -234,6 +234,7 @@ function NetworkPanel({ startedAt }: { startedAt: number }) {
<FetchDetailsModal time={item.time + startedAt} resource={item} rows={filteredList} fetchPresented={fetchList.length > 0} />,
{
right: true,
width: 500,
onClose: () => {
setIsDetailsModalActive(false)
timeoutStartAutoscroll()

2
frontend/app/components/shared/DevTools/ProfilerModal/ProfilerModal.tsx
View file

@ -9,7 +9,7 @@ function ProfilerModal(props: Props) {
} = props;
return (
<div className="bg-white overflow-y-auto h-screen p-5" style={{ width: '500px' }}>
<div className="bg-white overflow-y-auto h-screen p-5">
<h5 className="mb-2 text-2xl">{name}</h5>
<h5 className="py-3">{'Arguments'}</h5>
<ul className="color-gray-medium">

2
frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx
View file

@ -23,7 +23,7 @@ function ProfilerPanel() {
const filtered = useRegExListFilterMemo(profiles, pr => pr.name, filter)
const onRowClick = (profile: any) => {
showModal(<ProfilerModal profile={profile} />, { right: true });
showModal(<ProfilerModal profile={profile} />, { right: true, width: 500 });
};
return (
<BottomBlock>

2
frontend/app/components/shared/DevTools/StackEventModal/StackEventModal.tsx
View file

@ -22,7 +22,7 @@ function StackEventModal(props: Props) {
}
};
return (
<div className="bg-white overflow-y-auto h-screen p-5" style={{ width: '500px' }}>
<div className="bg-white overflow-y-auto h-screen p-5">
<h5 className="mb-2 text-2xl">Stack Event</h5>
{renderPopupContent()}
</div>

1
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -66,6 +66,7 @@ function StackEventPanel() {
<StackEventModal event={item} />,
{
right: true,
width: 500,
onClose: () => {
setIsDetailsModalActive(false)
timeoutStartAutoscroll()

2
frontend/app/components/shared/SavedSearch/SavedSearch.tsx
View file

@ -25,7 +25,7 @@ function SavedSearch(props: Props) {
<div className={cn("flex items-center", { [stl.disabled] : list.size === 0})}>
<Button
variant="outline"
onClick={() => showModal(<SavedSearchModal />, { right: true })}
onClick={() => showModal(<SavedSearchModal />, { right: true, width: 450 })}
>
<span className="mr-1">Saved Search</span>
<span className="font-bold mr-2">{list.size}</span>

2
frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx
View file

@ -62,7 +62,7 @@ function SavedSearchModal(props: Props) {
const shownItems = props.list.filter((item) => item.name.includes(filterQuery));
return (
<div className="bg-white box-shadow h-screen" style={{ width: '450px' }}>
<div className="bg-white box-shadow h-screen">
<div className="p-6">
<h1 className="text-2xl">
Saved Search <span className="color-gray-medium">{props.list.size}</span>

2
frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx
View file

@ -7,7 +7,7 @@ function SessionSettingButton(props: any) {
const { showModal } = useModal();
const handleClick = () => {
showModal(<SessionSettings />, { right: true });
showModal(<SessionSettings />, { right: true, width: 450 });
};
return (

2
frontend/app/components/shared/SessionSettings/SessionSettings.tsx
View file

@ -6,7 +6,7 @@ import CaptureRate from './components/CaptureRate';
function SessionSettings() {
return (
<div className="bg-white box-shadow h-screen overflow-y-auto" style={{ width: '450px'}}>
<div className="bg-white box-shadow h-screen overflow-y-auto">
<div className="px-6 pt-6">
<h1 className="text-2xl">Sessions Settings</h1>
</div>

2
frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
View file

@ -46,7 +46,7 @@ function UserSessionsModal(props: Props) {
useEffect(fetchData, [filter.page, filter.startDate, filter.endDate]);
return (
<div className="h-screen overflow-y-auto bg-white" style={{ width: '700px' }}>
<div className="h-screen overflow-y-auto bg-white">
<div className="flex items-center justify-between w-full px-5 py-3">
<div className="text-lg flex items-center">
<Avatar isActive={false} seed={hash} isAssist={false} className={''} />

2
frontend/app/components/ui/ErrorItem/ErrorItem.tsx
View file

@ -15,7 +15,7 @@ function ErrorItem({ error = {}, onJump, inactive, selected }: Props) {
const { showModal } = useModal();
const onErrorClick = () => {
showModal(<ErrorDetailsModal errorId={error.errorId} />, { right: true });
showModal(<ErrorDetailsModal errorId={error.errorId} />, { right: true, width: 1200 });
};
return (
<div