gRPC authentication

src-web/components/BasicAuth.tsx

@@ -1,49 +1,64 @@
+import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
 import { useUpdateHttpRequest } from '../hooks/useUpdateHttpRequest';
-import type { HttpRequest } from '../lib/models';
+import type { GrpcRequest, HttpRequest } from '../lib/models';
 import { Input } from './core/Input';
 import { VStack } from './core/Stacks';
 
-interface Props {
-  requestId: string;
-  authentication: HttpRequest['authentication'];
+interface Props<T> {
+  request: T;
 }
 
-export function BasicAuth({ requestId, authentication }: Props) {
-  const updateRequest = useUpdateHttpRequest(requestId);
+export function BasicAuth<T extends HttpRequest | GrpcRequest>({ request }: Props<T>) {
+  const updateHttpRequest = useUpdateHttpRequest(request.id);
+  const updateGrpcRequest = useUpdateGrpcRequest(request.id);
 
   return (
     <VStack className="my-2" space={2}>
       <Input
         useTemplating
         autocompleteVariables
-        forceUpdateKey={requestId}
+        forceUpdateKey={request.id}
         placeholder="username"
         label="Username"
         name="username"
         size="sm"
-        defaultValue={`${authentication.username}`}
+        defaultValue={`${request.authentication.username}`}
         onChange={(username: string) => {
-          updateRequest.mutate((r) => ({
-            ...r,
-            authentication: { password: r.authentication.password, username },
-          }));
+          if (request.model === 'http_request') {
+            updateHttpRequest.mutate((r) => ({
+              ...r,
+              authentication: { password: r.authentication.password, username },
+            }));
+          } else {
+            updateGrpcRequest.mutate((r) => ({
+              ...r,
+              authentication: { password: r.authentication.password, username },
+            }));
+          }
         }}
       />
       <Input
         useTemplating
         autocompleteVariables
-        forceUpdateKey={requestId}
+        forceUpdateKey={request?.id}
         placeholder="password"
         label="Password"
         name="password"
         size="sm"
         type="password"
-        defaultValue={`${authentication.password}`}
+        defaultValue={`${request.authentication.password}`}
         onChange={(password: string) => {
-          updateRequest.mutate((r) => ({
-            ...r,
-            authentication: { username: r.authentication.username, password },
-          }));
+          if (request.model === 'http_request') {
+            updateHttpRequest.mutate((r) => ({
+              ...r,
+              authentication: { username: r.authentication.username, password },
+            }));
+          } else {
+            updateGrpcRequest.mutate((r) => ({
+              ...r,
+              authentication: { username: r.authentication.username, password },
+            }));
+          }
         }}
       />
     </VStack>