Better inheritance empty state

src-web/components/FolderSettingsDialog.tsx

@@ -59,18 +59,17 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
         <HttpAuthenticationEditor model={folder} />
       </TabContent>
       <TabContent value={TAB_GENERAL} className="pt-3 overflow-y-auto h-full px-4">
-        <VStack space={3} className="pb-3">
+        <VStack space={3} className="pb-3 h-full">
           <Input
             label="Folder Name"
             defaultValue={folder.name}
             onChange={(name) => patchModel(folder, { name })}
             stateKey={`name.${folder.id}`}
           />
-
           <MarkdownEditor
             name="folder-description"
             placeholder="Folder description"
-            className="min-h-[10rem] border border-border px-2"
+            className="border border-border px-2"
             defaultValue={folder.description}
             stateKey={`description.${folder.id}`}
             onChange={(description) => patchModel(folder, { description })}

src-web/components/HttpAuthenticationEditor.tsx

@@ -18,6 +18,7 @@ import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
+import { Link } from './core/Link';
 import { HStack } from './core/Stacks';
 import { DynamicForm } from './DynamicForm';
 import { EmptyStateText } from './EmptyStateText';
@@ -52,7 +53,20 @@ export function HttpAuthenticationEditor({ model }: Props) {
   }
 
   if (inheritedAuth == null) {
-    return <EmptyStateText>Authentication not configured</EmptyStateText>;
+    if (model.model === 'workspace' || model.model === 'folder') {
+      return (
+        <EmptyStateText className="flex-col gap-1">
+          <p>
+            Apply auth to all requests in <strong>{resolvedModelName(model)}</strong>
+          </p>
+          <Link href="https://feedback.yaak.app/help/articles/2112119-request-inheritance">
+            Documentation
+          </Link>
+        </EmptyStateText>
+      );
+    } else {
+      return <EmptyStateText>Authentication not configured</EmptyStateText>;
+    }
   }
 
   if (inheritedAuth.authenticationType === 'none') {

src-web/components/WorkspaceSettingsDialog.tsx

@@ -26,15 +26,22 @@ interface Props {
 }
 
 const TAB_AUTH = 'auth';
+const TAB_DESCRIPTION = 'description';
 const TAB_HEADERS = 'headers';
 const TAB_GENERAL = 'general';
 
-export type WorkspaceSettingsTab = typeof TAB_AUTH | typeof TAB_HEADERS | typeof TAB_GENERAL;
+export type WorkspaceSettingsTab =
+  | typeof TAB_AUTH
+  | typeof TAB_HEADERS
+  | typeof TAB_GENERAL
+  | typeof TAB_DESCRIPTION;
+
+const DEFAULT_TAB: WorkspaceSettingsTab = TAB_DESCRIPTION;
 
 export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
   const workspace = useAtomValue(workspacesAtom).find((w) => w.id === workspaceId);
   const workspaceMeta = useAtomValue(workspaceMetasAtom).find((m) => m.workspaceId === workspaceId);
-  const [activeTab, setActiveTab] = useState<string>(tab ?? TAB_GENERAL);
+  const [activeTab, setActiveTab] = useState<string>(tab ?? DEFAULT_TAB);
   const authTab = useAuthTab(TAB_AUTH, workspace ?? null);
   const headersTab = useHeadersTab(TAB_HEADERS, workspace ?? null);
   const inheritedHeaders = useInheritedHeaders(workspace ?? null);
@@ -61,7 +68,15 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
       label="Folder Settings"
       className="px-1.5 pb-2"
       addBorders
-      tabs={[{ value: TAB_GENERAL, label: 'General' }, ...authTab, ...headersTab]}
+      tabs={[
+        { value: TAB_DESCRIPTION, label: 'Description' },
+        {
+          value: TAB_GENERAL,
+          label: 'General',
+        },
+        ...authTab,
+        ...headersTab,
+      ]}
     >
       <TabContent value={TAB_AUTH} className="pt-3 overflow-y-auto h-full px-4">
         <HttpAuthenticationEditor model={workspace} />
@@ -75,7 +90,7 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
           stateKey={`headers.${workspace.id}`}
         />
       </TabContent>
-      <TabContent value={TAB_GENERAL} className="pt-3 overflow-y-auto h-full px-4">
+      <TabContent value={TAB_DESCRIPTION} className="pt-3 overflow-y-auto h-full px-4">
         <VStack space={4} alignItems="start" className="pb-3 h-full">
           <PlainInput
             required
@@ -90,13 +105,16 @@ export function WorkspaceSettingsDialog({ workspaceId, hide, tab }: Props) {
           <MarkdownEditor
             name="workspace-description"
             placeholder="Workspace description"
-            className="min-h-[3rem] max-h-[25rem] border border-border px-2"
+            className="border border-border px-2"
             defaultValue={workspace.description}
             stateKey={`description.${workspace.id}`}
             onChange={(description) => patchModel(workspace, { description })}
             heightMode="auto"
           />
-
+        </VStack>
+      </TabContent>
+      <TabContent value={TAB_GENERAL} className="pt-3 overflow-y-auto h-full px-4">
+        <VStack space={4} alignItems="start" className="pb-3 h-full">
           <SyncToFilesystemSetting
             value={{ filePath: workspaceMeta.settingSyncDir }}
             onCreateNewWorkspace={hide}