refactor(ui): migrate env var field to react [EE-4853] (#8451)

app/react/components/form-components/EnvironmentVariablesFieldset/AdvancedMode.tsx

@@ -0,0 +1,50 @@
+import { List } from 'lucide-react';
+
+import { CodeEditor } from '@@/CodeEditor';
+import { TextTip } from '@@/Tip/TextTip';
+import { Button } from '@@/buttons';
+
+import { convertToArrayOfStrings, parseDotEnvFile } from './utils';
+import { type Value } from './types';
+
+export function AdvancedMode({
+  value,
+  onChange,
+  onSimpleModeClick,
+}: {
+  value: Value;
+  onChange: (value: Value) => void;
+  onSimpleModeClick: () => void;
+}) {
+  const editorValue = convertToArrayOfStrings(value).join('\n');
+
+  return (
+    <>
+      <Button
+        size="small"
+        color="link"
+        icon={List}
+        className="!ml-0 p-0 hover:no-underline"
+        onClick={onSimpleModeClick}
+      >
+        Simple mode
+      </Button>
+
+      <TextTip color="blue" inline={false}>
+        Switch to simple mode to define variables line by line, or load from
+        .env file
+      </TextTip>
+
+      <CodeEditor
+        id="environment-variables-editor"
+        value={editorValue}
+        onChange={handleEditorChange}
+        placeholder="e.g. key=value"
+      />
+    </>
+  );
+
+  function handleEditorChange(value: string) {
+    onChange(parseDotEnvFile(value));
+  }
+}

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesFieldset.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { array, object, SchemaOf, string } from 'yup';
+
+import { ArrayError } from '../InputList/InputList';
+
+import { AdvancedMode } from './AdvancedMode';
+import { SimpleMode } from './SimpleMode';
+import { Value } from './types';
+
+export function EnvironmentVariablesFieldset({
+  onChange,
+  values,
+  errors,
+}: {
+  values: Value;
+  onChange(value: Value): void;
+  errors?: ArrayError<Value>;
+}) {
+  const [simpleMode, setSimpleMode] = useState(true);
+
+  return (
+    <div className="col-sm-12">
+      {simpleMode ? (
+        <SimpleMode
+          onAdvancedModeClick={() => setSimpleMode(false)}
+          onChange={onChange}
+          value={values}
+          errors={errors}
+        />
+      ) : (
+        <AdvancedMode
+          onSimpleModeClick={() => setSimpleMode(true)}
+          onChange={onChange}
+          value={values}
+        />
+      )}
+    </div>
+  );
+}
+
+export function envVarValidation(): SchemaOf<Value> {
+  return array(
+    object({
+      name: string().required('Name is required'),
+      value: string().default(''),
+    })
+  );
+}

app/react/components/form-components/EnvironmentVariablesFieldset/EnvironmentVariablesPanel.tsx

@@ -0,0 +1,48 @@
+import { FormSection } from '@@/form-components/FormSection';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { ArrayError } from '../InputList/InputList';
+
+import { Value } from './types';
+import { EnvironmentVariablesFieldset } from './EnvironmentVariablesFieldset';
+
+export function EnvironmentVariablesPanel({
+  explanation,
+  onChange,
+  values,
+  showHelpMessage,
+  errors,
+}: {
+  explanation?: string;
+  values: Value;
+  onChange(value: Value): void;
+  showHelpMessage?: boolean;
+  errors?: ArrayError<Value>;
+}) {
+  return (
+    <FormSection title="Environment variables">
+      <div className="form-group">
+        {!!explanation && (
+          <div className="col-sm-12 environment-variables-panel--explanation">
+            {explanation}
+          </div>
+        )}
+
+        <EnvironmentVariablesFieldset
+          values={values}
+          onChange={onChange}
+          errors={errors}
+        />
+
+        {showHelpMessage && (
+          <div className="col-sm-12">
+            <TextTip color="blue" inline={false}>
+              Environment changes will not take effect until redeployment occurs
+              manually or via webhook.
+            </TextTip>
+          </div>
+        )}
+      </div>
+    </FormSection>
+  );
+}

app/react/components/form-components/EnvironmentVariablesFieldset/SimpleMode.tsx

@@ -0,0 +1,155 @@
+import { Edit, Plus } from 'lucide-react';
+import { useState } from 'react';
+
+import { readFileAsText } from '@/portainer/services/fileUploadReact';
+
+import { Button } from '@@/buttons';
+import { TextTip } from '@@/Tip/TextTip';
+import { FileUploadField } from '@@/form-components/FileUpload';
+import { InputList } from '@@/form-components/InputList';
+import { ArrayError, ItemProps } from '@@/form-components/InputList/InputList';
+import { InputLabeled } from '@@/form-components/Input/InputLabeled';
+
+import { FormError } from '../FormError';
+
+import { type EnvVar, type Value } from './types';
+import { parseDotEnvFile } from './utils';
+
+export function SimpleMode({
+  value,
+  onChange,
+  onAdvancedModeClick,
+  errors,
+}: {
+  value: Value;
+  onChange: (value: Value) => void;
+  onAdvancedModeClick: () => void;
+  errors?: ArrayError<Value>;
+}) {
+  return (
+    <>
+      <Button
+        size="small"
+        color="link"
+        icon={Edit}
+        className="!ml-0 p-0 hover:no-underline"
+        onClick={onAdvancedModeClick}
+      >
+        Advanced mode
+      </Button>
+
+      <TextTip color="blue" inline={false}>
+        Switch to advanced mode to copy & paste multiple variables
+      </TextTip>
+
+      <InputList
+        aria-label="environment variables list"
+        onChange={onChange}
+        value={value}
+        isAddButtonHidden
+        item={Item}
+        errors={errors}
+      />
+
+      <div className="flex gap-2">
+        <Button
+          onClick={() => onChange([...value, { name: '', value: '' }])}
+          color="default"
+          icon={Plus}
+        >
+          Add an environment variable
+        </Button>
+
+        <FileEnv onChooseFile={(add) => onChange([...value, ...add])} />
+      </div>
+    </>
+  );
+}
+
+function Item({
+  item,
+  onChange,
+  disabled,
+  error,
+  readOnly,
+  index,
+}: ItemProps<EnvVar>) {
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="flex w-full items-center gap-2">
+        <InputLabeled
+          className="w-1/2"
+          label="name"
+          value={item.name}
+          onChange={(e) => handleChange({ name: e.target.value })}
+          disabled={disabled}
+          readOnly={readOnly}
+          placeholder="e.g. FOO"
+          size="small"
+          id={`env-name${index}`}
+        />
+        <InputLabeled
+          className="w-1/2"
+          label="value"
+          value={item.value}
+          onChange={(e) => handleChange({ value: e.target.value })}
+          disabled={disabled}
+          readOnly={readOnly}
+          placeholder="e.g. bar"
+          size="small"
+          id={`env-value${index}`}
+        />
+      </div>
+
+      {!!error && (
+        <div className="absolute -bottom-5">
+          <FormError className="m-0">{Object.values(error)[0]}</FormError>
+        </div>
+      )}
+    </div>
+  );
+
+  function handleChange(partial: Partial<EnvVar>) {
+    onChange({ ...item, ...partial });
+  }
+}
+
+function FileEnv({ onChooseFile }: { onChooseFile: (file: Value) => void }) {
+  const [file, setFile] = useState<File | null>(null);
+
+  const fileTooBig = file && file.size > 1024 * 1024;
+
+  return (
+    <>
+      <FileUploadField
+        inputId="env-file-upload"
+        onChange={handleChange}
+        title="Load variables from .env file"
+        accept=".env"
+        value={file}
+        color="default"
+      />
+
+      {fileTooBig && (
+        <TextTip color="orange" inline>
+          File too large! Try uploading a file smaller than 1MB
+        </TextTip>
+      )}
+    </>
+  );
+
+  async function handleChange(file: File) {
+    setFile(file);
+    if (!file) {
+      return;
+    }
+
+    const text = await readFileAsText(file);
+    if (!text) {
+      return;
+    }
+
+    const parsed = parseDotEnvFile(text);
+    onChooseFile(parsed);
+  }
+}

app/react/components/form-components/EnvironmentVariablesFieldset/index.ts

@@ -0,0 +1,8 @@
+export {
+  EnvironmentVariablesFieldset,
+  envVarValidation,
+} from './EnvironmentVariablesFieldset';
+
+export { EnvironmentVariablesPanel } from './EnvironmentVariablesPanel';
+
+export { type Value as EnvVarValues } from './types';

app/react/components/form-components/EnvironmentVariablesFieldset/types.ts

@@ -0,0 +1,6 @@
+export interface EnvVar {
+  name: string;
+  value?: string;
+}
+
+export type Value = Array<EnvVar>;

app/react/components/form-components/EnvironmentVariablesFieldset/utils.ts

@@ -0,0 +1,53 @@
+import _ from 'lodash';
+
+import { EnvVar } from './types';
+
+export const KEY_REGEX = /(.+?)/.source;
+export const VALUE_REGEX = /(.*)?/.source;
+
+const KEY_VALUE_REGEX = new RegExp(`^(${KEY_REGEX})\\s*=(${VALUE_REGEX})$`);
+const NEWLINES_REGEX = /\n|\r|\r\n/;
+
+export function parseDotEnvFile(src: string) {
+  return parseArrayOfStrings(
+    _.compact(src.split(NEWLINES_REGEX))
+      .map((v) => v.trim())
+      .filter((v) => !v.startsWith('#') && v !== '')
+  );
+}
+
+export function parseArrayOfStrings(array: Array<string> = []): Array<EnvVar> {
+  if (!array) {
+    return [];
+  }
+
+  return _.compact(
+    array.map((variableString) => {
+      if (!variableString.includes('=')) {
+        return { name: variableString };
+      }
+
+      const parsedKeyValArr = variableString.trim().match(KEY_VALUE_REGEX);
+      if (parsedKeyValArr == null || parsedKeyValArr.length < 4) {
+        return null;
+      }
+
+      return {
+        name: parsedKeyValArr[1].trim(),
+        value: parsedKeyValArr[3].trim() || '',
+      };
+    })
+  );
+}
+
+export function convertToArrayOfStrings(array: Array<EnvVar>) {
+  if (!array) {
+    return [];
+  }
+
+  return array
+    .filter((variable) => variable.name)
+    .map(({ name, value }) =>
+      value || value === '' ? `${name}=${value}` : name
+    );
+}