openreplay/frontend/app/layout/data.ts
Delirium 2cd96b0df0
Highlight UI (#2951)
* ui: start highlight ui

* ui: tag items

* ui: connecting highlights to notes api...

* Highlight feature refinements (#2948)

* ui: move clips player to foss, connect notes api to hl

* ui: tune note/hl editing, prevent zoom slider body from jumping around

* ui: safe check for tag

* ui: fix thumbnail gen

* ui: fix thumbnail gen

* ui: make player modal wider, add shadow

* ui: custom warn barge for clips

* ui: swap icon for note event wrapper

* ui: rm other, fix cancel

* ui: moving around creation modal

* ui: bg tint

* ui: rm disabled for text btn

* ui: fix ownership sorting

* ui: close player on bg click

* ui: fix query, fix min distance for default range

* ui: move hl list header out of list comp

* ui: spot list header segmented size

* Various improvements in highlights (#2955)

* ui: update hl in hlPanel comp

* ui: rm debug

* ui: fix icons file

---------

Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
2025-01-24 09:59:54 +01:00

162 lines
4.5 KiB
TypeScript

import React from 'react';
export interface MenuItem {
label: React.ReactNode;
key: React.Key;
icon?: string;
children?: MenuItem[];
route?: string;
hidden?: boolean;
disabled?: boolean;
leading?: any;
isEnterprise?: boolean;
isAdmin?: boolean;
}
interface Category {
title: React.ReactNode;
key: React.Key;
items: MenuItem[];
hidden?: boolean;
}
export const enum PREFERENCES_MENU {
ACCOUNT = 'account',
SESSION_LISTING = 'session-listing',
INTEGRATIONS = 'integrations',
WEBHOOKS = 'webhooks',
MODULES = 'modules',
PROJECTS = 'projects',
ROLES_ACCESS = 'roles-access',
AUDIT = 'audit',
TEAM = 'team',
NOTIFICATIONS = 'notifications',
BILLING = 'billing',
}
export const enum MENU {
SESSIONS = 'sessions',
RECOMMENDATIONS = 'recommendations',
VAULT = 'vault',
BOOKMARKS = 'bookmarks',
NOTES = 'notes',
HIGHLIGHTS = 'highlights',
LIVE_SESSIONS = 'live-sessions',
DASHBOARDS = 'dashboards',
CARDS = 'cards',
FUNNELS = 'funnels',
ERROR_TRACKING = 'error-tracking',
ALERTS = 'alerts',
FEATURE_FLAGS = 'feature-flags',
USABILITY_TESTS = 'usability-tests',
PREFERENCES = 'preferences',
SUPPORT = 'support',
EXIT = 'exit',
SPOTS = 'spots',
}
export const categories: Category[] = [
{
title: 'Replays',
key: 'replays',
items: [
{ label: 'Sessions', key: MENU.SESSIONS, icon: 'collection-play' },
{ label: 'Recommendations', key: MENU.RECOMMENDATIONS, icon: 'magic', hidden: true },
{ label: 'Vault', key: MENU.VAULT, icon: 'safe', hidden: true },
{ label: 'Bookmarks', key: MENU.BOOKMARKS, icon: 'bookmark' },
//{ label: 'Notes', key: MENU.NOTES, icon: 'stickies' },
{ label: 'Highlights', key: MENU.HIGHLIGHTS, icon: 'chat-square-quote' }
]
},
{
title: '',
key: 'spot',
items: [
{ label: 'Spots', key: MENU.SPOTS, icon: 'orspotOutline' },
]
},
{
title: '',
key: 'assist',
items: [
{ label: 'Co-Browse', key: MENU.LIVE_SESSIONS, icon: 'broadcast' },
]
},
{
title: 'Analytics',
key: 'analytics',
items: [
{ label: 'Dashboards', key: MENU.DASHBOARDS, icon: 'columns-gap' },
{ label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line' },
// {
// label: 'Cards', key: MENU.CARDS, icon: 'bar-chart-line', children: [
// { label: 'All', key: MENU.CARDS },
// { label: 'Funnels', key: MENU.FUNNELS },
// { label: 'Error Tracking', key: MENU.ERROR_TRACKING },
// { label: 'Resource Monitoring', key: MENU.RESOURCE_MONITORING }
// ]
// },
{ label: 'Alerts', key: MENU.ALERTS, icon: 'bell' }
]
},
{
title: 'Product Optimization',
key: 'product-optimization',
items: [
{ label: 'Feature Flags', key: MENU.FEATURE_FLAGS, icon: 'toggles' },
{ label: 'Usability Tests', key: MENU.USABILITY_TESTS, icon: 'clipboard-check' },
]
},
{
title: '',
key: 'other',
items: [
{ label: 'Preferences', key: MENU.PREFERENCES, icon: 'sliders', leading: 'chevron-right' },
{ label: 'Support', key: MENU.SUPPORT, icon: 'question-circle' }
]
}
];
export const preferences: Category[] = [
{
title: '',
key: 'exit',
items: [
{ label: 'Exit', key: MENU.EXIT, icon: 'arrow-bar-left' }
]
},
{
title: 'Preferences',
key: 'preferences',
items: [
{ label: 'Account', key: PREFERENCES_MENU.ACCOUNT, icon: 'person' },
{ label: 'Sessions Listing', key: PREFERENCES_MENU.SESSION_LISTING, icon: 'card-list' },
{ label: 'Integrations', key: PREFERENCES_MENU.INTEGRATIONS, icon: 'plug' },
{ label: 'Webhooks', key: PREFERENCES_MENU.WEBHOOKS, icon: 'link-45deg' },
{ label: 'Modules', key: PREFERENCES_MENU.MODULES, icon: 'puzzle' },
{ label: 'Projects', key: PREFERENCES_MENU.PROJECTS, icon: 'folder2' },
{
label: 'Roles & Access',
key: PREFERENCES_MENU.ROLES_ACCESS,
icon: 'diagram-3',
isEnterprise: true,
isAdmin: true
},
{ label: 'Audit', key: PREFERENCES_MENU.AUDIT, icon: 'list-ul', isAdmin: true, isEnterprise: true },
{ label: 'Team', key: PREFERENCES_MENU.TEAM, icon: 'people', isAdmin: true },
{ label: 'Weekly Report', key: PREFERENCES_MENU.NOTIFICATIONS, icon: 'envelope-paper', hidden: false },
{ label: 'Billing', key: PREFERENCES_MENU.BILLING, icon: 'credit-card-2-back', hidden: true }
]
}
];
export const spotOnlyCats = [
'spot',
'other',
PREFERENCES_MENU.TEAM,
PREFERENCES_MENU.ACCOUNT,
MENU.EXIT,
MENU.PREFERENCES,
MENU.SUPPORT,
MENU.SPOTS,
]