= ({ badgeVisible, ...props }) => (
22 |
23 | }
40 | {...props}
41 | />
42 | {badgeVisible && }
43 |
44 | );
45 |
--------------------------------------------------------------------------------
/src/app/storage/settings.storage.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 |
3 | import { produce } from 'immer';
4 | import create from 'zustand';
5 | import { persist } from 'zustand/middleware';
6 |
7 | import { Alignment, Language, SettingsStorage, ThemeType } from './interfaces';
8 |
9 | export const useSettingsStore = create(
10 | persist(
11 | (set) => ({
12 | theme: ThemeType.DARK,
13 | language: Language.EN,
14 | alignment: Alignment.VERTICAL,
15 | isMenuCollapsed: true,
16 |
17 | updateTheme: (theme) =>
18 | set(
19 | produce((state) => {
20 | state.theme = theme;
21 | })
22 | ),
23 |
24 | updateAlignment: (alignment) =>
25 | set(
26 | produce((state) => {
27 | state.alignment = alignment;
28 | })
29 | ),
30 |
31 | setIsMenuCollapsed: (isCollapsed) =>
32 | set(
33 | produce((state) => {
34 | state.isMenuCollapsed = isCollapsed;
35 | })
36 | ),
37 | }),
38 | {
39 | name: 'settings',
40 | getStorage: () => window.electronStore,
41 | }
42 | )
43 | );
44 |
--------------------------------------------------------------------------------
/src/app/hooks/collections/use-update-collection.ts:
--------------------------------------------------------------------------------
1 | import { notification } from '@components';
2 | import { Collection, CollectionType, useCollectionsStore } from '@storage';
3 |
4 | export interface UpdateCollectionOptions {
5 | hideSuccessNotification: boolean;
6 | }
7 |
8 | export function useUpdateCollection() {
9 | const updateCollection = useCollectionsStore((store) => store.updateCollection);
10 |
11 | const update = async (
12 | id: string,
13 | collection: Collection,
14 | options?: UpdateCollectionOptions
15 | ) => {
16 | try {
17 | await updateCollection(id, collection);
18 |
19 | if (!options?.hideSuccessNotification) {
20 | notification(
21 | {
22 | title: `${collection.name}`,
23 | description: 'Collection successfully updated',
24 | },
25 | { type: 'success', position: 'top-right' }
26 | );
27 | }
28 | } catch (error: any) {
29 | notification(
30 | {
31 | title: `${collection.name} sync error`,
32 | description: error?.message,
33 | },
34 | { type: 'error', position: 'top-right' }
35 | );
36 | }
37 | };
38 |
39 | return { update };
40 | }
41 |
--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import { NextUIProvider } from '@nextui-org/react';
2 |
3 | import { DarkTheme, LightTheme } from '../src/app/themes';
4 |
5 | export const parameters = {
6 | actions: { argTypesRegex: "^on[A-Z].*" },
7 | controls: {
8 | matchers: {
9 | color: /(background|color)$/i,
10 | date: /Date$/,
11 | },
12 | },
13 | }
14 |
15 | export const globalTypes = {
16 | theme: {
17 | name: 'Theme',
18 | description: 'Global theme for components',
19 | defaultValue: 'Dark',
20 | toolbar: {
21 | icon: 'paintbrush',
22 | items: [
23 | 'Light',
24 | 'Dark',
25 | ],
26 | },
27 | },
28 | };
29 |
30 | const THEMES = {
31 | 'Dark': DarkTheme,
32 | 'Light': LightTheme,
33 | };
34 |
35 | function getTheme(theme) {
36 | if (!THEMES[theme]) {
37 | throw new Error(`No theme ${theme}`);
38 | }
39 |
40 | return THEMES[theme];
41 | }
42 |
43 |
44 | const withThemeProvider = (Story, context) => {
45 | const theme = getTheme(context.globals.theme);
46 |
47 | return (
48 | <>
49 |
52 |
53 |
54 |
55 | );
56 | };
57 |
58 | export const decorators = [withThemeProvider];
59 |
--------------------------------------------------------------------------------
/src/app/pages/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useEffectOnce } from 'react-use';
3 |
4 | import { useAppContextProvider } from '@context';
5 | import { useUpdateCollection } from '@hooks';
6 | import { DefaultLayout } from '@layouts';
7 | import { useCollectionsStore } from '@storage';
8 |
9 | import { Shortcuts } from './shortcuts';
10 | import { SideBar } from './side-bar';
11 | import { StatusBar } from './status-bar';
12 | import { TabsContainer } from './tabs-container';
13 |
14 | export const Main = (): JSX.Element => {
15 | const { collections } = useCollectionsStore((store) => store);
16 | const { appContext, AppProvider } = useAppContextProvider();
17 | const { update: updateCollection } = useUpdateCollection();
18 |
19 | useEffectOnce(() => {
20 | // Hack for loading toast styles first
21 | setTimeout(() => {
22 | collections.forEach((collection) => {
23 | updateCollection(collection.id, collection, { hideSuccessNotification: true });
24 | });
25 | }, 0);
26 | });
27 |
28 | return (
29 |
30 |
31 | } bottom={}>
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/welcome/welcome-container.tsx:
--------------------------------------------------------------------------------
1 | import { Col, Container, Row, Spacer, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Kbd } from '@components';
5 | import { ShortcutsGroup, useShortcuts } from '@hooks';
6 |
7 | export const WelcomeContainer: React.FC = () => {
8 | const { getShortcuts } = useShortcuts();
9 |
10 | const shortcuts = getShortcuts(ShortcutsGroup.WELCOME);
11 |
12 | return (
13 |
21 |
22 | {shortcuts.map((shortcut) => (
23 |
24 |
25 |
26 | {shortcut.description}
27 |
28 |
29 |
30 |
31 | {shortcut.key}
32 |
33 |
34 |
35 |
36 | ))}
37 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/src/app/components/select/colored/colored-select.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { SelectFactory, SelectProps } from '../select';
5 | import { StyledSelect } from '../select.styled';
6 | import { ColoredOption } from './colored-option';
7 | import { ColoredSingleValue } from './colored-single-value';
8 | import { ColoredSelectOption } from './interfaces';
9 |
10 | export type ColoredSelectProps = SelectProps & {
11 | onRemove?: (item: ColoredSelectOption) => void;
12 | };
13 |
14 | const TypedColoredSelect = SelectFactory();
15 | const StyledColoredSelect = styled(TypedColoredSelect, StyledSelect);
16 |
17 | export const ColoredSelect: React.FC = ({
18 | bordered = false,
19 | separator = false,
20 | size = 'md',
21 | css,
22 | ...props
23 | }) => (
24 | option.id}
33 | components={{
34 | SingleValue: ColoredSingleValue,
35 | // @ts-ignore
36 | Option: ColoredOption,
37 | }}
38 | {...props}
39 | />
40 | );
41 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.unary-call.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Loading, Spacer } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { GrpcMethodType } from '@core/types';
5 | import { useGrpcTabContextStore, useUnaryCall } from '@hooks';
6 |
7 | import { SendHeader, SendHeaderProps } from './send-header.basic';
8 |
9 | export const UnaryCallSendHeader: React.FC> = ({ tab }) => {
10 | const { invoke } = useUnaryCall();
11 | const { getContext } = useGrpcTabContextStore();
12 |
13 | const context = getContext(tab.id);
14 |
15 | const handleInvokeButtonClick = () => invoke(tab);
16 |
17 | return (
18 |
19 |
20 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/app/storage/interfaces/collections.interface.ts:
--------------------------------------------------------------------------------
1 | import { GrpcMethodInfo, GrpcOptions, GrpcServiceInfo } from '@core/types';
2 |
3 | export enum CollectionType {
4 | GRPC = 'grpc',
5 | }
6 |
7 | export interface GrpcMethod extends GrpcMethodInfo {
8 | id: string;
9 | }
10 | export interface GrpcService extends GrpcServiceInfo {
11 | id: string;
12 | methods?: GrpcMethod[];
13 | }
14 |
15 | export type CollectionChildren = T extends CollectionType.GRPC
16 | ? GrpcService[]
17 | : never;
18 |
19 | export type CollectionOptions = T extends CollectionType.GRPC
20 | ? GrpcOptions
21 | : never;
22 |
23 | export interface Collection {
24 | id: string;
25 | name: string;
26 | type: T;
27 | children?: CollectionChildren;
28 | options: CollectionOptions;
29 | }
30 |
31 | export interface CollectionsStorage {
32 | collections: Collection[];
33 |
34 | createCollection: (collection: Omit, 'id'>) => Promise;
35 | updateCollection: (
36 | id: string,
37 | collection: Omit, 'id'>,
38 | showSuccessNotification?: boolean
39 | ) => Promise;
40 | removeCollection: (id: string) => void;
41 | filterCollections: (search: string) => Collection[];
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/components/icons/horizontal-layout.icon.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | export const HorizontalLayoutIcon: React.FC> = ({ onClick }) => {
5 | const { theme } = useTheme();
6 |
7 | const [isHovered, setIsHovered] = React.useState(false);
8 |
9 | return (
10 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/app/pages/side-bar/nodes/service.node.tsx:
--------------------------------------------------------------------------------
1 | import { Spacer, Text, Tooltip } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Tree, TreeNode, TreeNodeRendererProps } from '@components';
5 | import { GrpcMethod, GrpcService } from '@storage';
6 |
7 | import { ServiceBadge } from '../../collections/badge-types';
8 | import { GrpcMethodNode } from './method.node';
9 | import { StyledNodeWrapper } from './node.styled';
10 |
11 | export const GrpcServiceNode: React.FC> = ({
12 | data,
13 | isOpen,
14 | onCollapseToggle,
15 | }) => {
16 | const content = (
17 |
18 |
19 |
20 |
21 | {data.name}
22 |
23 |
24 | );
25 |
26 | return (
27 |
35 | data={data.methods}>
36 | {data.methods?.map((method) => (
37 |
38 | ))}
39 |
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/app/components/color-picker/color-picker.input.tsx:
--------------------------------------------------------------------------------
1 | import { faFill } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Button, Spacer, styled } from '@nextui-org/react';
4 | import React from 'react';
5 |
6 | import { ColorCircle } from '../color-circle';
7 | import { ColorPicker } from './color-picker';
8 |
9 | const StyledWrapper = styled('div', {
10 | display: 'flex',
11 | flexWrap: 'nowrap',
12 | alignItems: 'center',
13 | });
14 |
15 | export interface ColorPickerInputProps {
16 | value: string;
17 |
18 | onChange: (color: string) => void;
19 | }
20 |
21 | export const ColorPickerInput: React.FC = ({ value, onChange }) => {
22 | const [colorPickerVisible, setColorPickerVisible] = React.useState(false);
23 |
24 | return (
25 |
26 |
27 |
28 | } css={{ minWidth: 10 }} />
31 | }
32 | isOpen={colorPickerVisible}
33 | onOpenChange={(isVisible) => setColorPickerVisible(isVisible)}
34 | color={value}
35 | onColorChange={(newColor) => onChange(newColor.hex)}
36 | />
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/app/components/color-circle/color-circle.tsx:
--------------------------------------------------------------------------------
1 | import { styled, VariantProps } from '@nextui-org/react';
2 | import chroma from 'chroma-js';
3 | import React from 'react';
4 |
5 | const StyledCircle = styled('div', {
6 | minHeight: 'calc($$circleHeightRatio * $3)',
7 | minWidth: 'calc($$circleWidthRatio * $3)',
8 | borderRadius: '50%',
9 |
10 | variants: {
11 | size: {
12 | xs: {
13 | $$circleHeightRatio: '1.2',
14 | $$circleWidthRatio: '1.2',
15 | },
16 | sm: {
17 | $$circleHeightRatio: '1.6',
18 | $$circleWidthRatio: '1.6',
19 | },
20 | md: {
21 | $$circleHeightRatio: '2',
22 | $$circleWidthRatio: '2',
23 | },
24 | lg: {
25 | $$circleHeightRatio: '2.2',
26 | $$circleWidthRatio: '2.2',
27 | },
28 | xl: {
29 | $$circleHeightRatio: '2.6',
30 | $$circleWidthRatio: '2.6',
31 | },
32 | },
33 | },
34 | });
35 |
36 | export type CircleProps = {
37 | color: string;
38 | shadow?: boolean;
39 | } & VariantProps;
40 |
41 | export const ColorCircle: React.FC = ({ color, size = 'sm', shadow = false }) => (
42 |
49 | );
50 |
--------------------------------------------------------------------------------
/src/app/components/tabs/tabs.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@nextui-org/react';
2 | import React, { PropsWithChildren } from 'react';
3 |
4 | import { TabProps } from './tab';
5 | import { TabBar, TabBarProps } from './tab-bar';
6 | import { TabContent } from './tab-content';
7 |
8 | const StyledTabs = styled('div', {
9 | display: 'flex',
10 | flexDirection: 'column',
11 | flex: 1,
12 |
13 | overflow: 'hidden',
14 | });
15 |
16 | export type TabsProps = PropsWithChildren;
17 |
18 | export const Tabs: React.FC = ({
19 | children,
20 | activeBar,
21 | activeKey,
22 | draggable,
23 | rightNode,
24 | onTabActivate,
25 | onTabClose,
26 | onTabDragEnd,
27 | }) => {
28 | const tabs = React.Children.toArray(children) as React.ReactElement[];
29 |
30 | const tabsContents = tabs.map((tab) => (
31 |
32 | {tab}
33 |
34 | ));
35 |
36 | return (
37 |
38 |
47 | {children}
48 |
49 | {tabsContents}
50 |
51 | );
52 | };
53 |
--------------------------------------------------------------------------------
/src/app/components/code-editor/code-editor.styled.ts:
--------------------------------------------------------------------------------
1 | import { styled } from '@nextui-org/react';
2 | import CodeMirror from '@uiw/react-codemirror';
3 |
4 | export const StyledCodeMirror = styled(CodeMirror, {
5 | '&': {
6 | color: '$text',
7 | backgroundColor: '$background',
8 | width: '100%',
9 | },
10 |
11 | '.cm-content': {
12 | padding: 0,
13 | fontFamily: '$mono',
14 | fontSize: '$fontSizes$xs',
15 | },
16 |
17 | '.cm-editor.cm-focused': {
18 | outline: 'none',
19 | },
20 |
21 | '.cm-cursor, .cm-dropCursor': {
22 | borderLeftColor: '$text',
23 | },
24 |
25 | '.cm-focused .cm-selectionBackground, .cm-selectionBackground': {
26 | backgroundColor: '$selection',
27 | },
28 |
29 | '.cm-activeLine': {
30 | backgroundColor: '$activeLine',
31 | },
32 |
33 | '.cm-selectionMatch': {
34 | backgroundColor: '$green200',
35 | },
36 |
37 | '.cm-line': {
38 | padding: '0 0 0 4px',
39 | },
40 |
41 | '.cm-gutters': {
42 | backgroundColor: '$background',
43 | color: '$accents8',
44 | border: 'none',
45 | userSelect: 'none',
46 | fontFamily: '$mono',
47 | fontSize: '$fontSizes$sm',
48 | },
49 |
50 | '.cm-activeLineGutter': {
51 | backgroundColor: '$accents1',
52 | },
53 |
54 | '.cm-foldPlaceholder': {
55 | backgroundColor: 'transparent',
56 | border: 'none',
57 | color: '$yellow500',
58 | },
59 | });
60 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/response/streams/client-streaming.response.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Tab, Tabs, Tree } from '@components';
4 | import { GrpcMethodType } from '@core/types';
5 | import { GrpcStreamMessage, GrpcTab } from '@storage';
6 |
7 | import { EmptyResponseView } from '../empty-response-view';
8 | import { ReponseNode } from './response.node';
9 | import { ListWrapper, StyledContainer } from './response.styled';
10 |
11 | export interface ClientStreamingResponseProps {
12 | tab: GrpcTab;
13 | }
14 |
15 | export const ClientStreamingResponse: React.FC = ({ tab }) => (
16 |
17 |
18 |
19 | {tab.data.response.messages ? (
20 |
21 | data={tab.data.response.messages} defaultIsOpen={false}>
22 | {tab.data.response.messages?.map((message) => (
23 |
24 | ))}
25 |
26 |
27 | ) : (
28 |
29 | )}
30 |
31 |
32 |
33 | );
34 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/response/streams/server-streaming.response.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Tab, Tabs, Tree } from '@components';
4 | import { GrpcMethodType } from '@core/types';
5 | import { GrpcStreamMessage, GrpcTab } from '@storage';
6 |
7 | import { EmptyResponseView } from '../empty-response-view';
8 | import { ReponseNode } from './response.node';
9 | import { ListWrapper, StyledContainer } from './response.styled';
10 |
11 | export interface ServerStreamingResponseProps {
12 | tab: GrpcTab;
13 | }
14 |
15 | export const ServerStreamingResponse: React.FC = ({ tab }) => (
16 |
17 |
18 |
19 | {tab.data.response.messages ? (
20 |
21 | data={tab.data.response.messages} defaultIsOpen={false}>
22 | {tab.data.response.messages?.map((message) => (
23 |
24 | ))}
25 |
26 |
27 | ) : (
28 |
29 | )}
30 |
31 |
32 |
33 | );
34 |
--------------------------------------------------------------------------------
/src/main/clients/grpc-client/subscribers/index.ts:
--------------------------------------------------------------------------------
1 | import { BrowserWindow, ipcMain } from 'electron';
2 |
3 | import { GrpcClientBidirectionalSubscriber } from './bidirectional-streaming.subscriber';
4 | import { GrpcClientClientStreamingSubscriber } from './client-streaming.subscriber';
5 | import { GrpcClientServerStreamingSubscriber } from './server-streaming.subscriber';
6 | import { GrpcClientUnarySubscriber } from './unary.subscriber';
7 |
8 | export const registerGrpcClientSubscribers = (mainWindow: BrowserWindow) => {
9 | const bidirectional = new GrpcClientBidirectionalSubscriber(mainWindow, ipcMain);
10 | const client = new GrpcClientClientStreamingSubscriber(mainWindow, ipcMain);
11 | const server = new GrpcClientServerStreamingSubscriber(mainWindow, ipcMain);
12 | const unary = new GrpcClientUnarySubscriber(mainWindow, ipcMain);
13 |
14 | bidirectional.registerBidirectionalStreamingHandlers();
15 | client.registerClientStreamingHandlers();
16 | server.registerServerStreamingHandlers();
17 | unary.registerUnaryCallHandlers();
18 | };
19 |
20 | export const unregisterGrpcClientSubscribers = () => {
21 | GrpcClientBidirectionalSubscriber.unregisterBidirectionalStreamingHandlers(ipcMain);
22 | GrpcClientClientStreamingSubscriber.unregisterClientStreamingHandlers(ipcMain);
23 | GrpcClientServerStreamingSubscriber.unregisterServerStreamingHandlers(ipcMain);
24 | GrpcClientUnarySubscriber.unregisterUnaryCallHandlers(ipcMain);
25 | };
26 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/response/streams/bidirectional-streaming.response.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Tab, Tabs, Tree } from '@components';
4 | import { GrpcMethodType } from '@core/types';
5 | import { GrpcStreamMessage, GrpcTab } from '@storage';
6 |
7 | import { EmptyResponseView } from '../empty-response-view';
8 | import { ReponseNode } from './response.node';
9 | import { ListWrapper, StyledContainer } from './response.styled';
10 |
11 | export interface BidirectionalStreamingResponseProps {
12 | tab: GrpcTab;
13 | }
14 |
15 | export const BidirectionalStreamingResponse: React.FC = ({
16 | tab,
17 | }) => (
18 |
19 |
20 |
21 | {tab.data.response.messages ? (
22 |
23 | data={tab.data.response.messages} defaultIsOpen={false}>
24 | {tab.data.response.messages?.map((message) => (
25 |
26 | ))}
27 |
28 |
29 | ) : (
30 |
31 | )}
32 |
33 |
34 |
35 | );
36 |
--------------------------------------------------------------------------------
/src/app/components/tree/tree.tsx:
--------------------------------------------------------------------------------
1 | import { CSS, styled } from '@nextui-org/react';
2 | import React, { PropsWithChildren } from 'react';
3 |
4 | import { TreeNodeProps } from './tree-node';
5 |
6 | const StyledTree = styled('ul', {
7 | margin: 0,
8 | });
9 |
10 | export type TreeData = {
11 | id: string;
12 | };
13 |
14 | export type TreeProps = {
15 | css?: CSS;
16 |
17 | data?: T[];
18 |
19 | defaultIsOpen?: boolean;
20 | };
21 |
22 | export const Tree: (
23 | props: PropsWithChildren>
24 | ) => React.ReactElement> = ({ css, data = [], defaultIsOpen = true, children }) => {
25 | const isOpenDefaultState = data.reduce(
26 | (acc, item) => ({
27 | ...acc,
28 | [item.id]: defaultIsOpen,
29 | }),
30 | {}
31 | );
32 |
33 | const [isOpen, setIsOpen] = React.useState<{ [key: string]: boolean }>(isOpenDefaultState);
34 |
35 | const handleIsOpen = (id: string) => (value: boolean) => {
36 | setIsOpen({
37 | ...isOpen,
38 | [id]: value,
39 | });
40 | };
41 |
42 | const nodes = (React.Children.toArray(children) as React.ReactElement[]).map(
43 | (node) =>
44 | React.cloneElement(node, {
45 | isOpen: isOpen[node.props.id] !== undefined ? isOpen[node.props.id] : defaultIsOpen,
46 | onCollapseToggle: handleIsOpen(node.props.id),
47 | })
48 | );
49 |
50 | return {nodes};
51 | };
52 |
--------------------------------------------------------------------------------
/src/app/components/tabs/tab-bar/active-bar.tsx:
--------------------------------------------------------------------------------
1 | import { CSS, styled, VariantProps } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | const StyledActiveBar = styled('div', {
5 | position: 'absolute',
6 | height: 1,
7 | pointerEvents: 'none',
8 | zIndex: 2,
9 |
10 | variants: {
11 | color: {
12 | primary: {
13 | background: '$primary',
14 | },
15 | secondary: {
16 | background: '$secondary',
17 | },
18 | success: {
19 | background: '$success',
20 | },
21 | warning: {
22 | background: '$warning',
23 | },
24 | error: {
25 | background: '$error',
26 | },
27 | },
28 |
29 | disabled: {
30 | true: {
31 | display: 'none',
32 | },
33 | },
34 |
35 | position: {
36 | top: {
37 | top: 1,
38 | },
39 | bottom: {
40 | bottom: 0,
41 | },
42 | },
43 |
44 | animated: {
45 | true: {
46 | transition: 'all 0.2s',
47 | },
48 | },
49 | },
50 | });
51 |
52 | export type ActiveBarProps = { css?: CSS } & VariantProps;
53 |
54 | export const ActiveBar: React.FC = ({
55 | disabled = false,
56 | position = 'top',
57 | animated = true,
58 | color = 'primary',
59 | css,
60 | }) => (
61 |
68 | );
69 |
--------------------------------------------------------------------------------
/src/app/components/icons/vertical-layout.icon.tsx:
--------------------------------------------------------------------------------
1 | import { useTheme } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | export const VerticalLayoutIcon: React.FC> = ({ onClick }) => {
5 | const { theme } = useTheme();
6 |
7 | const [isHovered, setIsHovered] = React.useState(false);
8 |
9 | return (
10 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/app/pages/status-bar.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { HorizontalLayoutIcon, VerticalLayoutIcon } from '@components';
5 | import { Alignment, useSettingsStore } from '@storage';
6 |
7 | import packageJson from '../../../package.json';
8 |
9 | export const StatusBar: React.FC = () => {
10 | const { alignment, updateAlignment } = useSettingsStore((store) => store);
11 |
12 | const handleAlignmentChange = (newAlignment: Alignment) => {
13 | updateAlignment(newAlignment);
14 | };
15 |
16 | return (
17 |
26 |
27 |
28 | {packageJson.version}
29 |
30 |
31 |
32 | {alignment === Alignment.VERTICAL ? (
33 | handleAlignmentChange(Alignment.HORIZONTAL)} />
34 | ) : (
35 | handleAlignmentChange(Alignment.VERTICAL)} />
36 | )}
37 |
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | parserOptions: {
4 | project: ['./tsconfig.json', './__tests__/simple-service/tsconfig.json', './__tests__/tls-service/tsconfig.json']
5 | },
6 | plugins: [
7 | 'simple-import-sort',
8 | 'prettier'
9 | ],
10 | extends: [
11 | 'airbnb',
12 | 'airbnb/hooks',
13 | 'airbnb-typescript',
14 | 'plugin:import/electron',
15 | 'prettier',
16 | 'plugin:storybook/recommended'
17 | ],
18 | env: {
19 | browser: true,
20 | es6: true,
21 | node: true
22 | },
23 | rules: {
24 | 'prettier/prettier': ['error', {
25 | printWidth: 100,
26 | singleQuote: true,
27 | trailingComma: 'es5'
28 | }],
29 |
30 | 'import/prefer-default-export': 'off',
31 | 'import/no-extraneous-dependencies': [
32 | 'error',
33 | {
34 | 'devDependencies': [
35 | '**/*.stories.*',
36 | '**/.storybook/**/*.*'
37 | ],
38 | 'peerDependencies': true
39 | }
40 | ],
41 |
42 | 'react/prop-types': 'off',
43 | 'react/function-component-definition': 'off',
44 | 'react/require-default-props': 'off',
45 | 'react/jsx-props-no-spreading': 'off',
46 |
47 | 'react-hooks/exhaustive-deps': 'off',
48 |
49 | 'simple-import-sort/imports': [
50 | 'error',
51 | { 'groups': [['^\\u0000'], ['^[^.]'], ['^@(context|hooks|layouts|components|storage|core|core/types)'], ['^\\.'], ['^.+\\.s?css$']] }
52 | ],
53 |
54 | 'no-plusplus': 'off'
55 | }
56 | };
57 |
--------------------------------------------------------------------------------
/src/app/components/menu/menu-item.tsx:
--------------------------------------------------------------------------------
1 | import { styled, VariantProps } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | const StyledMenuItem = styled('div', {
5 | display: 'flex',
6 | justifyContent: 'center',
7 | padding: 10,
8 |
9 | cursor: 'pointer',
10 |
11 | '&:hover': {
12 | color: '$ezy',
13 | },
14 |
15 | variants: {
16 | active: {
17 | true: {
18 | color: '$ezy',
19 | },
20 | false: {
21 | color: '$accents5',
22 | },
23 | },
24 | },
25 | });
26 |
27 | const IconWrapper = styled('div', {
28 | display: 'flex',
29 | justifyContent: 'center',
30 | alignItems: 'center',
31 |
32 | width: 30,
33 | height: 30,
34 |
35 | variants: {
36 | active: {
37 | true: {
38 | transition: 'all 0.2s ease',
39 | bs: '$xs',
40 | br: '$squared',
41 | backgroundColor: '$accents1',
42 | },
43 | false: {
44 | backgroundColor: 'transparent',
45 | },
46 | },
47 | },
48 | });
49 |
50 | export type MenuItemData = {
51 | id: string;
52 |
53 | icon: React.ReactElement;
54 |
55 | // eslint-disable-next-line react/no-unused-prop-types
56 | submenu?: React.ReactElement;
57 | };
58 |
59 | export type MenuItemProps = MenuItemData & {
60 | onClick?: () => void;
61 | } & VariantProps;
62 |
63 | export const MenuItem: React.FC = ({ id, icon, active = false, onClick }) => (
64 |
65 | {icon}
66 |
67 | );
68 |
--------------------------------------------------------------------------------
/src/app/components/select/colored/colored-single-value.tsx:
--------------------------------------------------------------------------------
1 | import { Spacer, styled, VariantProps } from '@nextui-org/react';
2 | import React from 'react';
3 | import { components, SingleValueProps } from 'react-select';
4 |
5 | import { ColorCircle } from '../../color-circle';
6 | import { ColoredSelectOption } from './interfaces';
7 |
8 | const StyledSpan = styled('span', {
9 | display: 'flex',
10 | flexWrap: 'nowrap',
11 | alignItems: 'center',
12 | gap: 5,
13 |
14 | userSelect: 'none',
15 | font: 'inherit',
16 | fontSize: '$$selectFontSize',
17 |
18 | variants: {
19 | size: {
20 | xs: {
21 | $$selectFontSize: '$fontSizes$xs',
22 | },
23 | sm: {
24 | $$selectFontSize: '$fontSizes$xs',
25 | },
26 | md: {
27 | $$selectFontSize: '$fontSizes$xs',
28 | },
29 | lg: {
30 | $$selectFontSize: '$fontSizes$base',
31 | },
32 | xl: {
33 | $$selectFontSize: '$fontSizes$sm',
34 | },
35 | },
36 | },
37 | });
38 |
39 | export type ColoredSingleValueProps = SingleValueProps & {
40 | selectProps: VariantProps;
41 | };
42 |
43 | export const ColoredSingleValue: React.FC = ({
44 | data,
45 | selectProps,
46 | ...props
47 | }) => (
48 |
49 |
50 |
51 |
52 | {data.label}
53 |
54 |
55 | );
56 |
--------------------------------------------------------------------------------
/src/app/pages/collections/forms/fields/include-directories/directory.node.tsx:
--------------------------------------------------------------------------------
1 | import { faTrash } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Button, Container, Row, Text } from '@nextui-org/react';
4 | import React from 'react';
5 |
6 | import { TreeData, TreeNode, TreeNodeRendererProps } from '@components';
7 |
8 | export type DirectoryNodeData = TreeData & {
9 | value: string;
10 | };
11 |
12 | export const DirectoryNode: React.FC<
13 | TreeNodeRendererProps & { onDirectoryRemove: (id: string) => void }
14 | > = ({ data, onDirectoryRemove }) => {
15 | const content = (
16 |
17 |
18 | {data.value}
19 |
20 |
21 | );
22 |
23 | const handleRemoveButtonClick = () => {
24 | onDirectoryRemove(data.id);
25 | };
26 |
27 | const commandsContent = (
28 | }
42 | onClick={handleRemoveButtonClick}
43 | />
44 | );
45 |
46 | return (
47 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/src/app/pages/settings/modals/update-settings.modal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Modal, ModalProps, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Settings, useSettingsStore } from '@storage';
5 |
6 | import { SettingsForm } from '../forms';
7 |
8 | export const UpdateSettingsModal: React.FC = ({ onClose = () => {}, ...props }) => {
9 | const { updateTheme, theme } = useSettingsStore((store) => store);
10 |
11 | const handleSubmit = async (payload: Partial) => {
12 | if (payload.theme) {
13 | await updateTheme(payload.theme);
14 | }
15 |
16 | onClose();
17 | };
18 |
19 | return (
20 |
26 |
27 | Settings
28 |
29 |
30 |
37 |
38 |
39 |
42 |
53 |
54 |
55 | );
56 | };
57 |
--------------------------------------------------------------------------------
/src/app/storage/interfaces/tabs/grpc-tab.interface.ts:
--------------------------------------------------------------------------------
1 | import { GrpcMethodType } from '@core/types';
2 |
3 | export enum GrpcProtocol {
4 | GRPC = 'grpc',
5 | GRPC_WEB = 'grpc-web',
6 | }
7 |
8 | export interface GrpcRequest {
9 | id: string;
10 | value?: string;
11 | }
12 |
13 | export interface GrpcRequestMetadata {
14 | id: string;
15 | value?: string;
16 | }
17 |
18 | export interface GrpcUnaryResponse {
19 | id: string;
20 | code: number;
21 | timestamp?: number;
22 | value?: string;
23 | }
24 |
25 | export enum GrpcStreamMessageType {
26 | STARTED = 'started',
27 | CLIENT_MESSAGE = 'client-message',
28 | SERVER_MESSAGE = 'server-message',
29 | ERROR = 'error',
30 | CLIENT_STREAMING_ENDED = 'client-streaming-ended',
31 | SERVER_STREAMING_ENDED = 'server-streaming-ended',
32 | CANCELED = 'canceled',
33 | }
34 |
35 | export interface GrpcStreamMessage {
36 | id: string;
37 | type: GrpcStreamMessageType;
38 | timestamp: number;
39 | value?: string;
40 | }
41 |
42 | export interface GrpcStreamResponse {
43 | id: string;
44 | messages?: GrpcStreamMessage[];
45 | }
46 |
47 | export interface GrpcTabInfo {
48 | collectionId: string;
49 | serviceId: string;
50 | methodId: string;
51 | methodType: T;
52 | }
53 |
54 | export type GrpcResponse = T extends GrpcMethodType.UNARY
55 | ? GrpcUnaryResponse
56 | : GrpcStreamResponse;
57 |
58 | export interface GrpcTabData {
59 | protocol: GrpcProtocol;
60 | environmentId?: string;
61 | url?: string;
62 | tlsId?: string;
63 |
64 | requestTabs: {
65 | activeTabId: string | undefined;
66 | request: GrpcRequest;
67 | metadata: GrpcRequestMetadata;
68 | };
69 |
70 | response: GrpcResponse;
71 | }
72 |
--------------------------------------------------------------------------------
/stories/Select.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Grid, Spacer, Text } from '@nextui-org/react';
2 | import { ComponentMeta, ComponentStory } from '@storybook/react';
3 | import React from 'react';
4 |
5 | import { Select as SelectComponent } from '../src/app/components';
6 |
7 | // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
8 | export default {
9 | title: 'Select',
10 | component: SelectComponent,
11 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
12 | argTypes: {},
13 | } as ComponentMeta;
14 |
15 | // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
16 | const Template: ComponentStory = () => (
17 |
18 | Default
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | Bordered
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | );
49 |
50 | export const Select = Template.bind({});
51 |
--------------------------------------------------------------------------------
/src/app/hooks/use-shortcuts.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { AppContext } from '@context';
4 |
5 | export enum ShortcutsGroup {
6 | WELCOME = 'welcome',
7 | RESPONSE = 'response',
8 | }
9 |
10 | const shortcuts = [
11 | {
12 | key: {
13 | darwin: '⌘+K',
14 | other: 'Ctrl+K',
15 | },
16 | description: 'Open command bar',
17 | groups: [ShortcutsGroup.WELCOME],
18 | },
19 | {
20 | key: {
21 | darwin: '⌘+Shift+C',
22 | other: 'Ctrl+Shift+C',
23 | },
24 | description: 'Create new collection',
25 | groups: [ShortcutsGroup.WELCOME],
26 | },
27 | {
28 | key: {
29 | darwin: '⌘+Shift+S',
30 | other: 'Ctrl+Shift+S',
31 | },
32 | description: 'Synchronize collections',
33 | groups: [ShortcutsGroup.WELCOME],
34 | },
35 | {
36 | key: {
37 | darwin: '⌘+T',
38 | other: 'Ctrl+T',
39 | },
40 | description: 'New gRPC tab',
41 | groups: [ShortcutsGroup.WELCOME],
42 | },
43 | {
44 | key: {
45 | darwin: '⌘+Enter',
46 | other: 'Ctrl+Enter',
47 | },
48 | description: 'Invoke request',
49 | groups: [ShortcutsGroup.RESPONSE],
50 | },
51 | ];
52 |
53 | export function useShortcuts() {
54 | const context = React.useContext(AppContext);
55 |
56 | const shortcutsMemoized = React.useMemo(
57 | () =>
58 | shortcuts.map((shortcut) => ({
59 | key: context?.platform.os === 'darwin' ? shortcut.key.darwin : shortcut.key.other,
60 | description: shortcut.description,
61 | groups: shortcut.groups,
62 | })),
63 | [context?.platform.os]
64 | );
65 |
66 | function getShortcuts(group: ShortcutsGroup) {
67 | return shortcutsMemoized.filter((shortcut) => shortcut.groups.includes(group));
68 | }
69 |
70 | return { getShortcuts };
71 | }
72 |
--------------------------------------------------------------------------------
/src/app/pages/shortcuts/hooks/use-environment-actions.tsx:
--------------------------------------------------------------------------------
1 | import { faBolt } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Action, Priority, useRegisterActions } from '@getezy/kbar';
4 | import { Container } from '@nextui-org/react';
5 | import React from 'react';
6 |
7 | import { ColorCircle } from '@components';
8 | import { useEnvironmentsStore, useTabsStore } from '@storage';
9 |
10 | export function useEnvironmentActions() {
11 | const { environments } = useEnvironmentsStore((store) => store);
12 | const { activeTabId, updateGrpcTabData } = useTabsStore((store) => store);
13 |
14 | const actions: Action[] = environments.map((environment) => ({
15 | id: environment.id,
16 | name: environment.label,
17 | keywords: environment.label,
18 | subtitle: environment.url,
19 | parent: 'environment',
20 | icon: (
21 |
29 |
30 |
31 | ),
32 | perform: () => {
33 | if (activeTabId) {
34 | updateGrpcTabData(activeTabId, {
35 | environmentId: environment.id,
36 | url: environment.url,
37 | });
38 | }
39 | },
40 | }));
41 |
42 | useRegisterActions(
43 | [
44 | {
45 | id: 'environment',
46 | section: 'Environment',
47 | name: 'Select environment',
48 | priority: Priority.HIGH,
49 | icon: ,
50 | shortcut: ['$mod+E'],
51 | },
52 | ...actions,
53 | ],
54 | [actions]
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/components/kbar/kbar.styled.ts:
--------------------------------------------------------------------------------
1 | import { KBarAnimator, KBarPositioner, KBarSearch } from '@getezy/kbar';
2 | import { styled } from '@nextui-org/react';
3 |
4 | export const StyledKBarPositioner = styled(KBarPositioner, {
5 | zIndex: '$max',
6 | });
7 |
8 | export const StyledKBarAnimator = styled(KBarAnimator, {
9 | maxWidth: '600px',
10 | width: '100%',
11 | background: '$backgroundContrast',
12 | color: '$text',
13 | borderRadius: '8px',
14 | overflow: 'hidden',
15 | boxShadow: '$xl',
16 | });
17 |
18 | export const StyledKBarSearch = styled(KBarSearch, {
19 | padding: '12px 16px',
20 | fontFamily: '$sans',
21 | fontSize: '16px',
22 | width: '100%',
23 | boxSizing: 'border-box',
24 | outline: 'none',
25 | border: 'none',
26 | background: '$backgroundContrast',
27 | color: '$text',
28 | });
29 |
30 | export const StyledGroupName = styled('div', {
31 | padding: '8px 16px',
32 | fontSize: '10px',
33 | textTransform: 'uppercase',
34 | opacity: 0.5,
35 | });
36 |
37 | export const StyledResultItem = styled('div', {
38 | padding: '12px 16px',
39 | display: 'flex',
40 | alignItems: 'center',
41 | justifyContent: 'space-between',
42 | cursor: 'pointer',
43 |
44 | variants: {
45 | active: {
46 | true: {
47 | backgroundColor: '$accents1',
48 | borderLeft: '2px solid $foreground',
49 | },
50 | false: {
51 | backgroundColor: 'transparent',
52 | borderLeft: '2px solid transparent',
53 | },
54 | },
55 | },
56 | });
57 |
58 | export const StyledActionWrapper = styled('div', {
59 | display: 'flex',
60 | gap: '8px',
61 | alignItems: 'center',
62 | fontSize: 14,
63 | });
64 |
65 | export const StyledShortcutWrapper = styled('div', {
66 | display: 'grid',
67 | gridAutoFlow: 'column',
68 | gap: '1px',
69 | });
70 |
--------------------------------------------------------------------------------
/__tests__/tls-service/src/index.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import { Server, ServerCredentials } from '@grpc/grpc-js';
4 | import * as fs from 'fs';
5 | import * as path from 'path';
6 |
7 | import { TLSServiceServer, TLSServiceService } from './generated/proto/tls_service';
8 |
9 | const TLSService: TLSServiceServer = {
10 | unary(call, callback) {
11 | callback(null, call.request);
12 | },
13 | };
14 |
15 | function getServerCredentials(): ServerCredentials {
16 | const serverCert = fs.readFileSync(path.resolve(__dirname, '../certs/server-cert.pem'));
17 | const serverKey = fs.readFileSync(path.resolve(__dirname, '../certs/server-key.pem'));
18 |
19 | if (process.env.TLS_MODE === 'mutual') {
20 | const rootCert = fs.readFileSync(path.resolve(__dirname, '../certs/ca-cert.pem'));
21 |
22 | const serverCredentials = ServerCredentials.createSsl(
23 | rootCert,
24 | [
25 | {
26 | cert_chain: serverCert,
27 | private_key: serverKey,
28 | },
29 | ],
30 | true
31 | );
32 |
33 | console.log('Using mutual TLS');
34 | return serverCredentials;
35 | }
36 |
37 | const serverCredentials = ServerCredentials.createSsl(
38 | null,
39 | [
40 | {
41 | cert_chain: serverCert,
42 | private_key: serverKey,
43 | },
44 | ],
45 | false
46 | );
47 |
48 | console.log('Using server side TLS');
49 | return serverCredentials;
50 | }
51 |
52 | function main() {
53 | const server = new Server();
54 |
55 | const serverCredentials = getServerCredentials();
56 |
57 | server.addService(TLSServiceService, TLSService);
58 |
59 | server.bindAsync('0.0.0.0:4001', serverCredentials, () => {
60 | server.start();
61 |
62 | console.log('gRPC server started on 0.0.0.0:4001');
63 | });
64 | }
65 |
66 | main();
67 |
--------------------------------------------------------------------------------
/stories/ColoredSelect.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Grid, Spacer, Text } from '@nextui-org/react';
2 | import { ComponentMeta, ComponentStory } from '@storybook/react';
3 | import React from 'react';
4 |
5 | import { ColoredSelect as ColoredSelectComponent } from '../src/app/components';
6 |
7 | // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
8 | export default {
9 | title: 'ColoredSelect',
10 | component: ColoredSelectComponent,
11 | // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
12 | argTypes: {},
13 | } as ComponentMeta;
14 |
15 | // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
16 | const Template: ComponentStory = () => (
17 |
18 | Default
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | Bordered
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | );
49 |
50 | export const ColoredSelect = Template.bind({});
51 |
--------------------------------------------------------------------------------
/src/app/storage/tls-presets.storage.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 |
3 | import { produce } from 'immer';
4 | import { nanoid } from 'nanoid';
5 | import create from 'zustand';
6 | import { persist } from 'zustand/middleware';
7 |
8 | import { GrpcTlsType } from '@core/types';
9 |
10 | import { TlsPresetsStorage } from './interfaces';
11 |
12 | export const useTlsPresetsStore = create(
13 | persist(
14 | (set) => ({
15 | presets: [
16 | {
17 | id: nanoid(),
18 | name: 'Insecure',
19 | system: true,
20 | tls: { type: GrpcTlsType.INSECURE },
21 | },
22 | {
23 | id: nanoid(),
24 | name: 'Server-side',
25 | system: true,
26 | tls: { type: GrpcTlsType.SERVER_SIDE },
27 | },
28 | ],
29 | createTlsPreset: (preset) =>
30 | set(
31 | produce((state) => {
32 | state.presets.push({
33 | system: false,
34 | ...preset,
35 | });
36 | })
37 | ),
38 | updateTlsPreset: (id, preset) =>
39 | set(
40 | produce((state) => {
41 | const index = state.presets.findIndex((item) => item.id === id);
42 |
43 | if (index !== -1) {
44 | state.presets[index] = {
45 | ...state.presets[index],
46 | ...preset,
47 | };
48 | }
49 | })
50 | ),
51 | removeTlsPreset: (id) =>
52 | set(
53 | produce((state) => {
54 | const index = state.presets.findIndex((preset) => preset.id === id);
55 | if (index !== -1) state.presets.splice(index, 1);
56 | })
57 | ),
58 | }),
59 | {
60 | name: 'tls-presets',
61 | getStorage: () => window.electronStore,
62 | }
63 | )
64 | );
65 |
--------------------------------------------------------------------------------
/src/core/clients/grpc/grpc-web-client/grpc-web-call.stream.ts:
--------------------------------------------------------------------------------
1 | import { grpc } from '@improbable-eng/grpc-web';
2 | import { EventEmitter } from 'events';
3 | import * as https from 'https';
4 |
5 | import { GrpcWebError } from './grpc-web.error';
6 | import { NodeHttpTransport } from './http.transport';
7 |
8 | export declare interface GrpcWebCallStream {
9 | on(event: 'message', listener: (message: Record) => void): this;
10 | on(event: 'headers', listener: (headers: grpc.Metadata) => void): this;
11 | on(event: 'error', listener: (error: GrpcWebError) => void): this;
12 | on(
13 | event: 'end',
14 | listener: (code: grpc.Code, details: string, metadata: grpc.Metadata) => void
15 | ): this;
16 | }
17 |
18 | export class GrpcWebCallStream extends EventEmitter {
19 | private call: grpc.Request;
20 |
21 | constructor(
22 | private readonly methodDefinition: grpc.MethodDefinition<
23 | grpc.ProtobufMessage,
24 | grpc.ProtobufMessage
25 | >,
26 | private readonly options: Omit<
27 | grpc.InvokeRpcOptions,
28 | 'onMessage' | 'onEnd' | 'transport'
29 | >,
30 | private readonly httpsOptions?: https.RequestOptions
31 | ) {
32 | super();
33 |
34 | this.call = grpc.invoke(this.methodDefinition, {
35 | ...this.options,
36 | transport: NodeHttpTransport({
37 | ...httpsOptions,
38 | }),
39 | onMessage: (responseMessage) => {
40 | this.emit('message', responseMessage);
41 | },
42 | onHeaders: (headers) => {
43 | this.emit('headers', headers);
44 | },
45 | onEnd: (code, details, metadata) => {
46 | if (code !== grpc.Code.OK) {
47 | this.emit('error', new GrpcWebError(code, details, metadata));
48 | } else {
49 | this.emit('end', code, details, metadata);
50 | }
51 | },
52 | });
53 | }
54 |
55 | cancel() {
56 | this.call.close();
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/pages/collections/modals/update-collection.modal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Modal, ModalProps, Spacer, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Badge } from '@components';
5 | import { useUpdateCollection } from '@hooks';
6 | import { Collection, CollectionType } from '@storage';
7 |
8 | import { CollectionForm } from '../forms';
9 |
10 | export type UpdateCollectionModalProps = ModalProps & {
11 | defaultValues?: Partial>;
12 | };
13 |
14 | export const UpdateCollectionModal: React.FC = ({
15 | onClose = () => {},
16 | defaultValues,
17 | ...props
18 | }) => {
19 | const { update } = useUpdateCollection();
20 |
21 | const handleSubmit = async (payload: Collection) => {
22 | await update(payload.id, payload);
23 |
24 | onClose();
25 | };
26 |
27 | return (
28 |
35 |
36 |
37 | Update Collection
38 |
39 |
40 |
41 |
42 |
47 |
48 |
49 |
52 |
62 |
63 |
64 | );
65 | };
66 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/environments/create-environment.modal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Modal, ModalProps, Text } from '@nextui-org/react';
2 | import { nanoid } from 'nanoid';
3 | import React from 'react';
4 |
5 | import { Environment, useEnvironmentsStore } from '@storage';
6 |
7 | import { EnvironmentForm } from './environment.form';
8 |
9 | export type CreateEnvironmentModalProps = ModalProps & {
10 | defaultValues?: Partial>;
11 | onCreate: (environment: Environment) => void;
12 | };
13 |
14 | export const CreateEnvironmentModal: React.FC = ({
15 | onCreate,
16 | onClose = () => {},
17 | defaultValues,
18 | ...props
19 | }) => {
20 | const createEnvironment = useEnvironmentsStore((store) => store.createEnvironment);
21 |
22 | const handleSubmit = (payload: Environment) => {
23 | const environment: Environment = { ...payload, id: nanoid() };
24 |
25 | createEnvironment(environment);
26 | onCreate(environment);
27 | };
28 |
29 | return (
30 |
36 |
37 | New Environment
38 |
39 |
40 |
45 |
46 |
47 |
50 |
60 |
61 |
62 | );
63 | };
64 |
--------------------------------------------------------------------------------
/src/app/pages/side-bar/collections-tree.tsx:
--------------------------------------------------------------------------------
1 | import { Container, FormElement, Input, Spacer, styled, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Kbd, Tree } from '@components';
5 | import { Collection, CollectionType, useCollectionsStore } from '@storage';
6 |
7 | import { StyledCollectionsTree } from './collections-tree.styled';
8 | import { CollectionNode } from './nodes';
9 |
10 | const TreeWrapper = styled('div', {
11 | overflow: 'auto',
12 | });
13 |
14 | export const CollectionsTree = (): JSX.Element => {
15 | const [filter, setFilter] = React.useState('');
16 |
17 | const collections = useCollectionsStore((store) => store.filterCollections(filter));
18 |
19 | const handleSearchInputChange = (event: React.ChangeEvent) => {
20 | const search = event.target.value.toLowerCase();
21 |
22 | setFilter(search);
23 | };
24 |
25 | return (
26 |
27 |
40 |
41 | {collections.length ? (
42 | > data={collections}>
43 | {collections.map((collection) => (
44 |
45 | ))}
46 |
47 | ) : (
48 |
56 | No collections
57 |
58 | )}
59 |
60 |
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/src/app/pages/side-bar/nodes/method.node.tsx:
--------------------------------------------------------------------------------
1 | import { Spacer, Text, Tooltip } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { TreeNode, TreeNodeRendererProps } from '@components';
5 | import { GrpcMethodType } from '@core/types';
6 | import { CollectionType, GrpcMethod, useCollectionsStore, useTabsStore } from '@storage';
7 |
8 | import { StreamBadge, UnaryBadge } from '../../collections/badge-types';
9 | import { StyledNodeWrapper } from './node.styled';
10 |
11 | export const GrpcMethodNode: React.FC> = ({ data }) => {
12 | const { createGrpcTab } = useTabsStore((store) => store);
13 | const collections = useCollectionsStore((store) => store.collections);
14 |
15 | const handleClick = () => {
16 | const nodeCollection = collections.find((collection) =>
17 | collection.children?.find((service) =>
18 | service.methods?.find((method) => method.id === data.id)
19 | )
20 | );
21 |
22 | const nodeService = nodeCollection?.children?.find((service) =>
23 | service.methods?.find((method) => method.id === data.id)
24 | );
25 |
26 | if (nodeCollection && nodeService) {
27 | createGrpcTab({
28 | type: CollectionType.GRPC,
29 | title: data.name,
30 | info: {
31 | collectionId: nodeCollection.id,
32 | serviceId: nodeService.id,
33 | methodId: data.id,
34 | methodType: data.type,
35 | },
36 | });
37 | }
38 | };
39 |
40 | const content = (
41 |
42 | {data.type === GrpcMethodType.UNARY && }
43 | {data.type !== GrpcMethodType.UNARY && }
44 |
45 |
46 | {data.name}
47 |
48 |
49 | );
50 |
51 | return (
52 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/src/app/pages/settings/forms/settings.form.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Dropdown } from '@nextui-org/react';
2 | import React from 'react';
3 | import { Controller, useForm } from 'react-hook-form';
4 |
5 | import { Settings, ThemeType } from '@storage';
6 |
7 | export interface SettingsFormProps {
8 | id?: string;
9 |
10 | defaultValues?: Partial;
11 |
12 | onSubmit: (payload: Settings) => void;
13 | }
14 |
15 | export const SettingsForm: React.FC = ({
16 | onSubmit = () => {},
17 | id,
18 | defaultValues,
19 | }) => {
20 | const { handleSubmit, control } = useForm({ defaultValues });
21 |
22 | return (
23 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/__tests__/tls-service/certs/gen-certs.sh:
--------------------------------------------------------------------------------
1 | rm *.pem
2 | rm *.srl
3 | rm *.cnf
4 |
5 | # 1. Generate CA's private key and self-signed certificate
6 | openssl req -x509 -newkey rsa:4096 -days 365 -nodes -keyout ca-key.pem -out ca-cert.pem -subj "/C=FR/ST=Occitanie/L=Toulouse/O=Test Org/OU=Test/CN=*.test/emailAddress=test@gmail.com"
7 |
8 | echo "CA's self-signed certificate"
9 | openssl x509 -in ca-cert.pem -noout -text
10 |
11 | # 2. Generate web server's private key and certificate signing request (CSR)
12 | openssl req -newkey rsa:4096 -nodes -keyout server-key.pem -out server-req.pem -subj "/C=FR/ST=Ile de France/L=Paris/O=Server TLS/OU=Server/CN=*.tls/emailAddress=tls@gmail.com"
13 |
14 | # Remember that when we develop on localhost, It’s important to add the IP:0.0.0.0 as an Subject Alternative Name (SAN) extension to the certificate.
15 | echo "subjectAltName=DNS:*.tls,DNS:localhost,IP:0.0.0.0" > server-ext.cnf
16 | # Or you can use localhost DNS and grpc.ssl_target_name_override variable
17 | # echo "subjectAltName=DNS:localhost" > server-ext.cnf
18 |
19 | # 3. Use CA's private key to sign web server's CSR and get back the signed certificate
20 | openssl x509 -req -in server-req.pem -days 60 -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out server-cert.pem -extfile server-ext.cnf
21 |
22 | echo "Server's signed certificate"
23 | openssl x509 -in server-cert.pem -noout -text
24 |
25 | # 4. Generate client's private key and certificate signing request (CSR)
26 | openssl req -newkey rsa:4096 -nodes -keyout client-key.pem -out client-req.pem -subj "/C=FR/ST=Alsace/L=Strasbourg/O=PC Client/OU=Computer/CN=*.client.com/emailAddress=client@gmail.com"
27 |
28 | # Remember that when we develop on localhost, It’s important to add the IP:0.0.0.0 as an Subject Alternative Name (SAN) extension to the certificate.
29 | echo "subjectAltName=DNS:*.client.com,IP:0.0.0.0" > client-ext.cnf
30 |
31 | # 5. Use CA's private key to sign client's CSR and get back the signed certificate
32 | openssl x509 -req -in client-req.pem -days 60 -CA ca-cert.pem -CAkey ca-key.pem -CAcreateserial -out client-cert.pem -extfile client-ext.cnf
33 |
34 | echo "Client's signed certificate"
35 | openssl x509 -in client-cert.pem -noout -text
36 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/response/unary-call.response.tsx:
--------------------------------------------------------------------------------
1 | import { Badge, Container, styled } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { CodeEditor, Tab, Tabs } from '@components';
5 | import { GrpcMethodType, GrpcStatus } from '@core/types';
6 | import { GrpcTab } from '@storage';
7 |
8 | import { EmptyResponseView } from './empty-response-view';
9 |
10 | const StyledContainer = styled('div', {
11 | display: 'flex',
12 | flex: 1,
13 |
14 | overflow: 'hidden',
15 | });
16 |
17 | export interface UnaryCallResponseProps {
18 | tab: GrpcTab;
19 | }
20 |
21 | export const UnaryCallResponse: React.FC = ({ tab }) => {
22 | const responseStatus = (
23 |
29 | {tab.data.response.code !== GrpcStatus.OK ? 'ERROR' : 'OK'}
30 |
31 | );
32 |
33 | const responseTimings = (
34 |
35 | {tab.data.response.timestamp || 0} ms
36 |
37 | );
38 |
39 | const rightNode = tab.data.response.value && (
40 |
46 | {responseStatus}
47 | {responseTimings}
48 |
49 | );
50 |
51 | return (
52 |
53 |
58 |
59 | {tab.data.response.value ? (
60 |
67 | ) : (
68 |
69 | )}
70 |
71 |
72 |
73 | );
74 | };
75 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/send-header/protocol-switch.tsx:
--------------------------------------------------------------------------------
1 | import { faGlobe, faWarning } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Container, Spacer, Switch, SwitchEvent, Text, Tooltip, useTheme } from '@nextui-org/react';
4 | import React from 'react';
5 |
6 | import { GrpcMethodType } from '@core/types';
7 | import { GrpcProtocol, GrpcTab } from '@storage';
8 |
9 | export interface ProtocolSwitchProps {
10 | tab: GrpcTab;
11 |
12 | onChange: (event: SwitchEvent) => void;
13 | }
14 |
15 | export const ProtocolSwitch: React.FC = ({ tab, onChange }) => {
16 | const { theme } = useTheme();
17 |
18 | const isGrpcWebAvailable =
19 | tab.info.methodType === GrpcMethodType.UNARY ||
20 | tab.info.methodType === GrpcMethodType.SERVER_STREAMING;
21 |
22 | let content = (
23 |
24 | {tab.data.protocol === GrpcProtocol.GRPC_WEB ? 'Using gRPC-Web' : 'Using gRPC'}
25 |
26 | );
27 |
28 | if (!isGrpcWebAvailable) {
29 | content = (
30 |
31 | Using gRPC
32 |
33 |
34 |
35 |
36 |
37 | gRPC-Web doesn't support
38 | {tab.info.methodType === GrpcMethodType.CLIENT_STREAMING
39 | ? ' client streaming'
40 | : ' bidirectional streaming'}
41 |
42 |
43 |
44 | );
45 | }
46 |
47 | return (
48 |
49 | }
56 | checked={tab.data.protocol === GrpcProtocol.GRPC_WEB}
57 | onChange={onChange}
58 | />
59 |
60 | );
61 | };
62 |
--------------------------------------------------------------------------------
/src/app/hooks/protocols/grpc/prepare-request.ts:
--------------------------------------------------------------------------------
1 | import {
2 | GrpcClientRequestOptions,
3 | GrpcMethodType,
4 | GrpcOptions,
5 | GrpcTlsConfig,
6 | GrpcTlsType,
7 | } from '@core/types';
8 | import { Collection, CollectionType, GrpcTab, TlsPreset } from '@storage';
9 |
10 | function getRequestAddress(tab: GrpcTab): string {
11 | if (tab.data.url && tab.data.url.length > 0) {
12 | return tab.data.url;
13 | }
14 |
15 | throw new Error('Address is empty.');
16 | }
17 |
18 | export function getTlsOptions(presets: TlsPreset[], id?: string): GrpcTlsConfig {
19 | const preset = presets.find((item) => item.id === id);
20 |
21 | if (preset) {
22 | return preset.tls;
23 | }
24 |
25 | return {
26 | type: GrpcTlsType.INSECURE,
27 | };
28 | }
29 |
30 | export function getOptions(
31 | collections: Collection[],
32 | tab: GrpcTab,
33 | tls: GrpcTlsConfig
34 | ): [GrpcOptions, GrpcClientRequestOptions] {
35 | const collection = collections.find((item) => item.id === tab.info.collectionId);
36 | const service = collection?.children?.find((item) => item.id === tab.info.serviceId);
37 | const method = service?.methods?.find((item) => item.id === tab.info.methodId);
38 |
39 | if (collection && service && method) {
40 | return [
41 | collection.options,
42 | {
43 | serviceName: service.name,
44 | methodName: method.name,
45 | address: getRequestAddress(tab),
46 | tls,
47 | },
48 | ];
49 | }
50 |
51 | throw new Error(`Couldn't get request options. Try to sync collection.`);
52 | }
53 |
54 | export function parseRequest(tab: GrpcTab): Record {
55 | try {
56 | const request = JSON.parse(tab.data.requestTabs.request.value?.trim() || '{}');
57 |
58 | return request;
59 | } catch (error) {
60 | throw new Error(`Couldn't parse request message.`);
61 | }
62 | }
63 |
64 | export function parseMetadata(tab: GrpcTab): Record {
65 | try {
66 | const metadata = JSON.parse(tab.data.requestTabs.metadata.value?.trim() || '{}');
67 |
68 | return metadata;
69 | } catch (error) {
70 | throw new Error(`Couldn't parse request metadata.`);
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.server-streaming.tsx:
--------------------------------------------------------------------------------
1 | import { faXmark } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Button, Loading, Spacer } from '@nextui-org/react';
4 | import React from 'react';
5 | import { useUnmount } from 'react-use';
6 |
7 | import { GrpcMethodType } from '@core/types';
8 | import { useGrpcTabContextStore, useServerStreaming } from '@hooks';
9 |
10 | import { SendHeader, SendHeaderProps } from './send-header.basic';
11 |
12 | export const ServerStreamingSendHeader: React.FC<
13 | SendHeaderProps
14 | > = ({ tab }) => {
15 | const { invoke, cancel } = useServerStreaming();
16 | const { getContext } = useGrpcTabContextStore();
17 |
18 | const context = getContext(tab.id);
19 |
20 | const handleInvokeButtonClick = async () => {
21 | await invoke(tab);
22 | };
23 |
24 | const handleCancelButtonClick = async () => {
25 | await cancel(tab);
26 | };
27 |
28 | useUnmount(() => {
29 | handleCancelButtonClick();
30 | });
31 |
32 | return (
33 |
34 | {!!context?.isServerStreaming && (
35 | <>
36 |
37 | }
44 | onClick={handleCancelButtonClick}
45 | />
46 |
47 | )}
48 |
49 |
69 |
70 | );
71 | };
72 |
--------------------------------------------------------------------------------
/src/core/clients/grpc/interfaces/client.interface.ts:
--------------------------------------------------------------------------------
1 | export enum GrpcTlsType {
2 | INSECURE = 'insecure',
3 | SERVER_SIDE = 'server-side',
4 | MUTUAL = 'mutual',
5 | }
6 |
7 | export type GrpcTlsConfig = T extends GrpcTlsType.MUTUAL
8 | ? GrpcMutualTlsConfig
9 | : T extends GrpcTlsType.SERVER_SIDE
10 | ? GrpcServerSideTlsConfig
11 | : GrpcInsecureTlsConfig;
12 |
13 | /**
14 | * https://grpc.github.io/grpc/core/group__grpc__arg__keys.html
15 | */
16 | export interface GrpcChannelOptions {
17 | /**
18 | * This should be used for testing only.
19 | *
20 | * The caller of the secure_channel_create functions may override
21 | * the target name used for SSL host name checking using this channel
22 | * argument which is of type GRPC_ARG_STRING. If this argument is
23 | * not specified, the name used for SSL host name checking will be
24 | * the target parameter (assuming that the secure channel is an SSL channel).
25 | * If this parameter is specified and the underlying is not an SSL channel, it will just be ignored.
26 | */
27 | sslTargetNameOverride?: string;
28 | }
29 |
30 | export interface GrpcServerSideTlsConfig {
31 | type: GrpcTlsType.SERVER_SIDE;
32 |
33 | rootCertificatePath?: string;
34 |
35 | channelOptions?: GrpcChannelOptions;
36 | }
37 |
38 | export interface GrpcMutualTlsConfig {
39 | type: GrpcTlsType.MUTUAL;
40 |
41 | rootCertificatePath?: string;
42 |
43 | clientCertificatePath: string;
44 |
45 | clientKeyPath: string;
46 |
47 | channelOptions?: GrpcChannelOptions;
48 | }
49 |
50 | export interface GrpcInsecureTlsConfig {
51 | type: GrpcTlsType.INSECURE;
52 |
53 | channelOptions?: GrpcChannelOptions;
54 | }
55 |
56 | export interface GrpcClientRequestOptions {
57 | serviceName: string;
58 |
59 | methodName: string;
60 |
61 | address: string;
62 |
63 | tls: GrpcTlsConfig;
64 | }
65 |
66 | export function isInsecureTlsConfig(
67 | config: GrpcTlsConfig
68 | ): config is GrpcTlsConfig {
69 | return config.type === GrpcTlsType.INSECURE;
70 | }
71 |
72 | export function isMutualTlsConfig(
73 | config: GrpcTlsConfig
74 | ): config is GrpcTlsConfig {
75 | return config.type === GrpcTlsType.MUTUAL;
76 | }
77 |
--------------------------------------------------------------------------------
/src/main/clients/grpc-client/constants.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Represents channel from renderer process
3 | */
4 | export enum GrpcClientChannel {
5 | INVOKE_UNARY_REQUEST = 'grpc-client-channel:unary-request:invoke',
6 |
7 | INVOKE_SERVER_STREAMING_REQUEST = 'grpc-client-channel:server-streaming-request:invoke',
8 | CANCEL_SERVER_STREAMING_REQUEST = 'grpc-client-channel:server-streaming-request:cancel',
9 |
10 | INVOKE_CLIENT_STREAMING_REQUEST = 'grpc-client-channel:client-streaming-request:invoke',
11 | SEND_CLIENT_STREAMING_REQUEST = 'grpc-client-channel:client-streaming-request:send',
12 | END_CLIENT_STREAMING_REQUEST = 'grpc-client-channel:client-streaming-request:end',
13 | CANCEL_CLIENT_STREAMING_REQUEST = 'grpc-client-channel:client-streaming-request:cancel',
14 |
15 | INVOKE_BIDIRECTIONAL_STREAMING_REQUEST = 'grpc-client-channel:bidirectional-streaming-request:invoke',
16 | SEND_BIDIRECTIONAL_STREAMING_REQUEST = 'grpc-client-channel:bidirectional-streaming-request:send',
17 | END_BIDIRECTIONAL_STREAMING_REQUEST = 'grpc-client-channel:bidirectional-streaming-request:end',
18 | CANCEL_BIDIRECTIONAL_STREAMING_REQUEST = 'grpc-client-channel:bidirectional-streaming-request:cancel',
19 | }
20 |
21 | /**
22 | * Represents channel from main process
23 | */
24 | export enum GrpcClientServerStreamingChannel {
25 | DATA = 'grpc-client:server-streaming-request:data',
26 | ERROR = 'grpc-client:server-streaming-request:error',
27 | END = 'grpc-client:server-streaming-request:end',
28 | CANCEL = 'grpc-client:server-streaming-request:cancel',
29 | }
30 |
31 | /**
32 | * Represents channel from main process
33 | */
34 | export enum GrpcClientClientStreamingChannel {
35 | DATA = 'grpc-client:client-streaming-request:data',
36 | ERROR = 'grpc-client:client-streaming-request:error',
37 | END = 'grpc-client:client-streaming-request:end',
38 | CANCEL = 'grpc-client:client-streaming-request:cancel',
39 | }
40 |
41 | /**
42 | * Represents channel from main process
43 | */
44 | export enum GrpcClientBidirectionalStreamingChannel {
45 | DATA = 'grpc-client:bidirectional-streaming-request:data',
46 | ERROR = 'grpc-client:bidirectional-streaming-request:error',
47 | END = 'grpc-client:bidirectional-streaming-request:end',
48 | CANCEL = 'grpc-client:bidirectional-streaming-request:cancel',
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/environments/environment.form.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Input, Spacer } from '@nextui-org/react';
2 | import chroma from 'chroma-js';
3 | import React from 'react';
4 | import { useForm } from 'react-hook-form';
5 |
6 | import { ColorPickerInput } from '@components';
7 | import { Environment } from '@storage';
8 |
9 | export interface EnvironmentFormProps {
10 | id?: string;
11 |
12 | defaultValues?: Partial>;
13 |
14 | onSubmit: (payload: Environment) => void;
15 | }
16 |
17 | export const EnvironmentForm: React.FC = ({
18 | onSubmit = () => {},
19 | id,
20 | defaultValues,
21 | }) => {
22 | const {
23 | register,
24 | handleSubmit,
25 | formState: { errors },
26 | setValue,
27 | watch,
28 | } = useForm({ defaultValues: { color: chroma.random().hex(), ...defaultValues } });
29 |
30 | return (
31 |
73 | );
74 | };
75 |
--------------------------------------------------------------------------------
/src/app/hooks/protocols/grpc/use-unary-call.ts:
--------------------------------------------------------------------------------
1 | import { notification } from '@components';
2 | import { GrpcMethodType } from '@core/types';
3 | import {
4 | GrpcProtocol,
5 | GrpcTab,
6 | useCollectionsStore,
7 | useTabsStore,
8 | useTlsPresetsStore,
9 | } from '@storage';
10 |
11 | import { getOptions, getTlsOptions, parseMetadata, parseRequest } from './prepare-request';
12 | import { useGrpcTabContextStore } from './use-grpc-tab-context';
13 |
14 | export function useUnaryCall() {
15 | const collections = useCollectionsStore((store) => store.collections);
16 | const { updateGrpcTabData } = useTabsStore((store) => store);
17 | const tlsPresets = useTlsPresetsStore((store) => store.presets);
18 | const { setContext, getContext, deleteContext } = useGrpcTabContextStore();
19 |
20 | function getClient(tab: GrpcTab) {
21 | return tab.data.protocol === GrpcProtocol.GRPC ? window.clients.grpc : window.clients.grpcWeb;
22 | }
23 |
24 | function isRequestLoading(tab: GrpcTab) {
25 | if (getContext(tab.id)?.isLoading) {
26 | throw new Error('Request already invoked');
27 | }
28 | }
29 |
30 | async function invoke(tab: GrpcTab): Promise {
31 | try {
32 | isRequestLoading(tab);
33 |
34 | setContext(tab.id, { isLoading: true });
35 | const tls = getTlsOptions(tlsPresets, tab.data.tlsId);
36 | const [grpcOptions, requestOptions] = getOptions(collections, tab, tls);
37 | const request = parseRequest(tab);
38 | const metadata = parseMetadata(tab);
39 |
40 | const client = getClient(tab);
41 |
42 | const response = await client.unary.invoke(grpcOptions, requestOptions, request, metadata);
43 |
44 | updateGrpcTabData(tab.id, {
45 | response: {
46 | ...tab.data.response,
47 | code: response.code,
48 | timestamp: response.timestamp,
49 | value: JSON.stringify(response.value, null, 2),
50 | },
51 | });
52 | } catch (error: any) {
53 | notification(
54 | { title: 'Invoke request error', description: error.message },
55 | { type: 'error', position: 'bottom-right' }
56 | );
57 | } finally {
58 | deleteContext(tab.id);
59 | }
60 | }
61 |
62 | return { invoke };
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/storage/interfaces/tabs/tabs.interface.ts:
--------------------------------------------------------------------------------
1 | import { GrpcMethodType } from '@core/types';
2 |
3 | import { CollectionType } from '../collections.interface';
4 | import { GrpcStreamMessage, GrpcTabData, GrpcTabInfo } from './grpc-tab.interface';
5 |
6 | export type Tab = {
7 | id: string;
8 | title: string;
9 | type: T;
10 |
11 | info: TabInfo;
12 | data: TabData;
13 | };
14 |
15 | export type GrpcTab = Tab<
16 | CollectionType.GRPC,
17 | GrpcTabInfo,
18 | GrpcTabData
19 | >;
20 |
21 | export function isGrpcTab(tab: Tab): tab is Tab {
22 | return tab.type === CollectionType.GRPC;
23 | }
24 |
25 | export function isGrpcTabUnaryCall(
26 | tab: GrpcTab
27 | ): tab is GrpcTab {
28 | return tab.info.methodType === GrpcMethodType.UNARY;
29 | }
30 |
31 | export function isGrpcTabServerStreaming(
32 | tab: GrpcTab
33 | ): tab is GrpcTab {
34 | return tab.info.methodType === GrpcMethodType.SERVER_STREAMING;
35 | }
36 |
37 | export function isGrpcTabClientStreaming(
38 | tab: GrpcTab
39 | ): tab is GrpcTab {
40 | return tab.info.methodType === GrpcMethodType.CLIENT_STREAMING;
41 | }
42 |
43 | export function isGrpcTabBidirectionalStreaming(
44 | tab: GrpcTab
45 | ): tab is GrpcTab {
46 | return tab.info.methodType === GrpcMethodType.BIDIRECTIONAL_STREAMING;
47 | }
48 |
49 | export interface TabsStorage {
50 | tabs: Tab[];
51 |
52 | activeTabId: string | undefined;
53 |
54 | closeAllTabs: () => void;
55 | closeActiveTab: () => void;
56 | closeTab: (id: string) => void;
57 | activateTab: (id: string) => void;
58 | moveTab: (currentId: string, overId: string | undefined) => void;
59 |
60 | createGrpcTab: (payload: Pick, 'title' | 'type' | 'info'>) => void;
61 | addGrpcStreamMessage: (
62 | id: string,
63 | message: Omit,
64 | forceClear?: boolean
65 | ) => void;
66 | updateGrpcTabData: (id: string, data: Partial>) => void;
67 | updateGrpcTabsEnvironment: (currentEnvironmentId: string, newEnvironmentId?: string) => void;
68 | }
69 |
--------------------------------------------------------------------------------
/src/app/pages/logs/logs.modal.tsx:
--------------------------------------------------------------------------------
1 | import { faBroomBall } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Button, Modal, ModalProps, styled, Text } from '@nextui-org/react';
4 | import { nanoid } from 'nanoid';
5 | import React from 'react';
6 |
7 | import { useLogsStore } from '@storage';
8 |
9 | const LogItem = styled('div', {
10 | paddingLeft: 10,
11 | paddingRight: 10,
12 | '&:hover': {
13 | backgroundColor: '$backgroundContrast',
14 | },
15 | });
16 |
17 | export const LogsModal: React.FC = ({ onClose = () => {}, ...props }) => {
18 | const { logs, clearLogs } = useLogsStore((store) => store);
19 |
20 | const content =
21 | logs.length > 0 ? (
22 | logs.map((log) => (
23 |
24 |
25 | {log.message}
26 |
27 |
28 | ))
29 | ) : (
30 |
38 | No logs
39 |
40 | );
41 |
42 | const handleClearButtonClick = () => {
43 | clearLogs();
44 | };
45 |
46 | return (
47 |
53 |
59 | Logs
60 |
61 |
62 | {content}
63 |
64 |
65 | }
72 | onClick={handleClearButtonClick}
73 | >
74 | Clear
75 |
76 |
79 |
80 |
81 | );
82 | };
83 |
--------------------------------------------------------------------------------
/src/app/pages/collections/modals/create-collection.modal.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Modal, ModalProps, Spacer, Switch, Text } from '@nextui-org/react';
2 | import React from 'react';
3 |
4 | import { Badge } from '@components';
5 | import { useCreateCollection } from '@hooks';
6 | import { Collection, CollectionType } from '@storage';
7 |
8 | import { CollectionForm } from '../forms';
9 |
10 | export const CreateCollectionModal: React.FC = ({ onClose = () => {}, ...props }) => {
11 | const { create } = useCreateCollection();
12 | const [isCreateMore, setIsCreateMore] = React.useState(false);
13 | const [defaultValues, setDefaultValues] = React.useState({});
14 |
15 | const handleSubmit = async (payload: Collection) => {
16 | await create({
17 | ...payload,
18 | type: CollectionType.GRPC,
19 | });
20 |
21 | if (isCreateMore) {
22 | setDefaultValues({
23 | type: CollectionType.GRPC,
24 | options: {
25 | includeDirs: payload.options.includeDirs,
26 | },
27 | });
28 | } else {
29 | onClose();
30 | }
31 | };
32 |
33 | return (
34 |
41 |
42 |
43 | New Collection
44 |
45 |
46 |
47 |
48 |
53 |
54 |
55 | setIsCreateMore(event.target.checked)}
59 | />
60 |
61 | Create more
62 |
63 |
73 |
74 |
75 | );
76 | };
77 |
--------------------------------------------------------------------------------
/src/app/components/code-editor/code-editor.tsx:
--------------------------------------------------------------------------------
1 | import { defaultKeymap, indentWithTab } from '@codemirror/commands';
2 | import { json } from '@codemirror/lang-json';
3 | // import { json, jsonParseLinter } from '@codemirror/lang-json';
4 | // import { linter, lintGutter } from '@codemirror/lint';
5 | import { keymap, ViewUpdate } from '@codemirror/view';
6 | import { useTheme } from '@nextui-org/react';
7 | import { BasicSetupOptions } from '@uiw/react-codemirror';
8 | import React from 'react';
9 |
10 | import { StyledCodeMirror } from './code-editor.styled';
11 | import { createTheme } from './themes/theme';
12 |
13 | export interface CodeEditorProps {
14 | value?: string;
15 |
16 | height?: string;
17 |
18 | width?: string;
19 |
20 | maxHeight?: string;
21 |
22 | maxWidth?: string;
23 |
24 | readOnly?: boolean;
25 |
26 | basicSetup?: BasicSetupOptions;
27 |
28 | onChange?(value: string, viewUpdate?: ViewUpdate): void;
29 | }
30 |
31 | export const CodeEditor: React.FC = ({
32 | maxHeight,
33 | maxWidth,
34 | height = 'auto',
35 | width = 'auto',
36 | value,
37 | readOnly = false,
38 | basicSetup,
39 | onChange = () => {},
40 | }) => {
41 | const { theme, isDark } = useTheme();
42 |
43 | return (
44 | shortcut.key !== 'Mod-Enter'),
73 | ]),
74 | json(),
75 | ]}
76 | // extensions={[keymap.of([indentWithTab]), json()]}
77 | // extensions={[keymap.of([indentWithTab]), json(), linter(jsonParseLinter()), lintGutter()]}
78 | />
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/src/app/components/notification/notification.tsx:
--------------------------------------------------------------------------------
1 | import { faClone, faXmark } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Button, Spacer, styled, Text } from '@nextui-org/react';
4 | import React from 'react';
5 | import { ToastContentProps } from 'react-toastify';
6 | import { useCopyToClipboard } from 'react-use';
7 |
8 | const NotificationWrapper = styled('div', {
9 | display: 'flex',
10 | flexDirection: 'column',
11 |
12 | maxWidth: '100%',
13 |
14 | userSelect: 'none',
15 | overflowWrap: 'anywhere',
16 | });
17 |
18 | const TitleWrapper = styled('div', {
19 | display: 'flex',
20 | flexWrap: 'nowrap',
21 | });
22 |
23 | const CommandsWrapper = styled('div', {
24 | display: 'flex',
25 | marginLeft: 'auto',
26 | });
27 |
28 | export type NotificationProps = {
29 | title: string;
30 | description?: string;
31 | } & Partial;
32 |
33 | export const Notification: React.FC = ({ title, description, closeToast }) => {
34 | const [, copyToClipboard] = useCopyToClipboard();
35 | const handleCopyButtonClick = () => copyToClipboard(description || title || '');
36 |
37 | return (
38 |
39 |
40 | {title}
41 |
42 | }
55 | onClick={handleCopyButtonClick}
56 | />
57 |
58 | }
71 | onClick={closeToast}
72 | />
73 |
74 |
75 | {description && {description}}
76 |
77 | );
78 | };
79 |
--------------------------------------------------------------------------------
/src/app/components/file-input/file.input.tsx:
--------------------------------------------------------------------------------
1 | import { faPlus } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { Container, Input, InputProps, NormalColors, Spacer, Text } from '@nextui-org/react';
4 | import React from 'react';
5 |
6 | import { EzyButton } from '@components';
7 |
8 | export type FileInputProps = Partial> & {
9 | buttonColor?: NormalColors;
10 | value?: string | null | undefined;
11 |
12 | onChange: (path: string | undefined) => void;
13 | };
14 |
15 | export const FileInput = React.forwardRef(
16 | ({ accept, buttonColor, onChange, value, readOnly, label, color, ...props }, ref) => {
17 | const [inputValue, setInputValue] = React.useState(value);
18 |
19 | React.useEffect(() => {
20 | setInputValue(value);
21 | }, [value]);
22 |
23 | const handleDialogOpenButtonClick = async () => {
24 | const paths = await window.electronDialog.open({ properties: ['openFile'] });
25 |
26 | if (Array.isArray(paths) && paths.length) {
27 | setInputValue(paths[0]);
28 | onChange(paths[0]);
29 | }
30 | };
31 |
32 | return (
33 | onChange(undefined)}
39 | color={color}
40 | // @ts-ignore
41 | label={
42 |
43 |
44 | {label}
45 |
46 |
47 | }
53 | css={{ minWidth: 10, color: '$accents8', borderColor: '$accents3' }}
54 | onClick={handleDialogOpenButtonClick}
55 | />
56 |
57 | }
58 | css={{
59 | '.nextui-input': {
60 | cursor: 'default',
61 | },
62 | '.nextui-input-clear-button': {
63 | cursor: 'pointer',
64 | },
65 | }}
66 | {...props}
67 | />
68 | );
69 | }
70 | );
71 |
--------------------------------------------------------------------------------
/src/app/pages/tabs-container/collection-types/grpc/response/streams/stream-icons.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | faArrowLeft,
3 | faArrowRight,
4 | faCheck,
5 | faPlay,
6 | faStop,
7 | faXmark,
8 | } from '@fortawesome/free-solid-svg-icons';
9 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
10 | import { styled, Text } from '@nextui-org/react';
11 | import React from 'react';
12 |
13 | import { GrpcStreamMessageType } from '@storage';
14 |
15 | const IconWrapper = styled('div', {
16 | minWidth: 12,
17 | maxWidth: 12,
18 | });
19 |
20 | export const StreamIcons = {
21 | [GrpcStreamMessageType.CLIENT_MESSAGE]: (
22 |
23 |
24 |
25 | ),
26 | [GrpcStreamMessageType.SERVER_MESSAGE]: (
27 |
28 |
29 |
30 | ),
31 | [GrpcStreamMessageType.STARTED]: (
32 |
33 |
34 |
35 | ),
36 | [GrpcStreamMessageType.CLIENT_STREAMING_ENDED]: (
37 |
38 |
39 |
40 | ),
41 | [GrpcStreamMessageType.SERVER_STREAMING_ENDED]: (
42 |
43 |
44 |
45 | ),
46 | [GrpcStreamMessageType.CANCELED]: (
47 |
48 |
49 |
50 | ),
51 | [GrpcStreamMessageType.ERROR]: (
52 |
53 |
54 |
55 | ),
56 | };
57 |
58 | export const StreamMessageTypeText = {
59 | [GrpcStreamMessageType.CLIENT_MESSAGE]: Client message,
60 | [GrpcStreamMessageType.SERVER_MESSAGE]: Server message,
61 | [GrpcStreamMessageType.STARTED]: Stream started,
62 | [GrpcStreamMessageType.CLIENT_STREAMING_ENDED]: Client streaming ended,
63 | [GrpcStreamMessageType.SERVER_STREAMING_ENDED]: Server streaming ended,
64 | [GrpcStreamMessageType.CANCELED]: Stream canceled,
65 | [GrpcStreamMessageType.ERROR]: Stream error,
66 | };
67 |
--------------------------------------------------------------------------------
/src/app/components/menu/menu.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from '@nextui-org/react';
2 | import { nanoid } from 'nanoid';
3 | import React from 'react';
4 |
5 | import { MenuItem, MenuItemData } from './menu-item';
6 |
7 | const StyledMenu = styled('div', {
8 | display: 'flex',
9 | flexDirection: 'column',
10 | flex: 1,
11 |
12 | width: 50,
13 | maxWidth: 50,
14 |
15 | backgroundColor: '$background',
16 |
17 | borderRight: 'solid 0.1px $border',
18 | });
19 |
20 | const SubMenu = styled('div', {
21 | display: 'flex',
22 | flexWrap: 'nowrap',
23 | transition: 'all 0.2s ease',
24 |
25 | borderRight: 'solid 0.1px $border',
26 |
27 | variants: {
28 | isCollapsed: {
29 | true: {
30 | '& div': {
31 | display: 'none',
32 | },
33 | width: 0,
34 | },
35 | false: {
36 | width: 250,
37 | minWidth: 250,
38 | },
39 | },
40 | },
41 | });
42 |
43 | const TopContainer = styled('div', {
44 | borderBottom: 'solid 0.1px $border',
45 | });
46 |
47 | const BottomContainer = styled('div', {
48 | marginTop: 'auto',
49 | });
50 |
51 | export interface MenuProps {
52 | items: MenuItemData[];
53 |
54 | top?: React.ReactNode;
55 |
56 | bottom?: React.ReactNode;
57 |
58 | isCollapsed?: boolean;
59 |
60 | onCollapseChange?: (isCollapsed: boolean) => void;
61 | }
62 |
63 | export const Menu: React.FC = ({
64 | items,
65 | bottom,
66 | top,
67 | isCollapsed = false,
68 | onCollapseChange,
69 | }) => {
70 | const [activeItem, setActiveItem] = React.useState(items[0].id);
71 |
72 | const handleMenuItemClick = (index: string) => {
73 | if (index === activeItem && onCollapseChange) {
74 | onCollapseChange(!isCollapsed);
75 | } else {
76 | setActiveItem(index);
77 | }
78 | };
79 |
80 | const submenu = items.find((item) => item.id === activeItem)?.submenu;
81 |
82 | return (
83 | <>
84 |
85 | {top}
86 | {items.map((item) => (
87 |
98 | {!!submenu && submenu}
99 |
100 | );
101 | };
102 |
--------------------------------------------------------------------------------
/src/app/pages/collections/forms/collection.form.tsx:
--------------------------------------------------------------------------------
1 | import { Container, Input, Spacer } from '@nextui-org/react';
2 | import React from 'react';
3 | import { Controller, useForm } from 'react-hook-form';
4 |
5 | import { FileInput } from '@components';
6 | import { Collection, CollectionType } from '@storage';
7 |
8 | import { IncludeDirectoriesField } from './fields';
9 |
10 | export interface CollectionFormProps {
11 | id?: string;
12 |
13 | defaultValues?: Partial>;
14 |
15 | onSubmit: (payload: Collection) => void;
16 | }
17 |
18 | export const CollectionForm: React.FC = ({
19 | onSubmit = () => {},
20 | id,
21 | defaultValues,
22 | }) => {
23 | const {
24 | control,
25 | register,
26 | reset,
27 | handleSubmit,
28 | formState: { errors },
29 | } = useForm>({ defaultValues });
30 |
31 | React.useEffect(() => {
32 | reset();
33 | }, [defaultValues]);
34 |
35 | return (
36 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/app/pages/shortcuts/shortcuts.tsx:
--------------------------------------------------------------------------------
1 | import { faArrowsRotate, faSquarePlus, faXmark } from '@fortawesome/free-solid-svg-icons';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { createAction, KBarProvider } from '@getezy/kbar';
4 | import React, { PropsWithChildren } from 'react';
5 |
6 | import { KBar } from '@components';
7 | import { AppContext } from '@context';
8 | import { useUpdateCollection } from '@hooks';
9 | import { useCollectionsStore, useTabsStore } from '@storage';
10 |
11 | import { useEnvironmentActions, useGrpcMethodActions, useThemeActions } from './hooks';
12 |
13 | interface ActionsProviderProps {
14 | os: string;
15 | }
16 |
17 | const ActionsProvider: React.FC> = ({ children, os }) => {
18 | useGrpcMethodActions();
19 | useEnvironmentActions();
20 | useThemeActions();
21 |
22 | return {children};
23 | };
24 |
25 | export const Shortcuts: React.FC = ({ children }) => {
26 | const context = React.useContext(AppContext);
27 |
28 | const { closeAllTabs, closeActiveTab } = useTabsStore((store) => store);
29 | const { collections } = useCollectionsStore((store) => store);
30 | const { update: updateCollection } = useUpdateCollection();
31 |
32 | const actions = [
33 | createAction({
34 | section: 'Collections',
35 | name: 'New Collection',
36 | icon: ,
37 | shortcut: ['$mod+Shift+C'],
38 | perform: () => context?.modal.setCreateCollectionModalVisible(true),
39 | }),
40 | createAction({
41 | section: 'Collections',
42 | name: 'Synchronize All',
43 | icon: ,
44 | shortcut: ['$mod+Shift+S'],
45 | perform: () => {
46 | collections.forEach((collection) => {
47 | updateCollection(collection.id, collection);
48 | });
49 | },
50 | }),
51 | createAction({
52 | section: 'Tabs',
53 | name: 'Close Active Tab',
54 | icon: ,
55 | shortcut: ['$mod+W'],
56 | perform: () => closeActiveTab(),
57 | }),
58 | createAction({
59 | section: 'Tabs',
60 | name: 'Close All Tabs',
61 | icon: ,
62 | shortcut: ['$mod+Shift+W'],
63 | perform: () => closeAllTabs(),
64 | }),
65 | ];
66 |
67 | return (
68 |
69 | {children}
70 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/__tests__/simple-service/src/generated/google/protobuf/empty.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import Long from "long";
3 | import _m0 from "protobufjs/minimal";
4 |
5 | export const protobufPackage = "google.protobuf";
6 |
7 | /**
8 | * A generic empty message that you can re-use to avoid defining duplicated
9 | * empty messages in your APIs. A typical example is to use it as the request
10 | * or the response type of an API method. For instance:
11 | *
12 | * service Foo {
13 | * rpc Bar(google.protobuf.Empty) returns (google.protobuf.Empty);
14 | * }
15 | *
16 | * The JSON representation for `Empty` is empty JSON object `{}`.
17 | */
18 | export interface Empty {}
19 |
20 | function createBaseEmpty(): Empty {
21 | return {};
22 | }
23 |
24 | export const Empty = {
25 | encode(_: Empty, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
26 | return writer;
27 | },
28 |
29 | decode(input: _m0.Reader | Uint8Array, length?: number): Empty {
30 | const reader = input instanceof _m0.Reader ? input : new _m0.Reader(input);
31 | let end = length === undefined ? reader.len : reader.pos + length;
32 | const message = createBaseEmpty();
33 | while (reader.pos < end) {
34 | const tag = reader.uint32();
35 | switch (tag >>> 3) {
36 | default:
37 | reader.skipType(tag & 7);
38 | break;
39 | }
40 | }
41 | return message;
42 | },
43 |
44 | fromJSON(_: any): Empty {
45 | return {};
46 | },
47 |
48 | toJSON(_: Empty): unknown {
49 | const obj: any = {};
50 | return obj;
51 | },
52 |
53 | fromPartial, I>>(_: I): Empty {
54 | const message = createBaseEmpty();
55 | return message;
56 | },
57 | };
58 |
59 | type Builtin =
60 | | Date
61 | | Function
62 | | Uint8Array
63 | | string
64 | | number
65 | | boolean
66 | | undefined;
67 |
68 | export type DeepPartial = T extends Builtin
69 | ? T
70 | : T extends Long
71 | ? string | number | Long
72 | : T extends Array
73 | ? Array>
74 | : T extends ReadonlyArray
75 | ? ReadonlyArray>
76 | : T extends {}
77 | ? { [K in keyof T]?: DeepPartial }
78 | : Partial;
79 |
80 | type KeysOfUnion = T extends T ? keyof T : never;
81 | export type Exact = P extends Builtin
82 | ? P
83 | : P & { [K in keyof P]: Exact } & Record<
84 | Exclude>,
85 | never
86 | >;
87 |
88 | if (_m0.util.Long !== Long) {
89 | _m0.util.Long = Long as any;
90 | _m0.configure();
91 | }
92 |
--------------------------------------------------------------------------------