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

UI Improvements

Browse source
This commit is contained in:
Sudheer Salavadi 2024-07-01 19:30:04 +05:30
parent 20ccee48d1
commit 23e7b87002
11 changed files with 60 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -1,10 +1,9 @@
import React, { useEffect } from 'react';
import WidgetWrapper from '../WidgetWrapper';
import { useObserver } from 'mobx-react-lite';
import { Icon } from 'UI';
import { Icon, Loader } from 'UI';
import cn from 'classnames';
import { useStore } from 'App/mstore';
import { Loader } from 'UI';
interface IWiProps {
category: Record<string, any>

4
frontend/app/components/Dashboard/components/FilterSeries/ExcludeFilters.tsx
View file

@ -6,7 +6,7 @@ import React from 'react';
import FilterItem from 'Shared/Filters/FilterItem';
import cn from 'classnames';
import { Button } from 'UI';
import { Button } from 'antd';
interface Props {
filter: Filter;
@ -47,7 +47,7 @@ function ExcludeFilters(props: Props) {
))}
</div>
) : (
<Button variant="text-primary" onClick={addPageFilter}>
<Button type="link" onClick={addPageFilter}>
Add Exclusion
</Button>
)}

2
frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
View file

@ -85,7 +85,7 @@ function FilterSeries(props: Props) {
},
canDelete,
hideHeader = false,
emptyMessage = 'Add user event or filter to define the series by clicking Add Step.',
emptyMessage = 'Add an event or filter step to define the series.',
supportsEmpty = true,
excludeFilterKeys = [],
canExclude = false,

9
frontend/app/components/Dashboard/components/FilterSeries/SeriesName/SeriesName.tsx
View file

@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from 'react';
import { Icon } from 'UI';
import {Input} from 'antd';
import {Input, Tooltip} from 'antd';
interface Props {
name: string;
@ -50,7 +50,12 @@ function SeriesName(props: Props) {
<div className="text-base h-8 flex items-center border-transparent">{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
)}
<div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div>
<div className="ml-3 cursor-pointer " onClick={() => setEditing(true)}>
<Tooltip title='Rename' placement='bottom'>
<Icon name="pencil" size="14" />
</Tooltip>
</div>
</div>
);
}

2
frontend/app/components/Dashboard/components/WidgetForm/CardBuilder.tsx
View file

