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

change(ui): integrations card description

Browse source
This commit is contained in:
Shekar Siri 2023-07-26 16:04:15 +02:00
parent 3f1473e653
commit 595fcd41be
7 changed files with 46 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/app/components/Client/Integrations/IntegrationFilters.tsx
View file

@ -2,24 +2,13 @@ import React from 'react';
import { Icon } from 'UI';
import cn from 'classnames';
// const FILTERS = [
// { key: 'all', name: 'All', icon: 'play' },
// { key: 'issue-reporting', name: 'Issue Reporting', icon: 'play' },
// { key: 'backend-logging', name: 'Backend Logging', icon: 'play' },
// { key: 'stack-tracing', name: 'Stack Tracing', icon: 'play' },
// { key: 'state-management', name: 'State Management', icon: 'play' },
// { key: 'collaboration', name: 'Collaboration', icon: 'play' },
// { key: 'plugins', name: 'Plugins', icon: 'play' }
// ];
interface Props {
onChange: any;
activeItem: string;
filters: any;
}
const allItem = { key: 'all', title: 'All', icon: 'play' };
const allItem = { key: 'all', title: 'All' };
function FilterButton(props: { activeItem: string, item: any, onClick: () => any }) {
return <div

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

@ -98,7 +98,7 @@ function Integrations(props: Props) {
const filters = integrations.map((cat: any) => ({
key: cat.key,
title: cat.title,
icon: cat.icon,
icon: cat.icon
}));
@ -107,7 +107,7 @@ function Integrations(props: Props) {
<div className='mb-4 p-5 bg-white rounded-lg border'>
{!hideHeader && <PageTitle title={<div>Integrations</div>} />}
<IntegrationFilters onChange={onChange} activeItem={activeFilter} filters={filters}/>
<IntegrationFilters onChange={onChange} activeItem={activeFilter} filters={filters} />
</div>
<div className='mb-4' />
@ -152,11 +152,11 @@ const integrations = [
key: 'issue-reporting',
description: 'Seamlessly report issues or share issues with your team right from OpenReplay.',
isProject: false,
icon: 'integrations/issue-reporting',
icon: 'exclamation-triangle',
integrations: [
{
title: 'Jira',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Jira with OpenReplay to enable the creation of a new ticket directly from a session.',
slug: 'jira',
category: 'Errors',
icon: 'integrations/jira',
@ -164,7 +164,7 @@ const integrations = [
},
{
title: 'Github',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate GitHub with OpenReplay to enable the direct creation of a new issue from a session.',
slug: 'github',
category: 'Errors',
icon: 'integrations/github',
@ -172,7 +172,7 @@ const integrations = [
},
{
title: 'Slack',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Slack to empower every user in your org with the ability to send sessions to any Slack channel.',
slug: 'slack',
category: 'Errors',
icon: 'integrations/slack',
@ -194,6 +194,7 @@ const integrations = [
title: 'Backend Logging',
key: 'backend-logging',
isProject: true,
icon: 'terminal',
description:
'Sync your backend errors with sessions replays and see what happened front-to-back.',
docs: () => (
@ -207,59 +208,65 @@ const integrations = [
</DocCard>
),
integrations: [
{ title: 'Sentry', slug: 'sentry', icon: 'integrations/sentry', component: <SentryForm /> },
{
title: 'Sentry',
subtitle: 'Integrate Sentry with session replays to seamlessly observe backend errors.',
slug: 'sentry',
icon: 'integrations/sentry',
component: <SentryForm />
},
{
title: 'Bugsnag',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Bugsnag to access the OpenReplay session linked to the JS exception within its interface.',
slug: 'bugsnag',
icon: 'integrations/bugsnag',
component: <BugsnagForm />
},
{
title: 'Rollbar',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Rollbar with session replays to seamlessly observe backend errors.',
slug: 'rollbar',
icon: 'integrations/rollbar',
component: <RollbarForm />
},
{
title: 'Elasticsearch',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Elasticsearch with session replays to seamlessly observe backend errors.',
slug: 'elasticsearch',
icon: 'integrations/elasticsearch',
component: <ElasticsearchForm />
},
{
title: 'Datadog',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Incorporate DataDog to visualize backend errors alongside session replay, for easy troubleshooting.',
slug: 'datadog',
icon: 'integrations/datadog',
component: <DatadogForm />
},
{
title: 'Sumo Logic',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Sumo Logic with session replays to seamlessly observe backend errors.',
slug: 'sumologic',
icon: 'integrations/sumologic',
component: <SumoLogicForm />
},
{
title: 'Stackdriver',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate Google Cloud to view backend logs and errors in conjunction with session replay',
slug: 'stackdriver',
icon: 'integrations/google-cloud',
component: <StackdriverForm />
},
{
title: 'CloudWatch',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate CloudWatch to see backend logs and errors alongside session replay.',
slug: 'cloudwatch',
icon: 'integrations/aws',
component: <CloudwatchForm />
},
{
title: 'Newrelic',
subtitle: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
subtitle: 'Integrate NewRelic with session replays to seamlessly observe backend errors.',
slug: 'newrelic',
icon: 'integrations/newrelic',
component: <NewrelicForm />
@ -270,6 +277,7 @@ const integrations = [
title: 'Collaboration',
key: 'collaboration',
isProject: false,
icon: 'file-code',
description: 'Share your sessions with your team and collaborate on issues.',
integrations: []
},
@ -277,6 +285,7 @@ const integrations = [
title: 'State Management',
key: 'state-management',
isProject: true,
icon: 'layers-half',
description: 'Sync your Redux or VueX store with sessions replays and see what happened front-to-back.',
integrations: []
},
@ -284,6 +293,7 @@ const integrations = [
title: 'Plugins',
key: 'plugins',
isProject: true,
icon: 'chat-left-text',
docs: () => (
<DocCard
title='What are plugins?'

6
frontend/app/components/ui/SVG.tsx
View file

File diff suppressed because one or more lines are too long

4
frontend/app/svg/icons/chat-left-text.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-chat-left-text" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 503 B

4
frontend/app/svg/icons/exclamation-triangle.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 641 B

3
frontend/app/svg/icons/layers-half.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-layers-half" viewBox="0 0 16 16">
<path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 335 B

4
frontend/app/svg/icons/terminal.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-terminal" viewBox="0 0 16 16">
<path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708l-2-2z"/>
<path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 422 B