- Talking to {userId ? userId : 'Anonymous User'}
+ Call with {userId ? userId : 'Anonymous User'}
{incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''}
diff --git a/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
new file mode 100644
index 000000000..6d702acdb
--- /dev/null
+++ b/frontend/app/components/Assist/RequestingWindow/RequestingWindow.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { INDEXES } from 'App/constants/zindex';
+import { connect } from 'react-redux';
+import { Button, Loader, Icon } from 'UI';
+import { initiateCallEnd, releaseRemoteControl } from 'Player';
+
+interface Props {
+ userDisplayName: string;
+ type: WindowType;
+}
+
+export enum WindowType {
+ Call,
+ Control,
+}
+
+const WIN_VARIANTS = {
+ [WindowType.Call]: {
+ text: 'to accept the call',
+ icon: 'call' as const,
+ action: initiateCallEnd,
+ },
+ [WindowType.Control]: {
+ text: 'to accept remote control request',
+ icon: 'remote-control' as const,
+ action: releaseRemoteControl,
+ },
+};
+
+function RequestingWindow({ userDisplayName, type }: Props) {
+ return (
+ {incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''}
+
+ );
+}
+
+export default connect((state) => ({
+ userDisplayName: state.getIn(['sessions', 'current', 'userDisplayName']),
+}))(RequestingWindow);
diff --git a/frontend/app/components/Assist/RequestingWindow/index.ts b/frontend/app/components/Assist/RequestingWindow/index.ts
new file mode 100644
index 000000000..1a50403c4
--- /dev/null
+++ b/frontend/app/components/Assist/RequestingWindow/index.ts
@@ -0,0 +1 @@
+export { default, WindowType } from './RequestingWindow'
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 948b86967..85c2f6ad3 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -5,200 +5,252 @@ import cn from 'classnames';
import { toggleChatWindow } from 'Duck/sessions';
import { connectPlayer } from 'Player/store';
import ChatWindow from '../../ChatWindow';
-import { callPeer, setCallArgs, requestReleaseRemoteControl, toggleAnnotation } from 'Player';
-import { CallingState, ConnectionStatus, RemoteControlStatus } from 'Player/MessageDistributor/managers/AssistManager';
+import {
+ callPeer,
+ setCallArgs,
+ requestReleaseRemoteControl,
+ toggleAnnotation,
+ toggleUserName,
+} from 'Player';
+import {
+ CallingState,
+ ConnectionStatus,
+ RemoteControlStatus,
+} from 'Player/MessageDistributor/managers/AssistManager';
import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream';
import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
-
+import { Tooltip } from 'react-tippy';
import { toast } from 'react-toastify';
import { confirm } from 'UI';
import stl from './AassistActions.module.css';
function onReject() {
- toast.info(`Call was rejected.`);
+ toast.info(`Call was rejected.`);
}
function onError(e: any) {
- console.log(e)
- toast.error(typeof e === 'string' ? e : e.message);
+ console.log(e);
+ toast.error(typeof e === 'string' ? e : e.message);
}
interface Props {
- userId: string;
- calling: CallingState;
- annotating: boolean;
- peerConnectionStatus: ConnectionStatus;
- remoteControlStatus: RemoteControlStatus;
- hasPermission: boolean;
- isEnterprise: boolean;
- isCallActive: boolean;
- agentIds: string[];
- livePlay: boolean;
+ userId: string;
+ calling: CallingState;
+ annotating: boolean;
+ peerConnectionStatus: ConnectionStatus;
+ remoteControlStatus: RemoteControlStatus;
+ hasPermission: boolean;
+ isEnterprise: boolean;
+ isCallActive: boolean;
+ agentIds: string[];
+ livePlay: boolean;
+ userDisplayName: string;
}
function AssistActions({
- userId,
- calling,
- annotating,
- peerConnectionStatus,
- remoteControlStatus,
- hasPermission,
- isEnterprise,
- isCallActive,
- agentIds,
- livePlay
+ userId,
+ calling,
+ annotating,
+ peerConnectionStatus,
+ remoteControlStatus,
+ hasPermission,
+ isEnterprise,
+ isCallActive,
+ agentIds,
+ livePlay,
+ userDisplayName,
}: Props) {
- const [isPrestart, setPrestart] = useState(false);
- const [incomeStream, setIncomeStream] = useState
+
+
+ Waiting for {userDisplayName}
+
+ {WIN_VARIANTS[type].text}
+
- {(onCall || remoteActive) && (
- <>
-
)}
- toggleAnnotation(!annotating)}
- role="button"
- >
-
- {/*
-
-
- )}
- {
+ if (callRequesting || remoteRequesting) return;
+ requestReleaseRemoteControl();
+ };
+
+ return (
+
-
-
-
+
+
+
+
+
+
+
+ );
}
const con = connect(
- (state) => {
- const permissions = state.getIn(['user', 'account', 'permissions']) || [];
- return {
- hasPermission: permissions.includes('ASSIST_CALL'),
- isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
- };
- },
- { toggleChatWindow }
+ (state) => {
+ const permissions = state.getIn(['user', 'account', 'permissions']) || [];
+ return {
+ hasPermission: permissions.includes('ASSIST_CALL'),
+ isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+ userDisplayName: state.getIn(['sessions', 'current', 'userDisplayName']),
+ };
+ },
+ { toggleChatWindow }
);
export default con(
- connectPlayer((state) => ({
- calling: state.calling,
- annotating: state.annotating,
- remoteControlStatus: state.remoteControl,
- peerConnectionStatus: state.peerConnectionStatus,
- livePlay: state.livePlay,
- }))(AssistActions)
+ connectPlayer((state) => ({
+ calling: state.calling,
+ annotating: state.annotating,
+ remoteControlStatus: state.remoteControl,
+ peerConnectionStatus: state.peerConnectionStatus,
+ livePlay: state.livePlay,
+ }))(AssistActions)
);
diff --git a/frontend/app/components/Client/Integrations/IntegrationForm.js b/frontend/app/components/Client/Integrations/IntegrationForm.js
index ad6689f3b..c1115f405 100644
--- a/frontend/app/components/Client/Integrations/IntegrationForm.js
+++ b/frontend/app/components/Client/Integrations/IntegrationForm.js
@@ -2,7 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { Input, Form, Button, Checkbox, Loader } from 'UI';
import SiteDropdown from 'Shared/SiteDropdown';
-import { save, init, edit, remove, fetchList } from 'Duck/integrations/actions';
+import { save, init, edit, remove } from 'Duck/integrations/actions';
import { fetchIntegrationList } from 'Duck/integrations/integrations';
@connect(
@@ -21,16 +21,22 @@ import { fetchIntegrationList } from 'Duck/integrations/integrations';
init,
edit,
remove,
- fetchList,
+ // fetchList,
fetchIntegrationList,
}
)
export default class IntegrationForm extends React.PureComponent {
constructor(props) {
super(props);
- // const currentSiteId = this.props.initialSiteId;
- // this.state = { currentSiteId };
- // this.init(currentSiteId);
+ }
+
+ fetchList = () => {
+ const { siteId, initialSiteId } = this.props;
+ if (!siteId) {
+ this.props.fetchIntegrationList(initialSiteId);
+ } else {
+ this.props.fetchIntegrationList(siteId);
+ }
}
write = ({ target: { value, name: key, type, checked } }) => {
@@ -57,6 +63,7 @@ export default class IntegrationForm extends React.PureComponent {
// const { currentSiteId } = this.state;
this.props.save(customPath || name, !ignoreProject ? this.props.siteId : null, config).then(() => {
// this.props.fetchList(name);
+ this.fetchList();
this.props.onClose();
if (isExists) return;
});
@@ -67,7 +74,7 @@ export default class IntegrationForm extends React.PureComponent {
this.props.remove(name, !ignoreProject ? config.projectId : null).then(
function () {
this.props.onClose();
- this.props.fetchList(name);
+ this.fetchList();
}.bind(this)
);
};
diff --git a/frontend/app/components/Client/Integrations/IntegrationItem.tsx b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
index f1b69c029..ec730e7c1 100644
--- a/frontend/app/components/Client/Integrations/IntegrationItem.tsx
+++ b/frontend/app/components/Client/Integrations/IntegrationItem.tsx
@@ -22,7 +22,9 @@ const IntegrationItem = (props: Props) => {
+ {(onCall || remoteActive) && (
+ <>
+
+
+
+ )}
- toggleAnnotation(!annotating)}
+ role="button"
+ >
+
-
+ Annotate
+
+
-
- {/*
-
- {onCall && callObject && (
-
+ {/* @ts-ignore */}
+
+
- );
+
+
+
+
+ {onCall && callObject && (
+
+ {integration.title}
{/*{integration.subtitle && integration.subtitle}
*/} diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx index 8e301ac8a..8080213b1 100644 --- a/frontend/app/components/Client/Integrations/Integrations.tsx +++ b/frontend/app/components/Client/Integrations/Integrations.tsx @@ -29,6 +29,8 @@ import AssistDoc from './AssistDoc'; import { PageTitle, Loader } from 'UI'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; import withPageTitle from 'HOCs/withPageTitle'; +import PiniaDoc from './PiniaDoc' +import ZustandDoc from './ZustandDoc' interface Props { fetch: (name: string, siteId: string) => void; @@ -162,6 +164,7 @@ const integrations = [ integrations: [ { title: 'Redux', slug: '', icon: 'integrations/redux', component:
+
+ );
+};
+
+PiniaDoc.displayName = 'PiniaDoc';
+
+export default connect((state) => ({
+ projectKey: state.getIn(['site', 'instance', 'projectKey']),
+}))(PiniaDoc);
diff --git a/frontend/app/components/Client/Integrations/PiniaDoc/index.js b/frontend/app/components/Client/Integrations/PiniaDoc/index.js
new file mode 100644
index 000000000..730c76beb
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/PiniaDoc/index.js
@@ -0,0 +1 @@
+export { default } from './PiniaDoc'
diff --git a/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
new file mode 100644
index 000000000..35ff5ecdf
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import Highlight from 'react-highlight';
+import ToggleContent from '../../../shared/ToggleContent';
+import DocLink from 'Shared/DocLink/DocLink';
+import { connect } from 'react-redux';
+
+const ZustandDoc = (props) => {
+ const { projectKey } = props;
+ return (
+ VueX
+
+ {`npm i @openreplay/tracker-vuex --save`}
+
+
+ {`import Vuex from 'vuex'
+import OpenReplay from '@openreplay/tracker';
+import trackerVuex from '@openreplay/tracker-vuex';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+tracker.start();
+//...
+const examplePiniaStore = useExamplePiniaStore()
+// check list of available options below
+const vuexPlugin = tracker.use(trackerVuex())
+// add a name to your store, optional
+//(will be randomly generated otherwise)
+const piniaStorePlugin = vuexPlugin('STORE NAME')
+
+// start tracking state updates
+piniaStorePlugin(examplePiniaStore)
+// now you can use examplePiniaStore as
+// usual pinia store
+// (destructure values or return it as a whole etc)
+`}
+
+ }
+ second={
+
+ {`import Vuex from 'vuex'
+import OpenReplay from '@openreplay/tracker/cjs';
+import trackerVuex from '@openreplay/tracker-vuex/cjs';
+//...
+const tracker = new OpenReplay({
+ projectKey: '${projectKey}'
+});
+//...
+
+// start tracker when the app is mounted
+tracker.start();
+
+//...
+const examplePiniaStore = useExamplePiniaStore()
+// check list of available options below
+const vuexPlugin = tracker.use(trackerVuex())
+// add a name to your store, optional
+// (will be randomly generated otherwise)
+const piniaStorePlugin = vuexPlugin('STORE NAME')
+
+// start tracking state updates
+piniaStorePlugin(examplePiniaStore)
+// now you can use examplePiniaStore as
+// usual pinia store
+// (destructure values or return it as a whole etc)
+}`}
+
+ }
+ />
+
+
+
+ This plugin allows you to capture Pinia mutations + state and inspect them later on while
+ replaying session recordings. This is very useful for understanding and fixing issues.
+
+
+ Installation
+ Usage
+ + Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put + the generated plugin into your plugins field of your store. +
+ + +
+
+ );
+};
+
+ZustandDoc.displayName = 'ZustandDoc';
+
+export default connect((state) => ({ projectKey: state.getIn(['site', 'instance', 'projectKey'])}) )(ZustandDoc)
diff --git a/frontend/app/components/Client/Integrations/ZustandDoc/index.js b/frontend/app/components/Client/Integrations/ZustandDoc/index.js
new file mode 100644
index 000000000..f7061eb7a
--- /dev/null
+++ b/frontend/app/components/Client/Integrations/ZustandDoc/index.js
@@ -0,0 +1 @@
+export { default } from './ZustandDoc'
diff --git a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
index 8314e521a..498631ad1 100644
--- a/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
+++ b/frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js
@@ -7,112 +7,126 @@ import { CLIENT_TABS, client as clientRoute } from 'App/routes';
import { withRouter } from 'react-router-dom';
function PreferencesMenu({ account, activeTab, history, isEnterprise }) {
- const isAdmin = account.admin || account.superAdmin;
- const setTab = (tab) => {
- history.push(clientRoute(tab));
- };
+ const isAdmin = account.admin || account.superAdmin;
+ const setTab = (tab) => {
+ history.push(clientRoute(tab));
+ };
- return (
- Zustand
+
+ {`npm i @openreplay/tracker-zustand --save`}
+
+
+ {`import create from "zustand";
+import Tracker from '@openreplay/tracker';
+import trackerZustand from '@openreplay/tracker-zustand';
+
+
+const tracker = new Tracker({
+ projectKey: ${projectKey},
+});
+
+const zustandPlugin = tracker.use(trackerZustand())
+// store name, optional
+// randomly generated if undefined
+const bearStoreLogger = zustandPlugin('bear_store')
+
+
+const useBearStore = create(
+ bearStoreLogger((set: any) => ({
+ bears: 0,
+ increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+ }))
+)`}
+
+ }
+ second={
+
+ {`import create from "zustand";
+import Tracker from '@openreplay/tracker/cjs';
+import trackerZustand from '@openreplay/tracker-zustand/cjs';
+
+
+const tracker = new Tracker({
+ projectKey: ${projectKey},
+});
+
+const zustandPlugin = tracker.use(trackerZustand())
+// store name, optional
+// randomly generated if undefined
+const bearStoreLogger = zustandPlugin('bear_store')
+
+
+const useBearStore = create(
+ bearStoreLogger((set: any) => ({
+ bears: 0,
+ increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
+ removeAllBears: () => set({ bears: 0 }),
+ }))
+)`}
+
+ }
+ />
+
+
+
+ This plugin allows you to capture Zustand mutations/state and inspect them later on while replaying session recordings. This is very
+ useful for understanding and fixing issues.
+
+
+ Installation
+ Usage
+ + Initialize the @openreplay/tracker package as usual and load the plugin into it. Then put the generated plugin into your plugins + field of your store. +
+ + +
-
-
+
@@ -123,7 +122,7 @@ function Roles(props: Props) {
export default connect(
(state: any) => {
const permissions = state.getIn(['roles', 'permissions']);
- const permissionsMap = {};
+ const permissionsMap: any = {};
permissions.forEach((p: any) => {
permissionsMap[p.value] = p.text;
});
diff --git a/frontend/app/components/Client/Sites/NewSiteForm.js b/frontend/app/components/Client/Sites/NewSiteForm.js
index 0a9dc81c7..75776e1f1 100644
--- a/frontend/app/components/Client/Sites/NewSiteForm.js
+++ b/frontend/app/components/Client/Sites/NewSiteForm.js
@@ -7,6 +7,9 @@ import { setSiteId } from 'Duck/site';
import { withRouter } from 'react-router-dom';
import styles from './siteForm.module.css';
import { confirm } from 'UI';
+import { clearSearch } from 'Duck/search';
+import { clearSearch as clearSearchLive } from 'Duck/liveSearch';
+import { withStore } from 'App/mstore';
@connect(
(state) => ({
@@ -23,13 +26,17 @@ import { confirm } from 'UI';
pushNewSite,
fetchList,
setSiteId,
+ clearSearch,
+ clearSearchLive,
}
)
@withRouter
+@withStore
export default class NewSiteForm extends React.PureComponent {
state = {
existsError: false,
};
+
componentDidMount() {
const {
@@ -60,16 +67,10 @@ export default class NewSiteForm extends React.PureComponent {
});
} else {
this.props.save(this.props.site).then(() => {
- this.props.fetchList().then(() => {
- const { sites } = this.props;
- const site = sites.last();
- if (!pathname.includes('/client')) {
- this.props.setSiteId(site.get('id'));
- }
- this.props.onClose(null, site);
- });
-
- // this.props.pushNewSite(site)
+ this.props.onClose(null);
+ this.props.clearSearch();
+ this.props.clearSearchLive();
+ this.props.mstore.initClient();
});
}
};
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index 1611b6cf2..f5cb0a744 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
@@ -27,11 +27,15 @@ function UserListItem(props: Props) {
-
-
-
- Preferences
-
-
- setTab(CLIENT_TABS.PROFILE)}
- />
-
-
-
- setTab(CLIENT_TABS.INTEGRATIONS)}
- />
-
-
-
- setTab(CLIENT_TABS.CUSTOM_FIELDS)}
- title="Metadata"
- />
-
-
- {
-
- setTab(CLIENT_TABS.WEBHOOKS)}
- />
-
- }
-
-
- setTab(CLIENT_TABS.SITES)}
- />
-
-
- {isEnterprise && isAdmin && (
-
- setTab(CLIENT_TABS.MANAGE_ROLES)}
- />
-
- )}
-
- {isEnterprise && isAdmin && (
-
- setTab(CLIENT_TABS.AUDIT)}
- />
-
- )}
-
- {isAdmin && (
-
- setTab(CLIENT_TABS.MANAGE_USERS)}
- />
-
- )}
-
-
- setTab(CLIENT_TABS.NOTIFICATIONS)}
- />
-
+ return (
+
+
+ );
}
export default connect((state) => ({
- isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
- account: state.getIn(['user', 'account']),
+ isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+ account: state.getIn(['user', 'account']),
}))(withRouter(PreferencesMenu));
+
+function AdminOnlyBadge() {
+ return (
+
+
+
+
+ Preferences
- );
+
+ setTab(CLIENT_TABS.PROFILE)}
+ />
+
+
+
+ setTab(CLIENT_TABS.INTEGRATIONS)}
+ />
+
+
+
+ setTab(CLIENT_TABS.CUSTOM_FIELDS)}
+ title="Metadata"
+ />
+
+
+ {
+
+ setTab(CLIENT_TABS.WEBHOOKS)}
+ />
+
+ }
+
+
+ setTab(CLIENT_TABS.SITES)}
+ />
+
+
+ {isEnterprise && isAdmin && (
+
+ setTab(CLIENT_TABS.MANAGE_ROLES)}
+ leading={
+ )}
+
+ {isEnterprise && isAdmin && (
+
+ setTab(CLIENT_TABS.AUDIT)}
+ leading={
+ )}
+
+ {isAdmin && (
+
+ setTab(CLIENT_TABS.MANAGE_USERS)}
+ leading={
+ )}
+
+
+ setTab(CLIENT_TABS.NOTIFICATIONS)}
+ />
+
+
+ Admin Only
+
+ );
+}
diff --git a/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css b/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
index 818008fb8..c129c5cb8 100644
--- a/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
+++ b/frontend/app/components/Client/PreferencesMenu/preferencesMenu.module.css
@@ -1,7 +1,7 @@
.wrapper {
position: fixed;
top: 81px;
- width: 200px;
+ width: 210px;
}
.header {
diff --git a/frontend/app/components/Client/Roles/Roles.tsx b/frontend/app/components/Client/Roles/Roles.tsx
index 1c2939928..75469d3cf 100644
--- a/frontend/app/components/Client/Roles/Roles.tsx
+++ b/frontend/app/components/Client/Roles/Roles.tsx
@@ -38,7 +38,7 @@ function Roles(props: Props) {
useEffect(() => {
if (removeErrors && removeErrors.size > 0) {
- removeErrors.forEach((e) => {
+ removeErrors.forEach((e: any) => {
toast.error(e);
});
}
@@ -47,21 +47,20 @@ function Roles(props: Props) {
};
}, [removeErrors]);
- const closeModal = (showToastMessage) => {
- if (showToastMessage) {
- toast.success(showToastMessage);
- props.fetchList();
- }
- setShowmModal(false);
- setTimeout(() => {
- init();
- }, 100);
- };
+ // const closeModal = (showToastMessage: boolean) => {
+ // if (showToastMessage) {
+ // toast.success(showToastMessage);
+ // props.fetchList();
+ // }
+ // // setShowmModal(false);
+ // setTimeout(() => {
+ // init();
+ // }, 100);
+ // };
const editHandler = (role: any) => {
init(role);
showModal(Roles and Access
{user.name}
- {isEnterprise &&
{!isEnterprise &&
{!isOnboarding && (
diff --git a/frontend/app/components/Client/client.module.css b/frontend/app/components/Client/client.module.css
index 43d311b31..815b7e8d6 100644
--- a/frontend/app/components/Client/client.module.css
+++ b/frontend/app/components/Client/client.module.css
@@ -10,7 +10,7 @@
/* min-height: calc(100vh - 81px); */
& .tabMenu {
- width: 240px;
+ width: 250px;
margin: 0;
background-color: $gray-lightest;
}
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
index 47c88c0aa..9fc69d018 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
@@ -7,6 +7,7 @@ import MethodType from './MethodType';
import cn from 'classnames';
import stl from './callWithErrors.module.css';
import { NO_METRIC_DATA } from 'App/constants/messages'
+import { List } from 'immutable';
const cols = [
{
@@ -51,10 +52,10 @@ interface Props {
function CallWithErrors(props: Props) {
const { data, metric } = props;
const [search, setSearch] = React.useState('')
- const test = (value = '', serach) => getRE(serach, 'i').test(value);
- const _data = search ? metric.data.chart.filter(i => test(i.urlHostpath, search)) : metric.data.chart.images;
+ const test = (value = '', serach: any) => getRE(serach, 'i').test(value);
+ const _data = search ? metric.data.chart.filter((i: any) => test(i.urlHostpath, search)) : metric.data.chart;
- const write = ({ target: { name, value } }) => {
+ const write = ({ target: { name, value } }: any) => {
setSearch(value)
};
@@ -71,8 +72,9 @@ function CallWithErrors(props: Props) {
{ data.endedAt && data.startedAt && `${ diffFromNowString(data.endedAt) } ago - ${ diffFromNowString(data.startedAt) } old` }
diff --git a/frontend/app/components/Dashboard/Widgets/common/table.module.css b/frontend/app/components/Dashboard/Widgets/common/table.module.css
index d49c52040..9c69c1ce5 100644
--- a/frontend/app/components/Dashboard/Widgets/common/table.module.css
+++ b/frontend/app/components/Dashboard/Widgets/common/table.module.css
@@ -23,7 +23,7 @@
.row {
display: flex;
align-items: center;
- min-height: 54px;
+ min-height: 50px;
font-size: 13px;
& .cell {
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 470a43cb0..b870435b7 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -18,6 +18,7 @@ import SelectDateRange from 'Shared/SelectDateRange';
import { Tooltip } from 'react-tippy';
import Breadcrumb from 'Shared/Breadcrumb';
import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
interface IProps {
siteId: string;
@@ -32,6 +33,7 @@ function DashboardView(props: Props) {
const { dashboardStore } = useStore();
const { showModal } = useModal();
+ const [showTooltip, setShowTooltip] = React.useState(false);
const [focusTitle, setFocusedInput] = React.useState(true);
const [showEditModal, setShowEditModal] = React.useState(false);
@@ -125,18 +127,24 @@ function DashboardView(props: Props) {
className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
actionButton={
/* @ts-ignore */
-
+ setShowTooltip(false)}>
+ setShowTooltip(false)} isPopup siteId={siteId} />
+
+
+ }
>
-