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

change(ui) - remote pull resolve conflicts

Browse source
This commit is contained in:
Shekar Siri 2022-06-23 16:04:33 +02:00
parent 71f5f3a797
commit 952515b293
14 changed files with 89 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Alerts/Notifications/Notifications.tsx
View file

@ -16,14 +16,11 @@ interface Props {
fetchList: any;
}
function Notifications(props: Props) {
// const { notifications } = props;
const { showModal } = useModal();
// const unReadNotificationsCount = notifications.filter(({viewed}: any) => !viewed).size
const { notificationStore } = useStore();
const count = useObserver(() => notificationStore.notificationsCount);
useEffect(() => {
notificationStore.fetchNotificationsCount();
const interval = setInterval(() => {
notificationStore.fetchNotificationsCount()
}, AUTOREFRESH_INTERVAL);

15
frontend/app/components/BugFinder/BugFinder.js
View file

@ -6,19 +6,14 @@ import {
fetchFavoriteList as fetchFavoriteSessionList
} from 'Duck/sessions';
import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
import { fetchList as fetchFunnelsList } from 'Duck/funnels';
import { KEYS } from 'Types/filter/customFilter';
import SessionList from './SessionList';
import stl from './bugFinder.module.css';
import withLocationHandlers from "HOCs/withLocationHandlers";
import { fetch as fetchFilterVariables } from 'Duck/sources';
import { fetchSources } from 'Duck/customField';
import { setFunnelPage } from 'Duck/sessions';
import { setActiveTab } from 'Duck/search';
import SessionsMenu from './SessionsMenu/SessionsMenu';
import { LAST_7_DAYS } from 'Types/app/period';
import { resetFunnel } from 'Duck/funnels';
import { resetFunnelFilters } from 'Duck/funnelFilters'
import NoSessionsMessage from 'Shared/NoSessionsMessage';
import SessionSearch from 'Shared/SessionSearch';
import MainSearchBar from 'Shared/MainSearchBar';
@ -65,10 +60,6 @@ const allowedQueryKeys = [
fetchSources,
clearEvents,
setActiveTab,
fetchFunnelsList,
resetFunnel,
resetFunnelFilters,
setFunnelPage,
clearSearch,
fetchSessions,
})
@ -94,8 +85,6 @@ export default class BugFinder extends React.PureComponent {
if (props.sessions.size === 0) {
props.fetchSessions();
}
// props.resetFunnel();
// props.resetFunnelFilters();
const queryFilter = this.props.query.all(allowedQueryKeys);
if (queryFilter.hasOwnProperty('userId')) {
@ -103,10 +92,6 @@ export default class BugFinder extends React.PureComponent {
}
}
componentDidMount() {
this.props.setFunnelPage(false);
}
toggleRehydratePanel = () => {
this.setState({ showRehydratePanel: !this.state.showRehydratePanel })
}

22
frontend/app/components/Client/Users/UsersView.tsx
View file

@ -1,15 +1,14 @@
import React, { useEffect } from 'react';
import UserList from './components/UserList';
import { PageTitle, Popup, IconButton } from 'UI';
import { PageTitle } from 'UI';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import UserSearch from './components/UserSearch';
import { useModal } from 'App/components/Modal';
import UserForm from './components/UserForm';
import { connect } from 'react-redux';
import AddUserButton from './components/AddUserButton';
const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
const LIMIT_WARNING = 'You have reached users limit.';
interface Props {
account: any;
isEnterprise: boolean;
@ -43,22 +42,7 @@ function UsersView(props: Props) {
<PageTitle
title={<div>Team <span className="color-gray-medium">{userCount}</span></div>}
actionButton={(
<Popup
content={ `${ !isAdmin ? PERMISSION_WARNING : (reachedLimit ? LIMIT_WARNING : 'Add team member') }` }
size="tiny"
inverted
position="top left"
>
<IconButton
id="add-button"
disabled={ reachedLimit || !isAdmin }
circle
icon="plus"
outline
className="ml-3"
onClick={ () => editHandler(null) }
/>
</Popup>
<AddUserButton isAdmin={isAdmin} onClick={() => editHandler(null)} />
)}
/>
<div>

30
frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import { Popup, IconButton } from 'UI';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
const PERMISSION_WARNING = 'You don’t have the permissions to perform this action.';
const LIMIT_WARNING = 'You have reached users limit.';
function AddUserButton({ isAdmin = false, onClick }: any ) {
const { userStore } = useStore();
const limtis = useObserver(() => userStore.limits);
const cannAddUser = useObserver(() => isAdmin && (limtis.teamMember === -1 || limtis.teamMember > 0));
return (
<Popup
content={ `${ !isAdmin ? PERMISSION_WARNING : (!cannAddUser ? LIMIT_WARNING : 'Add team member') }` }
>
<IconButton
id="add-button"
disabled={ !cannAddUser || !isAdmin }
circle
icon="plus"
outline
onClick={ onClick }
className="ml-4"
/>
</Popup>
);
}
export default AddUserButton;

1
frontend/app/components/Client/Users/components/AddUserButton/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './AddUserButton';

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

@ -27,6 +27,7 @@ function UserForm(props: Props) {
const onSave = () => {
userStore.saveUser(user).then(() => {
hideModal();
userStore.fetchLimits();
});
}
@ -42,6 +43,7 @@ function UserForm(props: Props) {
})) {
userStore.deleteUser(user.userId).then(() => {
hideModal();
userStore.fetchLimits();
});
}
}

4
frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
View file

@ -14,9 +14,9 @@ function DashboardLink({ dashboards}: any) {
<Link to={`/dashboard/${dashboard.dashboardId}`}>
<div className="flex items-center mb-1 py-1">
<div className="mr-2">
<Icon name="circle-fill" size="4" color="gray-medium" />
<Icon name="circle-fill" size={4} color="gray-medium" />
</div>
<span className="link leading-4">{dashboard.name}</span>
<span className="link leading-4 capitalize-first">{dashboard.name}</span>
</div>
</Link>
</React.Fragment>

15
frontend/app/components/Header/Header.js
View file

@ -27,6 +27,7 @@ import Alerts from '../Alerts/Alerts';
import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
import { fetchList as fetchMetadata } from 'Duck/customField';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
const DASHBOARD_PATH = dashboard();
const SESSIONS_PATH = sessions();
@ -47,18 +48,26 @@ const Header = (props) => {
const name = account.get('name').split(" ")[0];
const [hideDiscover, setHideDiscover] = useState(false)
const { userStore } = useStore();
const { userStore, notificationStore } = useStore();
const initialDataFetched = useObserver(() => userStore.initialDataFetched);
let activeSite = null;
useEffect(() => {
userStore.fetchLimits();
if (initialDataFetched) return;
Promise.all([
userStore.fetchLimits(),
notificationStore.fetchNotificationsCount(),
]).then(() => {
userStore.updateKey('initialDataFetched', true);
});
}, []);
useEffect(() => {
activeSite = sites.find(s => s.id == siteId);
props.initSite(activeSite);
props.fetchMetadata();
}, [sites])
}, [siteId])
return (
<div className={ cn(styles.header) }>

28
frontend/app/components/Header/NewProjectButton/NewProjectButton.tsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
function NewProjectButton({ onClick, isAdmin = false }: any) {
const { userStore } = useStore();
const limtis = useObserver(() => userStore.limits);
const canAddProject = useObserver(() => isAdmin && (limtis.projects === -1 || limtis.projects > 0));
return (
<div
className={cn('flex items-center justify-center py-3 cursor-pointer hover:bg-active-blue ', { 'disabled' : !canAddProject })}
onClick={onClick}
>
<Icon
name="plus"
size={12}
className="mr-2"
color="teal"
/>
<span className="color-teal">Add New Project</span>
</div>
);
}
export default NewProjectButton;

1
frontend/app/components/Header/NewProjectButton/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './NewProjectButton'

4
frontend/app/components/Header/OnboardingExplore/OnboardingExplore.js
View file

@ -47,7 +47,9 @@ const styles = {
@withRouter
class OnboardingExplore extends React.PureComponent {
UNSAFE_componentWillMount() {
this.props.getOnboard();
if (this.props.boarding.size === 0) {
this.props.getOnboard();
}
}
componentDidMount() {

18
frontend/app/components/Header/SiteDropdown.js
View file

@ -14,6 +14,7 @@ import { clearSearch } from 'Duck/search';
import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
import { withStore } from 'App/mstore'
import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
import NewProjectButton from './NewProjectButton';
@withStore
@withRouter
@ -57,10 +58,8 @@ export default class SiteDropdown extends React.PureComponent {
const activeSite = sites.find(s => s.id == siteId);
const disabled = !siteChangeAvaliable(pathname);
const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
// const canAddSites = isAdmin && account.limits.projects && account.limits.projects.remaining !== 0;
// const signslGreenSvg = <object data={SignalGreenSvg} type="image/svg+xml" className={styles.signalGreen} />
// const signslRedSvg = <object data={SignalRedSvg} type="image/svg+xml" className={styles.signalRed} />
return (
<div className={ styles.wrapper }>
{
@ -87,18 +86,7 @@ export default class SiteDropdown extends React.PureComponent {
))
}
</ul>
<div
className={cn(styles.btnNew, 'flex items-center justify-center py-3 cursor-pointer', { [styles.disabled] : !canAddSites })}
onClick={this.newSite}
>
<Icon
name="plus"
size="12"
marginRight="5"
color="teal"
/>
<span className="color-teal">Add New Project</span>
</div>
<NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
</div>
<SlideModal

0
frontend/app/components/Header/components/index.js
View file

7
frontend/app/mstore/userStore.ts
View file

@ -14,7 +14,8 @@ export default class UserStore {
loading: boolean = false;
saving: boolean = false;
limits: any = null;
limits: any = {};
initialDataFetched: boolean = false;
constructor() {
makeAutoObservable(this, {
@ -29,8 +30,8 @@ export default class UserStore {
return new Promise((resolve, reject) => {
userService.getLimits()
.then((response: any) => {
this.limits = response.limits;
resolve(response.limits);
this.limits = response;
resolve(response);
}).catch((error: any) => {
reject(error);
});