@ -182,7 +182,7 @@ const SeriesList = observer(() => {
emptyMessage={
metric.metricType === TABLE
? 'Filter data using any event or attribute. Use Add Step button below to do so.'
: 'Add user event or filter to define the series by clicking Add Step.'
: 'Add an event or filter step to define the series.'
}
/>
</div>

2
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -318,7 +318,7 @@ function WidgetForm(props: Props) {
emptyMessage={
isTable
? 'Filter data using any event or attribute. Use Add Step button below to do so.'
: 'Add user event or filter to define the series by clicking Add Step.'
: 'Add an event or filter step to define the series.'
}
/>
</div>

2
frontend/app/components/Dashboard/components/WidgetForm/WidgetFormNew.tsx
View file

@ -103,7 +103,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
emptyMessage={
isTable
? 'Filter data using any event or attribute. Use Add Step button below to do so.'
: 'Add user event or filter to define the series by clicking Add Step.'
: 'Add an event or filter step to define the series.'
}
expandable={isSingleSeries}
/>

6
frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
View file

@ -80,7 +80,11 @@ function WidgetName(props: Props) {
</Tooltip>
)}
{ canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
{ canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
<Tooltip title='Rename' placement='bottom'>
<Icon name="pencil" size="16" />
</Tooltip>
</div> }
</div>
);
}

10
frontend/app/components/Onboarding/components/SideMenu.tsx
View file

@ -52,7 +52,7 @@ function SideMenu(props: Props) {
color={activeTab === OB_TABS.INSTALLING ? 'teal' : 'gray'}
/>
}
className={'!rounded hover-fill-teal'}
className={'!rounded-lg hover-fill-teal'}
>
Setup OpenReplay
</Menu.Item>
@ -66,7 +66,7 @@ function SideMenu(props: Props) {
color={activeTab === OB_TABS.IDENTIFY_USERS ? 'teal' : 'gray'}
/>
}
className={'!rounded hover-fill-teal'}
className={'!rounded-lg hover-fill-teal'}
>
Identify Users
</Menu.Item>
@ -80,7 +80,7 @@ function SideMenu(props: Props) {
color={activeTab === OB_TABS.MANAGE_USERS ? 'teal' : 'gray'}
/>
}
className={'!rounded hover-fill-teal'}
className={'!rounded-lg hover-fill-teal'}
>
Invite Collaborators
</Menu.Item>
@ -94,7 +94,7 @@ function SideMenu(props: Props) {
color={activeTab === OB_TABS.INTEGRATIONS ? 'teal' : 'gray'}
/>
}
className={'!rounded hover-fill-teal'}
className={'!rounded-lg hover-fill-teal'}
>
Integrations
</Menu.Item>
@ -109,7 +109,7 @@ function SideMenu(props: Props) {
color={activeTab === 'support' ? 'teal' : 'gray'}
/>
}
className={'!rounded hover-fill-teal'}
className={'!rounded-lg hover-fill-teal'}
>
Support
</Menu.Item>

60
frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js
View file

@ -1,11 +1,16 @@
import React from 'react';
import { Icon, Button } from 'UI';
import { Alert, Space, Button } from 'antd';
import { connect } from 'react-redux';
import { onboarding as onboardingRoute } from 'App/routes';
import { withRouter } from 'react-router-dom';
import * as routes from '../../../routes';
import { indigo } from 'tailwindcss/colors';
import { SquareArrowOutUpRight } from 'lucide-react';
const withSiteId = routes.withSiteId;
const indigoWithOpacity = `rgba(${parseInt(indigo[500].slice(1, 3), 16)}, ${parseInt(indigo[500].slice(3, 5), 16)}, ${parseInt(indigo[500].slice(5, 7), 16)}, 0.1)`; // 0.5 is the opacity level
const NoSessionsMessage = (props) => {
const {
@ -19,32 +24,35 @@ const NoSessionsMessage = (props) => {
return (
<>
{showNoSessions && (
<div>
<div
className='rounded text-sm flex items-center p-2 justify-between mb-4'
style={{ backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
>
<div className='flex items-center w-full'>
<div className='flex-shrink-0 w-8 flex justify-center'>
<Icon name='info-circle' size='14' color='gray-darkest' />
</div>
<div className='ml-2 color-gray-darkest mr-auto text-base'>
It might take a few minutes for first recording to appear.
<a href='https://docs.openreplay.com/en/troubleshooting/session-recordings/' className='link ml-2'>
Troubleshoot
</a>
.
</div>
<Button
variant='primary'
className='h-8 text-base'
onClick={() => props.history.push(onboardingPath)}
>
Complete Project Setup
</Button>
</div>
<div className="w-full mb-5">
<Space direction="vertical" className="w-full">
<Alert
className="border-transparent rounded-lg w-full"
message="Your sessions will appear here soon. It may take a few minutes as sessions are optimized for efficient playback."
type="warning"
showIcon
action={
<Space>
<Button
type="link"
size="small"
onClick={() => window.open('https://docs.openreplay.com/en/troubleshooting/session-recordings/', '_blank')}
icon={<SquareArrowOutUpRight size={16} />}
>
Troubleshoot
</Button>
<Button
type="default"
size="small"
onClick={() => history.push(onboardingPath)}
>
Complete Project Setup
</Button>
</Space>
}
/>
</Space>
</div>
</div>
)}
</>
);

4
frontend/app/layout/SideMenu.tsx
View file

@ -177,7 +177,7 @@ function SideMenu(props: Props) {
key={item.key}
style={{ paddingLeft: '20px' }}
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''} />}
className={cn('!rounded hover-fill-teal')}
className={cn('!rounded-lg hover-fill-teal')}
>
{item.label}
</Menu.Item>
@ -200,7 +200,7 @@ function SideMenu(props: Props) {
icon={<Icon name={item.icon} size={16} color={isActive ? 'teal' : ''}
className={'hover-fill-teal'} />}
style={{ paddingLeft: '20px' }}
className={cn('!rounded hover-fill-teal')}
className={cn('!rounded-lg hover-fill-teal')}
itemIcon={item.leading ?
<Icon name={item.leading} size={16} color={isActive ? 'teal' : ''} /> : null}>
{item.label}