Request Inheritance (#209)

src-web/components/HttpAuthenticationEditor.tsx

@@ -1,34 +1,84 @@
-import type { GrpcRequest, HttpRequest, WebsocketRequest } from '@yaakapp-internal/models';
+import type {
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from '@yaakapp-internal/models';
 import { patchModel } from '@yaakapp-internal/models';
 import React, { useCallback } from 'react';
+import { openFolderSettings } from '../commands/openFolderSettings';
+import { openWorkspaceSettings } from '../commands/openWorkspaceSettings';
 import { useHttpAuthenticationConfig } from '../hooks/useHttpAuthenticationConfig';
+import { useInheritedAuthentication } from '../hooks/useInheritedAuthentication';
+import { resolvedModelName } from '../lib/resolvedModelName';
 import { Checkbox } from './core/Checkbox';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
+import { InlineCode } from './core/InlineCode';
 import { HStack } from './core/Stacks';
 import { DynamicForm } from './DynamicForm';
 import { EmptyStateText } from './EmptyStateText';
 
 interface Props {
-  request: HttpRequest | GrpcRequest | WebsocketRequest;
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Workspace;
 }
 
-export function HttpAuthenticationEditor({ request }: Props) {
+export function HttpAuthenticationEditor({ model }: Props) {
+  const inheritedAuth = useInheritedAuthentication(model);
   const authConfig = useHttpAuthenticationConfig(
-    request.authenticationType,
-    request.authentication,
-    request.id,
+    model.authenticationType,
+    model.authentication,
+    model.id,
   );
 
   const handleChange = useCallback(
-    (authentication: Record<string, boolean>) => patchModel(request, { authentication }),
-    [request],
+    async (authentication: Record<string, boolean>) => await patchModel(model, { authentication }),
+    [model],
   );
 
-  if (authConfig.data == null) {
-    return <EmptyStateText>No Authentication {request.authenticationType}</EmptyStateText>;
+  if (model.authenticationType === 'none') {
+    return <EmptyStateText>No authentication</EmptyStateText>;
+  }
+
+  if (model.authenticationType != null && authConfig.data == null) {
+    return (
+      <EmptyStateText>
+        Unknown authentication <InlineCode>{authConfig.data}</InlineCode>
+      </EmptyStateText>
+    );
+  }
+
+  if (inheritedAuth == null) {
+    return <EmptyStateText>Authentication not configured</EmptyStateText>;
+  }
+
+  if (inheritedAuth.authenticationType === 'none') {
+    return <EmptyStateText>No authentication</EmptyStateText>;
+  }
+
+  const wasAuthInherited = inheritedAuth?.id !== model.id;
+  if (wasAuthInherited) {
+    const name = resolvedModelName(inheritedAuth);
+    const cta = inheritedAuth.model === 'workspace' ? 'Workspace' : name;
+    return (
+      <EmptyStateText>
+        <p>
+          Inherited from{' '}
+          <button
+            className="underline hover:text-text"
+            onClick={() => {
+              if (inheritedAuth.model === 'folder') openFolderSettings(inheritedAuth.id, 'auth');
+              else openWorkspaceSettings('auth');
+            }}
+          >
+            {cta}
+          </button>
+        </p>
+      </EmptyStateText>
+    );
   }
 
   return (
@@ -36,17 +86,17 @@ export function HttpAuthenticationEditor({ request }: Props) {
       <HStack space={2} className="mb-2" alignItems="center">
         <Checkbox
           className="w-full"
-          checked={!request.authentication.disabled}
-          onChange={(disabled) => handleChange({ ...request.authentication, disabled: !disabled })}
+          checked={!model.authentication.disabled}
+          onChange={(disabled) => handleChange({ ...model.authentication, disabled: !disabled })}
           title="Enabled"
         />
-        {authConfig.data.actions && authConfig.data.actions.length > 0 && (
+        {authConfig.data?.actions && authConfig.data.actions.length > 0 && (
           <Dropdown
             items={authConfig.data.actions.map(
               (a): DropdownItem => ({
                 label: a.label,
                 leftSlot: a.icon ? <Icon icon={a.icon} /> : null,
-                onSelect: () => a.call(request),
+                onSelect: () => a.call(model),
               }),
             )}
           >
@@ -55,12 +105,12 @@ export function HttpAuthenticationEditor({ request }: Props) {
         )}
       </HStack>
       <DynamicForm
-        disabled={request.authentication.disabled}
+        disabled={model.authentication.disabled}
         autocompleteVariables
         autocompleteFunctions
-        stateKey={`auth.${request.id}.${request.authenticationType}`}
-        inputs={authConfig.data.args}
-        data={request.authentication}
+        stateKey={`auth.${model.id}.${model.authenticationType}`}
+        inputs={authConfig.data?.args ?? []}
+        data={model.authentication}
         onChange={handleChange}
       />
     </div>