From 3e52e3aba4cbb4828d08c9239c2a09696e74c572 Mon Sep 17 00:00:00 2001
From: Alexey Vasyukov <vasyukov.alexey.v@gmail.com>
Date: Tue, 13 Dec 2022 00:42:55 +0300
Subject: [PATCH] fix(#28): add info why client/bidirectional streaming is not
 allowed

---
 .../grpc/send-header/protocol-switch.tsx      | 61 +++++++++++++++++++
 .../grpc/send-header/send-header.basic.tsx    | 31 ++--------
 2 files changed, 65 insertions(+), 27 deletions(-)
 create mode 100644 src/app/pages/tabs-container/collection-types/grpc/send-header/protocol-switch.tsx

diff --git a/src/app/pages/tabs-container/collection-types/grpc/send-header/protocol-switch.tsx b/src/app/pages/tabs-container/collection-types/grpc/send-header/protocol-switch.tsx
new file mode 100644
index 0000000..3eecd31
--- /dev/null
+++ b/src/app/pages/tabs-container/collection-types/grpc/send-header/protocol-switch.tsx
@@ -0,0 +1,61 @@
+import { faGlobe, faWarning } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Container, Spacer, Switch, SwitchEvent, Text, Tooltip, useTheme } from '@nextui-org/react';
+import React from 'react';
+
+import { GrpcMethodType } from '@core/types';
+import { GrpcProtocol, GrpcTab } from '@storage';
+
+export interface ProtocolSwitchProps {
+  tab: GrpcTab<GrpcMethodType>;
+
+  onChange: (event: SwitchEvent) => void;
+}
+
+export const ProtocolSwitch: React.FC<ProtocolSwitchProps> = ({ tab, onChange }) => {
+  const { theme } = useTheme();
+
+  const isGrpcWebAvailable =
+    tab.info.methodType === GrpcMethodType.UNARY ||
+    tab.info.methodType === GrpcMethodType.SERVER_STREAMING;
+
+  let content = (
+    <Text size="$sm">
+      {tab.data.protocol === GrpcProtocol.GRPC_WEB ? 'Using gRPC-Web' : 'Using gRPC'}
+    </Text>
+  );
+
+  if (!isGrpcWebAvailable) {
+    content = (
+      <Container gap={0}>
+        <Text size="$sm">Using gRPC</Text>
+        <Spacer y={0.5} />
+        <Container gap={0} display="flex" alignItems="center">
+          <FontAwesomeIcon icon={faWarning} color={theme?.colors.yellow700.value} />
+          <Spacer x={0.5} />
+          <Text size="$xs">
+            gRPC-Web doesn&apos;t support
+            {tab.info.methodType === GrpcMethodType.CLIENT_STREAMING
+              ? ' client streaming'
+              : ' bidirectional streaming'}
+          </Text>
+        </Container>
+      </Container>
+    );
+  }
+
+  return (
+    <Tooltip content={content} placement="left" enterDelay={500} css={{ width: 'max-content' }}>
+      <Switch
+        size="md"
+        bordered
+        borderWeight="light"
+        color={isGrpcWebAvailable ? 'primary' : 'error'}
+        disabled={!isGrpcWebAvailable}
+        icon={<FontAwesomeIcon icon={faGlobe} />}
+        checked={tab.data.protocol === GrpcProtocol.GRPC_WEB}
+        onChange={onChange}
+      />
+    </Tooltip>
+  );
+};
diff --git a/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx b/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx
index d877b33..ebc4a25 100644
--- a/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx
+++ b/src/app/pages/tabs-container/collection-types/grpc/send-header/send-header.basic.tsx
@@ -1,6 +1,6 @@
-import { faFloppyDisk, faGlobe, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
+import { faFloppyDisk, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Container, Input, Spacer, Switch, SwitchEvent, Tooltip } from '@nextui-org/react';
+import { Button, Container, Input, Spacer, SwitchEvent, Tooltip } from '@nextui-org/react';
 import React, { PropsWithChildren } from 'react';
 import { MultiValue, SingleValue } from 'react-select';
 
@@ -17,6 +17,7 @@ import {
 
 import { CreateEnvironmentModal } from '../environments';
 import { TlsSettingsModal } from '../tls';
+import { ProtocolSwitch } from './protocol-switch';
 
 export interface SendHeaderProps<T extends GrpcMethodType> {
   tab: GrpcTab<T>;
@@ -191,31 +192,7 @@ export const SendHeader: React.FC<PropsWithChildren<SendHeaderProps<GrpcMethodTy
           }
         />
         <Spacer x={0.5} />
-        <Tooltip
-          content={tab.data.protocol === GrpcProtocol.GRPC_WEB ? 'Using gRPC-Web' : 'Using gRPC'}
-          placement="left"
-          enterDelay={500}
-          css={{ width: 'max-content' }}
-        >
-          <Switch
-            size="md"
-            bordered
-            borderWeight="light"
-            color={
-              tab.info.methodType !== GrpcMethodType.UNARY &&
-              tab.info.methodType !== GrpcMethodType.SERVER_STREAMING
-                ? 'error'
-                : 'primary'
-            }
-            disabled={
-              tab.info.methodType !== GrpcMethodType.UNARY &&
-              tab.info.methodType !== GrpcMethodType.SERVER_STREAMING
-            }
-            icon={<FontAwesomeIcon icon={faGlobe} />}
-            checked={tab.data.protocol === GrpcProtocol.GRPC_WEB}
-            onChange={handleGrpcProtocolChange}
-          />
-        </Tooltip>
+        <ProtocolSwitch tab={tab} onChange={handleGrpcProtocolChange} />
         {children}
       </Container>
       <CreateEnvironmentModal