yaak/src-web/components/FolderSettingsDialog.tsx

import {
  createWorkspaceModel,
  foldersAtom,
  patchModel,
} from '@yaakapp-internal/models';
import { useAtomValue } from 'jotai';
import { Fragment, useMemo } from 'react';
import { useAuthTab } from '../hooks/useAuthTab';
import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
import { useHeadersTab } from '../hooks/useHeadersTab';
import { useInheritedHeaders } from '../hooks/useInheritedHeaders';
import { useModelAncestors } from '../hooks/useModelAncestors';
import { deleteModelWithConfirm } from '../lib/deleteModelWithConfirm';
import { hideDialog } from '../lib/dialog';
import { CopyIconButton } from './CopyIconButton';
import { Button } from './core/Button';
import { CountBadge } from './core/CountBadge';
import { Icon } from './core/Icon';
import { InlineCode } from './core/InlineCode';
import { Input } from './core/Input';
import { Link } from './core/Link';
import { HStack, 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';

interface Props {
  folderId: string | null;
  tab?: FolderSettingsTab;
}

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
  | typeof TAB_VARIABLES;

export function FolderSettingsDialog({ folderId, tab }: Props) {
  const folders = useAtomValue(foldersAtom);
  const folder = folders.find((f) => f.id === folderId) ?? null;
  const ancestors = useModelAncestors(folder);
  const breadcrumbs = useMemo(() => ancestors.toReversed(), [ancestors]);
  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 [];

    return [
      {
        value: TAB_GENERAL,
        label: 'General',
      },
      ...headersTab,
      ...authTab,
      {
        value: TAB_VARIABLES,
        label: 'Variables',
        rightSlot: numVars > 0 ? <CountBadge count={numVars} /> : null,
      },
    ];
  }, [authTab, folder, headersTab, numVars]);

  if (folder == null) return null;

  return (
    <div className="h-full flex flex-col">
      <div className="flex items-center gap-3 px-6 pr-10 mt-4 mb-2 min-w-0 text-xl">
        <Icon icon="folder_cog" size="lg" color="secondary" className="flex-shrink-0" />
        <div className="flex items-center gap-1.5 font-semibold text-text min-w-0 overflow-hidden flex-1">
          {breadcrumbs.map((item, index) => (
            <Fragment key={item.id}>
              {index > 0 && (
                <Icon
                  icon="chevron_right"
                  size="lg"
                  className="opacity-50 flex-shrink-0"
                />
              )}
              <span className="text-text-subtle truncate min-w-0" title={item.name}>
                {item.name}
              </span>
            </Fragment>
          ))}
          {breadcrumbs.length > 0 && (
            <Icon icon="chevron_right" size="lg" className="opacity-50 flex-shrink-0" />
          )}
          <span
            className="whitespace-nowrap"
            title={folder.name}
          >
            {folder.name}
          </span>
        </div>
      </div>

      <Tabs
        defaultValue={tab ?? TAB_GENERAL}
        label="Folder Settings"
        className="pt-2 pb-2 pl-3 pr-1 flex-1"
        layout="horizontal"
        addBorders
        tabs={tabs}
      >
        <TabContent value={TAB_AUTH} className="overflow-y-auto h-full px-4">
          <HttpAuthenticationEditor model={folder} />
        </TabContent>
        <TabContent value={TAB_GENERAL} className="overflow-y-auto h-full px-4">
          <div className="grid grid-rows-[auto_minmax(0,1fr)_auto] gap-3 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="border border-border px-2"
              defaultValue={folder.description}
              stateKey={`description.${folder.id}`}
              onChange={(description) => patchModel(folder, { description })}
            />
            <HStack alignItems="center" justifyContent="between" className="w-full">
              <Button
                onClick={async () => {
                  const didDelete = await deleteModelWithConfirm(folder);
                  if (didDelete) {
                    hideDialog('folder-settings');
                  }
                }}
                color="danger"
                variant="border"
                size="xs"
              >
                Delete Folder
              </Button>
              <InlineCode className="flex gap-1 items-center text-primary pl-2.5">
                {folder.id}
                <CopyIconButton
                  className="opacity-70 !text-primary"
                  size="2xs"
                  iconSize="sm"
                  title="Copy folder ID"
                  text={folder.id}
                />
              </InlineCode>
            </HStack>
          </div>
        </TabContent>
        <TabContent value={TAB_HEADERS} className="overflow-y-auto h-full px-4">
          <HeadersEditor
            inheritedHeaders={inheritedHeaders}
            forceUpdateKey={folder.id}
            headers={folder.headers}
            onChange={(headers) => patchModel(folder, { headers })}
            stateKey={`headers.${folder.id}`}
          />
        </TabContent>
        <TabContent value={TAB_VARIABLES} className="overflow-y-auto h-full px-4">
          {folderEnvironment == null ? (
            <EmptyStateText>
              <VStack alignItems="center" space={1.5}>
                <p>
                  Override{' '}
                  <Link href="https://yaak.app/docs/using-yaak/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>
    </div>
  );
}