yaak/src-web/components/EnvironmentEditor.tsx

import type { Environment } from '@yaakapp-internal/models';
import { patchModel } from '@yaakapp-internal/models';
import type { GenericCompletionOption } from '@yaakapp-internal/plugins';
import classNames from 'classnames';
import { useCallback, useMemo } from 'react';
import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
import { useIsEncryptionEnabled } from '../hooks/useIsEncryptionEnabled';
import { useKeyValue } from '../hooks/useKeyValue';
import { useRandomKey } from '../hooks/useRandomKey';
import { analyzeTemplate, convertTemplateToSecure } from '../lib/encryption';
import { isBaseEnvironment } from '../lib/model_util';
import {
  setupOrConfigureEncryption,
  withEncryptionEnabled,
} from '../lib/setupOrConfigureEncryption';
import { DismissibleBanner } from './core/DismissibleBanner';
import type { GenericCompletionConfig } from './core/Editor/genericCompletion';
import { Heading } from './core/Heading';
import type { PairEditorHandle, PairWithId } from './core/PairEditor';
import { ensurePairId } from './core/PairEditor.util';
import { PairOrBulkEditor } from './core/PairOrBulkEditor';
import { PillButton } from './core/PillButton';
import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
import { EnvironmentSharableTooltip } from './EnvironmentSharableTooltip';

interface Props {
  environment: Environment;
  hideName?: boolean;
  className?: string;
  setRef?: (n: PairEditorHandle | null) => void;
}

export function EnvironmentEditor({ environment, hideName, className, setRef }: Props) {
  const workspaceId = environment.workspaceId;
  const isEncryptionEnabled = useIsEncryptionEnabled();
  const valueVisibility = useKeyValue<boolean>({
    namespace: 'global',
    key: ['environmentValueVisibility', workspaceId],
    fallback: false,
  });
  const { allEnvironments } = useEnvironmentsBreakdown();
  const handleChange = useCallback(
    (variables: PairWithId[]) => patchModel(environment, { variables }),
    [environment],
  );
  const [forceUpdateKey, regenerateForceUpdateKey] = useRandomKey();

  // Gather a list of env names from other environments to help the user get them aligned
  const nameAutocomplete = useMemo<GenericCompletionConfig>(() => {
    const options: GenericCompletionOption[] = [];
    if (isBaseEnvironment(environment)) {
      return { options };
    }

    const allVariables = allEnvironments.flatMap((e) => e?.variables);
    const allVariableNames = new Set(allVariables.map((v) => v?.name));
    for (const name of allVariableNames) {
      const containingEnvs = allEnvironments.filter((e) =>
        e.variables.some((v) => v.name === name),
      );
      const isAlreadyInActive = containingEnvs.find((e) => e.id === environment.id);
      if (isAlreadyInActive) {
        continue;
      }
      options.push({
        label: name,
        type: 'constant',
        detail: containingEnvs.map((e) => e.name).join(', '),
      });
    }
    return { options };
  }, [environment, allEnvironments]);

  const validateName = useCallback((name: string) => {
    // Empty just means the variable doesn't have a name yet and is unusable
    if (name === '') return true;
    return name.match(/^[a-z_][a-z0-9_.-]*$/i) != null;
  }, []);

  const valueType = !isEncryptionEnabled && valueVisibility.value ? 'text' : 'password';
  const allVariableAreEncrypted = useMemo(
    () =>
      environment.variables.every((v) => v.value === '' || analyzeTemplate(v.value) !== 'insecure'),
    [environment.variables],
  );

  const encryptEnvironment = (environment: Environment) => {
    withEncryptionEnabled(async () => {
      const encryptedVariables: PairWithId[] = [];
      for (const variable of environment.variables) {
        const value = variable.value ? await convertTemplateToSecure(variable.value) : '';
        encryptedVariables.push(ensurePairId({ ...variable, value }));
      }
      await handleChange(encryptedVariables);
      regenerateForceUpdateKey();
    });
  };

  return (
    <div
      className={classNames(
        className,
        'h-full grid grid-rows-[auto_minmax(0,1fr)] gap-2 pr-3 pb-3',
      )}
    >
      <div className="flex flex-col gap-4">
        <Heading className="w-full flex items-center gap-0.5">
          <EnvironmentColorIndicator
            className="mr-2"
            clickToEdit
            environment={environment ?? null}
          />
          {!hideName && <div className="mr-2">{environment?.name}</div>}
          {isEncryptionEnabled ? (
            !allVariableAreEncrypted ? (
              <PillButton color="notice" onClick={() => encryptEnvironment(environment)}>
                Encrypt All Variables
              </PillButton>
            ) : (
              <PillButton color="secondary" onClick={setupOrConfigureEncryption}>
                Encryption Settings
              </PillButton>
            )
          ) : (
            <PillButton color="secondary" onClick={() => valueVisibility.set((v) => !v)}>
              {valueVisibility.value ? 'Hide Values' : 'Show Values'}
            </PillButton>
          )}
          <PillButton
            color="secondary"
            rightSlot={<EnvironmentSharableTooltip />}
            onClick={async () => {
              await patchModel(environment, { public: !environment.public });
            }}
          >
            {environment.public ? 'Sharable' : 'Private'}
          </PillButton>
        </Heading>
        {environment.public && (!isEncryptionEnabled || !allVariableAreEncrypted) && (
          <DismissibleBanner
            id={`warn-unencrypted-${environment.id}`}
            color="notice"
            className="mr-3"
            actions={[
              {
                label: 'Encrypt Variables',
                onClick: () => encryptEnvironment(environment),
                color: 'success',
              },
            ]}
          >
            This sharable environment contains plain-text secrets
          </DismissibleBanner>
        )}
      </div>
      <PairOrBulkEditor
        setRef={setRef}
        className="h-full"
        allowMultilineValues
        preferenceName="environment"
        nameAutocomplete={nameAutocomplete}
        namePlaceholder="VAR_NAME"
        nameValidate={validateName}
        valueType={valueType}
        valueAutocompleteVariables="environment"
        valueAutocompleteFunctions
        forceUpdateKey={`${environment.id}::${forceUpdateKey}`}
        pairs={environment.variables}
        onChange={handleChange}
        stateKey={`environment.${environment.id}`}
        forcedEnvironmentId={environment.id}
      />
    </div>
  );
}