Merge pull request #256

* Update environment model to get ready for request/folder environments

* Folder environments in UI

* Folder environments working

* Tweaks and fixes

* Tweak environment encryption UX

* Tweak environment encryption UX

* Address comments

* Update fn name

* Add tsc back to lint rules

* Update src-web/components/EnvironmentEditor.tsx

* Merge remote-tracking branch 'origin/folder-environments' into folder…

src-web/components/FolderSettingsDialog.tsx

@@ -1,13 +1,19 @@
-import { foldersAtom, patchModel } from '@yaakapp-internal/models';
+import { createWorkspaceModel, foldersAtom, patchModel } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useAuthTab } from '../hooks/useAuthTab';
+import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useHeadersTab } from '../hooks/useHeadersTab';
 import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
+import { Button } from './core/Button';
+import { CountBadge } from './core/CountBadge';
 import { Input } from './core/Input';
+import { Link } from './core/Link';
 import { VStack } from './core/Stacks';
 import type { TabItem } from './core/Tabs/Tabs';
 import { TabContent, Tabs } from './core/Tabs/Tabs';
+import { EmptyStateText } from './EmptyStateText';
+import { EnvironmentEditor } from './EnvironmentEditor';
 import { HeadersEditor } from './HeadersEditor';
 import { HttpAuthenticationEditor } from './HttpAuthenticationEditor';
 import { MarkdownEditor } from './MarkdownEditor';
@@ -19,9 +25,10 @@ interface Props {
 
 const TAB_AUTH = 'auth';
 const TAB_HEADERS = 'headers';
+const TAB_VARIABLES = 'variables';
 const TAB_GENERAL = 'general';
 
-export type FolderSettingsTab = typeof TAB_AUTH | typeof TAB_HEADERS | typeof TAB_GENERAL;
+export type FolderSettingsTab = typeof TAB_AUTH | typeof TAB_HEADERS | typeof TAB_GENERAL | typeof TAB_VARIABLES;
 
 export function FolderSettingsDialog({ folderId, tab }: Props) {
   const folders = useAtomValue(foldersAtom);
@@ -30,6 +37,11 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
   const authTab = useAuthTab(TAB_AUTH, folder);
   const headersTab = useHeadersTab(TAB_HEADERS, folder);
   const inheritedHeaders = useInheritedHeaders(folder);
+  const environments = useEnvironmentsBreakdown();
+  const folderEnvironment = environments.allEnvironments.find(
+    (e) => e.parentModel === 'folder' && e.parentId === folderId,
+  );
+  const numVars = (folderEnvironment?.variables ?? []).filter((v) => v.name).length;
 
   const tabs = useMemo<TabItem[]>(() => {
     if (folder == null) return [];
@@ -39,10 +51,15 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
         value: TAB_GENERAL,
         label: 'General',
       },
-      ...authTab,
       ...headersTab,
+      ...authTab,
+      {
+        value: TAB_VARIABLES,
+        label: 'Variables',
+        rightSlot: numVars > 0 ? <CountBadge count={numVars} /> : null,
+      },
     ];
-  }, [authTab, folder, headersTab]);
+  }, [authTab, folder, headersTab, numVars]);
 
   if (folder == null) return null;
 
@@ -85,6 +102,38 @@ export function FolderSettingsDialog({ folderId, tab }: Props) {
           stateKey={`headers.${folder.id}`}
         />
       </TabContent>
+      <TabContent value={TAB_VARIABLES} className="pt-3 overflow-y-auto h-full px-4">
+        {folderEnvironment == null ? (
+          <EmptyStateText>
+            <VStack alignItems="center" space={1.5}>
+              <p>
+                Override{' '}
+                <Link href="https://feedback.yaak.app/help/articles/3284139-environments-and-variables">
+                  Variables
+                </Link>{' '}
+                for requests within this folder.
+              </p>
+              <Button
+                variant="border"
+                size="sm"
+                onClick={async () => {
+                  await createWorkspaceModel({
+                    workspaceId: folder.workspaceId,
+                    parentModel: 'folder',
+                    parentId: folder.id,
+                    model: 'environment',
+                    name: 'Folder Environment',
+                  });
+                }}
+              >
+                Create Folder Environment
+              </Button>
+            </VStack>
+          </EmptyStateText>
+        ) : (
+          <EnvironmentEditor hideName environment={folderEnvironment} />
+        )}
+      </TabContent>
     </Tabs>
   );
 }