64 |
30 |
31 |
36 |
37 | {
21 | return ipcRenderer.invoke(channel, ...args);
22 | },
23 | removeListener {confirmText || 'Are you sure?'} There has been an error, please try again. {name} {notification.text} You are all caught up! No new notifications at the moment.
45 | Authentication request for{' '}
46 | {authInfo?.host}
47 |
32 | HTTP request Accept-Language parameter (default: language from OS
33 | locale settings)
34 | ;
14 | removeListener
24 |
27 | );
28 | };
29 |
30 | const getView = (appView: AppView) => {
31 | switch (appView) {
32 | case APP_VIEWS.BROWSER:
33 | return
4 | {children}
5 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Accordion/AccordionItem.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | type AccordionItemProps = {
4 | title: string;
5 | children: JSX.Element;
6 | };
7 |
8 | export const AccordionItem = ({ title, children }: AccordionItemProps) => {
9 | const [isOpen, setIsOpen] = useState(true);
10 |
11 | const toggle = () => {
12 | setIsOpen(!isOpen);
13 | };
14 |
15 | return (
16 |
17 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Accordion/index.tsx:
--------------------------------------------------------------------------------
1 | export { Accordion } from './Accordion';
2 | export { AccordionItem } from './AccordionItem';
3 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Button/Button.test.tsx:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 | import { act, render, screen } from '@testing-library/react';
3 | import Button from './index';
4 |
5 | jest.mock('@iconify/react', () => ({
6 | Icon: () => ,
7 | }));
8 |
9 | describe('Button Component', () => {
10 | it('renders with default props', () => {
11 | render();
12 | const buttonElement = screen.getByRole('button', { name: /click me/i });
13 | expect(buttonElement).toBeInTheDocument();
14 | });
15 |
16 | it('applies custom class name', () => {
17 | render();
18 | const buttonElement = screen.getByRole('button', { name: /click me/i });
19 | expect(buttonElement).toHaveClass('custom-class');
20 | });
21 |
22 | it('renders loading icon when isLoading is true', () => {
23 | render();
24 | const loadingIcon = screen.getByTestId('icon');
25 | expect(loadingIcon).toBeInTheDocument();
26 | });
27 |
28 | it('renders confirmation icon when loading is done', () => {
29 | jest.useFakeTimers();
30 | const { rerender } = render();
31 |
32 | act(() => {
33 | rerender();
34 | jest.runAllTimers(); // Use act to advance timers
35 | });
36 |
37 | const confirmationIcon = screen.getByTestId('icon');
38 | expect(confirmationIcon).toBeInTheDocument();
39 | jest.useRealTimers();
40 | });
41 |
42 | it('applies primary button styles', () => {
43 | render();
44 | const buttonElement = screen.getByRole('button', { name: /click me/i });
45 | expect(buttonElement).toHaveClass('bg-emerald-500');
46 | expect(buttonElement).toHaveClass('text-white');
47 | });
48 |
49 | it('applies action button styles', () => {
50 | render();
51 | const buttonElement = screen.getByRole('button', { name: /click me/i });
52 | expect(buttonElement).toHaveClass('bg-slate-200');
53 | });
54 |
55 | it('applies subtle hover styles', () => {
56 | render();
57 | const buttonElement = screen.getByRole('button', { name: /click me/i });
58 | expect(buttonElement).toHaveClass('hover:bg-slate-200');
59 | });
60 |
61 | it('disables hover effects when disableHoverEffects is true', () => {
62 | render(
63 |
66 | );
67 | const buttonElement = screen.getByRole('button', { name: /click me/i });
68 | expect(buttonElement).not.toHaveClass('hover:bg-slate-200');
69 | });
70 |
71 | it('renders children correctly when not loading or loading done', () => {
72 | render();
73 | const buttonElement = screen.getByText('Click me');
74 | expect(buttonElement).toBeInTheDocument();
75 | });
76 |
77 | it('does not render children when loading or loading done', () => {
78 | const { rerender } = render();
79 | expect(screen.queryByText('Click me')).not.toBeInTheDocument();
80 |
81 | act(() => {
82 | rerender();
83 | });
84 |
85 | expect(screen.queryByText('Click me')).not.toBeInTheDocument();
86 | });
87 | });
88 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Button/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react';
2 | import cx from 'classnames';
3 | import { Icon } from '@iconify/react';
4 |
5 | interface CustomProps {
6 | className?: string;
7 | isActive?: boolean;
8 | isLoading?: boolean;
9 | isPrimary?: boolean;
10 | isTextButton?: boolean;
11 | disableHoverEffects?: boolean;
12 | isActionButton?: boolean;
13 | subtle?: boolean;
14 | }
15 |
16 | const Button = ({
17 | className = '',
18 | isActive = false,
19 | isLoading = false,
20 | isPrimary = false,
21 | isTextButton = false,
22 | isActionButton = false,
23 | subtle = false,
24 | disableHoverEffects = false,
25 | children,
26 | ...props
27 | }: CustomProps &
28 | React.DetailedHTMLProps<
29 | React.ButtonHTMLAttributes
18 |
42 |
43 |
48 |
52 |
49 | {children}
50 |
51 |
42 |
60 |
43 |
46 |
52 |
58 |
59 |
35 |
55 |
36 | setName(e.target.value)}
42 | />
43 |
44 |
45 |
54 |
46 |
49 |
52 |
53 |
10 | Add Suite
11 |
17 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/DeviceManager/PreviewSuites/ManageSuitesTool/ManageSuitesToolError.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen, fireEvent } from '@testing-library/react';
2 | import '@testing-library/jest-dom';
3 | import { ManageSuitesToolError } from './ManageSuitesToolError';
4 |
5 | describe('ManageSuitesToolError', () => {
6 | it('renders the error message and close button', () => {
7 | const onClose = jest.fn();
8 | render(
9 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/DeviceManager/PreviewSuites/ManageSuitesTool/helpers.ts:
--------------------------------------------------------------------------------
1 | import { defaultDevices, Device } from 'common/deviceList';
2 |
3 | export const downloadFile =
10 |
12 |
15 |
38 | {!isActive ? (
39 |
72 | );
73 | };
74 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/DeviceManager/PreviewSuites/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { useSelector } from 'react-redux';
3 | import Button from 'renderer/components/Button';
4 | import {
5 | selectActiveSuite,
6 | selectSuites,
7 | } from 'renderer/store/features/device-manager';
8 | import { useState } from 'react';
9 | import { FileUploader } from 'renderer/components/FileUploader';
10 | import Modal from 'renderer/components/Modal';
11 | import { Suite } from './Suite';
12 | import { CreateSuiteButton } from './CreateSuiteButton';
13 | import { ManageSuitesTool } from './ManageSuitesTool/ManageSuitesTool';
14 |
15 | export const PreviewSuites = () => {
16 | const suites = useSelector(selectSuites);
17 | const activeSuite = useSelector(selectActiveSuite);
18 |
19 | return (
20 |
40 |
46 |
47 | ) : null}
48 |
49 |
71 |
50 |
57 |
58 | {devices.map((deviceId) => (
59 |
70 |
21 |
34 | );
35 | };
36 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Divider/index.tsx:
--------------------------------------------------------------------------------
1 | export const Divider = () => (
2 |
3 | );
4 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/FileUploader/FileUploader.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, fireEvent } from '@testing-library/react';
2 | import '@testing-library/jest-dom';
3 | import { FileUploader, FileUploaderProps } from './FileUploader';
4 | import { useFileUpload } from './hooks';
5 |
6 | jest.mock('./hooks');
7 |
8 | const mockHandleFileUpload = jest.fn();
9 | const mockHandleUpload = jest.fn();
10 | const mockResetUploadedFile = jest.fn();
11 |
12 | describe('FileUploader', () => {
13 | beforeEach(() => {
14 | (useFileUpload as jest.Mock).mockReturnValue({
15 | uploadedFile: null,
16 | handleUpload: mockHandleUpload,
17 | resetUploadedFile: mockResetUploadedFile,
18 | });
19 | });
20 |
21 | const renderComponent = (props?: FileUploaderProps) =>
22 | render(
23 |
22 |
33 |
23 | {suites.map((suite) => (
24 |
31 |
30 |
39 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/FileUploader/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export { useFileUpload } from './useFileUpload';
2 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/FileUploader/hooks/useFileUpload.test.tsx:
--------------------------------------------------------------------------------
1 | import { act, renderHook } from '@testing-library/react';
2 | import { useFileUpload } from './useFileUpload';
3 |
4 | describe('useFileUpload', () => {
5 | it('should initialize with null uploadedFile', () => {
6 | const { result } = renderHook(() => useFileUpload());
7 |
8 | expect(result.current.uploadedFile).toBeNull();
9 | });
10 |
11 | it('should set uploadedFile when handleUpload is called with a file', () => {
12 | const { result } = renderHook(() => useFileUpload());
13 | const mockFile = new File(['dummy content'], 'example.png', {
14 | type: 'image/png',
15 | });
16 |
17 | act(() => {
18 | result.current.handleUpload({
19 | target: {
20 | files: [mockFile],
21 | },
22 | } as unknown as React.ChangeEvent
25 |
26 |
33 |
34 | );
35 | };
36 |
37 | export default Input;
38 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/KeyboardShortcutsManager/constants.ts:
--------------------------------------------------------------------------------
1 | export const SHORTCUT_CHANNEL = {
2 | BACK: 'BACK',
3 | BOOKMARK: 'BOOKMARK',
4 | DELETE_ALL: 'DELETE_ALL',
5 | DELETE_CACHE: 'DELETE_CACHE',
6 | DELETE_COOKIES: 'DELETE_COOKIES',
7 | DELETE_STORAGE: 'DELETE_STORAGE',
8 | EDIT_URL: 'EDIT_URL',
9 | FORWARD: 'FORWARD',
10 | INSPECT_ELEMENTS: 'INSPECT_ELEMENTS',
11 | PREVIEW_LAYOUT: 'PREVIEW_LAYOUT',
12 | RELOAD: 'RELOAD',
13 | ROTATE_ALL: 'ROTATE_ALL',
14 | SCREENSHOT_ALL: 'SCREENSHOT_ALL',
15 | THEME: 'THEME',
16 | TOGGLE_RULERS: 'TOGGLE_RULERS',
17 | ZOOM_IN: 'ZOOM_IN',
18 | ZOOM_OUT: 'ZOOM_OUT',
19 | } as const;
20 |
21 | export type ShortcutChannel =
22 | typeof SHORTCUT_CHANNEL[keyof typeof SHORTCUT_CHANNEL];
23 |
24 | export const SHORTCUT_KEYS: { [key in ShortcutChannel]: string[] } = {
25 | [SHORTCUT_CHANNEL.BACK]: ['alt+left'],
26 | [SHORTCUT_CHANNEL.BOOKMARK]: ['mod+d'],
27 | [SHORTCUT_CHANNEL.DELETE_ALL]: ['mod+alt+del', 'mod+alt+backspace'],
28 | [SHORTCUT_CHANNEL.DELETE_CACHE]: ['mod+alt+z'],
29 | [SHORTCUT_CHANNEL.DELETE_COOKIES]: ['mod+alt+a'],
30 | [SHORTCUT_CHANNEL.DELETE_STORAGE]: ['mod+alt+q'],
31 | [SHORTCUT_CHANNEL.EDIT_URL]: ['mod+l'],
32 | [SHORTCUT_CHANNEL.FORWARD]: ['alt+right'],
33 | [SHORTCUT_CHANNEL.INSPECT_ELEMENTS]: ['mod+i'],
34 | [SHORTCUT_CHANNEL.PREVIEW_LAYOUT]: ['mod+shift+l'],
35 | [SHORTCUT_CHANNEL.RELOAD]: ['mod+r'],
36 | [SHORTCUT_CHANNEL.ROTATE_ALL]: ['mod+alt+r'],
37 | [SHORTCUT_CHANNEL.SCREENSHOT_ALL]: ['mod+s'],
38 | [SHORTCUT_CHANNEL.THEME]: ['mod+t'],
39 | [SHORTCUT_CHANNEL.TOGGLE_RULERS]: ['alt+r'],
40 | [SHORTCUT_CHANNEL.ZOOM_IN]: ['mod+=', 'mod++', 'mod+shift+='],
41 | [SHORTCUT_CHANNEL.ZOOM_OUT]: ['mod+-'],
42 | };
43 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/KeyboardShortcutsManager/index.tsx:
--------------------------------------------------------------------------------
1 | import { SHORTCUT_KEYS, ShortcutChannel } from './constants';
2 | import useMousetrapEmitter from './useMousetrapEmitter';
3 |
4 | const KeyboardShortcutsManager = () => {
5 | // eslint-disable-next-line no-restricted-syntax
6 | for (const [channel, keys] of Object.entries(SHORTCUT_KEYS)) {
7 | // eslint-disable-next-line react-hooks/rules-of-hooks
8 | useMousetrapEmitter(keys, channel as ShortcutChannel);
9 | }
10 |
11 | return null;
12 | };
13 |
14 | export default KeyboardShortcutsManager;
15 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/KeyboardShortcutsManager/useKeyboardShortcut.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { ShortcutChannel } from './constants';
3 | import { keyboardShortcutsPubsub } from './useMousetrapEmitter';
4 |
5 | const useKeyboardShortcut = (
6 | eventChannel: ShortcutChannel,
7 | callback: () => void
8 | ) => {
9 | useEffect(() => {
10 | keyboardShortcutsPubsub.subscribe(eventChannel, callback);
11 | return () => {
12 | keyboardShortcutsPubsub.unsubscribe(eventChannel, callback);
13 | };
14 | }, [eventChannel, callback]);
15 | return null;
16 | };
17 |
18 | export default useKeyboardShortcut;
19 | export * from './constants';
20 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/KeyboardShortcutsManager/useMousetrapEmitter.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import Mousetrap from 'mousetrap';
3 | import PubSub from 'renderer/lib/pubsub';
4 | import { ShortcutChannel } from './constants';
5 |
6 | export const keyboardShortcutsPubsub = new PubSub();
7 |
8 | const useMousetrapEmitter = (
9 | accelerator: string | string[],
10 | eventChannel: ShortcutChannel,
11 | action?: string | undefined
12 | ) => {
13 | useEffect(() => {
14 | const callback = async (
15 | _e: Mousetrap.ExtendedKeyboardEvent,
16 | _combo: string
17 | ) => {
18 | try {
19 | await keyboardShortcutsPubsub.publish(eventChannel);
20 | } catch (err) {
21 | // eslint-disable-next-line no-console
22 | console.error('useMousetrapEmitter: callback: error: ', err);
23 | }
24 | };
25 | Mousetrap.bind(accelerator, callback, action);
26 |
27 | return () => {
28 | Mousetrap.unbind(accelerator, action);
29 | };
30 | }, [accelerator, eventChannel, action]);
31 |
32 | return null;
33 | };
34 |
35 | export default useMousetrapEmitter;
36 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Modal/index.tsx:
--------------------------------------------------------------------------------
1 | import { Dialog, Transition } from '@headlessui/react';
2 | import { Fragment } from 'react';
3 |
4 | interface Props {
5 | isOpen: boolean;
6 | onClose: () => void;
7 | title?: JSX.Element | string;
8 | description?: JSX.Element | string;
9 | children?: JSX.Element | string;
10 | }
11 |
12 | const Modal = ({ isOpen, onClose, title, description, children }: Props) => {
13 | return (
14 |
13 | Capturing screen...
14 |
15 |
16 |
30 | );
31 | };
32 |
33 | export default Notification;
34 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Notifications/NotificationEmptyStatus.tsx:
--------------------------------------------------------------------------------
1 | const NotificationEmptyStatus = () => {
2 | return (
3 |
4 |
6 | );
7 | };
8 |
9 | export default NotificationEmptyStatus;
10 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Notifications/Notifications.tsx:
--------------------------------------------------------------------------------
1 | import { useSelector } from 'react-redux';
2 | import { selectNotifications } from 'renderer/store/features/renderer';
3 | import { v4 as uuidv4 } from 'uuid';
4 | import { Notification as NotificationType } from 'common/constants';
5 | import Notification from './Notification';
6 | import NotificationEmptyStatus from './NotificationEmptyStatus';
7 |
8 | const Notifications = () => {
9 | const notificationsState = useSelector(selectNotifications);
10 |
11 | return (
12 |
13 | Notifications
14 |
26 | );
27 | };
28 |
29 | export default Notifications;
30 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Notifications/NotificationsBubble.tsx:
--------------------------------------------------------------------------------
1 | const NotificationsBubble = () => {
2 | return (
3 |
4 |
5 |
6 |
7 | );
8 | };
9 |
10 | export default NotificationsBubble;
11 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Previewer/Device/common.ts:
--------------------------------------------------------------------------------
1 | interface ContextMenuMetadata {
2 | id: string;
3 | label: string;
4 | }
5 |
6 | export const CONTEXT_MENUS: { [key: string]: ContextMenuMetadata } = {
7 | INSPECT_ELEMENT: { id: 'INSPECT_ELEMENT', label: 'Inspect Element' },
8 | OPEN_CONSOLE: { id: 'OPEN_CONSOLE', label: 'Open Console' },
9 | };
10 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Previewer/Device/utils.ts:
--------------------------------------------------------------------------------
1 | import { HistoryItem } from 'renderer/components/ToolBar/AddressBar/SuggestionList';
2 |
3 | // eslint-disable-next-line import/prefer-default-export
4 | export const appendHistory = (url: string, title: string) => {
5 | if (url === `${title}/`) {
6 | return;
7 | }
8 | const history: HistoryItem[] = window.electron.store.get('history');
9 | window.electron.store.set(
10 | 'history',
11 | [
12 | { url, title, lastVisited: new Date().getTime() },
13 | ...history.filter(({ url: _url }) => url !== _url),
14 | ].slice(0, 100)
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Previewer/Guides/guide.css:
--------------------------------------------------------------------------------
1 | .box {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 30px;
6 | height: 30px;
7 | box-sizing: border-box;
8 | background: transparent;
9 | z-index: 21;
10 | }
11 |
12 | .box:before,
13 | .box:after {
14 | position: absolute;
15 | content: '';
16 | /*background: rgb(55, 65, 81);*/
17 | }
18 |
19 | .box:before {
20 | width: 1px;
21 | height: 100%;
22 | left: 100%;
23 | }
24 |
25 | .box:after {
26 | height: 1px;
27 | width: 100%;
28 | top: 100%;
29 | }
30 |
31 | .scena-guides-horizontal .scena-guides-guide-pos {
32 | left: 48% !important;
33 | }
34 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Previewer/IndividualLayoutToolBar/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import { Tab, Tabs, TabList } from 'react-tabs';
4 | import { Icon } from '@iconify/react';
5 | import cx from 'classnames';
6 | import { setLayout } from 'renderer/store/features/renderer';
7 | import { PREVIEW_LAYOUTS } from 'common/constants';
8 | import { Device as IDevice } from 'common/deviceList';
9 | import './styles.css';
10 |
11 | interface Props {
12 | individualDevice: IDevice;
13 | setIndividualDevice: (device: IDevice) => void;
14 | devices: IDevice[];
15 | }
16 |
17 | const IndividualLayoutToolbar = ({
18 | individualDevice,
19 | setIndividualDevice,
20 | devices,
21 | }: Props) => {
22 | const dispatch = useDispatch();
23 | const [activeTab, setActiveTab] = useState(0);
24 |
25 | const onTabClick = (newTabIndex: number) => {
26 | setActiveTab(newTabIndex);
27 | setIndividualDevice(devices[newTabIndex]);
28 | };
29 |
30 | const isActive = (idx: number) => activeTab === idx;
31 | const handleCloseBtn = () => dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
32 |
33 | useEffect(() => {
34 | const activeTabIndex = devices.findIndex(
35 | (device) => device.id === individualDevice.id
36 | );
37 | setActiveTab(activeTabIndex);
38 | }, [individualDevice, devices]);
39 |
40 | return (
41 |
15 | {(!notificationsState ||
16 | (notificationsState && notificationsState?.length === 0)) && (
17 |
25 |
42 |
78 | );
79 | };
80 |
81 | export default IndividualLayoutToolbar;
82 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Previewer/IndividualLayoutToolBar/styles.css:
--------------------------------------------------------------------------------
1 | .custom-scrollbar::-webkit-scrollbar,
2 | .custom-scrollbar::-webkit-scrollbar:hover,
3 | .dark .custom-scrollbar::-webkit-scrollbar,
4 | .dark .custom-scrollbar::-webkit-scrollbar:hover {
5 | width: 0.25rem;
6 | height: 0.25rem;
7 | border-radius: 6px;
8 | }
9 |
10 | .custom-scrollbar::-webkit-scrollbar {
11 | background-color: rgba(255, 255, 255, 0.9);
12 | }
13 |
14 | .custom-scrollbar::-webkit-scrollbar-thumb,
15 | .custom-scrollbar::-webkit-scrollbar-thumb:hover {
16 | background-color: rgba(148, 163, 184, 0.7);
17 | }
18 |
19 | .dark .custom-scrollbar::-webkit-scrollbar {
20 | background-color: rgba(148, 163, 184, 0.6);
21 | }
22 |
23 | .dark .custom-scrollbar::-webkit-scrollbar-thumb,
24 | .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
25 | background-color: rgba(241, 245, 249, 0.8);
26 | }
27 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Select/index.tsx:
--------------------------------------------------------------------------------
1 | import { useId } from 'react';
2 |
3 | interface Props {
4 | label: string;
5 | }
6 |
7 | const Select = ({
8 | label,
9 | ...props
10 | }: Props &
11 | React.DetailedHTMLProps<
12 | React.SelectHTMLAttributes
70 |
77 |
18 |
19 |
27 |
28 | );
29 | };
30 |
31 | export default Select;
32 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/Spinner/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 |
3 | interface Props {
4 | spinnerHeight?: number;
5 | }
6 |
7 | const Spinner = ({ spinnerHeight = undefined }: Props) => {
8 | return (
9 |
10 |
44 |
71 |
49 | setUsername(e.target.value)}
53 | />
54 | setPassword(e.target.value)}
59 | />
60 |
61 |
62 |
63 |
66 |
69 |
70 |
60 |
83 | );
84 | };
85 |
86 | export default BookmarkButton;
87 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/AddressBar/SuggestionList.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useMemo, useState } from 'react';
2 | import cx from 'classnames';
3 |
4 | export interface HistoryItem {
5 | title: string;
6 | url: string;
7 | lastVisited: number;
8 | }
9 |
10 | interface Props {
11 | match: string;
12 | onEnter: (url?: string) => void;
13 | }
14 |
15 | const SuggestionList = ({ match, onEnter }: Props) => {
16 | const [activeIndex, setActiveIndex] = useState
61 |
72 |
73 |
74 |
75 | {openFlyout && (
76 |
82 |
66 | {suggestions.map(({ title, url }, idx) => (
67 |
95 | ))}
96 |
97 | );
98 | };
99 |
100 | export default SuggestionList;
101 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/ColorBlindnessControls/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { VisionSimulationDropDown } from 'renderer/components/VisionSimulationDropDown';
3 | import { webViewPubSub } from 'renderer/lib/pubsub';
4 |
5 | export const COLOR_BLINDNESS_CHANNEL = 'color-blindness';
6 |
7 | export const ColorBlindnessControls = () => {
8 | const [simulationName, setSimulationName] = useState
11 | Allow Insecure SSL
12 |
25 | );
26 | };
27 |
28 | export default AllowInSecureSSL;
29 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/BookmarkFlyout.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useDispatch } from 'react-redux';
3 | import Button from 'renderer/components/Button';
4 | import {
5 | IBookmarks,
6 | addBookmark,
7 | removeBookmark,
8 | } from 'renderer/store/features/bookmarks';
9 | import Input from 'renderer/components/Input';
10 |
11 | interface Props {
12 | bookmark: IBookmarks;
13 | setOpenFlyout: (bool: boolean) => void;
14 | }
15 |
16 | const BookmarkFlyout = ({ bookmark, setOpenFlyout }: Props) => {
17 | const [currentBookmark, setCurrentBookmark] = useState
13 |
24 |
48 |
57 |
66 |
80 |
81 | );
82 | };
83 |
84 | export default BookmarkFlyout;
85 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/BookmarkListButton.tsx:
--------------------------------------------------------------------------------
1 | import cx from 'classnames';
2 | import Button from 'renderer/components/Button';
3 | import { IBookmarks } from 'renderer/store/features/bookmarks';
4 | import { Icon } from '@iconify/react';
5 | import { useState } from 'react';
6 |
7 | export interface Props {
8 | bookmark: IBookmarks;
9 | handleBookmarkClick: (address: string) => void;
10 | setCurrentBookmark: (bookmark: IBookmarks) => void;
11 | setOpenFlyout: (bool: boolean) => void;
12 | }
13 |
14 | const BookmarkListButton = ({
15 | bookmark,
16 | handleBookmarkClick,
17 | setCurrentBookmark,
18 | setOpenFlyout,
19 | }: Props) => {
20 | const [isHovered, setIsHovered] = useState(false);
21 |
22 | return (
23 |
67 |
70 |
78 |
79 | setIsHovered(true)}
26 | onMouseLeave={() => setIsHovered(false)}
27 | key={bookmark.id}
28 | >
29 |
36 |
49 |
50 | );
51 | };
52 |
53 | export default BookmarkListButton;
54 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/index.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch } from 'react-redux';
2 | import Button from 'renderer/components/Button';
3 | import { IBookmarks } from 'renderer/store/features/bookmarks';
4 | import { setAddress } from 'renderer/store/features/renderer';
5 | import { useState } from 'react';
6 | import BookmarkListButton from './BookmarkListButton';
7 | import BookmarkFlyout from './BookmarkFlyout';
8 |
9 | export interface Props {
10 | bookmarks: IBookmarks[];
11 | handleBookmarkFlyout: () => void;
12 | }
13 |
14 | const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
15 | const [currentBookmark, setCurrentBookmark] = useState
32 |
60 | );
61 | };
62 |
63 | export default ViewAllBookmarks;
64 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { useEffect, useState } from 'react';
3 | import Button from 'renderer/components/Button';
4 | import { closeMenuFlyout, selectMenuFlyout } from 'renderer/store/features/ui';
5 | import { useDispatch, useSelector } from 'react-redux';
6 | import { selectBookmarks } from 'renderer/store/features/bookmarks';
7 | import ViewAllBookmarks from './ViewAllBookmarks';
8 |
9 | const Bookmark = () => {
10 | const [isOpen, setIsOpen] = useState
33 | {bookmarks.map((bookmark) => {
34 | return (
35 |
51 |
36 |
43 | );
44 | })}
45 | {!areBookmarksPresent && (
46 |
49 | )}
50 |
52 | {openFlyout && (
53 |
59 | setIsOpen(true)}
28 | onMouseLeave={() => setIsOpen(false)}
29 | >
30 |
52 | );
53 | };
54 |
55 | export default Bookmark;
56 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/ClearHistory/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import Button from 'renderer/components/Button';
3 |
4 | const ClearHistory = () => {
5 | return (
6 |
31 |
45 | {isOpen && (
46 |
32 |
43 |
44 |
7 | Clear History
8 |
19 | );
20 | };
21 |
22 | export default ClearHistory;
23 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Devtools/index.tsx:
--------------------------------------------------------------------------------
1 | import { DOCK_POSITION } from 'common/constants';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import {
4 | selectDockPosition,
5 | setDockPosition,
6 | } from 'renderer/store/features/devtools';
7 | import Toggle from 'renderer/components/Toggle';
8 |
9 | const Devtools = () => {
10 | const dockPosition = useSelector(selectDockPosition);
11 | const dispatch = useDispatch();
12 |
13 | return (
14 |
9 |
17 |
18 |
15 | Dock Devtools
16 |
29 | );
30 | };
31 |
32 | export default Devtools;
33 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { PREVIEW_LAYOUTS, PreviewLayout } from 'common/constants';
3 | import { useDispatch, useSelector } from 'react-redux';
4 | import { ButtonGroup } from 'renderer/components/ButtonGroup';
5 | import useKeyboardShortcut, {
6 | SHORTCUT_CHANNEL,
7 | } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
8 | import { selectLayout, setLayout } from 'renderer/store/features/renderer';
9 |
10 | const PreviewLayoutSelector = () => {
11 | const layout = useSelector(selectLayout);
12 | const dispatch = useDispatch();
13 |
14 | const handleLayout = (newLayout: PreviewLayout) => {
15 | dispatch(setLayout(newLayout));
16 | };
17 |
18 | const toggleNextLayout = () => {
19 | const layouts = Object.values(PREVIEW_LAYOUTS);
20 | const currentIndex = layouts.findIndex((l) => l === layout);
21 | const nextIndex = (currentIndex + 1) % layouts.length;
22 | dispatch(setLayout(layouts[nextIndex]));
23 | };
24 |
25 | useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, toggleNextLayout);
26 |
27 | return (
28 |
17 |
28 |
29 | Preview Layout
30 |
69 |
70 | );
71 | };
72 |
73 | export default PreviewLayoutSelector;
74 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/SettingsContent.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { render, fireEvent } from '@testing-library/react';
4 |
5 | import { SettingsContent } from './SettingsContent';
6 |
7 | const mockOnClose = jest.fn();
8 |
9 | describe('SettingsContentHeader', () => {
10 | const renderComponent = () =>
11 | render(
31 |
39 | ),
40 | srContent: 'Horizontal Layout',
41 | onClick: () => handleLayout(PREVIEW_LAYOUTS.COLUMN),
42 | isActive: layout === PREVIEW_LAYOUTS.COLUMN,
43 | },
44 | {
45 | content: (
46 |
47 | {' '}
48 |
50 | ),
51 | srContent: 'Flex Layout',
52 | onClick: () => handleLayout(PREVIEW_LAYOUTS.FLEX),
53 | isActive: layout === PREVIEW_LAYOUTS.FLEX,
54 | },
55 | {
56 | content: (
57 |
58 | {' '}
59 |
61 | ),
62 | srContent: 'Masonry Layout',
63 | onClick: () => handleLayout(PREVIEW_LAYOUTS.MASONRY),
64 | isActive: layout === PREVIEW_LAYOUTS.MASONRY,
65 | },
66 | ]}
67 | />
68 | Request Headers
17 |
18 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import Button from 'renderer/components/Button';
3 | import Modal from 'renderer/components/Modal';
4 | import { SettingsContent } from './SettingsContent';
5 |
6 | interface Props {
7 | closeFlyout: () => void;
8 | }
9 |
10 | export const Settings = ({ closeFlyout }: Props) => {
11 | const [isOpen, setIsOpen] = useState(false);
12 |
13 | const onClose = () => setIsOpen(false);
14 |
15 | return (
16 |
19 |
31 |
36 |
17 |
26 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/UITheme/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import Button from 'renderer/components/Button';
4 | import useKeyboardShortcut, {
5 | SHORTCUT_CHANNEL,
6 | } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
7 | import { selectDarkMode, setDarkMode } from 'renderer/store/features/ui';
8 |
9 | const UITheme = () => {
10 | const darkMode = useSelector(selectDarkMode);
11 | const dispatch = useDispatch();
12 |
13 | const handleTheme = () => dispatch(setDarkMode(!darkMode));
14 |
15 | useKeyboardShortcut(SHORTCUT_CHANNEL.THEME, handleTheme);
16 |
17 | return (
18 |
19 | UI Theme
20 |
26 | );
27 | };
28 |
29 | export default UITheme;
30 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Zoom.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import Button from 'renderer/components/Button';
4 | import useKeyboardShortcut, {
5 | SHORTCUT_CHANNEL,
6 | } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
7 | import {
8 | selectZoomFactor,
9 | zoomIn,
10 | zoomOut,
11 | } from 'renderer/store/features/renderer';
12 |
13 | interface ZoomButtonProps {
14 | children: React.ReactNode;
15 | onClick: () => void;
16 | }
17 |
18 | const ZoomButton = ({ children, onClick }: ZoomButtonProps) => {
19 | return (
20 |
23 | );
24 | };
25 |
26 | const Zoom = () => {
27 | const zoomfactor = useSelector(selectZoomFactor);
28 | const dispatch = useDispatch();
29 |
30 | const onZoomIn = useCallback(() => {
31 | dispatch(zoomIn());
32 | }, [dispatch]);
33 |
34 | const onZoomOut = useCallback(() => {
35 | dispatch(zoomOut());
36 | }, [dispatch]);
37 |
38 | useKeyboardShortcut(SHORTCUT_CHANNEL.ZOOM_IN, onZoomIn);
39 | useKeyboardShortcut(SHORTCUT_CHANNEL.ZOOM_OUT, onZoomOut);
40 |
41 | return (
42 |
21 |
24 |
25 |
43 | Zoom
44 |
50 | );
51 | };
52 |
53 | export default Zoom;
54 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx:
--------------------------------------------------------------------------------
1 | import Notifications from 'renderer/components/Notifications/Notifications';
2 | import { Divider } from 'renderer/components/Divider';
3 | import Devtools from './Devtools';
4 | import UITheme from './UITheme';
5 | import Zoom from './Zoom';
6 | import AllowInSecureSSL from './AllowInSecureSSL';
7 | import ClearHistory from './ClearHistory';
8 | import PreviewLayout from './PreviewLayout';
9 | import Bookmark from './Bookmark';
10 | import { Settings } from './Settings';
11 |
12 | interface Props {
13 | closeFlyout: () => void;
14 | }
15 |
16 | const MenuFlyout = ({ closeFlyout }: Props) => {
17 | return (
18 |
45 |
49 |
19 |
37 | );
38 | };
39 |
40 | export default MenuFlyout;
41 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { useDetectClickOutside } from 'react-detect-click-outside';
3 | import Button from 'renderer/components/Button';
4 | import { useDispatch, useSelector } from 'react-redux';
5 | import { closeMenuFlyout, selectMenuFlyout } from 'renderer/store/features/ui';
6 | import { selectNotifications } from 'renderer/store/features/renderer';
7 | import useLocalStorage from 'renderer/components/useLocalStorage/useLocalStorage';
8 | import NotificationsBubble from 'renderer/components/Notifications/NotificationsBubble';
9 | import MenuFlyout from './Flyout';
10 |
11 | const Menu = () => {
12 | const dispatch = useDispatch();
13 | const isMenuFlyoutOpen = useSelector(selectMenuFlyout);
14 | const notifications = useSelector(selectNotifications);
15 |
16 | const [hasNewNotifications, setHasNewNotifications] = useLocalStorage(
17 | 'hasNewNotifications',
18 | true
19 | );
20 |
21 | const ref = useDetectClickOutside({
22 | onTriggered: () => {
23 | if (!isMenuFlyoutOpen) {
24 | return;
25 | }
26 | dispatch(closeMenuFlyout(false));
27 | },
28 | });
29 |
30 | const handleFlyout = () => {
31 | dispatch(closeMenuFlyout(!isMenuFlyoutOpen));
32 | setHasNewNotifications(false);
33 | };
34 |
35 | const onClose = () => {
36 | dispatch(closeMenuFlyout(false));
37 | };
38 |
39 | return (
40 |
31 |
34 |
41 |
47 |
51 | );
52 | };
53 |
54 | export default Menu;
55 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/NavigationControls.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { webViewPubSub } from 'renderer/lib/pubsub';
3 | import Button from '../Button';
4 | import useKeyboardShortcut, {
5 | SHORTCUT_CHANNEL,
6 | ShortcutChannel,
7 | } from '../KeyboardShortcutsManager/useKeyboardShortcut';
8 |
9 | export const NAVIGATION_EVENTS = {
10 | BACK: 'back',
11 | FORWARD: 'forward',
12 | RELOAD: 'reload',
13 | };
14 |
15 | interface NavigationItemProps {
16 | label: string;
17 | icon: string;
18 | action: () => void;
19 | }
20 |
21 | const NavigationButton = ({ label, icon, action }: NavigationItemProps) => {
22 | const shortcutName: ShortcutChannel = label.toUpperCase() as ShortcutChannel;
23 | useKeyboardShortcut(SHORTCUT_CHANNEL[shortcutName], action);
24 | return (
25 |
28 | );
29 | };
30 |
31 | const ITEMS: NavigationItemProps[] = [
32 | {
33 | label: 'Back',
34 | icon: 'ic:round-arrow-back',
35 | action: () => {
36 | webViewPubSub.publish(NAVIGATION_EVENTS.BACK);
37 | },
38 | },
39 | {
40 | label: 'Forward',
41 | icon: 'ic:round-arrow-forward',
42 | action: () => {
43 | webViewPubSub.publish(NAVIGATION_EVENTS.FORWARD);
44 | },
45 | },
46 | {
47 | label: 'Refresh',
48 | icon: 'ic:round-refresh',
49 | action: () => {
50 | webViewPubSub.publish(NAVIGATION_EVENTS.RELOAD);
51 | },
52 | },
53 | ];
54 |
55 | const NavigationControls = () => {
56 | return (
57 |
48 |
50 |
58 | {ITEMS.map((item) => (
59 | // eslint-disable-next-line react/jsx-props-no-spreading
60 |
63 | );
64 | };
65 |
66 | export default NavigationControls;
67 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/PreviewSuiteSelector/index.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from '@iconify/react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { DropDown } from 'renderer/components/DropDown';
4 | import {
5 | selectActiveSuite,
6 | selectSuites,
7 | setActiveSuite,
8 | } from 'renderer/store/features/device-manager';
9 | import { APP_VIEWS, setAppView } from 'renderer/store/features/ui';
10 |
11 | export const PreviewSuiteSelector = () => {
12 | const dispatch = useDispatch();
13 | const suites = useSelector(selectSuites);
14 | const activeSuite = useSelector(selectActiveSuite);
15 | return (
16 |
22 | {suite.name}
23 | {suite.id === activeSuite.id ?
25 | ),
26 | onClick: () => dispatch(setActiveSuite(suite.id)),
27 | })),
28 | {
29 | type: 'separator',
30 | },
31 | {
32 | label: (
33 |
34 | Manage Suites
35 |
36 | ),
37 | onClick: () => {
38 | dispatch(setAppView(APP_VIEWS.DEVICE_MANAGER));
39 | },
40 | },
41 | ]}
42 | />
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Shortcuts/ShortcutsModal/ShortcutButton.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | text: string[];
3 | }
4 |
5 | const ShortcutButton = ({ text }: Props) => {
6 | const btnText = text[0].split('+');
7 | const btnTextLength = btnText.length - 1;
8 |
9 | const formatText = (value: string) => {
10 | if (value === 'mod') {
11 | if (navigator?.userAgent?.includes('Windows')) {
12 | return `Ctrl`;
13 | }
14 | return `⌘`;
15 | }
16 |
17 | if (value.length === 1) return value.toUpperCase();
18 | return value;
19 | };
20 | return (
21 |
22 | {btnText.map((value, i) => (
23 |
24 |
25 | {formatText(value)}
26 |
27 | {i < btnTextLength && +}
28 |
29 | ))}
30 |
31 | );
32 | };
33 |
34 | export default ShortcutButton;
35 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Shortcuts/ShortcutsModal/ShortcutName.tsx:
--------------------------------------------------------------------------------
1 | interface Props {
2 | text: string;
3 | }
4 |
5 | const ShortcutName = ({ text }: Props) => {
6 | const formattedText = text.replace('_', ' ').toLowerCase();
7 | return {formattedText};
8 | };
9 |
10 | export default ShortcutName;
11 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/components/ToolBar/Shortcuts/ShortcutsModal/index.tsx:
--------------------------------------------------------------------------------
1 | import { SHORTCUT_KEYS } from 'renderer/components/KeyboardShortcutsManager/constants';
2 | import Modal from 'renderer/components/Modal';
3 | import Button from 'renderer/components/Button';
4 | import ShortcutName from './ShortcutName';
5 | import ShortcutButton from './ShortcutButton';
6 |
7 | interface Props {
8 | isOpen: boolean;
9 | onClose: () => void;
10 | }
11 |
12 | export const shortcutsList = [
13 | {
14 | id: 0,
15 | name: 'General Shortcuts',
16 | shortcuts: Object.entries(SHORTCUT_KEYS).splice(0, 7),
17 | },
18 | {
19 | id: 1,
20 | name: 'Previewer Shorcuts',
21 | shortcuts: Object.entries(SHORTCUT_KEYS).splice(7),
22 | },
23 | ];
24 |
25 | const ShortcutsModal = ({ isOpen, onClose }: Props) => {
26 | return (
27 | <>
28 |
30 | {Object.values(shortcutsList).map((category) => (
31 |
49 |
32 |
42 | ))}
43 |
33 | {category.name}
34 |
35 | {category.shortcuts.map((value) => (
36 |
37 |
40 | ))}
41 |
44 |
47 |
48 | {children};
23 | };
24 |
25 | export default ThemeProvider;
26 |
--------------------------------------------------------------------------------
/desktop-app/src/renderer/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |