From 595fcd41be78bb6d81f9fa41a080334ab7649c29 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Wed, 26 Jul 2023 16:04:15 +0200 Subject: [PATCH] change(ui): integrations card description --- .../Integrations/IntegrationFilters.tsx | 13 +----- .../Client/Integrations/Integrations.tsx | 40 ++++++++++++------- frontend/app/components/ui/SVG.tsx | 6 ++- frontend/app/svg/icons/chat-left-text.svg | 4 ++ .../app/svg/icons/exclamation-triangle.svg | 4 ++ frontend/app/svg/icons/layers-half.svg | 3 ++ frontend/app/svg/icons/terminal.svg | 4 ++ 7 files changed, 46 insertions(+), 28 deletions(-) create mode 100644 frontend/app/svg/icons/chat-left-text.svg create mode 100644 frontend/app/svg/icons/exclamation-triangle.svg create mode 100644 frontend/app/svg/icons/layers-half.svg create mode 100644 frontend/app/svg/icons/terminal.svg diff --git a/frontend/app/components/Client/Integrations/IntegrationFilters.tsx b/frontend/app/components/Client/Integrations/IntegrationFilters.tsx index 51edb90bf..5e8d8f7b3 100644 --- a/frontend/app/components/Client/Integrations/IntegrationFilters.tsx +++ b/frontend/app/components/Client/Integrations/IntegrationFilters.tsx @@ -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
({ key: cat.key, title: cat.title, - icon: cat.icon, + icon: cat.icon })); @@ -107,7 +107,7 @@ function Integrations(props: Props) {
{!hideHeader && Integrations
} />} - +
@@ -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 = [ ), integrations: [ - { title: 'Sentry', slug: 'sentry', icon: 'integrations/sentry', component: }, + { + title: 'Sentry', + subtitle: 'Integrate Sentry with session replays to seamlessly observe backend errors.', + slug: 'sentry', + icon: 'integrations/sentry', + component: + }, { 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: }, { 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: }, { 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: }, { 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: }, { 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: }, { 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: }, { 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: }, { 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: @@ -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: () => ( { case 'caret-right-fill': return ; case 'caret-up-fill': return ; case 'chat-dots': return ; + case 'chat-left-text': return ; case 'chat-right-text': return ; case 'chat-square-quote': return ; case 'check-circle-fill': return ; @@ -176,6 +177,7 @@ const SVG = (props: Props) => { case 'event/view': return ; case 'exclamation-circle-fill': return ; case 'exclamation-circle': return ; + case 'exclamation-triangle': return ; case 'expand-wide': return ; case 'explosion': return ; case 'external-link-alt': return ; @@ -321,6 +323,7 @@ const SVG = (props: Props) => { case 'journal-code': return ; case 'key': return ; case 'layer-group': return ; + case 'layers-half': return ; case 'lightbulb-on': return ; case 'lightbulb': return ; case 'link-45deg': return ; @@ -431,6 +434,7 @@ const SVG = (props: Props) => { case 'team-funnel': return ; case 'telephone-fill': return ; case 'telephone': return ; + case 'terminal': return ; case 'text-paragraph': return ; case 'toggles': return ; case 'tools': return ; diff --git a/frontend/app/svg/icons/chat-left-text.svg b/frontend/app/svg/icons/chat-left-text.svg new file mode 100644 index 000000000..fe60b0c68 --- /dev/null +++ b/frontend/app/svg/icons/chat-left-text.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/exclamation-triangle.svg b/frontend/app/svg/icons/exclamation-triangle.svg new file mode 100644 index 000000000..84b3ce962 --- /dev/null +++ b/frontend/app/svg/icons/exclamation-triangle.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/layers-half.svg b/frontend/app/svg/icons/layers-half.svg new file mode 100644 index 000000000..c7dc94531 --- /dev/null +++ b/frontend/app/svg/icons/layers-half.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/app/svg/icons/terminal.svg b/frontend/app/svg/icons/terminal.svg new file mode 100644 index 000000000..db057fd26 --- /dev/null +++ b/frontend/app/svg/icons/terminal.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file